MVP M5 (in-memory): bidirectional sync via ModelOp + applyOps + ModelStore

Both canvases now share a canonical SysMLModel through React context.
Renames in the diagram inspector ripple to every chip in the narrative
referencing the same refId, and double-clicking a chip emits an update op
that re-renders the diagram block. Validation re-runs on every successful
apply. State is in-memory; M5.9 adds Postgres persistence.

apps/web/lib/sync (new)
- ops.ts: ModelOp alphabet (18 op kinds across block / property /
  association / constraint / requirement / relation, add/update/remove for
  each). tempId() helper + per-kind constructors.
- applyOps.ts: pure (model, ops) → { model, idMapping, errors, applied }
  reducer. Atomic per batch. Cascades on remove-block (drops incident
  associations + constraint applies-to + requirement satisfiers). tempId
  resolution rewrites to canonical ids on duplicate-id collision.
- ModelStore.tsx: React provider exposing { model, apply, issues,
  issuesByElement }. Validation memoized on every model change.

Editor refactor
- EditorShell wraps in ModelStoreProvider. Initial model derived from
  fixture (+ optional ?break= corruptions). Validation now lives in the
  store, not duplicated here.
- LeftRail consumes useModel(): Model section lists real blocks +
  constraints (sorted by kind), Requirements section lists real
  requirements with traced/untraced status from r.relations.

Diagram refactor (the tricky piece)
- React Flow now owns ephemeral state via useNodesState / useEdgesState.
  Positions, drag-in-progress, selection are all RF-internal.
- Model → RF: a useEffect runs on model change, applies targeted setNodes
  updates only for elements whose semantic data (label, kind, properties)
  changed. Object identity preserved for unchanged nodes — fixes the
  "re-render storm on drag" + RF measurement-cache loss.
- RF → Model: onNodesChange / onEdgesChange / onConnect / onDrop emit
  ops via useApply(). Constraint-applies edges decompose into
  updateConstraint ops. deleteKeyCode={[Backspace, Delete]}.
- onNodesChange now handles type:'remove' too (was missing — that's why
  selecting a block + Del removed only the edges, leaving the block).

Chip refactor
- ChipView resolves displayed label from useModel() via refId lookup
  (block / requirement / association / property). Double-click chip →
  inline rename input → emit update-{block,requirement,association} op.
  All other chips with the same refId update on the next render.
- Slash-menu inserted chips have refId=null and skip the rename
  affordance (until M6 wires real model element resolution).

Removed obsolete components/diagram-canvas/fixtureToFlow.ts; replaced
with modelToFlow.ts. Bumped CSS for the chip-rename input.

apps/web/components/text-canvas/ChipView.tsx

@@ -1,13 +1,20 @@
 // React NodeView for the chip TipTap node.
-// Renders identically to the static Chip via the same CSS classes.
+//
+// M5: chips look up their displayed label from the SysMLModel via refId.
+// Click a chip → opens an inline rename popover that emits an update-block
+// op via useApply(). Renaming here updates every other chip with the same
+// refId AND the diagram block label.
 
 "use client";
 
 import { NodeViewWrapper } from "@tiptap/react";
 import type { NodeViewProps } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
 import type { ChipKind } from "../../lib/fixtures/aristotle";
 import type { MarkupStyle } from "./Chip";
 import { useChipFocus } from "./FocusContext";
+import { useModelStore } from "../../lib/sync/ModelStore";
+import { updateBlock, updateRequirement, updateAssociation } from "../../lib/sync/ops";
 
 const KIND_LABEL: Record<ChipKind, string> = {
   block: "block",
@@ -27,30 +34,99 @@ function kindGlyph(kind: ChipKind): string {
 
 export function ChipView({ node, selected, editor }: NodeViewProps) {
   const kind = (node.attrs.kind as ChipKind) ?? "block";
-  const label = (node.attrs.label as string) ?? "untitled";
   const refId = (node.attrs.refId as string | null) ?? null;
-  // Read the current markup style from the editor's storage; defaults to "color".
+  const fallbackLabel = (node.attrs.label as string) ?? "untitled";
+
   const markupStyle =
     ((editor.storage as unknown as Record<string, unknown>).markupStyle as MarkupStyle | undefined) ?? "color";
 
   const { focusBlockId, setFocusBlockId } = useChipFocus();
-  const isFocused = (refId !== null && refId === focusBlockId) || selected;
+  const { model, apply } = useModelStore();
+
+  // Resolve the live label from the model, falling back to the node's stored
+  // label (e.g. for chips created via slash-menu before they're bound).
+  const liveLabel = useMemo_label(model, kind, refId) ?? fallbackLabel;
+
+  const isFocused = (refId !== null && refId === focusBlockId) || selected;
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(liveLabel);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setDraft(liveLabel);
+      // Allow the input to mount before focusing.
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      });
+    }
+  }, [isEditing, liveLabel]);
+
+  function commitRename() {
+    setIsEditing(false);
+    const next = draft.trim();
+    if (!next || next === liveLabel || !refId) return;
+    if (kind === "block") {
+      apply([updateBlock(refId, { label: next })]);
+    } else if (kind === "requirement") {
+      apply([updateRequirement(refId, { tag: next })]);
+    } else if (kind === "association") {
+      apply([updateAssociation(refId, { label: next })]);
+    }
+    // property and (potential future) constraint chips: rename in the
+    // model is more involved (need parent block id resolution); skip for M5.
+  }
+
+  const cls = `chip chip-${kind} chip-style-${markupStyle}${isFocused ? " chip-focus" : ""}${isEditing ? " chip-editing" : ""}`;
 
