flowchart-sequence-designer 1.1.0 → 1.2.0

package/dist/ui/index.cjs

@@ -415,12 +415,37 @@ function arrowColor(isDark) {
 }
 function variantAccent(variant, isDark) {
   if (variant === "question") {
-    return isDark ? { color: ACCENT.amberDark, fill: ACCENT.amberDarkLight, border: ACCENT.amberDarkBorder, glow: ACCENT.amberGlow } : { color: ACCENT.amber, fill: ACCENT.amberLight, border: ACCENT.amberBorder, glow: ACCENT.amberGlow };
+    return isDark ? {
+      color: ACCENT.amberDark,
+      fill: ACCENT.amberDarkLight,
+      border: ACCENT.amberDarkBorder,
+      glow: ACCENT.amberGlow
+    } : {
+      color: ACCENT.amber,
+      fill: ACCENT.amberLight,
+      border: ACCENT.amberBorder,
+      glow: ACCENT.amberGlow
+    };
   }
   if (variant === "journey") {
-    return isDark ? { color: ACCENT.emeraldDark, fill: ACCENT.emeraldDarkLight, border: ACCENT.emeraldDarkBorder, glow: ACCENT.emeraldGlow } : { color: ACCENT.emerald, fill: ACCENT.emeraldLight, border: "#6ee7b7", glow: ACCENT.emeraldGlow };
+    return isDark ? {
+      color: ACCENT.emeraldDark,
+      fill: ACCENT.emeraldDarkLight,
+      border: ACCENT.emeraldDarkBorder,
+      glow: ACCENT.emeraldGlow
+    } : {
+      color: ACCENT.emerald,
+      fill: ACCENT.emeraldLight,
+      border: "#6ee7b7",
+      glow: ACCENT.emeraldGlow
+    };
   }
-  return isDark ? { color: "#818cf8", fill: "rgba(79,70,229,0.12)", border: "rgba(79,70,229,0.3)", glow: ACCENT.indigoGlow } : { color: ACCENT.indigo, fill: "#f5f3ff", border: "#c7d2fe", glow: ACCENT.indigoGlow };
+  return isDark ? {
+    color: "#818cf8",
+    fill: "rgba(79,70,229,0.12)",
+    border: "rgba(79,70,229,0.3)",
+    glow: ACCENT.indigoGlow
+  } : { color: ACCENT.indigo, fill: "#f5f3ff", border: "#c7d2fe", glow: ACCENT.indigoGlow };
 }
 
 // src/ui/Toolbar.tsx
@@ -447,17 +472,19 @@ function Toolbar({ onExport, onImport, allowedExports, allowImport = true }) {
       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), "aria-label": `Export as ${f.label}`, 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)(
-      ImportDialog,
-      {
-        open: importOpen,
-        onClose: () => setImportOpen(false),
-        onImport
-      }
-    )
+    onImport && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ImportDialog, { open: importOpen, onClose: () => setImportOpen(false), onImport })
   ] });
 }
 var bar = {
@@ -549,7 +576,15 @@ var SHAPES = [
   { key: "circle", label: "Circle", icon: "\u25CB" },
   { key: "parallelogram", label: "I/O", icon: "\u25B1" }
 ];
-function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDark = false, t, acc }) {
+function StepEditor({
+  nodeId,
+  model,
+  onModelChange,
+  variant = "flowchart",
+  isDark = false,
+  t,
+  acc
+}) {
   const isQuestion2 = variant === "question";
   const branchTerm = isQuestion2 ? "Answer" : "Branch";
   const tt = t ?? (isDark ? darkTheme : lightTheme);
@@ -583,27 +618,57 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
   const answers = node.metadata?.answers ?? [];
   const commitLabel = () => {
     if (label === node.label || !label.trim()) return;
-    onModelChange({ ...model, nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, label: label.trim() } : n) });
+    onModelChange({
+      ...model,
+      nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, label: label.trim() } : n)
+    });
   };
   const setShape = (shape) => {
-    onModelChange({ ...model, nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, shape } : n) });
+    onModelChange({
+      ...model,
+      nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, shape } : n)
+    });
   };
   const removeEdge = (edgeId) => {
     onModelChange({ ...model, edges: model.edges.filter((e) => e.id !== edgeId) });
   };
   const updateEdgeLabel = (edgeId, val) => {
-    onModelChange({ ...model, edges: model.edges.map((e) => e.id === edgeId ? { ...e, label: val || void 0 } : e) });
+    onModelChange({
+      ...model,
+      edges: model.edges.map((e) => e.id === edgeId ? { ...e, label: val || void 0 } : e)
+    });
   };
   const addBranch = () => {
     if (branchMode === "new") {
       if (!branchLabel.trim()) return;
       const newId = nextId("node", model.nodes);
-      const newNode = { id: newId, label: branchLabel.trim(), shape: "rectangle", x: (node.x ?? 0) + 200, y: (node.y ?? 0) + 20 + outEdges.length * 100 };
-      const newEdge = { id: nextId("e", model.edges), from: nodeId, to: newId, label: branchEdgeLabel.trim() || void 0 };
-      onModelChange({ ...model, nodes: [...model.nodes, newNode], edges: [...model.edges, newEdge] });
+      const newNode = {
+        id: newId,
+        label: branchLabel.trim(),
+        shape: "rectangle",
+        x: (node.x ?? 0) + 200,
+        y: (node.y ?? 0) + 20 + outEdges.length * 100
+      };
+      const newEdge = {
+        id: nextId("e", model.edges),
+        from: nodeId,
+        to: newId,
+        label: branchEdgeLabel.trim() || void 0
+      };
+      onModelChange({
+        ...model,
+        nodes: [...model.nodes, newNode],
+        edges: [...model.edges, newEdge]
+      });
     } else {
-      if (!branchTarget || model.edges.some((e) => e.from === nodeId && e.to === branchTarget)) return;
-      const newEdge = { id: nextId("e", model.edges), from: nodeId, to: branchTarget, label: branchEdgeLabel.trim() || void 0 };
+      if (!branchTarget || model.edges.some((e) => e.from === nodeId && e.to === branchTarget))
+        return;
+      const newEdge = {
+        id: nextId("e", model.edges),
+        from: nodeId,
+        to: branchTarget,
+        label: branchEdgeLabel.trim() || void 0
+      };
       onModelChange({ ...model, edges: [...model.edges, newEdge] });
     }
     setBranchLabel("");
@@ -615,7 +680,12 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
     const trimmed = newAnswer.trim();
     if (!trimmed || answers.includes(trimmed)) return;
     const updated = [...answers, trimmed];
-    onModelChange({ ...model, nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, metadata: { ...n.metadata ?? {}, answers: updated } } : n) });
+    onModelChange({
+      ...model,
+      nodes: model.nodes.map(
+        (n) => n.id === nodeId ? { ...n, metadata: { ...n.metadata ?? {}, answers: updated } } : n
+      )
+    });
     setNewAnswer("");
     setAddingAnswer(false);
   };
@@ -624,7 +694,9 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
     const updatedEdges = model.edges.filter((e) => !(e.from === nodeId && e.label === ans));
     onModelChange({
       ...model,
-      nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, metadata: { ...n.metadata ?? {}, answers: updated } } : n),
+      nodes: model.nodes.map(
+        (n) => n.id === nodeId ? { ...n, metadata: { ...n.metadata ?? {}, answers: updated } } : n
+      ),
       edges: updatedEdges
     });
   };
@@ -633,7 +705,12 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
     if (next < 0 || next >= answers.length) return;
     const arr = [...answers];
     [arr[idx], arr[next]] = [arr[next], arr[idx]];
