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/editor/EditorShell.tsx

@@ -0,0 +1,87 @@
+// The dual-canvas workspace shell.
+// Composes TopBar / SocratesDock / LeftRail / TextCanvas / DiagramCanvas / StatusBar.
+// Ported from docs/design-source/socrata/project/editor-shell.jsx (EditorShell).
+
+"use client";
+
+import { useState } from "react";
+import { TopBar } from "./TopBar";
+import { LeftRail } from "./LeftRail";
+import { CanvasHeader } from "./CanvasHeader";
+import { StatusBar } from "./StatusBar";
+import { TextCanvas } from "../text-canvas/TextCanvas";
+import { DiagramCanvas, type DiagramVariant } from "../diagram-canvas/DiagramCanvas";
+import { SocratesDock, type Density, type SocratesPresence } from "../socrates/SocratesDock";
+import type { MarkupStyle } from "../text-canvas/Chip";
+import type { FixtureData } from "../../lib/fixtures/aristotle";
+
+interface EditorShellProps {
+  data: FixtureData;
+  density?: Density;
+  markupStyle?: MarkupStyle;
+  diagramStyle?: DiagramVariant;
+  presence?: SocratesPresence;
+}
+
+export function EditorShell({
+  data,
+  density = "comfortable",
+  markupStyle = "color",
+  diagramStyle = "softened",
+  presence = "default",
+}: EditorShellProps) {
+  const [focusBlockId, setFocusBlockId] = useState<string | null>(null);
+
+  return (
+    <div className={`shell shell-density-${density} shell-presence-${presence}`}>
+      <TopBar data={data} />
+
+      <div className="shell-body">
+        <SocratesDock thread={data.socratesThread} presence={presence} density={density} />
+        <LeftRail data={data} focusBlockId={focusBlockId} setFocusBlockId={setFocusBlockId} />
+
+        <main className="canvases">
+          <section className="canvas canvas-text">
+            <CanvasHeader title="Narrative" subtitle="Markup-augmented prose · synced to model" />
+            <div className="canvas-scroll">
+              <TextCanvas
+                data={data}
+                density={density}
+                markupStyle={markupStyle}
+                focusBlockId={focusBlockId}
+                setFocusBlockId={setFocusBlockId}
+              />
+            </div>
+          </section>
+
+          <div className="canvas-divider" />
+
+          <section className="canvas canvas-diagram">
+            <CanvasHeader
+              title="Model"
+              subtitle="SysML · 6 blocks · 6 associations · 1 constraint"
+              right={
+                <div className="canvas-actions">
+                  <span className="canvas-mode-pill">Fit</span>
+                  <span className="canvas-mode-pill canvas-mode-active">100%</span>
+                  <span className="canvas-mode-pill">Layout</span>
+                </div>
+              }
+            />
+            <div className="canvas-scroll canvas-scroll-diagram">
+              <DiagramCanvas
+                data={data}
+                density={density}
+                variant={diagramStyle}
+                focusBlockId={focusBlockId}
+                onSelect={setFocusBlockId}
+              />
+            </div>
+          </section>
+        </main>
+      </div>
+
+      <StatusBar data={data} />
+    </div>
+  );
+}