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/nodes/BlockNode.tsx

@@ -0,0 +1,67 @@
+// SysML block / actor / constraint rendered as a React Flow custom node.
+// Drives the softened look from the prototype: stereotype label, divider, property compartment.
+
+"use client";
+
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import type { BlockKind } from "../../../lib/fixtures/aristotle";
+
+export interface BlockNodeData extends Record<string, unknown> {
+  label: string;
+  kind: BlockKind | "system";
+  properties: string[];
+  /** For constraint kinds, optional one-line expression. */
+  expression?: string;
+}
+
+const STEREO: Record<string, string> = {
+  block: "block",
+  actor: "actor",
+  constraint: "constraint",
+  system: "system",
+};
+
+export function BlockNode({ data, selected }: NodeProps) {
+  const d = data as BlockNodeData;
+  const kind = d.kind ?? "block";
+  const isConstraint = kind === "constraint";
+
+  const cls = [
+    "sysml-node",
+    `sysml-node-${kind}`,
+    selected ? "sysml-node-selected" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={cls}>
+      <Handle type="target" position={Position.Left} />
+      <Handle type="target" position={Position.Top} />
+
+      <div className="sysml-node-stereo">«{STEREO[kind] ?? "block"}»</div>
+      <div className="sysml-node-title">{d.label}</div>
+
+      {!isConstraint && <div className="sysml-node-divider" />}
+
+      {!isConstraint ? (
+        <div className="sysml-node-props">
+          {d.properties.length === 0 ? (
+            <span className="sysml-node-prop-empty">no properties</span>
+          ) : (
+            d.properties.slice(0, 6).map((p, i) => (
+              <span key={i} className="sysml-node-prop">· {p}</span>
+            ))
+          )}
+        </div>
+      ) : (
+        <div className="sysml-node-constraint-body">
+          {d.expression ?? "{ }"}
+        </div>
+      )}
+
+      <Handle type="source" position={Position.Right} />
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  );
+}