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/ChipView.tsx

@@ -0,0 +1,73 @@
+// React NodeView for the chip TipTap node.
+// Renders identically to the static Chip via the same CSS classes.
+
+"use client";
+
+import { NodeViewWrapper } from "@tiptap/react";
+import type { NodeViewProps } from "@tiptap/react";
+import type { ChipKind } from "../../lib/fixtures/aristotle";
+import type { MarkupStyle } from "./Chip";
+import { useChipFocus } from "./FocusContext";
+
+const KIND_LABEL: Record<ChipKind, string> = {
+  block: "block",
+  property: "property",
+  association: "assoc",
+  requirement: "req",
+};
+
+function kindGlyph(kind: ChipKind): string {
+  switch (kind) {
+    case "block": return "▢";
+    case "property": return "·";
+    case "association": return "→";
+    case "requirement": return "§";
+  }
+}
+
+export function ChipView({ node, selected, editor }: NodeViewProps) {
+  const kind = (node.attrs.kind as ChipKind) ?? "block";
+  const label = (node.attrs.label as string) ?? "untitled";
+  const refId = (node.attrs.refId as string | null) ?? null;
+  // Read the current markup style from the editor's storage; defaults to "color".
+  const markupStyle = ((editor.storage as Record<string, unknown>).markupStyle as MarkupStyle) ?? "color";
+
+  const { focusBlockId, setFocusBlockId } = useChipFocus();
+  const isFocused = (refId !== null && refId === focusBlockId) || selected;
+
+  const cls = `chip chip-${kind} chip-style-${markupStyle}${isFocused ? " chip-focus" : ""}`;
+  const handlers = refId
+    ? {
+        onMouseEnter: () => setFocusBlockId(refId),
+        onMouseLeave: () => setFocusBlockId(null),
+        onClick: () => setFocusBlockId(refId),
+      }
+    : {};
+
+  if (markupStyle === "bracket") {
+    return (
+      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
+        <span className="chip-bracket">[</span>
+        <span className="chip-kind">{KIND_LABEL[kind]}:</span>
+        <span className="chip-label">{label}</span>
+        <span className="chip-bracket">]</span>
+      </NodeViewWrapper>
+    );
+  }
+
+  if (markupStyle === "underline") {
+    return (
+      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
+        <span className="chip-glyph">{kindGlyph(kind)}</span>
+        <span className="chip-label">{label}</span>
+      </NodeViewWrapper>
+    );
+  }
+
+  return (
+    <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
+      <span className="chip-glyph">{kindGlyph(kind)}</span>
+      <span className="chip-label">{label}</span>
+    </NodeViewWrapper>
+  );
+}