MVP M1–M3: visual port, TipTap text editor, React Flow diagram

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.

apps/web/components/socrates/Sigil.tsx

@@ -0,0 +1,42 @@
+// Σ inside a softened laurel, themed via CSS variables.
+// Ported from docs/design-source/socrata/project/socrates.jsx (SocratesSigil).
+
+interface SigilProps {
+  size?: number;
+  mood?: "thinking" | "still";
+}
+
+export function Sigil({ size = 44, mood = "thinking" }: SigilProps) {
+  return (
+    <div className="sigil" style={{ width: size, height: size }}>
+      <svg viewBox="0 0 64 64" width={size} height={size}>
+        <defs>
+          <radialGradient id="sigilGlow" cx="50%" cy="50%" r="50%">
+            <stop offset="0%" stopColor="var(--accent-soft)" stopOpacity="0.55" />
+            <stop offset="100%" stopColor="var(--accent-soft)" stopOpacity="0" />
+          </radialGradient>
+        </defs>
+        <circle cx="32" cy="32" r="30" fill="url(#sigilGlow)" />
+        <circle cx="32" cy="32" r="22" fill="var(--surface-2)" stroke="var(--accent)" strokeWidth="1.25" />
+        {/* Laurel */}
+        <path d="M 12 32 Q 18 18 32 14" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.45" />
+        <path d="M 52 32 Q 46 46 32 50" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.45" />
+        {/* Σ */}
+        <text
+          x="32"
+          y="40"
+          textAnchor="middle"
+          fontSize="22"
+          fontFamily="var(--font-display)"
+          fontWeight="600"
+          fill="var(--accent)"
+        >
+          Σ
+        </text>
+        {mood === "thinking" && (
+          <circle cx="50" cy="50" r="3" fill="var(--accent)" className="sigil-pulse" />
+        )}
+      </svg>
+    </div>
+  );
+}

apps/web/components/socrates/SocratesDock.tsx

@@ -0,0 +1,82 @@
+// 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>
+  );
+}