@teamflojo/floimg-studio-ui 0.4.3 → 0.4.4

package/dist/index.js

@@ -13,8 +13,8 @@ function De(r, d) {
   return {
     getItem: (a) => {
       var o;
-      const p = (s) => s === null ? null : JSON.parse(s, void 0), c = (o = n.getItem(a)) != null ? o : null;
-      return c instanceof Promise ? c.then(p) : p(c);
+      const m = (s) => s === null ? null : JSON.parse(s, void 0), c = (o = n.getItem(a)) != null ? o : null;
+      return c instanceof Promise ? c.then(m) : m(c);
     },
     setItem: (a, o) => n.setItem(a, JSON.stringify(o, void 0)),
     removeItem: (a) => n.removeItem(a)
@@ -51,10 +51,10 @@ const le = (r) => (d) => {
       ...y
     }),
     ...d
-  }, p = !1;
+  }, m = !1;
   const c = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
-  let m = o.storage;
-  if (!m)
+  let p = o.storage;
+  if (!p)
     return r(
       (...y) => {
         console.warn(
@@ -66,7 +66,7 @@ const le = (r) => (d) => {
     );
   const l = () => {
     const y = o.partialize({ ...t() });
-    return m.setItem(o.name, {
+    return p.setItem(o.name, {
       state: y,
       version: o.version
     });
@@ -81,13 +81,13 @@ const le = (r) => (d) => {
   let f;
   const h = () => {
     var y, v;
-    if (!m) return;
-    p = !1, c.forEach((u) => {
+    if (!p) return;
+    m = !1, c.forEach((u) => {
       var x;
       return u((x = t()) != null ? x : b);
     });
     const C = ((v = o.onRehydrateStorage) == null ? void 0 : v.call(o, (y = t()) != null ? y : b)) || void 0;
-    return le(m.getItem.bind(m))(o.name).then((u) => {
+    return le(p.getItem.bind(p))(o.name).then((u) => {
       if (u)
         if (typeof u.version == "number" && u.version !== o.version) {
           if (o.migrate) {
@@ -105,14 +105,14 @@ const le = (r) => (d) => {
       return [!1, void 0];
     }).then((u) => {
       var x;
-      const [N, w] = u;
+      const [N, k] = u;
       if (f = o.merge(
-        w,
+        k,
         (x = t()) != null ? x : b
       ), n(f, !0), N)
         return l();
     }).then(() => {
-      C == null || C(f, void 0), f = t(), p = !0, s.forEach((u) => u(f));
+      C == null || C(f, void 0), f = t(), m = !0, s.forEach((u) => u(f));
     }).catch((u) => {
       C == null || C(void 0, u);
     });
@@ -122,14 +122,14 @@ const le = (r) => (d) => {
       o = {
         ...o,
         ...y
-      }, y.storage && (m = y.storage);
+      }, y.storage && (p = y.storage);
     },
     clearStorage: () => {
-      m == null || m.removeItem(o.name);
+      p == null || p.removeItem(o.name);
     },
     getOptions: () => o,
     rehydrate: () => h(),
-    hasHydrated: () => p,
+    hasHydrated: () => m,
     onHydrate: (y) => (c.add(y), () => {
       c.delete(y);
     }),
@@ -137,7 +137,7 @@ const le = (r) => (d) => {
       s.delete(y);
     })
   }, o.skipHydration || h(), f || b;
-}, we = $e, R = "/api";
+}, ke = $e, R = "/api";
 async function $(r, d) {
   const n = await fetch(r, {
     ...d,
@@ -206,7 +206,7 @@ async function Je(r) {
   if (!d.ok)
     throw new Error(`Failed to delete upload: ${d.status}`);
 }
-function ke(r) {
+function we(r) {
   return `${R}/uploads/${r}/blob`;
 }
 async function Qe(r) {
@@ -236,17 +236,17 @@ function ve(r, d, n) {
         signal: t.signal
       });
       if (!o.ok) {
-        const m = await o.json().catch(() => ({ error: "Unknown error" }));
-        throw new Error(m.error || `HTTP ${o.status}`);
+        const p = await o.json().catch(() => ({ error: "Unknown error" }));
+        throw new Error(p.error || `HTTP ${o.status}`);
       }
-      const p = (a = o.body) == null ? void 0 : a.getReader();
-      if (!p)
+      const m = (a = o.body) == null ? void 0 : a.getReader();
+      if (!m)
         throw new Error("Response body is not readable");
       const c = new globalThis.TextDecoder();
       let s = "";
       for (; ; ) {
-        const { done: m, value: l } = await p.read();
-        if (m) {
+        const { done: p, value: l } = await m.read();
+        if (p) {
           s.trim() && et(s, n);
           break;
         }
@@ -309,7 +309,7 @@ function et(r, d) {
     }
 }
 const he = "http://localhost:11434", fe = "http://localhost:1234", G = ye()(
-  we(
+  ke(
     (r, d) => ({
       ai: {
         ollama: {
@@ -339,9 +339,9 @@ const he = "http://localhost:11434", fe = "http://localhost:1234", G = ye()(
       openSettings: () => r({ showSettings: !0 }),
       closeSettings: () => r({ showSettings: !1 }),
       getConfiguredProviders: () => {
-        var a, o, p, c, s, m, l;
+        var a, o, m, c, s, p, l;
         const { ai: n } = d(), t = {};
-        return (a = n.openai) != null && a.enabled && n.openai.apiKey && (t.openai = { apiKey: n.openai.apiKey }), (o = n.anthropic) != null && o.enabled && n.anthropic.apiKey && (t.anthropic = { apiKey: n.anthropic.apiKey }), (p = n.gemini) != null && p.enabled && n.gemini.apiKey && (t.gemini = { apiKey: n.gemini.apiKey }), (c = n.grok) != null && c.enabled && n.grok.apiKey && (t.grok = { apiKey: n.grok.apiKey }), (s = n.openrouter) != null && s.enabled && n.openrouter.apiKey && (t.openrouter = { apiKey: n.openrouter.apiKey }), (m = n.ollama) != null && m.enabled && (t.ollama = { baseUrl: n.ollama.baseUrl || he }), (l = n.lmstudio) != null && l.enabled && (t.lmstudio = { baseUrl: n.lmstudio.baseUrl || fe }), t;
+        return (a = n.openai) != null && a.enabled && n.openai.apiKey && (t.openai = { apiKey: n.openai.apiKey }), (o = n.anthropic) != null && o.enabled && n.anthropic.apiKey && (t.anthropic = { apiKey: n.anthropic.apiKey }), (m = n.gemini) != null && m.enabled && n.gemini.apiKey && (t.gemini = { apiKey: n.gemini.apiKey }), (c = n.grok) != null && c.enabled && n.grok.apiKey && (t.grok = { apiKey: n.grok.apiKey }), (s = n.openrouter) != null && s.enabled && n.openrouter.apiKey && (t.openrouter = { apiKey: n.openrouter.apiKey }), (p = n.ollama) != null && p.enabled && (t.ollama = { baseUrl: n.ollama.baseUrl || he }), (l = n.lmstudio) != null && l.enabled && (t.lmstudio = { baseUrl: n.lmstudio.baseUrl || fe }), t;
       }
     }),
     {
@@ -359,12 +359,12 @@ function be() {
   const r = Date.now(), d = Math.random().toString(36).substring(2, 8);
   return `wf_${r}_${d}`;
 }
-const k = ye()(
-  we(
+const w = ye()(
+  ke(
     (r, d) => {
       const n = (t) => {
         if (t.type === "generator") {
-          const a = t.data, o = d().generators.find((p) => p.name === a.generatorName);
+          const a = t.data, o = d().generators.find((m) => m.name === a.generatorName);
           return {
             ...a,
             isAI: a.isAI ?? (o == null ? void 0 : o.isAI),
@@ -374,7 +374,7 @@ const k = ye()(
         }
         if (t.type === "transform") {
           const a = t.data, o = d().transforms.find(
-            (p) => p.name === a.operation && p.providerName === a.providerName
+            (m) => m.name === a.operation && m.providerName === a.providerName
           );
           return {
             ...a,
@@ -422,17 +422,17 @@ const k = ye()(
               position: c.position,
               data: n(c)
             };
-          }), p = t.workflow.edges.map((c) => {
-            const s = a.get(c.source) || c.source, m = a.get(c.target) || c.target;
+          }), m = t.workflow.edges.map((c) => {
+            const s = a.get(c.source) || c.source, p = a.get(c.target) || c.target;
             return {
-              id: `edge_${s}_${m}`,
+              id: `edge_${s}_${p}`,
               source: s,
-              target: m
+              target: p
             };
           });
           r({
             nodes: o,
-            edges: p,
+            edges: m,
             selectedNodeId: null,
             currentTemplateId: t.id,
             previewVisible: {},
@@ -477,11 +477,11 @@ const k = ye()(
         setTextProviders: (t) => r({ textProviders: t }),
         setVisionProviders: (t) => r({ visionProviders: t }),
         addNode: (t, a) => {
-          var s, m, l;
+          var s, p, l;
           const o = Q();
-          let p;
+          let m;
           if (t.type === "generator")
-            p = {
+            m = {
               generatorName: t.name,
               params: ae(t),
               isAI: t.isAI,
@@ -490,7 +490,7 @@ const k = ye()(
               maxReferenceImages: t.maxReferenceImages
             };
           else if (t.type === "transform")
-            p = {
+            m = {
               operation: t.name,
               providerName: t.providerName,
               // Track which provider this transform belongs to
@@ -501,28 +501,28 @@ const k = ye()(
               maxReferenceImages: t.maxReferenceImages
             };
           else if (t.type === "input")
-            p = {
+            m = {
               uploadId: void 0,
               filename: void 0,
               mime: void 0
             };
           else if (t.type === "vision")
-            p = {
+            m = {
               providerName: t.name,
               providerLabel: t.label,
               // Human-readable label (e.g., "Gemini Vision")
               params: ae(t)
             };
           else if (t.type === "text")
-            p = {
+            m = {
               providerName: t.name,
               providerLabel: t.label,
               // Human-readable label (e.g., "Gemini Text")
               params: ae(t)
             };
           else {
-            const g = ((s = t.params) == null ? void 0 : s.properties) || {}, b = ((m = g.provider) == null ? void 0 : m.default) || "filesystem";
-            p = {
+            const g = ((s = t.params) == null ? void 0 : s.properties) || {}, b = ((p = g.provider) == null ? void 0 : p.default) || "filesystem";
+            m = {
               destination: ((l = g.destination) == null ? void 0 : l.default) || "./output/image.png",
               provider: b
             };
@@ -531,7 +531,7 @@ const k = ye()(
             id: o,
             type: t.type,
             position: a,
-            data: p
+            data: m
           };
           r((g) => ({
             nodes: [...g.nodes, c]
@@ -540,7 +540,7 @@ const k = ye()(
         updateNodeData: (t, a) => {
           r((o) => ({
             nodes: o.nodes.map(
-              (p) => p.id === t ? { ...p, data: { ...p.data, ...a } } : p
+              (m) => m.id === t ? { ...m, data: { ...m.data, ...a } } : m
             )
           }));
         },
@@ -554,9 +554,9 @@ const k = ye()(
         duplicateNode: (t) => {
           const a = d(), o = a.nodes.find((s) => s.id === t);
           if (!o) return;
-          const p = Q(), c = {
+          const m = Q(), c = {
             ...o,
-            id: p,
+            id: m,
             position: {
               x: o.position.x + 50,
               y: o.position.y + 50
@@ -567,14 +567,14 @@ const k = ye()(
           };
           r({
             nodes: [...a.nodes, c],
-            selectedNodeId: p
+            selectedNodeId: m
             // Select the new node
           });
         },
         setNodes: (t) => r({ nodes: t }),
         addEdge: (t) => {
           if (!t.source || !t.target) return;
-          const a = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), p = {
+          const a = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), m = {
             id: a ? `edge_${t.source}_${t.target}_${a}` : `edge_${t.source}_${t.target}`,
             source: t.source,
             target: t.target,
@@ -582,7 +582,7 @@ const k = ye()(
             targetHandle: t.targetHandle ?? void 0
           };
           r((c) => ({
-            edges: [...c.edges, p]
+            edges: [...c.edges, m]
           }));
         },
         deleteEdge: (t) => {
@@ -593,20 +593,20 @@ const k = ye()(
         setEdges: (t) => r({ edges: t }),
         setSelectedNode: (t) => r({ selectedNodeId: t }),
         execute: async () => {
-          const { nodes: t, edges: a } = d(), o = t.map((m) => ({
-            id: m.id,
-            type: m.type,
-            position: m.position,
-            data: m.data
-          })), p = a.map((m) => ({
-            id: m.id,
-            source: m.source,
-            target: m.target,
-            sourceHandle: m.sourceHandle ?? void 0,
-            targetHandle: m.targetHandle ?? void 0
+          const { nodes: t, edges: a } = d(), o = t.map((p) => ({
+            id: p.id,
+            type: p.type,
+            position: p.position,
+            data: p.data
+          })), m = a.map((p) => ({
+            id: p.id,
+            source: p.source,
+            target: p.target,
+            sourceHandle: p.sourceHandle ?? void 0,
+            targetHandle: p.targetHandle ?? void 0
           })), c = G.getState().getConfiguredProviders(), s = {};
-          for (const m of t)
-            s[m.id] = "pending";
+          for (const p of t)
+            s[p.id] = "pending";
           return r({
             execution: {
               status: "running",
@@ -616,10 +616,10 @@ const k = ye()(
               dataOutputs: {},
               nodeStatus: s
             }
-          }), new Promise((m, l) => {
+          }), new Promise((p, l) => {
             J = ve(
               "/api/execute/stream",
-              { nodes: o, edges: p, aiProviders: c },
+              { nodes: o, edges: m, aiProviders: c },
               {
                 onMessage: (g) => {
                   const b = d();
@@ -656,7 +656,7 @@ const k = ye()(
                         imageUrls: g.data.imageUrls,
                         nodeStatus: f
                       }
-                    }), m();
+                    }), p();
                   }
                   if (g.type === "execution.error") {
                     const f = { ...b.execution.nodeStatus };
@@ -716,26 +716,26 @@ const k = ye()(
             type: s.type,
             position: s.position,
             data: s.data
-          })), p = a.map((s) => ({
+          })), m = a.map((s) => ({
             id: s.id,
             source: s.source,
             target: s.target,
             sourceHandle: s.sourceHandle ?? void 0,
             targetHandle: s.targetHandle ?? void 0
           }));
-          return (await Fe(o, p)).yaml;
+          return (await Fe(o, m)).yaml;
         },
         importFromYaml: (t, a, o) => {
-          const p = /* @__PURE__ */ new Map(), c = t.map((m) => {
+          const m = /* @__PURE__ */ new Map(), c = t.map((p) => {
             const l = Q();
-            return p.set(m.id, l), {
+            return m.set(p.id, l), {
               id: l,
-              type: m.type,
-              position: m.position,
-              data: n(m)
+              type: p.type,
+              position: p.position,
+              data: n(p)
             };
-          }), s = a.map((m) => {
-            const l = p.get(m.source) || m.source, g = p.get(m.target) || m.target;
+          }), s = a.map((p) => {
+            const l = m.get(p.source) || p.source, g = m.get(p.target) || p.target;
             return {
               id: `edge_${l}_${g}`,
               source: l,
@@ -789,20 +789,20 @@ const k = ye()(
           const {
             nodes: a,
             edges: o,
-            activeWorkflowId: p,
+            activeWorkflowId: m,
             activeWorkflowName: c,
             savedWorkflows: s,
-            currentTemplateId: m
+            currentTemplateId: p
           } = d(), l = Date.now();
-          if (p) {
+          if (m) {
             const g = s.map(
-              (b) => b.id === p ? { ...b, name: t || c, nodes: a, edges: o, updatedAt: l } : b
+              (b) => b.id === m ? { ...b, name: t || c, nodes: a, edges: o, updatedAt: l } : b
             );
             return r({
               savedWorkflows: g,
               activeWorkflowName: t || c,
               hasUnsavedChanges: !1
-            }), p;
+            }), m;
           } else {
             const g = be(), b = {
               id: g,
@@ -811,7 +811,7 @@ const k = ye()(
               edges: o,
               createdAt: l,
               updatedAt: l,
-              templateId: m || void 0
+              templateId: p || void 0
             };
             return r({
               savedWorkflows: [...s, b],
@@ -824,7 +824,7 @@ const k = ye()(
         loadWorkflow: (t) => {
           const { savedWorkflows: a } = d(), o = a.find((c) => c.id === t);
           if (!o) return;
-          const p = o.nodes.map((c) => ({
+          const m = o.nodes.map((c) => ({
             ...c,
             data: n({
               id: c.id,
@@ -834,7 +834,7 @@ const k = ye()(
             })
           }));
           r({
-            nodes: p,
+            nodes: m,
             edges: o.edges,
             selectedNodeId: null,
             currentTemplateId: o.templateId || null,
@@ -853,9 +853,9 @@ const k = ye()(
           });
         },
         deleteWorkflow: (t) => {
-          const { savedWorkflows: a, activeWorkflowId: o } = d(), p = a.filter((c) => c.id !== t);
+          const { savedWorkflows: a, activeWorkflowId: o } = d(), m = a.filter((c) => c.id !== t);
           r(o === t ? {
-            savedWorkflows: p,
+            savedWorkflows: m,
             nodes: [],
             edges: [],
             selectedNodeId: null,
@@ -872,40 +872,40 @@ const k = ye()(
               dataOutputs: {},
               nodeStatus: {}
             }
-          } : { savedWorkflows: p });
+          } : { savedWorkflows: m });
         },
         renameWorkflow: (t, a) => {
-          const { savedWorkflows: o, activeWorkflowId: p } = d(), c = o.map(
+          const { savedWorkflows: o, activeWorkflowId: m } = d(), c = o.map(
             (s) => s.id === t ? { ...s, name: a, updatedAt: Date.now() } : s
           );
           r({
             savedWorkflows: c,
-            ...p === t ? { activeWorkflowName: a } : {}
+            ...m === t ? { activeWorkflowName: a } : {}
           });
         },
         duplicateWorkflow: (t) => {
-          const { savedWorkflows: a } = d(), o = a.find((m) => m.id === t);
+          const { savedWorkflows: a } = d(), o = a.find((p) => p.id === t);
           if (!o) return "";
-          const p = Date.now(), c = be(), s = {
+          const m = Date.now(), c = be(), s = {
             ...o,
             id: c,
             name: `${o.name} (Copy)`,
-            createdAt: p,
-            updatedAt: p
+            createdAt: m,
+            updatedAt: m
           };
           return r({ savedWorkflows: [...a, s] }), c;
         },
         loadGeneratedWorkflow: (t) => {
-          const a = /* @__PURE__ */ new Map(), o = 250, p = 150, c = 3, s = t.nodes.map((l, g) => {
+          const a = /* @__PURE__ */ new Map(), o = 250, m = 150, c = 3, s = t.nodes.map((l, g) => {
             const b = Q();
             a.set(l.id, b);
             const f = l.nodeType.split(":"), h = f[0], y = Math.floor(g / c), C = {
               x: 100 + g % c * o,
-              y: 100 + y * p
+              y: 100 + y * m
             };
             let u;
             if (h === "generator") {
-              const x = f.slice(1).join(":"), N = d().generators.find((w) => w.name === x);
+              const x = f.slice(1).join(":"), N = d().generators.find((k) => k.name === x);
               u = {
                 generatorName: x,
                 params: l.parameters,
@@ -915,16 +915,16 @@ const k = ye()(
                 maxReferenceImages: N == null ? void 0 : N.maxReferenceImages
               };
             } else if (h === "transform") {
-              const x = f[1], N = f.slice(2).join(":"), w = d().transforms.find(
+              const x = f[1], N = f.slice(2).join(":"), k = d().transforms.find(
                 (W) => W.providerName === x && W.name === N
               );
               u = {
                 operation: N,
                 providerName: x,
                 params: l.parameters,
-                isAI: w == null ? void 0 : w.isAI,
-                acceptsReferenceImages: w == null ? void 0 : w.acceptsReferenceImages,
-                maxReferenceImages: w == null ? void 0 : w.maxReferenceImages
+                isAI: k == null ? void 0 : k.isAI,
+                acceptsReferenceImages: k == null ? void 0 : k.acceptsReferenceImages,
+                maxReferenceImages: k == null ? void 0 : k.maxReferenceImages
               };
             } else if (h === "input")
               u = {
@@ -938,7 +938,7 @@ const k = ye()(
                 params: l.parameters
               };
             else if (h === "text") {
-              const x = f.slice(1).join(":"), N = l.parameters.jsonSchema, w = N != null && N.properties ? {
+              const x = f.slice(1).join(":"), N = l.parameters.jsonSchema, k = N != null && N.properties ? {
                 type: "object",
                 properties: Object.fromEntries(
                   Object.entries(N.properties).map(([W, A]) => [
@@ -953,7 +953,7 @@ const k = ye()(
               u = {
                 providerName: x,
                 params: l.parameters,
-                outputSchema: w
+                outputSchema: k
               };
             } else
               u = {
@@ -966,7 +966,7 @@ const k = ye()(
               position: C,
               data: u
             };
-          }), m = t.edges.map((l) => {
+          }), p = t.edges.map((l) => {
             const g = a.get(l.source) || l.source, b = a.get(l.target) || l.target, f = [l.sourceHandle, l.targetHandle].filter(Boolean).join("_");
             return {
               id: f ? `edge_${g}_${b}_${f}` : `edge_${g}_${b}`,
@@ -978,7 +978,7 @@ const k = ye()(
           });
           r({
             nodes: s,
-            edges: m,
+            edges: p,
             selectedNodeId: null,
             currentTemplateId: null,
             previewVisible: {},
@@ -1017,8 +1017,8 @@ function ae(r) {
 function _(r) {
   return r === "pending" ? "border-gray-400 dark:border-zinc-500" : r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
-function pe({ nodeId: r, color: d }) {
-  const n = k((a) => a.previewVisible[r] !== !1), t = k((a) => a.togglePreview);
+function me({ nodeId: r, color: d }) {
+  const n = w((a) => a.previewVisible[r] !== !1), t = w((a) => a.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
@@ -1052,13 +1052,13 @@ const rt = H(function({
   data: n,
   selected: t
 }) {
-  const a = k((g) => g.execution.previews[d]), o = k((g) => g.execution.nodeStatus[d]), p = k((g) => g.previewVisible[d] !== !1), s = _(o) || (t ? "border-blue-500" : "border-blue-200"), m = n.isAI, l = n.acceptsReferenceImages;
+  const a = w((g) => g.execution.previews[d]), o = w((g) => g.execution.nodeStatus[d]), m = w((g) => g.previewVisible[d] !== !1), s = _(o) || (t ? "border-blue-500" : "border-blue-200"), p = n.isAI, l = n.acceptsReferenceImages;
   return /* @__PURE__ */ i(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${s}`,
       children: [
-        m && /* @__PURE__ */ e(
+        p && /* @__PURE__ */ e(
           M,
           {
             type: "target",
@@ -1079,14 +1079,14 @@ const rt = H(function({
             title: `Reference images (up to ${n.maxReferenceImages || 14})`
           }
         ),
-        a && 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: a, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        a && 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: a, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ i("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-blue-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-blue-700 dark:text-blue-400", children: n.generatorName }),
-            /* @__PURE__ */ e(pe, { nodeId: d, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(me, { nodeId: d, color: "text-blue-500 dark:text-blue-400" })
           ] }),
-          m && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
+          p && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
           l && /* @__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(n.params).filter(([, g]) => typeof g != "object" || g === null).slice(0, 2).map(([g, b]) => /* @__PURE__ */ i("div", { className: "truncate", children: [
             g,
@@ -1103,13 +1103,13 @@ const rt = H(function({
   data: n,
   selected: t
 }) {
-  const a = k((g) => g.execution.previews[d]), o = k((g) => g.execution.nodeStatus[d]), p = k((g) => g.previewVisible[d] !== !1), s = _(o) || (t ? "border-teal-500" : "border-teal-200"), m = n.isAI, l = n.acceptsReferenceImages;
+  const a = w((g) => g.execution.previews[d]), o = w((g) => g.execution.nodeStatus[d]), m = w((g) => g.previewVisible[d] !== !1), s = _(o) || (t ? "border-teal-500" : "border-teal-200"), p = n.isAI, l = n.acceptsReferenceImages;
   return /* @__PURE__ */ i(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${s}`,
       children: [
-        m && /* @__PURE__ */ e(
+        p && /* @__PURE__ */ e(
           M,
           {
             type: "target",
@@ -1130,10 +1130,10 @@ const rt = H(function({
             title: `Reference images (up to ${n.maxReferenceImages || 13})`
           }
         ),
-        a && 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: a, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        a && 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: a, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ i("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
-            m ? /* @__PURE__ */ i("svg", { className: "w-3 h-3 text-purple-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
+            p ? /* @__PURE__ */ i("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",
@@ -1147,19 +1147,19 @@ const rt = H(function({
             /* @__PURE__ */ e(
               "span",
               {
-                className: `font-semibold text-sm ${m ? "text-purple-700 dark:text-purple-400" : "text-teal-700 dark:text-teal-400"}`,
+                className: `font-semibold text-sm ${p ? "text-purple-700 dark:text-purple-400" : "text-teal-700 dark:text-teal-400"}`,
                 children: n.operation
               }
             ),
             /* @__PURE__ */ e(
-              pe,
+              me,
               {
                 nodeId: d,
-                color: m ? "text-purple-500 dark:text-purple-400" : "text-teal-500 dark:text-teal-400"
+                color: p ? "text-purple-500 dark:text-purple-400" : "text-teal-500 dark:text-teal-400"
               }
             )
           ] }),
-          m && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
+          p && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
           l && /* @__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(n.params).filter(([, g]) => typeof g != "object" || g === null).slice(0, 2).map(([g, b]) => /* @__PURE__ */ i("div", { className: "truncate", children: [
             g,
@@ -1172,11 +1172,11 @@ const rt = H(function({
     }
   );
 }), ot = H(function({ id: d, data: n, selected: t }) {
-  const a = k((c) => c.execution.nodeStatus[d]), p = _(a) || (t ? "border-green-500" : "border-green-200");
+  const a = w((c) => c.execution.nodeStatus[d]), m = _(a) || (t ? "border-green-500" : "border-green-200");
   return /* @__PURE__ */ i(
     "div",
     {
-      className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${p}`,
+      className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${m}`,
       children: [
         /* @__PURE__ */ e(M, { type: "target", position: T.Left, className: "w-3 h-3 !bg-green-500" }),
         /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
@@ -1188,7 +1188,7 @@ const rt = H(function({
     }
   );
 }), nt = H(function({ id: d, data: n, selected: t }) {
-  const a = k((v) => v.execution.previews[d]), o = k((v) => v.execution.nodeStatus[d]), p = k((v) => v.previewVisible[d] !== !1), c = k((v) => v.updateNodeData), s = se(null), l = _(o) || (t ? "border-amber-500" : "border-amber-200"), g = L(
+  const a = w((v) => v.execution.previews[d]), o = w((v) => v.execution.nodeStatus[d]), m = w((v) => v.previewVisible[d] !== !1), c = w((v) => v.updateNodeData), s = se(null), l = _(o) || (t ? "border-amber-500" : "border-amber-200"), g = L(
     async (v) => {
       try {
         const C = await _e(v);
@@ -1218,7 +1218,7 @@ const rt = H(function({
       C && g(C);
     },
     [g]
-  ), y = a || (n.uploadId ? ke(n.uploadId) : null);
+  ), y = a || (n.uploadId ? we(n.uploadId) : null);
   return /* @__PURE__ */ i(
     "div",
     {
@@ -1226,7 +1226,7 @@ const rt = H(function({
       onDrop: b,
       onDragOver: f,
       children: [
-        y && p ? /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: y, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : y ? null : /* @__PURE__ */ e(
+        y && 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: y, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : y ? null : /* @__PURE__ */ e(
           "div",
           {
             className: "bg-amber-50 dark:bg-amber-900/30 border-b border-amber-100 dark:border-amber-800 h-24 flex items-center justify-center cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
@@ -1254,7 +1254,7 @@ const rt = H(function({
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-amber-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-amber-700 dark:text-amber-400", children: "Input" }),
-            /* @__PURE__ */ e(pe, { nodeId: d, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(me, { nodeId: d, color: "text-amber-500 dark:text-amber-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: n.filename || "No image selected" })
         ] }),
@@ -1268,10 +1268,10 @@ const rt = H(function({
   selected: t
 }) {
   var g, b, f;
-  const a = k((h) => h.execution.nodeStatus[d]), o = k((h) => {
+  const a = w((h) => h.execution.nodeStatus[d]), o = w((h) => {
     var y;
     return (y = h.execution.dataOutputs) == null ? void 0 : y[d];
-  }), p = k((h) => h.openOutputInspector), s = _(a) || (t ? "border-cyan-500" : "border-cyan-200"), m = (g = n.outputSchema) != null && g.properties ? Object.entries(n.outputSchema.properties) : [], l = m.length > 0;
+  }), m = w((h) => h.openOutputInspector), s = _(a) || (t ? "border-cyan-500" : "border-cyan-200"), p = (g = n.outputSchema) != null && g.properties ? Object.entries(n.outputSchema.properties) : [], l = p.length > 0;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -1287,7 +1287,7 @@ const rt = H(function({
             "button",
             {
               onClick: (h) => {
-                h.stopPropagation(), p(d);
+                h.stopPropagation(), m(d);
               },
               className: "mt-1 text-xs text-cyan-600 dark:text-cyan-400 hover:text-cyan-800 dark:hover:text-cyan-300 hover:underline",
               children: "View Full Output"
@@ -1315,7 +1315,7 @@ const rt = H(function({
           ] }) : null }),
           l && /* @__PURE__ */ i("div", { className: "mt-2 pt-2 border-t border-cyan-200 dark:border-cyan-800", children: [
             /* @__PURE__ */ e("div", { className: "text-[10px] text-cyan-500 dark:text-cyan-400 font-medium mb-1", children: "Outputs:" }),
-            m.map(([h]) => /* @__PURE__ */ i(
+            p.map(([h]) => /* @__PURE__ */ i(
               "div",
               {
                 className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
@@ -1340,7 +1340,7 @@ const rt = H(function({
               title: "Full JSON output"
             }
           ),
-          m.map(([h, y], v) => /* @__PURE__ */ e(
+          p.map(([h, y], v) => /* @__PURE__ */ e(
             M,
             {
               type: "source",
@@ -1360,10 +1360,10 @@ const rt = H(function({
   );
 }), st = H(function({ id: d, data: n, selected: t }) {
   var g, b, f;
-  const a = k((h) => h.execution.nodeStatus[d]), o = k((h) => {
+  const a = w((h) => h.execution.nodeStatus[d]), o = w((h) => {
     var y;
     return (y = h.execution.dataOutputs) == null ? void 0 : y[d];
-  }), p = k((h) => h.openOutputInspector), s = _(a) || (t ? "border-pink-500" : "border-pink-200"), m = (g = n.outputSchema) != null && g.properties ? Object.entries(n.outputSchema.properties) : [], l = m.length > 0;
+  }), m = w((h) => h.openOutputInspector), s = _(a) || (t ? "border-pink-500" : "border-pink-200"), p = (g = n.outputSchema) != null && g.properties ? Object.entries(n.outputSchema.properties) : [], l = p.length > 0;
   return /* @__PURE__ */ i(
     "div",
     {
@@ -1379,7 +1379,7 @@ const rt = H(function({
             "button",
             {
               onClick: (h) => {
-                h.stopPropagation(), p(d);
+                h.stopPropagation(), m(d);
               },
               className: "mt-1 text-xs text-pink-600 dark:text-pink-400 hover:text-pink-800 dark:hover:text-pink-300 hover:underline",
               children: "View Full Output"
@@ -1404,7 +1404,7 @@ const rt = H(function({
           ] }) : null }),
           l && /* @__PURE__ */ i("div", { className: "mt-2 pt-2 border-t border-pink-200 dark:border-pink-800", children: [
             /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 font-medium mb-1", children: "Outputs:" }),
-            m.map(([h]) => /* @__PURE__ */ i(
+            p.map(([h]) => /* @__PURE__ */ i(
               "div",
               {
                 className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
@@ -1429,7 +1429,7 @@ const rt = H(function({
               title: "Full JSON output"
             }
           ),
-          m.map(([h, y], v) => /* @__PURE__ */ e(
+          p.map(([h, y], v) => /* @__PURE__ */ e(
             M,
             {
               type: "source",
@@ -1471,7 +1471,7 @@ const rt = H(function({
   interactionWidth: 20
 };
 function ct() {
-  const r = k((f) => f.nodes), d = k((f) => f.edges), n = k((f) => f.setNodes), t = k((f) => f.setEdges), a = k((f) => f.addEdge), o = k((f) => f.setSelectedNode), p = de(() => dt, []), c = L(
+  const r = w((f) => f.nodes), d = w((f) => f.edges), n = w((f) => f.setNodes), t = w((f) => f.setEdges), a = w((f) => f.addEdge), o = w((f) => f.setSelectedNode), m = de(() => dt, []), c = L(
     (f) => {
       const { source: h, target: y, targetHandle: v } = f;
       if (!h || !y) return !1;
@@ -1489,7 +1489,7 @@ function ct() {
       n(We(f, r));
     },
     [r, n]
-  ), m = L(
+  ), p = L(
     (f) => {
       t(Pe(f, d));
     },
@@ -1524,11 +1524,11 @@ function ct() {
       nodes: r,
       edges: d,
       onNodesChange: s,
-      onEdgesChange: m,
+      onEdgesChange: p,
       onConnect: l,
       onNodeClick: g,
       onPaneClick: b,
-      nodeTypes: p,
+      nodeTypes: m,
       defaultEdgeOptions: lt,
       isValidConnection: c,
       nodesDraggable: !0,
@@ -1548,14 +1548,14 @@ function ct() {
     }
   ) });
 }
-function pt({ onSelect: r }) {
-  const [d, n] = I([]), [t, a] = I(!0), [o, p] = I(null), c = async () => {
+function mt({ onSelect: r }) {
+  const [d, n] = I([]), [t, a] = I(!0), [o, m] = I(null), c = async () => {
     try {
       a(!0);
       const l = await Ke();
-      n(l), p(null);
+      n(l), m(null);
     } catch (l) {
-      p(l instanceof Error ? l.message : "Failed to load uploads");
+      m(l instanceof Error ? l.message : "Failed to load uploads");
     } finally {
       a(!1);
     }
@@ -1570,7 +1570,7 @@ function pt({ onSelect: r }) {
       } catch (b) {
         console.error("Failed to delete:", b);
       }
-  }, m = (l) => l < 1024 ? `${l} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(1)} KB` : `${(l / (1024 * 1024)).toFixed(1)} MB`;
+  }, p = (l) => l < 1024 ? `${l} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(1)} KB` : `${(l / (1024 * 1024)).toFixed(1)} MB`;
   return t ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : o ? /* @__PURE__ */ i("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
     o,
     /* @__PURE__ */ e(
@@ -1590,7 +1590,7 @@ function pt({ onSelect: r }) {
         /* @__PURE__ */ e(
           "img",
           {
-            src: ke(l.id),
+            src: we(l.id),
             alt: l.filename,
             className: "w-full h-20 object-cover"
           }
@@ -1604,14 +1604,14 @@ function pt({ 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: l.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: m(l.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: p(l.size) })
       ]
     },
     l.id
   )) }) });
 }
-function mt() {
-  const r = k((w) => w.setGenerators), d = k((w) => w.setTransforms), n = k((w) => w.setTextProviders), t = k((w) => w.setVisionProviders), a = k((w) => w.generators), o = k((w) => w.transforms), p = k((w) => w.textProviders), c = k((w) => w.visionProviders), s = k((w) => w.addNode), [m, l] = I(!1), { data: g } = X({
+function pt() {
+  const r = w((k) => k.setGenerators), d = w((k) => k.setTransforms), n = w((k) => k.setTextProviders), t = w((k) => k.setVisionProviders), a = w((k) => k.generators), o = w((k) => k.transforms), m = w((k) => k.textProviders), c = w((k) => k.visionProviders), s = w((k) => k.addNode), [p, l] = I(!1), { data: g } = X({
     queryKey: ["generators"],
     queryFn: Ee
   }), { data: b } = X({
@@ -1633,10 +1633,10 @@ function mt() {
   }, [f, n]), B(() => {
     h && t(h);
   }, [h, t]);
-  const y = (w, W) => {
-    w.dataTransfer.setData("application/json", JSON.stringify(W)), w.dataTransfer.effectAllowed = "move";
-  }, v = (w) => {
-    s(w, { x: 250, y: 150 + Math.random() * 100 });
+  const y = (k, W) => {
+    k.dataTransfer.setData("application/json", JSON.stringify(W)), k.dataTransfer.effectAllowed = "move";
+  }, v = (k) => {
+    s(k, { x: 250, y: 150 + Math.random() * 100 });
   }, C = {
     id: "input:upload",
     type: "input",
@@ -1670,15 +1670,15 @@ function mt() {
       }
     }
   }, x = a.reduce(
-    (w, W) => {
+    (k, W) => {
       const A = W.category || "Other";
-      return w[A] || (w[A] = []), w[A].push(W), w;
+      return k[A] || (k[A] = []), k[A].push(W), k;
     },
     {}
   ), N = o.reduce(
-    (w, W) => {
+    (k, W) => {
       const A = W.category || "Other";
-      return w[A] || (w[A] = []), w[A].push(W), w;
+      return k[A] || (k[A] = []), k[A].push(W), k;
     },
     {}
   );
@@ -1690,10 +1690,10 @@ function mt() {
         /* @__PURE__ */ i(
           "button",
           {
-            onClick: () => l(!m),
+            onClick: () => l(!p),
             className: "text-xs text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300",
             children: [
-              m ? "Hide" : "Browse",
+              p ? "Hide" : "Browse",
               " Uploads"
             ]
           }
@@ -1703,7 +1703,7 @@ function mt() {
         "div",
         {
           draggable: !0,
-          onDragStart: (w) => y(w, C),
+          onDragStart: (k) => y(k, C),
           onDoubleClick: () => v(C),
           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: [
@@ -1712,12 +1712,12 @@ function mt() {
           ]
         }
       ),
-      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(pt, {}) })
+      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(mt, {}) })
     ] }),
     /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-2", children: "Generators" }),
-      Object.entries(x).map(([w, W]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
-        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: w }),
+      Object.entries(x).map(([k, W]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: k }),
         W.map((A) => /* @__PURE__ */ i(
           "div",
           {
@@ -1732,12 +1732,12 @@ function mt() {
           },
           A.id
         ))
-      ] }, w))
+      ] }, k))
     ] }),
     /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-teal-600 dark:text-teal-400 uppercase tracking-wide mb-2", children: "Transforms" }),
-      Object.entries(N).map(([w, W]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
-        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: w }),
+      Object.entries(N).map(([k, W]) => /* @__PURE__ */ i("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: k }),
         W.map((A) => /* @__PURE__ */ i(
           "div",
           {
@@ -1752,40 +1752,40 @@ function mt() {
           },
           A.id
         ))
-      ] }, w))
+      ] }, k))
     ] }),
-    p.length > 0 && /* @__PURE__ */ i("div", { className: "mb-6", children: [
+    m.length > 0 && /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-pink-600 dark:text-pink-400 uppercase tracking-wide mb-2", children: "AI Text" }),
-      p.map((w) => /* @__PURE__ */ i(
+      m.map((k) => /* @__PURE__ */ i(
         "div",
         {
           draggable: !0,
-          onDragStart: (W) => y(W, w),
-          onDoubleClick: () => v(w),
+          onDragStart: (W) => y(W, k),
+          onDoubleClick: () => v(k),
           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: w.label }),
-            w.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: w.description })
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-pink-700 dark:text-pink-300", children: k.label }),
+            k.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: k.description })
           ]
         },
-        w.id
+        k.id
       ))
     ] }),
     c.length > 0 && /* @__PURE__ */ i("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-cyan-600 dark:text-cyan-400 uppercase tracking-wide mb-2", children: "AI Vision" }),
-      c.map((w) => /* @__PURE__ */ i(
+      c.map((k) => /* @__PURE__ */ i(
         "div",
         {
           draggable: !0,
-          onDragStart: (W) => y(W, w),
-          onDoubleClick: () => v(w),
+          onDragStart: (W) => y(W, k),
+          onDoubleClick: () => v(k),
           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: w.label }),
-            w.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: w.description })
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-cyan-700 dark:text-cyan-300", children: k.label }),
+            k.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: k.description })
           ]
         },
-        w.id
+        k.id
       ))
     ] }),
     /* @__PURE__ */ i("div", { className: "mb-6", children: [
@@ -1794,7 +1794,7 @@ function mt() {
         "div",
         {
           draggable: !0,
-          onDragStart: (w) => y(w, u),
+          onDragStart: (k) => y(k, u),
           onDoubleClick: () => v(u),
           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: [
@@ -1808,19 +1808,19 @@ function mt() {
 }
 function gt() {
   var h, y, v, C;
-  const r = k((u) => u.selectedNodeId), d = k((u) => u.nodes), n = k((u) => u.generators), t = k((u) => u.transforms), a = k((u) => u.textProviders), o = k((u) => u.visionProviders), p = k((u) => u.updateNodeData), c = k((u) => u.deleteNode), s = d.find((u) => u.id === r);
+  const r = w((u) => u.selectedNodeId), d = w((u) => u.nodes), n = w((u) => u.generators), t = w((u) => u.transforms), a = w((u) => u.textProviders), o = w((u) => u.visionProviders), m = w((u) => u.updateNodeData), c = w((u) => u.deleteNode), s = d.find((u) => u.id === r);
   if (!s)
     return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 p-4", children: /* @__PURE__ */ e("div", { className: "text-gray-500 dark:text-zinc-400 text-sm", children: "Select a node to edit its properties" }) });
-  let m, l = "";
+  let p, l = "";
   if (s.type === "generator") {
     const u = s.data, x = n.find((N) => N.name === u.generatorName);
-    m = (h = x == null ? void 0 : x.params) == null ? void 0 : h.properties, l = (x == null ? void 0 : x.label) || u.generatorName;
+    p = (h = x == null ? void 0 : x.params) == null ? void 0 : h.properties, l = (x == null ? void 0 : x.label) || u.generatorName;
   } else if (s.type === "transform") {
     const u = s.data, x = t.find((N) => N.name === u.operation);
-    m = (y = x == null ? void 0 : x.params) == null ? void 0 : y.properties, l = (x == null ? void 0 : x.label) || u.operation;
+    p = (y = x == null ? void 0 : x.params) == null ? void 0 : y.properties, l = (x == null ? void 0 : x.label) || u.operation;
   } else if (s.type === "save") {
     const x = s.data.provider === "floimg-cloud";
-    l = x ? "Save to FloImg Cloud" : "Save", m = {
+    l = x ? "Save to FloImg Cloud" : "Save", p = {
       destination: {
         type: "string",
         title: x ? "Filename" : "Destination",
@@ -1829,32 +1829,32 @@ function gt() {
     };
   } else if (s.type === "text") {
     const u = s.data, x = a.find((N) => N.name === u.providerName);
-    m = (v = x == null ? void 0 : x.params) == null ? void 0 : v.properties, l = (x == null ? void 0 : x.label) || u.providerName;
+    p = (v = x == null ? void 0 : x.params) == null ? void 0 : v.properties, l = (x == null ? void 0 : x.label) || u.providerName;
   } else if (s.type === "vision") {
     const u = s.data, x = o.find((N) => N.name === u.providerName);
-    m = (C = x == null ? void 0 : x.params) == null ? void 0 : C.properties, l = (x == null ? void 0 : x.label) || u.providerName;
+    p = (C = x == null ? void 0 : x.params) == null ? void 0 : C.properties, l = (x == null ? void 0 : x.label) || u.providerName;
   }
   const g = (u, x) => {
     if (s.type === "generator") {
       const N = s.data;
-      p(s.id, {
+      m(s.id, {
         params: { ...N.params, [u]: x }
       });
     } else if (s.type === "transform") {
       const N = s.data;
-      p(s.id, {
+      m(s.id, {
         params: { ...N.params, [u]: x }
       });
     } else if (s.type === "save")
-      p(s.id, { [u]: x });
+      m(s.id, { [u]: x });
     else if (s.type === "text") {
       const N = s.data;
-      p(s.id, {
+      m(s.id, {
         params: { ...N.params, [u]: x }
       });
     } else if (s.type === "vision") {
       const N = s.data;
-      p(s.id, {
+      m(s.id, {
         params: { ...N.params, [u]: x }
       });
     }
@@ -1871,15 +1871,15 @@ function gt() {
       return s.data.params[u];
   }, f = (u, x) => {
     if (s.type === "generator" && s.data.generatorName === "shapes") {
-      const N = b("shapeType") || "rectangle", w = b("fillType") || "solid";
+      const N = b("shapeType") || "rectangle", k = b("fillType") || "solid";
       if (u === "sides") return N === "polygon";
       if (u === "points" || u === "innerRadius") return N === "star";
       if (u === "cornerRadius") return N === "rectangle";
-      if (u === "fillColor") return w === "solid";
+      if (u === "fillColor") return k === "solid";
       if (u === "gradientType" || u === "gradientColor1" || u === "gradientColor2" || u === "gradientAngle")
-        return w === "gradient";
+        return k === "gradient";
       if (u === "patternType" || u === "patternColor" || u === "patternBackground" || u === "patternScale")
-        return w === "pattern";
+        return k === "pattern";
     }
     return !0;
   };
@@ -1895,7 +1895,7 @@ function gt() {
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: m && Object.entries(m).filter(([u, x]) => f(u)).map(([u, x]) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: p && Object.entries(p).filter(([u, x]) => f(u)).map(([u, x]) => /* @__PURE__ */ e(
       ut,
       {
         name: u,
@@ -1910,7 +1910,7 @@ function gt() {
       {
         nodeId: s.id,
         outputSchema: s.data.outputSchema,
-        updateNodeData: p
+        updateNodeData: m
       }
     )
   ] }) });
@@ -1923,11 +1923,11 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
       "select",
       {
         value: String(n || ""),
-        onChange: (p) => t(p.target.value),
+        onChange: (m) => t(m.target.value),
         className: o,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-          d.enum.map((p) => /* @__PURE__ */ e("option", { value: p, children: p }, p))
+          d.enum.map((m) => /* @__PURE__ */ e("option", { value: m, children: m }, m))
         ]
       }
     ),
@@ -1939,7 +1939,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
       {
         type: "number",
         value: n !== void 0 ? Number(n) : "",
-        onChange: (p) => t(Number(p.target.value)),
+        onChange: (m) => t(Number(m.target.value)),
         min: d.minimum,
         max: d.maximum,
         className: o
@@ -1952,7 +1952,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
       {
         type: "checkbox",
         checked: !!n,
-        onChange: (p) => t(p.target.checked),
+        onChange: (m) => t(m.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"
       }
     ),
@@ -1965,7 +1965,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
         {
           type: "color",
           value: String(n || "#000000"),
-          onChange: (p) => t(p.target.value),
+          onChange: (m) => t(m.target.value),
           className: "h-10 w-14 p-1 border border-gray-300 dark:border-zinc-600 rounded"
         }
       ),
@@ -1974,7 +1974,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
         {
           type: "text",
           value: String(n || ""),
-          onChange: (p) => t(p.target.value),
+          onChange: (m) => t(m.target.value),
           className: o + " flex-1"
         }
       )
@@ -1985,9 +1985,9 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
       "textarea",
       {
         value: n ? JSON.stringify(n, null, 2) : "{}",
-        onChange: (p) => {
+        onChange: (m) => {
           try {
-            t(JSON.parse(p.target.value));
+            t(JSON.parse(m.target.value));
           } catch {
           }
         },
@@ -2002,7 +2002,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
       "textarea",
       {
         value: String(n || ""),
-        onChange: (p) => t(p.target.value),
+        onChange: (m) => t(m.target.value),
         rows: 3,
         className: o
       }
@@ -2011,7 +2011,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
       {
         type: "text",
         value: String(n || ""),
-        onChange: (p) => t(p.target.value),
+        onChange: (m) => t(m.target.value),
         className: o
       }
     ),
@@ -2019,7 +2019,7 @@ function ut({ name: r, field: d, value: n, onChange: t }) {
   ] });
 }
 function ht({ nodeId: r, outputSchema: d, updateNodeData: n }) {
-  const [t, a] = I(""), o = (d == null ? void 0 : d.properties) || {}, p = Object.entries(o), c = () => {
+  const [t, a] = I(""), o = (d == null ? void 0 : d.properties) || {}, m = Object.entries(o), c = () => {
     if (!t.trim()) return;
     const g = {
       type: "object",
@@ -2034,7 +2034,7 @@ function ht({ nodeId: r, outputSchema: d, updateNodeData: n }) {
     delete b[g], Object.keys(b).length === 0 ? n(r, { outputSchema: void 0 }) : n(r, {
       outputSchema: { type: "object", properties: b }
     });
-  }, m = (g, b) => {
+  }, p = (g, b) => {
     n(r, {
       outputSchema: {
         type: "object",
@@ -2058,10 +2058,10 @@ function ht({ nodeId: r, outputSchema: d, updateNodeData: n }) {
   return /* @__PURE__ */ i("div", { className: "mt-6 pt-4 border-t border-gray-200 dark:border-zinc-700", children: [
     /* @__PURE__ */ i("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: p.length > 0 ? `${p.length} output${p.length > 1 ? "s" : ""}` : "No outputs defined" })
+      /* @__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("p", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-3", children: "Define output properties to enable connecting individual JSON fields to other nodes." }),
-    p.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: p.map(([g, b]) => /* @__PURE__ */ i(
+    m.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: m.map(([g, b]) => /* @__PURE__ */ i(
       "div",
       {
         className: "flex items-center gap-2 p-2 bg-pink-50 dark:bg-pink-900/20 rounded border border-pink-200 dark:border-pink-800",
@@ -2073,7 +2073,7 @@ function ht({ nodeId: r, outputSchema: d, updateNodeData: n }) {
                 "select",
                 {
                   value: b.type,
-                  onChange: (f) => m(g, f.target.value),
+                  onChange: (f) => p(g, 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" }),
@@ -2139,7 +2139,7 @@ function ht({ nodeId: r, outputSchema: d, updateNodeData: n }) {
         }
       )
     ] }),
-    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." })
+    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." })
   ] });
 }
 function ft(r, d) {
@@ -2153,17 +2153,17 @@ function ft(r, d) {
   const o = [];
   for (const [c, s] of t)
     s === 0 && o.push(c);
-  const p = [];
+  const m = [];
   for (; o.length > 0; ) {
     const c = o.shift(), s = n.get(c);
-    s && p.push(s);
-    const m = a.get(c) || [];
-    for (const l of m) {
+    s && m.push(s);
+    const p = a.get(c) || [];
+    for (const l of p) {
       const g = (t.get(l) || 1) - 1;
       t.set(l, g), g === 0 && o.push(l);
     }
   }
-  return p;
+  return m;
 }
 function bt(r) {
   const d = r.type || "node", n = r.id.replace(/[^a-zA-Z0-9]/g, "_");
@@ -2174,17 +2174,17 @@ function Y(r) {
 `) ? "`" + r.replace(/`/g, "\\`").replace(/\$/g, "\\$") + "`" : JSON.stringify(r) : JSON.stringify(r, null, 2);
 }
 function xt(r, d, n) {
-  const t = n.get(r.id), a = [], o = d.find((c) => c.target === r.id), p = o ? n.get(o.source) : null;
+  const t = n.get(r.id), a = [], o = d.find((c) => c.target === r.id), m = o ? n.get(o.source) : null;
   switch (r.type) {
     case "generator": {
       const c = r.data;
       a.push(c.generatorName);
-      const s = c.params || {}, m = Object.entries(s).filter(([, l]) => l !== void 0 && l !== "").map(([l, g]) => `  ${l}: ${Y(g)}`).join(`,
+      const s = c.params || {}, p = Object.entries(s).filter(([, l]) => l !== void 0 && l !== "").map(([l, g]) => `  ${l}: ${Y(g)}`).join(`,
 `);
       return {
         code: `// Generate image using ${c.generatorName}
 const ${t} = await ${c.generatorName}({
-${m}
+${p}
 });`,
         imports: a
       };
@@ -2196,21 +2196,21 @@ const ${t} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      const c = r.data, s = c.params || {}, m = Object.entries(s).filter(([, g]) => g !== void 0 && g !== "").map(([g, b]) => `${g}: ${Y(b)}`).join(", "), l = p || "image";
+      const c = r.data, s = c.params || {}, p = Object.entries(s).filter(([, g]) => g !== void 0 && g !== "").map(([g, b]) => `${g}: ${Y(b)}`).join(", "), l = m || "image";
       return {
         code: `// Apply ${c.operation} transform
-const ${t} = await flo.transform(${l}, "${c.operation}"${m ? `, { ${m} }` : ""});`,
+const ${t} = await flo.transform(${l}, "${c.operation}"${p ? `, { ${p} }` : ""});`,
         imports: []
       };
     }
     case "vision": {
       const c = r.data;
       a.push(c.providerName);
-      const s = c.params || {}, m = p || "image", l = Object.entries(s).filter(([, g]) => g !== void 0 && g !== "").map(([g, b]) => `  ${g}: ${Y(b)}`).join(`,
+      const s = c.params || {}, p = m || "image", l = Object.entries(s).filter(([, g]) => g !== void 0 && g !== "").map(([g, b]) => `  ${g}: ${Y(b)}`).join(`,
 `);
       return {
         code: `// Analyze image with ${c.providerName}
-const ${t} = await ${c.providerName}.analyze(${m}, {
+const ${t} = await ${c.providerName}.analyze(${p}, {
 ${l}
 });`,
         imports: a
@@ -2219,12 +2219,12 @@ ${l}
     case "text": {
       const c = r.data;
       a.push(c.providerName);
-      const s = c.params || {}, m = Object.entries(s).filter(([, l]) => l !== void 0 && l !== "").map(([l, g]) => `  ${l}: ${Y(g)}`).join(`,
+      const s = c.params || {}, p = Object.entries(s).filter(([, l]) => l !== void 0 && l !== "").map(([l, g]) => `  ${l}: ${Y(g)}`).join(`,
 `);
       return {
         code: `// Generate text with ${c.providerName}
 const ${t} = await ${c.providerName}.generate({
-${m}
+${p}
 });`,
         imports: a
       };
@@ -2233,7 +2233,7 @@ ${m}
       const c = r.data;
       return {
         code: `// Save result
-await flo.save(${p || "result"}, ${Y(c.destination)});`,
+await flo.save(${m || "result"}, ${Y(c.destination)});`,
         imports: []
       };
     }
@@ -2249,17 +2249,17 @@ function yt(r, d) {
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
   const n = ft(r, d), t = /* @__PURE__ */ new Map();
-  for (const m of n)
-    t.set(m.id, bt(m));
+  for (const p of n)
+    t.set(p.id, bt(p));
   const a = /* @__PURE__ */ new Set(), o = [];
-  for (const m of n) {
-    const { code: l, imports: g } = xt(m, d, t);
+  for (const p of n) {
+    const { code: l, imports: g } = xt(p, d, t);
     o.push(l);
     for (const b of g)
       a.add(b);
   }
-  const p = [];
-  a.size > 0 && p.push(`import { ${Array.from(a).join(", ")} } from "@teamflojo/floimg";`), p.push('import * as flo from "@teamflojo/floimg";');
+  const m = [];
+  a.size > 0 && m.push(`import { ${Array.from(a).join(", ")} } from "@teamflojo/floimg";`), m.push('import * as flo from "@teamflojo/floimg";');
   const c = `/**
  * FloImg Workflow
  * Generated by FloImg Studio
@@ -2269,7 +2269,7 @@ function yt(r, d) {
 `, s = `
 async function runWorkflow() {
 ${o.map(
-    (m) => m.split(`
+    (p) => p.split(`
 `).map((l) => "  " + l).join(`
 `)
   ).join(`
@@ -2280,17 +2280,17 @@ ${o.map(
 // Run the workflow
 runWorkflow().catch(console.error);
 `;
-  return c + p.join(`
+  return c + m.join(`
 `) + `
 ` + s;
 }
-function wt({ isOpen: r, onClose: d, onImport: n }) {
-  const [t, a] = I(""), [o, p] = I(!1), [c, s] = I(null), [m, l] = I(!1), g = L(async () => {
+function kt({ isOpen: r, onClose: d, onImport: n }) {
+  const [t, a] = I(""), [o, m] = I(!1), [c, s] = I(null), [p, l] = I(!1), g = L(async () => {
     if (!t.trim()) {
       s({ message: "Please enter or paste YAML content" });
       return;
     }
-    p(!0), s(null);
+    m(!0), s(null);
     try {
       const u = await Qe(t);
       u.success ? (n(u.nodes, u.edges, u.name), a(""), d()) : s({
@@ -2301,21 +2301,21 @@ function wt({ isOpen: r, onClose: d, onImport: n }) {
     } catch (u) {
       s({ message: u instanceof Error ? u.message : "Import failed" });
     } finally {
-      p(!1);
+      m(!1);
     }
   }, [t, n, d]), b = L(async () => {
     if (!t.trim()) {
       s({ message: "Please enter or paste YAML content" });
       return;
     }
-    p(!0), s(null);
+    m(!0), s(null);
     try {
       const u = await Ye(t);
       u.valid ? (s(null), s({ message: "Valid YAML!" }), setTimeout(() => s(null), 2e3)) : u.errors.length > 0 && s(u.errors[0]);
     } catch (u) {
       s({ message: u instanceof Error ? u.message : "Validation failed" });
     } finally {
-      p(!1);
+      m(!1);
     }
   }, [t]), f = L(async (u) => {
     if (!u.name.endsWith(".yaml") && !u.name.endsWith(".yml")) {
@@ -2375,7 +2375,7 @@ function wt({ isOpen: r, onClose: d, onImport: n }) {
           onDragOver: h,
           onDragLeave: y,
           onDrop: v,
-          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"}`,
+          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"}`,
           children: [
             /* @__PURE__ */ e(
               "input",
@@ -2515,14 +2515,14 @@ steps:
     ] })
   ] }) }) : null;
 }
-function kt({
+function wt({
   brandingSlot: r,
   beforeActionsSlot: d,
   afterActionsSlot: n,
   hideAttribution: t = !1,
   hideWorkflowLibrary: a = !1
 } = {}) {
-  const o = k((z) => z.execution), p = k((z) => z.execute), c = k((z) => z.cancelExecution), s = k((z) => z.exportToYaml), m = k((z) => z.importFromYaml), l = k((z) => z.nodes), g = k((z) => z.edges), b = G((z) => z.openSettings), f = k((z) => z.activeWorkflowName), h = k((z) => z.hasUnsavedChanges), y = k((z) => z.saveWorkflow), v = k((z) => z.toggleLibrary), C = k((z) => z.setActiveWorkflowName), u = k((z) => z.selectedNodeId), x = k((z) => z.duplicateNode), [N, w] = I(!1), [W, A] = I(!1), [U, K] = I("yaml"), [F, ee] = I(""), [te, oe] = I(""), [re, E] = I(null), [S, D] = I(!1), [P, q] = I("");
+  const o = w((z) => z.execution), m = w((z) => z.execute), c = w((z) => z.cancelExecution), s = w((z) => z.exportToYaml), p = w((z) => z.importFromYaml), l = w((z) => z.nodes), g = w((z) => z.edges), b = G((z) => z.openSettings), f = w((z) => z.activeWorkflowName), h = w((z) => z.hasUnsavedChanges), y = w((z) => z.saveWorkflow), v = w((z) => z.toggleLibrary), C = w((z) => z.setActiveWorkflowName), u = w((z) => z.selectedNodeId), x = w((z) => z.duplicateNode), [N, k] = I(!1), [W, A] = I(!1), [U, K] = I("yaml"), [F, ee] = I(""), [te, oe] = I(""), [re, E] = I(null), [S, D] = I(!1), [P, q] = I("");
   B(() => {
     const z = () => {
       E("New workflow created"), setTimeout(() => E(null), 2e3);
@@ -2546,20 +2546,20 @@ function kt({
     return document.addEventListener("keydown", z), () => document.removeEventListener("keydown", z);
   }, [ne, ue]);
   const ze = async () => {
-    await p();
+    await m();
   }, Ce = async () => {
     const z = await s();
     ee(z);
     const j = yt(l, g);
-    oe(j), w(!0);
+    oe(j), k(!0);
   }, Ie = () => {
     const z = U === "yaml" ? F : te;
     navigator.clipboard.writeText(z);
   }, Se = L(
     (z, j, Ae) => {
-      m(z, j, Ae), E("Workflow imported!"), setTimeout(() => E(null), 2e3);
+      p(z, j, Ae), E("Workflow imported!"), setTimeout(() => E(null), 2e3);
     },
-    [m]
+    [p]
   );
   return /* @__PURE__ */ i(O, { children: [
     /* @__PURE__ */ i("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: [
@@ -2790,7 +2790,7 @@ function kt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => w(!1),
+            onClick: () => k(!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",
@@ -2819,7 +2819,7 @@ function kt({
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => w(!1),
+              onClick: () => k(!1),
               className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
               children: "Close"
             }
@@ -2828,7 +2828,7 @@ function kt({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      wt,
+      kt,
       {
         isOpen: W,
         onClose: () => A(!1),
@@ -2838,11 +2838,11 @@ function kt({
   ] });
 }
 function vt() {
-  const r = k((s) => s.loadTemplate), [d, n] = I(null), {
+  const r = w((s) => s.loadTemplate), [d, n] = I(null), {
     data: t,
     isLoading: a,
     error: o,
-    refetch: p
+    refetch: m
   } = X({
     queryKey: ["images"],
     queryFn: Ve,
@@ -2851,8 +2851,8 @@ function vt() {
   }), c = async (s) => {
     n(s);
     try {
-      const m = await He(s);
-      if (m != null && m.workflow) {
+      const p = await He(s);
+      if (p != null && p.workflow) {
         const l = {
           id: `image-${s}`,
           name: `Workflow from ${s}`,
@@ -2860,15 +2860,15 @@ function vt() {
           category: "Utilities",
           generator: "unknown",
           workflow: {
-            nodes: m.workflow.nodes,
-            edges: m.workflow.edges
+            nodes: p.workflow.nodes,
+            edges: p.workflow.edges
           }
         };
         r(l), window.dispatchEvent(new CustomEvent("workflow-loaded"));
       } else
         alert("No workflow metadata available for this image");
-    } catch (m) {
-      console.error("Failed to load workflow:", m), alert("Failed to load workflow");
+    } catch (p) {
+      console.error("Failed to load workflow:", p), alert("Failed to load workflow");
     } finally {
       n(null);
     }
@@ -2892,7 +2892,7 @@ function vt() {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => p(),
+          onClick: () => m(),
           className: "text-sm text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-violet-300",
           children: "Refresh"
         }
@@ -2988,7 +2988,7 @@ const zt = {
   },
   icon: "chart",
   preview: {
-    imageUrl: "/showcase/data-viz/quarterly-revenue.png"
+    imageUrl: "https://floimg.com/images/templates/revenue-chart.png"
   },
   codeExample: `const chart = await floimg
   .generate('quickchart', {
@@ -3113,7 +3113,7 @@ const zt = {
   },
   icon: "chart",
   preview: {
-    imageUrl: "/showcase/data-viz/monthly-users.png"
+    imageUrl: "https://floimg.com/images/templates/monthly-users.png"
   },
   codeExample: `const chart = await floimg
   .generate('quickchart', {
@@ -3228,7 +3228,7 @@ const zt = {
   },
   icon: "chart",
   preview: {
-    imageUrl: "/showcase/data-viz/framework-usage.png"
+    imageUrl: "https://floimg.com/images/templates/framework-usage.png"
   },
   codeExample: `const chart = await floimg
   .generate('quickchart', {
@@ -3350,7 +3350,7 @@ const zt = {
   },
   icon: "chart",
   preview: {
-    imageUrl: "/showcase/data-viz/traffic-by-device.png"
+    imageUrl: "https://floimg.com/images/templates/traffic-breakdown.png"
   },
   codeExample: `const chart = await floimg
   .generate('quickchart', {
@@ -3474,7 +3474,7 @@ const zt = {
   },
   icon: "diagram",
   preview: {
-    imageUrl: "/showcase/diagrams/api-flow.png"
+    imageUrl: "https://floimg.com/images/templates/api-flow.png"
   },
   codeExample: `const diagram = await floimg
   .generate('mermaid', {
@@ -3594,7 +3594,7 @@ const zt = {
   },
   icon: "diagram",
   preview: {
-    imageUrl: "/showcase/diagrams/system-architecture.png"
+    imageUrl: "https://floimg.com/images/templates/system-architecture.png"
   },
   codeExample: `const diagram = await floimg
   .generate('mermaid', {
@@ -3733,7 +3733,7 @@ const zt = {
   },
   icon: "diagram",
   preview: {
-    imageUrl: "/showcase/diagrams/git-workflow.png"
+    imageUrl: "https://floimg.com/images/templates/git-workflow.png"
   },
   codeExample: `const diagram = await floimg
   .generate('mermaid', {
@@ -3862,7 +3862,7 @@ const zt = {
   icon: "sparkles",
   valueProp: "E-commerce-ready product photos in seconds",
   preview: {
-    imageUrl: "/showcase/ai-generation/product-headphones.png"
+    imageUrl: "https://floimg.com/images/templates/ai-product-shot.png"
   },
   codeExample: `const product = await floimg
   .generate('openai', {
@@ -3957,7 +3957,7 @@ const zt = {
   icon: "sparkles",
   valueProp: "Landing page hero images in seconds",
   preview: {
-    imageUrl: "/showcase/ai-generation/futuristic-city.png"
+    imageUrl: "https://floimg.com/images/templates/ai-hero-image.png"
   },
   codeExample: `const hero = await floimg
   .generate('openai', {
@@ -4050,7 +4050,7 @@ const zt = {
   icon: "sparkles",
   valueProp: "Brand-ready mascot assets in seconds",
   preview: {
-    imageUrl: "/showcase/ai-generation/robot-mascot.png"
+    imageUrl: "https://floimg.com/images/templates/ai-mascot.png"
   },
   codeExample: `const mascot = await floimg
   .generate('openai', {
@@ -4342,7 +4342,7 @@ const zt = {
   },
   icon: "share",
   preview: {
-    imageUrl: "/showcase/pipelines/output/og-image.png"
+    imageUrl: "https://floimg.com/images/templates/social-media-kit.png"
   },
   codeExample: `// One source -> all platforms
 const socialKit = await floimg.pipeline(heroImage, [
@@ -4422,7 +4422,7 @@ const socialKit = await floimg.pipeline(heroImage, [
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/avatar-128.png"
+    imageUrl: "https://floimg.com/images/templates/avatar-pipeline.png"
   },
   codeExample: `const avatars = await floimg.pipeline(photo, [
   { op: 'crop', params: { shape: 'circle' } },
@@ -4511,7 +4511,7 @@ const socialKit = await floimg.pipeline(heroImage, [
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/watermark-branded.png"
+    imageUrl: "https://floimg.com/images/templates/watermark-branding.png"
   },
   seo: {
     title: "Branded Watermark Template",
@@ -4590,7 +4590,7 @@ const socialKit = await floimg.pipeline(heroImage, [
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/filter-vintage.png"
+    imageUrl: "https://floimg.com/images/templates/filter-showcase.png"
   },
   seo: {
     title: "Image Filter Effects",
@@ -4663,7 +4663,7 @@ const socialKit = await floimg.pipeline(heroImage, [
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/responsive-desktop.png"
+    imageUrl: "https://floimg.com/images/templates/responsive-images.png"
   },
   codeExample: `// One source → all responsive sizes
 const responsive = await floimg.from(source)
@@ -4767,7 +4767,7 @@ const responsive = await floimg.from(source)
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/headshot-standard.png"
+    imageUrl: "https://floimg.com/images/templates/team-headshots.png"
   },
   codeExample: `const headshot = await floimg.from(photo)
   .transform('extract', { width: 400, height: 400, gravity: 'face' })
@@ -4855,7 +4855,7 @@ const responsive = await floimg.from(source)
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/screenshot-docs.png"
+    imageUrl: "https://floimg.com/images/templates/screenshot-docs.png"
   },
   codeExample: `const docImage = await floimg
   .generate('screenshot', { url: 'https://example.com', width: 1280 })
@@ -4954,7 +4954,7 @@ const responsive = await floimg.from(source)
   },
   icon: "share",
   preview: {
-    imageUrl: "/showcase/pipelines/output/blog-og.png"
+    imageUrl: "https://floimg.com/images/templates/blog-og-image.png"
   },
   codeExample: `const ogImage = await floimg.from(heroImage)
   .transform('resize', { width: 1200, height: 630, fit: 'cover' })
@@ -5039,7 +5039,7 @@ const responsive = await floimg.from(source)
   },
   icon: "share",
   preview: {
-    imageUrl: "/showcase/pipelines/output/email-banner.png"
+    imageUrl: "https://floimg.com/images/templates/email-banner.png"
   },
   codeExample: `const banner = await floimg.from(image)
   .transform('resize', { width: 600, height: 200, fit: 'cover' })
@@ -5125,7 +5125,7 @@ const responsive = await floimg.from(source)
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/app-icon-180.png"
+    imageUrl: "https://floimg.com/images/templates/app-icons.png"
   },
   codeExample: `const icons = await floimg.from(logo)
   .transform('removeBackground')
@@ -5240,13 +5240,12 @@ const responsive = await floimg.from(source)
   },
   icon: "qr",
   preview: {
-    imageUrl: "/showcase/qr-codes/qr-brand.png"
+    imageUrl: "https://floimg.com/images/templates/branded-qr.png"
   },
   codeExample: `const qr = await floimg
   .generate('qr', {
-    data: 'https://floimg.com',
-    dark: '#0d9488',
-    light: '#ffffff'
+    text: 'https://floimg.com',
+    color: { dark: '#0d9488', light: '#ffffff' }
   })
   .transform('resize', { width: 300, height: 300 })
   .transform('roundCorners', { radius: 16 })
@@ -5266,11 +5265,10 @@ const responsive = await floimg.from(source)
         data: {
           generatorName: "qr",
           params: {
-            data: "https://floimg.com",
-            size: 400,
+            text: "https://floimg.com",
+            width: 400,
             margin: 2,
-            dark: "#0d9488",
-            light: "#ffffff",
+            color: { dark: "#0d9488", light: "#ffffff" },
             errorCorrectionLevel: "M"
           }
         }
@@ -5330,13 +5328,12 @@ const responsive = await floimg.from(source)
   },
   icon: "qr",
   preview: {
-    imageUrl: "/showcase/qr-codes/qr-dark.png"
+    imageUrl: "https://floimg.com/images/templates/dark-qr.png"
   },
   codeExample: `const qr = await floimg
   .generate('qr', {
-    data: 'https://floimg.com',
-    dark: '#ffffff',
-    light: '#18181b'
+    text: 'https://floimg.com',
+    color: { dark: '#ffffff', light: '#18181b' }
   })
   .transform('resize', { width: 300, height: 300 })
   .transform('extend', {
@@ -5359,11 +5356,10 @@ const responsive = await floimg.from(source)
         data: {
           generatorName: "qr",
           params: {
-            data: "https://floimg.com",
-            size: 400,
+            text: "https://floimg.com",
+            width: 400,
             margin: 2,
-            dark: "#ffffff",
-            light: "#18181b",
+            color: { dark: "#ffffff", light: "#18181b" },
             errorCorrectionLevel: "M"
           }
         }
@@ -5428,13 +5424,12 @@ const responsive = await floimg.from(source)
   },
   icon: "qr",
   preview: {
-    imageUrl: "/showcase/qr-codes/qr-wifi.png"
+    imageUrl: "https://floimg.com/images/templates/wifi-qr.png"
   },
   codeExample: `const qr = await floimg
   .generate('qr', {
-    data: 'WIFI:T:WPA;S:GuestNetwork;P:welcome123;;',
-    dark: '#059669',
-    light: '#ffffff'
+    text: 'WIFI:T:WPA;S:GuestNetwork;P:welcome123;;',
+    color: { dark: '#059669', light: '#ffffff' }
   })
   .transform('resize', { width: 300, height: 300 })
   .transform('addCaption', {
@@ -5459,11 +5454,10 @@ const responsive = await floimg.from(source)
         data: {
           generatorName: "qr",
           params: {
-            data: "WIFI:T:WPA;S:GuestNetwork;P:welcome123;;",
-            size: 400,
+            text: "WIFI:T:WPA;S:GuestNetwork;P:welcome123;;",
+            width: 400,
             margin: 2,
-            dark: "#059669",
-            light: "#ffffff",
+            color: { dark: "#059669", light: "#ffffff" },
             errorCorrectionLevel: "H"
           }
         }
@@ -5527,7 +5521,7 @@ const responsive = await floimg.from(source)
   },
   icon: "image",
   preview: {
-    imageUrl: "/showcase/pipelines/output/thumb-200.png"
+    imageUrl: "https://floimg.com/images/templates/thumbnail-generator.png"
   },
   seo: {
     title: "Thumbnail Generator",
@@ -5642,15 +5636,15 @@ const responsive = await floimg.from(source)
   Xt,
   Zt,
   er
-], me = [
+], pe = [
   ...Pt,
   ...Dt,
   ...Jt,
   ...tr
-], Z = me.filter((r) => !r.requiresCloud);
-me.filter((r) => r.requiresCloud);
+], Z = pe.filter((r) => !r.requiresCloud);
+pe.filter((r) => r.requiresCloud);
 function rr(r) {
-  return me.find((d) => d.id === r);
+  return pe.find((d) => d.id === r);
 }
 function Cr(r) {
   return Z.find((d) => d.id === r);
@@ -5673,14 +5667,14 @@ function xe(r) {
   return rr(r);
 }
 function or({ onSelect: r }) {
-  const [d, n] = I(null), [t, a] = I(""), o = de(() => ar(), []), p = de(() => {
+  const [d, n] = I(null), [t, a] = I(""), o = de(() => ar(), []), m = de(() => {
     let c = Z;
     if (d && (c = c.filter((s) => s.category === d)), t) {
       const s = t.toLowerCase();
       c = c.filter(
-        (m) => {
+        (p) => {
           var l;
-          return m.name.toLowerCase().includes(s) || m.description.toLowerCase().includes(s) || m.generator.toLowerCase().includes(s) || ((l = m.tags) == null ? void 0 : l.some((g) => g.toLowerCase().includes(s)));
+          return p.name.toLowerCase().includes(s) || p.description.toLowerCase().includes(s) || p.generator.toLowerCase().includes(s) || ((l = p.tags) == null ? void 0 : l.some((g) => g.toLowerCase().includes(s)));
         }
       );
     }
@@ -5722,7 +5716,7 @@ function or({ onSelect: r }) {
         ))
       ] })
     ] }),
-    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((c) => /* @__PURE__ */ e(
+    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((c) => /* @__PURE__ */ e(
       nr,
       {
         template: c,
@@ -5837,7 +5831,7 @@ function ir({
   onRename: a,
   onDuplicate: o
 }) {
-  const [p, c] = I(!1), [s, m] = I(r.name), [l, g] = I(!1), b = () => {
+  const [m, c] = I(!1), [s, p] = I(r.name), [l, g] = I(!1), b = () => {
     s.trim() && s !== r.name && a(s.trim()), c(!1);
   }, f = (h) => {
     const y = new Date(h), C = (/* @__PURE__ */ new Date()).getTime() - y.getTime(), u = Math.floor(C / 6e4), x = Math.floor(C / 36e5), N = Math.floor(C / 864e5);
@@ -5850,15 +5844,15 @@ function ir({
       children: [
         /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ i("button", { onClick: n, className: "flex-1 text-left min-w-0", children: [
-            p ? /* @__PURE__ */ e(
+            m ? /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
                 value: s,
-                onChange: (h) => m(h.target.value),
+                onChange: (h) => p(h.target.value),
                 onBlur: b,
                 onKeyDown: (h) => {
-                  h.key === "Enter" && b(), h.key === "Escape" && (m(r.name), c(!1));
+                  h.key === "Enter" && b(), h.key === "Escape" && (p(r.name), c(!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,
@@ -5925,9 +5919,9 @@ function ir({
   );
 }
 function sr() {
-  const r = k((l) => l.showLibrary), d = k((l) => l.toggleLibrary), n = k((l) => l.savedWorkflows), t = k((l) => l.activeWorkflowId), a = k((l) => l.loadWorkflow), o = k((l) => l.deleteWorkflow), p = k((l) => l.renameWorkflow), c = k((l) => l.duplicateWorkflow), s = k((l) => l.newWorkflow);
+  const r = w((l) => l.showLibrary), d = w((l) => l.toggleLibrary), n = w((l) => l.savedWorkflows), t = w((l) => l.activeWorkflowId), a = w((l) => l.loadWorkflow), o = w((l) => l.deleteWorkflow), m = w((l) => l.renameWorkflow), c = w((l) => l.duplicateWorkflow), s = w((l) => l.newWorkflow);
   if (!r) return null;
-  const m = [...n].sort((l, g) => g.updatedAt - l.updatedAt);
+  const p = [...n].sort((l, g) => g.updatedAt - l.updatedAt);
   return /* @__PURE__ */ i(O, { children: [
     /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: d }),
     /* @__PURE__ */ i("div", { className: "fixed left-0 top-0 bottom-0 w-80 bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700 z-50 flex flex-col shadow-xl", children: [
@@ -5971,7 +5965,7 @@ function sr() {
           ]
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: m.length === 0 ? /* @__PURE__ */ i("div", { className: "text-center py-8", children: [
+      /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: p.length === 0 ? /* @__PURE__ */ i("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",
           {
@@ -5992,7 +5986,7 @@ function sr() {
         ) }),
         /* @__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: m.map((l) => /* @__PURE__ */ e(
+      ] }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: p.map((l) => /* @__PURE__ */ e(
         ir,
         {
           workflow: l,
@@ -6001,7 +5995,7 @@ function sr() {
             a(l.id), d();
           },
           onDelete: () => o(l.id),
-          onRename: (g) => p(l.id, g),
+          onRename: (g) => m(l.id, g),
           onDuplicate: () => c(l.id)
         },
         l.id
@@ -6068,9 +6062,9 @@ const dr = [
   }
 ];
 function cr({ provider: r }) {
-  const d = G((b) => b.ai), n = G((b) => b.setAIProvider), t = d[r.id], a = (t == null ? void 0 : t.enabled) ?? !1, o = (t == null ? void 0 : t.apiKey) ?? "", [p, c] = I(o), [s, m] = I(!1), l = () => {
+  const d = G((b) => b.ai), n = G((b) => b.setAIProvider), t = d[r.id], a = (t == null ? void 0 : t.enabled) ?? !1, o = (t == null ? void 0 : t.apiKey) ?? "", [m, c] = I(o), [s, p] = I(!1), l = () => {
     n(r.id, {
-      apiKey: p,
+      apiKey: m,
       enabled: !a
     });
   }, g = (b) => {
@@ -6100,7 +6094,7 @@ function cr({ provider: r }) {
           "input",
           {
             type: s ? "text" : "password",
-            value: p,
+            value: m,
             onChange: (b) => g(b.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"
@@ -6110,7 +6104,7 @@ function cr({ provider: r }) {
           "button",
           {
             type: "button",
-            onClick: () => m(!s),
+            onClick: () => p(!s),
             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: s ? /* @__PURE__ */ e(
               "path",
@@ -6148,13 +6142,13 @@ function cr({ provider: r }) {
     ) })
   ] });
 }
-function pr({ provider: r }) {
-  const d = G((l) => l.ai), n = G((l) => l.setAIProvider), t = d[r.id], a = (t == null ? void 0 : t.enabled) ?? !1, o = (t == null ? void 0 : t.baseUrl) ?? r.defaultUrl, [p, c] = I(o), s = () => {
+function mr({ provider: r }) {
+  const d = G((l) => l.ai), n = G((l) => l.setAIProvider), t = d[r.id], a = (t == null ? void 0 : t.enabled) ?? !1, o = (t == null ? void 0 : t.baseUrl) ?? r.defaultUrl, [m, c] = I(o), s = () => {
     n(r.id, {
-      baseUrl: p,
+      baseUrl: m,
       enabled: !a
     });
-  }, m = (l) => {
+  }, p = (l) => {
     c(l), n(r.id, {
       baseUrl: l,
       enabled: a
@@ -6181,8 +6175,8 @@ function pr({ provider: r }) {
         "input",
         {
           type: "text",
-          value: p,
-          onChange: (l) => m(l.target.value),
+          value: m,
+          onChange: (l) => p(l.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"
         }
@@ -6203,7 +6197,7 @@ function pr({ provider: r }) {
     ) })
   ] });
 }
-function mr() {
+function pr() {
   const r = G((n) => n.showSettings), d = G((n) => n.closeSettings);
   return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ i("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-xl w-full mx-4 max-h-[85vh] flex flex-col", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
@@ -6235,7 +6229,7 @@ function mr() {
       ] }),
       /* @__PURE__ */ i("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: lr.map((n) => /* @__PURE__ */ e(pr, { provider: n }, n.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: lr.map((n) => /* @__PURE__ */ e(mr, { provider: n }, n.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__ */ i("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
@@ -6274,7 +6268,7 @@ function mr() {
 }
 let V = null;
 function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
-  const [t, a] = I([]), [o, p] = I(""), [c, s] = I(!1), [m, l] = I(null), [g, b] = I(""), [f, h] = I(null), [y, v] = I(null), [C, u] = I(""), [x, N] = I(), [w, W] = I(!1), [A, U] = I(), K = se(null), F = se(null);
+  const [t, a] = I([]), [o, m] = I(""), [c, s] = I(!1), [p, l] = I(null), [g, b] = I(""), [f, h] = I(null), [y, v] = I(null), [C, u] = I(""), [x, N] = I(), [k, W] = I(!1), [A, U] = I(), K = se(null), F = se(null);
   B(() => {
     r && y === null && Xe().then((S) => {
       v(S.available), u(S.message), N(S.reason), W(S.isCloudDeployment ?? !1), U(S.supportUrl);
@@ -6294,7 +6288,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
       content: o.trim(),
       timestamp: Date.now()
     };
-    a((P) => [...P, S]), p(""), s(!0), h(null), l(null), b("");
+    a((P) => [...P, S]), m(""), s(!0), h(null), l(null), b("");
     let D;
     V = ve(
       "/api/generate/workflow/stream",
@@ -6446,7 +6440,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
                 children: "Contact Support"
               }
             ),
-            x === "not_configured" && !w && /* @__PURE__ */ e(
+            x === "not_configured" && !k && /* @__PURE__ */ e(
               "a",
               {
                 href: "https://floimg.com/docs/studio/ai-workflows",
@@ -6489,7 +6483,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
         ].map((S, D) => /* @__PURE__ */ i(
           "button",
           {
-            onClick: () => p(S),
+            onClick: () => m(S),
             className: "block w-full text-left text-sm px-4 py-2 bg-gray-100 dark:bg-zinc-700 hover:bg-gray-200 dark:hover:bg-zinc-600 rounded-lg text-gray-700 dark:text-zinc-300 transition-colors",
             children: [
               '"',
@@ -6554,7 +6548,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
       c && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ i("div", { className: "bg-gray-100 dark:bg-zinc-700 rounded-lg px-4 py-3", children: [
         /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            m === "analyzing" && /* @__PURE__ */ e(
+            p === "analyzing" && /* @__PURE__ */ e(
               "svg",
               {
                 className: "h-4 w-4 text-teal-500 animate-pulse",
@@ -6572,7 +6566,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
                 )
               }
             ),
-            m === "selecting_nodes" && /* @__PURE__ */ e(
+            p === "selecting_nodes" && /* @__PURE__ */ e(
               "svg",
               {
                 className: "h-4 w-4 text-teal-500 animate-pulse",
@@ -6590,7 +6584,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
                 )
               }
             ),
-            m === "generating" && /* @__PURE__ */ e(
+            p === "generating" && /* @__PURE__ */ e(
               "svg",
               {
                 className: "h-4 w-4 text-teal-500 animate-spin",
@@ -6608,7 +6602,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
                 )
               }
             ),
-            m === "validating" && /* @__PURE__ */ e(
+            p === "validating" && /* @__PURE__ */ e(
               "svg",
               {
                 className: "h-4 w-4 text-teal-500 animate-pulse",
@@ -6626,7 +6620,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
                 )
               }
             ),
-            !m && /* @__PURE__ */ i("div", { className: "flex space-x-1", children: [
+            !p && /* @__PURE__ */ i("div", { className: "flex space-x-1", children: [
               /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-teal-400 rounded-full animate-bounce" }),
               /* @__PURE__ */ e(
                 "div",
@@ -6655,29 +6649,29 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
             }
           )
         ] }),
-        m && /* @__PURE__ */ i("div", { className: "flex items-center gap-1 mt-2", children: [
+        p && /* @__PURE__ */ i("div", { className: "flex items-center gap-1 mt-2", children: [
           /* @__PURE__ */ e(
             "div",
             {
-              className: `h-1 w-8 rounded-full ${m === "analyzing" || m === "selecting_nodes" || m === "generating" || m === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
+              className: `h-1 w-8 rounded-full ${p === "analyzing" || p === "selecting_nodes" || p === "generating" || p === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
             }
           ),
           /* @__PURE__ */ e(
             "div",
             {
-              className: `h-1 w-8 rounded-full ${m === "selecting_nodes" || m === "generating" || m === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
+              className: `h-1 w-8 rounded-full ${p === "selecting_nodes" || p === "generating" || p === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
             }
           ),
           /* @__PURE__ */ e(
             "div",
             {
-              className: `h-1 w-8 rounded-full ${m === "generating" || m === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
+              className: `h-1 w-8 rounded-full ${p === "generating" || p === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
             }
           ),
           /* @__PURE__ */ e(
             "div",
             {
-              className: `h-1 w-8 rounded-full ${m === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
+              className: `h-1 w-8 rounded-full ${p === "validating" ? "bg-teal-500" : "bg-gray-300 dark:bg-zinc-600"}`
             }
           )
         ] })
@@ -6692,7 +6686,7 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
           {
             ref: F,
             value: o,
-            onChange: (S) => p(S.target.value),
+            onChange: (S) => m(S.target.value),
             onKeyDown: oe,
             placeholder: y === !1 ? "AI generation not available" : "Describe what workflow you want to create...",
             disabled: c || y === !1,
@@ -6724,14 +6718,14 @@ function gr({ isOpen: r, onClose: d, onApplyWorkflow: n }) {
 }
 const ur = 20, hr = 500, fr = 1e5;
 function br({ isOpen: r, onClose: d, nodeLabel: n, output: t }) {
-  const [a, o] = I("formatted"), [p, c] = I(!1), s = L(() => {
+  const [a, o] = I("formatted"), [m, c] = I(!1), s = L(() => {
     const l = a === "formatted" && t.parsed ? JSON.stringify(t.parsed, null, 2) : t.content;
     navigator.clipboard.writeText(l).then(() => {
       c(!0), setTimeout(() => c(!1), 2e3);
     });
   }, [a, t]);
   if (!r) return null;
-  const m = t.dataType === "json" && t.parsed;
+  const p = t.dataType === "json" && t.parsed;
   return /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ i("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-3xl mx-4 max-h-[85vh] flex flex-col", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
       /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
@@ -6762,7 +6756,7 @@ function br({ isOpen: r, onClose: d, nodeLabel: n, output: t }) {
         ] })
       ] }),
       /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-        m && /* @__PURE__ */ i("div", { className: "flex bg-gray-100 dark:bg-zinc-700 rounded-lg p-0.5", children: [
+        p && /* @__PURE__ */ i("div", { className: "flex bg-gray-100 dark:bg-zinc-700 rounded-lg p-0.5", children: [
           /* @__PURE__ */ e(
             "button",
             {
@@ -6823,7 +6817,7 @@ function br({ isOpen: r, onClose: d, nodeLabel: n, output: t }) {
         "KB) - rendering may be slow"
       ] })
     ] }),
-    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto p-4", children: a === "formatted" && m ? /* @__PURE__ */ e(xr, { data: t.parsed }) : /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-zinc-200 bg-gray-50 dark:bg-zinc-900 rounded-lg p-4 overflow-auto", children: t.content }) }),
+    /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto p-4", children: a === "formatted" && p ? /* @__PURE__ */ e(xr, { data: t.parsed }) : /* @__PURE__ */ e("pre", { className: "whitespace-pre-wrap font-mono text-sm text-gray-800 dark:text-zinc-200 bg-gray-50 dark:bg-zinc-900 rounded-lg p-4 overflow-auto", children: t.content }) }),
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
       /* @__PURE__ */ i("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: [
         t.content.length.toLocaleString(),
@@ -6834,7 +6828,7 @@ function br({ isOpen: r, onClose: d, nodeLabel: n, output: t }) {
         {
           onClick: s,
           className: "flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-teal-600 dark:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 rounded-lg transition-colors",
-          children: p ? /* @__PURE__ */ i(O, { children: [
+          children: m ? /* @__PURE__ */ i(O, { children: [
             /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
               {
@@ -6924,7 +6918,7 @@ function ce({ value: r, depth: d, keyName: n, maxDepth: t }) {
     ] });
   }
   if (Array.isArray(r)) {
-    const o = r.slice(0, hr), p = r.length - o.length;
+    const o = r.slice(0, hr), m = r.length - o.length;
     return /* @__PURE__ */ i("div", { style: { marginLeft: a }, children: [
       n && /* @__PURE__ */ i("div", { className: "py-0.5", children: [
         /* @__PURE__ */ i("span", { className: "text-pink-600 dark:text-pink-400", children: [
@@ -6941,9 +6935,9 @@ function ce({ value: r, depth: d, keyName: n, maxDepth: t }) {
       ] }),
       !n && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-zinc-500 py-0.5 block", children: "[" }),
       o.map((c, s) => /* @__PURE__ */ e(ce, { value: c, depth: d + 1, maxDepth: t }, s)),
-      p > 0 && /* @__PURE__ */ i("div", { style: { marginLeft: (d + 1) * 16 }, className: "py-0.5 text-zinc-500 italic", children: [
+      m > 0 && /* @__PURE__ */ i("div", { style: { marginLeft: (d + 1) * 16 }, className: "py-0.5 text-zinc-500 italic", children: [
         "...and ",
-        p,
+        m,
         " more items"
       ] }),
       !n && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-zinc-500 py-0.5 block", children: "]" })
@@ -6962,26 +6956,26 @@ function ce({ value: r, depth: d, keyName: n, maxDepth: t }) {
         /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-zinc-500", children: "{" })
       ] }),
       !n && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-zinc-500 py-0.5 block", children: "{" }),
-      o.map(([p, c]) => /* @__PURE__ */ e(ce, { value: c, depth: d + 1, keyName: p, maxDepth: t }, p)),
+      o.map(([m, c]) => /* @__PURE__ */ e(ce, { value: c, depth: d + 1, keyName: m, maxDepth: t }, m)),
       /* @__PURE__ */ e("div", { style: { marginLeft: n ? 0 : a }, className: "py-0.5", children: /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-zinc-500", children: "}" }) })
     ] });
   }
   return null;
 }
 function yr() {
-  const { screenToFlowPosition: r } = Ue(), d = k((a) => a.addNode), n = L(
+  const { screenToFlowPosition: r } = Ue(), d = w((a) => a.addNode), n = L(
     (a) => {
       a.preventDefault();
       const o = a.dataTransfer.getData("application/json");
       if (o)
         try {
-          const p = JSON.parse(o), c = r({
+          const m = JSON.parse(o), c = r({
             x: a.clientX,
             y: a.clientY
           });
-          d(p, c);
-        } catch (p) {
-          console.error("Failed to parse dropped node:", p);
+          d(m, c);
+        } catch (m) {
+          console.error("Failed to parse dropped node:", m);
         }
     },
     [d, r]
@@ -6991,7 +6985,7 @@ function yr() {
   return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: n, onDragOver: t, children: /* @__PURE__ */ e(ct, {}) });
 }
 function Ar() {
-  const [r, d] = I("editor"), [n, t] = I(!1), a = k((h) => h.loadTemplate), o = k((h) => h.loadGeneratedWorkflow), p = k((h) => h.inspectedNodeId), c = k((h) => h.execution.dataOutputs), s = k((h) => h.closeOutputInspector), m = k((h) => h.nodes), l = p ? m.find((h) => h.id === p) : null, g = p ? c[p] : null;
+  const [r, d] = I("editor"), [n, t] = I(!1), a = w((h) => h.loadTemplate), o = w((h) => h.loadGeneratedWorkflow), m = w((h) => h.inspectedNodeId), c = w((h) => h.execution.dataOutputs), s = w((h) => h.closeOutputInspector), p = w((h) => h.nodes), l = m ? p.find((h) => h.id === m) : null, g = m ? c[m] : null;
   B(() => {
     const y = new URLSearchParams(window.location.search).get("template");
     if (y) {
@@ -7019,7 +7013,7 @@ function Ar() {
     [o]
   );
   return /* @__PURE__ */ i(Be, { children: [
-    /* @__PURE__ */ e(mr, {}),
+    /* @__PURE__ */ e(pr, {}),
     /* @__PURE__ */ e(
       gr,
       {
@@ -7033,14 +7027,14 @@ function Ar() {
       {
         isOpen: !0,
         onClose: s,
-        nodeId: p,
+        nodeId: m,
         nodeLabel: l.data.providerLabel || l.type || "Node",
         output: g
       }
     ),
     /* @__PURE__ */ e(sr, {}),
     /* @__PURE__ */ i("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ e(kt, {}),
+      /* @__PURE__ */ e(wt, {}),
       /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ i("div", { className: "flex", children: [
           /* @__PURE__ */ e(
@@ -7090,7 +7084,7 @@ function Ar() {
       ] }) }),
       /* @__PURE__ */ i("div", { className: "flex-1 flex overflow-hidden", children: [
         r === "editor" && /* @__PURE__ */ i(O, { children: [
-          /* @__PURE__ */ e(mt, {}),
+          /* @__PURE__ */ e(pt, {}),
           /* @__PURE__ */ e(yr, {}),
           /* @__PURE__ */ e(gt, {})
         ] }),
@@ -7102,14 +7096,14 @@ function Ar() {
 }
 export {
   gr as AIChat,
-  mr as AISettings,
+  pr as AISettings,
   Ar as App,
   vt as Gallery,
   gt as NodeInspector,
-  mt as NodePalette,
+  pt as NodePalette,
   or as TemplateGallery,
-  kt as Toolbar,
-  pt as UploadGallery,
+  wt as Toolbar,
+  mt as UploadGallery,
   ct as WorkflowEditor,
   sr as WorkflowLibrary,
   ar as getCategories,
@@ -7118,6 +7112,6 @@ export {
   xe as resolveTemplate,
   Sr as searchTemplates,
   Z as templates,
-  k as useWorkflowStore
+  w as useWorkflowStore
 };
 //# sourceMappingURL=index.js.map