@teamflojo/floimg-studio-ui 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,9 +1,9 @@
-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) {
+import { jsxs as c, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { memo as P, useRef as xe, useCallback as C, useState as N, useEffect as M, useMemo as ee } from "react";
+import ke, { Handle as W, Position as A, applyNodeChanges as we, applyEdgeChanges as ve, MarkerType as ye, Background as Ne, Controls as ze, MiniMap as Ce, ReactFlowProvider as Se } from "reactflow";
+import { create as se } from "zustand";
+import { useQuery as K } from "@tanstack/react-query";
+function Ie(r, i) {
   let t;
   try {
     t = r();
@@ -11,238 +11,250 @@ function ye(r, s) {
     return;
   }
   return {
-    getItem: (n) => {
-      var i;
-      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);
+    getItem: (s) => {
+      var d;
+      const m = (n) => n === null ? null : JSON.parse(n, void 0), o = (d = t.getItem(s)) != null ? d : null;
+      return o instanceof Promise ? o.then(m) : m(o);
     },
-    setItem: (n, i) => t.setItem(n, JSON.stringify(i, void 0)),
-    removeItem: (n) => t.removeItem(n)
+    setItem: (s, d) => t.setItem(s, JSON.stringify(d, void 0)),
+    removeItem: (s) => t.removeItem(s)
   };
 }
-const _ = (r) => (s) => {
+const _ = (r) => (i) => {
   try {
-    const t = r(s);
+    const t = r(i);
     return t instanceof Promise ? t : {
-      then(o) {
-        return _(o)(t);
+      then(a) {
+        return _(a)(t);
       },
-      catch(o) {
+      catch(a) {
         return this;
       }
     };
   } catch (t) {
     return {
-      then(o) {
+      then(a) {
         return this;
       },
-      catch(o) {
-        return _(o)(t);
+      catch(a) {
+        return _(a)(t);
       }
     };
   }
-}, Ne = (r, s) => (t, o, n) => {
-  let i = {
-    storage: ye(() => localStorage),
+}, Le = (r, i) => (t, a, s) => {
+  let d = {
+    storage: Ie(() => localStorage),
     partialize: (g) => g,
     version: 0,
-    merge: (g, w) => ({
-      ...w,
+    merge: (g, v) => ({
+      ...v,
       ...g
     }),
-    ...s
-  }, l = !1;
-  const a = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set();
-  let u = i.storage;
+    ...i
+  }, m = !1;
+  const o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+  let u = d.storage;
   if (!u)
     return r(
       (...g) => {
         console.warn(
-          `[zustand persist middleware] Unable to update item '${i.name}', the given storage is currently unavailable.`
+          `[zustand persist middleware] Unable to update item '${d.name}', the given storage is currently unavailable.`
         ), t(...g);
       },
-      o,
-      n
+      a,
+      s
     );
-  const d = () => {
-    const g = i.partialize({ ...o() });
-    return u.setItem(i.name, {
+  const l = () => {
+    const g = d.partialize({ ...a() });
+    return u.setItem(d.name, {
       state: g,
-      version: i.version
+      version: d.version
     });
-  }, p = n.setState;
-  n.setState = (g, w) => (p(g, w), d());
-  const h = r(
-    (...g) => (t(...g), d()),
-    o,
-    n
+  }, p = s.setState;
+  s.setState = (g, v) => (p(g, v), l());
+  const f = r(
+    (...g) => (t(...g), l()),
+    a,
+    s
   );
-  n.getInitialState = () => h;
+  s.getInitialState = () => f;
   let b;
-  const x = () => {
-    var g, w;
+  const k = () => {
+    var g, v;
     if (!u) return;
-    l = !1, a.forEach((y) => {
+    m = !1, o.forEach((h) => {
       var z;
-      return y((z = o()) != null ? z : h);
+      return h((z = a()) != null ? z : f);
     });
-    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) {
-            const z = i.migrate(
-              y.state,
-              y.version
+    const w = ((v = d.onRehydrateStorage) == null ? void 0 : v.call(d, (g = a()) != null ? g : f)) || void 0;
+    return _(u.getItem.bind(u))(d.name).then((h) => {
+      if (h)
+        if (typeof h.version == "number" && h.version !== d.version) {
+          if (d.migrate) {
+            const z = d.migrate(
+              h.state,
+              h.version
             );
-            return z instanceof Promise ? z.then((W) => [!0, W]) : [!0, z];
+            return z instanceof Promise ? z.then((S) => [!0, S]) : [!0, z];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
           );
         } else
-          return [!1, y.state];
+          return [!1, h.state];
       return [!1, void 0];
-    }).then((y) => {
+    }).then((h) => {
       var z;
-      const [W, O] = y;
-      if (b = i.merge(
-        O,
-        (z = o()) != null ? z : h
-      ), t(b, !0), W)
-        return d();
+      const [S, B] = h;
+      if (b = d.merge(
+        B,
+        (z = a()) != null ? z : f
+      ), t(b, !0), S)
+        return l();
     }).then(() => {
-      k == null || k(b, void 0), b = o(), l = !0, c.forEach((y) => y(b));
-    }).catch((y) => {
-      k == null || k(void 0, y);
+      w == null || w(b, void 0), b = a(), m = !0, n.forEach((h) => h(b));
+    }).catch((h) => {
+      w == null || w(void 0, h);
     });
   };
-  return n.persist = {
+  return s.persist = {
     setOptions: (g) => {
-      i = {
-        ...i,
+      d = {
+        ...d,
         ...g
       }, g.storage && (u = g.storage);
     },
     clearStorage: () => {
-      u == null || u.removeItem(i.name);
+      u == null || u.removeItem(d.name);
     },
-    getOptions: () => i,
-    rehydrate: () => x(),
-    hasHydrated: () => l,
-    onHydrate: (g) => (a.add(g), () => {
-      a.delete(g);
+    getOptions: () => d,
+    rehydrate: () => k(),
+    hasHydrated: () => m,
+    onHydrate: (g) => (o.add(g), () => {
+      o.delete(g);
     }),
-    onFinishHydration: (g) => (c.add(g), () => {
-      c.delete(g);
+    onFinishHydration: (g) => (n.add(g), () => {
+      n.delete(g);
     })
-  }, i.skipHydration || x(), b || h;
-}, ne = Ne, S = "/api";
-async function D(r, s) {
+  }, d.skipHydration || k(), b || f;
+}, ie = Le, I = "/api";
+async function D(r, i) {
   const t = await fetch(r, {
-    ...s,
+    ...i,
     headers: {
       "Content-Type": "application/json",
-      ...s == null ? void 0 : s.headers
+      ...i == null ? void 0 : i.headers
     }
   });
   if (!t.ok) {
-    const o = await t.json().catch(() => ({ error: "Unknown error" }));
-    throw new Error(o.error || `HTTP ${t.status}`);
+    const a = await t.json().catch(() => ({ error: "Unknown error" }));
+    throw new Error(a.error || `HTTP ${t.status}`);
   }
   return t.json();
 }
-async function ze() {
-  return D(`${S}/nodes/generators`);
+async function We() {
+  return D(`${I}/nodes/generators`);
 }
-async function Ce() {
-  return D(`${S}/nodes/transforms`);
+async function Ae() {
+  return D(`${I}/nodes/transforms`);
 }
-async function Se(r, s, t) {
-  return D(`${S}/execute/sync`, {
+async function De(r, i, t) {
+  return D(`${I}/execute/sync`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: s, aiProviders: t })
+    body: JSON.stringify({ nodes: r, edges: i, aiProviders: t })
   });
 }
-async function Ie(r, s) {
-  return D(`${S}/export/yaml`, {
+async function $e(r, i) {
+  return D(`${I}/export/yaml`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: s })
+    body: JSON.stringify({ nodes: r, edges: i })
   });
 }
-async function Le() {
-  return D(`${S}/images`);
+async function Me() {
+  return D(`${I}/images`);
 }
-function G(r) {
-  return `${S}/images/${r}/blob`;
+function te(r) {
+  return `${I}/images/${r}/blob`;
 }
-async function We(r) {
+async function Ue(r) {
   try {
-    return await D(`${S}/images/${r}/workflow`);
+    return await D(`${I}/images/${r}/workflow`);
   } catch {
     return null;
   }
 }
-async function Ae(r) {
-  const s = new FormData();
-  s.append("file", r);
-  const t = await fetch(`${S}/uploads`, {
+async function je(r) {
+  const i = new FormData();
+  i.append("file", r);
+  const t = await fetch(`${I}/uploads`, {
     method: "POST",
-    body: s
+    body: i
   });
   if (!t.ok) {
-    const o = await t.json().catch(() => ({ error: "Upload failed" }));
-    throw new Error(o.error || `HTTP ${t.status}`);
+    const a = await t.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(a.error || `HTTP ${t.status}`);
   }
   return t.json();
 }
-async function $e() {
-  return D(`${S}/uploads`);
+async function Pe() {
+  return D(`${I}/uploads`);
 }
-async function De(r) {
-  const s = await fetch(`${S}/uploads/${r}`, {
+async function Te(r) {
+  const i = await fetch(`${I}/uploads/${r}`, {
     method: "DELETE"
   });
-  if (!s.ok)
-    throw new Error(`Failed to delete upload: ${s.status}`);
+  if (!i.ok)
+    throw new Error(`Failed to delete upload: ${i.status}`);
 }
-function se(r) {
-  return `${S}/uploads/${r}/blob`;
+function de(r) {
+  return `${I}/uploads/${r}/blob`;
 }
-const Z = "http://localhost:11434", ee = "http://localhost:1234", A = oe()(
-  ne(
-    (r, s) => ({
+async function Ee(r) {
+  return D(`${I}/import`, {
+    method: "POST",
+    body: JSON.stringify({ yaml: r })
+  });
+}
+async function Oe(r) {
+  return D(`${I}/import/validate`, {
+    method: "POST",
+    body: JSON.stringify({ yaml: r })
+  });
+}
+const re = "http://localhost:11434", ae = "http://localhost:1234", $ = se()(
+  ie(
+    (r, i) => ({
       ai: {
         ollama: {
-          baseUrl: Z,
+          baseUrl: re,
           enabled: !1
         },
         lmstudio: {
-          baseUrl: ee,
+          baseUrl: ae,
           enabled: !1
         }
       },
       showSettings: !1,
-      setAIProvider: (t, o) => {
-        r((n) => ({
+      setAIProvider: (t, a) => {
+        r((s) => ({
           ai: {
-            ...n.ai,
-            [t]: o
+            ...s.ai,
+            [t]: a
           }
         }));
       },
       clearAIProvider: (t) => {
-        r((o) => {
-          const n = { ...o.ai };
-          return delete n[t], { ai: n };
+        r((a) => {
+          const s = { ...a.ai };
+          return delete s[t], { ai: s };
         });
       },
       openSettings: () => r({ showSettings: !0 }),
       closeSettings: () => r({ showSettings: !1 }),
       getConfiguredProviders: () => {
-        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;
+        var s, d, m, o, n, u;
+        const { ai: t } = i(), a = {};
+        return (s = t.openai) != null && s.enabled && t.openai.apiKey && (a.openai = { apiKey: t.openai.apiKey }), (d = t.anthropic) != null && d.enabled && t.anthropic.apiKey && (a.anthropic = { apiKey: t.anthropic.apiKey }), (m = t.gemini) != null && m.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 }), (n = t.ollama) != null && n.enabled && (a.ollama = { baseUrl: t.ollama.baseUrl || re }), (u = t.lmstudio) != null && u.enabled && (a.lmstudio = { baseUrl: t.lmstudio.baseUrl || ae }), a;
       }
     }),
     {
@@ -252,17 +264,17 @@ const Z = "http://localhost:11434", ee = "http://localhost:1234", A = oe()(
     }
   )
 );
-let je = 0;
-function te() {
-  return `node_${++je}`;
+let Be = 0;
+function q() {
+  return `node_${++Be}`;
 }
-function re() {
-  const r = Date.now(), s = Math.random().toString(36).substring(2, 8);
-  return `wf_${r}_${s}`;
+function oe() {
+  const r = Date.now(), i = Math.random().toString(36).substring(2, 8);
+  return `wf_${r}_${i}`;
 }
-const f = oe()(
-  ne(
-    (r, s) => ({
+const x = se()(
+  ie(
+    (r, i) => ({
       nodes: [],
       edges: [],
       selectedNodeId: null,
@@ -279,36 +291,38 @@ const f = oe()(
       execution: {
         status: "idle",
         imageIds: [],
+        imageUrls: [],
         previews: {},
         dataOutputs: {},
         nodeStatus: {}
       },
       loadTemplate: (t) => {
-        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
+        const a = /* @__PURE__ */ new Map(), s = t.workflow.nodes.map((m) => {
+          const o = q();
+          return a.set(m.id, o), {
+            id: o,
+            type: m.type,
+            position: m.position,
+            data: m.data
           };
-        }), i = t.workflow.edges.map((l) => {
-          const a = o.get(l.source) || l.source, c = o.get(l.target) || l.target;
+        }), d = t.workflow.edges.map((m) => {
+          const o = a.get(m.source) || m.source, n = a.get(m.target) || m.target;
           return {
-            id: `edge_${a}_${c}`,
-            source: a,
-            target: c
+            id: `edge_${o}_${n}`,
+            source: o,
+            target: n
           };
         });
         r({
-          nodes: n,
-          edges: i,
+          nodes: s,
+          edges: d,
           selectedNodeId: null,
           currentTemplateId: t.id,
           previewVisible: {},
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -325,6 +339,7 @@ const f = oe()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -332,154 +347,208 @@ const f = oe()(
         });
       },
       togglePreview: (t) => {
-        r((o) => ({
+        r((a) => ({
           previewVisible: {
-            ...o.previewVisible,
-            [t]: o.previewVisible[t] === !1
+            ...a.previewVisible,
+            [t]: a.previewVisible[t] === !1
             // default true, toggle
           }
         }));
       },
       setGenerators: (t) => r({ generators: t }),
       setTransforms: (t) => r({ transforms: t }),
-      addNode: (t, o) => {
-        const n = te();
-        let i;
-        t.type === "generator" ? i = {
-          generatorName: t.name,
-          params: R(t)
-        } : t.type === "transform" ? i = {
-          operation: t.name,
-          params: R(t)
-        } : t.type === "input" ? i = {
-          uploadId: void 0,
-          filename: void 0,
-          mime: void 0
-        } : t.type === "vision" ? i = {
-          providerName: t.name,
-          params: R(t)
-        } : t.type === "text" ? i = {
-          providerName: t.name,
-          params: R(t)
-        } : i = {
-          destination: "./output/image.png",
-          provider: "filesystem"
-        };
-        const l = {
-          id: n,
+      addNode: (t, a) => {
+        var o, n, u;
+        const s = q();
+        let d;
+        if (t.type === "generator")
+          d = {
+            generatorName: t.name,
+            params: R(t)
+          };
+        else if (t.type === "transform")
+          d = {
+            operation: t.name,
+            params: R(t)
+          };
+        else if (t.type === "input")
+          d = {
+            uploadId: void 0,
+            filename: void 0,
+            mime: void 0
+          };
+        else if (t.type === "vision")
+          d = {
+            providerName: t.name,
+            params: R(t)
+          };
+        else if (t.type === "text")
+          d = {
+            providerName: t.name,
+            params: R(t)
+          };
+        else {
+          const l = ((o = t.params) == null ? void 0 : o.properties) || {}, p = ((n = l.provider) == null ? void 0 : n.default) || "filesystem";
+          d = {
+            destination: ((u = l.destination) == null ? void 0 : u.default) || "./output/image.png",
+            provider: p
+          };
+        }
+        const m = {
+          id: s,
           type: t.type,
-          position: o,
-          data: i
+          position: a,
+          data: d
         };
-        r((a) => ({
-          nodes: [...a.nodes, l]
+        r((l) => ({
+          nodes: [...l.nodes, m]
         }));
       },
-      updateNodeData: (t, o) => {
-        r((n) => ({
-          nodes: n.nodes.map(
-            (i) => i.id === t ? { ...i, data: { ...i.data, ...o } } : i
+      updateNodeData: (t, a) => {
+        r((s) => ({
+          nodes: s.nodes.map(
+            (d) => d.id === t ? { ...d, data: { ...d.data, ...a } } : d
           )
         }));
       },
       deleteNode: (t) => {
-        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
+        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
         }));
       },
       setNodes: (t) => r({ nodes: t }),
       addEdge: (t) => {
         if (!t.source || !t.target) return;
-        const n = {
+        const s = {
           id: `edge_${t.source}_${t.target}`,
           source: t.source,
           target: t.target
         };
-        r((i) => ({
-          edges: [...i.edges, n]
+        r((d) => ({
+          edges: [...d.edges, s]
         }));
       },
       deleteEdge: (t) => {
-        r((o) => ({
-          edges: o.edges.filter((n) => n.id !== t)
+        r((a) => ({
+          edges: a.edges.filter((s) => s.id !== t)
         }));
       },
       setEdges: (t) => r({ edges: t }),
       setSelectedNode: (t) => r({ selectedNodeId: t }),
       execute: async () => {
-        const { nodes: t, edges: o } = s(), n = t.map((c) => ({
-          id: c.id,
-          type: c.type,
-          position: c.position,
-          data: c.data
-        })), i = o.map((c) => ({
-          id: c.id,
-          source: c.source,
-          target: c.target
-        })), l = A.getState().getConfiguredProviders(), a = {};
-        for (const c of t)
-          a[c.id] = "running";
+        const { nodes: t, edges: a } = i(), s = t.map((n) => ({
+          id: n.id,
+          type: n.type,
+          position: n.position,
+          data: n.data
+        })), d = a.map((n) => ({
+          id: n.id,
+          source: n.source,
+          target: n.target
+        })), m = $.getState().getConfiguredProviders(), o = {};
+        for (const n of t)
+          o[n.id] = "running";
         r({
           execution: {
             status: "running",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
-            nodeStatus: a
+            nodeStatus: o
           }
         });
         try {
-          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({
+          const n = await De(s, d, m), u = {};
+          for (const l of t)
+            u[l.id] = n.status === "completed" ? "completed" : "error";
+          n.status === "completed" ? r({
             execution: {
               status: "completed",
-              imageIds: c.imageIds,
-              previews: c.previews || {},
-              dataOutputs: c.dataOutputs || {},
+              imageIds: n.imageIds,
+              imageUrls: n.imageUrls || [],
+              previews: n.previews || {},
+              dataOutputs: n.dataOutputs || {},
               nodeStatus: u
             }
           }) : r({
             execution: {
               status: "error",
               imageIds: [],
+              imageUrls: [],
               previews: {},
               dataOutputs: {},
               nodeStatus: u,
-              error: c.error
+              error: n.error
             }
           });
-        } catch (c) {
+        } catch (n) {
           const u = {};
-          for (const d of t)
-            u[d.id] = "error";
+          for (const l of t)
+            u[l.id] = "error";
           r({
             execution: {
               status: "error",
               imageIds: [],
+              imageUrls: [],
               previews: {},
               dataOutputs: {},
               nodeStatus: u,
-              error: c instanceof Error ? c.message : "Unknown error"
+              error: n instanceof Error ? n.message : "Unknown error"
             }
           });
         }
       },
       exportToYaml: async () => {
-        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
+        const { nodes: t, edges: a } = i(), s = t.map((o) => ({
+          id: o.id,
+          type: o.type,
+          position: o.position,
+          data: o.data
+        })), d = a.map((o) => ({
+          id: o.id,
+          source: o.source,
+          target: o.target
         }));
-        return (await Ie(n, i)).yaml;
+        return (await $e(s, d)).yaml;
+      },
+      importFromYaml: (t, a, s) => {
+        const d = /* @__PURE__ */ new Map(), m = t.map((n) => {
+          const u = q();
+          return d.set(n.id, u), {
+            id: u,
+            type: n.type,
+            position: n.position,
+            data: n.data
+          };
+        }), o = a.map((n) => {
+          const u = d.get(n.source) || n.source, l = d.get(n.target) || n.target;
+          return {
+            id: `edge_${u}_${l}`,
+            source: u,
+            target: l
+          };
+        });
+        r({
+          nodes: m,
+          edges: o,
+          selectedNodeId: null,
+          currentTemplateId: null,
+          previewVisible: {},
+          activeWorkflowId: null,
+          activeWorkflowName: s || "Imported Workflow",
+          hasUnsavedChanges: !0,
+          execution: {
+            status: "idle",
+            imageIds: [],
+            imageUrls: [],
+            previews: {},
+            dataOutputs: {},
+            nodeStatus: {}
+          }
+        });
       },
       // Workflow persistence methods
       markDirty: () => r({ hasUnsavedChanges: !0 }),
@@ -498,6 +567,7 @@ const f = oe()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -506,54 +576,55 @@ const f = oe()(
       },
       saveWorkflow: (t) => {
         const {
-          nodes: o,
-          edges: n,
-          activeWorkflowId: i,
-          activeWorkflowName: l,
-          savedWorkflows: a,
-          currentTemplateId: c
-        } = s(), u = Date.now();
-        if (i) {
-          const d = a.map(
-            (p) => p.id === i ? { ...p, name: t || l, nodes: o, edges: n, updatedAt: u } : p
+          nodes: a,
+          edges: s,
+          activeWorkflowId: d,
+          activeWorkflowName: m,
+          savedWorkflows: o,
+          currentTemplateId: n
+        } = i(), u = Date.now();
+        if (d) {
+          const l = o.map(
+            (p) => p.id === d ? { ...p, name: t || m, nodes: a, edges: s, updatedAt: u } : p
           );
           return r({
-            savedWorkflows: d,
-            activeWorkflowName: t || l,
+            savedWorkflows: l,
+            activeWorkflowName: t || m,
             hasUnsavedChanges: !1
-          }), i;
+          }), d;
         } else {
-          const d = re(), p = {
-            id: d,
-            name: t || l,
-            nodes: o,
-            edges: n,
+          const l = oe(), p = {
+            id: l,
+            name: t || m,
+            nodes: a,
+            edges: s,
             createdAt: u,
             updatedAt: u,
-            templateId: c || void 0
+            templateId: n || void 0
           };
           return r({
-            savedWorkflows: [...a, p],
-            activeWorkflowId: d,
-            activeWorkflowName: t || l,
+            savedWorkflows: [...o, p],
+            activeWorkflowId: l,
+            activeWorkflowName: t || m,
             hasUnsavedChanges: !1
-          }), d;
+          }), l;
         }
       },
       loadWorkflow: (t) => {
-        const { savedWorkflows: o } = s(), n = o.find((i) => i.id === t);
-        n && r({
-          nodes: n.nodes,
-          edges: n.edges,
+        const { savedWorkflows: a } = i(), s = a.find((d) => d.id === t);
+        s && r({
+          nodes: s.nodes,
+          edges: s.edges,
           selectedNodeId: null,
-          currentTemplateId: n.templateId || null,
+          currentTemplateId: s.templateId || null,
           previewVisible: {},
           activeWorkflowId: t,
-          activeWorkflowName: n.name,
+          activeWorkflowName: s.name,
           hasUnsavedChanges: !1,
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -561,9 +632,9 @@ const f = oe()(
         });
       },
       deleteWorkflow: (t) => {
-        const { savedWorkflows: o, activeWorkflowId: n } = s(), i = o.filter((l) => l.id !== t);
-        r(n === t ? {
-          savedWorkflows: i,
+        const { savedWorkflows: a, activeWorkflowId: s } = i(), d = a.filter((m) => m.id !== t);
+        r(s === t ? {
+          savedWorkflows: d,
           nodes: [],
           edges: [],
           selectedNodeId: null,
@@ -575,32 +646,33 @@ const f = oe()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
           }
-        } : { savedWorkflows: i });
+        } : { savedWorkflows: d });
       },
-      renameWorkflow: (t, o) => {
-        const { savedWorkflows: n, activeWorkflowId: i } = s(), l = n.map(
-          (a) => a.id === t ? { ...a, name: o, updatedAt: Date.now() } : a
+      renameWorkflow: (t, a) => {
+        const { savedWorkflows: s, activeWorkflowId: d } = i(), m = s.map(
+          (o) => o.id === t ? { ...o, name: a, updatedAt: Date.now() } : o
         );
         r({
-          savedWorkflows: l,
-          ...i === t ? { activeWorkflowName: o } : {}
+          savedWorkflows: m,
+          ...d === t ? { activeWorkflowName: a } : {}
         });
       },
       duplicateWorkflow: (t) => {
-        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: `${n.name} (Copy)`,
-          createdAt: i,
-          updatedAt: i
+        const { savedWorkflows: a } = i(), s = a.find((n) => n.id === t);
+        if (!s) return "";
+        const d = Date.now(), m = oe(), o = {
+          ...s,
+          id: m,
+          name: `${s.name} (Copy)`,
+          createdAt: d,
+          updatedAt: d
         };
-        return r({ savedWorkflows: [...o, a] }), l;
+        return r({ savedWorkflows: [...a, o] }), m;
       }
     }),
     {
@@ -614,26 +686,26 @@ const f = oe()(
 );
 function R(r) {
   var t;
-  const s = {};
+  const i = {};
   if ((t = r.params) != null && t.properties)
-    for (const [o, n] of Object.entries(r.params.properties))
-      n.default !== void 0 && (s[o] = n.default);
-  return s;
+    for (const [a, s] of Object.entries(r.params.properties))
+      s.default !== void 0 && (i[a] = s.default);
+  return i;
 }
-function M(r) {
+function T(r) {
   return r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
-function H({ nodeId: r, color: s }) {
-  const t = f((n) => n.previewVisible[r] !== !1), o = f((n) => n.togglePreview);
+function H({ nodeId: r, color: i }) {
+  const t = x((s) => s.previewVisible[r] !== !1), a = x((s) => s.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
-      onClick: (n) => {
-        n.stopPropagation(), o(r);
+      onClick: (s) => {
+        s.stopPropagation(), a(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 ${s}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e("svg", { className: `w-3.5 h-3.5 ${i}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
         "path",
         {
           strokeLinecap: "round",
@@ -653,72 +725,72 @@ function H({ nodeId: r, color: s }) {
     }
   );
 }
-const Pe = T(function({
-  id: s,
+const Re = P(function({
+  id: i,
   data: t,
-  selected: o
+  selected: a
 }) {
-  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(
+  const s = x((u) => u.execution.previews[i]), d = x((u) => u.execution.nodeStatus[i]), m = x((u) => u.previewVisible[i] !== !1), n = T(d) || (a ? "border-blue-500" : "border-blue-200");
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${n}`,
       children: [
-        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: [
+        s && m && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: s, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ c("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(H, { nodeId: s, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(H, { nodeId: i, 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).filter(([, u]) => typeof u != "object" || u === null).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, l]) => /* @__PURE__ */ c("div", { className: "truncate", children: [
             u,
             ": ",
-            String(d).slice(0, 20)
+            String(l).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-blue-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-blue-500" })
       ]
     }
   );
-}), Te = T(function({
-  id: s,
+}), Fe = P(function({
+  id: i,
   data: t,
-  selected: o
+  selected: a
 }) {
-  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(
+  const s = x((u) => u.execution.previews[i]), d = x((u) => u.execution.nodeStatus[i]), m = x((u) => u.previewVisible[i] !== !1), n = T(d) || (a ? "border-teal-500" : "border-teal-200");
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${n}`,
       children: [
-        /* @__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(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-teal-500" }),
+        s && m && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: s, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ c("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(H, { nodeId: s, color: "text-teal-500 dark:text-teal-400" })
+            /* @__PURE__ */ e(H, { nodeId: i, 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).filter(([, u]) => typeof u != "object" || u === null).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, l]) => /* @__PURE__ */ c("div", { className: "truncate", children: [
             u,
             ": ",
-            String(d).slice(0, 20)
+            String(l).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-teal-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-teal-500" })
       ]
     }
   );
-}), 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(
+}), Ve = P(function({ id: i, data: t, selected: a }) {
+  const s = x((o) => o.execution.nodeStatus[i]), m = T(s) || (a ? "border-green-500" : "border-green-200");
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${l}`,
+      className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${m}`,
       children: [
-        /* @__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(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-green-500" }),
+        /* @__PURE__ */ c("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,54 +798,54 @@ const Pe = T(function({
       ]
     }
   );
-}), 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) => {
+}), Ge = P(function({ id: i, data: t, selected: a }) {
+  const s = x((v) => v.execution.previews[i]), d = x((v) => v.execution.nodeStatus[i]), m = x((v) => v.previewVisible[i] !== !1), o = x((v) => v.updateNodeData), n = xe(null), l = T(d) || (a ? "border-amber-500" : "border-amber-200"), p = C(
+    async (v) => {
       try {
-        const k = await Ae(w);
-        a(s, {
-          uploadId: k.id,
-          filename: k.filename,
-          mime: k.mime
+        const w = await je(v);
+        o(i, {
+          uploadId: w.id,
+          filename: w.filename,
+          mime: w.mime
         });
-      } catch (k) {
-        console.error("Upload failed:", k);
+      } catch (w) {
+        console.error("Upload failed:", w);
       }
     },
-    [s, a]
-  ), h = C(
-    (w) => {
-      w.preventDefault(), w.stopPropagation();
-      const k = w.dataTransfer.files[0];
-      k && k.type.startsWith("image/") && p(k);
+    [i, o]
+  ), f = C(
+    (v) => {
+      v.preventDefault(), v.stopPropagation();
+      const w = v.dataTransfer.files[0];
+      w && w.type.startsWith("image/") && p(w);
     },
     [p]
-  ), b = C((w) => {
-    w.preventDefault(), w.stopPropagation();
-  }, []), x = C(
-    (w) => {
-      var y;
-      const k = (y = w.target.files) == null ? void 0 : y[0];
-      k && p(k);
+  ), b = C((v) => {
+    v.preventDefault(), v.stopPropagation();
+  }, []), k = C(
+    (v) => {
+      var h;
+      const w = (h = v.target.files) == null ? void 0 : h[0];
+      w && p(w);
     },
     [p]
-  ), g = n || (t.uploadId ? se(t.uploadId) : null);
-  return /* @__PURE__ */ m(
+  ), g = s || (t.uploadId ? de(t.uploadId) : null);
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
-      onDrop: h,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${l}`,
+      onDrop: 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(
+        g && m ? /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: 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 w;
-              return (w = c.current) == null ? void 0 : w.click();
+              var v;
+              return (v = n.current) == null ? void 0 : v.click();
             },
-            children: /* @__PURE__ */ m("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
+            children: /* @__PURE__ */ c("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
               /* @__PURE__ */ e("div", { className: "text-2xl mb-1", children: "+" }),
               /* @__PURE__ */ e("div", { className: "text-xs", children: "Drop image or click" })
             ] })
@@ -782,48 +854,48 @@ const Pe = T(function({
         /* @__PURE__ */ e(
           "input",
           {
-            ref: c,
+            ref: n,
             type: "file",
             accept: "image/*",
             className: "hidden",
-            onChange: x
+            onChange: k
           }
         ),
-        /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ m("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ c("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(H, { nodeId: s, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(H, { nodeId: i, 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(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-amber-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-amber-500" })
       ]
     }
   );
-}), Ee = T(function({
-  id: s,
+}), qe = P(function({
+  id: i,
   data: t,
-  selected: o
+  selected: a
 }) {
-  var c, u;
-  const n = f((d) => d.execution.nodeStatus[s]), i = f((d) => {
+  var n, u;
+  const s = x((l) => l.execution.nodeStatus[i]), d = x((l) => {
     var p;
-    return (p = d.execution.dataOutputs) == null ? void 0 : p[s];
-  }), a = M(n) || (o ? "border-cyan-500" : "border-cyan-200");
-  return /* @__PURE__ */ m(
+    return (p = l.execution.dataOutputs) == null ? void 0 : p[i];
+  }), o = T(s) || (a ? "border-cyan-500" : "border-cyan-200");
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
       children: [
-        /* @__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 && "..."
+        /* @__PURE__ */ e(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-cyan-500" }),
+        d && /* @__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__ */ c("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
+          (n = d.content) == null ? void 0 : n.slice(0, 200),
+          (((u = d.content) == null ? void 0 : u.length) || 0) > 200 && "..."
         ] }) }),
-        /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ m("div", { className: "flex items-center gap-2 mb-2", children: [
-            /* @__PURE__ */ m("svg", { className: "w-3 h-3 text-cyan-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
+        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ c("svg", { className: "w-3 h-3 text-cyan-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
               /* @__PURE__ */ e("path", { d: "M10 12a2 2 0 100-4 2 2 0 000 4z" }),
               /* @__PURE__ */ e(
                 "path",
@@ -836,33 +908,33 @@ const Pe = T(function({
             ] }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-cyan-700 dark:text-cyan-400", children: t.providerName })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ m("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ c("div", { className: "truncate", children: [
             String(t.params.prompt).slice(0, 30),
             "..."
           ] }) : null })
         ] }),
-        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-cyan-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-cyan-500" })
       ]
     }
   );
-}), Oe = T(function({ id: s, data: t, selected: o }) {
-  var c, u;
-  const n = f((d) => d.execution.nodeStatus[s]), i = f((d) => {
+}), Ke = P(function({ id: i, data: t, selected: a }) {
+  var n, u;
+  const s = x((l) => l.execution.nodeStatus[i]), d = x((l) => {
     var p;
-    return (p = d.execution.dataOutputs) == null ? void 0 : p[s];
-  }), a = M(n) || (o ? "border-pink-500" : "border-pink-200");
-  return /* @__PURE__ */ m(
+    return (p = l.execution.dataOutputs) == null ? void 0 : p[i];
+  }), o = T(s) || (a ? "border-pink-500" : "border-pink-200");
+  return /* @__PURE__ */ c(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
       children: [
-        /* @__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 && "..."
+        /* @__PURE__ */ e(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-pink-500" }),
+        d && /* @__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__ */ c("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
+          (n = d.content) == null ? void 0 : n.slice(0, 200),
+          (((u = d.content) == null ? void 0 : u.length) || 0) > 200 && "..."
         ] }) }),
-        /* @__PURE__ */ m("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ m("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("svg", { className: "w-3 h-3 text-pink-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
               "path",
               {
@@ -873,27 +945,27 @@ const Pe = T(function({
             ) }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-pink-700 dark:text-pink-400", children: t.providerName })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ m("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ c("div", { className: "truncate", children: [
             String(t.params.prompt).slice(0, 30),
             "..."
           ] }) : null })
         ] }),
-        /* @__PURE__ */ e(I, { type: "source", position: L.Right, className: "w-3 h-3 !bg-pink-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-pink-500" })
       ]
     }
   );
-}), Be = {
-  generator: Pe,
-  transform: Te,
-  save: Me,
-  input: Ue,
-  vision: Ee,
-  text: Oe
-}, Re = {
+}), _e = {
+  generator: Re,
+  transform: Fe,
+  save: Ve,
+  input: Ge,
+  vision: qe,
+  text: Ke
+}, He = {
   type: "smoothstep",
   animated: !1,
   markerEnd: {
-    type: be.ArrowClosed,
+    type: ye.ArrowClosed,
     color: "#64748b",
     width: 20,
     height: 20
@@ -903,51 +975,51 @@ const Pe = T(function({
     strokeWidth: 2
   }
 };
-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: 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);
+function Qe() {
+  const r = x((f) => f.nodes), i = x((f) => f.edges), t = x((f) => f.setNodes), a = x((f) => f.setEdges), s = x((f) => f.addEdge), d = x((f) => f.setSelectedNode), m = C(
+    (f) => {
+      const { source: b, target: k } = f;
+      if (!b || !k) return !1;
+      const g = r.find((h) => h.id === b), v = r.find((h) => h.id === k);
+      return !(!g || !v || g.type === "save" || v.type === "generator" || v.type === "input" || i.find((h) => h.target === k) || b === k);
     },
-    [r, s]
-  ), a = C(
-    (h) => {
-      t(he(h, r));
+    [r, i]
+  ), o = C(
+    (f) => {
+      t(we(f, r));
     },
     [r, t]
-  ), c = C(
-    (h) => {
-      o(fe(h, s));
+  ), n = C(
+    (f) => {
+      a(ve(f, i));
     },
-    [s, o]
+    [i, a]
   ), u = C(
-    (h) => {
-      n(h);
+    (f) => {
+      s(f);
     },
-    [n]
-  ), d = C(
-    (h, b) => {
-      i(b.id);
+    [s]
+  ), l = C(
+    (f, b) => {
+      d(b.id);
     },
-    [i]
+    [d]
   ), p = C(() => {
-    i(null);
-  }, [i]);
-  return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ m(
-    pe,
+    d(null);
+  }, [d]);
+  return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ c(
+    ke,
     {
       nodes: r,
-      edges: s,
-      onNodesChange: a,
-      onEdgesChange: c,
+      edges: i,
+      onNodesChange: o,
+      onEdgesChange: n,
       onConnect: u,
-      onNodeClick: d,
+      onNodeClick: l,
       onPaneClick: p,
-      nodeTypes: Be,
-      defaultEdgeOptions: Re,
-      isValidConnection: l,
+      nodeTypes: _e,
+      defaultEdgeOptions: He,
+      isValidConnection: m,
       nodesDraggable: !0,
       nodesConnectable: !0,
       elementsSelectable: !0,
@@ -956,92 +1028,92 @@ function Ge() {
       snapToGrid: !0,
       snapGrid: [15, 15],
       children: [
-        /* @__PURE__ */ e(xe, {}),
-        /* @__PURE__ */ e(ke, {}),
-        /* @__PURE__ */ e(we, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
+        /* @__PURE__ */ e(Ne, {}),
+        /* @__PURE__ */ e(ze, {}),
+        /* @__PURE__ */ e(Ce, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
       ]
     }
   ) });
 }
-function Fe({ onSelect: r }) {
-  const [s, t] = N([]), [o, n] = N(!0), [i, l] = N(null), a = async () => {
+function Je({ onSelect: r }) {
+  const [i, t] = N([]), [a, s] = N(!0), [d, m] = N(null), o = async () => {
     try {
-      n(!0);
-      const d = await $e();
-      t(d), l(null);
-    } catch (d) {
-      l(d instanceof Error ? d.message : "Failed to load uploads");
+      s(!0);
+      const l = await Pe();
+      t(l), m(null);
+    } catch (l) {
+      m(l instanceof Error ? l.message : "Failed to load uploads");
     } finally {
-      n(!1);
+      s(!1);
     }
   };
-  $(() => {
-    a();
+  M(() => {
+    o();
   }, []);
-  const c = async (d, p) => {
+  const n = async (l, p) => {
     if (p.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await De(d), t((h) => h.filter((b) => b.id !== d));
-      } catch (h) {
-        console.error("Failed to delete:", h);
+        await Te(l), t((f) => f.filter((b) => b.id !== l));
+      } catch (f) {
+        console.error("Failed to delete:", f);
       }
-  }, u = (d) => d < 1024 ? `${d} B` : d < 1024 * 1024 ? `${(d / 1024).toFixed(1)} KB` : `${(d / (1024 * 1024)).toFixed(1)} MB`;
-  return o ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : i ? /* @__PURE__ */ m("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
-    i,
+  }, u = (l) => l < 1024 ? `${l} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(1)} KB` : `${(l / (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..." }) : d ? /* @__PURE__ */ c("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
+    d,
     /* @__PURE__ */ e(
       "button",
       {
-        onClick: a,
+        onClick: o,
         className: "ml-2 text-teal-500 dark:text-teal-400 hover:underline",
         children: "Retry"
       }
     )
-  ] }) : 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(
+  ] }) : i.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: i.map((l) => /* @__PURE__ */ c(
     "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",
-      onClick: () => r == null ? void 0 : r(d),
+      onClick: () => r == null ? void 0 : r(l),
       children: [
         /* @__PURE__ */ e(
           "img",
           {
-            src: se(d.id),
-            alt: d.filename,
+            src: de(l.id),
+            alt: l.filename,
             className: "w-full h-20 object-cover"
           }
         ),
         /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
           "button",
           {
-            onClick: (p) => c(d.id, p),
+            onClick: (p) => n(l.id, p),
             className: "p-1 bg-red-500 rounded text-white text-xs hover:bg-red-600",
             children: "Delete"
           }
         ) }),
-        /* @__PURE__ */ e("div", { className: "p-1 text-xs truncate bg-white dark:bg-zinc-800 text-gray-800 dark:text-zinc-200", children: d.filename }),
-        /* @__PURE__ */ e("div", { className: "px-1 pb-1 text-xs text-gray-400 dark:text-zinc-500 bg-white dark:bg-zinc-800", children: u(d.size) })
+        /* @__PURE__ */ e("div", { className: "p-1 text-xs truncate bg-white dark:bg-zinc-800 text-gray-800 dark:text-zinc-200", children: l.filename }),
+        /* @__PURE__ */ e("div", { className: "px-1 pb-1 text-xs text-gray-400 dark:text-zinc-500 bg-white dark:bg-zinc-800", children: u(l.size) })
       ]
     },
-    d.id
+    l.id
   )) }) });
 }
-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({
+function Ye() {
+  const r = x((g) => g.setGenerators), i = x((g) => g.setTransforms), t = x((g) => g.generators), a = x((g) => g.transforms), s = x((g) => g.addNode), [d, m] = N(!1), { data: o } = K({
     queryKey: ["generators"],
-    queryFn: ze
-  }), { data: c } = q({
+    queryFn: We
+  }), { data: n } = K({
     queryKey: ["transforms"],
-    queryFn: Ce
+    queryFn: Ae
   });
-  $(() => {
-    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) => {
-    n(g, { x: 250, y: 150 + Math.random() * 100 });
+  M(() => {
+    o && r(o);
+  }, [o, r]), M(() => {
+    n && i(n);
+  }, [n, i]);
+  const u = (g, v) => {
+    g.dataTransfer.setData("application/json", JSON.stringify(v)), g.dataTransfer.effectAllowed = "move";
+  }, l = (g) => {
+    s(g, { x: 250, y: 150 + Math.random() * 100 });
   }, p = {
     id: "input:upload",
     type: "input",
@@ -1053,7 +1125,7 @@ function Ve() {
       type: "object",
       properties: {}
     }
-  }, h = {
+  }, f = {
     id: "save:filesystem",
     type: "save",
     name: "save",
@@ -1067,45 +1139,49 @@ function Ve() {
           type: "string",
           title: "Destination",
           default: "./output/image.png"
+        },
+        provider: {
+          type: "string",
+          default: "filesystem"
         }
       }
     }
   }, b = t.reduce(
-    (g, w) => {
-      const k = w.category || "Other";
-      return g[k] || (g[k] = []), g[k].push(w), g;
+    (g, v) => {
+      const w = v.category || "Other";
+      return g[w] || (g[w] = []), g[w].push(v), g;
     },
     {}
-  ), x = o.reduce(
-    (g, w) => {
-      const k = w.category || "Other";
-      return g[k] || (g[k] = []), g[k].push(w), g;
+  ), k = a.reduce(
+    (g, v) => {
+      const w = v.category || "Other";
+      return g[w] || (g[w] = []), g[w].push(v), g;
     },
     {}
   );
-  return /* @__PURE__ */ e("div", { className: "w-64 bg-gray-50 dark:bg-zinc-800 border-r border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ m("div", { className: "p-4", children: [
+  return /* @__PURE__ */ e("div", { className: "w-64 bg-gray-50 dark:bg-zinc-800 border-r border-gray-200 dark:border-zinc-700 overflow-y-auto", children: /* @__PURE__ */ c("div", { className: "p-4", children: [
     /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white mb-4", children: "Nodes" }),
-    /* @__PURE__ */ m("div", { className: "mb-6", children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center justify-between mb-2", children: [
+    /* @__PURE__ */ c("div", { className: "mb-6", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-2", children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-amber-600 dark:text-amber-400 uppercase tracking-wide", children: "Input" }),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ c(
           "button",
           {
-            onClick: () => l(!i),
+            onClick: () => m(!d),
             className: "text-xs text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300",
             children: [
-              i ? "Hide" : "Browse",
+              d ? "Hide" : "Browse",
               " Uploads"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ m(
+      /* @__PURE__ */ c(
         "div",
         {
           draggable: !0,
           onDragStart: (g) => u(g, p),
-          onDoubleClick: () => d(p),
+          onDoubleClick: () => l(p),
           className: "px-3 py-2 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 rounded cursor-grab active:cursor-grabbing hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors",
           children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-amber-700 dark:text-amber-300", children: "Upload Image" }),
@@ -1113,56 +1189,56 @@ function Ve() {
           ]
         }
       ),
-      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, {}) })
+      d && /* @__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(Je, {}) })
     ] }),
-    /* @__PURE__ */ m("div", { className: "mb-6", children: [
+    /* @__PURE__ */ c("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(b).map(([g, w]) => /* @__PURE__ */ m("div", { className: "mb-3", children: [
+      Object.entries(b).map(([g, v]) => /* @__PURE__ */ c("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: g }),
-        w.map((k) => /* @__PURE__ */ m(
+        v.map((w) => /* @__PURE__ */ c(
           "div",
           {
             draggable: !0,
-            onDragStart: (y) => u(y, k),
-            onDoubleClick: () => d(k),
+            onDragStart: (h) => u(h, w),
+            onDoubleClick: () => l(w),
             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: k.label }),
-              k.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: k.description })
+              /* @__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 })
             ]
           },
-          k.id
+          w.id
         ))
       ] }, g))
     ] }),
-    /* @__PURE__ */ m("div", { className: "mb-6", children: [
+    /* @__PURE__ */ c("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, w]) => /* @__PURE__ */ m("div", { className: "mb-3", children: [
+      Object.entries(k).map(([g, v]) => /* @__PURE__ */ c("div", { className: "mb-3", children: [
         /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: g }),
-        w.map((k) => /* @__PURE__ */ m(
+        v.map((w) => /* @__PURE__ */ c(
           "div",
           {
             draggable: !0,
-            onDragStart: (y) => u(y, k),
-            onDoubleClick: () => d(k),
+            onDragStart: (h) => u(h, w),
+            onDoubleClick: () => l(w),
             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: k.label }),
-              k.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: k.description })
+              /* @__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 })
             ]
           },
-          k.id
+          w.id
         ))
       ] }, g))
     ] }),
-    /* @__PURE__ */ m("div", { className: "mb-6", children: [
+    /* @__PURE__ */ c("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-green-600 dark:text-green-400 uppercase tracking-wide mb-2", children: "Output" }),
-      /* @__PURE__ */ m(
+      /* @__PURE__ */ c(
         "div",
         {
           draggable: !0,
-          onDragStart: (g) => u(g, h),
-          onDoubleClick: () => d(h),
+          onDragStart: (g) => u(g, f),
+          onDoubleClick: () => l(f),
           className: "px-3 py-2 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded cursor-grab active:cursor-grabbing hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors",
           children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Save" }),
@@ -1173,120 +1249,120 @@ function Ve() {
     ] })
   ] }) });
 }
-function Ke() {
-  var p, h;
-  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)
+function Xe() {
+  var p, f;
+  const r = x((b) => b.selectedNodeId), i = x((b) => b.nodes), t = x((b) => b.generators), a = x((b) => b.transforms), s = x((b) => b.updateNodeData), d = x((b) => b.deleteNode), m = i.find((b) => b.id === r);
+  if (!m)
     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 a, c = "";
-  if (l.type === "generator") {
-    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 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 = {
+  let o, n = "";
+  if (m.type === "generator") {
+    const b = m.data, k = t.find((g) => g.name === b.generatorName);
+    o = (p = k == null ? void 0 : k.params) == null ? void 0 : p.properties, n = (k == null ? void 0 : k.label) || b.generatorName;
+  } else if (m.type === "transform") {
+    const b = m.data, k = a.find((g) => g.name === b.operation);
+    o = (f = k == null ? void 0 : k.params) == null ? void 0 : f.properties, n = (k == null ? void 0 : k.label) || b.operation;
+  } else m.type === "save" && (n = "Save", o = {
     destination: {
       type: "string",
       title: "Destination",
       description: "File path to save the image"
     }
   });
-  const u = (b, x) => {
-    if (l.type === "generator") {
-      const g = l.data;
-      n(l.id, {
-        params: { ...g.params, [b]: x }
+  const u = (b, k) => {
+    if (m.type === "generator") {
+      const g = m.data;
+      s(m.id, {
+        params: { ...g.params, [b]: k }
       });
-    } else if (l.type === "transform") {
-      const g = l.data;
-      n(l.id, {
-        params: { ...g.params, [b]: x }
+    } else if (m.type === "transform") {
+      const g = m.data;
+      s(m.id, {
+        params: { ...g.params, [b]: k }
       });
-    } else l.type === "save" && n(l.id, { [b]: x });
-  }, d = (b) => {
-    if (l.type === "generator")
-      return l.data.params[b];
-    if (l.type === "transform")
-      return l.data.params[b];
-    if (l.type === "save")
-      return l.data[b];
+    } else m.type === "save" && s(m.id, { [b]: k });
+  }, l = (b) => {
+    if (m.type === "generator")
+      return m.data.params[b];
+    if (m.type === "transform")
+      return m.data.params[b];
+    if (m.type === "save")
+      return m.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: [
-      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: c }),
+  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__ */ c("div", { className: "p-4", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: n }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => i(l.id),
+          onClick: () => d(m.id),
           className: "text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm",
           children: "Delete"
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: a && Object.entries(a).map(([b, x]) => /* @__PURE__ */ e(
-      qe,
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: o && Object.entries(o).map(([b, k]) => /* @__PURE__ */ e(
+      Ze,
       {
         name: b,
-        field: x,
-        value: d(b),
+        field: k,
+        value: l(b),
         onChange: (g) => u(b, g)
       },
       b
     )) })
   ] }) });
 }
-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(
+function Ze({ name: r, field: i, value: t, onChange: a }) {
+  const s = i.title || r, d = "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 i.enum ? /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+    /* @__PURE__ */ c(
       "select",
       {
         value: String(t || ""),
-        onChange: (l) => o(l.target.value),
-        className: i,
+        onChange: (m) => a(m.target.value),
+        className: d,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-          s.enum.map((l) => /* @__PURE__ */ e("option", { value: l, children: l }, l))
+          i.enum.map((m) => /* @__PURE__ */ e("option", { value: m, children: m }, m))
         ]
       }
     ),
-    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 }),
+    i.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: i.description })
+  ] }) : i.type === "number" ? /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     /* @__PURE__ */ e(
       "input",
       {
         type: "number",
         value: t !== void 0 ? Number(t) : "",
-        onChange: (l) => o(Number(l.target.value)),
-        min: s.minimum,
-        max: s.maximum,
-        className: i
+        onChange: (m) => a(Number(m.target.value)),
+        min: i.minimum,
+        max: i.maximum,
+        className: d
       }
     ),
-    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: [
+    i.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: i.description })
+  ] }) : i.type === "boolean" ? /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
         checked: !!t,
-        onChange: (l) => o(l.target.checked),
+        onChange: (m) => a(m.target.checked),
         className: "h-4 w-4 text-teal-600 focus:ring-teal-500 border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900"
       }
     ),
-    /* @__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: n }),
-    /* @__PURE__ */ m("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: s })
+  ] }) : r.toLowerCase().includes("color") && typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
+    /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "color",
           value: String(t || "#000000"),
-          onChange: (l) => o(l.target.value),
+          onChange: (m) => a(m.target.value),
           className: "h-10 w-14 p-1 border border-gray-300 dark:border-zinc-600 rounded"
         }
       ),
@@ -1295,142 +1371,142 @@ function qe({ name: r, field: s, value: t, onChange: o }) {
         {
           type: "text",
           value: String(t || ""),
-          onChange: (l) => o(l.target.value),
-          className: i + " flex-1"
+          onChange: (m) => a(m.target.value),
+          className: d + " flex-1"
         }
       )
     ] })
-  ] }) : 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 }),
+  ] }) : i.type === "object" ? /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     /* @__PURE__ */ e(
       "textarea",
       {
         value: t ? JSON.stringify(t, null, 2) : "{}",
-        onChange: (l) => {
+        onChange: (m) => {
           try {
-            o(JSON.parse(l.target.value));
+            a(JSON.parse(m.target.value));
           } catch {
           }
         },
         rows: 4,
-        className: i + " font-mono text-xs"
+        className: d + " font-mono text-xs"
       }
     ),
-    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: n }),
+    i.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: i.description })
+  ] }) : /* @__PURE__ */ c("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: s }),
     r === "prompt" || r === "code" || r === "text" ? /* @__PURE__ */ e(
       "textarea",
       {
         value: String(t || ""),
-        onChange: (l) => o(l.target.value),
+        onChange: (m) => a(m.target.value),
         rows: 3,
-        className: i
+        className: d
       }
     ) : /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: String(t || ""),
-        onChange: (l) => o(l.target.value),
-        className: i
+        onChange: (m) => a(m.target.value),
+        className: d
       }
     ),
-    s.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: s.description })
+    i.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: i.description })
   ] });
 }
-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);
+function et(r, i) {
+  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 i) {
+    const n = s.get(o.source) || [];
+    n.push(o.target), s.set(o.source, n), a.set(o.target, (a.get(o.target) || 0) + 1);
   }
-  const i = [];
-  for (const [a, c] of o)
-    c === 0 && i.push(a);
-  const l = [];
-  for (; i.length > 0; ) {
-    const a = i.shift(), c = t.get(a);
-    c && l.push(c);
-    const u = n.get(a) || [];
-    for (const d of u) {
-      const p = (o.get(d) || 1) - 1;
-      o.set(d, p), p === 0 && i.push(d);
+  const d = [];
+  for (const [o, n] of a)
+    n === 0 && d.push(o);
+  const m = [];
+  for (; d.length > 0; ) {
+    const o = d.shift(), n = t.get(o);
+    n && m.push(n);
+    const u = s.get(o) || [];
+    for (const l of u) {
+      const p = (a.get(l) || 1) - 1;
+      a.set(l, p), p === 0 && d.push(l);
     }
   }
-  return l;
+  return m;
 }
-function He(r) {
-  const s = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
-  return `${s}_${t}`;
+function tt(r) {
+  const i = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
+  return `${i}_${t}`;
 }
-function U(r) {
+function E(r) {
   return typeof r == "string" ? r.includes(`
 `) ? "`" + r.replace(/`/g, "\\`").replace(/\$/g, "\\$") + "`" : JSON.stringify(r) : JSON.stringify(r, null, 2);
 }
-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;
+function rt(r, i, t) {
+  const a = t.get(r.id), s = [], d = i.find((o) => o.target === r.id), m = d ? t.get(d.source) : null;
   switch (r.type) {
     case "generator": {
-      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(`,
+      const o = r.data;
+      s.push(o.generatorName);
+      const n = o.params || {}, u = Object.entries(n).filter(([, l]) => l !== void 0 && l !== "").map(([l, p]) => `  ${l}: ${E(p)}`).join(`,
 `);
       return {
-        code: `// Generate image using ${a.generatorName}
-const ${o} = await ${a.generatorName}({
+        code: `// Generate image using ${o.generatorName}
+const ${a} = await ${o.generatorName}({
 ${u}
 });`,
-        imports: n
+        imports: s
       };
     }
     case "input":
       return {
         code: `// Load input image
-const ${o} = await flo.loadImage("./input.png");`,
+const ${a} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      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";
+      const o = r.data, n = o.params || {}, u = Object.entries(n).filter(([, p]) => p !== void 0 && p !== "").map(([p, f]) => `${p}: ${E(f)}`).join(", "), l = m || "image";
       return {
-        code: `// Apply ${a.operation} transform
-const ${o} = await flo.transform(${d}, "${a.operation}"${u ? `, { ${u} }` : ""});`,
+        code: `// Apply ${o.operation} transform
+const ${a} = await flo.transform(${l}, "${o.operation}"${u ? `, { ${u} }` : ""});`,
         imports: []
       };
     }
     case "vision": {
-      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(`,
+      const o = r.data;
+      s.push(o.providerName);
+      const n = o.params || {}, u = m || "image", l = Object.entries(n).filter(([, p]) => p !== void 0 && p !== "").map(([p, f]) => `  ${p}: ${E(f)}`).join(`,
 `);
       return {
-        code: `// Analyze image with ${a.providerName}
-const ${o} = await ${a.providerName}.analyze(${u}, {
-${d}
+        code: `// Analyze image with ${o.providerName}
+const ${a} = await ${o.providerName}.analyze(${u}, {
+${l}
 });`,
-        imports: n
+        imports: s
       };
     }
     case "text": {
-      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(`,
+      const o = r.data;
+      s.push(o.providerName);
+      const n = o.params || {}, u = Object.entries(n).filter(([, l]) => l !== void 0 && l !== "").map(([l, p]) => `  ${l}: ${E(p)}`).join(`,
 `);
       return {
-        code: `// Generate text with ${a.providerName}
-const ${o} = await ${a.providerName}.generate({
+        code: `// Generate text with ${o.providerName}
+const ${a} = await ${o.providerName}.generate({
 ${u}
 });`,
-        imports: n
+        imports: s
       };
     }
     case "save": {
-      const a = r.data;
+      const o = r.data;
       return {
         code: `// Save result
-await flo.save(${l || "result"}, ${U(a.destination)});`,
+await flo.save(${m || "result"}, ${E(o.destination)});`,
         imports: []
       };
     }
@@ -1441,33 +1517,33 @@ await flo.save(${l || "result"}, ${U(a.destination)});`,
       };
   }
 }
-function Qe(r, s) {
+function at(r, i) {
   if (r.length === 0)
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
-  const t = _e(r, s), o = /* @__PURE__ */ new Map();
+  const t = et(r, i), a = /* @__PURE__ */ new Map();
   for (const u of t)
-    o.set(u.id, He(u));
-  const n = /* @__PURE__ */ new Set(), i = [];
+    a.set(u.id, tt(u));
+  const s = /* @__PURE__ */ new Set(), d = [];
   for (const u of t) {
-    const { code: d, imports: p } = Je(u, s, o);
-    i.push(d);
-    for (const h of p)
-      n.add(h);
+    const { code: l, imports: p } = rt(u, i, a);
+    d.push(l);
+    for (const f of p)
+      s.add(f);
   }
-  const l = [];
-  n.size > 0 && l.push(`import { ${Array.from(n).join(", ")} } from "@teamflojo/floimg";`), l.push('import * as flo from "@teamflojo/floimg";');
-  const a = `/**
+  const m = [];
+  s.size > 0 && m.push(`import { ${Array.from(s).join(", ")} } from "@teamflojo/floimg";`), m.push('import * as flo from "@teamflojo/floimg";');
+  const o = `/**
  * FloImg Workflow
  * Generated by FloImg Studio
  * https://floimg.com
  */
 
-`, c = `
+`, n = `
 async function runWorkflow() {
-${i.map(
+${d.map(
     (u) => u.split(`
-`).map((d) => "  " + d).join(`
+`).map((l) => "  " + l).join(`
 `)
   ).join(`
 
@@ -1477,55 +1553,291 @@ ${i.map(
 // Run the workflow
 runWorkflow().catch(console.error);
 `;
-  return a + l.join(`
+  return o + m.join(`
 `) + `
-` + c;
+` + n;
+}
+function ot({ isOpen: r, onClose: i, onImport: t }) {
+  const [a, s] = N(""), [d, m] = N(!1), [o, n] = N(null), [u, l] = N(!1), p = C(async () => {
+    if (!a.trim()) {
+      n({ message: "Please enter or paste YAML content" });
+      return;
+    }
+    m(!0), n(null);
+    try {
+      const h = await Ee(a);
+      h.success ? (t(h.nodes, h.edges, h.name), s(""), i()) : n({
+        message: h.error || "Import failed",
+        line: h.line,
+        column: h.column
+      });
+    } catch (h) {
+      n({ message: h instanceof Error ? h.message : "Import failed" });
+    } finally {
+      m(!1);
+    }
+  }, [a, t, i]), f = C(async () => {
+    if (!a.trim()) {
+      n({ message: "Please enter or paste YAML content" });
+      return;
+    }
+    m(!0), n(null);
+    try {
+      const h = await Oe(a);
+      h.valid ? (n(null), n({ message: "Valid YAML!" }), setTimeout(() => n(null), 2e3)) : h.errors.length > 0 && n(h.errors[0]);
+    } catch (h) {
+      n({ message: h instanceof Error ? h.message : "Validation failed" });
+    } finally {
+      m(!1);
+    }
+  }, [a]), b = C(async (h) => {
+    if (!h.name.endsWith(".yaml") && !h.name.endsWith(".yml")) {
+      n({ message: "Please upload a .yaml or .yml file" });
+      return;
+    }
+    try {
+      const z = await h.text();
+      s(z), n(null);
+    } catch {
+      n({ message: "Failed to read file" });
+    }
+  }, []), k = C((h) => {
+    h.preventDefault(), l(!0);
+  }, []), g = C((h) => {
+    h.preventDefault(), l(!1);
+  }, []), v = C(
+    (h) => {
+      h.preventDefault(), l(!1);
+      const z = h.dataTransfer.files[0];
+      z && b(z);
+    },
+    [b]
+  ), w = C(
+    (h) => {
+      var S;
+      const z = (S = h.target.files) == null ? void 0 : S[0];
+      z && b(z);
+    },
+    [b]
+  );
+  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ c("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__ */ c("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Import Workflow" }),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: i,
+          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",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M6 18L18 6M6 6l12 12"
+            }
+          ) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "p-4 flex-1 overflow-auto", children: [
+      /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-zinc-400 mb-4", children: "Paste YAML content or drag and drop a .yaml file to import a workflow." }),
+      /* @__PURE__ */ c(
+        "div",
+        {
+          onDragOver: k,
+          onDragLeave: g,
+          onDrop: v,
+          className: `border-2 border-dashed rounded-lg p-4 mb-4 text-center transition-colors ${u ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20" : "border-gray-300 dark:border-zinc-600"}`,
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "file",
+                accept: ".yaml,.yml",
+                onChange: w,
+                className: "hidden",
+                id: "yaml-file-input"
+              }
+            ),
+            /* @__PURE__ */ c(
+              "label",
+              {
+                htmlFor: "yaml-file-input",
+                className: "cursor-pointer text-sm text-gray-600 dark:text-zinc-400",
+                children: [
+                  /* @__PURE__ */ e(
+                    "svg",
+                    {
+                      className: "h-8 w-8 mx-auto mb-2 text-gray-400 dark:text-zinc-500",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      children: /* @__PURE__ */ e(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "text-teal-600 dark:text-teal-400 hover:underline", children: "Click to upload" }),
+                  " ",
+                  "or drag and drop",
+                  /* @__PURE__ */ e("br", {}),
+                  /* @__PURE__ */ e("span", { className: "text-xs", children: ".yaml or .yml files" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "textarea",
+        {
+          value: a,
+          onChange: (h) => {
+            s(h.target.value), n(null);
+          },
+          placeholder: `name: My Workflow
+steps:
+  - kind: generate
+    generator: quickchart
+    params:
+      type: bar
+      data:
+        labels: [Q1, Q2, Q3, Q4]
+        datasets:
+          - label: Revenue
+            data: [12, 19, 8, 15]
+    out: v0
+
+  - kind: transform
+    op: resize
+    in: v0
+    params:
+      width: 800
+    out: v1`,
+          className: "w-full h-64 p-3 font-mono text-sm bg-gray-100 dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-800 dark:text-zinc-200"
+        }
+      ),
+      o && /* @__PURE__ */ c(
+        "div",
+        {
+          className: `mt-4 p-3 rounded-lg text-sm ${o.message === "Valid YAML!" ? "bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400"}`,
+          children: [
+            /* @__PURE__ */ e("span", { className: "font-medium", children: o.message }),
+            o.line && /* @__PURE__ */ c("span", { className: "ml-2 text-xs", children: [
+              "(line ",
+              o.line,
+              o.column ? `, column ${o.column}` : "",
+              ")"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: "flex justify-between items-center px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: "Use with floimg CLI: floimg run workflow.yaml" }),
+      /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: f,
+            disabled: d || !a.trim(),
+            className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Validate"
+          }
+        ),
+        /* @__PURE__ */ c(
+          "button",
+          {
+            onClick: p,
+            disabled: d || !a.trim(),
+            className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
+            children: [
+              d && /* @__PURE__ */ c("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
+                /* @__PURE__ */ e(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  }
+                )
+              ] }),
+              "Import"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] }) }) : null;
 }
-function Ye({
+function nt({
   brandingSlot: r,
-  beforeActionsSlot: s,
+  beforeActionsSlot: i,
   afterActionsSlot: t,
-  hideAttribution: o = !1
+  hideAttribution: a = !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 = () => {
-      B("New workflow created"), setTimeout(() => B(null), 2e3);
+  const s = x((y) => y.execution), d = x((y) => y.execute), m = x((y) => y.exportToYaml), o = x((y) => y.importFromYaml), n = x((y) => y.nodes), u = x((y) => y.edges), l = $((y) => y.openSettings), p = x((y) => y.activeWorkflowName), f = x((y) => y.hasUnsavedChanges), b = x((y) => y.saveWorkflow), k = x((y) => y.toggleLibrary), g = x((y) => y.setActiveWorkflowName), [v, w] = N(!1), [h, z] = N(!1), [S, B] = N("yaml"), [Q, le] = N(""), [J, ce] = N(""), [Y, U] = N(null), [me, F] = N(!1), [X, V] = N("");
+  M(() => {
+    const y = () => {
+      U("New workflow created"), setTimeout(() => U(null), 2e3);
     };
-    return window.addEventListener("new-workflow-created", v), () => window.removeEventListener("new-workflow-created", v);
+    return window.addEventListener("new-workflow-created", y), () => window.removeEventListener("new-workflow-created", y);
   }, []);
-  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);
+  const G = C(() => {
+    n.length !== 0 && (b(), U("Saved!"), setTimeout(() => U(null), 2e3));
+  }, [n.length, b]), ue = () => {
+    V(p), F(!0);
+  }, Z = () => {
+    const y = X.trim();
+    y && y !== p && g(y), F(!1);
   };
-  $(() => {
-    function v(j) {
-      (j.metaKey || j.ctrlKey) && j.key === "s" && (j.preventDefault(), K());
+  M(() => {
+    function y(L) {
+      (L.metaKey || L.ctrlKey) && L.key === "s" && (L.preventDefault(), G());
     }
-    return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
-  }, [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(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: [
+    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+  }, [G]);
+  const ge = async () => {
+    await d();
+  }, pe = async () => {
+    const y = await m();
+    le(y);
+    const L = at(n, u);
+    ce(L), w(!0);
+  }, he = () => {
+    const y = S === "yaml" ? Q : J;
+    navigator.clipboard.writeText(y);
+  }, fe = C(
+    (y, L, be) => {
+      o(y, L, be), U("Workflow imported!"), setTimeout(() => U(null), 2e3);
+    },
+    [o]
+  );
+  return /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ c("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__ */ c("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: b,
+            onClick: k,
             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(
@@ -1539,10 +1851,10 @@ function Ye({
             ) })
           }
         ),
-        /* @__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__ */ c("div", { className: "flex items-baseline gap-2", children: [
+          /* @__PURE__ */ e("h1", { className: "text-xl font-bold text-gray-800 dark:text-white", children: "FloImg Studio" }),
           r,
-          !o && /* @__PURE__ */ e(
+          !a && /* @__PURE__ */ e(
             "a",
             {
               href: "https://flojo.io",
@@ -1553,16 +1865,16 @@ function Ye({
             }
           )
         ] }),
-        /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-          de ? /* @__PURE__ */ e(
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+          me ? /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: Q,
-              onChange: (v) => V(v.target.value),
-              onBlur: Y,
-              onKeyDown: (v) => {
-                v.key === "Enter" && Y(), v.key === "Escape" && (V(d), F(!1));
+              value: X,
+              onChange: (y) => V(y.target.value),
+              onBlur: Z,
+              onKeyDown: (y) => {
+                y.key === "Enter" && Z(), y.key === "Escape" && (V(p), 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
@@ -1570,30 +1882,30 @@ function Ye({
           ) : /* @__PURE__ */ e(
             "button",
             {
-              onClick: le,
+              onClick: ue,
               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: d
+              children: p
             }
           ),
-          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 })
+          f && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
+          Y && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: Y })
         ] }),
-        /* @__PURE__ */ m("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
-          a.length,
+        /* @__PURE__ */ c("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
+          n.length,
           " node",
-          a.length !== 1 ? "s" : ""
+          n.length !== 1 ? "s" : ""
         ] })
       ] }),
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-3", children: [
-        s,
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
+        i,
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: u,
+            onClick: l,
             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: [
+            children: /* @__PURE__ */ c("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -1618,8 +1930,8 @@ function Ye({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: K,
-            disabled: a.length === 0,
+            onClick: G,
+            disabled: n.length === 0,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
             title: "Save Workflow (Cmd+S)",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -1636,8 +1948,16 @@ function Ye({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: me,
-            disabled: a.length === 0,
+            onClick: () => z(!0),
+            className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600",
+            children: "Import"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: pe,
+            disabled: n.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"
           }
@@ -1645,11 +1965,11 @@ function Ye({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: ce,
-            disabled: a.length === 0 || n.status === "running",
+            onClick: ge,
+            disabled: n.length === 0 || s.status === "running",
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
-            children: 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: [
+            children: s.status === "running" ? /* @__PURE__ */ c(j, { children: [
+              /* @__PURE__ */ c("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
                   {
@@ -1671,8 +1991,8 @@ function Ye({
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ m(P, { children: [
-              /* @__PURE__ */ m("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+            ] }) : /* @__PURE__ */ c(j, { children: [
+              /* @__PURE__ */ c("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
                   {
@@ -1699,54 +2019,44 @@ function Ye({
         t
       ] })
     ] }),
-    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: [
+    s.status === "completed" && s.imageIds.length > 0 && /* @__PURE__ */ e("div", { className: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800 px-4 py-3", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ c("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
         "Generated ",
-        n.imageIds.length,
+        s.imageIds.length,
         " image",
-        n.imageIds.length !== 1 ? "s" : ""
+        s.imageIds.length !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex gap-2", children: n.imageIds.slice(0, 4).map((v) => /* @__PURE__ */ e(
-        "a",
+      /* @__PURE__ */ e("div", { className: "flex gap-2", children: s.imageUrls.slice(0, 4).map((y, L) => /* @__PURE__ */ e("a", { href: y, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
+        "img",
         {
-          href: G(v),
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "block",
-          children: /* @__PURE__ */ e(
-            "img",
-            {
-              src: G(v),
-              alt: "Generated",
-              className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
-            }
-          )
-        },
-        v
-      )) })
+          src: y,
+          alt: "Generated",
+          className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
+        }
+      ) }, L)) })
     ] }) }),
-    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: [
+    s.status === "error" && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-3", children: /* @__PURE__ */ c("span", { className: "text-red-700 dark:text-red-400", children: [
       "Error: ",
-      n.error
+      s.error
     ] }) }),
-    g && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ 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: [
+    v && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ c("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__ */ c("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "Export Workflow" }),
-          /* @__PURE__ */ m("div", { className: "flex gap-1 bg-gray-100 dark:bg-zinc-700 rounded-lg p-1", children: [
+          /* @__PURE__ */ c("div", { className: "flex gap-1 bg-gray-100 dark:bg-zinc-700 rounded-lg p-1", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                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"}`,
+                onClick: () => B("yaml"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${S === "yaml" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "YAML"
               }
             ),
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: () => 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"}`,
+                onClick: () => B("javascript"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${S === "javascript" ? "bg-white dark:bg-zinc-600 text-gray-900 dark:text-white shadow-sm" : "text-gray-600 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white"}`,
                 children: "JavaScript"
               }
             )
@@ -1769,14 +2079,14 @@ function Ye({
           }
         )
       ] }),
-      /* @__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: 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("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: S === "yaml" ? Q : J }) }),
+      /* @__PURE__ */ c("div", { className: "flex justify-between items-center px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
+        /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: S === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
+        /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: ue,
+              onClick: he,
               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"
             }
@@ -1791,28 +2101,36 @@ function Ye({
           )
         ] })
       ] })
-    ] }) })
+    ] }) }),
+    /* @__PURE__ */ e(
+      ot,
+      {
+        isOpen: h,
+        onClose: () => z(!1),
+        onImport: fe
+      }
+    )
   ] });
 }
-function Xe() {
-  const r = f((c) => c.loadTemplate), [s, t] = N(null), {
-    data: o,
-    isLoading: n,
-    error: i,
-    refetch: l
-  } = q({
+function st() {
+  const r = x((n) => n.loadTemplate), [i, t] = N(null), {
+    data: a,
+    isLoading: s,
+    error: d,
+    refetch: m
+  } = K({
     queryKey: ["images"],
-    queryFn: Le,
+    queryFn: Me,
     refetchInterval: 5e3
     // Auto-refresh every 5 seconds
-  }), a = async (c) => {
-    t(c);
+  }), o = async (n) => {
+    t(n);
     try {
-      const u = await We(c);
+      const u = await Ue(n);
       if (u != null && u.workflow) {
-        const d = {
-          id: `image-${c}`,
-          name: `Workflow from ${c}`,
+        const l = {
+          id: `image-${n}`,
+          name: `Workflow from ${n}`,
           description: "Loaded from gallery image",
           category: "Gallery",
           generator: "unknown",
@@ -1821,7 +2139,7 @@ function Xe() {
             edges: u.workflow.edges
           }
         };
-        r(d), window.dispatchEvent(new CustomEvent("workflow-loaded"));
+        r(l), window.dispatchEvent(new CustomEvent("workflow-loaded"));
       } else
         alert("No workflow metadata available for this image");
     } catch (u) {
@@ -1830,56 +2148,56 @@ function Xe() {
       t(null);
     }
   };
-  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: [
+  return s ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : d ? /* @__PURE__ */ c("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
     "Error loading images: ",
-    i instanceof Error ? i.message : "Unknown error"
-  ] }) : !o || o.length === 0 ? /* @__PURE__ */ m("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: [
+    d instanceof Error ? d.message : "Unknown error"
+  ] }) : !a || a.length === 0 ? /* @__PURE__ */ c("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: [
+  ] }) : /* @__PURE__ */ c("div", { className: "p-4 bg-gray-100 dark:bg-zinc-900 min-h-full", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ c("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: [
         "Gallery (",
-        o.length,
+        a.length,
         " image",
-        o.length !== 1 ? "s" : "",
+        a.length !== 1 ? "s" : "",
         ")"
       ] }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => l(),
+          onClick: () => m(),
           className: "text-sm text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-violet-300",
           children: "Refresh"
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: o.map((c) => /* @__PURE__ */ e(
-      Ze,
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: a.map((n) => /* @__PURE__ */ e(
+      it,
       {
-        image: c,
-        onLoadWorkflow: () => a(c.id),
-        isLoading: s === c.id
+        image: n,
+        onLoadWorkflow: () => o(n.id),
+        isLoading: i === n.id
       },
-      c.id
+      n.id
     )) })
   ] });
 }
-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: [
+function it({ image: r, onLoadWorkflow: i, isLoading: t }) {
+  const a = (d) => new Date(d).toLocaleString(), s = (d) => d < 1024 ? `${d} B` : d < 1048576 ? `${(d / 1024).toFixed(1)} KB` : `${(d / 1048576).toFixed(1)} MB`;
+  return /* @__PURE__ */ c("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__ */ c("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "a",
         {
-          href: G(r.id),
+          href: te(r.id),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block aspect-square bg-gray-100 dark:bg-zinc-900",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: G(r.id),
+              src: te(r.id),
               alt: r.filename,
               className: "w-full h-full object-cover",
               loading: "lazy"
@@ -1890,8 +2208,8 @@ function Ze({ image: r, onLoadWorkflow: s, isLoading: t }) {
       /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center", children: /* @__PURE__ */ e(
         "button",
         {
-          onClick: (i) => {
-            i.preventDefault(), s();
+          onClick: (d) => {
+            d.preventDefault(), i();
           },
           disabled: t,
           className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
@@ -1899,18 +2217,18 @@ function Ze({ image: r, onLoadWorkflow: s, isLoading: t }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ m("div", { className: "p-3", children: [
+    /* @__PURE__ */ c("div", { className: "p-3", children: [
       /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-800 dark:text-white truncate", children: r.filename }),
-      /* @__PURE__ */ m("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
+      /* @__PURE__ */ c("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
         r.mime,
         " • ",
-        n(r.size)
+        s(r.size)
       ] }),
-      /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: o(r.createdAt) })
+      /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: a(r.createdAt) })
     ] })
   ] });
 }
-const et = {
+const dt = {
   id: "sales-dashboard",
   name: "Sales Dashboard",
   description: "Quarterly revenue bar chart with gradient styling",
@@ -1960,7 +2278,7 @@ const et = {
     ],
     edges: []
   }
-}, tt = {
+}, lt = {
   id: "user-growth",
   name: "User Growth Line Chart",
   description: "Monthly user growth with smooth bezier curves",
@@ -2008,7 +2326,7 @@ const et = {
     ],
     edges: []
   }
-}, rt = {
+}, ct = {
   id: "api-flow",
   name: "API Request Flow",
   description: "Sequence diagram showing API authentication flow",
@@ -2050,7 +2368,7 @@ const et = {
     ],
     edges: []
   }
-}, at = {
+}, mt = {
   id: "system-architecture",
   name: "System Architecture",
   description: "Microservices architecture diagram",
@@ -2108,7 +2426,7 @@ const et = {
     ],
     edges: []
   }
-}, ot = {
+}, ut = {
   id: "git-workflow",
   name: "Git Branch Workflow",
   description: "Git branching strategy with feature and release branches",
@@ -2151,7 +2469,7 @@ const et = {
     ],
     edges: []
   }
-}, nt = {
+}, gt = {
   id: "website-qr",
   name: "Website QR Code",
   description: "QR code linking to your website with custom styling",
@@ -2179,7 +2497,7 @@ const et = {
     ],
     edges: []
   }
-}, st = {
+}, pt = {
   id: "wifi-qr",
   name: "WiFi QR Code",
   description: "Scannable QR code for WiFi network access",
@@ -2207,7 +2525,7 @@ const et = {
     ],
     edges: []
   }
-}, it = {
+}, ht = {
   id: "chart-watermark",
   name: "Chart with Watermark",
   description: "Bar chart with company watermark and rounded corners",
@@ -2273,7 +2591,7 @@ const et = {
       { id: "e2", source: "transform-1", target: "transform-2" }
     ]
   }
-}, dt = {
+}, ft = {
   id: "diagram-webp",
   name: "Diagram to WebP",
   description: "Mermaid diagram converted to optimized WebP format",
@@ -2314,108 +2632,108 @@ const et = {
     ],
     edges: [{ id: "e1", source: "gen-1", target: "transform-1" }]
   }
-}, E = [
+}, O = [
   // Charts
-  et,
-  tt,
+  dt,
+  lt,
   // Diagrams
-  rt,
-  at,
-  ot,
+  ct,
+  mt,
+  ut,
   // QR Codes
-  nt,
-  st,
+  gt,
+  pt,
   // Pipelines
-  it,
-  dt
+  ht,
+  ft
 ];
-function lt() {
-  const r = new Set(E.map((s) => s.category));
+function bt() {
+  const r = new Set(O.map((i) => i.category));
   return Array.from(r).sort();
 }
-function zt(r) {
-  return E.filter((s) => s.category === r);
+function $t(r) {
+  return O.filter((i) => i.category === r);
 }
-function ae(r) {
-  return E.find((s) => s.id === r);
+function ne(r) {
+  return O.find((i) => i.id === r);
 }
-function Ct(r) {
-  const s = r.toLowerCase();
-  return E.filter(
+function Mt(r) {
+  const i = r.toLowerCase();
+  return O.filter(
     (t) => {
-      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)));
+      var a;
+      return t.name.toLowerCase().includes(i) || t.description.toLowerCase().includes(i) || t.category.toLowerCase().includes(i) || t.generator.toLowerCase().includes(i) || ((a = t.tags) == null ? void 0 : a.some((s) => s.toLowerCase().includes(i)));
     }
   );
 }
-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(
+function xt({ onSelect: r }) {
+  const [i, t] = N(null), [a, s] = N(""), d = ee(() => bt(), []), m = ee(() => {
+    let o = O;
+    if (i && (o = o.filter((n) => n.category === i)), a) {
+      const n = a.toLowerCase();
+      o = o.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)));
+          var l;
+          return u.name.toLowerCase().includes(n) || u.description.toLowerCase().includes(n) || u.generator.toLowerCase().includes(n) || ((l = u.tags) == null ? void 0 : l.some((p) => p.toLowerCase().includes(n)));
         }
       );
     }
-    return a;
-  }, [s, o]);
-  return /* @__PURE__ */ m("div", { className: "p-6", children: [
-    /* @__PURE__ */ m("div", { className: "mb-6", children: [
+    return o;
+  }, [i, a]);
+  return /* @__PURE__ */ c("div", { className: "p-6", children: [
+    /* @__PURE__ */ c("div", { className: "mb-6", children: [
       /* @__PURE__ */ e("h2", { className: "text-2xl font-bold text-gray-900 dark:text-white mb-2", children: "Templates" }),
       /* @__PURE__ */ e("p", { className: "text-gray-600 dark:text-zinc-400", children: "Start with a pre-built workflow. Click any template to load it into the editor." })
     ] }),
-    /* @__PURE__ */ m("div", { className: "flex flex-wrap gap-4 mb-6", children: [
+    /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-4 mb-6", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
           placeholder: "Search templates...",
-          value: o,
-          onChange: (a) => n(a.target.value),
+          value: a,
+          onChange: (o) => s(o.target.value),
           className: "px-4 py-2 border border-gray-300 dark:border-zinc-600 rounded-lg bg-white dark:bg-zinc-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-teal-500 focus:border-transparent w-64"
         }
       ),
-      /* @__PURE__ */ m("div", { className: "flex gap-2 flex-wrap", children: [
+      /* @__PURE__ */ c("div", { className: "flex gap-2 flex-wrap", children: [
         /* @__PURE__ */ e(
           "button",
           {
             onClick: () => t(null),
-            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"}`,
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${i === 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((a) => /* @__PURE__ */ e(
+        d.map((o) => /* @__PURE__ */ e(
           "button",
           {
-            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
+            onClick: () => t(o),
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${i === 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
           },
-          a
+          o
         ))
       ] })
     ] }),
-    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,
+    m.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-12 text-gray-500 dark:text-zinc-400", children: "No templates found matching your criteria." }) : /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: m.map((o) => /* @__PURE__ */ e(
+      kt,
       {
-        template: a,
-        onSelect: () => r(a.id)
+        template: o,
+        onSelect: () => r(o.id)
       },
-      a.id
+      o.id
     )) })
   ] });
 }
-function mt({ template: r, onSelect: s }) {
-  const t = r.workflow.nodes.length, o = r.workflow.edges.length, n = {
+function kt({ template: r, onSelect: i }) {
+  const t = r.workflow.nodes.length, a = r.workflow.edges.length, s = {
     quickchart: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
     mermaid: "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
     qr: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
     d3: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300"
   };
-  return /* @__PURE__ */ m("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden hover:shadow-lg transition-shadow", children: [
+  return /* @__PURE__ */ c("div", { className: "bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 overflow-hidden hover:shadow-lg transition-shadow", children: [
     /* @__PURE__ */ e("div", { className: "aspect-video bg-gray-100 dark:bg-zinc-900 flex items-center justify-center p-4", children: r.preview ? /* @__PURE__ */ e(
       "img",
       {
@@ -2423,7 +2741,7 @@ function mt({ template: r, onSelect: s }) {
         alt: r.name,
         className: "max-w-full max-h-full object-contain"
       }
-    ) : /* @__PURE__ */ m("div", { className: "text-center text-gray-400 dark:text-zinc-500", children: [
+    ) : /* @__PURE__ */ c("div", { className: "text-center text-gray-400 dark:text-zinc-500", children: [
       /* @__PURE__ */ e(
         "svg",
         {
@@ -2444,20 +2762,20 @@ function mt({ template: r, onSelect: s }) {
       ),
       /* @__PURE__ */ e("span", { className: "text-sm", children: "No preview" })
     ] }) }),
-    /* @__PURE__ */ m("div", { className: "p-4", children: [
-      /* @__PURE__ */ m("div", { className: "flex items-start justify-between mb-2", children: [
+    /* @__PURE__ */ c("div", { className: "p-4", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-start justify-between mb-2", children: [
         /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: r.name }),
         /* @__PURE__ */ e(
           "span",
           {
-            className: `px-2 py-0.5 rounded text-xs font-medium ${n[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
+            className: `px-2 py-0.5 rounded text-xs font-medium ${s[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
             children: r.generator
           }
         )
       ] }),
       /* @__PURE__ */ e("p", { className: "text-sm text-gray-600 dark:text-zinc-400 mb-3", children: r.description }),
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-zinc-500 mb-4", children: [
-        /* @__PURE__ */ m("span", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-zinc-500 mb-4", children: [
+        /* @__PURE__ */ c("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",
             {
@@ -2471,7 +2789,7 @@ function mt({ template: r, onSelect: s }) {
           " node",
           t !== 1 ? "s" : ""
         ] }),
-        o > 0 && /* @__PURE__ */ m("span", { className: "flex items-center gap-1", children: [
+        a > 0 && /* @__PURE__ */ c("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",
             {
@@ -2481,23 +2799,23 @@ function mt({ template: r, onSelect: s }) {
               d: "M13 7l5 5m0 0l-5 5m5-5H6"
             }
           ) }),
-          o,
+          a,
           " edge",
-          o !== 1 ? "s" : ""
+          a !== 1 ? "s" : ""
         ] })
       ] }),
-      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((i) => /* @__PURE__ */ e(
+      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((d) => /* @__PURE__ */ e(
         "span",
         {
           className: "px-2 py-0.5 bg-gray-100 dark:bg-zinc-700 text-gray-600 dark:text-zinc-400 rounded text-xs",
-          children: i
+          children: d
         },
-        i
+        d
       )) }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: s,
+          onClick: i,
           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"
         }
@@ -2505,67 +2823,67 @@ function mt({ template: r, onSelect: s }) {
     ] })
   ] });
 }
-function ut({
+function wt({
   workflow: r,
-  isActive: s,
+  isActive: i,
   onLoad: t,
-  onDelete: o,
-  onRename: n,
-  onDuplicate: i
+  onDelete: a,
+  onRename: s,
+  onDuplicate: d
 }) {
-  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();
+  const [m, o] = N(!1), [n, u] = N(r.name), [l, p] = N(!1), f = () => {
+    n.trim() && n !== r.name && s(n.trim()), o(!1);
+  }, b = (k) => {
+    const g = new Date(k), w = (/* @__PURE__ */ new Date()).getTime() - g.getTime(), h = Math.floor(w / 6e4), z = Math.floor(w / 36e5), S = Math.floor(w / 864e5);
+    return h < 1 ? "Just now" : h < 60 ? `${h}m ago` : z < 24 ? `${z}h ago` : S < 7 ? `${S}d ago` : g.toLocaleDateString();
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ c(
     "div",
     {
-      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"}`,
+      className: `group relative p-3 rounded-lg border transition-colors ${i ? "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: [
-            l ? /* @__PURE__ */ e(
+        /* @__PURE__ */ c("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ c("button", { onClick: t, className: "flex-1 text-left min-w-0", children: [
+            m ? /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: c,
-                onChange: (x) => u(x.target.value),
-                onBlur: h,
-                onKeyDown: (x) => {
-                  x.key === "Enter" && h(), x.key === "Escape" && (u(r.name), a(!1));
+                value: n,
+                onChange: (k) => u(k.target.value),
+                onBlur: f,
+                onKeyDown: (k) => {
+                  k.key === "Enter" && f(), k.key === "Escape" && (u(r.name), o(!1));
                 },
                 className: "w-full px-1 py-0.5 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500",
                 autoFocus: !0,
-                onClick: (x) => x.stopPropagation()
+                onClick: (k) => k.stopPropagation()
               }
             ) : /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: r.name }),
-            /* @__PURE__ */ m("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
+            /* @__PURE__ */ c("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
               r.nodes.length,
               " nodes · Updated ",
               b(r.updatedAt)
             ] })
           ] }),
-          /* @__PURE__ */ m("div", { className: "relative", children: [
+          /* @__PURE__ */ c("div", { className: "relative", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: (x) => {
-                  x.stopPropagation(), p(!d);
+                onClick: (k) => {
+                  k.stopPropagation(), p(!l);
                 },
                 className: "p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity",
                 children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
               }
             ),
-            d && /* @__PURE__ */ m(P, { children: [
+            l && /* @__PURE__ */ c(j, { 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__ */ c("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(), a(!0), p(!1);
+                    onClick: (k) => {
+                      k.stopPropagation(), o(!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"
@@ -2574,8 +2892,8 @@ function ut({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (x) => {
-                      x.stopPropagation(), i(), p(!1);
+                    onClick: (k) => {
+                      k.stopPropagation(), d(), 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: "Duplicate"
@@ -2584,8 +2902,8 @@ function ut({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (x) => {
-                      x.stopPropagation(), window.confirm("Delete this workflow?") && o(), p(!1);
+                    onClick: (k) => {
+                      k.stopPropagation(), window.confirm("Delete this workflow?") && a(), 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"
@@ -2595,24 +2913,24 @@ function ut({
             ] })
           ] })
         ] }),
-        s && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
+        i && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
       ]
     }
   );
 }
-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);
+function vt() {
+  const r = x((l) => l.showLibrary), i = x((l) => l.toggleLibrary), t = x((l) => l.savedWorkflows), a = x((l) => l.activeWorkflowId), s = x((l) => l.loadWorkflow), d = x((l) => l.deleteWorkflow), m = x((l) => l.renameWorkflow), o = x((l) => l.duplicateWorkflow), n = x((l) => l.newWorkflow);
   if (!r) return null;
-  const u = [...t].sort((d, p) => p.updatedAt - d.updatedAt);
-  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: [
+  const u = [...t].sort((l, p) => p.updatedAt - l.updatedAt);
+  return /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: i }),
+    /* @__PURE__ */ c("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__ */ c("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: s,
+            onClick: i,
             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",
@@ -2626,11 +2944,11 @@ function gt() {
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "p-4 border-b border-zinc-200 dark:border-zinc-700", children: /* @__PURE__ */ m(
+      /* @__PURE__ */ e("div", { className: "p-4 border-b border-zinc-200 dark:border-zinc-700", children: /* @__PURE__ */ c(
         "button",
         {
           onClick: () => {
-            c(), s(), window.dispatchEvent(new window.CustomEvent("new-workflow-created"));
+            n(), i(), 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: [
@@ -2647,7 +2965,7 @@ function gt() {
           ]
         }
       ) }),
-      /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: u.length === 0 ? /* @__PURE__ */ m("div", { className: "text-center py-8", children: [
+      /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: u.length === 0 ? /* @__PURE__ */ c("div", { className: "text-center py-8", children: [
         /* @__PURE__ */ e("div", { className: "w-12 h-12 mx-auto mb-3 rounded-full bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center", children: /* @__PURE__ */ e(
           "svg",
           {
@@ -2668,21 +2986,21 @@ function gt() {
         ) }),
         /* @__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(
-        ut,
+      ] }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: u.map((l) => /* @__PURE__ */ e(
+        wt,
         {
-          workflow: d,
-          isActive: d.id === o,
+          workflow: l,
+          isActive: l.id === a,
           onLoad: () => {
-            n(d.id), s();
+            s(l.id), i();
           },
-          onDelete: () => i(d.id),
-          onRename: (p) => l(d.id, p),
-          onDuplicate: () => a(d.id)
+          onDelete: () => d(l.id),
+          onRename: (p) => m(l.id, p),
+          onDuplicate: () => o(l.id)
         },
-        d.id
+        l.id
       )) }) }),
-      /* @__PURE__ */ m("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-zinc-700 text-xs text-zinc-500 dark:text-zinc-400", children: [
+      /* @__PURE__ */ c("div", { className: "px-4 py-3 border-t border-zinc-200 dark:border-zinc-700 text-xs text-zinc-500 dark:text-zinc-400", children: [
         t.length,
         " workflow",
         t.length !== 1 ? "s" : "",
@@ -2691,7 +3009,7 @@ function gt() {
     ] })
   ] });
 }
-const pt = [
+const yt = [
   {
     id: "openai",
     name: "OpenAI",
@@ -2720,7 +3038,7 @@ const pt = [
     placeholder: "sk-or-...",
     docsUrl: "https://openrouter.ai/keys"
   }
-], ht = [
+], Nt = [
   {
     id: "ollama",
     name: "Ollama",
@@ -2736,21 +3054,21 @@ const pt = [
     docsUrl: "https://lmstudio.ai"
   }
 ];
-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 = () => {
+function zt({ provider: r }) {
+  const i = $((f) => f.ai), t = $((f) => f.setAIProvider), a = i[r.id], s = (a == null ? void 0 : a.enabled) ?? !1, d = (a == null ? void 0 : a.apiKey) ?? "", [m, o] = N(d), [n, u] = N(!1), l = () => {
     t(r.id, {
-      apiKey: l,
-      enabled: !n
+      apiKey: m,
+      enabled: !s
     });
-  }, p = (h) => {
-    a(h), t(r.id, {
-      apiKey: h,
-      enabled: n
+  }, p = (f) => {
+    o(f), t(r.id, {
+      apiKey: f,
+      enabled: s
     });
   };
-  return /* @__PURE__ */ m("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
-    /* @__PURE__ */ m("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ c("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
+    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e("span", { className: "font-medium text-gray-900 dark:text-white", children: r.name }),
         /* @__PURE__ */ e(
           "a",
@@ -2764,13 +3082,13 @@ function ft({ provider: r }) {
         )
       ] }),
       /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 dark:text-zinc-400 mt-0.5", children: r.description }),
-      /* @__PURE__ */ e("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ m("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ e("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ c("div", { className: "relative flex-1", children: [
         /* @__PURE__ */ e(
           "input",
           {
-            type: c ? "text" : "password",
-            value: l,
-            onChange: (h) => p(h.target.value),
+            type: n ? "text" : "password",
+            value: m,
+            onChange: (f) => p(f.target.value),
             placeholder: r.placeholder,
             className: "w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500"
           }
@@ -2779,9 +3097,9 @@ function ft({ provider: r }) {
           "button",
           {
             type: "button",
-            onClick: () => u(!c),
+            onClick: () => u(!n),
             className: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300",
-            children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: c ? /* @__PURE__ */ e(
+            children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: n ? /* @__PURE__ */ e(
               "path",
               {
                 strokeLinecap: "round",
@@ -2805,33 +3123,33 @@ function ft({ provider: r }) {
     /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(
       "button",
       {
-        onClick: d,
-        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"}`,
+        onClick: l,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${s ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${n ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${s ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function 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 = () => {
+function Ct({ provider: r }) {
+  const i = $((l) => l.ai), t = $((l) => l.setAIProvider), a = i[r.id], s = (a == null ? void 0 : a.enabled) ?? !1, d = (a == null ? void 0 : a.baseUrl) ?? r.defaultUrl, [m, o] = N(d), n = () => {
     t(r.id, {
-      baseUrl: l,
-      enabled: !n
+      baseUrl: m,
+      enabled: !s
     });
-  }, u = (d) => {
-    a(d), t(r.id, {
-      baseUrl: d,
-      enabled: n
+  }, u = (l) => {
+    o(l), t(r.id, {
+      baseUrl: l,
+      enabled: s
     });
   };
-  return /* @__PURE__ */ m("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
-    /* @__PURE__ */ m("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ c("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
+    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e("span", { className: "font-medium text-gray-900 dark:text-white", children: r.name }),
         /* @__PURE__ */ e(
           "a",
@@ -2850,8 +3168,8 @@ function bt({ provider: r }) {
         "input",
         {
           type: "text",
-          value: l,
-          onChange: (d) => u(d.target.value),
+          value: m,
+          onChange: (l) => u(l.target.value),
           placeholder: r.defaultUrl,
           className: "w-full px-3 py-1.5 text-sm border border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500"
         }
@@ -2860,30 +3178,30 @@ function bt({ provider: r }) {
     /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(
       "button",
       {
-        onClick: c,
-        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"}`,
+        onClick: n,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${s ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${n ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${s ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-function 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: [
+function St() {
+  const r = $((t) => t.showSettings), i = $((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__ */ c("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__ */ c("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ c("div", { children: [
         /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "AI Provider Settings" }),
         /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 dark:text-zinc-400 mt-0.5", children: "Configure your AI providers for vision and text generation" })
       ] }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: s,
+          onClick: i,
           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",
@@ -2897,16 +3215,16 @@ function xt() {
         }
       )
     ] }),
-    /* @__PURE__ */ m("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
-      /* @__PURE__ */ m("section", { children: [
+    /* @__PURE__ */ c("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
+      /* @__PURE__ */ c("section", { children: [
         /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300 mb-3", children: "Cloud Providers" }),
-        /* @__PURE__ */ e("div", { className: "space-y-3", children: pt.map((t) => /* @__PURE__ */ e(ft, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: yt.map((t) => /* @__PURE__ */ e(zt, { provider: t }, t.id)) })
       ] }),
-      /* @__PURE__ */ m("section", { children: [
+      /* @__PURE__ */ c("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: ht.map((t) => /* @__PURE__ */ e(bt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: Nt.map((t) => /* @__PURE__ */ e(Ct, { 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("div", { className: "bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4", children: /* @__PURE__ */ c("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
           "svg",
           {
@@ -2925,7 +3243,7 @@ function xt() {
             )
           }
         ),
-        /* @__PURE__ */ m("div", { children: [
+        /* @__PURE__ */ c("div", { children: [
           /* @__PURE__ */ e("p", { className: "text-sm font-medium text-blue-900 dark:text-blue-300", children: "Your keys stay local" }),
           /* @__PURE__ */ e("p", { className: "text-sm text-blue-700 dark:text-blue-400 mt-1", children: "API keys are stored in your browser only and sent directly to providers. They never pass through our servers." })
         ] })
@@ -2934,67 +3252,67 @@ function xt() {
     /* @__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: s,
+        onClick: i,
         className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
         children: "Done"
       }
     ) })
   ] }) }) : null;
 }
-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 = ae(c);
-      u && (o(u), window.history.replaceState({}, "", window.location.pathname));
+function Ut() {
+  const [r, i] = N("editor"), t = x((o) => o.addNode), a = x((o) => o.loadTemplate);
+  M(() => {
+    const n = new URLSearchParams(window.location.search).get("template");
+    if (n) {
+      const u = ne(n);
+      u && (a(u), window.history.replaceState({}, "", window.location.pathname));
     }
-  }, [o]), $(() => {
-    const a = () => {
-      s("editor");
+  }, [a]), M(() => {
+    const o = () => {
+      i("editor");
     };
-    return window.addEventListener("workflow-loaded", a), () => {
-      window.removeEventListener("workflow-loaded", a);
+    return window.addEventListener("workflow-loaded", o), () => {
+      window.removeEventListener("workflow-loaded", o);
     };
   }, []);
-  const n = C(
-    (a) => {
-      const c = ae(a);
-      c && (o(c), s("editor"));
+  const s = C(
+    (o) => {
+      const n = ne(o);
+      n && (a(n), i("editor"));
     },
-    [o]
-  ), i = C(
-    (a) => {
+    [a]
+  ), d = C(
+    (o) => {
       var u;
-      a.preventDefault();
-      const c = a.dataTransfer.getData("application/json");
-      if (c)
+      o.preventDefault();
+      const n = o.dataTransfer.getData("application/json");
+      if (n)
         try {
-          const d = JSON.parse(c), p = (u = document.querySelector(".react-flow")) == null ? void 0 : u.getBoundingClientRect();
+          const l = JSON.parse(n), p = (u = document.querySelector(".react-flow")) == null ? void 0 : u.getBoundingClientRect();
           if (!p) return;
-          const h = {
-            x: a.clientX - p.left,
-            y: a.clientY - p.top
+          const f = {
+            x: o.clientX - p.left,
+            y: o.clientY - p.top
           };
-          t(d, h);
-        } catch (d) {
-          console.error("Failed to parse dropped node:", d);
+          t(l, f);
+        } catch (l) {
+          console.error("Failed to parse dropped node:", l);
         }
     },
     [t]
-  ), l = C((a) => {
-    a.preventDefault(), a.dataTransfer.dropEffect = "move";
+  ), m = C((o) => {
+    o.preventDefault(), o.dataTransfer.dropEffect = "move";
   }, []);
-  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(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: [
+  return /* @__PURE__ */ c(Se, { children: [
+    /* @__PURE__ */ e(St, {}),
+    /* @__PURE__ */ e(vt, {}),
+    /* @__PURE__ */ c("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
+      /* @__PURE__ */ e(nt, {}),
+      /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ c("div", { className: "flex", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => s("editor"),
+            onClick: () => i("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"
           }
@@ -3002,7 +3320,7 @@ function St() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => s("gallery"),
+            onClick: () => i("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"
           }
@@ -3010,40 +3328,40 @@ function St() {
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => s("templates"),
+            onClick: () => i("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(P, { children: [
-          /* @__PURE__ */ e(Ve, {}),
-          /* @__PURE__ */ e("div", { className: "flex-1", onDrop: i, onDragOver: l, children: /* @__PURE__ */ e(Ge, {}) }),
-          /* @__PURE__ */ e(Ke, {})
+      /* @__PURE__ */ c("div", { className: "flex-1 flex overflow-hidden", children: [
+        r === "editor" && /* @__PURE__ */ c(j, { children: [
+          /* @__PURE__ */ e(Ye, {}),
+          /* @__PURE__ */ e("div", { className: "flex-1", onDrop: d, onDragOver: m, children: /* @__PURE__ */ e(Qe, {}) }),
+          /* @__PURE__ */ e(Xe, {})
         ] }),
-        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 }) })
+        r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(st, {}) }),
+        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(xt, { onSelect: s }) })
       ] })
     ] })
   ] });
 }
 export {
-  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,
-  f as useWorkflowStore
+  St as AISettings,
+  Ut as App,
+  st as Gallery,
+  Xe as NodeInspector,
+  Ye as NodePalette,
+  xt as TemplateGallery,
+  nt as Toolbar,
+  Je as UploadGallery,
+  Qe as WorkflowEditor,
+  vt as WorkflowLibrary,
+  bt as getCategories,
+  ne as getTemplateById,
+  $t as getTemplatesByCategory,
+  Mt as searchTemplates,
+  O as templates,
+  x as useWorkflowStore
 };
 //# sourceMappingURL=index.js.map