-  const cls = `chip chip-${kind} chip-style-${markupStyle}${isFocused ? " chip-focus" : ""}`;
   const handlers = refId
     ? {
         onMouseEnter: () => setFocusBlockId(refId),
-        onMouseLeave: () => setFocusBlockId(null),
+        onMouseLeave: () => !isEditing && setFocusBlockId(null),
+        onDoubleClick: (e: React.MouseEvent) => {
+          e.preventDefault();
+          if (refId) setIsEditing(true);
+        },
         onClick: () => setFocusBlockId(refId),
       }
     : {};
 
+  // Inline rename input — replaces the label visual, preserves the chip frame
+  if (isEditing && refId) {
+    return (
+      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false}>
+        {markupStyle === "bracket" && <span className="chip-bracket">[</span>}
+        {markupStyle === "bracket" && <span className="chip-kind">{KIND_LABEL[kind]}:</span>}
+        {markupStyle !== "bracket" && <span className="chip-glyph">{kindGlyph(kind)}</span>}
+        <input
+          ref={inputRef}
+          className="chip-rename"
+          value={draft}
+          onChange={e => setDraft(e.target.value)}
+          onBlur={commitRename}
+          onKeyDown={e => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              (e.target as HTMLInputElement).blur();
+            } else if (e.key === "Escape") {
+              setDraft(liveLabel);
+              setIsEditing(false);
+            }
+          }}
+          size={Math.max(draft.length, 6)}
+        />
+        {markupStyle === "bracket" && <span className="chip-bracket">]</span>}
+      </NodeViewWrapper>
+    );
+  }
+
   if (markupStyle === "bracket") {
     return (
-      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
+      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers} title={refId ? "double-click to rename" : undefined}>
         <span className="chip-bracket">[</span>
         <span className="chip-kind">{KIND_LABEL[kind]}:</span>
-        <span className="chip-label">{label}</span>
+        <span className="chip-label">{liveLabel}</span>
         <span className="chip-bracket">]</span>
       </NodeViewWrapper>
     );
@@ -58,17 +134,54 @@ export function ChipView({ node, selected, editor }: NodeViewProps) {
 
   if (markupStyle === "underline") {
     return (
-      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
+      <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers} title={refId ? "double-click to rename" : undefined}>
         <span className="chip-glyph">{kindGlyph(kind)}</span>
-        <span className="chip-label">{label}</span>
+        <span className="chip-label">{liveLabel}</span>
       </NodeViewWrapper>
     );
   }
 
   return (
-    <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
+    <NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers} title={refId ? "double-click to rename" : undefined}>
       <span className="chip-glyph">{kindGlyph(kind)}</span>
-      <span className="chip-label">{label}</span>
+      <span className="chip-label">{liveLabel}</span>
     </NodeViewWrapper>
   );
 }
+
+/**
+ * Look up the live label for a chip from the model. Inline-imported and
+ * collocated to keep the resolution rules near the consumer.
+ *
+ * For block / requirement / association / constraint chips we resolve by
+ * matching `refId` against the corresponding element. Property chips use a
+ * composite refId ("blockId.propertyId") — handled with a `.` split.
+ */
+function useMemo_label(model: ReturnType<typeof useModelStore>["model"], kind: ChipKind, refId: string | null): string | null {
+  if (!refId) return null;
+  if (kind === "block") {
+    return model.blocks.find(b => b.id === refId)?.label ?? null;
+  }
+  if (kind === "requirement") {
+    return model.requirements.find(r => r.id === refId || r.tag === refId)?.tag ?? null;
+  }
+  if (kind === "association") {
+    return model.associations.find(a => a.id === refId)?.label ?? null;
+  }
+  if (kind === "property") {
+    const dot = refId.indexOf(".");
+    if (dot < 0) {
+      // Bare property name from the fixture; do a flat search.
+      for (const b of model.blocks) {
+        const p = b.properties.find(p => p.name === refId || p.id === refId);
+        if (p) return p.name;
+      }
+      return null;
+    }
+    const blockId = refId.slice(0, dot);
+    const propId = refId.slice(dot + 1);
+    const b = model.blocks.find(x => x.id === blockId);
+    return b?.properties.find(p => p.id === propId || p.name === propId)?.name ?? null;
+  }
+  return null;
+}