flowchart-sequence-designer 1.0.1 → 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_react19 = require("react");
+var import_react20 = require("react");
 
 // src/ui/Toolbar.tsx
 var import_react2 = require("react");
@@ -444,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)(
@@ -725,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",
@@ -772,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" }),
@@ -810,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",
@@ -845,7 +852,7 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
 }
 
 // src/ui/SequenceEditor.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/ui/SequenceCanvas.tsx
 var import_react4 = require("react");
@@ -1071,8 +1078,17 @@ function SequenceCanvas(props) {
                 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
               }
             ),
@@ -1083,9 +1099,21 @@ function SequenceCanvas(props) {
                 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),
-                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("title", { children: "Remove actor" })
+                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)(
@@ -1552,7 +1580,7 @@ async function toPNG(model) {
 }
 
 // src/ui/hooks/useExporters.ts
-function useExporters(model, onExport, filename = "diagram") {
+function useExporters(model, onExport, filename = "diagram", onSuccess) {
   return (0, import_react7.useCallback)(async (format) => {
     let content;
     switch (format) {
@@ -1576,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" }));
@@ -1584,7 +1613,8 @@ 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
@@ -1882,19 +1912,91 @@ function fromJSON(json) {
 
 // src/ui/hooks/useImporter.ts
 function useImporter(applyAndPush, options = {}) {
-  const { expectedType, transform } = options;
+  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
@@ -1994,13 +2096,13 @@ function cloneModel(m) {
 }
 
 // src/ui/hooks/useEditorKeyboard.ts
-var import_react9 = require("react");
+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_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const onKey = (e) => {
       if (isInput(e)) return;
       for (const cmd of commands) {
@@ -2017,7 +2119,7 @@ function useEditorKeyboard(commands, deps) {
 }
 
 // src/ui/SequenceEditor.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var INDIGO2 = "#4f46e5";
 var INDIGO_SOFT2 = "#eef2ff";
 var lightTheme2 = {
@@ -2084,18 +2186,19 @@ function SequenceEditor({
   theme = "auto",
   themeOverrides
 }) {
-  const [model, setModel] = (0, import_react10.useState)(() => ensureSequenceModel(initialModel));
-  const [selected, setSelected] = (0, import_react10.useState)(null);
-  const [drag, setDrag] = (0, import_react10.useState)(null);
-  const [editingId, setEditingId] = (0, import_react10.useState)(null);
-  const [editLabel, setEditLabel] = (0, import_react10.useState)("");
-  const historyRef = (0, import_react10.useRef)([ensureSequenceModel(initialModel)]);
-  const historyIdxRef = (0, import_react10.useRef)(0);
-  const svgRef = (0, import_react10.useRef)(null);
+  const [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_react10.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]);
@@ -2107,26 +2210,26 @@ function SequenceEditor({
     return SIDE_PAD2 + idx * colW + colW / 2;
   };
   const msgY = (idx) => HEADER_PAD2 + HEADER_H2 + 40 + idx * ROW_H2;
-  const pushHistory = (0, import_react10.useCallback)((m) => {
+  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_react10.useCallback)((m) => {
+  const applyAndPush = (0, import_react11.useCallback)((m) => {
     setModel(m);
     onChange?.(m);
     pushHistory(m);
   }, [onChange, pushHistory]);
-  const undo = (0, import_react10.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_react10.useCallback)(() => {
+  const redo = (0, import_react11.useCallback)(() => {
     if (historyIdxRef.current >= historyRef.current.length - 1) return;
     historyIdxRef.current++;
     const m = historyRef.current[historyIdxRef.current];
@@ -2184,7 +2287,7 @@ function SequenceEditor({
     applyAndPush({ ...model, messages: messages.filter((m) => m.id !== id) });
     if (selected === id) setSelected(null);
   };
-  const reorderMessage = (0, import_react10.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();
@@ -2212,10 +2315,12 @@ function SequenceEditor({
     } }
   ];
   useEditorKeyboard(keyCommands, [undo, redo, selected]);
-  const handleExport = useExporters(model, onExport, "sequence");
+  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;
@@ -2226,7 +2331,7 @@ function SequenceEditor({
     setSelected(id);
     setDrag({ id, startY: e.clientY, originalIdx: idx, targetIdx: idx, active: false });
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!drag) return;
     const baseY = HEADER_PAD2 + HEADER_H2 + 40;
     const onMove = (ev) => {
@@ -2255,16 +2360,30 @@ function SequenceEditor({
     };
   }, [drag, messages.length, reorderMessage]);
   const selectedMsg = selected ? messages.find((m) => m.id === selected) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.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",
@@ -2273,12 +2392,12 @@ function SequenceEditor({
       alignItems: "center",
       flexWrap: "wrap"
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
+      /* @__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",
@@ -2289,8 +2408,8 @@ function SequenceEditor({
         " \xB7 drag a row to reorder"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__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,
         {
           model,
@@ -2313,17 +2432,18 @@ function SequenceEditor({
           svgRef
         }
       ) }),
-      selectedMsg && /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "Label" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__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,
@@ -2339,12 +2459,12 @@ function SequenceEditor({
             style: input(t)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "From" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { value: selectedMsg.from, onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: a, children: a }, a)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "To" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("select", { value: selectedMsg.to, onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: a, children: a }, a)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label, { t, children: "Style" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__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 }),
@@ -2364,8 +2484,8 @@ function SequenceEditor({
           },
           s2
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { height: 14 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 14 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             onClick: () => removeMessage(selectedMsg.id),
@@ -2375,7 +2495,7 @@ function SequenceEditor({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: {
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
       padding: "4px 14px",
       fontSize: 11,
       color: t.textMuted,
@@ -2384,15 +2504,15 @@ function SequenceEditor({
       display: "flex",
       gap: 16
     }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
         actors.length,
         " actors"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
         messages.length,
         " messages"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.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" })
     ] })
   ] });
 }
@@ -2438,12 +2558,12 @@ function input(t) {
   };
 }
 function Label({ t, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children });
+  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/NodeNavigator.tsx
-var import_react11 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function NodeNavigator({
   model,
   selected,
@@ -2455,7 +2575,7 @@ function NodeNavigator({
   onToggle,
   onSelect
 }) {
-  const [search, setSearch] = (0, import_react11.useState)("");
+  const [search, setSearch] = (0, import_react12.useState)("");
   const shapeIcon = (node) => {
     if (variant === "question") return "?";
     if (variant === "journey") return "\u2197";
@@ -2476,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,
@@ -2487,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,
@@ -2508,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",
@@ -2516,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,
@@ -2527,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,
@@ -2560,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),
@@ -2590,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,
@@ -2603,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,
@@ -2613,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
@@ -2626,7 +2750,7 @@ function NodeNavigator({
 }
 
 // src/ui/render.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/ui/layout.ts
 var NODE_H2 = 48;
@@ -2692,7 +2816,7 @@ function bezierPathVia(x1, y1, wx, wy, x2, y2) {
 }
 
 // src/ui/render.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var STYLE_LABEL = { pointerEvents: "none", userSelect: "none" };
 var STYLE_BLUR = { filter: "blur(4px)" };
 var STYLE_EDGE_HIT = { cursor: "pointer" };
@@ -2706,11 +2830,11 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
   const stroke = selected ? acc.color : t.nodeStroke;
   const fill = selected ? t.nodeSelectedFill : t.nodeFill;
   const sw = selected ? 1.75 : 1.25;
-  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: node.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
-  ] }) : node.shape === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: node.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
+  ] }) : node.shape === "diamond" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "polygon",
       {
         points: `${cx},${-5} ${w + 5},${cy} ${cx},${NODE_H2 + 5} ${-5},${cy}`,
@@ -2721,7 +2845,7 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "polygon",
       {
         points: `${cx},${-2} ${w + 2},${cy} ${cx},${NODE_H2 + 2} ${-2},${cy}`,
@@ -2731,8 +2855,8 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         opacity: 0.55
       }
     )
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "rect",
       {
         x: -4,
@@ -2747,7 +2871,7 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "rect",
       {
         x: -1.5,
@@ -2763,35 +2887,35 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
     )
   ] }) });
   const badgeColor = isDark ? ACCENT.emeraldDark : ACCENT.emerald;
-  const badge = variant === "journey" && stepNumber !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 14, y: 18, textAnchor: "middle", fontSize: 9, fill: "white", fontWeight: "700", style: STYLE_LABEL, children: stepNumber })
+  const badge = variant === "journey" && stepNumber !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: 14, y: 18, textAnchor: "middle", fontSize: 9, fill: "white", fontWeight: "700", style: STYLE_LABEL, children: stepNumber })
   ] });
   switch (node.shape) {
     case "diamond": {
       const pts = `${cx},0 ${w},${cy} ${cx},${NODE_H2} 0,${cy}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     }
     case "circle":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     case "parallelogram":
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
   }
@@ -2812,8 +2936,8 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
   const textSub = isDark ? "#64748b" : "#94a3b8";
   const textAns = isDark ? "#cbd5e1" : "#374151";
   const portRowY = Q_BASE_H2 + Q_ANS_ROW_H2 - 8;
-  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "rect",
       {
         x: -4,
@@ -2828,7 +2952,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "rect",
       {
         x: -1.5,
@@ -2843,29 +2967,29 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     glow,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "text",
       {
         style: STYLE_LABEL,
         fontFamily: "ui-sans-serif,system-ui,sans-serif",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
-    answers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 22, textAnchor: "middle", fontSize: 10, fill: amber, opacity: 0.4, fontWeight: 600, style: STYLE_LABEL, children: "No answers yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 36, textAnchor: "middle", fontSize: 9, fill: textSub, opacity: 0.7, style: STYLE_LABEL, children: "Open panel \u2192 Add Answer" })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
+    answers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 22, textAnchor: "middle", fontSize: 10, fill: amber, opacity: 0.4, fontWeight: 600, style: STYLE_LABEL, children: "No answers yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 36, textAnchor: "middle", fontSize: 9, fill: textSub, opacity: 0.7, style: STYLE_LABEL, children: "Open panel \u2192 Add Answer" })
     ] }),
     answers.map((ans, i) => {
       const prevW = answers.slice(0, i).reduce((s2, a) => s2 + answerCardW2(a) + Q_CARD_PAD2, 0);
@@ -2878,8 +3002,8 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
       const letter = i < 26 ? ANSWER_LETTERS[i] : `${i + 1}`;
       const maxChars = Math.max(2, Math.floor((cW - 20) / 7.5));
       const displayAns = ans.length > maxChars ? ans.slice(0, maxChars - 1) + "\u2026" : ans;
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("g", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "rect",
           {
             x: cardX,
@@ -2892,7 +3016,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             strokeWidth: connected ? 1.5 : 1
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "rect",
           {
             x: cx - 11,
@@ -2903,7 +3027,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             fill: connected ? amber : isDark ? "#1e293b" : "#fef3c7"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "text",
           {
             x: cx,
@@ -2916,7 +3040,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             children: letter
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "text",
           {
             x: cx,
@@ -2930,7 +3054,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             children: displayAns
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "circle",
           {
             cx,
@@ -2943,7 +3067,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             onMouseDown: (e) => onAnswerPortDown(e, node.id, ans, cx, portRowY)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d: `M ${cx - 3} ${portRowY - 2} L ${cx} ${portRowY + 2} L ${cx + 3} ${portRowY - 2}`,
@@ -2960,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;
@@ -2999,7 +3123,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
   const labelW = edge.label ? Math.max(60, Math.ceil(estimateTextW2(edge.label, 7) + 18)) : 60;
   const showHandle = !!onWaypointDown && (hovered || !!wp);
   const flowClass = dash ? void 0 : isAmber ? "edge-flow-amber" : "edge-flow";
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "g",
     {
       onDoubleClick: (e) => {
@@ -3012,8 +3136,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d,
@@ -3028,7 +3152,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
             style: STYLE_NO_EVENTS
           }
         ),
-        showHandle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        showHandle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "circle",
           {
             cx: hx,
@@ -3044,7 +3168,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
             }
           }
         ),
-        editing && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        editing && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "input",
           {
             autoFocus: true,
@@ -3078,8 +3202,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
               fontFamily: "inherit"
             }
           }
-        ) }) : edge.label && !isAmber ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        ) }) : 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,
@@ -3093,7 +3217,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
               style: STYLE_EDGE_LABEL_HIT
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "text",
             {
               x: mx,
@@ -3114,8 +3238,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
 }
 
 // src/ui/Minimap.tsx
-var import_react13 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var W = 168;
 var H = 112;
 var PAD = 18;
@@ -3129,7 +3253,7 @@ function Minimap({
   isDark,
   accentColor
 }) {
-  const dragRef = (0, import_react13.useRef)(null);
+  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 };
@@ -3163,7 +3287,7 @@ function Minimap({
     x: (mx - offsetX) / scale,
     y: (my - offsetY) / scale
   });
-  const panTo = (0, import_react13.useCallback)((e) => {
+  const panTo = (0, import_react14.useCallback)((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const mx = e.clientX - rect.left;
     const my = e.clientY - rect.top;
@@ -3195,9 +3319,11 @@ function Minimap({
     w: Math.max(2, Math.min(W, vp2.x) - Math.max(0, vp1.x)),
     h: Math.max(2, Math.min(H, vp2.y) - Math.max(0, vp1.y))
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  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,
@@ -3209,7 +3335,7 @@ function Minimap({
         boxShadow: isDark ? "0 8px 20px rgba(0,0,0,0.45)" : "0 6px 18px rgba(15,23,42,0.08)",
         backdropFilter: "blur(6px)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
         "svg",
         {
           width: W,
@@ -3220,10 +3346,10 @@ function Minimap({
           onMouseUp,
           onMouseLeave: onMouseUp,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: W, height: H, rx: 6, fill: isDark ? "#0f172a" : "#fafbfc" }),
+            /* @__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_runtime8.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "rect",
                 {
                   x: p.x,
@@ -3236,7 +3362,7 @@ function Minimap({
                 b.id
               );
             }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "rect",
               {
                 x: vpRect.x,
@@ -3257,8 +3383,8 @@ function Minimap({
 }
 
 // src/ui/ContextMenu.tsx
-var import_react14 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react15 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ContextMenu({
   x,
   y,
@@ -3287,9 +3413,9 @@ function ContextMenu({
   edgeHasWaypoint,
   containerRef
 }) {
-  const menuRef = (0, import_react14.useRef)(null);
-  const [pos, setPos] = (0, import_react14.useState)({ x, y });
-  (0, import_react14.useEffect)(() => {
+  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();
@@ -3304,7 +3430,7 @@ function ContextMenu({
   const dividerColor = isDark ? "#334155" : "#f1f5f9";
   const text = t.textPrimary;
   const muted = t.textMuted;
-  const item = (label, onClick, color, disabled) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const item = (label, onClick, color, disabled) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
@@ -3334,8 +3460,8 @@ function ContextMenu({
     },
     label
   );
-  const divider2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  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,
@@ -3353,30 +3479,30 @@ function ContextMenu({
         boxShadow: isDark ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.12)",
         fontFamily: "ui-sans-serif,system-ui,sans-serif"
       },
-      children: edgeId ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Edge" }),
+      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_runtime9.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Style" }),
+        /* @__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_runtime9.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Arrowhead" }),
+        /* @__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_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Node" }),
+      ] }) : 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_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Canvas" }),
+      ] }) : /* @__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,
@@ -3388,7 +3514,7 @@ function ContextMenu({
 }
 
 // src/ui/DiagramCanvas.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+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" };
@@ -3465,8 +3591,8 @@ function DiagramCanvas(props) {
     onCtxEdgeDelete,
     onCtxEdgeResetRouting
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  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,
@@ -3482,8 +3608,8 @@ function DiagramCanvas(props) {
         onMouseLeave: onMouseUp,
         onContextMenu: onSvgContextMenu,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: reducedMotion ? `
+          /* @__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; }
@@ -3494,15 +3620,15 @@ function DiagramCanvas(props) {
             .edge-flow-amber { stroke-dasharray: 6 4; animation: edgeFlowFast 0.65s linear infinite; }
             .edge-live { stroke-dasharray: 7 5; animation: edgeFlow 0.55s linear infinite; }
           ` }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
+            /* @__PURE__ */ (0, import_jsx_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_runtime10.jsx)("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
-            model.edges.map((e) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__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,
@@ -3524,9 +3650,9 @@ function DiagramCanvas(props) {
             )),
             liveEdge && (() => {
               const d = bezierPath2(liveEdge.fromX, liveEdge.fromY, liveEdge.toX, liveEdge.toY, liveEdge.exitDir);
-              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
+              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_runtime10.jsx)(
+            alignGuides?.x && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "line",
               {
                 x1: alignGuides.x.pos,
@@ -3540,7 +3666,7 @@ function DiagramCanvas(props) {
                 pointerEvents: "none"
               }
             ),
-            alignGuides?.y && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            alignGuides?.y && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "line",
               {
                 y1: alignGuides.y.pos,
@@ -3559,11 +3685,12 @@ function DiagramCanvas(props) {
               const isQuestion2 = variant === "question";
               const { w: nW } = nodeDims(node, variant);
               const isSelected = selectedSet.has(node.id);
-              return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              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),
@@ -3572,11 +3699,20 @@ function DiagramCanvas(props) {
                   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_runtime10.jsx)("title", { children: `${variantLabel}: ${node.label}` }),
-                    isQuestion2 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
-                      editingId === node.id ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    /* @__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,
@@ -3589,8 +3725,8 @@ function DiagramCanvas(props) {
                           },
                           style: { width: "100%", height: "100%", border: "none", borderRadius: 6, outline: `2px solid ${acc.color}`, textAlign: "center", fontSize: 13, fontWeight: 500, background: t.inputBg, boxSizing: "border-box", padding: "0 6px", fontFamily: "inherit", color: t.inputText }
                         }
-                      ) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("text", { x: nW / 2, y: NODE_H2 / 2 + 5, textAnchor: "middle", fontSize: 13, fontWeight: "500", fontFamily: "ui-sans-serif,system-ui,sans-serif", fill: isSelected ? acc.color : t.textPrimary, style: STYLE_LABEL2, children: node.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                      ) }) : /* @__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,
@@ -3604,7 +3740,7 @@ function DiagramCanvas(props) {
                         }
                       )
                     ] }),
-                    liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: nW / 2, cy: -1, r: portR, fill: acc.color, stroke: isDark ? "#0f172a" : "white", strokeWidth: 2, style: STYLE_LIVE_PORT })
+                    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
@@ -3620,7 +3756,7 @@ function DiagramCanvas(props) {
       const top = Math.min(boxSel.sy, boxSel.cy) - rect.top;
       const w = Math.abs(boxSel.cx - boxSel.sx);
       const h = Math.abs(boxSel.cy - boxSel.sy);
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           style: {
@@ -3637,18 +3773,18 @@ function DiagramCanvas(props) {
         }
       );
     })(),
-    model.nodes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
+    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_runtime10.jsxs)("strong", { style: { color: acc.color }, children: [
+        /* @__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_runtime10.jsx)(
+    model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Minimap,
       {
         model,
@@ -3663,7 +3799,7 @@ function DiagramCanvas(props) {
         }
       }
     ),
-    ctxMenu && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ctxMenu && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ContextMenu,
       {
         x: ctxMenu.x,
@@ -3698,22 +3834,22 @@ function DiagramCanvas(props) {
 }
 
 // src/ui/hooks/useHistory.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var MAX_HISTORY = 80;
 function useHistory(initial, onChange) {
-  const [state, setState] = (0, import_react15.useState)(initial);
-  const stackRef = (0, import_react15.useRef)([initial]);
-  const idxRef = (0, import_react15.useRef)(0);
-  const [, setTick] = (0, import_react15.useState)(0);
+  const [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_react15.useCallback)(
+  const apply = (0, import_react16.useCallback)(
     (next) => {
       setState(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const applyAndPush = (0, import_react15.useCallback)(
+  const applyAndPush = (0, import_react16.useCallback)(
     (next) => {
       const stack = stackRef.current.slice(0, idxRef.current + 1);
       stack.push(next);
@@ -3726,7 +3862,7 @@ function useHistory(initial, onChange) {
     },
     [onChange]
   );
-  const undo = (0, import_react15.useCallback)(() => {
+  const undo = (0, import_react16.useCallback)(() => {
     if (idxRef.current <= 0) return;
     idxRef.current--;
     const next = stackRef.current[idxRef.current];
@@ -3734,7 +3870,7 @@ function useHistory(initial, onChange) {
     onChange?.(next);
     bump();
   }, [onChange]);
-  const redo = (0, import_react15.useCallback)(() => {
+  const redo = (0, import_react16.useCallback)(() => {
     if (idxRef.current >= stackRef.current.length - 1) return;
     idxRef.current++;
     const next = stackRef.current[idxRef.current];
@@ -3754,10 +3890,10 @@ function useHistory(initial, onChange) {
 }
 
 // src/ui/hooks/useCanvasWheel.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useCanvasWheel(ref, setTransform, options = {}) {
   const { min = 0.15, max = 3, factor = 0.1 } = options;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     const onWheel = (e) => {
@@ -3781,7 +3917,7 @@ function useCanvasWheel(ref, setTransform, options = {}) {
 }
 
 // src/ui/hooks/useCanvasTouch.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useCanvasTouch(ref, {
   transform,
   setTransform,
@@ -3791,7 +3927,7 @@ function useCanvasTouch(ref, {
   longPressMs = 550,
   longPressSlop = 8
 }) {
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const el = ref.current;
     if (!el) return;
     let touchPan = null;
@@ -3895,10 +4031,10 @@ function useCanvasTouch(ref, {
 }
 
 // src/ui/hooks/useElementSize.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useElementSize(ref) {
-  const [size, setSize] = (0, import_react18.useState)({ w: 0, h: 0 });
-  (0, import_react18.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 = () => {
@@ -4004,12 +4140,12 @@ function nearestInDirection(fromX, fromY, dir, candidates) {
 }
 
 // src/ui/DiagramEditor.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+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_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       SequenceEditor,
       {
         initialModel: props.initialModel,
@@ -4023,7 +4159,7 @@ function DiagramEditor(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FlowchartEditor, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FlowchartEditor, { ...props });
 }
 function FlowchartEditor({
   initialModel,
@@ -4037,25 +4173,26 @@ function FlowchartEditor({
   themeOverrides
 }) {
   const base = initialModel ? { ...initialModel, variant: initialModel.variant ?? variant } : presetFlowchartModel(variant);
-  const notify = (0, import_react19.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_react19.useState)({ x: 60, y: 60, scale: 1 });
-  const [selected, setSelected] = (0, import_react19.useState)(null);
-  const [selectedSet, setSelectedSet] = (0, import_react19.useState)(() => /* @__PURE__ */ new Set());
-  const [drag, setDrag] = (0, import_react19.useState)(null);
-  const [pan, setPan] = (0, import_react19.useState)(null);
-  const [boxSel, setBoxSel] = (0, import_react19.useState)(null);
-  const [liveEdge, setLiveEdge] = (0, import_react19.useState)(null);
-  const [alignGuides, setAlignGuides] = (0, import_react19.useState)(null);
-  const [waypointDrag, setWaypointDrag] = (0, import_react19.useState)(null);
-  const groupDragOriginsRef = (0, import_react19.useRef)(null);
-  const clipboardRef = (0, import_react19.useRef)(null);
-  const selectOne = (0, import_react19.useCallback)((id) => {
+  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_react19.useCallback)((id) => {
+  const toggleSelect = (0, import_react20.useCallback)((id) => {
     setSelectedSet((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -4069,26 +4206,26 @@ function FlowchartEditor({
       return next;
     });
   }, []);
-  const clearSelection = (0, import_react19.useCallback)(() => {
+  const clearSelection = (0, import_react20.useCallback)(() => {
     setSelected(null);
     setSelectedSet(/* @__PURE__ */ new Set());
   }, []);
-  const [editingId, setEditingId] = (0, import_react19.useState)(null);
-  const [editLabel, setEditLabel] = (0, import_react19.useState)("");
-  const [editingEdgeId, setEditingEdgeId] = (0, import_react19.useState)(null);
-  const [editEdgeLabel, setEditEdgeLabel] = (0, import_react19.useState)("");
-  const [hoveredId, setHoveredId] = (0, import_react19.useState)(null);
-  const [ctxMenu, setCtxMenu] = (0, import_react19.useState)(null);
-  const [navOpen, setNavOpen] = (0, import_react19.useState)(true);
-  const [announcement, setAnnouncement] = (0, import_react19.useState)("");
-  const svgRef = (0, import_react19.useRef)(null);
-  const containerRef = (0, import_react19.useRef)(null);
+  const [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_react19.useCallback)(() => {
+  const reCenter = (0, import_react20.useCallback)(() => {
     if (!svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
     const W2 = rect.width, H2 = rect.height;
@@ -4112,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_react19.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();
@@ -4123,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_react19.useCallback)((ids) => {
+  const duplicateIds = (0, import_react20.useCallback)((ids) => {
     if (ids.length === 0) return;
     const idSet = new Set(ids);
     const idMap = /* @__PURE__ */ new Map();
@@ -4155,10 +4292,10 @@ function FlowchartEditor({
     setSelected(newIds[newIds.length - 1] ?? null);
     setSelectedSet(new Set(newIds));
   }, [model, applyAndPush]);
-  const duplicateNode = (0, import_react19.useCallback)((nodeId) => {
+  const duplicateNode = (0, import_react20.useCallback)((nodeId) => {
     duplicateIds([nodeId]);
   }, [duplicateIds]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!ctxMenu) return;
     const close = () => setCtxMenu(null);
     window.addEventListener("mousedown", close);
@@ -4290,12 +4427,12 @@ function FlowchartEditor({
     }
   ];
   useEditorKeyboard(keyCommands, [undo, redo, reCenter, selected, selectedSet, ctxMenu, liveEdge, editingId, boxSel, model, applyAndPush, duplicateNode, clearSelection]);
-  const toCanvas = (0, import_react19.useCallback)((clientX, clientY) => {
+  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_react19.useCallback)((x, y) => {
+  const onCanvasLongPress = (0, import_react20.useCallback)((x, y) => {
     setCtxMenu({ x, y, nodeId: null });
   }, []);
   useCanvasTouch(svgRef, { transform, setTransform, onLongPress: onCanvasLongPress });
@@ -4566,8 +4703,8 @@ function FlowchartEditor({
     };
     applyAndPush(updated);
   };
-  const handleExport = useExporters(model, onExport, "diagram");
-  const positionFlowchartNodes = (0, import_react19.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,
@@ -4575,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 shadowClr = shadowColor(isDark);
   const arrowClr = arrowColor(isDark);
   const amberArrow = isDark ? ACCENT.amberDark : ACCENT.amber;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fsd-editor", style: { display: "flex", flexDirection: "column", height, width: "100%", fontFamily: "ui-sans-serif,system-ui,sans-serif", boxSizing: "border-box", background: t.ctrlsBg }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: `
+  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,
@@ -4592,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_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         role: "status",
@@ -4607,28 +4753,28 @@ function FlowchartEditor({
         children: announcement
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { display: "flex", gap: 6, padding: "7px 14px", background: t.ctrlsBg, borderBottom: `1px solid ${t.ctrlsBorder}`, alignItems: "center", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { onClick: () => addNode(), style: ctrlBtn(acc.color, isDark), children: [
+    /* @__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_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { onClick: deleteSelected, style: { ...ctrlBtn("transparent", isDark), color: "#ef4444", border: `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}` }, children: selectedSet.size > 1 ? `Delete (${selectedSet.size})` : "Delete" })
+      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_runtime11.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_runtime11.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_runtime11.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_runtime11.jsx)("div", { style: { padding: "3px 14px", background: acc.fill, borderBottom: `1px solid ${acc.border}`, fontSize: 11, color: acc.color, fontWeight: 600 }, children: variant === "question" ? "? Question Flow \u2014 add answers in the panel, drag their port to connect" : "\u2197 Journey Map \u2014 numbered steps, drag port to sequence" }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: STYLE_FLEX_ROW, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    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,
@@ -4642,7 +4788,7 @@ function FlowchartEditor({
           onSelect: jumpToNode
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         DiagramCanvas,
         {
           model,
@@ -4777,27 +4923,27 @@ function FlowchartEditor({
           }
         }
       ),
-      selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
+      selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
         applyAndPush(m);
       }, variant, isDark, t, acc }, selected)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { padding: "4px 14px", fontSize: 11, color: t.textMuted, background: t.statusBg, borderTop: `1px solid ${t.ctrlsBorder}`, display: "flex", gap: 16 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+    /* @__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_runtime11.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
         model.edges.length,
         " connections"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
         Math.round(transform.scale * 100),
         "% zoom"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { marginLeft: "auto" }, children: "Ctrl+Z undo \xB7 Ctrl+Y redo \xB7 Ctrl+0 fit \xB7 Alt+Arrow traverse" }),
-      selected && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
+      /* @__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 })
     ] })
   ] });
 }