flowchart-sequence-designer 1.0.0 → 1.1.0

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_react20 = 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 };
@@ -438,10 +444,10 @@ function Toolbar({ onExport, onImport, allowedExports, allowImport = true }) {
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: divider }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
-      allowImport && onImport && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => setImportOpen(true), style: ghostBtn, children: "\u2191 Import" }),
+      allowImport && onImport && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => setImportOpen(true), "aria-label": "Import diagram", style: ghostBtn, children: "\u2191 Import" }),
       formats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: 11, color: darkTheme.inputText, margin: "0 4px" }, children: "Export \u2192" }),
-        formats.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onExport(f.key), style: exportBtn, children: f.label }, f.key))
+        formats.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: () => onExport(f.key), "aria-label": `Export as ${f.label}`, style: exportBtn, children: f.label }, f.key))
       ] })
     ] }),
     onImport && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -719,7 +725,7 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Shape" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }, children: SHAPES.map((s2) => {
           const active = (node.shape ?? "rectangle") === s2.key;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: () => setShape(s2.key), style: {
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: () => setShape(s2.key), "aria-pressed": active, style: {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
@@ -766,7 +772,12 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => removeAnswer(ans), style: { background: "none", border: "none", color: tt.textMuted, cursor: "pointer", fontSize: 12, padding: "8px 10px", flexShrink: 0 }, title: "Remove", children: "\u2715" })
           ] }, ans + i);
         }),
-        addingAnswer ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
+        addingAnswer ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "group", "aria-label": "Add answer form", onKeyDown: (e) => {
+          if (e.key === "Escape") {
+            setAddingAnswer(false);
+            setNewAnswer("");
+          }
+        }, style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { autoFocus: true, value: newAnswer, onChange: (e) => setNewAnswer(e.target.value), onKeyDown: (e) => e.key === "Enter" && addAnswer(), placeholder: "Answer text\u2026", style: { ...inputStyle, marginBottom: 8 } }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: addAnswer, style: addBtnStyle, children: "Add Answer" }),
@@ -804,7 +815,9 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => removeEdge(edge.id), style: { background: "none", border: "none", color: tt.textMuted, cursor: "pointer", fontSize: 12, padding: "8px 10px", flexShrink: 0 }, title: "Remove", children: "\u2715" })
           ] }, edge.id);
         }),
