flowchart-sequence-designer 1.0.0 → 1.0.1

package/dist/ui/index.cjs

@@ -31,7 +31,7 @@ __export(ui_exports, {
 module.exports = __toCommonJS(ui_exports);
 
 // src/ui/DiagramEditor.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/ui/Toolbar.tsx
 var import_react2 = require("react");
@@ -407,6 +407,12 @@ var ACCENT = {
   emeraldDarkLight: "rgba(16,185,129,0.12)",
   emeraldDarkBorder: "rgba(16,185,129,0.3)"
 };
+function shadowColor(isDark) {
+  return isDark ? "rgba(0,0,0,0.55)" : "rgba(15,23,42,0.09)";
+}
+function arrowColor(isDark) {
+  return isDark ? "#64748b" : "#94a3b8";
+}
 function variantAccent(variant, isDark) {
   if (variant === "question") {
     return isDark ? { color: ACCENT.amberDark, fill: ACCENT.amberDarkLight, border: ACCENT.amberDarkBorder, glow: ACCENT.amberGlow } : { color: ACCENT.amber, fill: ACCENT.amberLight, border: ACCENT.amberBorder, glow: ACCENT.amberGlow };
@@ -839,18 +845,278 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
 }
 
 // src/ui/SequenceEditor.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
+
+// src/ui/SequenceCanvas.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var HEADER_H = 64;
+var HEADER_PAD = 24;
+var ROW_H = 64;
+var SIDE_PAD = 40;
+var INDIGO = "#4f46e5";
+var INDIGO_SOFT = "#eef2ff";
+var STYLE_SEQ_GRAB = { cursor: "grab" };
+var STYLE_SEQ_GRABBING = { cursor: "grabbing" };
+var STYLE_SEQ_ACTOR_TEXT = { cursor: "pointer", userSelect: "none" };
+var STYLE_SEQ_REMOVE_BTN = { cursor: "pointer" };
+var STYLE_SEQ_REMOVE_ICON = { pointerEvents: "none", userSelect: "none" };
+var STYLE_SEQ_DRAGGING = { opacity: 0.85 };
+function estimateW(text, pxPerChar = 7) {
+  return text.length * pxPerChar;
+}
+function SequenceCanvas(props) {
+  const {
+    model,
+    actors,
+    messages,
+    t,
+    isDark,
+    colW,
+    totalW,
+    totalH,
+    actorX,
+    msgY,
+    selected,
+    editingId,
+    setEditingId,
+    drag,
+    onRowMouseDown,
+    renameActor,
+    removeActor,
+    svgRef
+  } = props;
+  const visualMessages = (0, import_react4.useMemo)(() => {
+    if (!drag?.active) return messages;
+    const idx = messages.findIndex((m) => m.id === drag.id);
+    if (idx < 0) return messages;
+    const next = messages.slice();
+    const [moved] = next.splice(idx, 1);
+    next.splice(drag.targetIdx, 0, moved);
+    return next;
+  }, [messages, drag]);
+  if (actors.length === 0 && messages.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 10,
+      color: t.textMuted,
+      pointerEvents: "none"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 36, opacity: 0.15, color: t.textPrimary }, children: "\u2194" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+        "Click ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Actor" }),
+        " then ",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Message" }),
+        " to start"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      ref: svgRef,
+      width: totalW,
+      height: totalH,
+      style: { display: "block", cursor: drag?.active ? "grabbing" : "default", userSelect: "none" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pattern", { id: "seqdots", x: "0", y: "0", width: "24", height: "24", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 12, cy: 12, r: 1.1, fill: t.dot }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("filter", { id: "seqShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feDropShadow", { dx: 0, dy: 3, stdDeviation: 5, floodColor: shadowColor(isDark) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("marker", { id: "seqArrow", markerWidth: 9, markerHeight: 7, refX: 8.5, refY: 3.5, orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: t.arrow }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: totalW, height: totalH, fill: "url(#seqdots)" }),
+        actors.map((name) => {
+          const x = actorX(name);
+          const top = HEADER_PAD + HEADER_H;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "line",
+            {
+              x1: x,
+              x2: x,
+              y1: top + 4,
+              y2: totalH - 24,
+              stroke: t.lifeline,
+              strokeWidth: 1.25,
+              strokeDasharray: "5 5"
+            },
+            `life-${name}`
+          );
+        }),
+        visualMessages.map((msg, idx) => {
+          const y = msgY(idx);
+          const fromX = actorX(msg.from);
+          const toX = actorX(msg.to);
+          const selectedHere = selected === msg.id;
+          const isDragging = drag?.active && drag.id === msg.id;
+          const isSelf = msg.from === msg.to;
+          const stroke = selectedHere ? INDIGO : t.arrow;
+          const dash = msg.style === "dashed" ? "6,4" : void 0;
+          const cursorStyle = drag?.active ? STYLE_SEQ_GRABBING : STYLE_SEQ_GRAB;
+          const groupStyle = isDragging ? { ...cursorStyle, ...STYLE_SEQ_DRAGGING } : cursorStyle;
+          if (isSelf) {
+            const startX = fromX;
+            const loopW = 36;
+            const loopY = y - 6;
+            const d = `M ${startX} ${loopY} C ${startX + loopW} ${loopY}, ${startX + loopW} ${loopY + 24}, ${startX} ${loopY + 24}`;
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { onMouseDown: (e) => onRowMouseDown(e, msg.id), style: groupStyle, children: [
+              (selectedHere || isDragging) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "rect",
+                {
+                  x: SIDE_PAD - 8,
+                  y: y - 22,
+                  width: totalW - (SIDE_PAD - 8) * 2,
+                  height: ROW_H - 12,
+                  rx: 10,
+                  fill: INDIGO_SOFT,
+                  opacity: isDark ? 0.18 : 0.6
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "none", stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: startX + loopW + 8, y: loopY + 16, fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
+            ] }, msg.id);
+          }
+          const labelX = (fromX + toX) / 2;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { onMouseDown: (e) => onRowMouseDown(e, msg.id), style: groupStyle, children: [
+            (selectedHere || isDragging) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "rect",
+              {
+                x: SIDE_PAD - 8,
+                y: y - 22,
+                width: totalW - (SIDE_PAD - 8) * 2,
+                height: ROW_H - 12,
+                rx: 10,
+                fill: INDIGO_SOFT,
+                opacity: isDark ? 0.18 : 0.6
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: fromX, y1: y, x2: toX, y2: y, stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "rect",
+              {
+                x: labelX - estimateW(msg.label) / 2 - 6,
+                y: y - 18,
+                width: estimateW(msg.label) + 12,
+                height: 18,
+                rx: 6,
+                fill: t.canvas,
+                stroke: selectedHere ? INDIGO : t.cardBorder,
+                strokeWidth: selectedHere ? 1.25 : 1
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: labelX, y: y - 5, textAnchor: "middle", fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
+          ] }, msg.id);
+        }),
+        actors.map((name) => {
+          const x = actorX(name);
+          const w = colW - 24;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "rect",
+              {
+                x: x - w / 2,
+                y: HEADER_PAD,
+                width: w,
+                height: HEADER_H,
+                rx: 12,
+                fill: t.actorFill,
+                stroke: t.actorStroke,
+                strokeWidth: 1.25,
+                filter: "url(#seqShadow)"
+              }
+            ),
+            editingId === name ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("foreignObject", { x: x - w / 2 + 8, y: HEADER_PAD + 16, width: w - 16, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "input",
+              {
+                autoFocus: true,
+                defaultValue: name,
+                onBlur: (e) => {
+                  renameActor(name, e.currentTarget.value.trim());
+                  setEditingId(null);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    renameActor(name, e.target.value.trim());
+                    setEditingId(null);
+                  }
+                  if (e.key === "Escape") setEditingId(null);
+                },
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  border: "none",
+                  borderRadius: 6,
+                  outline: `2px solid ${INDIGO}`,
+                  textAlign: "center",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  background: t.inputBg,
+                  color: t.inputText,
+                  boxSizing: "border-box",
+                  padding: "0 6px",
+                  fontFamily: "inherit"
+                }
+              }
+            ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x,
+                y: HEADER_PAD + HEADER_H / 2 + 4,
+                textAnchor: "middle",
+                fontSize: 13,
+                fontWeight: 700,
+                fill: t.actorText,
+                style: STYLE_SEQ_ACTOR_TEXT,
+                onDoubleClick: () => setEditingId(name),
+                children: name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "circle",
+              {
+                cx: x + w / 2 - 12,
+                cy: HEADER_PAD + 14,
+                r: 9,
+                fill: "transparent",
+                style: STYLE_SEQ_REMOVE_BTN,
+                onClick: () => removeActor(name),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Remove actor" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: x + w / 2 - 12,
+                y: HEADER_PAD + 18,
+                textAnchor: "middle",
+                fontSize: 12,
+                fill: t.textMuted,
+                style: STYLE_SEQ_REMOVE_ICON,
+                children: "\xD7"
+              }
+            )
+          ] }, `hdr-${name}`);
+        })
+      ]
+    }
+  );
+}
 
 // src/ui/hooks/useEditorTheme.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/ui/hooks/useSystemTheme.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useIsDark(theme) {
