@ovalbee/flow-viewer 0.0.3 → 0.0.5

package/dist/flow-viewer.js

@@ -1,12 +1,15 @@
-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 { defineComponent as R, inject as ne, createElementBlock as r, openBlock as i, unref as M, normalizeClass as U, createElementVNode as f, createCommentVNode as z, createBlock as C, normalizeStyle as F, toDisplayString as V, Fragment as P, computed as q, markRaw as Y, ref as ie, onBeforeUnmount as ce, provide as se, createVNode as de, withCtx as re, Teleport as le, renderList as B, h as G, resolveDynamicComponent as he } from "vue";
+import { Handle as I, Position as j, 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 = {
+const ee = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-flow-viewer-node__header" }, ge = ["innerHTML"], we = { 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: 0,
+  class: "ob-flow-viewer-node__widget-label"
+}, He = {
   key: 1,
   class: "ob-flow-viewer-node__widget-image",
   "aria-hidden": "true"
-}, _e = /* @__PURE__ */ E({
+}, _e = /* @__PURE__ */ R({
   __name: "FlowViewerNode",
   props: {
     id: {},
@@ -30,103 +33,100 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
     events: {}
   },
   setup(t) {
-    const n = t, v = ne(Q), x = n.data.available ? n.data.description : "This node template is unavailable.";
-    return (r, y) => {
+    const n = t, v = ne(ee), x = n.data.available ? n.data.description : "This node template is unavailable.";
+    return (l, p) => {
       var k, b;
-      return i(), l("article", {
-        class: X(["ob-flow-viewer-node", { "ob-flow-viewer-node--unavailable": !t.data.available }]),
+      return i(), r("article", {
+        class: U(["ob-flow-viewer-node", { "ob-flow-viewer-node--unavailable": !t.data.available }]),
         tabindex: "0",
         "aria-label": `${t.data.name} node`,
-        onMouseenter: y[0] || (y[0] = (o) => {
-          var c;
-          return (c = M(v)) == null ? void 0 : c.show(t.data, o);
+        onMouseenter: p[0] || (p[0] = (o) => {
+          var d;
+          return (d = M(v)) == null ? void 0 : d.show(t.data, o);
         }),
-        onMouseleave: y[1] || (y[1] = (o) => {
-          var c;
-          return (c = M(v)) == null ? void 0 : c.hide();
+        onMouseleave: p[1] || (p[1] = (o) => {
+          var d;
+          return (d = M(v)) == null ? void 0 : d.hide();
         }),
-        onClick: y[2] || (y[2] = (o) => {
-          var c;
-          return (c = M(v)) == null ? void 0 : c.show(t.data, o);
+        onClick: p[2] || (p[2] = (o) => {
+          var d;
+          return (d = M(v)) == null ? void 0 : d.show(t.data, o);
         }),
-        onFocus: y[3] || (y[3] = (o) => {
-          var c;
-          return (c = M(v)) == null ? void 0 : c.show(t.data, o);
+        onFocus: p[3] || (p[3] = (o) => {
+          var d;
+          return (d = M(v)) == null ? void 0 : d.show(t.data, o);
         }),
-        onBlur: y[4] || (y[4] = (o) => {
-          var c;
-          return (c = M(v)) == null ? void 0 : c.hide();
+        onBlur: p[4] || (p[4] = (o) => {
+          var d;
+          return (d = M(v)) == null ? void 0 : d.hide();
         })
       }, [
-        m("header", ve, [
-          m("span", {
+        f("header", ve, [
+          f("span", {
             class: "ob-flow-viewer-node__icon",
-            style: B({ "--ob-node-icon-color": ((k = t.data.icon) == null ? void 0 : k.color) ?? "#64748b" }),
+            style: F({ "--ob-node-icon-color": ((k = t.data.icon) == null ? void 0 : k.color) ?? "#64748b" }),
             "aria-hidden": "true"
           }, [
-            (b = t.data.icon) != null && b.svg ? (i(), l("span", {
+            (b = t.data.icon) != null && b.svg ? (i(), r("span", {
               key: 0,
               class: "ob-flow-viewer-node__icon-svg",
               innerHTML: t.data.icon.svg
-            }, null, 8, we)) : (i(), l("span", ge, H(t.data.available ? t.data.name.slice(0, 1).toUpperCase() : "?"), 1))
+            }, null, 8, ge)) : (i(), r("span", we, V(t.data.available ? t.data.name.slice(0, 1).toUpperCase() : "?"), 1))
           ], 4),
-          m("span", fe, [
-            m("strong", Me, H(t.data.name), 1),
-            m("span", xe, H(t.data.key), 1)
+          f("span", fe, [
+            f("strong", Me, V(t.data.name), 1),
+            f("span", xe, V(t.data.key), 1)
           ])
         ]),
-        m("p", be, H(M(x)), 1),
-        t.data.widgetPreview && t.data.available ? (i(), l("div", {
+        f("p", be, V(M(x)), 1),
+        t.data.widgetPreview && t.data.available ? (i(), r("div", {
           key: 0,
-          class: X(["ob-flow-viewer-node__widget", `ob-flow-viewer-node__widget--${t.data.widgetPreview}`]),
+          class: U(["ob-flow-viewer-node__widget", `ob-flow-viewer-node__widget--${t.data.widgetPreview}`]),
           "aria-label": "Widget preview"
         }, [
-          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))
+          t.data.widgetPreview === "button" ? (i(), r("span", ze)) : t.data.widgetPreview === "dataset" ? (i(), r("span", He)) : (i(), r(P, { key: 2 }, [
+            p[5] || (p[5] = f("span", null, null, -1)),
+            p[6] || (p[6] = f("span", null, null, -1))
           ], 64))
         ], 2)) : z("", !0),
-        t.data.connectedHandles.has("target") ? (i(), A(M(I), {
+        t.data.connectedHandles.has("target") ? (i(), C(M(I), {
           key: 1,
           type: "target",
-          position: M(T).Top
+          position: M(j).Top
         }, null, 8, ["position"])) : z("", !0),
-        t.data.connectedHandles.has("left") ? (i(), A(M(I), {
+        t.data.connectedHandles.has("left") ? (i(), C(M(I), {
           key: 2,
           id: "left",
           type: "target",
-          position: M(T).Left
+          position: M(j).Left
         }, null, 8, ["position"])) : z("", !0),
-        t.data.connectedHandles.has("right") ? (i(), A(M(I), {
+        t.data.connectedHandles.has("right") ? (i(), C(M(I), {
           key: 3,
           id: "right",
           type: "target",
-          position: M(T).Right
+          position: M(j).Right
         }, null, 8, ["position"])) : z("", !0),
-        t.data.connectedHandles.has("source") ? (i(), A(M(I), {
+        t.data.connectedHandles.has("source") ? (i(), C(M(I), {
           key: 4,
           type: "source",
-          position: M(T).Bottom
+          position: M(j).Bottom
         }, null, 8, ["position"])) : z("", !0),
-        t.data.connectedHandles.has("left-source") ? (i(), A(M(I), {
+        t.data.connectedHandles.has("left-source") ? (i(), C(M(I), {
           key: 5,
           id: "left-source",
           type: "source",
-          position: M(T).Left
+          position: M(j).Left
         }, null, 8, ["position"])) : z("", !0),
-        t.data.connectedHandles.has("right-source") ? (i(), A(M(I), {
+        t.data.connectedHandles.has("right-source") ? (i(), C(M(I), {
           key: 6,
           id: "right-source",
           type: "source",
-          position: M(T).Right
+          position: M(j).Right
         }, null, 8, ["position"])) : z("", !0)
       ], 42, me);
     };
   }
-}), He = /* @__PURE__ */ E({
+}), Ve = ["innerHTML"], Ae = /* @__PURE__ */ R({
   __name: "FlowViewerNote",
   props: {
     id: {},
@@ -150,31 +150,32 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
     events: {}
   },
   setup(t) {
-    const n = t, v = C(() => ({
+    const n = t, v = q(() => ({
       width: `${n.data.appearance.width}px`,
       minHeight: n.data.appearance.height ? `${n.data.appearance.height}px` : void 0
     }));
-    return (x, r) => (i(), l("article", {
-      class: X(["ob-flow-viewer-note", `ob-flow-viewer-note--${t.data.appearance.color}`]),
-      style: B(v.value)
-    }, H(t.data.content), 7));
+    return (x, l) => (i(), r("article", {
+      class: U(["ob-flow-viewer-note", `ob-flow-viewer-note--${t.data.appearance.color}`]),
+      style: F(v.value),
+      innerHTML: t.data.content
+    }, null, 14, Ve));
   }
-}), 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 = {
+}), Ce = ["data-theme"], qe = ["data-theme"], $e = { class: "ob-flow-viewer-tooltip__header" }, Le = ["innerHTML"], Pe = { key: 1 }, Te = { class: "ob-flow-viewer-tooltip__title-wrap" }, Ie = { class: "ob-flow-viewer-tooltip__body" }, je = {
   key: 0,
   class: "ob-flow-viewer-tooltip__unavailable"
-}, Te = {
+}, Ne = {
   key: 1,
   class: "ob-flow-viewer-tooltip__description"
-}, je = {
+}, Se = {
   key: 2,
   class: "ob-flow-viewer-node__ports"
-}, Se = { class: "ob-flow-viewer-node__port-group" }, Be = {
+}, Be = { class: "ob-flow-viewer-node__port-group" }, Fe = {
   key: 0,
   class: "ob-flow-viewer-node__empty"
-}, Ne = { key: 0 }, Fe = { class: "ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs" }, De = {
+}, De = { key: 0 }, Oe = { class: "ob-flow-viewer-node__port-group ob-flow-viewer-node__port-group--outputs" }, Ee = {
   key: 0,
   class: "ob-flow-viewer-node__empty"
-}, Oe = { key: 0 }, Y = 72, W = 64, Ee = 1.45, qa = /* @__PURE__ */ E({
+}, Ze = { key: 0 }, W = 72, J = 64, Re = 1.45, La = /* @__PURE__ */ R({
   __name: "FlowViewer",
   props: {
     document: {},
@@ -189,82 +190,87 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
   },
   setup(t) {
     const n = t, v = {
-      catalog: G(_e),
-      note: G(He)
+      catalog: Y(_e),
+      note: Y(Ae)
     };
     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 h = a.description ? Math.min(2, Math.max(1, Math.ceil(a.description.length / 34))) : a.available ? 0 : 1, y = h > 0 ? 10 + h * 19.5 : 0, m = a.available && a.widgetPreview ? 10 + (a.widgetPreview === "dataset" ? 72 : 32) : 0;
+      return 60 + y + m;
     }
-    const r = ie(null);
-    let y = null;
+    const l = ie(null);
+    let p = null;
     function k() {
-      y !== null && (clearTimeout(y), y = null);
+      p !== null && (clearTimeout(p), p = null);
     }
     function b() {
-      k(), y = setTimeout(() => {
-        r.value = null, y = null;
+      k(), p = setTimeout(() => {
+        l.value = null, p = null;
       }, 140);
     }
-    se(k);
+    ce(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");
+      for (const y of n.document.edges)
+        y.source === a && h.add(y.sourceHandle ?? "source"), y.target === a && h.add(y.targetHandle ?? "target");
       return h;
     }
-    function c(a, h) {
+    function d(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 = {
+      const y = h.currentTarget;
+      if (!(y instanceof HTMLElement)) return;
+      const m = y.getBoundingClientRect(), s = 12, c = Math.min(404, window.innerWidth - s * 2), w = Math.min(520, window.innerHeight - s * 2);
+      let u = m.right + s + c / 2;
+      u + c / 2 > window.innerWidth - s && (u = m.left - s - c / 2), u = Math.max(c / 2 + s, Math.min(u, window.innerWidth - c / 2 - s)), l.value = {
         node: a,
-        x: g,
-        y: Math.max(s, Math.min(u.top, window.innerHeight - f - s))
+        x: u,
+        y: Math.max(s, Math.min(m.top, window.innerHeight - w - s))
       };
     }
-    function w() {
+    function g() {
       b();
     }
-    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 = n.document.nodes.find((Z) => Z.id === f.source);
-            P && (V.y = Math.max(
-              V.y,
-              g.y + x(P) + Y
+    se(ee, { show: d, hide: g });
+    const H = q(() => {
+      const a = new Map(n.document.nodes.map((c) => [c.id, { ...c.position }])), h = Math.min(...n.document.nodes.map((c) => c.position.x)), y = Math.max(...n.document.nodes.map((c) => c.position.x)), m = (h + y) / 2;
+      for (let c = 0; c < n.document.nodes.length; c += 1)
+        for (const w of n.document.edges) {
+          if (w.sourceHandle || w.targetHandle) continue;
+          const u = a.get(w.source), _ = a.get(w.target);
+          if (!(!u || !_ || Math.abs(u.x - _.x) >= 40) && (_.x = u.x, _.y > u.y)) {
+            const A = n.document.nodes.find((T) => T.id === w.source);
+            A && (_.y = Math.max(
+              _.y,
+              u.y + x(A) + W
             ));
           }
         }
+      for (const c of a.values())
+        c.x = m + (c.x - m) * Re;
       const s = [...n.document.nodes].sort(
-        (d, f) => d.position.y - f.position.y || d.position.x - f.position.x
+        (c, w) => c.position.y - w.position.y || c.position.x - w.position.x
       );
-      for (const [d, f] of s.entries()) {
-        const g = a.get(f.id);
-        if (g)
-          for (const V of s.slice(0, d)) {
-            const P = a.get(V.id);
-            if (!P) continue;
-            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 + x(V) + Y
+      for (const [c, w] of s.entries()) {
+        const u = a.get(w.id);
+        if (u)
+          for (const _ of s.slice(0, c)) {
+            const A = a.get(_.id);
+            if (!A) continue;
+            const T = w.kind === "note" ? w.appearance.width : 260, N = _.kind === "note" ? _.appearance.width : 260;
+            u.x >= A.x + N + J || A.x >= u.x + T + J || (u.y = Math.max(
+              u.y,
+              A.y + x(_) + W
             ));
           }
       }
+      for (const c of n.document.edges) {
+        if (!((c.sourceHandle === "left-source" || c.sourceHandle === "right-source") && (c.targetHandle === "left" || c.targetHandle === "right"))) continue;
+        const u = a.get(c.source), _ = a.get(c.target), A = n.document.nodes.find((N) => N.id === c.source), T = n.document.nodes.find((N) => N.id === c.target);
+        !u || !_ || !A || !T || (_.y = u.y + (x(A) - x(T)) / 2);
+      }
       return a;
-    }), $ = C(() => n.document.nodes.map((a) => {
-      const h = _.value.get(a.id) ?? a.position;
+    }), $ = q(() => n.document.nodes.map((a) => {
+      const h = H.value.get(a.id) ?? a.position;
       return a.kind === "note" ? {
         id: a.id,
         type: "note",
@@ -284,7 +290,7 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
         },
         selectable: !1
       };
-    })), L = C(() => n.document.edges.map((a, h) => ({
+    })), L = q(() => n.document.edges.map((a, h) => ({
       id: `viewer-edge-${h}-${a.source}-${a.target}`,
       source: a.source,
       target: a.target,
@@ -294,36 +300,36 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
       data: a.data,
       style: a.isVisual ? { strokeDasharray: "6 4" } : void 0,
       selectable: !1
-    }))), ee = C(() => {
+    }))), te = q(() => {
       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;
+      let a = 1 / 0, h = 1 / 0, y = -1 / 0, m = -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);
+        const c = H.value.get(s.id) ?? s.position, w = s.kind === "note" ? s.appearance.width : 260, u = x(s);
+        a = Math.min(a, c.x), h = Math.min(h, c.y), y = Math.max(y, c.x + w), m = Math.max(m, c.y + u);
       }
-      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;
+      return { minX: a, minY: h, maxX: y, maxY: m };
+    }), ae = q(() => {
+      const a = n.document.nodes.filter((s) => s.kind === "node"), h = new Set(n.document.edges.map((s) => s.target)), y = a.filter((s) => !h.has(s.id));
+      return [...y.length > 0 ? y : a.length > 0 ? a : n.document.nodes].sort((s, c) => {
+        const w = H.value.get(s.id) ?? s.position, u = H.value.get(c.id) ?? c.position;
+        return w.y - u.y || w.x - u.x;
       })[0];
     });
-    function ae(a) {
+    function oe(a) {
       if (n.fitViewOnInit) {
         a.fitView({ padding: 0.15, maxZoom: 1 });
         return;
       }
-      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;
+      const h = te.value, y = n.initialZoom, m = ae.value, s = m ? H.value.get(m.id) ?? m.position : null, c = (m == null ? void 0 : m.kind) === "note" ? m.appearance.width : 260, w = s ? (s.x + c / 2) * y : (h.minX + h.maxX) / 2 * y;
       a.setViewport({
-        x: a.dimensions.value.width / 2 - f,
-        y: 24 - h.minY * p,
-        zoom: p
+        x: a.dimensions.value.width / 2 - w,
+        y: 24 - h.minY * y,
+        zoom: y
       });
     }
     return (a, h) => {
-      var p, u;
-      return i(), l("div", {
+      var y, m;
+      return i(), r("div", {
         class: "ob-flow-viewer",
         "data-theme": t.theme
       }, [
@@ -347,81 +353,82 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
           "zoom-on-scroll": !1,
           "zoom-on-pinch": !0,
           class: "ob-flow-viewer__canvas",
-          onPaneReady: ae
+          onPaneReady: oe
         }, {
-          default: le(() => [
-            t.showControls ? (i(), A(M(ke), {
+          default: re(() => [
+            t.showControls ? (i(), C(M(ke), {
               key: 0,
               "show-interactive": !1
             })) : z("", !0),
-            t.showMiniMap ? (i(), A(M(ue), {
+            t.showMiniMap ? (i(), C(M(ue), {
               key: 1,
               pannable: !0,
-              zoomable: !0
-            })) : z("", !0)
+              zoomable: !0,
+              "mask-color": t.theme === "dark" ? "rgba(0, 0, 0, 0.55)" : "rgba(240, 240, 240, 0.6)"
+            }, null, 8, ["mask-color"])) : z("", !0)
           ]),
           _: 1
         }, 8, ["nodes", "edges", "min-zoom", "max-zoom", "pan-on-scroll"]),
-        (i(), A(re, { to: "body" }, [
-          r.value ? (i(), l("section", {
+        (i(), C(le, { to: "body" }, [
+          l.value ? (i(), r("section", {
             key: 0,
             class: "ob-flow-viewer-tooltip",
             "data-theme": t.theme,
-            style: B({ left: `${r.value.x}px`, top: `${r.value.y}px` }),
+            style: F({ left: `${l.value.x}px`, top: `${l.value.y}px` }),
             role: "tooltip",
             tabindex: "0",
             onMouseenter: k,
-            onMouseleave: w,
+            onMouseleave: g,
             onFocusin: k,
-            onFocusout: w
+            onFocusout: g
           }, [
-            m("header", Ce, [
-              m("span", {
+            f("header", $e, [
+              f("span", {
                 class: "ob-flow-viewer-tooltip__icon",
-                style: B({ "--ob-node-icon-color": ((p = r.value.node.icon) == null ? void 0 : p.color) ?? "#64748b" }),
+                style: F({ "--ob-node-icon-color": ((y = l.value.node.icon) == null ? void 0 : y.color) ?? "#64748b" }),
                 "aria-hidden": "true"
               }, [
-                (u = r.value.node.icon) != null && u.svg ? (i(), l("span", {
+                (m = l.value.node.icon) != null && m.svg ? (i(), r("span", {
                   key: 0,
                   class: "ob-flow-viewer-node__icon-svg",
-                  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))
+                  innerHTML: l.value.node.icon.svg
+                }, null, 8, Le)) : (i(), r("span", Pe, V(l.value.node.available ? l.value.node.name.slice(0, 1).toUpperCase() : "?"), 1))
               ], 4),
-              m("span", Le, [
-                m("strong", null, H(r.value.node.name), 1),
-                m("code", null, H(r.value.node.key), 1)
+              f("span", Te, [
+                f("strong", null, V(l.value.node.name), 1),
+                f("code", null, V(l.value.node.key), 1)
               ])
             ]),
-            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", {
+            f("div", Ie, [
+              l.value.node.available ? l.value.node.description ? (i(), r("p", Ne, V(l.value.node.description), 1)) : z("", !0) : (i(), r("p", je, " This node template is unavailable. ")),
+              l.value.node.available ? (i(), r("div", Se, [
+                f("div", Be, [
+                  h[0] || (h[0] = f("span", { class: "ob-flow-viewer-node__port-heading" }, "Inputs", -1)),
+                  l.value.node.inputs.length === 0 ? (i(), r("span", Fe, "None")) : z("", !0),
+                  (i(!0), r(P, null, B(l.value.node.inputs, (s) => (i(), r("span", {
                     key: s.key,
                     class: "ob-flow-viewer-node__port"
                   }, [
-                    m("span", null, H(s.name), 1),
-                    s.description ? (i(), l("small", Ne, H(s.description), 1)) : z("", !0)
+                    f("span", null, V(s.name), 1),
+                    s.description ? (i(), r("small", De, V(s.description), 1)) : z("", !0)
                   ]))), 128))
                 ]),
-                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", {
+                f("div", Oe, [
+                  h[1] || (h[1] = f("span", { class: "ob-flow-viewer-node__port-heading" }, "Outputs", -1)),
+                  l.value.node.outputs.length === 0 ? (i(), r("span", Ee, "None")) : z("", !0),
+                  (i(!0), r(P, null, B(l.value.node.outputs, (s) => (i(), r("span", {
                     key: s.key,
                     class: "ob-flow-viewer-node__port"
                   }, [
-                    m("span", null, H(s.name), 1),
-                    s.description ? (i(), l("small", Oe, H(s.description), 1)) : z("", !0)
+                    f("span", null, V(s.name), 1),
+                    s.description ? (i(), r("small", Ze, V(s.description), 1)) : z("", !0)
                   ]))), 128))
                 ])
               ])) : z("", !0)
             ])
-          ], 44, Ae)) : z("", !0)
+          ], 44, qe)) : z("", !0)
         ]))
-      ], 8, Ve);
+      ], 8, Ce);
     };
   }
 });
@@ -431,7 +438,7 @@ const Q = Symbol("flow-viewer-details"), me = ["aria-label"], ve = { class: "ob-
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ze = (t) => {
+const Xe = (t) => {
   for (const n in t)
     if (n.startsWith("aria-") || n === "role" || n === "title")
       return !0;
@@ -443,28 +450,28 @@ const Ze = (t) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const J = (t) => t === "";
+const K = (t) => t === "";
 /**
  * @license lucide-vue-next v0.577.0 - ISC
  *
  * 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.filter((n, v, x) => !!n && n.trim() !== "" && x.indexOf(n) === v).join(" ").trim();
+const Ue = (...t) => t.filter((n, v, x) => !!n && n.trim() !== "" && x.indexOf(n) === v).join(" ").trim();
 /**
  * @license lucide-vue-next v0.577.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const K = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const Q = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 /**
  * @license lucide-vue-next v0.577.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Xe = (t) => t.replace(
+const Ge = (t) => t.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
   (n, v, x) => x ? x.toUpperCase() : v.toLowerCase()
 );
@@ -474,8 +481,8 @@ const Xe = (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 Ue = (t) => {
-  const n = Xe(t);
+const Ye = (t) => {
+  const n = Ge(t);
   return n.charAt(0).toUpperCase() + n.slice(1);
 };
 /**
@@ -484,7 +491,7 @@ const Ue = (t) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var j = {
+var S = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -501,33 +508,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 Ge = ({
+const We = ({
   name: t,
   iconNode: n,
   absoluteStrokeWidth: v,
   "absolute-stroke-width": x,
-  strokeWidth: r,
-  "stroke-width": y,
-  size: k = j.width,
-  color: b = j.stroke,
+  strokeWidth: l,
+  "stroke-width": p,
+  size: k = S.width,
+  color: b = S.stroke,
   ...o
-}, { slots: c }) => U(
+}, { slots: d }) => G(
   "svg",
   {
-    ...j,
+    ...S,
     ...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(
+    "stroke-width": K(v) || K(x) || v === !0 || x === !0 ? Number(l || p || S["stroke-width"]) * 24 / Number(k) : l || p || S["stroke-width"],
+    class: Ue(
       "lucide",
       o.class,
-      ...t ? [`lucide-${K(Ue(t))}-icon`, `lucide-${K(t)}`] : ["lucide-icon"]
+      ...t ? [`lucide-${Q(Ye(t))}-icon`, `lucide-${Q(t)}`] : ["lucide-icon"]
     ),
-    ...!c.default && !Ze(o) && { "aria-hidden": "true" }
+    ...!d.default && !Xe(o) && { "aria-hidden": "true" }
   },
-  [...n.map((w) => U(...w)), ...c.default ? [c.default()] : []]
+  [...n.map((g) => G(...g)), ...d.default ? [d.default()] : []]
 );
 /**
  * @license lucide-vue-next v0.577.0 - ISC
@@ -535,10 +542,10 @@ const Ge = ({
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const e = (t, n) => (v, { slots: x, attrs: r }) => U(
-  Ge,
+const e = (t, n) => (v, { slots: x, attrs: l }) => G(
+  We,
   {
-    ...r,
+    ...l,
     ...v,
     iconNode: n,
     name: t
@@ -551,7 +558,7 @@ const e = (t, n) => (v, { slots: x, attrs: r }) => U(
  * 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-restore", [
+const Je = 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" }],
@@ -564,7 +571,7 @@ const Ye = 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 We = e("archive", [
+const Ke = 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" }]
@@ -575,7 +582,7 @@ const We = e("archive", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Je = e("arrow-down-to-line", [
+const Qe = 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" }]
@@ -586,7 +593,7 @@ const Je = 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 Ke = e("badge-check", [
+const et = e("badge-check", [
   [
     "path",
     {
@@ -602,7 +609,7 @@ const Ke = 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 Qe = e("bot", [
+const tt = 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" }],
@@ -616,7 +623,7 @@ const Qe = e("bot", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const et = e("box", [
+const at = e("box", [
   [
     "path",
     {
@@ -633,7 +640,7 @@ const et = e("box", [
  * 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-circuit", [
+const ot = e("brain-circuit", [
   [
     "path",
     {
@@ -660,7 +667,7 @@ const tt = 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 at = e("brain", [
+const nt = 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" }],
@@ -676,7 +683,7 @@ const at = e("brain", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ot = e("chart-column", [
+const it = 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" }],
@@ -688,7 +695,7 @@ const ot = 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 nt = e("clipboard-check", [
+const ct = e("clipboard-check", [
   ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
   [
     "path",
@@ -705,7 +712,7 @@ const nt = 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 it = e("clock-3", [
+const st = e("clock-3", [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 6v6h4", key: "135r8i" }]
 ]);
@@ -715,7 +722,7 @@ const it = 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 st = e("cloud-download", [
+const dt = 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" }]
@@ -726,7 +733,7 @@ const st = 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 rt = 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" }],
@@ -740,7 +747,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 dt = 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" }]
 ]);
@@ -750,7 +757,7 @@ const dt = e("copy", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const lt = e("cpu", [
+const ht = e("cpu", [
   ["path", { d: "M12 20v2", key: "1lh1kg" }],
   ["path", { d: "M12 2v2", key: "tus03m" }],
   ["path", { d: "M17 20v2", key: "1rnc9c" }],
@@ -772,7 +779,7 @@ const lt = e("cpu", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const rt = e("crop", [
+const yt = 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" }]
 ]);
@@ -782,7 +789,7 @@ const rt = e("crop", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ht = e("crosshair", [
+const pt = 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" }],
@@ -795,7 +802,7 @@ const ht = e("crosshair", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const yt = e("database", [
+const kt = 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" }]
@@ -806,7 +813,7 @@ const yt = e("database", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const pt = e("download", [
+const ut = 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" }]
@@ -817,7 +824,7 @@ const pt = e("download", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const kt = e("eye", [
+const mt = e("eye", [
   [
     "path",
     {
@@ -833,7 +840,7 @@ const kt = e("eye", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ut = e("file-down", [
+const vt = e("file-down", [
   [
     "path",
     {
@@ -851,7 +858,7 @@ const ut = 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 mt = e("files", [
+const gt = 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",
@@ -868,7 +875,7 @@ const mt = e("files", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const vt = 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" }],
@@ -884,7 +891,7 @@ const vt = e("film", [
  * 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-plus", [
+const ft = e("folder-plus", [
   ["path", { d: "M12 10v6", key: "1bos4e" }],
   ["path", { d: "M9 13h6", key: "1uhe8q" }],
   [
@@ -901,7 +908,7 @@ const wt = 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 gt = e("folder-root", [
+const Mt = e("folder-root", [
   [
     "path",
     {
@@ -918,7 +925,7 @@ const gt = 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 ft = e("folder-sync", [
+const xt = e("folder-sync", [
   [
     "path",
     {
@@ -937,7 +944,7 @@ const ft = 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 Mt = e("funnel", [
+const bt = e("funnel", [
   [
     "path",
     {
@@ -952,7 +959,7 @@ const Mt = e("funnel", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const xt = e("gallery-vertical-end", [
+const zt = 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" }]
@@ -963,7 +970,7 @@ const xt = 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 bt = e("gauge", [
+const Ht = e("gauge", [
   ["path", { d: "m12 14 4-4", key: "9kzdfg" }],
   ["path", { d: "M3.34 19a10 10 0 1 1 17.32 0", key: "19p75a" }]
 ]);
@@ -973,7 +980,7 @@ const bt = e("gauge", [
  * 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-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" }]
@@ -984,7 +991,7 @@ const zt = 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 _t = e("git-merge", [
+const Vt = 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" }]
@@ -995,7 +1002,7 @@ const _t = 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 Ht = e("hard-drive-download", [
+const At = 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" }],
@@ -1008,7 +1015,7 @@ const Ht = 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 Vt = e("hard-drive-upload", [
+const Ct = 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" }],
@@ -1021,7 +1028,7 @@ const Vt = 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 At = e("history", [
+const qt = 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" }]
@@ -1032,7 +1039,7 @@ const At = e("history", [
  * 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-up", [
+const $t = e("image-up", [
   [
     "path",
     {
@@ -1050,7 +1057,7 @@ const Ct = 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 qt = e("image-plus", [
+const Lt = 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" }],
@@ -1063,7 +1070,7 @@ const qt = 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 $t = e("image", [
+const Pt = 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" }]
@@ -1074,7 +1081,7 @@ const $t = e("image", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Lt = e("images", [
+const Tt = 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" }],
@@ -1086,7 +1093,7 @@ const Lt = e("images", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Pt = e("layers", [
+const It = e("layers", [
   [
     "path",
     {
@@ -1115,7 +1122,7 @@ const Pt = e("layers", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const It = e("list-checks", [
+const jt = e("list-checks", [
   ["path", { d: "M13 5h8", key: "a7qcls" }],
   ["path", { d: "M13 12h8", key: "h98zly" }],
   ["path", { d: "M13 19h8", key: "c3s6r1" }],
@@ -1128,7 +1135,7 @@ const It = 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 Tt = e("loader-circle", [
+const Nt = e("loader-circle", [
   ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
 ]);
 /**
@@ -1137,7 +1144,7 @@ const Tt = 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 jt = 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" }]
 ]);
@@ -1147,7 +1154,7 @@ const jt = e("mail", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const St = e("moon", [
+const Bt = e("moon", [
   [
     "path",
     {
@@ -1162,7 +1169,7 @@ const St = 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 Ft = e("move-right", [
   ["path", { d: "M18 8L22 12L18 16", key: "1r0oui" }],
   ["path", { d: "M2 12H22", key: "1m8cig" }]
 ]);
@@ -1172,7 +1179,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 Nt = e("octagon-x", [
+const Dt = e("octagon-x", [
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   [
     "path",
@@ -1189,7 +1196,7 @@ const Nt = 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 Ft = e("package-minus", [
+const Ot = e("package-minus", [
   ["path", { d: "M12 22V12", key: "d0xqtd" }],
   ["path", { d: "M16 17h6", key: "1ook5g" }],
   [
@@ -1208,7 +1215,7 @@ const Ft = 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 Dt = e("package-open", [
+const Et = e("package-open", [
   ["path", { d: "M12 22v-9", key: "x3hkom" }],
   [
     "path",
@@ -1238,7 +1245,7 @@ const Dt = 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 Ot = e("package-plus", [
+const Zt = e("package-plus", [
   ["path", { d: "M12 22V12", key: "d0xqtd" }],
   ["path", { d: "M16 17h6", key: "1ook5g" }],
   ["path", { d: "M19 14v6", key: "1ckrd5" }],
@@ -1258,7 +1265,7 @@ const Ot = 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 Et = e("play", [
+const Rt = e("play", [
   [
     "path",
     {
@@ -1273,7 +1280,7 @@ const Et = e("play", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Zt = e("radar", [
+const Xt = 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" }],
@@ -1289,7 +1296,7 @@ const Zt = e("radar", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Rt = e("route", [
+const Ut = 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" }]
@@ -1300,7 +1307,7 @@ const Rt = e("route", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Xt = e("ruler", [
+const Gt = e("ruler", [
   [
     "path",
     {
@@ -1319,7 +1326,7 @@ const Xt = e("ruler", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Ut = e("scale", [
+const Yt = 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" }],
@@ -1332,7 +1339,7 @@ const Ut = e("scale", [
  * 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-eye", [
+const Wt = 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" }],
@@ -1352,7 +1359,7 @@ const Gt = 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 Yt = e("scan-search", [
+const Jt = 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" }],
@@ -1366,7 +1373,7 @@ const Yt = 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 Wt = e("scan-text", [
+const Kt = 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" }],
@@ -1381,7 +1388,7 @@ const Wt = 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 Jt = e("scissors", [
+const Qt = 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" }],
@@ -1394,7 +1401,7 @@ const Jt = e("scissors", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Kt = e("search", [
+const ea = e("search", [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ]);
@@ -1404,7 +1411,7 @@ const Kt = e("search", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const Qt = e("settings", [
+const ta = e("settings", [
   [
     "path",
     {
@@ -1420,7 +1427,7 @@ const Qt = e("settings", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ea = e("shield-check", [
+const aa = e("shield-check", [
   [
     "path",
     {
@@ -1436,7 +1443,7 @@ const ea = 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 ta = e("shuffle", [
+const oa = 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" }],
@@ -1449,7 +1456,7 @@ const ta = e("shuffle", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const aa = e("sparkles", [
+const na = e("sparkles", [
   [
     "path",
     {
@@ -1467,7 +1474,7 @@ const aa = e("sparkles", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const oa = e("split", [
+const ia = 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" }],
@@ -1479,7 +1486,7 @@ const oa = e("split", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const na = e("tag", [
+const ca = e("tag", [
   [
     "path",
     {
@@ -1495,7 +1502,7 @@ const na = e("tag", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ia = e("tags", [
+const sa = e("tags", [
   [
     "path",
     {
@@ -1515,7 +1522,7 @@ const ia = e("tags", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const sa = e("terminal", [
+const da = e("terminal", [
   ["path", { d: "M12 19h8", key: "baeox8" }],
   ["path", { d: "m4 17 6-6-6-6", key: "1yngyt" }]
 ]);
@@ -1525,7 +1532,7 @@ const sa = e("terminal", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ca = e("text-cursor-input", [
+const ra = 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" }],
@@ -1538,7 +1545,7 @@ const ca = 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 da = 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" }],
@@ -1551,7 +1558,7 @@ const da = 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 la = e("triangle-alert", [
+const ha = e("triangle-alert", [
   [
     "path",
     {
@@ -1568,7 +1575,7 @@ const la = 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 ra = e("trophy", [
+const ya = 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" }],
@@ -1582,7 +1589,7 @@ const ra = e("trophy", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ha = e("video", [
+const pa = e("video", [
   [
     "path",
     {
@@ -1598,7 +1605,7 @@ const ha = e("video", [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const ya = e("wand-sparkles", [
+const ka = e("wand-sparkles", [
   [
     "path",
     {
@@ -1620,7 +1627,7 @@ const ya = 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 pa = e("webhook", [
+const ua = e("webhook", [
   [
     "path",
     {
@@ -1630,7 +1637,7 @@ const pa = 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" }]
-]), ka = [
+]), ma = [
   "archive",
   "archive-restore",
   "arrow-down-to-line",
@@ -1704,167 +1711,167 @@ const pa = e("webhook", [
   "video",
   "wand-sparkles",
   "webhook"
-], $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: 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": 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({
+], Pa = Object.freeze(ma), va = Object.freeze({
+  archive: Ke,
+  "archive-restore": Je,
+  "arrow-down-to-line": Qe,
+  "badge-check": et,
+  bot: tt,
+  box: at,
+  brain: nt,
+  "brain-circuit": ot,
+  "chart-column": it,
+  "clipboard-check": ct,
+  "clock-3": st,
+  "cloud-download": dt,
+  combine: rt,
+  copy: lt,
+  cpu: ht,
+  crop: yt,
+  crosshair: pt,
+  database: kt,
+  download: ut,
+  eye: mt,
+  "file-down": vt,
+  files: gt,
+  film: wt,
+  "folder-plus": ft,
+  "folder-root": Mt,
+  "folder-sync": xt,
+  funnel: bt,
+  "gallery-vertical-end": zt,
+  gauge: Ht,
+  "git-branch": _t,
+  "git-merge": Vt,
+  "hard-drive-download": At,
+  "hard-drive-upload": Ct,
+  history: qt,
+  image: Pt,
+  "image-plus": Lt,
+  "image-up": $t,
+  images: Tt,
+  layers: It,
+  "list-checks": jt,
+  "loader-circle": Nt,
+  mail: St,
+  moon: Bt,
+  "move-right": Ft,
+  "octagon-x": Dt,
+  "package-minus": Ot,
+  "package-open": Et,
+  "package-plus": Zt,
+  play: Rt,
+  radar: Xt,
+  route: Ut,
+  ruler: Gt,
+  scale: Yt,
+  "scan-eye": Wt,
+  "scan-search": Jt,
+  "scan-text": Kt,
+  scissors: Qt,
+  search: ea,
+  settings: ta,
+  "shield-check": aa,
+  shuffle: oa,
+  sparkles: na,
+  split: ia,
+  tag: ca,
+  tags: sa,
+  terminal: da,
+  "text-cursor-input": ra,
+  "trash-2": la,
+  "triangle-alert": ha,
+  trophy: ya,
+  video: pa,
+  "wand-sparkles": ka,
+  webhook: ua
+}), ga = { class: "ob-flow-preview" }, wa = ["viewBox"], fa = ["d"], Ma = ["x", "y"], xa = ["x", "y"], ba = ["href", "x", "y"], za = ["x", "y"], Ha = ["x", "y"], D = 260, O = 100, E = 140, _a = 140, X = 48, Z = 26, Ta = /* @__PURE__ */ R({
   __name: "FlowPreview",
   props: {
     preview: {},
-    icons: { default: () => ua },
+    icons: { default: () => va },
     iconUrl: { type: Function, default: void 0 }
   },
   setup(t) {
-    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);
+    const n = t, v = q(() => {
+      var o, d;
+      const k = ((o = n.preview) == null ? void 0 : o.n) ?? [], b = new Map(k.map((g) => [g.id, { x: g.x, y: g.y }]));
+      for (let g = 0; g < k.length; g += 1)
+        for (const H of ((d = n.preview) == null ? void 0 : d.e) ?? []) {
+          const $ = b.get(H.s), L = b.get(H.t);
+          $ && L && Math.abs($.x - L.x) < _a && (L.x = $.x);
         }
-      return k.map((w) => ({
-        ...w,
-        ...b.get(w.id) ?? { x: w.x, y: w.y }
+      return k.map((g) => ({
+        ...g,
+        ...b.get(g.id) ?? { x: g.x, y: g.y }
       }));
-    }), x = C(() => {
+    }), x = q(() => {
       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(
+      let b = 1 / 0, o = 1 / 0, d = -1 / 0, g = -1 / 0;
+      for (const H of k)
+        b = Math.min(b, H.x), o = Math.min(o, H.y), d = Math.max(d, H.x + D), g = Math.max(g, H.y + O);
+      return `${b - E} ${o - E} ${d - b + E * 2} ${g - o + E * 2}`;
+    }), l = q(
       () => new Map(v.value.map((k) => [k.id, k]))
     );
-    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}`;
+    function p(k, b) {
+      const o = l.value.get(k), d = l.value.get(b);
+      if (!o || !d) return "";
+      const g = o.x + D / 2, H = o.y + O / 2, $ = d.x + D / 2, L = d.y + O / 2;
+      return `M ${g} ${H} L ${$} ${L}`;
     }
-    return (k, b) => (i(), l("div", ma, [
-      t.preview && t.preview.n.length > 0 ? (i(), l("svg", {
+    return (k, b) => (i(), r("div", ga, [
+      t.preview && t.preview.n.length > 0 ? (i(), r("svg", {
         key: 0,
         class: "ob-flow-preview__svg",
         viewBox: x.value,
         preserveAspectRatio: "xMidYMid meet"
       }, [
-        (i(!0), l(q, null, S(t.preview.e, (o, c) => (i(), l("path", {
-          key: c,
-          d: y(o.s, o.t),
+        (i(!0), r(P, null, B(t.preview.e, (o, d) => (i(), r("path", {
+          key: d,
+          d: p(o.s, o.t),
           class: "ob-flow-preview__edge",
           "vector-effect": "non-scaling-stroke"
-        }, null, 8, wa))), 128)),
-        (i(!0), l(q, null, S(v.value, (o) => (i(), l("rect", {
+        }, null, 8, fa))), 128)),
+        (i(!0), r(P, null, B(v.value, (o) => (i(), r("rect", {
           key: o.id,
           x: o.x,
           y: o.y,
-          width: N,
-          height: F,
+          width: D,
+          height: O,
           rx: "16",
           class: "ob-flow-preview__node",
           "vector-effect": "non-scaling-stroke"
-        }, null, 8, ga))), 128)),
-        (i(!0), l(q, null, S(v.value, (o) => (i(), l(q, {
+        }, null, 8, Ma))), 128)),
+        (i(!0), r(P, null, B(v.value, (o) => (i(), r(P, {
           key: `content-${o.id}`
         }, [
-          m("rect", {
+          f("rect", {
             x: o.x + 18,
             y: o.y + 18,
             width: "64",
             height: "64",
             rx: "16",
             class: "ob-flow-preview__icon-background",
-            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]), {
+            style: F(o.c ? { fill: o.c } : void 0)
+          }, null, 12, xa),
+          o.i && t.icons[o.i] ? (i(), C(he(t.icons[o.i]), {
             key: 0,
-            x: o.x + O,
-            y: o.y + O,
-            size: R,
+            x: o.x + Z,
+            y: o.y + Z,
+            size: X,
             color: "white",
             "stroke-width": 2.5,
             "aria-hidden": "true"
-          }, null, 8, ["x", "y"])) : o.i && t.iconUrl ? (i(), l("image", {
+          }, null, 8, ["x", "y"])) : o.i && t.iconUrl ? (i(), r("image", {
             key: 1,
             href: t.iconUrl(o.i),
-            x: o.x + O,
-            y: o.y + O,
-            width: R,
-            height: R
-          }, null, 8, Ma)) : (i(), l("text", {
+            x: o.x + Z,
+            y: o.y + Z,
+            width: X,
+            height: X
+          }, null, 8, ba)) : (i(), r("text", {
             key: 2,
             x: o.x + 50,
             y: o.y + 68,
@@ -1872,23 +1879,23 @@ const pa = e("webhook", [
             "font-size": "42",
             "font-family": "sans-serif",
             "text-anchor": "middle"
-          }, " * ", 8, xa)),
-          m("rect", {
+          }, " * ", 8, za)),
+          f("rect", {
             x: o.x + 100,
             y: o.y + 45,
             width: "128",
             height: "10",
             rx: "5",
             class: "ob-flow-preview__line"
-          }, null, 8, ba)
+          }, null, 8, Ha)
         ], 64))), 128))
-      ], 8, va)) : z("", !0)
+      ], 8, wa)) : z("", !0)
     ]));
   }
 });
 export {
-  La as FlowPreview,
-  qa as FlowViewer,
-  $a as nodePreviewIconNames,
-  ua as nodePreviewIcons
+  Ta as FlowPreview,
+  La as FlowViewer,
+  Pa as nodePreviewIconNames,
+  va as nodePreviewIcons
 };