-        addingBranch ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
+        addingBranch ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { role: "group", "aria-label": "Add branch form", onKeyDown: (e) => {
+          if (e.key === "Escape") setAddingBranch(false);
+        }, style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: 6, marginBottom: 10 }, children: ["new", "existing"].map((mode) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setBranchMode(mode), style: {
             flex: 1,
             padding: "5px 0",
@@ -839,18 +852,299 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
 }
 
 // src/ui/SequenceEditor.tsx
-var import_react8 = require("react");
+var import_react11 = 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,
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Actor ${name} \u2014 press Enter or F2 to rename`,
+                style: STYLE_SEQ_ACTOR_TEXT,
+                onDoubleClick: () => setEditingId(name),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === "F2") {
+                    e.preventDefault();
+                    setEditingId(name);
+                  }
+                },
+                children: name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "circle",
+              {
+                cx: x + w / 2 - 12,
+                cy: HEADER_PAD + 14,
+                r: 9,
+                fill: "transparent",
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Remove actor ${name}`,
+                style: STYLE_SEQ_REMOVE_BTN,
+                onClick: () => removeActor(name),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    removeActor(name);
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("title", { children: [
+                  "Remove actor ",
+                  name
+                ] })
+              }
+            ),
+            /* @__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 +1154,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 +1167,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 +1183,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 +1194,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 = {
@@ -1286,8 +1580,8 @@ async function toPNG(model) {
 }
 
 // src/ui/hooks/useExporters.ts
-function useExporters(model, onExport, filename = "diagram") {
-  return (0, import_react6.useCallback)(async (format) => {
+function useExporters(model, onExport, filename = "diagram", onSuccess) {
+  return (0, import_react7.useCallback)(async (format) => {
     let content;
     switch (format) {
       case "mermaid":
@@ -1310,6 +1604,7 @@ function useExporters(model, onExport, filename = "diagram") {
     }
     if (onExport) {
       onExport(format, content);
+      onSuccess?.(`Exported as ${format.toUpperCase()}`);
       return;
     }
     const url = content instanceof Blob ? URL.createObjectURL(content) : URL.createObjectURL(new Blob([content], { type: "text/plain" }));
@@ -1318,11 +1613,12 @@ function useExporters(model, onExport, filename = "diagram") {
     a.download = `${filename}.${format === "plantuml" ? "puml" : format}`;
     a.click();
     URL.revokeObjectURL(url);
-  }, [model, onExport, filename]);
+    onSuccess?.(`Downloaded ${a.download}`);
+  }, [model, onExport, filename, onSuccess]);
 }
 
 // src/ui/hooks/useImporter.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/core/model.ts
 var Model = class _Model {
@@ -1616,19 +1912,91 @@ function fromJSON(json) {
 
 // src/ui/hooks/useImporter.ts
 function useImporter(applyAndPush, options = {}) {
-  const { expectedType, transform } = options;
-  return (0, import_react7.useCallback)((text) => {
+  const { expectedType, transform, onSuccess, onError } = options;
+  const reportError = onError ?? ((msg) => alert(msg));
+  return (0, import_react8.useCallback)((text) => {
     try {
       const parsed = text.trim().startsWith("{") ? fromJSON(text).toJSON() : fromMermaid(text).toJSON();
       if (expectedType && parsed.type !== expectedType) {
-        alert(`Imported diagram is not a ${expectedType} diagram.`);
+        reportError(`Imported diagram is not a ${expectedType} diagram.`);
         return;
       }
       applyAndPush(transform ? transform(parsed) : parsed);
+      onSuccess?.("Diagram imported successfully");
     } catch (err) {
-      alert(`Import failed: ${err.message}`);
+      reportError(`Import failed: ${err.message}`);
     }
-  }, [applyAndPush, expectedType, transform]);
+  }, [applyAndPush, expectedType, transform, onSuccess, onError]);
+}
+
+// src/ui/hooks/useToast.ts
+var import_react9 = require("react");
+var _toastSeq = 0;
+function useToast() {
+  const [toasts, setToasts] = (0, import_react9.useState)([]);
+  const showToast = (0, import_react9.useCallback)((message, type = "info") => {
+    const id = ++_toastSeq;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3e3);
+  }, []);
+  const dismissToast = (0, import_react9.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return { toasts, showToast, dismissToast };
+}
+
+// src/ui/ToastContainer.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TOAST_COLORS = {
+  success: { bg: "#065f46", border: "#10b981", text: "#ecfdf5" },
+  error: { bg: "#7f1d1d", border: "#ef4444", text: "#fef2f2" },
+  info: { bg: "#1e3a5f", border: "#3b82f6", text: "#eff6ff" }
+};
+var containerStyle = {
+  position: "absolute",
+  top: 8,
+  right: 8,
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  zIndex: 9999,
+  pointerEvents: "none"
+};
+function ToastContainer({ toasts, onDismiss }) {
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, children: toasts.map((t) => {
+    const c = TOAST_COLORS[t.type];
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "polite",
+        style: {
+          background: c.bg,
+          border: `1px solid ${c.border}`,
+          color: c.text,
+          padding: "8px 14px",
+          borderRadius: 8,
+          fontSize: 12,
+          fontWeight: 500,
+          fontFamily: "ui-sans-serif,system-ui,sans-serif",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+          pointerEvents: "auto",
+          cursor: "pointer",
+          maxWidth: 280
+        },
+        onClick: () => onDismiss(t.id),
+        children: [
+          t.type === "success" && "\u2713 ",
+          t.type === "error" && "\u2717 ",
+          t.message
+        ]
+      },
+      t.id
+    );
+  }) });
 }
 
 // src/ui/presets.ts
@@ -1727,10 +2095,33 @@ function cloneModel(m) {
   };
 }
 
+// src/ui/hooks/useEditorKeyboard.ts
+var import_react10 = 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_react10.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_runtime6 = require("react/jsx-runtime");
+var INDIGO2 = "#4f46e5";
+var INDIGO_SOFT2 = "#eef2ff";
 var lightTheme2 = {
   canvas: "#fafbfc",
   dot: "#dbe3ee",
@@ -1773,11 +2164,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 +2186,50 @@ 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_react11.useState)(() => ensureSequenceModel(initialModel));
+  const { toasts, showToast, dismissToast } = useToast();
+  const [selected, setSelected] = (0, import_react11.useState)(null);
+  const [drag, setDrag] = (0, import_react11.useState)(null);
+  const [editingId, setEditingId] = (0, import_react11.useState)(null);
+  const [editLabel, setEditLabel] = (0, import_react11.useState)("");
+  const historyRef = (0, import_react11.useRef)([ensureSequenceModel(initialModel)]);
+  const historyIdxRef = (0, import_react11.useRef)(0);
+  const svgRef = (0, import_react11.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_react11.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_react11.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_react11.useCallback)((m) => {
     setModel(m);
     onChange?.(m);
     pushHistory(m);
   }, [onChange, pushHistory]);
-  const undo = (0, import_react8.useCallback)(() => {
+  const undo = (0, import_react11.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_react11.useCallback)(() => {
     if (historyIdxRef.current >= historyRef.current.length - 1) return;
     historyIdxRef.current++;
     const m = historyRef.current[historyIdxRef.current];
@@ -1895,7 +2287,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_react11.useCallback)((id, toIdx) => {
     const fromIdx = messages.findIndex((m) => m.id === id);
     if (fromIdx < 0 || toIdx === fromIdx) return;
     const next = messages.slice();
@@ -1903,38 +2295,32 @@ 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 handleExport = useExporters(model, onExport, "sequence");
+  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", (msg) => showToast(msg, "success"));
   const handleImport = useImporter(applyAndPush, {
     expectedType: "sequence",
-    transform: ensureSequenceModel
+    transform: ensureSequenceModel,
+    onSuccess: (msg) => showToast(msg, "success"),
+    onError: (msg) => showToast(msg, "error")
   });
   const onRowMouseDown = (e, id) => {
     const tag = e.target.tagName;
@@ -1945,9 +2331,9 @@ function SequenceEditor({
     setSelected(id);
     setDrag({ id, startY: e.clientY, originalIdx: idx, targetIdx: idx, active: false });
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react11.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 +2341,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,26 +2359,31 @@ 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_runtime6.jsxs)("div", { className: "fsd-seq-editor", style: {
     display: "flex",
     flexDirection: "column",
     height,
     width: "100%",
     fontFamily: "ui-sans-serif,system-ui,sans-serif",
-    background: t.ctrlsBg
+    background: t.ctrlsBg,
+    position: "relative"
   }, 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_runtime6.jsx)(ToastContainer, { toasts, onDismiss: dismissToast }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+        .fsd-seq-editor [role="button"]:focus-visible {
+          outline: 2px solid ${t.actorText};
+          outline-offset: 2px;
+        }
+        .fsd-seq-editor button:focus-visible,
+        .fsd-seq-editor input:focus-visible {
+          outline: 2px solid ${t.actorText};
+          outline-offset: 2px;
+          border-radius: 4px;
+        }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       display: "flex",
       gap: 8,
       padding: "7px 14px",
@@ -2001,12 +2392,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_runtime6.jsx)("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
         actors.length,
         " actor",
         actors.length === 1 ? "" : "s",
@@ -2017,225 +2408,42 @@ 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_runtime6.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsxs)("div", { style: {
         width: 280,
+        maxWidth: "40vw",
         flexShrink: 0,
         background: t.panelBg,
         borderLeft: `1px solid ${t.panelBorder}`,
         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_runtime6.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { t, children: "Label" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           {
             value: editLabel || selectedMsg.label,
@@ -2251,21 +2459,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_runtime6.jsx)(Label, { t, children: "From" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { t, children: "To" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsx)("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { t, children: "Style" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ (0, import_jsx_runtime6.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 +2484,8 @@ function SequenceEditor({
           },
           s2
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { height: 14 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 14 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             onClick: () => removeMessage(selectedMsg.id),
@@ -2287,7 +2495,7 @@ function SequenceEditor({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       padding: "4px 14px",
       fontSize: 11,
       color: t.textMuted,
@@ -2296,25 +2504,22 @@ function SequenceEditor({
       display: "flex",
       gap: 16
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
         actors.length,
         " actors"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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,167 +2558,24 @@ 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_runtime6.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_react12 = require("react");
+var import_jsx_runtime7 = 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 [search, setSearch] = (0, import_react12.useState)("");
   const shapeIcon = (node) => {
     if (variant === "question") return "?";
     if (variant === "journey") return "\u2197";
@@ -2534,7 +2596,7 @@ function NodeNavigator({
   const inEdges = (id) => model.edges.filter((e) => e.to === id).length;
   const outEdges = (id) => model.edges.filter((e) => e.from === id).length;
   if (!open) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       width: 36,
       flexShrink: 0,
       background: t.panelBg,
@@ -2545,19 +2607,21 @@ function NodeNavigator({
       paddingTop: 8,
       gap: 6
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           onClick: onToggle,
           title: "Open node list",
+          "aria-expanded": false,
+          "aria-label": "Open node list",
           style: { background: "none", border: "none", cursor: "pointer", color: t.textMuted, padding: 6, borderRadius: 6, fontSize: 14, lineHeight: 1 },
           children: "\u2630"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 10, color: t.textMuted, fontWeight: 700, writingMode: "vertical-rl", transform: "rotate(180deg)", letterSpacing: 0.5 }, children: model.nodes.length })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 10, color: t.textMuted, fontWeight: 700, writingMode: "vertical-rl", transform: "rotate(180deg)", letterSpacing: 0.5 }, children: model.nodes.length })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
     width: 216,
     flexShrink: 0,
     background: t.panelBg,
@@ -2566,7 +2630,7 @@ function NodeNavigator({
     flexDirection: "column",
     overflow: "hidden"
   }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -2574,9 +2638,9 @@ function NodeNavigator({
       borderBottom: `1px solid ${t.panelBorder}`,
       flexShrink: 0
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: t.textSecondary, textTransform: "uppercase", letterSpacing: 0.7 }, children: variant === "question" ? "Questions" : variant === "journey" ? "Steps" : "Nodes" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 11, fontWeight: 700, color: t.textSecondary, textTransform: "uppercase", letterSpacing: 0.7 }, children: variant === "question" ? "Questions" : variant === "journey" ? "Steps" : "Nodes" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: {
           fontSize: 10,
           fontWeight: 700,
           color: t.textMuted,
@@ -2585,19 +2649,21 @@ function NodeNavigator({
           borderRadius: 99
         }, children: model.nodes.length })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           onClick: onToggle,
           style: { background: "none", border: "none", cursor: "pointer", color: t.textMuted, padding: "2px 4px", borderRadius: 4, fontSize: 13, lineHeight: 1 },
           title: "Collapse",
+          "aria-expanded": true,
+          "aria-label": "Collapse node list",
           children: "\u2039"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { padding: "8px 10px", borderBottom: `1px solid ${t.sectionBorder}`, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", fontSize: 11, color: t.textMuted, pointerEvents: "none" }, children: "\u2315" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { padding: "8px 10px", borderBottom: `1px solid ${t.sectionBorder}`, flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", fontSize: 11, color: t.textMuted, pointerEvents: "none" }, children: "\u2315" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "input",
         {
           value: search,
@@ -2618,12 +2684,12 @@ function NodeNavigator({
         }
       )
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: "6px 8px", display: "flex", flexDirection: "column", gap: 2 }, children: [
-      filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { textAlign: "center", padding: "20px 0", fontSize: 12, color: t.textMuted, fontStyle: "italic" }, children: model.nodes.length === 0 ? "No nodes yet" : "No matches" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: "6px 8px", display: "flex", flexDirection: "column", gap: 2 }, children: [
+      filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { textAlign: "center", padding: "20px 0", fontSize: 12, color: t.textMuted, fontStyle: "italic" }, children: model.nodes.length === 0 ? "No nodes yet" : "No matches" }),
       filtered.map((node, idx) => {
         const isSelected = selected === node.id;
         const answers = node.metadata?.answers ?? [];
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "button",
           {
             onClick: () => onSelect(node.id),
@@ -2648,7 +2714,7 @@ function NodeNavigator({
               if (!isSelected) e.currentTarget.style.background = "transparent";
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
                 width: 22,
                 height: 22,
                 borderRadius: 6,
@@ -2661,8 +2727,8 @@ function NodeNavigator({
                 fontSize: variant === "journey" ? 9 : 11,
                 fontWeight: 700
               }, children: variant === "journey" ? idx + 1 : shapeIcon(node) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: {
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
                   fontSize: 12,
                   fontWeight: isSelected ? 600 : 400,
                   color: isSelected ? acc.color : t.textPrimary,
@@ -2671,9 +2737,9 @@ function NodeNavigator({
                   whiteSpace: "nowrap",
                   lineHeight: 1.3
                 }, children: node.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 10, color: t.textMuted, lineHeight: 1.2, marginTop: 1 }, children: variant === "question" ? `${answers.length} answer${answers.length !== 1 ? "s" : ""}` : `${inEdges(node.id)}\u2193 ${outEdges(node.id)}\u2192` })
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { fontSize: 10, color: t.textMuted, lineHeight: 1.2, marginTop: 1 }, children: variant === "question" ? `${answers.length} answer${answers.length !== 1 ? "s" : ""}` : `${inEdges(node.id)}\u2193 ${outEdges(node.id)}\u2192` })
               ] }),
-              isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
+              isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
             ]
           },
           node.id
@@ -2683,139 +2749,8 @@ 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");
+var import_react13 = require("react");
 
 // src/ui/layout.ts
 var NODE_H2 = 48;
@@ -3149,7 +3084,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
   ] });
 }
 function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, onEditChange, onEditCommit, onEditCancel, onDoubleClick, onContextMenu, onWaypointDown }) {
-  const [hovered, setHovered] = (0, import_react12.useState)(false);
+  const [hovered, setHovered] = (0, import_react13.useState)(false);
   const from = nodes.find((n) => n.id === edge.from);
   const to = nodes.find((n) => n.id === edge.to);
   if (!from || !to) return null;
@@ -3245,80 +3180,676 @@ 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_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
+      ]
+    }
+  );
+}
+
+// src/ui/Minimap.tsx
+var import_react14 = require("react");
+var import_jsx_runtime9 = 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_react14.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_react14.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_runtime9.jsx)(
+    "div",
+    {
+      "aria-label": "Minimap \u2014 click to re-center the viewport",
+      role: "img",
+      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_runtime9.jsxs)(
+        "svg",
+        {
+          width: W,
+          height: H,
+          style: { display: "block", cursor: "grab", borderRadius: 6 },
+          onMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onMouseLeave: onMouseUp,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.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_runtime9.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_react15 = require("react");
+var import_jsx_runtime10 = 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_react15.useRef)(null);
+  const [pos, setPos] = (0, import_react15.useState)({ x, y });
+  (0, import_react15.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_runtime10.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_runtime10.jsx)("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime11 = 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_runtime11.jsxs)("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
+            model.edges.map((e) => /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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_runtime11.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_runtime11.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_runtime11.jsxs)(
+                "g",
+                {
+                  transform: `translate(${node.x ?? 0},${node.y ?? 0})`,
+                  role: "button",
+                  tabIndex: 0,
+                  "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),
+                  onFocus: () => setHoveredId(node.id),
+                  onBlur: () => setHoveredId(null),
+                  onKeyDown: (e) => {
+                    if (e.key === "F2" || e.key === "Enter" && !e.ctrlKey && !e.metaKey) {
+                      e.preventDefault();
+                      setEditingId(node.id);
+                      setEditLabel(node.label);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: `${variantLabel}: ${node.label}` }),
+                    isQuestion2 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
+                      editingId === node.id ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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_runtime11.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_runtime11.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_runtime11.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_runtime11.jsxs)("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
+        "Click ",
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("strong", { style: { color: acc.color }, children: [
+          "+ ",
+          variantLabel
+        ] }),
+        " to start"
+      ] })
+    ] }),
+    model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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_react16 = 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_react16.useState)(initial);
+  const stackRef = (0, import_react16.useRef)([initial]);
+  const idxRef = (0, import_react16.useRef)(0);
+  const [, setTick] = (0, import_react16.useState)(0);
   const bump = () => setTick((n) => n + 1);
-  const apply = (0, import_react13.useCallback)(
+  const apply = (0, import_react16.useCallback)(
     (next) => {
       setState(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const applyAndPush = (0, import_react13.useCallback)(
+  const applyAndPush = (0, import_react16.useCallback)(
     (next) => {
       const stack = stackRef.current.slice(0, idxRef.current + 1);
       stack.push(next);
@@ -3331,7 +3862,7 @@ function useHistory(initial, onChange) {
     },
     [onChange]
   );
-  const undo = (0, import_react13.useCallback)(() => {
+  const undo = (0, import_react16.useCallback)(() => {
     if (idxRef.current <= 0) return;
     idxRef.current--;
     const next = stackRef.current[idxRef.current];
@@ -3339,7 +3870,7 @@ function useHistory(initial, onChange) {
     onChange?.(next);
     bump();
   }, [onChange]);
-  const redo = (0, import_react13.useCallback)(() => {
+  const redo = (0, import_react16.useCallback)(() => {
     if (idxRef.current >= stackRef.current.length - 1) return;
     idxRef.current++;
     const next = stackRef.current[idxRef.current];
@@ -3359,10 +3890,10 @@ function useHistory(initial, onChange) {
 }
 
 // src/ui/hooks/useCanvasWheel.ts
-var import_react14 = require("react");
+var import_react17 = require("react");
 function useCanvasWheel(ref, setTransform, options = {}) {
   const { min = 0.15, max = 3, factor = 0.1 } = options;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const onWheel = (e) => {
@@ -3386,7 +3917,7 @@ function useCanvasWheel(ref, setTransform, options = {}) {
 }
 
 // src/ui/hooks/useCanvasTouch.ts
-var import_react15 = require("react");
+var import_react18 = require("react");
 function useCanvasTouch(ref, {
   transform,
   setTransform,
@@ -3396,7 +3927,7 @@ function useCanvasTouch(ref, {
   longPressMs = 550,
   longPressSlop = 8
 }) {
-  (0, import_react15.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let touchPan = null;
@@ -3500,10 +4031,10 @@ function useCanvasTouch(ref, {
 }
 
 // src/ui/hooks/useElementSize.ts
-var import_react16 = require("react");
+var import_react19 = 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_react19.useState)({ w: 0, h: 0 });
+  (0, import_react19.useEffect)(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const measure = () => {
@@ -3609,14 +4140,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_runtime12 = 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_runtime12.jsx)(
       SequenceEditor,
       {
         initialModel: props.initialModel,
@@ -3630,7 +4159,7 @@ function DiagramEditor(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FlowchartEditor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FlowchartEditor, { ...props });
 }
 function FlowchartEditor({
   initialModel,
@@ -3644,25 +4173,26 @@ 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_react20.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 { toasts, showToast, dismissToast } = useToast();
+  const [transform, setTransform] = (0, import_react20.useState)({ x: 60, y: 60, scale: 1 });
+  const [selected, setSelected] = (0, import_react20.useState)(null);
+  const [selectedSet, setSelectedSet] = (0, import_react20.useState)(() => /* @__PURE__ */ new Set());
+  const [drag, setDrag] = (0, import_react20.useState)(null);
+  const [pan, setPan] = (0, import_react20.useState)(null);
+  const [boxSel, setBoxSel] = (0, import_react20.useState)(null);
+  const [liveEdge, setLiveEdge] = (0, import_react20.useState)(null);
+  const [alignGuides, setAlignGuides] = (0, import_react20.useState)(null);
+  const [waypointDrag, setWaypointDrag] = (0, import_react20.useState)(null);
+  const groupDragOriginsRef = (0, import_react20.useRef)(null);
+  const clipboardRef = (0, import_react20.useRef)(null);
+  const selectOne = (0, import_react20.useCallback)((id) => {
     setSelected(id);
     setSelectedSet(id ? /* @__PURE__ */ new Set([id]) : /* @__PURE__ */ new Set());
   }, []);