-  const [sysDark, setSysDark] = (0, import_react4.useState)(
+  const [sysDark, setSysDark] = (0, import_react5.useState)(
     () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (theme !== "auto" || typeof window === "undefined") return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSysDark(e.matches);
@@ -860,10 +1126,10 @@ function useIsDark(theme) {
   return theme === "dark" || theme === "auto" && sysDark;
 }
 function useIsCoarsePointer() {
-  const [coarse, setCoarse] = (0, import_react4.useState)(
+  const [coarse, setCoarse] = (0, import_react5.useState)(
     () => typeof window !== "undefined" ? window.matchMedia("(pointer: coarse)").matches : false
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia("(pointer: coarse)");
     const handler = (e) => setCoarse(e.matches);
@@ -873,10 +1139,10 @@ function useIsCoarsePointer() {
   return coarse;
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = (0, import_react4.useState)(
+  const [reduced, setReduced] = (0, import_react5.useState)(
     () => typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
   );
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
     const handler = (e) => setReduced(e.matches);
@@ -889,7 +1155,7 @@ function usePrefersReducedMotion() {
 // src/ui/hooks/useEditorTheme.ts
 function useEditorTheme(theme, overrides, palettes) {
   const isDark = useIsDark(theme);
-  const t = (0, import_react5.useMemo)(
+  const t = (0, import_react6.useMemo)(
     () => ({ ...isDark ? palettes.dark : palettes.light, ...overrides ?? {} }),
     // palettes is a stable module-level constant in every caller, so it is
     // deliberately omitted from the dep array to keep the memo key tight.
@@ -900,7 +1166,7 @@ function useEditorTheme(theme, overrides, palettes) {
 }
 
 // src/ui/hooks/useExporters.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/exporters/mermaid.ts
 var SHAPE_OPEN = {
@@ -1287,7 +1553,7 @@ async function toPNG(model) {
 
 // src/ui/hooks/useExporters.ts
 function useExporters(model, onExport, filename = "diagram") {
-  return (0, import_react6.useCallback)(async (format) => {
+  return (0, import_react7.useCallback)(async (format) => {
     let content;
     switch (format) {
       case "mermaid":
@@ -1322,7 +1588,7 @@ function useExporters(model, onExport, filename = "diagram") {
 }
 
 // src/ui/hooks/useImporter.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/core/model.ts
 var Model = class _Model {
@@ -1617,7 +1883,7 @@ function fromJSON(json) {
 // src/ui/hooks/useImporter.ts
 function useImporter(applyAndPush, options = {}) {
   const { expectedType, transform } = options;
-  return (0, import_react7.useCallback)((text) => {
+  return (0, import_react8.useCallback)((text) => {
     try {
       const parsed = text.trim().startsWith("{") ? fromJSON(text).toJSON() : fromMermaid(text).toJSON();
       if (expectedType && parsed.type !== expectedType) {
@@ -1727,10 +1993,33 @@ function cloneModel(m) {
   };
 }
 
+// src/ui/hooks/useEditorKeyboard.ts
+var import_react9 = require("react");
+var isInput = (e) => {
+  const tgt = e.target;
+  return !!(tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable));
+};
+function useEditorKeyboard(commands, deps) {
+  (0, import_react9.useEffect)(() => {
+    const onKey = (e) => {
+      if (isInput(e)) return;
+      for (const cmd of commands) {
+        if (cmd.match(e)) {
+          const handled = cmd.run(e);
+          if (handled) e.preventDefault();
+          return;
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, deps);
+}
+
 // src/ui/SequenceEditor.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var INDIGO = "#4f46e5";
-var INDIGO_SOFT = "#eef2ff";
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var INDIGO2 = "#4f46e5";
+var INDIGO_SOFT2 = "#eef2ff";
 var lightTheme2 = {
   canvas: "#fafbfc",
   dot: "#dbe3ee",
@@ -1773,11 +2062,11 @@ var darkTheme2 = {
   actorStroke: "rgba(99,102,241,0.45)",
   actorText: "#a5b4fc"
 };
-var HEADER_H = 64;
-var HEADER_PAD = 24;
+var HEADER_H2 = 64;
+var HEADER_PAD2 = 24;
 var COL_MIN = 160;
-var ROW_H = 64;
-var SIDE_PAD = 40;
+var ROW_H2 = 64;
+var SIDE_PAD2 = 40;
 var DRAG_THRESHOLD = 5;
 function ensureSequenceModel(m) {
   if (m && m.type === "sequence") {
@@ -1795,49 +2084,49 @@ function SequenceEditor({
   theme = "auto",
   themeOverrides
 }) {
-  const [model, setModel] = (0, import_react8.useState)(() => ensureSequenceModel(initialModel));
-  const [selected, setSelected] = (0, import_react8.useState)(null);
-  const [drag, setDrag] = (0, import_react8.useState)(null);
-  const [editingId, setEditingId] = (0, import_react8.useState)(null);
-  const [editLabel, setEditLabel] = (0, import_react8.useState)("");
-  const historyRef = (0, import_react8.useRef)([ensureSequenceModel(initialModel)]);
-  const historyIdxRef = (0, import_react8.useRef)(0);
-  const svgRef = (0, import_react8.useRef)(null);
+  const [model, setModel] = (0, import_react10.useState)(() => ensureSequenceModel(initialModel));
+  const [selected, setSelected] = (0, import_react10.useState)(null);
+  const [drag, setDrag] = (0, import_react10.useState)(null);
+  const [editingId, setEditingId] = (0, import_react10.useState)(null);
+  const [editLabel, setEditLabel] = (0, import_react10.useState)("");
+  const historyRef = (0, import_react10.useRef)([ensureSequenceModel(initialModel)]);
+  const historyIdxRef = (0, import_react10.useRef)(0);
+  const svgRef = (0, import_react10.useRef)(null);
   const { t, isDark } = useEditorTheme(theme, themeOverrides, { light: lightTheme2, dark: darkTheme2 });
   const actors = model.actors ?? [];
   const messages = model.messages ?? [];
-  const colW = (0, import_react8.useMemo)(() => {
+  const colW = (0, import_react10.useMemo)(() => {
     const longest = actors.reduce((m, a) => Math.max(m, a.length), 6);
     return Math.max(COL_MIN, longest * 9 + 40);
   }, [actors]);
-  const totalW = SIDE_PAD * 2 + Math.max(1, actors.length) * colW;
-  const totalH = HEADER_PAD + HEADER_H + 32 + messages.length * ROW_H + 48;
+  const totalW = SIDE_PAD2 * 2 + Math.max(1, actors.length) * colW;
+  const totalH = HEADER_PAD2 + HEADER_H2 + 32 + messages.length * ROW_H2 + 48;
   const actorX = (name) => {
     const idx = actors.indexOf(name);
-    if (idx < 0) return SIDE_PAD + colW / 2;
-    return SIDE_PAD + idx * colW + colW / 2;
+    if (idx < 0) return SIDE_PAD2 + colW / 2;
+    return SIDE_PAD2 + idx * colW + colW / 2;
   };
-  const msgY = (idx) => HEADER_PAD + HEADER_H + 40 + idx * ROW_H;
-  const pushHistory = (0, import_react8.useCallback)((m) => {
+  const msgY = (idx) => HEADER_PAD2 + HEADER_H2 + 40 + idx * ROW_H2;
+  const pushHistory = (0, import_react10.useCallback)((m) => {
     const stack = historyRef.current.slice(0, historyIdxRef.current + 1);
     stack.push(m);
     if (stack.length > 80) stack.shift();
     historyRef.current = stack;
     historyIdxRef.current = stack.length - 1;
   }, []);
-  const applyAndPush = (0, import_react8.useCallback)((m) => {
+  const applyAndPush = (0, import_react10.useCallback)((m) => {
     setModel(m);
     onChange?.(m);
     pushHistory(m);
   }, [onChange, pushHistory]);
-  const undo = (0, import_react8.useCallback)(() => {
+  const undo = (0, import_react10.useCallback)(() => {
     if (historyIdxRef.current <= 0) return;
     historyIdxRef.current--;
     const m = historyRef.current[historyIdxRef.current];
     setModel(m);
     onChange?.(m);
   }, [onChange]);
-  const redo = (0, import_react8.useCallback)(() => {
+  const redo = (0, import_react10.useCallback)(() => {
     if (historyIdxRef.current >= historyRef.current.length - 1) return;
     historyIdxRef.current++;
     const m = historyRef.current[historyIdxRef.current];
@@ -1895,7 +2184,7 @@ function SequenceEditor({
     applyAndPush({ ...model, messages: messages.filter((m) => m.id !== id) });
     if (selected === id) setSelected(null);
   };
-  const reorderMessage = (0, import_react8.useCallback)((id, toIdx) => {
+  const reorderMessage = (0, import_react10.useCallback)((id, toIdx) => {
     const fromIdx = messages.findIndex((m) => m.id === id);
     if (fromIdx < 0 || toIdx === fromIdx) return;
     const next = messages.slice();
@@ -1903,34 +2192,26 @@ function SequenceEditor({
     next.splice(toIdx, 0, moved);
     applyAndPush({ ...model, messages: next });
   }, [messages, model, applyAndPush]);
-  (0, import_react8.useEffect)(() => {
-    const onKey = (e) => {
-      const tgt = e.target;
-      if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable)) return;
-      const ctrl = e.ctrlKey || e.metaKey;
-      if (ctrl && e.key === "z") {
-        e.preventDefault();
-        undo();
-        return;
-      }
-      if (ctrl && (e.key === "y" || e.shiftKey && e.key === "z")) {
-        e.preventDefault();
-        redo();
-        return;
-      }
-      if (e.key === "Escape") {
-        setSelected(null);
-        setEditingId(null);
-        return;
-      }
-      if ((e.key === "Delete" || e.key === "Backspace") && selected) {
-        e.preventDefault();
-        removeMessage(selected);
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [undo, redo, selected]);
+  const keyCommands = [
+    { match: (e) => (e.ctrlKey || e.metaKey) && e.key === "z", run: () => {
+      undo();
+      return true;
+    } },
+    { match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z"), run: () => {
+      redo();
+      return true;
+    } },
+    { match: (e) => e.key === "Escape", run: () => {
+      setSelected(null);
+      setEditingId(null);
+      return true;
+    } },
+    { match: (e) => (e.key === "Delete" || e.key === "Backspace") && !!selected, run: () => {
+      removeMessage(selected);
+      return true;
+    } }
+  ];
+  useEditorKeyboard(keyCommands, [undo, redo, selected]);
   const handleExport = useExporters(model, onExport, "sequence");
   const handleImport = useImporter(applyAndPush, {
     expectedType: "sequence",
@@ -1945,9 +2226,9 @@ function SequenceEditor({
     setSelected(id);
     setDrag({ id, startY: e.clientY, originalIdx: idx, targetIdx: idx, active: false });
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!drag) return;
-    const baseY = HEADER_PAD + HEADER_H + 40;
+    const baseY = HEADER_PAD2 + HEADER_H2 + 40;
     const onMove = (ev) => {
       const dy = ev.clientY - drag.startY;
       if (!drag.active && Math.abs(dy) < DRAG_THRESHOLD) return;
@@ -1955,7 +2236,7 @@ function SequenceEditor({
       if (!svg) return;
       const rect = svg.getBoundingClientRect();
       const yInSvg = ev.clientY - rect.top;
-      const raw = Math.floor((yInSvg - baseY + ROW_H / 2) / ROW_H);
+      const raw = Math.floor((yInSvg - baseY + ROW_H2 / 2) / ROW_H2);
       const next = Math.max(0, Math.min(messages.length - 1, raw));
       if (next === drag.targetIdx && drag.active) return;
       setDrag({ ...drag, active: true, targetIdx: next });
@@ -1973,17 +2254,8 @@ function SequenceEditor({
       window.removeEventListener("mouseup", onUp);
     };
   }, [drag, messages.length, reorderMessage]);
-  const visualMessages = (0, import_react8.useMemo)(() => {
-    if (!drag?.active) return messages;
-    const idx = messages.findIndex((m) => m.id === drag.id);
-    if (idx < 0) return messages;
-    const next = messages.slice();
-    const [moved] = next.splice(idx, 1);
-    next.splice(drag.targetIdx, 0, moved);
-    return next;
-  }, [messages, drag]);
   const selectedMsg = selected ? messages.find((m) => m.id === selected) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
     display: "flex",
     flexDirection: "column",
     height,
@@ -1991,8 +2263,8 @@ function SequenceEditor({
     fontFamily: "ui-sans-serif,system-ui,sans-serif",
     background: t.ctrlsBg
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       display: "flex",
       gap: 8,
       padding: "7px 14px",
@@ -2001,12 +2273,12 @@ function SequenceEditor({
       alignItems: "center",
       flexWrap: "wrap"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
         actors.length,
         " actor",
         actors.length === 1 ? "" : "s",
@@ -2017,215 +2289,31 @@ function SequenceEditor({
         " \xB7 drag a row to reorder"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: actors.length === 0 && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 10,
-        color: t.textMuted,
-        pointerEvents: "none"
-      }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 36, opacity: 0.15, color: t.textPrimary }, children: "\u2194" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
-          "Click ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Actor" }),
-          " then ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Message" }),
-          " to start"
-        ] })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        "svg",
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        SequenceCanvas,
         {
-          ref: svgRef,
-          width: totalW,
-          height: totalH,
-          style: { display: "block", cursor: drag?.active ? "grabbing" : "default", userSelect: "none" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pattern", { id: "seqdots", x: "0", y: "0", width: "24", height: "24", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 12, cy: 12, r: 1.1, fill: t.dot }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("filter", { id: "seqShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feDropShadow", { dx: 0, dy: 3, stdDeviation: 5, floodColor: isDark ? "rgba(0,0,0,0.5)" : "rgba(15,23,42,0.09)" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("marker", { id: "seqArrow", markerWidth: 9, markerHeight: 7, refX: 8.5, refY: 3.5, orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: t.arrow }) })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: totalW, height: totalH, fill: "url(#seqdots)" }),
-            actors.map((name) => {
-              const x = actorX(name);
-              const top = HEADER_PAD + HEADER_H;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "line",
-                {
-                  x1: x,
-                  x2: x,
-                  y1: top + 4,
-                  y2: totalH - 24,
-                  stroke: t.lifeline,
-                  strokeWidth: 1.25,
-                  strokeDasharray: "5 5"
-                },
-                `life-${name}`
-              );
-            }),
-            visualMessages.map((msg, idx) => {
-              const y = msgY(idx);
-              const fromX = actorX(msg.from);
-              const toX = actorX(msg.to);
-              const selectedHere = selected === msg.id;
-              const isDragging = drag?.active && drag.id === msg.id;
-              const isSelf = msg.from === msg.to;
-              const stroke = selectedHere ? INDIGO : t.arrow;
-              const dash = msg.style === "dashed" ? "6,4" : void 0;
-              const cursor = drag?.active ? "grabbing" : "grab";
-              const groupOpacity = isDragging ? 0.85 : 1;
-              if (isSelf) {
-                const startX = fromX;
-                const loopW = 36;
-                const loopY = y - 6;
-                const d = `M ${startX} ${loopY} C ${startX + loopW} ${loopY}, ${startX + loopW} ${loopY + 24}, ${startX} ${loopY + 24}`;
-                return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { onMouseDown: (e) => onRowMouseDown(e, msg.id), style: { cursor, opacity: groupOpacity }, children: [
-                  (selectedHere || isDragging) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    "rect",
-                    {
-                      x: SIDE_PAD - 8,
-                      y: y - 22,
-                      width: totalW - (SIDE_PAD - 8) * 2,
-                      height: ROW_H - 12,
-                      rx: 10,
-                      fill: INDIGO_SOFT,
-                      opacity: isDark ? 0.18 : 0.6
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "none", stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: startX + loopW + 8, y: loopY + 16, fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
-                ] }, msg.id);
-              }
-              const labelX = (fromX + toX) / 2;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { onMouseDown: (e) => onRowMouseDown(e, msg.id), style: { cursor, opacity: groupOpacity }, children: [
-                (selectedHere || isDragging) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "rect",
-                  {
-                    x: SIDE_PAD - 8,
-                    y: y - 22,
-                    width: totalW - (SIDE_PAD - 8) * 2,
-                    height: ROW_H - 12,
-                    rx: 10,
-                    fill: INDIGO_SOFT,
-                    opacity: isDark ? 0.18 : 0.6
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: fromX, y1: y, x2: toX, y2: y, stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "rect",
-                  {
-                    x: labelX - estimateW(msg.label) / 2 - 6,
-                    y: y - 18,
-                    width: estimateW(msg.label) + 12,
-                    height: 18,
-                    rx: 6,
-                    fill: t.canvas,
-                    stroke: selectedHere ? INDIGO : t.cardBorder,
-                    strokeWidth: selectedHere ? 1.25 : 1
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: labelX, y: y - 5, textAnchor: "middle", fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
-              ] }, msg.id);
-            }),
-            actors.map((name) => {
-              const x = actorX(name);
-              const w = colW - 24;
-              return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "rect",
-                  {
-                    x: x - w / 2,
-                    y: HEADER_PAD,
-                    width: w,
-                    height: HEADER_H,
-                    rx: 12,
-                    fill: t.actorFill,
-                    stroke: t.actorStroke,
-                    strokeWidth: 1.25,
-                    filter: "url(#seqShadow)"
-                  }
-                ),
-                editingId === name ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("foreignObject", { x: x - w / 2 + 8, y: HEADER_PAD + 16, width: w - 16, height: 32, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "input",
-                  {
-                    autoFocus: true,
-                    defaultValue: name,
-                    onBlur: (e) => {
-                      renameActor(name, e.currentTarget.value.trim());
-                      setEditingId(null);
-                    },
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter") {
-                        renameActor(name, e.target.value.trim());
-                        setEditingId(null);
-                      }
-                      if (e.key === "Escape") setEditingId(null);
-                    },
-                    style: {
-                      width: "100%",
-                      height: "100%",
-                      border: "none",
-                      borderRadius: 6,
-                      outline: `2px solid ${INDIGO}`,
-                      textAlign: "center",
-                      fontSize: 13,
-                      fontWeight: 600,
-                      background: t.inputBg,
-                      color: t.inputText,
-                      boxSizing: "border-box",
-                      padding: "0 6px",
-                      fontFamily: "inherit"
-                    }
-                  }
-                ) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "text",
-                  {
-                    x,
-                    y: HEADER_PAD + HEADER_H / 2 + 4,
-                    textAnchor: "middle",
-                    fontSize: 13,
-                    fontWeight: 700,
-                    fill: t.actorText,
-                    style: { cursor: "pointer", userSelect: "none" },
-                    onDoubleClick: () => setEditingId(name),
-                    children: name
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "circle",
-                  {
-                    cx: x + w / 2 - 12,
-                    cy: HEADER_PAD + 14,
-                    r: 9,
-                    fill: "transparent",
-                    style: { cursor: "pointer" },
-                    onClick: () => removeActor(name),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Remove actor" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                  "text",
-                  {
-                    x: x + w / 2 - 12,
-                    y: HEADER_PAD + 18,
-                    textAnchor: "middle",
-                    fontSize: 12,
-                    fill: t.textMuted,
-                    style: { pointerEvents: "none", userSelect: "none" },
-                    children: "\xD7"
-                  }
-                )
-              ] }, `hdr-${name}`);
-            })
-          ]
+          model,
+          actors,
+          messages,
+          t,
+          isDark,
+          colW,
+          totalW,
+          totalH,
+          actorX,
+          msgY,
+          selected,
+          editingId,
+          setEditingId,
+          drag,
+          onRowMouseDown,
+          renameActor,
+          removeActor,
+          svgRef
         }
       ) }),
-      selectedMsg && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+      selectedMsg && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
         width: 280,
         flexShrink: 0,
         background: t.panelBg,
@@ -2233,9 +2321,9 @@ function SequenceEditor({
         padding: "14px 16px",
         overflowY: "auto"
       }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { t, children: "Label" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "Label" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "input",
           {
             value: editLabel || selectedMsg.label,
@@ -2251,21 +2339,21 @@ function SequenceEditor({
             style: input(t)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { t, children: "From" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { value: selectedMsg.from, onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: a, children: a }, a)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { t, children: "To" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("select", { value: selectedMsg.to, onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: a, children: a }, a)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { t, children: "Style" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { value: selectedMsg.from, onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { value: selectedMsg.to, onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             onClick: () => updateMessage(selectedMsg.id, { style: s2 }),
             style: {
               flex: 1,
               padding: "6px 10px",
-              border: `1.5px solid ${selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO : t.inputBorder}`,
-              background: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO_SOFT : t.inputBg,
-              color: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO : t.textPrimary,
+              border: `1.5px solid ${selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO2 : t.inputBorder}`,
+              background: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO_SOFT2 : t.inputBg,
+              color: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO2 : t.textPrimary,
               borderRadius: 8,
               fontSize: 12,
               fontWeight: 600,
@@ -2276,8 +2364,8 @@ function SequenceEditor({
           },
           s2
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 14 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 14 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             onClick: () => removeMessage(selectedMsg.id),
@@ -2287,7 +2375,7 @@ function SequenceEditor({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
       padding: "4px 14px",
       fontSize: 11,
       color: t.textMuted,
@@ -2296,25 +2384,22 @@ function SequenceEditor({
       display: "flex",
       gap: 16
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
         actors.length,
         " actors"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
         messages.length,
         " messages"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
     ] })
   ] });
 }
-function estimateW(text, pxPerChar = 7) {
-  return text.length * pxPerChar;
-}
 function primaryBtn() {
   return {
     padding: "6px 12px",
-    background: INDIGO,
+    background: INDIGO2,
     color: "#fff",
     border: "none",
     borderRadius: 8,
@@ -2353,180 +2438,37 @@ function input(t) {
   };
 }
 function Label({ t, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children });
 }
 
-// src/ui/Minimap.tsx
-var import_react9 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var W = 168;
-var H = 112;
-var PAD = 18;
-function Minimap({
+// src/ui/NodeNavigator.tsx
+var import_react11 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function NodeNavigator({
   model,
-  viewportW,
-  viewportH,
-  transform,
-  measureNode,
-  onCenterOn,
+  selected,
+  variant,
   isDark,
-  accentColor
+  t,
+  acc,
+  open,
+  onToggle,
+  onSelect
 }) {
-  const dragRef = (0, import_react9.useRef)(null);
-  const boxes = model.nodes.map((n) => {
-    const { w, h } = measureNode(n);
-    return { id: n.id, x: n.x ?? 0, y: n.y ?? 0, w, h };
-  });
-  if (boxes.length === 0) return null;
-  const vx = -transform.x / transform.scale;
-  const vy = -transform.y / transform.scale;
-  const vw = viewportW / transform.scale;
-  const vh = viewportH / transform.scale;
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const b of boxes) {
-    minX = Math.min(minX, b.x);
-    minY = Math.min(minY, b.y);
-    maxX = Math.max(maxX, b.x + b.w);
-    maxY = Math.max(maxY, b.y + b.h);
-  }
-  minX = Math.min(minX, vx);
-  minY = Math.min(minY, vy);
-  maxX = Math.max(maxX, vx + vw);
-  maxY = Math.max(maxY, vy + vh);
-  const contentW = Math.max(1, maxX - minX);
-  const contentH = Math.max(1, maxY - minY);
-  const scale = Math.min((W - PAD * 2) / contentW, (H - PAD * 2) / contentH);
-  const offsetX = (W - contentW * scale) / 2 - minX * scale;
-  const offsetY = (H - contentH * scale) / 2 - minY * scale;
-  const project = (x, y) => ({
-    x: offsetX + x * scale,
-    y: offsetY + y * scale
-  });
-  const unproject = (mx, my) => ({
-    x: (mx - offsetX) / scale,
-    y: (my - offsetY) / scale
-  });
-  const panTo = (0, import_react9.useCallback)((e) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const mx = e.clientX - rect.left;
-    const my = e.clientY - rect.top;
-    const { x, y } = unproject(mx, my);
-    onCenterOn(x, y);
-  }, [onCenterOn, scale, offsetX, offsetY]);
-  const onMouseDown = (e) => {
-    e.stopPropagation();
-    dragRef.current = { active: true };
-    panTo(e);
-  };
-  const onMouseMove = (e) => {
-    if (!dragRef.current?.active) return;
-    panTo(e);
-  };
-  const onMouseUp = () => {
-    dragRef.current = null;
-  };
-  const bg = isDark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.94)";
-  const border = isDark ? "#334155" : "#e2e8f0";
-  const nodeFill = isDark ? "#475569" : "#cbd5e1";
-  const viewStroke = accentColor;
-  const viewFill = `${accentColor}22`;
-  const vp1 = project(vx, vy);
-  const vp2 = project(vx + vw, vy + vh);
-  const vpRect = {
-    x: Math.max(0, Math.min(W, vp1.x)),
-    y: Math.max(0, Math.min(H, vp1.y)),
-    w: Math.max(2, Math.min(W, vp2.x) - Math.max(0, vp1.x)),
-    h: Math.max(2, Math.min(H, vp2.y) - Math.max(0, vp1.y))
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        bottom: 14,
-        right: 14,
-        background: bg,
-        border: `1px solid ${border}`,
-        borderRadius: 10,
-        padding: 6,
-        boxShadow: isDark ? "0 8px 20px rgba(0,0,0,0.45)" : "0 6px 18px rgba(15,23,42,0.08)",
-        backdropFilter: "blur(6px)"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-        "svg",
-        {
-          width: W,
-          height: H,
-          style: { display: "block", cursor: "grab", borderRadius: 6 },
-          onMouseDown,
-          onMouseMove,
-          onMouseUp,
-          onMouseLeave: onMouseUp,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("rect", { width: W, height: H, rx: 6, fill: isDark ? "#0f172a" : "#fafbfc" }),
-            boxes.map((b) => {
-              const p = project(b.x, b.y);
-              return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "rect",
-                {
-                  x: p.x,
-                  y: p.y,
-                  width: Math.max(2, b.w * scale),
-                  height: Math.max(2, b.h * scale),
-                  rx: 2,
-                  fill: nodeFill
-                },
-                b.id
-              );
-            }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              "rect",
-              {
-                x: vpRect.x,
-                y: vpRect.y,
-                width: vpRect.w,
-                height: vpRect.h,
-                rx: 3,
-                fill: viewFill,
-                stroke: viewStroke,
-                strokeWidth: 1.25
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}
-
-// src/ui/NodeNavigator.tsx
-var import_react10 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function NodeNavigator({
-  model,
-  selected,
-  variant,
-  isDark,
-  t,
-  acc,
-  open,
-  onToggle,
-  onSelect
-}) {
-  const [search, setSearch] = (0, import_react10.useState)("");
-  const shapeIcon = (node) => {
-    if (variant === "question") return "?";
-    if (variant === "journey") return "\u2197";
-    switch (node.shape) {
-      case "diamond":
-        return "\u25C7";
-      case "circle":
-        return "\u25CB";
-      case "parallelogram":
-        return "\u25B1";
-      default:
-        return "\u25AD";
-    }
+  const [search, setSearch] = (0, import_react11.useState)("");
+  const shapeIcon = (node) => {
+    if (variant === "question") return "?";
+    if (variant === "journey") return "\u2197";
+    switch (node.shape) {
+      case "diamond":
+        return "\u25C7";
+      case "circle":
+        return "\u25CB";
+      case "parallelogram":
+        return "\u25B1";
+      default:
+        return "\u25AD";
+    }
   };
   const filtered = model.nodes.filter(
     (n) => n.label.toLowerCase().includes(search.toLowerCase())
@@ -2683,137 +2625,6 @@ function NodeNavigator({
   ] });
 }
 
-// src/ui/ContextMenu.tsx
-var import_react11 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function ContextMenu({
-  x,
-  y,
-  nodeId,
-  edgeId,
-  isDark,
-  t,
-  acc,
-  canUndo,
-  canRedo,
-  onUndo,
-  onRedo,
-  onReCenter,
-  onAddNode,
-  onDuplicate,
-  onRename,
-  onDelete,
-  onDisconnect,
-  onEdgeRename,
-  onEdgeStyle,
-  onEdgeArrowhead,
-  onEdgeDelete,
-  onEdgeResetRouting,
-  currentEdgeStyle,
-  currentEdgeArrow,
-  edgeHasWaypoint,
-  containerRef
-}) {
-  const menuRef = (0, import_react11.useRef)(null);
-  const [pos, setPos] = (0, import_react11.useState)({ x, y });
-  (0, import_react11.useEffect)(() => {
-    if (!menuRef.current || !containerRef.current) return;
-    const m = menuRef.current.getBoundingClientRect();
-    const c = containerRef.current.getBoundingClientRect();
-    let nx = x, ny = y;
-    if (nx + m.width > c.right - 8) nx = x - m.width;
-    if (ny + m.height > c.bottom - 8) ny = y - m.height;
-    setPos({ x: nx, y: ny });
-  }, [x, y, containerRef]);
-  const bg = isDark ? "#1e293b" : "#ffffff";
-  const border = isDark ? "#334155" : "#e2e8f0";
-  const hoverBg = isDark ? "#334155" : "#f1f5f9";
-  const dividerColor = isDark ? "#334155" : "#f1f5f9";
-  const text = t.textPrimary;
-  const muted = t.textMuted;
-  const item = (label, onClick, color, disabled) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "button",
-    {
-      onClick: disabled ? void 0 : onClick,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-        width: "100%",
-        padding: "7px 14px",
-        background: "none",
-        border: "none",
-        textAlign: "left",
-        cursor: disabled ? "default" : "pointer",
-        fontSize: 12,
-        fontFamily: "ui-sans-serif,system-ui,sans-serif",
-        color: disabled ? muted : color ?? text,
-        opacity: disabled ? 0.4 : 1,
-        borderRadius: 6
-      },
-      onMouseEnter: (e) => {
-        if (!disabled) e.currentTarget.style.background = hoverBg;
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "none";
-      },
-      children: label
-    },
-    label
-  );
-  const divider2 = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      ref: menuRef,
-      onMouseDown: (e) => e.stopPropagation(),
-      style: {
-        position: "fixed",
-        left: pos.x,
-        top: pos.y,
-        zIndex: 9999,
-        background: bg,
-        border: `1px solid ${border}`,
-        borderRadius: 10,
-        padding: "5px 0",
-        minWidth: 180,
-        boxShadow: isDark ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.12)",
-        fontFamily: "ui-sans-serif,system-ui,sans-serif"
-      },
-      children: edgeId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Edge" }),
-        item("Rename label (dbl-click)", () => onEdgeRename?.()),
-        divider2,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Style" }),
-        item(`Solid${currentEdgeStyle === "solid" || !currentEdgeStyle ? " \u2713" : ""}`, () => onEdgeStyle?.("solid")),
-        item(`Dashed${currentEdgeStyle === "dashed" ? " \u2713" : ""}`, () => onEdgeStyle?.("dashed")),
-        item(`Dotted${currentEdgeStyle === "dotted" ? " \u2713" : ""}`, () => onEdgeStyle?.("dotted")),
-        divider2,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Arrowhead" }),
-        item(`Arrow${currentEdgeArrow !== "none" ? " \u2713" : ""}`, () => onEdgeArrowhead?.("arrow")),
-        item(`None${currentEdgeArrow === "none" ? " \u2713" : ""}`, () => onEdgeArrowhead?.("none")),
-        divider2,
-        item("Reset routing", () => onEdgeResetRouting?.(), void 0, !edgeHasWaypoint),
-        item("Delete edge", () => onEdgeDelete?.(), "#ef4444")
-      ] }) : nodeId ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Node" }),
-        item("Rename (dbl-click)", onRename),
-        item("Duplicate", onDuplicate),
-        item("Disconnect all edges", onDisconnect),
-        divider2,
-        item("Delete node", onDelete, "#ef4444")
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Canvas" }),
-        item("Add node here", onAddNode, acc.color),
-        item("Re-center (Ctrl+0)", onReCenter),
-        divider2,
-        item("Undo (Ctrl+Z)", onUndo, void 0, !canUndo),
-        item("Redo (Ctrl+Y)", onRedo, void 0, !canRedo)
-      ] })
-    }
-  );
-}
-
 // src/ui/render.tsx
 var import_react12 = require("react");
 
@@ -2881,7 +2692,7 @@ function bezierPathVia(x1, y1, wx, wy, x2, y2) {
 }
 
 // src/ui/render.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var STYLE_LABEL = { pointerEvents: "none", userSelect: "none" };
 var STYLE_BLUR = { filter: "blur(4px)" };
 var STYLE_EDGE_HIT = { cursor: "pointer" };
@@ -2895,11 +2706,11 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
   const stroke = selected ? acc.color : t.nodeStroke;
   const fill = selected ? t.nodeSelectedFill : t.nodeFill;
   const sw = selected ? 1.75 : 1.25;
-  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: node.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
-  ] }) : node.shape === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: node.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
+  ] }) : node.shape === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "polygon",
       {
         points: `${cx},${-5} ${w + 5},${cy} ${cx},${NODE_H2 + 5} ${-5},${cy}`,
@@ -2910,7 +2721,7 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "polygon",
       {
         points: `${cx},${-2} ${w + 2},${cy} ${cx},${NODE_H2 + 2} ${-2},${cy}`,
@@ -2920,8 +2731,8 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         opacity: 0.55
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "rect",
       {
         x: -4,
@@ -2936,7 +2747,7 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "rect",
       {
         x: -1.5,
@@ -2952,35 +2763,35 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
     )
   ] }) });
   const badgeColor = isDark ? ACCENT.emeraldDark : ACCENT.emerald;
-  const badge = variant === "journey" && stepNumber !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: 14, y: 18, textAnchor: "middle", fontSize: 9, fill: "white", fontWeight: "700", style: STYLE_LABEL, children: stepNumber })
+  const badge = variant === "journey" && stepNumber !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 14, y: 18, textAnchor: "middle", fontSize: 9, fill: "white", fontWeight: "700", style: STYLE_LABEL, children: stepNumber })
   ] });
   switch (node.shape) {
     case "diamond": {
       const pts = `${cx},0 ${w},${cy} ${cx},${NODE_H2} 0,${cy}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     }
     case "circle":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     case "parallelogram":
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
   }
@@ -3001,8 +2812,8 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
   const textSub = isDark ? "#64748b" : "#94a3b8";
   const textAns = isDark ? "#cbd5e1" : "#374151";
   const portRowY = Q_BASE_H2 + Q_ANS_ROW_H2 - 8;
-  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "rect",
       {
         x: -4,
@@ -3017,7 +2828,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "rect",
       {
         x: -1.5,
@@ -3032,29 +2843,29 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
     glow,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "text",
       {
         style: STYLE_LABEL,
         fontFamily: "ui-sans-serif,system-ui,sans-serif",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
-    answers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 22, textAnchor: "middle", fontSize: 10, fill: amber, opacity: 0.4, fontWeight: 600, style: STYLE_LABEL, children: "No answers yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 36, textAnchor: "middle", fontSize: 9, fill: textSub, opacity: 0.7, style: STYLE_LABEL, children: "Open panel \u2192 Add Answer" })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
+    answers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 22, textAnchor: "middle", fontSize: 10, fill: amber, opacity: 0.4, fontWeight: 600, style: STYLE_LABEL, children: "No answers yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 36, textAnchor: "middle", fontSize: 9, fill: textSub, opacity: 0.7, style: STYLE_LABEL, children: "Open panel \u2192 Add Answer" })
     ] }),
     answers.map((ans, i) => {
       const prevW = answers.slice(0, i).reduce((s2, a) => s2 + answerCardW2(a) + Q_CARD_PAD2, 0);
@@ -3067,8 +2878,8 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
       const letter = i < 26 ? ANSWER_LETTERS[i] : `${i + 1}`;
       const maxChars = Math.max(2, Math.floor((cW - 20) / 7.5));
       const displayAns = ans.length > maxChars ? ans.slice(0, maxChars - 1) + "\u2026" : ans;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "rect",
           {
             x: cardX,
@@ -3081,7 +2892,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             strokeWidth: connected ? 1.5 : 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "rect",
           {
             x: cx - 11,
@@ -3092,7 +2903,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             fill: connected ? amber : isDark ? "#1e293b" : "#fef3c7"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "text",
           {
             x: cx,
@@ -3105,7 +2916,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             children: letter
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "text",
           {
             x: cx,
@@ -3119,7 +2930,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             children: displayAns
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "circle",
           {
             cx,
@@ -3132,7 +2943,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             onMouseDown: (e) => onAnswerPortDown(e, node.id, ans, cx, portRowY)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "path",
           {
             d: `M ${cx - 3} ${portRowY - 2} L ${cx} ${portRowY + 2} L ${cx + 3} ${portRowY - 2}`,
@@ -3188,7 +2999,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
   const labelW = edge.label ? Math.max(60, Math.ceil(estimateTextW2(edge.label, 7) + 18)) : 60;
   const showHandle = !!onWaypointDown && (hovered || !!wp);
   const flowClass = dash ? void 0 : isAmber ? "edge-flow-amber" : "edge-flow";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "g",
     {
       onDoubleClick: (e) => {
@@ -3201,8 +3012,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "path",
           {
             d,
@@ -3217,7 +3028,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
             style: STYLE_NO_EVENTS
           }
         ),
-        showHandle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        showHandle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "circle",
           {
             cx: hx,
@@ -3233,7 +3044,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
             }
           }
         ),
-        editing && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        editing && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             autoFocus: true,
@@ -3245,80 +3056,664 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
                 e.preventDefault();
                 onEditCommit?.();
               }
-              if (e.key === "Escape") {
-                e.preventDefault();
-                onEditCancel?.();
+              if (e.key === "Escape") {
+                e.preventDefault();
+                onEditCancel?.();
+              }
+            },
+            onMouseDown: (e) => e.stopPropagation(),
+            style: {
+              width: "100%",
+              height: "100%",
+              border: "none",
+              borderRadius: 6,
+              outline: `2px solid ${acc.color}`,
+              textAlign: "center",
+              fontSize: 10,
+              fontWeight: 500,
+              background: t.inputBg,
+              color: t.inputText,
+              boxSizing: "border-box",
+              padding: "0 6px",
+              fontFamily: "inherit"
+            }
+          }
+        ) }) : edge.label && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "rect",
+            {
+              x: mx - labelW / 2,
+              y: my - 11,
+              width: labelW,
+              height: 19,
+              rx: 5,
+              fill: t.panelBg,
+              stroke: t.cardBorder,
+              strokeWidth: 1,
+              style: STYLE_EDGE_LABEL_HIT
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "text",
+            {
+              x: mx,
+              y: my + 4,
+              textAnchor: "middle",
+              fontSize: 10,
+              fill: t.textSecondary,
+              fontFamily: "ui-sans-serif,system-ui,sans-serif",
+              fontWeight: "500",
+              style: STYLE_LABEL,
+              children: edge.label
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/ui/Minimap.tsx
+var import_react13 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var W = 168;
+var H = 112;
+var PAD = 18;
+function Minimap({
+  model,
+  viewportW,
+  viewportH,
+  transform,
+  measureNode,
+  onCenterOn,
+  isDark,
+  accentColor
+}) {
+  const dragRef = (0, import_react13.useRef)(null);
+  const boxes = model.nodes.map((n) => {
+    const { w, h } = measureNode(n);
+    return { id: n.id, x: n.x ?? 0, y: n.y ?? 0, w, h };
+  });
+  if (boxes.length === 0) return null;
+  const vx = -transform.x / transform.scale;
+  const vy = -transform.y / transform.scale;
+  const vw = viewportW / transform.scale;
+  const vh = viewportH / transform.scale;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const b of boxes) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+  }
+  minX = Math.min(minX, vx);
+  minY = Math.min(minY, vy);
+  maxX = Math.max(maxX, vx + vw);
+  maxY = Math.max(maxY, vy + vh);
+  const contentW = Math.max(1, maxX - minX);
+  const contentH = Math.max(1, maxY - minY);
+  const scale = Math.min((W - PAD * 2) / contentW, (H - PAD * 2) / contentH);
+  const offsetX = (W - contentW * scale) / 2 - minX * scale;
+  const offsetY = (H - contentH * scale) / 2 - minY * scale;
+  const project = (x, y) => ({
+    x: offsetX + x * scale,
+    y: offsetY + y * scale
+  });
+  const unproject = (mx, my) => ({
+    x: (mx - offsetX) / scale,
+    y: (my - offsetY) / scale
+  });
+  const panTo = (0, import_react13.useCallback)((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const { x, y } = unproject(mx, my);
+    onCenterOn(x, y);
+  }, [onCenterOn, scale, offsetX, offsetY]);
+  const onMouseDown = (e) => {
+    e.stopPropagation();
+    dragRef.current = { active: true };
+    panTo(e);
+  };
+  const onMouseMove = (e) => {
+    if (!dragRef.current?.active) return;
+    panTo(e);
+  };
+  const onMouseUp = () => {
+    dragRef.current = null;
+  };
+  const bg = isDark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.94)";
+  const border = isDark ? "#334155" : "#e2e8f0";
+  const nodeFill = isDark ? "#475569" : "#cbd5e1";
+  const viewStroke = accentColor;
+  const viewFill = `${accentColor}22`;
+  const vp1 = project(vx, vy);
+  const vp2 = project(vx + vw, vy + vh);
+  const vpRect = {
+    x: Math.max(0, Math.min(W, vp1.x)),
+    y: Math.max(0, Math.min(H, vp1.y)),
+    w: Math.max(2, Math.min(W, vp2.x) - Math.max(0, vp1.x)),
+    h: Math.max(2, Math.min(H, vp2.y) - Math.max(0, vp1.y))
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: 14,
+        right: 14,
+        background: bg,
+        border: `1px solid ${border}`,
+        borderRadius: 10,
+        padding: 6,
+        boxShadow: isDark ? "0 8px 20px rgba(0,0,0,0.45)" : "0 6px 18px rgba(15,23,42,0.08)",
+        backdropFilter: "blur(6px)"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "svg",
+        {
+          width: W,
+          height: H,
+          style: { display: "block", cursor: "grab", borderRadius: 6 },
+          onMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onMouseLeave: onMouseUp,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: W, height: H, rx: 6, fill: isDark ? "#0f172a" : "#fafbfc" }),
+            boxes.map((b) => {
+              const p = project(b.x, b.y);
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "rect",
+                {
+                  x: p.x,
+                  y: p.y,
+                  width: Math.max(2, b.w * scale),
+                  height: Math.max(2, b.h * scale),
+                  rx: 2,
+                  fill: nodeFill
+                },
+                b.id
+              );
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "rect",
+              {
+                x: vpRect.x,
+                y: vpRect.y,
+                width: vpRect.w,
+                height: vpRect.h,
+                rx: 3,
+                fill: viewFill,
+                stroke: viewStroke,
+                strokeWidth: 1.25
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/ui/ContextMenu.tsx
+var import_react14 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ContextMenu({
+  x,
+  y,
+  nodeId,
+  edgeId,
+  isDark,
+  t,
+  acc,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onReCenter,
+  onAddNode,
+  onDuplicate,
+  onRename,
+  onDelete,
+  onDisconnect,
+  onEdgeRename,
+  onEdgeStyle,
+  onEdgeArrowhead,
+  onEdgeDelete,
+  onEdgeResetRouting,
+  currentEdgeStyle,
+  currentEdgeArrow,
+  edgeHasWaypoint,
+  containerRef
+}) {
+  const menuRef = (0, import_react14.useRef)(null);
+  const [pos, setPos] = (0, import_react14.useState)({ x, y });
+  (0, import_react14.useEffect)(() => {
+    if (!menuRef.current || !containerRef.current) return;
+    const m = menuRef.current.getBoundingClientRect();
+    const c = containerRef.current.getBoundingClientRect();
+    let nx = x, ny = y;
+    if (nx + m.width > c.right - 8) nx = x - m.width;
+    if (ny + m.height > c.bottom - 8) ny = y - m.height;
+    setPos({ x: nx, y: ny });
+  }, [x, y, containerRef]);
+  const bg = isDark ? "#1e293b" : "#ffffff";
+  const border = isDark ? "#334155" : "#e2e8f0";
+  const hoverBg = isDark ? "#334155" : "#f1f5f9";
+  const dividerColor = isDark ? "#334155" : "#f1f5f9";
+  const text = t.textPrimary;
+  const muted = t.textMuted;
+  const item = (label, onClick, color, disabled) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        width: "100%",
+        padding: "7px 14px",
+        background: "none",
+        border: "none",
+        textAlign: "left",
+        cursor: disabled ? "default" : "pointer",
+        fontSize: 12,
+        fontFamily: "ui-sans-serif,system-ui,sans-serif",
+        color: disabled ? muted : color ?? text,
+        opacity: disabled ? 0.4 : 1,
+        borderRadius: 6
+      },
+      onMouseEnter: (e) => {
+        if (!disabled) e.currentTarget.style.background = hoverBg;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "none";
+      },
+      children: label
+    },
+    label
+  );
+  const divider2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      ref: menuRef,
+      onMouseDown: (e) => e.stopPropagation(),
+      style: {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        zIndex: 9999,
+        background: bg,
+        border: `1px solid ${border}`,
+        borderRadius: 10,
+        padding: "5px 0",
+        minWidth: 180,
+        boxShadow: isDark ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.12)",
+        fontFamily: "ui-sans-serif,system-ui,sans-serif"
+      },
+      children: edgeId ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Edge" }),
+        item("Rename label (dbl-click)", () => onEdgeRename?.()),
+        divider2,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Style" }),
+        item(`Solid${currentEdgeStyle === "solid" || !currentEdgeStyle ? " \u2713" : ""}`, () => onEdgeStyle?.("solid")),
+        item(`Dashed${currentEdgeStyle === "dashed" ? " \u2713" : ""}`, () => onEdgeStyle?.("dashed")),
+        item(`Dotted${currentEdgeStyle === "dotted" ? " \u2713" : ""}`, () => onEdgeStyle?.("dotted")),
+        divider2,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Arrowhead" }),
+        item(`Arrow${currentEdgeArrow !== "none" ? " \u2713" : ""}`, () => onEdgeArrowhead?.("arrow")),
+        item(`None${currentEdgeArrow === "none" ? " \u2713" : ""}`, () => onEdgeArrowhead?.("none")),
+        divider2,
+        item("Reset routing", () => onEdgeResetRouting?.(), void 0, !edgeHasWaypoint),
+        item("Delete edge", () => onEdgeDelete?.(), "#ef4444")
+      ] }) : nodeId ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Node" }),
+        item("Rename (dbl-click)", onRename),
+        item("Duplicate", onDuplicate),
+        item("Disconnect all edges", onDisconnect),
+        divider2,
+        item("Delete node", onDelete, "#ef4444")
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Canvas" }),
+        item("Add node here", onAddNode, acc.color),
+        item("Re-center (Ctrl+0)", onReCenter),
+        divider2,
+        item("Undo (Ctrl+Z)", onUndo, void 0, !canUndo),
+        item("Redo (Ctrl+Y)", onRedo, void 0, !canRedo)
+      ] })
+    }
+  );
+}
+
+// src/ui/DiagramCanvas.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var STYLE_LABEL2 = { pointerEvents: "none", userSelect: "none" };
+var STYLE_LIVE_PORT = { opacity: 0.85, pointerEvents: "none" };
+var STYLE_NODE_GRAB = { cursor: "grab" };
+var STYLE_NODE_GRABBING = { cursor: "grabbing" };
+var STYLE_PORT_VISIBLE = { cursor: "crosshair", opacity: 1, transition: "opacity 0.15s", pointerEvents: "all", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))" };
+var STYLE_PORT_HIDDEN = { cursor: "crosshair", opacity: 0, transition: "opacity 0.15s", pointerEvents: "none", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))" };
+function DiagramCanvas(props) {
+  const {
+    model,
+    variant,
+    variantLabel,
+    t,
+    isDark,
+    acc,
+    transform,
+    setTransform,
+    selected,
+    selectedSet,
+    hoveredId,
+    setHoveredId,
+    drag,
+    pan,
+    liveEdge,
+    boxSel,
+    alignGuides,
+    editingEdgeId,
+    editEdgeLabel,
+    setEditEdgeLabel,
+    commitEdgeEdit,
+    setEditingEdgeId,
+    beginEditEdge,
+    onEdgeContextMenu,
+    setWaypointDrag,
+    editingId,
+    editLabel,
+    setEditLabel,
+    commitEdit,
+    setEditingId,
+    onNodeMouseDown,
+    onNodeMouseUp,
+    onNodeDblClick,
+    onNodeContextMenu,
+    onPortMouseDown,
+    onAnswerPortDown,
+    onSvgMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onSvgContextMenu,
+    reducedMotion,
+    isCoarse,
+    portR,
+    shadowClr,
+    arrowClr,
+    amberArrow,
+    viewport,
+    svgRef,
+    containerRef,
+    ctxMenu,
+    history,
+    onCtxUndo,
+    onCtxRedo,
+    onCtxReCenter,
+    onCtxAddNode,
+    onCtxDuplicate,
+    onCtxRename,
+    onCtxDelete,
+    onCtxDisconnect,
+    ctxEdgeStyle,
+    ctxEdgeArrow,
+    ctxEdgeHasWaypoint,
+    onCtxEdgeRename,
+    onCtxEdgeStyle,
+    onCtxEdgeArrowhead,
+    onCtxEdgeDelete,
+    onCtxEdgeResetRouting
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "svg",
+      {
+        ref: svgRef,
+        width: "100%",
+        height: "100%",
+        role: "application",
+        "aria-label": `${variantLabel} diagram editor. ${model.nodes.length} ${variantLabel.toLowerCase()}s, ${model.edges.length} connections. Scroll to zoom, drag to pan, click a ${variantLabel.toLowerCase()} to select.`,
+        tabIndex: 0,
+        style: { display: "block", cursor: pan ? "grabbing" : drag ? "grabbing" : liveEdge ? "crosshair" : "default", userSelect: "none", outline: "none" },
+        onMouseDown: onSvgMouseDown,
+        onMouseMove,
+        onMouseUp,
+        onMouseLeave: onMouseUp,
+        onContextMenu: onSvgContextMenu,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: reducedMotion ? `
+            .edge-flow { stroke-dasharray: 0; }
+            .edge-flow-amber { stroke-dasharray: 0; }
+            .edge-live { stroke-dasharray: 4 4; }
+          ` : `
+            @keyframes edgeFlow { to { stroke-dashoffset: -13; } }
+            @keyframes edgeFlowFast { to { stroke-dashoffset: -13; } }
+            .edge-flow { stroke-dasharray: 8 5; animation: edgeFlow 0.9s linear infinite; }
+            .edge-flow-amber { stroke-dasharray: 6 4; animation: edgeFlowFast 0.65s linear infinite; }
+            .edge-live { stroke-dasharray: 7 5; animation: edgeFlow 0.55s linear infinite; }
+          ` }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
+            model.edges.map((e) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              EdgeLine,
+              {
+                edge: e,
+                nodes: model.nodes,
+                variant,
+                t,
+                isDark,
+                acc,
+                editing: editingEdgeId === e.id,
+                editValue: editEdgeLabel,
+                onEditChange: setEditEdgeLabel,
+                onEditCommit: commitEdgeEdit,
+                onEditCancel: () => setEditingEdgeId(null),
+                onDoubleClick: beginEditEdge,
+                onContextMenu: onEdgeContextMenu,
+                onWaypointDown: (ev, edgeId) => setWaypointDrag(edgeId)
+              },
+              e.id
+            )),
+            liveEdge && (() => {
+              const d = bezierPath2(liveEdge.fromX, liveEdge.fromY, liveEdge.toX, liveEdge.toY, liveEdge.exitDir);
+              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
+            })(),
+            alignGuides?.x && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "line",
+              {
+                x1: alignGuides.x.pos,
+                x2: alignGuides.x.pos,
+                y1: alignGuides.x.minY,
+                y2: alignGuides.x.maxY,
+                stroke: acc.color,
+                strokeWidth: 1 / transform.scale,
+                strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
+                opacity: 0.85,
+                pointerEvents: "none"
+              }
+            ),
+            alignGuides?.y && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "line",
+              {
+                y1: alignGuides.y.pos,
+                y2: alignGuides.y.pos,
+                x1: alignGuides.y.minX,
+                x2: alignGuides.y.maxX,
+                stroke: acc.color,
+                strokeWidth: 1 / transform.scale,
+                strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
+                opacity: 0.85,
+                pointerEvents: "none"
               }
-            },
-            onMouseDown: (e) => e.stopPropagation(),
-            style: {
-              width: "100%",
-              height: "100%",
-              border: "none",
-              borderRadius: 6,
-              outline: `2px solid ${acc.color}`,
-              textAlign: "center",
-              fontSize: 10,
-              fontWeight: 500,
-              background: t.inputBg,
-              color: t.inputText,
-              boxSizing: "border-box",
-              padding: "0 6px",
-              fontFamily: "inherit"
-            }
+            ),
+            model.nodes.map((node, idx) => {
+              const isHovered = hoveredId === node.id;
+              const isQuestion2 = variant === "question";
+              const { w: nW } = nodeDims(node, variant);
+              const isSelected = selectedSet.has(node.id);
+              return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                "g",
+                {
+                  transform: `translate(${node.x ?? 0},${node.y ?? 0})`,
+                  role: "button",
+                  "aria-label": `${variantLabel} ${variant === "journey" ? idx + 1 + ": " : ""}${node.label}${isSelected ? ", selected" : ""}`,
+                  style: drag?.nodeId === node.id ? STYLE_NODE_GRABBING : STYLE_NODE_GRAB,
+                  onMouseDown: (e) => onNodeMouseDown(e, node.id),
+                  onMouseUp: (e) => onNodeMouseUp(e, node.id),
+                  onDoubleClick: (e) => onNodeDblClick(e, node.id),
+                  onContextMenu: (e) => onNodeContextMenu(e, node.id),
+                  onMouseEnter: () => setHoveredId(node.id),
+                  onMouseLeave: () => setHoveredId(null),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("title", { children: `${variantLabel}: ${node.label}` }),
+                    isQuestion2 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
+                      editingId === node.id ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "input",
+                        {
+                          autoFocus: true,
+                          value: editLabel,
+                          onChange: (e) => setEditLabel(e.target.value),
+                          onBlur: commitEdit,
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter") commitEdit();
+                            if (e.key === "Escape") setEditingId(null);
+                          },
+                          style: { width: "100%", height: "100%", border: "none", borderRadius: 6, outline: `2px solid ${acc.color}`, textAlign: "center", fontSize: 13, fontWeight: 500, background: t.inputBg, boxSizing: "border-box", padding: "0 6px", fontFamily: "inherit", color: t.inputText }
+                        }
+                      ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("text", { x: nW / 2, y: NODE_H2 / 2 + 5, textAnchor: "middle", fontSize: 13, fontWeight: "500", fontFamily: "ui-sans-serif,system-ui,sans-serif", fill: isSelected ? acc.color : t.textPrimary, style: STYLE_LABEL2, children: node.label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        "circle",
+                        {
+                          cx: nW / 2,
+                          cy: NODE_H2 + 1,
+                          r: portR,
+                          fill: acc.color,
+                          stroke: isDark ? "#0f172a" : "white",
+                          strokeWidth: 2,
+                          style: isHovered || isCoarse ? STYLE_PORT_VISIBLE : STYLE_PORT_HIDDEN,
+                          onMouseDown: (e) => onPortMouseDown(e, node.id)
+                        }
+                      )
+                    ] }),
+                    liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: nW / 2, cy: -1, r: portR, fill: acc.color, stroke: isDark ? "#0f172a" : "white", strokeWidth: 2, style: STYLE_LIVE_PORT })
+                  ]
+                },
+                node.id
+              );
+            })
+          ] })
+        ]
+      }
+    ),
+    boxSel && Math.abs(boxSel.cx - boxSel.sx) + Math.abs(boxSel.cy - boxSel.sy) > 4 && containerRef.current && (() => {
+      const rect = containerRef.current.getBoundingClientRect();
+      const left = Math.min(boxSel.sx, boxSel.cx) - rect.left;
+      const top = Math.min(boxSel.sy, boxSel.cy) - rect.top;
+      const w = Math.abs(boxSel.cx - boxSel.sx);
+      const h = Math.abs(boxSel.cy - boxSel.sy);
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left,
+            top,
+            width: w,
+            height: h,
+            border: `1px dashed ${acc.color}`,
+            background: isDark ? "rgba(99,102,241,0.10)" : "rgba(99,102,241,0.08)",
+            pointerEvents: "none",
+            borderRadius: 4
           }
-        ) }) : edge.label && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "rect",
-            {
-              x: mx - labelW / 2,
-              y: my - 11,
-              width: labelW,
-              height: 19,
-              rx: 5,
-              fill: t.panelBg,
-              stroke: t.cardBorder,
-              strokeWidth: 1,
-              style: STYLE_EDGE_LABEL_HIT
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            "text",
-            {
-              x: mx,
-              y: my + 4,
-              textAnchor: "middle",
-              fontSize: 10,
-              fill: t.textSecondary,
-              fontFamily: "ui-sans-serif,system-ui,sans-serif",
-              fontWeight: "500",
-              style: STYLE_LABEL,
-              children: edge.label
-            }
-          )
-        ] }) : null
-      ]
-    }
-  );
+        }
+      );
+    })(),
+    model.nodes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
+        "Click ",
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("strong", { style: { color: acc.color }, children: [
+          "+ ",
+          variantLabel
+        ] }),
+        " to start"
+      ] })
+    ] }),
+    model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Minimap,
+      {
+        model,
+        viewportW: viewport.w,
+        viewportH: viewport.h,
+        transform,
+        isDark,
+        accentColor: acc.color,
+        measureNode: (n) => nodeDims(n, variant),
+        onCenterOn: (cx, cy) => {
+          setTransform((tr) => ({ ...tr, x: viewport.w / 2 - cx * tr.scale, y: viewport.h / 2 - cy * tr.scale }));
+        }
+      }
+    ),
+    ctxMenu && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ContextMenu,
+      {
+        x: ctxMenu.x,
+        y: ctxMenu.y,
+        nodeId: ctxMenu.nodeId,
+        edgeId: ctxMenu.edgeId,
+        isDark,
+        t,
+        acc,
+        canUndo: history.canUndo,
+        canRedo: history.canRedo,
+        onUndo: onCtxUndo,
+        onRedo: onCtxRedo,
+        onReCenter: onCtxReCenter,
+        onAddNode: onCtxAddNode,
+        onDuplicate: onCtxDuplicate,
+        onRename: onCtxRename,
+        onDelete: onCtxDelete,
+        onDisconnect: onCtxDisconnect,
+        currentEdgeStyle: ctxEdgeStyle,
+        currentEdgeArrow: ctxEdgeArrow,
+        edgeHasWaypoint: ctxEdgeHasWaypoint,
+        onEdgeRename: onCtxEdgeRename,
+        onEdgeStyle: onCtxEdgeStyle,
+        onEdgeArrowhead: onCtxEdgeArrowhead,
+        onEdgeDelete: onCtxEdgeDelete,
+        onEdgeResetRouting: onCtxEdgeResetRouting,
+        containerRef
+      }
+    )
+  ] });
 }
 
 // src/ui/hooks/useHistory.ts
-var import_react13 = require("react");
+var import_react15 = require("react");
 var MAX_HISTORY = 80;
 function useHistory(initial, onChange) {
-  const [state, setState] = (0, import_react13.useState)(initial);
-  const stackRef = (0, import_react13.useRef)([initial]);
-  const idxRef = (0, import_react13.useRef)(0);
-  const [, setTick] = (0, import_react13.useState)(0);
+  const [state, setState] = (0, import_react15.useState)(initial);
+  const stackRef = (0, import_react15.useRef)([initial]);
+  const idxRef = (0, import_react15.useRef)(0);
+  const [, setTick] = (0, import_react15.useState)(0);
   const bump = () => setTick((n) => n + 1);
-  const apply = (0, import_react13.useCallback)(
+  const apply = (0, import_react15.useCallback)(
     (next) => {
       setState(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const applyAndPush = (0, import_react13.useCallback)(
+  const applyAndPush = (0, import_react15.useCallback)(
     (next) => {
       const stack = stackRef.current.slice(0, idxRef.current + 1);
       stack.push(next);
@@ -3331,7 +3726,7 @@ function useHistory(initial, onChange) {
     },
     [onChange]
   );
-  const undo = (0, import_react13.useCallback)(() => {
+  const undo = (0, import_react15.useCallback)(() => {
     if (idxRef.current <= 0) return;
     idxRef.current--;
     const next = stackRef.current[idxRef.current];
@@ -3339,7 +3734,7 @@ function useHistory(initial, onChange) {
     onChange?.(next);
     bump();
   }, [onChange]);
-  const redo = (0, import_react13.useCallback)(() => {
+  const redo = (0, import_react15.useCallback)(() => {
     if (idxRef.current >= stackRef.current.length - 1) return;
     idxRef.current++;
     const next = stackRef.current[idxRef.current];
@@ -3359,10 +3754,10 @@ function useHistory(initial, onChange) {
 }
 
 // src/ui/hooks/useCanvasWheel.ts
-var import_react14 = require("react");
+var import_react16 = require("react");
 function useCanvasWheel(ref, setTransform, options = {}) {
   const { min = 0.15, max = 3, factor = 0.1 } = options;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const onWheel = (e) => {
@@ -3386,7 +3781,7 @@ function useCanvasWheel(ref, setTransform, options = {}) {
 }
 
 // src/ui/hooks/useCanvasTouch.ts
-var import_react15 = require("react");
+var import_react17 = require("react");
 function useCanvasTouch(ref, {
   transform,
   setTransform,
@@ -3396,7 +3791,7 @@ function useCanvasTouch(ref, {
   longPressMs = 550,
   longPressSlop = 8
 }) {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let touchPan = null;
@@ -3500,10 +3895,10 @@ function useCanvasTouch(ref, {
 }
 
 // src/ui/hooks/useElementSize.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 function useElementSize(ref) {
-  const [size, setSize] = (0, import_react16.useState)({ w: 0, h: 0 });
-  (0, import_react16.useEffect)(() => {
+  const [size, setSize] = (0, import_react18.useState)({ w: 0, h: 0 });
+  (0, import_react18.useEffect)(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const measure = () => {
@@ -3609,14 +4004,12 @@ function nearestInDirection(fromX, fromY, dir, candidates) {
 }
 
 // src/ui/DiagramEditor.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var STYLE_LABEL2 = { pointerEvents: "none", userSelect: "none" };
-var STYLE_LIVE_PORT = { opacity: 0.85, pointerEvents: "none" };
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var STYLE_SR_ONLY = { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", border: 0 };
 var STYLE_FLEX_ROW = { flex: 1, display: "flex", overflow: "hidden" };
 function DiagramEditor(props) {
   if (props.initialModel?.type === "sequence") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       SequenceEditor,
       {
         initialModel: props.initialModel,
@@ -3630,7 +4023,7 @@ function DiagramEditor(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FlowchartEditor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FlowchartEditor, { ...props });
 }
 function FlowchartEditor({
   initialModel,
@@ -3644,25 +4037,25 @@ function FlowchartEditor({
   themeOverrides
 }) {
   const base = initialModel ? { ...initialModel, variant: initialModel.variant ?? variant } : presetFlowchartModel(variant);
-  const notify = (0, import_react17.useCallback)((m) => onChange?.(m), [onChange]);
+  const notify = (0, import_react19.useCallback)((m) => onChange?.(m), [onChange]);
   const history = useHistory(base, notify);
   const { state: model, apply: applyModel, applyAndPush, undo, redo } = history;
-  const [transform, setTransform] = (0, import_react17.useState)({ x: 60, y: 60, scale: 1 });
-  const [selected, setSelected] = (0, import_react17.useState)(null);
-  const [selectedSet, setSelectedSet] = (0, import_react17.useState)(() => /* @__PURE__ */ new Set());
-  const [drag, setDrag] = (0, import_react17.useState)(null);
-  const [pan, setPan] = (0, import_react17.useState)(null);
-  const [boxSel, setBoxSel] = (0, import_react17.useState)(null);
-  const [liveEdge, setLiveEdge] = (0, import_react17.useState)(null);
-  const [alignGuides, setAlignGuides] = (0, import_react17.useState)(null);
-  const [waypointDrag, setWaypointDrag] = (0, import_react17.useState)(null);
-  const groupDragOriginsRef = (0, import_react17.useRef)(null);
-  const clipboardRef = (0, import_react17.useRef)(null);
-  const selectOne = (0, import_react17.useCallback)((id) => {
+  const [transform, setTransform] = (0, import_react19.useState)({ x: 60, y: 60, scale: 1 });
+  const [selected, setSelected] = (0, import_react19.useState)(null);
+  const [selectedSet, setSelectedSet] = (0, import_react19.useState)(() => /* @__PURE__ */ new Set());
+  const [drag, setDrag] = (0, import_react19.useState)(null);
+  const [pan, setPan] = (0, import_react19.useState)(null);
+  const [boxSel, setBoxSel] = (0, import_react19.useState)(null);
+  const [liveEdge, setLiveEdge] = (0, import_react19.useState)(null);
+  const [alignGuides, setAlignGuides] = (0, import_react19.useState)(null);
+  const [waypointDrag, setWaypointDrag] = (0, import_react19.useState)(null);
+  const groupDragOriginsRef = (0, import_react19.useRef)(null);
+  const clipboardRef = (0, import_react19.useRef)(null);
+  const selectOne = (0, import_react19.useCallback)((id) => {
     setSelected(id);
     setSelectedSet(id ? /* @__PURE__ */ new Set([id]) : /* @__PURE__ */ new Set());
   }, []);
-  const toggleSelect = (0, import_react17.useCallback)((id) => {
+  const toggleSelect = (0, import_react19.useCallback)((id) => {
     setSelectedSet((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -3676,26 +4069,26 @@ function FlowchartEditor({
       return next;
     });
   }, []);
-  const clearSelection = (0, import_react17.useCallback)(() => {
+  const clearSelection = (0, import_react19.useCallback)(() => {
     setSelected(null);
     setSelectedSet(/* @__PURE__ */ new Set());
   }, []);
-  const [editingId, setEditingId] = (0, import_react17.useState)(null);
-  const [editLabel, setEditLabel] = (0, import_react17.useState)("");
-  const [editingEdgeId, setEditingEdgeId] = (0, import_react17.useState)(null);
-  const [editEdgeLabel, setEditEdgeLabel] = (0, import_react17.useState)("");
-  const [hoveredId, setHoveredId] = (0, import_react17.useState)(null);
-  const [ctxMenu, setCtxMenu] = (0, import_react17.useState)(null);
-  const [navOpen, setNavOpen] = (0, import_react17.useState)(true);
-  const [announcement, setAnnouncement] = (0, import_react17.useState)("");
-  const svgRef = (0, import_react17.useRef)(null);
-  const containerRef = (0, import_react17.useRef)(null);
+  const [editingId, setEditingId] = (0, import_react19.useState)(null);
+  const [editLabel, setEditLabel] = (0, import_react19.useState)("");
+  const [editingEdgeId, setEditingEdgeId] = (0, import_react19.useState)(null);
+  const [editEdgeLabel, setEditEdgeLabel] = (0, import_react19.useState)("");
+  const [hoveredId, setHoveredId] = (0, import_react19.useState)(null);
+  const [ctxMenu, setCtxMenu] = (0, import_react19.useState)(null);
+  const [navOpen, setNavOpen] = (0, import_react19.useState)(true);
+  const [announcement, setAnnouncement] = (0, import_react19.useState)("");
+  const svgRef = (0, import_react19.useRef)(null);
+  const containerRef = (0, import_react19.useRef)(null);
   const reducedMotion = usePrefersReducedMotion();
   const { t, isDark } = useEditorTheme(theme, themeOverrides, { light: lightTheme, dark: darkTheme });
   const isCoarse = useIsCoarsePointer();
   const portR = isCoarse ? 9 : 6;
   const viewport = useElementSize(svgRef);
-  const reCenter = (0, import_react17.useCallback)(() => {
+  const reCenter = (0, import_react19.useCallback)(() => {
     if (!svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
     const W2 = rect.width, H2 = rect.height;
@@ -3719,7 +4112,7 @@ function FlowchartEditor({
     const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
     setTransform({ scale, x: W2 / 2 - cx * scale, y: H2 / 2 - cy * scale });
   }, [model.nodes, variant]);
-  const jumpToNode = (0, import_react17.useCallback)((nodeId) => {
+  const jumpToNode = (0, import_react19.useCallback)((nodeId) => {
     const node = model.nodes.find((n) => n.id === nodeId);
     if (!node || !svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
@@ -3730,7 +4123,7 @@ function FlowchartEditor({
     setTransform({ scale, x: rect.width / 2 - cx * scale, y: rect.height / 2 - cy * scale });
     selectOne(nodeId);
   }, [model.nodes, variant, transform.scale, selectOne]);
-  const duplicateIds = (0, import_react17.useCallback)((ids) => {
+  const duplicateIds = (0, import_react19.useCallback)((ids) => {
     if (ids.length === 0) return;
     const idSet = new Set(ids);
     const idMap = /* @__PURE__ */ new Map();
@@ -3762,92 +4155,90 @@ function FlowchartEditor({
     setSelected(newIds[newIds.length - 1] ?? null);
     setSelectedSet(new Set(newIds));
   }, [model, applyAndPush]);
-  const duplicateNode = (0, import_react17.useCallback)((nodeId) => {
+  const duplicateNode = (0, import_react19.useCallback)((nodeId) => {
     duplicateIds([nodeId]);
   }, [duplicateIds]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!ctxMenu) return;
     const close = () => setCtxMenu(null);
     window.addEventListener("mousedown", close);
     return () => window.removeEventListener("mousedown", close);
   }, [ctxMenu]);
-  (0, import_react17.useEffect)(() => {
-    const onKey = (e) => {
-      const tgt = e.target;
-      if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable)) return;
-      const ctrl = e.ctrlKey || e.metaKey;
-      if (ctrl && e.key === "z") {
-        e.preventDefault();
-        undo();
-        return;
-      }
-      if (ctrl && (e.key === "y" || e.shiftKey && e.key === "z")) {
-        e.preventDefault();
-        redo();
-        return;
-      }
-      if (ctrl && e.key === "0") {
-        e.preventDefault();
-        reCenter();
-        return;
-      }
-      if (ctrl && (e.key === "d" || e.key === "D")) {
-        if (selectedSet.size > 0) {
-          e.preventDefault();
-          duplicateIds(Array.from(selectedSet));
-        }
-        return;
+  const keyCommands = [
+    { match: (e) => (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey, run: () => {
+      undo();
+      return true;
+    } },
+    { match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z"), run: () => {
+      redo();
+      return true;
+    } },
+    { match: (e) => (e.ctrlKey || e.metaKey) && e.key === "0", run: () => {
+      reCenter();
+      return true;
+    } },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "d" || e.key === "D") && selectedSet.size > 0,
+      run: () => {
+        duplicateIds(Array.from(selectedSet));
+        return true;
       }
-      if (ctrl && (e.key === "c" || e.key === "C")) {
-        if (selectedSet.size > 0) {
-          e.preventDefault();
-          const ids = new Set(selectedSet);
-          const nodes = model.nodes.filter((n) => ids.has(n.id));
-          const edges = model.edges.filter((ed) => ids.has(ed.from) && ids.has(ed.to));
-          clipboardRef.current = {
-            nodes: nodes.map((n) => ({ ...n })),
-            edges: edges.map((ed) => ({ ...ed }))
-          };
-        }
-        return;
+    },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "c" || e.key === "C") && selectedSet.size > 0,
+      run: () => {
+        const ids = new Set(selectedSet);
+        const nodes = model.nodes.filter((n) => ids.has(n.id));
+        const edges = model.edges.filter((ed) => ids.has(ed.from) && ids.has(ed.to));
+        clipboardRef.current = {
+          nodes: nodes.map((n) => ({ ...n })),
+          edges: edges.map((ed) => ({ ...ed }))
+        };
+        return true;
       }
-      if (ctrl && (e.key === "v" || e.key === "V")) {
+    },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "v" || e.key === "V"),
+      run: () => {
         const clip = clipboardRef.current;
-        if (clip && clip.nodes.length > 0) {
-          e.preventDefault();
-          const idMap = /* @__PURE__ */ new Map();
-          const nextNode = makeIdSource("node", model.nodes);
-          const nextEdge = makeIdSource("e", model.edges);
-          const newNodes = clip.nodes.map((n) => {
-            const newId = nextNode();
-            idMap.set(n.id, newId);
-            return { ...n, id: newId, x: (n.x ?? 0) + 24, y: (n.y ?? 0) + 24 };
-          });
-          const newEdges = clip.edges.map((ed) => ({
-            ...ed,
-            id: nextEdge(),
-            from: idMap.get(ed.from) ?? ed.from,
-            to: idMap.get(ed.to) ?? ed.to
-          }));
-          const m = { ...model, nodes: [...model.nodes, ...newNodes], edges: [...model.edges, ...newEdges] };
-          applyAndPush(m);
-          const newIds = newNodes.map((n) => n.id);
-          setSelected(newIds[newIds.length - 1]);
-          setSelectedSet(new Set(newIds));
-          setAnnouncement(`Pasted ${newIds.length} ${variantLabel.toLowerCase()}${newIds.length === 1 ? "" : "s"}.`);
-        }
-        return;
+        if (!clip || clip.nodes.length === 0) return false;
+        const idMap = /* @__PURE__ */ new Map();
+        const nextNode = makeIdSource("node", model.nodes);
+        const nextEdge = makeIdSource("e", model.edges);
+        const newNodes = clip.nodes.map((n) => {
+          const newId = nextNode();
+          idMap.set(n.id, newId);
+          return { ...n, id: newId, x: (n.x ?? 0) + 24, y: (n.y ?? 0) + 24 };
+        });
+        const newEdges = clip.edges.map((ed) => ({
+          ...ed,
+          id: nextEdge(),
+          from: idMap.get(ed.from) ?? ed.from,
+          to: idMap.get(ed.to) ?? ed.to
+        }));
+        const m = { ...model, nodes: [...model.nodes, ...newNodes], edges: [...model.edges, ...newEdges] };
+        applyAndPush(m);
+        const newIds = newNodes.map((n) => n.id);
+        setSelected(newIds[newIds.length - 1]);
+        setSelectedSet(new Set(newIds));
+        setAnnouncement(`Pasted ${newIds.length} ${variantLabel.toLowerCase()}${newIds.length === 1 ? "" : "s"}.`);
+        return true;
       }
-      if (e.key === "Escape") {
+    },
+    {
+      match: (e) => e.key === "Escape",
+      run: () => {
         if (ctxMenu) setCtxMenu(null);
         if (liveEdge) setLiveEdge(null);
         if (editingId) setEditingId(null);
         if (boxSel) setBoxSel(null);
         if (selectedSet.size > 0) clearSelection();
-        return;
+        return true;
       }
-      if ((e.key === "Delete" || e.key === "Backspace") && selectedSet.size > 0) {
-        e.preventDefault();
+    },
+    {
+      match: (e) => (e.key === "Delete" || e.key === "Backspace") && selectedSet.size > 0,
+      run: () => {
         const ids = new Set(selectedSet);
         const updated = {
           ...model,
@@ -3857,29 +4248,34 @@ function FlowchartEditor({
         applyAndPush(updated);
         clearSelection();
         setAnnouncement(`Deleted ${ids.size} ${variantLabel.toLowerCase()}${ids.size === 1 ? "" : "s"}.`);
-        return;
+        return true;
       }
-      if (selectedSet.size > 0 && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+    },
+    {
+      match: (e) => selectedSet.size > 0 && e.altKey && !!selected && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight"),
+      run: (e) => {
         const dirKey = e.key === "ArrowLeft" ? "left" : e.key === "ArrowRight" ? "right" : e.key === "ArrowUp" ? "up" : "down";
-        if (e.altKey && selected) {
-          e.preventDefault();
-          const origin = model.nodes.find((n) => n.id === selected);
-          if (!origin) return;
-          const od = nodeDims(origin, variant);
-          const ox = (origin.x ?? 0) + od.w / 2;
-          const oy = (origin.y ?? 0) + od.h / 2;
-          const candidates = model.nodes.filter((n) => n.id !== selected).map((n) => {
-            const d = nodeDims(n, variant);
-            return { id: n.id, x: (n.x ?? 0) + d.w / 2, y: (n.y ?? 0) + d.h / 2 };
-          });
-          const nextId2 = nearestInDirection(ox, oy, dirKey, candidates);
-          if (nextId2) {
-            selectOne(nextId2);
-            setAnnouncement(`Selected ${model.nodes.find((n) => n.id === nextId2)?.label ?? ""}.`);
-          }
-          return;
+        const origin = model.nodes.find((n) => n.id === selected);
+        if (!origin) return false;
+        const od = nodeDims(origin, variant);
+        const ox = (origin.x ?? 0) + od.w / 2;
+        const oy = (origin.y ?? 0) + od.h / 2;
+        const candidates = model.nodes.filter((n) => n.id !== selected).map((n) => {
+          const d = nodeDims(n, variant);
+          return { id: n.id, x: (n.x ?? 0) + d.w / 2, y: (n.y ?? 0) + d.h / 2 };
+        });
+        const nextNodeId = nearestInDirection(ox, oy, dirKey, candidates);
+        if (nextNodeId) {
+          selectOne(nextNodeId);
+          setAnnouncement(`Selected ${model.nodes.find((n) => n.id === nextNodeId)?.label ?? ""}.`);
         }
-        e.preventDefault();
+        return true;
+      }
+    },
+    {
+      match: (e) => selectedSet.size > 0 && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight"),
+      run: (e) => {
+        const dirKey = e.key === "ArrowLeft" ? "left" : e.key === "ArrowRight" ? "right" : e.key === "ArrowUp" ? "up" : "down";
         const step = e.shiftKey ? GRID * 4 : GRID;
         const dx = dirKey === "left" ? -step : dirKey === "right" ? step : 0;
         const dy = dirKey === "up" ? -step : dirKey === "down" ? step : 0;
@@ -3889,17 +4285,17 @@ function FlowchartEditor({
           nodes: model.nodes.map((n) => ids.has(n.id) ? { ...n, x: snap((n.x ?? 0) + dx), y: snap((n.y ?? 0) + dy) } : n)
         };
         applyAndPush(updated);
+        return true;
       }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [undo, redo, reCenter, selected, selectedSet, ctxMenu, liveEdge, editingId, boxSel, model, applyAndPush, duplicateNode, clearSelection]);
-  const toCanvas = (0, import_react17.useCallback)((clientX, clientY) => {
+    }
+  ];
+  useEditorKeyboard(keyCommands, [undo, redo, reCenter, selected, selectedSet, ctxMenu, liveEdge, editingId, boxSel, model, applyAndPush, duplicateNode, clearSelection]);
+  const toCanvas = (0, import_react19.useCallback)((clientX, clientY) => {
     const rect = svgRef.current.getBoundingClientRect();
     return { x: (clientX - rect.left - transform.x) / transform.scale, y: (clientY - rect.top - transform.y) / transform.scale };
   }, [transform]);
   useCanvasWheel(svgRef, setTransform);
-  const onCanvasLongPress = (0, import_react17.useCallback)((x, y) => {
+  const onCanvasLongPress = (0, import_react19.useCallback)((x, y) => {
     setCtxMenu({ x, y, nodeId: null });
   }, []);
   useCanvasTouch(svgRef, { transform, setTransform, onLongPress: onCanvasLongPress });
@@ -4171,7 +4567,7 @@ function FlowchartEditor({
     applyAndPush(updated);
   };
   const handleExport = useExporters(model, onExport, "diagram");
-  const positionFlowchartNodes = (0, import_react17.useCallback)((m) => ({
+  const positionFlowchartNodes = (0, import_react19.useCallback)((m) => ({
     ...m,
     nodes: m.nodes.map((n, i) => ({
       ...n,
@@ -4182,11 +4578,11 @@ function FlowchartEditor({
   const handleImport = useImporter(applyAndPush, { transform: positionFlowchartNodes });
   const acc = variantAccent(variant, isDark);
   const variantLabel = variant === "question" ? "Question" : variant === "journey" ? "Step" : "Node";
-  const shadowColor = isDark ? "rgba(0,0,0,0.55)" : "rgba(15,23,42,0.09)";
-  const arrowColor = isDark ? "#64748b" : "#94a3b8";
+  const shadowClr = shadowColor(isDark);
+  const arrowClr = arrowColor(isDark);
   const amberArrow = isDark ? ACCENT.amberDark : ACCENT.amber;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fsd-editor", style: { display: "flex", flexDirection: "column", height, width: "100%", fontFamily: "ui-sans-serif,system-ui,sans-serif", boxSizing: "border-box", background: t.ctrlsBg }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: `
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fsd-editor", style: { display: "flex", flexDirection: "column", height, width: "100%", fontFamily: "ui-sans-serif,system-ui,sans-serif", boxSizing: "border-box", background: t.ctrlsBg }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: `
         .fsd-editor button:focus-visible,
         .fsd-editor input:focus-visible,
         .fsd-editor textarea:focus-visible,
@@ -4201,7 +4597,7 @@ function FlowchartEditor({
           outline-offset: -2px;
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         role: "status",
@@ -4211,28 +4607,28 @@ function FlowchartEditor({
         children: announcement
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { display: "flex", gap: 6, padding: "7px 14px", background: t.ctrlsBg, borderBottom: `1px solid ${t.ctrlsBorder}`, alignItems: "center", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { onClick: () => addNode(), style: ctrlBtn(acc.color, isDark), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", gap: 6, padding: "7px 14px", background: t.ctrlsBg, borderBottom: `1px solid ${t.ctrlsBorder}`, alignItems: "center", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { onClick: () => addNode(), style: ctrlBtn(acc.color, isDark), children: [
         "+ ",
         variantLabel
       ] }),
-      selectedSet.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { onClick: deleteSelected, style: { ...ctrlBtn("transparent", isDark), color: "#ef4444", border: `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}` }, children: selectedSet.size > 1 ? `Delete (${selectedSet.size})` : "Delete" })
+      selectedSet.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { onClick: deleteSelected, style: { ...ctrlBtn("transparent", isDark), color: "#ef4444", border: `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}` }, children: selectedSet.size > 1 ? `Delete (${selectedSet.size})` : "Delete" })
       ] }),
-      liveEdge && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { fontSize: 11, color: acc.color, fontWeight: 600, marginLeft: 6 }, children: [
+      liveEdge && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { fontSize: 11, color: acc.color, fontWeight: 600, marginLeft: 6 }, children: [
         liveEdge.answerLabel ? `Routing "${liveEdge.answerLabel}" \u2192` : "Drop on a node to connect",
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
         variant === "question" ? "drag answer port to connect \xB7 " : "drag port dot \xB7 ",
         "scroll to zoom \xB7 drag to pan"
       ] })
     ] }),
-    variant !== "flowchart" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "3px 14px", background: acc.fill, borderBottom: `1px solid ${acc.border}`, fontSize: 11, color: acc.color, fontWeight: 600 }, children: variant === "question" ? "? Question Flow \u2014 add answers in the panel, drag their port to connect" : "\u2197 Journey Map \u2014 numbered steps, drag port to sequence" }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: STYLE_FLEX_ROW, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    variant !== "flowchart" && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { padding: "3px 14px", background: acc.fill, borderBottom: `1px solid ${acc.border}`, fontSize: 11, color: acc.color, fontWeight: 600 }, children: variant === "question" ? "? Question Flow \u2014 add answers in the panel, drag their port to connect" : "\u2197 Journey Map \u2014 numbered steps, drag port to sequence" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: STYLE_FLEX_ROW, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         NodeNavigator,
         {
           model,
@@ -4246,323 +4642,162 @@ function FlowchartEditor({
           onSelect: jumpToNode
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-          "svg",
-          {
-            ref: svgRef,
-            width: "100%",
-            height: "100%",
-            role: "application",
-            "aria-label": `${variantLabel} diagram editor. ${model.nodes.length} ${variantLabel.toLowerCase()}s, ${model.edges.length} connections. Scroll to zoom, drag to pan, click a ${variantLabel.toLowerCase()} to select.`,
-            tabIndex: 0,
-            style: { display: "block", cursor: pan ? "grabbing" : drag ? "grabbing" : liveEdge ? "crosshair" : "default", userSelect: "none", outline: "none" },
-            onMouseDown: onSvgMouseDown,
-            onMouseMove,
-            onMouseUp,
-            onMouseLeave: onMouseUp,
-            onContextMenu: onSvgContextMenu,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("defs", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: reducedMotion ? `
-                .edge-flow { stroke-dasharray: 0; }
-                .edge-flow-amber { stroke-dasharray: 0; }
-                .edge-live { stroke-dasharray: 4 4; }
-              ` : `
-                @keyframes edgeFlow { to { stroke-dashoffset: -13; } }
-                @keyframes edgeFlowFast { to { stroke-dashoffset: -13; } }
-                .edge-flow { stroke-dasharray: 8 5; animation: edgeFlow 0.9s linear infinite; }
-                .edge-flow-amber { stroke-dasharray: 6 4; animation: edgeFlowFast 0.65s linear infinite; }
-                .edge-live { stroke-dasharray: 7 5; animation: edgeFlow 0.55s linear infinite; }
-              ` }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowColor, floodOpacity: "1" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowColor }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
-                model.edges.map((e) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  EdgeLine,
-                  {
-                    edge: e,
-                    nodes: model.nodes,
-                    variant,
-                    t,
-                    isDark,
-                    acc,
-                    editing: editingEdgeId === e.id,
-                    editValue: editEdgeLabel,
-                    onEditChange: setEditEdgeLabel,
-                    onEditCommit: commitEdgeEdit,
-                    onEditCancel: () => setEditingEdgeId(null),
-                    onDoubleClick: beginEditEdge,
-                    onContextMenu: onEdgeContextMenu,
-                    onWaypointDown: (ev, edgeId) => setWaypointDrag(edgeId)
-                  },
-                  e.id
-                )),
-                liveEdge && (() => {
-                  const d = bezierPath2(liveEdge.fromX, liveEdge.fromY, liveEdge.toX, liveEdge.toY, liveEdge.exitDir);
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
-                })(),
-                alignGuides?.x && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  "line",
-                  {
-                    x1: alignGuides.x.pos,
-                    x2: alignGuides.x.pos,
-                    y1: alignGuides.x.minY,
-                    y2: alignGuides.x.maxY,
-                    stroke: acc.color,
-                    strokeWidth: 1 / transform.scale,
-                    strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
-                    opacity: 0.85,
-                    pointerEvents: "none"
-                  }
-                ),
-                alignGuides?.y && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                  "line",
-                  {
-                    y1: alignGuides.y.pos,
-                    y2: alignGuides.y.pos,
-                    x1: alignGuides.y.minX,
-                    x2: alignGuides.y.maxX,
-                    stroke: acc.color,
-                    strokeWidth: 1 / transform.scale,
-                    strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
-                    opacity: 0.85,
-                    pointerEvents: "none"
-                  }
-                ),
-                model.nodes.map((node, idx) => {
-                  const isHovered = hoveredId === node.id;
-                  const isQuestion2 = variant === "question";
-                  const { w: nW, h: nH } = nodeDims(node, variant);
-                  const isSelected = selectedSet.has(node.id);
-                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                    "g",
-                    {
-                      transform: `translate(${node.x ?? 0},${node.y ?? 0})`,
-                      role: "button",
-                      "aria-label": `${variantLabel} ${variant === "journey" ? idx + 1 + ": " : ""}${node.label}${isSelected ? ", selected" : ""}`,
-                      style: { cursor: drag?.nodeId === node.id ? "grabbing" : "grab" },
-                      onMouseDown: (e) => onNodeMouseDown(e, node.id),
-                      onMouseUp: (e) => onNodeMouseUp(e, node.id),
-                      onDoubleClick: (e) => onNodeDblClick(e, node.id),
-                      onContextMenu: (e) => onNodeContextMenu(e, node.id),
-                      onMouseEnter: () => setHoveredId(node.id),
-                      onMouseLeave: () => setHoveredId(null),
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("title", { children: `${variantLabel}: ${node.label}` }),
-                        isQuestion2 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
-                          editingId === node.id ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            "input",
-                            {
-                              autoFocus: true,
-                              value: editLabel,
-                              onChange: (e) => setEditLabel(e.target.value),
-                              onBlur: commitEdit,
-                              onKeyDown: (e) => {
-                                if (e.key === "Enter") commitEdit();
-                                if (e.key === "Escape") setEditingId(null);
-                              },
-                              style: { width: "100%", height: "100%", border: "none", borderRadius: 6, outline: `2px solid ${acc.color}`, textAlign: "center", fontSize: 13, fontWeight: 500, background: t.inputBg, boxSizing: "border-box", padding: "0 6px", fontFamily: "inherit", color: t.inputText }
-                            }
-                          ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("text", { x: nW / 2, y: NODE_H2 / 2 + 5, textAnchor: "middle", fontSize: 13, fontWeight: "500", fontFamily: "ui-sans-serif,system-ui,sans-serif", fill: isSelected ? acc.color : t.textPrimary, style: STYLE_LABEL2, children: node.label }),
-                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                            "circle",
-                            {
-                              cx: nW / 2,
-                              cy: NODE_H2 + 1,
-                              r: portR,
-                              fill: acc.color,
-                              stroke: isDark ? "#0f172a" : "white",
-                              strokeWidth: 2,
-                              style: { cursor: "crosshair", opacity: isHovered || isCoarse ? 1 : 0, transition: "opacity 0.15s", pointerEvents: isHovered || isCoarse ? "all" : "none", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))" },
-                              onMouseDown: (e) => onPortMouseDown(e, node.id)
-                            }
-                          )
-                        ] }),
-                        liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: nW / 2, cy: -1, r: portR, fill: acc.color, stroke: isDark ? "#0f172a" : "white", strokeWidth: 2, style: STYLE_LIVE_PORT })
-                      ]
-                    },
-                    node.id
-                  );
-                })
-              ] })
-            ]
-          }
-        ),
-        boxSel && Math.abs(boxSel.cx - boxSel.sx) + Math.abs(boxSel.cy - boxSel.sy) > 4 && containerRef.current && (() => {
-          const rect = containerRef.current.getBoundingClientRect();
-          const left = Math.min(boxSel.sx, boxSel.cx) - rect.left;
-          const top = Math.min(boxSel.sy, boxSel.cy) - rect.top;
-          const w = Math.abs(boxSel.cx - boxSel.sx);
-          const h = Math.abs(boxSel.cy - boxSel.sy);
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            "div",
-            {
-              style: {
-                position: "absolute",
-                left,
-                top,
-                width: w,
-                height: h,
-                border: `1px dashed ${acc.color}`,
-                background: isDark ? "rgba(99,102,241,0.10)" : "rgba(99,102,241,0.08)",
-                pointerEvents: "none",
-                borderRadius: 4
-              }
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        DiagramCanvas,
+        {
+          model,
+          variant,
+          variantLabel,
+          t,
+          isDark,
+          acc,
+          transform,
+          setTransform,
+          selected,
+          selectedSet,
+          hoveredId,
+          setHoveredId,
+          drag,
+          pan,
+          liveEdge,
+          boxSel,
+          alignGuides,
+          editingEdgeId,
+          editEdgeLabel,
+          setEditEdgeLabel,
+          commitEdgeEdit,
+          setEditingEdgeId,
+          beginEditEdge,
+          onEdgeContextMenu,
+          setWaypointDrag,
+          editingId,
+          editLabel,
+          setEditLabel,
+          commitEdit,
+          setEditingId,
+          onNodeMouseDown,
+          onNodeMouseUp,
+          onNodeDblClick,
+          onNodeContextMenu,
+          onPortMouseDown,
+          onAnswerPortDown,
+          onSvgMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onSvgContextMenu,
+          reducedMotion,
+          isCoarse,
+          portR,
+          shadowClr,
+          arrowClr,
+          amberArrow,
+          viewport,
+          svgRef,
+          containerRef,
+          ctxMenu,
+          history,
+          ctxEdgeStyle: (ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.style ?? "solid",
+          ctxEdgeArrow: (ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.arrowhead ?? "arrow",
+          ctxEdgeHasWaypoint: !!(ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.waypoint,
+          onCtxUndo: () => {
+            undo();
+            setCtxMenu(null);
+          },
+          onCtxRedo: () => {
+            redo();
+            setCtxMenu(null);
+          },
+          onCtxReCenter: () => {
+            reCenter();
+            setCtxMenu(null);
+          },
+          onCtxAddNode: () => {
+            const rect = svgRef.current.getBoundingClientRect();
+            const cx = (ctxMenu.x - rect.left - transform.x) / transform.scale;
+            const cy = (ctxMenu.y - rect.top - transform.y) / transform.scale;
+            addNode({ x: cx, y: cy });
+            setCtxMenu(null);
+          },
+          onCtxDuplicate: () => {
+            if (ctxMenu?.nodeId) {
+              duplicateNode(ctxMenu.nodeId);
+              setCtxMenu(null);
             }
-          );
-        })(),
-        model.nodes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
-            "Click ",
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("strong", { style: { color: acc.color }, children: [
-              "+ ",
-              variantLabel
-            ] }),
-            " to start"
-          ] })
-        ] }),
-        model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          Minimap,
-          {
-            model,
-            viewportW: viewport.w,
-            viewportH: viewport.h,
-            transform,
-            isDark,
-            accentColor: acc.color,
-            measureNode: (n) => nodeDims(n, variant),
-            onCenterOn: (cx, cy) => {
-              setTransform((tr) => ({ ...tr, x: viewport.w / 2 - cx * tr.scale, y: viewport.h / 2 - cy * tr.scale }));
+          },
+          onCtxRename: () => {
+            if (ctxMenu?.nodeId) {
+              const node = model.nodes.find((n) => n.id === ctxMenu.nodeId);
+              setEditingId(ctxMenu.nodeId);
+              setEditLabel(node.label);
+              setCtxMenu(null);
             }
-          }
-        ),
-        ctxMenu && (() => {
-          const ctxEdge = ctxMenu.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0;
-          return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            ContextMenu,
-            {
-              x: ctxMenu.x,
-              y: ctxMenu.y,
-              nodeId: ctxMenu.nodeId,
-              edgeId: ctxMenu.edgeId,
-              isDark,
-              t,
-              acc,
-              canUndo: history.canUndo,
-              canRedo: history.canRedo,
-              onUndo: () => {
-                undo();
-                setCtxMenu(null);
-              },
-              onRedo: () => {
-                redo();
-                setCtxMenu(null);
-              },
-              onReCenter: () => {
-                reCenter();
-                setCtxMenu(null);
-              },
-              onAddNode: () => {
-                const rect = svgRef.current.getBoundingClientRect();
-                const cx = (ctxMenu.x - rect.left - transform.x) / transform.scale;
-                const cy = (ctxMenu.y - rect.top - transform.y) / transform.scale;
-                addNode({ x: cx, y: cy });
-                setCtxMenu(null);
-              },
-              onDuplicate: () => {
-                if (ctxMenu.nodeId) {
-                  duplicateNode(ctxMenu.nodeId);
-                  setCtxMenu(null);
-                }
-              },
-              onRename: () => {
-                if (ctxMenu.nodeId) {
-                  const node = model.nodes.find((n) => n.id === ctxMenu.nodeId);
-                  setEditingId(ctxMenu.nodeId);
-                  setEditLabel(node.label);
-                  setCtxMenu(null);
-                }
-              },
-              onDelete: () => {
-                if (ctxMenu.nodeId) {
-                  deleteNode(ctxMenu.nodeId);
-                  setCtxMenu(null);
-                }
-              },
-              onDisconnect: () => {
-                if (ctxMenu.nodeId) {
-                  const m = { ...model, edges: model.edges.filter((e) => e.from !== ctxMenu.nodeId && e.to !== ctxMenu.nodeId) };
-                  applyAndPush(m);
-                  setCtxMenu(null);
-                }
-              },
-              currentEdgeStyle: ctxEdge?.style ?? "solid",
-              currentEdgeArrow: ctxEdge?.arrowhead ?? "arrow",
-              edgeHasWaypoint: !!ctxEdge?.waypoint,
-              onEdgeRename: () => {
-                if (ctxMenu.edgeId) {
-                  beginEditEdge(ctxMenu.edgeId);
-                  setCtxMenu(null);
-                }
-              },
-              onEdgeStyle: (s2) => {
-                if (ctxMenu.edgeId) {
-                  setEdgeStyle(ctxMenu.edgeId, s2);
-                  setCtxMenu(null);
-                }
-              },
-              onEdgeArrowhead: (a) => {
-                if (ctxMenu.edgeId) {
-                  setEdgeArrowhead(ctxMenu.edgeId, a);
-                  setCtxMenu(null);
-                }
-              },
-              onEdgeDelete: () => {
-                if (ctxMenu.edgeId) {
-                  deleteEdge(ctxMenu.edgeId);
-                  setCtxMenu(null);
-                }
-              },
-              onEdgeResetRouting: () => {
-                if (ctxMenu.edgeId) {
-                  resetEdgeRouting(ctxMenu.edgeId);
-                  setCtxMenu(null);
-                }
-              },
-              containerRef
+          },
+          onCtxDelete: () => {
+            if (ctxMenu?.nodeId) {
+              deleteNode(ctxMenu.nodeId);
+              setCtxMenu(null);
             }
-          );
-        })()
-      ] }),
-      selected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
+          },
+          onCtxDisconnect: () => {
+            if (ctxMenu?.nodeId) {
+              const m = { ...model, edges: model.edges.filter((e) => e.from !== ctxMenu.nodeId && e.to !== ctxMenu.nodeId) };
+              applyAndPush(m);
+              setCtxMenu(null);
+            }
+          },
+          onCtxEdgeRename: () => {
+            if (ctxMenu?.edgeId) {
+              beginEditEdge(ctxMenu.edgeId);
+              setCtxMenu(null);
+            }
+          },
+          onCtxEdgeStyle: (s2) => {
+            if (ctxMenu?.edgeId) {
+              setEdgeStyle(ctxMenu.edgeId, s2);
+              setCtxMenu(null);
+            }
+          },
+          onCtxEdgeArrowhead: (a) => {
+            if (ctxMenu?.edgeId) {
+              setEdgeArrowhead(ctxMenu.edgeId, a);
+              setCtxMenu(null);
+            }
+          },
+          onCtxEdgeDelete: () => {
+            if (ctxMenu?.edgeId) {
+              deleteEdge(ctxMenu.edgeId);
+              setCtxMenu(null);
+            }
+          },
+          onCtxEdgeResetRouting: () => {
+            if (ctxMenu?.edgeId) {
+              resetEdgeRouting(ctxMenu.edgeId);
+              setCtxMenu(null);
+            }
+          }
+        }
+      ),
+      selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
         applyAndPush(m);
       }, variant, isDark, t, acc }, selected)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { padding: "4px 14px", fontSize: 11, color: t.textMuted, background: t.statusBg, borderTop: `1px solid ${t.ctrlsBorder}`, display: "flex", gap: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { padding: "4px 14px", fontSize: 11, color: t.textMuted, background: t.statusBg, borderTop: `1px solid ${t.ctrlsBorder}`, display: "flex", gap: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
         model.nodes.length,
         " ",
         variantLabel.toLowerCase(),
         "s"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
         model.edges.length,
         " connections"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
         Math.round(transform.scale * 100),
         "% zoom"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { marginLeft: "auto" }, children: "Ctrl+Z undo \xB7 Ctrl+Y redo \xB7 Ctrl+0 fit \xB7 Alt+Arrow traverse" }),
-      selected && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { marginLeft: "auto" }, children: "Ctrl+Z undo \xB7 Ctrl+Y redo \xB7 Ctrl+0 fit \xB7 Alt+Arrow traverse" }),
+      selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
     ] })
   ] });
 }