flowchart-sequence-designer 1.0.0

package/dist/ui/index.js

@@ -0,0 +1,4563 @@
+// src/ui/DiagramEditor.tsx
+import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef7, useState as useState11 } from "react";
+
+// src/ui/Toolbar.tsx
+import { useState as useState2 } from "react";
+
+// src/ui/ImportDialog.tsx
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ImportDialog({ open, onClose, onImport }) {
+  const [text, setText] = useState("");
+  const [fileName, setFileName] = useState(null);
+  const [error, setError] = useState(null);
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    setText("");
+    setFileName(null);
+    setError(null);
+    const id = requestAnimationFrame(() => textareaRef.current?.focus());
+    return () => cancelAnimationFrame(id);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const root = dialogRef.current;
+      if (!root) return;
+      const focusables = root.querySelectorAll(
+        'button:not([disabled]), textarea, input:not([type="file"])'
+      );
+      if (focusables.length === 0) return;
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  const onFile = useCallback((file) => {
+    setError(null);
+    setFileName(file.name);
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = typeof reader.result === "string" ? reader.result : "";
+      setText(result);
+    };
+    reader.onerror = () => setError(`Could not read ${file.name}`);
+    reader.readAsText(file);
+  }, []);
+  const onSubmit = useCallback(() => {
+    const trimmed2 = text.trim();
+    if (!trimmed2) {
+      setError("Paste a diagram or pick a file first.");
+      return;
+    }
+    try {
+      onImport(trimmed2);
+      onClose();
+    } catch (e) {
+      setError(e.message);
+    }
+  }, [text, onImport, onClose]);
+  if (!open) return null;
+  const trimmed = text.trim();
+  const detected = !trimmed ? null : trimmed.startsWith("{") ? "JSON" : "Mermaid";
+  const canSubmit = trimmed.length > 0;
+  return /* @__PURE__ */ jsx("div", { role: "presentation", onClick: onClose, style: s.backdrop, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: dialogRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "fsd-import-title",
+      onClick: (e) => e.stopPropagation(),
+      style: s.dialog,
+      children: [
+        /* @__PURE__ */ jsxs("header", { style: s.header, children: [
+          /* @__PURE__ */ jsx("div", { style: s.brandDot }),
+          /* @__PURE__ */ jsx("h2", { id: "fsd-import-title", style: s.title, children: "Import diagram" }),
+          /* @__PURE__ */ jsx("span", { style: s.headerHint, children: "Mermaid or JSON" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: s.body, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "fsd-import-textarea", style: s.label, children: "Paste source" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: "fsd-import-textarea",
+              ref: textareaRef,
+              value: text,
+              onChange: (e) => {
+                setText(e.target.value);
+                setError(null);
+              },
+              placeholder: PLACEHOLDER,
+              spellCheck: false,
+              style: s.textarea
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: s.fileRow, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: ".json,.mmd,.mermaid,.txt,application/json,text/plain",
+                style: s.hiddenFile,
+                onChange: (e) => {
+                  const f = e.target.files?.[0];
+                  if (f) onFile(f);
+                  e.target.value = "";
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), style: s.fileBtn, children: "Choose file\u2026" }),
+            /* @__PURE__ */ jsx("span", { style: s.fileName, children: fileName ?? ".json, .mmd, .mermaid, .txt" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: s.status, "aria-live": "polite", children: error ? /* @__PURE__ */ jsxs("span", { style: s.error, children: [
+            "! ",
+            error
+          ] }) : detected ? /* @__PURE__ */ jsxs("span", { style: s.ok, children: [
+            "Detected: ",
+            detected
+          ] }) : null })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { style: s.footer, children: [
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, style: s.cancelBtn, children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onSubmit,
+              disabled: !canSubmit,
+              style: { ...s.submitBtn, ...canSubmit ? null : s.submitBtnDisabled },
+              children: "Import"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+var PLACEHOLDER = "flowchart TD\n  A[Start] --> B{Choice?}\n  B -->|yes| C[Done]\n  B -->|no| A";
+var s = {
+  backdrop: {
+    position: "fixed",
+    inset: 0,
+    zIndex: 100,
+    background: "rgba(15, 23, 42, 0.65)",
+    backdropFilter: "blur(2px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24,
+    fontFamily: "ui-sans-serif,system-ui,sans-serif"
+  },
+  dialog: {
+    width: "min(560px, 100%)",
+    maxHeight: "90vh",
+    background: "#1e293b",
+    color: "#f1f5f9",
+    border: "1px solid #334155",
+    borderRadius: 12,
+    boxShadow: "0 24px 64px rgba(0,0,0,0.45)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  header: {
+    padding: "14px 18px",
+    borderBottom: "1px solid #334155",
+    display: "flex",
+    alignItems: "center",
+    gap: 10
+  },
+  brandDot: {
+    width: 8,
+    height: 8,
+    borderRadius: "50%",
+    background: "#4f46e5",
+    boxShadow: "0 0 8px #818cf8"
+  },
+  title: {
+    margin: 0,
+    fontSize: 14,
+    fontWeight: 700,
+    letterSpacing: 0.2,
+    color: "#f1f5f9",
+    fontFamily: "ui-monospace,monospace"
+  },
+  headerHint: { marginLeft: "auto", fontSize: 11, color: "#64748b" },
+  body: { padding: 18, display: "flex", flexDirection: "column", gap: 12, overflow: "auto" },
+  label: {
+    fontSize: 11,
+    fontWeight: 600,
+    color: "#94a3b8",
+    letterSpacing: 0.4,
+    textTransform: "uppercase"
+  },
+  textarea: {
+    width: "100%",
+    minHeight: 180,
+    padding: "10px 12px",
+    borderRadius: 8,
+    background: "#0f172a",
+    color: "#e2e8f0",
+    border: "1px solid #334155",
+    outline: "none",
+    fontFamily: "ui-monospace,SFMono-Regular,Menlo,Consolas,monospace",
+    fontSize: 12,
+    lineHeight: 1.55,
+    resize: "vertical",
+    boxSizing: "border-box"
+  },
+  fileRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 10,
+    padding: "10px 12px",
+    borderRadius: 8,
+    background: "rgba(79, 70, 229, 0.08)",
+    border: "1px dashed rgba(79, 70, 229, 0.4)"
+  },
+  hiddenFile: { display: "none" },
+  fileBtn: {
+    padding: "6px 12px",
+    borderRadius: 6,
+    cursor: "pointer",
+    background: "#4f46e5",
+    color: "#fff",
+    border: "none",
+    fontSize: 11,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    letterSpacing: 0.2
+  },
+  fileName: {
+    fontSize: 11,
+    color: "#cbd5e1",
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  status: { display: "flex", alignItems: "center", minHeight: 16 },
+  error: { fontSize: 11, color: "#fca5a5", fontWeight: 500 },
+  ok: { fontSize: 11, color: "#86efac", fontWeight: 500 },
+  footer: {
+    padding: "12px 18px",
+    borderTop: "1px solid #334155",
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8,
+    background: "#0f172a"
+  },
+  cancelBtn: {
+    padding: "6px 14px",
+    borderRadius: 6,
+    cursor: "pointer",
+    background: "transparent",
+    color: "#cbd5e1",
+    border: "1px solid #334155",
+    fontSize: 12,
+    fontWeight: 500,
+    fontFamily: "inherit"
+  },
+  submitBtn: {
+    padding: "6px 14px",
+    borderRadius: 6,
+    cursor: "pointer",
+    background: "#4f46e5",
+    color: "#fff",
+    border: "none",
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    letterSpacing: 0.2
+  },
+  submitBtnDisabled: { cursor: "not-allowed", background: "rgba(79,70,229,0.35)" }
+};
+
+// src/ui/theme.ts
+var lightTheme = {
+  canvas: "#fafbfc",
+  dot: "#dbe3ee",
+  nodeFill: "#ffffff",
+  nodeStroke: "#cbd5e1",
+  nodeSelectedFill: "#eef2ff",
+  edgeColor: "#94a3b8",
+  textPrimary: "#1e293b",
+  textSecondary: "#475569",
+  textMuted: "#94a3b8",
+  panelBg: "#ffffff",
+  panelBorder: "#e2e8f0",
+  ctrlsBg: "#ffffff",
+  ctrlsBorder: "#cbd5e1",
+  inputBg: "#f8fafc",
+  inputBorder: "#e2e8f0",
+  inputText: "#1e293b",
+  cardBg: "#f8fafc",
+  cardBorder: "#e2e8f0",
+  sectionBorder: "#f1f5f9",
+  labelText: "#94a3b8",
+  hintText: "#94a3b8",
+  statusBg: "#ffffff",
+  btnSecBg: "#e2e8f0",
+  btnSecText: "#475569",
+  shapeBtnBg: "#f1f5f9",
+  shapeBtnBorder: "#e2e8f0",
+  addFormBg: "#f5f3ff",
+  bannerBg: "#f8fafc"
+};
+var darkTheme = {
+  canvas: "#0f172a",
+  dot: "#1e293b",
+  nodeFill: "#1e293b",
+  nodeStroke: "#334155",
+  nodeSelectedFill: "#1e1b4b",
+  edgeColor: "#475569",
+  textPrimary: "#f1f5f9",
+  textSecondary: "#94a3b8",
+  textMuted: "#475569",
+  panelBg: "#1e293b",
+  panelBorder: "#334155",
+  ctrlsBg: "#0f172a",
+  ctrlsBorder: "#1e293b",
+  inputBg: "#0f172a",
+  inputBorder: "#334155",
+  inputText: "#e2e8f0",
+  cardBg: "#0f172a",
+  cardBorder: "#334155",
+  sectionBorder: "#0f172a",
+  labelText: "#475569",
+  hintText: "#475569",
+  statusBg: "#0f172a",
+  btnSecBg: "#334155",
+  btnSecText: "#94a3b8",
+  shapeBtnBg: "#0f172a",
+  shapeBtnBorder: "#334155",
+  addFormBg: "#1e1b4b",
+  bannerBg: "#1e293b"
+};
+var ACCENT = {
+  indigo: "#4f46e5",
+  indigoGlow: "rgba(79,70,229,0.22)",
+  indigoLight: "#818cf8",
+  indigoText: "#a5b4fc",
+  indigoSoftBg: "rgba(79,70,229,0.15)",
+  indigoSoftBorder: "rgba(79,70,229,0.3)",
+  amber: "#d97706",
+  amberLight: "#fef3c7",
+  amberBorder: "#fcd34d",
+  amberGlow: "rgba(217,119,6,0.25)",
+  amberDark: "#fbbf24",
+  amberDarkLight: "rgba(251,191,36,0.12)",
+  amberDarkBorder: "rgba(251,191,36,0.3)",
+  emerald: "#059669",
+  emeraldLight: "#ecfdf5",
+  emeraldGlow: "rgba(5,150,105,0.2)",
+  emeraldDark: "#10b981",
+  emeraldDarkLight: "rgba(16,185,129,0.12)",
+  emeraldDarkBorder: "rgba(16,185,129,0.3)"
+};
+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 };
+  }
+  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: "#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
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ALL_FORMATS = [
+  { key: "mermaid", label: "Mermaid" },
+  { key: "plantuml", label: "PlantUML" },
+  { key: "json", label: "JSON" },
+  { key: "svg", label: "SVG" },
+  { key: "png", label: "PNG" }
+];
+function Toolbar({ onExport, onImport, allowedExports, allowImport = true }) {
+  const [importOpen, setImportOpen] = useState2(false);
+  const formats = allowedExports ? ALL_FORMATS.filter((f) => allowedExports.includes(f.key)) : ALL_FORMATS;
+  return /* @__PURE__ */ jsxs2("div", { style: bar, children: [
+    /* @__PURE__ */ jsxs2("div", { style: brand, children: [
+      /* @__PURE__ */ jsx2("div", { style: brandDot }),
+      /* @__PURE__ */ jsx2("span", { children: "flowchart" }),
+      /* @__PURE__ */ jsx2("span", { style: { color: darkTheme.textSecondary, fontWeight: 400 }, children: "/" }),
+      /* @__PURE__ */ jsx2("span", { style: { color: ACCENT.indigo }, children: "designer" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { style: divider }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
+      allowImport && onImport && /* @__PURE__ */ jsx2("button", { onClick: () => setImportOpen(true), style: ghostBtn, children: "\u2191 Import" }),
+      formats.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 11, color: darkTheme.inputText, margin: "0 4px" }, children: "Export \u2192" }),
+        formats.map((f) => /* @__PURE__ */ jsx2("button", { onClick: () => onExport(f.key), style: exportBtn, children: f.label }, f.key))
+      ] })
+    ] }),
+    onImport && /* @__PURE__ */ jsx2(
+      ImportDialog,
+      {
+        open: importOpen,
+        onClose: () => setImportOpen(false),
+        onImport
+      }
+    )
+  ] });
+}
+var bar = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  padding: "0 14px",
+  height: 44,
+  background: darkTheme.panelBg,
+  borderBottom: `1px solid ${darkTheme.panelBorder}`,
+  flexShrink: 0
+};
+var brand = {
+  display: "flex",
+  alignItems: "center",
+  gap: 5,
+  fontSize: 13,
+  fontWeight: 700,
+  color: darkTheme.textPrimary,
+  letterSpacing: 0.2,
+  fontFamily: "ui-monospace,monospace"
+};
+var brandDot = {
+  width: 7,
+  height: 7,
+  borderRadius: "50%",
+  background: ACCENT.indigo,
+  boxShadow: `0 0 6px ${ACCENT.indigoLight}`
+};
+var divider = {
+  width: 1,
+  height: 20,
+  background: darkTheme.panelBorder,
+  margin: "0 4px"
+};
+var ghostBtn = {
+  padding: "4px 10px",
+  background: "transparent",
+  color: darkTheme.textSecondary,
+  border: `1px solid ${darkTheme.panelBorder}`,
+  borderRadius: 6,
+  cursor: "pointer",
+  fontSize: 11,
+  fontWeight: 500,
+  fontFamily: "inherit",
+  letterSpacing: 0.2
+};
+var exportBtn = {
+  padding: "4px 10px",
+  background: ACCENT.indigoSoftBg,
+  color: ACCENT.indigoText,
+  border: `1px solid ${ACCENT.indigoSoftBorder}`,
+  borderRadius: 6,
+  cursor: "pointer",
+  fontSize: 11,
+  fontWeight: 600,
+  fontFamily: "ui-monospace,monospace",
+  letterSpacing: 0.3
+};
+
+// src/ui/StepEditor.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+
+// src/core/ids.ts
+function makeIdSource(prefix, existing) {
+  const first = nextId(prefix, existing);
+  let counter = parseInt(first.slice(prefix.length), 10);
+  return () => `${prefix}${counter++}`;
+}
+function nextId(prefix, existing) {
+  const escaped = prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const re = new RegExp(`^${escaped}(\\d+)$`);
+  let max = 0;
+  for (const item of existing) {
+    const match = re.exec(item.id);
+    if (match) {
+      const n = parseInt(match[1], 10);
+      if (n > max) max = n;
+    }
+  }
+  return `${prefix}${max + 1}`;
+}
+
+// src/ui/StepEditor.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SHAPES = [
+  { key: "rectangle", label: "Box", icon: "\u25AD" },
+  { key: "diamond", label: "Decision", icon: "\u25C7" },
+  { key: "circle", label: "Circle", icon: "\u25CB" },
+  { key: "parallelogram", label: "I/O", icon: "\u25B1" }
+];
+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);
+  const aa = acc ?? variantAccent(variant, isDark);
+  const accentColor = aa.color;
+  const accentLight = aa.fill;
+  const accentBorder = aa.border;
+  const node = model.nodes.find((n) => n.id === nodeId);
+  const [label, setLabel] = useState3(node?.label ?? "");
+  const [addingBranch, setAddingBranch] = useState3(false);
+  const [branchMode, setBranchMode] = useState3("new");
+  const [branchLabel, setBranchLabel] = useState3("");
+  const [branchEdgeLabel, setBranchEdgeLabel] = useState3("");
+  const [branchTarget, setBranchTarget] = useState3("");
+  const [newAnswer, setNewAnswer] = useState3("");
+  const [addingAnswer, setAddingAnswer] = useState3(false);
+  const inputRef = useRef2(null);
+  useEffect2(() => {
+    setLabel(node?.label ?? "");
+    setAddingBranch(false);
+    setAddingAnswer(false);
+    setBranchLabel("");
+    setBranchEdgeLabel("");
+    setBranchTarget("");
+    setNewAnswer("");
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, [nodeId]);
+  if (!node) return null;
+  const outEdges = model.edges.filter((e) => e.from === nodeId);
+  const otherNodes = model.nodes.filter((n) => n.id !== nodeId);
+  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) });
+  };
+  const setShape = (shape) => {
+    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) });
+  };
+  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] });
+    } 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 };
+      onModelChange({ ...model, edges: [...model.edges, newEdge] });
+    }
+    setBranchLabel("");
+    setBranchEdgeLabel("");
+    setBranchTarget("");
+    setAddingBranch(false);
+  };
+  const addAnswer = () => {
+    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) });
+    setNewAnswer("");
+    setAddingAnswer(false);
+  };
+  const removeAnswer = (ans) => {
+    const updated = answers.filter((a) => a !== ans);
+    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),
+      edges: updatedEdges
+    });
+  };
+  const moveAnswer = (idx, dir) => {
+    const next = idx + dir;
+    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) });
+  };
+  const inputStyle = {
+    width: "100%",
+    padding: "7px 10px",
+    border: `1.5px solid ${tt.inputBorder}`,
+    borderRadius: 8,
+    fontSize: 13,
+    outline: "none",
+    boxSizing: "border-box",
+    fontFamily: "inherit",
+    color: tt.inputText,
+    background: tt.inputBg,
+    transition: "border-color 0.15s"
+  };
+  const addBtnStyle = {
+    flex: 1,
+    padding: "7px 0",
+    background: accentColor,
+    color: "#fff",
+    border: "none",
+    borderRadius: 7,
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "inherit"
+  };
+  const cancelBtnStyle = {
+    padding: "7px 14px",
+    background: tt.btnSecBg,
+    color: tt.btnSecText,
+    border: "none",
+    borderRadius: 7,
+    cursor: "pointer",
+    fontSize: 12,
+    fontFamily: "inherit"
+  };
+  const addTriggerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    marginTop: 10,
+    width: "100%",
+    padding: "9px 0",
+    background: "transparent",
+    color: accentColor,
+    border: `1.5px dashed ${accentBorder}`,
+    borderRadius: 10,
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "inherit",
+    transition: "background 0.15s, border-color 0.15s"
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: { width: 272, minWidth: 272, background: tt.panelBg, borderLeft: `1px solid ${tt.panelBorder}`, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs3("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__ */ jsx3("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accentColor } }),
+      /* @__PURE__ */ jsx3("span", { children: isQuestion2 ? "Question Editor" : variant === "journey" ? "Step Editor" : "Step Editor" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: { flex: 1, overflowY: "auto", display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxs3("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}` }, children: [
+        /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Name" }),
+        /* @__PURE__ */ jsx3(
+          "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"
+          }
+        )
+      ] }),
+      !isQuestion2 && /* @__PURE__ */ jsxs3("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}` }, children: [
+        /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, marginBottom: 8, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Shape" }),
+        /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }, children: SHAPES.map((s2) => {
+          const active = (node.shape ?? "rectangle") === s2.key;
+          return /* @__PURE__ */ jsxs3("button", { onClick: () => setShape(s2.key), style: {
+            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__ */ jsx3("span", { style: { fontSize: 16, lineHeight: 1 }, children: s2.icon }),
+            /* @__PURE__ */ jsx3("span", { style: { fontSize: 11, fontWeight: 500 }, children: s2.label })
+          ] }, s2.key);
+        }) })
+      ] }),
+      isQuestion2 && /* @__PURE__ */ jsxs3("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}`, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }, children: [
+          /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Answers" }),
+          /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsxs3("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__ */ jsx3("div", { style: { width: 4, alignSelf: "stretch", background: accentColor, flexShrink: 0 } }),
+            /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0, padding: "8px 10px" }, children: [
+              /* @__PURE__ */ jsx3("div", { style: { fontSize: 12, fontWeight: 600, color: tt.textPrimary, marginBottom: connected ? 3 : 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: ans }),
+              connected && targetNode && /* @__PURE__ */ jsxs3("div", { style: { fontSize: 11, color: accentColor, opacity: 0.85 }, children: [
+                "\u2192 ",
+                targetNode.label
+              ] }),
+              !connected && /* @__PURE__ */ jsx3("div", { style: { fontSize: 10, color: tt.textMuted, fontStyle: "italic" }, children: "drag port to connect" })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", padding: "4px 2px", gap: 2 }, children: [
+              /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsx3("button", { onClick: () => removeAnswer(ans), style: { background: "none", border: "none", color: tt.textMuted, cursor: "pointer", fontSize: 12, padding: "8px 10px", flexShrink: 0 }, title: "Remove", children: "\u2715" })
+          ] }, ans + i);
+        }),
+        addingAnswer ? /* @__PURE__ */ jsxs3("div", { style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
+          /* @__PURE__ */ jsx3("input", { autoFocus: true, value: newAnswer, onChange: (e) => setNewAnswer(e.target.value), onKeyDown: (e) => e.key === "Enter" && addAnswer(), placeholder: "Answer text\u2026", style: { ...inputStyle, marginBottom: 8 } }),
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 6 }, children: [
+            /* @__PURE__ */ jsx3("button", { onClick: addAnswer, style: addBtnStyle, children: "Add Answer" }),
+            /* @__PURE__ */ jsx3("button", { onClick: () => {
+              setAddingAnswer(false);
+              setNewAnswer("");
+            }, style: cancelBtnStyle, children: "Cancel" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs3("button", { onClick: () => setAddingAnswer(true), style: addTriggerStyle, children: [
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: 16, lineHeight: 1 }, children: "+" }),
+          " Add Answer"
+        ] }),
+        answers.length > 0 && /* @__PURE__ */ jsxs3("div", { style: { marginTop: 12, padding: "8px 10px", background: isDark ? "rgba(251,191,36,0.06)" : "#fef9f0", borderRadius: 8, border: `1px solid ${accentBorder}` }, children: [
+          /* @__PURE__ */ jsx3("div", { style: { fontSize: 10, fontWeight: 700, color: accentColor, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children: "How to connect" }),
+          /* @__PURE__ */ jsx3("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__ */ jsxs3("section", { style: { padding: "14px 16px", borderBottom: `1px solid ${tt.sectionBorder}`, flex: 1 }, children: [
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }, children: [
+          /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: 10, fontWeight: 700, color: tt.labelText, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Branches" }),
+          /* @__PURE__ */ jsx3("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__ */ jsx3("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__ */ jsxs3("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__ */ jsx3("div", { style: { width: 4, alignSelf: "stretch", background: accentColor, flexShrink: 0 } }),
+            /* @__PURE__ */ jsxs3("div", { style: { flex: 1, minWidth: 0, padding: "8px 10px" }, children: [
+              /* @__PURE__ */ jsxs3("div", { style: { fontSize: 12, fontWeight: 600, color: tt.textPrimary, marginBottom: 5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                "\u2192 ",
+                target?.label ?? edge.to
+              ] }),
+              /* @__PURE__ */ jsx3("input", { value: edge.label ?? "", onChange: (e) => updateEdgeLabel(edge.id, e.target.value), placeholder: "Edge label (optional)", style: { ...inputStyle, fontSize: 11, padding: "4px 8px" } })
+            ] }),
+            /* @__PURE__ */ jsx3("button", { onClick: () => removeEdge(edge.id), style: { background: "none", border: "none", color: tt.textMuted, cursor: "pointer", fontSize: 12, padding: "8px 10px", flexShrink: 0 }, title: "Remove", children: "\u2715" })
+          ] }, edge.id);
+        }),
+        addingBranch ? /* @__PURE__ */ jsxs3("div", { style: { marginTop: 10, background: tt.addFormBg, borderRadius: 10, padding: 12, border: `1.5px solid ${accentBorder}` }, children: [
+          /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: 6, marginBottom: 10 }, children: ["new", "existing"].map((mode) => /* @__PURE__ */ jsx3("button", { onClick: () => setBranchMode(mode), style: {
+            flex: 1,
+            padding: "5px 0",
+            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__ */ jsx3("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__ */ jsxs3("select", { value: branchTarget, onChange: (e) => setBranchTarget(e.target.value), style: { ...inputStyle, marginBottom: 6, appearance: "none" }, children: [
+            /* @__PURE__ */ jsx3("option", { value: "", children: "Choose a step\u2026" }),
+            otherNodes.map((n) => /* @__PURE__ */ jsx3("option", { value: n.id, children: n.label }, n.id))
+          ] }),
+          /* @__PURE__ */ jsx3("input", { value: branchEdgeLabel, onChange: (e) => setBranchEdgeLabel(e.target.value), placeholder: "Edge label (optional)", style: { ...inputStyle, marginBottom: 10 } }),
+          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 6 }, children: [
+            /* @__PURE__ */ jsxs3("button", { onClick: addBranch, style: addBtnStyle, children: [
+              "Add ",
+              branchTerm
+            ] }),
+            /* @__PURE__ */ jsx3("button", { onClick: () => setAddingBranch(false), style: cancelBtnStyle, children: "Cancel" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs3("button", { onClick: () => setAddingBranch(true), style: addTriggerStyle, children: [
+          /* @__PURE__ */ jsx3("span", { style: { fontSize: 16, lineHeight: 1 }, children: "+" }),
+          " Add ",
+          branchTerm
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/ui/SequenceEditor.tsx
+import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState5 } from "react";
+
+// src/ui/hooks/useEditorTheme.ts
+import { useMemo } from "react";
+
+// src/ui/hooks/useSystemTheme.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useIsDark(theme) {
+  const [sysDark, setSysDark] = useState4(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false
+  );
+  useEffect3(() => {
+    if (theme !== "auto" || typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e) => setSysDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  return theme === "dark" || theme === "auto" && sysDark;
+}
+function useIsCoarsePointer() {
+  const [coarse, setCoarse] = useState4(
+    () => typeof window !== "undefined" ? window.matchMedia("(pointer: coarse)").matches : false
+  );
+  useEffect3(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(pointer: coarse)");
+    const handler = (e) => setCoarse(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return coarse;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState4(
+    () => typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
+  );
+  useEffect3(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e) => setReduced(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+
+// src/ui/hooks/useEditorTheme.ts
+function useEditorTheme(theme, overrides, palettes) {
+  const isDark = useIsDark(theme);
+  const t = useMemo(
+    () => ({ ...isDark ? palettes.dark : palettes.light, ...overrides ?? {} }),
+    // palettes is a stable module-level constant in every caller, so it is
+    // deliberately omitted from the dep array to keep the memo key tight.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isDark, overrides]
+  );
+  return { t, isDark };
+}
+
+// src/ui/hooks/useExporters.ts
+import { useCallback as useCallback2 } from "react";
+
+// src/exporters/mermaid.ts
+var SHAPE_OPEN = {
+  rectangle: "[",
+  diamond: "{",
+  circle: "((",
+  parallelogram: "[/"
+};
+var SHAPE_CLOSE = {
+  rectangle: "]",
+  diamond: "}",
+  circle: "))",
+  parallelogram: "/]"
+};
+function formatNode(node) {
+  const shape = node.shape ?? "rectangle";
+  const open = SHAPE_OPEN[shape] ?? "[";
+  const close = SHAPE_CLOSE[shape] ?? "]";
+  return `  ${node.id}${open}"${node.label}"${close}`;
+}
+function edgeArrow(edge) {
+  const style = edge.style ?? "solid";
+  const arrowhead = edge.arrowhead ?? "arrow";
+  if (style === "dashed" || style === "dotted") return arrowhead === "none" ? "-.-" : "-.->";
+  return arrowhead === "none" ? "---" : "-->";
+}
+function formatEdge(edge) {
+  const arrow = edgeArrow(edge);
+  return edge.label ? `  ${edge.from} ${arrow}|"${edge.label}"| ${edge.to}` : `  ${edge.from} ${arrow} ${edge.to}`;
+}
+function exportFlowchart(model) {
+  const lines = ["graph TD"];
+  if (model.title) lines.unshift(`---
+title: ${model.title}
+---`);
+  for (const node of model.nodes) lines.push(formatNode(node));
+  for (const edge of model.edges) lines.push(formatEdge(edge));
+  return lines.join("\n");
+}
+function msgArrow(msg) {
+  return msg.style === "dashed" ? "-->>" : "->>";
+}
+function exportSequence(model) {
+  const lines = ["sequenceDiagram"];
+  if (model.title) lines.unshift(`---
+title: ${model.title}
+---`);
+  for (const actor of model.actors ?? []) lines.push(`  participant ${actor}`);
+  for (const msg of model.messages ?? []) {
+    lines.push(`  ${msg.from}${msgArrow(msg)}${msg.to}: ${msg.label}`);
+  }
+  return lines.join("\n");
+}
+function toMermaid(model) {
+  return model.type === "sequence" ? exportSequence(model) : exportFlowchart(model);
+}
+
+// src/exporters/plantuml.ts
+function nodeShape(node) {
+  switch (node.shape) {
+    case "diamond":
+      return ["<>", "<>"];
+    case "circle":
+      return ["(", ")"];
+    case "parallelogram":
+      return ["/", "/"];
+    default:
+      return ["[", "]"];
+  }
+}
+function exportFlowchart2(model) {
+  const lines = ["@startuml"];
+  if (model.title) lines.push(`title ${model.title}`);
+  lines.push("");
+  for (const node of model.nodes) {
+    const [open, close] = nodeShape(node);
+    lines.push(`state "${node.label}" as ${node.id} ${open}${close}`);
+  }
+  lines.push("");
+  for (const edge of model.edges) {
+    const arrow = edge.style === "dashed" ? "-[dashed]->" : edge.style === "dotted" ? "-[dotted]->" : "-->";
+    const label = edge.label ? ` : ${edge.label}` : "";
+    lines.push(`${edge.from} ${arrow} ${edge.to}${label}`);
+  }
+  lines.push("@enduml");
+  return lines.join("\n");
+}
+function msgArrow2(msg) {
+  return msg.style === "dashed" ? "-->" : "->";
+}
+function exportSequence2(model) {
+  const lines = ["@startuml"];
+  if (model.title) lines.push(`title ${model.title}`);
+  lines.push("");
+  for (const actor of model.actors ?? []) {
+    lines.push(`participant ${actor}`);
+  }
+  lines.push("");
+  for (const msg of model.messages ?? []) {
+    lines.push(`${msg.from} ${msgArrow2(msg)} ${msg.to} : ${msg.label}`);
+  }
+  lines.push("@enduml");
+  return lines.join("\n");
+}
+function toPlantUML(model) {
+  return model.type === "sequence" ? exportSequence2(model) : exportFlowchart2(model);
+}
+
+// src/exporters/json.ts
+function toJSON(model) {
+  return JSON.stringify(model, null, 2);
+}
+
+// src/exporters/svg.ts
+var NODE_H = 48;
+var Q_BASE_H = 68;
+var Q_ANS_ROW_H = 80;
+var Q_CARD_PAD = 8;
+var MIN_NODE_W = 120;
+var MAX_NODE_W = 320;
+var MIN_Q_W = 220;
+var PADDING = 48;
+var H_GAP = 80;
+var V_GAP = 96;
+function estimateTextW(text, pxPerChar = 7.5) {
+  return text.length * pxPerChar;
+}
+function nodeWidth(label) {
+  return Math.min(MAX_NODE_W, Math.max(MIN_NODE_W, Math.ceil(estimateTextW(label) + 48)));
+}
+function answerCardW(ans) {
+  return Math.max(86, Math.ceil(Math.max(estimateTextW(ans, 7.5) + 20, 56) + 32));
+}
+function questionNodeW(node) {
+  const answers = node.metadata?.answers ?? [];
+  const headerW = estimateTextW(node.label, 8) + 80;
+  if (answers.length === 0) return Math.max(MIN_Q_W, Math.ceil(headerW));
+  const cardsW = answers.reduce((s2, a) => s2 + answerCardW(a), 0) + (answers.length - 1) * Q_CARD_PAD + 2 * Q_CARD_PAD;
+  return Math.max(MIN_Q_W, Math.ceil(Math.max(headerW, cardsW)));
+}
+function questionNodeH(answers) {
+  return Q_BASE_H + (answers.length === 0 ? 48 : Q_ANS_ROW_H);
+}
+function bezierPath(x1, y1, x2, y2) {
+  const dy = y2 - y1;
+  const dyAbs = Math.abs(dy);
+  const dxAbs = Math.abs(x2 - x1);
+  const base = dy > 0 ? dyAbs * 0.55 : Math.max(90, dyAbs * 0.5 + dxAbs * 0.28);
+  const curve = Math.max(36, Math.min(220, base));
+  return `M ${x1} ${y1} C ${x1} ${y1 + curve}, ${x2} ${y2 - curve}, ${x2} ${y2}`;
+}
+function isQuestion(node, variant) {
+  return variant === "question" && !!node.metadata?.answers;
+}
+function computeLayout(model) {
+  const boxes = /* @__PURE__ */ new Map();
+  const sized = model.nodes.map((n) => {
+    const w = isQuestion(n, model.variant) ? questionNodeW(n) : nodeWidth(n.label);
+    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");
+  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 });
+    }
+    return boxes;
+  }
+  const inDeg = new Map(model.nodes.map((n) => [n.id, 0]));
+  for (const e of model.edges) inDeg.set(e.to, (inDeg.get(e.to) ?? 0) + 1);
+  const layers = /* @__PURE__ */ new Map();
+  const queue = model.nodes.filter((n) => (inDeg.get(n.id) ?? 0) === 0).map((n) => n.id);
+  for (const id of queue) layers.set(id, 0);
+  let head = 0;
+  while (head < queue.length) {
+    const cur = queue[head++];
+    const layer = layers.get(cur) ?? 0;
+    for (const e of model.edges) {
+      if (e.from === cur) {
+        const next = layers.get(e.to) ?? -1;
+        if (next < layer + 1) {
+          layers.set(e.to, layer + 1);
+          queue.push(e.to);
+        }
+      }
+    }
+  }
+  model.nodes.forEach((n) => {
+    if (!layers.has(n.id)) layers.set(n.id, 0);
+  });
+  const byLayer = /* @__PURE__ */ new Map();
+  for (const s2 of sized) {
+    const layer = layers.get(s2.node.id) ?? 0;
+    if (!byLayer.has(layer)) byLayer.set(layer, []);
+    byLayer.get(layer).push(s2);
+  }
+  let y = PADDING;
+  for (const layer of [...byLayer.keys()].sort((a, b) => a - b)) {
+    const row = byLayer.get(layer);
+    let x = PADDING;
+    let maxH = 0;
+    for (const s2 of row) {
+      boxes.set(s2.node.id, { x, y, w: s2.w, h: s2.h });
+      x += s2.w + H_GAP;
+      maxH = Math.max(maxH, s2.h);
+    }
+    y += maxH + V_GAP;
+  }
+  return boxes;
+}
+function escapeXML(s2) {
+  return s2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var COLORS = {
+  bg: "#fafbfc",
+  dot: "#dbe3ee",
+  nodeFill: "#ffffff",
+  nodeStroke: "#cbd5e1",
+  edge: "#94a3b8",
+  text: "#1e293b",
+  textSub: "#94a3b8",
+  amber: "#d97706",
+  amberSoft: "#fef9ee",
+  amberLine: "#fde68a",
+  amberCardBg: "#fffdf7"
+};
+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 = "";
+  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)"/>`;
+  } else if (shape === "circle") {
+    const r = Math.min(box.w, box.h) / 2 - 1;
+    shapeEl = `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  } else if (shape === "parallelogram") {
+    const pts = `${box.x + 14},${box.y} ${box.x + box.w},${box.y} ${box.x + box.w - 14},${box.y + box.h} ${box.x},${box.y + box.h}`;
+    shapeEl = `<polygon points="${pts}" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  } else {
+    shapeEl = `<rect x="${box.x}" y="${box.y}" width="${box.w}" height="${box.h}" rx="14" fill="${COLORS.nodeFill}" stroke="${COLORS.nodeStroke}" stroke-width="1.25" filter="url(#nodeShadow)"/>`;
+  }
+  return shapeEl + label;
+}
+function renderQuestionNode(node, box) {
+  const answers = node.metadata?.answers ?? [];
+  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"/>`);
+  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>`);
+  } else {
+    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    answers.forEach((ans, i) => {
+      const prevW = answers.slice(0, i).reduce((s2, a) => s2 + answerCardW(a) + Q_CARD_PAD, 0);
+      const cW = answerCardW(ans);
+      const cardX = x + Q_CARD_PAD + prevW;
+      const cardY = y + Q_BASE_H + 7;
+      const cardH = Q_ANS_ROW_H - 20;
+      const cx = cardX + cW / 2;
+      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>`);
+    });
+  }
+  return parts.join("");
+}
+function renderEdge(edge, boxes, variant, nodes) {
+  const fromBox = boxes.get(edge.from);
+  const toBox = boxes.get(edge.to);
+  if (!fromBox || !toBox) return "";
+  let x1, y1;
+  const fromNode = nodes.find((n) => n.id === edge.from);
+  if (fromNode && isQuestion(fromNode, variant)) {
+    const answers = fromNode.metadata?.answers ?? [];
+    const idx = answers.indexOf(edge.label ?? "");
+    if (idx >= 0) {
+      const prevW = answers.slice(0, idx).reduce((s2, a) => s2 + answerCardW(a) + Q_CARD_PAD, 0);
+      const cW = answerCardW(answers[idx]);
+      x1 = fromBox.x + Q_CARD_PAD + prevW + cW / 2;
+      y1 = fromBox.y + Q_BASE_H + Q_ANS_ROW_H - 8;
+    } else {
+      x1 = fromBox.x + fromBox.w / 2;
+      y1 = fromBox.y + fromBox.h;
+    }
+  } else {
+    x1 = fromBox.x + fromBox.w / 2;
+    y1 = fromBox.y + fromBox.h;
+  }
+  const x2 = toBox.x + toBox.w / 2;
+  const y2 = toBox.y;
+  const dash = edge.style === "dashed" ? ' stroke-dasharray="6,4"' : edge.style === "dotted" ? ' stroke-dasharray="2,3"' : "";
+  const marker = edge.arrowhead === "none" ? "" : ' marker-end="url(#arrow)"';
+  const d = bezierPath(x1, y1, x2, y2);
+  let out = `<path d="${d}" fill="none" stroke="${COLORS.edge}" stroke-width="1.5"${dash}${marker}/>`;
+  if (edge.label) {
+    const midX = (x1 + x2) / 2;
+    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>`;
+  }
+  return out;
+}
+function toSVG(model) {
+  const boxes = computeLayout(model);
+  let maxX = 0, maxY = 0;
+  for (const b of boxes.values()) {
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+  }
+  const width = maxX + PADDING;
+  const height = maxY + PADDING + (model.title ? 32 : 0);
+  const defs = [
+    `<defs>`,
+    `<pattern id="dotgrid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">`,
+    `<circle cx="12" cy="12" r="1.1" fill="${COLORS.dot}"/>`,
+    `</pattern>`,
+    `<filter id="nodeShadow" x="-20%" y="-20%" width="140%" height="140%">`,
+    `<feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="rgba(15,23,42,0.09)"/>`,
+    `</filter>`,
+    `<marker id="arrow" markerWidth="9" markerHeight="7" refX="8.5" refY="3.5" orient="auto" markerUnits="strokeWidth">`,
+    `<path d="M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z" fill="${COLORS.edge}"/>`,
+    `</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 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);
+    return isQuestion(n, model.variant) ? renderQuestionNode(n, b) : renderStandardNode(n, b);
+  }).join("\n");
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+${defs}
+<rect width="${width}" height="${height}" fill="${COLORS.bg}"/>
+<rect width="${width}" height="${height}" fill="url(#dotgrid)"/>
+${titleEl}
+${edges}
+${nodes}
+</svg>`;
+}
+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.");
+  }
+  const svg = toSVG(model);
+  const blob = new Blob([svg], { type: "image/svg+xml" });
+  const url = URL.createObjectURL(blob);
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      const scale = window.devicePixelRatio || 2;
+      canvas.width = img.naturalWidth * scale;
+      canvas.height = img.naturalHeight * scale;
+      const ctx = canvas.getContext("2d");
+      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");
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("SVG image load failed"));
+    };
+    img.src = url;
+  });
+}
+
+// src/ui/hooks/useExporters.ts
+function useExporters(model, onExport, filename = "diagram") {
+  return useCallback2(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);
+      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);
+  }, [model, onExport, filename]);
+}
+
+// src/ui/hooks/useImporter.ts
+import { useCallback as useCallback3 } from "react";
+
+// src/core/model.ts
+var Model = class _Model {
+  data;
+  /**
+   * Create an empty model.
+   *
+   * @param type     Top-level kind — `flowchart` or `sequence`.
+   * @param title    Optional human-readable title.
+   * @param variant  Optional UI variant (flowchart models only).
+   */
+  constructor(type, title, variant) {
+    this.data = { type, ...variant ? { variant } : {}, title, nodes: [], edges: [], actors: [], messages: [] };
+  }
+  /**
+   * Rehydrate a `Model` from a previously serialized `DiagramModel`. The
+   * incoming data is deep-cloned, so future mutations on the returned `Model`
+   * do not affect the caller's object.
+   */
+  static fromData(data) {
+    const m = new _Model(data.type, data.title, data.variant);
+    m.data = structuredClone(data);
+    return m;
+  }
+  /** Set the UI variant. No-op semantics for sequence models. */
+  setVariant(variant) {
+    this.data.variant = variant;
+    return this;
+  }
+  /**
+   * Append a node. Throws if a node with the same id already exists. The
+   * input is shallow-cloned, so later mutations of the caller's object do
+   * not leak in.
+   */
+  addNode(node) {
+    if (this.data.nodes.find((n) => n.id === node.id)) {
+      throw new Error(`Node with id "${node.id}" already exists`);
+    }
+    this.data.nodes.push({ ...node });
+    return this;
+  }
+  /**
+   * Patch an existing node in place. Throws if the id is not found. The id
+   * field itself cannot be patched — to rename, remove + re-add.
+   */
+  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);
+    return this;
+  }
+  /**
+   * Remove a node and every edge that referenced it as `from` or `to`. Safe
+   * to call on a missing id (no-op).
+   */
+  removeNode(id) {
+    this.data.nodes = this.data.nodes.filter((n) => n.id !== id);
+    this.data.edges = this.data.edges.filter((e) => e.from !== id && e.to !== id);
+    return this;
+  }
+  /**
+   * Append an edge. Throws on duplicate id or if either endpoint references
+   * an unknown node — the model never holds dangling edges from this entry
+   * point. (Importers can still construct dangling edges; call `validate()`
+   * to detect them.)
+   */
+  addEdge(edge) {
+    if (this.data.edges.find((e) => e.id === edge.id)) {
+      throw new Error(`Edge with id "${edge.id}" already exists`);
+    }
+    if (!this.data.nodes.find((n) => n.id === edge.from)) {
+      throw new Error(`Edge "${edge.id}" references unknown source node "${edge.from}"`);
+    }
+    if (!this.data.nodes.find((n) => n.id === edge.to)) {
+      throw new Error(`Edge "${edge.id}" references unknown target node "${edge.to}"`);
+    }
+    this.data.edges.push({ ...edge });
+    return this;
+  }
+  /**
+   * Surface structural problems without throwing. Returns an array of
+   * `ValidationError`s; empty array means the model is well-formed. Used by
+   * the editor's status banner and by external tooling.
+   */
+  validate() {
+    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}"` });
+      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}"` });
+      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}"` });
+    }
+    return errors;
+  }
+  /** Remove an edge by id. Safe to call on a missing id (no-op). */
+  removeEdge(id) {
+    this.data.edges = this.data.edges.filter((e) => e.id !== id);
+    return this;
+  }
+  /** Append a sequence actor. Duplicate names are silently ignored. */
+  addActor(name) {
+    if (!this.data.actors.includes(name)) {
+      this.data.actors.push(name);
+    }
+    return this;
+  }
+  /**
+   * Append a sequence message. The actors referenced by `from`/`to` are not
+   * validated here — callers are expected to register them via `addActor()`
+   * first.
+   */
+  addMessage(message) {
+    this.data.messages.push({ ...message });
+    return this;
+  }
+  /**
+   * Return a deep-cloned plain `DiagramModel`. Safe to mutate by the caller;
+   * mutations do not flow back into this `Model`.
+   */
+  toJSON() {
+    return structuredClone(this.data);
+  }
+};
+
+// src/importers/mermaid.ts
+function parseNodeDecl(raw) {
+  const patterns = [
+    [/^(\w+)\{\{?"?(.+?)"?\}?\}$/, "diamond"],
+    [/^(\w+)\(\("?(.+?)"?\)\)$/, "circle"],
+    [/^(\w+)\[\/(.+?)\/\]$/, "parallelogram"],
+    [/^(\w+)\[["']?(.+?)["']?\]$/, "rectangle"],
+    [/^(\w+)\("?(.+?)"?\)$/, "rectangle"]
+  ];
+  for (const [re, shape] of patterns) {
+    const m = raw.match(re);
+    if (m) return { id: m[1], label: m[2].replace(/^["']|["']$/g, ""), shape };
+  }
+  return null;
+}
+var EDGE_RE = /^(.+?)\s*(-\.->|-\.-|-->|---)(?:\|(.+?)\|)?\s*(.+)$/;
+function detectStyle(connector) {
+  return connector.startsWith("-.") ? "dashed" : "solid";
+}
+function detectArrowhead(connector) {
+  return connector.endsWith(">") ? "arrow" : "none";
+}
+function parseFlowchart(lines) {
+  const model = new Model("flowchart");
+  const nodeMap = /* @__PURE__ */ new Map();
+  const groupStack = [];
+  const ensureNode = (id, group) => {
+    if (!nodeMap.has(id)) {
+      nodeMap.set(id, true);
+      const metadata = group ? { group } : void 0;
+      model.addNode({ id, label: id, shape: "rectangle", ...metadata ? { metadata } : {} });
+    }
+  };
+  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;
+    const subgraphOpen = trimmed.match(/^subgraph\s+(\S+)/i);
+    if (subgraphOpen) {
+      groupStack.push(subgraphOpen[1]);
+      continue;
+    }
+    if (/^end\b/i.test(trimmed)) {
+      groupStack.pop();
+      continue;
+    }
+    const currentGroup = groupStack[groupStack.length - 1];
+    const edgeMatch = trimmed.match(EDGE_RE);
+    if (edgeMatch) {
+      const fromRaw = edgeMatch[1].trim();
+      const connector = edgeMatch[2];
+      const label = edgeMatch[3]?.replace(/^["']|["']$/g, "");
+      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)) {
+        nodeMap.set(fromNode.id, true);
+        const metadata = currentGroup ? { group: currentGroup } : void 0;
+        model.addNode({ ...fromNode, ...metadata ? { metadata } : {} });
+      } else if (!fromNode) {
+        ensureNode(fromRaw.replace(/\W.*/, ""), currentGroup);
+      }
+      if (toNode && !nodeMap.has(toNode.id)) {
+        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);
+      }
+      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 } : {},
+        style,
+        ...arrowhead === "none" ? { arrowhead } : {}
+      });
+      continue;
+    }
+    const nodeDecl = parseNodeDecl(trimmed);
+    if (nodeDecl && !nodeMap.has(nodeDecl.id)) {
+      nodeMap.set(nodeDecl.id, true);
+      const metadata = currentGroup ? { group: currentGroup } : void 0;
+      model.addNode({ ...nodeDecl, ...metadata ? { metadata } : {} });
+    }
+  }
+  return model;
+}
+function parseSequence(lines, title) {
+  const model = new Model("sequence", title);
+  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());
+      continue;
+    }
+    const actorMatch = trimmed.match(/^actor\s+(.+)$/i);
+    if (actorMatch) {
+      model.addActor(actorMatch[1].trim());
+      continue;
+    }
+    const msgMatch = trimmed.match(/^(.+?)\s*(-->>|->>|-->|->)\s*(.+?):\s*(.+)$/);
+    if (msgMatch) {
+      const from = msgMatch[1].trim();
+      const arrow = msgMatch[2];
+      const to = msgMatch[3].trim();
+      const label = msgMatch[4].trim();
+      model.addActor(from);
+      model.addActor(to);
+      const messages = model.toJSON().messages ?? [];
+      model.addMessage({ id: nextId("m", messages), from, to, label, style: arrow.startsWith("--") ? "dashed" : "solid" });
+    }
+  }
+  return model;
+}
+function fromMermaid(mermaid) {
+  const cleaned = mermaid.replace(/mermaid\.initialize\([\s\S]*?\)\s*;?/g, "");
+  const rawLines = cleaned.split("\n");
+  let startIdx = 0;
+  let title;
+  if (rawLines[0]?.trim() === "---") {
+    const endFm = rawLines.findIndex((l, i) => i > 0 && l.trim() === "---");
+    if (endFm !== -1) {
+      const fmLines = rawLines.slice(1, endFm);
+      for (const fl of fmLines) {
+        const tm = fl.match(/^title:\s*(.+)$/);
+        if (tm) title = tm[1].trim();
+      }
+      startIdx = endFm + 1;
+    }
+  }
+  const lines = rawLines.slice(startIdx);
+  const firstContent = lines.find((l) => l.trim());
+  if (firstContent?.trim().startsWith("sequenceDiagram")) {
+    const m2 = parseSequence(lines, title);
+    return m2;
+  }
+  const m = parseFlowchart(lines);
+  if (title) {
+    const data = m.toJSON();
+    data.title = title;
+    return Model.fromData(data);
+  }
+  return m;
+}
+
+// src/importers/json.ts
+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");
+  }
+  return Model.fromData(data);
+}
+
+// src/ui/hooks/useImporter.ts
+function useImporter(applyAndPush, options = {}) {
+  const { expectedType, transform } = options;
+  return useCallback3((text) => {
+    try {
+      const parsed = text.trim().startsWith("{") ? fromJSON(text).toJSON() : fromMermaid(text).toJSON();
+      if (expectedType && parsed.type !== expectedType) {
+        alert(`Imported diagram is not a ${expectedType} diagram.`);
+        return;
+      }
+      applyAndPush(transform ? transform(parsed) : parsed);
+    } catch (err) {
+      alert(`Import failed: ${err.message}`);
+    }
+  }, [applyAndPush, expectedType, transform]);
+}
+
+// src/ui/presets.ts
+function emptyModel(type, variant) {
+  if (type === "sequence") {
+    return { type: "sequence", nodes: [], edges: [], actors: [], messages: [] };
+  }
+  return { type: "flowchart", variant: variant ?? "flowchart", nodes: [], edges: [] };
+}
+var FLOWCHART_PRESET = {
+  type: "flowchart",
+  variant: "flowchart",
+  nodes: [
+    { id: "start", label: "Start", shape: "circle", x: 240, y: 60 },
+    { id: "place", label: "Place order", shape: "rectangle", x: 216, y: 180 },
+    { id: "check", label: "Payment valid?", shape: "diamond", x: 200, y: 300 },
+    { id: "confirm", label: "Send confirmation", shape: "rectangle", x: 60, y: 460 },
+    { id: "retry", label: "Notify failure", shape: "rectangle", x: 380, y: 460 },
+    { id: "done", label: "Done", shape: "circle", x: 240, y: 580 }
+  ],
+  edges: [
+    { id: "e1", from: "start", to: "place" },
+    { id: "e2", from: "place", to: "check" },
+    { id: "e3", from: "check", to: "confirm", label: "yes" },
+    { id: "e4", from: "check", to: "retry", label: "no", style: "dashed" },
+    { id: "e5", from: "confirm", to: "done" },
+    { id: "e6", from: "retry", to: "done", style: "dashed" }
+  ]
+};
+var QUESTION_PRESET = {
+  type: "flowchart",
+  variant: "question",
+  nodes: [
+    {
+      id: "role",
+      label: "What is your role?",
+      shape: "rectangle",
+      x: 220,
+      y: 60,
+      metadata: { answers: ["Engineer", "Designer", "PM"] }
+    },
+    { id: "eng", label: "Engineering docs", shape: "rectangle", x: 40, y: 320 },
+    { id: "design", label: "Design system", shape: "rectangle", x: 280, y: 320 },
+    { id: "pm", label: "Product roadmap", shape: "rectangle", x: 520, y: 320 }
+  ],
+  edges: [
+    { id: "q1", from: "role", to: "eng", label: "Engineer" },
+    { id: "q2", from: "role", to: "design", label: "Designer" },
+    { id: "q3", from: "role", to: "pm", label: "PM" }
+  ]
+};
+var JOURNEY_PRESET = {
+  type: "flowchart",
+  variant: "journey",
+  nodes: [
+    { id: "j1", label: "Sign up", shape: "rectangle", x: 60, y: 60 },
+    { id: "j2", label: "Verify email", shape: "rectangle", x: 60, y: 180 },
+    { id: "j3", label: "Complete profile", shape: "rectangle", x: 60, y: 300 },
+    { id: "j4", label: "Invite team", shape: "rectangle", x: 60, y: 420 },
+    { id: "j5", label: "Launch project", shape: "rectangle", x: 60, y: 540 }
+  ],
+  edges: [
+    { id: "je1", from: "j1", to: "j2" },
+    { id: "je2", from: "j2", to: "j3" },
+    { id: "je3", from: "j3", to: "j4" },
+    { id: "je4", from: "j4", to: "j5" }
+  ]
+};
+var SEQUENCE_PRESET = {
+  type: "sequence",
+  nodes: [],
+  edges: [],
+  actors: ["User", "App", "Server"],
+  messages: [
+    { id: "m1", from: "User", to: "App", label: 'Tap "Log in"' },
+    { id: "m2", from: "App", to: "Server", label: "POST /login" },
+    { id: "m3", from: "Server", to: "App", label: "200 OK + token", style: "dashed" },
+    { id: "m4", from: "App", to: "User", label: "Show dashboard", style: "dashed" }
+  ]
+};
+function presetFlowchartModel(variant = "flowchart") {
+  if (variant === "question") return cloneModel(QUESTION_PRESET);
+  if (variant === "journey") return cloneModel(JOURNEY_PRESET);
+  return cloneModel(FLOWCHART_PRESET);
+}
+function presetSequenceModel() {
+  return cloneModel(SEQUENCE_PRESET);
+}
+function cloneModel(m) {
+  return {
+    ...m,
+    nodes: m.nodes.map((n) => ({ ...n, metadata: n.metadata ? { ...n.metadata } : void 0 })),
+    edges: m.edges.map((e) => ({ ...e })),
+    actors: m.actors ? [...m.actors] : void 0,
+    messages: m.messages?.map((msg) => ({ ...msg }))
+  };
+}
+
+// src/ui/SequenceEditor.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var INDIGO = "#4f46e5";
+var INDIGO_SOFT = "#eef2ff";
+var lightTheme2 = {
+  canvas: "#fafbfc",
+  dot: "#dbe3ee",
+  panelBg: "#ffffff",
+  panelBorder: "#e2e8f0",
+  ctrlsBg: "#ffffff",
+  ctrlsBorder: "#cbd5e1",
+  inputBg: "#f8fafc",
+  inputBorder: "#e2e8f0",
+  inputText: "#1e293b",
+  textPrimary: "#1e293b",
+  textSecondary: "#475569",
+  textMuted: "#94a3b8",
+  cardBg: "#ffffff",
+  cardBorder: "#e2e8f0",
+  lifeline: "#cbd5e1",
+  arrow: "#64748b",
+  actorFill: "#f5f3ff",
+  actorStroke: "#c7d2fe",
+  actorText: "#4338ca"
+};
+var darkTheme2 = {
+  canvas: "#0f172a",
+  dot: "#1e293b",
+  panelBg: "#1e293b",
+  panelBorder: "#334155",
+  ctrlsBg: "#0f172a",
+  ctrlsBorder: "#1e293b",
+  inputBg: "#0f172a",
+  inputBorder: "#334155",
+  inputText: "#e2e8f0",
+  textPrimary: "#f1f5f9",
+  textSecondary: "#94a3b8",
+  textMuted: "#475569",
+  cardBg: "#0f172a",
+  cardBorder: "#334155",
+  lifeline: "#334155",
+  arrow: "#64748b",
+  actorFill: "#1e1b4b",
+  actorStroke: "rgba(99,102,241,0.45)",
+  actorText: "#a5b4fc"
+};
+var HEADER_H = 64;
+var HEADER_PAD = 24;
+var COL_MIN = 160;
+var ROW_H = 64;
+var SIDE_PAD = 40;
+var DRAG_THRESHOLD = 5;
+function ensureSequenceModel(m) {
+  if (m && m.type === "sequence") {
+    return { ...m, actors: m.actors ?? [], messages: m.messages ?? [] };
+  }
+  return presetSequenceModel();
+}
+function SequenceEditor({
+  initialModel,
+  onChange,
+  onExport,
+  height = 600,
+  allowedExports,
+  allowImport = true,
+  theme = "auto",
+  themeOverrides
+}) {
+  const [model, setModel] = useState5(() => ensureSequenceModel(initialModel));
+  const [selected, setSelected] = useState5(null);
+  const [drag, setDrag] = useState5(null);
+  const [editingId, setEditingId] = useState5(null);
+  const [editLabel, setEditLabel] = useState5("");
+  const historyRef = useRef3([ensureSequenceModel(initialModel)]);
+  const historyIdxRef = useRef3(0);
+  const svgRef = useRef3(null);
+  const { t, isDark } = useEditorTheme(theme, themeOverrides, { light: lightTheme2, dark: darkTheme2 });
+  const actors = model.actors ?? [];
+  const messages = model.messages ?? [];
+  const colW = useMemo2(() => {
+    const longest = actors.reduce((m, a) => Math.max(m, a.length), 6);
+    return Math.max(COL_MIN, longest * 9 + 40);
+  }, [actors]);
+  const totalW = SIDE_PAD * 2 + Math.max(1, actors.length) * colW;
+  const totalH = HEADER_PAD + HEADER_H + 32 + messages.length * ROW_H + 48;
+  const actorX = (name) => {
+    const idx = actors.indexOf(name);
+    if (idx < 0) return SIDE_PAD + colW / 2;
+    return SIDE_PAD + idx * colW + colW / 2;
+  };
+  const msgY = (idx) => HEADER_PAD + HEADER_H + 40 + idx * ROW_H;
+  const pushHistory = useCallback4((m) => {
+    const stack = historyRef.current.slice(0, historyIdxRef.current + 1);
+    stack.push(m);
+    if (stack.length > 80) stack.shift();
+    historyRef.current = stack;
+    historyIdxRef.current = stack.length - 1;
+  }, []);
+  const applyAndPush = useCallback4((m) => {
+    setModel(m);
+    onChange?.(m);
+    pushHistory(m);
+  }, [onChange, pushHistory]);
+  const undo = useCallback4(() => {
+    if (historyIdxRef.current <= 0) return;
+    historyIdxRef.current--;
+    const m = historyRef.current[historyIdxRef.current];
+    setModel(m);
+    onChange?.(m);
+  }, [onChange]);
+  const redo = useCallback4(() => {
+    if (historyIdxRef.current >= historyRef.current.length - 1) return;
+    historyIdxRef.current++;
+    const m = historyRef.current[historyIdxRef.current];
+    setModel(m);
+    onChange?.(m);
+  }, [onChange]);
+  const addActor = () => {
+    const name = `Actor${actors.length + 1}`;
+    applyAndPush({ ...model, actors: [...actors, name] });
+  };
+  const renameActor = (oldName, newName) => {
+    if (!newName || newName === oldName || actors.includes(newName)) return;
+    applyAndPush({
+      ...model,
+      actors: actors.map((a) => a === oldName ? newName : a),
+      messages: messages.map((m) => ({
+        ...m,
+        from: m.from === oldName ? newName : m.from,
+        to: m.to === oldName ? newName : m.to
+      }))
+    });
+  };
+  const removeActor = (name) => {
+    applyAndPush({
+      ...model,
+      actors: actors.filter((a) => a !== name),
+      messages: messages.filter((m) => m.from !== name && m.to !== name)
+    });
+  };
+  const addMessage = () => {
+    if (actors.length < 1) {
+      const a = `Actor${actors.length + 1}`;
+      const b = `Actor${actors.length + 2}`;
+      applyAndPush({
+        ...model,
+        actors: [...actors, a, b],
+        messages: [...messages, { id: nextId("m", messages), from: a, to: b, label: "message", style: "solid" }]
+      });
+      return;
+    }
+    const from = actors[0];
+    const to = actors[Math.min(1, actors.length - 1)] ?? from;
+    applyAndPush({
+      ...model,
+      messages: [...messages, { id: nextId("m", messages), from, to, label: "message", style: "solid" }]
+    });
+  };
+  const updateMessage = (id, patch) => {
+    applyAndPush({
+      ...model,
+      messages: messages.map((m) => m.id === id ? { ...m, ...patch } : m)
+    });
+  };
+  const removeMessage = (id) => {
+    applyAndPush({ ...model, messages: messages.filter((m) => m.id !== id) });
+    if (selected === id) setSelected(null);
+  };
+  const reorderMessage = useCallback4((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]);
+  useEffect4(() => {
+    const onKey = (e) => {
+      const tgt = e.target;
+      if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable)) return;
+      const ctrl = e.ctrlKey || e.metaKey;
+      if (ctrl && e.key === "z") {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if (ctrl && (e.key === "y" || e.shiftKey && e.key === "z")) {
+        e.preventDefault();
+        redo();
+        return;
+      }
+      if (e.key === "Escape") {
+        setSelected(null);
+        setEditingId(null);
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && selected) {
+        e.preventDefault();
+        removeMessage(selected);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [undo, redo, selected]);
+  const handleExport = useExporters(model, onExport, "sequence");
+  const handleImport = useImporter(applyAndPush, {
+    expectedType: "sequence",
+    transform: ensureSequenceModel
+  });
+  const onRowMouseDown = (e, id) => {
+    const tag = e.target.tagName;
+    if (tag === "INPUT" || tag === "BUTTON" || tag === "SELECT") return;
+    const idx = messages.findIndex((m) => m.id === id);
+    if (idx < 0) return;
+    e.preventDefault();
+    setSelected(id);
+    setDrag({ id, startY: e.clientY, originalIdx: idx, targetIdx: idx, active: false });
+  };
+  useEffect4(() => {
+    if (!drag) return;
+    const baseY = HEADER_PAD + HEADER_H + 40;
+    const onMove = (ev) => {
+      const dy = ev.clientY - drag.startY;
+      if (!drag.active && Math.abs(dy) < DRAG_THRESHOLD) return;
+      const svg = svgRef.current;
+      if (!svg) return;
+      const rect = svg.getBoundingClientRect();
+      const yInSvg = ev.clientY - rect.top;
+      const raw = Math.floor((yInSvg - baseY + ROW_H / 2) / ROW_H);
+      const next = Math.max(0, Math.min(messages.length - 1, raw));
+      if (next === drag.targetIdx && drag.active) return;
+      setDrag({ ...drag, active: true, targetIdx: next });
+    };
+    const onUp = () => {
+      if (drag.active && drag.targetIdx !== drag.originalIdx) {
+        reorderMessage(drag.id, drag.targetIdx);
+      }
+      setDrag(null);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+  }, [drag, messages.length, reorderMessage]);
+  const visualMessages = useMemo2(() => {
+    if (!drag?.active) return messages;
+    const idx = messages.findIndex((m) => m.id === drag.id);
+    if (idx < 0) return messages;
+    const next = messages.slice();
+    const [moved] = next.splice(idx, 1);
+    next.splice(drag.targetIdx, 0, moved);
+    return next;
+  }, [messages, drag]);
+  const selectedMsg = selected ? messages.find((m) => m.id === selected) : null;
+  return /* @__PURE__ */ jsxs4("div", { style: {
+    display: "flex",
+    flexDirection: "column",
+    height,
+    width: "100%",
+    fontFamily: "ui-sans-serif,system-ui,sans-serif",
+    background: t.ctrlsBg
+  }, children: [
+    /* @__PURE__ */ jsx4(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ jsxs4("div", { style: {
+      display: "flex",
+      gap: 8,
+      padding: "7px 14px",
+      background: t.ctrlsBg,
+      borderBottom: `1px solid ${t.ctrlsBorder}`,
+      alignItems: "center",
+      flexWrap: "wrap"
+    }, children: [
+      /* @__PURE__ */ jsx4("button", { onClick: addActor, style: primaryBtn(), children: "+ Actor" }),
+      /* @__PURE__ */ jsx4("button", { onClick: addMessage, style: primaryBtn(), children: "+ Message" }),
+      /* @__PURE__ */ jsx4("div", { style: { width: 1, height: 18, background: t.ctrlsBorder, margin: "0 4px" } }),
+      /* @__PURE__ */ jsx4("button", { onClick: undo, style: ghostBtn2(t), title: "Undo (Ctrl+Z)", children: "\u21B6" }),
+      /* @__PURE__ */ jsx4("button", { onClick: redo, style: ghostBtn2(t), title: "Redo (Ctrl+Y)", children: "\u21B7" }),
+      /* @__PURE__ */ jsxs4("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__ */ jsxs4("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx4("div", { style: { flex: 1, overflow: "auto", background: t.canvas, position: "relative" }, children: actors.length === 0 && messages.length === 0 ? /* @__PURE__ */ jsxs4("div", { style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 10,
+        color: t.textMuted,
+        pointerEvents: "none"
+      }, children: [
+        /* @__PURE__ */ jsx4("div", { style: { fontSize: 36, opacity: 0.15, color: t.textPrimary }, children: "\u2194" }),
+        /* @__PURE__ */ jsxs4("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+          "Click ",
+          /* @__PURE__ */ jsx4("strong", { style: { color: INDIGO }, children: "+ Actor" }),
+          " then ",
+          /* @__PURE__ */ jsx4("strong", { style: { color: INDIGO }, children: "+ Message" }),
+          " to start"
+        ] })
+      ] }) : /* @__PURE__ */ jsxs4(
+        "svg",
+        {
+          ref: svgRef,
+          width: totalW,
+          height: totalH,
+          style: { display: "block", cursor: drag?.active ? "grabbing" : "default", userSelect: "none" },
+          children: [
+            /* @__PURE__ */ jsxs4("defs", { children: [
+              /* @__PURE__ */ jsx4("pattern", { id: "seqdots", x: "0", y: "0", width: "24", height: "24", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx4("circle", { cx: 12, cy: 12, r: 1.1, fill: t.dot }) }),
+              /* @__PURE__ */ jsx4("filter", { id: "seqShadow", x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx4("feDropShadow", { dx: 0, dy: 3, stdDeviation: 5, floodColor: isDark ? "rgba(0,0,0,0.5)" : "rgba(15,23,42,0.09)" }) }),
+              /* @__PURE__ */ jsx4("marker", { id: "seqArrow", markerWidth: 9, markerHeight: 7, refX: 8.5, refY: 3.5, orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx4("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: t.arrow }) })
+            ] }),
+            /* @__PURE__ */ jsx4("rect", { width: totalW, height: totalH, fill: "url(#seqdots)" }),
+            actors.map((name) => {
+              const x = actorX(name);
+              const top = HEADER_PAD + HEADER_H;
+              return /* @__PURE__ */ jsx4(
+                "line",
+                {
+                  x1: x,
+                  x2: x,
+                  y1: top + 4,
+                  y2: totalH - 24,
+                  stroke: t.lifeline,
+                  strokeWidth: 1.25,
+                  strokeDasharray: "5 5"
+                },
+                `life-${name}`
+              );
+            }),
+            visualMessages.map((msg, idx) => {
+              const y = msgY(idx);
+              const fromX = actorX(msg.from);
+              const toX = actorX(msg.to);
+              const selectedHere = selected === msg.id;
+              const isDragging = drag?.active && drag.id === msg.id;
+              const isSelf = msg.from === msg.to;
+              const stroke = selectedHere ? INDIGO : t.arrow;
+              const dash = msg.style === "dashed" ? "6,4" : void 0;
+              const cursor = drag?.active ? "grabbing" : "grab";
+              const groupOpacity = isDragging ? 0.85 : 1;
+              if (isSelf) {
+                const startX = fromX;
+                const loopW = 36;
+                const loopY = y - 6;
+                const d = `M ${startX} ${loopY} C ${startX + loopW} ${loopY}, ${startX + loopW} ${loopY + 24}, ${startX} ${loopY + 24}`;
+                return /* @__PURE__ */ jsxs4("g", { onMouseDown: (e) => onRowMouseDown(e, msg.id), style: { cursor, opacity: groupOpacity }, children: [
+                  (selectedHere || isDragging) && /* @__PURE__ */ jsx4(
+                    "rect",
+                    {
+                      x: SIDE_PAD - 8,
+                      y: y - 22,
+                      width: totalW - (SIDE_PAD - 8) * 2,
+                      height: ROW_H - 12,
+                      rx: 10,
+                      fill: INDIGO_SOFT,
+                      opacity: isDark ? 0.18 : 0.6
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("path", { d, fill: "none", stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
+                  /* @__PURE__ */ jsx4("text", { x: startX + loopW + 8, y: loopY + 16, fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
+                ] }, msg.id);
+              }
+              const labelX = (fromX + toX) / 2;
+              return /* @__PURE__ */ jsxs4("g", { onMouseDown: (e) => onRowMouseDown(e, msg.id), style: { cursor, opacity: groupOpacity }, children: [
+                (selectedHere || isDragging) && /* @__PURE__ */ jsx4(
+                  "rect",
+                  {
+                    x: SIDE_PAD - 8,
+                    y: y - 22,
+                    width: totalW - (SIDE_PAD - 8) * 2,
+                    height: ROW_H - 12,
+                    rx: 10,
+                    fill: INDIGO_SOFT,
+                    opacity: isDark ? 0.18 : 0.6
+                  }
+                ),
+                /* @__PURE__ */ jsx4("line", { x1: fromX, y1: y, x2: toX, y2: y, stroke, strokeWidth: 1.5, strokeDasharray: dash, markerEnd: "url(#seqArrow)" }),
+                /* @__PURE__ */ jsx4(
+                  "rect",
+                  {
+                    x: labelX - estimateW(msg.label) / 2 - 6,
+                    y: y - 18,
+                    width: estimateW(msg.label) + 12,
+                    height: 18,
+                    rx: 6,
+                    fill: t.canvas,
+                    stroke: selectedHere ? INDIGO : t.cardBorder,
+                    strokeWidth: selectedHere ? 1.25 : 1
+                  }
+                ),
+                /* @__PURE__ */ jsx4("text", { x: labelX, y: y - 5, textAnchor: "middle", fontSize: 11, fill: selectedHere ? INDIGO : t.textPrimary, fontWeight: 500, children: msg.label })
+              ] }, msg.id);
+            }),
+            actors.map((name) => {
+              const x = actorX(name);
+              const w = colW - 24;
+              return /* @__PURE__ */ jsxs4("g", { children: [
+                /* @__PURE__ */ jsx4(
+                  "rect",
+                  {
+                    x: x - w / 2,
+                    y: HEADER_PAD,
+                    width: w,
+                    height: HEADER_H,
+                    rx: 12,
+                    fill: t.actorFill,
+                    stroke: t.actorStroke,
+                    strokeWidth: 1.25,
+                    filter: "url(#seqShadow)"
+                  }
+                ),
+                editingId === name ? /* @__PURE__ */ jsx4("foreignObject", { x: x - w / 2 + 8, y: HEADER_PAD + 16, width: w - 16, height: 32, children: /* @__PURE__ */ jsx4(
+                  "input",
+                  {
+                    autoFocus: true,
+                    defaultValue: name,
+                    onBlur: (e) => {
+                      renameActor(name, e.currentTarget.value.trim());
+                      setEditingId(null);
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") {
+                        renameActor(name, e.target.value.trim());
+                        setEditingId(null);
+                      }
+                      if (e.key === "Escape") setEditingId(null);
+                    },
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      border: "none",
+                      borderRadius: 6,
+                      outline: `2px solid ${INDIGO}`,
+                      textAlign: "center",
+                      fontSize: 13,
+                      fontWeight: 600,
+                      background: t.inputBg,
+                      color: t.inputText,
+                      boxSizing: "border-box",
+                      padding: "0 6px",
+                      fontFamily: "inherit"
+                    }
+                  }
+                ) }) : /* @__PURE__ */ jsx4(
+                  "text",
+                  {
+                    x,
+                    y: HEADER_PAD + HEADER_H / 2 + 4,
+                    textAnchor: "middle",
+                    fontSize: 13,
+                    fontWeight: 700,
+                    fill: t.actorText,
+                    style: { cursor: "pointer", userSelect: "none" },
+                    onDoubleClick: () => setEditingId(name),
+                    children: name
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "circle",
+                  {
+                    cx: x + w / 2 - 12,
+                    cy: HEADER_PAD + 14,
+                    r: 9,
+                    fill: "transparent",
+                    style: { cursor: "pointer" },
+                    onClick: () => removeActor(name),
+                    children: /* @__PURE__ */ jsx4("title", { children: "Remove actor" })
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "text",
+                  {
+                    x: x + w / 2 - 12,
+                    y: HEADER_PAD + 18,
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fill: t.textMuted,
+                    style: { pointerEvents: "none", userSelect: "none" },
+                    children: "\xD7"
+                  }
+                )
+              ] }, `hdr-${name}`);
+            })
+          ]
+        }
+      ) }),
+      selectedMsg && /* @__PURE__ */ jsxs4("div", { style: {
+        width: 280,
+        flexShrink: 0,
+        background: t.panelBg,
+        borderLeft: `1px solid ${t.panelBorder}`,
+        padding: "14px 16px",
+        overflowY: "auto"
+      }, children: [
+        /* @__PURE__ */ jsx4("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.7, marginBottom: 10 }, children: "Message" }),
+        /* @__PURE__ */ jsx4(Label, { t, children: "Label" }),
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(Label, { t, children: "From" }),
+        /* @__PURE__ */ jsx4("select", { value: selectedMsg.from, onChange: (e) => updateMessage(selectedMsg.id, { from: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ jsx4("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ jsx4(Label, { t, children: "To" }),
+        /* @__PURE__ */ jsx4("select", { value: selectedMsg.to, onChange: (e) => updateMessage(selectedMsg.id, { to: e.target.value }), style: input(t), children: actors.map((a) => /* @__PURE__ */ jsx4("option", { value: a, children: a }, a)) }),
+        /* @__PURE__ */ jsx4(Label, { t, children: "Style" }),
+        /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 6 }, children: ["solid", "dashed"].map((s2) => /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => updateMessage(selectedMsg.id, { style: s2 }),
+            style: {
+              flex: 1,
+              padding: "6px 10px",
+              border: `1.5px solid ${selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO : t.inputBorder}`,
+              background: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO_SOFT : t.inputBg,
+              color: selectedMsg.style === s2 || !selectedMsg.style && s2 === "solid" ? INDIGO : t.textPrimary,
+              borderRadius: 8,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: "pointer",
+              fontFamily: "inherit"
+            },
+            children: s2 === "solid" ? "\u2500\u2500 solid" : "\u2500 \u2500 dashed"
+          },
+          s2
+        )) }),
+        /* @__PURE__ */ jsx4("div", { style: { height: 14 } }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => removeMessage(selectedMsg.id),
+            style: { ...ghostBtn2(t), width: "100%", color: "#ef4444", border: `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}` },
+            children: "Delete message"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: {
+      padding: "4px 14px",
+      fontSize: 11,
+      color: t.textMuted,
+      background: t.canvas,
+      borderTop: `1px solid ${t.ctrlsBorder}`,
+      display: "flex",
+      gap: 16
+    }, children: [
+      /* @__PURE__ */ jsxs4("span", { children: [
+        actors.length,
+        " actors"
+      ] }),
+      /* @__PURE__ */ jsxs4("span", { children: [
+        messages.length,
+        " messages"
+      ] }),
+      /* @__PURE__ */ jsx4("span", { style: { marginLeft: "auto" }, children: "double-click actor to rename \xB7 drag a row to reorder" })
+    ] })
+  ] });
+}
+function estimateW(text, pxPerChar = 7) {
+  return text.length * pxPerChar;
+}
+function primaryBtn() {
+  return {
+    padding: "6px 12px",
+    background: INDIGO,
+    color: "#fff",
+    border: "none",
+    borderRadius: 8,
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "inherit"
+  };
+}
+function ghostBtn2(t) {
+  return {
+    padding: "5px 10px",
+    background: "transparent",
+    color: t.textSecondary,
+    border: `1px solid ${t.ctrlsBorder}`,
+    borderRadius: 7,
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 500,
+    fontFamily: "inherit"
+  };
+}
+function input(t) {
+  return {
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "6px 10px",
+    border: `1.5px solid ${t.inputBorder}`,
+    borderRadius: 7,
+    background: t.inputBg,
+    color: t.inputText,
+    fontSize: 12,
+    fontFamily: "inherit",
+    outline: "none",
+    marginBottom: 12
+  };
+}
+function Label({ t, children }) {
+  return /* @__PURE__ */ jsx4("div", { style: { fontSize: 10, fontWeight: 700, color: t.textMuted, textTransform: "uppercase", letterSpacing: 0.6, marginBottom: 4 }, children });
+}
+
+// src/ui/Minimap.tsx
+import { useCallback as useCallback5, useRef as useRef4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var W = 168;
+var H = 112;
+var PAD = 18;
+function Minimap({
+  model,
+  viewportW,
+  viewportH,
+  transform,
+  measureNode,
+  onCenterOn,
+  isDark,
+  accentColor
+}) {
+  const dragRef = useRef4(null);
+  const boxes = model.nodes.map((n) => {
+    const { w, h } = measureNode(n);
+    return { id: n.id, x: n.x ?? 0, y: n.y ?? 0, w, h };
+  });
+  if (boxes.length === 0) return null;
+  const vx = -transform.x / transform.scale;
+  const vy = -transform.y / transform.scale;
+  const vw = viewportW / transform.scale;
+  const vh = viewportH / transform.scale;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const b of boxes) {
+    minX = Math.min(minX, b.x);
+    minY = Math.min(minY, b.y);
+    maxX = Math.max(maxX, b.x + b.w);
+    maxY = Math.max(maxY, b.y + b.h);
+  }
+  minX = Math.min(minX, vx);
+  minY = Math.min(minY, vy);
+  maxX = Math.max(maxX, vx + vw);
+  maxY = Math.max(maxY, vy + vh);
+  const contentW = Math.max(1, maxX - minX);
+  const contentH = Math.max(1, maxY - minY);
+  const scale = Math.min((W - PAD * 2) / contentW, (H - PAD * 2) / contentH);
+  const offsetX = (W - contentW * scale) / 2 - minX * scale;
+  const offsetY = (H - contentH * scale) / 2 - minY * scale;
+  const project = (x, y) => ({
+    x: offsetX + x * scale,
+    y: offsetY + y * scale
+  });
+  const unproject = (mx, my) => ({
+    x: (mx - offsetX) / scale,
+    y: (my - offsetY) / scale
+  });
+  const panTo = useCallback5((e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const { x, y } = unproject(mx, my);
+    onCenterOn(x, y);
+  }, [onCenterOn, scale, offsetX, offsetY]);
+  const onMouseDown = (e) => {
+    e.stopPropagation();
+    dragRef.current = { active: true };
+    panTo(e);
+  };
+  const onMouseMove = (e) => {
+    if (!dragRef.current?.active) return;
+    panTo(e);
+  };
+  const onMouseUp = () => {
+    dragRef.current = null;
+  };
+  const bg = isDark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.94)";
+  const border = isDark ? "#334155" : "#e2e8f0";
+  const nodeFill = isDark ? "#475569" : "#cbd5e1";
+  const viewStroke = accentColor;
+  const viewFill = `${accentColor}22`;
+  const vp1 = project(vx, vy);
+  const vp2 = project(vx + vw, vy + vh);
+  const vpRect = {
+    x: Math.max(0, Math.min(W, vp1.x)),
+    y: Math.max(0, Math.min(H, vp1.y)),
+    w: Math.max(2, Math.min(W, vp2.x) - Math.max(0, vp1.x)),
+    h: Math.max(2, Math.min(H, vp2.y) - Math.max(0, vp1.y))
+  };
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        bottom: 14,
+        right: 14,
+        background: bg,
+        border: `1px solid ${border}`,
+        borderRadius: 10,
+        padding: 6,
+        boxShadow: isDark ? "0 8px 20px rgba(0,0,0,0.45)" : "0 6px 18px rgba(15,23,42,0.08)",
+        backdropFilter: "blur(6px)"
+      },
+      children: /* @__PURE__ */ jsxs5(
+        "svg",
+        {
+          width: W,
+          height: H,
+          style: { display: "block", cursor: "grab", borderRadius: 6 },
+          onMouseDown,
+          onMouseMove,
+          onMouseUp,
+          onMouseLeave: onMouseUp,
+          children: [
+            /* @__PURE__ */ jsx5("rect", { width: W, height: H, rx: 6, fill: isDark ? "#0f172a" : "#fafbfc" }),
+            boxes.map((b) => {
+              const p = project(b.x, b.y);
+              return /* @__PURE__ */ jsx5(
+                "rect",
+                {
+                  x: p.x,
+                  y: p.y,
+                  width: Math.max(2, b.w * scale),
+                  height: Math.max(2, b.h * scale),
+                  rx: 2,
+                  fill: nodeFill
+                },
+                b.id
+              );
+            }),
+            /* @__PURE__ */ jsx5(
+              "rect",
+              {
+                x: vpRect.x,
+                y: vpRect.y,
+                width: vpRect.w,
+                height: vpRect.h,
+                rx: 3,
+                fill: viewFill,
+                stroke: viewStroke,
+                strokeWidth: 1.25
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/ui/NodeNavigator.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function NodeNavigator({
+  model,
+  selected,
+  variant,
+  isDark,
+  t,
+  acc,
+  open,
+  onToggle,
+  onSelect
+}) {
+  const [search, setSearch] = useState6("");
+  const shapeIcon = (node) => {
+    if (variant === "question") return "?";
+    if (variant === "journey") return "\u2197";
+    switch (node.shape) {
+      case "diamond":
+        return "\u25C7";
+      case "circle":
+        return "\u25CB";
+      case "parallelogram":
+        return "\u25B1";
+      default:
+        return "\u25AD";
+    }
+  };
+  const filtered = model.nodes.filter(
+    (n) => n.label.toLowerCase().includes(search.toLowerCase())
+  );
+  const inEdges = (id) => model.edges.filter((e) => e.to === id).length;
+  const outEdges = (id) => model.edges.filter((e) => e.from === id).length;
+  if (!open) {
+    return /* @__PURE__ */ jsxs6("div", { style: {
+      width: 36,
+      flexShrink: 0,
+      background: t.panelBg,
+      borderRight: `1px solid ${t.panelBorder}`,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      paddingTop: 8,
+      gap: 6
+    }, children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: onToggle,
+          title: "Open node list",
+          style: { background: "none", border: "none", cursor: "pointer", color: t.textMuted, padding: 6, borderRadius: 6, fontSize: 14, lineHeight: 1 },
+          children: "\u2630"
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { style: { fontSize: 10, color: t.textMuted, fontWeight: 700, writingMode: "vertical-rl", transform: "rotate(180deg)", letterSpacing: 0.5 }, children: model.nodes.length })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs6("div", { style: {
+    width: 216,
+    flexShrink: 0,
+    background: t.panelBg,
+    borderRight: `1px solid ${t.panelBorder}`,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  }, children: [
+    /* @__PURE__ */ jsxs6("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "10px 12px",
+      borderBottom: `1px solid ${t.panelBorder}`,
+      flexShrink: 0
+    }, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx6("span", { style: { fontSize: 11, fontWeight: 700, color: t.textSecondary, textTransform: "uppercase", letterSpacing: 0.7 }, children: variant === "question" ? "Questions" : variant === "journey" ? "Steps" : "Nodes" }),
+        /* @__PURE__ */ jsx6("span", { style: {
+          fontSize: 10,
+          fontWeight: 700,
+          color: t.textMuted,
+          background: isDark ? "#0f172a" : "#f1f5f9",
+          padding: "1px 6px",
+          borderRadius: 99
+        }, children: model.nodes.length })
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: onToggle,
+          style: { background: "none", border: "none", cursor: "pointer", color: t.textMuted, padding: "2px 4px", borderRadius: 4, fontSize: 13, lineHeight: 1 },
+          title: "Collapse",
+          children: "\u2039"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { style: { padding: "8px 10px", borderBottom: `1px solid ${t.sectionBorder}`, flexShrink: 0 }, children: /* @__PURE__ */ jsxs6("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx6("span", { style: { position: "absolute", left: 8, top: "50%", transform: "translateY(-50%)", fontSize: 11, color: t.textMuted, pointerEvents: "none" }, children: "\u2315" }),
+      /* @__PURE__ */ jsx6(
+        "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__ */ jsxs6("div", { style: { flex: 1, overflowY: "auto", padding: "6px 8px", display: "flex", flexDirection: "column", gap: 2 }, children: [
+      filtered.length === 0 && /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", padding: "20px 0", fontSize: 12, color: t.textMuted, fontStyle: "italic" }, children: model.nodes.length === 0 ? "No nodes yet" : "No matches" }),
+      filtered.map((node, idx) => {
+        const isSelected = selected === node.id;
+        const answers = node.metadata?.answers ?? [];
+        return /* @__PURE__ */ jsxs6(
+          "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__ */ jsx6("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__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx6("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__ */ jsx6("div", { style: { fontSize: 10, color: t.textMuted, lineHeight: 1.2, marginTop: 1 }, children: variant === "question" ? `${answers.length} answer${answers.length !== 1 ? "s" : ""}` : `${inEdges(node.id)}\u2193 ${outEdges(node.id)}\u2192` })
+              ] }),
+              isSelected && /* @__PURE__ */ jsx6("span", { style: { fontSize: 10, color: acc.color, flexShrink: 0 }, children: "\u25C9" })
+            ]
+          },
+          node.id
+        );
+      })
+    ] })
+  ] });
+}
+
+// src/ui/ContextMenu.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ContextMenu({
+  x,
+  y,
+  nodeId,
+  edgeId,
+  isDark,
+  t,
+  acc,
+  canUndo,
+  canRedo,
+  onUndo,
+  onRedo,
+  onReCenter,
+  onAddNode,
+  onDuplicate,
+  onRename,
+  onDelete,
+  onDisconnect,
+  onEdgeRename,
+  onEdgeStyle,
+  onEdgeArrowhead,
+  onEdgeDelete,
+  onEdgeResetRouting,
+  currentEdgeStyle,
+  currentEdgeArrow,
+  edgeHasWaypoint,
+  containerRef
+}) {
+  const menuRef = useRef5(null);
+  const [pos, setPos] = useState7({ x, y });
+  useEffect5(() => {
+    if (!menuRef.current || !containerRef.current) return;
+    const m = menuRef.current.getBoundingClientRect();
+    const c = containerRef.current.getBoundingClientRect();
+    let nx = x, ny = y;
+    if (nx + m.width > c.right - 8) nx = x - m.width;
+    if (ny + m.height > c.bottom - 8) ny = y - m.height;
+    setPos({ x: nx, y: ny });
+  }, [x, y, containerRef]);
+  const bg = isDark ? "#1e293b" : "#ffffff";
+  const border = isDark ? "#334155" : "#e2e8f0";
+  const hoverBg = isDark ? "#334155" : "#f1f5f9";
+  const dividerColor = isDark ? "#334155" : "#f1f5f9";
+  const text = t.textPrimary;
+  const muted = t.textMuted;
+  const item = (label, onClick, color, disabled) => /* @__PURE__ */ jsx7(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        width: "100%",
+        padding: "7px 14px",
+        background: "none",
+        border: "none",
+        textAlign: "left",
+        cursor: disabled ? "default" : "pointer",
+        fontSize: 12,
+        fontFamily: "ui-sans-serif,system-ui,sans-serif",
+        color: disabled ? muted : color ?? text,
+        opacity: disabled ? 0.4 : 1,
+        borderRadius: 6
+      },
+      onMouseEnter: (e) => {
+        if (!disabled) e.currentTarget.style.background = hoverBg;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "none";
+      },
+      children: label
+    },
+    label
+  );
+  const divider2 = /* @__PURE__ */ jsx7("div", { style: { height: 1, background: dividerColor, margin: "4px 0" } });
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref: menuRef,
+      onMouseDown: (e) => e.stopPropagation(),
+      style: {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        zIndex: 9999,
+        background: bg,
+        border: `1px solid ${border}`,
+        borderRadius: 10,
+        padding: "5px 0",
+        minWidth: 180,
+        boxShadow: isDark ? "0 8px 32px rgba(0,0,0,0.5)" : "0 8px 32px rgba(0,0,0,0.12)",
+        fontFamily: "ui-sans-serif,system-ui,sans-serif"
+      },
+      children: edgeId ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx7("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__ */ jsx7("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__ */ jsx7("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__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx7("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__ */ jsxs7(Fragment2, { children: [
+        /* @__PURE__ */ jsx7("div", { style: { padding: "4px 14px 6px", fontSize: 10, fontWeight: 700, color: muted, textTransform: "uppercase", letterSpacing: 0.8 }, children: "Canvas" }),
+        item("Add node here", onAddNode, acc.color),
+        item("Re-center (Ctrl+0)", onReCenter),
+        divider2,
+        item("Undo (Ctrl+Z)", onUndo, void 0, !canUndo),
+        item("Redo (Ctrl+Y)", onRedo, void 0, !canRedo)
+      ] })
+    }
+  );
+}
+
+// src/ui/render.tsx
+import { useState as useState8 } from "react";
+
+// src/ui/layout.ts
+var NODE_H2 = 48;
+var Q_BASE_H2 = 68;
+var Q_ANS_ROW_H2 = 80;
+var GRID = 24;
+var Q_CARD_PAD2 = 8;
+var MIN_NODE_W2 = 120;
+var MAX_NODE_W2 = 320;
+var MIN_Q_W2 = 220;
+function estimateTextW2(text, pxPerChar = 7.5) {
+  return text.length * pxPerChar;
+}
+function nodeWidth2(label) {
+  return Math.min(MAX_NODE_W2, Math.max(MIN_NODE_W2, Math.ceil(estimateTextW2(label) + 48)));
+}
+function answerCardW2(ans) {
+  return Math.max(86, Math.ceil(Math.max(estimateTextW2(ans, 7.5) + 20, 56) + 32));
+}
+function questionNodeW2(node) {
+  const answers = node.metadata?.answers ?? [];
+  const headerW = estimateTextW2(node.label, 8) + 80;
+  if (answers.length === 0) return Math.max(MIN_Q_W2, Math.ceil(headerW));
+  const cardsW = answers.reduce((s2, a) => s2 + answerCardW2(a), 0) + (answers.length - 1) * Q_CARD_PAD2 + 2 * Q_CARD_PAD2;
+  return Math.max(MIN_Q_W2, Math.ceil(Math.max(headerW, cardsW)));
+}
+function questionNodeH2(answers) {
+  return Q_BASE_H2 + (answers.length === 0 ? 48 : Q_ANS_ROW_H2);
+}
+function nodeDims(node, variant) {
+  if (variant === "question") {
+    const answers = node.metadata?.answers ?? [];
+    return { w: questionNodeW2(node), h: questionNodeH2(answers) };
+  }
+  return { w: nodeWidth2(node.label), h: NODE_H2 };
+}
+function snap(v) {
+  return Math.round(v / GRID) * GRID;
+}
+function bezierPath2(x1, y1, x2, y2, exitDir = "bottom") {
+  if (exitDir === "right") {
+    const dx = Math.abs(x2 - x1), dy2 = Math.abs(y2 - y1);
+    const c = Math.max(60, (dx + dy2) * 0.45);
+    return `M ${x1} ${y1} C ${x1 + c} ${y1}, ${x2} ${y2 - c * 0.5}, ${x2} ${y2}`;
+  }
+  if (exitDir === "left") {
+    const dx = Math.abs(x2 - x1), dy2 = Math.abs(y2 - y1);
+    const c = Math.max(60, (dx + dy2) * 0.45);
+    return `M ${x1} ${y1} C ${x1 - c} ${y1}, ${x2} ${y2 - c * 0.5}, ${x2} ${y2}`;
+  }
+  const dy = y2 - y1;
+  const dyAbs = Math.abs(dy);
+  const dxAbs = Math.abs(x2 - x1);
+  const base = dy > 0 ? dyAbs * 0.55 : Math.max(90, dyAbs * 0.5 + dxAbs * 0.28);
+  const curve = Math.max(36, Math.min(220, base));
+  return `M ${x1} ${y1} C ${x1} ${y1 + curve}, ${x2} ${y2 - curve}, ${x2} ${y2}`;
+}
+function bezierPathVia(x1, y1, wx, wy, x2, y2) {
+  const seg1 = bezierPath2(x1, y1, wx, wy, "bottom");
+  const seg2 = bezierPath2(wx, wy, x2, y2, "bottom");
+  const seg2NoM = seg2.replace(/^M\s+-?[\d.]+\s+-?[\d.]+\s+/, "");
+  return seg1 + " " + seg2NoM;
+}
+
+// src/ui/render.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var STYLE_LABEL = { pointerEvents: "none", userSelect: "none" };
+var STYLE_BLUR = { filter: "blur(4px)" };
+var STYLE_EDGE_HIT = { cursor: "pointer" };
+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_EDGE_LABEL_HIT = { cursor: "text" };
+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__ */ jsx8(Fragment3, { children: node.shape === "circle" ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx8("circle", { cx, cy, r: NODE_H2 / 2 + 3, fill: "none", stroke: acc.color, strokeWidth: 6, opacity: 0.18, style: STYLE_BLUR }),
+    /* @__PURE__ */ jsx8("circle", { cx, cy, r: NODE_H2 / 2 + 1.5, fill: "none", stroke: acc.color, strokeWidth: 1, opacity: 0.55 })
+  ] }) : node.shape === "diamond" ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
+      "polygon",
+      {
+        points: `${cx},${-5} ${w + 5},${cy} ${cx},${NODE_H2 + 5} ${-5},${cy}`,
+        fill: "none",
+        stroke: acc.color,
+        strokeWidth: 6,
+        opacity: 0.18,
+        style: STYLE_BLUR
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "polygon",
+      {
+        points: `${cx},${-2} ${w + 2},${cy} ${cx},${NODE_H2 + 2} ${-2},${cy}`,
+        fill: "none",
+        stroke: acc.color,
+        strokeWidth: 1,
+        opacity: 0.55
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
+      "rect",
+      {
+        x: -4,
+        y: -4,
+        width: w + 8,
+        height: NODE_H2 + 8,
+        rx: 18,
+        fill: "none",
+        stroke: acc.color,
+        strokeWidth: 6,
+        opacity: 0.18,
+        style: STYLE_BLUR
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "rect",
+      {
+        x: -1.5,
+        y: -1.5,
+        width: w + 3,
+        height: NODE_H2 + 3,
+        rx: 15.5,
+        fill: "none",
+        stroke: acc.color,
+        strokeWidth: 1,
+        opacity: 0.5
+      }
+    )
+  ] }) });
+  const badgeColor = isDark ? ACCENT.emeraldDark : ACCENT.emerald;
+  const badge = variant === "journey" && stepNumber !== void 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx8("circle", { cx: 14, cy: 14, r: 10, fill: badgeColor }),
+    /* @__PURE__ */ jsx8("text", { x: 14, y: 18, textAnchor: "middle", fontSize: 9, fill: "white", fontWeight: "700", style: STYLE_LABEL, children: stepNumber })
+  ] });
+  switch (node.shape) {
+    case "diamond": {
+      const pts = `${cx},0 ${w},${cy} ${cx},${NODE_H2} 0,${cy}`;
+      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        glow,
+        /* @__PURE__ */ jsx8("polygon", { points: pts, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        badge
+      ] });
+    }
+    case "circle":
+      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        glow,
+        /* @__PURE__ */ jsx8("circle", { cx, cy, r: NODE_H2 / 2 - 1, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        badge
+      ] });
+    case "parallelogram":
+      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        glow,
+        /* @__PURE__ */ jsx8("polygon", { points: `14,0 ${w},0 ${w - 14},${NODE_H2} 0,${NODE_H2}`, fill, stroke, strokeWidth: sw, filter: "url(#nodeShadow)" }),
+        badge
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+        glow,
+        /* @__PURE__ */ jsx8("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 }) {
+  const answers = node.metadata?.answers ?? [];
+  const totalH = questionNodeH2(answers);
+  const amber = isDark ? ACCENT.amberDark : ACCENT.amber;
+  const amberSoft = isDark ? "rgba(251,191,36,0.14)" : "#fef9ee";
+  const amberLine = isDark ? "rgba(251,191,36,0.18)" : "#fde68a";
+  const nodeBg = isDark ? "#1e293b" : "#ffffff";
+  const nodeBorder = selected ? amber : isDark ? "rgba(251,191,36,0.25)" : "#fde68a";
+  const cardBg = isDark ? "#0f172a" : "#fffdf7";
+  const cardBgConnected = isDark ? "rgba(251,191,36,0.12)" : "#fef3c7";
+  const cardBorder = isDark ? "#1e293b" : "#fde68a";
+  const textMain = isDark ? "#f1f5f9" : "#1e293b";
+  const textSub = isDark ? "#64748b" : "#94a3b8";
+  const textAns = isDark ? "#cbd5e1" : "#374151";
+  const portRowY = Q_BASE_H2 + Q_ANS_ROW_H2 - 8;
+  const glow = selected && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(
+      "rect",
+      {
+        x: -4,
+        y: -4,
+        width: qW + 8,
+        height: totalH + 8,
+        rx: 18,
+        fill: "none",
+        stroke: amber,
+        strokeWidth: 6,
+        opacity: 0.2,
+        style: STYLE_BLUR
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      "rect",
+      {
+        x: -1.5,
+        y: -1.5,
+        width: qW + 3,
+        height: totalH + 3,
+        rx: 15.5,
+        fill: "none",
+        stroke: amber,
+        strokeWidth: 1,
+        opacity: 0.55
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    glow,
+    /* @__PURE__ */ jsx8("rect", { width: qW, height: totalH, rx: 14, fill: nodeBg, stroke: nodeBorder, strokeWidth: selected ? 2 : 1.5, filter: "url(#nodeShadow)" }),
+    /* @__PURE__ */ jsx8("clipPath", { id: `qhdr-${node.id}`, children: /* @__PURE__ */ jsx8("rect", { width: qW, height: Q_BASE_H2, rx: 14 }) }),
+    /* @__PURE__ */ jsx8("rect", { width: qW, height: Q_BASE_H2, fill: amberSoft, clipPath: `url(#qhdr-${node.id})` }),
+    /* @__PURE__ */ jsx8("rect", { x: 0, y: 0, width: 4, height: Q_BASE_H2, rx: 2, fill: amber }),
+    /* @__PURE__ */ jsx8("rect", { x: 12, y: 14, width: 28, height: 28, rx: 8, fill: amber }),
+    /* @__PURE__ */ jsx8("text", { x: 26, y: 33, textAnchor: "middle", fontSize: 15, fontWeight: "900", fill: "white", style: STYLE_LABEL, children: "?" }),
+    /* @__PURE__ */ jsxs8(
+      "text",
+      {
+        style: STYLE_LABEL,
+        fontFamily: "ui-sans-serif,system-ui,sans-serif",
+        children: [
+          /* @__PURE__ */ jsx8("tspan", { x: 50, y: 27, fontSize: 9, fontWeight: 700, fill: textSub, letterSpacing: 0.6, textAnchor: "start", children: "QUESTION" }),
+          /* @__PURE__ */ jsx8("tspan", { x: 50, dy: 15, fontSize: 13, fontWeight: 700, fill: selected ? amber : textMain, textAnchor: "start", children: node.label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8("line", { x1: 0, y1: Q_BASE_H2, x2: qW, y2: Q_BASE_H2, stroke: amberLine, strokeWidth: 1 }),
+    answers.length === 0 && /* @__PURE__ */ jsxs8(Fragment3, { children: [
+      /* @__PURE__ */ jsx8("text", { x: qW / 2, y: Q_BASE_H2 + 22, textAnchor: "middle", fontSize: 10, fill: amber, opacity: 0.4, fontWeight: 600, style: STYLE_LABEL, children: "No answers yet" }),
+      /* @__PURE__ */ jsx8("text", { x: qW / 2, y: Q_BASE_H2 + 36, textAnchor: "middle", fontSize: 9, fill: textSub, opacity: 0.7, style: STYLE_LABEL, children: "Open panel \u2192 Add Answer" })
+    ] }),
+    answers.map((ans, i) => {
+      const prevW = answers.slice(0, i).reduce((s2, a) => s2 + answerCardW2(a) + Q_CARD_PAD2, 0);
+      const cW = answerCardW2(ans);
+      const cardX = Q_CARD_PAD2 + prevW;
+      const cardY = Q_BASE_H2 + 7;
+      const cardH = Q_ANS_ROW_H2 - 20;
+      const cx = cardX + cW / 2;
+      const connected = edges.some((e) => e.from === node.id && e.label === ans);
+      const letter = i < 26 ? ANSWER_LETTERS[i] : `${i + 1}`;
+      const maxChars = Math.max(2, Math.floor((cW - 20) / 7.5));
+      const displayAns = ans.length > maxChars ? ans.slice(0, maxChars - 1) + "\u2026" : ans;
+      return /* @__PURE__ */ jsxs8("g", { children: [
+        /* @__PURE__ */ jsx8(
+          "rect",
+          {
+            x: cardX,
+            y: cardY,
+            width: cW,
+            height: cardH,
+            rx: 8,
+            fill: connected ? cardBgConnected : cardBg,
+            stroke: connected ? amber : cardBorder,
+            strokeWidth: connected ? 1.5 : 1
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "rect",
+          {
+            x: cx - 11,
+            y: cardY + 7,
+            width: 22,
+            height: 22,
+            rx: 6,
+            fill: connected ? amber : isDark ? "#1e293b" : "#fef3c7"
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "text",
+          {
+            x: cx,
+            y: cardY + 22,
+            textAnchor: "middle",
+            fontSize: 10,
+            fontWeight: 800,
+            fill: connected ? "#fff" : amber,
+            style: STYLE_LABEL,
+            children: letter
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "text",
+          {
+            x: cx,
+            y: cardY + 46,
+            textAnchor: "middle",
+            fontSize: 11,
+            fontWeight: 500,
+            fill: connected ? isDark ? "#fef3c7" : "#92400e" : textAns,
+            fontFamily: "ui-sans-serif,system-ui,sans-serif",
+            style: STYLE_LABEL,
+            children: displayAns
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "circle",
+          {
+            cx,
+            cy: portRowY,
+            r: 7,
+            fill: connected ? amber : isDark ? "#0f172a" : "#fff",
+            stroke: amber,
+            strokeWidth: 1.5,
+            style: STYLE_PORT_HOVER,
+            onMouseDown: (e) => onAnswerPortDown(e, node.id, ans, cx, portRowY)
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "path",
+          {
+            d: `M ${cx - 3} ${portRowY - 2} L ${cx} ${portRowY + 2} L ${cx + 3} ${portRowY - 2}`,
+            fill: "none",
+            stroke: connected ? "#fff" : amber,
+            strokeWidth: 1.5,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: STYLE_NO_EVENTS
+          }
+        )
+      ] }, ans + i);
+    })
+  ] });
+}
+function EdgeLine({ edge, nodes, variant, t, isDark, acc, editing, editValue, onEditChange, onEditCommit, onEditCancel, onDoubleClick, onContextMenu, onWaypointDown }) {
+  const [hovered, setHovered] = useState8(false);
+  const from = nodes.find((n) => n.id === edge.from);
+  const to = nodes.find((n) => n.id === edge.to);
+  if (!from || !to) return null;
+  let x1, y1, exitDir = "bottom";
+  const amberColor = isDark ? ACCENT.amberDark : ACCENT.amber;
+  if (variant === "question") {
+    const answers = from.metadata?.answers ?? [];
+    const idx = answers.indexOf(edge.label ?? "");
+    if (idx >= 0) {
+      const prevW = answers.slice(0, idx).reduce((s2, a) => s2 + answerCardW2(a) + Q_CARD_PAD2, 0);
+      const cW = answerCardW2(answers[idx]);
+      x1 = (from.x ?? 0) + Q_CARD_PAD2 + prevW + cW / 2;
+      y1 = (from.y ?? 0) + Q_BASE_H2 + Q_ANS_ROW_H2 - 8;
+      exitDir = "bottom";
+    } else {
+      const fqW = questionNodeW2(from);
+      x1 = (from.x ?? 0) + fqW / 2;
+      y1 = (from.y ?? 0) + questionNodeH2(answers);
+    }
+  } else {
+    const fnW = nodeWidth2(from.label);
+    x1 = (from.x ?? 0) + fnW / 2;
+    y1 = (from.y ?? 0) + NODE_H2;
+  }
+  const toW = variant === "question" ? questionNodeW2(to) : nodeWidth2(to.label);
+  const x2 = (to.x ?? 0) + toW / 2;
+  const y2 = to.y ?? 0;
+  const wp = edge.waypoint;
+  const d = wp ? bezierPathVia(x1, y1, wp.x, wp.y, x2, y2) : bezierPath2(x1, y1, x2, y2, exitDir);
+  const hx = wp ? wp.x : (x1 + x2) / 2;
+  const hy = wp ? wp.y : (y1 + y2) / 2;
+  const mx = hx, my = hy - 8;
+  const dash = edge.style === "dashed" ? "7 4" : edge.style === "dotted" ? "2 4" : void 0;
+  const edgeClr = variant === "question" ? amberColor : t.edgeColor;
+  const isAmber = variant === "question";
+  const labelW = edge.label ? Math.max(60, Math.ceil(estimateTextW2(edge.label, 7) + 18)) : 60;
+  const showHandle = !!onWaypointDown && (hovered || !!wp);
+  const flowClass = dash ? void 0 : isAmber ? "edge-flow-amber" : "edge-flow";
+  return /* @__PURE__ */ jsxs8(
+    "g",
+    {
+      onDoubleClick: (e) => {
+        e.stopPropagation();
+        onDoubleClick?.(edge.id);
+      },
+      onContextMenu: (e) => {
+        onContextMenu?.(e, edge.id);
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsx8("path", { d, fill: "none", stroke: "transparent", strokeWidth: 14, style: STYLE_EDGE_HIT }),
+        /* @__PURE__ */ jsx8(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: edgeClr,
+            strokeWidth: isAmber ? 2 : 1.5,
+            strokeLinecap: "round",
+            className: flowClass,
+            strokeDasharray: dash,
+            markerEnd: isAmber ? "url(#arrowAmber)" : "url(#arrowhead)",
+            opacity: isAmber ? 0.85 : 0.9,
+            style: STYLE_NO_EVENTS
+          }
+        ),
+        showHandle && /* @__PURE__ */ jsx8(
+          "circle",
+          {
+            cx: hx,
+            cy: hy,
+            r: wp ? 5 : 4,
+            fill: wp ? acc.color : isDark ? "#1e293b" : "#fff",
+            stroke: acc.color,
+            strokeWidth: 1.5,
+            style: STYLE_WAYPOINT,
+            onMouseDown: (e) => {
+              e.stopPropagation();
+              onWaypointDown?.(e, edge.id);
+            }
+          }
+        ),
+        editing && !isAmber ? /* @__PURE__ */ jsx8("foreignObject", { x: mx - labelW / 2, y: my - 12, width: labelW, height: 22, children: /* @__PURE__ */ jsx8(
+          "input",
+          {
+            autoFocus: true,
+            value: editValue ?? "",
+            onChange: (e) => onEditChange?.(e.target.value),
+            onBlur: () => onEditCommit?.(),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onEditCommit?.();
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                onEditCancel?.();
+              }
+            },
+            onMouseDown: (e) => e.stopPropagation(),
+            style: {
+              width: "100%",
+              height: "100%",
+              border: "none",
+              borderRadius: 6,
+              outline: `2px solid ${acc.color}`,
+              textAlign: "center",
+              fontSize: 10,
+              fontWeight: 500,
+              background: t.inputBg,
+              color: t.inputText,
+              boxSizing: "border-box",
+              padding: "0 6px",
+              fontFamily: "inherit"
+            }
+          }
+        ) }) : edge.label && !isAmber ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
+          /* @__PURE__ */ jsx8(
+            "rect",
+            {
+              x: mx - labelW / 2,
+              y: my - 11,
+              width: labelW,
+              height: 19,
+              rx: 5,
+              fill: t.panelBg,
+              stroke: t.cardBorder,
+              strokeWidth: 1,
+              style: STYLE_EDGE_LABEL_HIT
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            "text",
+            {
+              x: mx,
+              y: my + 4,
+              textAnchor: "middle",
+              fontSize: 10,
+              fill: t.textSecondary,
+              fontFamily: "ui-sans-serif,system-ui,sans-serif",
+              fontWeight: "500",
+              style: STYLE_LABEL,
+              children: edge.label
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/ui/hooks/useHistory.ts
+import { useCallback as useCallback6, useRef as useRef6, useState as useState9 } from "react";
+var MAX_HISTORY = 80;
+function useHistory(initial, onChange) {
+  const [state, setState] = useState9(initial);
+  const stackRef = useRef6([initial]);
+  const idxRef = useRef6(0);
+  const [, setTick] = useState9(0);
+  const bump = () => setTick((n) => n + 1);
+  const apply = useCallback6(
+    (next) => {
+      setState(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const applyAndPush = useCallback6(
+    (next) => {
+      const stack = stackRef.current.slice(0, idxRef.current + 1);
+      stack.push(next);
+      if (stack.length > MAX_HISTORY) stack.shift();
+      stackRef.current = stack;
+      idxRef.current = stack.length - 1;
+      setState(next);
+      onChange?.(next);
+      bump();
+    },
+    [onChange]
+  );
+  const undo = useCallback6(() => {
+    if (idxRef.current <= 0) return;
+    idxRef.current--;
+    const next = stackRef.current[idxRef.current];
+    setState(next);
+    onChange?.(next);
+    bump();
+  }, [onChange]);
+  const redo = useCallback6(() => {
+    if (idxRef.current >= stackRef.current.length - 1) return;
+    idxRef.current++;
+    const next = stackRef.current[idxRef.current];
+    setState(next);
+    onChange?.(next);
+    bump();
+  }, [onChange]);
+  return {
+    state,
+    apply,
+    applyAndPush,
+    undo,
+    redo,
+    canUndo: idxRef.current > 0,
+    canRedo: idxRef.current < stackRef.current.length - 1
+  };
+}
+
+// src/ui/hooks/useCanvasWheel.ts
+import { useEffect as useEffect6 } from "react";
+function useCanvasWheel(ref, setTransform, options = {}) {
+  const { min = 0.15, max = 3, factor = 0.1 } = options;
+  useEffect6(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      e.preventDefault();
+      const rect = el.getBoundingClientRect();
+      const px = e.clientX - rect.left;
+      const py = e.clientY - rect.top;
+      const delta = e.deltaY > 0 ? 1 - factor : 1 + factor;
+      setTransform((tr) => {
+        const scale = Math.min(max, Math.max(min, tr.scale * delta));
+        return {
+          scale,
+          x: px - (px - tr.x) * (scale / tr.scale),
+          y: py - (py - tr.y) * (scale / tr.scale)
+        };
+      });
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [ref, setTransform, min, max, factor]);
+}
+
+// src/ui/hooks/useCanvasTouch.ts
+import { useEffect as useEffect7 } from "react";
+function useCanvasTouch(ref, {
+  transform,
+  setTransform,
+  onLongPress,
+  minScale = 0.15,
+  maxScale = 3,
+  longPressMs = 550,
+  longPressSlop = 8
+}) {
+  useEffect7(() => {
+    const el = ref.current;
+    if (!el) return;
+    let touchPan = null;
+    let pinch = null;
+    let longPressTimer = null;
+    let longPressStart = null;
+    let longPressFired = false;
+    const dist = (a, b) => Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+    const cancelLongPress = () => {
+      if (longPressTimer) {
+        clearTimeout(longPressTimer);
+        longPressTimer = null;
+      }
+      longPressStart = null;
+    };
+    const onStart = (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        cancelLongPress();
+        const [a, b] = [e.touches[0], e.touches[1]];
+        const rect = el.getBoundingClientRect();
+        pinch = {
+          dist: dist(a, b),
+          cx: (a.clientX + b.clientX) / 2 - rect.left,
+          cy: (a.clientY + b.clientY) / 2 - rect.top,
+          scale: transform.scale,
+          tx: transform.x,
+          ty: transform.y
+        };
+        touchPan = null;
+        return;
+      }
+      if (e.touches.length === 1) {
+        const target = e.target;
+        const t0 = e.touches[0];
+        longPressFired = false;
+        longPressStart = { x: t0.clientX, y: t0.clientY };
+        longPressTimer = setTimeout(() => {
+          if (!longPressStart) return;
+          longPressFired = true;
+          touchPan = null;
+          onLongPress(longPressStart.x, longPressStart.y);
+        }, longPressMs);
+        if (target?.dataset.bg !== "1" && target !== el) return;
+        touchPan = { ox: t0.clientX, oy: t0.clientY, tx: transform.x, ty: transform.y };
+      }
+    };
+    const onMove = (e) => {
+      if (pinch && e.touches.length === 2) {
+        e.preventDefault();
+        const [a, b] = [e.touches[0], e.touches[1]];
+        const ratio = dist(a, b) / pinch.dist;
+        const scale = Math.min(maxScale, Math.max(minScale, pinch.scale * ratio));
+        setTransform({
+          scale,
+          x: pinch.cx - (pinch.cx - pinch.tx) * (scale / pinch.scale),
+          y: pinch.cy - (pinch.cy - pinch.ty) * (scale / pinch.scale)
+        });
+        return;
+      }
+      if (e.touches.length === 1) {
+        const t0 = e.touches[0];
+        if (longPressStart && (Math.abs(t0.clientX - longPressStart.x) > longPressSlop || Math.abs(t0.clientY - longPressStart.y) > longPressSlop)) {
+          cancelLongPress();
+        }
+        if (touchPan) {
+          e.preventDefault();
+          const pan = touchPan;
+          setTransform((tr) => ({
+            ...tr,
+            x: pan.tx + (t0.clientX - pan.ox),
+            y: pan.ty + (t0.clientY - pan.oy)
+          }));
+        }
+      }
+    };
+    const onEnd = (e) => {
+      cancelLongPress();
+      if (longPressFired) {
+        e.preventDefault();
+        longPressFired = false;
+      }
+      if (e.touches.length === 0) {
+        touchPan = null;
+        pinch = null;
+      }
+      if (e.touches.length === 1) pinch = null;
+    };
+    el.addEventListener("touchstart", onStart, { passive: false });
+    el.addEventListener("touchmove", onMove, { passive: false });
+    el.addEventListener("touchend", onEnd);
+    el.addEventListener("touchcancel", onEnd);
+    return () => {
+      cancelLongPress();
+      el.removeEventListener("touchstart", onStart);
+      el.removeEventListener("touchmove", onMove);
+      el.removeEventListener("touchend", onEnd);
+      el.removeEventListener("touchcancel", onEnd);
+    };
+  }, [ref, transform.scale, transform.x, transform.y, setTransform, onLongPress, minScale, maxScale, longPressMs, longPressSlop]);
+}
+
+// src/ui/hooks/useElementSize.ts
+import { useEffect as useEffect8, useState as useState10 } from "react";
+function useElementSize(ref) {
+  const [size, setSize] = useState10({ w: 0, h: 0 });
+  useEffect8(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const measure = () => {
+      const r = el.getBoundingClientRect();
+      setSize({ w: r.width, h: r.height });
+    };
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    measure();
+    return () => ro.disconnect();
+  }, [ref]);
+  return size;
+}
+
+// src/ui/alignment.ts
+var ALIGN_SNAP_THRESHOLD = 4;
+function findSiblingSnap(dragged, others, threshold = ALIGN_SNAP_THRESHOLD) {
+  const dL = dragged.x;
+  const dC = dragged.x + dragged.w / 2;
+  const dR = dragged.x + dragged.w;
+  const dT = dragged.y;
+  const dM = dragged.y + dragged.h / 2;
+  const dB = dragged.y + dragged.h;
+  let bestX = null;
+  let bestY = null;
+  others.forEach((o, idx) => {
+    const oL = o.x;
+    const oC = o.x + o.w / 2;
+    const oR = o.x + o.w;
+    const oT = o.y;
+    const oM = o.y + o.h / 2;
+    const oB = o.y + o.h;
+    const xCandidates = [
+      { delta: oL - dL, pos: oL },
+      // left -> left
+      { delta: oC - dC, pos: oC },
+      // center -> center
+      { delta: oR - dR, pos: oR }
+      // right -> right
+    ];
+    for (const c of xCandidates) {
+      if (Math.abs(c.delta) < threshold && (!bestX || Math.abs(c.delta) < Math.abs(bestX.delta))) {
+        bestX = { delta: c.delta, pos: c.pos, otherIdx: idx };
+      }
+    }
+    const yCandidates = [
+      { delta: oT - dT, pos: oT },
+      // top -> top
+      { delta: oM - dM, pos: oM },
+      // middle -> middle
+      { delta: oB - dB, pos: oB }
+      // bottom -> bottom
+    ];
+    for (const c of yCandidates) {
+      if (Math.abs(c.delta) < threshold && (!bestY || Math.abs(c.delta) < Math.abs(bestY.delta))) {
+        bestY = { delta: c.delta, pos: c.pos, otherIdx: idx };
+      }
+    }
+  });
+  let x = dragged.x;
+  let y = dragged.y;
+  let guideX;
+  let guideY;
+  if (bestX) {
+    const bx = bestX;
+    x = dragged.x + bx.delta;
+    const o = others[bx.otherIdx];
+    guideX = {
+      pos: bx.pos,
+      minY: Math.min(y, o.y) - 12,
+      maxY: Math.max(y + dragged.h, o.y + o.h) + 12
+    };
+  }
+  if (bestY) {
+    const by = bestY;
+    y = dragged.y + by.delta;
+    const o = others[by.otherIdx];
+    guideY = {
+      pos: by.pos,
+      minX: Math.min(x, o.x) - 12,
+      maxX: Math.max(x + dragged.w, o.x + o.w) + 12
+    };
+  }
+  return { x, y, guideX, guideY };
+}
+
+// src/ui/traversal.ts
+function nearestInDirection(fromX, fromY, dir, candidates) {
+  const matches = candidates.filter((c) => {
+    const dx = c.x - fromX;
+    const dy = c.y - fromY;
+    if (dx === 0 && dy === 0) return false;
+    if (dir === "right") return dx > 0 && Math.abs(dy) <= Math.abs(dx);
+    if (dir === "left") return dx < 0 && Math.abs(dy) <= Math.abs(dx);
+    if (dir === "down") return dy > 0 && Math.abs(dx) <= Math.abs(dy);
+    return dy < 0 && Math.abs(dx) <= Math.abs(dy);
+  });
+  if (matches.length === 0) return null;
+  matches.sort(
+    (a, b) => Math.hypot(a.x - fromX, a.y - fromY) - Math.hypot(b.x - fromX, b.y - fromY)
+  );
+  return matches[0].id;
+}
+
+// src/ui/DiagramEditor.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var STYLE_LABEL2 = { pointerEvents: "none", userSelect: "none" };
+var STYLE_LIVE_PORT = { opacity: 0.85, pointerEvents: "none" };
+var STYLE_SR_ONLY = { position: "absolute", width: 1, height: 1, padding: 0, margin: -1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", border: 0 };
+var STYLE_FLEX_ROW = { flex: 1, display: "flex", overflow: "hidden" };
+function DiagramEditor(props) {
+  if (props.initialModel?.type === "sequence") {
+    return /* @__PURE__ */ jsx9(
+      SequenceEditor,
+      {
+        initialModel: props.initialModel,
+        onChange: props.onChange,
+        onExport: props.onExport,
+        height: props.height,
+        allowedExports: props.allowedExports,
+        allowImport: props.allowImport,
+        theme: props.theme,
+        themeOverrides: props.themeOverrides
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx9(FlowchartEditor, { ...props });
+}
+function FlowchartEditor({
+  initialModel,
+  onChange,
+  onExport,
+  height = 600,
+  allowedExports,
+  allowImport = true,
+  variant = "flowchart",
+  theme = "auto",
+  themeOverrides
+}) {
+  const base = initialModel ? { ...initialModel, variant: initialModel.variant ?? variant } : presetFlowchartModel(variant);
+  const notify = useCallback7((m) => onChange?.(m), [onChange]);
+  const history = useHistory(base, notify);
+  const { state: model, apply: applyModel, applyAndPush, undo, redo } = history;
+  const [transform, setTransform] = useState11({ x: 60, y: 60, scale: 1 });
+  const [selected, setSelected] = useState11(null);
+  const [selectedSet, setSelectedSet] = useState11(() => /* @__PURE__ */ new Set());
+  const [drag, setDrag] = useState11(null);
+  const [pan, setPan] = useState11(null);
+  const [boxSel, setBoxSel] = useState11(null);
+  const [liveEdge, setLiveEdge] = useState11(null);
+  const [alignGuides, setAlignGuides] = useState11(null);
+  const [waypointDrag, setWaypointDrag] = useState11(null);
+  const groupDragOriginsRef = useRef7(null);
+  const clipboardRef = useRef7(null);
+  const selectOne = useCallback7((id) => {
+    setSelected(id);
+    setSelectedSet(id ? /* @__PURE__ */ new Set([id]) : /* @__PURE__ */ new Set());
+  }, []);
+  const toggleSelect = useCallback7((id) => {
+    setSelectedSet((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+        const last = next.size ? Array.from(next)[next.size - 1] : null;
+        setSelected(last);
+      } else {
+        next.add(id);
+        setSelected(id);
+      }
+      return next;
+    });
+  }, []);
+  const clearSelection = useCallback7(() => {
+    setSelected(null);
+    setSelectedSet(/* @__PURE__ */ new Set());
+  }, []);
+  const [editingId, setEditingId] = useState11(null);
+  const [editLabel, setEditLabel] = useState11("");
+  const [editingEdgeId, setEditingEdgeId] = useState11(null);
+  const [editEdgeLabel, setEditEdgeLabel] = useState11("");
+  const [hoveredId, setHoveredId] = useState11(null);
+  const [ctxMenu, setCtxMenu] = useState11(null);
+  const [navOpen, setNavOpen] = useState11(true);
+  const [announcement, setAnnouncement] = useState11("");
+  const svgRef = useRef7(null);
+  const containerRef = useRef7(null);
+  const reducedMotion = usePrefersReducedMotion();
+  const { t, isDark } = useEditorTheme(theme, themeOverrides, { light: lightTheme, dark: darkTheme });
+  const isCoarse = useIsCoarsePointer();
+  const portR = isCoarse ? 9 : 6;
+  const viewport = useElementSize(svgRef);
+  const reCenter = useCallback7(() => {
+    if (!svgRef.current) return;
+    const rect = svgRef.current.getBoundingClientRect();
+    const W2 = rect.width, H2 = rect.height;
+    if (model.nodes.length === 0) {
+      setTransform({ x: W2 / 2, y: H2 / 2, scale: 1 });
+      return;
+    }
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const n of model.nodes) {
+      const nx = n.x ?? 0, ny = n.y ?? 0;
+      const { w: nw, h: nh } = nodeDims(n, variant);
+      minX = Math.min(minX, nx);
+      minY = Math.min(minY, ny);
+      maxX = Math.max(maxX, nx + nw);
+      maxY = Math.max(maxY, ny + nh);
+    }
+    const pad = 48;
+    const scaleX = (W2 - pad * 2) / (maxX - minX || 1);
+    const scaleY = (H2 - pad * 2) / (maxY - minY || 1);
+    const scale = Math.min(1.5, Math.max(0.2, Math.min(scaleX, scaleY)));
+    const cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
+    setTransform({ scale, x: W2 / 2 - cx * scale, y: H2 / 2 - cy * scale });
+  }, [model.nodes, variant]);
+  const jumpToNode = useCallback7((nodeId) => {
+    const 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 = useCallback7((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 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 = useCallback7((nodeId) => {
+    duplicateIds([nodeId]);
+  }, [duplicateIds]);
+  useEffect9(() => {
+    if (!ctxMenu) return;
+    const close = () => setCtxMenu(null);
+    window.addEventListener("mousedown", close);
+    return () => window.removeEventListener("mousedown", close);
+  }, [ctxMenu]);
+  useEffect9(() => {
+    const onKey = (e) => {
+      const tgt = e.target;
+      if (tgt && (tgt.tagName === "INPUT" || tgt.tagName === "TEXTAREA" || tgt.isContentEditable)) return;
+      const ctrl = e.ctrlKey || e.metaKey;
+      if (ctrl && e.key === "z") {
+        e.preventDefault();
+        undo();
+        return;
+      }
+      if (ctrl && (e.key === "y" || e.shiftKey && e.key === "z")) {
+        e.preventDefault();
+        redo();
+        return;
+      }
+      if (ctrl && e.key === "0") {
+        e.preventDefault();
+        reCenter();
+        return;
+      }
+      if (ctrl && (e.key === "d" || e.key === "D")) {
+        if (selectedSet.size > 0) {
+          e.preventDefault();
+          duplicateIds(Array.from(selectedSet));
+        }
+        return;
+      }
+      if (ctrl && (e.key === "c" || e.key === "C")) {
+        if (selectedSet.size > 0) {
+          e.preventDefault();
+          const ids = new Set(selectedSet);
+          const nodes = model.nodes.filter((n) => ids.has(n.id));
+          const edges = model.edges.filter((ed) => ids.has(ed.from) && ids.has(ed.to));
+          clipboardRef.current = {
+            nodes: nodes.map((n) => ({ ...n })),
+            edges: edges.map((ed) => ({ ...ed }))
+          };
+        }
+        return;
+      }
+      if (ctrl && (e.key === "v" || e.key === "V")) {
+        const clip = clipboardRef.current;
+        if (clip && clip.nodes.length > 0) {
+          e.preventDefault();
+          const idMap = /* @__PURE__ */ new Map();
+          const nextNode = makeIdSource("node", model.nodes);
+          const nextEdge = makeIdSource("e", model.edges);
+          const newNodes = clip.nodes.map((n) => {
+            const newId = nextNode();
+            idMap.set(n.id, newId);
+            return { ...n, id: newId, x: (n.x ?? 0) + 24, y: (n.y ?? 0) + 24 };
+          });
+          const newEdges = clip.edges.map((ed) => ({
+            ...ed,
+            id: nextEdge(),
+            from: idMap.get(ed.from) ?? ed.from,
+            to: idMap.get(ed.to) ?? ed.to
+          }));
+          const m = { ...model, nodes: [...model.nodes, ...newNodes], edges: [...model.edges, ...newEdges] };
+          applyAndPush(m);
+          const newIds = newNodes.map((n) => n.id);
+          setSelected(newIds[newIds.length - 1]);
+          setSelectedSet(new Set(newIds));
+          setAnnouncement(`Pasted ${newIds.length} ${variantLabel.toLowerCase()}${newIds.length === 1 ? "" : "s"}.`);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (ctxMenu) setCtxMenu(null);
+        if (liveEdge) setLiveEdge(null);
+        if (editingId) setEditingId(null);
+        if (boxSel) setBoxSel(null);
+        if (selectedSet.size > 0) clearSelection();
+        return;
+      }
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedSet.size > 0) {
+        e.preventDefault();
+        const ids = new Set(selectedSet);
+        const updated = {
+          ...model,
+          nodes: model.nodes.filter((n) => !ids.has(n.id)),
+          edges: model.edges.filter((ed) => !ids.has(ed.from) && !ids.has(ed.to))
+        };
+        applyAndPush(updated);
+        clearSelection();
+        setAnnouncement(`Deleted ${ids.size} ${variantLabel.toLowerCase()}${ids.size === 1 ? "" : "s"}.`);
+        return;
+      }
+      if (selectedSet.size > 0 && (e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+        const dirKey = e.key === "ArrowLeft" ? "left" : e.key === "ArrowRight" ? "right" : e.key === "ArrowUp" ? "up" : "down";
+        if (e.altKey && selected) {
+          e.preventDefault();
+          const origin = model.nodes.find((n) => n.id === selected);
+          if (!origin) return;
+          const od = nodeDims(origin, variant);
+          const ox = (origin.x ?? 0) + od.w / 2;
+          const oy = (origin.y ?? 0) + od.h / 2;
+          const candidates = model.nodes.filter((n) => n.id !== selected).map((n) => {
+            const d = nodeDims(n, variant);
+            return { id: n.id, x: (n.x ?? 0) + d.w / 2, y: (n.y ?? 0) + d.h / 2 };
+          });
+          const nextId2 = nearestInDirection(ox, oy, dirKey, candidates);
+          if (nextId2) {
+            selectOne(nextId2);
+            setAnnouncement(`Selected ${model.nodes.find((n) => n.id === nextId2)?.label ?? ""}.`);
+          }
+          return;
+        }
+        e.preventDefault();
+        const step = e.shiftKey ? GRID * 4 : GRID;
+        const dx = dirKey === "left" ? -step : dirKey === "right" ? step : 0;
+        const dy = dirKey === "up" ? -step : dirKey === "down" ? step : 0;
+        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)
+        };
+        applyAndPush(updated);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [undo, redo, reCenter, selected, selectedSet, ctxMenu, liveEdge, editingId, boxSel, model, applyAndPush, duplicateNode, clearSelection]);
+  const toCanvas = useCallback7((clientX, clientY) => {
+    const rect = svgRef.current.getBoundingClientRect();
+    return { x: (clientX - rect.left - transform.x) / transform.scale, y: (clientY - rect.top - transform.y) / transform.scale };
+  }, [transform]);
+  useCanvasWheel(svgRef, setTransform);
+  const onCanvasLongPress = useCallback7((x, y) => {
+    setCtxMenu({ x, y, nodeId: null });
+  }, []);
+  useCanvasTouch(svgRef, { transform, setTransform, onLongPress: onCanvasLongPress });
+  const onPortMouseDown = (e, nodeId) => {
+    e.stopPropagation();
+    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 });
+  };
+  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 });
+  };
+  const onNodeMouseDown = (e, id) => {
+    e.stopPropagation();
+    if (liveEdge) return;
+    const node = model.nodes.find((n) => n.id === id);
+    if (e.shiftKey) {
+      toggleSelect(id);
+      return;
+    }
+    const inSet = selectedSet.has(id);
+    if (inSet && selectedSet.size > 1) {
+      setSelected(id);
+      const origins = /* @__PURE__ */ new Map();
+      for (const sid of selectedSet) {
+        const n = model.nodes.find((x) => x.id === sid);
+        if (!n) continue;
+        origins.set(sid, {
+          ox: e.clientX - (transform.x + (n.x ?? 0) * transform.scale),
+          oy: e.clientY - (transform.y + (n.y ?? 0) * transform.scale)
+        });
+      }
+      groupDragOriginsRef.current = origins;
+    } else {
+      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) });
+  };
+  const onNodeMouseUp = (e, targetId) => {
+    if (!liveEdge || liveEdge.fromId === targetId) return;
+    e.stopPropagation();
+    const label = liveEdge.answerLabel;
+    let updated;
+    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) };
+      } else {
+        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 }] };
+    }
+    applyAndPush(updated);
+    setLiveEdge(null);
+  };
+  const onSvgMouseDown = (e) => {
+    if (ctxMenu) {
+      setCtxMenu(null);
+      return;
+    }
+    if (e.target.dataset.bg === "1" || e.target === svgRef.current) {
+      if (e.shiftKey) {
+        setBoxSel({ sx: e.clientX, sy: e.clientY, cx: e.clientX, cy: e.clientY, additive: true });
+      } else {
+        clearSelection();
+        setPan({ ox: e.clientX, oy: e.clientY, tx: transform.x, ty: transform.y });
+      }
+    }
+  };
+  const onSvgContextMenu = (e) => {
+    e.preventDefault();
+    setCtxMenu({ x: e.clientX, y: e.clientY, nodeId: null });
+  };
+  const onNodeContextMenu = (e, nodeId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!selectedSet.has(nodeId)) selectOne(nodeId);
+    setCtxMenu({ x: e.clientX, y: e.clientY, nodeId });
+  };
+  const onMouseMove = (e) => {
+    if (liveEdge) {
+      const { x, y } = toCanvas(e.clientX, e.clientY);
+      setLiveEdge((le) => le ? { ...le, toX: x, toY: y } : null);
+      return;
+    }
+    if (waypointDrag) {
+      const { x, y } = toCanvas(e.clientX, e.clientY);
+      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)
+      };
+      applyModel(updated);
+      return;
+    }
+    if (drag) {
+      const dx = snap((e.clientX - drag.ox - transform.x) / transform.scale);
+      const dy = snap((e.clientY - drag.oy - transform.y) / transform.scale);
+      const origins = groupDragOriginsRef.current;
+      if (origins && origins.size > 1) {
+        const updated = {
+          ...model,
+          nodes: model.nodes.map((n) => {
+            const o = origins.get(n.id);
+            if (!o) return n;
+            return {
+              ...n,
+              x: snap((e.clientX - o.ox - transform.x) / transform.scale),
+              y: snap((e.clientY - o.oy - transform.y) / transform.scale)
+            };
+          })
+        };
+        applyModel(updated);
+      } else {
+        const dragged = model.nodes.find((n) => n.id === drag.nodeId);
+        if (!dragged) return;
+        const { w: dW, h: dH } = nodeDims(dragged, variant);
+        const others = model.nodes.filter((n) => n.id !== drag.nodeId).map((n) => {
+          const d = nodeDims(n, variant);
+          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) };
+        applyModel(updated);
+      }
+    } else if (pan) {
+      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);
+    }
+  };
+  const onMouseUp = () => {
+    if (boxSel) {
+      const dragged = Math.abs(boxSel.cx - boxSel.sx) > 3 || Math.abs(boxSel.cy - boxSel.sy) > 3;
+      if (dragged && svgRef.current) {
+        const rect = svgRef.current.getBoundingClientRect();
+        const x1 = Math.min(boxSel.sx, boxSel.cx) - rect.left;
+        const y1 = Math.min(boxSel.sy, boxSel.cy) - rect.top;
+        const x2 = Math.max(boxSel.sx, boxSel.cx) - rect.left;
+        const y2 = Math.max(boxSel.sy, boxSel.cy) - rect.top;
+        const cx1 = (x1 - transform.x) / transform.scale;
+        const cy1 = (y1 - transform.y) / transform.scale;
+        const cx2 = (x2 - transform.x) / transform.scale;
+        const cy2 = (y2 - transform.y) / transform.scale;
+        const hits = new Set(boxSel.additive ? selectedSet : []);
+        for (const n of model.nodes) {
+          const nx = n.x ?? 0, ny = n.y ?? 0;
+          const { w: nw, h: nh } = nodeDims(n, variant);
+          if (nx + nw >= cx1 && nx <= cx2 && ny + nh >= cy1 && ny <= cy2) hits.add(n.id);
+        }
+        const arr = Array.from(hits);
+        setSelectedSet(hits);
+        setSelected(arr.length ? arr[arr.length - 1] : null);
+      }
+      setBoxSel(null);
+    }
+    if (drag) applyAndPush(model);
+    if (waypointDrag) {
+      applyAndPush(model);
+      setWaypointDrag(null);
+    }
+    groupDragOriginsRef.current = null;
+    setAlignGuides(null);
+    setDrag(null);
+    setPan(null);
+    if (liveEdge) setLiveEdge(null);
+  };
+  const onNodeDblClick = (e, id) => {
+    e.stopPropagation();
+    const node = model.nodes.find((n) => n.id === id);
+    setEditingId(id);
+    setEditLabel(node.label);
+  };
+  const commitEdit = () => {
+    if (!editingId) return;
+    const up = { ...model, nodes: model.nodes.map((n) => n.id === editingId ? { ...n, label: editLabel } : n) };
+    applyAndPush(up);
+    setEditingId(null);
+  };
+  const addNode = (atCanvasPos) => {
+    const id = nextId("node", model.nodes);
+    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 }] };
+    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) };
+    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 (node) setAnnouncement(`Deleted ${variantLabel.toLowerCase()} "${node.label}".`);
+  };
+  const deleteSelected = () => {
+    if (selectedSet.size === 0) return;
+    if (selectedSet.size === 1 && selected) {
+      deleteNode(selected);
+      return;
+    }
+    const ids = new Set(selectedSet);
+    const updated = {
+      ...model,
+      nodes: model.nodes.filter((n) => !ids.has(n.id)),
+      edges: model.edges.filter((ed) => !ids.has(ed.from) && !ids.has(ed.to))
+    };
+    applyAndPush(updated);
+    clearSelection();
+    setAnnouncement(`Deleted ${ids.size} ${variantLabel.toLowerCase()}s.`);
+  };
+  const beginEditEdge = (edgeId) => {
+    const edge = model.edges.find((e) => e.id === edgeId);
+    if (!edge) return;
+    if (variant === "question") return;
+    setEditingEdgeId(edgeId);
+    setEditEdgeLabel(edge.label ?? "");
+  };
+  const commitEdgeEdit = () => {
+    if (!editingEdgeId) return;
+    const next = editEdgeLabel.trim();
+    const updated = {
+      ...model,
+      edges: model.edges.map((e) => e.id === editingEdgeId ? { ...e, ...next ? { label: next } : { label: void 0 } } : e)
+    };
+    applyAndPush(updated);
+    setEditingEdgeId(null);
+  };
+  const onEdgeContextMenu = (e, edgeId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    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) };
+    applyAndPush(updated);
+  };
+  const setEdgeArrowhead = (edgeId, arrowhead) => {
+    const updated = { ...model, edges: model.edges.map((e) => e.id === edgeId ? { ...e, arrowhead } : e) };
+    applyAndPush(updated);
+  };
+  const deleteEdge = (edgeId) => {
+    const updated = { ...model, edges: model.edges.filter((e) => e.id !== edgeId) };
+    applyAndPush(updated);
+  };
+  const resetEdgeRouting = (edgeId) => {
+    const updated = {
+      ...model,
+      edges: model.edges.map((e) => {
+        if (e.id !== edgeId) return e;
+        const { waypoint: _ignored, ...rest } = e;
+        void _ignored;
+        return rest;
+      })
+    };
+    applyAndPush(updated);
+  };
+  const handleExport = useExporters(model, onExport, "diagram");
+  const positionFlowchartNodes = useCallback7((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 });
+  const acc = variantAccent(variant, isDark);
+  const variantLabel = variant === "question" ? "Question" : variant === "journey" ? "Step" : "Node";
+  const shadowColor = isDark ? "rgba(0,0,0,0.55)" : "rgba(15,23,42,0.09)";
+  const arrowColor = isDark ? "#64748b" : "#94a3b8";
+  const amberArrow = isDark ? ACCENT.amberDark : ACCENT.amber;
+  return /* @__PURE__ */ jsxs9("div", { className: "fsd-editor", style: { display: "flex", flexDirection: "column", height, width: "100%", fontFamily: "ui-sans-serif,system-ui,sans-serif", boxSizing: "border-box", background: t.ctrlsBg }, children: [
+    /* @__PURE__ */ jsx9("style", { children: `
+        .fsd-editor button:focus-visible,
+        .fsd-editor input:focus-visible,
+        .fsd-editor textarea:focus-visible,
+        .fsd-editor select:focus-visible,
+        .fsd-editor [role="button"]:focus-visible {
+          outline: 2px solid ${acc.color};
+          outline-offset: 2px;
+          border-radius: 6px;
+        }
+        .fsd-editor svg[role="application"]:focus-visible {
+          outline: 2px solid ${acc.color};
+          outline-offset: -2px;
+        }
+      ` }),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        style: STYLE_SR_ONLY,
+        children: announcement
+      }
+    ),
+    /* @__PURE__ */ jsx9(Toolbar, { onExport: handleExport, onImport: allowImport ? handleImport : void 0, allowedExports, allowImport }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: 6, padding: "7px 14px", background: t.ctrlsBg, borderBottom: `1px solid ${t.ctrlsBorder}`, alignItems: "center", flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs9("button", { onClick: () => addNode(), style: ctrlBtn(acc.color, isDark), children: [
+        "+ ",
+        variantLabel
+      ] }),
+      selectedSet.size > 0 && /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsx9("div", { style: { width: 1, height: 20, background: t.ctrlsBorder, margin: "0 2px" } }),
+        /* @__PURE__ */ jsx9("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__ */ jsxs9("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__ */ jsx9("span", { style: { fontWeight: 400, color: t.textMuted, marginLeft: 6 }, children: "release to cancel" })
+      ] }),
+      /* @__PURE__ */ jsxs9("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__ */ jsx9("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__ */ jsxs9("div", { style: STYLE_FLEX_ROW, children: [
+      /* @__PURE__ */ jsx9(
+        NodeNavigator,
+        {
+          model,
+          selected,
+          variant,
+          isDark,
+          t,
+          acc,
+          open: navOpen,
+          onToggle: () => setNavOpen((v) => !v),
+          onSelect: jumpToNode
+        }
+      ),
+      /* @__PURE__ */ jsxs9("div", { ref: containerRef, style: { flex: 1, overflow: "hidden", position: "relative", background: t.canvas }, children: [
+        /* @__PURE__ */ jsxs9(
+          "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__ */ jsxs9("defs", { children: [
+                /* @__PURE__ */ jsx9("style", { children: reducedMotion ? `
+                .edge-flow { stroke-dasharray: 0; }
+                .edge-flow-amber { stroke-dasharray: 0; }
+                .edge-live { stroke-dasharray: 4 4; }
+              ` : `
+                @keyframes edgeFlow { to { stroke-dashoffset: -13; } }
+                @keyframes edgeFlowFast { to { stroke-dashoffset: -13; } }
+                .edge-flow { stroke-dasharray: 8 5; animation: edgeFlow 0.9s linear infinite; }
+                .edge-flow-amber { stroke-dasharray: 6 4; animation: edgeFlowFast 0.65s linear infinite; }
+                .edge-live { stroke-dasharray: 7 5; animation: edgeFlow 0.55s linear infinite; }
+              ` }),
+                /* @__PURE__ */ jsx9("pattern", { id: "dots", width: GRID, height: GRID, patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx9("circle", { cx: GRID / 2, cy: GRID / 2, r: 1.1, fill: t.dot }) }),
+                /* @__PURE__ */ jsx9("filter", { id: "nodeShadow", x: "-25%", y: "-25%", width: "150%", height: "160%", children: /* @__PURE__ */ jsx9("feDropShadow", { dx: "0", dy: "3", stdDeviation: "5", floodColor: shadowColor, floodOpacity: "1" }) }),
+                /* @__PURE__ */ jsx9("marker", { id: "arrowhead", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx9("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: arrowColor }) }),
+                /* @__PURE__ */ jsx9("marker", { id: "arrowAmber", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx9("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: amberArrow }) }),
+                /* @__PURE__ */ jsx9("marker", { id: "arrowLive", markerWidth: "9", markerHeight: "7", refX: "8", refY: "3.5", orient: "auto", markerUnits: "strokeWidth", children: /* @__PURE__ */ jsx9("path", { d: "M0,0.5 L9,3.5 L0,6.5 L2.2,3.5 Z", fill: acc.color }) })
+              ] }),
+              /* @__PURE__ */ jsx9("rect", { width: "100%", height: "100%", fill: "url(#dots)", "data-bg": "1" }),
+              /* @__PURE__ */ jsxs9("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.scale})`, children: [
+                model.edges.map((e) => /* @__PURE__ */ jsx9(
+                  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__ */ jsx9("path", { d, fill: "none", stroke: acc.color, strokeWidth: 2, strokeLinecap: "round", className: "edge-live", opacity: 0.8, markerEnd: "url(#arrowLive)" });
+                })(),
+                alignGuides?.x && /* @__PURE__ */ jsx9(
+                  "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__ */ jsx9(
+                  "line",
+                  {
+                    y1: alignGuides.y.pos,
+                    y2: alignGuides.y.pos,
+                    x1: alignGuides.y.minX,
+                    x2: alignGuides.y.maxX,
+                    stroke: acc.color,
+                    strokeWidth: 1 / transform.scale,
+                    strokeDasharray: `${4 / transform.scale} ${3 / transform.scale}`,
+                    opacity: 0.85,
+                    pointerEvents: "none"
+                  }
+                ),
+                model.nodes.map((node, idx) => {
+                  const isHovered = hoveredId === node.id;
+                  const isQuestion2 = variant === "question";
+                  const { w: nW, h: nH } = nodeDims(node, variant);
+                  const isSelected = selectedSet.has(node.id);
+                  return /* @__PURE__ */ jsxs9(
+                    "g",
+                    {
+                      transform: `translate(${node.x ?? 0},${node.y ?? 0})`,
+                      role: "button",
+                      "aria-label": `${variantLabel} ${variant === "journey" ? idx + 1 + ": " : ""}${node.label}${isSelected ? ", selected" : ""}`,
+                      style: { cursor: drag?.nodeId === node.id ? "grabbing" : "grab" },
+                      onMouseDown: (e) => onNodeMouseDown(e, node.id),
+                      onMouseUp: (e) => onNodeMouseUp(e, node.id),
+                      onDoubleClick: (e) => onNodeDblClick(e, node.id),
+                      onContextMenu: (e) => onNodeContextMenu(e, node.id),
+                      onMouseEnter: () => setHoveredId(node.id),
+                      onMouseLeave: () => setHoveredId(null),
+                      children: [
+                        /* @__PURE__ */ jsx9("title", { children: `${variantLabel}: ${node.label}` }),
+                        isQuestion2 ? /* @__PURE__ */ jsx9(QuestionNode, { node, selected: isSelected, edges: model.edges, isDark, onAnswerPortDown, qW: nW }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+                          /* @__PURE__ */ jsx9(NodeShape, { node, selected: isSelected, variant, stepNumber: variant === "journey" ? idx + 1 : void 0, t, isDark, w: nW }),
+                          editingId === node.id ? /* @__PURE__ */ jsx9("foreignObject", { x: 6, y: 6, width: nW - 12, height: NODE_H2 - 12, children: /* @__PURE__ */ jsx9(
+                            "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__ */ jsx9("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__ */ jsx9(
+                            "circle",
+                            {
+                              cx: nW / 2,
+                              cy: NODE_H2 + 1,
+                              r: portR,
+                              fill: acc.color,
+                              stroke: isDark ? "#0f172a" : "white",
+                              strokeWidth: 2,
+                              style: { cursor: "crosshair", opacity: isHovered || isCoarse ? 1 : 0, transition: "opacity 0.15s", pointerEvents: isHovered || isCoarse ? "all" : "none", filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25))" },
+                              onMouseDown: (e) => onPortMouseDown(e, node.id)
+                            }
+                          )
+                        ] }),
+                        liveEdge && liveEdge.fromId !== node.id && /* @__PURE__ */ jsx9("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__ */ jsx9(
+            "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__ */ jsxs9("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", pointerEvents: "none", gap: 8 }, children: [
+          /* @__PURE__ */ jsx9("div", { style: { fontSize: 36, opacity: 0.1, color: t.textPrimary }, children: variant === "question" ? "?" : variant === "journey" ? "\u2197" : "\u2B21" }),
+          /* @__PURE__ */ jsxs9("div", { style: { fontSize: 13, color: t.textMuted, fontWeight: 500 }, children: [
+            "Click ",
+            /* @__PURE__ */ jsxs9("strong", { style: { color: acc.color }, children: [
+              "+ ",
+              variantLabel
+            ] }),
+            " to start"
+          ] })
+        ] }),
+        model.nodes.length > 0 && viewport.w > 0 && /* @__PURE__ */ jsx9(
+          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 && (() => {
+          const ctxEdge = ctxMenu.edgeId ? model.edges.find((e) => e.id === ctxMenu.edgeId) : void 0;
+          return /* @__PURE__ */ jsx9(
+            ContextMenu,
+            {
+              x: ctxMenu.x,
+              y: ctxMenu.y,
+              nodeId: ctxMenu.nodeId,
+              edgeId: ctxMenu.edgeId,
+              isDark,
+              t,
+              acc,
+              canUndo: history.canUndo,
+              canRedo: history.canRedo,
+              onUndo: () => {
+                undo();
+                setCtxMenu(null);
+              },
+              onRedo: () => {
+                redo();
+                setCtxMenu(null);
+              },
+              onReCenter: () => {
+                reCenter();
+                setCtxMenu(null);
+              },
+              onAddNode: () => {
+                const rect = svgRef.current.getBoundingClientRect();
+                const cx = (ctxMenu.x - rect.left - transform.x) / transform.scale;
+                const cy = (ctxMenu.y - rect.top - transform.y) / transform.scale;
+                addNode({ x: cx, y: cy });
+                setCtxMenu(null);
+              },
+              onDuplicate: () => {
+                if (ctxMenu.nodeId) {
+                  duplicateNode(ctxMenu.nodeId);
+                  setCtxMenu(null);
+                }
+              },
+              onRename: () => {
+                if (ctxMenu.nodeId) {
+                  const node = model.nodes.find((n) => n.id === ctxMenu.nodeId);
+                  setEditingId(ctxMenu.nodeId);
+                  setEditLabel(node.label);
+                  setCtxMenu(null);
+                }
+              },
+              onDelete: () => {
+                if (ctxMenu.nodeId) {
+                  deleteNode(ctxMenu.nodeId);
+                  setCtxMenu(null);
+                }
+              },
+              onDisconnect: () => {
+                if (ctxMenu.nodeId) {
+                  const m = { ...model, edges: model.edges.filter((e) => e.from !== ctxMenu.nodeId && e.to !== ctxMenu.nodeId) };
+                  applyAndPush(m);
+                  setCtxMenu(null);
+                }
+              },
+              currentEdgeStyle: ctxEdge?.style ?? "solid",
+              currentEdgeArrow: ctxEdge?.arrowhead ?? "arrow",
+              edgeHasWaypoint: !!ctxEdge?.waypoint,
+              onEdgeRename: () => {
+                if (ctxMenu.edgeId) {
+                  beginEditEdge(ctxMenu.edgeId);
+                  setCtxMenu(null);
+                }
+              },
+              onEdgeStyle: (s2) => {
+                if (ctxMenu.edgeId) {
+                  setEdgeStyle(ctxMenu.edgeId, s2);
+                  setCtxMenu(null);
+                }
+              },
+              onEdgeArrowhead: (a) => {
+                if (ctxMenu.edgeId) {
+                  setEdgeArrowhead(ctxMenu.edgeId, a);
+                  setCtxMenu(null);
+                }
+              },
+              onEdgeDelete: () => {
+                if (ctxMenu.edgeId) {
+                  deleteEdge(ctxMenu.edgeId);
+                  setCtxMenu(null);
+                }
+              },
+              onEdgeResetRouting: () => {
+                if (ctxMenu.edgeId) {
+                  resetEdgeRouting(ctxMenu.edgeId);
+                  setCtxMenu(null);
+                }
+              },
+              containerRef
+            }
+          );
+        })()
+      ] }),
+      selected && /* @__PURE__ */ jsx9(StepEditor, { nodeId: selected, model, onModelChange: (m) => {
+        applyAndPush(m);
+      }, variant, isDark, t, acc }, selected)
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { style: { padding: "4px 14px", fontSize: 11, color: t.textMuted, background: t.statusBg, borderTop: `1px solid ${t.ctrlsBorder}`, display: "flex", gap: 16 }, children: [
+      /* @__PURE__ */ jsxs9("span", { children: [
+        model.nodes.length,
+        " ",
+        variantLabel.toLowerCase(),
+        "s"
+      ] }),
+      /* @__PURE__ */ jsxs9("span", { children: [
+        model.edges.length,
+        " connections"
+      ] }),
+      /* @__PURE__ */ jsxs9("span", { children: [
+        Math.round(transform.scale * 100),
+        "% zoom"
+      ] }),
+      /* @__PURE__ */ jsx9("span", { style: { marginLeft: "auto" }, children: "Ctrl+Z undo \xB7 Ctrl+Y redo \xB7 Ctrl+0 fit \xB7 Alt+Arrow traverse" }),
+      selected && /* @__PURE__ */ jsx9("span", { style: { color: acc.color }, children: model.nodes.find((n) => n.id === selected)?.label })
+    ] })
+  ] });
+}
+function ctrlBtn(accent, isDark) {
+  const isTransparent = accent === "transparent";
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 5,
+    padding: "5px 12px",
+    background: isTransparent ? "transparent" : accent,
+    color: isTransparent ? "#ef4444" : "#fff",
+    border: isTransparent ? `1px solid ${isDark ? "#7f1d1d" : "#fca5a5"}` : "none",
+    borderRadius: 6,
+    cursor: "pointer",
+    fontSize: 12,
+    fontWeight: 500,
+    fontFamily: "inherit"
+  };
+}
+export {
+  DiagramEditor,
+  SequenceEditor,
+  StepEditor,
+  Toolbar,
+  emptyModel,
+  presetFlowchartModel,
+  presetSequenceModel
+};
+//# sourceMappingURL=index.js.map