-    onModelChange({ ...model, nodes: model.nodes.map((n) => n.id === nodeId ? { ...n, metadata: { ...n.metadata ?? {}, answers: arr } } : n) });
+    onModelChange({
+      ...model,
+      nodes: model.nodes.map(
+        (n) => n.id === nodeId ? { ...n, metadata: { ...n.metadata ?? {}, answers: arr } } : n
+      )
+    });
   };
   const inputStyle = {
     width: "100%",
@@ -688,167 +765,600 @@ function StepEditor({ nodeId, model, onModelChange, variant = "flowchart", isDar
     fontFamily: "inherit",
     transition: "background 0.15s, border-color 0.15s"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { width: 272, minWidth: 272, background: tt.panelBg, borderLeft: `1px solid ${tt.panelBorder}`, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
-      padding: "12px 16px",
-      fontWeight: 700,
-      fontSize: 12,
-      letterSpacing: 0.8,
-      textTransform: "uppercase",
-      color: accentColor,
-      borderBottom: `1px solid ${accentBorder}`,
-      background: accentLight,
-      display: "flex",
-      alignItems: "center",
-      gap: 8
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accentColor } }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isQuestion2 ? "Question Editor" : variant === "journey" ? "Step Editor" : "Step Editor" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}` }, children: [
-        /* @__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: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "input",
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        width: 272,
+        minWidth: 272,
+        background: tt.panelBg,
+        borderLeft: `1px solid ${tt.panelBorder}`,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
           {
-            ref: inputRef,
-            value: label,
-            onChange: (e) => setLabel(e.target.value),
-            onBlur: commitLabel,
-            onKeyDown: (e) => e.key === "Enter" && commitLabel(),
-            style: inputStyle,
-            placeholder: "Step name\u2026"
-          }
-        )
-      ] }),
-      !isQuestion2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}` }, children: [
-        /* @__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), "aria-pressed": active, style: {
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 4,
-            padding: "8px 6px",
-            borderRadius: 8,
-            cursor: "pointer",
-            transition: "all 0.15s",
-            background: active ? accentColor : tt.shapeBtnBg,
-            color: active ? "#fff" : tt.textSecondary,
-            border: active ? `1.5px solid ${accentColor}` : `1.5px solid ${tt.shapeBtnBorder}`
-          }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, lineHeight: 1 }, children: s2.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 11, fontWeight: 500 }, children: s2.label })
-          ] }, s2.key);
-        }) })
-      ] }),
-      isQuestion2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}`, flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Answers" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 11, color: tt.textMuted, background: isDark ? "#0f172a" : "#f1f5f9", padding: "1px 7px", borderRadius: 99, fontWeight: 600 }, children: answers.length })
-        ] }),
-        answers.length === 0 && !addingAnswer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, color: tt.textMuted, textAlign: "center", padding: "16px 0", fontStyle: "italic" }, children: "No answers yet \u2014 add one below" }),
-        answers.map((ans, i) => {
-          const connected = model.edges.some((e) => e.from === nodeId && e.label === ans);
-          const targetNode = model.nodes.find((n) => {
-            const e = model.edges.find((ex) => ex.from === nodeId && ex.label === ans);
-            return e && n.id === e.to;
-          });
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 0, marginBottom: 8, borderRadius: 12, border: `1px solid ${tt.cardBorder}`, overflow: "hidden", background: tt.cardBg, boxShadow: isDark ? "none" : "0 1px 2px rgba(15,23,42,0.04)" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { width: 4, alignSelf: "stretch", background: accentColor, flexShrink: 0 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0, padding: "8px 10px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, fontWeight: 600, color: tt.textPrimary, marginBottom: connected ? 3 : 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: ans }),
-              connected && targetNode && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 11, color: accentColor, opacity: 0.85 }, children: [
-                "\u2192 ",
-                targetNode.label
-              ] }),
-              !connected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 10, color: tt.textMuted, fontStyle: "italic" }, children: "drag port to connect" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", padding: "4px 2px", gap: 2 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => moveAnswer(i, -1), disabled: i === 0, style: { background: "none", border: "none", color: tt.textMuted, cursor: "pointer", fontSize: 11, padding: "2px 4px", opacity: i === 0 ? 0.3 : 1 }, children: "\u2191" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => moveAnswer(i, 1), disabled: i === answers.length - 1, style: { background: "none", border: "none", color: tt.textMuted, cursor: "pointer", fontSize: 11, padding: "2px 4px", opacity: i === answers.length - 1 ? 0.3 : 1 }, children: "\u2193" })
-            ] }),
-            /* @__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", { role: "group", "aria-label": "Add answer form", onKeyDown: (e) => {
-          if (e.key === "Escape") {
-            setAddingAnswer(false);
-            setNewAnswer("");
+            style: {
+              padding: "12px 16px",
+              fontWeight: 700,
+              fontSize: 12,
+              letterSpacing: 0.8,
+              textTransform: "uppercase",
+              color: accentColor,
+              borderBottom: `1px solid ${accentBorder}`,
+              background: accentLight,
+              display: "flex",
+              alignItems: "center",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accentColor } }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: isQuestion2 ? "Question Editor" : variant === "journey" ? "Step Editor" : "Step Editor" })
+            ]
           }
-        }, 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" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => {
-              setAddingAnswer(false);
-              setNewAnswer("");
-            }, style: cancelBtnStyle, children: "Cancel" })
-          ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: () => setAddingAnswer(true), style: addTriggerStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, lineHeight: 1 }, children: "+" }),
-          " Add Answer"
-        ] }),
-        answers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 12, padding: "8px 10px", background: isDark ? "rgba(251,191,36,0.06)" : "#fef9f0", borderRadius: 8, border: `1px solid ${accentBorder}` }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 10, fontWeight: 700, color: accentColor, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children: "How to connect" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 11, color: tt.textSecondary, lineHeight: 1.5 }, children: "Hover the question node on the canvas \u2014 drag an answer's port dot to any other node." })
-        ] })
-      ] }),
-      !isQuestion2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}`, flex: 1 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Branches" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 11, color: tt.textMuted, background: isDark ? "#0f172a" : "#f1f5f9", padding: "1px 7px", borderRadius: 99, fontWeight: 600 }, children: outEdges.length })
-        ] }),
-        outEdges.length === 0 && !addingBranch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 12, color: tt.textMuted, textAlign: "center", padding: "16px 0", fontStyle: "italic" }, children: "No outgoing connections yet" }),
-        outEdges.map((edge) => {
-          const target = model.nodes.find((n) => n.id === edge.to);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 0, marginBottom: 8, borderRadius: 12, border: `1px solid ${tt.cardBorder}`, overflow: "hidden", background: tt.cardBg, boxShadow: isDark ? "none" : "0 1px 2px rgba(15,23,42,0.04)" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { width: 4, alignSelf: "stretch", background: accentColor, flexShrink: 0 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0, padding: "8px 10px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 12, fontWeight: 600, color: tt.textPrimary, marginBottom: 5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
-                "\u2192 ",
-                target?.label ?? edge.to
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { value: edge.label ?? "", onChange: (e) => updateEdgeLabel(edge.id, e.target.value), placeholder: "Edge label (optional)", style: { ...inputStyle, fontSize: 11, padding: "4px 8px" } })
-            ] }),
-            /* @__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", { 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",
-            border: "none",
-            borderRadius: 6,
-            cursor: "pointer",
-            fontSize: 11,
-            fontWeight: 600,
-            background: branchMode === mode ? accentColor : tt.btnSecBg,
-            color: branchMode === mode ? "#fff" : tt.btnSecText
-          }, children: mode === "new" ? `+ New step` : "Existing step" }, mode)) }),
-          branchMode === "new" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { autoFocus: true, value: branchLabel, onChange: (e) => setBranchLabel(e.target.value), onKeyDown: (e) => e.key === "Enter" && addBranch(), placeholder: "New step name\u2026", style: { ...inputStyle, marginBottom: 6 } }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("select", { value: branchTarget, onChange: (e) => setBranchTarget(e.target.value), style: { ...inputStyle, marginBottom: 6, appearance: "none" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "Choose a step\u2026" }),
-            otherNodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: n.id, children: n.label }, n.id))
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}` }, children: [
+            /* @__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: "Name"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "input",
+              {
+                ref: inputRef,
+                value: label,
+                onChange: (e) => setLabel(e.target.value),
+                onBlur: commitLabel,
+                onKeyDown: (e) => e.key === "Enter" && commitLabel(),
+                style: inputStyle,
+                placeholder: "Step name\u2026"
+              }
+            )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { value: branchEdgeLabel, onChange: (e) => setBranchEdgeLabel(e.target.value), placeholder: "Edge label (optional)", style: { ...inputStyle, marginBottom: 10 } }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: addBranch, style: addBtnStyle, children: [
-              "Add ",
-              branchTerm
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setAddingBranch(false), style: cancelBtnStyle, children: "Cancel" })
-          ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: () => setAddingBranch(true), style: addTriggerStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, lineHeight: 1 }, children: "+" }),
-          " Add ",
-          branchTerm
+          !isQuestion2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}` }, children: [
+            /* @__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),
+                  "aria-pressed": active,
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 4,
+                    padding: "8px 6px",
+                    borderRadius: 8,
+                    cursor: "pointer",
+                    transition: "all 0.15s",
+                    background: active ? accentColor : tt.shapeBtnBg,
+                    color: active ? "#fff" : tt.textSecondary,
+                    border: active ? `1.5px solid ${accentColor}` : `1.5px solid ${tt.shapeBtnBorder}`
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, lineHeight: 1 }, children: s2.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 11, fontWeight: 500 }, children: s2.label })
+                  ]
+                },
+                s2.key
+              );
+            }) })
+          ] }),
+          isQuestion2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "section",
+            {
+              style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}`, flex: 1 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      marginBottom: 10
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "label",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: 10,
+                            fontWeight: 700,
+                            color: tt.labelText,
+                            textTransform: "uppercase",
+                            letterSpacing: 0.8
+                          },
+                          children: "Answers"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 11,
+                            color: tt.textMuted,
+                            background: isDark ? "#0f172a" : "#f1f5f9",
+                            padding: "1px 7px",
+                            borderRadius: 99,
+                            fontWeight: 600
+                          },
+                          children: answers.length
+                        }
+                      )
+                    ]
+                  }
+                ),
+                answers.length === 0 && !addingAnswer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: tt.textMuted,
+                      textAlign: "center",
+                      padding: "16px 0",
+                      fontStyle: "italic"
+                    },
+                    children: "No answers yet \u2014 add one below"
+                  }
+                ),
+                answers.map((ans, i) => {
+                  const connected = model.edges.some((e) => e.from === nodeId && e.label === ans);
+                  const targetNode = model.nodes.find((n) => {
+                    const e = model.edges.find((ex) => ex.from === nodeId && ex.label === ans);
+                    return e && n.id === e.to;
+                  });
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "flex-start",
+                        gap: 0,
+                        marginBottom: 8,
+                        borderRadius: 12,
+                        border: `1px solid ${tt.cardBorder}`,
+                        overflow: "hidden",
+                        background: tt.cardBg,
+                        boxShadow: isDark ? "none" : "0 1px 2px rgba(15,23,42,0.04)"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "div",
+                          {
+                            style: {
+                              width: 4,
+                              alignSelf: "stretch",
+                              background: accentColor,
+                              flexShrink: 0
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0, padding: "8px 10px" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 12,
+                                fontWeight: 600,
+                                color: tt.textPrimary,
+                                marginBottom: connected ? 3 : 0,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: ans
+                            }
+                          ),
+                          connected && targetNode && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 11, color: accentColor, opacity: 0.85 }, children: [
+                            "\u2192 ",
+                            targetNode.label
+                          ] }),
+                          !connected && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 10, color: tt.textMuted, fontStyle: "italic" }, children: "drag port to connect" })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          "div",
+                          {
+                            style: { display: "flex", flexDirection: "column", padding: "4px 2px", gap: 2 },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "button",
+                                {
+                                  onClick: () => moveAnswer(i, -1),
+                                  disabled: i === 0,
+                                  style: {
+                                    background: "none",
+                                    border: "none",
+                                    color: tt.textMuted,
+                                    cursor: "pointer",
+                                    fontSize: 11,
+                                    padding: "2px 4px",
+                                    opacity: i === 0 ? 0.3 : 1
+                                  },
+                                  children: "\u2191"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                                "button",
+                                {
+                                  onClick: () => moveAnswer(i, 1),
+                                  disabled: i === answers.length - 1,
+                                  style: {
+                                    background: "none",
+                                    border: "none",
+                                    color: tt.textMuted,
+                                    cursor: "pointer",
+                                    fontSize: 11,
+                                    padding: "2px 4px",
+                                    opacity: i === answers.length - 1 ? 0.3 : 1
+                                  },
+                                  children: "\u2193"
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__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",
+                  {
+                    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" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "button",
+                          {
+                            onClick: () => {
+                              setAddingAnswer(false);
+                              setNewAnswer("");
+                            },
+                            style: cancelBtnStyle,
+                            children: "Cancel"
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: () => setAddingAnswer(true), style: addTriggerStyle, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, lineHeight: 1 }, children: "+" }),
+                  " Add Answer"
+                ] }),
+                answers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      marginTop: 12,
+                      padding: "8px 10px",
+                      background: isDark ? "rgba(251,191,36,0.06)" : "#fef9f0",
+                      borderRadius: 8,
+                      border: `1px solid ${accentBorder}`
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          style: {
+                            fontSize: 10,
+                            fontWeight: 700,
+                            color: accentColor,
+                            textTransform: "uppercase",
+                            letterSpacing: 0.6,
+                            marginBottom: 4
+                          },
+                          children: "How to connect"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: 11, color: tt.textSecondary, lineHeight: 1.5 }, children: "Hover the question node on the canvas \u2014 drag an answer's port dot to any other node." })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          !isQuestion2 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "section",
+            {
+              style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}`, flex: 1 },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      marginBottom: 10
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "label",
+                        {
+                          style: {
+                            display: "block",
+                            fontSize: 10,
+                            fontWeight: 700,
+                            color: tt.labelText,
+                            textTransform: "uppercase",
+                            letterSpacing: 0.8
+                          },
+                          children: "Branches"
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: 11,
+                            color: tt.textMuted,
+                            background: isDark ? "#0f172a" : "#f1f5f9",
+                            padding: "1px 7px",
+                            borderRadius: 99,
+                            fontWeight: 600
+                          },
+                          children: outEdges.length
+                        }
+                      )
+                    ]
+                  }
+                ),
+                outEdges.length === 0 && !addingBranch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: tt.textMuted,
+                      textAlign: "center",
+                      padding: "16px 0",
+                      fontStyle: "italic"
+                    },
+                    children: "No outgoing connections yet"
+                  }
+                ),
+                outEdges.map((edge) => {
+                  const target = model.nodes.find((n) => n.id === edge.to);
+                  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "flex-start",
+                        gap: 0,
+                        marginBottom: 8,
+                        borderRadius: 12,
+                        border: `1px solid ${tt.cardBorder}`,
+                        overflow: "hidden",
+                        background: tt.cardBg,
+                        boxShadow: isDark ? "none" : "0 1px 2px rgba(15,23,42,0.04)"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                          "div",
+                          {
+                            style: {
+                              width: 4,
+                              alignSelf: "stretch",
+                              background: accentColor,
+                              flexShrink: 0
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { flex: 1, minWidth: 0, padding: "8px 10px" }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 12,
+                                fontWeight: 600,
+                                color: tt.textPrimary,
+                                marginBottom: 5,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: [
+                                "\u2192 ",
+                                target?.label ?? edge.to
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "input",
+                            {
+                              value: edge.label ?? "",
+                              onChange: (e) => updateEdgeLabel(edge.id, e.target.value),
+                              placeholder: "Edge label (optional)",
+                              style: { ...inputStyle, fontSize: 11, padding: "4px 8px" }
+                            }
+                          )
+                        ] }),
+                        /* @__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",
+                  {
+                    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",
+                            border: "none",
+                            borderRadius: 6,
+                            cursor: "pointer",
+                            fontSize: 11,
+                            fontWeight: 600,
+                            background: branchMode === mode ? accentColor : tt.btnSecBg,
+                            color: branchMode === mode ? "#fff" : tt.btnSecText
+                          },
+                          children: mode === "new" ? `+ New step` : "Existing step"
+                        },
+                        mode
+                      )) }),
+                      branchMode === "new" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "input",
+                        {
+                          autoFocus: true,
+                          value: branchLabel,
+                          onChange: (e) => setBranchLabel(e.target.value),
+                          onKeyDown: (e) => e.key === "Enter" && addBranch(),
+                          placeholder: "New step name\u2026",
+                          style: { ...inputStyle, marginBottom: 6 }
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        "select",
+                        {
+                          value: branchTarget,
+                          onChange: (e) => setBranchTarget(e.target.value),
+                          style: { ...inputStyle, marginBottom: 6, appearance: "none" },
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: "Choose a step\u2026" }),
+                            otherNodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: n.id, children: n.label }, n.id))
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "input",
+                        {
+                          value: branchEdgeLabel,
+                          onChange: (e) => setBranchEdgeLabel(e.target.value),
+                          placeholder: "Edge label (optional)",
+                          style: { ...inputStyle, marginBottom: 10 }
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: 6 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: addBranch, style: addBtnStyle, children: [
+                          "Add ",
+                          branchTerm
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => setAddingBranch(false), style: cancelBtnStyle, children: "Cancel" })
+                      ] })
+                    ]
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { onClick: () => setAddingBranch(true), style: addTriggerStyle, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: 16, lineHeight: 1 }, children: "+" }),
+                  " Add ",
+                  branchTerm
+                ] })
+              ]
+            }
+          )
         ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 
 // src/ui/SequenceEditor.tsx
@@ -903,26 +1413,33 @@ function SequenceCanvas(props) {
     return next;
   }, [messages, drag]);
   if (actors.length === 0 && messages.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
-      position: "absolute",
-      inset: 0,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 10,
-      color: t.textMuted,
-      pointerEvents: "none"
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 36, opacity: 0.15, color: t.textPrimary }, children: "\u2194" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
-        "Click ",
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Actor" }),
-        " then ",
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Message" }),
-        " to start"
-      ] })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 10,
+          color: t.textMuted,
+          pointerEvents: "none"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: 36, opacity: 0.15, color: t.textPrimary }, children: "\u2194" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+            "Click ",
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Actor" }),
+            " then",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { color: INDIGO }, children: "+ Message" }),
+            " to start"
+          ] })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "svg",
@@ -930,12 +1447,28 @@ function SequenceCanvas(props) {
       ref: svgRef,
       width: totalW,
       height: totalH,
-      style: { display: "block", cursor: drag?.active ? "grabbing" : "default", userSelect: "none" },
+      style: {
+        display: "block",
+        cursor: drag?.active ? "grabbing" : "default",
+        userSelect: "none"
+      },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pattern", { id: "seqdots", x: "0", y: "0", width: "24", height: "24", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: 12, cy: 12, r: 1.1, fill: t.dot }) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("filter", { id: "seqShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("feDropShadow", { dx: 0, dy: 3, stdDeviation: 5, floodColor: shadowColor(isDark) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("marker", { id: "seqArrow", markerWidth: 9, markerHeight: 7, refX: 8.5, refY: 3.5, orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: t.arrow }) })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "marker",
+            {
+              id: "seqArrow",
+              markerWidth: 9,
+              markerHeight: 7,
+              refX: 8.5,
+              refY: 3.5,
+              orient: "auto",
+              markerUnits: "strokeWidth",
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: t.arrow })
+            }
+          )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: totalW, height: totalH, fill: "url(#seqdots)" }),
         actors.map((name) => {
@@ -984,8 +1517,28 @@ function SequenceCanvas(props) {
                   opacity: isDark ? 0.18 : 0.6
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "none", stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: startX + loopW + 8, y: loopY + 16, fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "path",
+                {
+                  d,
+                  fill: "none",
+                  stroke,
+                  strokeWidth: 1.5,
+                  strokeDasharray: dash,
+                  markerEnd: "url(#seqArrow)"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "text",
+                {
+                  x: startX + loopW + 8,
+                  y: loopY + 16,
+                  fontSize: 11,
+                  fill: selectedHere ? INDIGO : t.textPrimary,
+                  fontWeight: 500,
+                  children: msg.label
+                }
+              )
             ] }, msg.id);
           }
           const labelX = (fromX + toX) / 2;
@@ -1002,7 +1555,19 @@ function SequenceCanvas(props) {
                 opacity: isDark ? 0.18 : 0.6
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: fromX, y1: y, x2: toX, y2: y, stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "line",
+              {
+                x1: fromX,
+                y1: y,
+                x2: toX,
+                y2: y,
+                stroke,
+                strokeWidth: 1.5,
+                strokeDasharray: dash,
+                markerEnd: "url(#seqArrow)"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "rect",
               {
@@ -1016,7 +1581,18 @@ function SequenceCanvas(props) {
                 strokeWidth: selectedHere ? 1.25 : 1
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("text", { x: labelX, y: y - 5, textAnchor: "middle", fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "text",
+              {
+                x: labelX,
+                y: y - 5,
+                textAnchor: "middle",
+                fontSize: 11,
+                fill: selectedHere ? INDIGO : t.textPrimary,
+                fontWeight: 500,
+                children: msg.label
+              }
+            )
           ] }, msg.id);
         }),
         actors.map((name) => {
@@ -1356,7 +1932,9 @@ function computeLayout(model) {
     const h = isQuestion(n, model.variant) ? questionNodeH(n.metadata?.answers ?? []) : NODE_H;
     return { node: n, w, h };
   });
-  const allPositioned = sized.every((s2) => typeof s2.node.x === "number" && typeof s2.node.y === "number");
+  const allPositioned = sized.every(
+    (s2) => typeof s2.node.x === "number" && typeof s2.node.y === "number"
+  );
   if (allPositioned) {
     for (const s2 of sized) {
       boxes.set(s2.node.id, { x: s2.node.x, y: s2.node.y, w: s2.w, h: s2.h });
@@ -1406,7 +1984,15 @@ function computeLayout(model) {
   return boxes;
 }
 function escapeXML(s2) {
-  return s2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  return s2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeForSVG(s2) {
+  let clean = s2;
+  clean = clean.replace(/<\/?[a-zA-Z][^>]*>/g, "");
+  clean = clean.replace(/\b(?:javascript|data|vbscript)\s*:/gi, "");
+  clean = clean.replace(/\bon[a-z]+\s*=/gi, "");
+  clean = clean.replace(/\x00/g, "");
+  return escapeXML(clean);
 }
 var COLORS = {
   bg: "#fafbfc",
@@ -1425,8 +2011,8 @@ function renderStandardNode(node, box) {
   const cx = box.x + box.w / 2;
   const cy = box.y + box.h / 2;
   const shape = node.shape ?? "rectangle";
-  const label = `<text x="${cx}" y="${cy + 4.5}" text-anchor="middle" font-family="ui-sans-serif,system-ui,-apple-system,sans-serif" font-size="13" font-weight="500" fill="${COLORS.text}">${escapeXML(node.label)}</text>`;
-  let shapeEl = "";
+  const label = `<text x="${cx}" y="${cy + 4.5}" text-anchor="middle" font-family="ui-sans-serif,system-ui,-apple-system,sans-serif" font-size="13" font-weight="500" fill="${COLORS.text}">${sanitizeForSVG(node.label)}</text>`;
+  let shapeEl;
   if (shape === "diamond") {
     const pts = `${cx},${box.y} ${box.x + box.w},${cy} ${cx},${box.y + box.h} ${box.x},${cy}`;
     shapeEl = `<polygon points="${pts}" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
@@ -1446,17 +2032,37 @@ function renderQuestionNode(node, box) {
   const clipId = `qhdr-${node.id.replace(/[^a-zA-Z0-9_-]/g, "_")}`;
   const x = box.x, y = box.y, w = box.w, h = box.h;
   const parts = [];
-  parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="14" fill="${COLORS.nodeFill}" stroke="${COLORS.amberLine}" stroke-width="1.5" filter="url(#nodeShadow)"/>`);
-  parts.push(`<defs><clipPath id="${clipId}"><rect x="${x}" y="${y}" width="${w}" height="${Q_BASE_H}" rx="14"/></clipPath></defs>`);
-  parts.push(`<rect x="${x}" y="${y}" width="${w}" height="${Q_BASE_H}" fill="${COLORS.amberSoft}" clip-path="url(#${clipId})"/>`);
-  parts.push(`<rect x="${x}" y="${y}" width="4" height="${Q_BASE_H}" rx="2" fill="${COLORS.amber}"/>`);
-  parts.push(`<rect x="${x + 12}" y="${y + 14}" width="28" height="28" rx="8" fill="${COLORS.amber}"/>`);
-  parts.push(`<text x="${x + 26}" y="${y + 33}" text-anchor="middle" font-size="15" font-weight="900" fill="white">?</text>`);
-  parts.push(`<text x="${x + 50}" y="${y + 27}" font-family="ui-sans-serif,system-ui,sans-serif" font-size="9" font-weight="700" fill="${COLORS.textSub}" letter-spacing="0.6">QUESTION</text>`);
-  parts.push(`<text x="${x + 50}" y="${y + 42}" font-family="ui-sans-serif,system-ui,sans-serif" font-size="13" font-weight="700" fill="${COLORS.text}">${escapeXML(node.label)}</text>`);
-  parts.push(`<line x1="${x}" y1="${y + Q_BASE_H}" x2="${x + w}" y2="${y + Q_BASE_H}" stroke="${COLORS.amberLine}" stroke-width="1"/>`);
+  parts.push(
+    `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="14" fill="${COLORS.nodeFill}" stroke="${COLORS.amberLine}" stroke-width="1.5" filter="url(#nodeShadow)"/>`
+  );
+  parts.push(
+    `<defs><clipPath id="${clipId}"><rect x="${x}" y="${y}" width="${w}" height="${Q_BASE_H}" rx="14"/></clipPath></defs>`
+  );
+  parts.push(
+    `<rect x="${x}" y="${y}" width="${w}" height="${Q_BASE_H}" fill="${COLORS.amberSoft}" clip-path="url(#${clipId})"/>`
+  );
+  parts.push(
+    `<rect x="${x}" y="${y}" width="4" height="${Q_BASE_H}" rx="2" fill="${COLORS.amber}"/>`
+  );
+  parts.push(
+    `<rect x="${x + 12}" y="${y + 14}" width="28" height="28" rx="8" fill="${COLORS.amber}"/>`
+  );
+  parts.push(
+    `<text x="${x + 26}" y="${y + 33}" text-anchor="middle" font-size="15" font-weight="900" fill="white">?</text>`
+  );
+  parts.push(
+    `<text x="${x + 50}" y="${y + 27}" font-family="ui-sans-serif,system-ui,sans-serif" font-size="9" font-weight="700" fill="${COLORS.textSub}" letter-spacing="0.6">QUESTION</text>`
+  );
+  parts.push(
+    `<text x="${x + 50}" y="${y + 42}" font-family="ui-sans-serif,system-ui,sans-serif" font-size="13" font-weight="700" fill="${COLORS.text}">${sanitizeForSVG(node.label)}</text>`
+  );
+  parts.push(
+    `<line x1="${x}" y1="${y + Q_BASE_H}" x2="${x + w}" y2="${y + Q_BASE_H}" stroke="${COLORS.amberLine}" stroke-width="1"/>`
+  );
   if (answers.length === 0) {
-    parts.push(`<text x="${x + w / 2}" y="${y + Q_BASE_H + 22}" text-anchor="middle" font-size="10" fill="${COLORS.amber}" opacity="0.4" font-weight="600">No answers yet</text>`);
+    parts.push(
+      `<text x="${x + w / 2}" y="${y + Q_BASE_H + 22}" text-anchor="middle" font-size="10" fill="${COLORS.amber}" opacity="0.4" font-weight="600">No answers yet</text>`
+    );
   } else {
     const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
     answers.forEach((ans, i) => {
@@ -1469,10 +2075,18 @@ function renderQuestionNode(node, box) {
       const letter = i < 26 ? 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;
-      parts.push(`<rect x="${cardX}" y="${cardY}" width="${cW}" height="${cardH}" rx="8" fill="${COLORS.amberCardBg}" stroke="${COLORS.amberLine}" stroke-width="1"/>`);
-      parts.push(`<rect x="${cx - 11}" y="${cardY + 7}" width="22" height="22" rx="6" fill="#fef3c7"/>`);
-      parts.push(`<text x="${cx}" y="${cardY + 22}" text-anchor="middle" font-size="10" font-weight="800" fill="${COLORS.amber}">${escapeXML(letter)}</text>`);
-      parts.push(`<text x="${cx}" y="${cardY + 46}" text-anchor="middle" font-size="11" font-weight="500" fill="#374151" font-family="ui-sans-serif,system-ui,sans-serif">${escapeXML(displayAns)}</text>`);
+      parts.push(
+        `<rect x="${cardX}" y="${cardY}" width="${cW}" height="${cardH}" rx="8" fill="${COLORS.amberCardBg}" stroke="${COLORS.amberLine}" stroke-width="1"/>`
+      );
+      parts.push(
+        `<rect x="${cx - 11}" y="${cardY + 7}" width="22" height="22" rx="6" fill="#fef3c7"/>`
+      );
+      parts.push(
+        `<text x="${cx}" y="${cardY + 22}" text-anchor="middle" font-size="10" font-weight="800" fill="${COLORS.amber}">${sanitizeForSVG(letter)}</text>`
+      );
+      parts.push(
+        `<text x="${cx}" y="${cardY + 46}" text-anchor="middle" font-size="11" font-weight="500" fill="#374151" font-family="ui-sans-serif,system-ui,sans-serif">${sanitizeForSVG(displayAns)}</text>`
+      );
     });
   }
   return parts.join("");
@@ -1510,7 +2124,7 @@ function renderEdge(edge, boxes, variant, nodes) {
     const midY = (y1 + y2) / 2;
     const labelW = estimateTextW(edge.label, 7) + 14;
     out += `<rect x="${midX - labelW / 2}" y="${midY - 11}" width="${labelW}" height="18" rx="9" fill="${COLORS.bg}" stroke="${COLORS.nodeStroke}" stroke-width="1"/>`;
-    out += `<text x="${midX}" y="${midY + 2}" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="11" fill="${COLORS.text}">${escapeXML(edge.label)}</text>`;
+    out += `<text x="${midX}" y="${midY + 2}" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="11" fill="${COLORS.text}">${sanitizeForSVG(edge.label)}</text>`;
   }
   return out;
 }
@@ -1536,7 +2150,7 @@ function toSVG(model) {
     `</marker>`,
     `</defs>`
   ].join("");
-  const titleEl = model.title ? `<text x="${width / 2}" y="22" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="15" font-weight="700" fill="${COLORS.text}">${escapeXML(model.title)}</text>` : "";
+  const titleEl = model.title ? `<text x="${width / 2}" y="22" text-anchor="middle" font-family="ui-sans-serif,system-ui,sans-serif" font-size="15" font-weight="700" fill="${COLORS.text}">${sanitizeForSVG(model.title)}</text>` : "";
   const edges = model.edges.map((e) => renderEdge(e, boxes, model.variant, model.nodes)).join("\n");
   const nodes = model.nodes.map((n) => {
     const b = boxes.get(n.id);
@@ -1553,7 +2167,9 @@ ${nodes}
 }
 async function toPNG(model) {
   if (typeof document === "undefined") {
-    throw new Error("toPNG requires a browser environment. For Node/Bun server use, pipe toSVG() through @resvg/resvg-js.");
+    throw new Error(
+      "toPNG requires a browser environment. For Node/Bun server use, pipe toSVG() through @resvg/resvg-js."
+    );
   }
   const svg = toSVG(model);
   const blob = new Blob([svg], { type: "image/svg+xml" });
@@ -1569,7 +2185,10 @@ async function toPNG(model) {
       ctx.scale(scale, scale);
       ctx.drawImage(img, 0, 0);
       URL.revokeObjectURL(url);
-      canvas.toBlob((b) => b ? resolve(b) : reject(new Error("Canvas toBlob failed")), "image/png");
+      canvas.toBlob(
+        (b) => b ? resolve(b) : reject(new Error("Canvas toBlob failed")),
+        "image/png"
+      );
     };
     img.onerror = () => {
       URL.revokeObjectURL(url);
@@ -1581,40 +2200,43 @@ async function toPNG(model) {
 
 // src/ui/hooks/useExporters.ts
 function useExporters(model, onExport, filename = "diagram", onSuccess) {
-  return (0, import_react7.useCallback)(async (format) => {
-    let content;
-    switch (format) {
-      case "mermaid":
-        content = toMermaid(model);
-        break;
-      case "plantuml":
-        content = toPlantUML(model);
-        break;
-      case "json":
-        content = toJSON(model);
-        break;
-      case "svg":
-        content = toSVG(model);
-        break;
-      case "png":
-        content = await toPNG(model);
-        break;
-      default:
+  return (0, import_react7.useCallback)(
+    async (format) => {
+      let content;
+      switch (format) {
+        case "mermaid":
+          content = toMermaid(model);
+          break;
+        case "plantuml":
+          content = toPlantUML(model);
+          break;
+        case "json":
+          content = toJSON(model);
+          break;
+        case "svg":
+          content = toSVG(model);
+          break;
+        case "png":
+          content = await toPNG(model);
+          break;
+        default:
+          return;
+      }
+      if (onExport) {
+        onExport(format, content);
+        onSuccess?.(`Exported as ${format.toUpperCase()}`);
         return;
-    }
-    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" }));
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${filename}.${format === "plantuml" ? "puml" : format}`;
-    a.click();
-    URL.revokeObjectURL(url);
-    onSuccess?.(`Downloaded ${a.download}`);
-  }, [model, onExport, filename, onSuccess]);
+      }
+      const url = content instanceof Blob ? URL.createObjectURL(content) : URL.createObjectURL(new Blob([content], { type: "text/plain" }));
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.${format === "plantuml" ? "puml" : format}`;
+      a.click();
+      URL.revokeObjectURL(url);
+      onSuccess?.(`Downloaded ${a.download}`);
+    },
+    [model, onExport, filename, onSuccess]
+  );
 }
 
 // src/ui/hooks/useImporter.ts
@@ -1631,7 +2253,15 @@ var Model = class _Model {
    * @param variant  Optional UI variant (flowchart models only).
    */
   constructor(type, title, variant) {
-    this.data = { type, ...variant ? { variant } : {}, title, nodes: [], edges: [], actors: [], messages: [] };
+    this.data = {
+      type,
+      ...variant ? { variant } : {},
+      title,
+      nodes: [],
+      edges: [],
+      actors: [],
+      messages: []
+    };
   }
   /**
    * Rehydrate a `Model` from a previously serialized `DiagramModel`. The
@@ -1667,7 +2297,8 @@ var Model = class _Model {
   updateNode(id, patch) {
     const node = this.data.nodes.find((n) => n.id === id);
     if (!node) throw new Error(`Node "${id}" not found`);
-    Object.assign(node, patch);
+    const { __proto__, constructor, ...safe } = patch;
+    Object.assign(node, safe);
     return this;
   }
   /**
@@ -1707,15 +2338,35 @@ var Model = class _Model {
     const errors = [];
     const nodeIds = /* @__PURE__ */ new Set();
     for (const n of this.data.nodes) {
-      if (nodeIds.has(n.id)) errors.push({ kind: "duplicate-node-id", id: n.id, message: `Duplicate node id "${n.id}"` });
+      if (nodeIds.has(n.id))
+        errors.push({
+          kind: "duplicate-node-id",
+          id: n.id,
+          message: `Duplicate node id "${n.id}"`
+        });
       nodeIds.add(n.id);
     }
     const edgeIds = /* @__PURE__ */ new Set();
     for (const e of this.data.edges) {
-      if (edgeIds.has(e.id)) errors.push({ kind: "duplicate-edge-id", id: e.id, message: `Duplicate edge id "${e.id}"` });
+      if (edgeIds.has(e.id))
+        errors.push({
+          kind: "duplicate-edge-id",
+          id: e.id,
+          message: `Duplicate edge id "${e.id}"`
+        });
       edgeIds.add(e.id);
-      if (!nodeIds.has(e.from)) errors.push({ kind: "dangling-from", id: e.id, message: `Edge "${e.id}" references unknown source node "${e.from}"` });
-      if (!nodeIds.has(e.to)) errors.push({ kind: "dangling-to", id: e.id, message: `Edge "${e.id}" references unknown target node "${e.to}"` });
+      if (!nodeIds.has(e.from))
+        errors.push({
+          kind: "dangling-from",
+          id: e.id,
+          message: `Edge "${e.id}" references unknown source node "${e.from}"`
+        });
+      if (!nodeIds.has(e.to))
+        errors.push({
+          kind: "dangling-to",
+          id: e.id,
+          message: `Edge "${e.id}" references unknown target node "${e.to}"`
+        });
     }
     return errors;
   }
