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/ChipNode.ts

@@ -0,0 +1,82 @@
+// TipTap node definition for inline model-element chips.
+//
+// M2: chips are inline, atomic, selectable. They carry { kind, refId, label }.
+// In MVP M5 the label will be derived from a live model lookup keyed by refId;
+// for M2 we store it directly on the node so renaming + persistence Just Work.
+
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import type { ChipKind } from "../../lib/fixtures/aristotle";
+import { ChipView } from "./ChipView";
+
+export interface ChipAttrs {
+  kind: ChipKind;
+  refId: string | null;
+  label: string;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    chip: {
+      insertChip: (attrs: ChipAttrs) => ReturnType;
+    };
+  }
+}
+
+export const ChipNode = Node.create({
+  name: "chip",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: true,
+  draggable: false,
+
+  addAttributes() {
+    return {
+      kind: {
+        default: "block",
+        parseHTML: el => el.getAttribute("data-kind") ?? "block",
+        renderHTML: attrs => ({ "data-kind": attrs.kind }),
+      },
+      refId: {
+        default: null,
+        parseHTML: el => el.getAttribute("data-ref-id"),
+        renderHTML: attrs => (attrs.refId ? { "data-ref-id": attrs.refId } : {}),
+      },
+      label: {
+        default: "untitled",
+        parseHTML: el => el.getAttribute("data-label") ?? el.textContent ?? "untitled",
+        renderHTML: attrs => ({ "data-label": attrs.label }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "span[data-chip]" }];
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    return [
+      "span",
+      mergeAttributes({ "data-chip": "" }, HTMLAttributes),
+      `${node.attrs.label}`,
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ChipView);
+  },
+
+  addCommands() {
+    return {
+      insertChip:
+        (attrs: ChipAttrs) =>
+        ({ chain }) =>
+          chain()
+            .insertContent({ type: this.name, attrs })
+            // Insert a trailing space so the caret leaves the chip cleanly
+            .insertContent(" ")
+            .run(),
+    };
+  },
+});