npm - @teamflojo/floimg-studio-ui - Versions diffs - 0.3.3 → 0.3.4 - Mend

@teamflojo/floimg-studio-ui 0.3.3 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { jsxs as i, jsx as e, Fragment as G } from "react/jsx-runtime";
-import { memo as O, useRef as te, useCallback as L, useState as C, useEffect as j, useMemo as de } from "react";
-import ze, { Handle as P, Position as M, applyNodeChanges as Ce, applyEdgeChanges as Ie, MarkerType as Se, Background as Ae, Controls as Le, MiniMap as We, ReactFlowProvider as Pe, useReactFlow as Me } from "reactflow";
+import { memo as O, useRef as re, useCallback as W, useState as I, useEffect as j, useMemo as le } from "react";
+import ze, { Handle as P, Position as T, applyNodeChanges as Ce, applyEdgeChanges as Ie, MarkerType as Se, Background as Ae, Controls as Le, MiniMap as We, ReactFlowProvider as Pe, useReactFlow as Te } from "reactflow";
 import { create as ue } from "zustand";
 import { useQuery as K } from "@tanstack/react-query";
-function Te(r, d) {
+function Me(r, d) {
   let t;
   try {
     t = r();
@@ -20,12 +20,12 @@ function Te(r, d) {
     removeItem: (s) => t.removeItem(s)
   };
 }
-const re = (r) => (d) => {
+const ae = (r) => (d) => {
   try {
     const t = r(d);
     return t instanceof Promise ? t : {
       then(o) {
-        return re(o)(t);
+        return ae(o)(t);
       },
       catch(o) {
         return this;
@@ -37,18 +37,18 @@ const re = (r) => (d) => {
         return this;
       },
       catch(o) {
-        return re(o)(t);
+        return ae(o)(t);
       }
     };
   }
 }, De = (r, d) => (t, o, s) => {
   let n = {
-    storage: Te(() => localStorage),
-    partialize: (w) => w,
+    storage: Me(() => localStorage),
+    partialize: (y) => y,
     version: 0,
-    merge: (w, v) => ({
-      ...v,
-      ...w
+    merge: (y, k) => ({
+      ...k,
+      ...y
     }),
     ...d
   }, p = !1;
@@ -56,88 +56,88 @@ const re = (r) => (d) => {
   let m = n.storage;
   if (!m)
     return r(
-      (...w) => {
+      (...y) => {
         console.warn(
           `[zustand persist middleware] Unable to update item '${n.name}', the given storage is currently unavailable.`
-        ), t(...w);
+        ), t(...y);
       },
       o,
       s
     );
   const c = () => {
-    const w = n.partialize({ ...o() });
+    const y = n.partialize({ ...o() });
     return m.setItem(n.name, {
-      state: w,
+      state: y,
       version: n.version
     });
-  }, g = s.setState;
-  s.setState = (w, v) => (g(w, v), c());
+  }, u = s.setState;
+  s.setState = (y, k) => (u(y, k), c());
   const h = r(
-    (...w) => (t(...w), c()),
+    (...y) => (t(...y), c()),
     o,
     s
   );
   s.getInitialState = () => h;
-  let b;
-  const k = () => {
-    var w, v;
+  let x;
+  const v = () => {
+    var y, k;
     if (!m) return;
-    p = !1, l.forEach((u) => {
-      var N;
-      return u((N = o()) != null ? N : h);
+    p = !1, l.forEach((g) => {
+      var f;
+      return g((f = o()) != null ? f : h);
     });
-    const f = ((v = n.onRehydrateStorage) == null ? void 0 : v.call(n, (w = o()) != null ? w : h)) || void 0;
-    return re(m.getItem.bind(m))(n.name).then((u) => {
-      if (u)
-        if (typeof u.version == "number" && u.version !== n.version) {
+    const z = ((k = n.onRehydrateStorage) == null ? void 0 : k.call(n, (y = o()) != null ? y : h)) || void 0;
+    return ae(m.getItem.bind(m))(n.name).then((g) => {
+      if (g)
+        if (typeof g.version == "number" && g.version !== n.version) {
           if (n.migrate) {
-            const N = n.migrate(
-              u.state,
-              u.version
+            const f = n.migrate(
+              g.state,
+              g.version
             );
-            return N instanceof Promise ? N.then((W) => [!0, W]) : [!0, N];
+            return f instanceof Promise ? f.then((C) => [!0, C]) : [!0, f];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
           );
         } else
-          return [!1, u.state];
+          return [!1, g.state];
       return [!1, void 0];
-    }).then((u) => {
-      var N;
-      const [W, y] = u;
-      if (b = n.merge(
-        y,
-        (N = o()) != null ? N : h
-      ), t(b, !0), W)
+    }).then((g) => {
+      var f;
+      const [C, b] = g;
+      if (x = n.merge(
+        b,
+        (f = o()) != null ? f : h
+      ), t(x, !0), C)
         return c();
     }).then(() => {
-      f == null || f(b, void 0), b = o(), p = !0, a.forEach((u) => u(b));
-    }).catch((u) => {
-      f == null || f(void 0, u);
+      z == null || z(x, void 0), x = o(), p = !0, a.forEach((g) => g(x));
+    }).catch((g) => {
+      z == null || z(void 0, g);
     });
   };
   return s.persist = {
-    setOptions: (w) => {
+    setOptions: (y) => {
       n = {
         ...n,
-        ...w
-      }, w.storage && (m = w.storage);
+        ...y
+      }, y.storage && (m = y.storage);
     },
     clearStorage: () => {
       m == null || m.removeItem(n.name);
     },
     getOptions: () => n,
-    rehydrate: () => k(),
+    rehydrate: () => v(),
     hasHydrated: () => p,
-    onHydrate: (w) => (l.add(w), () => {
-      l.delete(w);
+    onHydrate: (y) => (l.add(y), () => {
+      l.delete(y);
     }),
-    onFinishHydration: (w) => (a.add(w), () => {
-      a.delete(w);
+    onFinishHydration: (y) => (a.add(y), () => {
+      a.delete(y);
     })
-  }, n.skipHydration || k(), b || h;
-}, he = De, T = "/api";
+  }, n.skipHydration || v(), x || h;
+}, he = De, M = "/api";
 async function B(r, d) {
   const t = await fetch(r, {
     ...d,
@@ -153,38 +153,38 @@ async function B(r, d) {
   return t.json();
 }
 async function Ue() {
-  return B(`${T}/nodes/generators`);
+  return B(`${M}/nodes/generators`);
 }
 async function Be() {
-  return B(`${T}/nodes/transforms`);
+  return B(`${M}/nodes/transforms`);
 }
 async function je() {
-  return B(`${T}/nodes/text`);
+  return B(`${M}/nodes/text`);
 }
-async function $e() {
-  return B(`${T}/nodes/vision`);
+async function Re() {
+  return B(`${M}/nodes/vision`);
 }
-async function Re(r, d, t) {
-  return B(`${T}/execute/sync`, {
+async function $e(r, d, t) {
+  return B(`${M}/execute/sync`, {
     method: "POST",
     body: JSON.stringify({ nodes: r, edges: d, aiProviders: t })
   });
 }
 async function Ee(r, d) {
-  return B(`${T}/export/yaml`, {
+  return B(`${M}/export/yaml`, {
     method: "POST",
     body: JSON.stringify({ nodes: r, edges: d })
   });
 }
 async function Ge() {
-  return B(`${T}/images`);
+  return B(`${M}/images`);
 }
-function le(r) {
-  return `${T}/images/${r}/blob`;
+function te(r) {
+  return `${M}/images/${r}/blob`;
 }
 async function qe(r) {
   try {
-    return await B(`${T}/images/${r}/workflow`);
+    return await B(`${M}/images/${r}/workflow`);
   } catch {
     return null;
   }
@@ -192,7 +192,7 @@ async function qe(r) {
 async function Oe(r) {
   const d = new FormData();
   d.append("file", r);
-  const t = await fetch(`${T}/uploads`, {
+  const t = await fetch(`${M}/uploads`, {
     method: "POST",
     body: d
   });
@@ -203,38 +203,38 @@ async function Oe(r) {
   return t.json();
 }
 async function Fe() {
-  return B(`${T}/uploads`);
+  return B(`${M}/uploads`);
 }
 async function Ve(r) {
-  const d = await fetch(`${T}/uploads/${r}`, {
+  const d = await fetch(`${M}/uploads/${r}`, {
     method: "DELETE"
   });
   if (!d.ok)
     throw new Error(`Failed to delete upload: ${d.status}`);
 }
 function fe(r) {
-  return `${T}/uploads/${r}/blob`;
+  return `${M}/uploads/${r}/blob`;
 }
 async function He(r) {
-  return B(`${T}/import`, {
+  return B(`${M}/import`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
 async function Ke(r) {
-  return B(`${T}/import/validate`, {
+  return B(`${M}/import/validate`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
 async function _e(r) {
-  return B(`${T}/generate/workflow`, {
+  return B(`${M}/generate/workflow`, {
     method: "POST",
     body: JSON.stringify(r)
   });
 }
 async function Qe() {
-  return B(`${T}/generate/status`);
+  return B(`${M}/generate/status`);
 }
 const ce = "http://localhost:11434", me = "http://localhost:1234", q = ue()(
   he(
@@ -287,7 +287,7 @@ function pe() {
   const r = Date.now(), d = Math.random().toString(36).substring(2, 8);
   return `wf_${r}_${d}`;
 }
-const x = ue()(
+const w = ue()(
   he(
     (r, d) => ({
       nodes: [],
@@ -421,10 +421,10 @@ const x = ue()(
             params: J(t)
           };
         else {
-          const c = ((l = t.params) == null ? void 0 : l.properties) || {}, g = ((a = c.provider) == null ? void 0 : a.default) || "filesystem";
+          const c = ((l = t.params) == null ? void 0 : l.properties) || {}, u = ((a = c.provider) == null ? void 0 : a.default) || "filesystem";
           n = {
             destination: ((m = c.destination) == null ? void 0 : m.default) || "./output/image.png",
-            provider: g
+            provider: u
           };
         }
         const p = {
@@ -518,7 +518,7 @@ const x = ue()(
           }
         });
         try {
-          const a = await Re(s, n, p), m = {};
+          const a = await $e(s, n, p), m = {};
           for (const c of t)
             m[c.id] = a.status === "completed" ? "completed" : "error";
           a.status === "completed" ? r({
@@ -644,7 +644,7 @@ const x = ue()(
         } = d(), m = Date.now();
         if (n) {
           const c = l.map(
-            (g) => g.id === n ? { ...g, name: t || p, nodes: o, edges: s, updatedAt: m } : g
+            (u) => u.id === n ? { ...u, name: t || p, nodes: o, edges: s, updatedAt: m } : u
           );
           return r({
             savedWorkflows: c,
@@ -652,7 +652,7 @@ const x = ue()(
             hasUnsavedChanges: !1
           }), n;
         } else {
-          const c = pe(), g = {
+          const c = pe(), u = {
             id: c,
             name: t || p,
             nodes: o,
@@ -662,7 +662,7 @@ const x = ue()(
             templateId: a || void 0
           };
           return r({
-            savedWorkflows: [...l, g],
+            savedWorkflows: [...l, u],
             activeWorkflowId: c,
             activeWorkflowName: t || p,
             hasUnsavedChanges: !1
@@ -735,73 +735,73 @@ const x = ue()(
       },
       loadGeneratedWorkflow: (t) => {
         const o = /* @__PURE__ */ new Map(), s = 250, n = 150, p = 3, l = t.nodes.map((m, c) => {
-          const g = V();
-          o.set(m.id, g);
-          const h = m.nodeType.split(":"), b = h[0], k = Math.floor(c / p), v = {
+          const u = V();
+          o.set(m.id, u);
+          const h = m.nodeType.split(":"), x = h[0], v = Math.floor(c / p), k = {
             x: 100 + c % p * s,
-            y: 100 + k * n
+            y: 100 + v * n
           };
-          let f;
-          if (b === "generator")
-            f = {
+          let z;
+          if (x === "generator")
+            z = {
               generatorName: h.slice(1).join(":"),
               params: m.parameters,
               isAI: !0
               // Assume AI since we're generating from AI
             };
-          else if (b === "transform") {
-            const u = h[1];
-            f = {
+          else if (x === "transform") {
+            const g = h[1];
+            z = {
               operation: h.slice(2).join(":"),
-              providerName: u,
+              providerName: g,
               params: m.parameters
             };
-          } else if (b === "input")
-            f = {
+          } else if (x === "input")
+            z = {
               uploadId: void 0,
               filename: void 0,
               mime: void 0
             };
-          else if (b === "vision")
-            f = {
+          else if (x === "vision")
+            z = {
               providerName: h.slice(1).join(":"),
               params: m.parameters
             };
-          else if (b === "text") {
-            const u = h.slice(1).join(":"), N = m.parameters.jsonSchema, W = N != null && N.properties ? {
+          else if (x === "text") {
+            const g = h.slice(1).join(":"), f = m.parameters.jsonSchema, C = f != null && f.properties ? {
               type: "object",
               properties: Object.fromEntries(
-                Object.entries(N.properties).map(([y, A]) => [
-                  y,
+                Object.entries(f.properties).map(([b, L]) => [
+                  b,
                   {
-                    type: A.type || "string",
-                    description: A.description
+                    type: L.type || "string",
+                    description: L.description
                   }
                 ])
               )
             } : void 0;
-            f = {
-              providerName: u,
+            z = {
+              providerName: g,
               params: m.parameters,
-              outputSchema: W
+              outputSchema: C
             };
           } else
-            f = {
+            z = {
               destination: m.parameters.destination || "./output/image.png",
               provider: m.parameters.provider || "filesystem"
             };
           return {
-            id: g,
-            type: b,
-            position: v,
-            data: f
+            id: u,
+            type: x,
+            position: k,
+            data: z
           };
         }), a = t.edges.map((m) => {
-          const c = o.get(m.source) || m.source, g = o.get(m.target) || m.target, h = [m.sourceHandle, m.targetHandle].filter(Boolean).join("_");
+          const c = o.get(m.source) || m.source, u = o.get(m.target) || m.target, h = [m.sourceHandle, m.targetHandle].filter(Boolean).join("_");
           return {
-            id: h ? `edge_${c}_${g}_${h}` : `edge_${c}_${g}`,
+            id: h ? `edge_${c}_${u}_${h}` : `edge_${c}_${u}`,
             source: c,
-            target: g,
+            target: u,
             sourceHandle: m.sourceHandle ?? void 0,
             targetHandle: m.targetHandle ?? void 0
           };
@@ -846,8 +846,8 @@ function J(r) {
 function F(r) {
   return r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
-function ae({ nodeId: r, color: d }) {
-  const t = x((s) => s.previewVisible[r] !== !1), o = x((s) => s.togglePreview);
+function oe({ nodeId: r, color: d }) {
+  const t = w((s) => s.previewVisible[r] !== !1), o = w((s) => s.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
@@ -881,7 +881,7 @@ const Ye = O(function({
   data: t,
   selected: o
 }) {
-  const s = x((g) => g.execution.previews[d]), n = x((g) => g.execution.nodeStatus[d]), p = x((g) => g.previewVisible[d] !== !1), a = F(n) || (o ? "border-blue-500" : "border-blue-200"), m = t.isAI, c = t.acceptsReferenceImages;
+  const s = w((u) => u.execution.previews[d]), n = w((u) => u.execution.nodeStatus[d]), p = w((u) => u.previewVisible[d] !== !1), a = F(n) || (o ? "border-blue-500" : "border-blue-200"), m = t.isAI, c = t.acceptsReferenceImages;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -891,7 +891,7 @@ const Ye = O(function({
           P,
           {
             type: "target",
-            position: M.Top,
+            position: T.Top,
             id: "text",
             className: "w-3 h-3 !bg-pink-500",
             title: "Text input (optional prompt from text/vision node)"
@@ -901,7 +901,7 @@ const Ye = O(function({
           P,
           {
             type: "target",
-            position: M.Left,
+            position: T.Left,
             id: "references",
             className: "w-3 h-3 !bg-violet-500",
             style: { top: "50%" },
@@ -913,17 +913,17 @@ const Ye = O(function({
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-blue-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-blue-700 dark:text-blue-400", children: t.generatorName }),
-            /* @__PURE__ */ e(ae, { nodeId: d, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(oe, { nodeId: d, color: "text-blue-500 dark:text-blue-400" })
           ] }),
           m && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
           c && /* @__PURE__ */ e("div", { className: "text-[10px] text-violet-500 dark:text-violet-400 mb-1", children: "← Connect reference images" }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, g]) => typeof g != "object" || g === null).slice(0, 2).map(([g, h]) => /* @__PURE__ */ i("div", { className: "truncate", children: [
-            g,
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, h]) => /* @__PURE__ */ i("div", { className: "truncate", children: [
+            u,
             ": ",
             String(h).slice(0, 20)
-          ] }, g)) })
+          ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-blue-500" })
+        /* @__PURE__ */ e(P, { type: "source", position: T.Right, className: "w-3 h-3 !bg-blue-500" })
       ]
     }
   );
@@ -932,7 +932,7 @@ const Ye = O(function({
   data: t,
   selected: o
 }) {
-  const s = x((g) => g.execution.previews[d]), n = x((g) => g.execution.nodeStatus[d]), p = x((g) => g.previewVisible[d] !== !1), a = F(n) || (o ? "border-teal-500" : "border-teal-200"), m = t.isAI, c = t.acceptsReferenceImages;
+  const s = w((u) => u.execution.previews[d]), n = w((u) => u.execution.nodeStatus[d]), p = w((u) => u.previewVisible[d] !== !1), a = F(n) || (o ? "border-teal-500" : "border-teal-200"), m = t.isAI, c = t.acceptsReferenceImages;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -942,18 +942,18 @@ const Ye = O(function({
           P,
           {
             type: "target",
-            position: M.Top,
+            position: T.Top,
             id: "text",
             className: "w-3 h-3 !bg-pink-500",
             title: "Text input (optional prompt from text/vision node)"
           }
         ),
-        /* @__PURE__ */ e(P, { type: "target", position: M.Left, id: "image", className: "w-3 h-3 !bg-teal-500" }),
+        /* @__PURE__ */ e(P, { type: "target", position: T.Left, id: "image", className: "w-3 h-3 !bg-teal-500" }),
         c && /* @__PURE__ */ e(
           P,
           {
             type: "target",
-            position: M.Bottom,
+            position: T.Bottom,
             id: "references",
             className: "w-3 h-3 !bg-violet-500",
             title: `Reference images (up to ${t.maxReferenceImages || 13})`
@@ -981,7 +981,7 @@ const Ye = O(function({
               }
             ),
             /* @__PURE__ */ e(
-              ae,
+              oe,
               {
                 nodeId: d,
                 color: m ? "text-purple-500 dark:text-purple-400" : "text-teal-500 dark:text-teal-400"
@@ -990,24 +990,24 @@ const Ye = O(function({
           ] }),
           m && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
           c && /* @__PURE__ */ e("div", { className: "text-[10px] text-violet-500 dark:text-violet-400 mb-1", children: "↓ Connect reference images" }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, g]) => typeof g != "object" || g === null).slice(0, 2).map(([g, h]) => /* @__PURE__ */ i("div", { className: "truncate", children: [
-            g,
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, h]) => /* @__PURE__ */ i("div", { className: "truncate", children: [
+            u,
             ": ",
             String(h).slice(0, 20)
-          ] }, g)) })
+          ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-teal-500" })
+        /* @__PURE__ */ e(P, { type: "source", position: T.Right, className: "w-3 h-3 !bg-teal-500" })
       ]
     }
   );
 }), Ze = O(function({ id: d, data: t, selected: o }) {
-  const s = x((l) => l.execution.nodeStatus[d]), p = F(s) || (o ? "border-green-500" : "border-green-200");
+  const s = w((l) => l.execution.nodeStatus[d]), p = F(s) || (o ? "border-green-500" : "border-green-200");
   return /* @__PURE__ */ i(
     "div",
     {
       className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${p}`,
       children: [
-        /* @__PURE__ */ e(P, { type: "target", position: M.Left, className: "w-3 h-3 !bg-green-500" }),
+        /* @__PURE__ */ e(P, { type: "target", position: T.Left, className: "w-3 h-3 !bg-green-500" }),
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
           /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-green-500" }),
           /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-green-700 dark:text-green-400", children: "Save" })
@@ -1017,51 +1017,51 @@ const Ye = O(function({
     }
   );
 }), et = O(function({ id: d, data: t, selected: o }) {
-  const s = x((v) => v.execution.previews[d]), n = x((v) => v.execution.nodeStatus[d]), p = x((v) => v.previewVisible[d] !== !1), l = x((v) => v.updateNodeData), a = te(null), c = F(n) || (o ? "border-amber-500" : "border-amber-200"), g = L(
-    async (v) => {
+  const s = w((k) => k.execution.previews[d]), n = w((k) => k.execution.nodeStatus[d]), p = w((k) => k.previewVisible[d] !== !1), l = w((k) => k.updateNodeData), a = re(null), c = F(n) || (o ? "border-amber-500" : "border-amber-200"), u = W(
+    async (k) => {
       try {
-        const f = await Oe(v);
+        const z = await Oe(k);
         l(d, {
-          uploadId: f.id,
-          filename: f.filename,
-          mime: f.mime
+          uploadId: z.id,
+          filename: z.filename,
+          mime: z.mime
         });
-      } catch (f) {
-        console.error("Upload failed:", f);
+      } catch (z) {
+        console.error("Upload failed:", z);
       }
     },
     [d, l]
-  ), h = L(
-    (v) => {
-      v.preventDefault(), v.stopPropagation();
-      const f = v.dataTransfer.files[0];
-      f && f.type.startsWith("image/") && g(f);
+  ), h = W(
+    (k) => {
+      k.preventDefault(), k.stopPropagation();
+      const z = k.dataTransfer.files[0];
+      z && z.type.startsWith("image/") && u(z);
     },
-    [g]
-  ), b = L((v) => {
-    v.preventDefault(), v.stopPropagation();
-  }, []), k = L(
-    (v) => {
-      var u;
-      const f = (u = v.target.files) == null ? void 0 : u[0];
-      f && g(f);
+    [u]
+  ), x = W((k) => {
+    k.preventDefault(), k.stopPropagation();
+  }, []), v = W(
+    (k) => {
+      var g;
+      const z = (g = k.target.files) == null ? void 0 : g[0];
+      z && u(z);
     },
-    [g]
-  ), w = s || (t.uploadId ? fe(t.uploadId) : null);
+    [u]
+  ), y = s || (t.uploadId ? fe(t.uploadId) : null);
   return /* @__PURE__ */ i(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
       onDrop: h,
-      onDragOver: b,
+      onDragOver: x,
       children: [
-        w && p ? /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: w, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : w ? null : /* @__PURE__ */ e(
+        y && p ? /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: y, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : y ? null : /* @__PURE__ */ e(
           "div",
           {
             className: "bg-amber-50 dark:bg-amber-900/30 border-b border-amber-100 dark:border-amber-800 h-24 flex items-center justify-center cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
             onClick: () => {
-              var v;
-              return (v = a.current) == null ? void 0 : v.click();
+              var k;
+              return (k = a.current) == null ? void 0 : k.click();
             },
             children: /* @__PURE__ */ i("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
               /* @__PURE__ */ e("div", { className: "text-2xl mb-1", children: "+" }),
@@ -1076,18 +1076,18 @@ const Ye = O(function({
             type: "file",
             accept: "image/*",
             className: "hidden",
-            onChange: k
+            onChange: v
           }
         ),
         /* @__PURE__ */ i("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-amber-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-amber-700 dark:text-amber-400", children: "Input" }),
-            /* @__PURE__ */ e(ae, { nodeId: d, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(oe, { nodeId: d, color: "text-amber-500 dark:text-amber-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: t.filename || "No image selected" })
         ] }),
-        /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-amber-500" })
+        /* @__PURE__ */ e(P, { type: "source", position: T.Right, className: "w-3 h-3 !bg-amber-500" })
       ]
     }
   );
@@ -1096,19 +1096,19 @@ const Ye = O(function({
   data: t,
   selected: o
 }) {
-  var c, g, h;
-  const s = x((b) => b.execution.nodeStatus[d]), n = x((b) => {
-    var k;
-    return (k = b.execution.dataOutputs) == null ? void 0 : k[d];
+  var c, u, h;
+  const s = w((x) => x.execution.nodeStatus[d]), n = w((x) => {
+    var v;
+    return (v = x.execution.dataOutputs) == null ? void 0 : v[d];
   }), l = F(s) || (o ? "border-cyan-500" : "border-cyan-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
   return /* @__PURE__ */ i(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${l}`,
       children: [
-        /* @__PURE__ */ e(P, { type: "target", position: M.Left, className: "w-3 h-3 !bg-cyan-500" }),
+        /* @__PURE__ */ e(P, { type: "target", position: T.Left, className: "w-3 h-3 !bg-cyan-500" }),
         n && /* @__PURE__ */ e("div", { className: "bg-cyan-50 dark:bg-cyan-900/30 border-b border-cyan-100 dark:border-cyan-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ i("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
-          (g = n.content) == null ? void 0 : g.slice(0, 200),
+          (u = n.content) == null ? void 0 : u.slice(0, 200),
           (((h = n.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
         /* @__PURE__ */ i("div", { className: "px-4 py-3", children: [
@@ -1132,16 +1132,16 @@ const Ye = O(function({
           ] }) : null }),
           m && /* @__PURE__ */ i("div", { className: "mt-2 pt-2 border-t border-cyan-200 dark:border-cyan-800", children: [
             /* @__PURE__ */ e("div", { className: "text-[10px] text-cyan-500 dark:text-cyan-400 font-medium mb-1", children: "Outputs:" }),
-            a.map(([b]) => /* @__PURE__ */ i(
+            a.map(([x]) => /* @__PURE__ */ i(
               "div",
               {
                 className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
                 children: [
                   /* @__PURE__ */ e("span", { className: "w-1.5 h-1.5 rounded-full bg-cyan-400" }),
-                  b
+                  x
                 ]
               },
-              b
+              x
             ))
           ] })
         ] }),
@@ -1150,45 +1150,45 @@ const Ye = O(function({
             P,
             {
               type: "source",
-              position: M.Right,
+              position: T.Right,
               id: "output",
               className: "w-3 h-3 !bg-cyan-500",
               style: { top: "50%" },
               title: "Full JSON output"
             }
           ),
-          a.map(([b, k], w) => /* @__PURE__ */ e(
+          a.map(([x, v], y) => /* @__PURE__ */ e(
             P,
             {
               type: "source",
-              position: M.Right,
-              id: `output.${b}`,
+              position: T.Right,
+              id: `output.${x}`,
               className: "w-2.5 h-2.5 !bg-cyan-400",
               style: {
-                top: `${70 + w * 14}%`
+                top: `${70 + y * 14}%`
               },
-              title: `${b}: ${k.description || k.type}`
+              title: `${x}: ${v.description || v.type}`
             },
-            b
+            x
           ))
-        ] }) : /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-cyan-500" })
+        ] }) : /* @__PURE__ */ e(P, { type: "source", position: T.Right, className: "w-3 h-3 !bg-cyan-500" })
       ]
     }
   );
 }), rt = O(function({ id: d, data: t, selected: o }) {
-  var c, g, h;
-  const s = x((b) => b.execution.nodeStatus[d]), n = x((b) => {
-    var k;
-    return (k = b.execution.dataOutputs) == null ? void 0 : k[d];
+  var c, u, h;
+  const s = w((x) => x.execution.nodeStatus[d]), n = w((x) => {
+    var v;
+    return (v = x.execution.dataOutputs) == null ? void 0 : v[d];
   }), l = F(s) || (o ? "border-pink-500" : "border-pink-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
   return /* @__PURE__ */ i(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${l}`,
       children: [
-        /* @__PURE__ */ e(P, { type: "target", position: M.Left, className: "w-3 h-3 !bg-pink-500" }),
+        /* @__PURE__ */ e(P, { type: "target", position: T.Left, className: "w-3 h-3 !bg-pink-500" }),
         n && /* @__PURE__ */ e("div", { className: "bg-pink-50 dark:bg-pink-900/30 border-b border-pink-100 dark:border-pink-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ i("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
-          (g = n.content) == null ? void 0 : g.slice(0, 200),
+          (u = n.content) == null ? void 0 : u.slice(0, 200),
           (((h = n.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
         /* @__PURE__ */ i("div", { className: "px-4 py-3", children: [
@@ -1209,16 +1209,16 @@ const Ye = O(function({
           ] }) : null }),
           m && /* @__PURE__ */ i("div", { className: "mt-2 pt-2 border-t border-pink-200 dark:border-pink-800", children: [
             /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 font-medium mb-1", children: "Outputs:" }),
-            a.map(([b]) => /* @__PURE__ */ i(
+            a.map(([x]) => /* @__PURE__ */ i(
               "div",
               {
                 className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
                 children: [
                   /* @__PURE__ */ e("span", { className: "w-1.5 h-1.5 rounded-full bg-pink-400" }),
-                  b
+                  x
                 ]
               },
-              b
+              x
             ))
           ] })
         ] }),
@@ -1227,28 +1227,28 @@ const Ye = O(function({
             P,
             {
               type: "source",
-              position: M.Right,
+              position: T.Right,
               id: "output",
               className: "w-3 h-3 !bg-pink-500",
               style: { top: "50%" },
               title: "Full JSON output"
             }
           ),
-          a.map(([b, k], w) => /* @__PURE__ */ e(
+          a.map(([x, v], y) => /* @__PURE__ */ e(
             P,
             {
               type: "source",
-              position: M.Right,
-              id: `output.${b}`,
+              position: T.Right,
+              id: `output.${x}`,
               className: "w-2.5 h-2.5 !bg-pink-400",
               style: {
-                top: `${70 + w * 14}%`
+                top: `${70 + y * 14}%`
               },
-              title: `${b}: ${k.description || k.type}`
+              title: `${x}: ${v.description || v.type}`
             },
-            b
+            x
           ))
-        ] }) : /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-pink-500" })
+        ] }) : /* @__PURE__ */ e(P, { type: "source", position: T.Right, className: "w-3 h-3 !bg-pink-500" })
       ]
     }
   );
@@ -1271,40 +1271,56 @@ const Ye = O(function({
   style: {
     stroke: "#64748b",
     strokeWidth: 2
-  }
+  },
+  // Make edges easier to select
+  interactionWidth: 20
 };
 function it() {
-  const r = x((h) => h.nodes), d = x((h) => h.edges), t = x((h) => h.setNodes), o = x((h) => h.setEdges), s = x((h) => h.addEdge), n = x((h) => h.setSelectedNode), p = L(
+  const r = w((h) => h.nodes), d = w((h) => h.edges), t = w((h) => h.setNodes), o = w((h) => h.setEdges), s = w((h) => h.addEdge), n = w((h) => h.setSelectedNode), p = W(
     (h) => {
-      const { source: b, target: k } = h;
-      if (!b || !k) return !1;
-      const w = r.find((u) => u.id === b), v = r.find((u) => u.id === k);
-      return !(!w || !v || w.type === "save" || v.type === "generator" || v.type === "input" || d.find(
-        (u) => u.target === k && u.targetHandle === h.targetHandle
-      ) || b === k);
+      const { source: x, target: v, targetHandle: y } = h;
+      if (!x || !v) return !1;
+      const k = r.find((g) => g.id === x), z = r.find((g) => g.id === v);
+      if (!k || !z || k.type === "save") return !1;
+      if (z.type === "generator") {
+        const g = z.data;
+        return !!(y === "text" && g.isAI || y === "references" && g.acceptsReferenceImages);
+      }
+      return !(z.type === "input" || x === v);
     },
-    [r, d]
-  ), l = L(
+    [r]
+  ), l = W(
     (h) => {
       t(Ce(h, r));
     },
     [r, t]
-  ), a = L(
+  ), a = W(
     (h) => {
       o(Ie(h, d));
     },
     [d, o]
-  ), m = L(
+  ), m = W(
     (h) => {
+      if (!(h.targetHandle === "references")) {
+        const v = d.filter((y) => {
+          if (y.target !== h.target) return !1;
+          const k = y.targetHandle || null, z = h.targetHandle || null;
+          return k === z || (h.targetHandle === "text" || h.targetHandle === "image") && !y.targetHandle || !h.targetHandle && y.targetHandle === "image";
+        });
+        if (v.length > 0) {
+          const y = new Set(v.map((k) => k.id));
+          o(d.filter((k) => !y.has(k.id)));
+        }
+      }
       s(h);
     },
-    [s]
-  ), c = L(
-    (h, b) => {
-      n(b.id);
+    [s, d, o]
+  ), c = W(
+    (h, x) => {
+      n(x.id);
     },
     [n]
-  ), g = L(() => {
+  ), u = W(() => {
     n(null);
   }, [n]);
   return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ i(
@@ -1316,13 +1332,15 @@ function it() {
       onEdgesChange: a,
       onConnect: m,
       onNodeClick: c,
-      onPaneClick: g,
+      onPaneClick: u,
       nodeTypes: at,
       defaultEdgeOptions: ot,
       isValidConnection: p,
       nodesDraggable: !0,
       nodesConnectable: !0,
       elementsSelectable: !0,
+      edgesFocusable: !0,
+      deleteKeyCode: ["Backspace", "Delete"],
       proOptions: { hideAttribution: !0 },
       fitView: !0,
       snapToGrid: !0,
@@ -1336,7 +1354,7 @@ function it() {
   ) });
 }
 function nt({ onSelect: r }) {
-  const [d, t] = C([]), [o, s] = C(!0), [n, p] = C(null), l = async () => {
+  const [d, t] = I([]), [o, s] = I(!0), [n, p] = I(null), l = async () => {
     try {
       s(!0);
       const c = await Fe();
@@ -1350,10 +1368,10 @@ function nt({ onSelect: r }) {
   j(() => {
     l();
   }, []);
-  const a = async (c, g) => {
-    if (g.stopPropagation(), !!confirm("Delete this upload?"))
+  const a = async (c, u) => {
+    if (u.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await Ve(c), t((h) => h.filter((b) => b.id !== c));
+        await Ve(c), t((h) => h.filter((x) => x.id !== c));
       } catch (h) {
         console.error("Failed to delete:", h);
       }
@@ -1385,7 +1403,7 @@ function nt({ onSelect: r }) {
         /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
           "button",
           {
-            onClick: (g) => a(c.id, g),
+            onClick: (u) => a(c.id, u),
             className: "p-1 bg-red-500 rounded text-white text-xs hover:bg-red-600",
             children: "Delete"
           }
@@ -1398,33 +1416,33 @@ function nt({ onSelect: r }) {
   )) }) });
 }
 function st() {
-  const r = x((y) => y.setGenerators), d = x((y) => y.setTransforms), t = x((y) => y.setTextProviders), o = x((y) => y.setVisionProviders), s = x((y) => y.generators), n = x((y) => y.transforms), p = x((y) => y.textProviders), l = x((y) => y.visionProviders), a = x((y) => y.addNode), [m, c] = C(!1), { data: g } = K({
+  const r = w((b) => b.setGenerators), d = w((b) => b.setTransforms), t = w((b) => b.setTextProviders), o = w((b) => b.setVisionProviders), s = w((b) => b.generators), n = w((b) => b.transforms), p = w((b) => b.textProviders), l = w((b) => b.visionProviders), a = w((b) => b.addNode), [m, c] = I(!1), { data: u } = K({
     queryKey: ["generators"],
     queryFn: Ue
   }), { data: h } = K({
     queryKey: ["transforms"],
     queryFn: Be
-  }), { data: b } = K({
+  }), { data: x } = K({
     queryKey: ["textProviders"],
     queryFn: je
-  }), { data: k } = K({
+  }), { data: v } = K({
     queryKey: ["visionProviders"],
-    queryFn: $e
+    queryFn: Re
   });
   j(() => {
-    g && r(g);
-  }, [g, r]), j(() => {
+    u && r(u);
+  }, [u, r]), j(() => {
     h && d(h);
   }, [h, d]), j(() => {
-    b && t(b);
-  }, [b, t]), j(() => {
-    k && o(k);
-  }, [k, o]);
-  const w = (y, A) => {
-    y.dataTransfer.setData("application/json", JSON.stringify(A)), y.dataTransfer.effectAllowed = "move";
-  }, v = (y) => {
-    a(y, { x: 250, y: 150 + Math.random() * 100 });
-  }, f = {
+    x && t(x);
+  }, [x, t]), j(() => {
+    v && o(v);
+  }, [v, o]);
+  const y = (b, L) => {
+    b.dataTransfer.setData("application/json", JSON.stringify(L)), b.dataTransfer.effectAllowed = "move";
+  }, k = (b) => {
+    a(b, { x: 250, y: 150 + Math.random() * 100 });
+  }, z = {
     id: "input:upload",
     type: "input",
     name: "upload",
@@ -1435,7 +1453,7 @@ function st() {
       type: "object",
       properties: {}
     }
-  }, u = {
+  }, g = {
     id: "save:filesystem",
     type: "save",
     name: "save",
@@ -1456,16 +1474,16 @@ function st() {
         }
       }
     }
-  }, N = s.reduce(
-    (y, A) => {
-      const S = A.category || "Other";
-      return y[S] || (y[S] = []), y[S].push(A), y;
+  }, f = s.reduce(
+    (b, L) => {
+      const A = L.category || "Other";
+      return b[A] || (b[A] = []), b[A].push(L), b;
     },
     {}
-  ), W = n.reduce(
-    (y, A) => {
-      const S = A.category || "Other";
-      return y[S] || (y[S] = []), y[S].push(A), y;
+  ), C = n.reduce(
+    (b, L) => {
+      const A = L.category || "Other";
+      return b[A] || (b[A] = []), b[A].push(L), b;
     },
     {}
   );
@@ -1490,8 +1508,8 @@ function st() {
         "div",
         {
           draggable: !0,
-          onDragStart: (y) => w(y, f),
-          onDoubleClick: () => v(f),
+          onDragStart: (b) => y(b, z),
+          onDoubleClick: () => k(z),
           className: "px-3 py-2 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 rounded cursor-grab active:cursor-grabbing hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
           children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-amber-700 dark:text-amber-300", children: "Upload Image" }),
@@ -1503,76 +1521,76 @@ function st() {
     ] }),
     /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-2", children: "Generators" }),
-      Object.entries(N).map(([y, A]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
-        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: y }),
-        A.map((S) => /* @__PURE__ */ i(
+      Object.entries(f).map(([b, L]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: b }),
+        L.map((A) => /* @__PURE__ */ i(
           "div",
           {
             draggable: !0,
-            onDragStart: (R) => w(R, S),
-            onDoubleClick: () => v(S),
+            onDragStart: ($) => y($, A),
+            onDoubleClick: () => k(A),
             className: "px-3 py-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors",
             children: [
-              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-blue-700 dark:text-blue-300", children: S.label }),
-              S.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: S.description })
+              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-blue-700 dark:text-blue-300", children: A.label }),
+              A.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: A.description })
             ]
           },
-          S.id
+          A.id
         ))
-      ] }, y))
+      ] }, b))
     ] }),
     /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-teal-600 dark:text-teal-400 uppercase tracking-wide mb-2", children: "Transforms" }),
-      Object.entries(W).map(([y, A]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
-        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: y }),
-        A.map((S) => /* @__PURE__ */ i(
+      Object.entries(C).map(([b, L]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: b }),
+        L.map((A) => /* @__PURE__ */ i(
           "div",
           {
             draggable: !0,
-            onDragStart: (R) => w(R, S),
-            onDoubleClick: () => v(S),
+            onDragStart: ($) => y($, A),
+            onDoubleClick: () => k(A),
             className: "px-3 py-2 bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-teal-100 dark:hover:bg-teal-900/50 transition-colors",
             children: [
-              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-teal-700 dark:text-teal-300", children: S.label }),
-              S.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: S.description })
+              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-teal-700 dark:text-teal-300", children: A.label }),
+              A.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: A.description })
             ]
           },
-          S.id
+          A.id
         ))
-      ] }, y))
+      ] }, b))
     ] }),
     p.length > 0 && /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-pink-600 dark:text-pink-400 uppercase tracking-wide mb-2", children: "AI Text" }),
-      p.map((y) => /* @__PURE__ */ i(
+      p.map((b) => /* @__PURE__ */ i(
         "div",
         {
           draggable: !0,
-          onDragStart: (A) => w(A, y),
-          onDoubleClick: () => v(y),
+          onDragStart: (L) => y(L, b),
+          onDoubleClick: () => k(b),
           className: "px-3 py-2 bg-pink-50 dark:bg-pink-900/30 border border-pink-200 dark:border-pink-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-pink-100 dark:hover:bg-pink-900/50 transition-colors",
           children: [
-            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-pink-700 dark:text-pink-300", children: y.label }),
-            y.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: y.description })
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-pink-700 dark:text-pink-300", children: b.label }),
+            b.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: b.description })
           ]
         },
-        y.id
+        b.id
       ))
     ] }),
     l.length > 0 && /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-cyan-600 dark:text-cyan-400 uppercase tracking-wide mb-2", children: "AI Vision" }),
-      l.map((y) => /* @__PURE__ */ i(
+      l.map((b) => /* @__PURE__ */ i(
         "div",
         {
           draggable: !0,
-          onDragStart: (A) => w(A, y),
-          onDoubleClick: () => v(y),
+          onDragStart: (L) => y(L, b),
+          onDoubleClick: () => k(b),
           className: "px-3 py-2 bg-cyan-50 dark:bg-cyan-900/30 border border-cyan-200 dark:border-cyan-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-cyan-100 dark:hover:bg-cyan-900/50 transition-colors",
           children: [
-            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-cyan-700 dark:text-cyan-300", children: y.label }),
-            y.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: y.description })
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-cyan-700 dark:text-cyan-300", children: b.label }),
+            b.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: b.description })
           ]
         },
-        y.id
+        b.id
       ))
     ] }),
     /* @__PURE__ */ i("div", { className: "mb-6", children: [
@@ -1581,8 +1599,8 @@ function st() {
         "div",
         {
           draggable: !0,
-          onDragStart: (y) => w(y, u),
-          onDoubleClick: () => v(u),
+          onDragStart: (b) => y(b, g),
+          onDoubleClick: () => k(g),
           className: "px-3 py-2 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded cursor-grab active:cursor-grabbing hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors",
           children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Save" }),
@@ -1594,68 +1612,81 @@ function st() {
   ] }) });
 }
 function dt() {
-  var b, k, w, v;
-  const r = x((f) => f.selectedNodeId), d = x((f) => f.nodes), t = x((f) => f.generators), o = x((f) => f.transforms), s = x((f) => f.textProviders), n = x((f) => f.visionProviders), p = x((f) => f.updateNodeData), l = x((f) => f.deleteNode), a = d.find((f) => f.id === r);
+  var v, y, k, z;
+  const r = w((g) => g.selectedNodeId), d = w((g) => g.nodes), t = w((g) => g.generators), o = w((g) => g.transforms), s = w((g) => g.textProviders), n = w((g) => g.visionProviders), p = w((g) => g.updateNodeData), l = w((g) => g.deleteNode), a = d.find((g) => g.id === r);
   if (!a)
     return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 p-4", children: /* @__PURE__ */ e("div", { className: "text-gray-500 dark:text-zinc-400 text-sm", children: "Select a node to edit its properties" }) });
   let m, c = "";
   if (a.type === "generator") {
-    const f = a.data, u = t.find((N) => N.name === f.generatorName);
-    m = (b = u == null ? void 0 : u.params) == null ? void 0 : b.properties, c = (u == null ? void 0 : u.label) || f.generatorName;
+    const g = a.data, f = t.find((C) => C.name === g.generatorName);
+    m = (v = f == null ? void 0 : f.params) == null ? void 0 : v.properties, c = (f == null ? void 0 : f.label) || g.generatorName;
   } else if (a.type === "transform") {
-    const f = a.data, u = o.find((N) => N.name === f.operation);
-    m = (k = u == null ? void 0 : u.params) == null ? void 0 : k.properties, c = (u == null ? void 0 : u.label) || f.operation;
+    const g = a.data, f = o.find((C) => C.name === g.operation);
+    m = (y = f == null ? void 0 : f.params) == null ? void 0 : y.properties, c = (f == null ? void 0 : f.label) || g.operation;
   } else if (a.type === "save") {
-    const u = a.data.provider === "floimg-cloud";
-    c = u ? "Save to FloImg Cloud" : "Save", m = {
+    const f = a.data.provider === "floimg-cloud";
+    c = f ? "Save to FloImg Cloud" : "Save", m = {
       destination: {
         type: "string",
-        title: u ? "Filename" : "Destination",
-        description: u ? "Filename for cloud storage" : "File path to save the image"
+        title: f ? "Filename" : "Destination",
+        description: f ? "Filename for cloud storage" : "File path to save the image"
       }
     };
   } else if (a.type === "text") {
-    const f = a.data, u = s.find((N) => N.name === f.providerName);
-    m = (w = u == null ? void 0 : u.params) == null ? void 0 : w.properties, c = (u == null ? void 0 : u.label) || f.providerName;
+    const g = a.data, f = s.find((C) => C.name === g.providerName);
+    m = (k = f == null ? void 0 : f.params) == null ? void 0 : k.properties, c = (f == null ? void 0 : f.label) || g.providerName;
   } else if (a.type === "vision") {
-    const f = a.data, u = n.find((N) => N.name === f.providerName);
-    m = (v = u == null ? void 0 : u.params) == null ? void 0 : v.properties, c = (u == null ? void 0 : u.label) || f.providerName;
+    const g = a.data, f = n.find((C) => C.name === g.providerName);
+    m = (z = f == null ? void 0 : f.params) == null ? void 0 : z.properties, c = (f == null ? void 0 : f.label) || g.providerName;
   }
-  const g = (f, u) => {
+  const u = (g, f) => {
     if (a.type === "generator") {
-      const N = a.data;
+      const C = a.data;
       p(a.id, {
-        params: { ...N.params, [f]: u }
+        params: { ...C.params, [g]: f }
       });
     } else if (a.type === "transform") {
-      const N = a.data;
+      const C = a.data;
       p(a.id, {
-        params: { ...N.params, [f]: u }
+        params: { ...C.params, [g]: f }
       });
     } else if (a.type === "save")
-      p(a.id, { [f]: u });
+      p(a.id, { [g]: f });
     else if (a.type === "text") {
-      const N = a.data;
+      const C = a.data;
       p(a.id, {
-        params: { ...N.params, [f]: u }
+        params: { ...C.params, [g]: f }
       });
     } else if (a.type === "vision") {
-      const N = a.data;
+      const C = a.data;
       p(a.id, {
-        params: { ...N.params, [f]: u }
+        params: { ...C.params, [g]: f }
       });
     }
-  }, h = (f) => {
+  }, h = (g) => {
     if (a.type === "generator")
-      return a.data.params[f];
+      return a.data.params[g];
     if (a.type === "transform")
-      return a.data.params[f];
+      return a.data.params[g];
     if (a.type === "save")
-      return a.data[f];
+      return a.data[g];
     if (a.type === "text")
-      return a.data.params[f];
+      return a.data.params[g];
     if (a.type === "vision")
-      return a.data.params[f];
+      return a.data.params[g];
+  }, x = (g, f) => {
+    if (a.type === "generator" && a.data.generatorName === "shapes") {
+      const C = h("shapeType") || "rectangle", b = h("fillType") || "solid";
+      if (g === "sides") return C === "polygon";
+      if (g === "points" || g === "innerRadius") return C === "star";
+      if (g === "cornerRadius") return C === "rectangle";
+      if (g === "fillColor") return b === "solid";
+      if (g === "gradientType" || g === "gradientColor1" || g === "gradientColor2" || g === "gradientAngle")
+        return b === "gradient";
+      if (g === "patternType" || g === "patternColor" || g === "patternBackground" || g === "patternScale")
+        return b === "pattern";
+    }
+    return !0;
   };
   return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ i("div", { className: "p-4", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-4", children: [
@@ -1669,15 +1700,15 @@ function dt() {
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: m && Object.entries(m).map(([f, u]) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: m && Object.entries(m).filter(([g, f]) => x(g)).map(([g, f]) => /* @__PURE__ */ e(
       lt,
       {
-        name: f,
-        field: u,
-        value: h(f),
-        onChange: (N) => g(f, N)
+        name: g,
+        field: f,
+        value: h(g),
+        onChange: (C) => u(g, C)
       },
-      f
+      g
     )) }),
     (a.type === "text" || a.type === "vision") && /* @__PURE__ */ e(
       ct,
@@ -1793,38 +1824,38 @@ function lt({ name: r, field: d, value: t, onChange: o }) {
   ] });
 }
 function ct({ nodeId: r, outputSchema: d, updateNodeData: t }) {
-  const [o, s] = C(""), n = (d == null ? void 0 : d.properties) || {}, p = Object.entries(n), l = () => {
+  const [o, s] = I(""), n = (d == null ? void 0 : d.properties) || {}, p = Object.entries(n), l = () => {
     if (!o.trim()) return;
-    const g = {
+    const u = {
       type: "object",
       properties: {
         ...n,
         [o.trim()]: { type: "string" }
       }
     };
-    t(r, { outputSchema: g }), s("");
-  }, a = (g) => {
+    t(r, { outputSchema: u }), s("");
+  }, a = (u) => {
     const h = { ...n };
-    delete h[g], Object.keys(h).length === 0 ? t(r, { outputSchema: void 0 }) : t(r, {
+    delete h[u], Object.keys(h).length === 0 ? t(r, { outputSchema: void 0 }) : t(r, {
       outputSchema: { type: "object", properties: h }
     });
-  }, m = (g, h) => {
+  }, m = (u, h) => {
     t(r, {
       outputSchema: {
         type: "object",
         properties: {
           ...n,
-          [g]: { ...n[g], type: h }
+          [u]: { ...n[u], type: h }
         }
       }
     });
-  }, c = (g, h) => {
+  }, c = (u, h) => {
     t(r, {
       outputSchema: {
         type: "object",
         properties: {
           ...n,
-          [g]: { ...n[g], description: h || void 0 }
+          [u]: { ...n[u], description: h || void 0 }
         }
       }
     });
@@ -1835,19 +1866,19 @@ function ct({ nodeId: r, outputSchema: d, updateNodeData: t }) {
       /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-500", children: p.length > 0 ? `${p.length} output${p.length > 1 ? "s" : ""}` : "No outputs defined" })
     ] }),
     /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-3", children: "Define output properties to enable connecting individual JSON fields to other nodes." }),
-    p.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: p.map(([g, h]) => /* @__PURE__ */ i(
+    p.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: p.map(([u, h]) => /* @__PURE__ */ i(
       "div",
       {
         className: "flex items-center gap-2 p-2 bg-pink-50 dark:bg-pink-900/20 rounded border border-pink-200 dark:border-pink-800",
         children: [
           /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e("span", { className: "text-sm font-medium text-pink-700 dark:text-pink-300 truncate", children: g }),
+              /* @__PURE__ */ e("span", { className: "text-sm font-medium text-pink-700 dark:text-pink-300 truncate", children: u }),
               /* @__PURE__ */ i(
                 "select",
                 {
                   value: h.type,
-                  onChange: (b) => m(g, b.target.value),
+                  onChange: (x) => m(u, x.target.value),
                   className: "text-xs px-1.5 py-0.5 rounded border border-pink-300 dark:border-pink-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300",
                   children: [
                     /* @__PURE__ */ e("option", { value: "string", children: "string" }),
@@ -1864,7 +1895,7 @@ function ct({ nodeId: r, outputSchema: d, updateNodeData: t }) {
               {
                 type: "text",
                 value: h.description || "",
-                onChange: (b) => c(g, b.target.value),
+                onChange: (x) => c(u, x.target.value),
                 placeholder: "Description (optional)",
                 className: "mt-1 w-full text-xs px-2 py-1 rounded border border-pink-200 dark:border-pink-700 bg-white dark:bg-zinc-800 text-gray-600 dark:text-zinc-400 placeholder-gray-400 dark:placeholder-zinc-500"
               }
@@ -1873,7 +1904,7 @@ function ct({ nodeId: r, outputSchema: d, updateNodeData: t }) {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => a(g),
+              onClick: () => a(u),
               className: "text-pink-500 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300 p-1",
               title: "Remove property",
               children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -1889,7 +1920,7 @@ function ct({ nodeId: r, outputSchema: d, updateNodeData: t }) {
           )
         ]
       },
-      g
+      u
     )) }),
     /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
@@ -1897,8 +1928,8 @@ function ct({ nodeId: r, outputSchema: d, updateNodeData: t }) {
         {
           type: "text",
           value: o,
-          onChange: (g) => s(g.target.value),
-          onKeyDown: (g) => g.key === "Enter" && l(),
+          onChange: (u) => s(u.target.value),
+          onKeyDown: (u) => u.key === "Enter" && l(),
           placeholder: "Property name...",
           className: "flex-1 px-2 py-1.5 text-sm border border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100 placeholder-gray-400 dark:placeholder-zinc-500"
         }
@@ -1933,8 +1964,8 @@ function mt(r, d) {
     a && p.push(a);
     const m = s.get(l) || [];
     for (const c of m) {
-      const g = (o.get(c) || 1) - 1;
-      o.set(c, g), g === 0 && n.push(c);
+      const u = (o.get(c) || 1) - 1;
+      o.set(c, u), u === 0 && n.push(c);
     }
   }
   return p;
@@ -1953,7 +1984,7 @@ function gt(r, d, t) {
     case "generator": {
       const l = r.data;
       s.push(l.generatorName);
-      const a = l.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, g]) => `  ${c}: ${H(g)}`).join(`,
+      const a = l.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${H(u)}`).join(`,
 `);
       return {
         code: `// Generate image using ${l.generatorName}
@@ -1970,7 +2001,7 @@ const ${o} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      const l = r.data, a = l.params || {}, m = Object.entries(a).filter(([, g]) => g !== void 0 && g !== "").map(([g, h]) => `${g}: ${H(h)}`).join(", "), c = p || "image";
+      const l = r.data, a = l.params || {}, m = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `${u}: ${H(h)}`).join(", "), c = p || "image";
       return {
         code: `// Apply ${l.operation} transform
 const ${o} = await flo.transform(${c}, "${l.operation}"${m ? `, { ${m} }` : ""});`,
@@ -1980,7 +2011,7 @@ const ${o} = await flo.transform(${c}, "${l.operation}"${m ? `, { ${m} }` : ""})
     case "vision": {
       const l = r.data;
       s.push(l.providerName);
-      const a = l.params || {}, m = p || "image", c = Object.entries(a).filter(([, g]) => g !== void 0 && g !== "").map(([g, h]) => `  ${g}: ${H(h)}`).join(`,
+      const a = l.params || {}, m = p || "image", c = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `  ${u}: ${H(h)}`).join(`,
 `);
       return {
         code: `// Analyze image with ${l.providerName}
@@ -1993,7 +2024,7 @@ ${c}
     case "text": {
       const l = r.data;
       s.push(l.providerName);
-      const a = l.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, g]) => `  ${c}: ${H(g)}`).join(`,
+      const a = l.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${H(u)}`).join(`,
 `);
       return {
         code: `// Generate text with ${l.providerName}
@@ -2027,9 +2058,9 @@ function ut(r, d) {
     o.set(m.id, pt(m));
   const s = /* @__PURE__ */ new Set(), n = [];
   for (const m of t) {
-    const { code: c, imports: g } = gt(m, d, o);
+    const { code: c, imports: u } = gt(m, d, o);
     n.push(c);
-    for (const h of g)
+    for (const h of u)
       s.add(h);
   }
   const p = [];
@@ -2059,67 +2090,67 @@ runWorkflow().catch(console.error);
 ` + a;
 }
 function ht({ isOpen: r, onClose: d, onImport: t }) {
-  const [o, s] = C(""), [n, p] = C(!1), [l, a] = C(null), [m, c] = C(!1), g = L(async () => {
+  const [o, s] = I(""), [n, p] = I(!1), [l, a] = I(null), [m, c] = I(!1), u = W(async () => {
     if (!o.trim()) {
       a({ message: "Please enter or paste YAML content" });
       return;
     }
     p(!0), a(null);
     try {
-      const u = await He(o);
-      u.success ? (t(u.nodes, u.edges, u.name), s(""), d()) : a({
-        message: u.error || "Import failed",
-        line: u.line,
-        column: u.column
+      const g = await He(o);
+      g.success ? (t(g.nodes, g.edges, g.name), s(""), d()) : a({
+        message: g.error || "Import failed",
+        line: g.line,
+        column: g.column
       });
-    } catch (u) {
-      a({ message: u instanceof Error ? u.message : "Import failed" });
+    } catch (g) {
+      a({ message: g instanceof Error ? g.message : "Import failed" });
     } finally {
       p(!1);
     }
-  }, [o, t, d]), h = L(async () => {
+  }, [o, t, d]), h = W(async () => {
     if (!o.trim()) {
       a({ message: "Please enter or paste YAML content" });
       return;
     }
     p(!0), a(null);
     try {
-      const u = await Ke(o);
-      u.valid ? (a(null), a({ message: "Valid YAML!" }), setTimeout(() => a(null), 2e3)) : u.errors.length > 0 && a(u.errors[0]);
-    } catch (u) {
-      a({ message: u instanceof Error ? u.message : "Validation failed" });
+      const g = await Ke(o);
+      g.valid ? (a(null), a({ message: "Valid YAML!" }), setTimeout(() => a(null), 2e3)) : g.errors.length > 0 && a(g.errors[0]);
+    } catch (g) {
+      a({ message: g instanceof Error ? g.message : "Validation failed" });
     } finally {
       p(!1);
     }
-  }, [o]), b = L(async (u) => {
-    if (!u.name.endsWith(".yaml") && !u.name.endsWith(".yml")) {
+  }, [o]), x = W(async (g) => {
+    if (!g.name.endsWith(".yaml") && !g.name.endsWith(".yml")) {
       a({ message: "Please upload a .yaml or .yml file" });
       return;
     }
     try {
-      const N = await u.text();
-      s(N), a(null);
+      const f = await g.text();
+      s(f), a(null);
     } catch {
       a({ message: "Failed to read file" });
     }
-  }, []), k = L((u) => {
-    u.preventDefault(), c(!0);
-  }, []), w = L((u) => {
-    u.preventDefault(), c(!1);
-  }, []), v = L(
-    (u) => {
-      u.preventDefault(), c(!1);
-      const N = u.dataTransfer.files[0];
-      N && b(N);
+  }, []), v = W((g) => {
+    g.preventDefault(), c(!0);
+  }, []), y = W((g) => {
+    g.preventDefault(), c(!1);
+  }, []), k = W(
+    (g) => {
+      g.preventDefault(), c(!1);
+      const f = g.dataTransfer.files[0];
+      f && x(f);
     },
-    [b]
-  ), f = L(
-    (u) => {
-      var W;
-      const N = (W = u.target.files) == null ? void 0 : W[0];
-      N && b(N);
+    [x]
+  ), z = W(
+    (g) => {
+      var C;
+      const f = (C = g.target.files) == null ? void 0 : C[0];
+      f && x(f);
     },
-    [b]
+    [x]
   );
   return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ i("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
@@ -2146,9 +2177,9 @@ function ht({ isOpen: r, onClose: d, onImport: t }) {
       /* @__PURE__ */ i(
         "div",
         {
-          onDragOver: k,
-          onDragLeave: w,
-          onDrop: v,
+          onDragOver: v,
+          onDragLeave: y,
+          onDrop: k,
           className: `border-2 border-dashed rounded-lg p-4 mb-4 text-center transition-colors ${m ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20" : "border-gray-300 dark:border-zinc-600"}`,
           children: [
             /* @__PURE__ */ e(
@@ -2156,7 +2187,7 @@ function ht({ isOpen: r, onClose: d, onImport: t }) {
               {
                 type: "file",
                 accept: ".yaml,.yml",
-                onChange: f,
+                onChange: z,
                 className: "hidden",
                 id: "yaml-file-input"
               }
@@ -2200,8 +2231,8 @@ function ht({ isOpen: r, onClose: d, onImport: t }) {
         "textarea",
         {
           value: o,
-          onChange: (u) => {
-            s(u.target.value), a(null);
+          onChange: (g) => {
+            s(g.target.value), a(null);
           },
           placeholder: `name: My Workflow
 steps:
@@ -2256,7 +2287,7 @@ steps:
         /* @__PURE__ */ i(
           "button",
           {
-            onClick: g,
+            onClick: u,
             disabled: n || !o.trim(),
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
             children: [
@@ -2296,42 +2327,42 @@ function ft({
   hideAttribution: o = !1,
   hideWorkflowLibrary: s = !1
 } = {}) {
-  const n = x((z) => z.execution), p = x((z) => z.execute), l = x((z) => z.exportToYaml), a = x((z) => z.importFromYaml), m = x((z) => z.nodes), c = x((z) => z.edges), g = q((z) => z.openSettings), h = x((z) => z.activeWorkflowName), b = x((z) => z.hasUnsavedChanges), k = x((z) => z.saveWorkflow), w = x((z) => z.toggleLibrary), v = x((z) => z.setActiveWorkflowName), f = x((z) => z.selectedNodeId), u = x((z) => z.duplicateNode), [N, W] = C(!1), [y, A] = C(!1), [S, R] = C("yaml"), [Q, Y] = C(""), [I, D] = C(""), [E, $] = C(null), [be, X] = C(!1), [ie, Z] = C("");
+  const n = w((N) => N.execution), p = w((N) => N.execute), l = w((N) => N.exportToYaml), a = w((N) => N.importFromYaml), m = w((N) => N.nodes), c = w((N) => N.edges), u = q((N) => N.openSettings), h = w((N) => N.activeWorkflowName), x = w((N) => N.hasUnsavedChanges), v = w((N) => N.saveWorkflow), y = w((N) => N.toggleLibrary), k = w((N) => N.setActiveWorkflowName), z = w((N) => N.selectedNodeId), g = w((N) => N.duplicateNode), [f, C] = I(!1), [b, L] = I(!1), [A, $] = I("yaml"), [Q, Y] = I(""), [S, D] = I(""), [E, R] = I(null), [be, X] = I(!1), [ne, Z] = I("");
   j(() => {
-    const z = () => {
-      $("New workflow created"), setTimeout(() => $(null), 2e3);
+    const N = () => {
+      R("New workflow created"), setTimeout(() => R(null), 2e3);
     };
-    return window.addEventListener("new-workflow-created", z), () => window.removeEventListener("new-workflow-created", z);
+    return window.addEventListener("new-workflow-created", N), () => window.removeEventListener("new-workflow-created", N);
   }, []);
-  const ee = L(() => {
-    m.length !== 0 && (k(), $("Saved!"), setTimeout(() => $(null), 2e3));
-  }, [m.length, k]), xe = () => {
+  const ee = W(() => {
+    m.length !== 0 && (v(), R("Saved!"), setTimeout(() => R(null), 2e3));
+  }, [m.length, v]), xe = () => {
     Z(h), X(!0);
-  }, ne = () => {
-    const z = ie.trim();
-    z && z !== h && v(z), X(!1);
-  }, se = L(() => {
-    f && u(f);
-  }, [f, u]);
+  }, se = () => {
+    const N = ne.trim();
+    N && N !== h && k(N), X(!1);
+  }, de = W(() => {
+    z && g(z);
+  }, [z, g]);
   j(() => {
-    function z(U) {
-      (U.metaKey || U.ctrlKey) && U.key === "s" && (U.preventDefault(), ee()), (U.metaKey || U.ctrlKey) && U.key === "d" && (U.preventDefault(), se());
+    function N(U) {
+      (U.metaKey || U.ctrlKey) && U.key === "s" && (U.preventDefault(), ee()), (U.metaKey || U.ctrlKey) && U.key === "d" && (U.preventDefault(), de());
     }
-    return document.addEventListener("keydown", z), () => document.removeEventListener("keydown", z);
-  }, [ee, se]);
+    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
+  }, [ee, de]);
   const ye = async () => {
     await p();
   }, we = async () => {
-    const z = await l();
-    Y(z);
+    const N = await l();
+    Y(N);
     const U = ut(m, c);
-    D(U), W(!0);
-  }, ke = () => {
-    const z = S === "yaml" ? Q : I;
-    navigator.clipboard.writeText(z);
-  }, ve = L(
-    (z, U, Ne) => {
-      a(z, U, Ne), $("Workflow imported!"), setTimeout(() => $(null), 2e3);
+    D(U), C(!0);
+  }, ve = () => {
+    const N = A === "yaml" ? Q : S;
+    navigator.clipboard.writeText(N);
+  }, ke = W(
+    (N, U, Ne) => {
+      a(N, U, Ne), R("Workflow imported!"), setTimeout(() => R(null), 2e3);
     },
     [a]
   );
@@ -2341,7 +2372,7 @@ function ft({
         !s && /* @__PURE__ */ e(
           "button",
           {
-            onClick: w,
+            onClick: y,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md",
             title: "My Workflows",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -2374,11 +2405,11 @@ function ft({
             "input",
             {
               type: "text",
-              value: ie,
-              onChange: (z) => Z(z.target.value),
-              onBlur: ne,
-              onKeyDown: (z) => {
-                z.key === "Enter" && ne(), z.key === "Escape" && (Z(h), X(!1));
+              value: ne,
+              onChange: (N) => Z(N.target.value),
+              onBlur: se,
+              onKeyDown: (N) => {
+                N.key === "Enter" && se(), N.key === "Escape" && (Z(h), X(!1));
               },
               className: "w-48 px-2 py-1 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500 text-gray-900 dark:text-zinc-100",
               autoFocus: !0
@@ -2392,7 +2423,7 @@ function ft({
               children: h
             }
           ),
-          b && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
+          x && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
           E && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: E })
         ] }),
         /* @__PURE__ */ i("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
@@ -2406,7 +2437,7 @@ function ft({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: g,
+            onClick: u,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md",
             title: "AI Settings",
             children: /* @__PURE__ */ i("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
@@ -2452,7 +2483,7 @@ function ft({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => A(!0),
+            onClick: () => L(!0),
             className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600",
             children: "Import"
           }
@@ -2530,10 +2561,10 @@ function ft({
         " image",
         n.imageIds.length !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex gap-2", children: n.imageUrls.slice(0, 4).map((z, U) => /* @__PURE__ */ e("a", { href: z, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex gap-2", children: n.imageUrls.slice(0, 4).map((N, U) => /* @__PURE__ */ e("a", { href: N, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
         "img",
         {
-          src: z,
+          src: N,
           alt: "Generated",
           className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
         }
@@ -2543,7 +2574,7 @@ function ft({
       "Error: ",
       n.error
     ] }) }),
-    N && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ i("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col", children: [
+    f && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ i("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col", children: [
       /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Export Workflow" }),
@@ -2551,16 +2582,16 @@ function ft({
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => R("yaml"),
-                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${S === "yaml" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
+                onClick: () => $("yaml"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${A === "yaml" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "YAML"
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => R("javascript"),
-                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${S === "javascript" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
+                onClick: () => $("javascript"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${A === "javascript" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "JavaScript"
               }
             )
@@ -2569,7 +2600,7 @@ function ft({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => W(!1),
+            onClick: () => C(!1),
             className: "text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200",
             children: /* @__PURE__ */ e("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -2583,14 +2614,14 @@ function ft({
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: S === "yaml" ? Q : I }) }),
+      /* @__PURE__ */ e("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: A === "yaml" ? Q : S }) }),
       /* @__PURE__ */ i("div", { className: "flex justify-between items-center px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
-        /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: S === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
+        /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: A === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
         /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: ke,
+              onClick: ve,
               className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600",
               children: "Copy to Clipboard"
             }
@@ -2598,7 +2629,7 @@ function ft({
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => W(!1),
+              onClick: () => C(!1),
               className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
               children: "Close"
             }
@@ -2609,15 +2640,15 @@ function ft({
     /* @__PURE__ */ e(
       ht,
       {
-        isOpen: y,
-        onClose: () => A(!1),
-        onImport: ve
+        isOpen: b,
+        onClose: () => L(!1),
+        onImport: ke
       }
     )
   ] });
 }
 function bt() {
-  const r = x((a) => a.loadTemplate), [d, t] = C(null), {
+  const r = w((a) => a.loadTemplate), [d, t] = I(null), {
     data: o,
     isLoading: s,
     error: n,
@@ -2695,14 +2726,14 @@ function xt({ image: r, onLoadWorkflow: d, isLoading: t }) {
       /* @__PURE__ */ e(
         "a",
         {
-          href: le(r.id),
+          href: te(r.id),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block aspect-square bg-gray-100 dark:bg-zinc-900",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: le(r.id),
+              src: te(r.id),
               alt: r.filename,
               className: "w-full h-full object-cover",
               loading: "lazy"
@@ -2710,17 +2741,38 @@ function xt({ image: r, onLoadWorkflow: d, isLoading: t }) {
           )
         }
       ),
-      /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
-        "button",
-        {
-          onClick: (n) => {
-            n.preventDefault(), d();
-          },
-          disabled: t,
-          className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
-          children: t ? "Loading..." : "Load Workflow"
-        }
-      ) })
+      /* @__PURE__ */ i("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: (n) => {
+              n.preventDefault(), d();
+            },
+            disabled: t,
+            className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
+            children: t ? "Loading..." : "Load Workflow"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "a",
+          {
+            href: te(r.id),
+            download: r.filename,
+            onClick: (n) => n.stopPropagation(),
+            className: "p-1.5 bg-zinc-700 text-white rounded-lg hover:bg-zinc-600",
+            title: "Download image",
+            children: /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+              }
+            ) })
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ i("div", { className: "p-3", children: [
       /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-800 dark:text-white truncate", children: r.filename }),
@@ -2973,7 +3025,7 @@ const yt = {
       { id: "e3", source: "transform-corners", target: "transform-png" }
     ]
   }
-}, kt = {
+}, vt = {
   id: "framework-usage",
   name: "Framework Usage Stats",
   description: "Blog-ready comparison chart with optimized sizing and fast web loading",
@@ -3095,7 +3147,7 @@ const yt = {
       { id: "e3", source: "transform-padding", target: "transform-webp" }
     ]
   }
-}, vt = {
+}, kt = {
   id: "traffic-breakdown",
   name: "Traffic by Device",
   description: "Analytics breakdown optimized for Slack sharing and weekly reports",
@@ -3598,8 +3650,8 @@ const yt = {
 }, It = [
   yt,
   wt,
-  kt,
   vt,
+  kt,
   Nt,
   zt,
   Ct
@@ -4003,7 +4055,7 @@ const yt = {
       { id: "e2", source: "transform-bg", target: "transform-caption" }
     ]
   }
-}, Mt = {
+}, Tt = {
   id: "cloud-ai-social",
   name: "AI Art to Social Post",
   description: "Generate creative AI art, optimize for social media",
@@ -4080,13 +4132,13 @@ const yt = {
       { id: "e3", source: "transform-caption", target: "transform-webp" }
     ]
   }
-}, Tt = [
+}, Mt = [
   St,
   At,
   Lt,
   Wt,
   Pt,
-  Mt
+  Tt
 ], Dt = {
   id: "social-media-kit",
   name: "Social Media Kit",
@@ -4408,7 +4460,7 @@ const socialKit = await floimg.pipeline(heroImage, [
       { id: "e3", source: "input-1", target: "transform-dramatic" }
     ]
   }
-}, $t = {
+}, Rt = {
   id: "responsive-images",
   name: "Responsive Image Pipeline",
   description: "Generate thumbnail, mobile, tablet, desktop, and retina sizes from one source",
@@ -4512,7 +4564,7 @@ const responsive = await floimg.from(source)
       { id: "e5", source: "input-1", target: "transform-retina" }
     ]
   }
-}, Rt = {
+}, $t = {
   id: "team-headshots",
   name: "Team Headshot Standardizer",
   description: "Standardize team photos with consistent sizing and professional styling",
@@ -4979,8 +5031,8 @@ const responsive = await floimg.from(source)
   Ut,
   Bt,
   jt,
-  $t,
   Rt,
+  $t,
   Et,
   Gt,
   qt,
@@ -5400,15 +5452,15 @@ const responsive = await floimg.from(source)
   Kt,
   _t,
   Qt
-], oe = [
+], ie = [
   ...It,
-  ...Tt,
+  ...Mt,
   ...Ft,
   ...Jt
-], _ = oe.filter((r) => !r.requiresCloud);
-oe.filter((r) => r.requiresCloud);
+], _ = ie.filter((r) => !r.requiresCloud);
+ie.filter((r) => r.requiresCloud);
 function Yt(r) {
-  return oe.find((d) => d.id === r);
+  return ie.find((d) => d.id === r);
 }
 function hr(r) {
   return _.find((d) => d.id === r);
@@ -5431,14 +5483,14 @@ function ge(r) {
   return Yt(r);
 }
 function Zt({ onSelect: r }) {
-  const [d, t] = C(null), [o, s] = C(""), n = de(() => Xt(), []), p = de(() => {
+  const [d, t] = I(null), [o, s] = I(""), n = le(() => Xt(), []), p = le(() => {
     let l = _;
     if (d && (l = l.filter((a) => a.category === d)), o) {
       const a = o.toLowerCase();
       l = l.filter(
         (m) => {
           var c;
-          return m.name.toLowerCase().includes(a) || m.description.toLowerCase().includes(a) || m.generator.toLowerCase().includes(a) || ((c = m.tags) == null ? void 0 : c.some((g) => g.toLowerCase().includes(a)));
+          return m.name.toLowerCase().includes(a) || m.description.toLowerCase().includes(a) || m.generator.toLowerCase().includes(a) || ((c = m.tags) == null ? void 0 : c.some((u) => u.toLowerCase().includes(a)));
         }
       );
     }
@@ -5595,11 +5647,11 @@ function tr({
   onRename: s,
   onDuplicate: n
 }) {
-  const [p, l] = C(!1), [a, m] = C(r.name), [c, g] = C(!1), h = () => {
+  const [p, l] = I(!1), [a, m] = I(r.name), [c, u] = I(!1), h = () => {
     a.trim() && a !== r.name && s(a.trim()), l(!1);
-  }, b = (k) => {
-    const w = new Date(k), f = (/* @__PURE__ */ new Date()).getTime() - w.getTime(), u = Math.floor(f / 6e4), N = Math.floor(f / 36e5), W = Math.floor(f / 864e5);
-    return u < 1 ? "Just now" : u < 60 ? `${u}m ago` : N < 24 ? `${N}h ago` : W < 7 ? `${W}d ago` : w.toLocaleDateString();
+  }, x = (v) => {
+    const y = new Date(v), z = (/* @__PURE__ */ new Date()).getTime() - y.getTime(), g = Math.floor(z / 6e4), f = Math.floor(z / 36e5), C = Math.floor(z / 864e5);
+    return g < 1 ? "Just now" : g < 60 ? `${g}m ago` : f < 24 ? `${f}h ago` : C < 7 ? `${C}d ago` : y.toLocaleDateString();
   };
   return /* @__PURE__ */ i(
     "div",
@@ -5613,41 +5665,41 @@ function tr({
               {
                 type: "text",
                 value: a,
-                onChange: (k) => m(k.target.value),
+                onChange: (v) => m(v.target.value),
                 onBlur: h,
-                onKeyDown: (k) => {
-                  k.key === "Enter" && h(), k.key === "Escape" && (m(r.name), l(!1));
+                onKeyDown: (v) => {
+                  v.key === "Enter" && h(), v.key === "Escape" && (m(r.name), l(!1));
                 },
                 className: "w-full px-1 py-0.5 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500",
                 autoFocus: !0,
-                onClick: (k) => k.stopPropagation()
+                onClick: (v) => v.stopPropagation()
               }
             ) : /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: r.name }),
             /* @__PURE__ */ i("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
               r.nodes.length,
               " nodes · Updated ",
-              b(r.updatedAt)
+              x(r.updatedAt)
             ] })
           ] }),
           /* @__PURE__ */ i("div", { className: "relative", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: (k) => {
-                  k.stopPropagation(), g(!c);
+                onClick: (v) => {
+                  v.stopPropagation(), u(!c);
                 },
                 className: "p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity",
                 children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
               }
             ),
             c && /* @__PURE__ */ i(G, { children: [
-              /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => g(!1) }),
+              /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => u(!1) }),
               /* @__PURE__ */ i("div", { className: "absolute right-0 top-full mt-1 w-36 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 z-20", children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (k) => {
-                      k.stopPropagation(), l(!0), g(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), l(!0), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Rename"
@@ -5656,8 +5708,8 @@ function tr({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (k) => {
-                      k.stopPropagation(), n(), g(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), n(), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Duplicate"
@@ -5666,8 +5718,8 @@ function tr({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (k) => {
-                      k.stopPropagation(), window.confirm("Delete this workflow?") && o(), g(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), window.confirm("Delete this workflow?") && o(), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-red-600 dark:text-red-400 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Delete"
@@ -5683,9 +5735,9 @@ function tr({
   );
 }
 function rr() {
-  const r = x((c) => c.showLibrary), d = x((c) => c.toggleLibrary), t = x((c) => c.savedWorkflows), o = x((c) => c.activeWorkflowId), s = x((c) => c.loadWorkflow), n = x((c) => c.deleteWorkflow), p = x((c) => c.renameWorkflow), l = x((c) => c.duplicateWorkflow), a = x((c) => c.newWorkflow);
+  const r = w((c) => c.showLibrary), d = w((c) => c.toggleLibrary), t = w((c) => c.savedWorkflows), o = w((c) => c.activeWorkflowId), s = w((c) => c.loadWorkflow), n = w((c) => c.deleteWorkflow), p = w((c) => c.renameWorkflow), l = w((c) => c.duplicateWorkflow), a = w((c) => c.newWorkflow);
   if (!r) return null;
-  const m = [...t].sort((c, g) => g.updatedAt - c.updatedAt);
+  const m = [...t].sort((c, u) => u.updatedAt - c.updatedAt);
   return /* @__PURE__ */ i(G, { children: [
     /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: d }),
     /* @__PURE__ */ i("div", { className: "fixed left-0 top-0 bottom-0 w-80 bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700 z-50 flex flex-col shadow-xl", children: [
@@ -5759,7 +5811,7 @@ function rr() {
             s(c.id), d();
           },
           onDelete: () => n(c.id),
-          onRename: (g) => p(c.id, g),
+          onRename: (u) => p(c.id, u),
           onDuplicate: () => l(c.id)
         },
         c.id
@@ -5826,12 +5878,12 @@ const ar = [
   }
 ];
 function ir({ provider: r }) {
-  const d = q((h) => h.ai), t = q((h) => h.setAIProvider), o = d[r.id], s = (o == null ? void 0 : o.enabled) ?? !1, n = (o == null ? void 0 : o.apiKey) ?? "", [p, l] = C(n), [a, m] = C(!1), c = () => {
+  const d = q((h) => h.ai), t = q((h) => h.setAIProvider), o = d[r.id], s = (o == null ? void 0 : o.enabled) ?? !1, n = (o == null ? void 0 : o.apiKey) ?? "", [p, l] = I(n), [a, m] = I(!1), c = () => {
     t(r.id, {
       apiKey: p,
       enabled: !s
     });
-  }, g = (h) => {
+  }, u = (h) => {
     l(h), t(r.id, {
       apiKey: h,
       enabled: s
@@ -5859,7 +5911,7 @@ function ir({ provider: r }) {
           {
             type: a ? "text" : "password",
             value: p,
-            onChange: (h) => g(h.target.value),
+            onChange: (h) => u(h.target.value),
             placeholder: r.placeholder,
             className: "w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500"
           }
@@ -5907,7 +5959,7 @@ function ir({ provider: r }) {
   ] });
 }
 function nr({ provider: r }) {
-  const d = q((c) => c.ai), t = q((c) => c.setAIProvider), o = d[r.id], s = (o == null ? void 0 : o.enabled) ?? !1, n = (o == null ? void 0 : o.baseUrl) ?? r.defaultUrl, [p, l] = C(n), a = () => {
+  const d = q((c) => c.ai), t = q((c) => c.setAIProvider), o = d[r.id], s = (o == null ? void 0 : o.enabled) ?? !1, n = (o == null ? void 0 : o.baseUrl) ?? r.defaultUrl, [p, l] = I(n), a = () => {
     t(r.id, {
       baseUrl: p,
       enabled: !s
@@ -6031,30 +6083,30 @@ function sr() {
   ] }) }) : null;
 }
 function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
-  const [o, s] = C([]), [n, p] = C(""), [l, a] = C(!1), [m, c] = C(null), [g, h] = C(null), [b, k] = C(""), [w, v] = C(), [f, u] = C(!1), [N, W] = C(), y = te(null), A = te(null);
+  const [o, s] = I([]), [n, p] = I(""), [l, a] = I(!1), [m, c] = I(null), [u, h] = I(null), [x, v] = I(""), [y, k] = I(), [z, g] = I(!1), [f, C] = I(), b = re(null), L = re(null);
   j(() => {
-    r && g === null && Qe().then((I) => {
-      h(I.available), k(I.message), v(I.reason), u(I.isCloudDeployment ?? !1), W(I.supportUrl);
+    r && u === null && Qe().then((S) => {
+      h(S.available), v(S.message), k(S.reason), g(S.isCloudDeployment ?? !1), C(S.supportUrl);
     }).catch(() => {
-      h(!1), k("Failed to check AI availability"), v("service_unavailable");
+      h(!1), v("Failed to check AI availability"), k("service_unavailable");
     });
-  }, [r, g]), j(() => {
-    r && A.current && A.current.focus();
+  }, [r, u]), j(() => {
+    r && L.current && L.current.focus();
   }, [r]), j(() => {
-    var I;
-    (I = y.current) == null || I.scrollIntoView({ behavior: "smooth" });
+    var S;
+    (S = b.current) == null || S.scrollIntoView({ behavior: "smooth" });
   }, [o]);
-  const S = L(async () => {
+  const A = W(async () => {
     if (!n.trim() || l) return;
-    const I = {
+    const S = {
       role: "user",
       content: n.trim(),
       timestamp: Date.now()
     };
-    s((D) => [...D, I]), p(""), a(!0), c(null);
+    s((D) => [...D, S]), p(""), a(!0), c(null);
     try {
       const D = await _e({
-        prompt: I.content,
+        prompt: S.content,
         history: o
       }), E = {
         role: "assistant",
@@ -6062,16 +6114,16 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
         workflow: D.workflow,
         timestamp: Date.now()
       };
-      s(($) => [...$, E]), !D.success && D.error && c(D.error);
+      s((R) => [...R, E]), !D.success && D.error && c(D.error);
     } catch (D) {
       c(D instanceof Error ? D.message : "Failed to generate workflow");
     } finally {
       a(!1);
     }
-  }, [n, l, o]), R = (I) => {
-    I.key === "Enter" && !I.shiftKey && (I.preventDefault(), S());
-  }, Q = (I) => {
-    t(I), d();
+  }, [n, l, o]), $ = (S) => {
+    S.key === "Enter" && !S.shiftKey && (S.preventDefault(), A());
+  }, Q = (S) => {
+    t(S), d();
   }, Y = () => {
     s([]), c(null);
   };
@@ -6138,8 +6190,8 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
       ] })
     ] }),
     /* @__PURE__ */ i("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
-      g === !1 && /* @__PURE__ */ e("div", { className: "bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4", children: /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
-        w === "tier_limit" ? /* @__PURE__ */ e(
+      u === !1 && /* @__PURE__ */ e("div", { className: "bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4", children: /* @__PURE__ */ i("div", { className: "flex items-start gap-3", children: [
+        y === "tier_limit" ? /* @__PURE__ */ e(
           "svg",
           {
             className: "h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5",
@@ -6175,10 +6227,10 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
           }
         ),
         /* @__PURE__ */ i("div", { children: [
-          /* @__PURE__ */ e("p", { className: "font-medium text-amber-800 dark:text-amber-200", children: w === "tier_limit" ? "AI Workflow Generation Not Available" : "AI Generation Not Available" }),
-          /* @__PURE__ */ e("p", { className: "text-sm text-amber-700 dark:text-amber-300 mt-1", children: b }),
+          /* @__PURE__ */ e("p", { className: "font-medium text-amber-800 dark:text-amber-200", children: y === "tier_limit" ? "AI Workflow Generation Not Available" : "AI Generation Not Available" }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-amber-700 dark:text-amber-300 mt-1", children: x }),
           /* @__PURE__ */ i("div", { className: "flex flex-col sm:flex-row gap-2 mt-3", children: [
-            w === "tier_limit" && /* @__PURE__ */ e(
+            y === "tier_limit" && /* @__PURE__ */ e(
               "a",
               {
                 href: "/pricing",
@@ -6186,15 +6238,15 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
                 children: "View Plans"
               }
             ),
-            w === "service_unavailable" && N && /* @__PURE__ */ e(
+            y === "service_unavailable" && f && /* @__PURE__ */ e(
               "a",
               {
-                href: N,
+                href: f,
                 className: "text-sm font-medium text-amber-700 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300",
                 children: "Contact Support"
               }
             ),
-            w === "not_configured" && !f && /* @__PURE__ */ e(
+            y === "not_configured" && !z && /* @__PURE__ */ e(
               "a",
               {
                 href: "https://floimg.com/docs/studio/ai-workflows",
@@ -6207,7 +6259,7 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
           ] })
         ] })
       ] }) }),
-      o.length === 0 && g !== !1 && /* @__PURE__ */ i("div", { className: "text-center py-8", children: [
+      o.length === 0 && u !== !1 && /* @__PURE__ */ i("div", { className: "text-center py-8", children: [
         /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-teal-100 dark:bg-teal-900/50 rounded-full mb-4", children: /* @__PURE__ */ e(
           "svg",
           {
@@ -6234,44 +6286,44 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
           "Generate an image with Gemini, then use it as a reference to create a variation with different lighting",
           "Create a product mockup: generate a minimalist logo, then composite it onto a t-shirt image",
           "Build an AI art pipeline: generate a base image, apply artistic style transfer, then upscale to 4K"
-        ].map((I, D) => /* @__PURE__ */ i(
+        ].map((S, D) => /* @__PURE__ */ i(
           "button",
           {
-            onClick: () => p(I),
+            onClick: () => p(S),
             className: "block w-full text-left text-sm px-4 py-2 bg-gray-100 dark:bg-zinc-700 hover:bg-gray-200 dark:hover:bg-zinc-600 rounded-lg text-gray-700 dark:text-zinc-300 transition-colors",
             children: [
               '"',
-              I,
+              S,
               '"'
             ]
           },
           D
         )) })
       ] }),
-      o.map((I, D) => /* @__PURE__ */ e(
+      o.map((S, D) => /* @__PURE__ */ e(
         "div",
         {
-          className: `flex ${I.role === "user" ? "justify-end" : "justify-start"}`,
+          className: `flex ${S.role === "user" ? "justify-end" : "justify-start"}`,
           children: /* @__PURE__ */ i(
             "div",
             {
-              className: `max-w-[80%] rounded-lg px-4 py-3 ${I.role === "user" ? "bg-teal-600 text-white" : "bg-gray-100 dark:bg-zinc-700 text-gray-900 dark:text-white"}`,
+              className: `max-w-[80%] rounded-lg px-4 py-3 ${S.role === "user" ? "bg-teal-600 text-white" : "bg-gray-100 dark:bg-zinc-700 text-gray-900 dark:text-white"}`,
               children: [
-                /* @__PURE__ */ e("p", { className: "text-sm whitespace-pre-wrap", children: I.content }),
-                I.role === "assistant" && I.workflow && /* @__PURE__ */ i("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-zinc-600", children: [
+                /* @__PURE__ */ e("p", { className: "text-sm whitespace-pre-wrap", children: S.content }),
+                S.role === "assistant" && S.workflow && /* @__PURE__ */ i("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-zinc-600", children: [
                   /* @__PURE__ */ i("div", { className: "flex items-center justify-between mb-2", children: [
                     /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-500 dark:text-zinc-400", children: "Generated Workflow" }),
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: () => Q(I.workflow),
+                        onClick: () => Q(S.workflow),
                         className: "text-xs px-3 py-1 bg-teal-600 hover:bg-teal-700 text-white rounded transition-colors",
                         children: "Apply to Canvas"
                       }
                     )
                   ] }),
                   /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 rounded p-2 text-xs", children: /* @__PURE__ */ i("div", { className: "space-y-1", children: [
-                    I.workflow.nodes.map((E, $) => /* @__PURE__ */ i(
+                    S.workflow.nodes.map((E, R) => /* @__PURE__ */ i(
                       "div",
                       {
                         className: "flex items-center gap-2 text-gray-600 dark:text-zinc-300",
@@ -6284,12 +6336,12 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
                           ] })
                         ]
                       },
-                      $
+                      R
                     )),
-                    I.workflow.edges.length > 0 && /* @__PURE__ */ i("div", { className: "text-gray-400 dark:text-zinc-500 pt-1", children: [
-                      I.workflow.edges.length,
+                    S.workflow.edges.length > 0 && /* @__PURE__ */ i("div", { className: "text-gray-400 dark:text-zinc-500 pt-1", children: [
+                      S.workflow.edges.length,
                       " connection",
-                      I.workflow.edges.length !== 1 ? "s" : ""
+                      S.workflow.edges.length !== 1 ? "s" : ""
                     ] })
                   ] }) })
                 ] })
@@ -6320,19 +6372,19 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
         /* @__PURE__ */ e("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: "Generating workflow..." })
       ] }) }) }),
       m && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-3", children: /* @__PURE__ */ e("p", { className: "text-sm text-red-700 dark:text-red-300", children: m }) }),
-      /* @__PURE__ */ e("div", { ref: y })
+      /* @__PURE__ */ e("div", { ref: b })
     ] }),
     /* @__PURE__ */ i("div", { className: "border-t border-gray-200 dark:border-zinc-700 p-4", children: [
       /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: A,
+            ref: L,
             value: n,
-            onChange: (I) => p(I.target.value),
-            onKeyDown: R,
-            placeholder: g === !1 ? "AI generation not available" : "Describe what workflow you want to create...",
-            disabled: l || g === !1,
+            onChange: (S) => p(S.target.value),
+            onKeyDown: $,
+            placeholder: u === !1 ? "AI generation not available" : "Describe what workflow you want to create...",
+            disabled: l || u === !1,
             rows: 2,
             className: "flex-1 resize-none rounded-lg border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 px-4 py-2 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:border-teal-500 focus:outline-none focus:ring-1 focus:ring-teal-500 disabled:opacity-50 disabled:cursor-not-allowed"
           }
@@ -6340,8 +6392,8 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: S,
-            disabled: !n.trim() || l || g === !1,
+            onClick: A,
+            disabled: !n.trim() || l || u === !1,
             className: "self-end px-4 py-2 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg transition-colors",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -6360,7 +6412,7 @@ function dr({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
   ] }) }) : null;
 }
 function lr() {
-  const { screenToFlowPosition: r } = Me(), d = x((s) => s.addNode), t = L(
+  const { screenToFlowPosition: r } = Te(), d = w((s) => s.addNode), t = W(
     (s) => {
       s.preventDefault();
       const n = s.dataTransfer.getData("application/json");
@@ -6376,13 +6428,13 @@ function lr() {
         }
     },
     [d, r]
-  ), o = L((s) => {
+  ), o = W((s) => {
     s.preventDefault(), s.dataTransfer.dropEffect = "move";
   }, []);
   return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: t, onDragOver: o, children: /* @__PURE__ */ e(it, {}) });
 }
 function xr() {
-  const [r, d] = C("editor"), [t, o] = C(!1), s = x((a) => a.loadTemplate), n = x((a) => a.loadGeneratedWorkflow);
+  const [r, d] = I("editor"), [t, o] = I(!1), s = w((a) => a.loadTemplate), n = w((a) => a.loadGeneratedWorkflow);
   j(() => {
     const m = new URLSearchParams(window.location.search).get("template");
     if (m) {
@@ -6397,13 +6449,13 @@ function xr() {
       window.removeEventListener("workflow-loaded", a);
     };
   }, []);
-  const p = L(
+  const p = W(
     (a) => {
       const m = ge(a);
       m && (s(m), d("editor"));
     },
     [s]
-  ), l = L(
+  ), l = W(
     (a) => {
       n(a), d("editor");
     },
@@ -6499,6 +6551,6 @@ export {
   ge as resolveTemplate,
   br as searchTemplates,
   _ as templates,
-  x as useWorkflowStore
+  w as useWorkflowStore
 };
 //# sourceMappingURL=index.js.map