@@ -1749,6 +2400,25 @@ var Model = class _Model {
   }
 };
 
+// src/core/sanitize.ts
+var MAX_LABEL_LENGTH = 2e3;
+var MAX_NODES = 500;
+var MAX_EDGES = 2e3;
+var MAX_ACTORS = 100;
+var MAX_MESSAGES = 2e3;
+var MAX_IMPORT_LENGTH = 2 * 1024 * 1024;
+function sanitizeLabel(raw) {
+  let s2 = raw;
+  s2 = s2.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, "");
+  s2 = s2.replace(/<\/?[a-zA-Z][^>]*>/g, "");
+  s2 = s2.replace(/\b(?:javascript|data|vbscript)\s*:/gi, "");
+  s2 = s2.replace(/\bon[a-z]+\s*=/gi, "");
+  if (s2.length > MAX_LABEL_LENGTH) {
+    s2 = s2.slice(0, MAX_LABEL_LENGTH);
+  }
+  return s2;
+}
+
 // src/importers/mermaid.ts
 function parseNodeDecl(raw) {
   const patterns = [
@@ -1760,7 +2430,7 @@ function parseNodeDecl(raw) {
   ];
   for (const [re, shape] of patterns) {
     const m = raw.match(re);
-    if (m) return { id: m[1], label: m[2].replace(/^["']|["']$/g, ""), shape };
+    if (m) return { id: m[1], label: sanitizeLabel(m[2].replace(/^["']|["']$/g, "")), shape };
   }
   return null;
 }
@@ -1775,8 +2445,11 @@ function parseFlowchart(lines) {
   const model = new Model("flowchart");
   const nodeMap = /* @__PURE__ */ new Map();
   const groupStack = [];
+  let edgeCount = 0;
   const ensureNode = (id, group) => {
     if (!nodeMap.has(id)) {
+      if (nodeMap.size >= MAX_NODES)
+        throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_NODES} nodes`);
       nodeMap.set(id, true);
       const metadata = group ? { group } : void 0;
       model.addNode({ id, label: id, shape: "rectangle", ...metadata ? { metadata } : {} });
@@ -1785,7 +2458,8 @@ function parseFlowchart(lines) {
   for (const line of lines) {
     const trimmed = line.trim();
     if (!trimmed) continue;
-    if (trimmed.startsWith("%%") || trimmed.startsWith("graph") || trimmed.startsWith("flowchart") || trimmed.startsWith("click ") || trimmed.startsWith("classDef ") || trimmed.startsWith("class ") || trimmed.startsWith("style ") || trimmed.startsWith("linkStyle ")) continue;
+    if (trimmed.startsWith("%%") || trimmed.startsWith("graph") || trimmed.startsWith("flowchart") || trimmed.startsWith("click ") || trimmed.startsWith("classDef ") || trimmed.startsWith("class ") || trimmed.startsWith("style ") || trimmed.startsWith("linkStyle "))
+      continue;
     const subgraphOpen = trimmed.match(/^subgraph\s+(\S+)/i);
     if (subgraphOpen) {
       groupStack.push(subgraphOpen[1]);
@@ -1801,12 +2475,15 @@ function parseFlowchart(lines) {
       const fromRaw = edgeMatch[1].trim();
       const connector = edgeMatch[2];
       const label = edgeMatch[3]?.replace(/^["']|["']$/g, "");
+      const sanitizedLabel = label ? sanitizeLabel(label) : void 0;
       const toRaw = edgeMatch[4].trim();
       const style = detectStyle(connector);
       const arrowhead = detectArrowhead(connector);
       const fromNode = parseNodeDecl(fromRaw);
       const toNode = parseNodeDecl(toRaw);
       if (fromNode && !nodeMap.has(fromNode.id)) {
+        if (nodeMap.size >= MAX_NODES)
+          throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_NODES} nodes`);
         nodeMap.set(fromNode.id, true);
         const metadata = currentGroup ? { group: currentGroup } : void 0;
         model.addNode({ ...fromNode, ...metadata ? { metadata } : {} });
@@ -1814,19 +2491,24 @@ function parseFlowchart(lines) {
         ensureNode(fromRaw.replace(/\W.*/, ""), currentGroup);
       }
       if (toNode && !nodeMap.has(toNode.id)) {
+        if (nodeMap.size >= MAX_NODES)
+          throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_NODES} nodes`);
         nodeMap.set(toNode.id, true);
         const metadata = currentGroup ? { group: currentGroup } : void 0;
         model.addNode({ ...toNode, ...metadata ? { metadata } : {} });
       } else if (!toNode) {
         ensureNode(toRaw.replace(/\W.*/, ""), currentGroup);
       }
+      if (edgeCount >= MAX_EDGES)
+        throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_EDGES} edges`);
+      edgeCount++;
       const fromId = fromNode?.id ?? fromRaw.replace(/\W.*/, "");
       const toId = toNode?.id ?? toRaw.replace(/\W.*/, "");
       model.addEdge({
         id: nextId("e", model.toJSON().edges),
         from: fromId,
         to: toId,
-        ...label ? { label } : {},
+        ...sanitizedLabel ? { label: sanitizedLabel } : {},
         style,
         ...arrowhead === "none" ? { arrowhead } : {}
       });
@@ -1834,6 +2516,8 @@ function parseFlowchart(lines) {
     }
     const nodeDecl = parseNodeDecl(trimmed);
     if (nodeDecl && !nodeMap.has(nodeDecl.id)) {
+      if (nodeMap.size >= MAX_NODES)
+        throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_NODES} nodes`);
       nodeMap.set(nodeDecl.id, true);
       const metadata = currentGroup ? { group: currentGroup } : void 0;
       model.addNode({ ...nodeDecl, ...metadata ? { metadata } : {} });
@@ -1843,34 +2527,56 @@ function parseFlowchart(lines) {
 }
 function parseSequence(lines, title) {
   const model = new Model("sequence", title);
+  let actorCount = 0;
+  let messageCount = 0;
+  const safeAddActor = (name) => {
+    const safeName = sanitizeLabel(name);
+    if (!model.toJSON().actors?.includes(safeName)) {
+      if (actorCount >= MAX_ACTORS)
+        throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_ACTORS} actors`);
+      actorCount++;
+    }
+    model.addActor(safeName);
+    return safeName;
+  };
   for (const line of lines) {
     const trimmed = line.trim();
     if (!trimmed || trimmed.startsWith("sequenceDiagram") || trimmed.startsWith("%%")) continue;
     const participantMatch = trimmed.match(/^participant\s+(.+)$/i);
     if (participantMatch) {
-      model.addActor(participantMatch[1].trim());
+      safeAddActor(participantMatch[1].trim());
       continue;
     }
     const actorMatch = trimmed.match(/^actor\s+(.+)$/i);
     if (actorMatch) {
-      model.addActor(actorMatch[1].trim());
+      safeAddActor(actorMatch[1].trim());
       continue;
     }
     const msgMatch = trimmed.match(/^(.+?)\s*(-->>|->>|-->|->)\s*(.+?):\s*(.+)$/);
     if (msgMatch) {
-      const from = msgMatch[1].trim();
+      const from = safeAddActor(msgMatch[1].trim());
       const arrow = msgMatch[2];
-      const to = msgMatch[3].trim();
-      const label = msgMatch[4].trim();
-      model.addActor(from);
-      model.addActor(to);
+      const to = safeAddActor(msgMatch[3].trim());
+      const label = sanitizeLabel(msgMatch[4].trim());
+      if (messageCount >= MAX_MESSAGES)
+        throw new Error(`Import aborted: diagram exceeds the maximum of ${MAX_MESSAGES} messages`);
+      messageCount++;
       const messages = model.toJSON().messages ?? [];
-      model.addMessage({ id: nextId("m", messages), from, to, label, style: arrow.startsWith("--") ? "dashed" : "solid" });
+      model.addMessage({
+        id: nextId("m", messages),
+        from,
+        to,
+        label,
+        style: arrow.startsWith("--") ? "dashed" : "solid"
+      });
     }
   }
   return model;
 }
 function fromMermaid(mermaid) {
+  if (mermaid.length > MAX_IMPORT_LENGTH) {
+    throw new Error(`Import aborted: input exceeds the maximum of ${MAX_IMPORT_LENGTH} characters`);
+  }
   const cleaned = mermaid.replace(/mermaid\.initialize\([\s\S]*?\)\s*;?/g, "");
   const rawLines = cleaned.split("\n");
   let startIdx = 0;
@@ -1902,10 +2608,74 @@ function fromMermaid(mermaid) {
 }
 
 // src/importers/json.ts
+function stripDangerousKeys(obj) {
+  if (Array.isArray(obj)) return obj.map(stripDangerousKeys);
+  if (obj !== null && typeof obj === "object") {
+    const clean = {};
+    for (const [key, val] of Object.entries(obj)) {
+      if (key === "__proto__" || key === "constructor" || key === "prototype") continue;
+      clean[key] = stripDangerousKeys(val);
+    }
+    return clean;
+  }
+  return obj;
+}
 function fromJSON(json) {
-  const data = typeof json === "string" ? JSON.parse(json) : json;
-  if (!data.type || !Array.isArray(data.nodes) || !Array.isArray(data.edges)) {
-    throw new Error("Invalid DiagramModel JSON");
+  if (typeof json === "string" && json.length > MAX_IMPORT_LENGTH) {
+    throw new Error(`Import aborted: input exceeds the maximum of ${MAX_IMPORT_LENGTH} characters`);
+  }
+  const raw = typeof json === "string" ? JSON.parse(json) : json;
+  const data = stripDangerousKeys(raw);
+  if (typeof data !== "object" || data === null || Array.isArray(data)) {
+    throw new Error("Invalid DiagramModel JSON: expected an object");
+  }
+  if (data.type !== "flowchart" && data.type !== "sequence") {
+    throw new Error(`Invalid DiagramModel JSON: unknown type "${data.type}"`);
+  }
+  if (!Array.isArray(data.nodes) || !Array.isArray(data.edges)) {
+    throw new Error("Invalid DiagramModel JSON: nodes and edges must be arrays");
+  }
+  if (data.nodes.length > MAX_NODES) {
+    throw new Error(
+      `Import aborted: diagram has ${data.nodes.length} nodes, maximum is ${MAX_NODES}`
+    );
+  }
+  if (data.edges.length > MAX_EDGES) {
+    throw new Error(
+      `Import aborted: diagram has ${data.edges.length} edges, maximum is ${MAX_EDGES}`
+    );
+  }
+  if (data.actors && data.actors.length > MAX_ACTORS) {
+    throw new Error(
+      `Import aborted: diagram has ${data.actors.length} actors, maximum is ${MAX_ACTORS}`
+    );
+  }
+  if (data.messages && data.messages.length > MAX_MESSAGES) {
+    throw new Error(
+      `Import aborted: diagram has ${data.messages.length} messages, maximum is ${MAX_MESSAGES}`
+    );
+  }
+  for (const node of data.nodes) {
+    if (typeof node !== "object" || node === null || typeof node.id !== "string" || typeof node.label !== "string") {
+      throw new Error("Invalid DiagramModel JSON: each node must have string id and label");
+    }
+    node.label = sanitizeLabel(node.label);
+  }
+  for (const edge of data.edges) {
+    if (typeof edge !== "object" || edge === null || typeof edge.id !== "string" || typeof edge.from !== "string" || typeof edge.to !== "string") {
+      throw new Error("Invalid DiagramModel JSON: each edge must have string id, from, and to");
+    }
+    if (edge.label) edge.label = sanitizeLabel(edge.label);
+  }
+  if (data.actors) {
+    data.actors = data.actors.map((a) => typeof a === "string" ? sanitizeLabel(a) : a);
+  }
+  if (data.messages) {
+    for (const msg of data.messages) {
+      if (typeof msg === "object" && msg !== null && typeof msg.label === "string") {
+        msg.label = sanitizeLabel(msg.label);
+      }
+    }
   }
   return Model.fromData(data);
 }
@@ -1914,19 +2684,22 @@ function fromJSON(json) {
 function useImporter(applyAndPush, 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) {
-        reportError(`Imported diagram is not a ${expectedType} diagram.`);
-        return;
+  return (0, import_react8.useCallback)(
+    (text) => {
+      try {
+        const parsed = text.trim().startsWith("{") ? fromJSON(text).toJSON() : fromMermaid(text).toJSON();
+        if (expectedType && parsed.type !== expectedType) {
+          reportError(`Imported diagram is not a ${expectedType} diagram.`);
+          return;
+        }
+        applyAndPush(transform ? transform(parsed) : parsed);
+        onSuccess?.("Diagram imported successfully");
+      } catch (err) {
+        reportError(`Import failed: ${err.message}`);
       }
-      applyAndPush(transform ? transform(parsed) : parsed);
-      onSuccess?.("Diagram imported successfully");
-    } catch (err) {
-      reportError(`Import failed: ${err.message}`);
-    }
-  }, [applyAndPush, expectedType, transform, onSuccess, onError]);
+    },
+    [applyAndPush, expectedType, transform, onSuccess, onError]
+  );
 }
 
 // src/ui/hooks/useToast.ts
@@ -1964,7 +2737,10 @@ var containerStyle = {
   zIndex: 9999,
   pointerEvents: "none"
 };
-function ToastContainer({ toasts, onDismiss }) {
+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];
@@ -2195,7 +2971,10 @@ function SequenceEditor({
   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 { t, isDark } = useEditorTheme(theme, themeOverrides, {
+    light: lightTheme2,
+    dark: darkTheme2
+  });
   const actors = model.actors ?? [];
   const messages = model.messages ?? [];
   const colW = (0, import_react11.useMemo)(() => {
@@ -2217,11 +2996,14 @@ function SequenceEditor({
     historyRef.current = stack;
     historyIdxRef.current = stack.length - 1;
   }, []);
-  const applyAndPush = (0, import_react11.useCallback)((m) => {
-    setModel(m);
-    onChange?.(m);
-    pushHistory(m);
-  }, [onChange, pushHistory]);
+  const applyAndPush = (0, import_react11.useCallback)(
+    (m) => {
+      setModel(m);
+      onChange?.(m);
+      pushHistory(m);
+    },
+    [onChange, pushHistory]
+  );
   const undo = (0, import_react11.useCallback)(() => {
     if (historyIdxRef.current <= 0) return;
     historyIdxRef.current--;
@@ -2266,7 +3048,10 @@ function SequenceEditor({
       applyAndPush({
         ...model,
         actors: [...actors, a, b],
-        messages: [...messages, { id: nextId("m", messages), from: a, to: b, label: "message", style: "solid" }]
+        messages: [
+          ...messages,
+          { id: nextId("m", messages), from: a, to: b, label: "message", style: "solid" }
+        ]
       });
       return;
     }
@@ -2274,7 +3059,10 @@ function SequenceEditor({
     const to = actors[Math.min(1, actors.length - 1)] ?? from;
     applyAndPush({
       ...model,
-      messages: [...messages, { id: nextId("m", messages), from, to, label: "message", style: "solid" }]
+      messages: [
+        ...messages,
+        { id: nextId("m", messages), from, to, label: "message", style: "solid" }
+      ]
     });
   };
   const updateMessage = (id, patch) => {
@@ -2287,37 +3075,57 @@ function SequenceEditor({
     applyAndPush({ ...model, messages: messages.filter((m) => m.id !== id) });
     if (selected === id) setSelected(null);
   };
-  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();
-    const [moved] = next.splice(fromIdx, 1);
-    next.splice(toIdx, 0, moved);
-    applyAndPush({ ...model, messages: next });
-  }, [messages, model, applyAndPush]);
+  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();
+      const [moved] = next.splice(fromIdx, 1);
+      next.splice(toIdx, 0, moved);
+      applyAndPush({ ...model, messages: next });
+    },
+    [messages, model, applyAndPush]
+  );
   const keyCommands = [
-    { match: (e) => (e.ctrlKey || e.metaKey) && e.key === "z", run: () => {
-      undo();
-      return true;
-    } },
-    { match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z"), run: () => {
-      redo();
-      return true;
-    } },
-    { match: (e) => e.key === "Escape", run: () => {
-      setSelected(null);
-      setEditingId(null);
-      return true;
-    } },
-    { match: (e) => (e.key === "Delete" || e.key === "Backspace") && !!selected, run: () => {
-      removeMessage(selected);
-      return true;
-    } }
-  ];
-  useEditorKeyboard(keyCommands, [undo, redo, selected]);
-  const handleExport = useExporters(model, onExport, "sequence", (msg) => showToast(msg, "success"));
-  const handleImport = useImporter(applyAndPush, {
-    expectedType: "sequence",
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && e.key === "z",
+      run: () => {
+        undo();
+        return true;
+      }
+    },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z"),
+      run: () => {
+        redo();
+        return true;
+      }
+    },
+    {
+      match: (e) => e.key === "Escape",
+      run: () => {
+        setSelected(null);
+        setEditingId(null);
+        return true;
+      }
+    },
+    {
+      match: (e) => (e.key === "Delete" || e.key === "Backspace") && !!selected,
+      run: () => {
+        removeMessage(selected);
+        return true;
+      }
+    }
+  ];
+  useEditorKeyboard(keyCommands, [undo, redo, selected]);
+  const handleExport = useExporters(
+    model,
+    onExport,
+    "sequence",
+    (msg) => showToast(msg, "success")
+  );
+  const handleImport = useImporter(applyAndPush, {
+    expectedType: "sequence",
     transform: ensureSequenceModel,
     onSuccess: (msg) => showToast(msg, "success"),
     onError: (msg) => showToast(msg, "error")
@@ -2360,17 +3168,22 @@ function SequenceEditor({
     };
   }, [drag, messages.length, reorderMessage]);
   const selectedMsg = selected ? messages.find((m) => m.id === selected) : null;
-  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,
-    position: "relative"
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToastContainer, { toasts, onDismiss: dismissToast }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("style", { children: `
+  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,
+        position: "relative"
+      },
+      children: [
+        /* @__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;
@@ -2382,139 +3195,202 @@ function SequenceEditor({
           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",
-      background: t.ctrlsBg,
-      borderBottom: `1px solid ${t.ctrlsBorder}`,
-      alignItems: "center",
-      flexWrap: "wrap"
-    }, 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",
-        " \xB7 ",
-        messages.length,
-        " message",
-        messages.length === 1 ? "" : "s",
-        " \xB7 drag a row to reorder"
-      ] })
-    ] }),
-    /* @__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,
-          actors,
-          messages,
-          t,
-          isDark,
-          colW,
-          totalW,
-          totalH,
-          actorX,
-          msgY,
-          selected,
-          editingId,
-          setEditingId,
-          drag,
-          onRowMouseDown,
-          renameActor,
-          removeActor,
-          svgRef
-        }
-      ) }),
-      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_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",
+          Toolbar,
           {
-            value: editLabel || selectedMsg.label,
-            onChange: (e) => setEditLabel(e.target.value),
-            onFocus: () => setEditLabel(selectedMsg.label),
-            onBlur: () => {
-              if (editLabel && editLabel !== selectedMsg.label) updateMessage(selectedMsg.id, { label: editLabel });
-              setEditLabel("");
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter") e.target.blur();
-            },
-            style: input(t)
+            onExport: handleExport,
+            onImport: allowImport ? handleImport : void 0,
+            allowedExports,
+            allowImport
           }
         ),
-        /* @__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",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
           {
-            onClick: () => updateMessage(selectedMsg.id, { style: s2 }),
             style: {
-              flex: 1,
-              padding: "6px 10px",
-              border: `1.5px solid ${selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO2 : t.inputBorder}`,
-              background: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO_SOFT2 : t.inputBg,
-              color: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO2 : t.textPrimary,
-              borderRadius: 8,
-              fontSize: 12,
-              fontWeight: 600,
-              cursor: "pointer",
-              fontFamily: "inherit"
+              display: "flex",
+              gap: 8,
+              padding: "7px 14px",
+              background: t.ctrlsBg,
+              borderBottom: `1px solid ${t.ctrlsBorder}`,
+              alignItems: "center",
+              flexWrap: "wrap"
             },
-            children: s2 === "solid" ? "\u2500\u2500 solid" : "\u2500 \u2500 dashed"
-          },
-          s2
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 14 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "button",
+            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",
+                " \xB7 ",
+                messages.length,
+                " message",
+                messages.length === 1 ? "" : "s",
+                " \xB7 drag a row to reorder"
+              ] })
+            ]
+          }
+        ),
+        /* @__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,
+              actors,
+              messages,
+              t,
+              isDark,
+              colW,
+              totalW,
+              totalH,
+              actorX,
+              msgY,
+              selected,
+              editingId,
+              setEditingId,
+              drag,
+              onRowMouseDown,
+              renameActor,
+              removeActor,
+              svgRef
+            }
+          ) }),
+          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_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,
+                    onChange: (e) => setEditLabel(e.target.value),
+                    onFocus: () => setEditLabel(selectedMsg.label),
+                    onBlur: () => {
+                      if (editLabel && editLabel !== selectedMsg.label)
+                        updateMessage(selectedMsg.id, { label: editLabel });
+                      setEditLabel("");
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") e.target.blur();
+                    },
+                    style: input(t)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { t, children: "From" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "select",
+                  {
+                    value: selectedMsg.from,
+                    onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }),
+                    style: input(t),
+                    children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: a, children: a }, a))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { t, children: "To" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "select",
+                  {
+                    value: selectedMsg.to,
+                    onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }),
+                    style: input(t),
+                    children: actors.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: a, children: a }, a))
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Label, { t, children: "Style" }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "button",
+                  {
+                    onClick: () => updateMessage(selectedMsg.id, { style: s2 }),
+                    style: {
+                      flex: 1,
+                      padding: "6px 10px",
+                      border: `1.5px solid ${selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO2 : t.inputBorder}`,
+                      background: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO_SOFT2 : t.inputBg,
+                      color: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO2 : t.textPrimary,
+                      borderRadius: 8,
+                      fontSize: 12,
+                      fontWeight: 600,
+                      cursor: "pointer",
+                      fontFamily: "inherit"
+                    },
+                    children: s2 === "solid" ? "\u2500\u2500 solid" : "\u2500 \u2500 dashed"
+                  },
+                  s2
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { height: 14 } }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "button",
+                  {
+                    onClick: () => removeMessage(selectedMsg.id),
+                    style: {
+                      ...ghostBtn2(t),
+                      width: "100%",
+                      color: "#ef4444",
+                      border: `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}`
+                    },
+                    children: "Delete message"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
           {
-            onClick: () => removeMessage(selectedMsg.id),
-            style: { ...ghostBtn2(t), width: "100%", color: "#ef4444", border: `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}` },
-            children: "Delete message"
+            style: {
+              padding: "4px 14px",
+              fontSize: 11,
+              color: t.textMuted,
+              background: t.canvas,
+              borderTop: `1px solid ${t.ctrlsBorder}`,
+              display: "flex",
+              gap: 16
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+                actors.length,
+                " actors"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+                messages.length,
+                " messages"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
+            ]
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: {
-      padding: "4px 14px",
-      fontSize: 11,
-      color: t.textMuted,
-      background: t.canvas,
-      borderTop: `1px solid ${t.ctrlsBorder}`,
-      display: "flex",
-      gap: 16
-    }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-        actors.length,
-        " actors"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
-        messages.length,
-        " messages"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
-    ] })
-  ] });
+      ]
+    }
+  );
 }
 function primaryBtn() {
   return {
@@ -2558,7 +3434,20 @@ function input(t) {
   };
 }
 function Label({ t, 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 });
+  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
@@ -2590,163 +3479,286 @@ function NodeNavigator({
         return "\u25AD";
     }
   };
-  const filtered = model.nodes.filter(
-    (n) => n.label.toLowerCase().includes(search.toLowerCase())
-  );
+  const filtered = model.nodes.filter((n) => n.label.toLowerCase().includes(search.toLowerCase()));
   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_runtime7.jsxs)("div", { style: {
-      width: 36,
-      flexShrink: 0,
-      background: t.panelBg,
-      borderRight: `1px solid ${t.panelBorder}`,
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      paddingTop: 8,
-      gap: 6
-    }, children: [
-      /* @__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_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_runtime7.jsxs)(
+      "div",
+      {
+        style: {
+          width: 36,
+          flexShrink: 0,
+          background: t.panelBg,
+          borderRight: `1px solid ${t.panelBorder}`,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          paddingTop: 8,
+          gap: 6
+        },
+        children: [
+          /* @__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_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_runtime7.jsxs)("div", { style: {
-    width: 216,
-    flexShrink: 0,
-    background: t.panelBg,
-    borderRight: `1px solid ${t.panelBorder}`,
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden"
-  }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      padding: "10px 12px",
-      borderBottom: `1px solid ${t.panelBorder}`,
-      flexShrink: 0
-    }, children: [
-      /* @__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,
-          background: isDark ? "#0f172a" : "#f1f5f9",
-          padding: "1px 6px",
-          borderRadius: 99
-        }, children: model.nodes.length })
-      ] }),
-      /* @__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_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,
-          onChange: (e) => setSearch(e.target.value),
-          placeholder: "Search\u2026",
-          style: {
-            width: "100%",
-            padding: "5px 8px 5px 24px",
-            border: `1.5px solid ${t.inputBorder}`,
-            borderRadius: 7,
-            fontSize: 12,
-            background: t.inputBg,
-            color: t.inputText,
-            outline: "none",
-            boxSizing: "border-box",
-            fontFamily: "inherit"
-          }
-        }
-      )
-    ] }) }),
-    /* @__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_runtime7.jsxs)(
-          "button",
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      style: {
+        width: 216,
+        flexShrink: 0,
+        background: t.panelBg,
+        borderRight: `1px solid ${t.panelBorder}`,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
           {
-            onClick: () => onSelect(node.id),
             style: {
               display: "flex",
               alignItems: "center",
-              gap: 8,
-              width: "100%",
-              padding: "7px 8px",
-              textAlign: "left",
-              background: isSelected ? acc.fill : "transparent",
-              border: isSelected ? `1.5px solid ${acc.border}` : "1.5px solid transparent",
-              borderRadius: 8,
-              cursor: "pointer",
-              fontFamily: "inherit",
-              transition: "background 0.1s"
-            },
-            onMouseEnter: (e) => {
-              if (!isSelected) e.currentTarget.style.background = isDark ? "#334155" : "#f1f5f9";
-            },
-            onMouseLeave: (e) => {
-              if (!isSelected) e.currentTarget.style.background = "transparent";
+              justifyContent: "space-between",
+              padding: "10px 12px",
+              borderBottom: `1px solid ${t.panelBorder}`,
+              flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: {
-                width: 22,
-                height: 22,
-                borderRadius: 6,
-                flexShrink: 0,
-                background: isSelected ? acc.color : isDark ? "#334155" : "#e2e8f0",
-                color: isSelected ? "#fff" : t.textMuted,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: variant === "journey" ? 9 : 11,
-                fontWeight: 700
-              }, children: variant === "journey" ? idx + 1 : shapeIcon(node) }),
-              /* @__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,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  lineHeight: 1.3
-                }, children: node.label }),
-                /* @__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` })
+              /* @__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,
+                      background: isDark ? "#0f172a" : "#f1f5f9",
+                      padding: "1px 6px",
+                      borderRadius: 99
+                    },
+                    children: model.nodes.length
+                  }
+                )
               ] }),
-              isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
+              /* @__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"
+                }
+              )
             ]
-          },
-          node.id
-        );
-      })
-    ] })
-  ] });
+          }
+        ),
+        /* @__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,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: "Search\u2026",
+                  style: {
+                    width: "100%",
+                    padding: "5px 8px 5px 24px",
+                    border: `1.5px solid ${t.inputBorder}`,
+                    borderRadius: 7,
+                    fontSize: 12,
+                    background: t.inputBg,
+                    color: t.inputText,
+                    outline: "none",
+                    boxSizing: "border-box",
+                    fontFamily: "inherit"
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__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_runtime7.jsxs)(
+                  "button",
+                  {
+                    onClick: () => onSelect(node.id),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 8,
+                      width: "100%",
+                      padding: "7px 8px",
+                      textAlign: "left",
+                      background: isSelected ? acc.fill : "transparent",
+                      border: isSelected ? `1.5px solid ${acc.border}` : "1.5px solid transparent",
+                      borderRadius: 8,
+                      cursor: "pointer",
+                      fontFamily: "inherit",
+                      transition: "background 0.1s"
+                    },
+                    onMouseEnter: (e) => {
+                      if (!isSelected)
+                        e.currentTarget.style.background = isDark ? "#334155" : "#f1f5f9";
+                    },
+                    onMouseLeave: (e) => {
+                      if (!isSelected) e.currentTarget.style.background = "transparent";
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: 22,
+                            height: 22,
+                            borderRadius: 6,
+                            flexShrink: 0,
+                            background: isSelected ? acc.color : isDark ? "#334155" : "#e2e8f0",
+                            color: isSelected ? "#fff" : t.textMuted,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: variant === "journey" ? 9 : 11,
+                            fontWeight: 700
+                          },
+                          children: variant === "journey" ? idx + 1 : shapeIcon(node)
+                        }
+                      ),
+                      /* @__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,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                              lineHeight: 1.3
+                            },
+                            children: node.label
+                          }
+                        ),
+                        /* @__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_runtime7.jsx)("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
+                    ]
+                  },
+                  node.id
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/ui/render.tsx
@@ -2821,18 +3833,55 @@ var STYLE_LABEL = { pointerEvents: "none", userSelect: "none" };
 var STYLE_BLUR = { filter: "blur(4px)" };
 var STYLE_EDGE_HIT = { cursor: "pointer" };
 var STYLE_NO_EVENTS = { pointerEvents: "none" };
-var STYLE_PORT_HOVER = { cursor: "crosshair", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.18))" };
-var STYLE_WAYPOINT = { cursor: "grab", filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))" };
+var STYLE_PORT_HOVER = {
+  cursor: "crosshair",
+  filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.18))"
+};
+var STYLE_WAYPOINT = {
+  cursor: "grab",
+  filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.25))"
+};
 var STYLE_EDGE_LABEL_HIT = { cursor: "text" };
-function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
+function NodeShape({
+  node,
+  selected,
+  variant,
+  stepNumber,
+  t,
+  isDark,
+  w
+}) {
   const acc = variantAccent(variant, isDark);
   const cx = w / 2, cy = NODE_H2 / 2;
   const stroke = selected ? acc.color : t.nodeStroke;
   const fill = selected ? t.nodeSelectedFill : t.nodeFill;
   const sw = selected ? 1.75 : 1.25;
   const glow = selected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: node.shape === "circle" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
+    /* @__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",
@@ -2889,39 +3938,98 @@ function NodeShape({ node, selected, variant, stepNumber, t, isDark, w }) {
   const badgeColor = isDark ? ACCENT.emeraldDark : ACCENT.emerald;
   const badge = variant === "journey" && stepNumber !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: 14, y: 18, textAnchor: "middle", fontSize: 9, fill: "white", fontWeight: "700", style: STYLE_LABEL, children: stepNumber })
+    /* @__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_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_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_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_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_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         glow,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: w, height: NODE_H2, rx: 14, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "rect",
+          {
+            width: w,
+            height: NODE_H2,
+            rx: 14,
+            fill,
+            stroke,
+            strokeWidth: sw,
+            filter: "url(#nodeShadow)"
+          }
+        ),
         badge
       ] });
   }
 }
 var ANSWER_LETTERS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
+function QuestionNode({
+  node,
+  selected,
+  edges,
+  isDark,
+  onAnswerPortDown,
+  qW
+}) {
   const answers = node.metadata?.answers ?? [];
   const totalH = questionNodeH2(answers);
   const amber = isDark ? ACCENT.amberDark : ACCENT.amber;
@@ -2969,27 +4077,91 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
     glow,
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "rect",
+      {
+        width: qW,
+        height: totalH,
+        rx: 14,
+        fill: nodeBg,
+        stroke: nodeBorder,
+        strokeWidth: selected ? 2 : 1.5,
+        filter: "url(#nodeShadow)"
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "text",
       {
+        x: 26,
+        y: 33,
+        textAnchor: "middle",
+        fontSize: 15,
+        fontWeight: "900",
+        fill: "white",
         style: STYLE_LABEL,
-        fontFamily: "ui-sans-serif,system-ui,sans-serif",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
-        ]
+        children: "?"
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("text", { style: STYLE_LABEL, fontFamily: "ui-sans-serif,system-ui,sans-serif", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "tspan",
+        {
+          x: 50,
+          y: 27,
+          fontSize: 9,
+          fontWeight: 700,
+          fill: textSub,
+          letterSpacing: 0.6,
+          textAnchor: "start",
+          children: "QUESTION"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "tspan",
+        {
+          x: 50,
+          dy: 15,
+          fontSize: 13,
+          fontWeight: 700,
+          fill: selected ? amber : textMain,
+          textAnchor: "start",
+          children: node.label
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
     answers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 22, textAnchor: "middle", fontSize: 10, fill: amber, opacity: 0.4, fontWeight: 600, style: STYLE_LABEL, children: "No answers yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("text", { x: qW / 2, y: Q_BASE_H2 + 36, textAnchor: "middle", fontSize: 9, fill: textSub, opacity: 0.7, style: STYLE_LABEL, children: "Open panel \u2192 Add Answer" })
+      /* @__PURE__ */ (0, import_jsx_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);
@@ -3083,7 +4255,22 @@ function QuestionNode({ node, selected, edges, isDark, onAnswerPortDown, qW }) {
     })
   ] });
 }
-function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, onEditChange, onEditCommit, onEditCancel, onDoubleClick, onContextMenu, onWaypointDown }) {
+function EdgeLine({
+  edge,
+  nodes,
+  variant,
+  t,
+  isDark,
+  acc,
+  editing,
+  editValue,
+  onEditChange,
+  onEditCommit,
+  onEditCancel,
+  onDoubleClick,
+  onContextMenu,
+  onWaypointDown
+}) {
   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);
@@ -3287,13 +4474,13 @@ function Minimap({
     x: (mx - offsetX) / scale,
     y: (my - offsetY) / scale
   });
-  const panTo = (0, import_react14.useCallback)((e) => {
+  const panTo = (e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     const mx = e.clientX - rect.left;
     const my = e.clientY - rect.top;
     const { x, y } = unproject(mx, my);
     onCenterOn(x, y);
-  }, [onCenterOn, scale, offsetX, offsetY]);
+  };
   const onMouseDown = (e) => {
     e.stopPropagation();
     dragRef.current = { active: true };
@@ -3480,29 +4667,106 @@ function ContextMenu({
         fontFamily: "ui-sans-serif,system-ui,sans-serif"
       },
       children: edgeId ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Edge" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            style: {
+              padding: "4px 14px 6px",
+              fontSize: 10,
+              fontWeight: 700,
+              color: muted,
+              textTransform: "uppercase",
+              letterSpacing: 0.8
+            },
+            children: "Edge"
+          }
+        ),
         item("Rename label (dbl-click)", () => onEdgeRename?.()),
         divider2,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Style" }),
