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/diagram-canvas/Palette.tsx

@@ -0,0 +1,43 @@
+// Drag source for new blocks. Drop on the React Flow canvas to create.
+
+"use client";
+
+import type { BlockKind } from "../../lib/fixtures/aristotle";
+
+interface PaletteItem {
+  kind: BlockKind | "system";
+  label: string;
+  glyph: string;
+}
+
+const ITEMS: PaletteItem[] = [
+  { kind: "system", label: "System", glyph: "◎" },
+  { kind: "block", label: "Block", glyph: "▢" },
+  { kind: "actor", label: "Actor", glyph: "◐" },
+  { kind: "constraint", label: "Constraint", glyph: "{}" },
+];
+
+export function Palette() {
+  function onDragStart(event: React.DragEvent, kind: string) {
+    event.dataTransfer.setData("application/sysml-kind", kind);
+    event.dataTransfer.effectAllowed = "move";
+  }
+
+  return (
+    <div className="diagram-palette">
+      <div className="diagram-palette-label">Add</div>
+      {ITEMS.map(item => (
+        <div
+          key={item.kind}
+          className="diagram-palette-item"
+          draggable
+          onDragStart={e => onDragStart(e, item.kind)}
+          title={`Drag to create a ${item.label}`}
+        >
+          <span className="diagram-palette-glyph">{item.glyph}</span>
+          <span>{item.label}</span>
+        </div>
+      ))}
+    </div>
+  );
+}