@nice2dev/ui-diagrams 1.1.9 → 1.1.10

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { jsxs as v, jsx as l, Fragment as je } from "react/jsx-runtime";
-import { NiceButton as B, NiceIcon as te, NiceSelect as ze, NiceNumberInput as Re, NiceTextInput as ot, NiceColorPicker as Le, NiceCheckbox as Ue, NiceSlider as He, NiceAppShell as cr, NiceTutorialButton as Et, resolveTutorial as Lt } from "@nice2dev/ui";
-import Wt, { useMemo as ae, useContext as lr, createContext as dr, useRef as Ve, useState as K, useCallback as G, useEffect as Be } from "react";
+import { NiceButton as Y, NiceIcon as te, NiceSelect as ze, NiceNumberInput as Oe, NiceTextInput as ot, NiceColorPicker as We, NiceCheckbox as Ue, NiceSlider as He, NiceAppShell as cr, NiceTutorialButton as Et, resolveTutorial as Lt } from "@nice2dev/ui";
+import Wt, { useMemo as ae, useContext as lr, createContext as dr, useRef as Ve, useState as K, useCallback as G, useEffect as Ye } from "react";
 class ur {
   constructor(e) {
     this.liquidFlows = /* @__PURE__ */ new Map(), this.glowStates = /* @__PURE__ */ new Map(), this.particles = [], this.emitters = [], this.rafId = 0, this.running = !1, this.lastTime = 0, this.tick = () => {
@@ -92,7 +92,7 @@ class ur {
     };
   }
 }
-function _o(r, e, t) {
+function Co(r, e, t) {
   if (!t)
     return { x: 0, y: 0 };
   const i = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -129,18 +129,18 @@ function St(r, e) {
       continue;
     const y = b.position.x + b.size.width / 2, S = b.position.y + b.size.height / 2, C = w.position.x + w.size.width / 2, z = w.position.y + w.size.height / 2, _ = h.style.strokeColor ?? "#666", x = h.style.strokeWidth ?? 2, P = h.style.targetArrow !== "none" ? ' marker-end="url(#arrowhead)"' : "";
     if (h.style.lineType === "bezier") {
-      const L = (y + C) / 2, O = S, W = (y + C) / 2, F = z;
+      const L = (y + C) / 2, R = S, W = (y + C) / 2, F = z;
       g.push(
-        `<path d="M${y},${S} C${L},${O} ${W},${F} ${C},${z}" fill="none" stroke="${_}" stroke-width="${x}"${P} />`
+        `<path d="M${y},${S} C${L},${R} ${W},${F} ${C},${z}" fill="none" stroke="${_}" stroke-width="${x}"${P} />`
       );
     } else
       g.push(
         `<line x1="${y}" y1="${S}" x2="${C}" y2="${z}" stroke="${_}" stroke-width="${x}"${P} />`
       );
     if (h.label) {
-      const L = (y + C) / 2, O = (S + z) / 2;
+      const L = (y + C) / 2, R = (S + z) / 2;
       g.push(
-        `<text x="${L}" y="${O - 6}" text-anchor="middle" font-size="12" fill="#333">${zt(h.label)}</text>`
+        `<text x="${L}" y="${R - 6}" text-anchor="middle" font-size="12" fill="#333">${zt(h.label)}</text>`
       );
     }
   }
@@ -548,7 +548,7 @@ function qt({ locale: r = "en", overrides: e, children: t }) {
 function ct() {
   return lr(Ft);
 }
-function Mo(r) {
+function So(r) {
   const e = [];
   let t;
   try {
@@ -578,7 +578,7 @@ class bt {
     const t = (/* @__PURE__ */ new Date()).toISOString();
     return {
       version: "1.0",
-      id: We(),
+      id: Fe(),
       title: "Untitled Diagram",
       diagramType: e,
       nodes: [],
@@ -643,7 +643,7 @@ class bt {
   addNode(e, t, i = "roundedRect", a = { width: 160, height: 60 }) {
     this.pushUndo("Add node");
     const o = gr(), s = {
-      id: We(),
+      id: Fe(),
       label: e,
       position: t,
       size: a,
@@ -677,7 +677,7 @@ class bt {
       return null;
     this.pushUndo("Add edge");
     const s = {
-      id: We(),
+      id: Fe(),
       sourceNodeId: e,
       sourcePortId: t,
       targetNodeId: i,
@@ -699,7 +699,7 @@ class bt {
   createGroup(e, t) {
     this.pushUndo("Create group");
     const i = {
-      id: We(),
+      id: Fe(),
       label: e,
       nodeIds: [...t]
     };
@@ -719,7 +719,7 @@ class bt {
   // ── Animation operations ─────────────────────────────────────
   addAnimation(e) {
     this.pushUndo("Add animation");
-    const t = { id: We(), ...e };
+    const t = { id: Fe(), ...e };
     return this.doc.animations.push(t), this.notify(), t;
   }
   removeAnimation(e) {
@@ -756,7 +756,7 @@ class bt {
   addAnimationMode(e, t) {
     this.pushUndo("Add animation mode"), this.doc.animationModes || (this.doc.animationModes = []);
     const i = {
-      id: We(),
+      id: Fe(),
       name: e,
       animations: t ?? [],
       isDefault: this.doc.animationModes.length === 0
@@ -777,7 +777,7 @@ class bt {
     if (!i)
       return null;
     this.pushUndo("Add animation to mode");
-    const a = { id: We(), ...t };
+    const a = { id: Fe(), ...t };
     return i.animations.push(a), this.notify(), a;
   }
   removeAnimationFromMode(e, t) {
@@ -823,7 +823,7 @@ class bt {
     this.doc = structuredClone(e), this.undoStack = [], this.redoStack = [], this.notify();
   }
 }
-function We() {
+function Fe() {
   return `ndd_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
 }
 function gr() {
@@ -885,8 +885,8 @@ function Gt(r, e, t) {
     let _ = -(C.reduce((x, P) => x + P.size.width, 0) + (C.length - 1) * a) / 2;
     C.forEach((x) => {
       const P = S * (o + (h ? x.size.width : x.size.height)), L = _ + x.size.width / 2;
-      let O, W;
-      h ? (O = b ? -P : P, W = L) : (O = L, W = b ? -P : P), g.set(x.id, { x: O, y: W }), _ += x.size.width + a;
+      let R, W;
+      h ? (R = b ? -P : P, W = L) : (R = L, W = b ? -P : P), g.set(x.id, { x: R, y: W }), _ += x.size.width + a;
     });
   }), t.centerGraph && vt(g), { positions: g };
 }
@@ -988,7 +988,7 @@ function kr(r) {
   const e = Ve(null);
   e.current || (e.current = new bt(r));
   const t = e.current, [, i] = K(0), a = G(() => i((n) => n + 1), []);
-  Be(() => t.subscribe(a), [t, a]);
+  Ye(() => t.subscribe(a), [t, a]);
   const o = t.getDocument(), s = G(
     (n) => {
       yr(t.getNodes(), t.getEdges(), n).positions.forEach((u, d) => {
@@ -1244,7 +1244,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
   border: "#ff2d9540",
   surface: "#1a0030",
   surfaceAlt: "#2d004a"
-}), Rr = {
+}), Or = {
   id: "cyberpunk",
   name: "Cyberpunk",
   category: "dark",
@@ -1276,7 +1276,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
       liquidColorEnd: "#7928ca"
     }
   )
-}, Or = fe({
+}, Rr = fe({
   primary: "var(--nice-bg, #fff)",
   primaryLight: "#ffffffaa",
   secondary: "#4da6ff",
@@ -1297,7 +1297,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
       gridSize: 16,
       selectionColor: "var(--nice-text-on-primary, #fff)"
     },
-    Or,
+    Rr,
     wt,
     {
       backgroundColor: "transparent",
@@ -1423,7 +1423,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
       liquidColor: "var(--nice-success, #00ff00)"
     }
   )
-}, Br = fe({
+}, Yr = fe({
   primary: "#0000ff",
   primaryLight: "#6666ff",
   secondary: "#ff00ff",
@@ -1433,7 +1433,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
   border: "var(--nice-border-color, #000000)",
   surface: "var(--nice-bg, #fff)",
   surfaceAlt: "var(--nice-border, #eeeeee)"
-}), Yr = {
+}), Br = {
   id: "high-contrast",
   name: "High Contrast",
   category: "accessibility",
@@ -1445,7 +1445,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
       gridSize: 20,
       selectionColor: "#0000ff"
     },
-    Br,
+    Yr,
     "Arial, sans-serif",
     {
       borderColor: "var(--nice-border-color, #000000)",
@@ -1938,7 +1938,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
   Ur,
   jr,
   Pr,
-  Rr,
+  Or,
   Er,
   Vr,
   Wr,
@@ -1947,7 +1947,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
   ti,
   qr,
   ii,
-  Yr,
+  Br,
   oi,
   si,
   li,
@@ -1956,7 +1956,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
   mi,
   yi,
   vi
-], Co = [
+], zo = [
   // Fills
   { id: "fill-solid", name: "Solid Fill", category: "fill", style: { opacity: 1 } },
   {
@@ -2074,7 +2074,7 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
     category: "effect",
     style: { glowColor: "var(--nice-success, #00ff88)", glowIntensity: 0.8 }
   }
-], So = [
+], No = [
   // Line types
   { id: "line-straight", name: "Straight", category: "type", style: { lineType: "straight" } },
   { id: "line-bezier", name: "Bezier Curve", category: "type", style: { lineType: "bezier" } },
@@ -2403,13 +2403,13 @@ const Ne = "'Inter', system-ui, sans-serif", wt = "'Fira Code', 'Cascadia Code',
     description: "Text appears letter by letter"
   }
 ];
-function zo(r) {
+function Io(r) {
   return xt.find((e) => e.id === r);
 }
-function No(r) {
+function Ao(r) {
   return xt.filter((e) => e.category === r);
 }
-function Io(r) {
+function $o(r) {
   return {
     canvasBackground: r.canvas.background,
     gridColor: r.canvas.gridColor,
@@ -2423,7 +2423,7 @@ function Io(r) {
     effects: r.effects
   };
 }
-function Ao(r, e, t, i, a, o) {
+function Do(r, e, t, i, a, o) {
   const s = fe({
     primary: t.primary,
     primaryLight: t.primaryHover,
@@ -2538,7 +2538,7 @@ const ki = [
       /* @__PURE__ */ l("h4", { className: "nice-diagram-timeline__title", children: u("animation.timeline") }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-timeline__controls", children: [
         s ? /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-timeline__btn",
             variant: "ghost",
@@ -2551,7 +2551,7 @@ const ki = [
             ]
           }
         ) : /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-timeline__btn",
             variant: "ghost",
@@ -2565,7 +2565,7 @@ const ki = [
           }
         ),
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-timeline__btn",
             variant: "ghost",
@@ -2581,7 +2581,7 @@ const ki = [
         ),
         /* @__PURE__ */ v("div", { style: { position: "relative", display: "inline-block" }, children: [
           /* @__PURE__ */ v(
-            B,
+            Y,
             {
               className: "nice-diagram-timeline__btn",
               variant: "ghost",
@@ -2612,7 +2612,7 @@ const ki = [
                 zIndex: 100
               },
               children: wi.map((y) => /* @__PURE__ */ l(
-                B,
+                Y,
                 {
                   variant: "ghost",
                   size: "sm",
@@ -2653,7 +2653,7 @@ const ki = [
             ),
             /* @__PURE__ */ l("span", { className: "nice-diagram-timeline__track-effect", children: y.effect }),
             /* @__PURE__ */ l(
-              B,
+              Y,
               {
                 className: "nice-diagram-timeline__track-remove",
                 variant: "ghost",
@@ -2710,7 +2710,7 @@ const ki = [
                   }
                 ),
                 /* @__PURE__ */ l(
-                  Re,
+                  Oe,
                   {
                     value: y.startMs,
                     min: 0,
@@ -2721,7 +2721,7 @@ const ki = [
                   }
                 ),
                 /* @__PURE__ */ l(
-                  Re,
+                  Oe,
                   {
                     value: y.durationMs,
                     min: 50,
@@ -2798,16 +2798,16 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
   interactive: x = !1,
   showGrid: P = !0,
   showRulers: L = !1,
-  snapToGrid: O = !0,
+  snapToGrid: R = !0,
   gridSnapSize: W = 10,
   className: F
 }) => {
-  const M = Ve(null), [E, T] = K(!1), [V, R] = K({ x: 0, y: 0 }), [$, H] = K(null), [Y, j] = K({ x: 0, y: 0 }), [Z, ue] = K(null), [pe, X] = K(null), [U, me] = K(null), [ge, ce] = K(null), [Ie, qe] = K(""), [lt, we] = K([]), dt = (o == null ? void 0 : o.canvasBackground) ?? "var(--nice-bg-secondary, #f8f9fa)", Je = (o == null ? void 0 : o.gridColor) ?? "var(--nice-border, #e0e0e0)", Ae = (o == null ? void 0 : o.gridSize) ?? 20, $e = (o == null ? void 0 : o.selectionColor) ?? "var(--nice-primary, #2196f3)", Ze = ae(() => {
+  const M = Ve(null), [E, T] = K(!1), [V, O] = K({ x: 0, y: 0 }), [$, H] = K(null), [B, j] = K({ x: 0, y: 0 }), [Z, ue] = K(null), [pe, X] = K(null), [U, me] = K(null), [ge, ce] = K(null), [Ie, qe] = K(""), [lt, we] = K([]), dt = (o == null ? void 0 : o.canvasBackground) ?? "var(--nice-bg-secondary, #f8f9fa)", Je = (o == null ? void 0 : o.gridColor) ?? "var(--nice-border, #e0e0e0)", Ae = (o == null ? void 0 : o.gridSize) ?? 20, $e = (o == null ? void 0 : o.selectionColor) ?? "var(--nice-primary, #2196f3)", Ze = ae(() => {
     const f = new Set(n);
     return s && f.add(s), f;
   }, [s, n]), ke = G(
-    (f) => O ? Math.round(f / W) * W : f,
-    [O, W]
+    (f) => R ? Math.round(f / W) * W : f,
+    [R, W]
   ), Ke = G(
     (f, k, N) => {
       const A = [], I = k.x, D = k.y, re = I + N.width / 2, Q = D + N.height / 2, ee = I + N.width, oe = D + N.height;
@@ -2843,11 +2843,11 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
           c && c(null), u && u([]);
           return;
         }
-        T(!0), R({ x: f.clientX - i.x, y: f.clientY - i.y }), c && f.button === 0 && c(null);
+        T(!0), O({ x: f.clientX - i.x, y: f.clientY - i.y }), c && f.button === 0 && c(null);
       }
     },
     [i, c, u, x]
-  ), Ee = G(
+  ), Le = G(
     (f) => {
       if (pe) {
         const k = M.current;
@@ -2878,7 +2878,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
         const k = M.current;
         if (!k)
           return;
-        const N = k.getBoundingClientRect(), A = ke((f.clientX - N.left - i.x) / i.zoom - Y.x), q = ke((f.clientY - N.top - i.y) / i.zoom - Y.y);
+        const N = k.getBoundingClientRect(), A = ke((f.clientX - N.left - i.x) / i.zoom - B.x), q = ke((f.clientY - N.top - i.y) / i.zoom - B.y);
         m($, { x: A, y: q });
         const I = r.find((D) => D.id === $);
         I && Ke($, { x: A, y: q }, I.size);
@@ -2894,7 +2894,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
       g,
       $,
       m,
-      Y,
+      B,
       ke,
       r,
       Ke
@@ -2921,7 +2921,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
         const k = M.current;
         if (!k)
           return;
-        const N = k.getBoundingClientRect(), A = ke((f.clientX - N.left - i.x) / i.zoom - Y.x), q = ke((f.clientY - N.top - i.y) / i.zoom - Y.y);
+        const N = k.getBoundingClientRect(), A = ke((f.clientX - N.left - i.x) / i.zoom - B.x), q = ke((f.clientY - N.top - i.y) / i.zoom - B.y);
         p($, { x: A, y: q });
       }
       H(null), we([]);
@@ -2934,7 +2934,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
       $,
       p,
       i,
-      Y,
+      B,
       ke,
       r,
       u,
@@ -2995,7 +2995,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
       f.stopPropagation(), c == null || c(k);
     },
     [c]
-  ), Oe = G(
+  ), Re = G(
     (f) => {
       const k = r.find((N) => N.id === f);
       return k ? {
@@ -3011,7 +3011,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
         return { x: 0, y: 0 };
       const A = N.ports.find((D) => D.id === k);
       if (!A)
-        return Oe(f);
+        return Re(f);
       const { position: q, size: I } = N;
       switch (A.side) {
         case "top":
@@ -3023,10 +3023,10 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
         case "right":
           return { x: q.x + I.width, y: q.y + I.height * A.offset };
         default:
-          return Oe(f);
+          return Re(f);
       }
     },
-    [r, Oe]
+    [r, Re]
   ), rr = G(
     (f) => {
       const k = xe(f.sourceNodeId, f.sourcePortId), N = xe(f.targetNodeId, f.targetPortId);
@@ -3289,7 +3289,7 @@ const Mi = /^[a-z][a-z0-9-]*$/, Ci = 0.1, Si = 5, at = 8, gt = [
       },
       onWheel: Me,
       onMouseDown: ut,
-      onMouseMove: Ee,
+      onMouseMove: Le,
       onMouseUp: Qe,
       onMouseLeave: Qe,
       children: [
@@ -4011,7 +4011,7 @@ function zi(r, e) {
   }
 }
 Te.displayName = "DiagramCanvas";
-const Ni = 180, Ii = 120, Bt = ({
+const Ni = 180, Ii = 120, Yt = ({
   nodes: r,
   edges: e,
   viewport: t,
@@ -4107,7 +4107,7 @@ const Ni = 180, Ii = 120, Bt = ({
     }
   );
 };
-Bt.displayName = "DiagramMinimap";
+Yt.displayName = "DiagramMinimap";
 const Ai = [
   "rectangle",
   "roundedRect",
@@ -4121,7 +4121,7 @@ const Ai = [
   "cloud",
   "document",
   "actor"
-], Yt = ({
+], Bt = ({
   selectedNode: r,
   selectedEdge: e,
   onNodeChange: t,
@@ -4191,7 +4191,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("node.width"),
         /* @__PURE__ */ l(
-          Re,
+          Oe,
           {
             value: r.size.width,
             min: 20,
@@ -4205,7 +4205,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("node.height"),
         /* @__PURE__ */ l(
-          Re,
+          Oe,
           {
             value: r.size.height,
             min: 20,
@@ -4221,7 +4221,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("node.bgColor"),
         /* @__PURE__ */ l(
-          Le,
+          We,
           {
             value: r.style.backgroundColor ?? "var(--nice-bg, #fff)",
             onChange: (h) => n("backgroundColor", h),
@@ -4232,7 +4232,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("node.borderColor"),
         /* @__PURE__ */ l(
-          Le,
+          We,
           {
             value: r.style.borderColor ?? "var(--nice-text, #333333)",
             onChange: (h) => n("borderColor", h),
@@ -4245,7 +4245,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("node.fontSize"),
         /* @__PURE__ */ l(
-          Re,
+          Oe,
           {
             value: r.style.fontSize ?? 14,
             min: 8,
@@ -4258,7 +4258,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("node.fontColor"),
         /* @__PURE__ */ l(
-          Le,
+          We,
           {
             value: r.style.fontColor ?? "#222222",
             onChange: (h) => n("fontColor", h),
@@ -4293,7 +4293,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         "Glow Color",
         /* @__PURE__ */ l(
-          Le,
+          We,
           {
             value: r.style.glowColor ?? "var(--nice-primary, #3b82f6)",
             onChange: (h) => n("glowColor", h),
@@ -4333,7 +4333,7 @@ const Ai = [
     /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label", children: [
       "Border Radius",
       /* @__PURE__ */ l(
-        Re,
+        Oe,
         {
           min: 0,
           max: 50,
@@ -4346,7 +4346,7 @@ const Ai = [
     /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label", children: [
       "Border Width",
       /* @__PURE__ */ l(
-        Re,
+        Oe,
         {
           min: 0,
           max: 10,
@@ -4370,7 +4370,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         "Gradient End",
         /* @__PURE__ */ l(
-          Le,
+          We,
           {
             value: r.style.gradientColor ?? "var(--nice-bg, #fff)",
             onChange: (h) => n("gradientColor", h),
@@ -4406,7 +4406,7 @@ const Ai = [
       }
     ),
     /* @__PURE__ */ l(
-      B,
+      Y,
       {
         className: "nice-diagram-property-panel__btn nice-diagram-property-panel__btn--danger",
         variant: "ghost",
@@ -4449,7 +4449,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("edge.color"),
         /* @__PURE__ */ l(
-          Le,
+          We,
           {
             value: e.style.strokeColor ?? "var(--nice-text, #333333)",
             onChange: (h) => c("strokeColor", h),
@@ -4460,7 +4460,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
         s("edge.width"),
         /* @__PURE__ */ l(
-          Re,
+          Oe,
           {
             value: e.style.strokeWidth ?? 1.5,
             min: 0.5,
@@ -4591,7 +4591,7 @@ const Ai = [
         /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label nice-diagram-property-panel__label--half", children: [
           "Color",
           /* @__PURE__ */ l(
-            Le,
+            We,
             {
               value: ((m = e.style.liquidFlow) == null ? void 0 : m.color) ?? "var(--nice-primary, #3b82f6)",
               onChange: (h) => {
@@ -4627,7 +4627,7 @@ const Ai = [
       /* @__PURE__ */ v("label", { className: "nice-diagram-property-panel__label", children: [
         "Pipe Width",
         /* @__PURE__ */ l(
-          Re,
+          Oe,
           {
             min: 2,
             max: 20,
@@ -4658,7 +4658,7 @@ const Ai = [
       )
     ] }),
     /* @__PURE__ */ l(
-      B,
+      Y,
       {
         className: "nice-diagram-property-panel__btn nice-diagram-property-panel__btn--danger",
         variant: "ghost",
@@ -4669,7 +4669,7 @@ const Ai = [
     )
   ] }) : null;
 };
-Yt.displayName = "DiagramPropertyPanel";
+Bt.displayName = "DiagramPropertyPanel";
 const It = {
   flowchart: [
     "rectangle",
@@ -4741,17 +4741,17 @@ const It = {
   onAlignLeft: x,
   onAlignCenterH: P,
   onAlignRight: L,
-  onAlignTop: O,
+  onAlignTop: R,
   onAlignCenterV: W,
   onAlignBottom: F,
   onDistributeH: M,
   onDistributeV: E,
   onBringToFront: T,
   onSendToBack: V,
-  onGroupSelected: R,
+  onGroupSelected: O,
   onUngroupSelected: $,
   onCopy: H,
-  onPaste: Y,
+  onPaste: B,
   onDuplicate: j,
   onSelectAll: Z,
   selectionCount: ue = 0,
@@ -4765,7 +4765,7 @@ const It = {
   onStylePresetChange: qe,
   className: lt
 }) => {
-  const { t: we } = ct(), [dt, Je] = K(!1), [Ae, $e] = K(!1), [Ze, ke] = K(!1), [Ke, Me] = K(!1), [ut, Ee] = K(!1), [Qe, et] = K(!1), ft = It[t] ?? It.custom, ht = G(
+  const { t: we } = ct(), [dt, Je] = K(!1), [Ae, $e] = K(!1), [Ze, ke] = K(!1), [Ke, Me] = K(!1), [ut, Le] = K(!1), [Qe, et] = K(!1), ft = It[t] ?? It.custom, ht = G(
     (J) => {
       i == null || i(J), Je(!1);
     },
@@ -4780,7 +4780,7 @@ const It = {
     /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__row", children: [
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "select" ? "primary" : "ghost",
@@ -4791,7 +4791,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "pan" ? "primary" : "ghost",
@@ -4802,7 +4802,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "addEdge" ? "primary" : "ghost",
@@ -4813,7 +4813,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "text" ? "primary" : "ghost",
@@ -4824,7 +4824,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "freehand" ? "primary" : "ghost",
@@ -4835,7 +4835,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "delete" ? "primary" : "ghost",
@@ -4848,7 +4848,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group nice-diagram-toolbar__group--relative", children: [
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: r === "addNode" ? "primary" : "ghost",
@@ -4863,7 +4863,7 @@ const It = {
           }
         ),
         dt && /* @__PURE__ */ l("div", { className: "nice-diagram-toolbar__dropdown nice-diagram-toolbar__dropdown--shapes", children: ft.map((J) => /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__dropdown-item",
             variant: "ghost",
@@ -4880,7 +4880,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4891,18 +4891,18 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
             size: "sm",
-            onClick: Y,
+            onClick: B,
             title: "Paste (Ctrl+V)",
             children: /* @__PURE__ */ l(te, { name: "clipboard", size: 14 })
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4913,7 +4913,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4926,7 +4926,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4938,7 +4938,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4952,7 +4952,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4967,7 +4967,7 @@ const It = {
           "%"
         ] }),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4978,7 +4978,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -4991,7 +4991,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -5014,7 +5014,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group nice-diagram-toolbar__group--relative", children: [
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -5030,7 +5030,7 @@ const It = {
         ),
         Ze && /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__dropdown", children: [
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
@@ -5042,7 +5042,7 @@ const It = {
             }
           ),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
@@ -5054,7 +5054,7 @@ const It = {
             }
           ),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
@@ -5066,7 +5066,7 @@ const It = {
             }
           ),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
@@ -5108,7 +5108,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: w ? "primary" : "ghost",
@@ -5119,7 +5119,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: y ? "primary" : "ghost",
@@ -5132,7 +5132,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group nice-diagram-toolbar__group--relative", children: [
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -5146,7 +5146,7 @@ const It = {
           /* @__PURE__ */ l("div", { className: "nice-diagram-toolbar__dropdown-section", children: "Align" }),
           /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__dropdown-row", children: [
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5162,7 +5162,7 @@ const It = {
               }
             ),
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5178,7 +5178,7 @@ const It = {
               }
             ),
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5196,13 +5196,13 @@ const It = {
           ] }),
           /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__dropdown-row", children: [
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
                 size: "sm",
                 onClick: () => {
-                  O == null || O(), Me(!1);
+                  R == null || R(), Me(!1);
                 },
                 title: "Align Top",
                 children: [
@@ -5212,7 +5212,7 @@ const It = {
               }
             ),
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5228,7 +5228,7 @@ const It = {
               }
             ),
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5247,7 +5247,7 @@ const It = {
           /* @__PURE__ */ l("div", { className: "nice-diagram-toolbar__dropdown-section", children: "Distribute" }),
           /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__dropdown-row", children: [
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5263,7 +5263,7 @@ const It = {
               }
             ),
             /* @__PURE__ */ v(
-              B,
+              Y,
               {
                 className: "nice-diagram-toolbar__dropdown-item",
                 variant: "ghost",
@@ -5283,12 +5283,12 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group nice-diagram-toolbar__group--relative", children: [
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
             size: "sm",
-            onClick: () => Ee((J) => !J),
+            onClick: () => Le((J) => !J),
             title: "Arrange",
             children: [
               /* @__PURE__ */ l(te, { name: "menu", size: 14 }),
@@ -5298,51 +5298,51 @@ const It = {
         ),
         ut && /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__dropdown", children: [
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
               size: "sm",
               onClick: () => {
-                T == null || T(), Ee(!1);
+                T == null || T(), Le(!1);
               },
               children: "↑ Bring to Front"
             }
           ),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
               size: "sm",
               onClick: () => {
-                V == null || V(), Ee(!1);
+                V == null || V(), Le(!1);
               },
               children: "↓ Send to Back"
             }
           ),
           /* @__PURE__ */ l("div", { className: "nice-diagram-toolbar__dropdown-divider" }),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
               size: "sm",
               onClick: () => {
-                R == null || R(), Ee(!1);
+                O == null || O(), Le(!1);
               },
               disabled: ue < 2,
               children: "⊞ Group"
             }
           ),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               className: "nice-diagram-toolbar__dropdown-item",
               variant: "ghost",
               size: "sm",
               onClick: () => {
-                $ == null || $(), Ee(!1);
+                $ == null || $(), Le(!1);
               },
               children: "⊟ Ungroup"
             }
@@ -5351,7 +5351,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group nice-diagram-toolbar__group--relative", children: [
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -5365,7 +5365,7 @@ const It = {
           }
         ),
         Ae && /* @__PURE__ */ l("div", { className: "nice-diagram-toolbar__dropdown", children: $i.map((J) => /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__dropdown-item",
             variant: "ghost",
@@ -5382,7 +5382,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group", children: [
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: ge === "editor" ? "primary" : "ghost",
@@ -5396,7 +5396,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: ge === "player" ? "primary" : "ghost",
@@ -5410,7 +5410,7 @@ const It = {
           }
         ),
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: ge === "playerAnimated" ? "primary" : "ghost",
@@ -5426,7 +5426,7 @@ const It = {
       ] }),
       /* @__PURE__ */ v("div", { className: "nice-diagram-toolbar__group nice-diagram-toolbar__group--relative", children: [
         /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-toolbar__btn",
             variant: "ghost",
@@ -5446,13 +5446,13 @@ const It = {
             style: { maxHeight: 320, overflowY: "auto", width: 220 },
             children: Object.entries(
               xt.reduce(
-                (J, Oe) => {
-                  const xe = Oe.category ?? "Other";
-                  return J[xe] || (J[xe] = []), J[xe].push(Oe), J;
+                (J, Re) => {
+                  const xe = Re.category ?? "Other";
+                  return J[xe] || (J[xe] = []), J[xe].push(Re), J;
                 },
                 {}
               )
-            ).map(([J, Oe]) => /* @__PURE__ */ v("div", { children: [
+            ).map(([J, Re]) => /* @__PURE__ */ v("div", { children: [
               /* @__PURE__ */ l(
                 "div",
                 {
@@ -5466,8 +5466,8 @@ const It = {
                   children: J
                 }
               ),
-              Oe.map((xe) => /* @__PURE__ */ v(
-                B,
+              Re.map((xe) => /* @__PURE__ */ v(
+                Y,
                 {
                   className: `nice-diagram-toolbar__dropdown-item ${Ie === xe.id ? "nice-diagram-toolbar__dropdown-item--active" : ""}`,
                   variant: Ie === xe.id ? "primary" : "ghost",
@@ -5534,7 +5534,7 @@ function Ti(r) {
   }
 }
 Xt.displayName = "DiagramToolbar";
-const Ri = [
+const Oi = [
   {
     target: ".nice-diagram-editor",
     titleKey: "tutorial.diagramEditor.intro.title",
@@ -5543,7 +5543,7 @@ const Ri = [
     content: "Pick a tool to add and connect nodes on the canvas, edit them in the property panel, and export the diagram from the toolbar.",
     placement: "auto"
   }
-], Oi = ({
+], Ri = ({
   initialDocument: r,
   diagramType: e = "flowchart",
   onChange: t,
@@ -5563,20 +5563,20 @@ const Ri = [
     liquidFlows: /* @__PURE__ */ new Map(),
     glowStates: /* @__PURE__ */ new Map()
   });
-  Be(() => {
+  Ye(() => {
     const X = new ur((U) => {
       x(U);
     });
     return z.current = X, X.start(), () => {
       X.stop(), z.current = null;
     };
-  }, []), Be(() => {
+  }, []), Ye(() => {
     var U;
     const X = z.current;
     if (X)
       for (const me of p.edges)
         (U = me.style.liquidFlow) != null && U.active ? X.startLiquidFlow(me.id, me.style.liquidFlow) : X.stopLiquidFlow(me.id);
-  }, [p.edges]), Be(() => {
+  }, [p.edges]), Ye(() => {
     const X = z.current;
     if (X)
       for (const U of p.nodes)
@@ -5628,8 +5628,8 @@ const Ri = [
         }
     },
     [p]
-  ), O = Ve(p.document);
-  p.document !== O.current && (O.current = p.document, t == null || t(p.document));
+  ), R = Ve(p.document);
+  p.document !== R.current && (R.current = p.document, t == null || t(p.document));
   const W = ae(
     () => b ? p.nodes.find((X) => X.id === b) ?? null : null,
     [b, p.nodes]
@@ -5657,7 +5657,7 @@ const Ri = [
       p.moveNode(X, U);
     },
     [p]
-  ), R = G(
+  ), O = G(
     (X) => {
       p.nodes.find((U) => U.id === X) ? p.removeNode(X) : p.edges.find((U) => U.id === X) && p.removeEdge(X), w(null);
     },
@@ -5685,7 +5685,7 @@ const Ri = [
     [p, i]
   ), H = G(() => {
     p.setViewport({ ...p.viewport, zoom: Math.min(5, p.viewport.zoom * 1.2) });
-  }, [p]), Y = G(() => {
+  }, [p]), B = G(() => {
     p.setViewport({ ...p.viewport, zoom: Math.max(0.1, p.viewport.zoom / 1.2) });
   }, [p]), j = G(() => {
     p.setViewport({ x: 0, y: 0, zoom: 1 });
@@ -5710,7 +5710,7 @@ const Ri = [
         canRedo: p.canRedo,
         onExport: $,
         onZoomIn: H,
-        onZoomOut: Y,
+        onZoomOut: B,
         onZoomReset: j,
         viewMode: S,
         onViewModeChange: C,
@@ -5734,7 +5734,7 @@ const Ri = [
           p.animationModes.map((X) => {
             var U;
             return /* @__PURE__ */ l(
-              B,
+              Y,
               {
                 variant: ((U = p.activeAnimationMode) == null ? void 0 : U.id) === X.id ? "primary" : "ghost",
                 size: "sm",
@@ -5749,7 +5749,7 @@ const Ri = [
             );
           }),
           /* @__PURE__ */ l(
-            B,
+            Y,
             {
               variant: "ghost",
               size: "sm",
@@ -5781,13 +5781,13 @@ const Ri = [
           className: "nice-diagram-editor__panel",
           style: { width: 260, overflowY: "auto", height: "100%" },
           children: /* @__PURE__ */ l(
-            Yt,
+            Bt,
             {
               selectedNode: W,
               selectedEdge: F,
               onNodeChange: p.updateNode,
               onEdgeChange: p.updateEdge,
-              onRemove: R
+              onRemove: O
             }
           )
         }
@@ -5802,7 +5802,7 @@ const Ri = [
         }
       ) }) : void 0,
       children: [
-        /* @__PURE__ */ l("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ l(Et, { steps: Lt(m, Ri) }) }),
+        /* @__PURE__ */ l("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ l(Et, { steps: Lt(m, Oi) }) }),
         /* @__PURE__ */ v(
           "div",
           {
@@ -5832,7 +5832,7 @@ const Ri = [
                 }
               ),
               n && /* @__PURE__ */ l("div", { style: { position: "absolute", bottom: 8, left: 8 }, children: /* @__PURE__ */ l(
-                Bt,
+                Yt,
                 {
                   nodes: p.nodes,
                   edges: p.edges,
@@ -5847,7 +5847,7 @@ const Ri = [
     }
   ) });
 };
-Oi.displayName = "NiceDiagramEditor";
+Ri.displayName = "NiceDiagramEditor";
 const At = {
   linear: (r) => r,
   easeIn: (r) => r * r,
@@ -6033,8 +6033,137 @@ function Fi(r) {
   }
   return e;
 }
-const qi = ({
-  document: r,
+function qi(r) {
+  return {
+    rectangle: "rectangle",
+    roundedRect: "roundedRect",
+    ellipse: "ellipse",
+    circle: "circle",
+    diamond: "diamond",
+    hexagon: "hexagon",
+    cylinder: "cylinder",
+    cloud: "cloud",
+    triangle: "triangle"
+  }[r || "rectangle"] || "rectangle";
+}
+function Gi(r) {
+  return r ? {
+    backgroundColor: r.fill,
+    borderColor: r.stroke,
+    borderWidth: r.strokeWidth,
+    fontColor: r.fontColor,
+    fontSize: r.fontSize,
+    borderRadius: r.borderRadius,
+    borderStyle: r.strokeDasharray ? "dashed" : "solid"
+  } : {};
+}
+function Vi(r) {
+  if (!r)
+    return {};
+  let e = "straight";
+  return r.lineType === "orthogonal" ? e = "orthogonal" : r.lineType === "curved" || r.lineType === "bezier" ? e = "bezier" : r.lineType === "step" && (e = "step"), {
+    strokeColor: r.stroke,
+    strokeWidth: r.strokeWidth,
+    strokeDash: r.strokeDasharray ? r.strokeDasharray.split(",").map(Number) : void 0,
+    lineType: e,
+    sourceArrow: "none",
+    targetArrow: r.arrowHead ? "arrow" : "none",
+    opacity: r.opacity
+  };
+}
+function Yi(r) {
+  if (r)
+    return {
+      backgroundColor: r.fill,
+      borderColor: r.stroke,
+      borderWidth: r.strokeWidth
+    };
+}
+function Bi(r) {
+  return {
+    id: r.id,
+    label: r.label,
+    position: { x: r.x, y: r.y },
+    size: { width: r.width, height: r.height },
+    shape: qi(r.shape),
+    style: Gi(r.style),
+    ports: (r.ports || []).map((e, t) => ({
+      id: e.id,
+      side: e.position || "right",
+      offset: 0.5
+    })),
+    data: r.data
+  };
+}
+function Xi(r, e) {
+  var s, n;
+  const t = e.find((c) => c.id === r.source), i = e.find((c) => c.id === r.target), a = r.sourcePort || ((s = t == null ? void 0 : t.ports[0]) == null ? void 0 : s.id) || `${r.source}-out`, o = r.targetPort || ((n = i == null ? void 0 : i.ports[0]) == null ? void 0 : n.id) || `${r.target}-in`;
+  return {
+    id: r.id,
+    sourceNodeId: r.source,
+    sourcePortId: a,
+    targetNodeId: r.target,
+    targetPortId: o,
+    label: r.label,
+    style: Vi(r.style),
+    data: r.data
+  };
+}
+function Ui(r) {
+  return {
+    id: r.id,
+    label: r.label,
+    nodeIds: r.nodeIds,
+    style: Yi(r.style)
+  };
+}
+function Hi(r) {
+  var e;
+  return {
+    id: r.id,
+    name: r.id,
+    targetId: r.targetId || ((e = r.targets) == null ? void 0 : e[0]) || "",
+    targetType: "node",
+    effect: r.type === "highlight" ? "highlight" : "fadeIn",
+    startMs: r.delay,
+    durationMs: r.duration,
+    easing: "easeInOut"
+  };
+}
+function Ee(r) {
+  const e = r.nodes.map(Bi);
+  return e.forEach((t, i) => {
+    t.ports.length === 0 && (t.ports = [
+      { id: `${t.id}-out`, side: "right", offset: 0.5 },
+      { id: `${t.id}-in`, side: "left", offset: 0.5 },
+      { id: `${t.id}-top`, side: "top", offset: 0.5 },
+      { id: `${t.id}-bottom`, side: "bottom", offset: 0.5 }
+    ]);
+  }), {
+    version: "1.0",
+    id: r.id,
+    title: r.title,
+    diagramType: r.diagramType,
+    nodes: e,
+    edges: r.edges.map((t) => Xi(t, e)),
+    groups: (r.groups || []).map(Ui),
+    animations: (r.animations || []).map(Hi),
+    viewport: { x: 0, y: 0, zoom: 1 },
+    metadata: {
+      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      ...r.metadata
+    }
+  };
+}
+const ji = Ee({
+  id: "empty",
+  title: "",
+  diagramType: "flowchart",
+  nodes: [],
+  edges: []
+}), Ji = ({
+  document: r = ji,
   lang: e = "en",
   autoPlay: t = !1,
   showControls: i,
@@ -6071,7 +6200,7 @@ const qi = ({
       style: { display: "flex", flexDirection: "column", height: "100%", ...n },
       children: [
         c && /* @__PURE__ */ l(
-          Gi,
+          Zi,
           {
             isPlaying: h,
             hasAnimations: r.animations.length > 0,
@@ -6099,7 +6228,7 @@ const qi = ({
       ]
     }
   ) });
-}, Gi = ({
+}, Zi = ({
   isPlaying: r,
   hasAnimations: e,
   onPlay: t,
@@ -6122,7 +6251,7 @@ const qi = ({
       },
       children: [
         e && (r ? /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-viewer__btn",
             variant: "ghost",
@@ -6135,7 +6264,7 @@ const qi = ({
             ]
           }
         ) : /* @__PURE__ */ v(
-          B,
+          Y,
           {
             className: "nice-diagram-viewer__btn",
             variant: "ghost",
@@ -6150,7 +6279,7 @@ const qi = ({
         )),
         /* @__PURE__ */ l("span", { style: { flex: 1 } }),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-viewer__btn",
             variant: "ghost",
@@ -6161,7 +6290,7 @@ const qi = ({
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-viewer__btn",
             variant: "ghost",
@@ -6172,7 +6301,7 @@ const qi = ({
           }
         ),
         /* @__PURE__ */ l(
-          B,
+          Y,
           {
             className: "nice-diagram-viewer__btn",
             variant: "ghost",
@@ -6185,24 +6314,24 @@ const qi = ({
     }
   );
 };
-qi.displayName = "NiceDiagramViewer";
-const Vi = "_cell_16e1i_9", Bi = "_expandable_16e1i_29", Yi = "_svg_16e1i_57", Xi = "_emptyText_16e1i_67", Ui = "_badge_16e1i_79", Hi = "_expandIcon_16e1i_117", ji = "_modalOverlay_16e1i_169", Ji = "_modalContent_16e1i_217", Zi = "_modalHeader_16e1i_267", Ki = "_modalTitle_16e1i_285", Qi = "_modalClose_16e1i_299", ea = "_modalBody_16e1i_337", ta = "_modalSvg_16e1i_357", ra = "_modalFooter_16e1i_371", ia = "_modalInfo_16e1i_389", _e = {
-  cell: Vi,
-  expandable: Bi,
-  svg: Yi,
-  emptyText: Xi,
-  badge: Ui,
-  expandIcon: Hi,
-  modalOverlay: ji,
-  modalContent: Ji,
-  modalHeader: Zi,
-  modalTitle: Ki,
-  modalClose: Qi,
-  modalBody: ea,
-  modalSvg: ta,
-  modalFooter: ra,
-  modalInfo: ia
-}, aa = 120, oa = 48, na = 4, $t = {
+Ji.displayName = "NiceDiagramViewer";
+const Ki = "_cell_16e1i_9", Qi = "_expandable_16e1i_29", ea = "_svg_16e1i_57", ta = "_emptyText_16e1i_67", ra = "_badge_16e1i_79", ia = "_expandIcon_16e1i_117", aa = "_modalOverlay_16e1i_169", oa = "_modalContent_16e1i_217", na = "_modalHeader_16e1i_267", sa = "_modalTitle_16e1i_285", ca = "_modalClose_16e1i_299", la = "_modalBody_16e1i_337", da = "_modalSvg_16e1i_357", ua = "_modalFooter_16e1i_371", fa = "_modalInfo_16e1i_389", _e = {
+  cell: Ki,
+  expandable: Qi,
+  svg: ea,
+  emptyText: ta,
+  badge: ra,
+  expandIcon: ia,
+  modalOverlay: aa,
+  modalContent: oa,
+  modalHeader: na,
+  modalTitle: sa,
+  modalClose: ca,
+  modalBody: la,
+  modalSvg: da,
+  modalFooter: ua,
+  modalInfo: fa
+}, ha = 120, pa = 48, ma = 4, $t = {
   default: "var(--nice-primary, #3b82f6)",
   process: "var(--nice-success, #22c55e)",
   decision: "var(--nice-warning, #f59e0b)",
@@ -6242,7 +6371,7 @@ function jt(r, e) {
   const a = t.position.x + t.size.width / 2, o = t.position.y + t.size.height / 2, s = i.position.x + i.size.width / 2, n = i.position.y + i.size.height / 2;
   return `M ${a} ${o} L ${s} ${n}`;
 }
-function sa(r, e) {
+function ga(r, e) {
   const t = kt(r);
   return {
     version: "1.0",
@@ -6264,7 +6393,7 @@ function sa(r, e) {
     }
   };
 }
-const ca = ({ document: r, onClose: e }) => {
+const ya = ({ document: r, onClose: e }) => {
   const t = kt(r.nodes), i = 40, a = t.width + i * 2, o = t.height + i * 2, s = ae(() => new Map(r.nodes.map((n) => [n.id, n])), [r.nodes]);
   return /* @__PURE__ */ l("div", { className: _e.modalOverlay, onClick: e, children: /* @__PURE__ */ v("div", { className: _e.modalContent, onClick: (n) => n.stopPropagation(), children: [
     /* @__PURE__ */ v("div", { className: _e.modalHeader, children: [
@@ -6353,23 +6482,23 @@ const ca = ({ document: r, onClose: e }) => {
       " edges"
     ] }) })
   ] }) });
-}, $o = ({
+}, Po = ({
   document: r,
   nodes: e,
   edges: t,
-  width: i = aa,
-  height: a = oa,
+  width: i = ha,
+  height: a = pa,
   showCount: o = !0,
   expandable: s = !0,
   onExpand: n,
-  padding: c = na,
+  padding: c = ma,
   backgroundColor: u = "transparent",
   borderRadius: d = 4,
   showLabels: m = !1,
   edgeColor: p = "var(--nice-text-muted, #94a3b8)",
   tooltip: g
 }) => {
-  const [h, b] = K(!1), w = ae(() => r || (e || t ? sa(e ?? [], t ?? []) : null), [r, e, t]), y = ae(() => w ? new Map(w.nodes.map((P) => [P.id, P])) : /* @__PURE__ */ new Map(), [w]), {
+  const [h, b] = K(!1), w = ae(() => r || (e || t ? ga(e ?? [], t ?? []) : null), [r, e, t]), y = ae(() => w ? new Map(w.nodes.map((P) => [P.id, P])) : /* @__PURE__ */ new Map(), [w]), {
     bounds: S,
     scale: C,
     translateX: z,
@@ -6382,8 +6511,8 @@ const ca = ({ document: r, onClose: e }) => {
         translateX: 0,
         translateY: 0
       };
-    const P = kt(w.nodes), L = i - c * 2, O = a - c * 2, W = L / P.width, F = O / P.height, M = Math.min(W, F, 1), E = P.width * M, T = P.height * M, V = (i - E) / 2 - P.minX * M, R = (a - T) / 2 - P.minY * M;
-    return { bounds: P, scale: M, translateX: V, translateY: R };
+    const P = kt(w.nodes), L = i - c * 2, R = a - c * 2, W = L / P.width, F = R / P.height, M = Math.min(W, F, 1), E = P.width * M, T = P.height * M, V = (i - E) / 2 - P.minX * M, O = (a - T) / 2 - P.minY * M;
+    return { bounds: P, scale: M, translateX: V, translateY: O };
   }, [w, i, a, c]), x = G(() => {
     !w || !s || (n ? n(w) : b(!0));
   }, [w, s, n]);
@@ -6482,10 +6611,10 @@ const ca = ({ document: r, onClose: e }) => {
         ]
       }
     ),
-    h && w && /* @__PURE__ */ l(ca, { document: w, onClose: () => b(!1) })
+    h && w && /* @__PURE__ */ l(ya, { document: w, onClose: () => b(!1) })
   ] });
 };
-function la(r, e, t = "roundedRect") {
+function ba(r, e, t = "roundedRect") {
   const i = [], a = [], o = /* @__PURE__ */ new Map();
   for (const s of r) {
     const n = String(s[e.nodeMapping.idField] ?? "");
@@ -6546,137 +6675,14 @@ function la(r, e, t = "roundedRect") {
     }
   return { nodes: i, edges: a };
 }
-async function Do(r, e, t) {
+async function To(r, e, t) {
   const i = await fetch(r.sourceUrl, { signal: t });
   if (!i.ok)
     throw new Error(`Failed to fetch data: ${i.status} ${i.statusText}`);
   const a = await i.json(), o = Array.isArray(a) ? a : a.value ?? [];
-  return la(o, r, e);
-}
-function da(r) {
-  return {
-    rectangle: "rectangle",
-    roundedRect: "roundedRect",
-    ellipse: "ellipse",
-    circle: "circle",
-    diamond: "diamond",
-    hexagon: "hexagon",
-    cylinder: "cylinder",
-    cloud: "cloud",
-    triangle: "triangle"
-  }[r || "rectangle"] || "rectangle";
-}
-function ua(r) {
-  return r ? {
-    backgroundColor: r.fill,
-    borderColor: r.stroke,
-    borderWidth: r.strokeWidth,
-    fontColor: r.fontColor,
-    fontSize: r.fontSize,
-    borderRadius: r.borderRadius,
-    borderStyle: r.strokeDasharray ? "dashed" : "solid"
-  } : {};
-}
-function fa(r) {
-  if (!r)
-    return {};
-  let e = "straight";
-  return r.lineType === "orthogonal" ? e = "orthogonal" : r.lineType === "curved" || r.lineType === "bezier" ? e = "bezier" : r.lineType === "step" && (e = "step"), {
-    strokeColor: r.stroke,
-    strokeWidth: r.strokeWidth,
-    strokeDash: r.strokeDasharray ? r.strokeDasharray.split(",").map(Number) : void 0,
-    lineType: e,
-    sourceArrow: "none",
-    targetArrow: r.arrowHead ? "arrow" : "none",
-    opacity: r.opacity
-  };
-}
-function ha(r) {
-  if (r)
-    return {
-      backgroundColor: r.fill,
-      borderColor: r.stroke,
-      borderWidth: r.strokeWidth
-    };
-}
-function pa(r) {
-  return {
-    id: r.id,
-    label: r.label,
-    position: { x: r.x, y: r.y },
-    size: { width: r.width, height: r.height },
-    shape: da(r.shape),
-    style: ua(r.style),
-    ports: (r.ports || []).map((e, t) => ({
-      id: e.id,
-      side: e.position || "right",
-      offset: 0.5
-    })),
-    data: r.data
-  };
-}
-function ma(r, e) {
-  var s, n;
-  const t = e.find((c) => c.id === r.source), i = e.find((c) => c.id === r.target), a = r.sourcePort || ((s = t == null ? void 0 : t.ports[0]) == null ? void 0 : s.id) || `${r.source}-out`, o = r.targetPort || ((n = i == null ? void 0 : i.ports[0]) == null ? void 0 : n.id) || `${r.target}-in`;
-  return {
-    id: r.id,
-    sourceNodeId: r.source,
-    sourcePortId: a,
-    targetNodeId: r.target,
-    targetPortId: o,
-    label: r.label,
-    style: fa(r.style),
-    data: r.data
-  };
-}
-function ga(r) {
-  return {
-    id: r.id,
-    label: r.label,
-    nodeIds: r.nodeIds,
-    style: ha(r.style)
-  };
-}
-function ya(r) {
-  var e;
-  return {
-    id: r.id,
-    name: r.id,
-    targetId: r.targetId || ((e = r.targets) == null ? void 0 : e[0]) || "",
-    targetType: "node",
-    effect: r.type === "highlight" ? "highlight" : "fadeIn",
-    startMs: r.delay,
-    durationMs: r.duration,
-    easing: "easeInOut"
-  };
-}
-function Fe(r) {
-  const e = r.nodes.map(pa);
-  return e.forEach((t, i) => {
-    t.ports.length === 0 && (t.ports = [
-      { id: `${t.id}-out`, side: "right", offset: 0.5 },
-      { id: `${t.id}-in`, side: "left", offset: 0.5 },
-      { id: `${t.id}-top`, side: "top", offset: 0.5 },
-      { id: `${t.id}-bottom`, side: "bottom", offset: 0.5 }
-    ]);
-  }), {
-    version: "1.0",
-    id: r.id,
-    title: r.title,
-    diagramType: r.diagramType,
-    nodes: e,
-    edges: r.edges.map((t) => ma(t, e)),
-    groups: (r.groups || []).map(ga),
-    animations: (r.animations || []).map(ya),
-    viewport: { x: 0, y: 0, zoom: 1 },
-    metadata: {
-      createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-      updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-      ...r.metadata
-    }
-  };
+  return ba(o, r, e);
 }
-const ba = {
+const va = {
   pending: "var(--nice-text-muted, #9ca3af)",
   // gray
   active: "var(--nice-primary, #3b82f6)",
@@ -6689,7 +6695,7 @@ const ba = {
   // yellow
   waiting: "var(--nice-accent, #8b5cf6)"
   // purple
-}, va = {
+}, wa = {
   start: "ellipse",
   end: "ellipse",
   task: "rectangle",
@@ -6700,7 +6706,7 @@ const ba = {
   timer: "ellipse",
   message: "rectangle",
   error: "rectangle"
-}, wa = {
+}, xa = {
   start: "play",
   end: "stop",
   task: "clipboard",
@@ -6711,7 +6717,7 @@ const ba = {
   timer: "clock",
   message: "mail",
   error: "warning"
-}, Po = ({
+}, Oo = ({
   data: r,
   onStepClick: e,
   onTransitionClick: t,
@@ -6719,15 +6725,15 @@ const ba = {
   animationDelay: a = 1e3,
   showTooltips: o = !0,
   showMinimap: s = !0,
-  statusColors: n = ba,
-  typeShapes: c = va,
+  statusColors: n = va,
+  typeShapes: c = wa,
   direction: u = "horizontal",
   className: d,
   style: m
 }) => {
   const [p, g] = K(0), h = ae(() => {
     const S = r.steps.map((_, x) => {
-      const P = _.id === r.currentStepId, L = _.status || "pending", O = n[L], W = c[_.type], F = u === "horizontal" ? x * 200 : 100, M = u === "horizontal" ? 100 : x * 150;
+      const P = _.id === r.currentStepId, L = _.status || "pending", R = n[L], W = c[_.type], F = u === "horizontal" ? x * 200 : 100, M = u === "horizontal" ? 100 : x * 150;
       return {
         id: _.id,
         label: _.name,
@@ -6737,8 +6743,8 @@ const ba = {
         height: 60,
         shape: W,
         style: {
-          fill: O,
-          stroke: P ? "var(--nice-text, #1f2937)" : O,
+          fill: R,
+          stroke: P ? "var(--nice-text, #1f2937)" : R,
           strokeWidth: P ? 3 : 1,
           // The node is filled with its status colour, so its label is on-colour ink.
           fontColor: "var(--nice-text-on-primary, #fff)",
@@ -6749,7 +6755,7 @@ const ba = {
           status: _.status,
           assignee: _.assignee,
           dueDate: _.dueDate,
-          icon: wa[_.type],
+          icon: xa[_.type],
           ..._.metadata
         },
         ports: [
@@ -6758,7 +6764,7 @@ const ba = {
         ]
       };
     }), C = r.transitions.map((_) => {
-      const x = r.steps.find((O) => O.id === _.from), P = r.steps.find((O) => O.id === _.to);
+      const x = r.steps.find((R) => R.id === _.from), P = r.steps.find((R) => R.id === _.to);
       let L = "var(--nice-text-muted, #9ca3af)";
       return (x == null ? void 0 : x.status) === "completed" && (P == null ? void 0 : P.status) !== "pending" ? L = "var(--nice-success, #10b981)" : (x == null ? void 0 : x.status) === "failed" && (L = "var(--nice-danger, #ef4444)"), {
         id: _.id,
@@ -6777,8 +6783,8 @@ const ba = {
           condition: _.condition
         }
       };
-    }), z = i ? xa(r.steps) : [];
-    return Fe({
+    }), z = i ? ka(r.steps) : [];
+    return Ee({
       id: r.id,
       title: r.name,
       diagramType: "flowchart",
@@ -6791,7 +6797,7 @@ const ba = {
       }
     });
   }, [r, n, c, u, i]);
-  Be(() => {
+  Ye(() => {
     if (!i)
       return;
     const S = r.steps.filter((z) => z.status === "completed").length;
@@ -6843,7 +6849,7 @@ const ba = {
     }
   );
 };
-function xa(r) {
+function ka(r) {
   return r.filter((t) => t.status === "completed").map((t, i) => ({
     id: `anim-${t.id}`,
     targetId: t.id,
@@ -6853,7 +6859,7 @@ function xa(r) {
     easing: "ease-out"
   }));
 }
-function To(r) {
+function Ro(r) {
   var o, s;
   const t = new DOMParser().parseFromString(r, "text/xml"), i = [], a = [];
   return t.querySelectorAll("startEvent").forEach((n) => {
@@ -6895,7 +6901,7 @@ function To(r) {
     transitions: a
   };
 }
-function Ro(r, e) {
+function Eo(r, e) {
   const t = [], i = [];
   t.push({
     id: "start",
@@ -6936,18 +6942,18 @@ function Ro(r, e) {
     transitions: i
   };
 }
-const ka = {
+const _a = {
   dbo: "var(--nice-primary, #3b82f6)",
   public: "var(--nice-success, #10b981)",
   auth: "var(--nice-accent, #8b5cf6)",
   billing: "var(--nice-warning, #f59e0b)",
   audit: "var(--nice-danger, #ef4444)"
-}, _a = {
+}, Ma = {
   "one-to-one": { left: "1", right: "1" },
   "one-to-many": { left: "1", right: "*" },
   "many-to-one": { left: "*", right: "1" },
   "many-to-many": { left: "*", right: "*" }
-}, Oo = ({
+}, Lo = ({
   schema: r,
   onTableClick: e,
   onColumnClick: t,
@@ -6956,17 +6962,17 @@ const ka = {
   showOnlyKeys: o = !1,
   highlightTables: s = [],
   showMinimap: n = !0,
-  schemaColors: c = ka,
+  schemaColors: c = _a,
   layout: u = "auto",
   maxColumnsDisplay: d = 15,
   className: m,
   style: p
 }) => {
   const [g, h] = K(null), b = ae(() => {
-    const C = Ma(r.tables, u), z = r.tables.map((x, P) => {
-      const L = C[x.name] || { x: P % 4 * 300, y: Math.floor(P / 4) * 400 }, O = s.includes(x.name), W = g === x.name, F = c[x.schema || "dbo"] || "var(--nice-text-secondary, #6b7280)";
+    const C = Ca(r.tables, u), z = r.tables.map((x, P) => {
+      const L = C[x.name] || { x: P % 4 * 300, y: Math.floor(P / 4) * 400 }, R = s.includes(x.name), W = g === x.name, F = c[x.schema || "dbo"] || "var(--nice-text-secondary, #6b7280)";
       let M = x.columns;
-      o && (M = M.filter((R) => R.primaryKey || R.foreignKey)), M.length > d && (M = M.slice(0, d));
+      o && (M = M.filter((O) => O.primaryKey || O.foreignKey)), M.length > d && (M = M.slice(0, d));
       const E = 40, T = a ? 28 : 20, V = E + M.length * T + 10;
       return {
         id: x.name,
@@ -6977,19 +6983,19 @@ const ka = {
         height: V,
         shape: "rectangle",
         style: {
-          fill: O || W ? F : "var(--nice-bg, #fff)",
+          fill: R || W ? F : "var(--nice-bg, #fff)",
           stroke: F,
-          strokeWidth: W ? 3 : O ? 2 : 1,
-          fontColor: O || W ? "var(--nice-text-primary, #fff)" : "var(--nice-text, #1f2937)",
+          strokeWidth: W ? 3 : R ? 2 : 1,
+          fontColor: R || W ? "var(--nice-text-primary, #fff)" : "var(--nice-text, #1f2937)",
           fontSize: 14,
           borderRadius: 8
         },
         data: {
           type: "table",
           schema: x.schema,
-          columns: M.map((R) => ({
-            ...R,
-            icon: Ca(R)
+          columns: M.map((O) => ({
+            ...O,
+            icon: Sa(O)
           })),
           totalColumns: x.columns.length,
           truncated: x.columns.length > d,
@@ -6997,18 +7003,18 @@ const ka = {
           ...x.metadata
         },
         ports: [
-          ...x.columns.filter((R) => R.primaryKey).map((R) => ({
-            id: `${x.name}.${R.name}-pk`,
+          ...x.columns.filter((O) => O.primaryKey).map((O) => ({
+            id: `${x.name}.${O.name}-pk`,
             position: "left"
           })),
-          ...x.columns.filter((R) => R.foreignKey).map((R) => ({
-            id: `${x.name}.${R.name}-fk`,
+          ...x.columns.filter((O) => O.foreignKey).map((O) => ({
+            id: `${x.name}.${O.name}-fk`,
             position: "right"
           }))
         ]
       };
     }), _ = r.relations.map((x) => {
-      const P = _a[x.type];
+      const P = Ma[x.type];
       return {
         id: x.id,
         source: x.fromTable,
@@ -7019,8 +7025,8 @@ const ka = {
         style: {
           stroke: "var(--nice-text-secondary, #6b7280)",
           strokeWidth: 1.5,
-          arrowHead: Sa(x.type),
-          arrowTail: za(x.type),
+          arrowHead: za(x.type),
+          arrowTail: Na(x.type),
           lineType: "orthogonal",
           strokeDasharray: x.type === "many-to-many" ? "5,5" : void 0
         },
@@ -7031,7 +7037,7 @@ const ka = {
         }
       };
     });
-    return Fe({
+    return Ee({
       id: `schema-${r.name}`,
       title: r.name,
       diagramType: "er",
@@ -7104,7 +7110,7 @@ const ka = {
     }
   );
 };
-function Ma(r, e) {
+function Ca(r, e) {
   const t = {};
   if (e === "grid") {
     const i = Math.ceil(Math.sqrt(r.length));
@@ -7139,10 +7145,10 @@ function Ma(r, e) {
     });
   return t;
 }
-function Ca(r) {
+function Sa(r) {
   return r.primaryKey ? "lock" : r.foreignKey ? "link" : r.unique ? "zap" : "file";
 }
-function Sa(r) {
+function za(r) {
   switch (r) {
     case "one-to-one":
     case "many-to-one":
@@ -7152,7 +7158,7 @@ function Sa(r) {
       return "crow";
   }
 }
-function za(r) {
+function Na(r) {
   switch (r) {
     case "one-to-one":
     case "one-to-many":
@@ -7162,7 +7168,7 @@ function za(r) {
       return "crow";
   }
 }
-function Eo(r) {
+function Wo(r) {
   const e = [], t = [], i = /CREATE\s+TABLE\s+(?:`?(\w+)`?\.)?`?(\w+)`?\s*\(([\s\S]*?)\);/gi;
   let a;
   for (; (a = i.exec(r)) !== null; ) {
@@ -7207,7 +7213,7 @@ function Eo(r) {
     relations: t
   };
 }
-function Lo(r, e = "postgres") {
+function Fo(r, e = "postgres") {
   const t = [];
   for (const i of r.tables) {
     const a = i.schema ? `${i.schema}.${i.name}` : i.name;
@@ -7225,7 +7231,7 @@ function Lo(r, e = "postgres") {
   return t.join(`
 `);
 }
-const Na = {
+const Ia = {
   active: "var(--nice-success, #10b981)",
   away: "var(--nice-warning, #f59e0b)",
   busy: "var(--nice-danger, #ef4444)",
@@ -7241,8 +7247,8 @@ const Na = {
   "var(--nice-color-accent-pink, #ec4899)",
   "var(--nice-info, #14b8a6)",
   "var(--nice-info, #6366f1)"
-], Wo = ({
-  data: r,
+], Aa = { employees: [] }, qo = ({
+  data: r = Aa,
   rootEmployeeId: e,
   onEmployeeClick: t,
   onDepartmentClick: i,
@@ -7253,7 +7259,7 @@ const Na = {
   maxLevels: c = 0,
   orientation: u = "vertical",
   spacing: d = { horizontal: 200, vertical: 150 },
-  statusColors: m = Na,
+  statusColors: m = Ia,
   showMinimap: p = !0,
   className: g,
   style: h
@@ -7262,18 +7268,18 @@ const Na = {
     var W;
     if (e)
       return e;
-    const O = r.employees.find((F) => !F.managerId);
-    return (O == null ? void 0 : O.id) || ((W = r.employees[0]) == null ? void 0 : W.id);
-  }, [r.employees, e]), z = ae(() => Ia(r.employees, C), [r.employees, C]), _ = ae(() => {
-    const O = Aa(z, u, d, c), W = [], F = {};
-    s && r.departments && r.departments.forEach((V, R) => {
-      const $ = V.color || nt[R % nt.length];
+    const R = r.employees.find((F) => !F.managerId);
+    return (R == null ? void 0 : R.id) || ((W = r.employees[0]) == null ? void 0 : W.id);
+  }, [r.employees, e]), z = ae(() => $a(r.employees, C), [r.employees, C]), _ = ae(() => {
+    const R = Da(z, u, d, c), W = [], F = {};
+    s && r.departments && r.departments.forEach((V, O) => {
+      const $ = V.color || nt[O % nt.length];
       F[V.id] = $;
-      const H = r.employees.filter((Y) => Y.department === V.id);
+      const H = r.employees.filter((B) => B.department === V.id);
       H.length !== 0 && W.push({
         id: `dept-${V.id}`,
         label: V.name,
-        nodeIds: H.map((Y) => Y.id),
+        nodeIds: H.map((B) => B.id),
         style: {
           fill: `${$}15`,
           stroke: $,
@@ -7284,10 +7290,10 @@ const Na = {
         }
       });
     });
-    const M = [], E = [], T = (V, R = 0) => {
-      if (c > 0 && R >= c || V.employee.department && n.includes(V.employee.department))
+    const M = [], E = [], T = (V, O = 0) => {
+      if (c > 0 && O >= c || V.employee.department && n.includes(V.employee.department))
         return;
-      const $ = O[V.employee.id] || { x: 0, y: 0 }, H = y === V.employee.id, Y = V.employee.status || "active", j = V.employee.department ? F[V.employee.department] : "var(--nice-text-secondary, #6b7280)", Z = 180, ue = o ? 120 : a ? 90 : 70;
+      const $ = R[V.employee.id] || { x: 0, y: 0 }, H = y === V.employee.id, B = V.employee.status || "active", j = V.employee.department ? F[V.employee.department] : "var(--nice-text-secondary, #6b7280)", Z = 180, ue = o ? 120 : a ? 90 : 70;
       M.push({
         id: V.employee.id,
         label: V.employee.name,
@@ -7308,7 +7314,7 @@ const Na = {
         data: {
           type: "employee",
           employee: V.employee,
-          statusColor: m[Y],
+          statusColor: m[B],
           hasChildren: V.children.length > 0,
           childrenCount: V.children.length
         }
@@ -7322,9 +7328,9 @@ const Na = {
           arrowHead: "none",
           lineType: u === "vertical" ? "orthogonal" : "curved"
         }
-      }), V.children.forEach((pe) => T(pe, R + 1));
+      }), V.children.forEach((pe) => T(pe, O + 1));
     };
-    return z && T(z), Fe({
+    return z && T(z), Ee({
       id: "org-chart",
       title: "Organization Chart",
       diagramType: "orgchart",
@@ -7350,29 +7356,29 @@ const Na = {
     y
   ]);
   G(
-    (O) => {
-      if (S((W) => W === O ? null : O), w((W) => {
+    (R) => {
+      if (S((W) => W === R ? null : R), w((W) => {
         const F = new Set(W);
-        return F.has(O) ? F.delete(O) : F.add(O), F;
+        return F.has(R) ? F.delete(R) : F.add(R), F;
       }), t) {
-        const W = r.employees.find((F) => F.id === O);
+        const W = r.employees.find((F) => F.id === R);
         W && t(W);
       }
     },
     [r.employees, t]
   ), G(
-    (O) => {
+    (R) => {
       if (!i || !r.departments)
         return;
-      const W = O.replace("dept-", ""), F = r.departments.find((M) => M.id === W);
+      const W = R.replace("dept-", ""), F = r.departments.find((M) => M.id === W);
       F && i(F);
     },
     [r.departments, i]
   );
   const [x, P] = K({ x: 0, y: 0, zoom: 1 }), L = G(
-    (O) => {
-      if (O && (S((W) => W === O ? null : O), t)) {
-        const W = r.employees.find((F) => F.id === O);
+    (R) => {
+      if (R && (S((W) => W === R ? null : R), t)) {
+        const W = r.employees.find((F) => F.id === R);
         W && t(W);
       }
     },
@@ -7398,7 +7404,7 @@ const Na = {
     }
   );
 };
-function Ia(r, e) {
+function $a(r, e) {
   const i = new Map(r.map((o) => [o.id, o])).get(e);
   if (!i)
     return null;
@@ -7412,7 +7418,7 @@ function Ia(r, e) {
   };
   return a(i, 0);
 }
-function Aa(r, e, t, i) {
+function Da(r, e, t, i) {
   const a = {};
   if (!r)
     return a;
@@ -7429,7 +7435,7 @@ function Aa(r, e, t, i) {
   }, n = o(r, 0);
   return s(r, 0, 0, n), a;
 }
-function Fo(r) {
+function Go(r) {
   const t = [...new Set(r.map((i) => i.department).filter(Boolean))].map((i, a) => ({
     id: i,
     name: i,
@@ -7441,7 +7447,7 @@ function Fo(r) {
     departments: t
   };
 }
-function qo(r) {
+function Vo(r) {
   var n;
   const e = new Set(r.employees.map((c) => c.managerId).filter(Boolean)), t = (c, u = /* @__PURE__ */ new Set()) => {
     if (u.has(c))
@@ -7460,7 +7466,7 @@ function qo(r) {
     managers: e.size
   };
 }
-const Go = ({
+const Yo = ({
   data: r,
   onActivityClick: e,
   onTransitionClick: t,
@@ -7477,22 +7483,22 @@ const Go = ({
   className: g,
   style: h
 }) => {
-  const [b, w] = K(null), y = ae(() => "activities" in r ? r : Oa(r), [r]), S = ae(() => {
+  const [b, w] = K(null), y = ae(() => "activities" in r ? r : La(r), [r]), S = ae(() => {
     if (!s)
       return /* @__PURE__ */ new Set();
     const L = y.activities.filter((W) => W.avgDuration !== void 0).map((W) => W.avgDuration);
     if (L.length === 0)
       return /* @__PURE__ */ new Set();
     L.sort((W, F) => W - F);
-    const O = L[Math.floor(L.length * n)] || 0;
+    const R = L[Math.floor(L.length * n)] || 0;
     return new Set(
-      y.activities.filter((W) => (W.avgDuration || 0) >= O).map((W) => W.name)
+      y.activities.filter((W) => (W.avgDuration || 0) >= R).map((W) => W.name)
     );
   }, [y.activities, s, n]), C = ae(() => {
-    const L = Math.max(...y.activities.map((T) => T.frequency), 1), O = $a(y, d), W = y.transitions.filter(
+    const L = Math.max(...y.activities.map((T) => T.frequency), 1), R = Pa(y, d), W = y.transitions.filter(
       (T) => T.frequency / y.totalCases >= i
     ), F = y.activities.map((T) => {
-      const V = O[T.name] || { x: 0, y: 0 }, R = y.startActivities.includes(T.name), $ = y.endActivities.includes(T.name), H = S.has(T.name), Y = b === T.name, j = Pa(
+      const V = R[T.name] || { x: 0, y: 0 }, O = y.startActivities.includes(T.name), $ = y.endActivities.includes(T.name), H = S.has(T.name), B = b === T.name, j = Oa(
         T,
         c,
         L,
@@ -7506,47 +7512,47 @@ const Go = ({
         y: V.y,
         width: 140,
         height: 60,
-        shape: R ? "ellipse" : $ ? "roundedRect" : "rectangle",
+        shape: O ? "ellipse" : $ ? "roundedRect" : "rectangle",
         style: {
-          fill: Y ? j : "var(--nice-bg, #fff)",
+          fill: B ? j : "var(--nice-bg, #fff)",
           stroke: j,
-          strokeWidth: H ? 4 : Y ? 3 : 2,
+          strokeWidth: H ? 4 : B ? 3 : 2,
           // Selected: filled with the activity colour, so on-colour ink.
-          fontColor: Y ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text, #1f2937)",
+          fontColor: B ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text, #1f2937)",
           fontSize: 12,
           borderRadius: $ ? 20 : 8
         },
         data: {
           type: "activity",
           activity: T,
-          isStart: R,
+          isStart: O,
           isEnd: $,
           isBottleneck: H,
           frequencyPercent: Math.round(T.frequency / y.totalCases * 100)
         }
       };
     }), M = W.map((T) => {
-      const V = y.transitions.indexOf(T), R = T.probability || T.frequency / y.totalCases, $ = R > 0.5, H = [];
-      return a && H.push(`${T.frequency}x`), o && T.avgDuration && H.push(Ta(T.avgDuration)), {
+      const V = y.transitions.indexOf(T), O = T.probability || T.frequency / y.totalCases, $ = O > 0.5, H = [];
+      return a && H.push(`${T.frequency}x`), o && T.avgDuration && H.push(Ra(T.avgDuration)), {
         id: `trans-${V}`,
         source: T.from,
         target: T.to,
         label: H.join(" | "),
         style: {
           stroke: $ ? "var(--nice-primary, #3b82f6)" : "var(--nice-text-muted, #9ca3af)",
-          strokeWidth: Math.max(1, Math.min(6, R * 8)),
+          strokeWidth: Math.max(1, Math.min(6, O * 8)),
           arrowHead: "triangle",
           lineType: "curved",
-          opacity: Math.max(0.3, R)
+          opacity: Math.max(0.3, O)
         },
         data: {
           type: "transition",
           transition: T,
-          probability: R
+          probability: O
         }
       };
-    }), E = m > 0 ? Ra(y, m) : [];
-    return Fe({
+    }), E = m > 0 ? Ea(y, m) : [];
+    return Ee({
       id: "process-mining",
       title: "Process Mining Diagram",
       diagramType: "flowchart",
@@ -7574,9 +7580,9 @@ const Go = ({
   ]);
   G(
     (L) => {
-      if (w((O) => O === L ? null : L), e) {
-        const O = y.activities.find((W) => W.name === L);
-        O && e(O);
+      if (w((R) => R === L ? null : L), e) {
+        const R = y.activities.find((W) => W.name === L);
+        R && e(R);
       }
     },
     [y.activities, e]
@@ -7585,7 +7591,7 @@ const Go = ({
     (L) => {
       if (!t)
         return;
-      const O = parseInt(L.replace("trans-", ""), 10), W = y.transitions[O];
+      const R = parseInt(L.replace("trans-", ""), 10), W = y.transitions[R];
       W && t(W);
     },
     [y.transitions, t]
@@ -7596,9 +7602,9 @@ const Go = ({
           z(L);
           return;
         }
-        if (w((O) => O === L ? null : L), e) {
-          const O = y.activities.find((W) => W.name === L);
-          O && e(O);
+        if (w((R) => R === L ? null : L), e) {
+          const R = y.activities.find((W) => W.name === L);
+          R && e(R);
         }
       }
     },
@@ -7624,7 +7630,7 @@ const Go = ({
     }
   );
 };
-function $a(r, e) {
+function Pa(r, e) {
   const t = {};
   if (e === "circular") {
     const i = r.activities;
@@ -7636,7 +7642,7 @@ function $a(r, e) {
       };
     });
   } else {
-    const i = Da(r), a = {};
+    const i = Ta(r), a = {};
     r.activities.forEach((s) => {
       const n = i[s.name] || 0;
       a[n] = (a[n] || 0) + 1;
@@ -7654,7 +7660,7 @@ function $a(r, e) {
   }
   return t;
 }
-function Da(r) {
+function Ta(r) {
   const e = {}, t = /* @__PURE__ */ new Set(), i = r.startActivities.map((a) => ({
     activity: a,
     level: 0
@@ -7671,7 +7677,7 @@ function Da(r) {
     e[a.name] === void 0 && (e[a.name] = 0);
   }), e;
 }
-function Pa(r, e, t, i, a) {
+function Oa(r, e, t, i, a) {
   if (a)
     return "var(--nice-danger, #ef4444)";
   if (i != null && i[r.name])
@@ -7703,10 +7709,10 @@ function yt(r, e, t) {
   }, a = i(r), o = i(e), s = Math.round(a.r + (o.r - a.r) * t), n = Math.round(a.g + (o.g - a.g) * t), c = Math.round(a.b + (o.b - a.b) * t);
   return `#${[s, n, c].map((u) => u.toString(16).padStart(2, "0")).join("")}`;
 }
-function Ta(r) {
+function Ra(r) {
   return r < 1e3 ? `${r}ms` : r < 6e4 ? `${(r / 1e3).toFixed(1)}s` : r < 36e5 ? `${(r / 6e4).toFixed(1)}m` : r < 864e5 ? `${(r / 36e5).toFixed(1)}h` : `${(r / 864e5).toFixed(1)}d`;
 }
-function Ra(r, e) {
+function Ea(r, e) {
   var i;
   const t = (i = r.variants) == null ? void 0 : i[0];
   return t ? t.activities.map((a, o) => ({
@@ -7717,7 +7723,7 @@ function Ra(r, e) {
     delay: o * e
   })) : [];
 }
-function Oa(r) {
+function La(r) {
   const e = r.events.map((g) => ({
     ...g,
     timestamp: g.timestamp instanceof Date ? g.timestamp : new Date(g.timestamp)
@@ -7822,7 +7828,7 @@ const Jt = {
   database: { color: "var(--nice-info, #14b8a6)" },
   event: { color: "var(--nice-color-accent-pink, #ec4899)", dash: "2,2" },
   circular: { color: "var(--nice-danger, #ef4444)" }
-}, Ea = {
+}, Wa = {
   module: "box",
   package: "folder",
   microservice: "square",
@@ -7831,7 +7837,7 @@ const Jt = {
   database: "database",
   external: "globe",
   deprecated: "warning"
-}, Vo = ({
+}, Bo = ({
   data: r,
   onNodeClick: e,
   onEdgeClick: t,
@@ -7863,21 +7869,21 @@ const Jt = {
     let E = r.edges.filter((T) => M.has(T.source) && M.has(T.target));
     return a && a.length > 0 && (E = E.filter((T) => a.includes(T.type))), E;
   }, [r.edges, x, a]), L = ae(() => {
-    const M = La(x, P, n), E = Fa(x, u), T = [];
+    const M = Fa(x, P, n), E = Ga(x, u), T = [];
     if (c !== "none") {
       const $ = /* @__PURE__ */ new Map();
-      x.forEach((Y) => {
-        const j = c === "type" ? Y.type : Y.group || "ungrouped";
-        $.has(j) || $.set(j, []), $.get(j).push(Y.id);
+      x.forEach((B) => {
+        const j = c === "type" ? B.type : B.group || "ungrouped";
+        $.has(j) || $.set(j, []), $.get(j).push(B.id);
       });
       let H = 0;
-      $.forEach((Y, j) => {
+      $.forEach((B, j) => {
         var ue, pe;
         const Z = c === "type" ? Jt[j] || "var(--nice-text-secondary, #6b7280)" : ((pe = (ue = r.groups) == null ? void 0 : ue.find((X) => X.id === j)) == null ? void 0 : pe.color) || st[H % st.length];
         T.push({
           id: `group-${j}`,
           label: j,
-          nodeIds: Y,
+          nodeIds: B,
           style: {
             fill: `${Z}10`,
             stroke: Z,
@@ -7887,7 +7893,7 @@ const Jt = {
       });
     }
     const V = x.map(($) => {
-      const H = M[$.id] || { x: 0, y: 0 }, Y = y === $.id, j = C === $.id, Z = _.has($.id), ue = qa($, u, E), pe = Ga($, d, m, Z);
+      const H = M[$.id] || { x: 0, y: 0 }, B = y === $.id, j = C === $.id, Z = _.has($.id), ue = Va($, u, E), pe = Ya($, d, m, Z);
       return {
         id: $.id,
         label: $.name,
@@ -7895,12 +7901,12 @@ const Jt = {
         y: H.y,
         width: ue.width,
         height: ue.height,
-        shape: Va($.type),
+        shape: Ba($.type),
         style: {
-          fill: Y || j ? pe : "var(--nice-bg, #fff)",
+          fill: B || j ? pe : "var(--nice-bg, #fff)",
           stroke: pe,
-          strokeWidth: Z ? 4 : Y ? 3 : 2,
-          fontColor: Y || j ? "var(--nice-text-primary, #fff)" : "var(--nice-text, #1f2937)",
+          strokeWidth: Z ? 4 : B ? 3 : 2,
+          fontColor: B || j ? "var(--nice-text-primary, #fff)" : "var(--nice-text, #1f2937)",
           fontSize: 11,
           borderRadius: 8,
           strokeDasharray: $.status === "deprecated" ? "4,4" : void 0
@@ -7908,20 +7914,20 @@ const Jt = {
         data: {
           type: "dependency",
           node: $,
-          icon: Ea[$.type],
+          icon: Wa[$.type],
           isCircular: Z,
           statusColor: Zt[$.status || "unknown"]
         }
       };
-    }), R = P.map(($, H) => {
-      const Y = $.type === "circular" || _.has($.source) && _.has($.target), j = Dt[$.type] || Dt.import;
+    }), O = P.map(($, H) => {
+      const B = $.type === "circular" || _.has($.source) && _.has($.target), j = Dt[$.type] || Dt.import;
       return {
         id: $.id || `edge-${H}`,
         source: $.source,
         target: $.target,
         label: $.optional ? "(optional)" : void 0,
         style: {
-          stroke: Y ? "var(--nice-danger, #ef4444)" : j.color,
+          stroke: B ? "var(--nice-danger, #ef4444)" : j.color,
           strokeWidth: Math.max(1, Math.min(4, $.weight || 1)),
           strokeDasharray: j.dash,
           arrowHead: "triangle",
@@ -7931,16 +7937,16 @@ const Jt = {
         data: {
           type: $.type,
           edge: $,
-          isCircular: Y
+          isCircular: B
         }
       };
     });
-    return Fe({
+    return Ee({
       id: "dependency-graph",
       title: "Dependency Graph",
       diagramType: "custom",
       nodes: V,
-      edges: R,
+      edges: O,
       groups: T,
       metadata: {
         type: "dependency-graph",
@@ -7979,7 +7985,7 @@ const Jt = {
   ), G((M) => {
     z(M);
   }, []);
-  const [O, W] = K({ x: 0, y: 0, zoom: 1 }), F = G(
+  const [R, W] = K({ x: 0, y: 0, zoom: 1 }), F = G(
     (M) => {
       if (M) {
         if (S((E) => E === M ? null : M), e) {
@@ -8005,7 +8011,7 @@ const Jt = {
           nodes: L.nodes,
           edges: L.edges,
           groups: L.groups,
-          viewport: O,
+          viewport: R,
           onViewportChange: W,
           onSelectElement: F,
           interactive: g,
@@ -8047,7 +8053,7 @@ function Kt(r) {
     i.has(s.id) || o(s.id, []);
   }), e;
 }
-function La(r, e, t) {
+function Fa(r, e, t) {
   const i = {};
   switch (t) {
     case "circular": {
@@ -8071,7 +8077,7 @@ function La(r, e, t) {
       break;
     }
     case "hierarchical": {
-      const a = Wa(r, e), o = {}, s = {};
+      const a = qa(r, e), o = {}, s = {};
       r.forEach((n) => {
         const c = a[n.id] || 0;
         o[c] = (o[c] || 0) + 1;
@@ -8114,7 +8120,7 @@ function La(r, e, t) {
   }
   return i;
 }
-function Wa(r, e) {
+function qa(r, e) {
   const t = {}, i = {};
   r.forEach((o) => {
     t[o.id] = 0, i[o.id] = 0;
@@ -8130,7 +8136,7 @@ function Wa(r, e) {
   }
   return t;
 }
-function Fa(r, e) {
+function Ga(r, e) {
   const t = r.map((i) => {
     var a, o, s;
     switch (e) {
@@ -8151,7 +8157,7 @@ function Fa(r, e) {
     max: Math.max(...t, 1)
   };
 }
-function qa(r, e, t) {
+function Va(r, e, t) {
   var c, u, d;
   if (e === "fixed")
     return { width: 140, height: 70 };
@@ -8175,7 +8181,7 @@ function qa(r, e, t) {
   const a = t.max > t.min ? (i - t.min) / (t.max - t.min) : 0.5, o = 100, n = o + a * (180 - o);
   return { width: n, height: n * 0.5 };
 }
-function Ga(r, e, t, i) {
+function Ya(r, e, t, i) {
   if (i)
     return "var(--nice-danger, #ef4444)";
   if (t != null && t[r.id])
@@ -8184,12 +8190,12 @@ function Ga(r, e, t, i) {
     case "status":
       return Zt[r.status || "unknown"];
     case "group":
-      return st[Ba(r.group || "") % st.length];
+      return st[Xa(r.group || "") % st.length];
     default:
       return Jt[r.type] || "var(--nice-text-secondary, #6b7280)";
   }
 }
-function Va(r) {
+function Ba(r) {
   switch (r) {
     case "database":
       return "cylinder";
@@ -8203,13 +8209,13 @@ function Va(r) {
       return "rectangle";
   }
 }
-function Ba(r) {
+function Xa(r) {
   let e = 0;
   for (let t = 0; t < r.length; t++)
     e = (e << 5) - e + r.charCodeAt(t), e |= 0;
   return Math.abs(e);
 }
-function Bo(r) {
+function Xo(r) {
   const e = [
     {
       id: r.name,
@@ -8243,7 +8249,7 @@ function Bo(r) {
     };
   }), { nodes: e, edges: t };
 }
-function Yo(r) {
+function Uo(r) {
   const e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
   r.nodes.forEach((d) => {
     e.set(d.id, 0), t.set(d.id, 0);
@@ -8274,14 +8280,14 @@ function Yo(r) {
     avgDependencies: Math.round(u * 10) / 10
   };
 }
-const Ya = {
+const Ua = {
   online: "var(--nice-success, #10b981)",
   offline: "var(--nice-text-secondary, #6b7280)",
   warning: "var(--nice-warning, #f59e0b)",
   critical: "var(--nice-danger, #ef4444)",
   maintenance: "var(--nice-primary, #3b82f6)",
   unknown: "var(--nice-text-muted, #9ca3af)"
-}, Xa = {
+}, Ha = {
   router: "shuffle",
   switch: "plug",
   firewall: "lock",
@@ -8297,14 +8303,14 @@ const Ya = {
   cloud: "cloud",
   internet: "globe",
   unknown: "help"
-}, Ua = {
+}, ja = {
   ethernet: "var(--nice-primary, #3b82f6)",
   fiber: "var(--nice-success, #10b981)",
   wireless: "var(--nice-accent, #8b5cf6)",
   vpn: "var(--nice-warning, #f59e0b)",
   wan: "var(--nice-color-accent-pink, #ec4899)",
   trunk: "var(--nice-info, #14b8a6)"
-}, Xo = ({
+}, Ho = ({
   data: r,
   onDeviceClick: e,
   onConnectionClick: t,
@@ -8318,13 +8324,13 @@ const Ya = {
   showBandwidth: d = !0,
   showLatency: m = !1,
   animateTraffic: p = !1,
-  statusColors: g = Ya,
+  statusColors: g = Ua,
   showMinimap: h = !0,
   className: b,
   style: w
 }) => {
   const [y, S] = K(null), [C, z] = K(/* @__PURE__ */ new Date());
-  Be(() => {
+  Ye(() => {
     if (a <= 0 || !i)
       return;
     const F = setInterval(() => {
@@ -8341,35 +8347,35 @@ const Ya = {
     const F = new Set(_.map((M) => M.id));
     return r.connections.filter((M) => F.has(M.source) && F.has(M.target));
   }, [r.connections, _]), P = ae(() => {
-    const F = Ha(
+    const F = Ja(
       _,
       x,
       n,
       r.groups
     ), M = [];
     if (c !== "none") {
-      const R = /* @__PURE__ */ new Map();
+      const O = /* @__PURE__ */ new Map();
       _.forEach((H) => {
-        let Y;
+        let B;
         switch (c) {
           case "type":
-            Y = H.type;
+            B = H.type;
             break;
           case "location":
-            Y = H.location || "Unknown Location";
+            B = H.location || "Unknown Location";
             break;
           default:
-            Y = H.group || "ungrouped";
+            B = H.group || "ungrouped";
         }
-        R.has(Y) || R.set(Y, []), R.get(Y).push(H.id);
+        O.has(B) || O.set(B, []), O.get(B).push(H.id);
       });
       let $ = 0;
-      R.forEach((H, Y) => {
+      O.forEach((H, B) => {
         var ue;
-        const j = (ue = r.groups) == null ? void 0 : ue.find((pe) => pe.id === Y || pe.name === Y), Z = (j == null ? void 0 : j.color) || Pt[$ % Pt.length];
+        const j = (ue = r.groups) == null ? void 0 : ue.find((pe) => pe.id === B || pe.name === B), Z = (j == null ? void 0 : j.color) || Pt[$ % Pt.length];
         M.push({
-          id: `group-${Y}`,
-          label: (j == null ? void 0 : j.name) || Y,
+          id: `group-${B}`,
+          label: (j == null ? void 0 : j.name) || B,
           nodeIds: H,
           style: {
             fill: `${Z}15`,
@@ -8379,19 +8385,19 @@ const Ya = {
         }), $++;
       });
     }
-    const E = _.map((R) => {
-      const $ = F[R.id] || { x: 0, y: 0 }, H = y === R.id, Y = g[R.status], j = Xa[R.type];
+    const E = _.map((O) => {
+      const $ = F[O.id] || { x: 0, y: 0 }, H = y === O.id, B = g[O.status], j = Ha[O.type];
       return {
-        id: R.id,
-        label: R.name,
+        id: O.id,
+        label: O.name,
         x: $.x,
         y: $.y,
         width: 120,
         height: u ? 90 : 70,
-        shape: ja(R.type),
+        shape: Za(O.type),
         style: {
-          fill: H ? Y : "var(--nice-bg, #fff)",
-          stroke: Y,
+          fill: H ? B : "var(--nice-bg, #fff)",
+          stroke: B,
           strokeWidth: H ? 3 : 2,
           // Selected: filled with the status colour, so on-colour ink.
           fontColor: H ? "var(--nice-text-on-primary, #fff)" : "var(--nice-text, #1f2937)",
@@ -8400,43 +8406,43 @@ const Ya = {
         },
         data: {
           type: "network-device",
-          device: R,
+          device: O,
           icon: j,
-          statusColor: Y
+          statusColor: B
         }
       };
-    }), T = x.map((R, $) => {
-      const H = Ua[R.type] || "var(--nice-text-secondary, #6b7280)", Y = R.status === "active", j = R.status === "degraded" || R.status === "error", Z = [];
-      if (d && R.bandwidth) {
+    }), T = x.map((O, $) => {
+      const H = ja[O.type] || "var(--nice-text-secondary, #6b7280)", B = O.status === "active", j = O.status === "degraded" || O.status === "error", Z = [];
+      if (d && O.bandwidth) {
         const ue = Math.round(
-          R.bandwidth.used / R.bandwidth.total * 100
+          O.bandwidth.used / O.bandwidth.total * 100
         );
         Z.push(`${ue}%`);
       }
-      return m && R.latency !== void 0 && Z.push(`${R.latency}ms`), {
-        id: R.id || `conn-${$}`,
-        source: R.source,
-        target: R.target,
-        sourcePort: R.sourcePort,
-        targetPort: R.targetPort,
+      return m && O.latency !== void 0 && Z.push(`${O.latency}ms`), {
+        id: O.id || `conn-${$}`,
+        source: O.source,
+        target: O.target,
+        sourcePort: O.sourcePort,
+        targetPort: O.targetPort,
         label: Z.join(" | ") || void 0,
         style: {
           stroke: j ? "var(--nice-danger, #ef4444)" : H,
-          strokeWidth: Math.max(1, Math.min(6, (R.speed || 1e3) / 1e3)),
-          strokeDasharray: Y ? void 0 : "5,5",
+          strokeWidth: Math.max(1, Math.min(6, (O.speed || 1e3) / 1e3)),
+          strokeDasharray: B ? void 0 : "5,5",
           arrowHead: "none",
-          lineType: R.type === "wireless" ? "curved" : "orthogonal",
-          opacity: R.status === "inactive" ? 0.3 : 1
+          lineType: O.type === "wireless" ? "curved" : "orthogonal",
+          opacity: O.status === "inactive" ? 0.3 : 1
         },
         data: {
-          type: R.type,
-          connection: R,
-          isActive: Y,
+          type: O.type,
+          connection: O,
+          isActive: B,
           isDegraded: j
         }
       };
-    }), V = p ? Ja(x) : [];
-    return Fe({
+    }), V = p ? Ka(x) : [];
+    return Ee({
       id: "network-topology",
       title: "Network Topology",
       diagramType: "networkTopology",
@@ -8481,7 +8487,7 @@ const Ya = {
     },
     [r.connections, t]
   );
-  const [L, O] = K({ x: 0, y: 0, zoom: 1 }), W = G(
+  const [L, R] = K({ x: 0, y: 0, zoom: 1 }), W = G(
     (F) => {
       if (F && (S((M) => M === F ? null : F), e)) {
         const M = r.devices.find((E) => E.id === F);
@@ -8502,7 +8508,7 @@ const Ya = {
           edges: P.edges,
           groups: P.groups,
           viewport: L,
-          onViewportChange: O,
+          onViewportChange: R,
           onSelectElement: W,
           showGrid: !0
         }
@@ -8519,7 +8525,7 @@ const Ya = {
   "var(--nice-info, #14b8a6)",
   "var(--nice-info, #6366f1)"
 ];
-function Ha(r, e, t, i) {
+function Ja(r, e, t, i) {
   var o;
   const a = {};
   switch (t) {
@@ -8618,7 +8624,7 @@ function Ha(r, e, t, i) {
   }
   return a;
 }
-function ja(r) {
+function Za(r) {
   switch (r) {
     case "router":
     case "switch":
@@ -8635,7 +8641,7 @@ function ja(r) {
       return "rectangle";
   }
 }
-function Ja(r) {
+function Ka(r) {
   return r.filter((e) => e.status === "active" && e.bandwidth && e.bandwidth.used > 0).map((e, t) => ({
     id: `traffic-${t}`,
     type: "flow",
@@ -8644,7 +8650,7 @@ function Ja(r) {
     delay: t * 200
   }));
 }
-async function Uo(r = {}) {
+async function jo(r = {}) {
   return console.log("Network discovery with options:", r), {
     devices: [
       {
@@ -8737,7 +8743,7 @@ async function Uo(r = {}) {
     ]
   };
 }
-function Ho(r) {
+function Jo(r) {
   const e = r.devices.filter((m) => m.status === "online").length, t = r.devices.filter((m) => m.status === "offline").length, i = r.devices.filter((m) => m.status === "warning").length, a = r.devices.filter((m) => m.status === "critical").length, o = r.connections.filter((m) => m.status === "active").length, s = r.connections.filter(
     (m) => m.status === "degraded" || m.status === "error"
   ).length, n = r.devices.length > 0 ? e / r.devices.length * 100 : 0, c = r.connections.length > 0 ? o / r.connections.length * 100 : 0, u = a * 10 + i * 5 + s * 5;
@@ -8754,7 +8760,7 @@ function Ho(r) {
     degradedConnections: s
   };
 }
-const Za = [
+const Qa = [
   {
     target: ".nice-decision-tree-editor",
     titleKey: "tutorial.decisionTreeEditor.intro.title",
@@ -8763,13 +8769,13 @@ const Za = [
     content: "Explore the decision tree: click nodes to inspect conditions and outcomes, toggle metrics, probabilities and samples, and highlight a path for an input.",
     placement: "auto"
   }
-], Ka = {
+], eo = {
   root: "var(--nice-accent, #8b5cf6)",
   decision: "var(--nice-primary, #3b82f6)",
   leaf: "var(--nice-success, #10b981)",
   chance: "var(--nice-warning, #f59e0b)",
   end: "var(--nice-danger, #ef4444)"
-}, jo = ({
+}, Zo = ({
   data: r,
   onChange: e,
   onNodeClick: t,
@@ -8787,10 +8793,10 @@ const Za = [
   style: h,
   tutorial: b
 }) => {
-  const [w, y] = K(null), [S, C] = K(/* @__PURE__ */ new Set()), z = ae(() => n ? io(r.root, n) : /* @__PURE__ */ new Set(), [r.root, n]), { nodes: _, edges: x } = ae(() => Qa(r.root, r.edges), [r.root, r.edges]), P = ae(() => to(_), [_]), L = ae(() => {
-    var V, R;
-    const M = eo(r.root, d, m), E = _.map(($) => {
-      const H = M[$.id] || { x: 0, y: 0 }, Y = w === $.id, j = z.has($.id), Z = $.type === "leaf" || $.type === "end", ue = ro($, c, u, P), pe = Z ? 120 : 160, X = a ? 80 : Z ? 60 : 70;
+  const [w, y] = K(null), [S, C] = K(/* @__PURE__ */ new Set()), z = ae(() => n ? oo(r.root, n) : /* @__PURE__ */ new Set(), [r.root, n]), { nodes: _, edges: x } = ae(() => to(r.root, r.edges), [r.root, r.edges]), P = ae(() => io(_), [_]), L = ae(() => {
+    var V, O;
+    const M = ro(r.root, d, m), E = _.map(($) => {
+      const H = M[$.id] || { x: 0, y: 0 }, B = w === $.id, j = z.has($.id), Z = $.type === "leaf" || $.type === "end", ue = ao($, c, u, P), pe = Z ? 120 : 160, X = a ? 80 : Z ? 60 : 70;
       return {
         id: $.id,
         label: $.label,
@@ -8800,10 +8806,10 @@ const Za = [
         height: X,
         shape: Z ? "roundedRect" : "diamond",
         style: {
-          fill: Y || j ? ue : "var(--nice-bg, #fff)",
+          fill: B || j ? ue : "var(--nice-bg, #fff)",
           stroke: ue,
-          strokeWidth: j ? 4 : Y ? 3 : 2,
-          fontColor: Y || j ? "var(--nice-text-primary, #fff)" : "var(--nice-text, #1f2937)",
+          strokeWidth: j ? 4 : B ? 3 : 2,
+          fontColor: B || j ? "var(--nice-text-primary, #fff)" : "var(--nice-text, #1f2937)",
           fontSize: 11,
           borderRadius: Z ? 8 : 0
         },
@@ -8815,7 +8821,7 @@ const Za = [
         }
       };
     }), T = x.map(($, H) => {
-      const Y = z.has($.source) && z.has($.target);
+      const B = z.has($.source) && z.has($.target);
       let j = $.label || "";
       return o && $.probability !== void 0 && (j += j ? ` (${($.probability * 100).toFixed(0)}%)` : `${($.probability * 100).toFixed(0)}%`), {
         id: $.id || `edge-${H}`,
@@ -8823,29 +8829,29 @@ const Za = [
         target: $.target,
         label: j || void 0,
         style: {
-          stroke: Y ? "var(--nice-primary, #3b82f6)" : "var(--nice-text-muted, #9ca3af)",
-          strokeWidth: Y ? 3 : 2,
+          stroke: B ? "var(--nice-primary, #3b82f6)" : "var(--nice-text-muted, #9ca3af)",
+          strokeWidth: B ? 3 : 2,
           arrowHead: "triangle",
           lineType: d === "vertical" ? "orthogonal" : "curved"
         },
         data: {
           type: "decision-edge",
           edge: $,
-          isHighlighted: Y
+          isHighlighted: B
         }
       };
     });
-    return Fe({
+    return Ee({
       id: "decision-tree",
       title: "Decision Tree",
       diagramType: "decisionTree",
       nodes: E,
       edges: T,
-      animations: n ? ao(Array.from(z)) : [],
+      animations: n ? no(Array.from(z)) : [],
       metadata: {
         type: "decision-tree",
         algorithm: (V = r.metadata) == null ? void 0 : V.algorithm,
-        accuracy: (R = r.metadata) == null ? void 0 : R.accuracy
+        accuracy: (O = r.metadata) == null ? void 0 : O.accuracy
       }
     });
   }, [
@@ -8874,7 +8880,7 @@ const Za = [
     },
     [_, t]
   );
-  const [O, W] = K({ x: 0, y: 0, zoom: 1 }), F = G(
+  const [R, W] = K({ x: 0, y: 0, zoom: 1 }), F = G(
     (M) => {
       if (!M)
         return;
@@ -8893,14 +8899,14 @@ const Za = [
       className: `nice-decision-tree-editor ${g || ""}`,
       style: { position: "relative", width: "100%", height: "100%", ...h },
       children: [
-        /* @__PURE__ */ l("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ l(Et, { steps: Lt(b, Za) }) }),
+        /* @__PURE__ */ l("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ l(Et, { steps: Lt(b, Qa) }) }),
         /* @__PURE__ */ l(
           Te,
           {
             nodes: L.nodes,
             edges: L.edges,
             groups: L.groups,
-            viewport: O,
+            viewport: R,
             onViewportChange: W,
             onSelectElement: F,
             interactive: !0,
@@ -8911,7 +8917,7 @@ const Za = [
     }
   );
 };
-function Qa(r, e) {
+function to(r, e) {
   const t = [], i = e ? [...e] : [], a = new Set(i.map((s) => `${s.source}-${s.target}`)), o = (s, n) => {
     t.push(s), n && !a.has(`${n}-${s.id}`) && i.push({
       id: `e-${n}-${s.id}`,
@@ -8932,7 +8938,7 @@ function Qa(r, e) {
   };
   return o(r), { nodes: t, edges: i };
 }
-function eo(r, e, t) {
+function ro(r, e, t) {
   const i = {}, a = (n) => !n.children || n.children.length === 0 ? 1 : n.children.reduce((c, u) => c + a(u), 0), o = (n, c, u, d) => {
     const m = u + d * t.horizontal / 2, p = c * t.vertical + 50;
     if (i[n.id] = e === "vertical" ? { x: m, y: p } : { x: p, y: m }, n.children) {
@@ -8945,7 +8951,7 @@ function eo(r, e, t) {
   }, s = a(r);
   return o(r, 0, 0, s), i;
 }
-function to(r) {
+function io(r) {
   const e = r.filter((i) => {
     var a;
     return ((a = i.metrics) == null ? void 0 : a.impurity) !== void 0;
@@ -8964,7 +8970,7 @@ function to(r) {
     }
   };
 }
-function ro(r, e, t, i) {
+function ao(r, e, t, i) {
   var a, o, s;
   if (t != null && t[r.id])
     return t[r.id];
@@ -9001,7 +9007,7 @@ function ro(r, e, t, i) {
         }[r.outcome.class.toLowerCase()] || "var(--nice-primary, #3b82f6)";
       break;
   }
-  return Ka[r.type] || "var(--nice-text-secondary, #6b7280)";
+  return eo[r.type] || "var(--nice-text-secondary, #6b7280)";
 }
 function Tt(r, e, t) {
   const i = (u) => {
@@ -9015,7 +9021,7 @@ function Tt(r, e, t) {
   }, a = i(r), o = i(e), s = Math.round(a.r + (o.r - a.r) * t), n = Math.round(a.g + (o.g - a.g) * t), c = Math.round(a.b + (o.b - a.b) * t);
   return `#${[s, n, c].map((u) => u.toString(16).padStart(2, "0")).join("")}`;
 }
-function io(r, e) {
+function oo(r, e) {
   const t = /* @__PURE__ */ new Set(), i = (a) => {
     if (t.add(a.id), a.type === "leaf" || a.type === "end" || !a.children)
       return !0;
@@ -9056,7 +9062,7 @@ function Qt(r, e, t) {
       return !1;
   }
 }
-function ao(r) {
+function no(r) {
   return r.map((e, t) => ({
     id: `path-${t}`,
     type: "highlight",
@@ -9065,7 +9071,7 @@ function ao(r) {
     delay: t * 300
   }));
 }
-function Jo(r) {
+function Ko(r) {
   const { tree: e, feature_names: t, class_names: i } = r;
   e.children_left.length;
   const a = (s) => {
@@ -9112,7 +9118,7 @@ function Jo(r) {
 function er(r, e = 0) {
   return !r.children || r.children.length === 0 ? e : Math.max(...r.children.map((t) => er(t, e + 1)));
 }
-function Zo(r) {
+function Qo(r) {
   const e = (i, a) => typeof i == "string" ? {
     id: a,
     type: "leaf",
@@ -9134,7 +9140,7 @@ function Zo(r) {
     ]
   } };
 }
-function Ko(r, e) {
+function en(r, e) {
   const t = [], i = (o) => {
     var s, n;
     if (t.push(o.id), o.type === "leaf" || o.type === "end" || !o.children)
@@ -9159,25 +9165,25 @@ function Ko(r, e) {
     path: t
   };
 }
-const Qo = {
+const tn = {
   size: 20,
   enabled: !0,
   guideThreshold: 5,
   showGuides: !0
 };
-function Rt(r, e) {
+function Ot(r, e) {
   return Math.round(r / e) * e;
 }
-function oo(r, e) {
+function so(r, e) {
   return {
-    x: Rt(r.x, e),
-    y: Rt(r.y, e)
+    x: Ot(r.x, e),
+    y: Ot(r.y, e)
   };
 }
-function en(r, e, t) {
-  return oo(r, t);
+function rn(r, e, t) {
+  return so(r, t);
 }
-function Ot(r, e, t) {
+function Rt(r, e, t) {
   return {
     id: r,
     left: e.x,
@@ -9188,12 +9194,12 @@ function Ot(r, e, t) {
     centerY: e.y + t.height / 2
   };
 }
-function tn(r, e, t, i, a = 5) {
-  const o = [], s = Ot(r, e, t);
+function an(r, e, t, i, a = 5) {
+  const o = [], s = Rt(r, e, t);
   for (const n of i) {
     if (n.id === r)
       continue;
-    const c = Ot(n.id, n.position, n.size);
+    const c = Rt(n.id, n.position, n.size);
     Math.abs(s.centerX - c.centerX) <= a && o.push({
       axis: "vertical",
       position: c.centerX,
@@ -9226,9 +9232,9 @@ function tn(r, e, t, i, a = 5) {
       type: "edge"
     });
   }
-  return no(o);
+  return co(o);
 }
-function rn(r, e, t) {
+function on(r, e, t) {
   let i = r.x, a = r.y;
   const o = [], s = t.filter((c) => c.axis === "vertical");
   if (s.length > 0) {
@@ -9252,16 +9258,16 @@ function rn(r, e, t) {
   }
   return { snappedPosition: { x: i, y: a }, activeGuides: o };
 }
-function no(r) {
+function co(r) {
   const e = /* @__PURE__ */ new Set();
   return r.filter((t) => {
     const i = `${t.axis}-${t.position}-${t.type}`;
     return e.has(i) ? !1 : (e.add(i), !0);
   });
 }
-let so = 0;
+let lo = 0;
 function _t() {
-  return `tmpl-${++so}-${Date.now().toString(36)}`;
+  return `tmpl-${++lo}-${Date.now().toString(36)}`;
 }
 function ie(r, e, t = "roundedRect", i = { width: 160, height: 60 }, a) {
   return {
@@ -9291,7 +9297,7 @@ function ne(r, e, t = "bottom", i = "top", a) {
     style: { lineType: "bezier", targetArrow: "arrow" }
   };
 }
-function Ye(r, e, t, i) {
+function Be(r, e, t, i) {
   const a = (/* @__PURE__ */ new Date()).toISOString();
   return {
     version: "1.0",
@@ -9306,9 +9312,9 @@ function Ye(r, e, t, i) {
     metadata: { createdAt: a, updatedAt: a }
   };
 }
-function co() {
+function uo() {
   const r = ie("Commit", { x: 40, y: 200 }, "circle", { width: 80, height: 80 }), e = ie("Build", { x: 200, y: 200 }, "roundedRect"), t = ie("Test", { x: 420, y: 200 }, "roundedRect"), i = ie("Deploy", { x: 640, y: 200 }, "roundedRect"), a = ie("Production", { x: 860, y: 200 }, "hexagon", { width: 140, height: 80 });
-  return Ye(
+  return Be(
     "CI/CD Pipeline",
     "flowchart",
     [r, e, t, i, a],
@@ -9320,7 +9326,7 @@ function co() {
     ]
   );
 }
-function lo() {
+function fo() {
   const r = ie("API Gateway", { x: 350, y: 40 }, "hexagon", { width: 160, height: 80 }), e = ie("Auth Service", { x: 80, y: 200 }, "roundedRect"), t = ie("User Service", { x: 300, y: 200 }, "roundedRect"), i = ie("Order Service", { x: 520, y: 200 }, "roundedRect"), a = ie("Notification", { x: 740, y: 200 }, "roundedRect"), o = ie("Users DB", { x: 180, y: 380 }, "cylinder", { width: 120, height: 70 }), s = ie("Orders DB", { x: 520, y: 380 }, "cylinder", { width: 120, height: 70 }), n = ie("Message Queue", { x: 620, y: 380 }, "parallelogram", {
     width: 160,
     height: 60
@@ -9333,11 +9339,11 @@ function lo() {
     ne(i, s, "bottom", "top"),
     ne(a, n, "bottom", "top")
   ];
-  return Ye("Microservices Architecture", "flowchart", c, u);
+  return Be("Microservices Architecture", "flowchart", c, u);
 }
-function uo() {
+function ho() {
   const r = ie("Start", { x: 350, y: 20 }, "circle", { width: 70, height: 70 }), e = ie("Landing Page", { x: 310, y: 140 }, "roundedRect"), t = ie("Sign Up", { x: 140, y: 280 }, "roundedRect"), i = ie("Log In", { x: 480, y: 280 }, "roundedRect"), a = ie("Dashboard", { x: 310, y: 420 }, "roundedRect"), o = ie("End", { x: 350, y: 560 }, "circle", { width: 70, height: 70 });
-  return Ye(
+  return Be(
     "User Flow",
     "flowchart",
     [r, e, t, i, a, o],
@@ -9351,7 +9357,7 @@ function uo() {
     ]
   );
 }
-function fo() {
+function po() {
   const r = ie("Users", { x: 80, y: 100 }, "rectangle", { width: 180, height: 100 }), e = ie("Orders", { x: 380, y: 100 }, "rectangle", { width: 180, height: 100 }), t = ie("Products", { x: 380, y: 320 }, "rectangle", {
     width: 180,
     height: 100
@@ -9359,7 +9365,7 @@ function fo() {
     width: 180,
     height: 100
   });
-  return Ye(
+  return Be(
     "Entity Relationship",
     "er",
     [r, e, t, i],
@@ -9370,9 +9376,9 @@ function fo() {
     ]
   );
 }
-function ho() {
+function mo() {
   const r = ie("CEO", { x: 350, y: 40 }, "roundedRect"), e = ie("CTO", { x: 150, y: 180 }, "roundedRect"), t = ie("CFO", { x: 550, y: 180 }, "roundedRect"), i = ie("Engineering", { x: 50, y: 320 }, "roundedRect"), a = ie("DevOps", { x: 250, y: 320 }, "roundedRect"), o = ie("Accounting", { x: 550, y: 320 }, "roundedRect");
-  return Ye(
+  return Be(
     "Organization Chart",
     "orgchart",
     [r, e, t, i, a, o],
@@ -9385,9 +9391,9 @@ function ho() {
     ]
   );
 }
-function po() {
+function go() {
   const r = ie("Idle", { x: 80, y: 200 }, "circle", { width: 90, height: 90 }), e = ie("Loading", { x: 300, y: 80 }, "roundedRect"), t = ie("Success", { x: 520, y: 80 }, "roundedRect"), i = ie("Error", { x: 520, y: 320 }, "roundedRect"), a = ie("Retry", { x: 300, y: 320 }, "diamond", { width: 100, height: 100 });
-  return Ye(
+  return Be(
     "State Machine",
     "stateMachine",
     [r, e, t, i, a],
@@ -9409,7 +9415,7 @@ const Mt = [
     category: "software",
     diagramType: "flowchart",
     tags: ["devops", "ci", "cd", "pipeline", "deployment"],
-    create: co
+    create: uo
   },
   {
     id: "microservices",
@@ -9418,7 +9424,7 @@ const Mt = [
     category: "software",
     diagramType: "flowchart",
     tags: ["architecture", "microservices", "api", "backend"],
-    create: lo
+    create: fo
   },
   {
     id: "user-flow",
@@ -9427,7 +9433,7 @@ const Mt = [
     category: "general",
     diagramType: "flowchart",
     tags: ["ux", "user-flow", "journey", "wireframe"],
-    create: uo
+    create: ho
   },
   {
     id: "er-diagram",
@@ -9436,7 +9442,7 @@ const Mt = [
     category: "software",
     diagramType: "er",
     tags: ["database", "er", "schema", "sql"],
-    create: fo
+    create: po
   },
   {
     id: "org-chart",
@@ -9445,7 +9451,7 @@ const Mt = [
     category: "business",
     diagramType: "orgchart",
     tags: ["org", "hierarchy", "team", "management"],
-    create: ho
+    create: mo
   },
   {
     id: "state-machine",
@@ -9454,22 +9460,22 @@ const Mt = [
     category: "software",
     diagramType: "stateMachine",
     tags: ["state", "fsm", "transitions", "machine"],
-    create: po
+    create: go
   }
 ];
-function an(r) {
+function nn(r) {
   return Mt.find((e) => e.id === r);
 }
-function on(r) {
+function sn(r) {
   return Mt.filter((e) => e.category === r);
 }
-function nn(r) {
+function cn(r) {
   const e = r.toLowerCase();
   return Mt.filter(
     (t) => t.name.toLowerCase().includes(e) || t.description.toLowerCase().includes(e) || t.tags.some((i) => i.includes(e))
   );
 }
-class mo {
+class yo {
   constructor(e = {}) {
     this.versions = [], this.currentVersionIndex = -1, this.autoSaveTimer = null, this.lastDocument = null, this.listeners = /* @__PURE__ */ new Set(), this.config = {
       maxVersions: e.maxVersions ?? 100,
@@ -9497,7 +9503,7 @@ class mo {
   /** Save a new version. */
   saveVersion(e, t) {
     const i = this.lastDocument ? this.calculateChanges(this.lastDocument, e) : [{ type: "node-added", description: "Initial version" }], a = {
-      id: go(),
+      id: bo(),
       number: this.versions.length + 1,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       userId: this.config.userId,
@@ -9705,11 +9711,11 @@ class mo {
     this.versions = [], this.currentVersionIndex = -1, this.lastDocument = null, this.notify();
   }
 }
-function go() {
+function bo() {
   return `v_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
-function sn(r) {
-  const e = new mo(r);
+function ln(r) {
+  const e = new yo(r);
   return {
     manager: e,
     saveVersion: e.saveVersion.bind(e),
@@ -9718,14 +9724,14 @@ function sn(r) {
     diff: e.diff.bind(e)
   };
 }
-class cn {
+class dn {
   constructor(e) {
     this.comments = /* @__PURE__ */ new Map(), this.listeners = /* @__PURE__ */ new Set(), this.mentionListeners = /* @__PURE__ */ new Set(), this.config = e;
   }
   /** Add a new comment. */
   addComment(e, t, i) {
     const a = this.parseMentions(t), o = {
-      id: yo(),
+      id: vo(),
       anchor: e,
       status: "open",
       authorId: this.config.userId,
@@ -9767,7 +9773,7 @@ class cn {
     if (!i)
       return null;
     const a = this.parseMentions(t), o = {
-      id: bo(),
+      id: wo(),
       authorId: this.config.userId,
       authorName: this.config.userName,
       authorAvatar: this.config.userAvatar,
@@ -9885,13 +9891,13 @@ class cn {
     Object.assign(this.config, e);
   }
 }
-function yo() {
+function vo() {
   return `comment_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
-function bo() {
+function wo() {
   return `reply_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 }
-const ln = {
+const un = {
   low: {
     backgroundColor: "var(--nice-primary-bg, #e3f2fd)",
     borderColor: "var(--nice-primary, #2196f3)",
@@ -9917,11 +9923,11 @@ const ln = {
     icon: "flame"
   }
 };
-function dn(r) {
+function fn(r) {
   const e = new Date(r), i = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), a = Math.floor(i / (1e3 * 60)), o = Math.floor(a / 60), s = Math.floor(o / 24);
   return a < 1 ? "just now" : a < 60 ? `${a}m ago` : o < 24 ? `${o}h ago` : s < 7 ? `${s}d ago` : e.toLocaleDateString();
 }
-function un(r, e) {
+function hn(r, e) {
   if (e.length === 0)
     return r;
   const t = [...e].sort((a, o) => o.startIndex - a.startIndex);
@@ -9932,7 +9938,7 @@ function un(r, e) {
   }
   return i;
 }
-class vo {
+class xo {
   constructor() {
     this.profiles = /* @__PURE__ */ new Map(), this.activeProfileId = null, this.listeners = /* @__PURE__ */ new Set(), this.cache = /* @__PURE__ */ new Map(), this.profiles.set("default", {
       id: "default",
@@ -10279,21 +10285,21 @@ const tr = [
     actions: [{ type: "set_opacity", value: 0.5 }]
   }
 ];
-function fn(r) {
+function pn(r) {
   const e = tr.find((t) => t.id === r);
   return e ? {
     ...e,
     id: `${e.id}_${Date.now()}`
   } : null;
 }
-function hn(r = !1) {
-  const e = new vo();
+function mn(r = !1) {
+  const e = new xo();
   if (r)
     for (const t of tr)
       e.addRule(t);
   return e;
 }
-class pn {
+class gn {
   constructor() {
     this.nodes = [], this.edges = [], this.groups = [], this.presets = /* @__PURE__ */ new Map(), this.state = {
       query: "",
@@ -10691,7 +10697,7 @@ class pn {
     JSON.parse(e).forEach((i) => this.presets.set(i.id, i));
   }
 }
-function mn(r, e, t = "search-highlight") {
+function yn(r, e, t = "search-highlight") {
   if (e.length === 0)
     return r;
   const i = [...e].sort((o, s) => s.start - o.start);
@@ -10702,7 +10708,7 @@ function mn(r, e, t = "search-highlight") {
   }
   return a;
 }
-function gn(r, e) {
+function bn(r, e) {
   switch (r) {
     case "by-type":
       return {
@@ -10738,89 +10744,89 @@ function gn(r, e) {
 export {
   Li as AnimationPlayer,
   Vt as AnimationTimeline,
-  ln as COMMENT_PRIORITY_STYLES,
-  vo as ConditionalStylingEngine,
-  Qo as DEFAULT_GRID_CONFIG,
+  un as COMMENT_PRIORITY_STYLES,
+  xo as ConditionalStylingEngine,
+  tn as DEFAULT_GRID_CONFIG,
   xt as DIAGRAM_STYLE_PRESETS,
   Mt as DIAGRAM_TEMPLATES,
   Te as DiagramCanvas,
-  $o as DiagramCellRenderer,
-  cn as DiagramCommentManager,
-  Bt as DiagramMinimap,
+  Po as DiagramCellRenderer,
+  dn as DiagramCommentManager,
+  Yt as DiagramMinimap,
   bt as DiagramModel,
   ur as DiagramParticleEngine,
-  Yt as DiagramPropertyPanel,
-  pn as DiagramSearchFilterEngine,
+  Bt as DiagramPropertyPanel,
+  gn as DiagramSearchFilterEngine,
   Xt as DiagramToolbar,
-  mo as DiagramVersioningManager,
-  So as EDGE_STYLE_CATALOG,
-  Co as NODE_STYLE_CATALOG,
+  yo as DiagramVersioningManager,
+  No as EDGE_STYLE_CATALOG,
+  zo as NODE_STYLE_CATALOG,
   Vt as NiceAnimationTimeline,
-  Oo as NiceDatabaseSchemaViewer,
-  jo as NiceDecisionTreeEditor,
-  Vo as NiceDependencyGraph,
-  qi as NiceDiagram,
+  Lo as NiceDatabaseSchemaViewer,
+  Zo as NiceDecisionTreeEditor,
+  Bo as NiceDependencyGraph,
+  Ji as NiceDiagram,
   Te as NiceDiagramCanvas,
-  Oi as NiceDiagramEditor,
-  Bt as NiceDiagramMinimap,
-  Yt as NiceDiagramPropertyPanel,
+  Ri as NiceDiagramEditor,
+  Yt as NiceDiagramMinimap,
+  Bt as NiceDiagramPropertyPanel,
   Xt as NiceDiagramToolbar,
-  qi as NiceDiagramViewer,
+  Ji as NiceDiagramViewer,
   qt as NiceI18nProvider,
-  Xo as NiceNetworkTopology,
-  Wo as NiceOrgChartVisualizer,
-  Go as NiceProcessMiningDiagram,
-  Po as NiceWorkflowVisualizer,
+  Ho as NiceNetworkTopology,
+  qo as NiceOrgChartVisualizer,
+  Yo as NiceProcessMiningDiagram,
+  Oo as NiceWorkflowVisualizer,
   tr as PRESET_RULES,
   wi as TRANSITION_PRESETS,
-  Yo as analyzeDependencyGraph,
-  rn as applyAlignmentSnap,
-  Ho as calculateNetworkHealth,
-  qo as calculateOrgStats,
-  tn as computeAlignmentGuides,
+  Uo as analyzeDependencyGraph,
+  on as applyAlignmentSnap,
+  Jo as calculateNetworkHealth,
+  Vo as calculateOrgStats,
+  an as computeAlignmentGuides,
   hr as computeGlowRadius,
   yr as computeLayout,
-  ya as convertAnimation,
-  ma as convertEdge,
-  ga as convertGroup,
-  pa as convertNode,
-  hn as createConditionalStylingEngine,
-  Zo as createDecisionTree,
-  Fe as createDiagramDocument,
+  Hi as convertAnimation,
+  Xi as convertEdge,
+  Ui as convertGroup,
+  Bi as convertNode,
+  mn as createConditionalStylingEngine,
+  Qo as createDecisionTree,
+  Ee as createDiagramDocument,
   fr as createGlowFilterId,
-  Ro as createLinearWorkflow,
-  Fo as createOrgChartFromEmployees,
-  Ao as createPresetFromTheme,
-  gn as createQuickFilter,
-  fn as createRuleFromPreset,
-  sn as createVersioningHook,
-  Uo as discoverNetworkTopology,
+  Eo as createLinearWorkflow,
+  Go as createOrgChartFromEmployees,
+  Do as createPresetFromTheme,
+  bn as createQuickFilter,
+  pn as createRuleFromPreset,
+  ln as createVersioningHook,
+  jo as discoverNetworkTopology,
   pr as exportToMermaid,
   St as exportToSvg,
-  Do as fetchAndGenerateDiagram,
-  dn as formatCommentDate,
-  la as generateDiagramFromData,
-  zo as getDiagramStylePreset,
-  No as getDiagramStylePresetsByCategory,
+  To as fetchAndGenerateDiagram,
+  fn as formatCommentDate,
+  ba as generateDiagramFromData,
+  Io as getDiagramStylePreset,
+  Ao as getDiagramStylePresetsByCategory,
   Ei as getEasing,
-  _o as getPointOnPath,
-  an as getTemplateById,
-  on as getTemplatesByCategory,
-  mn as highlightMatches,
-  Oa as mineProcessFromLog,
-  To as parseBPMNToWorkflow,
-  Mo as parseNddJson,
-  Bo as parsePackageJsonToDependencies,
-  Eo as parseSQLToSchema,
-  Jo as parseSklearnTree,
-  Ko as predictWithTree,
-  Io as presetToThemeOverrides,
-  un as renderTextWithMentions,
-  Lo as schemaToSQL,
-  nn as searchTemplates,
-  en as snapNodePosition,
-  oo as snapPointToGrid,
-  Rt as snapToGrid,
+  Co as getPointOnPath,
+  nn as getTemplateById,
+  sn as getTemplatesByCategory,
+  yn as highlightMatches,
+  La as mineProcessFromLog,
+  Ro as parseBPMNToWorkflow,
+  So as parseNddJson,
+  Xo as parsePackageJsonToDependencies,
+  Wo as parseSQLToSchema,
+  Ko as parseSklearnTree,
+  en as predictWithTree,
+  $o as presetToThemeOverrides,
+  hn as renderTextWithMentions,
+  Fo as schemaToSQL,
+  cn as searchTemplates,
+  rn as snapNodePosition,
+  so as snapPointToGrid,
+  Ot as snapToGrid,
   mr as stringifyNddJson,
   kr as useDiagramEditor,
   ct as useNiceTranslation