-        item(`Solid${currentEdgeStyle === "solid" || !currentEdgeStyle ? " \u2713" : ""}`, () => onEdgeStyle?.("solid")),
-        item(`Dashed${currentEdgeStyle === "dashed" ? " \u2713" : ""}`, () => onEdgeStyle?.("dashed")),
-        item(`Dotted${currentEdgeStyle === "dotted" ? " \u2713" : ""}`, () => onEdgeStyle?.("dotted")),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            style: {
+              padding: "4px 14px 2px",
+              fontSize: 9,
+              fontWeight: 700,
+              color: muted,
+              textTransform: "uppercase",
+              letterSpacing: 0.8
+            },
+            children: "Style"
+          }
+        ),
+        item(
+          `Solid${currentEdgeStyle === "solid" || !currentEdgeStyle ? " \u2713" : ""}`,
+          () => onEdgeStyle?.("solid")
+        ),
+        item(
+          `Dashed${currentEdgeStyle === "dashed" ? " \u2713" : ""}`,
+          () => onEdgeStyle?.("dashed")
+        ),
+        item(
+          `Dotted${currentEdgeStyle === "dotted" ? " \u2713" : ""}`,
+          () => onEdgeStyle?.("dotted")
+        ),
         divider2,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "4px 14px 2px", fontSize: 9, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Arrowhead" }),
