@teamflojo/floimg-studio-ui 0.9.0 → 0.9.2

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs as d, jsx as e, Fragment as J } from "react/jsx-runtime";
-import { memo as oe, useRef as te, useCallback as M, useState as W, useEffect as H, useMemo as G, useContext as Be, useLayoutEffect as st, createContext as He, useDeferredValue as lt, useId as we } from "react";
-import dt, { Handle as D, Position as P, applyNodeChanges as ct, applyEdgeChanges as mt, MarkerType as ut, Background as pt, BackgroundVariant as ht, Controls as ft, MiniMap as gt, useReactFlow as Ue, ReactFlowProvider as xt } from "reactflow";
+import { memo as oe, useRef as te, useCallback as M, useState as T, useEffect as H, useMemo as G, useContext as Be, useLayoutEffect as st, createContext as He, useDeferredValue as lt, useId as we } from "react";
+import dt, { Handle as P, Position as O, applyNodeChanges as ct, applyEdgeChanges as mt, MarkerType as ut, Background as pt, BackgroundVariant as ht, Controls as ft, MiniMap as gt, useReactFlow as Ue, ReactFlowProvider as xt } from "reactflow";
 import { create as Ve } from "zustand";
 import { useQuery as be } from "@tanstack/react-query";
 function bt(t, o) {
@@ -46,8 +46,8 @@ const Ie = (t) => (o) => {
     storage: bt(() => localStorage),
     partialize: (b) => b,
     version: 0,
-    merge: (b, k) => ({
-      ...k,
+    merge: (b, y) => ({
+      ...y,
       ...b
     }),
     ...o
@@ -71,7 +71,7 @@ const Ie = (t) => (o) => {
       version: i.version
     });
   }, l = a.setState;
-  a.setState = (b, k) => (l(b, k), c());
+  a.setState = (b, y) => (l(b, y), c());
   const f = t(
     (...b) => (n(...b), c()),
     r,
@@ -79,23 +79,23 @@ const Ie = (t) => (o) => {
   );
   a.getInitialState = () => f;
   let g;
-  const w = () => {
-    var b, k;
+  const v = () => {
+    var b, y;
     if (!p) return;
     m = !1, u.forEach((h) => {
-      var v;
-      return h((v = r()) != null ? v : f);
+      var w;
+      return h((w = r()) != null ? w : f);
     });
-    const C = ((k = i.onRehydrateStorage) == null ? void 0 : k.call(i, (b = r()) != null ? b : f)) || void 0;
+    const C = ((y = i.onRehydrateStorage) == null ? void 0 : y.call(i, (b = r()) != null ? b : f)) || void 0;
     return Ie(p.getItem.bind(p))(i.name).then((h) => {
       if (h)
         if (typeof h.version == "number" && h.version !== i.version) {
           if (i.migrate) {
-            const v = i.migrate(
+            const w = i.migrate(
               h.state,
               h.version
             );
-            return v instanceof Promise ? v.then((y) => [!0, y]) : [!0, v];
+            return w instanceof Promise ? w.then((k) => [!0, k]) : [!0, w];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
@@ -104,12 +104,12 @@ const Ie = (t) => (o) => {
           return [!1, h.state];
       return [!1, void 0];
     }).then((h) => {
-      var v;
-      const [y, T] = h;
+      var w;
+      const [k, L] = h;
       if (g = i.merge(
-        T,
-        (v = r()) != null ? v : f
-      ), n(g, !0), y)
+        L,
+        (w = r()) != null ? w : f
+      ), n(g, !0), k)
         return c();
     }).then(() => {
       C == null || C(g, void 0), g = r(), m = !0, s.forEach((h) => h(g));
@@ -128,7 +128,7 @@ const Ie = (t) => (o) => {
       p == null || p.removeItem(i.name);
     },
     getOptions: () => i,
-    rehydrate: () => w(),
+    rehydrate: () => v(),
     hasHydrated: () => m,
     onHydrate: (b) => (u.add(b), () => {
       u.delete(b);
@@ -136,7 +136,7 @@ const Ie = (t) => (o) => {
     onFinishHydration: (b) => (s.add(b), () => {
       s.delete(b);
     })
-  }, i.skipHydration || w(), g || f;
+  }, i.skipHydration || v(), g || f;
 }, Fe = vt;
 function wt(t, o) {
   var r;
@@ -178,15 +178,15 @@ function kt(t, o) {
     const p = i[s], c = p.id;
     if (m.set(p.id, c), p.type !== "input") {
       if (p.type === "generator") {
-        const l = p.data, f = { ...l.params }, g = o.find((v) => v.target === p.id && v.targetHandle === "text"), w = g ? m.get(g.source) : void 0, b = g == null ? void 0 : g.sourceHandle, k = b == null ? void 0 : b.match(/^out\[(\d+)\]$/);
-        if (k && g && n.has(g.source) && g) {
-          const v = parseInt(k[1], 10), y = m.get(g.source);
-          f._promptFromVar = `${y}_${v}`;
-        } else w && (f._promptFromVar = w, b != null && b.startsWith("output.") && (f._promptFromProperty = b.slice(7)));
-        const h = o.filter((v) => v.target === p.id && v.targetHandle === "references");
+        const l = p.data, f = { ...l.params }, g = o.find((w) => w.target === p.id && w.targetHandle === "text"), v = g ? m.get(g.source) : void 0, b = g == null ? void 0 : g.sourceHandle, y = b == null ? void 0 : b.match(/^out\[(\d+)\]$/);
+        if (y && g && n.has(g.source) && g) {
+          const w = parseInt(y[1], 10), k = m.get(g.source);
+          f._promptFromVar = `${k}_${w}`;
+        } else v && (f._promptFromVar = v, b != null && b.startsWith("output.") && (f._promptFromProperty = b.slice(7)));
+        const h = o.filter((w) => w.target === p.id && w.targetHandle === "references");
         if (h.length > 0) {
-          const v = h.map((y) => m.get(y.source)).filter((y) => y !== void 0);
-          v.length > 0 && (f._referenceImageVars = v);
+          const w = h.map((k) => m.get(k.source)).filter((k) => k !== void 0);
+          w.length > 0 && (f._referenceImageVars = w);
         }
         u.push({
           kind: "generate",
@@ -195,26 +195,44 @@ function kt(t, o) {
           out: c
         });
       } else if (p.type === "transform") {
-        const l = p.data, f = o.find((v) => v.target === p.id && (v.targetHandle === "image" || !v.targetHandle)), g = f ? m.get(f.source) : void 0;
-        if (!g)
+        const l = p.data, f = l.operation === "composite", g = o.find((k) => k.target !== p.id ? !1 : f ? k.targetHandle === "base" || k.targetHandle === "image" || !k.targetHandle : k.targetHandle === "image" || !k.targetHandle), v = g ? m.get(g.source) : void 0;
+        if (!v)
           throw new Error("Transform node requires an input image connection");
-        const w = o.find((v) => v.target === p.id && v.targetHandle === "text"), b = w ? m.get(w.source) : void 0, k = w == null ? void 0 : w.sourceHandle, C = { ...l.params };
-        b && (C._promptFromVar = b, k != null && k.startsWith("output.") && (C._promptFromProperty = k.slice(7)));
-        const h = o.filter((v) => v.target === p.id && v.targetHandle === "references");
-        if (h.length > 0) {
-          const v = h.map((y) => m.get(y.source)).filter((y) => y !== void 0);
-          v.length > 0 && (C._referenceImageVars = v);
+        const b = o.find((k) => k.target === p.id && k.targetHandle === "text"), y = b ? m.get(b.source) : void 0, C = b == null ? void 0 : b.sourceHandle, h = { ...l.params };
+        y && (h._promptFromVar = y, C != null && C.startsWith("output.") && (h._promptFromProperty = C.slice(7)));
+        const w = o.filter((k) => k.target === p.id && k.targetHandle === "references");
+        if (w.length > 0) {
+          const k = w.map((L) => m.get(L.source)).filter((L) => L !== void 0);
+          k.length > 0 && (h._referenceImageVars = k);
+        }
+        if (f) {
+          const k = o.filter((L) => {
+            var _;
+            return L.target === p.id && ((_ = L.targetHandle) == null ? void 0 : _.startsWith("overlays["));
+          }).sort((L, _) => {
+            var S, I, D, B;
+            const W = parseInt(((I = (S = L.targetHandle) == null ? void 0 : S.match(/\[(\d+)\]/)) == null ? void 0 : I[1]) || "0", 10), x = parseInt(((B = (D = _.targetHandle) == null ? void 0 : D.match(/\[(\d+)\]/)) == null ? void 0 : B[1]) || "0", 10);
+            return W - x;
+          });
+          if (k.length > 0) {
+            const L = k.map((_) => {
+              var S, I;
+              const W = m.get(_.source), x = parseInt(((I = (S = _.targetHandle) == null ? void 0 : S.match(/\[(\d+)\]/)) == null ? void 0 : I[1]) || "0", 10);
+              return W ? { varName: W, index: x } : null;
+            }).filter((_) => _ !== null);
+            L.length > 0 && (h._overlayImageVars = L);
+          }
         }
         u.push({
           kind: "transform",
           op: l.operation,
-          in: g,
-          params: C,
+          in: v,
+          params: h,
           out: c,
           ...l.providerName && { provider: l.providerName }
         });
       } else if (p.type === "save") {
-        const l = p.data, f = o.find((w) => w.target === p.id), g = f ? m.get(f.source) : void 0;
+        const l = p.data, f = o.find((v) => v.target === p.id), g = f ? m.get(f.source) : void 0;
         if (!g)
           throw new Error("Save node requires an input connection");
         u.push({
@@ -227,16 +245,16 @@ function kt(t, o) {
         const l = p.data, f = o.find((C) => C.target === p.id && (C.targetHandle === "image" || !C.targetHandle)), g = f ? m.get(f.source) : void 0;
         if (!g)
           throw new Error("Vision node requires an input image connection");
-        const w = o.find((C) => C.target === p.id && C.targetHandle === "context"), b = w ? m.get(w.source) : void 0, k = { ...l.params };
-        b && (k._contextFromVar = b), u.push({
+        const v = o.find((C) => C.target === p.id && C.targetHandle === "context"), b = v ? m.get(v.source) : void 0, y = { ...l.params };
+        b && (y._contextFromVar = b), u.push({
           kind: "vision",
           provider: l.providerName,
           in: g,
-          params: k,
+          params: y,
           out: c
         });
       } else if (p.type === "text") {
-        const l = p.data, f = o.find((w) => w.target === p.id), g = f ? m.get(f.source) : void 0;
+        const l = p.data, f = o.find((v) => v.target === p.id), g = f ? m.get(f.source) : void 0;
         u.push({
           kind: "text",
           provider: l.providerName,
@@ -245,31 +263,31 @@ function kt(t, o) {
           out: c
         });
       } else if (p.type === "fanout") {
-        const l = p.data, f = o.find((k) => k.target === p.id), g = f ? m.get(f.source) : void 0, w = l.count || 3, b = Array.from({ length: w }, (k, C) => `${c}_${C}`);
+        const l = p.data, f = o.find((y) => y.target === p.id), g = f ? m.get(f.source) : void 0, v = l.count || 3, b = Array.from({ length: v }, (y, C) => `${c}_${C}`);
         u.push({
           kind: "fan-out",
           in: g || "",
           mode: l.mode || "count",
-          count: w,
+          count: v,
           arrayProperty: l.arrayProperty,
           out: b
         });
       } else if (p.type === "collect") {
-        const l = p.data, g = o.filter((b) => b.target === p.id).map((b) => m.get(b.source)).filter((b) => b !== void 0), w = l.waitMode || "all";
+        const l = p.data, g = o.filter((b) => b.target === p.id).map((b) => m.get(b.source)).filter((b) => b !== void 0), v = l.waitMode || "all";
         u.push({
           kind: "collect",
           in: g,
-          waitMode: w,
-          ...w === "available" && { minRequired: Math.max(1, l.expectedInputs || 1) },
+          waitMode: v,
+          ...v === "available" && { minRequired: Math.max(1, l.expectedInputs || 1) },
           out: c
         });
       } else if (p.type === "router") {
-        const l = p.data, f = o.find((C) => C.target === p.id && C.targetHandle === "candidates"), g = o.find((C) => C.target === p.id && C.targetHandle === "selection"), w = f ? m.get(f.source) : void 0, b = g ? m.get(g.source) : void 0, k = l.selectionType === "value" ? "property" : l.selectionType || "index";
+        const l = p.data, f = o.find((C) => C.target === p.id && C.targetHandle === "candidates"), g = o.find((C) => C.target === p.id && C.targetHandle === "selection"), v = f ? m.get(f.source) : void 0, b = g ? m.get(g.source) : void 0, y = l.selectionType === "value" ? "property" : l.selectionType || "index";
         u.push({
           kind: "router",
-          in: w || "",
+          in: v || "",
           selectionIn: b || "",
-          selectionType: k,
+          selectionType: y,
           selectionProperty: l.selectionProperty || "winner",
           out: c
         });
@@ -343,13 +361,13 @@ async function _t(t) {
 function Ke(t) {
   return `${Y}/uploads/${t}/blob`;
 }
-async function Mt(t) {
+async function Wt(t) {
   return ae(`${Y}/import`, {
     method: "POST",
     body: JSON.stringify({ yaml: t })
   });
 }
-async function Wt(t) {
+async function Mt(t) {
   return ae(`${Y}/import/validate`, {
     method: "POST",
     body: JSON.stringify({ yaml: t })
@@ -1201,8 +1219,8 @@ const N = Ve()(
           })), { pipeline: u, nodeToVar: s } = kt(i, m), p = {};
           for (const f of i)
             if (f.type === "input") {
-              const g = f.data, w = s.get(f.id);
-              g.uploadId && w && (p[w] = g.uploadId);
+              const g = f.data, v = s.get(f.id);
+              g.uploadId && v && (p[v] = g.uploadId);
             }
           const c = A.getState().getConfiguredProviders(), l = {};
           for (const f of r)
@@ -1234,58 +1252,58 @@ const N = Ve()(
                 aiProviders: c
               },
               {
-                onMessage: (w) => {
+                onMessage: (v) => {
                   const b = o();
-                  if (w.type, w.type === "execution.step") {
-                    const k = w.data, C = {
+                  if (v.type, v.type === "execution.step") {
+                    const y = v.data, C = {
                       ...b.execution.nodeStatus,
-                      [k.id]: k.status
-                    }, h = b.execution.nodeTiming[k.id] || {};
-                    let v = { ...b.execution.nodeTiming };
-                    if (k.status === "running")
-                      v[k.id] = { startTime: Date.now() };
-                    else if (k.status === "completed" || k.status === "error") {
+                      [y.id]: y.status
+                    }, h = b.execution.nodeTiming[y.id] || {};
+                    let w = { ...b.execution.nodeTiming };
+                    if (y.status === "running")
+                      w[y.id] = { startTime: Date.now() };
+                    else if (y.status === "completed" || y.status === "error") {
                       const _ = h.startTime || Date.now();
-                      v[k.id] = {
+                      w[y.id] = {
                         ...h,
                         duration: Date.now() - _
                       };
                     }
-                    const y = k.preview ? { ...b.execution.previews, [k.id]: k.preview } : b.execution.previews, T = k.dataType && k.content ? {
+                    const k = y.preview ? { ...b.execution.previews, [y.id]: y.preview } : b.execution.previews, L = y.dataType && y.content ? {
                       ...b.execution.dataOutputs,
-                      [k.id]: {
-                        dataType: k.dataType,
-                        content: k.content,
-                        parsed: k.parsed
+                      [y.id]: {
+                        dataType: y.dataType,
+                        content: y.content,
+                        parsed: y.parsed
                       }
                     } : b.execution.dataOutputs;
                     t({
                       execution: {
                         ...b.execution,
                         nodeStatus: C,
-                        nodeTiming: v,
-                        previews: y,
-                        dataOutputs: T
+                        nodeTiming: w,
+                        previews: k,
+                        dataOutputs: L
                       }
                     });
                   }
-                  if (w.type === "execution.completed") {
-                    const k = { ...b.execution.nodeStatus };
-                    for (const y of Object.keys(k))
-                      (k[y] === "pending" || k[y] === "running") && (k[y] = "completed");
+                  if (v.type === "execution.completed") {
+                    const y = { ...b.execution.nodeStatus };
+                    for (const k of Object.keys(y))
+                      (y[k] === "pending" || y[k] === "running") && (y[k] = "completed");
                     const C = ce ? Date.now() - ce : 0;
                     ce = null;
                     const h = Object.entries(
                       b.execution.previews
-                    ).map(([y, T]) => {
-                      const _ = b.nodes.find((S) => S.id === y), L = _ == null ? void 0 : _.data;
+                    ).map(([k, L]) => {
+                      const _ = b.nodes.find((S) => S.id === k), W = _ == null ? void 0 : _.data;
                       let x = "Unknown Node";
-                      return L && "generatorName" in L ? x = L.generatorName : L && "operation" in L ? x = L.operation : _ != null && _.type && (x = _.type.charAt(0).toUpperCase() + _.type.slice(1)), {
-                        nodeId: y,
+                      return W && "generatorName" in W ? x = W.generatorName : W && "operation" in W ? x = W.operation : _ != null && _.type && (x = _.type.charAt(0).toUpperCase() + _.type.slice(1)), {
+                        nodeId: k,
                         nodeName: x,
-                        preview: T
+                        preview: L
                       };
-                    }), v = {
+                    }), w = {
                       id: `run_${Date.now()}_${Math.random().toString(36).substring(2, 8)}`,
                       timestamp: Date.now(),
                       status: "completed",
@@ -1293,71 +1311,71 @@ const N = Ve()(
                       nodeCount: b.nodes.length,
                       outputs: h
                     };
-                    o().addExecutionRun(v), t({
+                    o().addExecutionRun(w), t({
                       execution: {
                         ...b.execution,
                         status: "completed",
-                        imageIds: w.data.imageIds,
-                        imageUrls: w.data.imageUrls,
-                        nodeStatus: k
+                        imageIds: v.data.imageIds,
+                        imageUrls: v.data.imageUrls,
+                        nodeStatus: y
                       }
                     }), f();
                   }
-                  if (w.type === "execution.error") {
-                    const k = { ...b.execution.nodeStatus };
-                    w.data.id && (k[w.data.id] = "error");
+                  if (v.type === "execution.error") {
+                    const y = { ...b.execution.nodeStatus };
+                    v.data.id && (y[v.data.id] = "error");
                     const C = ce ? Date.now() - ce : 0;
                     ce = null;
                     const h = Object.entries(
                       b.execution.previews
-                    ).map(([y, T]) => {
-                      const _ = b.nodes.find((S) => S.id === y), L = _ == null ? void 0 : _.data;
+                    ).map(([k, L]) => {
+                      const _ = b.nodes.find((S) => S.id === k), W = _ == null ? void 0 : _.data;
                       let x = "Unknown Node";
-                      return L && "generatorName" in L ? x = L.generatorName : L && "operation" in L ? x = L.operation : _ != null && _.type && (x = _.type.charAt(0).toUpperCase() + _.type.slice(1)), { nodeId: y, nodeName: x, preview: T };
-                    }), v = {
+                      return W && "generatorName" in W ? x = W.generatorName : W && "operation" in W ? x = W.operation : _ != null && _.type && (x = _.type.charAt(0).toUpperCase() + _.type.slice(1)), { nodeId: k, nodeName: x, preview: L };
+                    }), w = {
                       id: `run_${Date.now()}_${Math.random().toString(36).substring(2, 8)}`,
                       timestamp: Date.now(),
                       status: "error",
                       duration: C,
                       nodeCount: b.nodes.length,
                       outputs: h,
-                      error: w.data.error,
-                      errorNodeId: w.data.id
+                      error: v.data.error,
+                      errorNodeId: v.data.id
                     };
-                    o().addExecutionRun(v), t({
+                    o().addExecutionRun(w), t({
                       execution: {
                         ...b.execution,
                         status: "error",
-                        nodeStatus: k,
-                        error: w.data.error,
-                        errorNodeId: w.data.id,
+                        nodeStatus: y,
+                        error: v.data.error,
+                        errorNodeId: v.data.id,
                         // Structured error metadata from backend
-                        errorCode: w.data.errorCode,
-                        errorCategory: w.data.errorCategory,
-                        retryable: w.data.retryable
+                        errorCode: v.data.errorCode,
+                        errorCategory: v.data.errorCategory,
+                        retryable: v.data.retryable
                       }
-                    }), g(new Error(w.data.error));
+                    }), g(new Error(v.data.error));
                   }
                 },
-                onError: (w) => {
-                  const b = o(), k = {};
+                onError: (v) => {
+                  const b = o(), y = {};
                   for (const C of Object.keys(b.execution.nodeStatus))
-                    k[C] = "error";
+                    y[C] = "error";
                   t({
                     execution: {
                       ...b.execution,
                       status: "error",
-                      nodeStatus: k,
-                      error: w.message
+                      nodeStatus: y,
+                      error: v.message
                     }
-                  }), g(w);
+                  }), g(v);
                 },
                 onClose: () => {
                   ge = null;
-                  const w = o();
-                  w.execution.status === "running" && (t({
+                  const v = o();
+                  v.execution.status === "running" && (t({
                     execution: {
-                      ...w.execution,
+                      ...v.execution,
                       status: "error",
                       error: "Connection closed unexpectedly"
                     }
@@ -1572,46 +1590,46 @@ const N = Ve()(
           return t({ savedWorkflows: [...a, s] }), u;
         },
         loadGeneratedWorkflow: (r) => {
-          var k, C;
+          var y, C;
           const a = /* @__PURE__ */ new Map(), i = 300, m = 180, u = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
           for (const h of r.nodes)
             u.set(h.id, []), s.set(h.id, []);
           for (const h of r.edges)
-            (k = u.get(h.target)) == null || k.push(h.source), (C = s.get(h.source)) == null || C.push(h.target);
+            (y = u.get(h.target)) == null || y.push(h.source), (C = s.get(h.source)) == null || C.push(h.target);
           const p = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Set();
           function l(h) {
             if (p.has(h)) return p.get(h);
             if (c.has(h)) return 0;
             c.add(h);
-            const v = u.get(h) || [];
-            if (v.length === 0)
+            const w = u.get(h) || [];
+            if (w.length === 0)
               return p.set(h, 0), 0;
-            const T = Math.max(...v.map(l)) + 1;
-            return p.set(h, T), T;
+            const L = Math.max(...w.map(l)) + 1;
+            return p.set(h, L), L;
           }
           for (const h of r.nodes)
             l(h.id);
           const f = /* @__PURE__ */ new Map();
           for (const h of r.nodes) {
-            const v = p.get(h.id) || 0;
-            f.has(v) || f.set(v, []), f.get(v).push(h.id);
+            const w = p.get(h.id) || 0;
+            f.has(w) || f.set(w, []), f.get(w).push(h.id);
           }
           const g = /* @__PURE__ */ new Map();
-          for (const [h, v] of f) {
-            const y = v.length * m, T = 100 + (y > m ? -y / 4 : 0);
-            v.forEach((_, L) => {
+          for (const [h, w] of f) {
+            const k = w.length * m, L = 100 + (k > m ? -k / 4 : 0);
+            w.forEach((_, W) => {
               g.set(_, {
                 x: 100 + h * i,
-                y: T + L * m
+                y: L + W * m
               });
             });
           }
-          const w = r.nodes.map((h) => {
-            const v = me();
-            a.set(h.id, v);
-            const y = h.nodeType.split(":"), T = g.get(h.id) || { x: 100, y: 100 };
-            if (y[0] === "flow") {
-              const x = y[1];
+          const v = r.nodes.map((h) => {
+            const w = me();
+            a.set(h.id, w);
+            const k = h.nodeType.split(":"), L = g.get(h.id) || { x: 100, y: 100 };
+            if (k[0] === "flow") {
+              const x = k[1];
               let S;
               return x === "fanout" ? S = {
                 mode: h.parameters.mode || "count",
@@ -1626,17 +1644,17 @@ const N = Ve()(
                 outputCount: 1,
                 contextProperty: h.parameters.contextProperty
               }, {
-                id: v,
+                id: w,
                 type: x,
-                position: T,
+                position: L,
                 data: S
               };
             }
-            const _ = y[0];
-            let L;
+            const _ = k[0];
+            let W;
             if (_ === "generator") {
-              const x = y.slice(1).join(":"), S = o().generators.find((I) => I.name === x);
-              L = {
+              const x = k.slice(1).join(":"), S = o().generators.find((I) => I.name === x);
+              W = {
                 generatorName: x,
                 params: h.parameters,
                 isAI: (S == null ? void 0 : S.isAI) ?? !0,
@@ -1645,10 +1663,10 @@ const N = Ve()(
                 maxReferenceImages: S == null ? void 0 : S.maxReferenceImages
               };
             } else if (_ === "transform") {
-              const x = y[1], S = y.slice(2).join(":"), I = o().transforms.find(
-                (O) => O.providerName === x && O.name === S
+              const x = k[1], S = k.slice(2).join(":"), I = o().transforms.find(
+                (D) => D.providerName === x && D.name === S
               );
-              L = {
+              W = {
                 operation: S,
                 providerName: x,
                 params: h.parameters,
@@ -1657,22 +1675,22 @@ const N = Ve()(
                 maxReferenceImages: I == null ? void 0 : I.maxReferenceImages
               };
             } else if (_ === "input")
-              L = {
+              W = {
                 uploadId: void 0,
                 filename: void 0,
                 mime: void 0
               };
             else if (_ === "vision")
-              L = {
-                providerName: y.slice(1).join(":"),
+              W = {
+                providerName: k.slice(1).join(":"),
                 params: h.parameters
               };
             else if (_ === "text") {
-              const x = y.slice(1).join(":"), S = h.parameters.jsonSchema, I = S != null && S.properties ? {
+              const x = k.slice(1).join(":"), S = h.parameters.jsonSchema, I = S != null && S.properties ? {
                 type: "object",
                 properties: Object.fromEntries(
-                  Object.entries(S.properties).map(([O, B]) => [
-                    O,
+                  Object.entries(S.properties).map(([D, B]) => [
+                    D,
                     {
                       type: B.type || "string",
                       description: B.description
@@ -1680,34 +1698,34 @@ const N = Ve()(
                   ])
                 )
               } : void 0;
-              L = {
+              W = {
                 providerName: x,
                 params: h.parameters,
                 outputSchema: I
               };
             } else
-              L = {
+              W = {
                 destination: h.parameters.destination || "./output/image.png",
                 provider: h.parameters.provider || "filesystem"
               };
             return {
-              id: v,
+              id: w,
               type: _,
-              position: T,
-              data: L
+              position: L,
+              data: W
             };
           }), b = r.edges.map((h) => {
-            const v = a.get(h.source) || h.source, y = a.get(h.target) || h.target, T = [h.sourceHandle, h.targetHandle].filter(Boolean).join("_");
+            const w = a.get(h.source) || h.source, k = a.get(h.target) || h.target, L = [h.sourceHandle, h.targetHandle].filter(Boolean).join("_");
             return {
-              id: T ? `edge_${v}_${y}_${T}` : `edge_${v}_${y}`,
-              source: v,
-              target: y,
+              id: L ? `edge_${w}_${k}_${L}` : `edge_${w}_${k}`,
+              source: w,
+              target: k,
               sourceHandle: h.sourceHandle ?? void 0,
               targetHandle: h.targetHandle ?? void 0
             };
           });
           t({
-            nodes: w,
+            nodes: v,
             edges: b,
             selectedNodeId: null,
             currentTemplateId: null,
@@ -1829,7 +1847,7 @@ function ze(t) {
   return `${n}m ${r}s`;
 }
 function se({ nodeId: t }) {
-  const o = N((i) => i.execution.nodeStatus[t]), n = N((i) => i.execution.nodeTiming[t]), [r, a] = W(0);
+  const o = N((i) => i.execution.nodeStatus[t]), n = N((i) => i.execution.nodeTiming[t]), [r, a] = T(0);
   if (H(() => {
     if (o !== "running" || !(n != null && n.startTime))
       return;
@@ -1853,7 +1871,7 @@ function se({ nodeId: t }) {
   }
   return null;
 }
-function We({ nodeId: t, color: o }) {
+function Me({ nodeId: t, color: o }) {
   const n = N((a) => a.previewVisible[t] !== !1), r = N((a) => a.togglePreview);
   return /* @__PURE__ */ e(
     "button",
@@ -1906,20 +1924,20 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--generator relative min-w-[190px] overflow-hidden ${r ? "selected" : ""} ${u}`,
       children: [
         s && /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Top,
+            position: O.Top,
             id: "text",
             className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800",
             title: "Text input (optional prompt from text/vision node)"
           }
         ),
         p && /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: "references",
             className: "!w-3 !h-3 !bg-violet-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: "50%" },
@@ -1933,7 +1951,7 @@ const Kt = oe(function({
           /* @__PURE__ */ e("div", { className: "floimg-node__icon bg-blue-500/10", children: /* @__PURE__ */ e("div", { className: "w-2 h-2 rounded-full bg-blue-500" }) }),
           /* @__PURE__ */ e("span", { className: "floimg-node__title text-blue-600 dark:text-blue-400", children: n.generatorName }),
           /* @__PURE__ */ e(
-            We,
+            Me,
             {
               nodeId: o,
               color: "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
@@ -1959,10 +1977,10 @@ const Kt = oe(function({
           ] }, c)) })
         ] }),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             className: "!w-3 !h-3 !bg-blue-500 !border-2 !border-white dark:!border-zinc-800"
           }
         )
@@ -1981,29 +1999,29 @@ const Kt = oe(function({
       className: `floimg-node ${s ? "floimg-node--ai-transform" : "floimg-node--transform"} relative min-w-[190px] overflow-hidden ${r ? "selected" : ""} ${u}`,
       children: [
         s && /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Top,
+            position: O.Top,
             id: "text",
             className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800",
             title: "Text input (optional prompt from text/vision node)"
           }
         ),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: "image",
             className: "!w-3 !h-3 !bg-teal-500 !border-2 !border-white dark:!border-zinc-800"
           }
         ),
         p && /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Bottom,
+            position: O.Bottom,
             id: "references",
             className: "!w-3 !h-3 !bg-violet-500 !border-2 !border-white dark:!border-zinc-800",
             title: `Reference images (up to ${n.maxReferenceImages || 13})`
@@ -2032,7 +2050,7 @@ const Kt = oe(function({
             }
           ),
           /* @__PURE__ */ e(
-            We,
+            Me,
             {
               nodeId: o,
               color: "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
@@ -2058,10 +2076,10 @@ const Kt = oe(function({
           ] }, l)) })
         ] }),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             className: `!w-3 !h-3 ${s ? "!bg-indigo-500" : "!bg-teal-500"} !border-2 !border-white dark:!border-zinc-800`
           }
         )
@@ -2076,10 +2094,10 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--save relative min-w-[190px] ${r ? "selected" : ""} ${i}`,
       children: [
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             className: "!w-3 !h-3 !bg-emerald-500 !border-2 !border-white dark:!border-zinc-800"
           }
         ),
@@ -2106,22 +2124,22 @@ const Kt = oe(function({
   const a = N((b) => b.execution.previews[o]), i = N((b) => b.execution.nodeStatus[o]), m = N((b) => b.previewVisible[o] !== !1), u = N((b) => b.updateNodeData), s = te(null), p = ie(i), c = M(
     async (b) => {
       try {
-        const k = await It(b);
+        const y = await It(b);
         u(o, {
-          uploadId: k.id,
-          filename: k.filename,
-          mime: k.mime
+          uploadId: y.id,
+          filename: y.filename,
+          mime: y.mime
         });
-      } catch (k) {
-        console.error("Upload failed:", k);
+      } catch (y) {
+        console.error("Upload failed:", y);
       }
     },
     [o, u]
   ), l = M(
     (b) => {
       b.preventDefault(), b.stopPropagation();
-      const k = b.dataTransfer.files[0];
-      k && k.type.startsWith("image/") && c(k);
+      const y = b.dataTransfer.files[0];
+      y && y.type.startsWith("image/") && c(y);
     },
     [c]
   ), f = M((b) => {
@@ -2129,11 +2147,11 @@ const Kt = oe(function({
   }, []), g = M(
     (b) => {
       var C;
-      const k = (C = b.target.files) == null ? void 0 : C[0];
-      k && c(k);
+      const y = (C = b.target.files) == null ? void 0 : C[0];
+      y && c(y);
     },
     [c]
-  ), w = a || (n.uploadId ? Ke(n.uploadId) : null);
+  ), v = a || (n.uploadId ? Ke(n.uploadId) : null);
   return /* @__PURE__ */ d(
     "div",
     {
@@ -2141,7 +2159,7 @@ const Kt = oe(function({
       onDrop: l,
       onDragOver: f,
       children: [
-        w && m ? /* @__PURE__ */ e("div", { className: "floimg-node__preview", children: /* @__PURE__ */ e("img", { src: w, alt: "Uploaded", className: "w-full h-20 object-contain rounded-md" }) }) : w ? null : /* @__PURE__ */ e(
+        v && m ? /* @__PURE__ */ e("div", { className: "floimg-node__preview", children: /* @__PURE__ */ e("img", { src: v, alt: "Uploaded", className: "w-full h-20 object-contain rounded-md" }) }) : v ? null : /* @__PURE__ */ e(
           "div",
           {
             className: "h-20 flex items-center justify-center cursor-pointer bg-amber-50/50 dark:bg-amber-900/20 hover:bg-amber-100/50 dark:hover:bg-amber-900/30 transition-colors border-b border-amber-100/50 dark:border-amber-800/30",
@@ -2205,7 +2223,7 @@ const Kt = oe(function({
           ) }),
           /* @__PURE__ */ e("span", { className: "floimg-node__title text-amber-600 dark:text-amber-400", children: "Input" }),
           /* @__PURE__ */ e(
-            We,
+            Me,
             {
               nodeId: o,
               color: "text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
@@ -2214,10 +2232,10 @@ const Kt = oe(function({
         ] }),
         /* @__PURE__ */ e("div", { className: "floimg-node__content", children: /* @__PURE__ */ e("div", { className: "floimg-node__param truncate", children: n.filename || "No image selected" }) }),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             className: "!w-3 !h-3 !bg-amber-500 !border-2 !border-white dark:!border-zinc-800"
           }
         )
@@ -2231,8 +2249,8 @@ const Kt = oe(function({
 }) {
   var c, l, f;
   const a = N((g) => g.execution.nodeStatus[o]), i = N((g) => {
-    var w;
-    return (w = g.execution.dataOutputs) == null ? void 0 : w[o];
+    var v;
+    return (v = g.execution.dataOutputs) == null ? void 0 : v[o];
   }), m = N((g) => g.openOutputInspector), u = ie(a), s = (c = n.outputSchema) != null && c.properties ? Object.entries(n.outputSchema.properties) : [], p = s.length > 0;
   return /* @__PURE__ */ d(
     "div",
@@ -2240,20 +2258,20 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--vision relative min-w-[190px] overflow-hidden ${r ? "selected" : ""} ${u}`,
       children: [
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Top,
+            position: O.Top,
             id: "context",
             className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800",
             title: "Context input (optional - from text/vision node for evaluation context)"
           }
         ),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: "image",
             className: "!w-3 !h-3 !bg-cyan-500 !border-2 !border-white dark:!border-zinc-800",
             title: "Image input"
@@ -2298,7 +2316,7 @@ const Kt = oe(function({
           ] }) : null,
           p && /* @__PURE__ */ d("div", { className: "mt-2 pt-2 border-t border-zinc-100 dark:border-zinc-700/50", children: [
             /* @__PURE__ */ e("div", { className: "text-[10px] text-cyan-500 dark:text-cyan-400 font-medium mb-1", children: "Outputs:" }),
-            s.map(([g]) => /* @__PURE__ */ d(
+            s.slice(0, 3).map(([g]) => /* @__PURE__ */ d(
               "div",
               {
                 className: "text-[10px] text-zinc-500 dark:text-zinc-400 flex items-center gap-1",
@@ -2308,40 +2326,45 @@ const Kt = oe(function({
                 ]
               },
               g
-            ))
+            )),
+            s.length > 3 && /* @__PURE__ */ d("div", { className: "text-[10px] text-zinc-400 dark:text-zinc-500 mt-0.5", children: [
+              "+",
+              s.length - 3,
+              " more"
+            ] })
           ] })
         ] }),
         p ? /* @__PURE__ */ d(J, { children: [
           /* @__PURE__ */ e(
-            D,
+            P,
             {
               type: "source",
-              position: P.Right,
+              position: O.Right,
               id: "output",
               className: "!w-3 !h-3 !bg-cyan-500 !border-2 !border-white dark:!border-zinc-800",
               style: { top: "50%" },
               title: "Full JSON output"
             }
           ),
-          s.map(([g, w], b) => /* @__PURE__ */ e(
-            D,
+          s.map(([g, v], b) => /* @__PURE__ */ e(
+            P,
             {
               type: "source",
-              position: P.Right,
+              position: O.Right,
               id: `output.${g}`,
               className: "!w-2.5 !h-2.5 !bg-cyan-400 !border-2 !border-white dark:!border-zinc-800",
               style: {
                 top: `${70 + b * 14}%`
               },
-              title: `${g}: ${w.description || w.type}`
+              title: `${g}: ${v.description || v.type}`
             },
             g
           ))
         ] }) : /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             className: "!w-3 !h-3 !bg-cyan-500 !border-2 !border-white dark:!border-zinc-800"
           }
         )
@@ -2351,8 +2374,8 @@ const Kt = oe(function({
 }), Qt = oe(function({ id: o, data: n, selected: r }) {
   var c, l, f;
   const a = N((g) => g.execution.nodeStatus[o]), i = N((g) => {
-    var w;
-    return (w = g.execution.dataOutputs) == null ? void 0 : w[o];
+    var v;
+    return (v = g.execution.dataOutputs) == null ? void 0 : v[o];
   }), m = N((g) => g.openOutputInspector), u = ie(a), s = (c = n.outputSchema) != null && c.properties ? Object.entries(n.outputSchema.properties) : [], p = s.length > 0;
   return /* @__PURE__ */ d(
     "div",
@@ -2360,10 +2383,10 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--text relative min-w-[190px] overflow-hidden ${r ? "selected" : ""} ${u}`,
       children: [
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800"
           }
         ),
@@ -2403,7 +2426,7 @@ const Kt = oe(function({
           ] }) : null,
           p && /* @__PURE__ */ d("div", { className: "mt-2 pt-2 border-t border-zinc-100 dark:border-zinc-700/50", children: [
             /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 font-medium mb-1", children: "Outputs:" }),
-            s.map(([g]) => /* @__PURE__ */ d(
+            s.slice(0, 3).map(([g]) => /* @__PURE__ */ d(
               "div",
               {
                 className: "text-[10px] text-zinc-500 dark:text-zinc-400 flex items-center gap-1",
@@ -2413,40 +2436,45 @@ const Kt = oe(function({
                 ]
               },
               g
-            ))
+            )),
+            s.length > 3 && /* @__PURE__ */ d("div", { className: "text-[10px] text-zinc-400 dark:text-zinc-500 mt-0.5", children: [
+              "+",
+              s.length - 3,
+              " more"
+            ] })
           ] })
         ] }),
         p ? /* @__PURE__ */ d(J, { children: [
           /* @__PURE__ */ e(
-            D,
+            P,
             {
               type: "source",
-              position: P.Right,
+              position: O.Right,
               id: "output",
               className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800",
               style: { top: "50%" },
               title: "Full JSON output"
             }
           ),
-          s.map(([g, w], b) => /* @__PURE__ */ e(
-            D,
+          s.map(([g, v], b) => /* @__PURE__ */ e(
+            P,
             {
               type: "source",
-              position: P.Right,
+              position: O.Right,
               id: `output.${g}`,
               className: "!w-2.5 !h-2.5 !bg-pink-400 !border-2 !border-white dark:!border-zinc-800",
               style: {
                 top: `${70 + b * 14}%`
               },
-              title: `${g}: ${w.description || w.type}`
+              title: `${g}: ${v.description || v.type}`
             },
             g
           ))
         ] }) : /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800"
           }
         )
@@ -2465,10 +2493,10 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--iterative relative min-w-[170px] overflow-hidden ${r ? "selected" : ""} ${i}`,
       children: [
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: "input",
             className: "!w-3 !h-3 !bg-orange-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: "50%" }
@@ -2510,10 +2538,10 @@ const Kt = oe(function({
           " copies"
         ] }) }) }),
         Array.from({ length: m }).map((u, s) => /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             id: `out[${s}]`,
             className: "!w-2.5 !h-2.5 !bg-orange-400 !border-2 !border-white dark:!border-zinc-800",
             style: {
@@ -2538,10 +2566,10 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--iterative relative min-w-[170px] overflow-hidden ${r ? "selected" : ""} ${i}`,
       children: [
         Array.from({ length: m }).map((u, s) => /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: `in[${s}]`,
             className: "!w-2.5 !h-2.5 !bg-orange-400 !border-2 !border-white dark:!border-zinc-800",
             style: {
@@ -2580,10 +2608,10 @@ const Kt = oe(function({
         ] }),
         /* @__PURE__ */ e("div", { className: "floimg-node__content", children: /* @__PURE__ */ e("div", { className: "floimg-node__param", children: n.waitMode === "all" ? "Wait for all" : "Use available" }) }),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             id: "output",
             className: "!w-3 !h-3 !bg-orange-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: "50%" }
@@ -2604,10 +2632,10 @@ const Kt = oe(function({
       className: `floimg-node floimg-node--iterative relative min-w-[170px] overflow-hidden ${r ? "selected" : ""} ${i}`,
       children: [
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: "candidates",
             className: "!w-3 !h-3 !bg-amber-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: "35%" },
@@ -2615,10 +2643,10 @@ const Kt = oe(function({
           }
         ),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "target",
-            position: P.Left,
+            position: O.Left,
             id: "selection",
             className: "!w-3 !h-3 !bg-cyan-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: "65%" },
@@ -2666,10 +2694,10 @@ const Kt = oe(function({
           ] }) })
         ] }),
         /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             id: "winner",
             className: "!w-3 !h-3 !bg-amber-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: m ? "35%" : "50%" },
@@ -2677,10 +2705,10 @@ const Kt = oe(function({
           }
         ),
         m && /* @__PURE__ */ e(
-          D,
+          P,
           {
             type: "source",
-            position: P.Right,
+            position: O.Right,
             id: "context",
             className: "!w-3 !h-3 !bg-pink-500 !border-2 !border-white dark:!border-zinc-800",
             style: { top: "65%" },
@@ -2721,15 +2749,15 @@ const Kt = oe(function({
 function nr() {
   const t = N((g) => g.nodes), o = N((g) => g.edges), n = N((g) => g.setNodes), r = N((g) => g.setEdges), a = N((g) => g.addEdge), i = N((g) => g.setSelectedNode), m = G(() => tr, []), u = M(
     (g) => {
-      const { source: w, target: b, targetHandle: k } = g;
-      if (!w || !b) return !1;
-      const C = t.find((v) => v.id === w), h = t.find((v) => v.id === b);
+      const { source: v, target: b, targetHandle: y } = g;
+      if (!v || !b) return !1;
+      const C = t.find((w) => w.id === v), h = t.find((w) => w.id === b);
       if (!C || !h || C.type === "save") return !1;
       if (h.type === "generator") {
-        const v = h.data;
-        return !!(k === "text" && v.isAI || k === "references" && v.acceptsReferenceImages);
+        const w = h.data;
+        return !!(y === "text" && w.isAI || y === "references" && w.acceptsReferenceImages);
       }
-      return !(h.type === "input" || w === b);
+      return !(h.type === "input" || v === b);
     },
     [t]
   ), s = M(
@@ -2745,22 +2773,22 @@ function nr() {
   ), c = M(
     (g) => {
       if (!(g.targetHandle === "references")) {
-        const b = o.filter((k) => {
-          if (k.target !== g.target) return !1;
-          const C = k.targetHandle || null, h = g.targetHandle || null;
-          return C === h || (g.targetHandle === "text" || g.targetHandle === "image") && !k.targetHandle || !g.targetHandle && k.targetHandle === "image";
+        const b = o.filter((y) => {
+          if (y.target !== g.target) return !1;
+          const C = y.targetHandle || null, h = g.targetHandle || null;
+          return C === h || (g.targetHandle === "text" || g.targetHandle === "image") && !y.targetHandle || !g.targetHandle && y.targetHandle === "image";
         });
         if (b.length > 0) {
-          const k = new Set(b.map((C) => C.id));
-          r(o.filter((C) => !k.has(C.id)));
+          const y = new Set(b.map((C) => C.id));
+          r(o.filter((C) => !y.has(C.id)));
         }
       }
       a(g);
     },
     [a, o, r]
   ), l = M(
-    (g, w) => {
-      i(w.id);
+    (g, v) => {
+      i(v.id);
     },
     [i]
   ), f = M(() => {
@@ -2806,7 +2834,7 @@ function nr() {
   ) });
 }
 function or({ onSelect: t }) {
-  const [o, n] = W([]), [r, a] = W(!0), [i, m] = W(null), u = async () => {
+  const [o, n] = T([]), [r, a] = T(!0), [i, m] = T(null), u = async () => {
     try {
       a(!0);
       const c = await Lt();
@@ -2916,7 +2944,7 @@ function re({
   );
 }
 function ar() {
-  const t = N((x) => x.setGenerators), o = N((x) => x.setTransforms), n = N((x) => x.setTextProviders), r = N((x) => x.setVisionProviders), a = N((x) => x.generators), i = N((x) => x.transforms), m = N((x) => x.textProviders), u = N((x) => x.visionProviders), s = N((x) => x.addNode), [p, c] = W(!1), { data: l } = be({
+  const t = N((x) => x.setGenerators), o = N((x) => x.setTransforms), n = N((x) => x.setTextProviders), r = N((x) => x.setVisionProviders), a = N((x) => x.generators), i = N((x) => x.transforms), m = N((x) => x.textProviders), u = N((x) => x.visionProviders), s = N((x) => x.addNode), [p, c] = T(!1), { data: l } = be({
     queryKey: ["generators"],
     queryFn: yt
   }), { data: f } = be({
@@ -2925,7 +2953,7 @@ function ar() {
   }), { data: g } = be({
     queryKey: ["textProviders"],
     queryFn: zt
-  }), { data: w } = be({
+  }), { data: v } = be({
     queryKey: ["visionProviders"],
     queryFn: Ct
   });
@@ -2936,11 +2964,11 @@ function ar() {
   }, [f, o]), H(() => {
     g && n(g);
   }, [g, n]), H(() => {
-    w && r(w);
-  }, [w, r]);
+    v && r(v);
+  }, [v, r]);
   const b = (x, S) => {
     x.dataTransfer.setData("application/json", JSON.stringify(S)), x.dataTransfer.effectAllowed = "move";
-  }, k = (x) => {
+  }, y = (x) => {
     s(x, { x: 250, y: 150 + Math.random() * 100 });
   }, C = {
     id: "input:upload",
@@ -2974,7 +3002,7 @@ function ar() {
         }
       }
     }
-  }, v = {
+  }, w = {
     id: "fanout:default",
     type: "fanout",
     name: "fanout",
@@ -3006,7 +3034,7 @@ function ar() {
         }
       }
     }
-  }, y = {
+  }, k = {
     id: "collect:default",
     type: "collect",
     name: "collect",
@@ -3033,7 +3061,7 @@ function ar() {
         }
       }
     }
-  }, T = {
+  }, L = {
     id: "router:default",
     type: "router",
     name: "router",
@@ -3077,7 +3105,7 @@ function ar() {
       return x[I] || (x[I] = []), x[I].push(S), x;
     },
     {}
-  ), L = i.reduce(
+  ), W = i.reduce(
     (x, S) => {
       const I = S.category || "Other";
       return x[I] || (x[I] = []), x[I].push(S), x;
@@ -3108,7 +3136,7 @@ function ar() {
             definition: C,
             colorVariant: "amber",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           }
         ),
         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(or, {}) })
@@ -3123,7 +3151,7 @@ function ar() {
               definition: I,
               colorVariant: "blue",
               onDragStart: b,
-              onDoubleClick: k
+              onDoubleClick: y
             },
             I.id
           ))
@@ -3131,7 +3159,7 @@ function ar() {
       ] }),
       /* @__PURE__ */ d("div", { className: "floimg-sidebar__section", children: [
         /* @__PURE__ */ e("h3", { className: "floimg-sidebar__header !text-teal-600 dark:!text-teal-400", children: "Transforms" }),
-        Object.entries(L).map(([x, S]) => /* @__PURE__ */ d("div", { className: "mb-3", children: [
+        Object.entries(W).map(([x, S]) => /* @__PURE__ */ d("div", { className: "mb-3", children: [
           /* @__PURE__ */ e("div", { className: "floimg-sidebar__category", children: x }),
           S.map((I) => /* @__PURE__ */ e(
             re,
@@ -3139,7 +3167,7 @@ function ar() {
               definition: I,
               colorVariant: "teal",
               onDragStart: b,
-              onDoubleClick: k
+              onDoubleClick: y
             },
             I.id
           ))
@@ -3153,7 +3181,7 @@ function ar() {
             definition: x,
             colorVariant: "pink",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           },
           x.id
         ))
@@ -3166,7 +3194,7 @@ function ar() {
             definition: x,
             colorVariant: "cyan",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           },
           x.id
         ))
@@ -3176,28 +3204,28 @@ function ar() {
         /* @__PURE__ */ e(
           re,
           {
-            definition: v,
+            definition: w,
             colorVariant: "orange",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           }
         ),
         /* @__PURE__ */ e(
           re,
           {
-            definition: y,
+            definition: k,
             colorVariant: "orange",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           }
         ),
         /* @__PURE__ */ e(
           re,
           {
-            definition: T,
+            definition: L,
             colorVariant: "amber",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           }
         )
       ] }),
@@ -3209,45 +3237,45 @@ function ar() {
             definition: h,
             colorVariant: "emerald",
             onDragStart: b,
-            onDoubleClick: k
+            onDoubleClick: y
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ e("div", { className: "px-4 py-2 mt-auto border-t border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ d("div", { className: "text-xs text-gray-400 dark:text-zinc-500", children: [
       "FloImg Studio v",
-      "0.9.0",
+      "0.9.2",
       !1
     ] }) })
   ] });
 }
 function ir() {
-  var w, b, k, C;
+  var v, b, y, C;
   const t = N((h) => h.selectedNodeId), o = N((h) => h.nodes), n = N((h) => h.generators), r = N((h) => h.transforms), a = N((h) => h.textProviders), i = N((h) => h.visionProviders), m = N((h) => h.updateNodeData), u = N((h) => h.deleteNode), s = o.find((h) => h.id === t);
   if (!s)
     return null;
   let p, c = "";
   if (s.type === "generator") {
-    const h = s.data, v = n.find((y) => y.name === h.generatorName);
-    p = (w = v == null ? void 0 : v.params) == null ? void 0 : w.properties, c = (v == null ? void 0 : v.label) || h.generatorName;
+    const h = s.data, w = n.find((k) => k.name === h.generatorName);
+    p = (v = w == null ? void 0 : w.params) == null ? void 0 : v.properties, c = (w == null ? void 0 : w.label) || h.generatorName;
   } else if (s.type === "transform") {
-    const h = s.data, v = r.find((y) => y.name === h.operation);
-    p = (b = v == null ? void 0 : v.params) == null ? void 0 : b.properties, c = (v == null ? void 0 : v.label) || h.operation;
+    const h = s.data, w = r.find((k) => k.name === h.operation);
+    p = (b = w == null ? void 0 : w.params) == null ? void 0 : b.properties, c = (w == null ? void 0 : w.label) || h.operation;
   } else if (s.type === "save") {
-    const v = s.data.provider === "cloud";
-    c = v ? "Save to FloImg Cloud" : "Save", p = {
+    const w = s.data.provider === "cloud";
+    c = w ? "Save to FloImg Cloud" : "Save", p = {
       destination: {
         type: "string",
-        title: v ? "Filename" : "Destination",
-        description: v ? "Filename for cloud storage" : "File path to save the image"
+        title: w ? "Filename" : "Destination",
+        description: w ? "Filename for cloud storage" : "File path to save the image"
       }
     };
   } else if (s.type === "text") {
-    const h = s.data, v = a.find((y) => y.name === h.providerName);
-    p = (k = v == null ? void 0 : v.params) == null ? void 0 : k.properties, c = (v == null ? void 0 : v.label) || h.providerName;
+    const h = s.data, w = a.find((k) => k.name === h.providerName);
+    p = (y = w == null ? void 0 : w.params) == null ? void 0 : y.properties, c = (w == null ? void 0 : w.label) || h.providerName;
   } else if (s.type === "vision") {
-    const h = s.data, v = i.find((y) => y.name === h.providerName);
-    p = (C = v == null ? void 0 : v.params) == null ? void 0 : C.properties, c = (v == null ? void 0 : v.label) || h.providerName;
+    const h = s.data, w = i.find((k) => k.name === h.providerName);
+    p = (C = w == null ? void 0 : w.params) == null ? void 0 : C.properties, c = (w == null ? void 0 : w.label) || h.providerName;
   } else s.type === "fanout" ? (c = "Fan-Out", p = {
     mode: {
       type: "string",
@@ -3306,30 +3334,30 @@ function ir() {
       description: "Optional property to pass through (e.g., 'refinement')"
     }
   });
-  const l = (h, v) => {
+  const l = (h, w) => {
     if (s.type === "generator") {
-      const y = s.data;
+      const k = s.data;
       m(s.id, {
-        params: { ...y.params, [h]: v }
+        params: { ...k.params, [h]: w }
       });
     } else if (s.type === "transform") {
-      const y = s.data;
+      const k = s.data;
       m(s.id, {
-        params: { ...y.params, [h]: v }
+        params: { ...k.params, [h]: w }
       });
     } else if (s.type === "save")
-      m(s.id, { [h]: v });
+      m(s.id, { [h]: w });
     else if (s.type === "text") {
-      const y = s.data;
+      const k = s.data;
       m(s.id, {
-        params: { ...y.params, [h]: v }
+        params: { ...k.params, [h]: w }
       });
     } else if (s.type === "vision") {
-      const y = s.data;
+      const k = s.data;
       m(s.id, {
-        params: { ...y.params, [h]: v }
+        params: { ...k.params, [h]: w }
       });
-    } else (s.type === "fanout" || s.type === "collect" || s.type === "router") && m(s.id, { [h]: v });
+    } else (s.type === "fanout" || s.type === "collect" || s.type === "router") && m(s.id, { [h]: w });
   }, f = (h) => {
     if (s.type === "generator")
       return s.data.params[h];
@@ -3347,22 +3375,22 @@ function ir() {
       return s.data[h];
     if (s.type === "router")
       return s.data[h];
-  }, g = (h, v) => {
+  }, g = (h, w) => {
     if (s.type === "generator" && s.data.generatorName === "shapes") {
-      const y = f("shapeType") || "rectangle", T = f("fillType") || "solid";
-      if (h === "sides") return y === "polygon";
-      if (h === "points" || h === "innerRadius") return y === "star";
-      if (h === "cornerRadius") return y === "rectangle";
-      if (h === "fillColor") return T === "solid";
+      const k = f("shapeType") || "rectangle", L = f("fillType") || "solid";
+      if (h === "sides") return k === "polygon";
+      if (h === "points" || h === "innerRadius") return k === "star";
+      if (h === "cornerRadius") return k === "rectangle";
+      if (h === "fillColor") return L === "solid";
       if (h === "gradientType" || h === "gradientColor1" || h === "gradientColor2" || h === "gradientAngle")
-        return T === "gradient";
+        return L === "gradient";
       if (h === "patternType" || h === "patternColor" || h === "patternBackground" || h === "patternScale")
-        return T === "pattern";
+        return L === "pattern";
     }
     if (s.type === "fanout") {
-      const y = s.data.mode || "count";
-      if (h === "count") return y === "count";
-      if (h === "arrayProperty") return y === "array";
+      const k = s.data.mode || "count";
+      if (h === "count") return k === "count";
+      if (h === "arrayProperty") return k === "array";
     }
     return !0;
   };
@@ -3371,13 +3399,13 @@ function ir() {
       /* @__PURE__ */ e("h2", { className: "floimg-inspector__title", children: c }),
       /* @__PURE__ */ e("button", { onClick: () => u(s.id), className: "floimg-inspector__delete", children: "Delete" })
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: p && Object.entries(p).filter(([h, v]) => g(h)).map(([h, v]) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: p && Object.entries(p).filter(([h, w]) => g(h)).map(([h, w]) => /* @__PURE__ */ e(
       sr,
       {
         name: h,
-        field: v,
+        field: w,
         value: f(h),
-        onChange: (y) => l(h, y)
+        onChange: (k) => l(h, k)
       },
       h
     )) }),
@@ -3495,7 +3523,7 @@ function sr({ name: t, field: o, value: n, onChange: r }) {
   ] });
 }
 function lr({ nodeId: t, outputSchema: o, updateNodeData: n }) {
-  const [r, a] = W(""), i = (o == null ? void 0 : o.properties) || {}, m = Object.entries(i), u = () => {
+  const [r, a] = T(""), i = (o == null ? void 0 : o.properties) || {}, m = Object.entries(i), u = () => {
     if (!r.trim()) return;
     const l = {
       type: "object",
@@ -3727,21 +3755,21 @@ function gr(t, o) {
   ), !0) : o ? t.some((n) => o.includes(n)) || t.includes("*") : !0;
 }
 const xr = (t, o, n = !1) => {
-  const { alt: r, meta: a, mod: i, shift: m, ctrl: u, keys: s, useKey: p } = o, { code: c, key: l, ctrlKey: f, metaKey: g, shiftKey: w, altKey: b } = t, k = de(c);
+  const { alt: r, meta: a, mod: i, shift: m, ctrl: u, keys: s, useKey: p } = o, { code: c, key: l, ctrlKey: f, metaKey: g, shiftKey: v, altKey: b } = t, y = de(c);
   if (p && (s == null ? void 0 : s.length) === 1 && s.includes(l))
     return !0;
-  if (!(s != null && s.includes(k)) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(k))
+  if (!(s != null && s.includes(y)) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(y))
     return !1;
   if (!n) {
-    if (r !== b && k !== "alt" || m !== w && k !== "shift")
+    if (r !== b && y !== "alt" || m !== v && y !== "shift")
       return !1;
     if (i) {
       if (!g && !f)
         return !1;
-    } else if (a !== g && k !== "meta" && k !== "os" || u !== f && k !== "ctrl" && k !== "control")
+    } else if (a !== g && y !== "meta" && y !== "os" || u !== f && y !== "ctrl" && y !== "control")
       return !1;
   }
-  return s && s.length === 1 && s.includes(k) ? !0 : s ? cr(s) : !s;
+  return s && s.length === 1 && s.includes(y) ? !0 : s ? cr(s) : !s;
 }, br = He(void 0), vr = () => Be(br);
 function et(t, o) {
   return t && o && typeof t == "object" && typeof o == "object" ? Object.keys(t).length === Object.keys(o).length && // @ts-expect-error TS7053
@@ -3772,27 +3800,27 @@ function zr(t, o, n, r) {
   return Nr(() => {
     if ((l == null ? void 0 : l.enabled) === !1 || !gr(f, l == null ? void 0 : l.scopes))
       return;
-    let w = [], b;
-    const k = (y, T = !1) => {
+    let v = [], b;
+    const y = (k, L = !1) => {
       var _;
-      if (!(hr(y) && !Xe(y, l == null ? void 0 : l.enableOnFormTags))) {
+      if (!(hr(k) && !Xe(k, l == null ? void 0 : l.enableOnFormTags))) {
         if (a.current !== null) {
-          const L = a.current.getRootNode();
-          if ((L instanceof Document || L instanceof ShadowRoot) && L.activeElement !== a.current && !a.current.contains(L.activeElement)) {
-            Re(y);
+          const W = a.current.getRootNode();
+          if ((W instanceof Document || W instanceof ShadowRoot) && W.activeElement !== a.current && !a.current.contains(W.activeElement)) {
+            Re(k);
             return;
           }
         }
-        (_ = y.target) != null && _.isContentEditable && !(l != null && l.enableOnContentEditable) || Ce(u, l == null ? void 0 : l.delimiter).forEach((L) => {
-          var S, I, O, B;
-          if (L.includes((l == null ? void 0 : l.splitKey) ?? "+") && L.includes((l == null ? void 0 : l.sequenceSplitKey) ?? ">")) {
+        (_ = k.target) != null && _.isContentEditable && !(l != null && l.enableOnContentEditable) || Ce(u, l == null ? void 0 : l.delimiter).forEach((W) => {
+          var S, I, D, B;
+          if (W.includes((l == null ? void 0 : l.splitKey) ?? "+") && W.includes((l == null ? void 0 : l.sequenceSplitKey) ?? ">")) {
             console.warn(
-              `Hotkey ${L} contains both ${(l == null ? void 0 : l.splitKey) ?? "+"} and ${(l == null ? void 0 : l.sequenceSplitKey) ?? ">"} which is not supported.`
+              `Hotkey ${W} contains both ${(l == null ? void 0 : l.splitKey) ?? "+"} and ${(l == null ? void 0 : l.sequenceSplitKey) ?? ">"} which is not supported.`
             );
             return;
           }
           const x = Se(
-            L,
+            W,
             l == null ? void 0 : l.splitKey,
             l == null ? void 0 : l.sequenceSplitKey,
             l == null ? void 0 : l.useKey,
@@ -3800,38 +3828,38 @@ function zr(t, o, n, r) {
           );
           if (x.isSequence) {
             b = setTimeout(() => {
-              w = [];
+              v = [];
             }, (l == null ? void 0 : l.sequenceTimeoutMs) ?? 1e3);
-            const K = x.useKey ? y.key : de(y.code);
+            const K = x.useKey ? k.key : de(k.code);
             if (Ye(K.toLowerCase()))
               return;
-            w.push(K);
-            const Q = (S = x.keys) == null ? void 0 : S[w.length - 1];
+            v.push(K);
+            const Q = (S = x.keys) == null ? void 0 : S[v.length - 1];
             if (K !== Q) {
-              w = [], b && clearTimeout(b);
+              v = [], b && clearTimeout(b);
               return;
             }
-            w.length === ((I = x.keys) == null ? void 0 : I.length) && (c.current(y, x), b && clearTimeout(b), w = []);
-          } else if (xr(y, x, l == null ? void 0 : l.ignoreModifiers) || (O = x.keys) != null && O.includes("*")) {
-            if ((B = l == null ? void 0 : l.ignoreEventWhen) != null && B.call(l, y) || T && i.current)
+            v.length === ((I = x.keys) == null ? void 0 : I.length) && (c.current(k, x), b && clearTimeout(b), v = []);
+          } else if (xr(k, x, l == null ? void 0 : l.ignoreModifiers) || (D = x.keys) != null && D.includes("*")) {
+            if ((B = l == null ? void 0 : l.ignoreEventWhen) != null && B.call(l, k) || L && i.current)
               return;
-            if (mr(y, x, l == null ? void 0 : l.preventDefault), !ur(y, x, l == null ? void 0 : l.enabled)) {
-              Re(y);
+            if (mr(k, x, l == null ? void 0 : l.preventDefault), !ur(k, x, l == null ? void 0 : l.enabled)) {
+              Re(k);
               return;
             }
-            c.current(y, x), T || (i.current = !0);
+            c.current(k, x), L || (i.current = !0);
           }
         });
       }
-    }, C = (y) => {
-      y.code !== void 0 && (Qe(de(y.code)), ((l == null ? void 0 : l.keydown) === void 0 && (l == null ? void 0 : l.keyup) !== !0 || l != null && l.keydown) && k(y));
-    }, h = (y) => {
-      y.code !== void 0 && (Ze(de(y.code)), i.current = !1, l != null && l.keyup && k(y, !0));
-    }, v = a.current || (m == null ? void 0 : m.document) || document;
-    return v.addEventListener("keyup", h, m == null ? void 0 : m.eventListenerOptions), v.addEventListener("keydown", C, m == null ? void 0 : m.eventListenerOptions), g && Ce(u, l == null ? void 0 : l.delimiter).forEach(
-      (y) => g.addHotkey(
+    }, C = (k) => {
+      k.code !== void 0 && (Qe(de(k.code)), ((l == null ? void 0 : l.keydown) === void 0 && (l == null ? void 0 : l.keyup) !== !0 || l != null && l.keydown) && y(k));
+    }, h = (k) => {
+      k.code !== void 0 && (Ze(de(k.code)), i.current = !1, l != null && l.keyup && y(k, !0));
+    }, w = a.current || (m == null ? void 0 : m.document) || document;
+    return w.addEventListener("keyup", h, m == null ? void 0 : m.eventListenerOptions), w.addEventListener("keydown", C, m == null ? void 0 : m.eventListenerOptions), g && Ce(u, l == null ? void 0 : l.delimiter).forEach(
+      (k) => g.addHotkey(
         Se(
-          y,
+          k,
           l == null ? void 0 : l.splitKey,
           l == null ? void 0 : l.sequenceSplitKey,
           l == null ? void 0 : l.useKey,
@@ -3839,17 +3867,17 @@ function zr(t, o, n, r) {
         )
       )
     ), () => {
-      v.removeEventListener("keyup", h, m == null ? void 0 : m.eventListenerOptions), v.removeEventListener("keydown", C, m == null ? void 0 : m.eventListenerOptions), g && Ce(u, l == null ? void 0 : l.delimiter).forEach(
-        (y) => g.removeHotkey(
+      w.removeEventListener("keyup", h, m == null ? void 0 : m.eventListenerOptions), w.removeEventListener("keydown", C, m == null ? void 0 : m.eventListenerOptions), g && Ce(u, l == null ? void 0 : l.delimiter).forEach(
+        (k) => g.removeHotkey(
           Se(
-            y,
+            k,
             l == null ? void 0 : l.splitKey,
             l == null ? void 0 : l.sequenceSplitKey,
             l == null ? void 0 : l.useKey,
             l == null ? void 0 : l.description
           )
         )
-      ), w = [], b && clearTimeout(b);
+      ), v = [], b && clearTimeout(b);
     };
   }, [u, l, f]), a;
 }
@@ -3879,15 +3907,15 @@ function V(t, o, n = {}) {
   );
 }
 function Sr(t = {}) {
-  const { onToggleAIChat: o } = t, n = Ue(), r = N((j) => j.nodes), a = N((j) => j.selectedNodeId), i = N((j) => j.execution), m = N((j) => j.hasUnsavedChanges), u = N((j) => j.saveWorkflow), s = N((j) => j.execute), p = N((j) => j.cancelExecution), c = N((j) => j.duplicateNode), l = N((j) => j.setSelectedNode), f = N((j) => j.toggleLibrary), g = N((j) => j.newWorkflow), w = A((j) => j.openSettings), b = A((j) => j.openShortcutsModal), k = A((j) => j.openCommandPalette), C = A((j) => j.closeCommandPalette), h = A((j) => j.closeShortcutsModal), v = A((j) => j.closeSettings), y = A((j) => j.showCommandPalette), T = A((j) => j.openExport), _ = A((j) => j.openImport), L = A((j) => j.requestNewWorkflow), x = M(() => {
+  const { onToggleAIChat: o } = t, n = Ue(), r = N((j) => j.nodes), a = N((j) => j.selectedNodeId), i = N((j) => j.execution), m = N((j) => j.hasUnsavedChanges), u = N((j) => j.saveWorkflow), s = N((j) => j.execute), p = N((j) => j.cancelExecution), c = N((j) => j.duplicateNode), l = N((j) => j.setSelectedNode), f = N((j) => j.toggleLibrary), g = N((j) => j.newWorkflow), v = A((j) => j.openSettings), b = A((j) => j.openShortcutsModal), y = A((j) => j.openCommandPalette), C = A((j) => j.closeCommandPalette), h = A((j) => j.closeShortcutsModal), w = A((j) => j.closeSettings), k = A((j) => j.showCommandPalette), L = A((j) => j.openExport), _ = A((j) => j.openImport), W = A((j) => j.requestNewWorkflow), x = M(() => {
     r.length !== 0 && u();
   }, [r.length, u]), S = M(() => {
     r.length === 0 || i.status === "running" || s();
   }, [r.length, i.status, s]), I = M(() => {
-    L(m, g);
-  }, [L, m, g]), O = M(() => {
-    r.length !== 0 && (T == null || T());
-  }, [r.length, T]), B = M(() => {
+    W(m, g);
+  }, [W, m, g]), D = M(() => {
+    r.length !== 0 && (L == null || L());
+  }, [r.length, L]), B = M(() => {
     _ == null || _();
   }, [_]), K = M(() => {
     i.status === "running" && p();
@@ -3901,34 +3929,34 @@ function Sr(t = {}) {
       }))
     );
   }, [n]), $ = M(() => {
-    C == null || C(), h == null || h(), v == null || v(), l(null), n == null || n.setNodes(
+    C == null || C(), h == null || h(), w == null || w(), l(null), n == null || n.setNodes(
       (j) => j.map((fe) => ({
         ...fe,
         selected: !1
       }))
     );
-  }, [l, n, C, h, v]), F = M(() => {
+  }, [l, n, C, h, w]), F = M(() => {
     n == null || n.zoomIn();
   }, [n]), z = M(() => {
     n == null || n.zoomOut();
   }, [n]), R = M(() => {
     n == null || n.fitView({ padding: 0.2 });
   }, [n]), U = M(() => {
-    y ? C == null || C() : k == null || k();
-  }, [y, k, C]), Z = M(() => {
+    k ? C == null || C() : y == null || y();
+  }, [k, y, C]), Z = M(() => {
     b == null || b();
   }, [b]), X = M(() => {
     o == null || o();
   }, [o]), ee = M(() => {
     f();
   }, [f]), ue = M(() => {
-    w();
-  }, [w]);
-  return V("save", x), V("execute", S), V("newWorkflow", I), V("exportWorkflow", O), V("importWorkflow", B), V("cancelExecution", K), V("duplicate", Q), V("selectAll", q), V("deselect", $), V("zoomIn", F), V("zoomOut", z), V("zoomFit", R), V("commandPalette", U), V("showShortcuts", Z), V("toggleAIChat", X), V("toggleLibrary", ee), V("settings", ue), {
+    v();
+  }, [v]);
+  return V("save", x), V("execute", S), V("newWorkflow", I), V("exportWorkflow", D), V("importWorkflow", B), V("cancelExecution", K), V("duplicate", Q), V("selectAll", q), V("deselect", $), V("zoomIn", F), V("zoomOut", z), V("zoomFit", R), V("commandPalette", U), V("showShortcuts", Z), V("toggleAIChat", X), V("toggleLibrary", ee), V("settings", ue), {
     handleSave: x,
     handleExecute: S,
     handleNewWorkflow: I,
-    handleExport: O,
+    handleExport: D,
     handleImport: B,
     handleDuplicate: Q,
     handleSelectAll: q,
@@ -3991,7 +4019,7 @@ function _r(t) {
     r === "mod" ? n.push(rt()) : r === "ctrl" || r === "control" ? n.push(ye() ? "⌃" : "Ctrl") : r === "alt" || r === "option" ? n.push(nt()) : r === "shift" ? n.push(ot()) : r === "meta" || r === "cmd" || r === "command" ? n.push("⌘") : ke[r] ? n.push(ke[r]) : n.push(r.toUpperCase());
   return n;
 }
-function Mr(t, o) {
+function Wr(t, o) {
   const n = new Map(t.map((u) => [u.id, u])), r = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
   for (const u of t)
     r.set(u.id, 0), a.set(u.id, []);
@@ -4014,7 +4042,7 @@ function Mr(t, o) {
   }
   return m;
 }
-function Wr(t) {
+function Mr(t) {
   const o = t.type || "node", n = t.id.replace(/[^a-zA-Z0-9]/g, "_");
   return `${o}_${n}`;
 }
@@ -4097,9 +4125,9 @@ function jr(t, o) {
   if (t.length === 0)
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
-  const n = Mr(t, o), r = /* @__PURE__ */ new Map();
+  const n = Wr(t, o), r = /* @__PURE__ */ new Map();
   for (const p of n)
-    r.set(p.id, Wr(p));
+    r.set(p.id, Mr(p));
   const a = /* @__PURE__ */ new Set(), i = [];
   for (const p of n) {
     const { code: c, imports: l } = Tr(p, o, r);
@@ -4134,14 +4162,14 @@ runWorkflow().catch(console.error);
 ` + s;
 }
 function Er({ isOpen: t, onClose: o, onImport: n }) {
-  const [r, a] = W(""), [i, m] = W(!1), [u, s] = W(null), [p, c] = W(!1), l = M(async () => {
+  const [r, a] = T(""), [i, m] = T(!1), [u, s] = T(null), [p, c] = T(!1), l = M(async () => {
     if (!r.trim()) {
       s({ message: "Please enter or paste YAML content" });
       return;
     }
     m(!0), s(null);
     try {
-      const h = await Mt(r);
+      const h = await Wt(r);
       h.success ? (n(h.nodes, h.edges, h.name), a(""), o()) : s({
         message: h.error || "Import failed",
         line: h.line,
@@ -4159,7 +4187,7 @@ function Er({ isOpen: t, onClose: o, onImport: n }) {
     }
     m(!0), s(null);
     try {
-      const h = await Wt(r);
+      const h = await Mt(r);
       h.valid ? (s(null), s({ message: "Valid YAML!" }), setTimeout(() => s(null), 2e3)) : h.errors.length > 0 && s(h.errors[0]);
     } catch (h) {
       s({ message: h instanceof Error ? h.message : "Validation failed" });
@@ -4172,27 +4200,27 @@ function Er({ isOpen: t, onClose: o, onImport: n }) {
       return;
     }
     try {
-      const v = await h.text();
-      a(v), s(null);
+      const w = await h.text();
+      a(w), s(null);
     } catch {
       s({ message: "Failed to read file" });
     }
-  }, []), w = M((h) => {
+  }, []), v = M((h) => {
     h.preventDefault(), c(!0);
   }, []), b = M((h) => {
     h.preventDefault(), c(!1);
-  }, []), k = M(
+  }, []), y = M(
     (h) => {
       h.preventDefault(), c(!1);
-      const v = h.dataTransfer.files[0];
-      v && g(v);
+      const w = h.dataTransfer.files[0];
+      w && g(w);
     },
     [g]
   ), C = M(
     (h) => {
-      var y;
-      const v = (y = h.target.files) == null ? void 0 : y[0];
-      v && g(v);
+      var k;
+      const w = (k = h.target.files) == null ? void 0 : k[0];
+      w && g(w);
     },
     [g]
   );
@@ -4221,9 +4249,9 @@ function Er({ isOpen: t, onClose: o, onImport: n }) {
       /* @__PURE__ */ d(
         "div",
         {
-          onDragOver: w,
+          onDragOver: v,
           onDragLeave: b,
-          onDrop: k,
+          onDrop: y,
           className: `border-2 border-dashed rounded-lg p-4 mb-4 text-center transition-colors ${p ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20" : "border-gray-300 dark:border-zinc-600"}`,
           children: [
             /* @__PURE__ */ e(
@@ -4372,7 +4400,7 @@ function $r({
   hideAttribution: a = !1,
   hideWorkflowLibrary: i = !1
 } = {}) {
-  const m = N((E) => E.execution), u = N((E) => E.execute), s = N((E) => E.cancelExecution), p = N((E) => E.exportToYaml), c = N((E) => E.importFromYaml), l = N((E) => E.nodes), f = N((E) => E.edges), g = A((E) => E.openSettings), w = N((E) => E.activeWorkflowName), b = N((E) => E.hasUnsavedChanges), k = N((E) => E.saveWorkflow), C = N((E) => E.toggleLibrary), h = N((E) => E.setActiveWorkflowName), v = Ir("save"), [y, T] = W(!1), [_, L] = W(!1), [x, S] = W("yaml"), [I, O] = W(""), [B, K] = W(""), [Q, q] = W(null), [$, F] = W(!1), [z, R] = W("");
+  const m = N((E) => E.execution), u = N((E) => E.execute), s = N((E) => E.cancelExecution), p = N((E) => E.exportToYaml), c = N((E) => E.importFromYaml), l = N((E) => E.nodes), f = N((E) => E.edges), g = A((E) => E.openSettings), v = N((E) => E.activeWorkflowName), b = N((E) => E.hasUnsavedChanges), y = N((E) => E.saveWorkflow), C = N((E) => E.toggleLibrary), h = N((E) => E.setActiveWorkflowName), w = Ir("save"), [k, L] = T(!1), [_, W] = T(!1), [x, S] = T("yaml"), [I, D] = T(""), [B, K] = T(""), [Q, q] = T(null), [$, F] = T(!1), [z, R] = T("");
   H(() => {
     const E = () => {
       q("New workflow created"), setTimeout(() => q(null), 2e3);
@@ -4380,19 +4408,19 @@ function $r({
     return window.addEventListener("new-workflow-created", E), () => window.removeEventListener("new-workflow-created", E);
   }, []);
   const U = M(() => {
-    l.length !== 0 && (k(), q("Saved!"), setTimeout(() => q(null), 2e3));
-  }, [l.length, k]), Z = () => {
-    R(w), F(!0);
+    l.length !== 0 && (y(), q("Saved!"), setTimeout(() => q(null), 2e3));
+  }, [l.length, y]), Z = () => {
+    R(v), F(!0);
   }, X = () => {
     const E = z.trim();
-    E && E !== w && h(E), F(!1);
+    E && E !== v && h(E), F(!1);
   }, ee = async () => {
     await u();
   }, ue = async () => {
     const E = await p();
-    O(E);
+    D(E);
     const Ne = jr(l, f);
-    K(Ne), T(!0);
+    K(Ne), L(!0);
   }, j = () => {
     const E = x === "yaml" ? I : B;
     navigator.clipboard.writeText(E);
@@ -4437,7 +4465,7 @@ function $r({
               onChange: (E) => R(E.target.value),
               onBlur: X,
               onKeyDown: (E) => {
-                E.key === "Enter" && X(), E.key === "Escape" && (R(w), F(!1));
+                E.key === "Enter" && X(), E.key === "Escape" && (R(v), F(!1));
               },
               className: "w-48 px-2 py-1 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500 text-gray-900 dark:text-zinc-100",
               autoFocus: !0
@@ -4448,7 +4476,7 @@ function $r({
               onClick: Z,
               className: "text-sm text-gray-700 dark:text-zinc-300 font-medium hover:text-gray-900 dark:hover:text-zinc-100 rounded px-2 py-1 -mx-2 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-colors",
               title: "Click to rename",
-              children: w
+              children: v
             }
           ),
           b && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
@@ -4488,7 +4516,7 @@ function $r({
             onClick: U,
             disabled: l.length === 0,
             className: "floimg-toolbar__btn disabled:opacity-50 disabled:cursor-not-allowed",
-            title: `Save Workflow${v ? ` (${Lr(v)})` : ""}`,
+            title: `Save Workflow${w ? ` (${Lr(w)})` : ""}`,
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
               {
@@ -4500,7 +4528,7 @@ function $r({
             ) })
           }
         ),
-        /* @__PURE__ */ e("button", { onClick: () => L(!0), className: "floimg-toolbar__btn-secondary", children: "Import" }),
+        /* @__PURE__ */ e("button", { onClick: () => W(!0), className: "floimg-toolbar__btn-secondary", children: "Import" }),
         /* @__PURE__ */ e(
           "button",
           {
@@ -4567,7 +4595,7 @@ function $r({
       "Error: ",
       m.error
     ] }) }),
-    y && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ d("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col", children: [
+    k && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ d("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col", children: [
       /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ d("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Export Workflow" }),
@@ -4593,7 +4621,7 @@ function $r({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => T(!1),
+            onClick: () => L(!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",
@@ -4622,7 +4650,7 @@ function $r({
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => T(!1),
+              onClick: () => L(!1),
               className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
               children: "Close"
             }
@@ -4634,14 +4662,14 @@ function $r({
       Er,
       {
         isOpen: _,
-        onClose: () => L(!1),
+        onClose: () => W(!1),
         onImport: fe
       }
     )
   ] });
 }
 function Ar({ run: t, onClose: o }) {
-  const [n, r] = W(null), a = t.status === "error";
+  const [n, r] = T(null), a = t.status === "error";
   H(() => {
     const c = (l) => {
       l.key === "Escape" && o();
@@ -4666,8 +4694,8 @@ function Ar({ run: t, onClose: o }) {
   }, p = (c, l) => {
     const f = document.createElement("a");
     f.href = l;
-    const g = l.match(/data:image\/(\w+);/), w = g ? g[1] : "png";
-    f.download = `${c.replace(/[^a-zA-Z0-9]/g, "_")}.${w}`, document.body.appendChild(f), f.click(), document.body.removeChild(f);
+    const g = l.match(/data:image\/(\w+);/), v = g ? g[1] : "png";
+    f.download = `${c.replace(/[^a-zA-Z0-9]/g, "_")}.${v}`, document.body.appendChild(f), f.click(), document.body.removeChild(f);
   };
   return /* @__PURE__ */ e(
     "div",
@@ -4939,7 +4967,7 @@ function Ar({ run: t, onClose: o }) {
   );
 }
 function Rr({ runs: t, onClose: o }) {
-  const [n, r] = W(0), a = G(() => Math.max(...t.map((s) => s.outputs.length)), [t]), i = G(
+  const [n, r] = T(0), a = G(() => Math.max(...t.map((s) => s.outputs.length)), [t]), i = G(
     () => t.map((s) => s.outputs[n]),
     [t, n]
   ), m = (s) => s < 1e3 ? `${s}ms` : `${(s / 1e3).toFixed(1)}s`, u = (s) => new Date(s).toLocaleTimeString(void 0, {
@@ -5145,7 +5173,7 @@ function Hr(t, o) {
   r.href = n, r.download = o, document.body.appendChild(r), r.click(), document.body.removeChild(r), URL.revokeObjectURL(n);
 }
 function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
-  const r = N((x) => x.executionHistory), a = N((x) => x.clearHistory), i = N((x) => x.pinnedRunIds), m = N((x) => x.togglePinRun), [u, s] = W(null), [p, c] = W(!1), [l, f] = W([]), [g, w] = W(!1), { pinnedRuns: b, unpinnedRuns: k } = G(() => {
+  const r = N((x) => x.executionHistory), a = N((x) => x.clearHistory), i = N((x) => x.pinnedRunIds), m = N((x) => x.togglePinRun), [u, s] = T(null), [p, c] = T(!1), [l, f] = T([]), [g, v] = T(!1), { pinnedRuns: b, unpinnedRuns: y } = G(() => {
     const x = [], S = [];
     for (const I of r)
       i.includes(I.id) ? x.push(I) : S.push(I);
@@ -5155,21 +5183,21 @@ function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
     [r, l]
   ), h = (x) => {
     f((S) => S.includes(x) ? S.filter((I) => I !== x) : S.length >= 4 ? S : [...S, x]);
-  }, v = () => {
+  }, w = () => {
     c(!1), f([]);
-  }, [y, T] = W(!1), _ = async () => {
-    T(!0);
+  }, [k, L] = T(!1), _ = async () => {
+    L(!0);
     try {
       await Le(r);
     } finally {
-      T(!1);
+      L(!1);
     }
-  }, L = async () => {
-    T(!0);
+  }, W = async () => {
+    L(!0);
     try {
       await Le(b);
     } finally {
-      T(!1);
+      L(!1);
     }
   };
   return r.length === 0 ? /* @__PURE__ */ d("div", { className: "p-8 text-center text-zinc-500 dark:text-zinc-400", children: [
@@ -5221,7 +5249,7 @@ function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: v,
+            onClick: w,
             className: "text-sm text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300",
             children: "Cancel"
           }
@@ -5229,7 +5257,7 @@ function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
         /* @__PURE__ */ d(
           "button",
           {
-            onClick: () => w(!0),
+            onClick: () => v(!0),
             disabled: l.length < 2,
             className: "px-3 py-1.5 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed",
             children: [
@@ -5251,19 +5279,19 @@ function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
         b.length > 0 && /* @__PURE__ */ e(
           "button",
           {
-            onClick: L,
-            disabled: y,
+            onClick: W,
+            disabled: k,
             className: "text-sm text-zinc-500 hover:text-teal-600 dark:hover:text-teal-400 disabled:opacity-50",
-            children: y ? "Exporting..." : "Export Pinned"
+            children: k ? "Exporting..." : "Export Pinned"
           }
         ),
         /* @__PURE__ */ e(
           "button",
           {
             onClick: _,
-            disabled: y,
+            disabled: k,
             className: "text-sm text-zinc-500 hover:text-teal-600 dark:hover:text-teal-400 disabled:opacity-50",
-            children: y ? "Exporting..." : "Export All"
+            children: k ? "Exporting..." : "Export All"
           }
         ),
         /* @__PURE__ */ e(
@@ -5301,7 +5329,7 @@ function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
         x.id
       )) })
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-3", children: k.map((x) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "space-y-3", children: y.map((x) => /* @__PURE__ */ e(
       Pe,
       {
         run: x,
@@ -5322,7 +5350,7 @@ function Ur({ isGuest: t = !1, signUpUrl: o, onShare: n }) {
       {
         runs: C,
         onClose: () => {
-          w(!1), v();
+          v(!1), w();
         }
       }
     )
@@ -5963,7 +5991,7 @@ async function Fr(t) {
   }
 }
 function Kr({ onSelect: t, apiUrl: o = Vr }) {
-  const [n, r] = W(null), [a, i] = W(""), { data: m = _e, isLoading: u } = be({
+  const [n, r] = T(null), [a, i] = T(""), { data: m = _e, isLoading: u } = be({
     queryKey: ["templates", o],
     queryFn: () => Fr(o),
     staleTime: 5 * 60 * 1e3,
@@ -5982,7 +6010,7 @@ function Kr({ onSelect: t, apiUrl: o = Vr }) {
       c = c.filter(
         (f) => {
           var g;
-          return f.name.toLowerCase().includes(l) || f.description.toLowerCase().includes(l) || f.generator.toLowerCase().includes(l) || ((g = f.tags) == null ? void 0 : g.some((w) => w.toLowerCase().includes(l)));
+          return f.name.toLowerCase().includes(l) || f.description.toLowerCase().includes(l) || f.generator.toLowerCase().includes(l) || ((g = f.tags) == null ? void 0 : g.some((v) => v.toLowerCase().includes(l)));
         }
       );
     }
@@ -6153,11 +6181,11 @@ function Gr({
   onRename: a,
   onDuplicate: i
 }) {
-  const [m, u] = W(!1), [s, p] = W(t.name), [c, l] = W(!1), f = () => {
+  const [m, u] = T(!1), [s, p] = T(t.name), [c, l] = T(!1), f = () => {
     s.trim() && s !== t.name && a(s.trim()), u(!1);
-  }, g = (w) => {
-    const b = new Date(w), C = (/* @__PURE__ */ new Date()).getTime() - b.getTime(), h = Math.floor(C / 6e4), v = Math.floor(C / 36e5), y = Math.floor(C / 864e5);
-    return h < 1 ? "Just now" : h < 60 ? `${h}m ago` : v < 24 ? `${v}h ago` : y < 7 ? `${y}d ago` : b.toLocaleDateString();
+  }, g = (v) => {
+    const b = new Date(v), C = (/* @__PURE__ */ new Date()).getTime() - b.getTime(), h = Math.floor(C / 6e4), w = Math.floor(C / 36e5), k = Math.floor(C / 864e5);
+    return h < 1 ? "Just now" : h < 60 ? `${h}m ago` : w < 24 ? `${w}h ago` : k < 7 ? `${k}d ago` : b.toLocaleDateString();
   };
   return /* @__PURE__ */ d(
     "div",
@@ -6171,14 +6199,14 @@ function Gr({
               {
                 type: "text",
                 value: s,
-                onChange: (w) => p(w.target.value),
+                onChange: (v) => p(v.target.value),
                 onBlur: f,
-                onKeyDown: (w) => {
-                  w.key === "Enter" && f(), w.key === "Escape" && (p(t.name), u(!1));
+                onKeyDown: (v) => {
+                  v.key === "Enter" && f(), v.key === "Escape" && (p(t.name), u(!1));
                 },
                 className: "w-full px-1 py-0.5 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500",
                 autoFocus: !0,
-                onClick: (w) => w.stopPropagation()
+                onClick: (v) => v.stopPropagation()
               }
             ) : /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: t.name }),
             /* @__PURE__ */ d("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
@@ -6191,8 +6219,8 @@ function Gr({
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: (w) => {
-                  w.stopPropagation(), l(!c);
+                onClick: (v) => {
+                  v.stopPropagation(), l(!c);
                 },
                 className: "p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity",
                 children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
@@ -6204,8 +6232,8 @@ function Gr({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (w) => {
-                      w.stopPropagation(), u(!0), l(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), u(!0), l(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Rename"
@@ -6214,8 +6242,8 @@ function Gr({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (w) => {
-                      w.stopPropagation(), i(), l(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), i(), l(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Duplicate"
@@ -6224,8 +6252,8 @@ function Gr({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (w) => {
-                      w.stopPropagation(), window.confirm("Delete this workflow?") && r(), l(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), window.confirm("Delete this workflow?") && r(), l(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-red-600 dark:text-red-400 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Delete"
@@ -6384,7 +6412,7 @@ const Yr = [
   }
 ];
 function Zr({ provider: t }) {
-  const o = A((f) => f.ai), n = A((f) => f.setAIProvider), r = o[t.id], a = (r == null ? void 0 : r.enabled) ?? !1, i = (r == null ? void 0 : r.apiKey) ?? "", [m, u] = W(i), [s, p] = W(!1), c = () => {
+  const o = A((f) => f.ai), n = A((f) => f.setAIProvider), r = o[t.id], a = (r == null ? void 0 : r.enabled) ?? !1, i = (r == null ? void 0 : r.apiKey) ?? "", [m, u] = T(i), [s, p] = T(!1), c = () => {
     n(t.id, {
       apiKey: m,
       enabled: !a
@@ -6465,7 +6493,7 @@ function Zr({ provider: t }) {
   ] });
 }
 function Xr({ provider: t }) {
-  const o = A((c) => c.ai), n = A((c) => c.setAIProvider), r = o[t.id], a = (r == null ? void 0 : r.enabled) ?? !1, i = (r == null ? void 0 : r.baseUrl) ?? t.defaultUrl, [m, u] = W(i), s = () => {
+  const o = A((c) => c.ai), n = A((c) => c.setAIProvider), r = o[t.id], a = (r == null ? void 0 : r.enabled) ?? !1, i = (r == null ? void 0 : r.baseUrl) ?? t.defaultUrl, [m, u] = T(i), s = () => {
     n(t.id, {
       baseUrl: m,
       enabled: !a
@@ -6590,12 +6618,12 @@ function en() {
 }
 let pe = null;
 function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
-  const [r, a] = W([]), [i, m] = W(""), [u, s] = W(!1), [p, c] = W(null), [l, f] = W(""), [g, w] = W(null), [b, k] = W(null), [C, h] = W(""), [v, y] = W(), [T, _] = W(!1), [L, x] = W(), S = te(null), I = te(null);
+  const [r, a] = T([]), [i, m] = T(""), [u, s] = T(!1), [p, c] = T(null), [l, f] = T(""), [g, v] = T(null), [b, y] = T(null), [C, h] = T(""), [w, k] = T(), [L, _] = T(!1), [W, x] = T(), S = te(null), I = te(null);
   H(() => {
     t && b === null && Tt().then(($) => {
-      k($.available), h($.message), y($.reason), _($.isCloudDeployment ?? !1), x($.supportUrl);
+      y($.available), h($.message), k($.reason), _($.isCloudDeployment ?? !1), x($.supportUrl);
     }).catch(() => {
-      k(!1), h("Failed to check AI availability"), y("service_unavailable");
+      y(!1), h("Failed to check AI availability"), k("service_unavailable");
     });
   }, [t, b]), H(() => {
     t && I.current && I.current.focus();
@@ -6603,24 +6631,24 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
     var $;
     ($ = S.current) == null || $.scrollIntoView({ behavior: "smooth" });
   }, [r]);
-  const O = M(() => {
+  const D = M(() => {
     if (!i.trim() || u) return;
     const $ = {
       role: "user",
       content: i.trim(),
       timestamp: Date.now()
     };
-    a((z) => [...z, $]), m(""), s(!0), w(null), c(null), f("");
+    a((z) => [...z, $]), m(""), s(!0), v(null), c(null), f("");
     let F;
     pe = qe(
       "/api/generate/workflow/stream",
       { prompt: $.content, history: r },
       {
         onMessage: (z) => {
-          z.type, z.type === "generation.progress" && (c(z.data.phase), f(z.data.message)), z.type === "generation.completed" && (F = z.data), z.type === "generation.error" && w(z.data.error);
+          z.type, z.type === "generation.progress" && (c(z.data.phase), f(z.data.message)), z.type === "generation.completed" && (F = z.data), z.type === "generation.error" && v(z.data.error);
         },
         onError: (z) => {
-          pe = null, w(z.message || "Failed to generate workflow"), s(!1), c(null);
+          pe = null, v(z.message || "Failed to generate workflow"), s(!1), c(null);
         },
         onClose: () => {
           pe = null;
@@ -6637,11 +6665,11 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
   }, [i, u, r]), B = M(() => {
     pe && (pe.abort(), pe = null), s(!1), c(null), f("");
   }, []), K = ($) => {
-    $.key === "Enter" && !$.shiftKey && ($.preventDefault(), O());
+    $.key === "Enter" && !$.shiftKey && ($.preventDefault(), D());
   }, Q = ($) => {
     n($), o();
   }, q = () => {
-    a([]), w(null);
+    a([]), v(null);
   };
   return t ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ d("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-2xl mx-4 h-[80vh] flex flex-col", children: [
     /* @__PURE__ */ d("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
@@ -6707,7 +6735,7 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
     ] }),
     /* @__PURE__ */ d("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
       b === !1 && /* @__PURE__ */ e("div", { className: "bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4", children: /* @__PURE__ */ d("div", { className: "flex items-start gap-3", children: [
-        v === "tier_limit" ? /* @__PURE__ */ e(
+        w === "tier_limit" ? /* @__PURE__ */ e(
           "svg",
           {
             className: "h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5",
@@ -6743,10 +6771,10 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
           }
         ),
         /* @__PURE__ */ d("div", { children: [
-          /* @__PURE__ */ e("p", { className: "font-medium text-amber-800 dark:text-amber-200", children: v === "tier_limit" ? "AI Workflow Generation Not Available" : "AI Generation Not Available" }),
+          /* @__PURE__ */ e("p", { className: "font-medium text-amber-800 dark:text-amber-200", children: w === "tier_limit" ? "AI Workflow Generation Not Available" : "AI Generation Not Available" }),
           /* @__PURE__ */ e("p", { className: "text-sm text-amber-700 dark:text-amber-300 mt-1", children: C }),
           /* @__PURE__ */ d("div", { className: "flex flex-col sm:flex-row gap-2 mt-3", children: [
-            v === "tier_limit" && /* @__PURE__ */ e(
+            w === "tier_limit" && /* @__PURE__ */ e(
               "a",
               {
                 href: "/pricing",
@@ -6754,15 +6782,15 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
                 children: "View Plans"
               }
             ),
-            v === "service_unavailable" && L && /* @__PURE__ */ e(
+            w === "service_unavailable" && W && /* @__PURE__ */ e(
               "a",
               {
-                href: L,
+                href: W,
                 className: "text-sm font-medium text-amber-700 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300",
                 children: "Contact Support"
               }
             ),
-            v === "not_configured" && !T && /* @__PURE__ */ e(
+            w === "not_configured" && !L && /* @__PURE__ */ e(
               "a",
               {
                 href: "https://floimg.com/docs/studio/ai-workflows",
@@ -7019,7 +7047,7 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: O,
+            onClick: D,
             disabled: !i.trim() || u || b === !1,
             className: "self-end px-4 py-2 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg transition-colors",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -7040,7 +7068,7 @@ function tn({ isOpen: t, onClose: o, onApplyWorkflow: n }) {
 }
 const rn = 20, nn = 500, on = 1e5;
 function an({ isOpen: t, onClose: o, nodeLabel: n, output: r }) {
-  const [a, i] = W("formatted"), [m, u] = W(!1), s = M(() => {
+  const [a, i] = T("formatted"), [m, u] = T(!1), s = M(() => {
     const c = a === "formatted" && r.parsed ? JSON.stringify(r.parsed, null, 2) : r.content;
     navigator.clipboard.writeText(c).then(() => {
       u(!0), setTimeout(() => u(!1), 2e3);
@@ -7179,9 +7207,9 @@ function an({ isOpen: t, onClose: o, nodeLabel: n, output: r }) {
   ] }) });
 }
 function sn({ data: t }) {
-  return /* @__PURE__ */ e("div", { className: "font-mono text-sm", children: /* @__PURE__ */ e(Me, { value: t, depth: 0, maxDepth: rn }) });
+  return /* @__PURE__ */ e("div", { className: "font-mono text-sm", children: /* @__PURE__ */ e(We, { value: t, depth: 0, maxDepth: rn }) });
 }
-function Me({ value: t, depth: o, keyName: n, maxDepth: r }) {
+function We({ value: t, depth: o, keyName: n, maxDepth: r }) {
   const a = o * 16;
   if (o >= r)
     return /* @__PURE__ */ d("div", { style: { marginLeft: a }, className: "py-0.5", children: [
@@ -7256,7 +7284,7 @@ function Me({ value: t, depth: o, keyName: n, maxDepth: r }) {
         ] })
       ] }),
       !n && /* @__PURE__ */ e("span", { className: "text-gray-500 dark:text-zinc-500 py-0.5 block", children: "[" }),
-      i.map((u, s) => /* @__PURE__ */ e(Me, { value: u, depth: o + 1, maxDepth: r }, s)),
+      i.map((u, s) => /* @__PURE__ */ e(We, { value: u, depth: o + 1, maxDepth: r }, s)),
       m > 0 && /* @__PURE__ */ d("div", { style: { marginLeft: (o + 1) * 16 }, className: "py-0.5 text-zinc-500 italic", children: [
         "...and ",
         m,
@@ -7278,7 +7306,7 @@ function Me({ value: t, depth: o, keyName: n, maxDepth: r }) {
         /* @__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: "{" }),
-      i.map(([m, u]) => /* @__PURE__ */ e(Me, { value: u, depth: o + 1, keyName: m, maxDepth: r }, m)),
+      i.map(([m, u]) => /* @__PURE__ */ e(We, { value: u, depth: o + 1, keyName: m, maxDepth: r }, 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: "}" }) })
     ] });
   }
@@ -7363,14 +7391,14 @@ function dn(t, o, n, r) {
   }
 }
 function cn({ onToggleAIChat: t }) {
-  const o = A((z) => z.showCommandPalette), n = A((z) => z.closeCommandPalette), r = A((z) => z.keyboard), [a, i] = W(""), m = lt(a), [u, s] = W(0), p = we(), c = je(o), l = te(null), f = N((z) => z.nodes), g = N((z) => z.selectedNodeId), w = N((z) => z.execution), b = N((z) => z.saveWorkflow), k = N((z) => z.execute), C = N((z) => z.duplicateNode), h = N((z) => z.toggleLibrary), v = N((z) => z.newWorkflow), y = A((z) => z.openSettings), T = A((z) => z.openShortcutsModal), _ = A((z) => z.openExport), L = A((z) => z.openImport), x = A((z) => z.requestNewWorkflow), S = N((z) => z.hasUnsavedChanges), I = M(
+  const o = A((z) => z.showCommandPalette), n = A((z) => z.closeCommandPalette), r = A((z) => z.keyboard), [a, i] = T(""), m = lt(a), [u, s] = T(0), p = we(), c = je(o), l = te(null), f = N((z) => z.nodes), g = N((z) => z.selectedNodeId), v = N((z) => z.execution), b = N((z) => z.saveWorkflow), y = N((z) => z.execute), C = N((z) => z.duplicateNode), h = N((z) => z.toggleLibrary), w = N((z) => z.newWorkflow), k = A((z) => z.openSettings), L = A((z) => z.openShortcutsModal), _ = A((z) => z.openExport), W = A((z) => z.openImport), x = A((z) => z.requestNewWorkflow), S = N((z) => z.hasUnsavedChanges), I = M(
     (z) => {
       var U;
       const R = he.find((Z) => Z.action === z);
       return R ? ((U = r == null ? void 0 : r.shortcuts) == null ? void 0 : U[z]) !== void 0 ? r.shortcuts[z] ?? null : R.defaultBinding : null;
     },
     [r]
-  ), O = G(() => [
+  ), D = G(() => [
     // Workflow commands
     {
       id: "save",
@@ -7389,9 +7417,9 @@ function cn({ onToggleAIChat: t }) {
       category: "workflow",
       shortcut: I("execute") ?? void 0,
       action: () => {
-        f.length > 0 && w.status !== "running" && k();
+        f.length > 0 && v.status !== "running" && y();
       },
-      enabled: () => f.length > 0 && w.status !== "running",
+      enabled: () => f.length > 0 && v.status !== "running",
       keywords: ["run", "execute", "start"]
     },
     {
@@ -7400,7 +7428,7 @@ function cn({ onToggleAIChat: t }) {
       category: "workflow",
       shortcut: I("newWorkflow") ?? void 0,
       action: () => {
-        n == null || n(), x(S, v);
+        n == null || n(), x(S, w);
       },
       keywords: ["new", "create", "blank"]
     },
@@ -7420,7 +7448,7 @@ function cn({ onToggleAIChat: t }) {
       name: "Import Workflow",
       category: "workflow",
       shortcut: I("importWorkflow") ?? void 0,
-      action: () => L == null ? void 0 : L(),
+      action: () => W == null ? void 0 : W(),
       keywords: ["import", "upload", "load"]
     },
     // Editing commands
@@ -7457,7 +7485,7 @@ function cn({ onToggleAIChat: t }) {
       name: "Open Settings",
       category: "ui",
       shortcut: I("settings") ?? void 0,
-      action: () => y(),
+      action: () => k(),
       keywords: ["settings", "preferences", "api", "keys"]
     },
     {
@@ -7465,36 +7493,36 @@ function cn({ onToggleAIChat: t }) {
       name: "Show Keyboard Shortcuts",
       category: "ui",
       shortcut: I("showShortcuts") ?? void 0,
-      action: () => T == null ? void 0 : T(),
+      action: () => L == null ? void 0 : L(),
       keywords: ["shortcuts", "keyboard", "hotkeys", "help"]
     }
   ], [
     f.length,
     g,
-    w.status,
+    v.status,
     S,
     b,
-    k,
-    v,
+    y,
+    w,
     C,
     h,
-    y,
-    T,
-    _,
+    k,
     L,
+    _,
+    W,
     t,
     I,
     n,
     x
   ]), B = G(() => {
-    if (!m.trim()) return O;
+    if (!m.trim()) return D;
     const z = m.toLowerCase();
-    return O.filter((R) => {
+    return D.filter((R) => {
       var X;
       const U = R.name.toLowerCase().includes(z), Z = (X = R.keywords) == null ? void 0 : X.some((ee) => ee.toLowerCase().includes(z));
       return U || Z;
     });
-  }, [O, m]), K = G(() => {
+  }, [D, m]), K = G(() => {
     const z = {
       workflow: [],
       editing: [],
@@ -7606,7 +7634,7 @@ function cn({ onToggleAIChat: t }) {
               return R.length === 0 ? null : /* @__PURE__ */ d("div", { className: "mb-2", children: [
                 /* @__PURE__ */ e("div", { className: "px-4 py-1 text-xs font-semibold text-zinc-500 dark:text-zinc-400 uppercase tracking-wider", children: Ge[z] || z }),
                 R.map((U) => {
-                  const Z = F(), X = Z === u, ee = !U.enabled || U.enabled(), ue = ee ? null : dn(U, f, g, w.status);
+                  const Z = F(), X = Z === u, ee = !U.enabled || U.enabled(), ue = ee ? null : dn(U, f, g, v.status);
                   return /* @__PURE__ */ d(
                     "button",
                     {
@@ -7659,7 +7687,7 @@ function cn({ onToggleAIChat: t }) {
   );
 }
 function mn() {
-  const t = A((c) => c.showShortcutsModal), o = A((c) => c.closeShortcutsModal), n = A((c) => c.keyboard), [r, a] = W(""), i = we(), m = je(t), u = (c) => {
+  const t = A((c) => c.showShortcutsModal), o = A((c) => c.closeShortcutsModal), n = A((c) => c.keyboard), [r, a] = T(""), i = we(), m = je(t), u = (c) => {
     var f;
     const l = he.find((g) => g.action === c);
     return l ? ((f = n == null ? void 0 : n.shortcuts) == null ? void 0 : f[c]) !== void 0 ? n.shortcuts[c] ?? null : l.defaultBinding : null;
@@ -7674,7 +7702,7 @@ function mn() {
       };
       for (const g of Object.keys(c))
         f[g] = c[g].filter(
-          (w) => w.name.toLowerCase().includes(l) || w.description.toLowerCase().includes(l)
+          (v) => v.name.toLowerCase().includes(l) || v.description.toLowerCase().includes(l)
         );
       return f;
     }
@@ -7872,14 +7900,14 @@ function hn() {
   return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: n, onDragOver: r, children: /* @__PURE__ */ e(nr, {}) });
 }
 function wn() {
-  const [t, o] = W("editor"), [n, r] = W(!1), a = N((x) => x.loadTemplate), i = N((x) => x.loadGeneratedWorkflow), m = N((x) => x.loadRemixImage), u = N((x) => x.inspectedNodeId), s = N((x) => x.execution.dataOutputs), p = N((x) => x.closeOutputInspector), c = N((x) => x.nodes), l = N((x) => x.selectedNodeId), f = N((x) => x.unseenRunCount), g = N((x) => x.hasUnseenErrors), w = N((x) => x.markRunsAsSeen), b = u ? c.find((x) => x.id === u) : null, k = u ? s[u] : null;
+  const [t, o] = T("editor"), [n, r] = T(!1), a = N((x) => x.loadTemplate), i = N((x) => x.loadGeneratedWorkflow), m = N((x) => x.loadRemixImage), u = N((x) => x.inspectedNodeId), s = N((x) => x.execution.dataOutputs), p = N((x) => x.closeOutputInspector), c = N((x) => x.nodes), l = N((x) => x.selectedNodeId), f = N((x) => x.unseenRunCount), g = N((x) => x.hasUnseenErrors), v = N((x) => x.markRunsAsSeen), b = u ? c.find((x) => x.id === u) : null, y = u ? s[u] : null;
   H(() => {
     const x = new URLSearchParams(window.location.search), S = x.get("template"), I = x.get("remixImage");
     S ? (async () => {
       try {
-        const O = await fetch(`${Oe}/api/templates/${S}`);
-        if (O.ok) {
-          const K = (await O.json()).template;
+        const D = await fetch(`${Oe}/api/templates/${S}`);
+        if (D.ok) {
+          const K = (await D.json()).template;
           a(K);
         }
       } catch {
@@ -7899,8 +7927,8 @@ function wn() {
       try {
         const S = await fetch(`${Oe}/api/templates/${x}`);
         if (S.ok) {
-          const O = (await S.json()).template;
-          a(O), o("editor");
+          const D = (await S.json()).template;
+          a(D), o("editor");
         }
       } catch {
       }
@@ -7911,25 +7939,25 @@ function wn() {
       i(x), o("editor");
     },
     [i]
-  ), v = M(() => {
+  ), w = M(() => {
     r((x) => !x);
-  }, []), y = M(() => {
-    o("history"), w();
-  }, [w]), T = A((x) => x.showNewWorkflowConfirm), _ = A((x) => x.confirmNewWorkflow), L = A((x) => x.cancelNewWorkflow);
+  }, []), k = M(() => {
+    o("history"), v();
+  }, [v]), L = A((x) => x.showNewWorkflowConfirm), _ = A((x) => x.confirmNewWorkflow), W = A((x) => x.cancelNewWorkflow);
   return /* @__PURE__ */ d(xt, { children: [
-    /* @__PURE__ */ e(pn, { onToggleAIChat: v }),
-    /* @__PURE__ */ e(cn, { onToggleAIChat: v }),
+    /* @__PURE__ */ e(pn, { onToggleAIChat: w }),
+    /* @__PURE__ */ e(cn, { onToggleAIChat: w }),
     /* @__PURE__ */ e(mn, {}),
     /* @__PURE__ */ e(
       un,
       {
-        isOpen: T,
+        isOpen: L,
         title: "Unsaved Changes",
         message: "You have unsaved changes. Creating a new workflow will discard them. Are you sure you want to continue?",
         confirmText: "Create New",
         cancelText: "Keep Editing",
         onConfirm: _,
-        onCancel: L,
+        onCancel: W,
         destructive: !0
       }
     ),
@@ -7942,14 +7970,14 @@ function wn() {
         onApplyWorkflow: h
       }
     ),
-    b && k && /* @__PURE__ */ e(
+    b && y && /* @__PURE__ */ e(
       an,
       {
         isOpen: !0,
         onClose: p,
         nodeId: u,
         nodeLabel: b.data.providerLabel || b.type || "Node",
-        output: k
+        output: y
       }
     ),
     /* @__PURE__ */ e(Jr, {}),
@@ -7968,7 +7996,7 @@ function wn() {
           /* @__PURE__ */ d(
             "button",
             {
-              onClick: y,
+              onClick: k,
               className: `floimg-tab ${t === "history" ? "floimg-tab--active" : ""} relative`,
               children: [
                 "History",