-  const toggleSelect = (0, import_react17.useCallback)((id) => {
+  const toggleSelect = (0, import_react20.useCallback)((id) => {
     setSelectedSet((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -3676,26 +4206,26 @@ function FlowchartEditor({
       return next;
     });
   }, []);
-  const clearSelection = (0, import_react17.useCallback)(() => {
+  const clearSelection = (0, import_react20.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_react20.useState)(null);
+  const [editLabel, setEditLabel] = (0, import_react20.useState)("");
+  const [editingEdgeId, setEditingEdgeId] = (0, import_react20.useState)(null);
+  const [editEdgeLabel, setEditEdgeLabel] = (0, import_react20.useState)("");
+  const [hoveredId, setHoveredId] = (0, import_react20.useState)(null);
+  const [ctxMenu, setCtxMenu] = (0, import_react20.useState)(null);
+  const [navOpen, setNavOpen] = (0, import_react20.useState)(true);
+  const [announcement, setAnnouncement] = (0, import_react20.useState)("");
+  const svgRef = (0, import_react20.useRef)(null);
+  const containerRef = (0, import_react20.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_react20.useCallback)(() => {
     if (!svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
     const W2 = rect.width, H2 = rect.height;
@@ -3719,7 +4249,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_react20.useCallback)((nodeId) => {
     const node = model.nodes.find((n) => n.id === nodeId);
     if (!node || !svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
@@ -3730,7 +4260,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_react20.useCallback)((ids) => {
     if (ids.length === 0) return;
     const idSet = new Set(ids);
     const idMap = /* @__PURE__ */ new Map();
@@ -3762,92 +4292,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_react20.useCallback)((nodeId) => {
     duplicateIds([nodeId]);
   }, [duplicateIds]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react20.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 +4385,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 +4422,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_react20.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_react20.useCallback)((x, y) => {
     setCtxMenu({ x, y, nodeId: null });
   }, []);
   useCanvasTouch(svgRef, { transform, setTransform, onLongPress: onCanvasLongPress });
@@ -4170,8 +4703,8 @@ function FlowchartEditor({
     };
     applyAndPush(updated);
   };
-  const handleExport = useExporters(model, onExport, "diagram");
-  const positionFlowchartNodes = (0, import_react17.useCallback)((m) => ({
+  const handleExport = useExporters(model, onExport, "diagram", (msg) => showToast(msg, "success"));
+  const positionFlowchartNodes = (0, import_react20.useCallback)((m) => ({
     ...m,
     nodes: m.nodes.map((n, i) => ({
       ...n,
@@ -4179,14 +4712,19 @@ function FlowchartEditor({
       y: n.y ?? snap(80 + Math.floor(i / 4) * 140)
     }))
   }), []);
-  const handleImport = useImporter(applyAndPush, { transform: positionFlowchartNodes });
+  const handleImport = useImporter(applyAndPush, {
+    transform: positionFlowchartNodes,
+    onSuccess: (msg) => showToast(msg, "success"),
+    onError: (msg) => showToast(msg, "error")
+  });
   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_runtime12.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, position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToastContainer, { toasts, onDismiss: dismissToast }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("style", { children: `
         .fsd-editor button:focus-visible,
         .fsd-editor input:focus-visible,
         .fsd-editor textarea:focus-visible,
@@ -4196,12 +4734,16 @@ function FlowchartEditor({
           outline-offset: 2px;
           border-radius: 6px;
         }
+        .fsd-editor svg [role="button"]:focus-visible {
+          outline: 2px solid ${acc.color};
+          outline-offset: 3px;
+        }
         .fsd-editor svg[role="application"]:focus-visible {
           outline: 2px solid ${acc.color};
           outline-offset: -2px;
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         role: "status",
@@ -4211,28 +4753,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_runtime12.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.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_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.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_runtime12.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_runtime12.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_runtime12.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_runtime12.jsxs)("div", { style: STYLE_FLEX_ROW, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         NodeNavigator,
         {
           model,
@@ -4246,323 +4788,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_runtime12.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_runtime12.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_runtime12.jsxs)("div", { style: { padding: "4px 14px", fontSize: 11, color: t.textMuted, background: t.statusBg, borderTop: `1px solid ${t.ctrlsBorder}`, display: "flex", gap: 16, flexWrap: "wrap", overflow: "hidden", maxHeight: 28 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
         model.nodes.length,
         " ",
         variantLabel.toLowerCase(),
         "s"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
         model.edges.length,
         " connections"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)("span", { style: { marginLeft: "auto", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: "Ctrl+Z undo \xB7 Ctrl+Y redo \xB7 Ctrl+0 fit \xB7 Alt+Arrow traverse" }),
+      selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
     ] })
   ] });
 }