-        item(`Arrow${currentEdgeArrow !== "none" ? " \u2713" : ""}`, () => onEdgeArrowhead?.("arrow")),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            style: {
+              padding: "4px 14px 2px",
+              fontSize: 9,
+              fontWeight: 700,
+              color: muted,
+              textTransform: "uppercase",
+              letterSpacing: 0.8
+            },
+            children: "Arrowhead"
+          }
+        ),
+        item(
+          `Arrow${currentEdgeArrow !== "none" ? " \u2713" : ""}`,
+          () => onEdgeArrowhead?.("arrow")
+        ),
         item(`None${currentEdgeArrow === "none" ? " \u2713" : ""}`, () => onEdgeArrowhead?.("none")),
         divider2,
         item("Reset routing", () => onEdgeResetRouting?.(), void 0, !edgeHasWaypoint),
         item("Delete edge", () => onEdgeDelete?.(), "#ef4444")
       ] }) : nodeId ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Node" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            style: {
+              padding: "4px 14px 6px",
+              fontSize: 10,
+              fontWeight: 700,
+              color: muted,
+              textTransform: "uppercase",
+              letterSpacing: 0.8
+            },
+            children: "Node"
+          }
+        ),
         item("Rename (dbl-click)", onRename),
         item("Duplicate", onDuplicate),
         item("Disconnect all edges", onDisconnect),
         divider2,
         item("Delete node", onDelete, "#ef4444")
       ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Canvas" }),
