@ovalbee/flow-viewer 0.0.2 → 0.0.4

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 T, Position as I, 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(T), {
           key: 1,
           type: "target",
-          position: w(T).Top
-        }, null, 8, ["position"])) : x("", !0),
-        t.data.connectedHandles.has("left") ? (n(), A(w(I), {
+          position: M(I).Top
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("left") ? (i(), A(M(T), {
           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(I).Left
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("right") ? (i(), A(M(T), {
           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(I).Right
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("source") ? (i(), A(M(T), {
           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(I).Bottom
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("left-source") ? (i(), A(M(T), {
           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(I).Left
+        }, null, 8, ["position"])) : z("", !0),
+        t.data.connectedHandles.has("right-source") ? (i(), A(M(T), {
           key: 6,
           id: "right-source",
           type: "source",
-          position: w(T).Right
-        }, null, 8, ["position"])) : x("", !0)
-      ], 42, ue);
+          position: M(I).Right
+        }, null, 8, ["position"])) : z("", !0)
+      ], 42, me);
     };
   }
-}), _e = /* @__PURE__ */ E({
+}), He = ["innerHTML"], Ve = /* @__PURE__ */ E({
   __name: "FlowViewerNote",
   props: {
     id: {},
@@ -150,180 +150,188 @@ 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),
+      innerHTML: t.data.content
+    }, null, 14, He));
   }
