dtoro
a0566ce64c
apps/web — Next.js 16 + TypeScript + React 19 (no Tailwind) M1 Visual port - Manuscript theme + base styles ported verbatim from design-source - 100dvh layout with internal scroll regions (rail / narrative / dock thread) - TopBar, LeftRail (collapsible sections + collapsed strip), CanvasHeader, StatusBar, EditorShell composing the dual-canvas - SocratesDock (subtle/default/prominent) with bubbles + numbered options - Sigil (Σ + laurel) used across editor and seed screens - SeedScreen with emerging-seed rail, mini-graph, confidence bar, thread, typing indicator, input row - Routes: / (homepage), /editor/[projectId], /seed - Aristotle fixture in lib/fixtures (ported from data.js) M2 Real text editor - TipTap (StarterKit + custom Chip atom inline node + ReactNodeViewRenderer) - Slash-menu insertion via @tiptap/suggestion with arrow / number-key shortcuts - ChipFocusContext bridges narrative ↔ diagram hover/selection across the TipTap render boundary - fixtureToDoc converts the fixture narrative → ProseMirror JSON M3 Real diagram - React Flow (@xyflow/react) custom node (block / actor / constraint / system) matching prototype's softened look - Custom edge with bezier path + label renderer (association / composition / constraint variants) - Drag-create from a left-side palette via HTML5 DnD + screenToFlowPosition - NodeInspector panel: edit kind / label / properties (or expression for constraints); delete cascades to incident edges - Bidirectional focus highlighting between chips (narrative) and blocks (diagram) - Removed redundant legend (stereotype labels on nodes serve same purpose) State for M3 lives in component memory; persistence + bidirectional sync land in M4–M5.
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
// Active-thread dock with Sigil header, conversation bubbles, numbered options.
|
||
// Ported from docs/design-source/socrata/project/socrates.jsx (SocratesDock).
|
||
// "subtle" presence renders a floating sigil + count badge.
|
||
|
||
import { Sigil } from "./Sigil";
|
||
import type { FixtureSocratesTurn } from "../../lib/fixtures/aristotle";
|
||
|
||
export type SocratesPresence = "subtle" | "default" | "prominent";
|
||
export type Density = "comfortable" | "compact";
|
||
|
||
interface SocratesDockProps {
|
||
thread: FixtureSocratesTurn[];
|
||
presence: SocratesPresence;
|
||
density: Density;
|
||
}
|
||
|
||
export function SocratesDock({ thread, presence }: SocratesDockProps) {
|
||
if (presence === "subtle") {
|
||
return (
|
||
<div className="dock dock-subtle">
|
||
<Sigil size={36} />
|
||
<div className="dock-subtle-count">3</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<aside className={`dock ${presence === "prominent" ? "dock-prominent" : "dock-default"}`}>
|
||
<header className="dock-header">
|
||
<Sigil size={28} />
|
||
<div className="dock-header-text">
|
||
<div className="dock-name">Socrates</div>
|
||
<div className="dock-status">
|
||
<span className="dock-dot" /> 2 open threads
|
||
</div>
|
||
</div>
|
||
<button className="dock-header-action" title="New thread" type="button">
|
||
+
|
||
</button>
|
||
</header>
|
||
|
||
<section className="dock-thread-wrap">
|
||
<div className="dock-section-label dock-section-label-inline">Active thread · Aristotle</div>
|
||
<div className="dock-thread">
|
||
{thread.map((m, i) => (
|
||
<div key={i} className={`bubble bubble-${m.who}`}>
|
||
{m.who === "socrates" && <span className="bubble-sigil">Σ</span>}
|
||
<span className="bubble-body">
|
||
<span className="bubble-text">{m.text}</span>
|
||
{m.options && (
|
||
<div className="bubble-options">
|
||
{m.options.map(o => (
|
||
<button key={o.n} className="bubble-option" type="button">
|
||
<span className="bubble-option-num">{o.n}</span>
|
||
<span className="bubble-option-text">
|
||
<span className="bubble-option-label">{o.label}</span>
|
||
<span className="bubble-option-sub">{o.sub}</span>
|
||
</span>
|
||
<span className="bubble-option-key">{o.n}</span>
|
||
</button>
|
||
))}
|
||
<div className="bubble-options-hint">
|
||
Press <kbd>1</kbd>–<kbd>{m.options.length}</kbd>, or type a reply
|
||
</div>
|
||
</div>
|
||
)}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<footer className="dock-input-wrap">
|
||
<div className="dock-input">
|
||
<span className="dock-input-prompt">›</span>
|
||
<span className="dock-input-placeholder">Reply to Socrates…</span>
|
||
<span className="dock-input-shortcut">⌘↵</span>
|
||
</div>
|
||
</footer>
|
||
</aside>
|
||
);
|
||
}
|