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

@@ -0,0 +1,140 @@
+// Edit panel for the selected block — rename, change kind, add/remove properties, delete.
+
+"use client";
+
+import { useState, useEffect } from "react";
+import type { BlockKind } from "../../lib/fixtures/aristotle";
+import type { BlockNodeData } from "./nodes/BlockNode";
+
+interface NodeInspectorProps {
+  nodeId: string;
+  data: BlockNodeData;
+  onChange: (patch: Partial<BlockNodeData>) => void;
+  onDelete: () => void;
+  onClose: () => void;
+}
+
+const KINDS: Array<BlockKind | "system"> = ["system", "block", "actor", "constraint"];
+
+export function NodeInspector({ nodeId, data, onChange, onDelete, onClose }: NodeInspectorProps) {
+  // Local label state for smooth typing — push on blur
+  const [label, setLabel] = useState(data.label);
+  const [expression, setExpression] = useState(data.expression ?? "");
+
+  useEffect(() => {
+    setLabel(data.label);
+    setExpression(data.expression ?? "");
+  }, [nodeId, data.label, data.expression]);
+
+  function commitLabel() {
+    if (label.trim() && label !== data.label) onChange({ label: label.trim() });
+  }
+
+  function commitExpression() {
+    onChange({ expression });
+  }
+
+  function updateProp(idx: number, value: string) {
+    const next = [...data.properties];
+    next[idx] = value;
+    onChange({ properties: next });
+  }
+
+  function removeProp(idx: number) {
+    onChange({ properties: data.properties.filter((_, i) => i !== idx) });
+  }
+
+  function addProp() {
+    onChange({ properties: [...data.properties, "new_property"] });
+  }
+
+  return (
+    <div className="diagram-inspector" onClick={e => e.stopPropagation()}>
+      <div className="diagram-inspector-row">
+        <span className="diagram-inspector-label">Kind</span>
+        <select
+          className="diagram-inspector-select"
+          value={data.kind}
+          onChange={e => onChange({ kind: e.target.value as BlockKind | "system" })}
+        >
+          {KINDS.map(k => (
+            <option key={k} value={k}>«{k}»</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="diagram-inspector-row">
+        <span className="diagram-inspector-label">Label</span>
+        <input
+          className="diagram-inspector-input"
+          value={label}
+          onChange={e => setLabel(e.target.value)}
+          onBlur={commitLabel}
+          onKeyDown={e => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              (e.target as HTMLInputElement).blur();
+            }
+          }}
+        />
+      </div>
+
+      {data.kind === "constraint" ? (
+        <div className="diagram-inspector-row">
+          <span className="diagram-inspector-label">Expression</span>
+          <input
+            className="diagram-inspector-input"
+            value={expression}
+            onChange={e => setExpression(e.target.value)}
+            onBlur={commitExpression}
+            placeholder="{ tenancy = institutional }"
+          />
+        </div>
+      ) : (
+        <div className="diagram-inspector-row">
+          <span className="diagram-inspector-label">Properties</span>
+          <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
+            {data.properties.map((p, i) => (
+              <div key={i} className="diagram-inspector-prop">
+                <input
+                  defaultValue={p}
+                  onBlur={e => updateProp(i, e.target.value)}
+                  onKeyDown={e => {
+                    if (e.key === "Enter") {
+                      e.preventDefault();
+                      (e.target as HTMLInputElement).blur();
+                    }
+                  }}
+                />
+                <button
+                  className="diagram-inspector-prop-x"
+                  onClick={() => removeProp(i)}
+                  title="Remove property"
+                  type="button"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+            <button className="diagram-inspector-add" onClick={addProp} type="button">
+              + property
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="diagram-inspector-actions">
+        <button className="diagram-inspector-btn" onClick={onClose} type="button">
+          Close
+        </button>
+        <button
+          className="diagram-inspector-btn diagram-inspector-btn-danger"
+          onClick={onDelete}
+          type="button"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}