@teamflojo/floimg-studio-ui 0.2.1 → 0.2.2

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsxs as s, jsx as e, Fragment as U } from "react/jsx-runtime";
-import { memo as E, useRef as Q, useCallback as L, useState as I, useEffect as D, useMemo as ne } from "react";
-import we, { Handle as A, Position as P, applyNodeChanges as Ne, applyEdgeChanges as ze, MarkerType as Ce, Background as Ie, Controls as Se, MiniMap as Le, ReactFlowProvider as We, useReactFlow as Ae } from "reactflow";
-import { create as ce } from "zustand";
+import { jsxs as o, jsx as e, Fragment as U } from "react/jsx-runtime";
+import { memo as E, useRef as Q, useCallback as L, useState as I, useEffect as D, useMemo as oe } from "react";
+import Ne, { Handle as A, Position as P, applyNodeChanges as ze, applyEdgeChanges as Ce, MarkerType as Ie, Background as Se, Controls as Le, MiniMap as We, ReactFlowProvider as Ae, useReactFlow as Pe } from "reactflow";
+import { create as me } from "zustand";
 import { useQuery as F } from "@tanstack/react-query";
-function Pe(r, l) {
+function $e(r, l) {
   let t;
   try {
     t = r();
@@ -11,13 +11,13 @@ function Pe(r, l) {
     return;
   }
   return {
-    getItem: (o) => {
-      var i;
-      const m = (a) => a === null ? null : JSON.parse(a, void 0), d = (i = t.getItem(o)) != null ? i : null;
-      return d instanceof Promise ? d.then(m) : m(d);
+    getItem: (i) => {
+      var s;
+      const p = (a) => a === null ? null : JSON.parse(a, void 0), d = (s = t.getItem(i)) != null ? s : null;
+      return d instanceof Promise ? d.then(p) : p(d);
     },
-    setItem: (o, i) => t.setItem(o, JSON.stringify(i, void 0)),
-    removeItem: (o) => t.removeItem(o)
+    setItem: (i, s) => t.setItem(i, JSON.stringify(s, void 0)),
+    removeItem: (i) => t.removeItem(i)
   };
 }
 const Y = (r) => (l) => {
@@ -41,61 +41,61 @@ const Y = (r) => (l) => {
       }
     };
   }
-}, $e = (r, l) => (t, n, o) => {
-  let i = {
-    storage: Pe(() => localStorage),
+}, Me = (r, l) => (t, n, i) => {
+  let s = {
+    storage: $e(() => localStorage),
     partialize: (v) => v,
     version: 0,
-    merge: (v, y) => ({
-      ...y,
+    merge: (v, w) => ({
+      ...w,
       ...v
     }),
     ...l
-  }, m = !1;
+  }, p = !1;
   const d = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
-  let p = i.storage;
-  if (!p)
+  let m = s.storage;
+  if (!m)
     return r(
       (...v) => {
         console.warn(
-          `[zustand persist middleware] Unable to update item '${i.name}', the given storage is currently unavailable.`
+          `[zustand persist middleware] Unable to update item '${s.name}', the given storage is currently unavailable.`
         ), t(...v);
       },
       n,
-      o
+      i
     );
   const c = () => {
-    const v = i.partialize({ ...n() });
-    return p.setItem(i.name, {
+    const v = s.partialize({ ...n() });
+    return m.setItem(s.name, {
       state: v,
-      version: i.version
+      version: s.version
     });
-  }, u = o.setState;
-  o.setState = (v, y) => (u(v, y), c());
+  }, u = i.setState;
+  i.setState = (v, w) => (u(v, w), c());
   const h = r(
     (...v) => (t(...v), c()),
     n,
-    o
+    i
   );
-  o.getInitialState = () => h;
+  i.getInitialState = () => h;
   let f;
-  const w = () => {
-    var v, y;
-    if (!p) return;
-    m = !1, d.forEach((g) => {
-      var N;
-      return g((N = n()) != null ? N : h);
+  const y = () => {
+    var v, w;
+    if (!m) return;
+    p = !1, d.forEach((g) => {
+      var z;
+      return g((z = n()) != null ? z : h);
     });
-    const b = ((y = i.onRehydrateStorage) == null ? void 0 : y.call(i, (v = n()) != null ? v : h)) || void 0;
-    return Y(p.getItem.bind(p))(i.name).then((g) => {
+    const b = ((w = s.onRehydrateStorage) == null ? void 0 : w.call(s, (v = n()) != null ? v : h)) || void 0;
+    return Y(m.getItem.bind(m))(s.name).then((g) => {
       if (g)
-        if (typeof g.version == "number" && g.version !== i.version) {
-          if (i.migrate) {
-            const N = i.migrate(
+        if (typeof g.version == "number" && g.version !== s.version) {
+          if (s.migrate) {
+            const z = s.migrate(
               g.state,
               g.version
             );
-            return N instanceof Promise ? N.then((W) => [!0, W]) : [!0, N];
+            return z instanceof Promise ? z.then((W) => [!0, W]) : [!0, z];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
@@ -104,40 +104,40 @@ const Y = (r) => (l) => {
           return [!1, g.state];
       return [!1, void 0];
     }).then((g) => {
-      var N;
+      var z;
       const [W, x] = g;
-      if (f = i.merge(
+      if (f = s.merge(
         x,
-        (N = n()) != null ? N : h
+        (z = n()) != null ? z : h
       ), t(f, !0), W)
         return c();
     }).then(() => {
-      b == null || b(f, void 0), f = n(), m = !0, a.forEach((g) => g(f));
+      b == null || b(f, void 0), f = n(), p = !0, a.forEach((g) => g(f));
     }).catch((g) => {
       b == null || b(void 0, g);
     });
   };
-  return o.persist = {
+  return i.persist = {
     setOptions: (v) => {
-      i = {
-        ...i,
+      s = {
+        ...s,
         ...v
-      }, v.storage && (p = v.storage);
+      }, v.storage && (m = v.storage);
     },
     clearStorage: () => {
-      p == null || p.removeItem(i.name);
+      m == null || m.removeItem(s.name);
     },
-    getOptions: () => i,
-    rehydrate: () => w(),
-    hasHydrated: () => m,
+    getOptions: () => s,
+    rehydrate: () => y(),
+    hasHydrated: () => p,
     onHydrate: (v) => (d.add(v), () => {
       d.delete(v);
     }),
     onFinishHydration: (v) => (a.add(v), () => {
       a.delete(v);
     })
-  }, i.skipHydration || w(), f || h;
-}, me = $e, $ = "/api";
+  }, s.skipHydration || y(), f || h;
+}, pe = Me, $ = "/api";
 async function j(r, l) {
   const t = await fetch(r, {
     ...l,
@@ -152,44 +152,44 @@ async function j(r, l) {
   }
   return t.json();
 }
-async function Me() {
+async function je() {
   return j(`${$}/nodes/generators`);
 }
-async function je() {
+async function De() {
   return j(`${$}/nodes/transforms`);
 }
-async function De() {
+async function Te() {
   return j(`${$}/nodes/text`);
 }
-async function Te() {
+async function Ue() {
   return j(`${$}/nodes/vision`);
 }
-async function Ue(r, l, t) {
+async function Oe(r, l, t) {
   return j(`${$}/execute/sync`, {
     method: "POST",
     body: JSON.stringify({ nodes: r, edges: l, aiProviders: t })
   });
 }
-async function Oe(r, l) {
+async function Re(r, l) {
   return j(`${$}/export/yaml`, {
     method: "POST",
     body: JSON.stringify({ nodes: r, edges: l })
   });
 }
-async function Re() {
+async function Ee() {
   return j(`${$}/images`);
 }
-function oe(r) {
+function se(r) {
   return `${$}/images/${r}/blob`;
 }
-async function Ee(r) {
+async function Be(r) {
   try {
     return await j(`${$}/images/${r}/workflow`);
   } catch {
     return null;
   }
 }
-async function Be(r) {
+async function Ve(r) {
   const l = new FormData();
   l.append("file", r);
   const t = await fetch(`${$}/uploads`, {
@@ -202,74 +202,74 @@ async function Be(r) {
   }
   return t.json();
 }
-async function Ve() {
+async function Ge() {
   return j(`${$}/uploads`);
 }
-async function Ge(r) {
+async function Fe(r) {
   const l = await fetch(`${$}/uploads/${r}`, {
     method: "DELETE"
   });
   if (!l.ok)
     throw new Error(`Failed to delete upload: ${l.status}`);
 }
-function pe(r) {
+function ue(r) {
   return `${$}/uploads/${r}/blob`;
 }
-async function Fe(r) {
+async function He(r) {
   return j(`${$}/import`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
-async function He(r) {
+async function _e(r) {
   return j(`${$}/import/validate`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
-async function _e(r) {
+async function Ke(r) {
   return j(`${$}/generate/workflow`, {
     method: "POST",
     body: JSON.stringify(r)
   });
 }
-async function Ke() {
+async function qe() {
   return j(`${$}/generate/status`);
 }
-const se = "http://localhost:11434", ie = "http://localhost:1234", O = ce()(
-  me(
+const ie = "http://localhost:11434", le = "http://localhost:1234", O = me()(
+  pe(
     (r, l) => ({
       ai: {
         ollama: {
-          baseUrl: se,
+          baseUrl: ie,
           enabled: !1
         },
         lmstudio: {
-          baseUrl: ie,
+          baseUrl: le,
           enabled: !1
         }
       },
       showSettings: !1,
       setAIProvider: (t, n) => {
-        r((o) => ({
+        r((i) => ({
           ai: {
-            ...o.ai,
+            ...i.ai,
             [t]: n
           }
         }));
       },
       clearAIProvider: (t) => {
         r((n) => {
-          const o = { ...n.ai };
-          return delete o[t], { ai: o };
+          const i = { ...n.ai };
+          return delete i[t], { ai: i };
         });
       },
       openSettings: () => r({ showSettings: !0 }),
       closeSettings: () => r({ showSettings: !1 }),
       getConfiguredProviders: () => {
-        var o, i, m, d, a, p, c;
+        var i, s, p, d, a, m, c;
         const { ai: t } = l(), n = {};
-        return (o = t.openai) != null && o.enabled && t.openai.apiKey && (n.openai = { apiKey: t.openai.apiKey }), (i = t.anthropic) != null && i.enabled && t.anthropic.apiKey && (n.anthropic = { apiKey: t.anthropic.apiKey }), (m = t.gemini) != null && m.enabled && t.gemini.apiKey && (n.gemini = { apiKey: t.gemini.apiKey }), (d = t.grok) != null && d.enabled && t.grok.apiKey && (n.grok = { apiKey: t.grok.apiKey }), (a = t.openrouter) != null && a.enabled && t.openrouter.apiKey && (n.openrouter = { apiKey: t.openrouter.apiKey }), (p = t.ollama) != null && p.enabled && (n.ollama = { baseUrl: t.ollama.baseUrl || se }), (c = t.lmstudio) != null && c.enabled && (n.lmstudio = { baseUrl: t.lmstudio.baseUrl || ie }), n;
+        return (i = t.openai) != null && i.enabled && t.openai.apiKey && (n.openai = { apiKey: t.openai.apiKey }), (s = t.anthropic) != null && s.enabled && t.anthropic.apiKey && (n.anthropic = { apiKey: t.anthropic.apiKey }), (p = t.gemini) != null && p.enabled && t.gemini.apiKey && (n.gemini = { apiKey: t.gemini.apiKey }), (d = t.grok) != null && d.enabled && t.grok.apiKey && (n.grok = { apiKey: t.grok.apiKey }), (a = t.openrouter) != null && a.enabled && t.openrouter.apiKey && (n.openrouter = { apiKey: t.openrouter.apiKey }), (m = t.ollama) != null && m.enabled && (n.ollama = { baseUrl: t.ollama.baseUrl || ie }), (c = t.lmstudio) != null && c.enabled && (n.lmstudio = { baseUrl: t.lmstudio.baseUrl || le }), n;
       }
     }),
     {
@@ -279,16 +279,16 @@ const se = "http://localhost:11434", ie = "http://localhost:1234", O = ce()(
     }
   )
 );
-let qe = 0;
+let Je = 0;
 function V() {
-  return `node_${++qe}`;
+  return `node_${++Je}`;
 }
-function le() {
+function de() {
   const r = Date.now(), l = Math.random().toString(36).substring(2, 8);
   return `wf_${r}_${l}`;
 }
-const k = ce()(
-  me(
+const k = me()(
+  pe(
     (r, l) => ({
       nodes: [],
       edges: [],
@@ -314,16 +314,16 @@ const k = ce()(
         nodeStatus: {}
       },
       loadTemplate: (t) => {
-        const n = /* @__PURE__ */ new Map(), o = t.workflow.nodes.map((m) => {
+        const n = /* @__PURE__ */ new Map(), i = t.workflow.nodes.map((p) => {
           const d = V();
-          return n.set(m.id, d), {
+          return n.set(p.id, d), {
             id: d,
-            type: m.type,
-            position: m.position,
-            data: m.data
+            type: p.type,
+            position: p.position,
+            data: p.data
           };
-        }), i = t.workflow.edges.map((m) => {
-          const d = n.get(m.source) || m.source, a = n.get(m.target) || m.target;
+        }), s = t.workflow.edges.map((p) => {
+          const d = n.get(p.source) || p.source, a = n.get(p.target) || p.target;
           return {
             id: `edge_${d}_${a}`,
             source: d,
@@ -331,8 +331,8 @@ const k = ce()(
           };
         });
         r({
-          nodes: o,
-          edges: i,
+          nodes: i,
+          edges: s,
           selectedNodeId: null,
           currentTemplateId: t.id,
           previewVisible: {},
@@ -377,11 +377,11 @@ const k = ce()(
       setTextProviders: (t) => r({ textProviders: t }),
       setVisionProviders: (t) => r({ visionProviders: t }),
       addNode: (t, n) => {
-        var d, a, p;
-        const o = V();
-        let i;
+        var d, a, m;
+        const i = V();
+        let s;
         if (t.type === "generator")
-          i = {
+          s = {
             generatorName: t.name,
             params: _(t),
             isAI: t.isAI,
@@ -390,7 +390,7 @@ const k = ce()(
             maxReferenceImages: t.maxReferenceImages
           };
         else if (t.type === "transform")
-          i = {
+          s = {
             operation: t.name,
             providerName: t.providerName,
             // Track which provider this transform belongs to
@@ -401,20 +401,20 @@ const k = ce()(
             maxReferenceImages: t.maxReferenceImages
           };
         else if (t.type === "input")
-          i = {
+          s = {
             uploadId: void 0,
             filename: void 0,
             mime: void 0
           };
         else if (t.type === "vision")
-          i = {
+          s = {
             providerName: t.name,
             providerLabel: t.label,
             // Human-readable label (e.g., "Gemini Vision")
             params: _(t)
           };
         else if (t.type === "text")
-          i = {
+          s = {
             providerName: t.name,
             providerLabel: t.label,
             // Human-readable label (e.g., "Gemini Text")
@@ -422,89 +422,89 @@ const k = ce()(
           };
         else {
           const c = ((d = t.params) == null ? void 0 : d.properties) || {}, u = ((a = c.provider) == null ? void 0 : a.default) || "filesystem";
-          i = {
-            destination: ((p = c.destination) == null ? void 0 : p.default) || "./output/image.png",
+          s = {
+            destination: ((m = c.destination) == null ? void 0 : m.default) || "./output/image.png",
             provider: u
           };
         }
-        const m = {
-          id: o,
+        const p = {
+          id: i,
           type: t.type,
           position: n,
-          data: i
+          data: s
         };
         r((c) => ({
-          nodes: [...c.nodes, m]
+          nodes: [...c.nodes, p]
         }));
       },
       updateNodeData: (t, n) => {
-        r((o) => ({
-          nodes: o.nodes.map(
-            (i) => i.id === t ? { ...i, data: { ...i.data, ...n } } : i
+        r((i) => ({
+          nodes: i.nodes.map(
+            (s) => s.id === t ? { ...s, data: { ...s.data, ...n } } : s
           )
         }));
       },
       deleteNode: (t) => {
         r((n) => ({
-          nodes: n.nodes.filter((o) => o.id !== t),
-          edges: n.edges.filter((o) => o.source !== t && o.target !== t),
+          nodes: n.nodes.filter((i) => i.id !== t),
+          edges: n.edges.filter((i) => i.source !== t && i.target !== t),
           selectedNodeId: n.selectedNodeId === t ? null : n.selectedNodeId
         }));
       },
       duplicateNode: (t) => {
-        const n = l(), o = n.nodes.find((d) => d.id === t);
-        if (!o) return;
-        const i = V(), m = {
-          ...o,
-          id: i,
+        const n = l(), i = n.nodes.find((d) => d.id === t);
+        if (!i) return;
+        const s = V(), p = {
+          ...i,
+          id: s,
           position: {
-            x: o.position.x + 50,
-            y: o.position.y + 50
+            x: i.position.x + 50,
+            y: i.position.y + 50
           },
-          data: JSON.parse(JSON.stringify(o.data)),
+          data: JSON.parse(JSON.stringify(i.data)),
           // Deep clone
           selected: !1
         };
         r({
-          nodes: [...n.nodes, m],
-          selectedNodeId: i
+          nodes: [...n.nodes, p],
+          selectedNodeId: s
           // Select the new node
         });
       },
       setNodes: (t) => r({ nodes: t }),
       addEdge: (t) => {
         if (!t.source || !t.target) return;
-        const n = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), i = {
+        const n = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), s = {
           id: n ? `edge_${t.source}_${t.target}_${n}` : `edge_${t.source}_${t.target}`,
           source: t.source,
           target: t.target,
           sourceHandle: t.sourceHandle ?? void 0,
           targetHandle: t.targetHandle ?? void 0
         };
-        r((m) => ({
-          edges: [...m.edges, i]
+        r((p) => ({
+          edges: [...p.edges, s]
         }));
       },
       deleteEdge: (t) => {
         r((n) => ({
-          edges: n.edges.filter((o) => o.id !== t)
+          edges: n.edges.filter((i) => i.id !== t)
         }));
       },
       setEdges: (t) => r({ edges: t }),
       setSelectedNode: (t) => r({ selectedNodeId: t }),
       execute: async () => {
-        const { nodes: t, edges: n } = l(), o = t.map((a) => ({
+        const { nodes: t, edges: n } = l(), i = t.map((a) => ({
           id: a.id,
           type: a.type,
           position: a.position,
           data: a.data
-        })), i = n.map((a) => ({
+        })), s = n.map((a) => ({
           id: a.id,
           source: a.source,
           target: a.target,
           sourceHandle: a.sourceHandle ?? void 0,
           targetHandle: a.targetHandle ?? void 0
-        })), m = O.getState().getConfiguredProviders(), d = {};
+        })), p = O.getState().getConfiguredProviders(), d = {};
         for (const a of t)
           d[a.id] = "running";
         r({
@@ -518,9 +518,9 @@ const k = ce()(
           }
         });
         try {
-          const a = await Ue(o, i, m), p = {};
+          const a = await Oe(i, s, p), m = {};
           for (const c of t)
-            p[c.id] = a.status === "completed" ? "completed" : "error";
+            m[c.id] = a.status === "completed" ? "completed" : "error";
           a.status === "completed" ? r({
             execution: {
               status: "completed",
@@ -528,7 +528,7 @@ const k = ce()(
               imageUrls: a.imageUrls || [],
               previews: a.previews || {},
               dataOutputs: a.dataOutputs || {},
-              nodeStatus: p
+              nodeStatus: m
             }
           }) : r({
             execution: {
@@ -537,14 +537,14 @@ const k = ce()(
               imageUrls: [],
               previews: {},
               dataOutputs: {},
-              nodeStatus: p,
+              nodeStatus: m,
               error: a.error
             }
           });
         } catch (a) {
-          const p = {};
+          const m = {};
           for (const c of t)
-            p[c.id] = "error";
+            m[c.id] = "error";
           r({
             execution: {
               status: "error",
@@ -552,52 +552,52 @@ const k = ce()(
               imageUrls: [],
               previews: {},
               dataOutputs: {},
-              nodeStatus: p,
+              nodeStatus: m,
               error: a instanceof Error ? a.message : "Unknown error"
             }
           });
         }
       },
       exportToYaml: async () => {
-        const { nodes: t, edges: n } = l(), o = t.map((d) => ({
+        const { nodes: t, edges: n } = l(), i = t.map((d) => ({
           id: d.id,
           type: d.type,
           position: d.position,
           data: d.data
-        })), i = n.map((d) => ({
+        })), s = n.map((d) => ({
           id: d.id,
           source: d.source,
           target: d.target,
           sourceHandle: d.sourceHandle ?? void 0,
           targetHandle: d.targetHandle ?? void 0
         }));
-        return (await Oe(o, i)).yaml;
+        return (await Re(i, s)).yaml;
       },
-      importFromYaml: (t, n, o) => {
-        const i = /* @__PURE__ */ new Map(), m = t.map((a) => {
-          const p = V();
-          return i.set(a.id, p), {
-            id: p,
+      importFromYaml: (t, n, i) => {
+        const s = /* @__PURE__ */ new Map(), p = t.map((a) => {
+          const m = V();
+          return s.set(a.id, m), {
+            id: m,
             type: a.type,
             position: a.position,
             data: a.data
           };
         }), d = n.map((a) => {
-          const p = i.get(a.source) || a.source, c = i.get(a.target) || a.target;
+          const m = s.get(a.source) || a.source, c = s.get(a.target) || a.target;
           return {
-            id: `edge_${p}_${c}`,
-            source: p,
+            id: `edge_${m}_${c}`,
+            source: m,
             target: c
           };
         });
         r({
-          nodes: m,
+          nodes: p,
           edges: d,
           selectedNodeId: null,
           currentTemplateId: null,
           previewVisible: {},
           activeWorkflowId: null,
-          activeWorkflowName: o || "Imported Workflow",
+          activeWorkflowName: i || "Imported Workflow",
           hasUnsavedChanges: !0,
           execution: {
             status: "idle",
@@ -636,49 +636,49 @@ const k = ce()(
       saveWorkflow: (t) => {
         const {
           nodes: n,
-          edges: o,
-          activeWorkflowId: i,
-          activeWorkflowName: m,
+          edges: i,
+          activeWorkflowId: s,
+          activeWorkflowName: p,
           savedWorkflows: d,
           currentTemplateId: a
-        } = l(), p = Date.now();
-        if (i) {
+        } = l(), m = Date.now();
+        if (s) {
           const c = d.map(
-            (u) => u.id === i ? { ...u, name: t || m, nodes: n, edges: o, updatedAt: p } : u
+            (u) => u.id === s ? { ...u, name: t || p, nodes: n, edges: i, updatedAt: m } : u
           );
           return r({
             savedWorkflows: c,
-            activeWorkflowName: t || m,
+            activeWorkflowName: t || p,
             hasUnsavedChanges: !1
-          }), i;
+          }), s;
         } else {
-          const c = le(), u = {
+          const c = de(), u = {
             id: c,
-            name: t || m,
+            name: t || p,
             nodes: n,
-            edges: o,
-            createdAt: p,
-            updatedAt: p,
+            edges: i,
+            createdAt: m,
+            updatedAt: m,
             templateId: a || void 0
           };
           return r({
             savedWorkflows: [...d, u],
             activeWorkflowId: c,
-            activeWorkflowName: t || m,
+            activeWorkflowName: t || p,
             hasUnsavedChanges: !1
           }), c;
         }
       },
       loadWorkflow: (t) => {
-        const { savedWorkflows: n } = l(), o = n.find((i) => i.id === t);
-        o && r({
-          nodes: o.nodes,
-          edges: o.edges,
+        const { savedWorkflows: n } = l(), i = n.find((s) => s.id === t);
+        i && r({
+          nodes: i.nodes,
+          edges: i.edges,
           selectedNodeId: null,
-          currentTemplateId: o.templateId || null,
+          currentTemplateId: i.templateId || null,
           previewVisible: {},
           activeWorkflowId: t,
-          activeWorkflowName: o.name,
+          activeWorkflowName: i.name,
           hasUnsavedChanges: !1,
           execution: {
             status: "idle",
@@ -691,9 +691,9 @@ const k = ce()(
         });
       },
       deleteWorkflow: (t) => {
-        const { savedWorkflows: n, activeWorkflowId: o } = l(), i = n.filter((m) => m.id !== t);
-        r(o === t ? {
-          savedWorkflows: i,
+        const { savedWorkflows: n, activeWorkflowId: i } = l(), s = n.filter((p) => p.id !== t);
+        r(i === t ? {
+          savedWorkflows: s,
           nodes: [],
           edges: [],
           selectedNodeId: null,
@@ -710,42 +710,42 @@ const k = ce()(
             dataOutputs: {},
             nodeStatus: {}
           }
-        } : { savedWorkflows: i });
+        } : { savedWorkflows: s });
       },
       renameWorkflow: (t, n) => {
-        const { savedWorkflows: o, activeWorkflowId: i } = l(), m = o.map(
+        const { savedWorkflows: i, activeWorkflowId: s } = l(), p = i.map(
           (d) => d.id === t ? { ...d, name: n, updatedAt: Date.now() } : d
         );
         r({
-          savedWorkflows: m,
-          ...i === t ? { activeWorkflowName: n } : {}
+          savedWorkflows: p,
+          ...s === t ? { activeWorkflowName: n } : {}
         });
       },
       duplicateWorkflow: (t) => {
-        const { savedWorkflows: n } = l(), o = n.find((a) => a.id === t);
-        if (!o) return "";
-        const i = Date.now(), m = le(), d = {
-          ...o,
-          id: m,
-          name: `${o.name} (Copy)`,
-          createdAt: i,
-          updatedAt: i
+        const { savedWorkflows: n } = l(), i = n.find((a) => a.id === t);
+        if (!i) return "";
+        const s = Date.now(), p = de(), d = {
+          ...i,
+          id: p,
+          name: `${i.name} (Copy)`,
+          createdAt: s,
+          updatedAt: s
         };
-        return r({ savedWorkflows: [...n, d] }), m;
+        return r({ savedWorkflows: [...n, d] }), p;
       },
       loadGeneratedWorkflow: (t) => {
-        const n = /* @__PURE__ */ new Map(), o = 250, i = 150, m = 3, d = t.nodes.map((p, c) => {
+        const n = /* @__PURE__ */ new Map(), i = 250, s = 150, p = 3, d = t.nodes.map((m, c) => {
           const u = V();
-          n.set(p.id, u);
-          const h = p.nodeType.split(":"), f = h[0], w = Math.floor(c / m), y = {
-            x: 100 + c % m * o,
-            y: 100 + w * i
+          n.set(m.id, u);
+          const h = m.nodeType.split(":"), f = h[0], y = Math.floor(c / p), w = {
+            x: 100 + c % p * i,
+            y: 100 + y * s
           };
           let b;
           if (f === "generator")
             b = {
               generatorName: h.slice(1).join(":"),
-              params: p.parameters,
+              params: m.parameters,
               isAI: !0
               // Assume AI since we're generating from AI
             };
@@ -754,7 +754,7 @@ const k = ce()(
             b = {
               operation: h.slice(2).join(":"),
               providerName: g,
-              params: p.parameters
+              params: m.parameters
             };
           } else if (f === "input")
             b = {
@@ -765,13 +765,13 @@ const k = ce()(
           else if (f === "vision")
             b = {
               providerName: h.slice(1).join(":"),
-              params: p.parameters
+              params: m.parameters
             };
           else if (f === "text") {
-            const g = h.slice(1).join(":"), N = p.parameters.jsonSchema, W = N != null && N.properties ? {
+            const g = h.slice(1).join(":"), z = m.parameters.jsonSchema, W = z != null && z.properties ? {
               type: "object",
               properties: Object.fromEntries(
-                Object.entries(N.properties).map(([x, C]) => [
+                Object.entries(z.properties).map(([x, C]) => [
                   x,
                   {
                     type: C.type || "string",
@@ -782,28 +782,28 @@ const k = ce()(
             } : void 0;
             b = {
               providerName: g,
-              params: p.parameters,
+              params: m.parameters,
               outputSchema: W
             };
           } else
             b = {
-              destination: p.parameters.destination || "./output/image.png",
-              provider: p.parameters.provider || "filesystem"
+              destination: m.parameters.destination || "./output/image.png",
+              provider: m.parameters.provider || "filesystem"
             };
           return {
             id: u,
             type: f,
-            position: y,
+            position: w,
             data: b
           };
-        }), a = t.edges.map((p) => {
-          const c = n.get(p.source) || p.source, u = n.get(p.target) || p.target, h = [p.sourceHandle, p.targetHandle].filter(Boolean).join("_");
+        }), a = t.edges.map((m) => {
+          const c = n.get(m.source) || m.source, u = n.get(m.target) || m.target, h = [m.sourceHandle, m.targetHandle].filter(Boolean).join("_");
           return {
             id: h ? `edge_${c}_${u}_${h}` : `edge_${c}_${u}`,
             source: c,
             target: u,
-            sourceHandle: p.sourceHandle ?? void 0,
-            targetHandle: p.targetHandle ?? void 0
+            sourceHandle: m.sourceHandle ?? void 0,
+            targetHandle: m.targetHandle ?? void 0
           };
         });
         r({
@@ -839,20 +839,20 @@ function _(r) {
   var t;
   const l = {};
   if ((t = r.params) != null && t.properties)
-    for (const [n, o] of Object.entries(r.params.properties))
-      o.default !== void 0 && (l[n] = o.default);
+    for (const [n, i] of Object.entries(r.params.properties))
+      i.default !== void 0 && (l[n] = i.default);
   return l;
 }
 function B(r) {
   return r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
 function X({ nodeId: r, color: l }) {
-  const t = k((o) => o.previewVisible[r] !== !1), n = k((o) => o.togglePreview);
+  const t = k((i) => i.previewVisible[r] !== !1), n = k((i) => i.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
-      onClick: (o) => {
-        o.stopPropagation(), n(r);
+      onClick: (i) => {
+        i.stopPropagation(), n(r);
       },
       className: `ml-auto p-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-600 transition-colors ${t ? "opacity-100" : "opacity-40"}`,
       title: t ? "Hide preview" : "Show preview",
@@ -876,18 +876,18 @@ function X({ nodeId: r, color: l }) {
     }
   );
 }
-const Je = E(function({
+const Qe = E(function({
   id: l,
   data: t,
   selected: n
 }) {
-  const o = k((u) => u.execution.previews[l]), i = k((u) => u.execution.nodeStatus[l]), m = k((u) => u.previewVisible[l] !== !1), a = B(i) || (n ? "border-blue-500" : "border-blue-200"), p = t.isAI, c = t.acceptsReferenceImages;
-  return /* @__PURE__ */ s(
+  const i = k((u) => u.execution.previews[l]), s = k((u) => u.execution.nodeStatus[l]), p = k((u) => u.previewVisible[l] !== !1), a = B(s) || (n ? "border-blue-500" : "border-blue-200"), m = t.isAI, c = t.acceptsReferenceImages;
+  return /* @__PURE__ */ o(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
       children: [
-        p && /* @__PURE__ */ e(
+        m && /* @__PURE__ */ e(
           A,
           {
             type: "target",
@@ -908,16 +908,16 @@ const Je = E(function({
             title: `Reference images (up to ${t.maxReferenceImages || 14})`
           }
         ),
-        o && m && /* @__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: o, alt: "Preview", className: "w-full h-24 object-contain" }) }),
-        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
+        i && 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: i, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        /* @__PURE__ */ o("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ o("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(X, { nodeId: l, color: "text-blue-500 dark:text-blue-400" })
           ] }),
-          p && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
+          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(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, h]) => /* @__PURE__ */ s("div", { className: "truncate", children: [
+          /* @__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__ */ o("div", { className: "truncate", children: [
             u,
             ": ",
             String(h).slice(0, 20)
@@ -927,18 +927,18 @@ const Je = E(function({
       ]
     }
   );
-}), Qe = E(function({
+}), Ye = E(function({
   id: l,
   data: t,
   selected: n
 }) {
-  const o = k((u) => u.execution.previews[l]), i = k((u) => u.execution.nodeStatus[l]), m = k((u) => u.previewVisible[l] !== !1), a = B(i) || (n ? "border-teal-500" : "border-teal-200"), p = t.isAI, c = t.acceptsReferenceImages;
-  return /* @__PURE__ */ s(
+  const i = k((u) => u.execution.previews[l]), s = k((u) => u.execution.nodeStatus[l]), p = k((u) => u.previewVisible[l] !== !1), a = B(s) || (n ? "border-teal-500" : "border-teal-200"), m = t.isAI, c = t.acceptsReferenceImages;
+  return /* @__PURE__ */ o(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
       children: [
-        p && /* @__PURE__ */ e(
+        m && /* @__PURE__ */ e(
           A,
           {
             type: "target",
@@ -959,10 +959,10 @@ const Je = E(function({
             title: `Reference images (up to ${t.maxReferenceImages || 13})`
           }
         ),
-        o && m && /* @__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: o, alt: "Preview", className: "w-full h-24 object-contain" }) }),
-        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
-            p ? /* @__PURE__ */ s("svg", { className: "w-3 h-3 text-purple-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
+        i && 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: i, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        /* @__PURE__ */ o("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-2 mb-2", children: [
+            m ? /* @__PURE__ */ o("svg", { className: "w-3 h-3 text-purple-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
               /* @__PURE__ */ e("path", { d: "M13 7H7v6h6V7z" }),
               /* @__PURE__ */ e(
                 "path",
@@ -976,7 +976,7 @@ const Je = E(function({
             /* @__PURE__ */ e(
               "span",
               {
-                className: `font-semibold text-sm ${p ? "text-purple-700 dark:text-purple-400" : "text-teal-700 dark:text-teal-400"}`,
+                className: `font-semibold text-sm ${m ? "text-purple-700 dark:text-purple-400" : "text-teal-700 dark:text-teal-400"}`,
                 children: t.operation
               }
             ),
@@ -984,13 +984,13 @@ const Je = E(function({
               X,
               {
                 nodeId: l,
-                color: p ? "text-purple-500 dark:text-purple-400" : "text-teal-500 dark:text-teal-400"
+                color: m ? "text-purple-500 dark:text-purple-400" : "text-teal-500 dark:text-teal-400"
               }
             )
           ] }),
-          p && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
+          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(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, h]) => /* @__PURE__ */ s("div", { className: "truncate", children: [
+          /* @__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__ */ o("div", { className: "truncate", children: [
             u,
             ": ",
             String(h).slice(0, 20)
@@ -1000,15 +1000,15 @@ const Je = E(function({
       ]
     }
   );
-}), Ye = E(function({ id: l, data: t, selected: n }) {
-  const o = k((d) => d.execution.nodeStatus[l]), m = B(o) || (n ? "border-green-500" : "border-green-200");
-  return /* @__PURE__ */ s(
+}), Xe = E(function({ id: l, data: t, selected: n }) {
+  const i = k((d) => d.execution.nodeStatus[l]), p = B(i) || (n ? "border-green-500" : "border-green-200");
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${m}`,
+      className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${p}`,
       children: [
         /* @__PURE__ */ e(A, { type: "target", position: P.Left, className: "w-3 h-3 !bg-green-500" }),
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ o("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" })
         ] }),
@@ -1016,11 +1016,11 @@ const Je = E(function({
       ]
     }
   );
-}), Xe = E(function({ id: l, data: t, selected: n }) {
-  const o = k((y) => y.execution.previews[l]), i = k((y) => y.execution.nodeStatus[l]), m = k((y) => y.previewVisible[l] !== !1), d = k((y) => y.updateNodeData), a = Q(null), c = B(i) || (n ? "border-amber-500" : "border-amber-200"), u = L(
-    async (y) => {
+}), Ze = E(function({ id: l, data: t, selected: n }) {
+  const i = k((w) => w.execution.previews[l]), s = k((w) => w.execution.nodeStatus[l]), p = k((w) => w.previewVisible[l] !== !1), d = k((w) => w.updateNodeData), a = Q(null), c = B(s) || (n ? "border-amber-500" : "border-amber-200"), u = L(
+    async (w) => {
       try {
-        const b = await Be(y);
+        const b = await Ve(w);
         d(l, {
           uploadId: b.id,
           filename: b.filename,
@@ -1032,38 +1032,38 @@ const Je = E(function({
     },
     [l, d]
   ), h = L(
-    (y) => {
-      y.preventDefault(), y.stopPropagation();
-      const b = y.dataTransfer.files[0];
+    (w) => {
+      w.preventDefault(), w.stopPropagation();
+      const b = w.dataTransfer.files[0];
       b && b.type.startsWith("image/") && u(b);
     },
     [u]
-  ), f = L((y) => {
-    y.preventDefault(), y.stopPropagation();
-  }, []), w = L(
-    (y) => {
+  ), f = L((w) => {
+    w.preventDefault(), w.stopPropagation();
+  }, []), y = L(
+    (w) => {
       var g;
-      const b = (g = y.target.files) == null ? void 0 : g[0];
+      const b = (g = w.target.files) == null ? void 0 : g[0];
       b && u(b);
     },
     [u]
-  ), v = o || (t.uploadId ? pe(t.uploadId) : null);
-  return /* @__PURE__ */ s(
+  ), v = i || (t.uploadId ? ue(t.uploadId) : null);
+  return /* @__PURE__ */ o(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
       onDrop: h,
       onDragOver: f,
       children: [
-        v && m ? /* @__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: v, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : v ? null : /* @__PURE__ */ e(
+        v && 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: v, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : v ? 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 y;
-              return (y = a.current) == null ? void 0 : y.click();
+              var w;
+              return (w = a.current) == null ? void 0 : w.click();
             },
-            children: /* @__PURE__ */ s("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
+            children: /* @__PURE__ */ o("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
               /* @__PURE__ */ e("div", { className: "text-2xl mb-1", children: "+" }),
               /* @__PURE__ */ e("div", { className: "text-xs", children: "Drop image or click" })
             ] })
@@ -1076,11 +1076,11 @@ const Je = E(function({
             type: "file",
             accept: "image/*",
             className: "hidden",
-            onChange: w
+            onChange: y
           }
         ),
-        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ o("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ o("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(X, { nodeId: l, color: "text-amber-500 dark:text-amber-400" })
@@ -1091,29 +1091,29 @@ const Je = E(function({
       ]
     }
   );
-}), Ze = E(function({
+}), et = E(function({
   id: l,
   data: t,
   selected: n
 }) {
   var c, u, h;
-  const o = k((f) => f.execution.nodeStatus[l]), i = k((f) => {
-    var w;
-    return (w = f.execution.dataOutputs) == null ? void 0 : w[l];
-  }), d = B(o) || (n ? "border-cyan-500" : "border-cyan-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], p = a.length > 0;
-  return /* @__PURE__ */ s(
+  const i = k((f) => f.execution.nodeStatus[l]), s = k((f) => {
+    var y;
+    return (y = f.execution.dataOutputs) == null ? void 0 : y[l];
+  }), d = B(i) || (n ? "border-cyan-500" : "border-cyan-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
+  return /* @__PURE__ */ o(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
       children: [
         /* @__PURE__ */ e(A, { type: "target", position: P.Left, className: "w-3 h-3 !bg-cyan-500" }),
-        i && /* @__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__ */ s("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
-          (u = i.content) == null ? void 0 : u.slice(0, 200),
-          (((h = i.content) == null ? void 0 : h.length) || 0) > 200 && "..."
+        s && /* @__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__ */ o("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
+          (u = s.content) == null ? void 0 : u.slice(0, 200),
+          (((h = s.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
-        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
-            /* @__PURE__ */ s("svg", { className: "w-3 h-3 text-cyan-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
+        /* @__PURE__ */ o("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ o("svg", { className: "w-3 h-3 text-cyan-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
               /* @__PURE__ */ e("path", { d: "M10 12a2 2 0 100-4 2 2 0 000 4z" }),
               /* @__PURE__ */ e(
                 "path",
@@ -1126,13 +1126,13 @@ const Je = E(function({
             ] }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-cyan-700 dark:text-cyan-400", children: t.providerLabel || t.providerName })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ s("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ o("div", { className: "truncate", children: [
             String(t.params.prompt).slice(0, 30),
             "..."
           ] }) : null }),
-          p && /* @__PURE__ */ s("div", { className: "mt-2 pt-2 border-t border-cyan-200 dark:border-cyan-800", children: [
+          m && /* @__PURE__ */ o("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(([f]) => /* @__PURE__ */ s(
+            a.map(([f]) => /* @__PURE__ */ o(
               "div",
               {
                 className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
@@ -1145,7 +1145,7 @@ const Je = E(function({
             ))
           ] })
         ] }),
-        p ? /* @__PURE__ */ s(U, { children: [
+        m ? /* @__PURE__ */ o(U, { children: [
           /* @__PURE__ */ e(
             A,
             {
@@ -1157,7 +1157,7 @@ const Je = E(function({
               title: "Full JSON output"
             }
           ),
-          a.map(([f, w], v) => /* @__PURE__ */ e(
+          a.map(([f, y], v) => /* @__PURE__ */ e(
             A,
             {
               type: "source",
@@ -1167,7 +1167,7 @@ const Je = E(function({
               style: {
                 top: `${70 + v * 14}%`
               },
-              title: `${f}: ${w.description || w.type}`
+              title: `${f}: ${y.description || y.type}`
             },
             f
           ))
@@ -1175,24 +1175,24 @@ const Je = E(function({
       ]
     }
   );
-}), et = E(function({ id: l, data: t, selected: n }) {
+}), tt = E(function({ id: l, data: t, selected: n }) {
   var c, u, h;
-  const o = k((f) => f.execution.nodeStatus[l]), i = k((f) => {
-    var w;
-    return (w = f.execution.dataOutputs) == null ? void 0 : w[l];
-  }), d = B(o) || (n ? "border-pink-500" : "border-pink-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], p = a.length > 0;
-  return /* @__PURE__ */ s(
+  const i = k((f) => f.execution.nodeStatus[l]), s = k((f) => {
+    var y;
+    return (y = f.execution.dataOutputs) == null ? void 0 : y[l];
+  }), d = B(i) || (n ? "border-pink-500" : "border-pink-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
+  return /* @__PURE__ */ o(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
       children: [
         /* @__PURE__ */ e(A, { type: "target", position: P.Left, className: "w-3 h-3 !bg-pink-500" }),
-        i && /* @__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__ */ s("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
-          (u = i.content) == null ? void 0 : u.slice(0, 200),
-          (((h = i.content) == null ? void 0 : h.length) || 0) > 200 && "..."
+        s && /* @__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__ */ o("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
+          (u = s.content) == null ? void 0 : u.slice(0, 200),
+          (((h = s.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
-        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ o("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-pink-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
               "path",
               {
@@ -1203,13 +1203,13 @@ const Je = E(function({
             ) }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-pink-700 dark:text-pink-400", children: t.providerLabel || t.providerName })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ s("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ o("div", { className: "truncate", children: [
             String(t.params.prompt).slice(0, 30),
             "..."
           ] }) : null }),
-          p && /* @__PURE__ */ s("div", { className: "mt-2 pt-2 border-t border-pink-200 dark:border-pink-800", children: [
+          m && /* @__PURE__ */ o("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(([f]) => /* @__PURE__ */ s(
+            a.map(([f]) => /* @__PURE__ */ o(
               "div",
               {
                 className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
@@ -1222,7 +1222,7 @@ const Je = E(function({
             ))
           ] })
         ] }),
-        p ? /* @__PURE__ */ s(U, { children: [
+        m ? /* @__PURE__ */ o(U, { children: [
           /* @__PURE__ */ e(
             A,
             {
@@ -1234,7 +1234,7 @@ const Je = E(function({
               title: "Full JSON output"
             }
           ),
-          a.map(([f, w], v) => /* @__PURE__ */ e(
+          a.map(([f, y], v) => /* @__PURE__ */ e(
             A,
             {
               type: "source",
@@ -1244,7 +1244,7 @@ const Je = E(function({
               style: {
                 top: `${70 + v * 14}%`
               },
-              title: `${f}: ${w.description || w.type}`
+              title: `${f}: ${y.description || y.type}`
             },
             f
           ))
@@ -1252,18 +1252,18 @@ const Je = E(function({
       ]
     }
   );
-}), tt = {
-  generator: Je,
-  transform: Qe,
-  save: Ye,
-  input: Xe,
-  vision: Ze,
-  text: et
-}, rt = {
+}), rt = {
+  generator: Qe,
+  transform: Ye,
+  save: Xe,
+  input: Ze,
+  vision: et,
+  text: tt
+}, at = {
   type: "smoothstep",
   animated: !1,
   markerEnd: {
-    type: Ce.ArrowClosed,
+    type: Ie.ArrowClosed,
     color: "#64748b",
     width: 20,
     height: 20
@@ -1273,53 +1273,53 @@ const Je = E(function({
     strokeWidth: 2
   }
 };
-function at() {
-  const r = k((h) => h.nodes), l = k((h) => h.edges), t = k((h) => h.setNodes), n = k((h) => h.setEdges), o = k((h) => h.addEdge), i = k((h) => h.setSelectedNode), m = L(
+function nt() {
+  const r = k((h) => h.nodes), l = k((h) => h.edges), t = k((h) => h.setNodes), n = k((h) => h.setEdges), i = k((h) => h.addEdge), s = k((h) => h.setSelectedNode), p = L(
     (h) => {
-      const { source: f, target: w } = h;
-      if (!f || !w) return !1;
-      const v = r.find((g) => g.id === f), y = r.find((g) => g.id === w);
-      return !(!v || !y || v.type === "save" || y.type === "generator" || y.type === "input" || l.find(
-        (g) => g.target === w && g.targetHandle === h.targetHandle
-      ) || f === w);
+      const { source: f, target: y } = h;
+      if (!f || !y) return !1;
+      const v = r.find((g) => g.id === f), w = r.find((g) => g.id === y);
+      return !(!v || !w || v.type === "save" || w.type === "generator" || w.type === "input" || l.find(
+        (g) => g.target === y && g.targetHandle === h.targetHandle
+      ) || f === y);
     },
     [r, l]
   ), d = L(
     (h) => {
-      t(Ne(h, r));
+      t(ze(h, r));
     },
     [r, t]
   ), a = L(
     (h) => {
-      n(ze(h, l));
+      n(Ce(h, l));
     },
     [l, n]
-  ), p = L(
+  ), m = L(
     (h) => {
-      o(h);
+      i(h);
     },
-    [o]
+    [i]
   ), c = L(
     (h, f) => {
-      i(f.id);
+      s(f.id);
     },
-    [i]
+    [s]
   ), u = L(() => {
-    i(null);
-  }, [i]);
-  return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ s(
-    we,
+    s(null);
+  }, [s]);
+  return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ o(
+    Ne,
     {
       nodes: r,
       edges: l,
       onNodesChange: d,
       onEdgesChange: a,
-      onConnect: p,
+      onConnect: m,
       onNodeClick: c,
       onPaneClick: u,
-      nodeTypes: tt,
-      defaultEdgeOptions: rt,
-      isValidConnection: m,
+      nodeTypes: rt,
+      defaultEdgeOptions: at,
+      isValidConnection: p,
       nodesDraggable: !0,
       nodesConnectable: !0,
       elementsSelectable: !0,
@@ -1328,23 +1328,23 @@ function at() {
       snapToGrid: !0,
       snapGrid: [15, 15],
       children: [
-        /* @__PURE__ */ e(Ie, {}),
         /* @__PURE__ */ e(Se, {}),
-        /* @__PURE__ */ e(Le, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
+        /* @__PURE__ */ e(Le, {}),
+        /* @__PURE__ */ e(We, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
       ]
     }
   ) });
 }
-function nt({ onSelect: r }) {
-  const [l, t] = I([]), [n, o] = I(!0), [i, m] = I(null), d = async () => {
+function ot({ onSelect: r }) {
+  const [l, t] = I([]), [n, i] = I(!0), [s, p] = I(null), d = async () => {
     try {
-      o(!0);
-      const c = await Ve();
-      t(c), m(null);
+      i(!0);
+      const c = await Ge();
+      t(c), p(null);
     } catch (c) {
-      m(c instanceof Error ? c.message : "Failed to load uploads");
+      p(c instanceof Error ? c.message : "Failed to load uploads");
     } finally {
-      o(!1);
+      i(!1);
     }
   };
   D(() => {
@@ -1353,13 +1353,13 @@ function nt({ onSelect: r }) {
   const a = async (c, u) => {
     if (u.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await Ge(c), t((h) => h.filter((f) => f.id !== c));
+        await Fe(c), t((h) => h.filter((f) => f.id !== c));
       } catch (h) {
         console.error("Failed to delete:", h);
       }
-  }, p = (c) => c < 1024 ? `${c} B` : c < 1024 * 1024 ? `${(c / 1024).toFixed(1)} KB` : `${(c / (1024 * 1024)).toFixed(1)} MB`;
-  return n ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : i ? /* @__PURE__ */ s("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
-    i,
+  }, m = (c) => c < 1024 ? `${c} B` : c < 1024 * 1024 ? `${(c / 1024).toFixed(1)} KB` : `${(c / (1024 * 1024)).toFixed(1)} MB`;
+  return n ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : s ? /* @__PURE__ */ o("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
+    s,
     /* @__PURE__ */ e(
       "button",
       {
@@ -1368,7 +1368,7 @@ function nt({ onSelect: r }) {
         children: "Retry"
       }
     )
-  ] }) : l.length === 0 ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "No uploads yet. Drag an image onto an Input node to upload." }) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: l.map((c) => /* @__PURE__ */ s(
+  ] }) : l.length === 0 ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "No uploads yet. Drag an image onto an Input node to upload." }) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: l.map((c) => /* @__PURE__ */ o(
     "div",
     {
       className: "relative group rounded border border-gray-200 dark:border-zinc-700 overflow-hidden cursor-pointer hover:border-amber-400 dark:hover:border-amber-500 transition-colors",
@@ -1377,7 +1377,7 @@ function nt({ onSelect: r }) {
         /* @__PURE__ */ e(
           "img",
           {
-            src: pe(c.id),
+            src: ue(c.id),
             alt: c.filename,
             className: "w-full h-20 object-cover"
           }
@@ -1391,25 +1391,25 @@ function nt({ onSelect: r }) {
           }
         ) }),
         /* @__PURE__ */ e("div", { className: "p-1 text-xs truncate bg-white dark:bg-zinc-800 text-gray-800 dark:text-zinc-200", children: c.filename }),
-        /* @__PURE__ */ e("div", { className: "px-1 pb-1 text-xs text-gray-400 dark:text-zinc-500 bg-white dark:bg-zinc-800", children: p(c.size) })
+        /* @__PURE__ */ e("div", { className: "px-1 pb-1 text-xs text-gray-400 dark:text-zinc-500 bg-white dark:bg-zinc-800", children: m(c.size) })
       ]
     },
     c.id
   )) }) });
 }
-function ot() {
-  const r = k((x) => x.setGenerators), l = k((x) => x.setTransforms), t = k((x) => x.setTextProviders), n = k((x) => x.setVisionProviders), o = k((x) => x.generators), i = k((x) => x.transforms), m = k((x) => x.textProviders), d = k((x) => x.visionProviders), a = k((x) => x.addNode), [p, c] = I(!1), { data: u } = F({
+function st() {
+  const r = k((x) => x.setGenerators), l = k((x) => x.setTransforms), t = k((x) => x.setTextProviders), n = k((x) => x.setVisionProviders), i = k((x) => x.generators), s = k((x) => x.transforms), p = k((x) => x.textProviders), d = k((x) => x.visionProviders), a = k((x) => x.addNode), [m, c] = I(!1), { data: u } = F({
     queryKey: ["generators"],
-    queryFn: Me
+    queryFn: je
   }), { data: h } = F({
     queryKey: ["transforms"],
-    queryFn: je
+    queryFn: De
   }), { data: f } = F({
     queryKey: ["textProviders"],
-    queryFn: De
-  }), { data: w } = F({
-    queryKey: ["visionProviders"],
     queryFn: Te
+  }), { data: y } = F({
+    queryKey: ["visionProviders"],
+    queryFn: Ue
   });
   D(() => {
     u && r(u);
@@ -1418,11 +1418,11 @@ function ot() {
   }, [h, l]), D(() => {
     f && t(f);
   }, [f, t]), D(() => {
-    w && n(w);
-  }, [w, n]);
+    y && n(y);
+  }, [y, n]);
   const v = (x, C) => {
     x.dataTransfer.setData("application/json", JSON.stringify(C)), x.dataTransfer.effectAllowed = "move";
-  }, y = (x) => {
+  }, w = (x) => {
     a(x, { x: 250, y: 150 + Math.random() * 100 });
   }, b = {
     id: "input:upload",
@@ -1456,42 +1456,42 @@ function ot() {
         }
       }
     }
-  }, N = o.reduce(
+  }, z = i.reduce(
     (x, C) => {
       const S = C.category || "Other";
       return x[S] || (x[S] = []), x[S].push(C), x;
     },
     {}
-  ), W = i.reduce(
+  ), W = s.reduce(
     (x, C) => {
       const S = C.category || "Other";
       return x[S] || (x[S] = []), x[S].push(C), x;
     },
     {}
   );
-  return /* @__PURE__ */ e("div", { className: "w-64 bg-gray-50 dark:bg-zinc-800 border-r border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ s("div", { className: "p-4", children: [
+  return /* @__PURE__ */ e("div", { className: "w-64 bg-gray-50 dark:bg-zinc-800 border-r border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ o("div", { className: "p-4", children: [
     /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white mb-4", children: "Nodes" }),
-    /* @__PURE__ */ s("div", { className: "mb-6", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-2", children: [
+    /* @__PURE__ */ o("div", { className: "mb-6", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-amber-600 dark:text-amber-400 uppercase tracking-wide", children: "Input" }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => c(!p),
+            onClick: () => c(!m),
             className: "text-xs text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300",
             children: [
-              p ? "Hide" : "Browse",
+              m ? "Hide" : "Browse",
               " Uploads"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "div",
         {
           draggable: !0,
           onDragStart: (x) => v(x, b),
-          onDoubleClick: () => y(b),
+          onDoubleClick: () => w(b),
           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" }),
@@ -1499,18 +1499,18 @@ function ot() {
           ]
         }
       ),
-      p && /* @__PURE__ */ e("div", { className: "mt-2 border border-amber-200 dark:border-amber-700 rounded bg-white dark:bg-zinc-900 max-h-64 overflow-y-auto", children: /* @__PURE__ */ e(nt, {}) })
+      m && /* @__PURE__ */ e("div", { className: "mt-2 border border-amber-200 dark:border-amber-700 rounded bg-white dark:bg-zinc-900 max-h-64 overflow-y-auto", children: /* @__PURE__ */ e(ot, {}) })
     ] }),
-    /* @__PURE__ */ s("div", { className: "mb-6", children: [
+    /* @__PURE__ */ o("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(([x, C]) => /* @__PURE__ */ s("div", { className: "mb-3", children: [
+      Object.entries(z).map(([x, C]) => /* @__PURE__ */ o("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: x }),
-        C.map((S) => /* @__PURE__ */ s(
+        C.map((S) => /* @__PURE__ */ o(
           "div",
           {
             draggable: !0,
             onDragStart: (T) => v(T, S),
-            onDoubleClick: () => y(S),
+            onDoubleClick: () => w(S),
             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 }),
@@ -1521,16 +1521,16 @@ function ot() {
         ))
       ] }, x))
     ] }),
-    /* @__PURE__ */ s("div", { className: "mb-6", children: [
+    /* @__PURE__ */ o("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(([x, C]) => /* @__PURE__ */ s("div", { className: "mb-3", children: [
+      Object.entries(W).map(([x, C]) => /* @__PURE__ */ o("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: x }),
-        C.map((S) => /* @__PURE__ */ s(
+        C.map((S) => /* @__PURE__ */ o(
           "div",
           {
             draggable: !0,
             onDragStart: (T) => v(T, S),
-            onDoubleClick: () => y(S),
+            onDoubleClick: () => w(S),
             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 }),
@@ -1541,14 +1541,14 @@ function ot() {
         ))
       ] }, x))
     ] }),
-    m.length > 0 && /* @__PURE__ */ s("div", { className: "mb-6", children: [
+    p.length > 0 && /* @__PURE__ */ o("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" }),
-      m.map((x) => /* @__PURE__ */ s(
+      p.map((x) => /* @__PURE__ */ o(
         "div",
         {
           draggable: !0,
           onDragStart: (C) => v(C, x),
-          onDoubleClick: () => y(x),
+          onDoubleClick: () => w(x),
           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: x.label }),
@@ -1558,14 +1558,14 @@ function ot() {
         x.id
       ))
     ] }),
-    d.length > 0 && /* @__PURE__ */ s("div", { className: "mb-6", children: [
+    d.length > 0 && /* @__PURE__ */ o("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" }),
-      d.map((x) => /* @__PURE__ */ s(
+      d.map((x) => /* @__PURE__ */ o(
         "div",
         {
           draggable: !0,
           onDragStart: (C) => v(C, x),
-          onDoubleClick: () => y(x),
+          onDoubleClick: () => w(x),
           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: x.label }),
@@ -1575,14 +1575,14 @@ function ot() {
         x.id
       ))
     ] }),
-    /* @__PURE__ */ s("div", { className: "mb-6", children: [
+    /* @__PURE__ */ o("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-green-600 dark:text-green-400 uppercase tracking-wide mb-2", children: "Output" }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "div",
         {
           draggable: !0,
           onDragStart: (x) => v(x, g),
-          onDoubleClick: () => y(g),
+          onDoubleClick: () => w(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" }),
@@ -1593,21 +1593,21 @@ function ot() {
     ] })
   ] }) });
 }
-function st() {
-  var f, w, v, y;
-  const r = k((b) => b.selectedNodeId), l = k((b) => b.nodes), t = k((b) => b.generators), n = k((b) => b.transforms), o = k((b) => b.textProviders), i = k((b) => b.visionProviders), m = k((b) => b.updateNodeData), d = k((b) => b.deleteNode), a = l.find((b) => b.id === r);
+function it() {
+  var f, y, v, w;
+  const r = k((b) => b.selectedNodeId), l = k((b) => b.nodes), t = k((b) => b.generators), n = k((b) => b.transforms), i = k((b) => b.textProviders), s = k((b) => b.visionProviders), p = k((b) => b.updateNodeData), d = k((b) => b.deleteNode), a = l.find((b) => b.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 p, c = "";
+  let m, c = "";
   if (a.type === "generator") {
-    const b = a.data, g = t.find((N) => N.name === b.generatorName);
-    p = (f = g == null ? void 0 : g.params) == null ? void 0 : f.properties, c = (g == null ? void 0 : g.label) || b.generatorName;
+    const b = a.data, g = t.find((z) => z.name === b.generatorName);
+    m = (f = g == null ? void 0 : g.params) == null ? void 0 : f.properties, c = (g == null ? void 0 : g.label) || b.generatorName;
   } else if (a.type === "transform") {
-    const b = a.data, g = n.find((N) => N.name === b.operation);
-    p = (w = g == null ? void 0 : g.params) == null ? void 0 : w.properties, c = (g == null ? void 0 : g.label) || b.operation;
+    const b = a.data, g = n.find((z) => z.name === b.operation);
+    m = (y = g == null ? void 0 : g.params) == null ? void 0 : y.properties, c = (g == null ? void 0 : g.label) || b.operation;
   } else if (a.type === "save") {
     const g = a.data.provider === "floimg-cloud";
-    c = g ? "Save to FloImg Cloud" : "Save", p = {
+    c = g ? "Save to FloImg Cloud" : "Save", m = {
       destination: {
         type: "string",
         title: g ? "Filename" : "Destination",
@@ -1615,34 +1615,34 @@ function st() {
       }
     };
   } else if (a.type === "text") {
-    const b = a.data, g = o.find((N) => N.name === b.providerName);
-    p = (v = g == null ? void 0 : g.params) == null ? void 0 : v.properties, c = (g == null ? void 0 : g.label) || b.providerName;
+    const b = a.data, g = i.find((z) => z.name === b.providerName);
+    m = (v = g == null ? void 0 : g.params) == null ? void 0 : v.properties, c = (g == null ? void 0 : g.label) || b.providerName;
   } else if (a.type === "vision") {
-    const b = a.data, g = i.find((N) => N.name === b.providerName);
-    p = (y = g == null ? void 0 : g.params) == null ? void 0 : y.properties, c = (g == null ? void 0 : g.label) || b.providerName;
+    const b = a.data, g = s.find((z) => z.name === b.providerName);
+    m = (w = g == null ? void 0 : g.params) == null ? void 0 : w.properties, c = (g == null ? void 0 : g.label) || b.providerName;
   }
   const u = (b, g) => {
     if (a.type === "generator") {
-      const N = a.data;
-      m(a.id, {
-        params: { ...N.params, [b]: g }
+      const z = a.data;
+      p(a.id, {
+        params: { ...z.params, [b]: g }
       });
     } else if (a.type === "transform") {
-      const N = a.data;
-      m(a.id, {
-        params: { ...N.params, [b]: g }
+      const z = a.data;
+      p(a.id, {
+        params: { ...z.params, [b]: g }
       });
     } else if (a.type === "save")
-      m(a.id, { [b]: g });
+      p(a.id, { [b]: g });
     else if (a.type === "text") {
-      const N = a.data;
-      m(a.id, {
-        params: { ...N.params, [b]: g }
+      const z = a.data;
+      p(a.id, {
+        params: { ...z.params, [b]: g }
       });
     } else if (a.type === "vision") {
-      const N = a.data;
-      m(a.id, {
-        params: { ...N.params, [b]: g }
+      const z = a.data;
+      p(a.id, {
+        params: { ...z.params, [b]: g }
       });
     }
   }, h = (b) => {
@@ -1657,8 +1657,8 @@ function st() {
     if (a.type === "vision")
       return a.data.params[b];
   };
-  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__ */ s("div", { className: "p-4", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-4", children: [
+  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__ */ o("div", { className: "p-4", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: c }),
       /* @__PURE__ */ e(
         "button",
@@ -1669,77 +1669,77 @@ function st() {
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: p && Object.entries(p).map(([b, g]) => /* @__PURE__ */ e(
-      it,
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: m && Object.entries(m).map(([b, g]) => /* @__PURE__ */ e(
+      lt,
       {
         name: b,
         field: g,
         value: h(b),
-        onChange: (N) => u(b, N)
+        onChange: (z) => u(b, z)
       },
       b
     )) }),
     (a.type === "text" || a.type === "vision") && /* @__PURE__ */ e(
-      lt,
+      dt,
       {
         nodeId: a.id,
         outputSchema: a.data.outputSchema,
-        updateNodeData: m
+        updateNodeData: p
       }
     )
   ] }) });
 }
-function it({ name: r, field: l, value: t, onChange: n }) {
-  const o = l.title || r, i = "w-full px-3 py-2 border border-gray-300 dark:border-zinc-600 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100";
-  return l.enum ? /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
-    /* @__PURE__ */ s(
+function lt({ name: r, field: l, value: t, onChange: n }) {
+  const i = l.title || r, s = "w-full px-3 py-2 border border-gray-300 dark:border-zinc-600 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100";
+  return l.enum ? /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+    /* @__PURE__ */ o(
       "select",
       {
         value: String(t || ""),
-        onChange: (m) => n(m.target.value),
-        className: i,
+        onChange: (p) => n(p.target.value),
+        className: s,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-          l.enum.map((m) => /* @__PURE__ */ e("option", { value: m, children: m }, m))
+          l.enum.map((p) => /* @__PURE__ */ e("option", { value: p, children: p }, p))
         ]
       }
     ),
     l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
-  ] }) : l.type === "number" ? /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
+  ] }) : l.type === "number" ? /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
     /* @__PURE__ */ e(
       "input",
       {
         type: "number",
         value: t !== void 0 ? Number(t) : "",
-        onChange: (m) => n(Number(m.target.value)),
+        onChange: (p) => n(Number(p.target.value)),
         min: l.minimum,
         max: l.maximum,
-        className: i
+        className: s
       }
     ),
     l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
-  ] }) : l.type === "boolean" ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+  ] }) : l.type === "boolean" ? /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
         checked: !!t,
-        onChange: (m) => n(m.target.checked),
+        onChange: (p) => n(p.target.checked),
         className: "h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900"
       }
     ),
-    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: o })
-  ] }) : r.toLowerCase().includes("color") && typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
-    /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: i })
+  ] }) : r.toLowerCase().includes("color") && typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+    /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "color",
           value: String(t || "#000000"),
-          onChange: (m) => n(m.target.value),
+          onChange: (p) => n(p.target.value),
           className: "h-10 w-14 p-1 border border-gray-300 dark:border-zinc-600 rounded"
         }
       ),
@@ -1748,73 +1748,73 @@ function it({ name: r, field: l, value: t, onChange: n }) {
         {
           type: "text",
           value: String(t || ""),
-          onChange: (m) => n(m.target.value),
-          className: i + " flex-1"
+          onChange: (p) => n(p.target.value),
+          className: s + " flex-1"
         }
       )
     ] })
-  ] }) : l.type === "object" ? /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
+  ] }) : l.type === "object" ? /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
     /* @__PURE__ */ e(
       "textarea",
       {
         value: t ? JSON.stringify(t, null, 2) : "{}",
-        onChange: (m) => {
+        onChange: (p) => {
           try {
-            n(JSON.parse(m.target.value));
+            n(JSON.parse(p.target.value));
           } catch {
           }
         },
         rows: 4,
-        className: i + " font-mono text-xs"
+        className: s + " font-mono text-xs"
       }
     ),
     l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
-  ] }) : /* @__PURE__ */ s("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
+  ] }) : /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
     r === "prompt" || r === "code" || r === "text" ? /* @__PURE__ */ e(
       "textarea",
       {
         value: String(t || ""),
-        onChange: (m) => n(m.target.value),
+        onChange: (p) => n(p.target.value),
         rows: 3,
-        className: i
+        className: s
       }
     ) : /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: String(t || ""),
-        onChange: (m) => n(m.target.value),
-        className: i
+        onChange: (p) => n(p.target.value),
+        className: s
       }
     ),
     l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
   ] });
 }
-function lt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
-  const [n, o] = I(""), i = (l == null ? void 0 : l.properties) || {}, m = Object.entries(i), d = () => {
+function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
+  const [n, i] = I(""), s = (l == null ? void 0 : l.properties) || {}, p = Object.entries(s), d = () => {
     if (!n.trim()) return;
     const u = {
       type: "object",
       properties: {
-        ...i,
+        ...s,
         [n.trim()]: { type: "string" }
       }
     };
-    t(r, { outputSchema: u }), o("");
+    t(r, { outputSchema: u }), i("");
   }, a = (u) => {
-    const h = { ...i };
+    const h = { ...s };
     delete h[u], Object.keys(h).length === 0 ? t(r, { outputSchema: void 0 }) : t(r, {
       outputSchema: { type: "object", properties: h }
     });
-  }, p = (u, h) => {
+  }, m = (u, h) => {
     t(r, {
       outputSchema: {
         type: "object",
         properties: {
-          ...i,
-          [u]: { ...i[u], type: h }
+          ...s,
+          [u]: { ...s[u], type: h }
         }
       }
     });
@@ -1823,31 +1823,31 @@ function lt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
       outputSchema: {
         type: "object",
         properties: {
-          ...i,
-          [u]: { ...i[u], description: h || void 0 }
+          ...s,
+          [u]: { ...s[u], description: h || void 0 }
         }
       }
     });
   };
-  return /* @__PURE__ */ s("div", { className: "mt-6 pt-4 border-t border-gray-200 dark:border-zinc-700", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-3", children: [
+  return /* @__PURE__ */ o("div", { className: "mt-6 pt-4 border-t border-gray-200 dark:border-zinc-700", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-3", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: "Output Schema" }),
-      /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-500", children: m.length > 0 ? `${m.length} output${m.length > 1 ? "s" : ""}` : "No outputs defined" })
+      /* @__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." }),
-    m.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: m.map(([u, h]) => /* @__PURE__ */ s(
+    p.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: p.map(([u, h]) => /* @__PURE__ */ o(
       "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__ */ s("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ o("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: u }),
-              /* @__PURE__ */ s(
+              /* @__PURE__ */ o(
                 "select",
                 {
                   value: h.type,
-                  onChange: (f) => p(u, f.target.value),
+                  onChange: (f) => m(u, f.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" }),
@@ -1891,13 +1891,13 @@ function lt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
       },
       u
     )) }),
-    /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
           value: n,
-          onChange: (u) => o(u.target.value),
+          onChange: (u) => i(u.target.value),
           onKeyDown: (u) => u.key === "Enter" && d(),
           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"
@@ -1913,33 +1913,33 @@ function lt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
         }
       )
     ] }),
-    m.length > 0 && /* @__PURE__ */ e("p", { className: "mt-3 text-xs text-gray-500 dark:text-zinc-500", children: "Connect from the small pink handles on the right of the node to route individual properties." })
+    p.length > 0 && /* @__PURE__ */ e("p", { className: "mt-3 text-xs text-gray-500 dark:text-zinc-500", children: "Connect from the small pink handles on the right of the node to route individual properties." })
   ] });
 }
-function dt(r, l) {
-  const t = new Map(r.map((d) => [d.id, d])), n = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
+function ct(r, l) {
+  const t = new Map(r.map((d) => [d.id, d])), n = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
   for (const d of r)
-    n.set(d.id, 0), o.set(d.id, []);
+    n.set(d.id, 0), i.set(d.id, []);
   for (const d of l) {
-    const a = o.get(d.source) || [];
-    a.push(d.target), o.set(d.source, a), n.set(d.target, (n.get(d.target) || 0) + 1);
+    const a = i.get(d.source) || [];
+    a.push(d.target), i.set(d.source, a), n.set(d.target, (n.get(d.target) || 0) + 1);
   }
-  const i = [];
+  const s = [];
   for (const [d, a] of n)
-    a === 0 && i.push(d);
-  const m = [];
-  for (; i.length > 0; ) {
-    const d = i.shift(), a = t.get(d);
-    a && m.push(a);
-    const p = o.get(d) || [];
-    for (const c of p) {
+    a === 0 && s.push(d);
+  const p = [];
+  for (; s.length > 0; ) {
+    const d = s.shift(), a = t.get(d);
+    a && p.push(a);
+    const m = i.get(d) || [];
+    for (const c of m) {
       const u = (n.get(c) || 1) - 1;
-      n.set(c, u), u === 0 && i.push(c);
+      n.set(c, u), u === 0 && s.push(c);
     }
   }
-  return m;
+  return p;
 }
-function ct(r) {
+function mt(r) {
   const l = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
   return `${l}_${t}`;
 }
@@ -1947,20 +1947,20 @@ function G(r) {
   return typeof r == "string" ? r.includes(`
 `) ? "`" + r.replace(/`/g, "\\`").replace(/\$/g, "\\$") + "`" : JSON.stringify(r) : JSON.stringify(r, null, 2);
 }
-function mt(r, l, t) {
-  const n = t.get(r.id), o = [], i = l.find((d) => d.target === r.id), m = i ? t.get(i.source) : null;
+function pt(r, l, t) {
+  const n = t.get(r.id), i = [], s = l.find((d) => d.target === r.id), p = s ? t.get(s.source) : null;
   switch (r.type) {
     case "generator": {
       const d = r.data;
-      o.push(d.generatorName);
-      const a = d.params || {}, p = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${G(u)}`).join(`,
+      i.push(d.generatorName);
+      const a = d.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${G(u)}`).join(`,
 `);
       return {
         code: `// Generate image using ${d.generatorName}
 const ${n} = await ${d.generatorName}({
-${p}
+${m}
 });`,
-        imports: o
+        imports: i
       };
     }
     case "input":
@@ -1970,44 +1970,44 @@ const ${n} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      const d = r.data, a = d.params || {}, p = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `${u}: ${G(h)}`).join(", "), c = m || "image";
+      const d = r.data, a = d.params || {}, m = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `${u}: ${G(h)}`).join(", "), c = p || "image";
       return {
         code: `// Apply ${d.operation} transform
-const ${n} = await flo.transform(${c}, "${d.operation}"${p ? `, { ${p} }` : ""});`,
+const ${n} = await flo.transform(${c}, "${d.operation}"${m ? `, { ${m} }` : ""});`,
         imports: []
       };
     }
     case "vision": {
       const d = r.data;
-      o.push(d.providerName);
-      const a = d.params || {}, p = m || "image", c = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `  ${u}: ${G(h)}`).join(`,
+      i.push(d.providerName);
+      const a = d.params || {}, m = p || "image", c = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `  ${u}: ${G(h)}`).join(`,
 `);
       return {
         code: `// Analyze image with ${d.providerName}
-const ${n} = await ${d.providerName}.analyze(${p}, {
+const ${n} = await ${d.providerName}.analyze(${m}, {
 ${c}
 });`,
-        imports: o
+        imports: i
       };
     }
     case "text": {
       const d = r.data;
-      o.push(d.providerName);
-      const a = d.params || {}, p = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${G(u)}`).join(`,
+      i.push(d.providerName);
+      const a = d.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${G(u)}`).join(`,
 `);
       return {
         code: `// Generate text with ${d.providerName}
 const ${n} = await ${d.providerName}.generate({
-${p}
+${m}
 });`,
-        imports: o
+        imports: i
       };
     }
     case "save": {
       const d = r.data;
       return {
         code: `// Save result
-await flo.save(${m || "result"}, ${G(d.destination)});`,
+await flo.save(${p || "result"}, ${G(d.destination)});`,
         imports: []
       };
     }
@@ -2018,22 +2018,22 @@ await flo.save(${m || "result"}, ${G(d.destination)});`,
       };
   }
 }
-function pt(r, l) {
+function ut(r, l) {
   if (r.length === 0)
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
-  const t = dt(r, l), n = /* @__PURE__ */ new Map();
-  for (const p of t)
-    n.set(p.id, ct(p));
-  const o = /* @__PURE__ */ new Set(), i = [];
-  for (const p of t) {
-    const { code: c, imports: u } = mt(p, l, n);
-    i.push(c);
+  const t = ct(r, l), n = /* @__PURE__ */ new Map();
+  for (const m of t)
+    n.set(m.id, mt(m));
+  const i = /* @__PURE__ */ new Set(), s = [];
+  for (const m of t) {
+    const { code: c, imports: u } = pt(m, l, n);
+    s.push(c);
     for (const h of u)
-      o.add(h);
+      i.add(h);
   }
-  const m = [];
-  o.size > 0 && m.push(`import { ${Array.from(o).join(", ")} } from "@teamflojo/floimg";`), m.push('import * as flo from "@teamflojo/floimg";');
+  const p = [];
+  i.size > 0 && p.push(`import { ${Array.from(i).join(", ")} } from "@teamflojo/floimg";`), p.push('import * as flo from "@teamflojo/floimg";');
   const d = `/**
  * FloImg Workflow
  * Generated by FloImg Studio
@@ -2042,8 +2042,8 @@ function pt(r, l) {
 
 `, a = `
 async function runWorkflow() {
-${i.map(
-    (p) => p.split(`
+${s.map(
+    (m) => m.split(`
 `).map((c) => "  " + c).join(`
 `)
   ).join(`
@@ -2054,20 +2054,20 @@ ${i.map(
 // Run the workflow
 runWorkflow().catch(console.error);
 `;
-  return d + m.join(`
+  return d + p.join(`
 `) + `
 ` + a;
 }
-function ut({ isOpen: r, onClose: l, onImport: t }) {
-  const [n, o] = I(""), [i, m] = I(!1), [d, a] = I(null), [p, c] = I(!1), u = L(async () => {
+function gt({ isOpen: r, onClose: l, onImport: t }) {
+  const [n, i] = I(""), [s, p] = I(!1), [d, a] = I(null), [m, c] = I(!1), u = L(async () => {
     if (!n.trim()) {
       a({ message: "Please enter or paste YAML content" });
       return;
     }
-    m(!0), a(null);
+    p(!0), a(null);
     try {
-      const g = await Fe(n);
-      g.success ? (t(g.nodes, g.edges, g.name), o(""), l()) : a({
+      const g = await He(n);
+      g.success ? (t(g.nodes, g.edges, g.name), i(""), l()) : a({
         message: g.error || "Import failed",
         line: g.line,
         column: g.column
@@ -2075,21 +2075,21 @@ function ut({ isOpen: r, onClose: l, onImport: t }) {
     } catch (g) {
       a({ message: g instanceof Error ? g.message : "Import failed" });
     } finally {
-      m(!1);
+      p(!1);
     }
   }, [n, t, l]), h = L(async () => {
     if (!n.trim()) {
       a({ message: "Please enter or paste YAML content" });
       return;
     }
-    m(!0), a(null);
+    p(!0), a(null);
     try {
-      const g = await He(n);
+      const g = await _e(n);
       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 {
-      m(!1);
+      p(!1);
     }
   }, [n]), f = L(async (g) => {
     if (!g.name.endsWith(".yaml") && !g.name.endsWith(".yml")) {
@@ -2097,32 +2097,32 @@ function ut({ isOpen: r, onClose: l, onImport: t }) {
       return;
     }
     try {
-      const N = await g.text();
-      o(N), a(null);
+      const z = await g.text();
+      i(z), a(null);
     } catch {
       a({ message: "Failed to read file" });
     }
-  }, []), w = L((g) => {
+  }, []), y = L((g) => {
     g.preventDefault(), c(!0);
   }, []), v = L((g) => {
     g.preventDefault(), c(!1);
-  }, []), y = L(
+  }, []), w = L(
     (g) => {
       g.preventDefault(), c(!1);
-      const N = g.dataTransfer.files[0];
-      N && f(N);
+      const z = g.dataTransfer.files[0];
+      z && f(z);
     },
     [f]
   ), b = L(
     (g) => {
       var W;
-      const N = (W = g.target.files) == null ? void 0 : W[0];
-      N && f(N);
+      const z = (W = g.target.files) == null ? void 0 : W[0];
+      z && f(z);
     },
     [f]
   );
-  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("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__ */ s("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ o("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__ */ o("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
       /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Import Workflow" }),
       /* @__PURE__ */ e(
         "button",
@@ -2141,15 +2141,15 @@ function ut({ isOpen: r, onClose: l, onImport: t }) {
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: "p-4 flex-1 overflow-auto", children: [
+    /* @__PURE__ */ o("div", { className: "p-4 flex-1 overflow-auto", children: [
       /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-zinc-400 mb-4", children: "Paste YAML content or drag and drop a .yaml file to import a workflow." }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "div",
         {
-          onDragOver: w,
+          onDragOver: y,
           onDragLeave: v,
-          onDrop: y,
-          className: `border-2 border-dashed rounded-lg p-4 mb-4 text-center transition-colors ${p ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20" : "border-gray-300 dark:border-zinc-600"}`,
+          onDrop: w,
+          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(
               "input",
@@ -2161,7 +2161,7 @@ function ut({ isOpen: r, onClose: l, onImport: t }) {
                 id: "yaml-file-input"
               }
             ),
-            /* @__PURE__ */ s(
+            /* @__PURE__ */ o(
               "label",
               {
                 htmlFor: "yaml-file-input",
@@ -2201,7 +2201,7 @@ function ut({ isOpen: r, onClose: l, onImport: t }) {
         {
           value: n,
           onChange: (g) => {
-            o(g.target.value), a(null);
+            i(g.target.value), a(null);
           },
           placeholder: `name: My Workflow
 steps:
@@ -2225,13 +2225,13 @@ steps:
           className: "w-full h-64 p-3 font-mono text-sm bg-gray-100 dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-800 dark:text-zinc-200"
         }
       ),
-      d && /* @__PURE__ */ s(
+      d && /* @__PURE__ */ o(
         "div",
         {
           className: `mt-4 p-3 rounded-lg text-sm ${d.message === "Valid YAML!" ? "bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400"}`,
           children: [
             /* @__PURE__ */ e("span", { className: "font-medium", children: d.message }),
-            d.line && /* @__PURE__ */ s("span", { className: "ml-2 text-xs", children: [
+            d.line && /* @__PURE__ */ o("span", { className: "ml-2 text-xs", children: [
               "(line ",
               d.line,
               d.column ? `, column ${d.column}` : "",
@@ -2241,26 +2241,26 @@ steps:
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex justify-between items-center px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
+    /* @__PURE__ */ o("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: "Use with floimg CLI: floimg run workflow.yaml" }),
-      /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
             onClick: h,
-            disabled: i || !n.trim(),
+            disabled: s || !n.trim(),
             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 disabled:opacity-50 disabled:cursor-not-allowed",
             children: "Validate"
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "button",
           {
             onClick: u,
-            disabled: i || !n.trim(),
+            disabled: s || !n.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: [
-              i && /* @__PURE__ */ s("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
+              s && /* @__PURE__ */ o("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
                   {
@@ -2289,58 +2289,59 @@ steps:
     ] })
   ] }) }) : null;
 }
-function gt({
+function ht({
   brandingSlot: r,
   beforeActionsSlot: l,
   afterActionsSlot: t,
-  hideAttribution: n = !1
+  hideAttribution: n = !1,
+  hideWorkflowLibrary: i = !1
 } = {}) {
-  const o = k((z) => z.execution), i = k((z) => z.execute), m = k((z) => z.exportToYaml), d = k((z) => z.importFromYaml), a = k((z) => z.nodes), p = k((z) => z.edges), c = O((z) => z.openSettings), u = k((z) => z.activeWorkflowName), h = k((z) => z.hasUnsavedChanges), f = k((z) => z.saveWorkflow), w = k((z) => z.toggleLibrary), v = k((z) => z.setActiveWorkflowName), y = k((z) => z.selectedNodeId), b = k((z) => z.duplicateNode), [g, N] = I(!1), [W, x] = I(!1), [C, S] = I("yaml"), [T, ue] = I(""), [Z, ge] = I(""), [ee, R] = I(null), [he, K] = I(!1), [te, q] = I("");
+  const s = k((N) => N.execution), p = k((N) => N.execute), d = k((N) => N.exportToYaml), a = k((N) => N.importFromYaml), m = k((N) => N.nodes), c = k((N) => N.edges), u = O((N) => N.openSettings), h = k((N) => N.activeWorkflowName), f = k((N) => N.hasUnsavedChanges), y = k((N) => N.saveWorkflow), v = k((N) => N.toggleLibrary), w = k((N) => N.setActiveWorkflowName), b = k((N) => N.selectedNodeId), g = k((N) => N.duplicateNode), [z, W] = I(!1), [x, C] = I(!1), [S, T] = I("yaml"), [Z, ge] = I(""), [ee, he] = I(""), [te, R] = I(null), [xe, K] = I(!1), [re, q] = I("");
   D(() => {
-    const z = () => {
+    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 J = L(() => {
-    a.length !== 0 && (f(), R("Saved!"), setTimeout(() => R(null), 2e3));
-  }, [a.length, f]), xe = () => {
-    q(u), K(!0);
-  }, re = () => {
-    const z = te.trim();
-    z && z !== u && v(z), K(!1);
-  }, ae = L(() => {
-    y && b(y);
-  }, [y, b]);
+    m.length !== 0 && (y(), R("Saved!"), setTimeout(() => R(null), 2e3));
+  }, [m.length, y]), be = () => {
+    q(h), K(!0);
+  }, ae = () => {
+    const N = re.trim();
+    N && N !== h && w(N), K(!1);
+  }, ne = L(() => {
+    b && g(b);
+  }, [b, g]);
   D(() => {
-    function z(M) {
-      (M.metaKey || M.ctrlKey) && M.key === "s" && (M.preventDefault(), J()), (M.metaKey || M.ctrlKey) && M.key === "d" && (M.preventDefault(), ae());
+    function N(M) {
+      (M.metaKey || M.ctrlKey) && M.key === "s" && (M.preventDefault(), J()), (M.metaKey || M.ctrlKey) && M.key === "d" && (M.preventDefault(), ne());
     }
-    return document.addEventListener("keydown", z), () => document.removeEventListener("keydown", z);
-  }, [J, ae]);
-  const be = async () => {
-    await i();
-  }, fe = async () => {
-    const z = await m();
-    ue(z);
-    const M = pt(a, p);
-    ge(M), N(!0);
-  }, ke = () => {
-    const z = C === "yaml" ? T : Z;
-    navigator.clipboard.writeText(z);
-  }, ve = L(
-    (z, M, ye) => {
-      d(z, M, ye), R("Workflow imported!"), setTimeout(() => R(null), 2e3);
+    return document.addEventListener("keydown", N), () => document.removeEventListener("keydown", N);
+  }, [J, ne]);
+  const fe = async () => {
+    await p();
+  }, ke = async () => {
+    const N = await d();
+    ge(N);
+    const M = ut(m, c);
+    he(M), W(!0);
+  }, ve = () => {
+    const N = S === "yaml" ? Z : ee;
+    navigator.clipboard.writeText(N);
+  }, ye = L(
+    (N, M, we) => {
+      a(N, M, we), R("Workflow imported!"), setTimeout(() => R(null), 2e3);
     },
-    [d]
+    [a]
   );
-  return /* @__PURE__ */ s(U, { children: [
-    /* @__PURE__ */ s("div", { className: "h-14 bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700 flex items-center justify-between px-4", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ e(
+  return /* @__PURE__ */ o(U, { children: [
+    /* @__PURE__ */ o("div", { className: "h-14 bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700 flex items-center justify-between px-4", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-4", children: [
+        !i && /* @__PURE__ */ e(
           "button",
           {
-            onClick: w,
+            onClick: v,
             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(
@@ -2354,7 +2355,7 @@ function gt({
             ) })
           }
         ),
-        /* @__PURE__ */ s("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ o("div", { className: "flex items-baseline gap-2", children: [
           /* @__PURE__ */ e("h1", { className: "text-xl font-bold text-gray-800 dark:text-white", children: "FloImg Studio" }),
           r,
           !n && /* @__PURE__ */ e(
@@ -2368,16 +2369,16 @@ function gt({
             }
           )
         ] }),
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-          he ? /* @__PURE__ */ e(
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+          xe ? /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: te,
-              onChange: (z) => q(z.target.value),
-              onBlur: re,
-              onKeyDown: (z) => {
-                z.key === "Enter" && re(), z.key === "Escape" && (q(u), K(!1));
+              value: re,
+              onChange: (N) => q(N.target.value),
+              onBlur: ae,
+              onKeyDown: (N) => {
+                N.key === "Enter" && ae(), N.key === "Escape" && (q(h), K(!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
@@ -2385,30 +2386,30 @@ function gt({
           ) : /* @__PURE__ */ e(
             "button",
             {
-              onClick: xe,
+              onClick: be,
               className: "text-sm text-gray-700 dark:text-zinc-300 font-medium hover:text-gray-900 dark:hover:text-zinc-100 rounded px-2 py-1 -mx-2 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors",
               title: "Click to rename",
-              children: u
+              children: h
             }
           ),
-          h && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
-          ee && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: ee })
+          f && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
+          te && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: te })
         ] }),
-        /* @__PURE__ */ s("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
-          a.length,
+        /* @__PURE__ */ o("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
+          m.length,
           " node",
-          a.length !== 1 ? "s" : ""
+          m.length !== 1 ? "s" : ""
         ] })
       ] }),
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
         l,
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: c,
+            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__ */ s("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+            children: /* @__PURE__ */ o("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -2434,7 +2435,7 @@ function gt({
           "button",
           {
             onClick: J,
-            disabled: a.length === 0,
+            disabled: m.length === 0,
             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 disabled:opacity-50 disabled:cursor-not-allowed",
             title: "Save Workflow (Cmd+S)",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -2451,7 +2452,7 @@ function gt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => x(!0),
+            onClick: () => C(!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"
           }
@@ -2459,8 +2460,8 @@ function gt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: fe,
-            disabled: a.length === 0,
+            onClick: ke,
+            disabled: m.length === 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 disabled:opacity-50 disabled:cursor-not-allowed",
             children: "Export"
           }
@@ -2468,11 +2469,11 @@ function gt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: be,
-            disabled: a.length === 0 || o.status === "running",
+            onClick: fe,
+            disabled: m.length === 0 || s.status === "running",
             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: o.status === "running" ? /* @__PURE__ */ s(U, { children: [
-              /* @__PURE__ */ s("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
+            children: s.status === "running" ? /* @__PURE__ */ o(U, { children: [
+              /* @__PURE__ */ o("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
                   {
@@ -2494,8 +2495,8 @@ function gt({
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ s(U, { children: [
-              /* @__PURE__ */ s("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+            ] }) : /* @__PURE__ */ o(U, { children: [
+              /* @__PURE__ */ o("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
                   {
@@ -2522,44 +2523,44 @@ function gt({
         t
       ] })
     ] }),
-    o.status === "completed" && o.imageIds.length > 0 && /* @__PURE__ */ e("div", { className: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800 px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ s("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
+    s.status === "completed" && s.imageIds.length > 0 && /* @__PURE__ */ e("div", { className: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800 px-4 py-3", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ o("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
         "Generated ",
-        o.imageIds.length,
+        s.imageIds.length,
         " image",
-        o.imageIds.length !== 1 ? "s" : ""
+        s.imageIds.length !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex gap-2", children: o.imageUrls.slice(0, 4).map((z, M) => /* @__PURE__ */ e("a", { href: z, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex gap-2", children: s.imageUrls.slice(0, 4).map((N, M) => /* @__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"
         }
       ) }, M)) })
     ] }) }),
-    o.status === "error" && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-3", children: /* @__PURE__ */ s("span", { className: "text-red-700 dark:text-red-400", children: [
+    s.status === "error" && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-3", children: /* @__PURE__ */ o("span", { className: "text-red-700 dark:text-red-400", children: [
       "Error: ",
-      o.error
+      s.error
     ] }) }),
-    g && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("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__ */ s("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
+    z && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ o("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__ */ o("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+        /* @__PURE__ */ o("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" }),
-          /* @__PURE__ */ s("div", { className: "flex gap-1 bg-gray-100 dark:bg-zinc-700 rounded-lg p-1", children: [
+          /* @__PURE__ */ o("div", { className: "flex gap-1 bg-gray-100 dark:bg-zinc-700 rounded-lg p-1", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => S("yaml"),
-                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${C === "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: () => T("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"}`,
                 children: "YAML"
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => S("javascript"),
-                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${C === "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: () => T("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"}`,
                 children: "JavaScript"
               }
             )
@@ -2568,7 +2569,7 @@ function gt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => N(!1),
+            onClick: () => W(!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",
@@ -2582,14 +2583,14 @@ function gt({
           }
         )
       ] }),
-      /* @__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: C === "yaml" ? T : Z }) }),
-      /* @__PURE__ */ s("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: C === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
-        /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+      /* @__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" ? Z : ee }) }),
+      /* @__PURE__ */ o("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__ */ o("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"
             }
@@ -2597,7 +2598,7 @@ function gt({
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => N(!1),
+              onClick: () => W(!1),
               className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
               children: "Close"
             }
@@ -2606,31 +2607,31 @@ function gt({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      ut,
+      gt,
       {
-        isOpen: W,
-        onClose: () => x(!1),
-        onImport: ve
+        isOpen: x,
+        onClose: () => C(!1),
+        onImport: ye
       }
     )
   ] });
 }
-function ht() {
+function xt() {
   const r = k((a) => a.loadTemplate), [l, t] = I(null), {
     data: n,
-    isLoading: o,
-    error: i,
-    refetch: m
+    isLoading: i,
+    error: s,
+    refetch: p
   } = F({
     queryKey: ["images"],
-    queryFn: Re,
+    queryFn: Ee,
     refetchInterval: 5e3
     // Auto-refresh every 5 seconds
   }), d = async (a) => {
     t(a);
     try {
-      const p = await Ee(a);
-      if (p != null && p.workflow) {
+      const m = await Be(a);
+      if (m != null && m.workflow) {
         const c = {
           id: `image-${a}`,
           name: `Workflow from ${a}`,
@@ -2638,29 +2639,29 @@ function ht() {
           category: "Gallery",
           generator: "unknown",
           workflow: {
-            nodes: p.workflow.nodes,
-            edges: p.workflow.edges
+            nodes: m.workflow.nodes,
+            edges: m.workflow.edges
           }
         };
         r(c), window.dispatchEvent(new CustomEvent("workflow-loaded"));
       } else
         alert("No workflow metadata available for this image");
-    } catch (p) {
-      console.error("Failed to load workflow:", p), alert("Failed to load workflow");
+    } catch (m) {
+      console.error("Failed to load workflow:", m), alert("Failed to load workflow");
     } finally {
       t(null);
     }
   };
-  return o ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : i ? /* @__PURE__ */ s("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
+  return i ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : s ? /* @__PURE__ */ o("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
     "Error loading images: ",
-    i instanceof Error ? i.message : "Unknown error"
-  ] }) : !n || n.length === 0 ? /* @__PURE__ */ s("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: [
+    s instanceof Error ? s.message : "Unknown error"
+  ] }) : !n || n.length === 0 ? /* @__PURE__ */ o("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: [
     /* @__PURE__ */ e("div", { className: "text-lg mb-2", children: "No images yet" }),
     /* @__PURE__ */ e("div", { className: "text-sm", children: "Create a workflow and click Execute to generate images" })
-  ] }) : /* @__PURE__ */ s("div", { className: "p-4 bg-gray-100 dark:bg-zinc-900 min-h-full", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ s("div", { children: [
-        /* @__PURE__ */ s("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: [
+  ] }) : /* @__PURE__ */ o("div", { className: "p-4 bg-gray-100 dark:bg-zinc-900 min-h-full", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ o("div", { children: [
+        /* @__PURE__ */ o("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: [
           "Images (",
           n.length,
           ")"
@@ -2670,14 +2671,14 @@ function ht() {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => m(),
+          onClick: () => p(),
           className: "text-sm text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-violet-300",
           children: "Refresh"
         }
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: n.map((a) => /* @__PURE__ */ e(
-      xt,
+      bt,
       {
         image: a,
         onLoadWorkflow: () => d(a.id),
@@ -2687,21 +2688,21 @@ function ht() {
     )) })
   ] });
 }
-function xt({ image: r, onLoadWorkflow: l, isLoading: t }) {
-  const n = (i) => new Date(i).toLocaleString(), o = (i) => i < 1024 ? `${i} B` : i < 1048576 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1048576).toFixed(1)} MB`;
-  return /* @__PURE__ */ s("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden shadow-sm hover:shadow-md transition-shadow group", children: [
-    /* @__PURE__ */ s("div", { className: "relative", children: [
+function bt({ image: r, onLoadWorkflow: l, isLoading: t }) {
+  const n = (s) => new Date(s).toLocaleString(), i = (s) => s < 1024 ? `${s} B` : s < 1048576 ? `${(s / 1024).toFixed(1)} KB` : `${(s / 1048576).toFixed(1)} MB`;
+  return /* @__PURE__ */ o("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden shadow-sm hover:shadow-md transition-shadow group", children: [
+    /* @__PURE__ */ o("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "a",
         {
-          href: oe(r.id),
+          href: se(r.id),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block aspect-square bg-gray-100 dark:bg-zinc-900",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: oe(r.id),
+              src: se(r.id),
               alt: r.filename,
               className: "w-full h-full object-cover",
               loading: "lazy"
@@ -2712,8 +2713,8 @@ function xt({ image: r, onLoadWorkflow: l, 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: (i) => {
-            i.preventDefault(), l();
+          onClick: (s) => {
+            s.preventDefault(), l();
           },
           disabled: t,
           className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
@@ -2721,18 +2722,18 @@ function xt({ image: r, onLoadWorkflow: l, isLoading: t }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ s("div", { className: "p-3", children: [
+    /* @__PURE__ */ o("div", { className: "p-3", children: [
       /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-800 dark:text-white truncate", children: r.filename }),
-      /* @__PURE__ */ s("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
+      /* @__PURE__ */ o("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
         r.mime,
         " • ",
-        o(r.size)
+        i(r.size)
       ] }),
       /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: n(r.createdAt) })
     ] })
   ] });
 }
-const bt = {
+const ft = {
   id: "sales-dashboard",
   name: "Sales Dashboard",
   description: "Quarterly revenue bar chart with gradient styling",
@@ -2782,7 +2783,7 @@ const bt = {
     ],
     edges: []
   }
-}, ft = {
+}, kt = {
   id: "user-growth",
   name: "User Growth Line Chart",
   description: "Monthly user growth with smooth bezier curves",
@@ -2830,7 +2831,7 @@ const bt = {
     ],
     edges: []
   }
-}, kt = {
+}, vt = {
   id: "api-flow",
   name: "API Request Flow",
   description: "Sequence diagram showing API authentication flow",
@@ -2872,7 +2873,7 @@ const bt = {
     ],
     edges: []
   }
-}, vt = {
+}, yt = {
   id: "system-architecture",
   name: "System Architecture",
   description: "Microservices architecture diagram",
@@ -2930,7 +2931,7 @@ const bt = {
     ],
     edges: []
   }
-}, yt = {
+}, wt = {
   id: "git-workflow",
   name: "Git Branch Workflow",
   description: "Git branching strategy with feature and release branches",
@@ -2973,7 +2974,7 @@ const bt = {
     ],
     edges: []
   }
-}, wt = {
+}, Nt = {
   id: "website-qr",
   name: "Website QR Code",
   description: "QR code linking to your website with custom styling",
@@ -3001,7 +3002,7 @@ const bt = {
     ],
     edges: []
   }
-}, Nt = {
+}, zt = {
   id: "wifi-qr",
   name: "WiFi QR Code",
   description: "Scannable QR code for WiFi network access",
@@ -3029,7 +3030,7 @@ const bt = {
     ],
     edges: []
   }
-}, zt = {
+}, Ct = {
   id: "chart-watermark",
   name: "Chart with Watermark",
   description: "Bar chart with company watermark and rounded corners",
@@ -3095,7 +3096,7 @@ const bt = {
       { id: "e2", source: "transform-1", target: "transform-2" }
     ]
   }
-}, Ct = {
+}, It = {
   id: "diagram-webp",
   name: "Diagram to WebP",
   description: "Mermaid diagram converted to optimized WebP format",
@@ -3138,69 +3139,69 @@ const bt = {
   }
 }, H = [
   // Charts
-  bt,
   ft,
-  // Diagrams
   kt,
+  // Diagrams
   vt,
   yt,
-  // QR Codes
   wt,
+  // QR Codes
   Nt,
-  // Pipelines
   zt,
-  Ct
+  // Pipelines
+  Ct,
+  It
 ];
-function It() {
+function St() {
   const r = new Set(H.map((l) => l.category));
   return Array.from(r).sort();
 }
-function Gt(r) {
+function Ft(r) {
   return H.filter((l) => l.category === r);
 }
-function de(r) {
+function ce(r) {
   return H.find((l) => l.id === r);
 }
-function Ft(r) {
+function Ht(r) {
   const l = r.toLowerCase();
   return H.filter(
     (t) => {
       var n;
-      return t.name.toLowerCase().includes(l) || t.description.toLowerCase().includes(l) || t.category.toLowerCase().includes(l) || t.generator.toLowerCase().includes(l) || ((n = t.tags) == null ? void 0 : n.some((o) => o.toLowerCase().includes(l)));
+      return t.name.toLowerCase().includes(l) || t.description.toLowerCase().includes(l) || t.category.toLowerCase().includes(l) || t.generator.toLowerCase().includes(l) || ((n = t.tags) == null ? void 0 : n.some((i) => i.toLowerCase().includes(l)));
     }
   );
 }
-function St({ onSelect: r }) {
-  const [l, t] = I(null), [n, o] = I(""), i = ne(() => It(), []), m = ne(() => {
+function Lt({ onSelect: r }) {
+  const [l, t] = I(null), [n, i] = I(""), s = oe(() => St(), []), p = oe(() => {
     let d = H;
     if (l && (d = d.filter((a) => a.category === l)), n) {
       const a = n.toLowerCase();
       d = d.filter(
-        (p) => {
+        (m) => {
           var c;
-          return p.name.toLowerCase().includes(a) || p.description.toLowerCase().includes(a) || p.generator.toLowerCase().includes(a) || ((c = p.tags) == null ? void 0 : c.some((u) => u.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)));
         }
       );
     }
     return d;
   }, [l, n]);
-  return /* @__PURE__ */ s("div", { className: "p-6", children: [
-    /* @__PURE__ */ s("div", { className: "mb-6", children: [
+  return /* @__PURE__ */ o("div", { className: "p-6", children: [
+    /* @__PURE__ */ o("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-2", children: "Templates" }),
       /* @__PURE__ */ e("p", { className: "text-gray-600 dark:text-zinc-400", children: "Start with a pre-built workflow. Click any template to load it into the editor." })
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-4 mb-6", children: [
+    /* @__PURE__ */ o("div", { className: "flex flex-wrap gap-4 mb-6", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
           placeholder: "Search templates...",
           value: n,
-          onChange: (d) => o(d.target.value),
+          onChange: (d) => i(d.target.value),
           className: "px-4 py-2 border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-teal-500 focus:border-transparent w-64"
         }
       ),
-      /* @__PURE__ */ s("div", { className: "flex gap-2 flex-wrap", children: [
+      /* @__PURE__ */ o("div", { className: "flex gap-2 flex-wrap", children: [
         /* @__PURE__ */ e(
           "button",
           {
@@ -3209,7 +3210,7 @@ function St({ onSelect: r }) {
             children: "All"
           }
         ),
-        i.map((d) => /* @__PURE__ */ e(
+        s.map((d) => /* @__PURE__ */ e(
           "button",
           {
             onClick: () => t(d),
@@ -3220,8 +3221,8 @@ function St({ onSelect: r }) {
         ))
       ] })
     ] }),
-    m.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-gray-500 dark:text-zinc-400", children: "No templates found matching your criteria." }) : /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: m.map((d) => /* @__PURE__ */ e(
-      Lt,
+    p.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-gray-500 dark:text-zinc-400", children: "No templates found matching your criteria." }) : /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: p.map((d) => /* @__PURE__ */ e(
+      Wt,
       {
         template: d,
         onSelect: () => r(d.id)
@@ -3230,14 +3231,14 @@ function St({ onSelect: r }) {
     )) })
   ] });
 }
-function Lt({ template: r, onSelect: l }) {
-  const t = r.workflow.nodes.length, n = r.workflow.edges.length, o = {
+function Wt({ template: r, onSelect: l }) {
+  const t = r.workflow.nodes.length, n = r.workflow.edges.length, i = {
     quickchart: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
     mermaid: "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
     qr: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
     d3: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
   };
-  return /* @__PURE__ */ s("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden hover:shadow-lg transition-shadow", children: [
+  return /* @__PURE__ */ o("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden hover:shadow-lg transition-shadow", children: [
     /* @__PURE__ */ e("div", { className: "aspect-video bg-gray-100 dark:bg-zinc-900 flex items-center justify-center p-4", children: r.preview ? /* @__PURE__ */ e(
       "img",
       {
@@ -3245,7 +3246,7 @@ function Lt({ template: r, onSelect: l }) {
         alt: r.name,
         className: "max-w-full max-h-full object-contain"
       }
-    ) : /* @__PURE__ */ s("div", { className: "text-center text-gray-400 dark:text-zinc-500", children: [
+    ) : /* @__PURE__ */ o("div", { className: "text-center text-gray-400 dark:text-zinc-500", children: [
       /* @__PURE__ */ e(
         "svg",
         {
@@ -3266,20 +3267,20 @@ function Lt({ template: r, onSelect: l }) {
       ),
       /* @__PURE__ */ e("span", { className: "text-sm", children: "No preview" })
     ] }) }),
-    /* @__PURE__ */ s("div", { className: "p-4", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-start justify-between mb-2", children: [
+    /* @__PURE__ */ o("div", { className: "p-4", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-start justify-between mb-2", children: [
         /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: r.name }),
         /* @__PURE__ */ e(
           "span",
           {
-            className: `px-2 py-0.5 rounded text-xs font-medium ${o[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
+            className: `px-2 py-0.5 rounded text-xs font-medium ${i[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
             children: r.generator
           }
         )
       ] }),
       /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-zinc-400 mb-3", children: r.description }),
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-zinc-500 mb-4", children: [
-        /* @__PURE__ */ s("span", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-zinc-500 mb-4", children: [
+        /* @__PURE__ */ o("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
             "path",
             {
@@ -3293,7 +3294,7 @@ function Lt({ template: r, onSelect: l }) {
           " node",
           t !== 1 ? "s" : ""
         ] }),
-        n > 0 && /* @__PURE__ */ s("span", { className: "flex items-center gap-1", children: [
+        n > 0 && /* @__PURE__ */ o("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
             "path",
             {
@@ -3308,13 +3309,13 @@ function Lt({ template: r, onSelect: l }) {
           n !== 1 ? "s" : ""
         ] })
       ] }),
-      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((i) => /* @__PURE__ */ e(
+      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((s) => /* @__PURE__ */ e(
         "span",
         {
           className: "px-2 py-0.5 bg-gray-100 dark:bg-zinc-700 text-gray-600 dark:text-zinc-400 rounded text-xs",
-          children: i
+          children: s
         },
-        i
+        s
       )) }),
       /* @__PURE__ */ e(
         "button",
@@ -3327,67 +3328,67 @@ function Lt({ template: r, onSelect: l }) {
     ] })
   ] });
 }
-function Wt({
+function At({
   workflow: r,
   isActive: l,
   onLoad: t,
   onDelete: n,
-  onRename: o,
-  onDuplicate: i
+  onRename: i,
+  onDuplicate: s
 }) {
-  const [m, d] = I(!1), [a, p] = I(r.name), [c, u] = I(!1), h = () => {
-    a.trim() && a !== r.name && o(a.trim()), d(!1);
-  }, f = (w) => {
-    const v = new Date(w), b = (/* @__PURE__ */ new Date()).getTime() - v.getTime(), g = Math.floor(b / 6e4), N = Math.floor(b / 36e5), W = Math.floor(b / 864e5);
-    return g < 1 ? "Just now" : g < 60 ? `${g}m ago` : N < 24 ? `${N}h ago` : W < 7 ? `${W}d ago` : v.toLocaleDateString();
+  const [p, d] = I(!1), [a, m] = I(r.name), [c, u] = I(!1), h = () => {
+    a.trim() && a !== r.name && i(a.trim()), d(!1);
+  }, f = (y) => {
+    const v = new Date(y), b = (/* @__PURE__ */ new Date()).getTime() - v.getTime(), g = Math.floor(b / 6e4), z = Math.floor(b / 36e5), W = Math.floor(b / 864e5);
+    return g < 1 ? "Just now" : g < 60 ? `${g}m ago` : z < 24 ? `${z}h ago` : W < 7 ? `${W}d ago` : v.toLocaleDateString();
   };
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ o(
     "div",
     {
       className: `group relative p-3 rounded-lg border transition-colors ${l ? "bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-800" : "bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600"}`,
       children: [
-        /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ s("button", { onClick: t, className: "flex-1 text-left min-w-0", children: [
-            m ? /* @__PURE__ */ e(
+        /* @__PURE__ */ o("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ o("button", { onClick: t, className: "flex-1 text-left min-w-0", children: [
+            p ? /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
                 value: a,
-                onChange: (w) => p(w.target.value),
+                onChange: (y) => m(y.target.value),
                 onBlur: h,
-                onKeyDown: (w) => {
-                  w.key === "Enter" && h(), w.key === "Escape" && (p(r.name), d(!1));
+                onKeyDown: (y) => {
+                  y.key === "Enter" && h(), y.key === "Escape" && (m(r.name), d(!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: (w) => w.stopPropagation()
+                onClick: (y) => y.stopPropagation()
               }
             ) : /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: r.name }),
-            /* @__PURE__ */ s("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
+            /* @__PURE__ */ o("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
               r.nodes.length,
               " nodes · Updated ",
               f(r.updatedAt)
             ] })
           ] }),
-          /* @__PURE__ */ s("div", { className: "relative", children: [
+          /* @__PURE__ */ o("div", { className: "relative", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: (w) => {
-                  w.stopPropagation(), u(!c);
+                onClick: (y) => {
+                  y.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__ */ s(U, { children: [
+            c && /* @__PURE__ */ o(U, { children: [
               /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => u(!1) }),
-              /* @__PURE__ */ s("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__ */ o("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: (w) => {
-                      w.stopPropagation(), d(!0), u(!1);
+                    onClick: (y) => {
+                      y.stopPropagation(), d(!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"
@@ -3396,8 +3397,8 @@ function Wt({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (w) => {
-                      w.stopPropagation(), i(), u(!1);
+                    onClick: (y) => {
+                      y.stopPropagation(), s(), 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"
@@ -3406,8 +3407,8 @@ function Wt({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (w) => {
-                      w.stopPropagation(), window.confirm("Delete this workflow?") && n(), u(!1);
+                    onClick: (y) => {
+                      y.stopPropagation(), window.confirm("Delete this workflow?") && n(), 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"
@@ -3422,14 +3423,14 @@ function Wt({
     }
   );
 }
-function At() {
-  const r = k((c) => c.showLibrary), l = k((c) => c.toggleLibrary), t = k((c) => c.savedWorkflows), n = k((c) => c.activeWorkflowId), o = k((c) => c.loadWorkflow), i = k((c) => c.deleteWorkflow), m = k((c) => c.renameWorkflow), d = k((c) => c.duplicateWorkflow), a = k((c) => c.newWorkflow);
+function Pt() {
+  const r = k((c) => c.showLibrary), l = k((c) => c.toggleLibrary), t = k((c) => c.savedWorkflows), n = k((c) => c.activeWorkflowId), i = k((c) => c.loadWorkflow), s = k((c) => c.deleteWorkflow), p = k((c) => c.renameWorkflow), d = k((c) => c.duplicateWorkflow), a = k((c) => c.newWorkflow);
   if (!r) return null;
-  const p = [...t].sort((c, u) => u.updatedAt - c.updatedAt);
-  return /* @__PURE__ */ s(U, { children: [
+  const m = [...t].sort((c, u) => u.updatedAt - c.updatedAt);
+  return /* @__PURE__ */ o(U, { children: [
     /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: l }),
-    /* @__PURE__ */ s("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: [
-      /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700", children: [
+    /* @__PURE__ */ o("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: [
+      /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: "My Workflows" }),
         /* @__PURE__ */ e(
           "button",
@@ -3448,7 +3449,7 @@ function At() {
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "p-4 border-b border-zinc-200 dark:border-zinc-700", children: /* @__PURE__ */ s(
+      /* @__PURE__ */ e("div", { className: "p-4 border-b border-zinc-200 dark:border-zinc-700", children: /* @__PURE__ */ o(
         "button",
         {
           onClick: () => {
@@ -3469,7 +3470,7 @@ function At() {
           ]
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: p.length === 0 ? /* @__PURE__ */ s("div", { className: "text-center py-8", children: [
+      /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: m.length === 0 ? /* @__PURE__ */ o("div", { className: "text-center py-8", children: [
         /* @__PURE__ */ e("div", { className: "w-12 h-12 mx-auto mb-3 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center", children: /* @__PURE__ */ e(
           "svg",
           {
@@ -3490,21 +3491,21 @@ function At() {
         ) }),
         /* @__PURE__ */ e("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No saved workflows yet" }),
         /* @__PURE__ */ e("p", { className: "text-xs text-zinc-400 dark:text-zinc-500 mt-1", children: "Build a workflow and save it to see it here" })
-      ] }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: p.map((c) => /* @__PURE__ */ e(
-        Wt,
+      ] }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: m.map((c) => /* @__PURE__ */ e(
+        At,
         {
           workflow: c,
           isActive: c.id === n,
           onLoad: () => {
-            o(c.id), l();
+            i(c.id), l();
           },
-          onDelete: () => i(c.id),
-          onRename: (u) => m(c.id, u),
+          onDelete: () => s(c.id),
+          onRename: (u) => p(c.id, u),
           onDuplicate: () => d(c.id)
         },
         c.id
       )) }) }),
-      /* @__PURE__ */ s("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-zinc-700 text-xs text-zinc-500 dark:text-zinc-400", children: [
+      /* @__PURE__ */ o("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-zinc-700 text-xs text-zinc-500 dark:text-zinc-400", children: [
         t.length,
         " workflow",
         t.length !== 1 ? "s" : "",
@@ -3513,7 +3514,7 @@ function At() {
     ] })
   ] });
 }
-const Pt = [
+const $t = [
   {
     id: "openai",
     name: "OpenAI",
@@ -3549,7 +3550,7 @@ const Pt = [
     placeholder: "sk-or-...",
     docsUrl: "https://openrouter.ai/keys"
   }
-], $t = [
+], Mt = [
   {
     id: "ollama",
     name: "Ollama",
@@ -3565,21 +3566,21 @@ const Pt = [
     docsUrl: "https://lmstudio.ai"
   }
 ];
-function Mt({ provider: r }) {
-  const l = O((h) => h.ai), t = O((h) => h.setAIProvider), n = l[r.id], o = (n == null ? void 0 : n.enabled) ?? !1, i = (n == null ? void 0 : n.apiKey) ?? "", [m, d] = I(i), [a, p] = I(!1), c = () => {
+function jt({ provider: r }) {
+  const l = O((h) => h.ai), t = O((h) => h.setAIProvider), n = l[r.id], i = (n == null ? void 0 : n.enabled) ?? !1, s = (n == null ? void 0 : n.apiKey) ?? "", [p, d] = I(s), [a, m] = I(!1), c = () => {
     t(r.id, {
-      apiKey: m,
-      enabled: !o
+      apiKey: p,
+      enabled: !i
     });
   }, u = (h) => {
     d(h), t(r.id, {
       apiKey: h,
-      enabled: o
+      enabled: i
     });
   };
-  return /* @__PURE__ */ s("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
-    /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ o("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
+    /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e("span", { className: "font-medium text-gray-900 dark:text-white", children: r.name }),
         /* @__PURE__ */ e(
           "a",
@@ -3593,12 +3594,12 @@ function Mt({ provider: r }) {
         )
       ] }),
       /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 dark:text-zinc-400 mt-0.5", children: r.description }),
-      /* @__PURE__ */ e("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ s("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ e("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ o("div", { className: "relative flex-1", children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: a ? "text" : "password",
-            value: m,
+            value: p,
             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"
@@ -3608,7 +3609,7 @@ function Mt({ provider: r }) {
           "button",
           {
             type: "button",
-            onClick: () => p(!a),
+            onClick: () => m(!a),
             className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300",
             children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: a ? /* @__PURE__ */ e(
               "path",
@@ -3635,32 +3636,32 @@ function Mt({ provider: r }) {
       "button",
       {
         onClick: c,
-        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${o ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${i ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${o ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${i ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function jt({ provider: r }) {
-  const l = O((c) => c.ai), t = O((c) => c.setAIProvider), n = l[r.id], o = (n == null ? void 0 : n.enabled) ?? !1, i = (n == null ? void 0 : n.baseUrl) ?? r.defaultUrl, [m, d] = I(i), a = () => {
+function Dt({ provider: r }) {
+  const l = O((c) => c.ai), t = O((c) => c.setAIProvider), n = l[r.id], i = (n == null ? void 0 : n.enabled) ?? !1, s = (n == null ? void 0 : n.baseUrl) ?? r.defaultUrl, [p, d] = I(s), a = () => {
     t(r.id, {
-      baseUrl: m,
-      enabled: !o
+      baseUrl: p,
+      enabled: !i
     });
-  }, p = (c) => {
+  }, m = (c) => {
     d(c), t(r.id, {
       baseUrl: c,
-      enabled: o
+      enabled: i
     });
   };
-  return /* @__PURE__ */ s("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
-    /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ o("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
+    /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e("span", { className: "font-medium text-gray-900 dark:text-white", children: r.name }),
         /* @__PURE__ */ e(
           "a",
@@ -3679,8 +3680,8 @@ function jt({ provider: r }) {
         "input",
         {
           type: "text",
-          value: m,
-          onChange: (c) => p(c.target.value),
+          value: p,
+          onChange: (c) => m(c.target.value),
           placeholder: r.defaultUrl,
           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"
         }
@@ -3690,22 +3691,22 @@ function jt({ provider: r }) {
       "button",
       {
         onClick: a,
-        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${o ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${i ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${o ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${i ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function Dt() {
+function Tt() {
   const r = O((t) => t.showSettings), l = O((t) => t.closeSettings);
-  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-xl w-full mx-4 max-h-[85vh] flex flex-col", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
-      /* @__PURE__ */ s("div", { children: [
+  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ o("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-xl w-full mx-4 max-h-[85vh] flex flex-col", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ o("div", { children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "AI Provider Settings" }),
         /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 dark:text-zinc-400 mt-0.5", children: "Configure your AI providers for vision and text generation" })
       ] }),
@@ -3726,16 +3727,16 @@ function Dt() {
         }
       )
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
-      /* @__PURE__ */ s("section", { children: [
+    /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
+      /* @__PURE__ */ o("section", { children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300 mb-3", children: "Cloud Providers" }),
-        /* @__PURE__ */ e("div", { className: "space-y-3", children: Pt.map((t) => /* @__PURE__ */ e(Mt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: $t.map((t) => /* @__PURE__ */ e(jt, { provider: t }, t.id)) })
       ] }),
-      /* @__PURE__ */ s("section", { children: [
+      /* @__PURE__ */ o("section", { children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300 mb-3", children: "Local Providers" }),
-        /* @__PURE__ */ e("div", { className: "space-y-3", children: $t.map((t) => /* @__PURE__ */ e(jt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: Mt.map((t) => /* @__PURE__ */ e(Dt, { provider: t }, t.id)) })
       ] }),
-      /* @__PURE__ */ e("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: /* @__PURE__ */ o("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
           "svg",
           {
@@ -3754,7 +3755,7 @@ function Dt() {
             )
           }
         ),
-        /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ o("div", { children: [
           /* @__PURE__ */ e("p", { className: "text-sm font-medium text-blue-900 dark:text-blue-300", children: "Your keys stay local" }),
           /* @__PURE__ */ e("p", { className: "text-sm text-blue-700 dark:text-blue-400 mt-1", children: "API keys are stored in your browser only and sent directly to providers. They never pass through our servers." })
         ] })
@@ -3770,30 +3771,30 @@ function Dt() {
     ) })
   ] }) }) : null;
 }
-function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
-  const [n, o] = I([]), [i, m] = I(""), [d, a] = I(!1), [p, c] = I(null), [u, h] = I(null), [f, w] = I(""), v = Q(null), y = Q(null);
+function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
+  const [n, i] = I([]), [s, p] = I(""), [d, a] = I(!1), [m, c] = I(null), [u, h] = I(null), [f, y] = I(""), v = Q(null), w = Q(null);
   D(() => {
-    r && u === null && Ke().then((x) => {
-      h(x.available), w(x.message);
+    r && u === null && qe().then((x) => {
+      h(x.available), y(x.message);
     }).catch(() => {
-      h(!1), w("Failed to check AI availability");
+      h(!1), y("Failed to check AI availability");
     });
   }, [r, u]), D(() => {
-    r && y.current && y.current.focus();
+    r && w.current && w.current.focus();
   }, [r]), D(() => {
     var x;
     (x = v.current) == null || x.scrollIntoView({ behavior: "smooth" });
   }, [n]);
   const b = L(async () => {
-    if (!i.trim() || d) return;
+    if (!s.trim() || d) return;
     const x = {
       role: "user",
-      content: i.trim(),
+      content: s.trim(),
       timestamp: Date.now()
     };
-    o((C) => [...C, x]), m(""), a(!0), c(null);
+    i((C) => [...C, x]), p(""), a(!0), c(null);
     try {
-      const C = await _e({
+      const C = await Ke({
         prompt: x.content,
         history: n
       }), S = {
@@ -3802,23 +3803,23 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         workflow: C.workflow,
         timestamp: Date.now()
       };
-      o((T) => [...T, S]), !C.success && C.error && c(C.error);
+      i((T) => [...T, S]), !C.success && C.error && c(C.error);
     } catch (C) {
       c(C instanceof Error ? C.message : "Failed to generate workflow");
     } finally {
       a(!1);
     }
-  }, [i, d, n]), g = (x) => {
+  }, [s, d, n]), g = (x) => {
     x.key === "Enter" && !x.shiftKey && (x.preventDefault(), b());
-  }, N = (x) => {
+  }, z = (x) => {
     t(x), l();
   }, W = () => {
-    o([]), c(null);
+    i([]), c(null);
   };
-  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-2xl mx-4 h-[80vh] flex flex-col", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ o("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-2xl mx-4 h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ e(
             "svg",
             {
@@ -3841,7 +3842,7 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         ] }),
         /* @__PURE__ */ e("span", { className: "text-xs bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300 px-2 py-0.5 rounded", children: "Gemini 3 Pro" })
       ] }),
-      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
         n.length > 0 && /* @__PURE__ */ e(
           "button",
           {
@@ -3877,8 +3878,8 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
-      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__ */ s("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ o("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
+      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__ */ o("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
           "svg",
           {
@@ -3897,13 +3898,13 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
             )
           }
         ),
-        /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ o("div", { children: [
           /* @__PURE__ */ e("p", { className: "font-medium text-amber-800 dark:text-amber-200", children: "AI Generation Not Available" }),
           /* @__PURE__ */ e("p", { className: "text-sm text-amber-700 dark:text-amber-300 mt-1", children: f }),
           /* @__PURE__ */ e("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-2", children: "Set GEMINI_API_KEY in your environment to enable this feature." })
         ] })
       ] }) }),
-      n.length === 0 && u !== !1 && /* @__PURE__ */ s("div", { className: "text-center py-8", children: [
+      n.length === 0 && u !== !1 && /* @__PURE__ */ o("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",
           {
@@ -3930,10 +3931,10 @@ function Tt({ isOpen: r, onClose: l, 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((x, C) => /* @__PURE__ */ s(
+        ].map((x, C) => /* @__PURE__ */ o(
           "button",
           {
-            onClick: () => m(x),
+            onClick: () => p(x),
             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: [
               '"',
@@ -3948,32 +3949,32 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         "div",
         {
           className: `flex ${x.role === "user" ? "justify-end" : "justify-start"}`,
-          children: /* @__PURE__ */ s(
+          children: /* @__PURE__ */ o(
             "div",
             {
               className: `max-w-[80%] rounded-lg px-4 py-3 ${x.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: x.content }),
-                x.role === "assistant" && x.workflow && /* @__PURE__ */ s("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-zinc-600", children: [
-                  /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-2", children: [
+                x.role === "assistant" && x.workflow && /* @__PURE__ */ o("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-zinc-600", children: [
+                  /* @__PURE__ */ o("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: () => N(x.workflow),
+                        onClick: () => z(x.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__ */ s("div", { className: "space-y-1", children: [
-                    x.workflow.nodes.map((S, T) => /* @__PURE__ */ s(
+                  /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 rounded p-2 text-xs", children: /* @__PURE__ */ o("div", { className: "space-y-1", children: [
+                    x.workflow.nodes.map((S, T) => /* @__PURE__ */ o(
                       "div",
                       {
                         className: "flex items-center gap-2 text-gray-600 dark:text-zinc-300",
                         children: [
                           /* @__PURE__ */ e("span", { className: "font-mono bg-gray-100 dark:bg-zinc-700 px-1.5 py-0.5 rounded", children: S.nodeType.split(":").pop() }),
-                          S.label && /* @__PURE__ */ s("span", { className: "text-gray-400", children: [
+                          S.label && /* @__PURE__ */ o("span", { className: "text-gray-400", children: [
                             "(",
                             S.label,
                             ")"
@@ -3982,7 +3983,7 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
                       },
                       T
                     )),
-                    x.workflow.edges.length > 0 && /* @__PURE__ */ s("div", { className: "text-gray-400 dark:text-zinc-500 pt-1", children: [
+                    x.workflow.edges.length > 0 && /* @__PURE__ */ o("div", { className: "text-gray-400 dark:text-zinc-500 pt-1", children: [
                       x.workflow.edges.length,
                       " connection",
                       x.workflow.edges.length !== 1 ? "s" : ""
@@ -3995,8 +3996,8 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         },
         C
       )),
-      d && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-700 rounded-lg px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ s("div", { className: "flex space-x-1", children: [
+      d && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-700 rounded-lg px-4 py-3", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ o("div", { className: "flex space-x-1", children: [
           /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 dark:bg-zinc-500 rounded-full animate-bounce" }),
           /* @__PURE__ */ e(
             "div",
@@ -4015,17 +4016,17 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         ] }),
         /* @__PURE__ */ e("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: "Generating workflow..." })
       ] }) }) }),
-      p && /* @__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: p }) }),
+      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: v })
     ] }),
-    /* @__PURE__ */ s("div", { className: "border-t border-gray-200 dark:border-zinc-700 p-4", children: [
-      /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ o("div", { className: "border-t border-gray-200 dark:border-zinc-700 p-4", children: [
+      /* @__PURE__ */ o("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: y,
-            value: i,
-            onChange: (x) => m(x.target.value),
+            ref: w,
+            value: s,
+            onChange: (x) => p(x.target.value),
             onKeyDown: g,
             placeholder: u === !1 ? "AI generation not available" : "Describe what workflow you want to create...",
             disabled: d || u === !1,
@@ -4037,7 +4038,7 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
           "button",
           {
             onClick: b,
-            disabled: !i.trim() || d || u === !1,
+            disabled: !s.trim() || d || 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",
@@ -4055,37 +4056,37 @@ function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
     ] })
   ] }) }) : null;
 }
-function Ut() {
-  const { screenToFlowPosition: r } = Ae(), l = k((o) => o.addNode), t = L(
-    (o) => {
-      o.preventDefault();
-      const i = o.dataTransfer.getData("application/json");
-      if (i)
+function Ot() {
+  const { screenToFlowPosition: r } = Pe(), l = k((i) => i.addNode), t = L(
+    (i) => {
+      i.preventDefault();
+      const s = i.dataTransfer.getData("application/json");
+      if (s)
         try {
-          const m = JSON.parse(i), d = r({
-            x: o.clientX,
-            y: o.clientY
+          const p = JSON.parse(s), d = r({
+            x: i.clientX,
+            y: i.clientY
           });
-          l(m, d);
-        } catch (m) {
-          console.error("Failed to parse dropped node:", m);
+          l(p, d);
+        } catch (p) {
+          console.error("Failed to parse dropped node:", p);
         }
     },
     [l, r]
-  ), n = L((o) => {
-    o.preventDefault(), o.dataTransfer.dropEffect = "move";
+  ), n = L((i) => {
+    i.preventDefault(), i.dataTransfer.dropEffect = "move";
   }, []);
-  return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: t, onDragOver: n, children: /* @__PURE__ */ e(at, {}) });
+  return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: t, onDragOver: n, children: /* @__PURE__ */ e(nt, {}) });
 }
-function Ht() {
-  const [r, l] = I("editor"), [t, n] = I(!1), o = k((a) => a.loadTemplate), i = k((a) => a.loadGeneratedWorkflow);
+function _t() {
+  const [r, l] = I("editor"), [t, n] = I(!1), i = k((a) => a.loadTemplate), s = k((a) => a.loadGeneratedWorkflow);
   D(() => {
-    const p = new URLSearchParams(window.location.search).get("template");
-    if (p) {
-      const c = de(p);
-      c && (o(c), window.history.replaceState({}, "", window.location.pathname));
+    const m = new URLSearchParams(window.location.search).get("template");
+    if (m) {
+      const c = ce(m);
+      c && (i(c), window.history.replaceState({}, "", window.location.pathname));
     }
-  }, [o]), D(() => {
+  }, [i]), D(() => {
     const a = () => {
       l("editor");
     };
@@ -4093,33 +4094,33 @@ function Ht() {
       window.removeEventListener("workflow-loaded", a);
     };
   }, []);
-  const m = L(
+  const p = L(
     (a) => {
-      const p = de(a);
-      p && (o(p), l("editor"));
+      const m = ce(a);
+      m && (i(m), l("editor"));
     },
-    [o]
+    [i]
   ), d = L(
     (a) => {
-      i(a), l("editor");
+      s(a), l("editor");
     },
-    [i]
+    [s]
   );
-  return /* @__PURE__ */ s(We, { children: [
-    /* @__PURE__ */ e(Dt, {}),
+  return /* @__PURE__ */ o(Ae, { children: [
+    /* @__PURE__ */ e(Tt, {}),
     /* @__PURE__ */ e(
-      Tt,
+      Ut,
       {
         isOpen: t,
         onClose: () => n(!1),
         onApplyWorkflow: d
       }
     ),
-    /* @__PURE__ */ e(At, {}),
-    /* @__PURE__ */ s("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ e(gt, {}),
-      /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ s("div", { className: "flex", children: [
+    /* @__PURE__ */ e(Pt, {}),
+    /* @__PURE__ */ o("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
+      /* @__PURE__ */ e(ht, {}),
+      /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ o("div", { className: "flex", children: [
           /* @__PURE__ */ e(
             "button",
             {
@@ -4145,7 +4146,7 @@ function Ht() {
             }
           )
         ] }),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ o(
           "button",
           {
             onClick: () => n(!0),
@@ -4165,34 +4166,34 @@ function Ht() {
           }
         )
       ] }) }),
-      /* @__PURE__ */ s("div", { className: "flex-1 flex overflow-hidden", children: [
-        r === "editor" && /* @__PURE__ */ s(U, { children: [
-          /* @__PURE__ */ e(ot, {}),
-          /* @__PURE__ */ e(Ut, {}),
-          /* @__PURE__ */ e(st, {})
+      /* @__PURE__ */ o("div", { className: "flex-1 flex overflow-hidden", children: [
+        r === "editor" && /* @__PURE__ */ o(U, { children: [
+          /* @__PURE__ */ e(st, {}),
+          /* @__PURE__ */ e(Ot, {}),
+          /* @__PURE__ */ e(it, {})
         ] }),
-        r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(ht, {}) }),
-        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(St, { onSelect: m }) })
+        r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(xt, {}) }),
+        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(Lt, { onSelect: p }) })
       ] })
     ] })
   ] });
 }
 export {
-  Tt as AIChat,
-  Dt as AISettings,
-  Ht as App,
-  ht as Gallery,
-  st as NodeInspector,
-  ot as NodePalette,
-  St as TemplateGallery,
-  gt as Toolbar,
-  nt as UploadGallery,
-  at as WorkflowEditor,
-  At as WorkflowLibrary,
-  It as getCategories,
-  de as getTemplateById,
-  Gt as getTemplatesByCategory,
-  Ft as searchTemplates,
+  Ut as AIChat,
+  Tt as AISettings,
+  _t as App,
+  xt as Gallery,
+  it as NodeInspector,
+  st as NodePalette,
+  Lt as TemplateGallery,
+  ht as Toolbar,
+  ot as UploadGallery,
+  nt as WorkflowEditor,
+  Pt as WorkflowLibrary,
+  St as getCategories,
+  ce as getTemplateById,
+  Ft as getTemplatesByCategory,
+  Ht as searchTemplates,
   H as templates,
   k as useWorkflowStore
 };