@ovalbee/flow-viewer 0.0.2 → 0.0.3

package/dist/flow-viewer.js

@@ -1,12 +1,12 @@
-import { defineComponent as E, inject as oe, createElementBlock as s, openBlock as n, unref as w, normalizeClass as X, createElementVNode as k, createCommentVNode as x, createBlock as A, normalizeStyle as S, toDisplayString as _, Fragment as C, computed as q, markRaw as G, ref as ne, onBeforeUnmount as ie, provide as ce, createVNode as se, withCtx as de, Teleport as le, renderList as B, h as U, resolveDynamicComponent as re } from "vue";
-import { Handle as I, Position as T, ConnectionLineType as he, VueFlow as ye } from "@vue-flow/core";
-import { Controls as pe } from "@vue-flow/controls";
-import { MiniMap as ke } from "@vue-flow/minimap";
-const Q = Symbol("flow-viewer-details"), ue = ["aria-label"], me = { class: "ob-flow-viewer-node__header" }, ve = ["innerHTML"], we = { key: 1 }, ge = { class: "ob-flow-viewer-node__title-wrap" }, fe = { class: "ob-flow-viewer-node__title" }, Me = { class: "ob-flow-viewer-node__key" }, xe = { class: "ob-flow-viewer-node__description ob-flow-viewer-node__description--clamped" }, be = {
+import { defineComponent as E, inject as ne, createElementBlock as l, openBlock as i, unref as M, normalizeClass as X, createElementVNode as m, createCommentVNode as z, createBlock as A, normalizeStyle as B, toDisplayString as H, Fragment as q, computed as C, markRaw as G, ref as ie, onBeforeUnmount as se, provide as ce, createVNode as de, withCtx as le, Teleport as re, renderList as S, h as U, resolveDynamicComponent as he } from "vue";
+import { Handle as I, Position as T, ConnectionLineType as ye, VueFlow as pe } from "@vue-flow/core";
+import { Controls as ke } from "@vue-flow/controls";
+import { MiniMap as ue } from "@vue-flow/minimap";
+const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-flow-viewer-node__header" }, we = ["innerHTML"], ge = { key: 1 }, fe = { class: "ob-flow-viewer-node__title-wrap" }, Me = { class: "ob-flow-viewer-node__title" }, xe = { class: "ob-flow-viewer-node__key" }, be = { class: "ob-flow-viewer-node__description ob-flow-viewer-node__description--clamped" }, ze = {
   key: 1,
   class: "ob-flow-viewer-node__widget-image",
   "aria-hidden": "true"
-}, ze = /* @__PURE__ */ E({
+}, _e = /* @__PURE__ */ E({
   __name: "FlowViewerNode",
   props: {
     id: {},
@@ -30,103 +30,103 @@ const Q = Symbol("flow-viewer-details"), ue = ["aria-label"], me = { class: "ob-
     events: {}
   },
   setup(t) {
-    const i = t, u = oe(Q), f = i.data.available ? i.data.description : "This node template is unavailable.";
-    return (d, l) => {
-      var p, M;
-      return n(), s("article", {
+    const n = t, v = ne(Q), x = n.data.available ? n.data.description : "This node template is unavailable.";
+    return (r, y) => {
+      var k, b;
+      return i(), l("article", {
         class: X(["ob-flow-viewer-node", { "ob-flow-viewer-node--unavailable": !t.data.available }]),
         tabindex: "0",
         "aria-label": `${t.data.name} node`,
-        onMouseenter: l[0] || (l[0] = (a) => {
+        onMouseenter: y[0] || (y[0] = (o) => {
           var c;
-          return (c = w(u)) == null ? void 0 : c.show(t.data, a);
+          return (c = M(v)) == null ? void 0 : c.show(t.data, o);
         }),
-        onMouseleave: l[1] || (l[1] = (a) => {
+        onMouseleave: y[1] || (y[1] = (o) => {
           var c;
-          return (c = w(u)) == null ? void 0 : c.hide();
+          return (c = M(v)) == null ? void 0 : c.hide();
         }),
-        onClick: l[2] || (l[2] = (a) => {
+        onClick: y[2] || (y[2] = (o) => {
           var c;
-          return (c = w(u)) == null ? void 0 : c.show(t.data, a);
+          return (c = M(v)) == null ? void 0 : c.show(t.data, o);
         }),
-        onFocus: l[3] || (l[3] = (a) => {
+        onFocus: y[3] || (y[3] = (o) => {
           var c;
-          return (c = w(u)) == null ? void 0 : c.show(t.data, a);
+          return (c = M(v)) == null ? void 0 : c.show(t.data, o);
         }),
-        onBlur: l[4] || (l[4] = (a) => {
+        onBlur: y[4] || (y[4] = (o) => {
           var c;
-          return (c = w(u)) == null ? void 0 : c.hide();
+          return (c = M(v)) == null ? void 0 : c.hide();
         })
       }, [
-        k("header", me, [
-          k("span", {
+        m("header", ve, [
+          m("span", {
             class: "ob-flow-viewer-node__icon",
-            style: S({ "--ob-node-icon-color": ((p = t.data.icon) == null ? void 0 : p.color) ?? "#64748b" }),
+            style: B({ "--ob-node-icon-color": ((k = t.data.icon) == null ? void 0 : k.color) ?? "#64748b" }),
             "aria-hidden": "true"
           }, [
-            (M = t.data.icon) != null && M.svg ? (n(), s("span", {
+            (b = t.data.icon) != null && b.svg ? (i(), l("span", {
               key: 0,
               class: "ob-flow-viewer-node__icon-svg",
               innerHTML: t.data.icon.svg
-            }, null, 8, ve)) : (n(), s("span", we, _(t.data.available ? t.data.name.slice(0, 1).toUpperCase() : "?"), 1))
+            }, null, 8, we)) : (i(), l("span", ge, H(t.data.available ? t.data.name.slice(0, 1).toUpperCase() : "?"), 1))
           ], 4),
-          k("span", ge, [
-            k("strong", fe, _(t.data.name), 1),
-            k("span", Me, _(t.data.key), 1)
+          m("span", fe, [
+            m("strong", Me, H(t.data.name), 1),
+            m("span", xe, H(t.data.key), 1)
           ])
         ]),
-        k("p", xe, _(w(f)), 1),
-        t.data.widgetPreview && t.data.available ? (n(), s("div", {
+        m("p", be, H(M(x)), 1),
+        t.data.widgetPreview && t.data.available ? (i(), l("div", {
           key: 0,
           class: X(["ob-flow-viewer-node__widget", `ob-flow-viewer-node__widget--${t.data.widgetPreview}`]),
           "aria-label": "Widget preview"
         }, [
-          t.data.widgetPreview === "button" ? (n(), s(C, { key: 0 }, [
-            l[5] || (l[5] = k("span", { class: "ob-flow-viewer-node__widget-icon" }, "↗", -1)),
-            l[6] || (l[6] = k("span", { class: "ob-flow-viewer-node__widget-label" }, null, -1))
-          ], 64)) : t.data.widgetPreview === "dataset" ? (n(), s("span", be)) : (n(), s(C, { key: 2 }, [
-            l[7] || (l[7] = k("span", null, null, -1)),
-            l[8] || (l[8] = k("span", null, null, -1))
+          t.data.widgetPreview === "button" ? (i(), l(q, { key: 0 }, [
+            y[5] || (y[5] = m("span", { class: "ob-flow-viewer-node__widget-icon" }, "↗", -1)),
+            y[6] || (y[6] = m("span", { class: "ob-flow-viewer-node__widget-label" }, null, -1))
+          ], 64)) : t.data.widgetPreview === "dataset" ? (i(), l("span", ze)) : (i(), l(q, { key: 2 }, [
+            y[7] || (y[7] = m("span", null, null, -1)),
+            y[8] || (y[8] = m("span", null, null, -1))
           ], 64))
-        ], 2)) : x("", !0),
-        t.data.connectedHandles.has("target") ? (n(), A(w(I), {
+        ], 2)) : z("", !0),
+        t.data.connectedHandles.has("target") ? (i(), A(M(I), {
           key: 1,
           type: "target",
-          position: w(T).Top
-        }, null, 8, ["position"])) : x("", !0),
-        t.data.connectedHandles.has("left") ? (n(), A(w(I), {
+          position: M(T).Top
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("left") ? (i(), A(M(I), {
           key: 2,
           id: "left",
           type: "target",
-          position: w(T).Left
-        }, null, 8, ["position"])) : x("", !0),
-        t.data.connectedHandles.has("right") ? (n(), A(w(I), {
+          position: M(T).Left
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("right") ? (i(), A(M(I), {
           key: 3,
           id: "right",
           type: "target",
-          position: w(T).Right
-        }, null, 8, ["position"])) : x("", !0),
-        t.data.connectedHandles.has("source") ? (n(), A(w(I), {
+          position: M(T).Right
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("source") ? (i(), A(M(I), {
           key: 4,
           type: "source",
-          position: w(T).Bottom
-        }, null, 8, ["position"])) : x("", !0),
-        t.data.connectedHandles.has("left-source") ? (n(), A(w(I), {
+          position: M(T).Bottom
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("left-source") ? (i(), A(M(I), {
           key: 5,
           id: "left-source",
           type: "source",
-          position: w(T).Left
-        }, null, 8, ["position"])) : x("", !0),
-        t.data.connectedHandles.has("right-source") ? (n(), A(w(I), {
+          position: M(T).Left
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("right-source") ? (i(), A(M(I), {
           key: 6,
           id: "right-source",
           type: "source",
-          position: w(T).Right
-        }, null, 8, ["position"])) : x("", !0)
-      ], 42, ue);
+          position: M(T).Right
+        }, null, 8, ["position"])) : z("", !0)
+      ], 42, me);
     };
   }
-}), _e = /* @__PURE__ */ E({
+}), He = /* @__PURE__ */ E({
   __name: "FlowViewerNote",
   props: {
     id: {},
@@ -150,180 +150,187 @@ const Q = Symbol("flow-viewer-details"), ue = ["aria-label"], me = { class: "ob-
     events: {}
   },
   setup(t) {
-    const i = t, u = q(() => ({
-      width: `${i.data.appearance.width}px`,
-      minHeight: i.data.appearance.height ? `${i.data.appearance.height}px` : void 0
+    const n = t, v = C(() => ({
+      width: `${n.data.appearance.width}px`,
+      minHeight: n.data.appearance.height ? `${n.data.appearance.height}px` : void 0
     }));
-    return (f, d) => (n(), s("article", {
+    return (x, r) => (i(), l("article", {
       class: X(["ob-flow-viewer-note", `ob-flow-viewer-note--${t.data.appearance.color}`]),
-      style: S(u.value)
-    }, _(t.data.content), 7));
+      style: B(v.value)
+    }, H(t.data.content), 7));
   }
-}), He = ["data-theme"], Ve = ["data-theme"], Ae = { class: "ob-flow-viewer-tooltip__header" }, Ce = ["innerHTML"], qe = { key: 1 }, $e = { class: "ob-flow-viewer-tooltip__title-wrap" }, Le = { class: "ob-flow-viewer-tooltip__body" }, Pe = {
+}), Ve = ["data-theme"], Ae = ["data-theme"], Ce = { class: "ob-flow-viewer-tooltip__header" }, qe = ["innerHTML"], $e = { key: 1 }, Le = { class: "ob-flow-viewer-tooltip__title-wrap" }, Pe = { class: "ob-flow-viewer-tooltip__body" }, Ie = {
   key: 0,
   class: "ob-flow-viewer-tooltip__unavailable"
-}, Ie = {
+}, Te = {
   key: 1,
   class: "ob-flow-viewer-tooltip__description"
-}, Te = {
+}, je = {
   key: 2,
   class: "ob-flow-viewer-node__ports"
-}, je = { class: "ob-flow-viewer-node__port-group" }, Be = {
+}, Se = { class: "ob-flow-viewer-node__port-group" }, Be = {
   key: 0,
   class: "ob-flow-viewer-node__empty"
-}, Se = { key: 0 }, Ne = { class: "ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs" }, Fe = {
+}, Ne = { key: 0 }, Fe = { class: "ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs" }, De = {
   key: 0,
   class: "ob-flow-viewer-node__empty"
-}, De = { key: 0 }, Y = 72, W = 64, Oe = 1.45, C1 = /* @__PURE__ */ E({
+}, Oe = { key: 0 }, Y = 72, W = 64, Ee = 1.45, qa = /* @__PURE__ */ E({
   __name: "FlowViewer",
   props: {
     document: {},
     fitViewOnInit: { type: Boolean, default: !1 },
     showControls: { type: Boolean, default: !0 },
     showMiniMap: { type: Boolean, default: !0 },
+    panOnScroll: { type: Boolean, default: !1 },
     minZoom: { default: 0.1 },
     maxZoom: { default: 2 },
     initialZoom: { default: 0.8 },
     theme: { default: "light" }
   },
   setup(t) {
-    const i = t, u = {
-      catalog: G(ze),
-      note: G(_e)
+    const n = t, v = {
+      catalog: G(_e),
+      note: G(He)
     };
-    function f(o) {
-      if (o.kind === "note") return o.appearance.height ?? 130;
-      const r = o.description ? Math.min(2, Math.max(1, Math.ceil(o.description.length / 34))) : o.available ? 0 : 1, v = r > 0 ? 10 + r * 19.5 : 0, z = o.available && o.widgetPreview ? 10 + (o.widgetPreview === "dataset" ? 72 : 32) : 0;
-      return 60 + v + z;
+    function x(a) {
+      if (a.kind === "note") return a.appearance.height ?? 130;
+      const h = a.description ? Math.min(2, Math.max(1, Math.ceil(a.description.length / 34))) : a.available ? 0 : 1, p = h > 0 ? 10 + h * 19.5 : 0, u = a.available && a.widgetPreview ? 10 + (a.widgetPreview === "dataset" ? 72 : 32) : 0;
+      return 60 + p + u;
     }
-    const d = ne(null);
-    let l = null;
-    function p() {
-      l !== null && (clearTimeout(l), l = null);
+    const r = ie(null);
+    let y = null;
+    function k() {
+      y !== null && (clearTimeout(y), y = null);
     }
-    function M() {
-      p(), l = setTimeout(() => {
-        d.value = null, l = null;
+    function b() {
+      k(), y = setTimeout(() => {
+        r.value = null, y = null;
       }, 140);
     }
-    ie(p);
-    function a(o) {
-      const r = /* @__PURE__ */ new Set();
-      for (const v of i.document.edges)
-        v.source === o && r.add(v.sourceHandle ?? "source"), v.target === o && r.add(v.targetHandle ?? "target");
-      return r;
+    se(k);
+    function o(a) {
+      const h = /* @__PURE__ */ new Set();
+      for (const p of n.document.edges)
+        p.source === a && h.add(p.sourceHandle ?? "source"), p.target === a && h.add(p.targetHandle ?? "target");
+      return h;
     }
-    function c(o, r) {
-      p();
-      const v = r.currentTarget;
-      if (!(v instanceof HTMLElement)) return;
-      const z = v.getBoundingClientRect(), h = 12, y = Math.min(404, window.innerWidth - h * 2), b = Math.min(520, window.innerHeight - h * 2);
-      let g = z.right + h + y / 2;
-      g + y / 2 > window.innerWidth - h && (g = z.left - h - y / 2), g = Math.max(y / 2 + h, Math.min(g, window.innerWidth - y / 2 - h)), d.value = {
-        node: o,
+    function c(a, h) {
+      k();
+      const p = h.currentTarget;
+      if (!(p instanceof HTMLElement)) return;
+      const u = p.getBoundingClientRect(), s = 12, d = Math.min(404, window.innerWidth - s * 2), f = Math.min(520, window.innerHeight - s * 2);
+      let g = u.right + s + d / 2;
+      g + d / 2 > window.innerWidth - s && (g = u.left - s - d / 2), g = Math.max(d / 2 + s, Math.min(g, window.innerWidth - d / 2 - s)), r.value = {
+        node: a,
         x: g,
-        y: Math.max(h, Math.min(z.top, window.innerHeight - b - h))
+        y: Math.max(s, Math.min(u.top, window.innerHeight - f - s))
       };
     }
-    function m() {
-      M();
+    function w() {
+      b();
     }
-    ce(Q, { show: c, hide: m });
-    const H = q(() => {
-      const o = new Map(i.document.nodes.map((y) => [y.id, { ...y.position }])), r = Math.min(...i.document.nodes.map((y) => y.position.x)), v = Math.max(...i.document.nodes.map((y) => y.position.x)), z = (r + v) / 2;
-      for (const y of o.values())
-        y.x = z + (y.x - z) * Oe;
-      for (let y = 0; y < i.document.nodes.length; y += 1)
-        for (const b of i.document.edges) {
-          if (b.sourceHandle || b.targetHandle) continue;
-          const g = o.get(b.source), V = o.get(b.target);
+    ce(Q, { show: c, hide: w });
+    const _ = C(() => {
+      const a = new Map(n.document.nodes.map((d) => [d.id, { ...d.position }])), h = Math.min(...n.document.nodes.map((d) => d.position.x)), p = Math.max(...n.document.nodes.map((d) => d.position.x)), u = (h + p) / 2;
+      for (const d of a.values())
+        d.x = u + (d.x - u) * Ee;
+      for (let d = 0; d < n.document.nodes.length; d += 1)
+        for (const f of n.document.edges) {
+          if (f.sourceHandle || f.targetHandle) continue;
+          const g = a.get(f.source), V = a.get(f.target);
           if (!(!g || !V || Math.abs(g.x - V.x) >= 40) && (V.x = g.x, V.y > g.y)) {
-            const P = i.document.nodes.find((Z) => Z.id === b.source);
+            const P = n.document.nodes.find((Z) => Z.id === f.source);
             P && (V.y = Math.max(
               V.y,
-              g.y + f(P) + Y
+              g.y + x(P) + Y
             ));
           }
         }
-      const h = [...i.document.nodes].sort(
-        (y, b) => y.position.y - b.position.y || y.position.x - b.position.x
+      const s = [...n.document.nodes].sort(
+        (d, f) => d.position.y - f.position.y || d.position.x - f.position.x
       );
-      for (const [y, b] of h.entries()) {
-        const g = o.get(b.id);
+      for (const [d, f] of s.entries()) {
+        const g = a.get(f.id);
         if (g)
-          for (const V of h.slice(0, y)) {
-            const P = o.get(V.id);
+          for (const V of s.slice(0, d)) {
+            const P = a.get(V.id);
             if (!P) continue;
-            const Z = b.kind === "note" ? b.appearance.width : 260, ae = V.kind === "note" ? V.appearance.width : 260;
-            g.x >= P.x + ae + W || P.x >= g.x + Z + W || (g.y = Math.max(
+            const Z = f.kind === "note" ? f.appearance.width : 260, oe = V.kind === "note" ? V.appearance.width : 260;
+            g.x >= P.x + oe + W || P.x >= g.x + Z + W || (g.y = Math.max(
               g.y,
-              P.y + f(V) + Y
+              P.y + x(V) + Y
             ));
           }
       }
-      return o;
-    }), $ = q(() => i.document.nodes.map((o) => {
-      const r = H.value.get(o.id) ?? o.position;
-      return o.kind === "note" ? {
-        id: o.id,
+      return a;
+    }), $ = C(() => n.document.nodes.map((a) => {
+      const h = _.value.get(a.id) ?? a.position;
+      return a.kind === "note" ? {
+        id: a.id,
         type: "note",
-        position: r,
-        data: o,
+        position: h,
+        data: a,
         style: {
-          width: `${o.appearance.width}px`,
-          height: o.appearance.height ? `${o.appearance.height}px` : void 0
+          width: `${a.appearance.width}px`,
+          height: a.appearance.height ? `${a.appearance.height}px` : void 0
         }
       } : {
-        id: o.id,
+        id: a.id,
         type: "catalog",
-        position: r,
+        position: h,
         data: {
-          ...o,
-          connectedHandles: a(o.id)
+          ...a,
+          connectedHandles: o(a.id)
         },
         selectable: !1
       };
-    })), L = q(() => i.document.edges.map((o, r) => ({
-      id: `viewer-edge-${r}-${o.source}-${o.target}`,
-      source: o.source,
-      target: o.target,
-      sourceHandle: o.sourceHandle,
-      targetHandle: o.targetHandle,
-      type: he.SmoothStep,
-      data: o.data,
-      style: o.isVisual ? { strokeDasharray: "6 4" } : void 0,
+    })), L = C(() => n.document.edges.map((a, h) => ({
+      id: `viewer-edge-${h}-${a.source}-${a.target}`,
+      source: a.source,
+      target: a.target,
+      sourceHandle: a.sourceHandle,
+      targetHandle: a.targetHandle,
+      type: ye.SmoothStep,
+      data: a.data,
+      style: a.isVisual ? { strokeDasharray: "6 4" } : void 0,
       selectable: !1
-    }))), ee = q(() => {
-      if (i.document.nodes.length === 0) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
-      let o = 1 / 0, r = 1 / 0, v = -1 / 0, z = -1 / 0;
-      for (const h of i.document.nodes) {
-        const y = H.value.get(h.id) ?? h.position, b = h.kind === "note" ? h.appearance.width : 260, g = f(h);
-        o = Math.min(o, y.x), r = Math.min(r, y.y), v = Math.max(v, y.x + b), z = Math.max(z, y.y + g);
+    }))), ee = C(() => {
+      if (n.document.nodes.length === 0) return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+      let a = 1 / 0, h = 1 / 0, p = -1 / 0, u = -1 / 0;
+      for (const s of n.document.nodes) {
+        const d = _.value.get(s.id) ?? s.position, f = s.kind === "note" ? s.appearance.width : 260, g = x(s);
+        a = Math.min(a, d.x), h = Math.min(h, d.y), p = Math.max(p, d.x + f), u = Math.max(u, d.y + g);
       }
-      return { minX: o, minY: r, maxX: v, maxY: z };
+      return { minX: a, minY: h, maxX: p, maxY: u };
+    }), te = C(() => {
+      const a = n.document.nodes.filter((s) => s.kind === "node"), h = new Set(n.document.edges.map((s) => s.target)), p = a.filter((s) => !h.has(s.id));
+      return [...p.length > 0 ? p : a.length > 0 ? a : n.document.nodes].sort((s, d) => {
+        const f = _.value.get(s.id) ?? s.position, g = _.value.get(d.id) ?? d.position;
+        return f.y - g.y || f.x - g.x;
+      })[0];
     });
-    function te(o) {
-      if (i.fitViewOnInit) {
-        o.fitView({ padding: 0.15, maxZoom: 1 });
+    function ae(a) {
+      if (n.fitViewOnInit) {
+        a.fitView({ padding: 0.15, maxZoom: 1 });
         return;
       }
-      const r = ee.value, v = i.initialZoom;
-      o.setViewport({
-        x: o.dimensions.value.width / 2 - (r.minX + r.maxX) / 2 * v,
-        y: 24 - r.minY * v,
-        zoom: v
+      const h = ee.value, p = n.initialZoom, u = te.value, s = u ? _.value.get(u.id) ?? u.position : null, d = (u == null ? void 0 : u.kind) === "note" ? u.appearance.width : 260, f = s ? (s.x + d / 2) * p : (h.minX + h.maxX) / 2 * p;
+      a.setViewport({
+        x: a.dimensions.value.width / 2 - f,
+        y: 24 - h.minY * p,
+        zoom: p
       });
     }
-    return (o, r) => {
-      var v, z;
-      return n(), s("div", {
+    return (a, h) => {
+      var p, u;
+      return i(), l("div", {
         class: "ob-flow-viewer",
         "data-theme": t.theme
       }, [
-        se(w(ye), {
+        de(M(pe), {
           nodes: $.value,
           edges: L.value,
-          "node-types": u,
+          "node-types": v,
           "fit-view-on-init": !1,
           "min-zoom": t.minZoom,
           "max-zoom": t.maxZoom,
@@ -336,85 +343,85 @@ const Q = Symbol("flow-viewer-details"), ue = ["aria-label"], me = { class: "ob-
           "delete-key-code": [],
           "multi-selection-key-code": [],
           "pan-on-drag": !0,
-          "pan-on-scroll": !0,
+          "pan-on-scroll": t.panOnScroll,
           "zoom-on-scroll": !1,
           "zoom-on-pinch": !0,
           class: "ob-flow-viewer__canvas",
-          onPaneReady: te
+          onPaneReady: ae
         }, {
-          default: de(() => [
-            t.showControls ? (n(), A(w(pe), {
+          default: le(() => [
+            t.showControls ? (i(), A(M(ke), {
               key: 0,
               "show-interactive": !1
-            })) : x("", !0),
-            t.showMiniMap ? (n(), A(w(ke), {
+            })) : z("", !0),
+            t.showMiniMap ? (i(), A(M(ue), {
               key: 1,
               pannable: !0,
               zoomable: !0
-            })) : x("", !0)
+            })) : z("", !0)
           ]),
           _: 1
-        }, 8, ["nodes", "edges", "min-zoom", "max-zoom"]),
-        (n(), A(le, { to: "body" }, [
-          d.value ? (n(), s("section", {
+        }, 8, ["nodes", "edges", "min-zoom", "max-zoom", "pan-on-scroll"]),
+        (i(), A(re, { to: "body" }, [
+          r.value ? (i(), l("section", {
             key: 0,
             class: "ob-flow-viewer-tooltip",
             "data-theme": t.theme,
-            style: S({ left: `${d.value.x}px`, top: `${d.value.y}px` }),
+            style: B({ left: `${r.value.x}px`, top: `${r.value.y}px` }),
             role: "tooltip",
             tabindex: "0",
-            onMouseenter: p,
-            onMouseleave: m,
-            onFocusin: p,
-            onFocusout: m
+            onMouseenter: k,
+            onMouseleave: w,
+            onFocusin: k,
+            onFocusout: w
           }, [
-            k("header", Ae, [
-              k("span", {
+            m("header", Ce, [
+              m("span", {
                 class: "ob-flow-viewer-tooltip__icon",
-                style: S({ "--ob-node-icon-color": ((v = d.value.node.icon) == null ? void 0 : v.color) ?? "#64748b" }),
+                style: B({ "--ob-node-icon-color": ((p = r.value.node.icon) == null ? void 0 : p.color) ?? "#64748b" }),
                 "aria-hidden": "true"
               }, [
-                (z = d.value.node.icon) != null && z.svg ? (n(), s("span", {
+                (u = r.value.node.icon) != null && u.svg ? (i(), l("span", {
                   key: 0,
                   class: "ob-flow-viewer-node__icon-svg",
-                  innerHTML: d.value.node.icon.svg
-                }, null, 8, Ce)) : (n(), s("span", qe, _(d.value.node.available ? d.value.node.name.slice(0, 1).toUpperCase() : "?"), 1))
+                  innerHTML: r.value.node.icon.svg
+                }, null, 8, qe)) : (i(), l("span", $e, H(r.value.node.available ? r.value.node.name.slice(0, 1).toUpperCase() : "?"), 1))
               ], 4),
-              k("span", $e, [
-                k("strong", null, _(d.value.node.name), 1),
-                k("code", null, _(d.value.node.key), 1)
+              m("span", Le, [
+                m("strong", null, H(r.value.node.name), 1),
+                m("code", null, H(r.value.node.key), 1)
               ])
             ]),
-            k("div", Le, [
-              d.value.node.available ? d.value.node.description ? (n(), s("p", Ie, _(d.value.node.description), 1)) : x("", !0) : (n(), s("p", Pe, " This node template is unavailable. ")),
-              d.value.node.available ? (n(), s("div", Te, [
-                k("div", je, [
-                  r[0] || (r[0] = k("span", { class: "ob-flow-viewer-node__port-heading" }, "Inputs", -1)),
-                  d.value.node.inputs.length === 0 ? (n(), s("span", Be, "None")) : x("", !0),
-                  (n(!0), s(C, null, B(d.value.node.inputs, (h) => (n(), s("span", {
-                    key: h.key,
+            m("div", Pe, [
+              r.value.node.available ? r.value.node.description ? (i(), l("p", Te, H(r.value.node.description), 1)) : z("", !0) : (i(), l("p", Ie, " This node template is unavailable. ")),
+              r.value.node.available ? (i(), l("div", je, [
+                m("div", Se, [
+                  h[0] || (h[0] = m("span", { class: "ob-flow-viewer-node__port-heading" }, "Inputs", -1)),
+                  r.value.node.inputs.length === 0 ? (i(), l("span", Be, "None")) : z("", !0),
+                  (i(!0), l(q, null, S(r.value.node.inputs, (s) => (i(), l("span", {
+                    key: s.key,
                     class: "ob-flow-viewer-node__port"
                   }, [
-                    k("span", null, _(h.name), 1),
-                    h.description ? (n(), s("small", Se, _(h.description), 1)) : x("", !0)
+                    m("span", null, H(s.name), 1),
+                    s.description ? (i(), l("small", Ne, H(s.description), 1)) : z("", !0)
                   ]))), 128))
                 ]),
-                k("div", Ne, [
-                  r[1] || (r[1] = k("span", { class: "ob-flow-viewer-node__port-heading" }, "Outputs", -1)),
-                  d.value.node.outputs.length === 0 ? (n(), s("span", Fe, "None")) : x("", !0),
-                  (n(!0), s(C, null, B(d.value.node.outputs, (h) => (n(), s("span", {
-                    key: h.key,
+                m("div", Fe, [
+                  h[1] || (h[1] = m("span", { class: "ob-flow-viewer-node__port-heading" }, "Outputs", -1)),
+                  r.value.node.outputs.length === 0 ? (i(), l("span", De, "None")) : z("", !0),
+                  (i(!0), l(q, null, S(r.value.node.outputs, (s) => (i(), l("span", {
+                    key: s.key,
                     class: "ob-flow-viewer-node__port"
                   }, [
-                    k("span", null, _(h.name), 1),
-                    h.description ? (n(), s("small", De, _(h.description), 1)) : x("", !0)
+                    m("span", null, H(s.name), 1),
+                    s.description ? (i(), l("small", Oe, H(s.description), 1)) : z("", !0)
                   ]))), 128))
                 ])
-              ])) : x("", !0)
+              ])) : z("", !0)
             ])
-          ], 44, Ve)) : x("", !0)
+          ], 44, Ae)) : z("", !0)
         ]))
-      ], 8, He);
+      ], 8, Ve);
     };
   }
 });
@@ -424,9 +431,9 @@ const Q = Symbol("flow-viewer-details"), ue = ["aria-label"], me = { class: "ob-
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ee = (t) => {
-  for (const i in t)
-    if (i.startsWith("aria-") || i === "role" || i === "title")
+const Ze = (t) => {
+  for (const n in t)
+    if (n.startsWith("aria-") || n === "role" || n === "title")
       return !0;
   return !1;
 };
@@ -443,7 +450,7 @@ const J = (t) => t === "";
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ze = (...t) => t.filter((i, u, f) => !!i && i.trim() !== "" && f.indexOf(i) === u).join(" ").trim();
+const Re = (...t) => t.filter((n, v, x) => !!n && n.trim() !== "" && x.indexOf(n) === v).join(" ").trim();
 /**
  * @license lucide-vue-next v0.577.0 - ISC
  *
@@ -457,9 +464,9 @@ const K = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Re = (t) => t.replace(
+const Xe = (t) => t.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
-  (i, u, f) => f ? f.toUpperCase() : u.toLowerCase()
+  (n, v, x) => x ? x.toUpperCase() : v.toLowerCase()
 );
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -467,9 +474,9 @@ const Re = (t) => t.replace(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Xe = (t) => {
-  const i = Re(t);
-  return i.charAt(0).toUpperCase() + i.slice(1);
+const Ue = (t) => {
+  const n = Xe(t);
+  return n.charAt(0).toUpperCase() + n.slice(1);
 };
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -494,33 +501,33 @@ var j = {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ue = ({
+const Ge = ({
   name: t,
-  iconNode: i,
-  absoluteStrokeWidth: u,
-  "absolute-stroke-width": f,
-  strokeWidth: d,
-  "stroke-width": l,
-  size: p = j.width,
-  color: M = j.stroke,
-  ...a
+  iconNode: n,
+  absoluteStrokeWidth: v,
+  "absolute-stroke-width": x,
+  strokeWidth: r,
+  "stroke-width": y,
+  size: k = j.width,
+  color: b = j.stroke,
+  ...o
 }, { slots: c }) => U(
   "svg",
   {
     ...j,
-    ...a,
-    width: p,
-    height: p,
-    stroke: M,
-    "stroke-width": J(u) || J(f) || u === !0 || f === !0 ? Number(d || l || j["stroke-width"]) * 24 / Number(p) : d || l || j["stroke-width"],
-    class: Ze(
+    ...o,
+    width: k,
+    height: k,
+    stroke: b,
+    "stroke-width": J(v) || J(x) || v === !0 || x === !0 ? Number(r || y || j["stroke-width"]) * 24 / Number(k) : r || y || j["stroke-width"],
+    class: Re(
       "lucide",
-      a.class,
-      ...t ? [`lucide-${K(Xe(t))}-icon`, `lucide-${K(t)}`] : ["lucide-icon"]
+      o.class,
+      ...t ? [`lucide-${K(Ue(t))}-icon`, `lucide-${K(t)}`] : ["lucide-icon"]
     ),
-    ...!c.default && !Ee(a) && { "aria-hidden": "true" }
+    ...!c.default && !Ze(o) && { "aria-hidden": "true" }
   },
-  [...i.map((m) => U(...m)), ...c.default ? [c.default()] : []]
+  [...n.map((w) => U(...w)), ...c.default ? [c.default()] : []]
 );
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -528,15 +535,15 @@ const Ue = ({
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const e = (t, i) => (u, { slots: f, attrs: d }) => U(
-  Ue,
+const e = (t, n) => (v, { slots: x, attrs: r }) => U(
+  Ge,
   {
-    ...d,
-    ...u,
-    iconNode: i,
+    ...r,
+    ...v,
+    iconNode: n,
     name: t
   },
-  f
+  x
 );
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -544,7 +551,7 @@ const e = (t, i) => (u, { slots: f, attrs: d }) => U(
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ge = e("archive-restore", [
+const Ye = e("archive-restore", [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h2", key: "tvwodi" }],
   ["path", { d: "M20 8v11a2 2 0 0 1-2 2h-2", key: "1gkqxj" }],
@@ -557,7 +564,7 @@ const Ge = e("archive-restore", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ye = e("archive", [
+const We = e("archive", [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
   ["path", { d: "M10 12h4", key: "a56b0p" }]
@@ -568,7 +575,7 @@ const Ye = e("archive", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const We = e("arrow-down-to-line", [
+const Je = e("arrow-down-to-line", [
   ["path", { d: "M12 17V3", key: "1cwfxf" }],
   ["path", { d: "m6 11 6 6 6-6", key: "12ii2o" }],
   ["path", { d: "M19 21H5", key: "150jfl" }]
@@ -579,7 +586,7 @@ const We = e("arrow-down-to-line", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Je = e("badge-check", [
+const Ke = e("badge-check", [
   [
     "path",
     {
@@ -595,7 +602,7 @@ const Je = e("badge-check", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ke = e("bot", [
+const Qe = e("bot", [
   ["path", { d: "M12 8V4H8", key: "hb8ula" }],
   ["rect", { width: "16", height: "12", x: "4", y: "8", rx: "2", key: "enze0r" }],
   ["path", { d: "M2 14h2", key: "vft8re" }],
@@ -609,7 +616,7 @@ const Ke = e("bot", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Qe = e("box", [
+const et = e("box", [
   [
     "path",
     {
@@ -626,7 +633,7 @@ const Qe = e("box", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const et = e("brain-circuit", [
+const tt = e("brain-circuit", [
   [
     "path",
     {
@@ -653,7 +660,7 @@ const et = e("brain-circuit", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const tt = e("brain", [
+const at = e("brain", [
   ["path", { d: "M12 18V5", key: "adv99a" }],
   ["path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4", key: "1e3is1" }],
   ["path", { d: "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5", key: "1gqd8o" }],
@@ -669,7 +676,7 @@ const tt = e("brain", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const at = e("chart-column", [
+const ot = e("chart-column", [
   ["path", { d: "M3 3v16a2 2 0 0 0 2 2h16", key: "c24i48" }],
   ["path", { d: "M18 17V9", key: "2bz60n" }],
   ["path", { d: "M13 17V5", key: "1frdt8" }],
@@ -681,7 +688,7 @@ const at = e("chart-column", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ot = e("clipboard-check", [
+const nt = e("clipboard-check", [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -698,7 +705,7 @@ const ot = e("clipboard-check", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const nt = e("clock-3", [
+const it = e("clock-3", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 6v6h4", key: "135r8i" }]
 ]);
@@ -708,7 +715,7 @@ const nt = e("clock-3", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const it = e("cloud-download", [
+const st = e("cloud-download", [
   ["path", { d: "M12 13v8l-4-4", key: "1f5nwf" }],
   ["path", { d: "m12 21 4-4", key: "1lfcce" }],
   ["path", { d: "M4.393 15.269A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.436 8.284", key: "ui1hmy" }]
@@ -733,7 +740,7 @@ const ct = e("combine", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const st = e("copy", [
+const dt = e("copy", [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ]);
@@ -743,7 +750,7 @@ const st = e("copy", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const dt = e("cpu", [
+const lt = e("cpu", [
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M17 20v2", key: "1rnc9c" }],
@@ -765,7 +772,7 @@ const dt = e("cpu", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const lt = e("crop", [
+const rt = e("crop", [
   ["path", { d: "M6 2v14a2 2 0 0 0 2 2h14", key: "ron5a4" }],
   ["path", { d: "M18 22V8a2 2 0 0 0-2-2H2", key: "7s9ehn" }]
 ]);
@@ -775,7 +782,7 @@ const lt = e("crop", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const rt = e("crosshair", [
+const ht = e("crosshair", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "22", x2: "18", y1: "12", y2: "12", key: "l9bcsi" }],
   ["line", { x1: "6", x2: "2", y1: "12", y2: "12", key: "13hhkx" }],
@@ -788,7 +795,7 @@ const rt = e("crosshair", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ht = e("database", [
+const yt = e("database", [
   ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
   ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
   ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
@@ -799,7 +806,7 @@ const ht = e("database", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const yt = e("download", [
+const pt = e("download", [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
@@ -810,7 +817,7 @@ const yt = e("download", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const pt = e("eye", [
+const kt = e("eye", [
   [
     "path",
     {
@@ -826,7 +833,7 @@ const pt = e("eye", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const kt = e("file-down", [
+const ut = e("file-down", [
   [
     "path",
     {
@@ -844,7 +851,7 @@ const kt = e("file-down", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ut = e("files", [
+const mt = e("files", [
   ["path", { d: "M15 2h-4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8", key: "14sh0y" }],
   [
     "path",
@@ -861,7 +868,7 @@ const ut = e("files", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const mt = e("film", [
+const vt = e("film", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M7 3v18", key: "bbkbws" }],
   ["path", { d: "M3 7.5h4", key: "zfgn84" }],
@@ -877,7 +884,7 @@ const mt = e("film", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const vt = e("folder-plus", [
+const wt = e("folder-plus", [
   ["path", { d: "M12 10v6", key: "1bos4e" }],
   ["path", { d: "M9 13h6", key: "1uhe8q" }],
   [
@@ -894,7 +901,7 @@ const vt = e("folder-plus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const wt = e("folder-root", [
+const gt = e("folder-root", [
   [
     "path",
     {
@@ -911,7 +918,7 @@ const wt = e("folder-root", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const gt = e("folder-sync", [
+const ft = e("folder-sync", [
   [
     "path",
     {
@@ -930,7 +937,7 @@ const gt = e("folder-sync", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ft = e("funnel", [
+const Mt = e("funnel", [
   [
     "path",
     {
@@ -945,7 +952,7 @@ const ft = e("funnel", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Mt = e("gallery-vertical-end", [
+const xt = e("gallery-vertical-end", [
   ["path", { d: "M7 2h10", key: "nczekb" }],
   ["path", { d: "M5 6h14", key: "u2x4p" }],
   ["rect", { width: "18", height: "12", x: "3", y: "10", rx: "2", key: "l0tzu3" }]
@@ -956,7 +963,7 @@ const Mt = e("gallery-vertical-end", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const xt = e("gauge", [
+const bt = e("gauge", [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
 ]);
@@ -966,7 +973,7 @@ const xt = e("gauge", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const bt = e("git-branch", [
+const zt = e("git-branch", [
   ["path", { d: "M15 6a9 9 0 0 0-9 9V3", key: "1cii5b" }],
   ["circle", { cx: "18", cy: "6", r: "3", key: "1h7g24" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }]
@@ -977,7 +984,7 @@ const bt = e("git-branch", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const zt = e("git-merge", [
+const _t = e("git-merge", [
   ["circle", { cx: "18", cy: "18", r: "3", key: "1xkwt0" }],
   ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
   ["path", { d: "M6 21V9a9 9 0 0 0 9 9", key: "7kw0sc" }]
@@ -988,7 +995,7 @@ const zt = e("git-merge", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const _t = e("hard-drive-download", [
+const Ht = e("hard-drive-download", [
   ["path", { d: "M12 2v8", key: "1q4o3n" }],
   ["path", { d: "m16 6-4 4-4-4", key: "6wukr" }],
   ["rect", { width: "20", height: "8", x: "2", y: "14", rx: "2", key: "w68u3i" }],
@@ -1001,7 +1008,7 @@ const _t = e("hard-drive-download", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ht = e("hard-drive-upload", [
+const Vt = e("hard-drive-upload", [
   ["path", { d: "m16 6-4-4-4 4", key: "13yo43" }],
   ["path", { d: "M12 2v8", key: "1q4o3n" }],
   ["rect", { width: "20", height: "8", x: "2", y: "14", rx: "2", key: "w68u3i" }],
@@ -1014,7 +1021,7 @@ const Ht = e("hard-drive-upload", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Vt = e("history", [
+const At = e("history", [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
   ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
@@ -1025,7 +1032,7 @@ const Vt = e("history", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const At = e("image-up", [
+const Ct = e("image-up", [
   [
     "path",
     {
@@ -1043,7 +1050,7 @@ const At = e("image-up", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ct = e("image-plus", [
+const qt = e("image-plus", [
   ["path", { d: "M16 5h6", key: "1vod17" }],
   ["path", { d: "M19 2v6", key: "4bpg5p" }],
   ["path", { d: "M21 11.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7.5", key: "1ue2ih" }],
@@ -1056,7 +1063,7 @@ const Ct = e("image-plus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const qt = e("image", [
+const $t = e("image", [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
@@ -1067,7 +1074,7 @@ const qt = e("image", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const $t = e("images", [
+const Lt = e("images", [
   ["path", { d: "m22 11-1.296-1.296a2.4 2.4 0 0 0-3.408 0L11 16", key: "9kzy35" }],
   ["path", { d: "M4 8a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2", key: "1t0f0t" }],
   ["circle", { cx: "13", cy: "7", r: "1", fill: "currentColor", key: "1obus6" }],
@@ -1079,7 +1086,7 @@ const $t = e("images", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Lt = e("layers", [
+const Pt = e("layers", [
   [
     "path",
     {
@@ -1108,7 +1115,7 @@ const Lt = e("layers", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pt = e("list-checks", [
+const It = e("list-checks", [
   ["path", { d: "M13 5h8", key: "a7qcls" }],
   ["path", { d: "M13 12h8", key: "h98zly" }],
   ["path", { d: "M13 19h8", key: "c3s6r1" }],
@@ -1121,7 +1128,7 @@ const Pt = e("list-checks", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const It = e("loader-circle", [
+const Tt = e("loader-circle", [
   ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
 ]);
 /**
@@ -1130,7 +1137,7 @@ const It = e("loader-circle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Tt = e("mail", [
+const jt = e("mail", [
   ["path", { d: "m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7", key: "132q7q" }],
   ["rect", { x: "2", y: "4", width: "20", height: "16", rx: "2", key: "izxlao" }]
 ]);
@@ -1140,7 +1147,7 @@ const Tt = e("mail", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const jt = e("moon", [
+const St = e("moon", [
   [
     "path",
     {
@@ -1165,7 +1172,7 @@ const Bt = e("move-right", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const St = e("octagon-x", [
+const Nt = e("octagon-x", [
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   [
     "path",
@@ -1182,7 +1189,7 @@ const St = e("octagon-x", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Nt = e("package-minus", [
+const Ft = e("package-minus", [
   ["path", { d: "M12 22V12", key: "d0xqtd" }],
   ["path", { d: "M16 17h6", key: "1ook5g" }],
   [
@@ -1201,7 +1208,7 @@ const Nt = e("package-minus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ft = e("package-open", [
+const Dt = e("package-open", [
   ["path", { d: "M12 22v-9", key: "x3hkom" }],
   [
     "path",
@@ -1231,7 +1238,7 @@ const Ft = e("package-open", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Dt = e("package-plus", [
+const Ot = e("package-plus", [
   ["path", { d: "M12 22V12", key: "d0xqtd" }],
   ["path", { d: "M16 17h6", key: "1ook5g" }],
   ["path", { d: "M19 14v6", key: "1ckrd5" }],
@@ -1251,7 +1258,7 @@ const Dt = e("package-plus", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ot = e("play", [
+const Et = e("play", [
   [
     "path",
     {
@@ -1266,7 +1273,7 @@ const Ot = e("play", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Et = e("radar", [
+const Zt = e("radar", [
   ["path", { d: "M19.07 4.93A10 10 0 0 0 6.99 3.34", key: "z3du51" }],
   ["path", { d: "M4 6h.01", key: "oypzma" }],
   ["path", { d: "M2.29 9.62A10 10 0 1 0 21.31 8.35", key: "qzzz0" }],
@@ -1282,7 +1289,7 @@ const Et = e("radar", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Zt = e("route", [
+const Rt = e("route", [
   ["circle", { cx: "6", cy: "19", r: "3", key: "1kj8tv" }],
   ["path", { d: "M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15", key: "1d8sl" }],
   ["circle", { cx: "18", cy: "5", r: "3", key: "gq8acd" }]
@@ -1293,7 +1300,7 @@ const Zt = e("route", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Rt = e("ruler", [
+const Xt = e("ruler", [
   [
     "path",
     {
@@ -1312,7 +1319,7 @@ const Rt = e("ruler", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Xt = e("scale", [
+const Ut = e("scale", [
   ["path", { d: "M12 3v18", key: "108xh3" }],
   ["path", { d: "m19 8 3 8a5 5 0 0 1-6 0zV7", key: "zcdpyk" }],
   ["path", { d: "M3 7h1a17 17 0 0 0 8-2 17 17 0 0 0 8 2h1", key: "1yorad" }],
@@ -1325,7 +1332,7 @@ const Xt = e("scale", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ut = e("scan-eye", [
+const Gt = e("scan-eye", [
   ["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
   ["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
   ["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
@@ -1345,7 +1352,7 @@ const Ut = e("scan-eye", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Gt = e("scan-search", [
+const Yt = e("scan-search", [
   ["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
   ["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
   ["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
@@ -1359,7 +1366,7 @@ const Gt = e("scan-search", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Yt = e("scan-text", [
+const Wt = e("scan-text", [
   ["path", { d: "M3 7V5a2 2 0 0 1 2-2h2", key: "aa7l1z" }],
   ["path", { d: "M17 3h2a2 2 0 0 1 2 2v2", key: "4qcy5o" }],
   ["path", { d: "M21 17v2a2 2 0 0 1-2 2h-2", key: "6vwrx8" }],
@@ -1374,7 +1381,7 @@ const Yt = e("scan-text", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Wt = e("scissors", [
+const Jt = e("scissors", [
   ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
   ["path", { d: "M8.12 8.12 12 12", key: "1alkpv" }],
   ["path", { d: "M20 4 8.12 15.88", key: "xgtan2" }],
@@ -1387,7 +1394,7 @@ const Wt = e("scissors", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Jt = e("search", [
+const Kt = e("search", [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ]);
@@ -1397,7 +1404,7 @@ const Jt = e("search", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Kt = e("settings", [
+const Qt = e("settings", [
   [
     "path",
     {
@@ -1413,7 +1420,7 @@ const Kt = e("settings", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Qt = e("shield-check", [
+const ea = e("shield-check", [
   [
     "path",
     {
@@ -1429,7 +1436,7 @@ const Qt = e("shield-check", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const e1 = e("shuffle", [
+const ta = e("shuffle", [
   ["path", { d: "m18 14 4 4-4 4", key: "10pe0f" }],
   ["path", { d: "m18 2 4 4-4 4", key: "pucp1d" }],
   ["path", { d: "M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22", key: "1ailkh" }],
@@ -1442,7 +1449,7 @@ const e1 = e("shuffle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const t1 = e("sparkles", [
+const aa = e("sparkles", [
   [
     "path",
     {
@@ -1460,7 +1467,7 @@ const t1 = e("sparkles", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const a1 = e("split", [
+const oa = e("split", [
   ["path", { d: "M16 3h5v5", key: "1806ms" }],
   ["path", { d: "M8 3H3v5", key: "15dfkv" }],
   ["path", { d: "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3", key: "1qrqzj" }],
@@ -1472,7 +1479,7 @@ const a1 = e("split", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const o1 = e("tag", [
+const na = e("tag", [
   [
     "path",
     {
@@ -1488,7 +1495,7 @@ const o1 = e("tag", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const n1 = e("tags", [
+const ia = e("tags", [
   [
     "path",
     {
@@ -1508,7 +1515,7 @@ const n1 = e("tags", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const i1 = e("terminal", [
+const sa = e("terminal", [
   ["path", { d: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ]);
@@ -1518,7 +1525,7 @@ const i1 = e("terminal", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const c1 = e("text-cursor-input", [
+const ca = e("text-cursor-input", [
   ["path", { d: "M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6", key: "1528k5" }],
   ["path", { d: "M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7", key: "13ksps" }],
   ["path", { d: "M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1", key: "1n9rhb" }],
@@ -1531,7 +1538,7 @@ const c1 = e("text-cursor-input", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const s1 = e("trash-2", [
+const da = e("trash-2", [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
@@ -1544,7 +1551,7 @@ const s1 = e("trash-2", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const d1 = e("triangle-alert", [
+const la = e("triangle-alert", [
   [
     "path",
     {
@@ -1561,7 +1568,7 @@ const d1 = e("triangle-alert", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const l1 = e("trophy", [
+const ra = e("trophy", [
   ["path", { d: "M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978", key: "1n3hpd" }],
   ["path", { d: "M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978", key: "rfe1zi" }],
   ["path", { d: "M18 9h1.5a1 1 0 0 0 0-5H18", key: "7xy6bh" }],
@@ -1575,7 +1582,7 @@ const l1 = e("trophy", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const r1 = e("video", [
+const ha = e("video", [
   [
     "path",
     {
@@ -1591,7 +1598,7 @@ const r1 = e("video", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const h1 = e("wand-sparkles", [
+const ya = e("wand-sparkles", [
   [
     "path",
     {
@@ -1613,7 +1620,7 @@ const h1 = e("wand-sparkles", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const y1 = e("webhook", [
+const pa = e("webhook", [
   [
     "path",
     {
@@ -1623,7 +1630,7 @@ const y1 = e("webhook", [
   ],
   ["path", { d: "m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06", key: "1go1hn" }],
   ["path", { d: "m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8", key: "qlwsc0" }]
-]), p1 = [
+]), ka = [
   "archive",
   "archive-restore",
   "arrow-down-to-line",
@@ -1697,191 +1704,191 @@ const y1 = e("webhook", [
   "video",
   "wand-sparkles",
   "webhook"
-], q1 = Object.freeze(p1), k1 = Object.freeze({
-  archive: Ye,
-  "archive-restore": Ge,
-  "arrow-down-to-line": We,
-  "badge-check": Je,
-  bot: Ke,
-  box: Qe,
-  brain: tt,
-  "brain-circuit": et,
-  "chart-column": at,
-  "clipboard-check": ot,
-  "clock-3": nt,
-  "cloud-download": it,
+], $a = Object.freeze(ka), ua = Object.freeze({
+  archive: We,
+  "archive-restore": Ye,
+  "arrow-down-to-line": Je,
+  "badge-check": Ke,
+  bot: Qe,
+  box: et,
+  brain: at,
+  "brain-circuit": tt,
+  "chart-column": ot,
+  "clipboard-check": nt,
+  "clock-3": it,
+  "cloud-download": st,
   combine: ct,
-  copy: st,
-  cpu: dt,
-  crop: lt,
-  crosshair: rt,
-  database: ht,
-  download: yt,
-  eye: pt,
-  "file-down": kt,
-  files: ut,
-  film: mt,
-  "folder-plus": vt,
-  "folder-root": wt,
-  "folder-sync": gt,
-  funnel: ft,
-  "gallery-vertical-end": Mt,
-  gauge: xt,
-  "git-branch": bt,
-  "git-merge": zt,
-  "hard-drive-download": _t,
-  "hard-drive-upload": Ht,
-  history: Vt,
-  image: qt,
-  "image-plus": Ct,
-  "image-up": At,
-  images: $t,
-  layers: Lt,
-  "list-checks": Pt,
-  "loader-circle": It,
-  mail: Tt,
-  moon: jt,
+  copy: dt,
+  cpu: lt,
+  crop: rt,
+  crosshair: ht,
+  database: yt,
+  download: pt,
+  eye: kt,
+  "file-down": ut,
+  files: mt,
+  film: vt,
+  "folder-plus": wt,
+  "folder-root": gt,
+  "folder-sync": ft,
+  funnel: Mt,
+  "gallery-vertical-end": xt,
+  gauge: bt,
+  "git-branch": zt,
+  "git-merge": _t,
+  "hard-drive-download": Ht,
+  "hard-drive-upload": Vt,
+  history: At,
+  image: $t,
+  "image-plus": qt,
+  "image-up": Ct,
+  images: Lt,
+  layers: Pt,
+  "list-checks": It,
+  "loader-circle": Tt,
+  mail: jt,
+  moon: St,
   "move-right": Bt,
-  "octagon-x": St,
-  "package-minus": Nt,
-  "package-open": Ft,
-  "package-plus": Dt,
-  play: Ot,
-  radar: Et,
-  route: Zt,
-  ruler: Rt,
-  scale: Xt,
-  "scan-eye": Ut,
-  "scan-search": Gt,
-  "scan-text": Yt,
-  scissors: Wt,
-  search: Jt,
-  settings: Kt,
-  "shield-check": Qt,
-  shuffle: e1,
-  sparkles: t1,
-  split: a1,
-  tag: o1,
-  tags: n1,
-  terminal: i1,
-  "text-cursor-input": c1,
-  "trash-2": s1,
-  "triangle-alert": d1,
-  trophy: l1,
-  video: r1,
-  "wand-sparkles": h1,
-  webhook: y1
-}), u1 = { class: "ob-flow-preview" }, m1 = ["viewBox"], v1 = ["d"], w1 = ["x", "y"], g1 = ["x", "y"], f1 = ["href", "x", "y"], M1 = ["x", "y"], x1 = ["x", "y"], N = 260, F = 100, D = 140, b1 = 140, R = 48, O = 26, $1 = /* @__PURE__ */ E({
+  "octagon-x": Nt,
+  "package-minus": Ft,
+  "package-open": Dt,
+  "package-plus": Ot,
+  play: Et,
+  radar: Zt,
+  route: Rt,
+  ruler: Xt,
+  scale: Ut,
+  "scan-eye": Gt,
+  "scan-search": Yt,
+  "scan-text": Wt,
+  scissors: Jt,
+  search: Kt,
+  settings: Qt,
+  "shield-check": ea,
+  shuffle: ta,
+  sparkles: aa,
+  split: oa,
+  tag: na,
+  tags: ia,
+  terminal: sa,
+  "text-cursor-input": ca,
+  "trash-2": da,
+  "triangle-alert": la,
+  trophy: ra,
+  video: ha,
+  "wand-sparkles": ya,
+  webhook: pa
+}), ma = { class: "ob-flow-preview" }, va = ["viewBox"], wa = ["d"], ga = ["x", "y"], fa = ["x", "y"], Ma = ["href", "x", "y"], xa = ["x", "y"], ba = ["x", "y"], N = 260, F = 100, D = 140, za = 140, R = 48, O = 26, La = /* @__PURE__ */ E({
   __name: "FlowPreview",
   props: {
     preview: {},
-    icons: { default: () => k1 },
+    icons: { default: () => ua },
     iconUrl: { type: Function, default: void 0 }
   },
   setup(t) {
-    const i = t, u = q(() => {
-      var a, c;
-      const p = ((a = i.preview) == null ? void 0 : a.n) ?? [], M = new Map(p.map((m) => [m.id, { x: m.x, y: m.y }]));
-      for (let m = 0; m < p.length; m += 1)
-        for (const H of ((c = i.preview) == null ? void 0 : c.e) ?? []) {
-          const $ = M.get(H.s), L = M.get(H.t);
-          $ && L && Math.abs($.x - L.x) < b1 && (L.x = $.x);
+    const n = t, v = C(() => {
+      var o, c;
+      const k = ((o = n.preview) == null ? void 0 : o.n) ?? [], b = new Map(k.map((w) => [w.id, { x: w.x, y: w.y }]));
+      for (let w = 0; w < k.length; w += 1)
+        for (const _ of ((c = n.preview) == null ? void 0 : c.e) ?? []) {
+          const $ = b.get(_.s), L = b.get(_.t);
+          $ && L && Math.abs($.x - L.x) < za && (L.x = $.x);
         }
-      return p.map((m) => ({
-        ...m,
-        ...M.get(m.id) ?? { x: m.x, y: m.y }
+      return k.map((w) => ({
+        ...w,
+        ...b.get(w.id) ?? { x: w.x, y: w.y }
       }));
-    }), f = q(() => {
-      const p = u.value;
-      if (p.length === 0) return "0 0 1 1";
-      let M = 1 / 0, a = 1 / 0, c = -1 / 0, m = -1 / 0;
-      for (const H of p)
-        M = Math.min(M, H.x), a = Math.min(a, H.y), c = Math.max(c, H.x + N), m = Math.max(m, H.y + F);
-      return `${M - D} ${a - D} ${c - M + D * 2} ${m - a + D * 2}`;
-    }), d = q(
-      () => new Map(u.value.map((p) => [p.id, p]))
+    }), x = C(() => {
+      const k = v.value;
+      if (k.length === 0) return "0 0 1 1";
+      let b = 1 / 0, o = 1 / 0, c = -1 / 0, w = -1 / 0;
+      for (const _ of k)
+        b = Math.min(b, _.x), o = Math.min(o, _.y), c = Math.max(c, _.x + N), w = Math.max(w, _.y + F);
+      return `${b - D} ${o - D} ${c - b + D * 2} ${w - o + D * 2}`;
+    }), r = C(
+      () => new Map(v.value.map((k) => [k.id, k]))
     );
-    function l(p, M) {
-      const a = d.value.get(p), c = d.value.get(M);
-      if (!a || !c) return "";
-      const m = a.x + N / 2, H = a.y + F / 2, $ = c.x + N / 2, L = c.y + F / 2;
-      return `M ${m} ${H} L ${$} ${L}`;
+    function y(k, b) {
+      const o = r.value.get(k), c = r.value.get(b);
+      if (!o || !c) return "";
+      const w = o.x + N / 2, _ = o.y + F / 2, $ = c.x + N / 2, L = c.y + F / 2;
+      return `M ${w} ${_} L ${$} ${L}`;
     }
-    return (p, M) => (n(), s("div", u1, [
-      t.preview && t.preview.n.length > 0 ? (n(), s("svg", {
+    return (k, b) => (i(), l("div", ma, [
+      t.preview && t.preview.n.length > 0 ? (i(), l("svg", {
         key: 0,
         class: "ob-flow-preview__svg",
-        viewBox: f.value,
+        viewBox: x.value,
         preserveAspectRatio: "xMidYMid meet"
       }, [
-        (n(!0), s(C, null, B(t.preview.e, (a, c) => (n(), s("path", {
+        (i(!0), l(q, null, S(t.preview.e, (o, c) => (i(), l("path", {
           key: c,
-          d: l(a.s, a.t),
+          d: y(o.s, o.t),
           class: "ob-flow-preview__edge",
           "vector-effect": "non-scaling-stroke"
-        }, null, 8, v1))), 128)),
-        (n(!0), s(C, null, B(u.value, (a) => (n(), s("rect", {
-          key: a.id,
-          x: a.x,
-          y: a.y,
+        }, null, 8, wa))), 128)),
+        (i(!0), l(q, null, S(v.value, (o) => (i(), l("rect", {
+          key: o.id,
+          x: o.x,
+          y: o.y,
           width: N,
           height: F,
           rx: "16",
           class: "ob-flow-preview__node",
           "vector-effect": "non-scaling-stroke"
-        }, null, 8, w1))), 128)),
-        (n(!0), s(C, null, B(u.value, (a) => (n(), s(C, {
-          key: `content-${a.id}`
+        }, null, 8, ga))), 128)),
+        (i(!0), l(q, null, S(v.value, (o) => (i(), l(q, {
+          key: `content-${o.id}`
         }, [
-          k("rect", {
-            x: a.x + 18,
-            y: a.y + 18,
+          m("rect", {
+            x: o.x + 18,
+            y: o.y + 18,
             width: "64",
             height: "64",
             rx: "16",
             class: "ob-flow-preview__icon-background",
-            style: S(a.c ? { fill: a.c } : void 0)
-          }, null, 12, g1),
-          a.i && t.icons[a.i] ? (n(), A(re(t.icons[a.i]), {
+            style: B(o.c ? { fill: o.c } : void 0)
+          }, null, 12, fa),
+          o.i && t.icons[o.i] ? (i(), A(he(t.icons[o.i]), {
             key: 0,
-            x: a.x + O,
-            y: a.y + O,
+            x: o.x + O,
+            y: o.y + O,
             size: R,
             color: "white",
             "stroke-width": 2.5,
             "aria-hidden": "true"
-          }, null, 8, ["x", "y"])) : a.i && t.iconUrl ? (n(), s("image", {
+          }, null, 8, ["x", "y"])) : o.i && t.iconUrl ? (i(), l("image", {
             key: 1,
-            href: t.iconUrl(a.i),
-            x: a.x + O,
-            y: a.y + O,
+            href: t.iconUrl(o.i),
+            x: o.x + O,
+            y: o.y + O,
             width: R,
             height: R
-          }, null, 8, f1)) : (n(), s("text", {
+          }, null, 8, Ma)) : (i(), l("text", {
             key: 2,
-            x: a.x + 50,
-            y: a.y + 68,
+            x: o.x + 50,
+            y: o.y + 68,
             fill: "white",
             "font-size": "42",
             "font-family": "sans-serif",
             "text-anchor": "middle"
-          }, " * ", 8, M1)),
-          k("rect", {
-            x: a.x + 100,
-            y: a.y + 45,
+          }, " * ", 8, xa)),
+          m("rect", {
+            x: o.x + 100,
+            y: o.y + 45,
             width: "128",
             height: "10",
             rx: "5",
             class: "ob-flow-preview__line"
-          }, null, 8, x1)
+          }, null, 8, ba)
         ], 64))), 128))
-      ], 8, m1)) : x("", !0)
+      ], 8, va)) : z("", !0)
     ]));
   }
 });
 export {
-  $1 as FlowPreview,
-  C1 as FlowViewer,
-  q1 as nodePreviewIconNames,
-  k1 as nodePreviewIcons
+  La as FlowPreview,
+  qa as FlowViewer,
+  $a as nodePreviewIconNames,
+  ua as nodePreviewIcons
 };