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/text-canvas/fixtureToDoc.ts

@@ -0,0 +1,43 @@
+// Convert the fixture's narrative shape to a ProseMirror document JSON.
+// Used as the initial content for the TipTap editor.
+
+import type { JSONContent } from "@tiptap/react";
+import type { FixtureData, NarrativeNode } from "../../lib/fixtures/aristotle";
+
+export function fixtureToDoc(data: FixtureData): JSONContent {
+  const content: JSONContent[] = data.narrative.map(node => narrativeNodeToJSON(node));
+  return {
+    type: "doc",
+    content,
+  };
+}
+
+function narrativeNodeToJSON(node: NarrativeNode): JSONContent {
+  if (node.type === "h1") {
+    return {
+      type: "heading",
+      attrs: { level: 1 },
+      content: node.text ? [{ type: "text", text: node.text }] : [],
+    };
+  }
+  if (node.type === "h2") {
+    return {
+      type: "heading",
+      attrs: { level: 2 },
+      content: node.text ? [{ type: "text", text: node.text }] : [],
+    };
+  }
+  // paragraph
+  const inline: JSONContent[] = [];
+  for (const child of node.children ?? []) {
+    if (child.t === "text") {
+      inline.push({ type: "text", text: child.v });
+    } else if (child.t === "chip") {
+      inline.push({
+        type: "chip",
+        attrs: { kind: child.kind, refId: child.id, label: child.label },
+      });
+    }
+  }
+  return { type: "paragraph", content: inline };
+}