flowchart-sequence-designer 1.0.1 → 1.1.0

package/dist/ui/index.js

@@ -1,5 +1,5 @@
 // src/ui/DiagramEditor.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef7, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef7, useState as useState12 } from "react";
 
 // src/ui/Toolbar.tsx
 import { useState as useState2 } from "react";
@@ -412,10 +412,10 @@ function Toolbar({ onExport, onImport, allowedExports, allowImport = true }) {
     ] }),
     /* @__PURE__ */ jsx2("div", { style: divider }),
     /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
-      allowImport && onImport && /* @__PURE__ */ jsx2("button", { onClick: () => setImportOpen(true), style: ghostBtn, children: "\u2191 Import" }),
+      allowImport && onImport && /* @__PURE__ */ jsx2("button", { onClick: () => setImportOpen(true), "aria-label": "Import diagram", style: ghostBtn, children: "\u2191 Import" }),
       formats.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
         /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: darkTheme.inputText, margin: "0 4px" }, children: "Export \u2192" }),
-        formats.map((f) => /* @__PURE__ */ jsx2("button", { onClick: () => onExport(f.key), style: exportBtn, children: f.label }, f.key))
+        formats.map((f) => /* @__PURE__ */ jsx2("button", { onClick: () => onExport(f.key), "aria-label": `Export as ${f.label}`, style: exportBtn, children: f.label }, f.key))
       ] })
     ] }),
     onImport && /* @__PURE__ */ jsx2(
@@ -693,7 +693,7 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
         /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Shape" }),
         /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }, children: SHAPES.map((s2) => {
           const active = (node.shape ?? "rectangle") === s2.key;
-          return /* @__PURE__ */ jsxs3("button", { onClick: () => setShape(s2.key), style: {
+          return /* @__PURE__ */ jsxs3("button", { onClick: () => setShape(s2.key), "aria-pressed": active, style: {
             display: "flex",
             flexDirection: "column",
             alignItems: "center",
@@ -740,7 +740,12 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
             /* @__PURE__ */ jsx3("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__ */ jsxs3("div", { style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
+        addingAnswer ? /* @__PURE__ */ jsxs3("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__ */ jsx3("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__ */ jsxs3("div", { style: { display: "flex", gap: 6 }, children: [
             /* @__PURE__ */ jsx3("button", { onClick: addAnswer, style: addBtnStyle, children: "Add Answer" }),
@@ -778,7 +783,9 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
             /* @__PURE__ */ jsx3("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__ */ jsxs3("div", { style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
+        addingBranch ? /* @__PURE__ */ jsxs3("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__ */ jsx3("div", { style: { display: "flex", gap: 6, marginBottom: 10 }, children: ["new", "existing"].map((mode) => /* @__PURE__ */ jsx3("button", { onClick: () => setBranchMode(mode), style: {
             flex: 1,
             padding: "5px 0",
@@ -813,7 +820,7 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
 }
 
 // src/ui/SequenceEditor.tsx
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState6 } from "react";
 
 // src/ui/SequenceCanvas.tsx
 import { useMemo } from "react";
@@ -1039,8 +1046,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
               }
             ),
@@ -1051,9 +1067,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__ */ jsx4("title", { children: "Remove actor" })
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    removeActor(name);
+                  }
+                },
+                children: /* @__PURE__ */ jsxs4("title", { children: [
+                  "Remove actor ",
+                  name
+                ] })
               }
             ),
             /* @__PURE__ */ jsx4(
@@ -1520,7 +1548,7 @@ async function toPNG(model) {
 }
 
 // src/ui/hooks/useExporters.ts
-function useExporters(model, onExport, filename = "diagram") {
+function useExporters(model, onExport, filename = "diagram", onSuccess) {
   return useCallback2(async (format) => {
     let content;
     switch (format) {
@@ -1544,6 +1572,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" }));
@@ -1552,7 +1581,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
@@ -1850,19 +1880,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 useCallback3((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
+import { useCallback as useCallback4, useState as useState5 } from "react";
+var _toastSeq = 0;
+function useToast() {
+  const [toasts, setToasts] = useState5([]);
+  const showToast = useCallback4((message, type = "info") => {
+    const id = ++_toastSeq;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 3e3);
+  }, []);
+  const dismissToast = useCallback4((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return { toasts, showToast, dismissToast };
+}
+
+// src/ui/ToastContainer.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsx5("div", { style: containerStyle, children: toasts.map((t) => {
+    const c = TOAST_COLORS[t.type];
+    return /* @__PURE__ */ jsxs5(
+      "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
@@ -1985,7 +2087,7 @@ function useEditorKeyboard(commands, deps) {
 }
 
 // src/ui/SequenceEditor.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var INDIGO2 = "#4f46e5";
 var INDIGO_SOFT2 = "#eef2ff";
 var lightTheme2 = {
@@ -2052,11 +2154,12 @@ function SequenceEditor({
   theme = "auto",
   themeOverrides
 }) {
-  const [model, setModel] = useState5(() => ensureSequenceModel(initialModel));
-  const [selected, setSelected] = useState5(null);
-  const [drag, setDrag] = useState5(null);
-  const [editingId, setEditingId] = useState5(null);
-  const [editLabel, setEditLabel] = useState5("");
+  const [model, setModel] = useState6(() => ensureSequenceModel(initialModel));
+  const { toasts, showToast, dismissToast } = useToast();
+  const [selected, setSelected] = useState6(null);
+  const [drag, setDrag] = useState6(null);
+  const [editingId, setEditingId] = useState6(null);
+  const [editLabel, setEditLabel] = useState6("");
   const historyRef = useRef3([ensureSequenceModel(initialModel)]);
   const historyIdxRef = useRef3(0);
   const svgRef = useRef3(null);
@@ -2075,26 +2178,26 @@ function SequenceEditor({
     return SIDE_PAD2 + idx * colW + colW / 2;
   };
   const msgY = (idx) => HEADER_PAD2 + HEADER_H2 + 40 + idx * ROW_H2;
-  const pushHistory = useCallback4((m) => {
+  const pushHistory = useCallback5((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 = useCallback4((m) => {
+  const applyAndPush = useCallback5((m) => {
     setModel(m);
     onChange?.(m);
     pushHistory(m);
   }, [onChange, pushHistory]);
-  const undo = useCallback4(() => {
+  const undo = useCallback5(() => {
     if (historyIdxRef.current <= 0) return;
     historyIdxRef.current--;
     const m = historyRef.current[historyIdxRef.current];
     setModel(m);
     onChange?.(m);
   }, [onChange]);
-  const redo = useCallback4(() => {
+  const redo = useCallback5(() => {
     if (historyIdxRef.current >= historyRef.current.length - 1) return;
     historyIdxRef.current++;
     const m = historyRef.current[historyIdxRef.current];
@@ -2152,7 +2255,7 @@ function SequenceEditor({
     applyAndPush({ ...model, messages: messages.filter((m) => m.id !== id) });
     if (selected === id) setSelected(null);
   };
-  const reorderMessage = useCallback4((id, toIdx) => {
+  const reorderMessage = useCallback5((id, toIdx) => {
     const fromIdx = messages.findIndex((m) => m.id === id);
     if (fromIdx < 0 || toIdx === fromIdx) return;
     const next = messages.slice();
@@ -2180,10 +2283,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;
@@ -2223,16 +2328,30 @@ function SequenceEditor({
     };
   }, [drag, messages.length, reorderMessage]);
   const selectedMsg = selected ? messages.find((m) => m.id === selected) : null;
-  return /* @__PURE__ */ jsxs5("div", { style: {
+  return /* @__PURE__ */ jsxs6("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__ */ jsx5(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
-    /* @__PURE__ */ jsxs5("div", { style: {
+    /* @__PURE__ */ jsx6(ToastContainer, { toasts, onDismiss: dismissToast }),
+    /* @__PURE__ */ jsx6("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__ */ jsx6(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ jsxs6("div", { style: {
       display: "flex",
       gap: 8,
       padding: "7px 14px",
@@ -2241,12 +2360,12 @@ function SequenceEditor({
       alignItems: "center",
       flexWrap: "wrap"
     }, children: [
-      /* @__PURE__ */ jsx5("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
-      /* @__PURE__ */ jsx5("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
-      /* @__PURE__ */ jsx5("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
-      /* @__PURE__ */ jsx5("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
-      /* @__PURE__ */ jsx5("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
-      /* @__PURE__ */ jsxs5("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
+      /* @__PURE__ */ jsx6("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
+      /* @__PURE__ */ jsx6("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
+      /* @__PURE__ */ jsx6("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
+      /* @__PURE__ */ jsx6("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
+      /* @__PURE__ */ jsx6("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
+      /* @__PURE__ */ jsxs6("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
         actors.length,
         " actor",
         actors.length === 1 ? "" : "s",
@@ -2257,8 +2376,8 @@ function SequenceEditor({
         " \xB7 drag a row to reorder"
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
-      /* @__PURE__ */ jsx5("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsxs6("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: /* @__PURE__ */ jsx6(
         SequenceCanvas,
         {
           model,
@@ -2281,17 +2400,18 @@ function SequenceEditor({
           svgRef
         }
       ) }),
-      selectedMsg && /* @__PURE__ */ jsxs5("div", { style: {
+      selectedMsg && /* @__PURE__ */ jsxs6("div", { style: {
         width: 280,
+        maxWidth: "40vw",
         flexShrink: 0,
         background: t.panelBg,
         borderLeft: `1px solid ${t.panelBorder}`,
         padding: "14px 16px",
         overflowY: "auto"
       }, children: [
-        /* @__PURE__ */ jsx5("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
-        /* @__PURE__ */ jsx5(Label, { t, children: "Label" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
+        /* @__PURE__ */ jsx6(Label, { t, children: "Label" }),
+        /* @__PURE__ */ jsx6(
           "input",
           {
             value: editLabel || selectedMsg.label,
@@ -2307,12 +2427,12 @@ function SequenceEditor({
             style: input(t)
           }
         ),
-        /* @__PURE__ */ jsx5(Label, { t, children: "From" }),
-        /* @__PURE__ */ jsx5("select", { value: selectedMsg.from, onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ jsx5("option", { value: a, children: a }, a)) }),
-        /* @__PURE__ */ jsx5(Label, { t, children: "To" }),
-        /* @__PURE__ */ jsx5("select", { value: selectedMsg.to, onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ jsx5("option", { value: a, children: a }, a)) }),
-        /* @__PURE__ */ jsx5(Label, { t, children: "Style" }),
-        /* @__PURE__ */ jsx5("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6(Label, { t, children: "From" }),
+        /* @__PURE__ */ jsx6("select", { value: selectedMsg.from, onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ jsx6("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ jsx6(Label, { t, children: "To" }),
+        /* @__PURE__ */ jsx6("select", { value: selectedMsg.to, onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ jsx6("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ jsx6(Label, { t, children: "Style" }),
+        /* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ jsx6(
           "button",
           {
             onClick: () => updateMessage(selectedMsg.id, { style: s2 }),
@@ -2332,8 +2452,8 @@ function SequenceEditor({
           },
           s2
         )) }),
-        /* @__PURE__ */ jsx5("div", { style: { height: 14 } }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("div", { style: { height: 14 } }),
+        /* @__PURE__ */ jsx6(
           "button",
           {
             onClick: () => removeMessage(selectedMsg.id),
@@ -2343,7 +2463,7 @@ function SequenceEditor({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { style: {
+    /* @__PURE__ */ jsxs6("div", { style: {
       padding: "4px 14px",
       fontSize: 11,
       color: t.textMuted,
@@ -2352,15 +2472,15 @@ function SequenceEditor({
       display: "flex",
       gap: 16
     }, children: [
-      /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsxs6("span", { children: [
         actors.length,
         " actors"
       ] }),
-      /* @__PURE__ */ jsxs5("span", { children: [
+      /* @__PURE__ */ jsxs6("span", { children: [
         messages.length,
         " messages"
       ] }),
-      /* @__PURE__ */ jsx5("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
+      /* @__PURE__ */ jsx6("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
     ] })
   ] });
 }
@@ -2406,12 +2526,12 @@ function input(t) {
   };
 }
 function Label({ t, children }) {
-  return /* @__PURE__ */ jsx5("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children });
+  return /* @__PURE__ */ jsx6("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children });
 }
 
 // src/ui/NodeNavigator.tsx
-import { useState as useState6 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function NodeNavigator({
   model,
   selected,
@@ -2423,7 +2543,7 @@ function NodeNavigator({
   onToggle,
   onSelect
 }) {
-  const [search, setSearch] = useState6("");
+  const [search, setSearch] = useState7("");
   const shapeIcon = (node) => {
     if (variant === "question") return "?";
     if (variant === "journey") return "\u2197";
@@ -2444,7 +2564,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__ */ jsxs6("div", { style: {
+    return /* @__PURE__ */ jsxs7("div", { style: {
       width: 36,
       flexShrink: 0,
       background: t.panelBg,
@@ -2455,19 +2575,21 @@ function NodeNavigator({
       paddingTop: 8,
       gap: 6
     }, children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "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__ */ jsx6("div", { style: { fontSize: 10, color: t.textMuted, fontWeight: 700, writingMode: "vertical-rl", transform: "rotate(180deg)", letterSpacing: 0.5 }, children: model.nodes.length })
+      /* @__PURE__ */ jsx7("div", { style: { fontSize: 10, color: t.textMuted, fontWeight: 700, writingMode: "vertical-rl", transform: "rotate(180deg)", letterSpacing: 0.5 }, children: model.nodes.length })
     ] });
   }
-  return /* @__PURE__ */ jsxs6("div", { style: {
+  return /* @__PURE__ */ jsxs7("div", { style: {
     width: 216,
     flexShrink: 0,
     background: t.panelBg,
@@ -2476,7 +2598,7 @@ function NodeNavigator({
     flexDirection: "column",
     overflow: "hidden"
   }, children: [
-    /* @__PURE__ */ jsxs6("div", { style: {
+    /* @__PURE__ */ jsxs7("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
@@ -2484,9 +2606,9 @@ function NodeNavigator({
       borderBottom: `1px solid ${t.panelBorder}`,
       flexShrink: 0
     }, children: [
-      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-        /* @__PURE__ */ jsx6("span", { style: { fontSize: 11, fontWeight: 700, color: t.textSecondary, textTransform: "uppercase", letterSpacing: 0.7 }, children: variant === "question" ? "Questions" : variant === "journey" ? "Steps" : "Nodes" }),
-        /* @__PURE__ */ jsx6("span", { style: {
+      /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx7("span", { style: { fontSize: 11, fontWeight: 700, color: t.textSecondary, textTransform: "uppercase", letterSpacing: 0.7 }, children: variant === "question" ? "Questions" : variant === "journey" ? "Steps" : "Nodes" }),
+        /* @__PURE__ */ jsx7("span", { style: {
           fontSize: 10,
           fontWeight: 700,
           color: t.textMuted,
@@ -2495,19 +2617,21 @@ function NodeNavigator({
           borderRadius: 99
         }, children: model.nodes.length })
       ] }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "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__ */ jsx6("div", { style: { padding: "8px 10px", borderBottom: `1px solid ${t.sectionBorder}`, flexShrink: 0 }, children: /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsx6("span", { style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", fontSize: 11, color: t.textMuted, pointerEvents: "none" }, children: "\u2315" }),
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7("div", { style: { padding: "8px 10px", borderBottom: `1px solid ${t.sectionBorder}`, flexShrink: 0 }, children: /* @__PURE__ */ jsxs7("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx7("span", { style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", fontSize: 11, color: t.textMuted, pointerEvents: "none" }, children: "\u2315" }),
+      /* @__PURE__ */ jsx7(
         "input",
         {
           value: search,
@@ -2528,12 +2652,12 @@ function NodeNavigator({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs6("div", { style: { flex: 1, overflowY: "auto", padding: "6px 8px", display: "flex", flexDirection: "column", gap: 2 }, children: [
-      filtered.length === 0 && /* @__PURE__ */ jsx6("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__ */ jsxs7("div", { style: { flex: 1, overflowY: "auto", padding: "6px 8px", display: "flex", flexDirection: "column", gap: 2 }, children: [
+      filtered.length === 0 && /* @__PURE__ */ jsx7("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__ */ jsxs6(
+        return /* @__PURE__ */ jsxs7(
           "button",
           {
             onClick: () => onSelect(node.id),
@@ -2558,7 +2682,7 @@ function NodeNavigator({
               if (!isSelected) e.currentTarget.style.background = "transparent";
             },
             children: [
-              /* @__PURE__ */ jsx6("div", { style: {
+              /* @__PURE__ */ jsx7("div", { style: {
                 width: 22,
                 height: 22,
                 borderRadius: 6,
@@ -2571,8 +2695,8 @@ function NodeNavigator({
                 fontSize: variant === "journey" ? 9 : 11,
                 fontWeight: 700
               }, children: variant === "journey" ? idx + 1 : shapeIcon(node) }),
-              /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx6("div", { style: {
+              /* @__PURE__ */ jsxs7("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx7("div", { style: {
                   fontSize: 12,
                   fontWeight: isSelected ? 600 : 400,
                   color: isSelected ? acc.color : t.textPrimary,
@@ -2581,9 +2705,9 @@ function NodeNavigator({
                   whiteSpace: "nowrap",
                   lineHeight: 1.3
                 }, children: node.label }),
-                /* @__PURE__ */ jsx6("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__ */ jsx7("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__ */ jsx6("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
+              isSelected && /* @__PURE__ */ jsx7("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
             ]
           },
           node.id
@@ -2594,7 +2718,7 @@ function NodeNavigator({
 }
 
 // src/ui/render.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/ui/layout.ts
 var NODE_H2 = 48;
@@ -2660,7 +2784,7 @@ function bezierPathVia(x1, y1, wx, wy, x2, y2) {
 }
 
 // src/ui/render.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var STYLE_LABEL = { pointerEvents: "none", userSelect: "none" };
 var STYLE_BLUR = { filter: "blur(4px)" };
 var STYLE_EDGE_HIT = { cursor: "pointer" };
@@ -2674,11 +2798,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__ */ jsx7(Fragment2, { children: node.shape === "circle" ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx7("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
-    /* @__PURE__ */ jsx7("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
-  ] }) : node.shape === "diamond" ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  const glow = selected && /* @__PURE__ */ jsx8(Fragment2, { children: node.shape === "circle" ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
+    /* @__PURE__ */ jsx8("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
+  ] }) : node.shape === "diamond" ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       "polygon",
       {
         points: `${cx},${-5} ${w + 5},${cy} ${cx},${NODE_H2 + 5} ${-5},${cy}`,
@@ -2689,7 +2813,7 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "polygon",
       {
         points: `${cx},${-2} ${w + 2},${cy} ${cx},${NODE_H2 + 2} ${-2},${cy}`,
@@ -2699,8 +2823,8 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         opacity: 0.55
       }
     )
-  ] }) : /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  ] }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       "rect",
       {
         x: -4,
@@ -2715,7 +2839,7 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "rect",
       {
         x: -1.5,
@@ -2731,35 +2855,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__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx7("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
-    /* @__PURE__ */ jsx7("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__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
+    /* @__PURE__ */ jsx8("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__ */ jsxs7(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs8(Fragment2, { children: [
         glow,
-        /* @__PURE__ */ jsx7("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ jsx8("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     }
     case "circle":
-      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs8(Fragment2, { children: [
         glow,
-        /* @__PURE__ */ jsx7("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ jsx8("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     case "parallelogram":
-      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs8(Fragment2, { children: [
         glow,
-        /* @__PURE__ */ jsx7("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ jsx8("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
     default:
-      return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      return /* @__PURE__ */ jsxs8(Fragment2, { children: [
         glow,
-        /* @__PURE__ */ jsx7("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ jsx8("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
         badge
       ] });
   }
@@ -2780,8 +2904,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__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(
+  const glow = selected && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(
       "rect",
       {
         x: -4,
@@ -2796,7 +2920,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
         style: STYLE_BLUR
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "rect",
       {
         x: -1.5,
@@ -2811,29 +2935,29 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
     glow,
-    /* @__PURE__ */ jsx7("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
-    /* @__PURE__ */ jsx7("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ jsx7("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
-    /* @__PURE__ */ jsx7("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
-    /* @__PURE__ */ jsx7("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
-    /* @__PURE__ */ jsx7("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
-    /* @__PURE__ */ jsx7("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx8("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
+    /* @__PURE__ */ jsx8("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ jsx8("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
+    /* @__PURE__ */ jsx8("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
+    /* @__PURE__ */ jsx8("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
+    /* @__PURE__ */ jsx8("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
+    /* @__PURE__ */ jsx8("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
+    /* @__PURE__ */ jsxs8(
       "text",
       {
         style: STYLE_LABEL,
         fontFamily: "ui-sans-serif,system-ui,sans-serif",
         children: [
-          /* @__PURE__ */ jsx7("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
-          /* @__PURE__ */ jsx7("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
+          /* @__PURE__ */ jsx8("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
+          /* @__PURE__ */ jsx8("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
         ]
       }
     ),
-    /* @__PURE__ */ jsx7("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
-    answers.length === 0 && /* @__PURE__ */ jsxs7(Fragment2, { children: [
-      /* @__PURE__ */ jsx7("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__ */ jsx7("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__ */ jsx8("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
+    answers.length === 0 && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+      /* @__PURE__ */ jsx8("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__ */ jsx8("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);
@@ -2846,8 +2970,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__ */ jsxs7("g", { children: [
-        /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsxs8("g", { children: [
+        /* @__PURE__ */ jsx8(
           "rect",
           {
             x: cardX,
@@ -2860,7 +2984,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             strokeWidth: connected ? 1.5 : 1
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "rect",
           {
             x: cx - 11,
@@ -2871,7 +2995,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             fill: connected ? amber : isDark ? "#1e293b" : "#fef3c7"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "text",
           {
             x: cx,
@@ -2884,7 +3008,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             children: letter
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "text",
           {
             x: cx,
@@ -2898,7 +3022,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             children: displayAns
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "circle",
           {
             cx,
@@ -2911,7 +3035,7 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
             onMouseDown: (e) => onAnswerPortDown(e, node.id, ans, cx, portRowY)
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "path",
           {
             d: `M ${cx - 3} ${portRowY - 2} L ${cx} ${portRowY + 2} L ${cx + 3} ${portRowY - 2}`,
@@ -2928,7 +3052,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] = useState7(false);
+  const [hovered, setHovered] = useState8(false);
   const from = nodes.find((n) => n.id === edge.from);
   const to = nodes.find((n) => n.id === edge.to);
   if (!from || !to) return null;
@@ -2967,7 +3091,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__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "g",
     {
       onDoubleClick: (e) => {
@@ -2980,8 +3104,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       children: [
-        /* @__PURE__ */ jsx7("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
+        /* @__PURE__ */ jsx8(
           "path",
           {
             d,
@@ -2996,7 +3120,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
             style: STYLE_NO_EVENTS
           }
         ),
-        showHandle && /* @__PURE__ */ jsx7(
+        showHandle && /* @__PURE__ */ jsx8(
           "circle",
           {
             cx: hx,
@@ -3012,7 +3136,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
             }
           }
         ),
-        editing && !isAmber ? /* @__PURE__ */ jsx7("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ jsx7(
+        editing && !isAmber ? /* @__PURE__ */ jsx8("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ jsx8(
           "input",
           {
             autoFocus: true,
@@ -3046,8 +3170,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
               fontFamily: "inherit"
             }
           }
-        ) }) : edge.label && !isAmber ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-          /* @__PURE__ */ jsx7(
+        ) }) : edge.label && !isAmber ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+          /* @__PURE__ */ jsx8(
             "rect",
             {
               x: mx - labelW / 2,
@@ -3061,7 +3185,7 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
               style: STYLE_EDGE_LABEL_HIT
             }
           ),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "text",
             {
               x: mx,
@@ -3082,8 +3206,8 @@ function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, on
 }
 
 // src/ui/Minimap.tsx
-import { useCallback as useCallback5, useRef as useRef4 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useCallback as useCallback6, useRef as useRef4 } from "react";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var W = 168;
 var H = 112;
 var PAD = 18;
@@ -3131,7 +3255,7 @@ function Minimap({
     x: (mx - offsetX) / scale,
     y: (my - offsetY) / scale
   });
-  const panTo = useCallback5((e) => {
+  const panTo = useCallback6((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const mx = e.clientX - rect.left;
     const my = e.clientY - rect.top;
@@ -3163,9 +3287,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__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
+      "aria-label": "Minimap \u2014 click to re-center the viewport",
+      role: "img",
       style: {
         position: "absolute",
         bottom: 14,
@@ -3177,7 +3303,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__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs9(
         "svg",
         {
           width: W,
@@ -3188,10 +3314,10 @@ function Minimap({
           onMouseUp,
           onMouseLeave: onMouseUp,
           children: [
-            /* @__PURE__ */ jsx8("rect", { width: W, height: H, rx: 6, fill: isDark ? "#0f172a" : "#fafbfc" }),
+            /* @__PURE__ */ jsx9("rect", { width: W, height: H, rx: 6, fill: isDark ? "#0f172a" : "#fafbfc" }),
             boxes.map((b) => {
               const p = project(b.x, b.y);
-              return /* @__PURE__ */ jsx8(
+              return /* @__PURE__ */ jsx9(
                 "rect",
                 {
                   x: p.x,
@@ -3204,7 +3330,7 @@ function Minimap({
                 b.id
               );
             }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "rect",
               {
                 x: vpRect.x,
@@ -3225,8 +3351,8 @@ function Minimap({
 }
 
 // src/ui/ContextMenu.tsx
-import { useEffect as useEffect6, useRef as useRef5, useState as useState8 } from "react";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useRef as useRef5, useState as useState9 } from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function ContextMenu({
   x,
   y,
@@ -3256,7 +3382,7 @@ function ContextMenu({
   containerRef
 }) {
   const menuRef = useRef5(null);
-  const [pos, setPos] = useState8({ x, y });
+  const [pos, setPos] = useState9({ x, y });
   useEffect6(() => {
     if (!menuRef.current || !containerRef.current) return;
     const m = menuRef.current.getBoundingClientRect();
@@ -3272,7 +3398,7 @@ function ContextMenu({
   const dividerColor = isDark ? "#334155" : "#f1f5f9";
   const text = t.textPrimary;
   const muted = t.textMuted;
-  const item = (label, onClick, color, disabled) => /* @__PURE__ */ jsx9(
+  const item = (label, onClick, color, disabled) => /* @__PURE__ */ jsx10(
     "button",
     {
       onClick: disabled ? void 0 : onClick,
@@ -3302,8 +3428,8 @@ function ContextMenu({
     },
     label
   );
-  const divider2 = /* @__PURE__ */ jsx9("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
-  return /* @__PURE__ */ jsx9(
+  const divider2 = /* @__PURE__ */ jsx10("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       ref: menuRef,
@@ -3321,30 +3447,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__ */ jsxs9(Fragment3, { children: [
-        /* @__PURE__ */ jsx9("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Edge" }),
+      children: edgeId ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx10("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__ */ jsx9("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Style" }),
+        /* @__PURE__ */ jsx10("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__ */ jsx9("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Arrowhead" }),
+        /* @__PURE__ */ jsx10("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__ */ jsxs9(Fragment3, { children: [
-        /* @__PURE__ */ jsx9("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Node" }),
+      ] }) : nodeId ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx10("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__ */ jsxs9(Fragment3, { children: [
-        /* @__PURE__ */ jsx9("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Canvas" }),
+      ] }) : /* @__PURE__ */ jsxs10(Fragment3, { children: [
+        /* @__PURE__ */ jsx10("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,
@@ -3356,7 +3482,7 @@ function ContextMenu({
 }
 
 // src/ui/DiagramCanvas.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs11 } from "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" };
@@ -3433,8 +3559,8 @@ function DiagramCanvas(props) {
     onCtxEdgeDelete,
     onCtxEdgeResetRouting
   } = props;
-  return /* @__PURE__ */ jsxs10("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
+    /* @__PURE__ */ jsxs11(
       "svg",
       {
         ref: svgRef,
@@ -3450,8 +3576,8 @@ function DiagramCanvas(props) {
         onMouseLeave: onMouseUp,
         onContextMenu: onSvgContextMenu,
         children: [
-          /* @__PURE__ */ jsxs10("defs", { children: [
-            /* @__PURE__ */ jsx10("style", { children: reducedMotion ? `
+          /* @__PURE__ */ jsxs11("defs", { children: [
+            /* @__PURE__ */ jsx11("style", { children: reducedMotion ? `
             .edge-flow { stroke-dasharray: 0; }
             .edge-flow-amber { stroke-dasharray: 0; }
             .edge-live { stroke-dasharray: 4 4; }
@@ -3462,15 +3588,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__ */ jsx10("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx10("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
-            /* @__PURE__ */ jsx10("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ jsx10("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
-            /* @__PURE__ */ jsx10("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx10("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr }) }),
-            /* @__PURE__ */ jsx10("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx10("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
-            /* @__PURE__ */ jsx10("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx10("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
+            /* @__PURE__ */ jsx11("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx11("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
+            /* @__PURE__ */ jsx11("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ jsx11("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
+            /* @__PURE__ */ jsx11("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx11("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr }) }),
+            /* @__PURE__ */ jsx11("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx11("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
+            /* @__PURE__ */ jsx11("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx11("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
           ] }),
-          /* @__PURE__ */ jsx10("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
-          /* @__PURE__ */ jsxs10("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
-            model.edges.map((e) => /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
+          /* @__PURE__ */ jsxs11("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
+            model.edges.map((e) => /* @__PURE__ */ jsx11(
               EdgeLine,
               {
                 edge: e,
@@ -3492,9 +3618,9 @@ function DiagramCanvas(props) {
             )),
             liveEdge && (() => {
               const d = bezierPath2(liveEdge.fromX, liveEdge.fromY, liveEdge.toX, liveEdge.toY, liveEdge.exitDir);
-              return /* @__PURE__ */ jsx10("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
+              return /* @__PURE__ */ jsx11("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
             })(),
-            alignGuides?.x && /* @__PURE__ */ jsx10(
+            alignGuides?.x && /* @__PURE__ */ jsx11(
               "line",
               {
                 x1: alignGuides.x.pos,
@@ -3508,7 +3634,7 @@ function DiagramCanvas(props) {
                 pointerEvents: "none"
               }
             ),
-            alignGuides?.y && /* @__PURE__ */ jsx10(
+            alignGuides?.y && /* @__PURE__ */ jsx11(
               "line",
               {
                 y1: alignGuides.y.pos,
@@ -3527,11 +3653,12 @@ function DiagramCanvas(props) {
               const isQuestion2 = variant === "question";
               const { w: nW } = nodeDims(node, variant);
               const isSelected = selectedSet.has(node.id);
-              return /* @__PURE__ */ jsxs10(
+              return /* @__PURE__ */ jsxs11(
                 "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),
@@ -3540,11 +3667,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__ */ jsx10("title", { children: `${variantLabel}: ${node.label}` }),
-                    isQuestion2 ? /* @__PURE__ */ jsx10(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ jsxs10(Fragment4, { children: [
-                      /* @__PURE__ */ jsx10(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
-                      editingId === node.id ? /* @__PURE__ */ jsx10("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ jsx10(
+                    /* @__PURE__ */ jsx11("title", { children: `${variantLabel}: ${node.label}` }),
+                    isQuestion2 ? /* @__PURE__ */ jsx11(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                      /* @__PURE__ */ jsx11(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
+                      editingId === node.id ? /* @__PURE__ */ jsx11("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ jsx11(
                         "input",
                         {
                           autoFocus: true,
@@ -3557,8 +3693,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__ */ jsx10("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__ */ jsx10(
+                      ) }) : /* @__PURE__ */ jsx11("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__ */ jsx11(
                         "circle",
                         {
                           cx: nW / 2,
@@ -3572,7 +3708,7 @@ function DiagramCanvas(props) {
                         }
                       )
                     ] }),
-                    liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ jsx10("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__ */ jsx11("circle", { cx: nW / 2, cy: -1, r: portR, fill: acc.color, stroke: isDark ? "#0f172a" : "white", strokeWidth: 2, style: STYLE_LIVE_PORT })
                   ]
                 },
                 node.id
@@ -3588,7 +3724,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__ */ jsx10(
+      return /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -3605,18 +3741,18 @@ function DiagramCanvas(props) {
         }
       );
     })(),
-    model.nodes.length === 0 && /* @__PURE__ */ jsxs10("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
-      /* @__PURE__ */ jsx10("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
-      /* @__PURE__ */ jsxs10("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
+    model.nodes.length === 0 && /* @__PURE__ */ jsxs11("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
+      /* @__PURE__ */ jsx11("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
+      /* @__PURE__ */ jsxs11("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
         "Click ",
-        /* @__PURE__ */ jsxs10("strong", { style: { color: acc.color }, children: [
+        /* @__PURE__ */ jsxs11("strong", { style: { color: acc.color }, children: [
           "+ ",
           variantLabel
         ] }),
         " to start"
       ] })
     ] }),
-    model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ jsx10(
+    model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ jsx11(
       Minimap,
       {
         model,
@@ -3631,7 +3767,7 @@ function DiagramCanvas(props) {
         }
       }
     ),
-    ctxMenu && /* @__PURE__ */ jsx10(
+    ctxMenu && /* @__PURE__ */ jsx11(
       ContextMenu,
       {
         x: ctxMenu.x,
@@ -3666,22 +3802,22 @@ function DiagramCanvas(props) {
 }
 
 // src/ui/hooks/useHistory.ts
-import { useCallback as useCallback6, useRef as useRef6, useState as useState9 } from "react";
+import { useCallback as useCallback7, useRef as useRef6, useState as useState10 } from "react";
 var MAX_HISTORY = 80;
 function useHistory(initial, onChange) {
-  const [state, setState] = useState9(initial);
+  const [state, setState] = useState10(initial);
   const stackRef = useRef6([initial]);
   const idxRef = useRef6(0);
-  const [, setTick] = useState9(0);
+  const [, setTick] = useState10(0);
   const bump = () => setTick((n) => n + 1);
-  const apply = useCallback6(
+  const apply = useCallback7(
     (next) => {
       setState(next);
       onChange?.(next);
     },
     [onChange]
   );
-  const applyAndPush = useCallback6(
+  const applyAndPush = useCallback7(
     (next) => {
       const stack = stackRef.current.slice(0, idxRef.current + 1);
       stack.push(next);
@@ -3694,7 +3830,7 @@ function useHistory(initial, onChange) {
     },
     [onChange]
   );
-  const undo = useCallback6(() => {
+  const undo = useCallback7(() => {
     if (idxRef.current <= 0) return;
     idxRef.current--;
     const next = stackRef.current[idxRef.current];
@@ -3702,7 +3838,7 @@ function useHistory(initial, onChange) {
     onChange?.(next);
     bump();
   }, [onChange]);
-  const redo = useCallback6(() => {
+  const redo = useCallback7(() => {
     if (idxRef.current >= stackRef.current.length - 1) return;
     idxRef.current++;
     const next = stackRef.current[idxRef.current];
@@ -3863,9 +3999,9 @@ function useCanvasTouch(ref, {
 }
 
 // src/ui/hooks/useElementSize.ts
-import { useEffect as useEffect9, useState as useState10 } from "react";
+import { useEffect as useEffect9, useState as useState11 } from "react";
 function useElementSize(ref) {
-  const [size, setSize] = useState10({ w: 0, h: 0 });
+  const [size, setSize] = useState11({ w: 0, h: 0 });
   useEffect9(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -3972,12 +4108,12 @@ function nearestInDirection(fromX, fromY, dir, candidates) {
 }
 
 // src/ui/DiagramEditor.tsx
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs12 } from "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__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       SequenceEditor,
       {
         initialModel: props.initialModel,
@@ -3991,7 +4127,7 @@ function DiagramEditor(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx11(FlowchartEditor, { ...props });
+  return /* @__PURE__ */ jsx12(FlowchartEditor, { ...props });
 }
 function FlowchartEditor({
   initialModel,
@@ -4005,25 +4141,26 @@ function FlowchartEditor({
   themeOverrides
 }) {
   const base = initialModel ? { ...initialModel, variant: initialModel.variant ?? variant } : presetFlowchartModel(variant);
-  const notify = useCallback7((m) => onChange?.(m), [onChange]);
+  const notify = useCallback8((m) => onChange?.(m), [onChange]);
   const history = useHistory(base, notify);
   const { state: model, apply: applyModel, applyAndPush, undo, redo } = history;
-  const [transform, setTransform] = useState11({ x: 60, y: 60, scale: 1 });
-  const [selected, setSelected] = useState11(null);
-  const [selectedSet, setSelectedSet] = useState11(() => /* @__PURE__ */ new Set());
-  const [drag, setDrag] = useState11(null);
-  const [pan, setPan] = useState11(null);
-  const [boxSel, setBoxSel] = useState11(null);
-  const [liveEdge, setLiveEdge] = useState11(null);
-  const [alignGuides, setAlignGuides] = useState11(null);
-  const [waypointDrag, setWaypointDrag] = useState11(null);
+  const { toasts, showToast, dismissToast } = useToast();
+  const [transform, setTransform] = useState12({ x: 60, y: 60, scale: 1 });
+  const [selected, setSelected] = useState12(null);
+  const [selectedSet, setSelectedSet] = useState12(() => /* @__PURE__ */ new Set());
+  const [drag, setDrag] = useState12(null);
+  const [pan, setPan] = useState12(null);
+  const [boxSel, setBoxSel] = useState12(null);
+  const [liveEdge, setLiveEdge] = useState12(null);
+  const [alignGuides, setAlignGuides] = useState12(null);
+  const [waypointDrag, setWaypointDrag] = useState12(null);
   const groupDragOriginsRef = useRef7(null);
   const clipboardRef = useRef7(null);
-  const selectOne = useCallback7((id) => {
+  const selectOne = useCallback8((id) => {
     setSelected(id);
     setSelectedSet(id ? /* @__PURE__ */ new Set([id]) : /* @__PURE__ */ new Set());
   }, []);
-  const toggleSelect = useCallback7((id) => {
+  const toggleSelect = useCallback8((id) => {
     setSelectedSet((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -4037,18 +4174,18 @@ function FlowchartEditor({
       return next;
     });
   }, []);
-  const clearSelection = useCallback7(() => {
+  const clearSelection = useCallback8(() => {
     setSelected(null);
     setSelectedSet(/* @__PURE__ */ new Set());
   }, []);
-  const [editingId, setEditingId] = useState11(null);
-  const [editLabel, setEditLabel] = useState11("");
-  const [editingEdgeId, setEditingEdgeId] = useState11(null);
-  const [editEdgeLabel, setEditEdgeLabel] = useState11("");
-  const [hoveredId, setHoveredId] = useState11(null);
-  const [ctxMenu, setCtxMenu] = useState11(null);
-  const [navOpen, setNavOpen] = useState11(true);
-  const [announcement, setAnnouncement] = useState11("");
+  const [editingId, setEditingId] = useState12(null);
+  const [editLabel, setEditLabel] = useState12("");
+  const [editingEdgeId, setEditingEdgeId] = useState12(null);
+  const [editEdgeLabel, setEditEdgeLabel] = useState12("");
+  const [hoveredId, setHoveredId] = useState12(null);
+  const [ctxMenu, setCtxMenu] = useState12(null);
+  const [navOpen, setNavOpen] = useState12(true);
+  const [announcement, setAnnouncement] = useState12("");
   const svgRef = useRef7(null);
   const containerRef = useRef7(null);
   const reducedMotion = usePrefersReducedMotion();
@@ -4056,7 +4193,7 @@ function FlowchartEditor({
   const isCoarse = useIsCoarsePointer();
   const portR = isCoarse ? 9 : 6;
   const viewport = useElementSize(svgRef);
-  const reCenter = useCallback7(() => {
+  const reCenter = useCallback8(() => {
     if (!svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
     const W2 = rect.width, H2 = rect.height;
@@ -4080,7 +4217,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 = useCallback7((nodeId) => {
+  const jumpToNode = useCallback8((nodeId) => {
     const node = model.nodes.find((n) => n.id === nodeId);
     if (!node || !svgRef.current) return;
     const rect = svgRef.current.getBoundingClientRect();
@@ -4091,7 +4228,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 = useCallback7((ids) => {
+  const duplicateIds = useCallback8((ids) => {
     if (ids.length === 0) return;
     const idSet = new Set(ids);
     const idMap = /* @__PURE__ */ new Map();
@@ -4123,7 +4260,7 @@ function FlowchartEditor({
     setSelected(newIds[newIds.length - 1] ?? null);
     setSelectedSet(new Set(newIds));
   }, [model, applyAndPush]);
-  const duplicateNode = useCallback7((nodeId) => {
+  const duplicateNode = useCallback8((nodeId) => {
     duplicateIds([nodeId]);
   }, [duplicateIds]);
   useEffect10(() => {
@@ -4258,12 +4395,12 @@ function FlowchartEditor({
     }
   ];
   useEditorKeyboard(keyCommands, [undo, redo, reCenter, selected, selectedSet, ctxMenu, liveEdge, editingId, boxSel, model, applyAndPush, duplicateNode, clearSelection]);
-  const toCanvas = useCallback7((clientX, clientY) => {
+  const toCanvas = useCallback8((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 = useCallback7((x, y) => {
+  const onCanvasLongPress = useCallback8((x, y) => {
     setCtxMenu({ x, y, nodeId: null });
   }, []);
   useCanvasTouch(svgRef, { transform, setTransform, onLongPress: onCanvasLongPress });
@@ -4534,8 +4671,8 @@ function FlowchartEditor({
     };
     applyAndPush(updated);
   };
-  const handleExport = useExporters(model, onExport, "diagram");
-  const positionFlowchartNodes = useCallback7((m) => ({
+  const handleExport = useExporters(model, onExport, "diagram", (msg) => showToast(msg, "success"));
+  const positionFlowchartNodes = useCallback8((m) => ({
     ...m,
     nodes: m.nodes.map((n, i) => ({
       ...n,
@@ -4543,14 +4680,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__ */ jsxs11("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__ */ jsx11("style", { children: `
+  return /* @__PURE__ */ jsxs12("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__ */ jsx12(ToastContainer, { toasts, onDismiss: dismissToast }),
+    /* @__PURE__ */ jsx12("style", { children: `
         .fsd-editor button:focus-visible,
         .fsd-editor input:focus-visible,
         .fsd-editor textarea:focus-visible,
@@ -4560,12 +4702,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__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "div",
       {
         role: "status",
@@ -4575,28 +4721,28 @@ function FlowchartEditor({
         children: announcement
       }
     ),
-    /* @__PURE__ */ jsx11(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
-    /* @__PURE__ */ jsxs11("div", { style: { display: "flex", gap: 6, padding: "7px 14px", background: t.ctrlsBg, borderBottom: `1px solid ${t.ctrlsBorder}`, alignItems: "center", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxs11("button", { onClick: () => addNode(), style: ctrlBtn(acc.color, isDark), children: [
+    /* @__PURE__ */ jsx12(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: 6, padding: "7px 14px", background: t.ctrlsBg, borderBottom: `1px solid ${t.ctrlsBorder}`, alignItems: "center", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs12("button", { onClick: () => addNode(), style: ctrlBtn(acc.color, isDark), children: [
         "+ ",
         variantLabel
       ] }),
-      selectedSet.size > 0 && /* @__PURE__ */ jsxs11(Fragment5, { children: [
-        /* @__PURE__ */ jsx11("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
-        /* @__PURE__ */ jsx11("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__ */ jsxs12(Fragment5, { children: [
+        /* @__PURE__ */ jsx12("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
+        /* @__PURE__ */ jsx12("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__ */ jsxs11("span", { style: { fontSize: 11, color: acc.color, fontWeight: 600, marginLeft: 6 }, children: [
+      liveEdge && /* @__PURE__ */ jsxs12("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__ */ jsx11("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
+        /* @__PURE__ */ jsx12("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
       ] }),
-      /* @__PURE__ */ jsxs11("span", { style: { marginLeft: "auto", fontSize: 11, color: t.textMuted }, children: [
+      /* @__PURE__ */ jsxs12("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__ */ jsx11("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__ */ jsxs11("div", { style: STYLE_FLEX_ROW, children: [
-      /* @__PURE__ */ jsx11(
+    variant !== "flowchart" && /* @__PURE__ */ jsx12("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__ */ jsxs12("div", { style: STYLE_FLEX_ROW, children: [
+      /* @__PURE__ */ jsx12(
         NodeNavigator,
         {
           model,
@@ -4610,7 +4756,7 @@ function FlowchartEditor({
           onSelect: jumpToNode
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         DiagramCanvas,
         {
           model,
@@ -4745,27 +4891,27 @@ function FlowchartEditor({
           }
         }
       ),
-      selected && /* @__PURE__ */ jsx11(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
+      selected && /* @__PURE__ */ jsx12(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
         applyAndPush(m);
       }, variant, isDark, t, acc }, selected)
     ] }),
-    /* @__PURE__ */ jsxs11("div", { style: { padding: "4px 14px", fontSize: 11, color: t.textMuted, background: t.statusBg, borderTop: `1px solid ${t.ctrlsBorder}`, display: "flex", gap: 16 }, children: [
-      /* @__PURE__ */ jsxs11("span", { children: [
+    /* @__PURE__ */ jsxs12("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__ */ jsxs12("span", { children: [
         model.nodes.length,
         " ",
         variantLabel.toLowerCase(),
         "s"
       ] }),
-      /* @__PURE__ */ jsxs11("span", { children: [
+      /* @__PURE__ */ jsxs12("span", { children: [
         model.edges.length,
         " connections"
       ] }),
-      /* @__PURE__ */ jsxs11("span", { children: [
+      /* @__PURE__ */ jsxs12("span", { children: [
         Math.round(transform.scale * 100),
         "% zoom"
       ] }),
-      /* @__PURE__ */ jsx11("span", { style: { marginLeft: "auto" }, children: "Ctrl+Z undo \xB7 Ctrl+Y redo \xB7 Ctrl+0 fit \xB7 Alt+Arrow traverse" }),
-      selected && /* @__PURE__ */ jsx11("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
+      /* @__PURE__ */ jsx12("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__ */ jsx12("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
     ] })
   ] });
 }