@teamflojo/floimg-studio-ui 0.3.0 → 0.3.1

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsxs as n, jsx as e, Fragment as B } from "react/jsx-runtime";
-import { memo as G, useRef as te, useCallback as W, useState as C, useEffect as U, useMemo as ie } from "react";
-import Ne, { Handle as P, Position as $, applyNodeChanges as ze, applyEdgeChanges as Ce, MarkerType as Ie, Background as Se, Controls as Le, MiniMap as We, ReactFlowProvider as Ae, useReactFlow as Pe } from "reactflow";
-import { create as ue } from "zustand";
-import { useQuery as K } from "@tanstack/react-query";
-function $e(r, l) {
+import { jsxs as n, jsx as e, Fragment as q } from "react/jsx-runtime";
+import { memo as G, useRef as te, useCallback as L, useState as C, useEffect as U, useMemo as de } from "react";
+import Ce, { Handle as P, Position as M, applyNodeChanges as Ie, applyEdgeChanges as Se, MarkerType as Ae, Background as Le, Controls as We, MiniMap as Pe, ReactFlowProvider as Me, useReactFlow as De } from "reactflow";
+import { create as he } from "zustand";
+import { useQuery as _ } from "@tanstack/react-query";
+function Te(r, d) {
   let t;
   try {
     t = r();
@@ -11,18 +11,18 @@ function $e(r, l) {
     return;
   }
   return {
-    getItem: (i) => {
-      var s;
-      const p = (a) => a === null ? null : JSON.parse(a, void 0), d = (s = t.getItem(i)) != null ? s : null;
-      return d instanceof Promise ? d.then(p) : p(d);
+    getItem: (s) => {
+      var i;
+      const p = (a) => a === null ? null : JSON.parse(a, void 0), l = (i = t.getItem(s)) != null ? i : null;
+      return l instanceof Promise ? l.then(p) : p(l);
     },
-    setItem: (i, s) => t.setItem(i, JSON.stringify(s, void 0)),
-    removeItem: (i) => t.removeItem(i)
+    setItem: (s, i) => t.setItem(s, JSON.stringify(i, void 0)),
+    removeItem: (s) => t.removeItem(s)
   };
 }
-const re = (r) => (l) => {
+const re = (r) => (d) => {
   try {
-    const t = r(l);
+    const t = r(d);
     return t instanceof Promise ? t : {
       then(o) {
         return re(o)(t);
@@ -41,61 +41,61 @@ const re = (r) => (l) => {
       }
     };
   }
-}, je = (r, l) => (t, o, i) => {
-  let s = {
-    storage: $e(() => localStorage),
-    partialize: (v) => v,
+}, je = (r, d) => (t, o, s) => {
+  let i = {
+    storage: Te(() => localStorage),
+    partialize: (y) => y,
     version: 0,
-    merge: (v, w) => ({
+    merge: (y, w) => ({
       ...w,
-      ...v
+      ...y
     }),
-    ...l
+    ...d
   }, p = !1;
-  const d = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
-  let m = s.storage;
+  const l = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
+  let m = i.storage;
   if (!m)
     return r(
-      (...v) => {
+      (...y) => {
         console.warn(
-          `[zustand persist middleware] Unable to update item '${s.name}', the given storage is currently unavailable.`
-        ), t(...v);
+          `[zustand persist middleware] Unable to update item '${i.name}', the given storage is currently unavailable.`
+        ), t(...y);
       },
       o,
-      i
+      s
     );
   const c = () => {
-    const v = s.partialize({ ...o() });
-    return m.setItem(s.name, {
-      state: v,
-      version: s.version
+    const y = i.partialize({ ...o() });
+    return m.setItem(i.name, {
+      state: y,
+      version: i.version
     });
-  }, u = i.setState;
-  i.setState = (v, w) => (u(v, w), c());
+  }, u = s.setState;
+  s.setState = (y, w) => (u(y, w), c());
   const h = r(
-    (...v) => (t(...v), c()),
+    (...y) => (t(...y), c()),
     o,
-    i
+    s
   );
-  i.getInitialState = () => h;
+  s.getInitialState = () => h;
   let b;
-  const y = () => {
-    var v, w;
+  const v = () => {
+    var y, w;
     if (!m) return;
-    p = !1, d.forEach((g) => {
+    p = !1, l.forEach((g) => {
       var N;
       return g((N = o()) != null ? N : h);
     });
-    const x = ((w = s.onRehydrateStorage) == null ? void 0 : w.call(s, (v = o()) != null ? v : h)) || void 0;
-    return re(m.getItem.bind(m))(s.name).then((g) => {
+    const f = ((w = i.onRehydrateStorage) == null ? void 0 : w.call(i, (y = o()) != null ? y : h)) || void 0;
+    return re(m.getItem.bind(m))(i.name).then((g) => {
       if (g)
-        if (typeof g.version == "number" && g.version !== s.version) {
-          if (s.migrate) {
-            const N = s.migrate(
+        if (typeof g.version == "number" && g.version !== i.version) {
+          if (i.migrate) {
+            const N = i.migrate(
               g.state,
               g.version
             );
-            return N instanceof Promise ? N.then((A) => [!0, A]) : [!0, N];
+            return N instanceof Promise ? N.then((W) => [!0, W]) : [!0, N];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
@@ -105,45 +105,45 @@ const re = (r) => (l) => {
       return [!1, void 0];
     }).then((g) => {
       var N;
-      const [A, k] = g;
-      if (b = s.merge(
+      const [W, k] = g;
+      if (b = i.merge(
         k,
         (N = o()) != null ? N : h
-      ), t(b, !0), A)
+      ), t(b, !0), W)
         return c();
     }).then(() => {
-      x == null || x(b, void 0), b = o(), p = !0, a.forEach((g) => g(b));
+      f == null || f(b, void 0), b = o(), p = !0, a.forEach((g) => g(b));
     }).catch((g) => {
-      x == null || x(void 0, g);
+      f == null || f(void 0, g);
     });
   };
-  return i.persist = {
-    setOptions: (v) => {
-      s = {
-        ...s,
-        ...v
-      }, v.storage && (m = v.storage);
+  return s.persist = {
+    setOptions: (y) => {
+      i = {
+        ...i,
+        ...y
+      }, y.storage && (m = y.storage);
     },
     clearStorage: () => {
-      m == null || m.removeItem(s.name);
+      m == null || m.removeItem(i.name);
     },
-    getOptions: () => s,
-    rehydrate: () => y(),
+    getOptions: () => i,
+    rehydrate: () => v(),
     hasHydrated: () => p,
-    onHydrate: (v) => (d.add(v), () => {
-      d.delete(v);
+    onHydrate: (y) => (l.add(y), () => {
+      l.delete(y);
     }),
-    onFinishHydration: (v) => (a.add(v), () => {
-      a.delete(v);
+    onFinishHydration: (y) => (a.add(y), () => {
+      a.delete(y);
     })
-  }, s.skipHydration || y(), b || h;
-}, ge = je, j = "/api";
-async function T(r, l) {
+  }, i.skipHydration || v(), b || h;
+}, fe = je, D = "/api";
+async function $(r, d) {
   const t = await fetch(r, {
-    ...l,
+    ...d,
     headers: {
       "Content-Type": "application/json",
-      ...l == null ? void 0 : l.headers
+      ...d == null ? void 0 : d.headers
     }
   });
   if (!t.ok) {
@@ -152,49 +152,49 @@ async function T(r, l) {
   }
   return t.json();
 }
-async function Me() {
-  return T(`${j}/nodes/generators`);
+async function $e() {
+  return $(`${D}/nodes/generators`);
 }
-async function De() {
-  return T(`${j}/nodes/transforms`);
+async function Ue() {
+  return $(`${D}/nodes/transforms`);
 }
-async function Te() {
-  return T(`${j}/nodes/text`);
+async function Re() {
+  return $(`${D}/nodes/text`);
 }
-async function Ue() {
-  return T(`${j}/nodes/vision`);
+async function Oe() {
+  return $(`${D}/nodes/vision`);
 }
-async function Oe(r, l, t) {
-  return T(`${j}/execute/sync`, {
+async function Ee(r, d, t) {
+  return $(`${D}/execute/sync`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: l, aiProviders: t })
+    body: JSON.stringify({ nodes: r, edges: d, aiProviders: t })
   });
 }
-async function Re(r, l) {
-  return T(`${j}/export/yaml`, {
+async function qe(r, d) {
+  return $(`${D}/export/yaml`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: l })
+    body: JSON.stringify({ nodes: r, edges: d })
   });
 }
-async function Ee() {
-  return T(`${j}/images`);
+async function Be() {
+  return $(`${D}/images`);
 }
 function le(r) {
-  return `${j}/images/${r}/blob`;
+  return `${D}/images/${r}/blob`;
 }
-async function Be(r) {
+async function Ge(r) {
   try {
-    return await T(`${j}/images/${r}/workflow`);
+    return await $(`${D}/images/${r}/workflow`);
   } catch {
     return null;
   }
 }
-async function Ve(r) {
-  const l = new FormData();
-  l.append("file", r);
-  const t = await fetch(`${j}/uploads`, {
+async function Fe(r) {
+  const d = new FormData();
+  d.append("file", r);
+  const t = await fetch(`${D}/uploads`, {
     method: "POST",
-    body: l
+    body: d
   });
   if (!t.ok) {
     const o = await t.json().catch(() => ({ error: "Upload failed" }));
@@ -202,74 +202,74 @@ async function Ve(r) {
   }
   return t.json();
 }
-async function Ge() {
-  return T(`${j}/uploads`);
+async function Ve() {
+  return $(`${D}/uploads`);
 }
-async function Fe(r) {
-  const l = await fetch(`${j}/uploads/${r}`, {
+async function He(r) {
+  const d = await fetch(`${D}/uploads/${r}`, {
     method: "DELETE"
   });
-  if (!l.ok)
-    throw new Error(`Failed to delete upload: ${l.status}`);
+  if (!d.ok)
+    throw new Error(`Failed to delete upload: ${d.status}`);
 }
-function he(r) {
-  return `${j}/uploads/${r}/blob`;
+function be(r) {
+  return `${D}/uploads/${r}/blob`;
 }
-async function He(r) {
-  return T(`${j}/import`, {
+async function _e(r) {
+  return $(`${D}/import`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
-async function _e(r) {
-  return T(`${j}/import/validate`, {
+async function Ke(r) {
+  return $(`${D}/import/validate`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
-async function Ke(r) {
-  return T(`${j}/generate/workflow`, {
+async function Qe(r) {
+  return $(`${D}/generate/workflow`, {
     method: "POST",
     body: JSON.stringify(r)
   });
 }
-async function qe() {
-  return T(`${j}/generate/status`);
+async function Je() {
+  return $(`${D}/generate/status`);
 }
-const de = "http://localhost:11434", ce = "http://localhost:1234", V = ue()(
-  ge(
-    (r, l) => ({
+const ce = "http://localhost:11434", me = "http://localhost:1234", B = he()(
+  fe(
+    (r, d) => ({
       ai: {
         ollama: {
-          baseUrl: de,
+          baseUrl: ce,
           enabled: !1
         },
         lmstudio: {
-          baseUrl: ce,
+          baseUrl: me,
           enabled: !1
         }
       },
       showSettings: !1,
       setAIProvider: (t, o) => {
-        r((i) => ({
+        r((s) => ({
           ai: {
-            ...i.ai,
+            ...s.ai,
             [t]: o
           }
         }));
       },
       clearAIProvider: (t) => {
         r((o) => {
-          const i = { ...o.ai };
-          return delete i[t], { ai: i };
+          const s = { ...o.ai };
+          return delete s[t], { ai: s };
         });
       },
       openSettings: () => r({ showSettings: !0 }),
       closeSettings: () => r({ showSettings: !1 }),
       getConfiguredProviders: () => {
-        var i, s, p, d, a, m, c;
-        const { ai: t } = l(), o = {};
-        return (i = t.openai) != null && i.enabled && t.openai.apiKey && (o.openai = { apiKey: t.openai.apiKey }), (s = t.anthropic) != null && s.enabled && t.anthropic.apiKey && (o.anthropic = { apiKey: t.anthropic.apiKey }), (p = t.gemini) != null && p.enabled && t.gemini.apiKey && (o.gemini = { apiKey: t.gemini.apiKey }), (d = t.grok) != null && d.enabled && t.grok.apiKey && (o.grok = { apiKey: t.grok.apiKey }), (a = t.openrouter) != null && a.enabled && t.openrouter.apiKey && (o.openrouter = { apiKey: t.openrouter.apiKey }), (m = t.ollama) != null && m.enabled && (o.ollama = { baseUrl: t.ollama.baseUrl || de }), (c = t.lmstudio) != null && c.enabled && (o.lmstudio = { baseUrl: t.lmstudio.baseUrl || ce }), o;
+        var s, i, p, l, a, m, c;
+        const { ai: t } = d(), o = {};
+        return (s = t.openai) != null && s.enabled && t.openai.apiKey && (o.openai = { apiKey: t.openai.apiKey }), (i = t.anthropic) != null && i.enabled && t.anthropic.apiKey && (o.anthropic = { apiKey: t.anthropic.apiKey }), (p = t.gemini) != null && p.enabled && t.gemini.apiKey && (o.gemini = { apiKey: t.gemini.apiKey }), (l = t.grok) != null && l.enabled && t.grok.apiKey && (o.grok = { apiKey: t.grok.apiKey }), (a = t.openrouter) != null && a.enabled && t.openrouter.apiKey && (o.openrouter = { apiKey: t.openrouter.apiKey }), (m = t.ollama) != null && m.enabled && (o.ollama = { baseUrl: t.ollama.baseUrl || ce }), (c = t.lmstudio) != null && c.enabled && (o.lmstudio = { baseUrl: t.lmstudio.baseUrl || me }), o;
       }
     }),
     {
@@ -279,17 +279,17 @@ const de = "http://localhost:11434", ce = "http://localhost:1234", V = ue()(
     }
   )
 );
-let Je = 0;
-function H() {
-  return `node_${++Je}`;
+let Ye = 0;
+function V() {
+  return `node_${++Ye}`;
 }
-function me() {
-  const r = Date.now(), l = Math.random().toString(36).substring(2, 8);
-  return `wf_${r}_${l}`;
+function pe() {
+  const r = Date.now(), d = Math.random().toString(36).substring(2, 8);
+  return `wf_${r}_${d}`;
 }
-const f = ue()(
-  ge(
-    (r, l) => ({
+const x = he()(
+  fe(
+    (r, d) => ({
       nodes: [],
       edges: [],
       selectedNodeId: null,
@@ -314,25 +314,25 @@ const f = ue()(
         nodeStatus: {}
       },
       loadTemplate: (t) => {
-        const o = /* @__PURE__ */ new Map(), i = t.workflow.nodes.map((p) => {
-          const d = H();
-          return o.set(p.id, d), {
-            id: d,
+        const o = /* @__PURE__ */ new Map(), s = t.workflow.nodes.map((p) => {
+          const l = V();
+          return o.set(p.id, l), {
+            id: l,
             type: p.type,
             position: p.position,
             data: p.data
           };
-        }), s = t.workflow.edges.map((p) => {
-          const d = o.get(p.source) || p.source, a = o.get(p.target) || p.target;
+        }), i = t.workflow.edges.map((p) => {
+          const l = o.get(p.source) || p.source, a = o.get(p.target) || p.target;
           return {
-            id: `edge_${d}_${a}`,
-            source: d,
+            id: `edge_${l}_${a}`,
+            source: l,
             target: a
           };
         });
         r({
-          nodes: i,
-          edges: s,
+          nodes: s,
+          edges: i,
           selectedNodeId: null,
           currentTemplateId: t.id,
           previewVisible: {},
@@ -377,104 +377,104 @@ const f = ue()(
       setTextProviders: (t) => r({ textProviders: t }),
       setVisionProviders: (t) => r({ visionProviders: t }),
       addNode: (t, o) => {
-        var d, a, m;
-        const i = H();
-        let s;
+        var l, a, m;
+        const s = V();
+        let i;
         if (t.type === "generator")
-          s = {
+          i = {
             generatorName: t.name,
-            params: Q(t),
+            params: J(t),
             isAI: t.isAI,
             // Track if this is an AI generator (can accept text input)
             acceptsReferenceImages: t.acceptsReferenceImages,
             maxReferenceImages: t.maxReferenceImages
           };
         else if (t.type === "transform")
-          s = {
+          i = {
             operation: t.name,
             providerName: t.providerName,
             // Track which provider this transform belongs to
             isAI: t.isAI,
             // Track if this is an AI transform (can accept text input)
-            params: Q(t),
+            params: J(t),
             acceptsReferenceImages: t.acceptsReferenceImages,
             maxReferenceImages: t.maxReferenceImages
           };
         else if (t.type === "input")
-          s = {
+          i = {
             uploadId: void 0,
             filename: void 0,
             mime: void 0
           };
         else if (t.type === "vision")
-          s = {
+          i = {
             providerName: t.name,
             providerLabel: t.label,
             // Human-readable label (e.g., "Gemini Vision")
-            params: Q(t)
+            params: J(t)
           };
         else if (t.type === "text")
-          s = {
+          i = {
             providerName: t.name,
             providerLabel: t.label,
             // Human-readable label (e.g., "Gemini Text")
-            params: Q(t)
+            params: J(t)
           };
         else {
-          const c = ((d = t.params) == null ? void 0 : d.properties) || {}, u = ((a = c.provider) == null ? void 0 : a.default) || "filesystem";
-          s = {
+          const c = ((l = t.params) == null ? void 0 : l.properties) || {}, u = ((a = c.provider) == null ? void 0 : a.default) || "filesystem";
+          i = {
             destination: ((m = c.destination) == null ? void 0 : m.default) || "./output/image.png",
             provider: u
           };
         }
         const p = {
-          id: i,
+          id: s,
           type: t.type,
           position: o,
-          data: s
+          data: i
         };
         r((c) => ({
           nodes: [...c.nodes, p]
         }));
       },
       updateNodeData: (t, o) => {
-        r((i) => ({
-          nodes: i.nodes.map(
-            (s) => s.id === t ? { ...s, data: { ...s.data, ...o } } : s
+        r((s) => ({
+          nodes: s.nodes.map(
+            (i) => i.id === t ? { ...i, data: { ...i.data, ...o } } : i
           )
         }));
       },
       deleteNode: (t) => {
         r((o) => ({
-          nodes: o.nodes.filter((i) => i.id !== t),
-          edges: o.edges.filter((i) => i.source !== t && i.target !== t),
+          nodes: o.nodes.filter((s) => s.id !== t),
+          edges: o.edges.filter((s) => s.source !== t && s.target !== t),
           selectedNodeId: o.selectedNodeId === t ? null : o.selectedNodeId
         }));
       },
       duplicateNode: (t) => {
-        const o = l(), i = o.nodes.find((d) => d.id === t);
-        if (!i) return;
-        const s = H(), p = {
-          ...i,
-          id: s,
+        const o = d(), s = o.nodes.find((l) => l.id === t);
+        if (!s) return;
+        const i = V(), p = {
+          ...s,
+          id: i,
           position: {
-            x: i.position.x + 50,
-            y: i.position.y + 50
+            x: s.position.x + 50,
+            y: s.position.y + 50
           },
-          data: JSON.parse(JSON.stringify(i.data)),
+          data: JSON.parse(JSON.stringify(s.data)),
           // Deep clone
           selected: !1
         };
         r({
           nodes: [...o.nodes, p],
-          selectedNodeId: s
+          selectedNodeId: i
           // Select the new node
         });
       },
       setNodes: (t) => r({ nodes: t }),
       addEdge: (t) => {
         if (!t.source || !t.target) return;
-        const o = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), s = {
+        const o = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), i = {
           id: o ? `edge_${t.source}_${t.target}_${o}` : `edge_${t.source}_${t.target}`,
           source: t.source,
           target: t.target,
@@ -482,31 +482,31 @@ const f = ue()(
           targetHandle: t.targetHandle ?? void 0
         };
         r((p) => ({
-          edges: [...p.edges, s]
+          edges: [...p.edges, i]
         }));
       },
       deleteEdge: (t) => {
         r((o) => ({
-          edges: o.edges.filter((i) => i.id !== t)
+          edges: o.edges.filter((s) => s.id !== t)
         }));
       },
       setEdges: (t) => r({ edges: t }),
       setSelectedNode: (t) => r({ selectedNodeId: t }),
       execute: async () => {
-        const { nodes: t, edges: o } = l(), i = t.map((a) => ({
+        const { nodes: t, edges: o } = d(), s = t.map((a) => ({
           id: a.id,
           type: a.type,
           position: a.position,
           data: a.data
-        })), s = o.map((a) => ({
+        })), i = o.map((a) => ({
           id: a.id,
           source: a.source,
           target: a.target,
           sourceHandle: a.sourceHandle ?? void 0,
           targetHandle: a.targetHandle ?? void 0
-        })), p = V.getState().getConfiguredProviders(), d = {};
+        })), p = B.getState().getConfiguredProviders(), l = {};
         for (const a of t)
-          d[a.id] = "running";
+          l[a.id] = "running";
         r({
           execution: {
             status: "running",
@@ -514,11 +514,11 @@ const f = ue()(
             imageUrls: [],
             previews: {},
             dataOutputs: {},
-            nodeStatus: d
+            nodeStatus: l
           }
         });
         try {
-          const a = await Oe(i, s, p), m = {};
+          const a = await Ee(s, i, p), m = {};
           for (const c of t)
             m[c.id] = a.status === "completed" ? "completed" : "error";
           a.status === "completed" ? r({
@@ -559,31 +559,31 @@ const f = ue()(
         }
       },
       exportToYaml: async () => {
-        const { nodes: t, edges: o } = l(), i = t.map((d) => ({
-          id: d.id,
-          type: d.type,
-          position: d.position,
-          data: d.data
-        })), s = o.map((d) => ({
-          id: d.id,
-          source: d.source,
-          target: d.target,
-          sourceHandle: d.sourceHandle ?? void 0,
-          targetHandle: d.targetHandle ?? void 0
+        const { nodes: t, edges: o } = d(), s = t.map((l) => ({
+          id: l.id,
+          type: l.type,
+          position: l.position,
+          data: l.data
+        })), i = o.map((l) => ({
+          id: l.id,
+          source: l.source,
+          target: l.target,
+          sourceHandle: l.sourceHandle ?? void 0,
+          targetHandle: l.targetHandle ?? void 0
         }));
-        return (await Re(i, s)).yaml;
+        return (await qe(s, i)).yaml;
       },
-      importFromYaml: (t, o, i) => {
-        const s = /* @__PURE__ */ new Map(), p = t.map((a) => {
-          const m = H();
-          return s.set(a.id, m), {
+      importFromYaml: (t, o, s) => {
+        const i = /* @__PURE__ */ new Map(), p = t.map((a) => {
+          const m = V();
+          return i.set(a.id, m), {
             id: m,
             type: a.type,
             position: a.position,
             data: a.data
           };
-        }), d = o.map((a) => {
-          const m = s.get(a.source) || a.source, c = s.get(a.target) || a.target;
+        }), l = o.map((a) => {
+          const m = i.get(a.source) || a.source, c = i.get(a.target) || a.target;
           return {
             id: `edge_${m}_${c}`,
             source: m,
@@ -592,12 +592,12 @@ const f = ue()(
         });
         r({
           nodes: p,
-          edges: d,
+          edges: l,
           selectedNodeId: null,
           currentTemplateId: null,
           previewVisible: {},
           activeWorkflowId: null,
-          activeWorkflowName: i || "Imported Workflow",
+          activeWorkflowName: s || "Imported Workflow",
           hasUnsavedChanges: !0,
           execution: {
             status: "idle",
@@ -636,33 +636,33 @@ const f = ue()(
       saveWorkflow: (t) => {
         const {
           nodes: o,
-          edges: i,
-          activeWorkflowId: s,
+          edges: s,
+          activeWorkflowId: i,
           activeWorkflowName: p,
-          savedWorkflows: d,
+          savedWorkflows: l,
           currentTemplateId: a
-        } = l(), m = Date.now();
-        if (s) {
-          const c = d.map(
-            (u) => u.id === s ? { ...u, name: t || p, nodes: o, edges: i, updatedAt: m } : u
+        } = d(), m = Date.now();
+        if (i) {
+          const c = l.map(
+            (u) => u.id === i ? { ...u, name: t || p, nodes: o, edges: s, updatedAt: m } : u
           );
           return r({
             savedWorkflows: c,
             activeWorkflowName: t || p,
             hasUnsavedChanges: !1
-          }), s;
+          }), i;
         } else {
-          const c = me(), u = {
+          const c = pe(), u = {
             id: c,
             name: t || p,
             nodes: o,
-            edges: i,
+            edges: s,
             createdAt: m,
             updatedAt: m,
             templateId: a || void 0
           };
           return r({
-            savedWorkflows: [...d, u],
+            savedWorkflows: [...l, u],
             activeWorkflowId: c,
             activeWorkflowName: t || p,
             hasUnsavedChanges: !1
@@ -670,15 +670,15 @@ const f = ue()(
         }
       },
       loadWorkflow: (t) => {
-        const { savedWorkflows: o } = l(), i = o.find((s) => s.id === t);
-        i && r({
-          nodes: i.nodes,
-          edges: i.edges,
+        const { savedWorkflows: o } = d(), s = o.find((i) => i.id === t);
+        s && r({
+          nodes: s.nodes,
+          edges: s.edges,
           selectedNodeId: null,
-          currentTemplateId: i.templateId || null,
+          currentTemplateId: s.templateId || null,
           previewVisible: {},
           activeWorkflowId: t,
-          activeWorkflowName: i.name,
+          activeWorkflowName: s.name,
           hasUnsavedChanges: !1,
           execution: {
             status: "idle",
@@ -691,9 +691,9 @@ const f = ue()(
         });
       },
       deleteWorkflow: (t) => {
-        const { savedWorkflows: o, activeWorkflowId: i } = l(), s = o.filter((p) => p.id !== t);
-        r(i === t ? {
-          savedWorkflows: s,
+        const { savedWorkflows: o, activeWorkflowId: s } = d(), i = o.filter((p) => p.id !== t);
+        r(s === t ? {
+          savedWorkflows: i,
           nodes: [],
           edges: [],
           selectedNodeId: null,
@@ -710,40 +710,40 @@ const f = ue()(
             dataOutputs: {},
             nodeStatus: {}
           }
-        } : { savedWorkflows: s });
+        } : { savedWorkflows: i });
       },
       renameWorkflow: (t, o) => {
-        const { savedWorkflows: i, activeWorkflowId: s } = l(), p = i.map(
-          (d) => d.id === t ? { ...d, name: o, updatedAt: Date.now() } : d
+        const { savedWorkflows: s, activeWorkflowId: i } = d(), p = s.map(
+          (l) => l.id === t ? { ...l, name: o, updatedAt: Date.now() } : l
         );
         r({
           savedWorkflows: p,
-          ...s === t ? { activeWorkflowName: o } : {}
+          ...i === t ? { activeWorkflowName: o } : {}
         });
       },
       duplicateWorkflow: (t) => {
-        const { savedWorkflows: o } = l(), i = o.find((a) => a.id === t);
-        if (!i) return "";
-        const s = Date.now(), p = me(), d = {
-          ...i,
+        const { savedWorkflows: o } = d(), s = o.find((a) => a.id === t);
+        if (!s) return "";
+        const i = Date.now(), p = pe(), l = {
+          ...s,
           id: p,
-          name: `${i.name} (Copy)`,
-          createdAt: s,
-          updatedAt: s
+          name: `${s.name} (Copy)`,
+          createdAt: i,
+          updatedAt: i
         };
-        return r({ savedWorkflows: [...o, d] }), p;
+        return r({ savedWorkflows: [...o, l] }), p;
       },
       loadGeneratedWorkflow: (t) => {
-        const o = /* @__PURE__ */ new Map(), i = 250, s = 150, p = 3, d = t.nodes.map((m, c) => {
-          const u = H();
+        const o = /* @__PURE__ */ new Map(), s = 250, i = 150, p = 3, l = t.nodes.map((m, c) => {
+          const u = V();
           o.set(m.id, u);
-          const h = m.nodeType.split(":"), b = h[0], y = Math.floor(c / p), w = {
-            x: 100 + c % p * i,
-            y: 100 + y * s
+          const h = m.nodeType.split(":"), b = h[0], v = Math.floor(c / p), w = {
+            x: 100 + c % p * s,
+            y: 100 + v * i
           };
-          let x;
+          let f;
           if (b === "generator")
-            x = {
+            f = {
               generatorName: h.slice(1).join(":"),
               params: m.parameters,
               isAI: !0
@@ -751,42 +751,42 @@ const f = ue()(
             };
           else if (b === "transform") {
             const g = h[1];
-            x = {
+            f = {
               operation: h.slice(2).join(":"),
               providerName: g,
               params: m.parameters
             };
           } else if (b === "input")
-            x = {
+            f = {
               uploadId: void 0,
               filename: void 0,
               mime: void 0
             };
           else if (b === "vision")
-            x = {
+            f = {
               providerName: h.slice(1).join(":"),
               params: m.parameters
             };
           else if (b === "text") {
-            const g = h.slice(1).join(":"), N = m.parameters.jsonSchema, A = N != null && N.properties ? {
+            const g = h.slice(1).join(":"), N = m.parameters.jsonSchema, W = N != null && N.properties ? {
               type: "object",
               properties: Object.fromEntries(
-                Object.entries(N.properties).map(([k, L]) => [
+                Object.entries(N.properties).map(([k, A]) => [
                   k,
                   {
-                    type: L.type || "string",
-                    description: L.description
+                    type: A.type || "string",
+                    description: A.description
                   }
                 ])
               )
             } : void 0;
-            x = {
+            f = {
               providerName: g,
               params: m.parameters,
-              outputSchema: A
+              outputSchema: W
             };
           } else
-            x = {
+            f = {
               destination: m.parameters.destination || "./output/image.png",
               provider: m.parameters.provider || "filesystem"
             };
@@ -794,7 +794,7 @@ const f = ue()(
             id: u,
             type: b,
             position: w,
-            data: x
+            data: f
           };
         }), a = t.edges.map((m) => {
           const c = o.get(m.source) || m.source, u = o.get(m.target) || m.target, h = [m.sourceHandle, m.targetHandle].filter(Boolean).join("_");
@@ -807,7 +807,7 @@ const f = ue()(
           };
         });
         r({
-          nodes: d,
+          nodes: l,
           edges: a,
           selectedNodeId: null,
           currentTemplateId: null,
@@ -835,28 +835,28 @@ const f = ue()(
     }
   )
 );
-function Q(r) {
+function J(r) {
   var t;
-  const l = {};
+  const d = {};
   if ((t = r.params) != null && t.properties)
-    for (const [o, i] of Object.entries(r.params.properties))
-      i.default !== void 0 && (l[o] = i.default);
-  return l;
+    for (const [o, s] of Object.entries(r.params.properties))
+      s.default !== void 0 && (d[o] = s.default);
+  return d;
 }
 function F(r) {
   return r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
-function ae({ nodeId: r, color: l }) {
-  const t = f((i) => i.previewVisible[r] !== !1), o = f((i) => i.togglePreview);
+function ae({ nodeId: r, color: d }) {
+  const t = x((s) => s.previewVisible[r] !== !1), o = x((s) => s.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
-      onClick: (i) => {
-        i.stopPropagation(), o(r);
+      onClick: (s) => {
+        s.stopPropagation(), o(r);
       },
       className: `ml-auto p-1 rounded hover:bg-gray-200 dark:hover:bg-zinc-600 transition-colors ${t ? "opacity-100" : "opacity-40"}`,
       title: t ? "Hide preview" : "Show preview",
-      children: /* @__PURE__ */ e("svg", { className: `w-3.5 h-3.5 ${l}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e("svg", { className: `w-3.5 h-3.5 ${d}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
         "path",
         {
           strokeLinecap: "round",
@@ -876,12 +876,12 @@ function ae({ nodeId: r, color: l }) {
     }
   );
 }
-const Qe = G(function({
-  id: l,
+const Xe = G(function({
+  id: d,
   data: t,
   selected: o
 }) {
-  const i = f((u) => u.execution.previews[l]), s = f((u) => u.execution.nodeStatus[l]), p = f((u) => u.previewVisible[l] !== !1), a = F(s) || (o ? "border-blue-500" : "border-blue-200"), m = t.isAI, c = t.acceptsReferenceImages;
+  const s = x((u) => u.execution.previews[d]), i = x((u) => u.execution.nodeStatus[d]), p = x((u) => u.previewVisible[d] !== !1), a = F(i) || (o ? "border-blue-500" : "border-blue-200"), m = t.isAI, c = t.acceptsReferenceImages;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -891,7 +891,7 @@ const Qe = G(function({
           P,
           {
             type: "target",
-            position: $.Top,
+            position: M.Top,
             id: "text",
             className: "w-3 h-3 !bg-pink-500",
             title: "Text input (optional prompt from text/vision node)"
@@ -901,19 +901,19 @@ const Qe = G(function({
           P,
           {
             type: "target",
-            position: $.Left,
+            position: M.Left,
             id: "references",
             className: "w-3 h-3 !bg-violet-500",
             style: { top: "50%" },
             title: `Reference images (up to ${t.maxReferenceImages || 14})`
           }
         ),
-        i && p && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: i, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        s && p && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: s, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ n("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-blue-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-blue-700 dark:text-blue-400", children: t.generatorName }),
-            /* @__PURE__ */ e(ae, { nodeId: l, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(ae, { nodeId: d, color: "text-blue-500 dark:text-blue-400" })
           ] }),
           m && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
           c && /* @__PURE__ */ e("div", { className: "text-[10px] text-violet-500 dark:text-violet-400 mb-1", children: "← Connect reference images" }),
@@ -923,16 +923,16 @@ const Qe = G(function({
             String(h).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(P, { type: "source", position: $.Right, className: "w-3 h-3 !bg-blue-500" })
+        /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-blue-500" })
       ]
     }
   );
-}), Ye = G(function({
-  id: l,
+}), Ze = G(function({
+  id: d,
   data: t,
   selected: o
 }) {
-  const i = f((u) => u.execution.previews[l]), s = f((u) => u.execution.nodeStatus[l]), p = f((u) => u.previewVisible[l] !== !1), a = F(s) || (o ? "border-teal-500" : "border-teal-200"), m = t.isAI, c = t.acceptsReferenceImages;
+  const s = x((u) => u.execution.previews[d]), i = x((u) => u.execution.nodeStatus[d]), p = x((u) => u.previewVisible[d] !== !1), a = F(i) || (o ? "border-teal-500" : "border-teal-200"), m = t.isAI, c = t.acceptsReferenceImages;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -942,24 +942,24 @@ const Qe = G(function({
           P,
           {
             type: "target",
-            position: $.Top,
+            position: M.Top,
             id: "text",
             className: "w-3 h-3 !bg-pink-500",
             title: "Text input (optional prompt from text/vision node)"
           }
         ),
-        /* @__PURE__ */ e(P, { type: "target", position: $.Left, id: "image", className: "w-3 h-3 !bg-teal-500" }),
+        /* @__PURE__ */ e(P, { type: "target", position: M.Left, id: "image", className: "w-3 h-3 !bg-teal-500" }),
         c && /* @__PURE__ */ e(
           P,
           {
             type: "target",
-            position: $.Bottom,
+            position: M.Bottom,
             id: "references",
             className: "w-3 h-3 !bg-violet-500",
             title: `Reference images (up to ${t.maxReferenceImages || 13})`
           }
         ),
-        i && p && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: i, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        s && p && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: s, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ n("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-2", children: [
             m ? /* @__PURE__ */ n("svg", { className: "w-3 h-3 text-purple-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
@@ -983,7 +983,7 @@ const Qe = G(function({
             /* @__PURE__ */ e(
               ae,
               {
-                nodeId: l,
+                nodeId: d,
                 color: m ? "text-purple-500 dark:text-purple-400" : "text-teal-500 dark:text-teal-400"
               }
             )
@@ -996,18 +996,18 @@ const Qe = G(function({
             String(h).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(P, { type: "source", position: $.Right, className: "w-3 h-3 !bg-teal-500" })
+        /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-teal-500" })
       ]
     }
   );
-}), Xe = G(function({ id: l, data: t, selected: o }) {
-  const i = f((d) => d.execution.nodeStatus[l]), p = F(i) || (o ? "border-green-500" : "border-green-200");
+}), et = G(function({ id: d, data: t, selected: o }) {
+  const s = x((l) => l.execution.nodeStatus[d]), p = F(s) || (o ? "border-green-500" : "border-green-200");
   return /* @__PURE__ */ n(
     "div",
     {
       className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${p}`,
       children: [
-        /* @__PURE__ */ e(P, { type: "target", position: $.Left, className: "w-3 h-3 !bg-green-500" }),
+        /* @__PURE__ */ e(P, { type: "target", position: M.Left, className: "w-3 h-3 !bg-green-500" }),
         /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-2", children: [
           /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-green-500" }),
           /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-green-700 dark:text-green-400", children: "Save" })
@@ -1016,38 +1016,38 @@ const Qe = G(function({
       ]
     }
   );
-}), Ze = G(function({ id: l, data: t, selected: o }) {
-  const i = f((w) => w.execution.previews[l]), s = f((w) => w.execution.nodeStatus[l]), p = f((w) => w.previewVisible[l] !== !1), d = f((w) => w.updateNodeData), a = te(null), c = F(s) || (o ? "border-amber-500" : "border-amber-200"), u = W(
+}), tt = G(function({ id: d, data: t, selected: o }) {
+  const s = x((w) => w.execution.previews[d]), i = x((w) => w.execution.nodeStatus[d]), p = x((w) => w.previewVisible[d] !== !1), l = x((w) => w.updateNodeData), a = te(null), c = F(i) || (o ? "border-amber-500" : "border-amber-200"), u = L(
     async (w) => {
       try {
-        const x = await Ve(w);
-        d(l, {
-          uploadId: x.id,
-          filename: x.filename,
-          mime: x.mime
+        const f = await Fe(w);
+        l(d, {
+          uploadId: f.id,
+          filename: f.filename,
+          mime: f.mime
         });
-      } catch (x) {
-        console.error("Upload failed:", x);
+      } catch (f) {
+        console.error("Upload failed:", f);
       }
     },
-    [l, d]
-  ), h = W(
+    [d, l]
+  ), h = L(
     (w) => {
       w.preventDefault(), w.stopPropagation();
-      const x = w.dataTransfer.files[0];
-      x && x.type.startsWith("image/") && u(x);
+      const f = w.dataTransfer.files[0];
+      f && f.type.startsWith("image/") && u(f);
     },
     [u]
-  ), b = W((w) => {
+  ), b = L((w) => {
     w.preventDefault(), w.stopPropagation();
-  }, []), y = W(
+  }, []), v = L(
     (w) => {
       var g;
-      const x = (g = w.target.files) == null ? void 0 : g[0];
-      x && u(x);
+      const f = (g = w.target.files) == null ? void 0 : g[0];
+      f && u(f);
     },
     [u]
-  ), v = i || (t.uploadId ? he(t.uploadId) : null);
+  ), y = s || (t.uploadId ? be(t.uploadId) : null);
   return /* @__PURE__ */ n(
     "div",
     {
@@ -1055,7 +1055,7 @@ const Qe = G(function({
       onDrop: h,
       onDragOver: b,
       children: [
-        v && p ? /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: v, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : v ? null : /* @__PURE__ */ e(
+        y && p ? /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: y, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : y ? null : /* @__PURE__ */ e(
           "div",
           {
             className: "bg-amber-50 dark:bg-amber-900/30 border-b border-amber-100 dark:border-amber-800 h-24 flex items-center justify-center cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
@@ -1076,40 +1076,40 @@ const Qe = G(function({
             type: "file",
             accept: "image/*",
             className: "hidden",
-            onChange: y
+            onChange: v
           }
         ),
         /* @__PURE__ */ n("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-amber-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-amber-700 dark:text-amber-400", children: "Input" }),
-            /* @__PURE__ */ e(ae, { nodeId: l, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(ae, { nodeId: d, color: "text-amber-500 dark:text-amber-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: t.filename || "No image selected" })
         ] }),
-        /* @__PURE__ */ e(P, { type: "source", position: $.Right, className: "w-3 h-3 !bg-amber-500" })
+        /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-amber-500" })
       ]
     }
   );
-}), et = G(function({
-  id: l,
+}), rt = G(function({
+  id: d,
   data: t,
   selected: o
 }) {
   var c, u, h;
-  const i = f((b) => b.execution.nodeStatus[l]), s = f((b) => {
-    var y;
-    return (y = b.execution.dataOutputs) == null ? void 0 : y[l];
-  }), d = F(i) || (o ? "border-cyan-500" : "border-cyan-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
+  const s = x((b) => b.execution.nodeStatus[d]), i = x((b) => {
+    var v;
+    return (v = b.execution.dataOutputs) == null ? void 0 : v[d];
+  }), l = F(s) || (o ? "border-cyan-500" : "border-cyan-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
   return /* @__PURE__ */ n(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${l}`,
       children: [
-        /* @__PURE__ */ e(P, { type: "target", position: $.Left, className: "w-3 h-3 !bg-cyan-500" }),
-        s && /* @__PURE__ */ e("div", { className: "bg-cyan-50 dark:bg-cyan-900/30 border-b border-cyan-100 dark:border-cyan-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ n("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
-          (u = s.content) == null ? void 0 : u.slice(0, 200),
-          (((h = s.content) == null ? void 0 : h.length) || 0) > 200 && "..."
+        /* @__PURE__ */ e(P, { type: "target", position: M.Left, className: "w-3 h-3 !bg-cyan-500" }),
+        i && /* @__PURE__ */ e("div", { className: "bg-cyan-50 dark:bg-cyan-900/30 border-b border-cyan-100 dark:border-cyan-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ n("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
+          (u = i.content) == null ? void 0 : u.slice(0, 200),
+          (((h = i.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
         /* @__PURE__ */ n("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-2", children: [
@@ -1145,51 +1145,51 @@ const Qe = G(function({
             ))
           ] })
         ] }),
-        m ? /* @__PURE__ */ n(B, { children: [
+        m ? /* @__PURE__ */ n(q, { children: [
           /* @__PURE__ */ e(
             P,
             {
               type: "source",
-              position: $.Right,
+              position: M.Right,
               id: "output",
               className: "w-3 h-3 !bg-cyan-500",
               style: { top: "50%" },
               title: "Full JSON output"
             }
           ),
-          a.map(([b, y], v) => /* @__PURE__ */ e(
+          a.map(([b, v], y) => /* @__PURE__ */ e(
             P,
             {
               type: "source",
-              position: $.Right,
+              position: M.Right,
               id: `output.${b}`,
               className: "w-2.5 h-2.5 !bg-cyan-400",
               style: {
-                top: `${70 + v * 14}%`
+                top: `${70 + y * 14}%`
               },
-              title: `${b}: ${y.description || y.type}`
+              title: `${b}: ${v.description || v.type}`
             },
             b
           ))
-        ] }) : /* @__PURE__ */ e(P, { type: "source", position: $.Right, className: "w-3 h-3 !bg-cyan-500" })
+        ] }) : /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-cyan-500" })
       ]
     }
   );
-}), tt = G(function({ id: l, data: t, selected: o }) {
+}), at = G(function({ id: d, data: t, selected: o }) {
   var c, u, h;
-  const i = f((b) => b.execution.nodeStatus[l]), s = f((b) => {
-    var y;
-    return (y = b.execution.dataOutputs) == null ? void 0 : y[l];
-  }), d = F(i) || (o ? "border-pink-500" : "border-pink-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
+  const s = x((b) => b.execution.nodeStatus[d]), i = x((b) => {
+    var v;
+    return (v = b.execution.dataOutputs) == null ? void 0 : v[d];
+  }), l = F(s) || (o ? "border-pink-500" : "border-pink-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], m = a.length > 0;
   return /* @__PURE__ */ n(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${l}`,
       children: [
-        /* @__PURE__ */ e(P, { type: "target", position: $.Left, className: "w-3 h-3 !bg-pink-500" }),
-        s && /* @__PURE__ */ e("div", { className: "bg-pink-50 dark:bg-pink-900/30 border-b border-pink-100 dark:border-pink-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ n("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
-          (u = s.content) == null ? void 0 : u.slice(0, 200),
-          (((h = s.content) == null ? void 0 : h.length) || 0) > 200 && "..."
+        /* @__PURE__ */ e(P, { type: "target", position: M.Left, className: "w-3 h-3 !bg-pink-500" }),
+        i && /* @__PURE__ */ e("div", { className: "bg-pink-50 dark:bg-pink-900/30 border-b border-pink-100 dark:border-pink-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ n("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
+          (u = i.content) == null ? void 0 : u.slice(0, 200),
+          (((h = i.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
         /* @__PURE__ */ n("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ n("div", { className: "flex items-center gap-2 mb-2", children: [
@@ -1222,48 +1222,48 @@ const Qe = G(function({
             ))
           ] })
         ] }),
-        m ? /* @__PURE__ */ n(B, { children: [
+        m ? /* @__PURE__ */ n(q, { children: [
           /* @__PURE__ */ e(
             P,
             {
               type: "source",
-              position: $.Right,
+              position: M.Right,
               id: "output",
               className: "w-3 h-3 !bg-pink-500",
               style: { top: "50%" },
               title: "Full JSON output"
             }
           ),
-          a.map(([b, y], v) => /* @__PURE__ */ e(
+          a.map(([b, v], y) => /* @__PURE__ */ e(
             P,
             {
               type: "source",
-              position: $.Right,
+              position: M.Right,
               id: `output.${b}`,
               className: "w-2.5 h-2.5 !bg-pink-400",
               style: {
-                top: `${70 + v * 14}%`
+                top: `${70 + y * 14}%`
               },
-              title: `${b}: ${y.description || y.type}`
+              title: `${b}: ${v.description || v.type}`
             },
             b
           ))
-        ] }) : /* @__PURE__ */ e(P, { type: "source", position: $.Right, className: "w-3 h-3 !bg-pink-500" })
+        ] }) : /* @__PURE__ */ e(P, { type: "source", position: M.Right, className: "w-3 h-3 !bg-pink-500" })
       ]
     }
   );
-}), rt = {
-  generator: Qe,
-  transform: Ye,
-  save: Xe,
-  input: Ze,
-  vision: et,
-  text: tt
-}, at = {
+}), ot = {
+  generator: Xe,
+  transform: Ze,
+  save: et,
+  input: tt,
+  vision: rt,
+  text: at
+}, nt = {
   type: "smoothstep",
   animated: !1,
   markerEnd: {
-    type: Ie.ArrowClosed,
+    type: Ae.ArrowClosed,
     color: "#64748b",
     width: 20,
     height: 20
@@ -1273,52 +1273,52 @@ const Qe = G(function({
     strokeWidth: 2
   }
 };
-function ot() {
-  const r = f((h) => h.nodes), l = f((h) => h.edges), t = f((h) => h.setNodes), o = f((h) => h.setEdges), i = f((h) => h.addEdge), s = f((h) => h.setSelectedNode), p = W(
+function it() {
+  const r = x((h) => h.nodes), d = x((h) => h.edges), t = x((h) => h.setNodes), o = x((h) => h.setEdges), s = x((h) => h.addEdge), i = x((h) => h.setSelectedNode), p = L(
     (h) => {
-      const { source: b, target: y } = h;
-      if (!b || !y) return !1;
-      const v = r.find((g) => g.id === b), w = r.find((g) => g.id === y);
-      return !(!v || !w || v.type === "save" || w.type === "generator" || w.type === "input" || l.find(
-        (g) => g.target === y && g.targetHandle === h.targetHandle
-      ) || b === y);
+      const { source: b, target: v } = h;
+      if (!b || !v) return !1;
+      const y = r.find((g) => g.id === b), w = r.find((g) => g.id === v);
+      return !(!y || !w || y.type === "save" || w.type === "generator" || w.type === "input" || d.find(
+        (g) => g.target === v && g.targetHandle === h.targetHandle
+      ) || b === v);
     },
-    [r, l]
-  ), d = W(
+    [r, d]
+  ), l = L(
     (h) => {
-      t(ze(h, r));
+      t(Ie(h, r));
     },
     [r, t]
-  ), a = W(
+  ), a = L(
     (h) => {
-      o(Ce(h, l));
+      o(Se(h, d));
     },
-    [l, o]
-  ), m = W(
+    [d, o]
+  ), m = L(
     (h) => {
-      i(h);
+      s(h);
     },
-    [i]
-  ), c = W(
+    [s]
+  ), c = L(
     (h, b) => {
-      s(b.id);
+      i(b.id);
     },
-    [s]
-  ), u = W(() => {
-    s(null);
-  }, [s]);
+    [i]
+  ), u = L(() => {
+    i(null);
+  }, [i]);
   return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ n(
-    Ne,
+    Ce,
     {
       nodes: r,
-      edges: l,
-      onNodesChange: d,
+      edges: d,
+      onNodesChange: l,
       onEdgesChange: a,
       onConnect: m,
       onNodeClick: c,
       onPaneClick: u,
-      nodeTypes: rt,
-      defaultEdgeOptions: at,
+      nodeTypes: ot,
+      defaultEdgeOptions: nt,
       isValidConnection: p,
       nodesDraggable: !0,
       nodesConnectable: !0,
@@ -1328,47 +1328,47 @@ function ot() {
       snapToGrid: !0,
       snapGrid: [15, 15],
       children: [
-        /* @__PURE__ */ e(Se, {}),
         /* @__PURE__ */ e(Le, {}),
-        /* @__PURE__ */ e(We, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
+        /* @__PURE__ */ e(We, {}),
+        /* @__PURE__ */ e(Pe, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
       ]
     }
   ) });
 }
-function nt({ onSelect: r }) {
-  const [l, t] = C([]), [o, i] = C(!0), [s, p] = C(null), d = async () => {
+function st({ onSelect: r }) {
+  const [d, t] = C([]), [o, s] = C(!0), [i, p] = C(null), l = async () => {
     try {
-      i(!0);
-      const c = await Ge();
+      s(!0);
+      const c = await Ve();
       t(c), p(null);
     } catch (c) {
       p(c instanceof Error ? c.message : "Failed to load uploads");
     } finally {
-      i(!1);
+      s(!1);
     }
   };
   U(() => {
-    d();
+    l();
   }, []);
   const a = async (c, u) => {
     if (u.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await Fe(c), t((h) => h.filter((b) => b.id !== c));
+        await He(c), t((h) => h.filter((b) => b.id !== c));
       } catch (h) {
         console.error("Failed to delete:", h);
       }
   }, m = (c) => c < 1024 ? `${c} B` : c < 1024 * 1024 ? `${(c / 1024).toFixed(1)} KB` : `${(c / (1024 * 1024)).toFixed(1)} MB`;
-  return o ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : s ? /* @__PURE__ */ n("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
-    s,
+  return o ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : i ? /* @__PURE__ */ n("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
+    i,
     /* @__PURE__ */ e(
       "button",
       {
-        onClick: d,
+        onClick: l,
         className: "ml-2 text-teal-500 dark:text-teal-400 hover:underline",
         children: "Retry"
       }
     )
-  ] }) : l.length === 0 ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "No uploads yet. Drag an image onto an Input node to upload." }) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: l.map((c) => /* @__PURE__ */ n(
+  ] }) : d.length === 0 ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "No uploads yet. Drag an image onto an Input node to upload." }) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: d.map((c) => /* @__PURE__ */ n(
     "div",
     {
       className: "relative group rounded border border-gray-200 dark:border-zinc-700 overflow-hidden cursor-pointer hover:border-amber-400 dark:hover:border-amber-500 transition-colors",
@@ -1377,7 +1377,7 @@ function nt({ onSelect: r }) {
         /* @__PURE__ */ e(
           "img",
           {
-            src: he(c.id),
+            src: be(c.id),
             alt: c.filename,
             className: "w-full h-20 object-cover"
           }
@@ -1397,34 +1397,34 @@ function nt({ onSelect: r }) {
     c.id
   )) }) });
 }
-function st() {
-  const r = f((k) => k.setGenerators), l = f((k) => k.setTransforms), t = f((k) => k.setTextProviders), o = f((k) => k.setVisionProviders), i = f((k) => k.generators), s = f((k) => k.transforms), p = f((k) => k.textProviders), d = f((k) => k.visionProviders), a = f((k) => k.addNode), [m, c] = C(!1), { data: u } = K({
+function dt() {
+  const r = x((k) => k.setGenerators), d = x((k) => k.setTransforms), t = x((k) => k.setTextProviders), o = x((k) => k.setVisionProviders), s = x((k) => k.generators), i = x((k) => k.transforms), p = x((k) => k.textProviders), l = x((k) => k.visionProviders), a = x((k) => k.addNode), [m, c] = C(!1), { data: u } = _({
     queryKey: ["generators"],
-    queryFn: Me
-  }), { data: h } = K({
+    queryFn: $e
+  }), { data: h } = _({
     queryKey: ["transforms"],
-    queryFn: De
-  }), { data: b } = K({
+    queryFn: Ue
+  }), { data: b } = _({
     queryKey: ["textProviders"],
-    queryFn: Te
-  }), { data: y } = K({
+    queryFn: Re
+  }), { data: v } = _({
     queryKey: ["visionProviders"],
-    queryFn: Ue
+    queryFn: Oe
   });
   U(() => {
     u && r(u);
   }, [u, r]), U(() => {
-    h && l(h);
-  }, [h, l]), U(() => {
+    h && d(h);
+  }, [h, d]), U(() => {
     b && t(b);
   }, [b, t]), U(() => {
-    y && o(y);
-  }, [y, o]);
-  const v = (k, L) => {
-    k.dataTransfer.setData("application/json", JSON.stringify(L)), k.dataTransfer.effectAllowed = "move";
+    v && o(v);
+  }, [v, o]);
+  const y = (k, A) => {
+    k.dataTransfer.setData("application/json", JSON.stringify(A)), k.dataTransfer.effectAllowed = "move";
   }, w = (k) => {
     a(k, { x: 250, y: 150 + Math.random() * 100 });
-  }, x = {
+  }, f = {
     id: "input:upload",
     type: "input",
     name: "upload",
@@ -1456,16 +1456,16 @@ function st() {
         }
       }
     }
-  }, N = i.reduce(
-    (k, L) => {
-      const S = L.category || "Other";
-      return k[S] || (k[S] = []), k[S].push(L), k;
+  }, N = s.reduce(
+    (k, A) => {
+      const S = A.category || "Other";
+      return k[S] || (k[S] = []), k[S].push(A), k;
     },
     {}
-  ), A = s.reduce(
-    (k, L) => {
-      const S = L.category || "Other";
-      return k[S] || (k[S] = []), k[S].push(L), k;
+  ), W = i.reduce(
+    (k, A) => {
+      const S = A.category || "Other";
+      return k[S] || (k[S] = []), k[S].push(A), k;
     },
     {}
   );
@@ -1490,8 +1490,8 @@ function st() {
         "div",
         {
           draggable: !0,
-          onDragStart: (k) => v(k, x),
-          onDoubleClick: () => w(x),
+          onDragStart: (k) => y(k, f),
+          onDoubleClick: () => w(f),
           className: "px-3 py-2 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 rounded cursor-grab active:cursor-grabbing hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
           children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-amber-700 dark:text-amber-300", children: "Upload Image" }),
@@ -1499,17 +1499,17 @@ function st() {
           ]
         }
       ),
-      m && /* @__PURE__ */ e("div", { className: "mt-2 border border-amber-200 dark:border-amber-700 rounded bg-white dark:bg-zinc-900 max-h-64 overflow-y-auto", children: /* @__PURE__ */ e(nt, {}) })
+      m && /* @__PURE__ */ e("div", { className: "mt-2 border border-amber-200 dark:border-amber-700 rounded bg-white dark:bg-zinc-900 max-h-64 overflow-y-auto", children: /* @__PURE__ */ e(st, {}) })
     ] }),
     /* @__PURE__ */ n("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-blue-600 dark:text-blue-400 uppercase tracking-wide mb-2", children: "Generators" }),
-      Object.entries(N).map(([k, L]) => /* @__PURE__ */ n("div", { className: "mb-3", children: [
+      Object.entries(N).map(([k, A]) => /* @__PURE__ */ n("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: k }),
-        L.map((S) => /* @__PURE__ */ n(
+        A.map((S) => /* @__PURE__ */ n(
           "div",
           {
             draggable: !0,
-            onDragStart: (R) => v(R, S),
+            onDragStart: (O) => y(O, S),
             onDoubleClick: () => w(S),
             className: "px-3 py-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors",
             children: [
@@ -1523,13 +1523,13 @@ function st() {
     ] }),
     /* @__PURE__ */ n("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-teal-600 dark:text-teal-400 uppercase tracking-wide mb-2", children: "Transforms" }),
-      Object.entries(A).map(([k, L]) => /* @__PURE__ */ n("div", { className: "mb-3", children: [
+      Object.entries(W).map(([k, A]) => /* @__PURE__ */ n("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: k }),
-        L.map((S) => /* @__PURE__ */ n(
+        A.map((S) => /* @__PURE__ */ n(
           "div",
           {
             draggable: !0,
-            onDragStart: (R) => v(R, S),
+            onDragStart: (O) => y(O, S),
             onDoubleClick: () => w(S),
             className: "px-3 py-2 bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-teal-100 dark:hover:bg-teal-900/50 transition-colors",
             children: [
@@ -1547,7 +1547,7 @@ function st() {
         "div",
         {
           draggable: !0,
-          onDragStart: (L) => v(L, k),
+          onDragStart: (A) => y(A, k),
           onDoubleClick: () => w(k),
           className: "px-3 py-2 bg-pink-50 dark:bg-pink-900/30 border border-pink-200 dark:border-pink-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-pink-100 dark:hover:bg-pink-900/50 transition-colors",
           children: [
@@ -1558,13 +1558,13 @@ function st() {
         k.id
       ))
     ] }),
-    d.length > 0 && /* @__PURE__ */ n("div", { className: "mb-6", children: [
+    l.length > 0 && /* @__PURE__ */ n("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-cyan-600 dark:text-cyan-400 uppercase tracking-wide mb-2", children: "AI Vision" }),
-      d.map((k) => /* @__PURE__ */ n(
+      l.map((k) => /* @__PURE__ */ n(
         "div",
         {
           draggable: !0,
-          onDragStart: (L) => v(L, k),
+          onDragStart: (A) => y(A, k),
           onDoubleClick: () => w(k),
           className: "px-3 py-2 bg-cyan-50 dark:bg-cyan-900/30 border border-cyan-200 dark:border-cyan-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-cyan-100 dark:hover:bg-cyan-900/50 transition-colors",
           children: [
@@ -1581,7 +1581,7 @@ function st() {
         "div",
         {
           draggable: !0,
-          onDragStart: (k) => v(k, g),
+          onDragStart: (k) => y(k, g),
           onDoubleClick: () => w(g),
           className: "px-3 py-2 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded cursor-grab active:cursor-grabbing hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors",
           children: [
@@ -1593,18 +1593,18 @@ function st() {
     ] })
   ] }) });
 }
-function it() {
-  var b, y, v, w;
-  const r = f((x) => x.selectedNodeId), l = f((x) => x.nodes), t = f((x) => x.generators), o = f((x) => x.transforms), i = f((x) => x.textProviders), s = f((x) => x.visionProviders), p = f((x) => x.updateNodeData), d = f((x) => x.deleteNode), a = l.find((x) => x.id === r);
+function lt() {
+  var b, v, y, w;
+  const r = x((f) => f.selectedNodeId), d = x((f) => f.nodes), t = x((f) => f.generators), o = x((f) => f.transforms), s = x((f) => f.textProviders), i = x((f) => f.visionProviders), p = x((f) => f.updateNodeData), l = x((f) => f.deleteNode), a = d.find((f) => f.id === r);
   if (!a)
     return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 p-4", children: /* @__PURE__ */ e("div", { className: "text-gray-500 dark:text-zinc-400 text-sm", children: "Select a node to edit its properties" }) });
   let m, c = "";
   if (a.type === "generator") {
-    const x = a.data, g = t.find((N) => N.name === x.generatorName);
-    m = (b = g == null ? void 0 : g.params) == null ? void 0 : b.properties, c = (g == null ? void 0 : g.label) || x.generatorName;
+    const f = a.data, g = t.find((N) => N.name === f.generatorName);
+    m = (b = g == null ? void 0 : g.params) == null ? void 0 : b.properties, c = (g == null ? void 0 : g.label) || f.generatorName;
   } else if (a.type === "transform") {
-    const x = a.data, g = o.find((N) => N.name === x.operation);
-    m = (y = g == null ? void 0 : g.params) == null ? void 0 : y.properties, c = (g == null ? void 0 : g.label) || x.operation;
+    const f = a.data, g = o.find((N) => N.name === f.operation);
+    m = (v = g == null ? void 0 : g.params) == null ? void 0 : v.properties, c = (g == null ? void 0 : g.label) || f.operation;
   } else if (a.type === "save") {
     const g = a.data.provider === "floimg-cloud";
     c = g ? "Save to FloImg Cloud" : "Save", m = {
@@ -1615,47 +1615,47 @@ function it() {
       }
     };
   } else if (a.type === "text") {
-    const x = a.data, g = i.find((N) => N.name === x.providerName);
-    m = (v = g == null ? void 0 : g.params) == null ? void 0 : v.properties, c = (g == null ? void 0 : g.label) || x.providerName;
+    const f = a.data, g = s.find((N) => N.name === f.providerName);
+    m = (y = g == null ? void 0 : g.params) == null ? void 0 : y.properties, c = (g == null ? void 0 : g.label) || f.providerName;
   } else if (a.type === "vision") {
-    const x = a.data, g = s.find((N) => N.name === x.providerName);
-    m = (w = g == null ? void 0 : g.params) == null ? void 0 : w.properties, c = (g == null ? void 0 : g.label) || x.providerName;
+    const f = a.data, g = i.find((N) => N.name === f.providerName);
+    m = (w = g == null ? void 0 : g.params) == null ? void 0 : w.properties, c = (g == null ? void 0 : g.label) || f.providerName;
   }
-  const u = (x, g) => {
+  const u = (f, g) => {
     if (a.type === "generator") {
       const N = a.data;
       p(a.id, {
-        params: { ...N.params, [x]: g }
+        params: { ...N.params, [f]: g }
       });
     } else if (a.type === "transform") {
       const N = a.data;
       p(a.id, {
-        params: { ...N.params, [x]: g }
+        params: { ...N.params, [f]: g }
       });
     } else if (a.type === "save")
-      p(a.id, { [x]: g });
+      p(a.id, { [f]: g });
     else if (a.type === "text") {
       const N = a.data;
       p(a.id, {
-        params: { ...N.params, [x]: g }
+        params: { ...N.params, [f]: g }
       });
     } else if (a.type === "vision") {
       const N = a.data;
       p(a.id, {
-        params: { ...N.params, [x]: g }
+        params: { ...N.params, [f]: g }
       });
     }
-  }, h = (x) => {
+  }, h = (f) => {
     if (a.type === "generator")
-      return a.data.params[x];
+      return a.data.params[f];
     if (a.type === "transform")
-      return a.data.params[x];
+      return a.data.params[f];
     if (a.type === "save")
-      return a.data[x];
+      return a.data[f];
     if (a.type === "text")
-      return a.data.params[x];
+      return a.data.params[f];
     if (a.type === "vision")
-      return a.data.params[x];
+      return a.data.params[f];
   };
   return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ n("div", { className: "p-4", children: [
     /* @__PURE__ */ n("div", { className: "flex items-center justify-between mb-4", children: [
@@ -1663,24 +1663,24 @@ function it() {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => d(a.id),
+          onClick: () => l(a.id),
           className: "text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm",
           children: "Delete"
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: m && Object.entries(m).map(([x, g]) => /* @__PURE__ */ e(
-      lt,
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: m && Object.entries(m).map(([f, g]) => /* @__PURE__ */ e(
+      ct,
       {
-        name: x,
+        name: f,
         field: g,
-        value: h(x),
-        onChange: (N) => u(x, N)
+        value: h(f),
+        onChange: (N) => u(f, N)
       },
-      x
+      f
     )) }),
     (a.type === "text" || a.type === "vision") && /* @__PURE__ */ e(
-      dt,
+      mt,
       {
         nodeId: a.id,
         outputSchema: a.data.outputSchema,
@@ -1689,38 +1689,38 @@ function it() {
     )
   ] }) });
 }
-function lt({ name: r, field: l, value: t, onChange: o }) {
-  const i = l.title || r, s = "w-full px-3 py-2 border border-gray-300 dark:border-zinc-600 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100";
-  return l.enum ? /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+function ct({ name: r, field: d, value: t, onChange: o }) {
+  const s = d.title || r, i = "w-full px-3 py-2 border border-gray-300 dark:border-zinc-600 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100";
+  return d.enum ? /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     /* @__PURE__ */ n(
       "select",
       {
         value: String(t || ""),
         onChange: (p) => o(p.target.value),
-        className: s,
+        className: i,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-          l.enum.map((p) => /* @__PURE__ */ e("option", { value: p, children: p }, p))
+          d.enum.map((p) => /* @__PURE__ */ e("option", { value: p, children: p }, p))
         ]
       }
     ),
-    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
-  ] }) : l.type === "number" ? /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+    d.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: d.description })
+  ] }) : d.type === "number" ? /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     /* @__PURE__ */ e(
       "input",
       {
         type: "number",
         value: t !== void 0 ? Number(t) : "",
         onChange: (p) => o(Number(p.target.value)),
-        min: l.minimum,
-        max: l.maximum,
-        className: s
+        min: d.minimum,
+        max: d.maximum,
+        className: i
       }
     ),
-    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
-  ] }) : l.type === "boolean" ? /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+    d.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: d.description })
+  ] }) : d.type === "boolean" ? /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "input",
       {
@@ -1730,9 +1730,9 @@ function lt({ name: r, field: l, value: t, onChange: o }) {
         className: "h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900"
       }
     ),
-    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: i })
+    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: s })
   ] }) : r.toLowerCase().includes("color") && typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
         "input",
@@ -1749,12 +1749,12 @@ function lt({ name: r, field: l, value: t, onChange: o }) {
           type: "text",
           value: String(t || ""),
           onChange: (p) => o(p.target.value),
-          className: s + " flex-1"
+          className: i + " flex-1"
         }
       )
     ] })
-  ] }) : l.type === "object" ? /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+  ] }) : d.type === "object" ? /* @__PURE__ */ n("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     /* @__PURE__ */ e(
       "textarea",
       {
@@ -1766,19 +1766,19 @@ function lt({ name: r, field: l, value: t, onChange: o }) {
           }
         },
         rows: 4,
-        className: s + " font-mono text-xs"
+        className: i + " font-mono text-xs"
       }
     ),
-    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
+    d.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: d.description })
   ] }) : /* @__PURE__ */ n("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: i }),
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     r === "prompt" || r === "code" || r === "text" ? /* @__PURE__ */ e(
       "textarea",
       {
         value: String(t || ""),
         onChange: (p) => o(p.target.value),
         rows: 3,
-        className: s
+        className: i
       }
     ) : /* @__PURE__ */ e(
       "input",
@@ -1786,25 +1786,25 @@ function lt({ name: r, field: l, value: t, onChange: o }) {
         type: "text",
         value: String(t || ""),
         onChange: (p) => o(p.target.value),
-        className: s
+        className: i
       }
     ),
-    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
+    d.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: d.description })
   ] });
 }
-function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
-  const [o, i] = C(""), s = (l == null ? void 0 : l.properties) || {}, p = Object.entries(s), d = () => {
+function mt({ nodeId: r, outputSchema: d, updateNodeData: t }) {
+  const [o, s] = C(""), i = (d == null ? void 0 : d.properties) || {}, p = Object.entries(i), l = () => {
     if (!o.trim()) return;
     const u = {
       type: "object",
       properties: {
-        ...s,
+        ...i,
         [o.trim()]: { type: "string" }
       }
     };
-    t(r, { outputSchema: u }), i("");
+    t(r, { outputSchema: u }), s("");
   }, a = (u) => {
-    const h = { ...s };
+    const h = { ...i };
     delete h[u], Object.keys(h).length === 0 ? t(r, { outputSchema: void 0 }) : t(r, {
       outputSchema: { type: "object", properties: h }
     });
@@ -1813,8 +1813,8 @@ function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
       outputSchema: {
         type: "object",
         properties: {
-          ...s,
-          [u]: { ...s[u], type: h }
+          ...i,
+          [u]: { ...i[u], type: h }
         }
       }
     });
@@ -1823,8 +1823,8 @@ function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
       outputSchema: {
         type: "object",
         properties: {
-          ...s,
-          [u]: { ...s[u], description: h || void 0 }
+          ...i,
+          [u]: { ...i[u], description: h || void 0 }
         }
       }
     });
@@ -1897,8 +1897,8 @@ function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
         {
           type: "text",
           value: o,
-          onChange: (u) => i(u.target.value),
-          onKeyDown: (u) => u.key === "Enter" && d(),
+          onChange: (u) => s(u.target.value),
+          onKeyDown: (u) => u.key === "Enter" && l(),
           placeholder: "Property name...",
           className: "flex-1 px-2 py-1.5 text-sm border border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100 placeholder-gray-400 dark:placeholder-zinc-500"
         }
@@ -1906,7 +1906,7 @@ function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: d,
+          onClick: l,
           disabled: !o.trim(),
           className: "px-3 py-1.5 text-sm font-medium text-white bg-pink-500 rounded hover:bg-pink-600 disabled:opacity-50 disabled:cursor-not-allowed",
           children: "Add"
@@ -1916,51 +1916,51 @@ function dt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
     p.length > 0 && /* @__PURE__ */ e("p", { className: "mt-3 text-xs text-gray-500 dark:text-zinc-500", children: "Connect from the small pink handles on the right of the node to route individual properties." })
   ] });
 }
-function ct(r, l) {
-  const t = new Map(r.map((d) => [d.id, d])), o = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map();
-  for (const d of r)
-    o.set(d.id, 0), i.set(d.id, []);
-  for (const d of l) {
-    const a = i.get(d.source) || [];
-    a.push(d.target), i.set(d.source, a), o.set(d.target, (o.get(d.target) || 0) + 1);
+function pt(r, d) {
+  const t = new Map(r.map((l) => [l.id, l])), o = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
+  for (const l of r)
+    o.set(l.id, 0), s.set(l.id, []);
+  for (const l of d) {
+    const a = s.get(l.source) || [];
+    a.push(l.target), s.set(l.source, a), o.set(l.target, (o.get(l.target) || 0) + 1);
   }
-  const s = [];
-  for (const [d, a] of o)
-    a === 0 && s.push(d);
+  const i = [];
+  for (const [l, a] of o)
+    a === 0 && i.push(l);
   const p = [];
-  for (; s.length > 0; ) {
-    const d = s.shift(), a = t.get(d);
+  for (; i.length > 0; ) {
+    const l = i.shift(), a = t.get(l);
     a && p.push(a);
-    const m = i.get(d) || [];
+    const m = s.get(l) || [];
     for (const c of m) {
       const u = (o.get(c) || 1) - 1;
-      o.set(c, u), u === 0 && s.push(c);
+      o.set(c, u), u === 0 && i.push(c);
     }
   }
   return p;
 }
-function mt(r) {
-  const l = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
-  return `${l}_${t}`;
+function ut(r) {
+  const d = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
+  return `${d}_${t}`;
 }
-function _(r) {
+function H(r) {
   return typeof r == "string" ? r.includes(`
 `) ? "`" + r.replace(/`/g, "\\`").replace(/\$/g, "\\$") + "`" : JSON.stringify(r) : JSON.stringify(r, null, 2);
 }
-function pt(r, l, t) {
-  const o = t.get(r.id), i = [], s = l.find((d) => d.target === r.id), p = s ? t.get(s.source) : null;
+function gt(r, d, t) {
+  const o = t.get(r.id), s = [], i = d.find((l) => l.target === r.id), p = i ? t.get(i.source) : null;
   switch (r.type) {
     case "generator": {
-      const d = r.data;
-      i.push(d.generatorName);
-      const a = d.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${_(u)}`).join(`,
+      const l = r.data;
+      s.push(l.generatorName);
+      const a = l.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${H(u)}`).join(`,
 `);
       return {
-        code: `// Generate image using ${d.generatorName}
-const ${o} = await ${d.generatorName}({
+        code: `// Generate image using ${l.generatorName}
+const ${o} = await ${l.generatorName}({
 ${m}
 });`,
-        imports: i
+        imports: s
       };
     }
     case "input":
@@ -1970,44 +1970,44 @@ const ${o} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      const d = r.data, a = d.params || {}, m = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `${u}: ${_(h)}`).join(", "), c = p || "image";
+      const l = r.data, a = l.params || {}, m = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `${u}: ${H(h)}`).join(", "), c = p || "image";
       return {
-        code: `// Apply ${d.operation} transform
-const ${o} = await flo.transform(${c}, "${d.operation}"${m ? `, { ${m} }` : ""});`,
+        code: `// Apply ${l.operation} transform
+const ${o} = await flo.transform(${c}, "${l.operation}"${m ? `, { ${m} }` : ""});`,
         imports: []
       };
     }
     case "vision": {
-      const d = r.data;
-      i.push(d.providerName);
-      const a = d.params || {}, m = p || "image", c = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `  ${u}: ${_(h)}`).join(`,
+      const l = r.data;
+      s.push(l.providerName);
+      const a = l.params || {}, m = p || "image", c = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `  ${u}: ${H(h)}`).join(`,
 `);
       return {
-        code: `// Analyze image with ${d.providerName}
-const ${o} = await ${d.providerName}.analyze(${m}, {
+        code: `// Analyze image with ${l.providerName}
+const ${o} = await ${l.providerName}.analyze(${m}, {
 ${c}
 });`,
-        imports: i
+        imports: s
       };
     }
     case "text": {
-      const d = r.data;
-      i.push(d.providerName);
-      const a = d.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${_(u)}`).join(`,
+      const l = r.data;
+      s.push(l.providerName);
+      const a = l.params || {}, m = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${H(u)}`).join(`,
 `);
       return {
-        code: `// Generate text with ${d.providerName}
-const ${o} = await ${d.providerName}.generate({
+        code: `// Generate text with ${l.providerName}
+const ${o} = await ${l.providerName}.generate({
 ${m}
 });`,
-        imports: i
+        imports: s
       };
     }
     case "save": {
-      const d = r.data;
+      const l = r.data;
       return {
         code: `// Save result
-await flo.save(${p || "result"}, ${_(d.destination)});`,
+await flo.save(${p || "result"}, ${H(l.destination)});`,
         imports: []
       };
     }
@@ -2018,23 +2018,23 @@ await flo.save(${p || "result"}, ${_(d.destination)});`,
       };
   }
 }
-function ut(r, l) {
+function ht(r, d) {
   if (r.length === 0)
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
-  const t = ct(r, l), o = /* @__PURE__ */ new Map();
+  const t = pt(r, d), o = /* @__PURE__ */ new Map();
   for (const m of t)
-    o.set(m.id, mt(m));
-  const i = /* @__PURE__ */ new Set(), s = [];
+    o.set(m.id, ut(m));
+  const s = /* @__PURE__ */ new Set(), i = [];
   for (const m of t) {
-    const { code: c, imports: u } = pt(m, l, o);
-    s.push(c);
+    const { code: c, imports: u } = gt(m, d, o);
+    i.push(c);
     for (const h of u)
-      i.add(h);
+      s.add(h);
   }
   const p = [];
-  i.size > 0 && p.push(`import { ${Array.from(i).join(", ")} } from "@teamflojo/floimg";`), p.push('import * as flo from "@teamflojo/floimg";');
-  const d = `/**
+  s.size > 0 && p.push(`import { ${Array.from(s).join(", ")} } from "@teamflojo/floimg";`), p.push('import * as flo from "@teamflojo/floimg";');
+  const l = `/**
  * FloImg Workflow
  * Generated by FloImg Studio
  * https://floimg.com
@@ -2042,7 +2042,7 @@ function ut(r, l) {
 
 `, a = `
 async function runWorkflow() {
-${s.map(
+${i.map(
     (m) => m.split(`
 `).map((c) => "  " + c).join(`
 `)
@@ -2054,20 +2054,20 @@ ${s.map(
 // Run the workflow
 runWorkflow().catch(console.error);
 `;
-  return d + p.join(`
+  return l + p.join(`
 `) + `
 ` + a;
 }
-function gt({ isOpen: r, onClose: l, onImport: t }) {
-  const [o, i] = C(""), [s, p] = C(!1), [d, a] = C(null), [m, c] = C(!1), u = W(async () => {
+function ft({ isOpen: r, onClose: d, onImport: t }) {
+  const [o, s] = C(""), [i, p] = C(!1), [l, a] = C(null), [m, c] = C(!1), u = L(async () => {
     if (!o.trim()) {
       a({ message: "Please enter or paste YAML content" });
       return;
     }
     p(!0), a(null);
     try {
-      const g = await He(o);
-      g.success ? (t(g.nodes, g.edges, g.name), i(""), l()) : a({
+      const g = await _e(o);
+      g.success ? (t(g.nodes, g.edges, g.name), s(""), d()) : a({
         message: g.error || "Import failed",
         line: g.line,
         column: g.column
@@ -2077,46 +2077,46 @@ function gt({ isOpen: r, onClose: l, onImport: t }) {
     } finally {
       p(!1);
     }
-  }, [o, t, l]), h = W(async () => {
+  }, [o, t, d]), h = L(async () => {
     if (!o.trim()) {
       a({ message: "Please enter or paste YAML content" });
       return;
     }
     p(!0), a(null);
     try {
-      const g = await _e(o);
+      const g = await Ke(o);
       g.valid ? (a(null), a({ message: "Valid YAML!" }), setTimeout(() => a(null), 2e3)) : g.errors.length > 0 && a(g.errors[0]);
     } catch (g) {
       a({ message: g instanceof Error ? g.message : "Validation failed" });
     } finally {
       p(!1);
     }
-  }, [o]), b = W(async (g) => {
+  }, [o]), b = L(async (g) => {
     if (!g.name.endsWith(".yaml") && !g.name.endsWith(".yml")) {
       a({ message: "Please upload a .yaml or .yml file" });
       return;
     }
     try {
       const N = await g.text();
-      i(N), a(null);
+      s(N), a(null);
     } catch {
       a({ message: "Failed to read file" });
     }
-  }, []), y = W((g) => {
+  }, []), v = L((g) => {
     g.preventDefault(), c(!0);
-  }, []), v = W((g) => {
+  }, []), y = L((g) => {
     g.preventDefault(), c(!1);
-  }, []), w = W(
+  }, []), w = L(
     (g) => {
       g.preventDefault(), c(!1);
       const N = g.dataTransfer.files[0];
       N && b(N);
     },
     [b]
-  ), x = W(
+  ), f = L(
     (g) => {
-      var A;
-      const N = (A = g.target.files) == null ? void 0 : A[0];
+      var W;
+      const N = (W = g.target.files) == null ? void 0 : W[0];
       N && b(N);
     },
     [b]
@@ -2127,7 +2127,7 @@ function gt({ isOpen: r, onClose: l, onImport: t }) {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: l,
+          onClick: d,
           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",
@@ -2146,8 +2146,8 @@ function gt({ isOpen: r, onClose: l, onImport: t }) {
       /* @__PURE__ */ n(
         "div",
         {
-          onDragOver: y,
-          onDragLeave: v,
+          onDragOver: v,
+          onDragLeave: y,
           onDrop: w,
           className: `border-2 border-dashed rounded-lg p-4 mb-4 text-center transition-colors ${m ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20" : "border-gray-300 dark:border-zinc-600"}`,
           children: [
@@ -2156,7 +2156,7 @@ function gt({ isOpen: r, onClose: l, onImport: t }) {
               {
                 type: "file",
                 accept: ".yaml,.yml",
-                onChange: x,
+                onChange: f,
                 className: "hidden",
                 id: "yaml-file-input"
               }
@@ -2201,7 +2201,7 @@ function gt({ isOpen: r, onClose: l, onImport: t }) {
         {
           value: o,
           onChange: (g) => {
-            i(g.target.value), a(null);
+            s(g.target.value), a(null);
           },
           placeholder: `name: My Workflow
 steps:
@@ -2225,16 +2225,16 @@ steps:
           className: "w-full h-64 p-3 font-mono text-sm bg-gray-100 dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-800 dark:text-zinc-200"
         }
       ),
-      d && /* @__PURE__ */ n(
+      l && /* @__PURE__ */ n(
         "div",
         {
-          className: `mt-4 p-3 rounded-lg text-sm ${d.message === "Valid YAML!" ? "bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400"}`,
+          className: `mt-4 p-3 rounded-lg text-sm ${l.message === "Valid YAML!" ? "bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400"}`,
           children: [
-            /* @__PURE__ */ e("span", { className: "font-medium", children: d.message }),
-            d.line && /* @__PURE__ */ n("span", { className: "ml-2 text-xs", children: [
+            /* @__PURE__ */ e("span", { className: "font-medium", children: l.message }),
+            l.line && /* @__PURE__ */ n("span", { className: "ml-2 text-xs", children: [
               "(line ",
-              d.line,
-              d.column ? `, column ${d.column}` : "",
+              l.line,
+              l.column ? `, column ${l.column}` : "",
               ")"
             ] })
           ]
@@ -2248,7 +2248,7 @@ steps:
           "button",
           {
             onClick: h,
-            disabled: s || !o.trim(),
+            disabled: i || !o.trim(),
             className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed",
             children: "Validate"
           }
@@ -2257,10 +2257,10 @@ steps:
           "button",
           {
             onClick: u,
-            disabled: s || !o.trim(),
+            disabled: i || !o.trim(),
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
             children: [
-              s && /* @__PURE__ */ n("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
+              i && /* @__PURE__ */ n("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
                   {
@@ -2289,59 +2289,59 @@ steps:
     ] })
   ] }) }) : null;
 }
-function ht({
+function bt({
   brandingSlot: r,
-  beforeActionsSlot: l,
+  beforeActionsSlot: d,
   afterActionsSlot: t,
   hideAttribution: o = !1,
-  hideWorkflowLibrary: i = !1
+  hideWorkflowLibrary: s = !1
 } = {}) {
-  const s = f((z) => z.execution), p = f((z) => z.execute), d = f((z) => z.exportToYaml), a = f((z) => z.importFromYaml), m = f((z) => z.nodes), c = f((z) => z.edges), u = V((z) => z.openSettings), h = f((z) => z.activeWorkflowName), b = f((z) => z.hasUnsavedChanges), y = f((z) => z.saveWorkflow), v = f((z) => z.toggleLibrary), w = f((z) => z.setActiveWorkflowName), x = f((z) => z.selectedNodeId), g = f((z) => z.duplicateNode), [N, A] = C(!1), [k, L] = C(!1), [S, R] = C("yaml"), [J, Y] = C(""), [I, M] = C(""), [E, O] = C(null), [xe, X] = C(!1), [oe, Z] = C("");
+  const i = x((z) => z.execution), p = x((z) => z.execute), l = x((z) => z.exportToYaml), a = x((z) => z.importFromYaml), m = x((z) => z.nodes), c = x((z) => z.edges), u = B((z) => z.openSettings), h = x((z) => z.activeWorkflowName), b = x((z) => z.hasUnsavedChanges), v = x((z) => z.saveWorkflow), y = x((z) => z.toggleLibrary), w = x((z) => z.setActiveWorkflowName), f = x((z) => z.selectedNodeId), g = x((z) => z.duplicateNode), [N, W] = C(!1), [k, A] = C(!1), [S, O] = C("yaml"), [Q, Y] = C(""), [I, T] = C(""), [E, R] = C(null), [xe, X] = C(!1), [ne, Z] = C("");
   U(() => {
     const z = () => {
-      O("New workflow created"), setTimeout(() => O(null), 2e3);
+      R("New workflow created"), setTimeout(() => R(null), 2e3);
     };
     return window.addEventListener("new-workflow-created", z), () => window.removeEventListener("new-workflow-created", z);
   }, []);
-  const ee = W(() => {
-    m.length !== 0 && (y(), O("Saved!"), setTimeout(() => O(null), 2e3));
-  }, [m.length, y]), be = () => {
+  const ee = L(() => {
+    m.length !== 0 && (v(), R("Saved!"), setTimeout(() => R(null), 2e3));
+  }, [m.length, v]), ke = () => {
     Z(h), X(!0);
-  }, ne = () => {
-    const z = oe.trim();
+  }, ie = () => {
+    const z = ne.trim();
     z && z !== h && w(z), X(!1);
-  }, se = W(() => {
-    x && g(x);
-  }, [x, g]);
+  }, se = L(() => {
+    f && g(f);
+  }, [f, g]);
   U(() => {
-    function z(D) {
-      (D.metaKey || D.ctrlKey) && D.key === "s" && (D.preventDefault(), ee()), (D.metaKey || D.ctrlKey) && D.key === "d" && (D.preventDefault(), se());
+    function z(j) {
+      (j.metaKey || j.ctrlKey) && j.key === "s" && (j.preventDefault(), ee()), (j.metaKey || j.ctrlKey) && j.key === "d" && (j.preventDefault(), se());
     }
     return document.addEventListener("keydown", z), () => document.removeEventListener("keydown", z);
   }, [ee, se]);
-  const fe = async () => {
+  const ye = async () => {
     await p();
-  }, ke = async () => {
-    const z = await d();
+  }, ve = async () => {
+    const z = await l();
     Y(z);
-    const D = ut(m, c);
-    M(D), A(!0);
-  }, ve = () => {
-    const z = S === "yaml" ? J : I;
+    const j = ht(m, c);
+    T(j), W(!0);
+  }, we = () => {
+    const z = S === "yaml" ? Q : I;
     navigator.clipboard.writeText(z);
-  }, ye = W(
-    (z, D, we) => {
-      a(z, D, we), O("Workflow imported!"), setTimeout(() => O(null), 2e3);
+  }, Ne = L(
+    (z, j, ze) => {
+      a(z, j, ze), R("Workflow imported!"), setTimeout(() => R(null), 2e3);
     },
     [a]
   );
-  return /* @__PURE__ */ n(B, { children: [
+  return /* @__PURE__ */ n(q, { children: [
     /* @__PURE__ */ n("div", { className: "h-14 bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700 flex items-center justify-between px-4", children: [
       /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
-        !i && /* @__PURE__ */ e(
+        !s && /* @__PURE__ */ e(
           "button",
           {
-            onClick: v,
+            onClick: y,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md",
             title: "My Workflows",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -2374,11 +2374,11 @@ function ht({
             "input",
             {
               type: "text",
-              value: oe,
+              value: ne,
               onChange: (z) => Z(z.target.value),
-              onBlur: ne,
+              onBlur: ie,
               onKeyDown: (z) => {
-                z.key === "Enter" && ne(), z.key === "Escape" && (Z(h), X(!1));
+                z.key === "Enter" && ie(), z.key === "Escape" && (Z(h), X(!1));
               },
               className: "w-48 px-2 py-1 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500 text-gray-900 dark:text-zinc-100",
               autoFocus: !0
@@ -2386,7 +2386,7 @@ function ht({
           ) : /* @__PURE__ */ e(
             "button",
             {
-              onClick: be,
+              onClick: ke,
               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: h
@@ -2402,7 +2402,7 @@ function ht({
         ] })
       ] }),
       /* @__PURE__ */ n("div", { className: "flex items-center gap-3", children: [
-        l,
+        d,
         /* @__PURE__ */ e(
           "button",
           {
@@ -2452,7 +2452,7 @@ function ht({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => L(!0),
+            onClick: () => A(!0),
             className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600",
             children: "Import"
           }
@@ -2460,7 +2460,7 @@ function ht({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: ke,
+            onClick: ve,
             disabled: m.length === 0,
             className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed",
             children: "Export"
@@ -2469,10 +2469,10 @@ function ht({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: fe,
-            disabled: m.length === 0 || s.status === "running",
+            onClick: ye,
+            disabled: m.length === 0 || i.status === "running",
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
-            children: s.status === "running" ? /* @__PURE__ */ n(B, { children: [
+            children: i.status === "running" ? /* @__PURE__ */ n(q, { children: [
               /* @__PURE__ */ n("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
@@ -2495,7 +2495,7 @@ function ht({
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ n(B, { children: [
+            ] }) : /* @__PURE__ */ n(q, { children: [
               /* @__PURE__ */ n("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
@@ -2523,25 +2523,25 @@ function ht({
         t
       ] })
     ] }),
-    s.status === "completed" && s.imageIds.length > 0 && /* @__PURE__ */ e("div", { className: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800 px-4 py-3", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
+    i.status === "completed" && i.imageIds.length > 0 && /* @__PURE__ */ e("div", { className: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800 px-4 py-3", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ n("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
         "Generated ",
-        s.imageIds.length,
+        i.imageIds.length,
         " image",
-        s.imageIds.length !== 1 ? "s" : ""
+        i.imageIds.length !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex gap-2", children: s.imageUrls.slice(0, 4).map((z, D) => /* @__PURE__ */ e("a", { href: z, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex gap-2", children: i.imageUrls.slice(0, 4).map((z, j) => /* @__PURE__ */ e("a", { href: z, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
         "img",
         {
           src: z,
           alt: "Generated",
           className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
         }
-      ) }, D)) })
+      ) }, j)) })
     ] }) }),
-    s.status === "error" && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-3", children: /* @__PURE__ */ n("span", { className: "text-red-700 dark:text-red-400", children: [
+    i.status === "error" && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-3", children: /* @__PURE__ */ n("span", { className: "text-red-700 dark:text-red-400", children: [
       "Error: ",
-      s.error
+      i.error
     ] }) }),
     N && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ n("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__ */ n("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
@@ -2551,7 +2551,7 @@ function ht({
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => R("yaml"),
+                onClick: () => O("yaml"),
                 className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${S === "yaml" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "YAML"
               }
@@ -2559,7 +2559,7 @@ function ht({
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => R("javascript"),
+                onClick: () => O("javascript"),
                 className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${S === "javascript" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "JavaScript"
               }
@@ -2569,7 +2569,7 @@ function ht({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => A(!1),
+            onClick: () => W(!1),
             className: "text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200",
             children: /* @__PURE__ */ e("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -2583,14 +2583,14 @@ function ht({
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: S === "yaml" ? J : I }) }),
+      /* @__PURE__ */ e("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: S === "yaml" ? Q : I }) }),
       /* @__PURE__ */ n("div", { className: "flex justify-between items-center px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: S === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
         /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: ve,
+              onClick: we,
               className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600",
               children: "Copy to Clipboard"
             }
@@ -2598,7 +2598,7 @@ function ht({
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => A(!1),
+              onClick: () => W(!1),
               className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
               children: "Close"
             }
@@ -2607,36 +2607,36 @@ function ht({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      gt,
+      ft,
       {
         isOpen: k,
-        onClose: () => L(!1),
-        onImport: ye
+        onClose: () => A(!1),
+        onImport: Ne
       }
     )
   ] });
 }
 function xt() {
-  const r = f((a) => a.loadTemplate), [l, t] = C(null), {
+  const r = x((a) => a.loadTemplate), [d, t] = C(null), {
     data: o,
-    isLoading: i,
-    error: s,
+    isLoading: s,
+    error: i,
     refetch: p
-  } = K({
+  } = _({
     queryKey: ["images"],
-    queryFn: Ee,
+    queryFn: Be,
     refetchInterval: 5e3
     // Auto-refresh every 5 seconds
-  }), d = async (a) => {
+  }), l = async (a) => {
     t(a);
     try {
-      const m = await Be(a);
+      const m = await Ge(a);
       if (m != null && m.workflow) {
         const c = {
           id: `image-${a}`,
           name: `Workflow from ${a}`,
           description: "Loaded from gallery image",
-          category: "Gallery",
+          category: "Utilities",
           generator: "unknown",
           workflow: {
             nodes: m.workflow.nodes,
@@ -2652,9 +2652,9 @@ function xt() {
       t(null);
     }
   };
-  return i ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : s ? /* @__PURE__ */ n("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
+  return s ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : i ? /* @__PURE__ */ n("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
     "Error loading images: ",
-    s instanceof Error ? s.message : "Unknown error"
+    i instanceof Error ? i.message : "Unknown error"
   ] }) : !o || o.length === 0 ? /* @__PURE__ */ n("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: [
     /* @__PURE__ */ e("div", { className: "text-lg mb-2", children: "No images yet" }),
     /* @__PURE__ */ e("div", { className: "text-sm", children: "Create a workflow and click Execute to generate images" })
@@ -2678,18 +2678,18 @@ function xt() {
       )
     ] }),
     /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: o.map((a) => /* @__PURE__ */ e(
-      bt,
+      kt,
       {
         image: a,
-        onLoadWorkflow: () => d(a.id),
-        isLoading: l === a.id
+        onLoadWorkflow: () => l(a.id),
+        isLoading: d === a.id
       },
       a.id
     )) })
   ] });
 }
-function bt({ image: r, onLoadWorkflow: l, isLoading: t }) {
-  const o = (s) => new Date(s).toLocaleString(), i = (s) => s < 1024 ? `${s} B` : s < 1048576 ? `${(s / 1024).toFixed(1)} KB` : `${(s / 1048576).toFixed(1)} MB`;
+function kt({ image: r, onLoadWorkflow: d, isLoading: t }) {
+  const o = (i) => new Date(i).toLocaleString(), s = (i) => i < 1024 ? `${i} B` : i < 1048576 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1048576).toFixed(1)} MB`;
   return /* @__PURE__ */ n("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden shadow-sm hover:shadow-md transition-shadow group", children: [
     /* @__PURE__ */ n("div", { className: "relative", children: [
       /* @__PURE__ */ e(
@@ -2713,8 +2713,8 @@ function bt({ image: r, onLoadWorkflow: l, isLoading: t }) {
       /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
         "button",
         {
-          onClick: (s) => {
-            s.preventDefault(), l();
+          onClick: (i) => {
+            i.preventDefault(), d();
           },
           disabled: t,
           className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
@@ -2727,19 +2727,45 @@ function bt({ image: r, onLoadWorkflow: l, isLoading: t }) {
       /* @__PURE__ */ n("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
         r.mime,
         " • ",
-        i(r.size)
+        s(r.size)
       ] }),
       /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: o(r.createdAt) })
     ] })
   ] });
 }
-const ft = {
-  id: "sales-dashboard",
-  name: "Sales Dashboard",
-  description: "Quarterly revenue bar chart with gradient styling",
-  category: "Charts",
+const yt = {
+  id: "revenue-chart",
+  name: "Revenue Dashboard",
+  description: "Quarterly revenue visualization with gradient bars",
+  category: "Data Viz",
   generator: "quickchart",
-  tags: ["bar", "sales", "revenue", "quarterly"],
+  tags: ["bar", "revenue", "quarterly", "dashboard", "sales"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "chart",
+  preview: {
+    imageUrl: "/showcase/data-viz/quarterly-revenue.png"
+  },
+  codeExample: `const chart = await floimg.generate({
+  generator: 'quickchart',
+  params: {
+    type: 'bar',
+    data: {
+      labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+      datasets: [{
+        label: 'Revenue ($M)',
+        data: [12, 19, 8, 15]
+      }]
+    }
+  }
+});`,
+  seo: {
+    title: "Revenue Dashboard Chart Template",
+    description: "Generate professional quarterly revenue bar charts with gradient styling",
+    keywords: ["revenue chart", "bar chart", "quarterly report", "dashboard"]
+  },
   workflow: {
     nodes: [
       {
@@ -2783,13 +2809,26 @@ const ft = {
     ],
     edges: []
   }
-}, kt = {
-  id: "user-growth",
-  name: "User Growth Line Chart",
-  description: "Monthly user growth with smooth bezier curves",
-  category: "Charts",
+}, vt = {
+  id: "monthly-users",
+  name: "User Growth Chart",
+  description: "Track monthly user growth with smooth line chart",
+  category: "Data Viz",
   generator: "quickchart",
-  tags: ["line", "growth", "users", "monthly"],
+  tags: ["line", "growth", "users", "monthly", "analytics"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "chart",
+  preview: {
+    imageUrl: "/showcase/data-viz/monthly-users.png"
+  },
+  seo: {
+    title: "User Growth Chart Template",
+    description: "Visualize monthly user growth with smooth bezier curves",
+    keywords: ["user growth", "line chart", "analytics", "monthly stats"]
+  },
   workflow: {
     nodes: [
       {
@@ -2831,13 +2870,138 @@ const ft = {
     ],
     edges: []
   }
-}, vt = {
+}, wt = {
+  id: "framework-usage",
+  name: "Framework Usage Stats",
+  description: "Compare framework popularity with horizontal bar chart",
+  category: "Data Viz",
+  generator: "quickchart",
+  tags: ["bar", "comparison", "stats", "horizontal", "frameworks"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "chart",
+  preview: {
+    imageUrl: "/showcase/data-viz/framework-usage.png"
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
+        type: "generator",
+        position: { x: 100, y: 100 },
+        data: {
+          generatorName: "quickchart",
+          params: {
+            chart: {
+              type: "horizontalBar",
+              data: {
+                labels: ["React", "Vue", "Angular", "Svelte", "Solid"],
+                datasets: [
+                  {
+                    label: "Usage %",
+                    data: [42, 18, 15, 8, 4],
+                    backgroundColor: [
+                      "rgba(97, 218, 251, 0.8)",
+                      "rgba(65, 184, 131, 0.8)",
+                      "rgba(221, 0, 49, 0.8)",
+                      "rgba(255, 62, 0, 0.8)",
+                      "rgba(68, 107, 158, 0.8)"
+                    ]
+                  }
+                ]
+              },
+              options: {
+                plugins: {
+                  title: {
+                    display: !0,
+                    text: "Frontend Framework Usage 2024"
+                  }
+                }
+              }
+            },
+            width: 600,
+            height: 400
+          }
+        }
+      }
+    ],
+    edges: []
+  }
+}, Nt = {
+  id: "traffic-breakdown",
+  name: "Traffic by Device",
+  description: "Doughnut chart showing traffic sources by device type",
+  category: "Data Viz",
+  generator: "quickchart",
+  tags: ["doughnut", "traffic", "analytics", "pie", "devices"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "chart",
+  preview: {
+    imageUrl: "/showcase/data-viz/traffic-by-device.png"
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
+        type: "generator",
+        position: { x: 100, y: 100 },
+        data: {
+          generatorName: "quickchart",
+          params: {
+            chart: {
+              type: "doughnut",
+              data: {
+                labels: ["Desktop", "Mobile", "Tablet"],
+                datasets: [
+                  {
+                    data: [55, 35, 10],
+                    backgroundColor: [
+                      "rgba(99, 102, 241, 0.8)",
+                      "rgba(34, 197, 94, 0.8)",
+                      "rgba(249, 115, 22, 0.8)"
+                    ]
+                  }
+                ]
+              },
+              options: {
+                plugins: {
+                  title: {
+                    display: !0,
+                    text: "Traffic by Device Type"
+                  }
+                }
+              }
+            },
+            width: 400,
+            height: 400
+          }
+        }
+      }
+    ],
+    edges: []
+  }
+}, zt = {
   id: "api-flow",
   name: "API Request Flow",
   description: "Sequence diagram showing API authentication flow",
-  category: "Diagrams",
+  category: "Data Viz",
   generator: "mermaid",
-  tags: ["sequence", "api", "authentication", "flow"],
+  tags: ["sequence", "api", "authentication", "diagram", "flow"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "diagram",
+  seo: {
+    title: "API Flow Diagram Template",
+    description: "Generate sequence diagrams for API authentication flows",
+    keywords: ["api diagram", "sequence diagram", "authentication flow"]
+  },
   workflow: {
     nodes: [
       {
@@ -2873,13 +3037,23 @@ const ft = {
     ],
     edges: []
   }
-}, yt = {
+}, Ct = {
   id: "system-architecture",
   name: "System Architecture",
   description: "Microservices architecture diagram",
-  category: "Diagrams",
+  category: "Data Viz",
   generator: "mermaid",
-  tags: ["architecture", "microservices", "system", "flowchart"],
+  tags: ["architecture", "microservices", "flowchart", "system", "infrastructure"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "diagram",
+  seo: {
+    title: "System Architecture Diagram Template",
+    description: "Generate microservices architecture diagrams with Mermaid",
+    keywords: ["architecture diagram", "microservices", "system design"]
+  },
   workflow: {
     nodes: [
       {
@@ -2931,13 +3105,18 @@ const ft = {
     ],
     edges: []
   }
-}, wt = {
+}, It = {
   id: "git-workflow",
   name: "Git Branch Workflow",
   description: "Git branching strategy with feature and release branches",
-  category: "Diagrams",
+  category: "Data Viz",
   generator: "mermaid",
-  tags: ["git", "branching", "workflow", "development"],
+  tags: ["git", "branching", "workflow", "development", "version-control"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "diagram",
   workflow: {
     nodes: [
       {
@@ -2974,139 +3153,925 @@ const ft = {
     ],
     edges: []
   }
-}, Nt = {
-  id: "website-qr",
-  name: "Website QR Code",
-  description: "QR code linking to your website with custom styling",
-  category: "QR Codes",
-  generator: "qr",
-  tags: ["qr", "website", "link", "url"],
+}, St = [
+  yt,
+  vt,
+  wt,
+  Nt,
+  zt,
+  Ct,
+  It
+], At = {
+  id: "ai-product-shot",
+  name: "AI Product Photography",
+  description: "Generate professional product images with AI-controlled lighting and backgrounds",
+  category: "AI Workflows",
+  generator: "openai",
+  tags: ["product", "ecommerce", "photography", "dall-e", "ai"],
+  requiresCloud: !0,
+  requiresAuth: !0,
+  usesAI: !0,
+  aiCreditsNeeded: 1,
+  capabilities: {
+    studioCompatible: !0
+  },
+  icon: "sparkles",
+  valueProp: "Professional product photos in seconds",
+  preview: {
+    imageUrl: "/showcase/ai-generation/product-headphones.png"
+  },
+  codeExample: `const image = await floimg.generate({
+  generator: 'openai',
+  params: {
+    prompt: 'Professional product photo of headphones on white background',
+    size: '1024x1024'
+  }
+});`,
+  seo: {
+    title: "AI Product Photography Template",
+    description: "Generate professional product photos with AI-controlled lighting and backgrounds",
+    keywords: ["product photography", "ai generation", "ecommerce", "dall-e"]
+  },
   workflow: {
     nodes: [
       {
-        id: "gen-1",
+        id: "gen-ai",
         type: "generator",
-        position: { x: 100, y: 100 },
+        position: { x: 100, y: 150 },
         data: {
-          generatorName: "qr",
+          generatorName: "openai",
           params: {
-            data: "https://floimg.com",
-            size: 400,
-            margin: 2,
-            dark: "#4f46e5",
-            light: "#ffffff",
-            errorCorrectionLevel: "M"
+            prompt: "Professional product photo of modern wireless headphones on a clean white background, studio lighting, high-end commercial photography style",
+            model: "dall-e-3",
+            size: "1024x1024",
+            quality: "hd"
           }
         }
       }
     ],
     edges: []
   }
-}, zt = {
-  id: "wifi-qr",
-  name: "WiFi QR Code",
-  description: "Scannable QR code for WiFi network access",
-  category: "QR Codes",
-  generator: "qr",
-  tags: ["qr", "wifi", "network", "guest"],
+}, Lt = {
+  id: "ai-hero-image",
+  name: "AI Hero Image",
+  description: "Create stunning hero images for websites and landing pages",
+  category: "AI Workflows",
+  generator: "openai",
+  tags: ["hero", "landing-page", "marketing", "dall-e", "ai"],
+  requiresCloud: !0,
+  requiresAuth: !0,
+  usesAI: !0,
+  aiCreditsNeeded: 1,
+  capabilities: {
+    studioCompatible: !0
+  },
+  icon: "sparkles",
+  valueProp: "Stunning hero images for your landing page",
+  preview: {
+    imageUrl: "/showcase/ai-generation/futuristic-city.png"
+  },
+  codeExample: `const image = await floimg.generate({
+  generator: 'openai',
+  params: {
+    prompt: 'Futuristic city skyline at sunset, cinematic lighting',
+    size: '1792x1024'
+  }
+});`,
+  seo: {
+    title: "AI Hero Image Generator",
+    description: "Generate stunning hero images for websites and landing pages with AI",
+    keywords: ["hero image", "landing page", "ai generation", "website design"]
+  },
   workflow: {
     nodes: [
       {
-        id: "gen-1",
+        id: "gen-ai",
         type: "generator",
-        position: { x: 100, y: 100 },
+        position: { x: 100, y: 150 },
         data: {
-          generatorName: "qr",
+          generatorName: "openai",
           params: {
-            data: "WIFI:T:WPA;S:GuestNetwork;P:welcome123;;",
-            size: 400,
-            margin: 2,
-            dark: "#059669",
-            light: "#ffffff",
-            errorCorrectionLevel: "H"
+            prompt: "Futuristic city skyline at golden hour sunset, cinematic wide angle, volumetric lighting, sci-fi architecture, dramatic clouds, professional photography",
+            model: "dall-e-3",
+            size: "1792x1024",
+            quality: "hd"
           }
         }
       }
     ],
     edges: []
   }
-}, Ct = {
-  id: "chart-watermark",
-  name: "Chart with Watermark",
-  description: "Bar chart with company watermark and rounded corners",
-  category: "Pipelines",
-  generator: "quickchart",
-  tags: ["chart", "watermark", "branded", "pipeline"],
+}, Wt = {
+  id: "ai-mascot",
+  name: "AI Mascot Generator",
+  description: "Design unique mascots and characters for your brand",
+  category: "AI Workflows",
+  generator: "openai",
+  tags: ["mascot", "character", "branding", "dall-e", "ai"],
+  requiresCloud: !0,
+  requiresAuth: !0,
+  usesAI: !0,
+  aiCreditsNeeded: 1,
+  capabilities: {
+    studioCompatible: !0
+  },
+  icon: "sparkles",
+  valueProp: "Unique mascots for your brand",
+  preview: {
+    imageUrl: "/showcase/ai-generation/robot-mascot.png"
+  },
+  seo: {
+    title: "AI Mascot Generator",
+    description: "Create unique brand mascots and characters with AI",
+    keywords: ["mascot design", "character design", "branding", "ai generation"]
+  },
   workflow: {
     nodes: [
       {
-        id: "gen-1",
+        id: "gen-ai",
         type: "generator",
-        position: { x: 100, y: 100 },
+        position: { x: 100, y: 150 },
         data: {
-          generatorName: "quickchart",
+          generatorName: "openai",
           params: {
-            chart: {
-              type: "bar",
-              data: {
-                labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
-                datasets: [
-                  {
-                    label: "Sales",
-                    data: [45, 62, 38, 71, 55],
-                    backgroundColor: "rgba(99, 102, 241, 0.8)"
-                  }
-                ]
-              }
-            },
-            width: 600,
-            height: 400
+            prompt: "Friendly robot mascot character, modern flat design style, vibrant teal and purple colors, simple geometric shapes, suitable for tech company branding, white background",
+            model: "dall-e-3",
+            size: "1024x1024",
+            quality: "hd"
+          }
+        }
+      }
+    ],
+    edges: []
+  }
+}, Pt = {
+  id: "cloud-ai-logo-brand",
+  name: "AI Logo to Brand Kit",
+  description: "Generate a logo with AI, then create production-ready brand assets",
+  category: "AI Workflows",
+  generator: "openai",
+  tags: ["ai", "logo", "branding", "dall-e", "pipeline"],
+  requiresCloud: !0,
+  requiresAuth: !0,
+  usesAI: !0,
+  aiCreditsNeeded: 1,
+  capabilities: {
+    studioCompatible: !0,
+    pipeline: !0
+  },
+  icon: "sparkles",
+  valueProp: "From idea to brand kit in seconds",
+  seo: {
+    title: "AI Logo to Brand Kit",
+    description: "Generate a logo with AI and create production-ready brand assets",
+    keywords: ["logo design", "brand kit", "ai generation", "branding"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-ai",
+        type: "generator",
+        position: { x: 100, y: 150 },
+        data: {
+          generatorName: "openai",
+          params: {
+            prompt: "A modern minimalist logo for a tech startup called 'Nexus', clean geometric lines, professional, suitable for business cards and websites, white background",
+            model: "dall-e-3",
+            size: "1024x1024",
+            quality: "standard"
           }
         }
       },
       {
-        id: "transform-1",
+        id: "transform-bg",
         type: "transform",
-        position: { x: 400, y: 100 },
+        position: { x: 400, y: 150 },
+        data: {
+          operation: "removeBackground",
+          params: {}
+        }
+      },
+      {
+        id: "transform-watermark",
+        type: "transform",
+        position: { x: 700, y: 150 },
         data: {
           operation: "addCaption",
           params: {
-            text: "floimg.com",
+            text: "Nexus Inc.",
             position: "bottom-right",
             fontSize: 14,
-            color: "#9ca3af",
-            padding: 10
+            color: "#6B7280",
+            padding: 16
           }
         }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "gen-ai", target: "transform-bg" },
+      { id: "e2", source: "transform-bg", target: "transform-watermark" }
+    ]
+  }
+}, Mt = {
+  id: "cloud-product-enhance",
+  name: "Product Photo Enhancement",
+  description: "Remove background and add professional product labeling",
+  category: "AI Workflows",
+  generator: "input",
+  tags: ["product", "ecommerce", "background-removal", "pipeline"],
+  requiresCloud: !0,
+  requiresAuth: !0,
+  usesAI: !1,
+  // Uses AI transforms but not AI generation
+  aiCreditsNeeded: 0,
+  capabilities: {
+    studioCompatible: !0,
+    pipeline: !0
+  },
+  icon: "image",
+  valueProp: "E-commerce ready in one click",
+  workflow: {
+    nodes: [
+      {
+        id: "input-1",
+        type: "input",
+        position: { x: 100, y: 150 },
+        data: {}
       },
       {
-        id: "transform-2",
+        id: "transform-bg",
         type: "transform",
-        position: { x: 700, y: 100 },
+        position: { x: 400, y: 150 },
         data: {
-          operation: "roundCorners",
+          operation: "removeBackground",
+          params: {}
+        }
+      },
+      {
+        id: "transform-caption",
+        type: "transform",
+        position: { x: 700, y: 150 },
+        data: {
+          operation: "addCaption",
           params: {
-            radius: 16
+            text: "Premium Quality",
+            position: "bottom-center",
+            fontSize: 24,
+            color: "#18181B",
+            padding: 20
           }
         }
       }
     ],
     edges: [
-      { id: "e1", source: "gen-1", target: "transform-1" },
-      { id: "e2", source: "transform-1", target: "transform-2" }
+      { id: "e1", source: "input-1", target: "transform-bg" },
+      { id: "e2", source: "transform-bg", target: "transform-caption" }
     ]
   }
-}, It = {
-  id: "diagram-webp",
-  name: "Diagram to WebP",
-  description: "Mermaid diagram converted to optimized WebP format",
-  category: "Pipelines",
-  generator: "mermaid",
-  tags: ["mermaid", "webp", "optimize", "pipeline"],
+}, Dt = {
+  id: "cloud-ai-social",
+  name: "AI Art to Social Post",
+  description: "Generate creative AI art, optimize for social media",
+  category: "AI Workflows",
+  generator: "openai",
+  tags: ["ai", "art", "social-media", "dall-e", "pipeline"],
+  requiresCloud: !0,
+  requiresAuth: !0,
+  usesAI: !0,
+  aiCreditsNeeded: 1,
+  capabilities: {
+    studioCompatible: !0,
+    pipeline: !0
+  },
+  icon: "share",
+  valueProp: "Creative content for your feed",
   workflow: {
     nodes: [
       {
-        id: "gen-1",
+        id: "gen-ai",
+        type: "generator",
+        position: { x: 100, y: 150 },
+        data: {
+          generatorName: "openai",
+          params: {
+            prompt: "Abstract colorful digital art with flowing gradients, trending on artstation, vibrant neon colors, perfect for social media",
+            model: "dall-e-3",
+            size: "1024x1024",
+            style: "vivid"
+          }
+        }
+      },
+      {
+        id: "transform-corners",
+        type: "transform",
+        position: { x: 400, y: 100 },
+        data: {
+          operation: "roundCorners",
+          params: {
+            radius: 24
+          }
+        }
+      },
+      {
+        id: "transform-caption",
+        type: "transform",
+        position: { x: 700, y: 100 },
+        data: {
+          operation: "addCaption",
+          params: {
+            text: "@floimg",
+            position: "bottom-right",
+            fontSize: 18,
+            color: "#FFFFFF",
+            padding: 16
+          }
+        }
+      },
+      {
+        id: "transform-webp",
+        type: "transform",
+        position: { x: 1e3, y: 100 },
+        data: {
+          operation: "convert",
+          params: {
+            to: "image/webp",
+            quality: 85
+          }
+        }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "gen-ai", target: "transform-corners" },
+      { id: "e2", source: "transform-corners", target: "transform-caption" },
+      { id: "e3", source: "transform-caption", target: "transform-webp" }
+    ]
+  }
+}, Tt = [
+  At,
+  Lt,
+  Wt,
+  Pt,
+  Mt,
+  Dt
+], jt = {
+  id: "social-media-kit",
+  name: "Social Media Kit",
+  description: "Generate optimized images for all social platforms from one source",
+  category: "Marketing",
+  generator: "pipeline",
+  tags: ["social", "og-image", "twitter", "instagram", "resize"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0,
+    pipeline: !0
+  },
+  icon: "share",
+  preview: {
+    imageUrl: "/showcase/pipelines/output/og-image.png"
+  },
+  codeExample: `// One source -> all platforms
+const socialKit = await floimg.pipeline(heroImage, [
+  { op: 'resize', params: { width: 1200, height: 630 }, save: 'og-image.png' },
+  { op: 'resize', params: { width: 800, height: 418 }, save: 'twitter-card.png' },
+  { op: 'resize', params: { width: 1080, height: 1080 }, save: 'instagram.png' },
+]);`,
+  seo: {
+    title: "Social Media Kit Generator",
+    description: "Generate optimized images for all social platforms from one source image",
+    keywords: [
+      "social media",
+      "og image",
+      "twitter card",
+      "instagram",
+      "image resize"
+    ]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "input-1",
+        type: "input",
+        position: { x: 100, y: 200 },
+        data: {}
+      },
+      {
+        id: "transform-og",
+        type: "transform",
+        position: { x: 400, y: 100 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 1200,
+            height: 630,
+            fit: "cover"
+          }
+        }
+      },
+      {
+        id: "transform-twitter",
+        type: "transform",
+        position: { x: 400, y: 200 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 800,
+            height: 418,
+            fit: "cover"
+          }
+        }
+      },
+      {
+        id: "transform-instagram",
+        type: "transform",
+        position: { x: 400, y: 300 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 1080,
+            height: 1080,
+            fit: "cover"
+          }
+        }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "input-1", target: "transform-og" },
+      { id: "e2", source: "input-1", target: "transform-twitter" },
+      { id: "e3", source: "input-1", target: "transform-instagram" }
+    ]
+  }
+}, $t = {
+  id: "avatar-pipeline",
+  name: "Avatar Processing",
+  description: "Generate consistent avatar sizes with circular crop and optimization",
+  category: "Marketing",
+  generator: "pipeline",
+  tags: ["avatar", "profile", "resize", "crop", "user"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0,
+    pipeline: !0
+  },
+  icon: "image",
+  preview: {
+    imageUrl: "/showcase/pipelines/output/avatar-128.png"
+  },
+  codeExample: `const avatars = await floimg.pipeline(photo, [
+  { op: 'crop', params: { shape: 'circle' } },
+  { op: 'resize', params: { width: 256 }, save: 'avatar-256.png' },
+  { op: 'resize', params: { width: 128 }, save: 'avatar-128.png' },
+  { op: 'resize', params: { width: 64 }, save: 'avatar-64.png' },
+]);`,
+  seo: {
+    title: "Avatar Processing Pipeline",
+    description: "Generate consistent avatar sizes with circular crop and optimization",
+    keywords: ["avatar", "profile picture", "image resize", "circular crop"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "input-1",
+        type: "input",
+        position: { x: 100, y: 200 },
+        data: {}
+      },
+      {
+        id: "transform-crop",
+        type: "transform",
+        position: { x: 350, y: 200 },
+        data: {
+          operation: "crop",
+          params: {
+            shape: "circle"
+          }
+        }
+      },
+      {
+        id: "transform-256",
+        type: "transform",
+        position: { x: 600, y: 100 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 256,
+            height: 256
+          }
+        }
+      },
+      {
+        id: "transform-128",
+        type: "transform",
+        position: { x: 600, y: 200 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 128,
+            height: 128
+          }
+        }
+      },
+      {
+        id: "transform-64",
+        type: "transform",
+        position: { x: 600, y: 300 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 64,
+            height: 64
+          }
+        }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "input-1", target: "transform-crop" },
+      { id: "e2", source: "transform-crop", target: "transform-256" },
+      { id: "e3", source: "transform-crop", target: "transform-128" },
+      { id: "e4", source: "transform-crop", target: "transform-64" }
+    ]
+  }
+}, Ut = {
+  id: "watermark-branding",
+  name: "Branded Watermark",
+  description: "Add your logo watermark to images automatically",
+  category: "Marketing",
+  generator: "pipeline",
+  tags: ["watermark", "branding", "logo", "protection", "copyright"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0,
+    pipeline: !0
+  },
+  icon: "image",
+  preview: {
+    imageUrl: "/showcase/pipelines/output/watermark-branded.png"
+  },
+  seo: {
+    title: "Branded Watermark Template",
+    description: "Add professional watermarks to protect and brand your images",
+    keywords: ["watermark", "branding", "image protection", "logo overlay"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
+        type: "generator",
+        position: { x: 100, y: 100 },
+        data: {
+          generatorName: "quickchart",
+          params: {
+            chart: {
+              type: "bar",
+              data: {
+                labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
+                datasets: [
+                  {
+                    label: "Sales",
+                    data: [45, 62, 38, 71, 55],
+                    backgroundColor: "rgba(99, 102, 241, 0.8)"
+                  }
+                ]
+              }
+            },
+            width: 600,
+            height: 400
+          }
+        }
+      },
+      {
+        id: "transform-1",
+        type: "transform",
+        position: { x: 400, y: 100 },
+        data: {
+          operation: "addCaption",
+          params: {
+            text: "floimg.com",
+            position: "bottom-right",
+            fontSize: 14,
+            color: "#9ca3af",
+            padding: 10
+          }
+        }
+      },
+      {
+        id: "transform-2",
+        type: "transform",
+        position: { x: 700, y: 100 },
+        data: {
+          operation: "roundCorners",
+          params: {
+            radius: 16
+          }
+        }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "gen-1", target: "transform-1" },
+      { id: "e2", source: "transform-1", target: "transform-2" }
+    ]
+  }
+}, Rt = {
+  id: "filter-showcase",
+  name: "Image Filters",
+  description: "Apply artistic filters: vintage, dramatic, vibrant, and more",
+  category: "Marketing",
+  generator: "pipeline",
+  tags: ["filter", "vintage", "effects", "artistic", "photo"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0,
+    pipeline: !0
+  },
+  icon: "image",
+  preview: {
+    imageUrl: "/showcase/pipelines/output/filter-vintage.png"
+  },
+  seo: {
+    title: "Image Filter Effects",
+    description: "Apply artistic filters like vintage, dramatic, and vibrant effects",
+    keywords: ["image filter", "photo effects", "vintage filter", "artistic"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "input-1",
+        type: "input",
+        position: { x: 100, y: 200 },
+        data: {}
+      },
+      {
+        id: "transform-vintage",
+        type: "transform",
+        position: { x: 400, y: 100 },
+        data: {
+          operation: "adjustColors",
+          params: {
+            saturation: 0.7,
+            brightness: 0.9,
+            sepia: 0.3
+          }
+        }
+      },
+      {
+        id: "transform-vibrant",
+        type: "transform",
+        position: { x: 400, y: 200 },
+        data: {
+          operation: "adjustColors",
+          params: {
+            saturation: 1.4,
+            contrast: 1.2
+          }
+        }
+      },
+      {
+        id: "transform-dramatic",
+        type: "transform",
+        position: { x: 400, y: 300 },
+        data: {
+          operation: "adjustColors",
+          params: {
+            contrast: 1.5,
+            brightness: 0.8,
+            saturation: 0.9
+          }
+        }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "input-1", target: "transform-vintage" },
+      { id: "e2", source: "input-1", target: "transform-vibrant" },
+      { id: "e3", source: "input-1", target: "transform-dramatic" }
+    ]
+  }
+}, Ot = [
+  jt,
+  $t,
+  Ut,
+  Rt
+], Et = {
+  id: "branded-qr",
+  name: "Branded QR Code",
+  description: "QR code with custom colors and styling to match your brand",
+  category: "Utilities",
+  generator: "qr",
+  tags: ["qr", "branded", "link", "custom", "url"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "qr",
+  preview: {
+    imageUrl: "/showcase/qr-codes/qr-brand.png"
+  },
+  codeExample: `const qr = await floimg.generate({
+  generator: 'qr',
+  params: {
+    data: 'https://floimg.com',
+    color: '#0d9488',
+    backgroundColor: '#ffffff',
+    margin: 2
+  }
+});`,
+  seo: {
+    title: "Branded QR Code Generator",
+    description: "Generate QR codes with custom colors to match your brand identity",
+    keywords: ["qr code", "branded qr", "custom qr", "marketing"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
+        type: "generator",
+        position: { x: 100, y: 100 },
+        data: {
+          generatorName: "qr",
+          params: {
+            data: "https://floimg.com",
+            size: 400,
+            margin: 2,
+            dark: "#0d9488",
+            light: "#ffffff",
+            errorCorrectionLevel: "M"
+          }
+        }
+      }
+    ],
+    edges: []
+  }
+}, qt = {
+  id: "dark-qr",
+  name: "Dark Mode QR",
+  description: "QR code optimized for dark backgrounds",
+  category: "Utilities",
+  generator: "qr",
+  tags: ["qr", "dark-mode", "link", "inverted"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "qr",
+  preview: {
+    imageUrl: "/showcase/qr-codes/qr-dark.png"
+  },
+  seo: {
+    title: "Dark Mode QR Code",
+    description: "QR codes optimized for dark backgrounds and dark mode UIs",
+    keywords: ["qr code", "dark mode", "inverted qr", "night mode"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
+        type: "generator",
+        position: { x: 100, y: 100 },
+        data: {
+          generatorName: "qr",
+          params: {
+            data: "https://floimg.com",
+            size: 400,
+            margin: 2,
+            dark: "#ffffff",
+            light: "#18181b",
+            errorCorrectionLevel: "M"
+          }
+        }
+      }
+    ],
+    edges: []
+  }
+}, Bt = {
+  id: "wifi-qr",
+  name: "WiFi QR Code",
+  description: "Scannable QR code for WiFi network access",
+  category: "Utilities",
+  generator: "qr",
+  tags: ["qr", "wifi", "network", "guest", "access"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0
+  },
+  icon: "qr",
+  seo: {
+    title: "WiFi QR Code Generator",
+    description: "Generate scannable QR codes for easy WiFi network access sharing",
+    keywords: ["wifi qr", "network access", "guest wifi", "qr code"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
+        type: "generator",
+        position: { x: 100, y: 100 },
+        data: {
+          generatorName: "qr",
+          params: {
+            data: "WIFI:T:WPA;S:GuestNetwork;P:welcome123;;",
+            size: 400,
+            margin: 2,
+            dark: "#059669",
+            light: "#ffffff",
+            errorCorrectionLevel: "H"
+          }
+        }
+      }
+    ],
+    edges: []
+  }
+}, Gt = {
+  id: "thumbnail-generator",
+  name: "Thumbnail Generator",
+  description: "Create multiple thumbnail sizes with automatic optimization",
+  category: "Utilities",
+  generator: "pipeline",
+  tags: ["thumbnail", "resize", "optimize", "batch", "responsive"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0,
+    pipeline: !0
+  },
+  icon: "image",
+  preview: {
+    imageUrl: "/showcase/pipelines/output/thumb-200.png"
+  },
+  seo: {
+    title: "Thumbnail Generator",
+    description: "Generate multiple thumbnail sizes with automatic optimization",
+    keywords: ["thumbnail", "image resize", "responsive images", "optimization"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "input-1",
+        type: "input",
+        position: { x: 100, y: 200 },
+        data: {}
+      },
+      {
+        id: "transform-800",
+        type: "transform",
+        position: { x: 400, y: 100 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 800,
+            fit: "inside"
+          }
+        }
+      },
+      {
+        id: "transform-400",
+        type: "transform",
+        position: { x: 400, y: 200 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 400,
+            fit: "inside"
+          }
+        }
+      },
+      {
+        id: "transform-200",
+        type: "transform",
+        position: { x: 400, y: 300 },
+        data: {
+          operation: "resize",
+          params: {
+            width: 200,
+            fit: "inside"
+          }
+        }
+      }
+    ],
+    edges: [
+      { id: "e1", source: "input-1", target: "transform-800" },
+      { id: "e2", source: "input-1", target: "transform-400" },
+      { id: "e3", source: "input-1", target: "transform-200" }
+    ]
+  }
+}, Ft = {
+  id: "diagram-webp",
+  name: "Diagram to WebP",
+  description: "Mermaid diagram converted to optimized WebP format",
+  category: "Utilities",
+  generator: "mermaid",
+  tags: ["mermaid", "webp", "optimize", "pipeline", "conversion"],
+  capabilities: {
+    studioCompatible: !0,
+    claudeCodeReady: !0,
+    pipeline: !0
+  },
+  icon: "diagram",
+  seo: {
+    title: "Diagram to WebP Converter",
+    description: "Convert Mermaid diagrams to optimized WebP format",
+    keywords: ["mermaid diagram", "webp conversion", "image optimization"]
+  },
+  workflow: {
+    nodes: [
+      {
+        id: "gen-1",
         type: "generator",
         position: { x: 100, y: 100 },
         data: {
@@ -3137,54 +4102,70 @@ const ft = {
     ],
     edges: [{ id: "e1", source: "gen-1", target: "transform-1" }]
   }
-}, q = [
-  // Charts
-  ft,
-  kt,
-  // Diagrams
-  vt,
-  yt,
-  wt,
-  // QR Codes
-  Nt,
-  zt,
-  // Pipelines
-  Ct,
-  It
-];
-function St() {
-  const r = new Set(q.map((l) => l.category));
-  return Array.from(r).sort();
+}, Vt = [
+  Et,
+  qt,
+  Bt,
+  Gt,
+  Ft
+], oe = [
+  ...St,
+  ...Tt,
+  ...Ot,
+  ...Vt
+], K = oe.filter((r) => !r.requiresCloud);
+oe.filter((r) => r.requiresCloud);
+function ue(r) {
+  return oe.find((d) => d.id === r);
 }
-function Ft(r) {
-  return q.filter((l) => l.category === r);
+function cr(r) {
+  return K.find((d) => d.id === r);
 }
-function pe(r) {
-  return q.find((l) => l.id === r);
+function Ht() {
+  const r = new Set(K.map((d) => d.category));
+  return Array.from(r);
 }
-function Ht(r) {
-  const l = r.toLowerCase();
-  return q.filter(
-    (t) => {
-      var o;
-      return t.name.toLowerCase().includes(l) || t.description.toLowerCase().includes(l) || t.category.toLowerCase().includes(l) || t.generator.toLowerCase().includes(l) || ((o = t.tags) == null ? void 0 : o.some((i) => i.toLowerCase().includes(l)));
-    }
-  );
+function mr(r) {
+  return K.filter((d) => d.category === r);
 }
-function Lt({ onSelect: r }) {
-  const [l, t] = C(null), [o, i] = C(""), s = ie(() => St(), []), p = ie(() => {
-    let d = q;
-    if (l && (d = d.filter((a) => a.category === l)), o) {
+function pr(r) {
+  const d = r.toLowerCase();
+  return K.filter((t) => {
+    var o;
+    return t.name.toLowerCase().includes(d) || t.description.toLowerCase().includes(d) || t.category.toLowerCase().includes(d) || t.generator.toLowerCase().includes(d) || ((o = t.tags) == null ? void 0 : o.some((s) => s.toLowerCase().includes(d)));
+  });
+}
+const _t = {
+  // Chart templates
+  "sales-dashboard": "revenue-chart",
+  "user-growth": "monthly-users",
+  // QR templates
+  "website-qr": "branded-qr",
+  // Pipeline templates
+  "chart-watermark": "watermark-branding"
+};
+function ge(r) {
+  const d = ue(r);
+  if (d)
+    return d;
+  const t = _t[r];
+  if (t)
+    return ue(t);
+}
+function Kt({ onSelect: r }) {
+  const [d, t] = C(null), [o, s] = C(""), i = de(() => Ht(), []), p = de(() => {
+    let l = K;
+    if (d && (l = l.filter((a) => a.category === d)), o) {
       const a = o.toLowerCase();
-      d = d.filter(
+      l = l.filter(
         (m) => {
           var c;
           return m.name.toLowerCase().includes(a) || m.description.toLowerCase().includes(a) || m.generator.toLowerCase().includes(a) || ((c = m.tags) == null ? void 0 : c.some((u) => u.toLowerCase().includes(a)));
         }
       );
     }
-    return d;
-  }, [l, o]);
+    return l;
+  }, [d, o]);
   return /* @__PURE__ */ n("div", { className: "p-6", children: [
     /* @__PURE__ */ n("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-2", children: "Templates" }),
@@ -3197,7 +4178,7 @@ function Lt({ onSelect: r }) {
           type: "text",
           placeholder: "Search templates...",
           value: o,
-          onChange: (d) => i(d.target.value),
+          onChange: (l) => s(l.target.value),
           className: "px-4 py-2 border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-teal-500 focus:border-transparent w-64"
         }
       ),
@@ -3206,33 +4187,33 @@ function Lt({ onSelect: r }) {
           "button",
           {
             onClick: () => t(null),
-            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${l === null ? "bg-teal-600 text-white" : "bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600"}`,
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${d === null ? "bg-teal-600 text-white" : "bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600"}`,
             children: "All"
           }
         ),
-        s.map((d) => /* @__PURE__ */ e(
+        i.map((l) => /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => t(d),
-            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${l === d ? "bg-teal-600 text-white" : "bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600"}`,
-            children: d
+            onClick: () => t(l),
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${d === l ? "bg-teal-600 text-white" : "bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600"}`,
+            children: l
           },
-          d
+          l
         ))
       ] })
     ] }),
-    p.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-gray-500 dark:text-zinc-400", children: "No templates found matching your criteria." }) : /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: p.map((d) => /* @__PURE__ */ e(
-      Wt,
+    p.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-gray-500 dark:text-zinc-400", children: "No templates found matching your criteria." }) : /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: p.map((l) => /* @__PURE__ */ e(
+      Qt,
       {
-        template: d,
-        onSelect: () => r(d.id)
+        template: l,
+        onSelect: () => r(l.id)
       },
-      d.id
+      l.id
     )) })
   ] });
 }
-function Wt({ template: r, onSelect: l }) {
-  const t = r.workflow.nodes.length, o = r.workflow.edges.length, i = {
+function Qt({ template: r, onSelect: d }) {
+  const t = r.workflow.nodes.length, o = r.workflow.edges.length, s = {
     quickchart: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
     mermaid: "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
     qr: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
@@ -3273,7 +4254,7 @@ function Wt({ template: r, onSelect: l }) {
         /* @__PURE__ */ e(
           "span",
           {
-            className: `px-2 py-0.5 rounded text-xs font-medium ${i[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
+            className: `px-2 py-0.5 rounded text-xs font-medium ${s[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
             children: r.generator
           }
         )
@@ -3309,18 +4290,18 @@ function Wt({ template: r, onSelect: l }) {
           o !== 1 ? "s" : ""
         ] })
       ] }),
-      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((s) => /* @__PURE__ */ e(
+      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((i) => /* @__PURE__ */ e(
         "span",
         {
           className: "px-2 py-0.5 bg-gray-100 dark:bg-zinc-700 text-gray-600 dark:text-zinc-400 rounded text-xs",
-          children: s
+          children: i
         },
-        s
+        i
       )) }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: l,
+          onClick: d,
           className: "w-full py-2 px-4 bg-teal-600 hover:bg-teal-700 text-white rounded-lg font-medium transition-colors",
           children: "Use Template"
         }
@@ -3328,24 +4309,24 @@ function Wt({ template: r, onSelect: l }) {
     ] })
   ] });
 }
-function At({
+function Jt({
   workflow: r,
-  isActive: l,
+  isActive: d,
   onLoad: t,
   onDelete: o,
-  onRename: i,
-  onDuplicate: s
+  onRename: s,
+  onDuplicate: i
 }) {
-  const [p, d] = C(!1), [a, m] = C(r.name), [c, u] = C(!1), h = () => {
-    a.trim() && a !== r.name && i(a.trim()), d(!1);
-  }, b = (y) => {
-    const v = new Date(y), x = (/* @__PURE__ */ new Date()).getTime() - v.getTime(), g = Math.floor(x / 6e4), N = Math.floor(x / 36e5), A = Math.floor(x / 864e5);
-    return g < 1 ? "Just now" : g < 60 ? `${g}m ago` : N < 24 ? `${N}h ago` : A < 7 ? `${A}d ago` : v.toLocaleDateString();
+  const [p, l] = C(!1), [a, m] = C(r.name), [c, u] = C(!1), h = () => {
+    a.trim() && a !== r.name && s(a.trim()), l(!1);
+  }, b = (v) => {
+    const y = new Date(v), f = (/* @__PURE__ */ new Date()).getTime() - y.getTime(), g = Math.floor(f / 6e4), N = Math.floor(f / 36e5), W = Math.floor(f / 864e5);
+    return g < 1 ? "Just now" : g < 60 ? `${g}m ago` : N < 24 ? `${N}h ago` : W < 7 ? `${W}d ago` : y.toLocaleDateString();
   };
   return /* @__PURE__ */ n(
     "div",
     {
-      className: `group relative p-3 rounded-lg border transition-colors ${l ? "bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-800" : "bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600"}`,
+      className: `group relative p-3 rounded-lg border transition-colors ${d ? "bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-800" : "bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600"}`,
       children: [
         /* @__PURE__ */ n("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ n("button", { onClick: t, className: "flex-1 text-left min-w-0", children: [
@@ -3354,14 +4335,14 @@ function At({
               {
                 type: "text",
                 value: a,
-                onChange: (y) => m(y.target.value),
+                onChange: (v) => m(v.target.value),
                 onBlur: h,
-                onKeyDown: (y) => {
-                  y.key === "Enter" && h(), y.key === "Escape" && (m(r.name), d(!1));
+                onKeyDown: (v) => {
+                  v.key === "Enter" && h(), v.key === "Escape" && (m(r.name), l(!1));
                 },
                 className: "w-full px-1 py-0.5 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500",
                 autoFocus: !0,
-                onClick: (y) => y.stopPropagation()
+                onClick: (v) => v.stopPropagation()
               }
             ) : /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: r.name }),
             /* @__PURE__ */ n("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
@@ -3374,21 +4355,21 @@ function At({
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: (y) => {
-                  y.stopPropagation(), u(!c);
+                onClick: (v) => {
+                  v.stopPropagation(), u(!c);
                 },
                 className: "p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity",
                 children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
               }
             ),
-            c && /* @__PURE__ */ n(B, { children: [
+            c && /* @__PURE__ */ n(q, { children: [
               /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => u(!1) }),
               /* @__PURE__ */ n("div", { className: "absolute right-0 top-full mt-1 w-36 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 z-20", children: [
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (y) => {
-                      y.stopPropagation(), d(!0), u(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), l(!0), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Rename"
@@ -3397,8 +4378,8 @@ function At({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (y) => {
-                      y.stopPropagation(), s(), u(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), i(), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Duplicate"
@@ -3407,8 +4388,8 @@ function At({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (y) => {
-                      y.stopPropagation(), window.confirm("Delete this workflow?") && o(), u(!1);
+                    onClick: (v) => {
+                      v.stopPropagation(), window.confirm("Delete this workflow?") && o(), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-red-600 dark:text-red-400 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Delete"
@@ -3418,24 +4399,24 @@ function At({
             ] })
           ] })
         ] }),
-        l && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
+        d && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
       ]
     }
   );
 }
-function Pt() {
-  const r = f((c) => c.showLibrary), l = f((c) => c.toggleLibrary), t = f((c) => c.savedWorkflows), o = f((c) => c.activeWorkflowId), i = f((c) => c.loadWorkflow), s = f((c) => c.deleteWorkflow), p = f((c) => c.renameWorkflow), d = f((c) => c.duplicateWorkflow), a = f((c) => c.newWorkflow);
+function Yt() {
+  const r = x((c) => c.showLibrary), d = x((c) => c.toggleLibrary), t = x((c) => c.savedWorkflows), o = x((c) => c.activeWorkflowId), s = x((c) => c.loadWorkflow), i = x((c) => c.deleteWorkflow), p = x((c) => c.renameWorkflow), l = x((c) => c.duplicateWorkflow), a = x((c) => c.newWorkflow);
   if (!r) return null;
   const m = [...t].sort((c, u) => u.updatedAt - c.updatedAt);
-  return /* @__PURE__ */ n(B, { children: [
-    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: l }),
+  return /* @__PURE__ */ n(q, { children: [
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: d }),
     /* @__PURE__ */ n("div", { className: "fixed left-0 top-0 bottom-0 w-80 bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700 z-50 flex flex-col shadow-xl", children: [
       /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: "My Workflows" }),
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: l,
+            onClick: d,
             className: "p-1 text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300 rounded",
             children: /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -3453,7 +4434,7 @@ function Pt() {
         "button",
         {
           onClick: () => {
-            a(), l(), window.dispatchEvent(new window.CustomEvent("new-workflow-created"));
+            a(), d(), window.dispatchEvent(new window.CustomEvent("new-workflow-created"));
           },
           className: "w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors",
           children: [
@@ -3492,16 +4473,16 @@ function Pt() {
         /* @__PURE__ */ e("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No saved workflows yet" }),
         /* @__PURE__ */ e("p", { className: "text-xs text-zinc-400 dark:text-zinc-500 mt-1", children: "Build a workflow and save it to see it here" })
       ] }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: m.map((c) => /* @__PURE__ */ e(
-        At,
+        Jt,
         {
           workflow: c,
           isActive: c.id === o,
           onLoad: () => {
-            i(c.id), l();
+            s(c.id), d();
           },
-          onDelete: () => s(c.id),
+          onDelete: () => i(c.id),
           onRename: (u) => p(c.id, u),
-          onDuplicate: () => d(c.id)
+          onDuplicate: () => l(c.id)
         },
         c.id
       )) }) }),
@@ -3514,7 +4495,7 @@ function Pt() {
     ] })
   ] });
 }
-const $t = [
+const Xt = [
   {
     id: "openai",
     name: "OpenAI",
@@ -3550,7 +4531,7 @@ const $t = [
     placeholder: "sk-or-...",
     docsUrl: "https://openrouter.ai/keys"
   }
-], jt = [
+], Zt = [
   {
     id: "ollama",
     name: "Ollama",
@@ -3566,16 +4547,16 @@ const $t = [
     docsUrl: "https://lmstudio.ai"
   }
 ];
-function Mt({ provider: r }) {
-  const l = V((h) => h.ai), t = V((h) => h.setAIProvider), o = l[r.id], i = (o == null ? void 0 : o.enabled) ?? !1, s = (o == null ? void 0 : o.apiKey) ?? "", [p, d] = C(s), [a, m] = C(!1), c = () => {
+function er({ provider: r }) {
+  const d = B((h) => h.ai), t = B((h) => h.setAIProvider), o = d[r.id], s = (o == null ? void 0 : o.enabled) ?? !1, i = (o == null ? void 0 : o.apiKey) ?? "", [p, l] = C(i), [a, m] = C(!1), c = () => {
     t(r.id, {
       apiKey: p,
-      enabled: !i
+      enabled: !s
     });
   }, u = (h) => {
-    d(h), t(r.id, {
+    l(h), t(r.id, {
       apiKey: h,
-      enabled: i
+      enabled: s
     });
   };
   return /* @__PURE__ */ n("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
@@ -3636,27 +4617,27 @@ function Mt({ provider: r }) {
       "button",
       {
         onClick: c,
-        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${i ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${s ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${i ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${s ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function Dt({ provider: r }) {
-  const l = V((c) => c.ai), t = V((c) => c.setAIProvider), o = l[r.id], i = (o == null ? void 0 : o.enabled) ?? !1, s = (o == null ? void 0 : o.baseUrl) ?? r.defaultUrl, [p, d] = C(s), a = () => {
+function tr({ provider: r }) {
+  const d = B((c) => c.ai), t = B((c) => c.setAIProvider), o = d[r.id], s = (o == null ? void 0 : o.enabled) ?? !1, i = (o == null ? void 0 : o.baseUrl) ?? r.defaultUrl, [p, l] = C(i), a = () => {
     t(r.id, {
       baseUrl: p,
-      enabled: !i
+      enabled: !s
     });
   }, m = (c) => {
-    d(c), t(r.id, {
+    l(c), t(r.id, {
       baseUrl: c,
-      enabled: i
+      enabled: s
     });
   };
   return /* @__PURE__ */ n("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
@@ -3691,19 +4672,19 @@ function Dt({ provider: r }) {
       "button",
       {
         onClick: a,
-        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${i ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${s ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${i ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${s ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function Tt() {
-  const r = V((t) => t.showSettings), l = V((t) => t.closeSettings);
+function rr() {
+  const r = B((t) => t.showSettings), d = B((t) => t.closeSettings);
   return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ n("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl max-w-xl w-full mx-4 max-h-[85vh] flex flex-col", children: [
     /* @__PURE__ */ n("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
       /* @__PURE__ */ n("div", { children: [
@@ -3713,7 +4694,7 @@ function Tt() {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: l,
+          onClick: d,
           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",
@@ -3730,11 +4711,11 @@ function Tt() {
     /* @__PURE__ */ n("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
       /* @__PURE__ */ n("section", { children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300 mb-3", children: "Cloud Providers" }),
-        /* @__PURE__ */ e("div", { className: "space-y-3", children: $t.map((t) => /* @__PURE__ */ e(Mt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: Xt.map((t) => /* @__PURE__ */ e(er, { provider: t }, t.id)) })
       ] }),
       /* @__PURE__ */ n("section", { children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300 mb-3", children: "Local Providers" }),
-        /* @__PURE__ */ e("div", { className: "space-y-3", children: jt.map((t) => /* @__PURE__ */ e(Dt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: Zt.map((t) => /* @__PURE__ */ e(tr, { provider: t }, t.id)) })
       ] }),
       /* @__PURE__ */ e("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
@@ -3764,57 +4745,57 @@ function Tt() {
     /* @__PURE__ */ e("div", { className: "flex justify-end px-6 py-4 border-t border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e(
       "button",
       {
-        onClick: l,
+        onClick: d,
         className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
         children: "Done"
       }
     ) })
   ] }) }) : null;
 }
-function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
-  const [o, i] = C([]), [s, p] = C(""), [d, a] = C(!1), [m, c] = C(null), [u, h] = C(null), [b, y] = C(""), [v, w] = C(), [x, g] = C(!1), [N, A] = C(), k = te(null), L = te(null);
+function ar({ isOpen: r, onClose: d, onApplyWorkflow: t }) {
+  const [o, s] = C([]), [i, p] = C(""), [l, a] = C(!1), [m, c] = C(null), [u, h] = C(null), [b, v] = C(""), [y, w] = C(), [f, g] = C(!1), [N, W] = C(), k = te(null), A = te(null);
   U(() => {
-    r && u === null && qe().then((I) => {
-      h(I.available), y(I.message), w(I.reason), g(I.isCloudDeployment ?? !1), A(I.supportUrl);
+    r && u === null && Je().then((I) => {
+      h(I.available), v(I.message), w(I.reason), g(I.isCloudDeployment ?? !1), W(I.supportUrl);
     }).catch(() => {
-      h(!1), y("Failed to check AI availability"), w("service_unavailable");
+      h(!1), v("Failed to check AI availability"), w("service_unavailable");
     });
   }, [r, u]), U(() => {
-    r && L.current && L.current.focus();
+    r && A.current && A.current.focus();
   }, [r]), U(() => {
     var I;
     (I = k.current) == null || I.scrollIntoView({ behavior: "smooth" });
   }, [o]);
-  const S = W(async () => {
-    if (!s.trim() || d) return;
+  const S = L(async () => {
+    if (!i.trim() || l) return;
     const I = {
       role: "user",
-      content: s.trim(),
+      content: i.trim(),
       timestamp: Date.now()
     };
-    i((M) => [...M, I]), p(""), a(!0), c(null);
+    s((T) => [...T, I]), p(""), a(!0), c(null);
     try {
-      const M = await Ke({
+      const T = await Qe({
         prompt: I.content,
         history: o
       }), E = {
         role: "assistant",
-        content: M.message,
-        workflow: M.workflow,
+        content: T.message,
+        workflow: T.workflow,
         timestamp: Date.now()
       };
-      i((O) => [...O, E]), !M.success && M.error && c(M.error);
-    } catch (M) {
-      c(M instanceof Error ? M.message : "Failed to generate workflow");
+      s((R) => [...R, E]), !T.success && T.error && c(T.error);
+    } catch (T) {
+      c(T instanceof Error ? T.message : "Failed to generate workflow");
     } finally {
       a(!1);
     }
-  }, [s, d, o]), R = (I) => {
+  }, [i, l, o]), O = (I) => {
     I.key === "Enter" && !I.shiftKey && (I.preventDefault(), S());
-  }, J = (I) => {
-    t(I), l();
+  }, Q = (I) => {
+    t(I), d();
   }, Y = () => {
-    i([]), c(null);
+    s([]), c(null);
   };
   return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ n("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__ */ n("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
@@ -3863,7 +4844,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: l,
+            onClick: d,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -3880,7 +4861,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
     ] }),
     /* @__PURE__ */ n("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
       u === !1 && /* @__PURE__ */ e("div", { className: "bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4", children: /* @__PURE__ */ n("div", { className: "flex items-start gap-3", children: [
-        v === "tier_limit" ? /* @__PURE__ */ e(
+        y === "tier_limit" ? /* @__PURE__ */ e(
           "svg",
           {
             className: "h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5",
@@ -3916,10 +4897,10 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
           }
         ),
         /* @__PURE__ */ n("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: y === "tier_limit" ? "AI Workflow Generation Not Available" : "AI Generation Not Available" }),
           /* @__PURE__ */ e("p", { className: "text-sm text-amber-700 dark:text-amber-300 mt-1", children: b }),
           /* @__PURE__ */ n("div", { className: "flex flex-col sm:flex-row gap-2 mt-3", children: [
-            v === "tier_limit" && /* @__PURE__ */ e(
+            y === "tier_limit" && /* @__PURE__ */ e(
               "a",
               {
                 href: "/pricing",
@@ -3927,7 +4908,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
                 children: "View Plans"
               }
             ),
-            v === "service_unavailable" && N && /* @__PURE__ */ e(
+            y === "service_unavailable" && N && /* @__PURE__ */ e(
               "a",
               {
                 href: N,
@@ -3935,7 +4916,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
                 children: "Contact Support"
               }
             ),
-            v === "not_configured" && !x && /* @__PURE__ */ e(
+            y === "not_configured" && !f && /* @__PURE__ */ e(
               "a",
               {
                 href: "https://floimg.com/docs/studio/ai-workflows",
@@ -3975,7 +4956,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
           "Generate an image with Gemini, then use it as a reference to create a variation with different lighting",
           "Create a product mockup: generate a minimalist logo, then composite it onto a t-shirt image",
           "Build an AI art pipeline: generate a base image, apply artistic style transfer, then upscale to 4K"
-        ].map((I, M) => /* @__PURE__ */ n(
+        ].map((I, T) => /* @__PURE__ */ n(
           "button",
           {
             onClick: () => p(I),
@@ -3986,10 +4967,10 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
               '"'
             ]
           },
-          M
+          T
         )) })
       ] }),
-      o.map((I, M) => /* @__PURE__ */ e(
+      o.map((I, T) => /* @__PURE__ */ e(
         "div",
         {
           className: `flex ${I.role === "user" ? "justify-end" : "justify-start"}`,
@@ -4005,14 +4986,14 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
                     /* @__PURE__ */ e(
                       "button",
                       {
-                        onClick: () => J(I.workflow),
+                        onClick: () => Q(I.workflow),
                         className: "text-xs px-3 py-1 bg-teal-600 hover:bg-teal-700 text-white rounded transition-colors",
                         children: "Apply to Canvas"
                       }
                     )
                   ] }),
                   /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 rounded p-2 text-xs", children: /* @__PURE__ */ n("div", { className: "space-y-1", children: [
-                    I.workflow.nodes.map((E, O) => /* @__PURE__ */ n(
+                    I.workflow.nodes.map((E, R) => /* @__PURE__ */ n(
                       "div",
                       {
                         className: "flex items-center gap-2 text-gray-600 dark:text-zinc-300",
@@ -4025,7 +5006,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
                           ] })
                         ]
                       },
-                      O
+                      R
                     )),
                     I.workflow.edges.length > 0 && /* @__PURE__ */ n("div", { className: "text-gray-400 dark:text-zinc-500 pt-1", children: [
                       I.workflow.edges.length,
@@ -4038,9 +5019,9 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
             }
           )
         },
-        M
+        T
       )),
-      d && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-700 rounded-lg px-4 py-3", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      l && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-700 rounded-lg px-4 py-3", children: /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ n("div", { className: "flex space-x-1", children: [
           /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 dark:bg-zinc-500 rounded-full animate-bounce" }),
           /* @__PURE__ */ e(
@@ -4068,12 +5049,12 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
         /* @__PURE__ */ e(
           "textarea",
           {
-            ref: L,
-            value: s,
+            ref: A,
+            value: i,
             onChange: (I) => p(I.target.value),
-            onKeyDown: R,
+            onKeyDown: O,
             placeholder: u === !1 ? "AI generation not available" : "Describe what workflow you want to create...",
-            disabled: d || u === !1,
+            disabled: l || u === !1,
             rows: 2,
             className: "flex-1 resize-none rounded-lg border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 px-4 py-2 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:border-teal-500 focus:outline-none focus:ring-1 focus:ring-teal-500 disabled:opacity-50 disabled:cursor-not-allowed"
           }
@@ -4082,7 +5063,7 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
           "button",
           {
             onClick: S,
-            disabled: !s.trim() || d || u === !1,
+            disabled: !i.trim() || l || u === !1,
             className: "self-end px-4 py-2 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg transition-colors",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -4100,75 +5081,75 @@ function Ut({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
     ] })
   ] }) }) : null;
 }
-function Ot() {
-  const { screenToFlowPosition: r } = Pe(), l = f((i) => i.addNode), t = W(
-    (i) => {
-      i.preventDefault();
-      const s = i.dataTransfer.getData("application/json");
-      if (s)
+function or() {
+  const { screenToFlowPosition: r } = De(), d = x((s) => s.addNode), t = L(
+    (s) => {
+      s.preventDefault();
+      const i = s.dataTransfer.getData("application/json");
+      if (i)
         try {
-          const p = JSON.parse(s), d = r({
-            x: i.clientX,
-            y: i.clientY
+          const p = JSON.parse(i), l = r({
+            x: s.clientX,
+            y: s.clientY
           });
-          l(p, d);
+          d(p, l);
         } catch (p) {
           console.error("Failed to parse dropped node:", p);
         }
     },
-    [l, r]
-  ), o = W((i) => {
-    i.preventDefault(), i.dataTransfer.dropEffect = "move";
+    [d, r]
+  ), o = L((s) => {
+    s.preventDefault(), s.dataTransfer.dropEffect = "move";
   }, []);
-  return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: t, onDragOver: o, children: /* @__PURE__ */ e(ot, {}) });
+  return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: t, onDragOver: o, children: /* @__PURE__ */ e(it, {}) });
 }
-function _t() {
-  const [r, l] = C("editor"), [t, o] = C(!1), i = f((a) => a.loadTemplate), s = f((a) => a.loadGeneratedWorkflow);
+function ur() {
+  const [r, d] = C("editor"), [t, o] = C(!1), s = x((a) => a.loadTemplate), i = x((a) => a.loadGeneratedWorkflow);
   U(() => {
     const m = new URLSearchParams(window.location.search).get("template");
     if (m) {
-      const c = pe(m);
-      c && (i(c), window.history.replaceState({}, "", window.location.pathname));
+      const c = ge(m);
+      c && (s(c), window.history.replaceState({}, "", window.location.pathname));
     }
-  }, [i]), U(() => {
+  }, [s]), U(() => {
     const a = () => {
-      l("editor");
+      d("editor");
     };
     return window.addEventListener("workflow-loaded", a), () => {
       window.removeEventListener("workflow-loaded", a);
     };
   }, []);
-  const p = W(
+  const p = L(
     (a) => {
-      const m = pe(a);
-      m && (i(m), l("editor"));
+      const m = ge(a);
+      m && (s(m), d("editor"));
     },
-    [i]
-  ), d = W(
+    [s]
+  ), l = L(
     (a) => {
-      s(a), l("editor");
+      i(a), d("editor");
     },
-    [s]
+    [i]
   );
-  return /* @__PURE__ */ n(Ae, { children: [
-    /* @__PURE__ */ e(Tt, {}),
+  return /* @__PURE__ */ n(Me, { children: [
+    /* @__PURE__ */ e(rr, {}),
     /* @__PURE__ */ e(
-      Ut,
+      ar,
       {
         isOpen: t,
         onClose: () => o(!1),
-        onApplyWorkflow: d
+        onApplyWorkflow: l
       }
     ),
-    /* @__PURE__ */ e(Pt, {}),
+    /* @__PURE__ */ e(Yt, {}),
     /* @__PURE__ */ n("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ e(ht, {}),
+      /* @__PURE__ */ e(bt, {}),
       /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ n("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ n("div", { className: "flex", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => l("editor"),
+              onClick: () => d("editor"),
               className: `px-6 py-3 text-sm font-medium border-b-2 transition-colors ${r === "editor" ? "border-teal-500 text-teal-600 dark:text-teal-400" : "border-transparent text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200"}`,
               children: "Editor"
             }
@@ -4176,7 +5157,7 @@ function _t() {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => l("gallery"),
+              onClick: () => d("gallery"),
               className: `px-6 py-3 text-sm font-medium border-b-2 transition-colors ${r === "gallery" ? "border-teal-500 text-teal-600 dark:text-teal-400" : "border-transparent text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200"}`,
               children: "Images"
             }
@@ -4184,7 +5165,7 @@ function _t() {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => l("templates"),
+              onClick: () => d("templates"),
               className: `px-6 py-3 text-sm font-medium border-b-2 transition-colors ${r === "templates" ? "border-teal-500 text-teal-600 dark:text-teal-400" : "border-transparent text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200"}`,
               children: "Templates"
             }
@@ -4211,34 +5192,35 @@ function _t() {
         )
       ] }) }),
       /* @__PURE__ */ n("div", { className: "flex-1 flex overflow-hidden", children: [
-        r === "editor" && /* @__PURE__ */ n(B, { children: [
-          /* @__PURE__ */ e(st, {}),
-          /* @__PURE__ */ e(Ot, {}),
-          /* @__PURE__ */ e(it, {})
+        r === "editor" && /* @__PURE__ */ n(q, { children: [
+          /* @__PURE__ */ e(dt, {}),
+          /* @__PURE__ */ e(or, {}),
+          /* @__PURE__ */ e(lt, {})
         ] }),
         r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(xt, {}) }),
-        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(Lt, { onSelect: p }) })
+        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(Kt, { onSelect: p }) })
       ] })
     ] })
   ] });
 }
 export {
-  Ut as AIChat,
-  Tt as AISettings,
-  _t as App,
+  ar as AIChat,
+  rr as AISettings,
+  ur as App,
   xt as Gallery,
-  it as NodeInspector,
-  st as NodePalette,
-  Lt as TemplateGallery,
-  ht as Toolbar,
-  nt as UploadGallery,
-  ot as WorkflowEditor,
-  Pt as WorkflowLibrary,
-  St as getCategories,
-  pe as getTemplateById,
-  Ft as getTemplatesByCategory,
-  Ht as searchTemplates,
-  q as templates,
-  f as useWorkflowStore
+  lt as NodeInspector,
+  dt as NodePalette,
+  Kt as TemplateGallery,
+  bt as Toolbar,
+  st as UploadGallery,
+  it as WorkflowEditor,
+  Yt as WorkflowLibrary,
+  Ht as getCategories,
+  cr as getTemplateById,
+  mr as getTemplatesByCategory,
+  ge as resolveTemplate,
+  pr as searchTemplates,
+  K as templates,
+  x as useWorkflowStore
 };
 //# sourceMappingURL=index.js.map