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/edges/SysmlEdge.tsx

@@ -0,0 +1,61 @@
+// Custom edge that renders association / composition / constraint variants.
+// - association: solid line with arrow
+// - composition: solid line with diamond marker at the source side
+// - constraint: dashed line, no arrow
+
+"use client";
+
+import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from "@xyflow/react";
+import type { AssociationKind } from "../../../lib/fixtures/aristotle";
+
+export interface SysmlEdgeData extends Record<string, unknown> {
+  label?: string;
+  kind: AssociationKind;
+}
+
+export function SysmlEdge(props: EdgeProps) {
+  const { sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, markerEnd, markerStart } = props;
+  const d = (data ?? {}) as SysmlEdgeData;
+  const kind = d.kind ?? "association";
+
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX, sourceY,
+    sourcePosition,
+    targetX, targetY,
+    targetPosition,
+    curvature: 0.25,
+  });
+
+  const isConstraint = kind === "constraint";
+
+  return (
+    <>
+      <BaseEdge
+        id={props.id}
+        path={edgePath}
+        style={{
+          stroke: "var(--edge)",
+          strokeWidth: 1,
+          strokeDasharray: isConstraint ? "4 4" : undefined,
+          opacity: 0.85,
+        }}
+        markerEnd={markerEnd}
+        markerStart={markerStart}
+      />
+
+      {d.label && (
+        <EdgeLabelRenderer>
+          <div
+            className="sysml-edge-label"
+            style={{
+              position: "absolute",
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+            }}
+          >
+            {d.label}
+          </div>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}