+        /* @__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,
@@ -3519,8 +4783,20 @@ var STYLE_LABEL2 = { pointerEvents: "none", userSelect: "none" };
 var STYLE_LIVE_PORT = { opacity: 0.85, pointerEvents: "none" };
 var STYLE_NODE_GRAB = { cursor: "grab" };
 var STYLE_NODE_GRABBING = { cursor: "grabbing" };
-var STYLE_PORT_VISIBLE = { cursor: "crosshair", opacity: 1, transition: "opacity 0.15s", pointerEvents: "all", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))" };
-var STYLE_PORT_HIDDEN = { cursor: "crosshair", opacity: 0, transition: "opacity 0.15s", pointerEvents: "none", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))" };
+var STYLE_PORT_VISIBLE = {
+  cursor: "crosshair",
+  opacity: 1,
+  transition: "opacity 0.15s",
+  pointerEvents: "all",
+  filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))"
+};
+var STYLE_PORT_HIDDEN = {
+  cursor: "crosshair",
+  opacity: 0,
+  transition: "opacity 0.15s",
+  pointerEvents: "none",
+  filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))"
+};
 function DiagramCanvas(props) {
   const {
     model,
@@ -3591,25 +4867,35 @@ function DiagramCanvas(props) {
     onCtxEdgeDelete,
     onCtxEdgeResetRouting
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "svg",
-      {
-        ref: svgRef,
-        width: "100%",
-        height: "100%",
-        role: "application",
-        "aria-label": `${variantLabel} diagram editor. ${model.nodes.length} ${variantLabel.toLowerCase()}s, ${model.edges.length} connections. Scroll to zoom, drag to pan, click a ${variantLabel.toLowerCase()} to select.`,
-        tabIndex: 0,
-        style: { display: "block", cursor: pan ? "grabbing" : drag ? "grabbing" : liveEdge ? "crosshair" : "default", userSelect: "none", outline: "none" },
-        onMouseDown: onSvgMouseDown,
-        onMouseMove,
-        onMouseUp,
-        onMouseLeave: onMouseUp,
-        onContextMenu: onSvgContextMenu,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: reducedMotion ? `
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "svg",
+          {
+            ref: svgRef,
+            width: "100%",
+            height: "100%",
+            role: "application",
+            "aria-label": `${variantLabel} diagram editor. ${model.nodes.length} ${variantLabel.toLowerCase()}s, ${model.edges.length} connections. Scroll to zoom, drag to pan, click a ${variantLabel.toLowerCase()} to select.`,
+            tabIndex: 0,
+            style: {
+              display: "block",
+              cursor: pan ? "grabbing" : drag ? "grabbing" : liveEdge ? "crosshair" : "default",
+              userSelect: "none",
+              outline: "none"
+            },
+            onMouseDown: onSvgMouseDown,
+            onMouseMove,
+            onMouseUp,
+            onMouseLeave: onMouseUp,
+            onContextMenu: onSvgContextMenu,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: reducedMotion ? `
             .edge-flow { stroke-dasharray: 0; }
             .edge-flow-amber { stroke-dasharray: 0; }
             .edge-live { stroke-dasharray: 4 4; }
@@ -3620,217 +4906,351 @@ 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_runtime11.jsx)("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
-            model.edges.map((e) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              EdgeLine,
-              {
-                edge: e,
-                nodes: model.nodes,
-                variant,
-                t,
-                isDark,
-                acc,
-                editing: editingEdgeId === e.id,
-                editValue: editEdgeLabel,
-                onEditChange: setEditEdgeLabel,
-                onEditCommit: commitEdgeEdit,
-                onEditCancel: () => setEditingEdgeId(null),
-                onDoubleClick: beginEditEdge,
-                onContextMenu: onEdgeContextMenu,
-                onWaypointDown: (ev, edgeId) => setWaypointDrag(edgeId)
-              },
-              e.id
-            )),
-            liveEdge && (() => {
-              const d = bezierPath2(liveEdge.fromX, liveEdge.fromY, liveEdge.toX, liveEdge.toY, liveEdge.exitDir);
-              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
-            })(),
-            alignGuides?.x && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "line",
-              {
-                x1: alignGuides.x.pos,
-                x2: alignGuides.x.pos,
-                y1: alignGuides.x.minY,
-                y2: alignGuides.x.maxY,
-                stroke: acc.color,
-                strokeWidth: 1 / transform.scale,
-                strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
-                opacity: 0.85,
-                pointerEvents: "none"
-              }
-            ),
-            alignGuides?.y && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-              "line",
-              {
-                y1: alignGuides.y.pos,
-                y2: alignGuides.y.pos,
-                x1: alignGuides.y.minX,
-                x2: alignGuides.y.maxX,
-                stroke: acc.color,
-                strokeWidth: 1 / transform.scale,
-                strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
-                opacity: 0.85,
-                pointerEvents: "none"
-              }
-            ),
-            model.nodes.map((node, idx) => {
-              const isHovered = hoveredId === node.id;
-              const isQuestion2 = variant === "question";
-              const { w: nW } = nodeDims(node, variant);
-              const isSelected = selectedSet.has(node.id);
-              return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "g",
-                {
-                  transform: `translate(${node.x ?? 0},${node.y ?? 0})`,
-                  role: "button",
-                  tabIndex: 0,
-                  "aria-label": `${variantLabel} ${variant === "journey" ? idx + 1 + ": " : ""}${node.label}${isSelected ? ", selected" : ""}`,
-                  style: drag?.nodeId === node.id ? STYLE_NODE_GRABBING : STYLE_NODE_GRAB,
-                  onMouseDown: (e) => onNodeMouseDown(e, node.id),
-                  onMouseUp: (e) => onNodeMouseUp(e, node.id),
-                  onDoubleClick: (e) => onNodeDblClick(e, node.id),
-                  onContextMenu: (e) => onNodeContextMenu(e, node.id),
-                  onMouseEnter: () => setHoveredId(node.id),
-                  onMouseLeave: () => setHoveredId(null),
-                  onFocus: () => setHoveredId(node.id),
-                  onBlur: () => setHoveredId(null),
-                  onKeyDown: (e) => {
-                    if (e.key === "F2" || e.key === "Enter" && !e.ctrlKey && !e.metaKey) {
-                      e.preventDefault();
-                      setEditingId(node.id);
-                      setEditLabel(node.label);
-                    }
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: `${variantLabel}: ${node.label}` }),
-                    isQuestion2 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
-                      editingId === node.id ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                        "input",
-                        {
-                          autoFocus: true,
-                          value: editLabel,
-                          onChange: (e) => setEditLabel(e.target.value),
-                          onBlur: commitEdit,
-                          onKeyDown: (e) => {
-                            if (e.key === "Enter") commitEdit();
-                            if (e.key === "Escape") setEditingId(null);
-                          },
-                          style: { width: "100%", height: "100%", border: "none", borderRadius: 6, outline: `2px solid ${acc.color}`, textAlign: "center", fontSize: 13, fontWeight: 500, background: t.inputBg, boxSizing: "border-box", padding: "0 6px", fontFamily: "inherit", color: t.inputText }
-                        }
-                      ) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("text", { x: nW / 2, y: NODE_H2 / 2 + 5, textAnchor: "middle", fontSize: 13, fontWeight: "500", fontFamily: "ui-sans-serif,system-ui,sans-serif", fill: isSelected ? acc.color : t.textPrimary, style: STYLE_LABEL2, children: node.label }),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                        "circle",
-                        {
-                          cx: nW / 2,
-                          cy: NODE_H2 + 1,
-                          r: portR,
-                          fill: acc.color,
-                          stroke: isDark ? "#0f172a" : "white",
-                          strokeWidth: 2,
-                          style: isHovered || isCoarse ? STYLE_PORT_VISIBLE : STYLE_PORT_HIDDEN,
-                          onMouseDown: (e) => onPortMouseDown(e, node.id)
-                        }
-                      )
-                    ] }),
-                    liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: nW / 2, cy: -1, r: portR, fill: acc.color, stroke: isDark ? "#0f172a" : "white", strokeWidth: 2, style: STYLE_LIVE_PORT })
-                  ]
-                },
-                node.id
-              );
-            })
-          ] })
-        ]
-      }
-    ),
-    boxSel && Math.abs(boxSel.cx - boxSel.sx) + Math.abs(boxSel.cy - boxSel.sy) > 4 && containerRef.current && (() => {
-      const rect = containerRef.current.getBoundingClientRect();
-      const left = Math.min(boxSel.sx, boxSel.cx) - rect.left;
-      const top = Math.min(boxSel.sy, boxSel.cy) - rect.top;
-      const w = Math.abs(boxSel.cx - boxSel.sx);
-      const h = Math.abs(boxSel.cy - boxSel.sy);
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left,
-            top,
-            width: w,
-            height: h,
-            border: `1px dashed ${acc.color}`,
-            background: isDark ? "rgba(99,102,241,0.10)" : "rgba(99,102,241,0.08)",
-            pointerEvents: "none",
-            borderRadius: 4
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowClr, floodOpacity: "1" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "marker",
+                  {
+                    id: "arrowhead",
+                    markerWidth: "9",
+                    markerHeight: "7",
+                    refX: "8",
+                    refY: "3.5",
+                    orient: "auto",
+                    markerUnits: "strokeWidth",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowClr })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "marker",
+                  {
+                    id: "arrowAmber",
+                    markerWidth: "9",
+                    markerHeight: "7",
+                    refX: "8",
+                    refY: "3.5",
+                    orient: "auto",
+                    markerUnits: "strokeWidth",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "marker",
+                  {
+                    id: "arrowLive",
+                    markerWidth: "9",
+                    markerHeight: "7",
+                    refX: "8",
+                    refY: "3.5",
+                    orient: "auto",
+                    markerUnits: "strokeWidth",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
+                model.edges.map((e) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  EdgeLine,
+                  {
+                    edge: e,
+                    nodes: model.nodes,
+                    variant,
+                    t,
+                    isDark,
+                    acc,
+                    editing: editingEdgeId === e.id,
+                    editValue: editEdgeLabel,
+                    onEditChange: setEditEdgeLabel,
+                    onEditCommit: commitEdgeEdit,
+                    onEditCancel: () => setEditingEdgeId(null),
+                    onDoubleClick: beginEditEdge,
+                    onContextMenu: onEdgeContextMenu,
+                    onWaypointDown: (ev, edgeId) => setWaypointDrag(edgeId)
+                  },
+                  e.id
+                )),
+                liveEdge && (() => {
+                  const d = bezierPath2(
+                    liveEdge.fromX,
+                    liveEdge.fromY,
+                    liveEdge.toX,
+                    liveEdge.toY,
+                    liveEdge.exitDir
+                  );
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "path",
+                    {
+                      d,
+                      fill: "none",
+                      stroke: acc.color,
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      className: "edge-live",
+                      opacity: 0.8,
+                      markerEnd: "url(#arrowLive)"
+                    }
+                  );
+                })(),
+                alignGuides?.x && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "line",
+                  {
+                    x1: alignGuides.x.pos,
+                    x2: alignGuides.x.pos,
+                    y1: alignGuides.x.minY,
+                    y2: alignGuides.x.maxY,
+                    stroke: acc.color,
+                    strokeWidth: 1 / transform.scale,
+                    strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
+                    opacity: 0.85,
+                    pointerEvents: "none"
+                  }
+                ),
+                alignGuides?.y && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "line",
+                  {
+                    y1: alignGuides.y.pos,
+                    y2: alignGuides.y.pos,
+                    x1: alignGuides.y.minX,
+                    x2: alignGuides.y.maxX,
+                    stroke: acc.color,
+                    strokeWidth: 1 / transform.scale,
+                    strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
+                    opacity: 0.85,
+                    pointerEvents: "none"
+                  }
+                ),
+                model.nodes.map((node, idx) => {
+                  const isHovered = hoveredId === node.id;
+                  const isQuestion2 = variant === "question";
+                  const { w: nW } = nodeDims(node, variant);
+                  const isSelected = selectedSet.has(node.id);
+                  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    "g",
+                    {
+                      transform: `translate(${node.x ?? 0},${node.y ?? 0})`,
+                      role: "button",
+                      tabIndex: 0,
+                      "aria-label": `${variantLabel} ${variant === "journey" ? idx + 1 + ": " : ""}${node.label}${isSelected ? ", selected" : ""}`,
+                      style: drag?.nodeId === node.id ? STYLE_NODE_GRABBING : STYLE_NODE_GRAB,
+                      onMouseDown: (e) => onNodeMouseDown(e, node.id),
+                      onMouseUp: (e) => onNodeMouseUp(e, node.id),
+                      onDoubleClick: (e) => onNodeDblClick(e, node.id),
+                      onContextMenu: (e) => onNodeContextMenu(e, node.id),
+                      onMouseEnter: () => setHoveredId(node.id),
+                      onMouseLeave: () => setHoveredId(null),
+                      onFocus: () => setHoveredId(node.id),
+                      onBlur: () => setHoveredId(null),
+                      onKeyDown: (e) => {
+                        if (e.key === "F2" || e.key === "Enter" && !e.ctrlKey && !e.metaKey) {
+                          e.preventDefault();
+                          setEditingId(node.id);
+                          setEditLabel(node.label);
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("title", { children: `${variantLabel}: ${node.label}` }),
+                        isQuestion2 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          QuestionNode,
+                          {
+                            node,
+                            selected: isSelected,
+                            edges: model.edges,
+                            isDark,
+                            onAnswerPortDown,
+                            qW: nW
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            NodeShape,
+                            {
+                              node,
+                              selected: isSelected,
+                              variant,
+                              stepNumber: variant === "journey" ? idx + 1 : void 0,
+                              t,
+                              isDark,
+                              w: nW
+                            }
+                          ),
+                          editingId === node.id ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            "input",
+                            {
+                              autoFocus: true,
+                              value: editLabel,
+                              onChange: (e) => setEditLabel(e.target.value),
+                              onBlur: commitEdit,
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter") commitEdit();
+                                if (e.key === "Escape") setEditingId(null);
+                              },
+                              style: {
+                                width: "100%",
+                                height: "100%",
+                                border: "none",
+                                borderRadius: 6,
+                                outline: `2px solid ${acc.color}`,
+                                textAlign: "center",
+                                fontSize: 13,
+                                fontWeight: 500,
+                                background: t.inputBg,
+                                boxSizing: "border-box",
+                                padding: "0 6px",
+                                fontFamily: "inherit",
+                                color: t.inputText
+                              }
+                            }
+                          ) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            "text",
+                            {
+                              x: nW / 2,
+                              y: NODE_H2 / 2 + 5,
+                              textAnchor: "middle",
+                              fontSize: 13,
+                              fontWeight: "500",
+                              fontFamily: "ui-sans-serif,system-ui,sans-serif",
+                              fill: isSelected ? acc.color : t.textPrimary,
+                              style: STYLE_LABEL2,
+                              children: node.label
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            "circle",
+                            {
+                              cx: nW / 2,
+                              cy: NODE_H2 + 1,
+                              r: portR,
+                              fill: acc.color,
+                              stroke: isDark ? "#0f172a" : "white",
+                              strokeWidth: 2,
+                              style: isHovered || isCoarse ? STYLE_PORT_VISIBLE : STYLE_PORT_HIDDEN,
+                              onMouseDown: (e) => onPortMouseDown(e, node.id)
+                            }
+                          )
+                        ] }),
+                        liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          "circle",
+                          {
+                            cx: nW / 2,
+                            cy: -1,
+                            r: portR,
+                            fill: acc.color,
+                            stroke: isDark ? "#0f172a" : "white",
+                            strokeWidth: 2,
+                            style: STYLE_LIVE_PORT
+                          }
+                        )
+                      ]
+                    },
+                    node.id
+                  );
+                })
+              ] })
+            ]
           }
-        }
-      );
-    })(),
-    model.nodes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
-        "Click ",
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("strong", { style: { color: acc.color }, children: [
-          "+ ",
-          variantLabel
-        ] }),
-        " to start"
-      ] })
-    ] }),
-    model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      Minimap,
-      {
-        model,
-        viewportW: viewport.w,
-        viewportH: viewport.h,
-        transform,
-        isDark,
-        accentColor: acc.color,
-        measureNode: (n) => nodeDims(n, variant),
-        onCenterOn: (cx, cy) => {
-          setTransform((tr) => ({ ...tr, x: viewport.w / 2 - cx * tr.scale, y: viewport.h / 2 - cy * tr.scale }));
-        }
-      }
-    ),
-    ctxMenu && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      ContextMenu,
-      {
-        x: ctxMenu.x,
-        y: ctxMenu.y,
-        nodeId: ctxMenu.nodeId,
-        edgeId: ctxMenu.edgeId,
-        isDark,
-        t,
-        acc,
-        canUndo: history.canUndo,
-        canRedo: history.canRedo,
-        onUndo: onCtxUndo,
-        onRedo: onCtxRedo,
-        onReCenter: onCtxReCenter,
-        onAddNode: onCtxAddNode,
-        onDuplicate: onCtxDuplicate,
-        onRename: onCtxRename,
-        onDelete: onCtxDelete,
-        onDisconnect: onCtxDisconnect,
-        currentEdgeStyle: ctxEdgeStyle,
-        currentEdgeArrow: ctxEdgeArrow,
-        edgeHasWaypoint: ctxEdgeHasWaypoint,
-        onEdgeRename: onCtxEdgeRename,
-        onEdgeStyle: onCtxEdgeStyle,
-        onEdgeArrowhead: onCtxEdgeArrowhead,
-        onEdgeDelete: onCtxEdgeDelete,
-        onEdgeResetRouting: onCtxEdgeResetRouting,
-        containerRef
-      }
-    )
-  ] });
+        ),
+        boxSel && Math.abs(boxSel.cx - boxSel.sx) + Math.abs(boxSel.cy - boxSel.sy) > 4 && containerRef.current && (() => {
+          const rect = containerRef.current.getBoundingClientRect();
+          const left = Math.min(boxSel.sx, boxSel.cx) - rect.left;
+          const top = Math.min(boxSel.sy, boxSel.cy) - rect.top;
+          const w = Math.abs(boxSel.cx - boxSel.sx);
+          const h = Math.abs(boxSel.cy - boxSel.sy);
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                left,
+                top,
+                width: w,
+                height: h,
+                border: `1px dashed ${acc.color}`,
+                background: isDark ? "rgba(99,102,241,0.10)" : "rgba(99,102,241,0.08)",
+                pointerEvents: "none",
+                borderRadius: 4
+              }
+            }
+          );
+        })(),
+        model.nodes.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              pointerEvents: "none",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
+                "Click ",
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("strong", { style: { color: acc.color }, children: [
+                  "+ ",
+                  variantLabel
+                ] }),
+                " to start"
+              ] })
+            ]
+          }
+        ),
+        model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Minimap,
+          {
+            model,
+            viewportW: viewport.w,
+            viewportH: viewport.h,
+            transform,
+            isDark,
+            accentColor: acc.color,
+            measureNode: (n) => nodeDims(n, variant),
+            onCenterOn: (cx, cy) => {
+              setTransform((tr) => ({
+                ...tr,
+                x: viewport.w / 2 - cx * tr.scale,
+                y: viewport.h / 2 - cy * tr.scale
+              }));
+            }
+          }
+        ),
+        ctxMenu && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ContextMenu,
+          {
+            x: ctxMenu.x,
+            y: ctxMenu.y,
+            nodeId: ctxMenu.nodeId,
+            edgeId: ctxMenu.edgeId,
+            isDark,
+            t,
+            acc,
+            canUndo: history.canUndo,
+            canRedo: history.canRedo,
+            onUndo: onCtxUndo,
+            onRedo: onCtxRedo,
+            onReCenter: onCtxReCenter,
+            onAddNode: onCtxAddNode,
+            onDuplicate: onCtxDuplicate,
+            onRename: onCtxRename,
+            onDelete: onCtxDelete,
+            onDisconnect: onCtxDisconnect,
+            currentEdgeStyle: ctxEdgeStyle,
+            currentEdgeArrow: ctxEdgeArrow,
+            edgeHasWaypoint: ctxEdgeHasWaypoint,
+            onEdgeRename: onCtxEdgeRename,
+            onEdgeStyle: onCtxEdgeStyle,
+            onEdgeArrowhead: onCtxEdgeArrowhead,
+            onEdgeDelete: onCtxEdgeDelete,
+            onEdgeResetRouting: onCtxEdgeResetRouting,
+            containerRef
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/ui/hooks/useHistory.ts
@@ -4027,7 +5447,18 @@ function useCanvasTouch(ref, {
       el.removeEventListener("touchend", onEnd);
       el.removeEventListener("touchcancel", onEnd);
     };
-  }, [ref, transform.scale, transform.x, transform.y, setTransform, onLongPress, minScale, maxScale, longPressMs, longPressSlop]);
+  }, [
+    ref,
+    transform.scale,
+    transform.x,
+    transform.y,
+    setTransform,
+    onLongPress,
+    minScale,
+    maxScale,
+    longPressMs,
+    longPressSlop
+  ]);
 }
 
 // src/ui/hooks/useElementSize.ts
@@ -4141,7 +5572,17 @@ function nearestInDirection(fromX, fromY, dir, candidates) {
 
 // src/ui/DiagramEditor.tsx
 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_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") {
@@ -4197,7 +5638,7 @@ function FlowchartEditor({
       const next = new Set(prev);
       if (next.has(id)) {
         next.delete(id);
-        const last = next.size ? Array.from(next)[next.size - 1] : null;
+        const last = next.size ? Array.from(next)[next.size - 1] ?? null : null;
         setSelected(last);
       } else {
         next.add(id);
@@ -4221,7 +5662,10 @@ function FlowchartEditor({
   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 { t, isDark } = useEditorTheme(theme, themeOverrides, {
+    light: lightTheme,
+    dark: darkTheme
+  });
   const isCoarse = useIsCoarsePointer();
   const portR = isCoarse ? 9 : 6;
   const viewport = useElementSize(svgRef);
@@ -4249,52 +5693,65 @@ 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_react20.useCallback)((nodeId) => {
-    const node = model.nodes.find((n) => n.id === nodeId);
-    if (!node || !svgRef.current) return;
-    const rect = svgRef.current.getBoundingClientRect();
-    const { w: nw, h: nh } = nodeDims(node, variant);
-    const cx = (node.x ?? 0) + nw / 2;
-    const cy = (node.y ?? 0) + nh / 2;
-    const scale = Math.min(Math.max(transform.scale, 0.8), 1.4);
-    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_react20.useCallback)((ids) => {
-    if (ids.length === 0) return;
-    const idSet = new Set(ids);
-    const idMap = /* @__PURE__ */ new Map();
-    const nextNode = makeIdSource("node", model.nodes);
-    const nextEdge = makeIdSource("e", model.edges);
-    const newNodes = [];
-    for (const oldId of ids) {
-      const n = model.nodes.find((x) => x.id === oldId);
-      if (!n) continue;
-      const newId = nextNode();
-      idMap.set(oldId, newId);
-      newNodes.push({
-        ...n,
-        id: newId,
-        label: ids.length === 1 ? n.label + " (copy)" : n.label,
-        x: (n.x ?? 0) + 32,
-        y: (n.y ?? 0) + 32
-      });
-    }
-    const newEdges = [];
-    for (const e of model.edges) {
-      if (idSet.has(e.from) && idSet.has(e.to)) {
-        newEdges.push({ ...e, id: nextEdge(), from: idMap.get(e.from), to: idMap.get(e.to) });
+  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();
+      const { w: nw, h: nh } = nodeDims(node, variant);
+      const cx = (node.x ?? 0) + nw / 2;
+      const cy = (node.y ?? 0) + nh / 2;
+      const scale = Math.min(Math.max(transform.scale, 0.8), 1.4);
+      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_react20.useCallback)(
+    (ids) => {
+      if (ids.length === 0) return;
+      const idSet = new Set(ids);
+      const idMap = /* @__PURE__ */ new Map();
+      const nextNode = makeIdSource("node", model.nodes);
+      const nextEdge = makeIdSource("e", model.edges);
+      const newNodes = [];
+      for (const oldId of ids) {
+        const n = model.nodes.find((x) => x.id === oldId);
+        if (!n) continue;
+        const newId = nextNode();
+        idMap.set(oldId, newId);
+        newNodes.push({
+          ...n,
+          id: newId,
+          label: ids.length === 1 ? n.label + " (copy)" : n.label,
+          x: (n.x ?? 0) + 32,
+          y: (n.y ?? 0) + 32
+        });
       }
-    }
-    const m = { ...model, nodes: [...model.nodes, ...newNodes], edges: [...model.edges, ...newEdges] };
-    applyAndPush(m);
-    const newIds = newNodes.map((n) => n.id);
-    setSelected(newIds[newIds.length - 1] ?? null);
-    setSelectedSet(new Set(newIds));
-  }, [model, applyAndPush]);
-  const duplicateNode = (0, import_react20.useCallback)((nodeId) => {
-    duplicateIds([nodeId]);
-  }, [duplicateIds]);
+      const newEdges = [];
+      for (const e of model.edges) {
+        if (idSet.has(e.from) && idSet.has(e.to)) {
+          newEdges.push({ ...e, id: nextEdge(), from: idMap.get(e.from), to: idMap.get(e.to) });
+        }
+      }
+      const m = {
+        ...model,
+        nodes: [...model.nodes, ...newNodes],
+        edges: [...model.edges, ...newEdges]
+      };
+      applyAndPush(m);
+      const newIds = newNodes.map((n) => n.id);
+      setSelected(newIds[newIds.length - 1] ?? null);
+      setSelectedSet(new Set(newIds));
+    },
+    [model, applyAndPush]
+  );
+  const duplicateNode = (0, import_react20.useCallback)(
+    (nodeId) => {
+      duplicateIds([nodeId]);
+    },
+    [duplicateIds]
+  );
   (0, import_react20.useEffect)(() => {
     if (!ctxMenu) return;
     const close = () => setCtxMenu(null);
@@ -4302,18 +5759,27 @@ function FlowchartEditor({
     return () => window.removeEventListener("mousedown", close);
   }, [ctxMenu]);
   const keyCommands = [
-    { match: (e) => (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey, run: () => {
-      undo();
-      return true;
-    } },
-    { match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z"), run: () => {
-      redo();
-      return true;
-    } },
-    { match: (e) => (e.ctrlKey || e.metaKey) && e.key === "0", run: () => {
-      reCenter();
-      return true;
-    } },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey,
+      run: () => {
+        undo();
+        return true;
+      }
+    },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "y" || e.shiftKey && e.key === "z"),
+      run: () => {
+        redo();
+        return true;
+      }
+    },
+    {
+      match: (e) => (e.ctrlKey || e.metaKey) && e.key === "0",
+      run: () => {
+        reCenter();
+        return true;
+      }
+    },
     {
       match: (e) => (e.ctrlKey || e.metaKey) && (e.key === "d" || e.key === "D") && selectedSet.size > 0,
       run: () => {
@@ -4353,12 +5819,18 @@ function FlowchartEditor({
           from: idMap.get(ed.from) ?? ed.from,
           to: idMap.get(ed.to) ?? ed.to
         }));
-        const m = { ...model, nodes: [...model.nodes, ...newNodes], edges: [...model.edges, ...newEdges] };
+        const m = {
+          ...model,
+          nodes: [...model.nodes, ...newNodes],
+          edges: [...model.edges, ...newEdges]
+        };
         applyAndPush(m);
         const newIds = newNodes.map((n) => n.id);
-        setSelected(newIds[newIds.length - 1]);
+        setSelected(newIds[newIds.length - 1] ?? null);
         setSelectedSet(new Set(newIds));
-        setAnnouncement(`Pasted ${newIds.length} ${variantLabel.toLowerCase()}${newIds.length === 1 ? "" : "s"}.`);
+        setAnnouncement(
+          `Pasted ${newIds.length} ${variantLabel.toLowerCase()}${newIds.length === 1 ? "" : "s"}.`
+        );
         return true;
       }
     },
