@teamflojo/floimg-studio-ui 0.1.3 → 0.1.5

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsxs as m, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { memo as T, useRef as le, useCallback as C, useState as N, useEffect as $, useMemo as Q } from "react";
-import ce, { Handle as L, Position as W, applyNodeChanges as me, applyEdgeChanges as ue, MarkerType as ge, Background as pe, Controls as he, MiniMap as fe, ReactFlowProvider as be } from "reactflow";
-import { create as re } from "zustand";
-import { useQuery as K } from "@tanstack/react-query";
-function xe(r, n) {
+import { jsxs as m, jsx as e, Fragment as P } from "react/jsx-runtime";
+import { memo as T, useRef as ge, useCallback as C, useState as N, useEffect as $, useMemo as X } from "react";
+import pe, { Handle as I, Position as L, applyNodeChanges as he, applyEdgeChanges as fe, MarkerType as be, Background as xe, Controls as ke, MiniMap as we, ReactFlowProvider as ve } from "reactflow";
+import { create as oe } from "zustand";
+import { useQuery as q } from "@tanstack/react-query";
+function ye(r, s) {
   let t;
   try {
     t = r();
@@ -11,48 +11,48 @@ function xe(r, n) {
     return;
   }
   return {
-    getItem: (s) => {
+    getItem: (n) => {
       var i;
-      const l = (c) => c === null ? null : JSON.parse(c, void 0), o = (i = t.getItem(s)) != null ? i : null;
-      return o instanceof Promise ? o.then(l) : l(o);
+      const l = (c) => c === null ? null : JSON.parse(c, void 0), a = (i = t.getItem(n)) != null ? i : null;
+      return a instanceof Promise ? a.then(l) : l(a);
     },
-    setItem: (s, i) => t.setItem(s, JSON.stringify(i, void 0)),
-    removeItem: (s) => t.removeItem(s)
+    setItem: (n, i) => t.setItem(n, JSON.stringify(i, void 0)),
+    removeItem: (n) => t.removeItem(n)
   };
 }
-const q = (r) => (n) => {
+const _ = (r) => (s) => {
   try {
-    const t = r(n);
+    const t = r(s);
     return t instanceof Promise ? t : {
-      then(a) {
-        return q(a)(t);
+      then(o) {
+        return _(o)(t);
       },
-      catch(a) {
+      catch(o) {
         return this;
       }
     };
   } catch (t) {
     return {
-      then(a) {
+      then(o) {
         return this;
       },
-      catch(a) {
-        return q(a)(t);
+      catch(o) {
+        return _(o)(t);
       }
     };
   }
-}, ke = (r, n) => (t, a, s) => {
+}, Ne = (r, s) => (t, o, n) => {
   let i = {
-    storage: xe(() => localStorage),
+    storage: ye(() => localStorage),
     partialize: (g) => g,
     version: 0,
-    merge: (g, k) => ({
-      ...k,
+    merge: (g, w) => ({
+      ...w,
       ...g
     }),
-    ...n
+    ...s
   }, l = !1;
-  const o = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
+  const a = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
   let u = i.storage;
   if (!u)
     return r(
@@ -61,33 +61,33 @@ const q = (r) => (n) => {
           `[zustand persist middleware] Unable to update item '${i.name}', the given storage is currently unavailable.`
         ), t(...g);
       },
-      a,
-      s
+      o,
+      n
     );
   const d = () => {
-    const g = i.partialize({ ...a() });
+    const g = i.partialize({ ...o() });
     return u.setItem(i.name, {
       state: g,
       version: i.version
     });
-  }, p = s.setState;
-  s.setState = (g, k) => (p(g, k), d());
+  }, p = n.setState;
+  n.setState = (g, w) => (p(g, w), d());
   const h = r(
     (...g) => (t(...g), d()),
-    a,
-    s
+    o,
+    n
   );
-  s.getInitialState = () => h;
-  let f;
+  n.getInitialState = () => h;
+  let b;
   const x = () => {
-    var g, k;
+    var g, w;
     if (!u) return;
-    l = !1, o.forEach((y) => {
+    l = !1, a.forEach((y) => {
       var z;
-      return y((z = a()) != null ? z : h);
+      return y((z = o()) != null ? z : h);
     });
-    const w = ((k = i.onRehydrateStorage) == null ? void 0 : k.call(i, (g = a()) != null ? g : h)) || void 0;
-    return q(u.getItem.bind(u))(i.name).then((y) => {
+    const k = ((w = i.onRehydrateStorage) == null ? void 0 : w.call(i, (g = o()) != null ? g : h)) || void 0;
+    return _(u.getItem.bind(u))(i.name).then((y) => {
       if (y)
         if (typeof y.version == "number" && y.version !== i.version) {
           if (i.migrate) {
@@ -95,7 +95,7 @@ const q = (r) => (n) => {
               y.state,
               y.version
             );
-            return z instanceof Promise ? z.then((S) => [!0, S]) : [!0, z];
+            return z instanceof Promise ? z.then((W) => [!0, W]) : [!0, z];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
@@ -105,19 +105,19 @@ const q = (r) => (n) => {
       return [!1, void 0];
     }).then((y) => {
       var z;
-      const [S, R] = y;
-      if (f = i.merge(
-        R,
-        (z = a()) != null ? z : h
-      ), t(f, !0), S)
+      const [W, O] = y;
+      if (b = i.merge(
+        O,
+        (z = o()) != null ? z : h
+      ), t(b, !0), W)
         return d();
     }).then(() => {
-      w == null || w(f, void 0), f = a(), l = !0, c.forEach((y) => y(f));
+      k == null || k(b, void 0), b = o(), l = !0, c.forEach((y) => y(b));
     }).catch((y) => {
-      w == null || w(void 0, y);
+      k == null || k(void 0, y);
     });
   };
-  return s.persist = {
+  return n.persist = {
     setOptions: (g) => {
       i = {
         ...i,
@@ -130,119 +130,119 @@ const q = (r) => (n) => {
     getOptions: () => i,
     rehydrate: () => x(),
     hasHydrated: () => l,
-    onHydrate: (g) => (o.add(g), () => {
-      o.delete(g);
+    onHydrate: (g) => (a.add(g), () => {
+      a.delete(g);
     }),
     onFinishHydration: (g) => (c.add(g), () => {
       c.delete(g);
     })
-  }, i.skipHydration || x(), f || h;
-}, ae = ke, I = "/api";
-async function D(r, n) {
+  }, i.skipHydration || x(), b || h;
+}, ne = Ne, S = "/api";
+async function D(r, s) {
   const t = await fetch(r, {
-    ...n,
+    ...s,
     headers: {
       "Content-Type": "application/json",
-      ...n == null ? void 0 : n.headers
+      ...s == null ? void 0 : s.headers
     }
   });
   if (!t.ok) {
-    const a = await t.json().catch(() => ({ error: "Unknown error" }));
-    throw new Error(a.error || `HTTP ${t.status}`);
+    const o = await t.json().catch(() => ({ error: "Unknown error" }));
+    throw new Error(o.error || `HTTP ${t.status}`);
   }
   return t.json();
 }
-async function we() {
-  return D(`${I}/nodes/generators`);
+async function ze() {
+  return D(`${S}/nodes/generators`);
 }
-async function ve() {
-  return D(`${I}/nodes/transforms`);
+async function Ce() {
+  return D(`${S}/nodes/transforms`);
 }
-async function ye(r, n, t) {
-  return D(`${I}/execute/sync`, {
+async function Se(r, s, t) {
+  return D(`${S}/execute/sync`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: n, aiProviders: t })
+    body: JSON.stringify({ nodes: r, edges: s, aiProviders: t })
   });
 }
-async function Ne(r, n) {
-  return D(`${I}/export/yaml`, {
+async function Ie(r, s) {
+  return D(`${S}/export/yaml`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: n })
+    body: JSON.stringify({ nodes: r, edges: s })
   });
 }
-async function ze() {
-  return D(`${I}/images`);
+async function Le() {
+  return D(`${S}/images`);
 }
-function B(r) {
-  return `${I}/images/${r}/blob`;
+function G(r) {
+  return `${S}/images/${r}/blob`;
 }
-async function Ce(r) {
+async function We(r) {
   try {
-    return await D(`${I}/images/${r}/workflow`);
+    return await D(`${S}/images/${r}/workflow`);
   } catch {
     return null;
   }
 }
-async function Se(r) {
-  const n = new FormData();
-  n.append("file", r);
-  const t = await fetch(`${I}/uploads`, {
+async function Ae(r) {
+  const s = new FormData();
+  s.append("file", r);
+  const t = await fetch(`${S}/uploads`, {
     method: "POST",
-    body: n
+    body: s
   });
   if (!t.ok) {
-    const a = await t.json().catch(() => ({ error: "Upload failed" }));
-    throw new Error(a.error || `HTTP ${t.status}`);
+    const o = await t.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(o.error || `HTTP ${t.status}`);
   }
   return t.json();
 }
-async function Ie() {
-  return D(`${I}/uploads`);
+async function $e() {
+  return D(`${S}/uploads`);
 }
-async function Le(r) {
-  const n = await fetch(`${I}/uploads/${r}`, {
+async function De(r) {
+  const s = await fetch(`${S}/uploads/${r}`, {
     method: "DELETE"
   });
-  if (!n.ok)
-    throw new Error(`Failed to delete upload: ${n.status}`);
+  if (!s.ok)
+    throw new Error(`Failed to delete upload: ${s.status}`);
 }
-function oe(r) {
-  return `${I}/uploads/${r}/blob`;
+function se(r) {
+  return `${S}/uploads/${r}/blob`;
 }
-const Y = "http://localhost:11434", X = "http://localhost:1234", A = re()(
-  ae(
-    (r, n) => ({
+const Z = "http://localhost:11434", ee = "http://localhost:1234", A = oe()(
+  ne(
+    (r, s) => ({
       ai: {
         ollama: {
-          baseUrl: Y,
+          baseUrl: Z,
           enabled: !1
         },
         lmstudio: {
-          baseUrl: X,
+          baseUrl: ee,
           enabled: !1
         }
       },
       showSettings: !1,
-      setAIProvider: (t, a) => {
-        r((s) => ({
+      setAIProvider: (t, o) => {
+        r((n) => ({
           ai: {
-            ...s.ai,
-            [t]: a
+            ...n.ai,
+            [t]: o
           }
         }));
       },
       clearAIProvider: (t) => {
-        r((a) => {
-          const s = { ...a.ai };
-          return delete s[t], { ai: s };
+        r((o) => {
+          const n = { ...o.ai };
+          return delete n[t], { ai: n };
         });
       },
       openSettings: () => r({ showSettings: !0 }),
       closeSettings: () => r({ showSettings: !1 }),
       getConfiguredProviders: () => {
-        var s, i, l, o, c, u;
-        const { ai: t } = n(), a = {};
-        return (s = t.openai) != null && s.enabled && t.openai.apiKey && (a.openai = { apiKey: t.openai.apiKey }), (i = t.anthropic) != null && i.enabled && t.anthropic.apiKey && (a.anthropic = { apiKey: t.anthropic.apiKey }), (l = t.gemini) != null && l.enabled && t.gemini.apiKey && (a.gemini = { apiKey: t.gemini.apiKey }), (o = t.openrouter) != null && o.enabled && t.openrouter.apiKey && (a.openrouter = { apiKey: t.openrouter.apiKey }), (c = t.ollama) != null && c.enabled && (a.ollama = { baseUrl: t.ollama.baseUrl || Y }), (u = t.lmstudio) != null && u.enabled && (a.lmstudio = { baseUrl: t.lmstudio.baseUrl || X }), a;
+        var n, i, l, a, c, u;
+        const { ai: t } = s(), o = {};
+        return (n = t.openai) != null && n.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 }), (l = t.gemini) != null && l.enabled && t.gemini.apiKey && (o.gemini = { apiKey: t.gemini.apiKey }), (a = t.openrouter) != null && a.enabled && t.openrouter.apiKey && (o.openrouter = { apiKey: t.openrouter.apiKey }), (c = t.ollama) != null && c.enabled && (o.ollama = { baseUrl: t.ollama.baseUrl || Z }), (u = t.lmstudio) != null && u.enabled && (o.lmstudio = { baseUrl: t.lmstudio.baseUrl || ee }), o;
       }
     }),
     {
@@ -252,17 +252,17 @@ const Y = "http://localhost:11434", X = "http://localhost:1234", A = re()(
     }
   )
 );
-let We = 0;
-function Z() {
-  return `node_${++We}`;
+let je = 0;
+function te() {
+  return `node_${++je}`;
 }
-function ee() {
-  const r = Date.now(), n = Math.random().toString(36).substring(2, 8);
-  return `wf_${r}_${n}`;
+function re() {
+  const r = Date.now(), s = Math.random().toString(36).substring(2, 8);
+  return `wf_${r}_${s}`;
 }
-const b = re()(
-  ae(
-    (r, n) => ({
+const f = oe()(
+  ne(
+    (r, s) => ({
       nodes: [],
       edges: [],
       selectedNodeId: null,
@@ -284,24 +284,24 @@ const b = re()(
         nodeStatus: {}
       },
       loadTemplate: (t) => {
-        const a = /* @__PURE__ */ new Map(), s = t.workflow.nodes.map((l) => {
-          const o = Z();
-          return a.set(l.id, o), {
-            id: o,
+        const o = /* @__PURE__ */ new Map(), n = t.workflow.nodes.map((l) => {
+          const a = te();
+          return o.set(l.id, a), {
+            id: a,
             type: l.type,
             position: l.position,
             data: l.data
           };
         }), i = t.workflow.edges.map((l) => {
-          const o = a.get(l.source) || l.source, c = a.get(l.target) || l.target;
+          const a = o.get(l.source) || l.source, c = o.get(l.target) || l.target;
           return {
-            id: `edge_${o}_${c}`,
-            source: o,
+            id: `edge_${a}_${c}`,
+            source: a,
             target: c
           };
         });
         r({
-          nodes: s,
+          nodes: n,
           edges: i,
           selectedNodeId: null,
           currentTemplateId: t.id,
@@ -332,106 +332,106 @@ const b = re()(
         });
       },
       togglePreview: (t) => {
-        r((a) => ({
+        r((o) => ({
           previewVisible: {
-            ...a.previewVisible,
-            [t]: a.previewVisible[t] === !1
+            ...o.previewVisible,
+            [t]: o.previewVisible[t] === !1
             // default true, toggle
           }
         }));
       },
       setGenerators: (t) => r({ generators: t }),
       setTransforms: (t) => r({ transforms: t }),
-      addNode: (t, a) => {
-        const s = Z();
+      addNode: (t, o) => {
+        const n = te();
         let i;
         t.type === "generator" ? i = {
           generatorName: t.name,
-          params: O(t)
+          params: R(t)
         } : t.type === "transform" ? i = {
           operation: t.name,
-          params: O(t)
+          params: R(t)
         } : t.type === "input" ? i = {
           uploadId: void 0,
           filename: void 0,
           mime: void 0
         } : t.type === "vision" ? i = {
           providerName: t.name,
-          params: O(t)
+          params: R(t)
         } : t.type === "text" ? i = {
           providerName: t.name,
-          params: O(t)
+          params: R(t)
         } : i = {
           destination: "./output/image.png",
           provider: "filesystem"
         };
         const l = {
-          id: s,
+          id: n,
           type: t.type,
-          position: a,
+          position: o,
           data: i
         };
-        r((o) => ({
-          nodes: [...o.nodes, l]
+        r((a) => ({
+          nodes: [...a.nodes, l]
         }));
       },
-      updateNodeData: (t, a) => {
-        r((s) => ({
-          nodes: s.nodes.map(
-            (i) => i.id === t ? { ...i, data: { ...i.data, ...a } } : i
+      updateNodeData: (t, o) => {
+        r((n) => ({
+          nodes: n.nodes.map(
+            (i) => i.id === t ? { ...i, data: { ...i.data, ...o } } : i
           )
         }));
       },
       deleteNode: (t) => {
-        r((a) => ({
-          nodes: a.nodes.filter((s) => s.id !== t),
-          edges: a.edges.filter((s) => s.source !== t && s.target !== t),
-          selectedNodeId: a.selectedNodeId === t ? null : a.selectedNodeId
+        r((o) => ({
+          nodes: o.nodes.filter((n) => n.id !== t),
+          edges: o.edges.filter((n) => n.source !== t && n.target !== t),
+          selectedNodeId: o.selectedNodeId === t ? null : o.selectedNodeId
         }));
       },
       setNodes: (t) => r({ nodes: t }),
       addEdge: (t) => {
         if (!t.source || !t.target) return;
-        const s = {
+        const n = {
           id: `edge_${t.source}_${t.target}`,
           source: t.source,
           target: t.target
         };
         r((i) => ({
-          edges: [...i.edges, s]
+          edges: [...i.edges, n]
         }));
       },
       deleteEdge: (t) => {
-        r((a) => ({
-          edges: a.edges.filter((s) => s.id !== t)
+        r((o) => ({
+          edges: o.edges.filter((n) => n.id !== t)
         }));
       },
       setEdges: (t) => r({ edges: t }),
       setSelectedNode: (t) => r({ selectedNodeId: t }),
       execute: async () => {
-        const { nodes: t, edges: a } = n(), s = t.map((c) => ({
+        const { nodes: t, edges: o } = s(), n = t.map((c) => ({
           id: c.id,
           type: c.type,
           position: c.position,
           data: c.data
-        })), i = a.map((c) => ({
+        })), i = o.map((c) => ({
           id: c.id,
           source: c.source,
           target: c.target
-        })), l = A.getState().getConfiguredProviders(), o = {};
+        })), l = A.getState().getConfiguredProviders(), a = {};
         for (const c of t)
-          o[c.id] = "running";
+          a[c.id] = "running";
         r({
           execution: {
             status: "running",
             imageIds: [],
             previews: {},
             dataOutputs: {},
-            nodeStatus: o
+            nodeStatus: a
           }
         });
         try {
-          const c = await ye(s, i, l), u = {};
+          const c = await Se(n, i, l), u = {};
           for (const d of t)
             u[d.id] = c.status === "completed" ? "completed" : "error";
           c.status === "completed" ? r({
@@ -469,17 +469,17 @@ const b = re()(
         }
       },
       exportToYaml: async () => {
-        const { nodes: t, edges: a } = n(), s = t.map((o) => ({
-          id: o.id,
-          type: o.type,
-          position: o.position,
-          data: o.data
-        })), i = a.map((o) => ({
-          id: o.id,
-          source: o.source,
-          target: o.target
+        const { nodes: t, edges: o } = s(), n = t.map((a) => ({
+          id: a.id,
+          type: a.type,
+          position: a.position,
+          data: a.data
+        })), i = o.map((a) => ({
+          id: a.id,
+          source: a.source,
+          target: a.target
         }));
-        return (await Ne(s, i)).yaml;
+        return (await Ie(n, i)).yaml;
       },
       // Workflow persistence methods
       markDirty: () => r({ hasUnsavedChanges: !0 }),
@@ -506,16 +506,16 @@ const b = re()(
       },
       saveWorkflow: (t) => {
         const {
-          nodes: a,
-          edges: s,
+          nodes: o,
+          edges: n,
           activeWorkflowId: i,
           activeWorkflowName: l,
-          savedWorkflows: o,
+          savedWorkflows: a,
           currentTemplateId: c
-        } = n(), u = Date.now();
+        } = s(), u = Date.now();
         if (i) {
-          const d = o.map(
-            (p) => p.id === i ? { ...p, name: t || l, nodes: a, edges: s, updatedAt: u } : p
+          const d = a.map(
+            (p) => p.id === i ? { ...p, name: t || l, nodes: o, edges: n, updatedAt: u } : p
           );
           return r({
             savedWorkflows: d,
@@ -523,17 +523,17 @@ const b = re()(
             hasUnsavedChanges: !1
           }), i;
         } else {
-          const d = ee(), p = {
+          const d = re(), p = {
             id: d,
             name: t || l,
-            nodes: a,
-            edges: s,
+            nodes: o,
+            edges: n,
             createdAt: u,
             updatedAt: u,
             templateId: c || void 0
           };
           return r({
-            savedWorkflows: [...o, p],
+            savedWorkflows: [...a, p],
             activeWorkflowId: d,
             activeWorkflowName: t || l,
             hasUnsavedChanges: !1
@@ -541,15 +541,15 @@ const b = re()(
         }
       },
       loadWorkflow: (t) => {
-        const { savedWorkflows: a } = n(), s = a.find((i) => i.id === t);
-        s && r({
-          nodes: s.nodes,
-          edges: s.edges,
+        const { savedWorkflows: o } = s(), n = o.find((i) => i.id === t);
+        n && r({
+          nodes: n.nodes,
+          edges: n.edges,
           selectedNodeId: null,
-          currentTemplateId: s.templateId || null,
+          currentTemplateId: n.templateId || null,
           previewVisible: {},
           activeWorkflowId: t,
-          activeWorkflowName: s.name,
+          activeWorkflowName: n.name,
           hasUnsavedChanges: !1,
           execution: {
             status: "idle",
@@ -561,8 +561,8 @@ const b = re()(
         });
       },
       deleteWorkflow: (t) => {
-        const { savedWorkflows: a, activeWorkflowId: s } = n(), i = a.filter((l) => l.id !== t);
-        r(s === t ? {
+        const { savedWorkflows: o, activeWorkflowId: n } = s(), i = o.filter((l) => l.id !== t);
+        r(n === t ? {
           savedWorkflows: i,
           nodes: [],
           edges: [],
@@ -581,26 +581,26 @@ const b = re()(
           }
         } : { savedWorkflows: i });
       },
-      renameWorkflow: (t, a) => {
-        const { savedWorkflows: s, activeWorkflowId: i } = n(), l = s.map(
-          (o) => o.id === t ? { ...o, name: a, updatedAt: Date.now() } : o
+      renameWorkflow: (t, o) => {
+        const { savedWorkflows: n, activeWorkflowId: i } = s(), l = n.map(
+          (a) => a.id === t ? { ...a, name: o, updatedAt: Date.now() } : a
         );
         r({
           savedWorkflows: l,
-          ...i === t ? { activeWorkflowName: a } : {}
+          ...i === t ? { activeWorkflowName: o } : {}
         });
       },
       duplicateWorkflow: (t) => {
-        const { savedWorkflows: a } = n(), s = a.find((c) => c.id === t);
-        if (!s) return "";
-        const i = Date.now(), l = ee(), o = {
-          ...s,
+        const { savedWorkflows: o } = s(), n = o.find((c) => c.id === t);
+        if (!n) return "";
+        const i = Date.now(), l = re(), a = {
+          ...n,
           id: l,
-          name: `${s.name} (Copy)`,
+          name: `${n.name} (Copy)`,
           createdAt: i,
           updatedAt: i
         };
-        return r({ savedWorkflows: [...a, o] }), l;
+        return r({ savedWorkflows: [...o, a] }), l;
       }
     }),
     {
@@ -612,28 +612,28 @@ const b = re()(
     }
   )
 );
-function O(r) {
+function R(r) {
   var t;
-  const n = {};
+  const s = {};
   if ((t = r.params) != null && t.properties)
-    for (const [a, s] of Object.entries(r.params.properties))
-      s.default !== void 0 && (n[a] = s.default);
-  return n;
+    for (const [o, n] of Object.entries(r.params.properties))
+      n.default !== void 0 && (s[o] = n.default);
+  return s;
 }
 function M(r) {
   return r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
-function _({ nodeId: r, color: n }) {
-  const t = b((s) => s.previewVisible[r] !== !1), a = b((s) => s.togglePreview);
+function H({ nodeId: r, color: s }) {
+  const t = f((n) => n.previewVisible[r] !== !1), o = f((n) => n.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
-      onClick: (s) => {
-        s.stopPropagation(), a(r);
+      onClick: (n) => {
+        n.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 ${n}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e("svg", { className: `w-3.5 h-3.5 ${s}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
         "path",
         {
           strokeLinecap: "round",
@@ -653,71 +653,71 @@ function _({ nodeId: r, color: n }) {
     }
   );
 }
-const Ae = T(function({
-  id: n,
+const Pe = T(function({
+  id: s,
   data: t,
-  selected: a
+  selected: o
 }) {
-  const s = b((u) => u.execution.previews[n]), i = b((u) => u.execution.nodeStatus[n]), l = b((u) => u.previewVisible[n] !== !1), c = M(i) || (a ? "border-blue-500" : "border-blue-200");
+  const n = f((u) => u.execution.previews[s]), i = f((u) => u.execution.nodeStatus[s]), l = f((u) => u.previewVisible[s] !== !1), c = M(i) || (o ? "border-blue-500" : "border-blue-200");
   return /* @__PURE__ */ m(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
       children: [
-        s && l && /* @__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" }) }),
+        n && l && /* @__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: n, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ m("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(_, { nodeId: n, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(H, { nodeId: s, color: "text-blue-500 dark:text-blue-400" })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
             u,
             ": ",
             String(d).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-blue-500" })
+        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-blue-500" })
       ]
     }
   );
-}), $e = T(function({
-  id: n,
+}), Te = T(function({
+  id: s,
   data: t,
-  selected: a
+  selected: o
 }) {
-  const s = b((u) => u.execution.previews[n]), i = b((u) => u.execution.nodeStatus[n]), l = b((u) => u.previewVisible[n] !== !1), c = M(i) || (a ? "border-teal-500" : "border-teal-200");
+  const n = f((u) => u.execution.previews[s]), i = f((u) => u.execution.nodeStatus[s]), l = f((u) => u.previewVisible[s] !== !1), c = M(i) || (o ? "border-teal-500" : "border-teal-200");
   return /* @__PURE__ */ m(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-teal-500" }),
-        s && l && /* @__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__ */ e(I, { type: "target", position: L.Left, className: "w-3 h-3 !bg-teal-500" }),
+        n && l && /* @__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: n, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ m("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-teal-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-teal-700 dark:text-teal-400", children: t.operation }),
-            /* @__PURE__ */ e(_, { nodeId: n, color: "text-teal-500 dark:text-teal-400" })
+            /* @__PURE__ */ e(H, { nodeId: s, color: "text-teal-500 dark:text-teal-400" })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
             u,
             ": ",
             String(d).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-teal-500" })
+        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-teal-500" })
       ]
     }
   );
-}), De = T(function({ id: n, data: t, selected: a }) {
-  const s = b((o) => o.execution.nodeStatus[n]), l = M(s) || (a ? "border-green-500" : "border-green-200");
+}), Me = T(function({ id: s, data: t, selected: o }) {
+  const n = f((a) => a.execution.nodeStatus[s]), l = M(n) || (o ? "border-green-500" : "border-green-200");
   return /* @__PURE__ */ m(
     "div",
     {
       className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${l}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-green-500" }),
+        /* @__PURE__ */ e(I, { type: "target", position: L.Left, className: "w-3 h-3 !bg-green-500" }),
         /* @__PURE__ */ m("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" })
@@ -726,52 +726,52 @@ const Ae = T(function({
       ]
     }
   );
-}), Pe = T(function({ id: n, data: t, selected: a }) {
-  const s = b((k) => k.execution.previews[n]), i = b((k) => k.execution.nodeStatus[n]), l = b((k) => k.previewVisible[n] !== !1), o = b((k) => k.updateNodeData), c = le(null), d = M(i) || (a ? "border-amber-500" : "border-amber-200"), p = C(
-    async (k) => {
+}), Ue = T(function({ id: s, data: t, selected: o }) {
+  const n = f((w) => w.execution.previews[s]), i = f((w) => w.execution.nodeStatus[s]), l = f((w) => w.previewVisible[s] !== !1), a = f((w) => w.updateNodeData), c = ge(null), d = M(i) || (o ? "border-amber-500" : "border-amber-200"), p = C(
+    async (w) => {
       try {
-        const w = await Se(k);
-        o(n, {
-          uploadId: w.id,
-          filename: w.filename,
-          mime: w.mime
+        const k = await Ae(w);
+        a(s, {
+          uploadId: k.id,
+          filename: k.filename,
+          mime: k.mime
         });
-      } catch (w) {
-        console.error("Upload failed:", w);
+      } catch (k) {
+        console.error("Upload failed:", k);
       }
     },
-    [n, o]
+    [s, a]
   ), h = C(
-    (k) => {
-      k.preventDefault(), k.stopPropagation();
-      const w = k.dataTransfer.files[0];
-      w && w.type.startsWith("image/") && p(w);
+    (w) => {
+      w.preventDefault(), w.stopPropagation();
+      const k = w.dataTransfer.files[0];
+      k && k.type.startsWith("image/") && p(k);
     },
     [p]
-  ), f = C((k) => {
-    k.preventDefault(), k.stopPropagation();
+  ), b = C((w) => {
+    w.preventDefault(), w.stopPropagation();
   }, []), x = C(
-    (k) => {
+    (w) => {
       var y;
-      const w = (y = k.target.files) == null ? void 0 : y[0];
-      w && p(w);
+      const k = (y = w.target.files) == null ? void 0 : y[0];
+      k && p(k);
     },
     [p]
-  ), g = s || (t.uploadId ? oe(t.uploadId) : null);
+  ), g = n || (t.uploadId ? se(t.uploadId) : null);
   return /* @__PURE__ */ m(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
       onDrop: h,
-      onDragOver: f,
+      onDragOver: b,
       children: [
         g && l ? /* @__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: g, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : g ? null : /* @__PURE__ */ e(
           "div",
           {
             className: "bg-amber-50 dark:bg-amber-900/30 border-b border-amber-100 dark:border-amber-800 h-24 flex items-center justify-center cursor-pointer hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
             onClick: () => {
-              var k;
-              return (k = c.current) == null ? void 0 : k.click();
+              var w;
+              return (w = c.current) == null ? void 0 : w.click();
             },
             children: /* @__PURE__ */ m("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
               /* @__PURE__ */ e("div", { className: "text-2xl mb-1", children: "+" }),
@@ -793,30 +793,30 @@ const Ae = T(function({
           /* @__PURE__ */ m("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(_, { nodeId: n, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(H, { nodeId: s, 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(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-amber-500" })
+        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-amber-500" })
       ]
     }
   );
-}), je = T(function({
-  id: n,
+}), Ee = T(function({
+  id: s,
   data: t,
-  selected: a
+  selected: o
 }) {
   var c, u;
-  const s = b((d) => d.execution.nodeStatus[n]), i = b((d) => {
+  const n = f((d) => d.execution.nodeStatus[s]), i = f((d) => {
     var p;
-    return (p = d.execution.dataOutputs) == null ? void 0 : p[n];
-  }), o = M(s) || (a ? "border-cyan-500" : "border-cyan-200");
+    return (p = d.execution.dataOutputs) == null ? void 0 : p[s];
+  }), a = M(n) || (o ? "border-cyan-500" : "border-cyan-200");
   return /* @__PURE__ */ m(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-cyan-500" }),
+        /* @__PURE__ */ e(I, { type: "target", position: L.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__ */ m("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
           (c = i.content) == null ? void 0 : c.slice(0, 200),
           (((u = i.content) == null ? void 0 : u.length) || 0) > 200 && "..."
@@ -841,22 +841,22 @@ const Ae = T(function({
             "..."
           ] }) : null })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-cyan-500" })
+        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-cyan-500" })
       ]
     }
   );
-}), Te = T(function({ id: n, data: t, selected: a }) {
+}), Oe = T(function({ id: s, data: t, selected: o }) {
   var c, u;
-  const s = b((d) => d.execution.nodeStatus[n]), i = b((d) => {
+  const n = f((d) => d.execution.nodeStatus[s]), i = f((d) => {
     var p;
-    return (p = d.execution.dataOutputs) == null ? void 0 : p[n];
-  }), o = M(s) || (a ? "border-pink-500" : "border-pink-200");
+    return (p = d.execution.dataOutputs) == null ? void 0 : p[s];
+  }), a = M(n) || (o ? "border-pink-500" : "border-pink-200");
   return /* @__PURE__ */ m(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-pink-500" }),
+        /* @__PURE__ */ e(I, { type: "target", position: L.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__ */ m("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
           (c = i.content) == null ? void 0 : c.slice(0, 200),
           (((u = i.content) == null ? void 0 : u.length) || 0) > 200 && "..."
@@ -878,22 +878,22 @@ const Ae = T(function({
             "..."
           ] }) : null })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-pink-500" })
+        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-pink-500" })
       ]
     }
   );
-}), Me = {
-  generator: Ae,
-  transform: $e,
-  save: De,
-  input: Pe,
-  vision: je,
-  text: Te
-}, Ue = {
+}), Be = {
+  generator: Pe,
+  transform: Te,
+  save: Me,
+  input: Ue,
+  vision: Ee,
+  text: Oe
+}, Re = {
   type: "smoothstep",
   animated: !1,
   markerEnd: {
-    type: ge.ArrowClosed,
+    type: be.ArrowClosed,
     color: "#64748b",
     width: 20,
     height: 20
@@ -903,96 +903,100 @@ const Ae = T(function({
     strokeWidth: 2
   }
 };
-function Ee() {
-  const r = b((h) => h.nodes), n = b((h) => h.edges), t = b((h) => h.setNodes), a = b((h) => h.setEdges), s = b((h) => h.addEdge), i = b((h) => h.setSelectedNode), l = C(
+function Ge() {
+  const r = f((h) => h.nodes), s = f((h) => h.edges), t = f((h) => h.setNodes), o = f((h) => h.setEdges), n = f((h) => h.addEdge), i = f((h) => h.setSelectedNode), l = C(
     (h) => {
-      const { source: f, target: x } = h;
-      if (!f || !x) return !1;
-      const g = r.find((y) => y.id === f), k = r.find((y) => y.id === x);
-      return !(!g || !k || g.type === "save" || k.type === "generator" || k.type === "input" || n.find((y) => y.target === x) || f === x);
+      const { source: b, target: x } = h;
+      if (!b || !x) return !1;
+      const g = r.find((y) => y.id === b), w = r.find((y) => y.id === x);
+      return !(!g || !w || g.type === "save" || w.type === "generator" || w.type === "input" || s.find((y) => y.target === x) || b === x);
     },
-    [r, n]
-  ), o = C(
+    [r, s]
+  ), a = C(
     (h) => {
-      t(me(h, r));
+      t(he(h, r));
     },
     [r, t]
   ), c = C(
     (h) => {
-      a(ue(h, n));
+      o(fe(h, s));
     },
-    [n, a]
+    [s, o]
   ), u = C(
     (h) => {
-      s(h);
+      n(h);
     },
-    [s]
+    [n]
   ), d = C(
-    (h, f) => {
-      i(f.id);
+    (h, b) => {
+      i(b.id);
     },
     [i]
   ), p = C(() => {
     i(null);
   }, [i]);
   return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ m(
-    ce,
+    pe,
     {
       nodes: r,
-      edges: n,
-      onNodesChange: o,
+      edges: s,
+      onNodesChange: a,
       onEdgesChange: c,
       onConnect: u,
       onNodeClick: d,
       onPaneClick: p,
-      nodeTypes: Me,
-      defaultEdgeOptions: Ue,
+      nodeTypes: Be,
+      defaultEdgeOptions: Re,
       isValidConnection: l,
+      nodesDraggable: !0,
+      nodesConnectable: !0,
+      elementsSelectable: !0,
+      proOptions: { hideAttribution: !0 },
       fitView: !0,
       snapToGrid: !0,
       snapGrid: [15, 15],
       children: [
-        /* @__PURE__ */ e(pe, {}),
-        /* @__PURE__ */ e(he, {}),
-        /* @__PURE__ */ e(fe, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
+        /* @__PURE__ */ e(xe, {}),
+        /* @__PURE__ */ e(ke, {}),
+        /* @__PURE__ */ e(we, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
       ]
     }
   ) });
 }
-function Oe({ onSelect: r }) {
-  const [n, t] = N([]), [a, s] = N(!0), [i, l] = N(null), o = async () => {
+function Fe({ onSelect: r }) {
+  const [s, t] = N([]), [o, n] = N(!0), [i, l] = N(null), a = async () => {
     try {
-      s(!0);
-      const d = await Ie();
+      n(!0);
+      const d = await $e();
       t(d), l(null);
     } catch (d) {
       l(d instanceof Error ? d.message : "Failed to load uploads");
     } finally {
-      s(!1);
+      n(!1);
     }
   };
   $(() => {
-    o();
+    a();
   }, []);
   const c = async (d, p) => {
     if (p.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await Le(d), t((h) => h.filter((f) => f.id !== d));
+        await De(d), t((h) => h.filter((b) => b.id !== d));
       } catch (h) {
         console.error("Failed to delete:", h);
       }
   }, u = (d) => d < 1024 ? `${d} B` : d < 1024 * 1024 ? `${(d / 1024).toFixed(1)} KB` : `${(d / (1024 * 1024)).toFixed(1)} MB`;
-  return a ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : i ? /* @__PURE__ */ m("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
+  return o ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : i ? /* @__PURE__ */ m("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
     i,
     /* @__PURE__ */ e(
       "button",
       {
-        onClick: o,
+        onClick: a,
         className: "ml-2 text-teal-500 dark:text-teal-400 hover:underline",
         children: "Retry"
       }
     )
-  ] }) : n.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: n.map((d) => /* @__PURE__ */ m(
+  ] }) : s.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: s.map((d) => /* @__PURE__ */ m(
     "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",
@@ -1001,7 +1005,7 @@ function Oe({ onSelect: r }) {
         /* @__PURE__ */ e(
           "img",
           {
-            src: oe(d.id),
+            src: se(d.id),
             alt: d.filename,
             className: "w-full h-20 object-cover"
           }
@@ -1021,23 +1025,23 @@ function Oe({ onSelect: r }) {
     d.id
   )) }) });
 }
-function Be() {
-  const r = b((g) => g.setGenerators), n = b((g) => g.setTransforms), t = b((g) => g.generators), a = b((g) => g.transforms), s = b((g) => g.addNode), [i, l] = N(!1), { data: o } = K({
+function Ve() {
+  const r = f((g) => g.setGenerators), s = f((g) => g.setTransforms), t = f((g) => g.generators), o = f((g) => g.transforms), n = f((g) => g.addNode), [i, l] = N(!1), { data: a } = q({
     queryKey: ["generators"],
-    queryFn: we
-  }), { data: c } = K({
+    queryFn: ze
+  }), { data: c } = q({
     queryKey: ["transforms"],
-    queryFn: ve
+    queryFn: Ce
   });
   $(() => {
-    o && r(o);
-  }, [o, r]), $(() => {
-    c && n(c);
-  }, [c, n]);
-  const u = (g, k) => {
-    g.dataTransfer.setData("application/json", JSON.stringify(k)), g.dataTransfer.effectAllowed = "move";
+    a && r(a);
+  }, [a, r]), $(() => {
+    c && s(c);
+  }, [c, s]);
+  const u = (g, w) => {
+    g.dataTransfer.setData("application/json", JSON.stringify(w)), g.dataTransfer.effectAllowed = "move";
   }, d = (g) => {
-    s(g, { x: 250, y: 150 + Math.random() * 100 });
+    n(g, { x: 250, y: 150 + Math.random() * 100 });
   }, p = {
     id: "input:upload",
     type: "input",
@@ -1066,16 +1070,16 @@ function Be() {
         }
       }
     }
-  }, f = t.reduce(
-    (g, k) => {
-      const w = k.category || "Other";
-      return g[w] || (g[w] = []), g[w].push(k), g;
+  }, b = t.reduce(
+    (g, w) => {
+      const k = w.category || "Other";
+      return g[k] || (g[k] = []), g[k].push(w), g;
     },
     {}
-  ), x = a.reduce(
-    (g, k) => {
-      const w = k.category || "Other";
-      return g[w] || (g[w] = []), g[w].push(k), g;
+  ), x = o.reduce(
+    (g, w) => {
+      const k = w.category || "Other";
+      return g[k] || (g[k] = []), g[k].push(w), g;
     },
     {}
   );
@@ -1109,45 +1113,45 @@ function Be() {
           ]
         }
       ),
-      i && /* @__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(Oe, {}) })
+      i && /* @__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(Fe, {}) })
     ] }),
     /* @__PURE__ */ m("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(f).map(([g, k]) => /* @__PURE__ */ m("div", { className: "mb-3", children: [
+      Object.entries(b).map(([g, w]) => /* @__PURE__ */ m("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: g }),
-        k.map((w) => /* @__PURE__ */ m(
+        w.map((k) => /* @__PURE__ */ m(
           "div",
           {
             draggable: !0,
-            onDragStart: (y) => u(y, w),
-            onDoubleClick: () => d(w),
+            onDragStart: (y) => u(y, k),
+            onDoubleClick: () => d(k),
             className: "px-3 py-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors",
             children: [
-              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-blue-700 dark:text-blue-300", children: w.label }),
-              w.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: w.description })
+              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-blue-700 dark:text-blue-300", children: k.label }),
+              k.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: k.description })
             ]
           },
-          w.id
+          k.id
         ))
       ] }, g))
     ] }),
     /* @__PURE__ */ m("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(x).map(([g, k]) => /* @__PURE__ */ m("div", { className: "mb-3", children: [
+      Object.entries(x).map(([g, w]) => /* @__PURE__ */ m("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: g }),
-        k.map((w) => /* @__PURE__ */ m(
+        w.map((k) => /* @__PURE__ */ m(
           "div",
           {
             draggable: !0,
-            onDragStart: (y) => u(y, w),
-            onDoubleClick: () => d(w),
+            onDragStart: (y) => u(y, k),
+            onDoubleClick: () => d(k),
             className: "px-3 py-2 bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-teal-100 dark:hover:bg-teal-900/50 transition-colors",
             children: [
-              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-teal-700 dark:text-teal-300", children: w.label }),
-              w.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: w.description })
+              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-teal-700 dark:text-teal-300", children: k.label }),
+              k.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: k.description })
             ]
           },
-          w.id
+          k.id
         ))
       ] }, g))
     ] }),
@@ -1169,44 +1173,44 @@ function Be() {
     ] })
   ] }) });
 }
-function Re() {
+function Ke() {
   var p, h;
-  const r = b((f) => f.selectedNodeId), n = b((f) => f.nodes), t = b((f) => f.generators), a = b((f) => f.transforms), s = b((f) => f.updateNodeData), i = b((f) => f.deleteNode), l = n.find((f) => f.id === r);
+  const r = f((b) => b.selectedNodeId), s = f((b) => b.nodes), t = f((b) => b.generators), o = f((b) => b.transforms), n = f((b) => b.updateNodeData), i = f((b) => b.deleteNode), l = s.find((b) => b.id === r);
   if (!l)
     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 o, c = "";
+  let a, c = "";
   if (l.type === "generator") {
-    const f = l.data, x = t.find((g) => g.name === f.generatorName);
-    o = (p = x == null ? void 0 : x.params) == null ? void 0 : p.properties, c = (x == null ? void 0 : x.label) || f.generatorName;
+    const b = l.data, x = t.find((g) => g.name === b.generatorName);
+    a = (p = x == null ? void 0 : x.params) == null ? void 0 : p.properties, c = (x == null ? void 0 : x.label) || b.generatorName;
   } else if (l.type === "transform") {
-    const f = l.data, x = a.find((g) => g.name === f.operation);
-    o = (h = x == null ? void 0 : x.params) == null ? void 0 : h.properties, c = (x == null ? void 0 : x.label) || f.operation;
-  } else l.type === "save" && (c = "Save", o = {
+    const b = l.data, x = o.find((g) => g.name === b.operation);
+    a = (h = x == null ? void 0 : x.params) == null ? void 0 : h.properties, c = (x == null ? void 0 : x.label) || b.operation;
+  } else l.type === "save" && (c = "Save", a = {
     destination: {
       type: "string",
       title: "Destination",
       description: "File path to save the image"
     }
   });
-  const u = (f, x) => {
+  const u = (b, x) => {
     if (l.type === "generator") {
       const g = l.data;
-      s(l.id, {
-        params: { ...g.params, [f]: x }
+      n(l.id, {
+        params: { ...g.params, [b]: x }
       });
     } else if (l.type === "transform") {
       const g = l.data;
-      s(l.id, {
-        params: { ...g.params, [f]: x }
+      n(l.id, {
+        params: { ...g.params, [b]: x }
       });
-    } else l.type === "save" && s(l.id, { [f]: x });
-  }, d = (f) => {
+    } else l.type === "save" && n(l.id, { [b]: x });
+  }, d = (b) => {
     if (l.type === "generator")
-      return l.data.params[f];
+      return l.data.params[b];
     if (l.type === "transform")
-      return l.data.params[f];
+      return l.data.params[b];
     if (l.type === "save")
-      return l.data[f];
+      return l.data[b];
   };
   return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ m("div", { className: "p-4", children: [
     /* @__PURE__ */ m("div", { className: "flex items-center justify-between mb-4", children: [
@@ -1220,69 +1224,69 @@ function Re() {
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: o && Object.entries(o).map(([f, x]) => /* @__PURE__ */ e(
-      Ge,
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: a && Object.entries(a).map(([b, x]) => /* @__PURE__ */ e(
+      qe,
       {
-        name: f,
+        name: b,
         field: x,
-        value: d(f),
-        onChange: (g) => u(f, g)
+        value: d(b),
+        onChange: (g) => u(b, g)
       },
-      f
+      b
     )) })
   ] }) });
 }
-function Ge({ name: r, field: n, value: t, onChange: a }) {
-  const s = n.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 n.enum ? /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+function qe({ name: r, field: s, value: t, onChange: o }) {
+  const n = s.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 s.enum ? /* @__PURE__ */ m("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: n }),
     /* @__PURE__ */ m(
       "select",
       {
         value: String(t || ""),
-        onChange: (l) => a(l.target.value),
+        onChange: (l) => o(l.target.value),
         className: i,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-          n.enum.map((l) => /* @__PURE__ */ e("option", { value: l, children: l }, l))
+          s.enum.map((l) => /* @__PURE__ */ e("option", { value: l, children: l }, l))
         ]
       }
     ),
-    n.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: n.description })
-  ] }) : n.type === "number" ? /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+    s.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: s.description })
+  ] }) : s.type === "number" ? /* @__PURE__ */ m("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: n }),
     /* @__PURE__ */ e(
       "input",
       {
         type: "number",
         value: t !== void 0 ? Number(t) : "",
-        onChange: (l) => a(Number(l.target.value)),
-        min: n.minimum,
-        max: n.maximum,
+        onChange: (l) => o(Number(l.target.value)),
+        min: s.minimum,
+        max: s.maximum,
         className: i
       }
     ),
-    n.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: n.description })
-  ] }) : n.type === "boolean" ? /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+    s.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: s.description })
+  ] }) : s.type === "boolean" ? /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
         checked: !!t,
-        onChange: (l) => a(l.target.checked),
+        onChange: (l) => o(l.target.checked),
         className: "h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900"
       }
     ),
-    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: s })
+    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: n })
   ] }) : r.toLowerCase().includes("color") && typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: n }),
     /* @__PURE__ */ m("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "color",
           value: String(t || "#000000"),
-          onChange: (l) => a(l.target.value),
+          onChange: (l) => o(l.target.value),
           className: "h-10 w-14 p-1 border border-gray-300 dark:border-zinc-600 rounded"
         }
       ),
@@ -1291,20 +1295,20 @@ function Ge({ name: r, field: n, value: t, onChange: a }) {
         {
           type: "text",
           value: String(t || ""),
-          onChange: (l) => a(l.target.value),
+          onChange: (l) => o(l.target.value),
           className: i + " flex-1"
         }
       )
     ] })
-  ] }) : n.type === "object" ? /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+  ] }) : s.type === "object" ? /* @__PURE__ */ m("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: n }),
     /* @__PURE__ */ e(
       "textarea",
       {
         value: t ? JSON.stringify(t, null, 2) : "{}",
         onChange: (l) => {
           try {
-            a(JSON.parse(l.target.value));
+            o(JSON.parse(l.target.value));
           } catch {
           }
         },
@@ -1312,14 +1316,14 @@ function Ge({ name: r, field: n, value: t, onChange: a }) {
         className: i + " font-mono text-xs"
       }
     ),
-    n.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: n.description })
+    s.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: s.description })
   ] }) : /* @__PURE__ */ m("div", { children: [
-    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: n }),
     r === "prompt" || r === "code" || r === "text" ? /* @__PURE__ */ e(
       "textarea",
       {
         value: String(t || ""),
-        onChange: (l) => a(l.target.value),
+        onChange: (l) => o(l.target.value),
         rows: 3,
         className: i
       }
@@ -1328,105 +1332,105 @@ function Ge({ name: r, field: n, value: t, onChange: a }) {
       {
         type: "text",
         value: String(t || ""),
-        onChange: (l) => a(l.target.value),
+        onChange: (l) => o(l.target.value),
         className: i
       }
     ),
-    n.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: n.description })
+    s.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: s.description })
   ] });
 }
-function Fe(r, n) {
-  const t = new Map(r.map((o) => [o.id, o])), a = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
-  for (const o of r)
-    a.set(o.id, 0), s.set(o.id, []);
-  for (const o of n) {
-    const c = s.get(o.source) || [];
-    c.push(o.target), s.set(o.source, c), a.set(o.target, (a.get(o.target) || 0) + 1);
+function _e(r, s) {
+  const t = new Map(r.map((a) => [a.id, a])), o = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+  for (const a of r)
+    o.set(a.id, 0), n.set(a.id, []);
+  for (const a of s) {
+    const c = n.get(a.source) || [];
+    c.push(a.target), n.set(a.source, c), o.set(a.target, (o.get(a.target) || 0) + 1);
   }
   const i = [];
-  for (const [o, c] of a)
-    c === 0 && i.push(o);
+  for (const [a, c] of o)
+    c === 0 && i.push(a);
   const l = [];
   for (; i.length > 0; ) {
-    const o = i.shift(), c = t.get(o);
+    const a = i.shift(), c = t.get(a);
     c && l.push(c);
-    const u = s.get(o) || [];
+    const u = n.get(a) || [];
     for (const d of u) {
-      const p = (a.get(d) || 1) - 1;
-      a.set(d, p), p === 0 && i.push(d);
+      const p = (o.get(d) || 1) - 1;
+      o.set(d, p), p === 0 && i.push(d);
     }
   }
   return l;
 }
-function Ve(r) {
-  const n = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
-  return `${n}_${t}`;
+function He(r) {
+  const s = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
+  return `${s}_${t}`;
 }
 function U(r) {
   return typeof r == "string" ? r.includes(`
 `) ? "`" + r.replace(/`/g, "\\`").replace(/\$/g, "\\$") + "`" : JSON.stringify(r) : JSON.stringify(r, null, 2);
 }
-function Ke(r, n, t) {
-  const a = t.get(r.id), s = [], i = n.find((o) => o.target === r.id), l = i ? t.get(i.source) : null;
+function Je(r, s, t) {
+  const o = t.get(r.id), n = [], i = s.find((a) => a.target === r.id), l = i ? t.get(i.source) : null;
   switch (r.type) {
     case "generator": {
-      const o = r.data;
-      s.push(o.generatorName);
-      const c = o.params || {}, u = Object.entries(c).filter(([, d]) => d !== void 0 && d !== "").map(([d, p]) => `  ${d}: ${U(p)}`).join(`,
+      const a = r.data;
+      n.push(a.generatorName);
+      const c = a.params || {}, u = Object.entries(c).filter(([, d]) => d !== void 0 && d !== "").map(([d, p]) => `  ${d}: ${U(p)}`).join(`,
 `);
       return {
-        code: `// Generate image using ${o.generatorName}
-const ${a} = await ${o.generatorName}({
+        code: `// Generate image using ${a.generatorName}
+const ${o} = await ${a.generatorName}({
 ${u}
 });`,
-        imports: s
+        imports: n
       };
     }
     case "input":
       return {
         code: `// Load input image
-const ${a} = await flo.loadImage("./input.png");`,
+const ${o} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      const o = r.data, c = o.params || {}, u = Object.entries(c).filter(([, p]) => p !== void 0 && p !== "").map(([p, h]) => `${p}: ${U(h)}`).join(", "), d = l || "image";
+      const a = r.data, c = a.params || {}, u = Object.entries(c).filter(([, p]) => p !== void 0 && p !== "").map(([p, h]) => `${p}: ${U(h)}`).join(", "), d = l || "image";
       return {
-        code: `// Apply ${o.operation} transform
-const ${a} = await flo.transform(${d}, "${o.operation}"${u ? `, { ${u} }` : ""});`,
+        code: `// Apply ${a.operation} transform
+const ${o} = await flo.transform(${d}, "${a.operation}"${u ? `, { ${u} }` : ""});`,
         imports: []
       };
     }
     case "vision": {
-      const o = r.data;
-      s.push(o.providerName);
-      const c = o.params || {}, u = l || "image", d = Object.entries(c).filter(([, p]) => p !== void 0 && p !== "").map(([p, h]) => `  ${p}: ${U(h)}`).join(`,
+      const a = r.data;
+      n.push(a.providerName);
+      const c = a.params || {}, u = l || "image", d = Object.entries(c).filter(([, p]) => p !== void 0 && p !== "").map(([p, h]) => `  ${p}: ${U(h)}`).join(`,
 `);
       return {
-        code: `// Analyze image with ${o.providerName}
-const ${a} = await ${o.providerName}.analyze(${u}, {
+        code: `// Analyze image with ${a.providerName}
+const ${o} = await ${a.providerName}.analyze(${u}, {
 ${d}
 });`,
-        imports: s
+        imports: n
       };
     }
     case "text": {
-      const o = r.data;
-      s.push(o.providerName);
-      const c = o.params || {}, u = Object.entries(c).filter(([, d]) => d !== void 0 && d !== "").map(([d, p]) => `  ${d}: ${U(p)}`).join(`,
+      const a = r.data;
+      n.push(a.providerName);
+      const c = a.params || {}, u = Object.entries(c).filter(([, d]) => d !== void 0 && d !== "").map(([d, p]) => `  ${d}: ${U(p)}`).join(`,
 `);
       return {
-        code: `// Generate text with ${o.providerName}
-const ${a} = await ${o.providerName}.generate({
+        code: `// Generate text with ${a.providerName}
+const ${o} = await ${a.providerName}.generate({
 ${u}
 });`,
-        imports: s
+        imports: n
       };
     }
     case "save": {
-      const o = r.data;
+      const a = r.data;
       return {
         code: `// Save result
-await flo.save(${l || "result"}, ${U(o.destination)});`,
+await flo.save(${l || "result"}, ${U(a.destination)});`,
         imports: []
       };
     }
@@ -1437,23 +1441,23 @@ await flo.save(${l || "result"}, ${U(o.destination)});`,
       };
   }
 }
-function qe(r, n) {
+function Qe(r, s) {
   if (r.length === 0)
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
-  const t = Fe(r, n), a = /* @__PURE__ */ new Map();
+  const t = _e(r, s), o = /* @__PURE__ */ new Map();
   for (const u of t)
-    a.set(u.id, Ve(u));
-  const s = /* @__PURE__ */ new Set(), i = [];
+    o.set(u.id, He(u));
+  const n = /* @__PURE__ */ new Set(), i = [];
   for (const u of t) {
-    const { code: d, imports: p } = Ke(u, n, a);
+    const { code: d, imports: p } = Je(u, s, o);
     i.push(d);
     for (const h of p)
-      s.add(h);
+      n.add(h);
   }
   const l = [];
-  s.size > 0 && l.push(`import { ${Array.from(s).join(", ")} } from "@teamflojo/floimg";`), l.push('import * as flo from "@teamflojo/floimg";');
-  const o = `/**
+  n.size > 0 && l.push(`import { ${Array.from(n).join(", ")} } from "@teamflojo/floimg";`), l.push('import * as flo from "@teamflojo/floimg";');
+  const a = `/**
  * FloImg Workflow
  * Generated by FloImg Studio
  * https://floimg.com
@@ -1473,50 +1477,55 @@ ${i.map(
 // Run the workflow
 runWorkflow().catch(console.error);
 `;
-  return o + l.join(`
+  return a + l.join(`
 `) + `
 ` + c;
 }
-function _e() {
-  const r = b((v) => v.execution), n = b((v) => v.execute), t = b((v) => v.exportToYaml), a = b((v) => v.nodes), s = b((v) => v.edges), i = A((v) => v.openSettings), l = b((v) => v.activeWorkflowName), o = b((v) => v.hasUnsavedChanges), c = b((v) => v.saveWorkflow), u = b((v) => v.toggleLibrary), d = b((v) => v.setActiveWorkflowName), [p, h] = N(!1), [f, x] = N("yaml"), [g, k] = N(""), [w, y] = N(""), [z, S] = N(null), [R, G] = N(!1), [H, F] = N("");
+function Ye({
+  brandingSlot: r,
+  beforeActionsSlot: s,
+  afterActionsSlot: t,
+  hideAttribution: o = !1
+} = {}) {
+  const n = f((v) => v.execution), i = f((v) => v.execute), l = f((v) => v.exportToYaml), a = f((v) => v.nodes), c = f((v) => v.edges), u = A((v) => v.openSettings), d = f((v) => v.activeWorkflowName), p = f((v) => v.hasUnsavedChanges), h = f((v) => v.saveWorkflow), b = f((v) => v.toggleLibrary), x = f((v) => v.setActiveWorkflowName), [g, w] = N(!1), [k, y] = N("yaml"), [z, W] = N(""), [O, ie] = N(""), [J, B] = N(null), [de, F] = N(!1), [Q, V] = N("");
   $(() => {
     const v = () => {
-      S("New workflow created"), setTimeout(() => S(null), 2e3);
+      B("New workflow created"), setTimeout(() => B(null), 2e3);
     };
     return window.addEventListener("new-workflow-created", v), () => window.removeEventListener("new-workflow-created", v);
   }, []);
-  const V = C(() => {
-    a.length !== 0 && (c(), S("Saved!"), setTimeout(() => S(null), 2e3));
-  }, [a.length, c]), ne = () => {
-    F(l), G(!0);
-  }, J = () => {
-    const v = H.trim();
-    v && v !== l && d(v), G(!1);
+  const K = C(() => {
+    a.length !== 0 && (h(), B("Saved!"), setTimeout(() => B(null), 2e3));
+  }, [a.length, h]), le = () => {
+    V(d), F(!0);
+  }, Y = () => {
+    const v = Q.trim();
+    v && v !== d && x(v), F(!1);
   };
   $(() => {
-    function v(P) {
-      (P.metaKey || P.ctrlKey) && P.key === "s" && (P.preventDefault(), V());
+    function v(j) {
+      (j.metaKey || j.ctrlKey) && j.key === "s" && (j.preventDefault(), K());
     }
     return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [V]);
-  const se = async () => {
-    await n();
-  }, ie = async () => {
-    const v = await t();
-    k(v);
-    const P = qe(a, s);
-    y(P), h(!0);
-  }, de = () => {
-    const v = f === "yaml" ? g : w;
+  }, [K]);
+  const ce = async () => {
+    await i();
+  }, me = async () => {
+    const v = await l();
+    W(v);
+    const j = Qe(a, c);
+    ie(j), w(!0);
+  }, ue = () => {
+    const v = k === "yaml" ? z : O;
     navigator.clipboard.writeText(v);
   };
-  return /* @__PURE__ */ m(j, { children: [
+  return /* @__PURE__ */ m(P, { children: [
     /* @__PURE__ */ m("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__ */ m("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: u,
+            onClick: b,
             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(
@@ -1532,7 +1541,8 @@ function _e() {
         ),
         /* @__PURE__ */ m("div", { className: "flex items-baseline gap-2", children: [
           /* @__PURE__ */ e("h1", { className: "text-xl font-bold text-gray-800 dark:text-white", children: "floimg Studio" }),
-          /* @__PURE__ */ e(
+          r,
+          !o && /* @__PURE__ */ e(
             "a",
             {
               href: "https://flojo.io",
@@ -1544,15 +1554,15 @@ function _e() {
           )
         ] }),
         /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-          R ? /* @__PURE__ */ e(
+          de ? /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: H,
-              onChange: (v) => F(v.target.value),
-              onBlur: J,
+              value: Q,
+              onChange: (v) => V(v.target.value),
+              onBlur: Y,
               onKeyDown: (v) => {
-                v.key === "Enter" && J(), v.key === "Escape" && (F(l), G(!1));
+                v.key === "Enter" && Y(), v.key === "Escape" && (V(d), F(!1));
               },
               className: "w-48 px-2 py-1 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500 text-gray-900 dark:text-zinc-100",
               autoFocus: !0
@@ -1560,14 +1570,14 @@ function _e() {
           ) : /* @__PURE__ */ e(
             "button",
             {
-              onClick: ne,
+              onClick: le,
               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: l
+              children: d
             }
           ),
-          o && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
-          z && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: z })
+          p && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
+          J && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: J })
         ] }),
         /* @__PURE__ */ m("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
           a.length,
@@ -1576,10 +1586,11 @@ function _e() {
         ] })
       ] }),
       /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
+        s,
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: i,
+            onClick: u,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md",
             title: "AI Settings",
             children: /* @__PURE__ */ m("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
@@ -1607,7 +1618,7 @@ function _e() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: V,
+            onClick: K,
             disabled: a.length === 0,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
             title: "Save Workflow (Cmd+S)",
@@ -1625,7 +1636,7 @@ function _e() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: ie,
+            onClick: me,
             disabled: a.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"
@@ -1634,10 +1645,10 @@ function _e() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: se,
-            disabled: a.length === 0 || r.status === "running",
+            onClick: ce,
+            disabled: a.length === 0 || n.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: r.status === "running" ? /* @__PURE__ */ m(j, { children: [
+            children: n.status === "running" ? /* @__PURE__ */ m(P, { children: [
               /* @__PURE__ */ m("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
@@ -1660,7 +1671,7 @@ function _e() {
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ m(j, { children: [
+            ] }) : /* @__PURE__ */ m(P, { children: [
               /* @__PURE__ */ m("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
@@ -1684,27 +1695,28 @@ function _e() {
               "Execute"
             ] })
           }
-        )
+        ),
+        t
       ] })
     ] }),
-    r.status === "completed" && r.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__ */ m("div", { className: "flex items-center gap-4", children: [
+    n.status === "completed" && n.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__ */ m("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ m("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
         "Generated ",
-        r.imageIds.length,
+        n.imageIds.length,
         " image",
-        r.imageIds.length !== 1 ? "s" : ""
+        n.imageIds.length !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex gap-2", children: r.imageIds.slice(0, 4).map((v) => /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "flex gap-2", children: n.imageIds.slice(0, 4).map((v) => /* @__PURE__ */ e(
         "a",
         {
-          href: B(v),
+          href: G(v),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: B(v),
+              src: G(v),
               alt: "Generated",
               className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
             }
@@ -1713,11 +1725,11 @@ function _e() {
         v
       )) })
     ] }) }),
-    r.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__ */ m("span", { className: "text-red-700 dark:text-red-400", children: [
+    n.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__ */ m("span", { className: "text-red-700 dark:text-red-400", children: [
       "Error: ",
-      r.error
+      n.error
     ] }) }),
-    p && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ m("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: [
+    g && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ m("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__ */ m("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ m("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Export Workflow" }),
@@ -1725,16 +1737,16 @@ function _e() {
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => x("yaml"),
-                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${f === "yaml" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
+                onClick: () => y("yaml"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${k === "yaml" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "YAML"
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => x("javascript"),
-                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${f === "javascript" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
+                onClick: () => y("javascript"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${k === "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"
               }
             )
@@ -1743,7 +1755,7 @@ function _e() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => h(!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",
@@ -1757,14 +1769,14 @@ function _e() {
           }
         )
       ] }),
-      /* @__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: f === "yaml" ? g : w }) }),
+      /* @__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: k === "yaml" ? z : O }) }),
       /* @__PURE__ */ m("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: f === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
+        /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: k === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
         /* @__PURE__ */ m("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: de,
+              onClick: ue,
               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"
             }
@@ -1772,7 +1784,7 @@ function _e() {
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => h(!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"
             }
@@ -1782,21 +1794,21 @@ function _e() {
     ] }) })
   ] });
 }
-function He() {
-  const r = b((c) => c.loadTemplate), [n, t] = N(null), {
-    data: a,
-    isLoading: s,
+function Xe() {
+  const r = f((c) => c.loadTemplate), [s, t] = N(null), {
+    data: o,
+    isLoading: n,
     error: i,
     refetch: l
-  } = K({
+  } = q({
     queryKey: ["images"],
-    queryFn: ze,
+    queryFn: Le,
     refetchInterval: 5e3
     // Auto-refresh every 5 seconds
-  }), o = async (c) => {
+  }), a = async (c) => {
     t(c);
     try {
-      const u = await Ce(c);
+      const u = await We(c);
       if (u != null && u.workflow) {
         const d = {
           id: `image-${c}`,
@@ -1818,19 +1830,19 @@ function He() {
       t(null);
     }
   };
-  return s ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : i ? /* @__PURE__ */ m("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
+  return n ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : i ? /* @__PURE__ */ m("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
     "Error loading images: ",
     i instanceof Error ? i.message : "Unknown error"
-  ] }) : !a || a.length === 0 ? /* @__PURE__ */ m("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: [
+  ] }) : !o || o.length === 0 ? /* @__PURE__ */ m("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: [
     /* @__PURE__ */ e("div", { className: "text-lg mb-2", children: "No images yet" }),
     /* @__PURE__ */ e("div", { className: "text-sm", children: "Create a workflow and click Execute to generate images" })
   ] }) : /* @__PURE__ */ m("div", { className: "p-4 bg-gray-100 dark:bg-zinc-900 min-h-full", children: [
     /* @__PURE__ */ m("div", { className: "flex items-center justify-between mb-4", children: [
       /* @__PURE__ */ m("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: [
         "Gallery (",
-        a.length,
+        o.length,
         " image",
-        a.length !== 1 ? "s" : "",
+        o.length !== 1 ? "s" : "",
         ")"
       ] }),
       /* @__PURE__ */ e(
@@ -1842,32 +1854,32 @@ function He() {
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: a.map((c) => /* @__PURE__ */ e(
-      Je,
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: o.map((c) => /* @__PURE__ */ e(
+      Ze,
       {
         image: c,
-        onLoadWorkflow: () => o(c.id),
-        isLoading: n === c.id
+        onLoadWorkflow: () => a(c.id),
+        isLoading: s === c.id
       },
       c.id
     )) })
   ] });
 }
-function Je({ image: r, onLoadWorkflow: n, isLoading: t }) {
-  const a = (i) => new Date(i).toLocaleString(), s = (i) => i < 1024 ? `${i} B` : i < 1048576 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1048576).toFixed(1)} MB`;
+function Ze({ image: r, onLoadWorkflow: s, isLoading: t }) {
+  const o = (i) => new Date(i).toLocaleString(), n = (i) => i < 1024 ? `${i} B` : i < 1048576 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1048576).toFixed(1)} MB`;
   return /* @__PURE__ */ m("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__ */ m("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "a",
         {
-          href: B(r.id),
+          href: G(r.id),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block aspect-square bg-gray-100 dark:bg-zinc-900",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: B(r.id),
+              src: G(r.id),
               alt: r.filename,
               className: "w-full h-full object-cover",
               loading: "lazy"
@@ -1879,7 +1891,7 @@ function Je({ image: r, onLoadWorkflow: n, isLoading: t }) {
         "button",
         {
           onClick: (i) => {
-            i.preventDefault(), n();
+            i.preventDefault(), s();
           },
           disabled: t,
           className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
@@ -1892,13 +1904,13 @@ function Je({ image: r, onLoadWorkflow: n, isLoading: t }) {
       /* @__PURE__ */ m("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
         r.mime,
         " • ",
-        s(r.size)
+        n(r.size)
       ] }),
-      /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: a(r.createdAt) })
+      /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: o(r.createdAt) })
     ] })
   ] });
 }
-const Qe = {
+const et = {
   id: "sales-dashboard",
   name: "Sales Dashboard",
   description: "Quarterly revenue bar chart with gradient styling",
@@ -1948,7 +1960,7 @@ const Qe = {
     ],
     edges: []
   }
-}, Ye = {
+}, tt = {
   id: "user-growth",
   name: "User Growth Line Chart",
   description: "Monthly user growth with smooth bezier curves",
@@ -1996,7 +2008,7 @@ const Qe = {
     ],
     edges: []
   }
-}, Xe = {
+}, rt = {
   id: "api-flow",
   name: "API Request Flow",
   description: "Sequence diagram showing API authentication flow",
@@ -2038,7 +2050,7 @@ const Qe = {
     ],
     edges: []
   }
-}, Ze = {
+}, at = {
   id: "system-architecture",
   name: "System Architecture",
   description: "Microservices architecture diagram",
@@ -2096,7 +2108,7 @@ const Qe = {
     ],
     edges: []
   }
-}, et = {
+}, ot = {
   id: "git-workflow",
   name: "Git Branch Workflow",
   description: "Git branching strategy with feature and release branches",
@@ -2139,7 +2151,7 @@ const Qe = {
     ],
     edges: []
   }
-}, tt = {
+}, nt = {
   id: "website-qr",
   name: "Website QR Code",
   description: "QR code linking to your website with custom styling",
@@ -2167,7 +2179,7 @@ const Qe = {
     ],
     edges: []
   }
-}, rt = {
+}, st = {
   id: "wifi-qr",
   name: "WiFi QR Code",
   description: "Scannable QR code for WiFi network access",
@@ -2195,7 +2207,7 @@ const Qe = {
     ],
     edges: []
   }
-}, at = {
+}, it = {
   id: "chart-watermark",
   name: "Chart with Watermark",
   description: "Bar chart with company watermark and rounded corners",
@@ -2261,7 +2273,7 @@ const Qe = {
       { id: "e2", source: "transform-1", target: "transform-2" }
     ]
   }
-}, ot = {
+}, dt = {
   id: "diagram-webp",
   name: "Diagram to WebP",
   description: "Mermaid diagram converted to optimized WebP format",
@@ -2304,52 +2316,52 @@ const Qe = {
   }
 }, E = [
   // Charts
-  Qe,
-  Ye,
-  // Diagrams
-  Xe,
-  Ze,
   et,
-  // QR Codes
   tt,
+  // Diagrams
   rt,
-  // Pipelines
   at,
-  ot
+  ot,
+  // QR Codes
+  nt,
+  st,
+  // Pipelines
+  it,
+  dt
 ];
-function nt() {
-  const r = new Set(E.map((n) => n.category));
+function lt() {
+  const r = new Set(E.map((s) => s.category));
   return Array.from(r).sort();
 }
-function wt(r) {
-  return E.filter((n) => n.category === r);
+function zt(r) {
+  return E.filter((s) => s.category === r);
 }
-function te(r) {
-  return E.find((n) => n.id === r);
+function ae(r) {
+  return E.find((s) => s.id === r);
 }
-function vt(r) {
-  const n = r.toLowerCase();
+function Ct(r) {
+  const s = r.toLowerCase();
   return E.filter(
     (t) => {
-      var a;
-      return t.name.toLowerCase().includes(n) || t.description.toLowerCase().includes(n) || t.category.toLowerCase().includes(n) || t.generator.toLowerCase().includes(n) || ((a = t.tags) == null ? void 0 : a.some((s) => s.toLowerCase().includes(n)));
+      var o;
+      return t.name.toLowerCase().includes(s) || t.description.toLowerCase().includes(s) || t.category.toLowerCase().includes(s) || t.generator.toLowerCase().includes(s) || ((o = t.tags) == null ? void 0 : o.some((n) => n.toLowerCase().includes(s)));
     }
   );
 }
-function st({ onSelect: r }) {
-  const [n, t] = N(null), [a, s] = N(""), i = Q(() => nt(), []), l = Q(() => {
-    let o = E;
-    if (n && (o = o.filter((c) => c.category === n)), a) {
-      const c = a.toLowerCase();
-      o = o.filter(
+function ct({ onSelect: r }) {
+  const [s, t] = N(null), [o, n] = N(""), i = X(() => lt(), []), l = X(() => {
+    let a = E;
+    if (s && (a = a.filter((c) => c.category === s)), o) {
+      const c = o.toLowerCase();
+      a = a.filter(
         (u) => {
           var d;
           return u.name.toLowerCase().includes(c) || u.description.toLowerCase().includes(c) || u.generator.toLowerCase().includes(c) || ((d = u.tags) == null ? void 0 : d.some((p) => p.toLowerCase().includes(c)));
         }
       );
     }
-    return o;
-  }, [n, a]);
+    return a;
+  }, [s, o]);
   return /* @__PURE__ */ m("div", { className: "p-6", children: [
     /* @__PURE__ */ m("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-2", children: "Templates" }),
@@ -2361,8 +2373,8 @@ function st({ onSelect: r }) {
         {
           type: "text",
           placeholder: "Search templates...",
-          value: a,
-          onChange: (o) => s(o.target.value),
+          value: o,
+          onChange: (a) => n(a.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"
         }
       ),
@@ -2371,33 +2383,33 @@ function st({ onSelect: r }) {
           "button",
           {
             onClick: () => t(null),
-            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${n === 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 ${s === 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"
           }
         ),
-        i.map((o) => /* @__PURE__ */ e(
+        i.map((a) => /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => t(o),
-            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${n === o ? "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: o
+            onClick: () => t(a),
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${s === a ? "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: a
           },
-          o
+          a
         ))
       ] })
     ] }),
-    l.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: l.map((o) => /* @__PURE__ */ e(
-      it,
+    l.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: l.map((a) => /* @__PURE__ */ e(
+      mt,
       {
-        template: o,
-        onSelect: () => r(o.id)
+        template: a,
+        onSelect: () => r(a.id)
       },
-      o.id
+      a.id
     )) })
   ] });
 }
-function it({ template: r, onSelect: n }) {
-  const t = r.workflow.nodes.length, a = r.workflow.edges.length, s = {
+function mt({ template: r, onSelect: s }) {
+  const t = r.workflow.nodes.length, o = r.workflow.edges.length, n = {
     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",
@@ -2438,7 +2450,7 @@ function it({ template: r, onSelect: n }) {
         /* @__PURE__ */ e(
           "span",
           {
-            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"}`,
+            className: `px-2 py-0.5 rounded text-xs font-medium ${n[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
             children: r.generator
           }
         )
@@ -2459,7 +2471,7 @@ function it({ template: r, onSelect: n }) {
           " node",
           t !== 1 ? "s" : ""
         ] }),
-        a > 0 && /* @__PURE__ */ m("span", { className: "flex items-center gap-1", children: [
+        o > 0 && /* @__PURE__ */ m("span", { className: "flex items-center gap-1", children: [
           /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
             "path",
             {
@@ -2469,9 +2481,9 @@ function it({ template: r, onSelect: n }) {
               d: "M13 7l5 5m0 0l-5 5m5-5H6"
             }
           ) }),
-          a,
+          o,
           " edge",
-          a !== 1 ? "s" : ""
+          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((i) => /* @__PURE__ */ e(
@@ -2485,7 +2497,7 @@ function it({ template: r, onSelect: n }) {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: n,
+          onClick: s,
           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"
         }
@@ -2493,24 +2505,24 @@ function it({ template: r, onSelect: n }) {
     ] })
   ] });
 }
-function dt({
+function ut({
   workflow: r,
-  isActive: n,
+  isActive: s,
   onLoad: t,
-  onDelete: a,
-  onRename: s,
+  onDelete: o,
+  onRename: n,
   onDuplicate: i
 }) {
-  const [l, o] = N(!1), [c, u] = N(r.name), [d, p] = N(!1), h = () => {
-    c.trim() && c !== r.name && s(c.trim()), o(!1);
-  }, f = (x) => {
-    const g = new Date(x), w = (/* @__PURE__ */ new Date()).getTime() - g.getTime(), y = Math.floor(w / 6e4), z = Math.floor(w / 36e5), S = Math.floor(w / 864e5);
-    return y < 1 ? "Just now" : y < 60 ? `${y}m ago` : z < 24 ? `${z}h ago` : S < 7 ? `${S}d ago` : g.toLocaleDateString();
+  const [l, a] = N(!1), [c, u] = N(r.name), [d, p] = N(!1), h = () => {
+    c.trim() && c !== r.name && n(c.trim()), a(!1);
+  }, b = (x) => {
+    const g = new Date(x), k = (/* @__PURE__ */ new Date()).getTime() - g.getTime(), y = Math.floor(k / 6e4), z = Math.floor(k / 36e5), W = Math.floor(k / 864e5);
+    return y < 1 ? "Just now" : y < 60 ? `${y}m ago` : z < 24 ? `${z}h ago` : W < 7 ? `${W}d ago` : g.toLocaleDateString();
   };
   return /* @__PURE__ */ m(
     "div",
     {
-      className: `group relative p-3 rounded-lg border transition-colors ${n ? "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 ${s ? "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__ */ m("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ m("button", { onClick: t, className: "flex-1 text-left min-w-0", children: [
@@ -2522,7 +2534,7 @@ function dt({
                 onChange: (x) => u(x.target.value),
                 onBlur: h,
                 onKeyDown: (x) => {
-                  x.key === "Enter" && h(), x.key === "Escape" && (u(r.name), o(!1));
+                  x.key === "Enter" && h(), x.key === "Escape" && (u(r.name), a(!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,
@@ -2532,7 +2544,7 @@ function dt({
             /* @__PURE__ */ m("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
               r.nodes.length,
               " nodes · Updated ",
-              f(r.updatedAt)
+              b(r.updatedAt)
             ] })
           ] }),
           /* @__PURE__ */ m("div", { className: "relative", children: [
@@ -2546,14 +2558,14 @@ function dt({
                 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" }) })
               }
             ),
-            d && /* @__PURE__ */ m(j, { children: [
+            d && /* @__PURE__ */ m(P, { children: [
               /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => p(!1) }),
               /* @__PURE__ */ m("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: (x) => {
-                      x.stopPropagation(), o(!0), p(!1);
+                      x.stopPropagation(), a(!0), p(!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"
@@ -2573,7 +2585,7 @@ function dt({
                   "button",
                   {
                     onClick: (x) => {
-                      x.stopPropagation(), window.confirm("Delete this workflow?") && a(), p(!1);
+                      x.stopPropagation(), window.confirm("Delete this workflow?") && o(), p(!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"
@@ -2583,24 +2595,24 @@ function dt({
             ] })
           ] })
         ] }),
-        n && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
+        s && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
       ]
     }
   );
 }
-function lt() {
-  const r = b((d) => d.showLibrary), n = b((d) => d.toggleLibrary), t = b((d) => d.savedWorkflows), a = b((d) => d.activeWorkflowId), s = b((d) => d.loadWorkflow), i = b((d) => d.deleteWorkflow), l = b((d) => d.renameWorkflow), o = b((d) => d.duplicateWorkflow), c = b((d) => d.newWorkflow);
+function gt() {
+  const r = f((d) => d.showLibrary), s = f((d) => d.toggleLibrary), t = f((d) => d.savedWorkflows), o = f((d) => d.activeWorkflowId), n = f((d) => d.loadWorkflow), i = f((d) => d.deleteWorkflow), l = f((d) => d.renameWorkflow), a = f((d) => d.duplicateWorkflow), c = f((d) => d.newWorkflow);
   if (!r) return null;
   const u = [...t].sort((d, p) => p.updatedAt - d.updatedAt);
-  return /* @__PURE__ */ m(j, { children: [
-    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: n }),
+  return /* @__PURE__ */ m(P, { children: [
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: s }),
     /* @__PURE__ */ m("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__ */ m("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: n,
+            onClick: s,
             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",
@@ -2618,7 +2630,7 @@ function lt() {
         "button",
         {
           onClick: () => {
-            c(), n(), window.dispatchEvent(new window.CustomEvent("new-workflow-created"));
+            c(), s(), 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: [
@@ -2657,16 +2669,16 @@ function lt() {
         /* @__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: u.map((d) => /* @__PURE__ */ e(
-        dt,
+        ut,
         {
           workflow: d,
-          isActive: d.id === a,
+          isActive: d.id === o,
           onLoad: () => {
-            s(d.id), n();
+            n(d.id), s();
           },
           onDelete: () => i(d.id),
           onRename: (p) => l(d.id, p),
-          onDuplicate: () => o(d.id)
+          onDuplicate: () => a(d.id)
         },
         d.id
       )) }) }),
@@ -2679,7 +2691,7 @@ function lt() {
     ] })
   ] });
 }
-const ct = [
+const pt = [
   {
     id: "openai",
     name: "OpenAI",
@@ -2708,7 +2720,7 @@ const ct = [
     placeholder: "sk-or-...",
     docsUrl: "https://openrouter.ai/keys"
   }
-], mt = [
+], ht = [
   {
     id: "ollama",
     name: "Ollama",
@@ -2724,16 +2736,16 @@ const ct = [
     docsUrl: "https://lmstudio.ai"
   }
 ];
-function ut({ provider: r }) {
-  const n = A((h) => h.ai), t = A((h) => h.setAIProvider), a = n[r.id], s = (a == null ? void 0 : a.enabled) ?? !1, i = (a == null ? void 0 : a.apiKey) ?? "", [l, o] = N(i), [c, u] = N(!1), d = () => {
+function ft({ provider: r }) {
+  const s = A((h) => h.ai), t = A((h) => h.setAIProvider), o = s[r.id], n = (o == null ? void 0 : o.enabled) ?? !1, i = (o == null ? void 0 : o.apiKey) ?? "", [l, a] = N(i), [c, u] = N(!1), d = () => {
     t(r.id, {
       apiKey: l,
-      enabled: !s
+      enabled: !n
     });
   }, p = (h) => {
-    o(h), t(r.id, {
+    a(h), t(r.id, {
       apiKey: h,
-      enabled: s
+      enabled: n
     });
   };
   return /* @__PURE__ */ m("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
@@ -2794,27 +2806,27 @@ function ut({ provider: r }) {
       "button",
       {
         onClick: d,
-        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"}`,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${n ? "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 ${s ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${n ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function gt({ provider: r }) {
-  const n = A((d) => d.ai), t = A((d) => d.setAIProvider), a = n[r.id], s = (a == null ? void 0 : a.enabled) ?? !1, i = (a == null ? void 0 : a.baseUrl) ?? r.defaultUrl, [l, o] = N(i), c = () => {
+function bt({ provider: r }) {
+  const s = A((d) => d.ai), t = A((d) => d.setAIProvider), o = s[r.id], n = (o == null ? void 0 : o.enabled) ?? !1, i = (o == null ? void 0 : o.baseUrl) ?? r.defaultUrl, [l, a] = N(i), c = () => {
     t(r.id, {
       baseUrl: l,
-      enabled: !s
+      enabled: !n
     });
   }, u = (d) => {
-    o(d), t(r.id, {
+    a(d), t(r.id, {
       baseUrl: d,
-      enabled: s
+      enabled: n
     });
   };
   return /* @__PURE__ */ m("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
@@ -2849,19 +2861,19 @@ function gt({ provider: r }) {
       "button",
       {
         onClick: c,
-        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"}`,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${n ? "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 ${s ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${n ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function pt() {
-  const r = A((t) => t.showSettings), n = A((t) => t.closeSettings);
+function xt() {
+  const r = A((t) => t.showSettings), s = A((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__ */ m("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__ */ m("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
       /* @__PURE__ */ m("div", { children: [
@@ -2871,7 +2883,7 @@ function pt() {
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: n,
+          onClick: s,
           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",
@@ -2888,11 +2900,11 @@ function pt() {
     /* @__PURE__ */ m("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
       /* @__PURE__ */ m("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: ct.map((t) => /* @__PURE__ */ e(ut, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: pt.map((t) => /* @__PURE__ */ e(ft, { provider: t }, t.id)) })
       ] }),
       /* @__PURE__ */ m("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: mt.map((t) => /* @__PURE__ */ e(gt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: ht.map((t) => /* @__PURE__ */ e(bt, { 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__ */ m("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
@@ -2922,47 +2934,47 @@ function pt() {
     /* @__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: n,
+        onClick: s,
         className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
         children: "Done"
       }
     ) })
   ] }) }) : null;
 }
-function yt() {
-  const [r, n] = N("editor"), t = b((o) => o.addNode), a = b((o) => o.loadTemplate);
+function St() {
+  const [r, s] = N("editor"), t = f((a) => a.addNode), o = f((a) => a.loadTemplate);
   $(() => {
     const c = new URLSearchParams(window.location.search).get("template");
     if (c) {
-      const u = te(c);
-      u && (a(u), window.history.replaceState({}, "", window.location.pathname));
+      const u = ae(c);
+      u && (o(u), window.history.replaceState({}, "", window.location.pathname));
     }
-  }, [a]), $(() => {
-    const o = () => {
-      n("editor");
+  }, [o]), $(() => {
+    const a = () => {
+      s("editor");
     };
-    return window.addEventListener("workflow-loaded", o), () => {
-      window.removeEventListener("workflow-loaded", o);
+    return window.addEventListener("workflow-loaded", a), () => {
+      window.removeEventListener("workflow-loaded", a);
     };
   }, []);
-  const s = C(
-    (o) => {
-      const c = te(o);
-      c && (a(c), n("editor"));
+  const n = C(
+    (a) => {
+      const c = ae(a);
+      c && (o(c), s("editor"));
     },
-    [a]
+    [o]
   ), i = C(
-    (o) => {
+    (a) => {
       var u;
-      o.preventDefault();
-      const c = o.dataTransfer.getData("application/json");
+      a.preventDefault();
+      const c = a.dataTransfer.getData("application/json");
       if (c)
         try {
           const d = JSON.parse(c), p = (u = document.querySelector(".react-flow")) == null ? void 0 : u.getBoundingClientRect();
           if (!p) return;
           const h = {
-            x: o.clientX - p.left,
-            y: o.clientY - p.top
+            x: a.clientX - p.left,
+            y: a.clientY - p.top
           };
           t(d, h);
         } catch (d) {
@@ -2970,19 +2982,19 @@ function yt() {
         }
     },
     [t]
-  ), l = C((o) => {
-    o.preventDefault(), o.dataTransfer.dropEffect = "move";
+  ), l = C((a) => {
+    a.preventDefault(), a.dataTransfer.dropEffect = "move";
   }, []);
-  return /* @__PURE__ */ m(be, { children: [
-    /* @__PURE__ */ e(pt, {}),
-    /* @__PURE__ */ e(lt, {}),
+  return /* @__PURE__ */ m(ve, { children: [
+    /* @__PURE__ */ e(xt, {}),
+    /* @__PURE__ */ e(gt, {}),
     /* @__PURE__ */ m("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ e(_e, {}),
+      /* @__PURE__ */ e(Ye, {}),
       /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ m("div", { className: "flex", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => n("editor"),
+            onClick: () => s("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"
           }
@@ -2990,7 +3002,7 @@ function yt() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => n("gallery"),
+            onClick: () => s("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: "Gallery"
           }
@@ -2998,40 +3010,40 @@ function yt() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => n("templates"),
+            onClick: () => s("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"
           }
         )
       ] }) }),
       /* @__PURE__ */ m("div", { className: "flex-1 flex overflow-hidden", children: [
-        r === "editor" && /* @__PURE__ */ m(j, { children: [
-          /* @__PURE__ */ e(Be, {}),
-          /* @__PURE__ */ e("div", { className: "flex-1", onDrop: i, onDragOver: l, children: /* @__PURE__ */ e(Ee, {}) }),
-          /* @__PURE__ */ e(Re, {})
+        r === "editor" && /* @__PURE__ */ m(P, { children: [
+          /* @__PURE__ */ e(Ve, {}),
+          /* @__PURE__ */ e("div", { className: "flex-1", onDrop: i, onDragOver: l, children: /* @__PURE__ */ e(Ge, {}) }),
+          /* @__PURE__ */ e(Ke, {})
         ] }),
-        r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(He, {}) }),
-        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(st, { onSelect: s }) })
+        r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(Xe, {}) }),
+        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(ct, { onSelect: n }) })
       ] })
     ] })
   ] });
 }
 export {
-  pt as AISettings,
-  yt as App,
-  He as Gallery,
-  Re as NodeInspector,
-  Be as NodePalette,
-  st as TemplateGallery,
-  _e as Toolbar,
-  Oe as UploadGallery,
-  Ee as WorkflowEditor,
-  lt as WorkflowLibrary,
-  nt as getCategories,
-  te as getTemplateById,
-  wt as getTemplatesByCategory,
-  vt as searchTemplates,
+  xt as AISettings,
+  St as App,
+  Xe as Gallery,
+  Ke as NodeInspector,
+  Ve as NodePalette,
+  ct as TemplateGallery,
+  Ye as Toolbar,
+  Fe as UploadGallery,
+  Ge as WorkflowEditor,
+  gt as WorkflowLibrary,
+  lt as getCategories,
+  ae as getTemplateById,
+  zt as getTemplatesByCategory,
+  Ct as searchTemplates,
   E as templates,
-  b as useWorkflowStore
+  f as useWorkflowStore
 };
 //# sourceMappingURL=index.js.map