-}), 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 = {
+}), Ae = ["data-theme"], Ce = ["data-theme"], qe = { class: "ob-flow-viewer-tooltip__header" }, $e = ["innerHTML"], Le = { key: 1 }, Pe = { class: "ob-flow-viewer-tooltip__title-wrap" }, Te = { class: "ob-flow-viewer-tooltip__body" }, Ie = {
   key: 0,
   class: "ob-flow-viewer-tooltip__unavailable"
-}, Ie = {
+}, je = {
   key: 1,
   class: "ob-flow-viewer-tooltip__description"
-}, Te = {
+}, Se = {
   key: 2,
   class: "ob-flow-viewer-node__ports"
-}, je = { class: "ob-flow-viewer-node__port-group" }, Be = {
+}, Be = { class: "ob-flow-viewer-node__port-group" }, Ne = {
   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 = {
+}, Fe = { key: 0 }, De = { class: "ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs" }, Oe = {
   key: 0,
   class: "ob-flow-viewer-node__empty"
-}, De = { key: 0 }, Y = 72, W = 64, Oe = 1.45, C1 = /* @__PURE__ */ E({
+}, Ee = { key: 0 }, Y = 72, W = 64, Ze = 1.45, $a = /* @__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(Ve)
     };
-    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) * Ze;
+      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 +344,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", qe, [
+              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, $e)) : (i(), l("span", Le, 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", Pe, [
+                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", Te, [
+              r.value.node.available ? r.value.node.description ? (i(), l("p", je, H(r.value.node.description), 1)) : z("", !0) : (i(), l("p", Ie, " This node template is unavailable. ")),
+              r.value.node.available ? (i(), l("div", Se, [
+                m("div", Be, [
+                  h[0] || (h[0] = m("span", { class: "ob-flow-viewer-node__port-heading" }, "Inputs", -1)),
+                  r.value.node.inputs.length === 0 ? (i(), l("span", Ne, "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", Fe, 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", De, [
+                  h[1] || (h[1] = m("span", { class: "ob-flow-viewer-node__port-heading" }, "Outputs", -1)),
+                  r.value.node.outputs.length === 0 ? (i(), l("span", Oe, "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", Ee, H(s.description), 1)) : z("", !0)
                   ]))), 128))
                 ])
-              ])) : x("", !0)
+              ])) : z("", !0)
             ])
-          ], 44, Ve)) : x("", !0)
+          ], 44, Ce)) : z("", !0)
         ]))
-      ], 8, He);
+      ], 8, Ae);
     };
   }
 });
@@ -424,9 +432,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 Re = (t) => {
+  for (const n in t)
+    if (n.startsWith("aria-") || n === "role" || n === "title")
       return !0;
   return !1;
 };
@@ -443,7 +451,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 Xe = (...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 +465,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 Ue = (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 +475,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 Ge = (t) => {
+  const n = Ue(t);
+  return n.charAt(0).toUpperCase() + n.slice(1);
 };
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -494,33 +502,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 Ye = ({
   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: Xe(
       "lucide",
-      a.class,
-      ...t ? [`lucide-${K(Xe(t))}-icon`, `lucide-${K(t)}`] : ["lucide-icon"]
+      o.class,
+      ...t ? [`lucide-${K(Ge(t))}-icon`, `lucide-${K(t)}`] : ["lucide-icon"]
     ),
-    ...!c.default && !Ee(a) && { "aria-hidden": "true" }
+    ...!c.default && !Re(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 +536,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(
+  Ye,
   {
-    ...d,
-    ...u,
-    iconNode: i,
+    ...r,
+    ...v,
+    iconNode: n,
     name: t
   },
-  f
+  x
 );
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -544,7 +552,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 We = 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 +565,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 Je = 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 +576,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 Ke = 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 +587,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 Qe = e("badge-check", [
   [
     "path",
     {
@@ -595,7 +603,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 et = 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 +617,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 tt = e("box", [
   [
     "path",
     {
@@ -626,7 +634,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 at = e("brain-circuit", [
   [
     "path",
     {
@@ -653,7 +661,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 ot = 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 +677,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 nt = 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 +689,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 it = e("clipboard-check", [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -698,7 +706,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 st = e("clock-3", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 6v6h4", key: "135r8i" }]
 ]);
@@ -708,7 +716,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 ct = 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" }]
@@ -719,7 +727,7 @@ const it = e("cloud-download", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ct = e("combine", [
+const dt = e("combine", [
   ["path", { d: "M14 3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1", key: "1l7d7l" }],
   ["path", { d: "M19 3a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1", key: "9955pe" }],
   ["path", { d: "m7 15 3 3", key: "4hkfgk" }],
@@ -733,7 +741,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 lt = 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 +751,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 rt = e("cpu", [
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M17 20v2", key: "1rnc9c" }],
@@ -765,7 +773,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 ht = 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 +783,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 yt = 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 +796,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 pt = 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 +807,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 kt = 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 +818,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 ut = e("eye", [
   [
     "path",
     {
@@ -826,7 +834,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 mt = e("file-down", [
   [
     "path",
     {
@@ -844,7 +852,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 vt = 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 +869,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 wt = 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 +885,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 gt = e("folder-plus", [
   ["path", { d: "M12 10v6", key: "1bos4e" }],
   ["path", { d: "M9 13h6", key: "1uhe8q" }],
   [
@@ -894,7 +902,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 ft = e("folder-root", [
   [
     "path",
     {
@@ -911,7 +919,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 Mt = e("folder-sync", [
   [
     "path",
     {
@@ -930,7 +938,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 xt = e("funnel", [
   [
     "path",
     {
@@ -945,7 +953,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 bt = 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 +964,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 zt = 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 +974,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 _t = 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 +985,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 Ht = 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 +996,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 Vt = 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 +1009,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 At = 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 +1022,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 Ct = 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 +1033,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 qt = e("image-up", [
   [
     "path",
     {
@@ -1043,7 +1051,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 $t = 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 +1064,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 Lt = 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 +1075,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 Pt = 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 +1087,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 Tt = e("layers", [
   [
     "path",
     {
@@ -1108,7 +1116,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 +1129,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 jt = e("loader-circle", [
   ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
 ]);
 /**
@@ -1130,7 +1138,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 St = 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 +1148,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 Bt = e("moon", [
   [
     "path",
     {
@@ -1155,7 +1163,7 @@ const jt = e("moon", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Bt = e("move-right", [
+const Nt = e("move-right", [
   ["path", { d: "M18 8L22 12L18 16", key: "1r0oui" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ]);
@@ -1165,7 +1173,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 Ft = e("octagon-x", [
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   [
     "path",
@@ -1182,7 +1190,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 Dt = e("package-minus", [
   ["path", { d: "M12 22V12", key: "d0xqtd" }],
   ["path", { d: "M16 17h6", key: "1ook5g" }],
   [
@@ -1201,7 +1209,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 Ot = e("package-open", [
   ["path", { d: "M12 22v-9", key: "x3hkom" }],
   [
     "path",
@@ -1231,7 +1239,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 Et = e("package-plus", [
   ["path", { d: "M12 22V12", key: "d0xqtd" }],
   ["path", { d: "M16 17h6", key: "1ook5g" }],
   ["path", { d: "M19 14v6", key: "1ckrd5" }],
@@ -1251,7 +1259,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 Zt = e("play", [
   [
     "path",
     {
@@ -1266,7 +1274,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 Rt = 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 +1290,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 Xt = 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 +1301,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 Ut = e("ruler", [
   [
     "path",
     {
@@ -1312,7 +1320,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 Gt = 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 +1333,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 Yt = 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 +1353,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 Wt = 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 +1367,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 Jt = 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 +1382,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 Kt = 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 +1395,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 Qt = e("search", [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ]);
@@ -1397,7 +1405,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 ea = e("settings", [
   [
     "path",
     {
@@ -1413,7 +1421,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 ta = e("shield-check", [
   [
     "path",
     {
@@ -1429,7 +1437,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 aa = 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 +1450,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 oa = e("sparkles", [
   [
     "path",
     {
@@ -1460,7 +1468,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 na = 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 +1480,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 ia = e("tag", [
   [
     "path",
     {
@@ -1488,7 +1496,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 sa = e("tags", [
   [
     "path",
     {
@@ -1508,7 +1516,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 ca = e("terminal", [
   ["path", { d: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ]);
@@ -1518,7 +1526,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 da = 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 +1539,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 la = 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 +1552,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 ra = e("triangle-alert", [
   [
     "path",
     {
@@ -1561,7 +1569,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 ha = 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 +1583,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 ya = e("video", [
   [
     "path",
     {
@@ -1591,7 +1599,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 pa = e("wand-sparkles", [
   [
     "path",
     {
@@ -1613,7 +1621,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 ka = e("webhook", [
   [
     "path",
     {
@@ -1623,7 +1631,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 = [
+]), ua = [
   "archive",
   "archive-restore",
   "arrow-down-to-line",
@@ -1697,191 +1705,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,
-  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,
-  "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({
+], La = Object.freeze(ua), ma = Object.freeze({
+  archive: Je,
+  "archive-restore": We,
+  "arrow-down-to-line": Ke,
+  "badge-check": Qe,
+  bot: et,
+  box: tt,
+  brain: ot,
+  "brain-circuit": at,
+  "chart-column": nt,
+  "clipboard-check": it,
+  "clock-3": st,
+  "cloud-download": ct,
+  combine: dt,
+  copy: lt,
+  cpu: rt,
+  crop: ht,
+  crosshair: yt,
+  database: pt,
+  download: kt,
+  eye: ut,
+  "file-down": mt,
+  files: vt,
+  film: wt,
+  "folder-plus": gt,
+  "folder-root": ft,
+  "folder-sync": Mt,
+  funnel: xt,
+  "gallery-vertical-end": bt,
+  gauge: zt,
+  "git-branch": _t,
+  "git-merge": Ht,
+  "hard-drive-download": Vt,
+  "hard-drive-upload": At,
+  history: Ct,
+  image: Lt,
+  "image-plus": $t,
+  "image-up": qt,
+  images: Pt,
+  layers: Tt,
+  "list-checks": It,
+  "loader-circle": jt,
+  mail: St,
+  moon: Bt,
+  "move-right": Nt,
+  "octagon-x": Ft,
+  "package-minus": Dt,
+  "package-open": Ot,
+  "package-plus": Et,
+  play: Zt,
+  radar: Rt,
+  route: Xt,
+  ruler: Ut,
+  scale: Gt,
+  "scan-eye": Yt,
+  "scan-search": Wt,
+  "scan-text": Jt,
+  scissors: Kt,
+  search: Qt,
+  settings: ea,
+  "shield-check": ta,
+  shuffle: aa,
+  sparkles: oa,
+  split: na,
+  tag: ia,
+  tags: sa,
+  terminal: ca,
+  "text-cursor-input": da,
+  "trash-2": la,
+  "triangle-alert": ra,
+  trophy: ha,
+  video: ya,
+  "wand-sparkles": pa,
+  webhook: ka
+}), va = { class: "ob-flow-preview" }, wa = ["viewBox"], ga = ["d"], fa = ["x", "y"], Ma = ["x", "y"], xa = ["href", "x", "y"], ba = ["x", "y"], za = ["x", "y"], N = 260, F = 100, D = 140, _a = 140, R = 48, O = 26, Pa = /* @__PURE__ */ E({
   __name: "FlowPreview",
   props: {
     preview: {},
-    icons: { default: () => k1 },
+    icons: { default: () => ma },
     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) < _a && (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", va, [
+      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, ga))), 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, fa))), 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, Ma),
+          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, xa)) : (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, ba)),
+          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, za)
         ], 64))), 128))
-      ], 8, m1)) : x("", !0)
+      ], 8, wa)) : z("", !0)
     ]));
   }
 });
 export {
-  $1 as FlowPreview,
-  C1 as FlowViewer,
-  q1 as nodePreviewIconNames,
-  k1 as nodePreviewIcons
+  Pa as FlowPreview,
+  $a as FlowViewer,
+  La as nodePreviewIconNames,
+  ma as nodePreviewIcons
 };