@@ -4384,7 +5856,9 @@ function FlowchartEditor({
         };
         applyAndPush(updated);
         clearSelection();
-        setAnnouncement(`Deleted ${ids.size} ${variantLabel.toLowerCase()}${ids.size === 1 ? "" : "s"}.`);
+        setAnnouncement(
+          `Deleted ${ids.size} ${variantLabel.toLowerCase()}${ids.size === 1 ? "" : "s"}.`
+        );
         return true;
       }
     },
@@ -4419,18 +5893,40 @@ function FlowchartEditor({
         const ids = selectedSet;
         const updated = {
           ...model,
-          nodes: model.nodes.map((n) => ids.has(n.id) ? { ...n, x: snap((n.x ?? 0) + dx), y: snap((n.y ?? 0) + dy) } : n)
+          nodes: model.nodes.map(
+            (n) => ids.has(n.id) ? { ...n, x: snap((n.x ?? 0) + dx), y: snap((n.y ?? 0) + dy) } : n
+          )
         };
         applyAndPush(updated);
         return true;
       }
     }
   ];
-  useEditorKeyboard(keyCommands, [undo, redo, reCenter, selected, selectedSet, ctxMenu, liveEdge, editingId, boxSel, model, applyAndPush, duplicateNode, clearSelection]);
-  const toCanvas = (0, import_react20.useCallback)((clientX, clientY) => {
-    const rect = svgRef.current.getBoundingClientRect();
-    return { x: (clientX - rect.left - transform.x) / transform.scale, y: (clientY - rect.top - transform.y) / transform.scale };
-  }, [transform]);
+  useEditorKeyboard(keyCommands, [
+    undo,
+    redo,
+    reCenter,
+    selected,
+    selectedSet,
+    ctxMenu,
+    liveEdge,
+    editingId,
+    boxSel,
+    model,
+    applyAndPush,
+    duplicateNode,
+    clearSelection
+  ]);
+  const toCanvas = (0, import_react20.useCallback)(
+    (clientX, clientY) => {
+      const rect = svgRef.current.getBoundingClientRect();
+      return {
+        x: (clientX - rect.left - transform.x) / transform.scale,
+        y: (clientY - rect.top - transform.y) / transform.scale
+      };
+    },
+    [transform]
+  );
   useCanvasWheel(svgRef, setTransform);
   const onCanvasLongPress = (0, import_react20.useCallback)((x, y) => {
     setCtxMenu({ x, y, nodeId: null });
@@ -4441,13 +5937,28 @@ function FlowchartEditor({
     const node = model.nodes.find((n) => n.id === nodeId);
     const { x, y } = toCanvas(e.clientX, e.clientY);
     const nW = nodeWidth2(node.label);
-    setLiveEdge({ fromId: nodeId, fromX: (node.x ?? 0) + nW / 2, fromY: (node.y ?? 0) + NODE_H2, exitDir: "bottom", toX: x, toY: y });
+    setLiveEdge({
+      fromId: nodeId,
+      fromX: (node.x ?? 0) + nW / 2,
+      fromY: (node.y ?? 0) + NODE_H2,
+      exitDir: "bottom",
+      toX: x,
+      toY: y
+    });
   };
   const onAnswerPortDown = (e, nodeId, answer, portXInNode, portYInNode) => {
     e.stopPropagation();
     const node = model.nodes.find((n) => n.id === nodeId);
     const { x, y } = toCanvas(e.clientX, e.clientY);
-    setLiveEdge({ fromId: nodeId, fromX: (node.x ?? 0) + portXInNode, fromY: (node.y ?? 0) + portYInNode, exitDir: "bottom", answerLabel: answer, toX: x, toY: y });
+    setLiveEdge({
+      fromId: nodeId,
+      fromX: (node.x ?? 0) + portXInNode,
+      fromY: (node.y ?? 0) + portYInNode,
+      exitDir: "bottom",
+      answerLabel: answer,
+      toX: x,
+      toY: y
+    });
   };
   const onNodeMouseDown = (e, id) => {
     e.stopPropagation();
@@ -4474,7 +5985,11 @@ function FlowchartEditor({
       selectOne(id);
       groupDragOriginsRef.current = null;
     }
-    setDrag({ nodeId: id, ox: e.clientX - (transform.x + (node.x ?? 0) * transform.scale), oy: e.clientY - (transform.y + (node.y ?? 0) * transform.scale) });
+    setDrag({
+      nodeId: id,
+      ox: e.clientX - (transform.x + (node.x ?? 0) * transform.scale),
+      oy: e.clientY - (transform.y + (node.y ?? 0) * transform.scale)
+    });
   };
   const onNodeMouseUp = (e, targetId) => {
     if (!liveEdge || liveEdge.fromId === targetId) return;
@@ -4484,12 +5999,27 @@ function FlowchartEditor({
     if (label) {
       const existing = model.edges.find((ex) => ex.from === liveEdge.fromId && ex.label === label);
       if (existing) {
-        updated = { ...model, edges: model.edges.map((ex) => ex.id === existing.id ? { ...ex, to: targetId } : ex) };
+        updated = {
+          ...model,
+          edges: model.edges.map((ex) => ex.id === existing.id ? { ...ex, to: targetId } : ex)
+        };
       } else {
-        updated = { ...model, edges: [...model.edges, { id: nextId("e", model.edges), from: liveEdge.fromId, to: targetId, label }] };
+        updated = {
+          ...model,
+          edges: [
+            ...model.edges,
+            { id: nextId("e", model.edges), from: liveEdge.fromId, to: targetId, label }
+          ]
+        };
       }
     } else {
-      updated = { ...model, edges: [...model.edges, { id: nextId("e", model.edges), from: liveEdge.fromId, to: targetId }] };
+      updated = {
+        ...model,
+        edges: [
+          ...model.edges,
+          { id: nextId("e", model.edges), from: liveEdge.fromId, to: targetId }
+        ]
+      };
     }
     applyAndPush(updated);
     setLiveEdge(null);
@@ -4529,7 +6059,9 @@ function FlowchartEditor({
       const wx = snap(x), wy = snap(y);
       const updated = {
         ...model,
-        edges: model.edges.map((ed) => ed.id === waypointDrag ? { ...ed, waypoint: { x: wx, y: wy } } : ed)
+        edges: model.edges.map(
+          (ed) => ed.id === waypointDrag ? { ...ed, waypoint: { x: wx, y: wy } } : ed
+        )
       };
       applyModel(updated);
       return;
@@ -4561,12 +6093,23 @@ function FlowchartEditor({
           return { x: n.x ?? 0, y: n.y ?? 0, w: d.w, h: d.h };
         });
         const snapResult = findSiblingSnap({ x: dx, y: dy, w: dW, h: dH }, others);
-        setAlignGuides(snapResult.guideX || snapResult.guideY ? { x: snapResult.guideX, y: snapResult.guideY } : null);
-        const updated = { ...model, nodes: model.nodes.map((n) => n.id === drag.nodeId ? { ...n, x: snapResult.x, y: snapResult.y } : n) };
+        setAlignGuides(
+          snapResult.guideX || snapResult.guideY ? { x: snapResult.guideX, y: snapResult.guideY } : null
+        );
+        const updated = {
+          ...model,
+          nodes: model.nodes.map(
+            (n) => n.id === drag.nodeId ? { ...n, x: snapResult.x, y: snapResult.y } : n
+          )
+        };
         applyModel(updated);
       }
     } else if (pan) {
-      setTransform((tr) => ({ ...tr, x: pan.tx + (e.clientX - pan.ox), y: pan.ty + (e.clientY - pan.oy) }));
+      setTransform((tr) => ({
+        ...tr,
+        x: pan.tx + (e.clientX - pan.ox),
+        y: pan.ty + (e.clientY - pan.oy)
+      }));
     } else if (boxSel) {
       setBoxSel((b) => b ? { ...b, cx: e.clientX, cy: e.clientY } : null);
     }
@@ -4592,7 +6135,7 @@ function FlowchartEditor({
         }
         const arr = Array.from(hits);
         setSelectedSet(hits);
-        setSelected(arr.length ? arr[arr.length - 1] : null);
+        setSelected(arr.length ? arr[arr.length - 1] ?? null : null);
       }
       setBoxSel(null);
     }
@@ -4615,7 +6158,10 @@ function FlowchartEditor({
   };
   const commitEdit = () => {
     if (!editingId) return;
-    const up = { ...model, nodes: model.nodes.map((n) => n.id === editingId ? { ...n, label: editLabel } : n) };
+    const up = {
+      ...model,
+      nodes: model.nodes.map((n) => n.id === editingId ? { ...n, label: editLabel } : n)
+    };
     applyAndPush(up);
     setEditingId(null);
   };
@@ -4624,20 +6170,28 @@ function FlowchartEditor({
     const p = atCanvasPos ? { x: snap(atCanvasPos.x), y: snap(atCanvasPos.y) } : { x: snap(100 + Math.random() * 240), y: snap(100 + Math.random() * 180) };
     const label = variant === "question" ? "New Question" : variant === "journey" ? `Step ${model.nodes.length + 1}` : "New Step";
     const metadata = variant === "question" ? { answers: [] } : void 0;
-    const updated = { ...model, nodes: [...model.nodes, { id, label, shape: "rectangle", metadata, ...p }] };
+    const updated = {
+      ...model,
+      nodes: [...model.nodes, { id, label, shape: "rectangle", metadata, ...p }]
+    };
     applyAndPush(updated);
     selectOne(id);
     setAnnouncement(`Added ${variantLabel.toLowerCase()} "${label}".`);
   };
   const deleteNode = (nodeId) => {
     const node = model.nodes.find((n) => n.id === nodeId);
-    const updated = { ...model, nodes: model.nodes.filter((n) => n.id !== nodeId), edges: model.edges.filter((e) => e.from !== nodeId && e.to !== nodeId) };
+    const updated = {
+      ...model,
+      nodes: model.nodes.filter((n) => n.id !== nodeId),
+      edges: model.edges.filter((e) => e.from !== nodeId && e.to !== nodeId)
+    };
     applyAndPush(updated);
     if (selectedSet.has(nodeId)) {
       const next = new Set(selectedSet);
       next.delete(nodeId);
       setSelectedSet(next);
-      if (selected === nodeId) setSelected(next.size ? Array.from(next)[next.size - 1] : null);
+      if (selected === nodeId)
+        setSelected(next.size ? Array.from(next)[next.size - 1] ?? null : null);
     }
     if (node) setAnnouncement(`Deleted ${variantLabel.toLowerCase()} "${node.label}".`);
   };
@@ -4669,7 +6223,9 @@ function FlowchartEditor({
     const next = editEdgeLabel.trim();
     const updated = {
       ...model,
-      edges: model.edges.map((e) => e.id === editingEdgeId ? { ...e, ...next ? { label: next } : { label: void 0 } } : e)
+      edges: model.edges.map(
+        (e) => e.id === editingEdgeId ? { ...e, ...next ? { label: next } : { label: void 0 } } : e
+      )
     };
     applyAndPush(updated);
     setEditingEdgeId(null);
@@ -4680,11 +6236,17 @@ function FlowchartEditor({
     setCtxMenu({ x: e.clientX, y: e.clientY, nodeId: null, edgeId });
   };
   const setEdgeStyle = (edgeId, style) => {
-    const updated = { ...model, edges: model.edges.map((e) => e.id === edgeId ? { ...e, style } : e) };
+    const updated = {
+      ...model,
+      edges: model.edges.map((e) => e.id === edgeId ? { ...e, style } : e)
+    };
     applyAndPush(updated);
   };
   const setEdgeArrowhead = (edgeId, arrowhead) => {
-    const updated = { ...model, edges: model.edges.map((e) => e.id === edgeId ? { ...e, arrowhead } : e) };
+    const updated = {
+      ...model,
+      edges: model.edges.map((e) => e.id === edgeId ? { ...e, arrowhead } : e)
+    };
     applyAndPush(updated);
   };
   const deleteEdge = (edgeId) => {
@@ -4704,14 +6266,17 @@ function FlowchartEditor({
     applyAndPush(updated);
   };
   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,
-      x: n.x ?? snap(80 + i % 4 * 200),
-      y: n.y ?? snap(80 + Math.floor(i / 4) * 140)
-    }))
-  }), []);
+  const positionFlowchartNodes = (0, import_react20.useCallback)(
+    (m) => ({
+      ...m,
+      nodes: m.nodes.map((n, i) => ({
+        ...n,
+        x: n.x ?? snap(80 + i % 4 * 200),
+        y: n.y ?? snap(80 + Math.floor(i / 4) * 140)
+      }))
+    }),
+    []
+  );
   const handleImport = useImporter(applyAndPush, {
     transform: positionFlowchartNodes,
     onSuccess: (msg) => showToast(msg, "success"),
@@ -4722,9 +6287,23 @@ function FlowchartEditor({
   const shadowClr = shadowColor(isDark);
   const arrowClr = arrowColor(isDark);
   const amberArrow = isDark ? ACCENT.amberDark : ACCENT.amber;
-  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: `
+  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,
@@ -4743,209 +6322,293 @@ function FlowchartEditor({
           outline-offset: -2px;
         }
       ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        role: "status",
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        style: STYLE_SR_ONLY,
-        children: announcement
-      }
-    ),
-    /* @__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_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_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_runtime12.jsx)("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
-      ] }),
-      /* @__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_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,
-          selected,
-          variant,
-          isDark,
-          t,
-          acc,
-          open: navOpen,
-          onToggle: () => setNavOpen((v) => !v),
-          onSelect: jumpToNode
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        DiagramCanvas,
-        {
-          model,
-          variant,
-          variantLabel,
-          t,
-          isDark,
-          acc,
-          transform,
-          setTransform,
-          selected,
-          selectedSet,
-          hoveredId,
-          setHoveredId,
-          drag,
-          pan,
-          liveEdge,
-          boxSel,
-          alignGuides,
-          editingEdgeId,
-          editEdgeLabel,
-          setEditEdgeLabel,
-          commitEdgeEdit,
-          setEditingEdgeId,
-          beginEditEdge,
-          onEdgeContextMenu,
-          setWaypointDrag,
-          editingId,
-          editLabel,
-          setEditLabel,
-          commitEdit,
-          setEditingId,
-          onNodeMouseDown,
-          onNodeMouseUp,
-          onNodeDblClick,
-          onNodeContextMenu,
-          onPortMouseDown,
-          onAnswerPortDown,
-          onSvgMouseDown,
-          onMouseMove,
-          onMouseUp,
-          onSvgContextMenu,
-          reducedMotion,
-          isCoarse,
-          portR,
-          shadowClr,
-          arrowClr,
-          amberArrow,
-          viewport,
-          svgRef,
-          containerRef,
-          ctxMenu,
-          history,
-          ctxEdgeStyle: (ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.style ?? "solid",
-          ctxEdgeArrow: (ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.arrowhead ?? "arrow",
-          ctxEdgeHasWaypoint: !!(ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.waypoint,
-          onCtxUndo: () => {
-            undo();
-            setCtxMenu(null);
-          },
-          onCtxRedo: () => {
-            redo();
-            setCtxMenu(null);
-          },
-          onCtxReCenter: () => {
-            reCenter();
-            setCtxMenu(null);
-          },
-          onCtxAddNode: () => {
-            const rect = svgRef.current.getBoundingClientRect();
-            const cx = (ctxMenu.x - rect.left - transform.x) / transform.scale;
-            const cy = (ctxMenu.y - rect.top - transform.y) / transform.scale;
-            addNode({ x: cx, y: cy });
-            setCtxMenu(null);
-          },
-          onCtxDuplicate: () => {
-            if (ctxMenu?.nodeId) {
-              duplicateNode(ctxMenu.nodeId);
-              setCtxMenu(null);
-            }
-          },
-          onCtxRename: () => {
-            if (ctxMenu?.nodeId) {
-              const node = model.nodes.find((n) => n.id === ctxMenu.nodeId);
-              setEditingId(ctxMenu.nodeId);
-              setEditLabel(node.label);
-              setCtxMenu(null);
-            }
-          },
-          onCtxDelete: () => {
-            if (ctxMenu?.nodeId) {
-              deleteNode(ctxMenu.nodeId);
-              setCtxMenu(null);
-            }
-          },
-          onCtxDisconnect: () => {
-            if (ctxMenu?.nodeId) {
-              const m = { ...model, edges: model.edges.filter((e) => e.from !== ctxMenu.nodeId && e.to !== ctxMenu.nodeId) };
-              applyAndPush(m);
-              setCtxMenu(null);
-            }
-          },
-          onCtxEdgeRename: () => {
-            if (ctxMenu?.edgeId) {
-              beginEditEdge(ctxMenu.edgeId);
-              setCtxMenu(null);
-            }
-          },
-          onCtxEdgeStyle: (s2) => {
-            if (ctxMenu?.edgeId) {
-              setEdgeStyle(ctxMenu.edgeId, s2);
-              setCtxMenu(null);
-            }
-          },
-          onCtxEdgeArrowhead: (a) => {
-            if (ctxMenu?.edgeId) {
-              setEdgeArrowhead(ctxMenu.edgeId, a);
-              setCtxMenu(null);
-            }
-          },
-          onCtxEdgeDelete: () => {
-            if (ctxMenu?.edgeId) {
-              deleteEdge(ctxMenu.edgeId);
-              setCtxMenu(null);
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: STYLE_SR_ONLY, children: announcement }),
+        /* @__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_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_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_runtime12.jsx)("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
+              ] }),
+              /* @__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_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,
+              selected,
+              variant,
+              isDark,
+              t,
+              acc,
+              open: navOpen,
+              onToggle: () => setNavOpen((v) => !v),
+              onSelect: jumpToNode
             }
-          },
-          onCtxEdgeResetRouting: () => {
-            if (ctxMenu?.edgeId) {
-              resetEdgeRouting(ctxMenu.edgeId);
-              setCtxMenu(null);
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            DiagramCanvas,
+            {
+              model,
+              variant,
+              variantLabel,
+              t,
+              isDark,
+              acc,
+              transform,
+              setTransform,
+              selected,
+              selectedSet,
+              hoveredId,
+              setHoveredId,
+              drag,
+              pan,
+              liveEdge,
+              boxSel,
+              alignGuides,
+              editingEdgeId,
+              editEdgeLabel,
+              setEditEdgeLabel,
+              commitEdgeEdit,
+              setEditingEdgeId,
+              beginEditEdge,
+              onEdgeContextMenu,
+              setWaypointDrag,
+              editingId,
+              editLabel,
+              setEditLabel,
+              commitEdit,
+              setEditingId,
+              onNodeMouseDown,
+              onNodeMouseUp,
+              onNodeDblClick,
+              onNodeContextMenu,
+              onPortMouseDown,
+              onAnswerPortDown,
+              onSvgMouseDown,
+              onMouseMove,
+              onMouseUp,
+              onSvgContextMenu,
+              reducedMotion,
+              isCoarse,
+              portR,
+              shadowClr,
+              arrowClr,
+              amberArrow,
+              viewport,
+              svgRef,
+              containerRef,
+              ctxMenu,
+              history,
+              ctxEdgeStyle: (ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.style ?? "solid",
+              ctxEdgeArrow: (ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.arrowhead ?? "arrow",
+              ctxEdgeHasWaypoint: !!(ctxMenu?.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0)?.waypoint,
+              onCtxUndo: () => {
+                undo();
+                setCtxMenu(null);
+              },
+              onCtxRedo: () => {
+                redo();
+                setCtxMenu(null);
+              },
+              onCtxReCenter: () => {
+                reCenter();
+                setCtxMenu(null);
+              },
+              onCtxAddNode: () => {
+                const rect = svgRef.current.getBoundingClientRect();
+                const cx = (ctxMenu.x - rect.left - transform.x) / transform.scale;
+                const cy = (ctxMenu.y - rect.top - transform.y) / transform.scale;
+                addNode({ x: cx, y: cy });
+                setCtxMenu(null);
+              },
+              onCtxDuplicate: () => {
+                if (ctxMenu?.nodeId) {
+                  duplicateNode(ctxMenu.nodeId);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxRename: () => {
+                if (ctxMenu?.nodeId) {
+                  const node = model.nodes.find((n) => n.id === ctxMenu.nodeId);
+                  setEditingId(ctxMenu.nodeId);
+                  setEditLabel(node.label);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxDelete: () => {
+                if (ctxMenu?.nodeId) {
+                  deleteNode(ctxMenu.nodeId);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxDisconnect: () => {
+                if (ctxMenu?.nodeId) {
+                  const m = {
+                    ...model,
+                    edges: model.edges.filter(
+                      (e) => e.from !== ctxMenu.nodeId && e.to !== ctxMenu.nodeId
+                    )
+                  };
+                  applyAndPush(m);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxEdgeRename: () => {
+                if (ctxMenu?.edgeId) {
+                  beginEditEdge(ctxMenu.edgeId);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxEdgeStyle: (s2) => {
+                if (ctxMenu?.edgeId) {
+                  setEdgeStyle(ctxMenu.edgeId, s2);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxEdgeArrowhead: (a) => {
+                if (ctxMenu?.edgeId) {
+                  setEdgeArrowhead(ctxMenu.edgeId, a);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxEdgeDelete: () => {
+                if (ctxMenu?.edgeId) {
+                  deleteEdge(ctxMenu.edgeId);
+                  setCtxMenu(null);
+                }
+              },
+              onCtxEdgeResetRouting: () => {
+                if (ctxMenu?.edgeId) {
+                  resetEdgeRouting(ctxMenu.edgeId);
+                  setCtxMenu(null);
+                }
+              }
             }
+          ),
+          selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            StepEditor,
+            {
+              nodeId: selected,
+              model,
+              onModelChange: (m) => {
+                applyAndPush(m);
+              },
+              variant,
+              isDark,
+              t,
+              acc
+            },
+            selected
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_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_runtime12.jsxs)("span", { children: [
+                model.edges.length,
+                " connections"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
+                Math.round(transform.scale * 100),
+                "% zoom"
+              ] }),
+              /* @__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 })
+            ]
           }
-        }
-      ),
-      selected && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
-        applyAndPush(m);
-      }, variant, isDark, t, acc }, selected)
-    ] }),
-    /* @__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_runtime12.jsxs)("span", { children: [
-        model.edges.length,
-        " connections"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { children: [
-        Math.round(transform.scale * 100),
-        "% zoom"
-      ] }),
-      /* @__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 })
-    ] })
-  ] });
+        )
+      ]
+    }
+  );
 }
 function ctrlBtn(accent, isDark) {
   const isTransparent = accent === "transparent";