@teamflojo/floimg-studio-ui 0.1.6 → 0.2.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { jsxs as c, jsx as e, Fragment as P } from "react/jsx-runtime";
-import { memo as T, useRef as xe, useCallback as C, useState as N, useEffect as M, useMemo as te } from "react";
-import ke, { Handle as L, Position as W, 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 _ } from "@tanstack/react-query";
-function Ie(r, i) {
+import { jsxs as s, jsx as e, Fragment as U } from "react/jsx-runtime";
+import { memo as E, useRef as Q, useCallback as L, useState as I, useEffect as D, useMemo as ne } from "react";
+import we, { Handle as A, Position as P, applyNodeChanges as Ne, applyEdgeChanges as ze, MarkerType as Ce, Background as Ie, Controls as Se, MiniMap as Le, ReactFlowProvider as We, useReactFlow as Ae } from "reactflow";
+import { create as ce } from "zustand";
+import { useQuery as F } from "@tanstack/react-query";
+function Pe(r, l) {
   let t;
   try {
     t = r();
@@ -11,250 +11,265 @@ function Ie(r, i) {
     return;
   }
   return {
-    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);
+    getItem: (o) => {
+      var i;
+      const m = (a) => a === null ? null : JSON.parse(a, void 0), d = (i = t.getItem(o)) != null ? i : null;
+      return d instanceof Promise ? d.then(m) : m(d);
     },
-    setItem: (s, d) => t.setItem(s, JSON.stringify(d, void 0)),
-    removeItem: (s) => t.removeItem(s)
+    setItem: (o, i) => t.setItem(o, JSON.stringify(i, void 0)),
+    removeItem: (o) => t.removeItem(o)
   };
 }
-const H = (r) => (i) => {
+const Y = (r) => (l) => {
   try {
-    const t = r(i);
+    const t = r(l);
     return t instanceof Promise ? t : {
-      then(a) {
-        return H(a)(t);
+      then(n) {
+        return Y(n)(t);
       },
-      catch(a) {
+      catch(n) {
         return this;
       }
     };
   } catch (t) {
     return {
-      then(a) {
+      then(n) {
         return this;
       },
-      catch(a) {
-        return H(a)(t);
+      catch(n) {
+        return Y(n)(t);
       }
     };
   }
-}, Le = (r, i) => (t, a, s) => {
-  let d = {
-    storage: Ie(() => localStorage),
-    partialize: (g) => g,
+}, $e = (r, l) => (t, n, o) => {
+  let i = {
+    storage: Pe(() => localStorage),
+    partialize: (v) => v,
     version: 0,
-    merge: (g, v) => ({
-      ...v,
-      ...g
+    merge: (v, y) => ({
+      ...y,
+      ...v
     }),
-    ...i
+    ...l
   }, m = !1;
-  const o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
-  let u = d.storage;
-  if (!u)
+  const d = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set();
+  let p = i.storage;
+  if (!p)
     return r(
-      (...g) => {
+      (...v) => {
         console.warn(
-          `[zustand persist middleware] Unable to update item '${d.name}', the given storage is currently unavailable.`
-        ), t(...g);
+          `[zustand persist middleware] Unable to update item '${i.name}', the given storage is currently unavailable.`
+        ), t(...v);
       },
-      a,
-      s
+      n,
+      o
     );
-  const l = () => {
-    const g = d.partialize({ ...a() });
-    return u.setItem(d.name, {
-      state: g,
-      version: d.version
+  const c = () => {
+    const v = i.partialize({ ...n() });
+    return p.setItem(i.name, {
+      state: v,
+      version: i.version
     });
-  }, p = s.setState;
-  s.setState = (g, v) => (p(g, v), l());
-  const f = r(
-    (...g) => (t(...g), l()),
-    a,
-    s
+  }, u = o.setState;
+  o.setState = (v, y) => (u(v, y), c());
+  const h = r(
+    (...v) => (t(...v), c()),
+    n,
+    o
   );
-  s.getInitialState = () => f;
-  let b;
-  const k = () => {
-    var g, v;
-    if (!u) return;
-    m = !1, o.forEach((h) => {
-      var z;
-      return h((z = a()) != null ? z : f);
+  o.getInitialState = () => h;
+  let f;
+  const w = () => {
+    var v, y;
+    if (!p) return;
+    m = !1, d.forEach((g) => {
+      var N;
+      return g((N = n()) != null ? N : h);
     });
-    const w = ((v = d.onRehydrateStorage) == null ? void 0 : v.call(d, (g = a()) != null ? g : f)) || void 0;
-    return H(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
+    const b = ((y = i.onRehydrateStorage) == null ? void 0 : y.call(i, (v = n()) != null ? v : h)) || void 0;
+    return Y(p.getItem.bind(p))(i.name).then((g) => {
+      if (g)
+        if (typeof g.version == "number" && g.version !== i.version) {
+          if (i.migrate) {
+            const N = i.migrate(
+              g.state,
+              g.version
             );
-            return z instanceof Promise ? z.then((S) => [!0, S]) : [!0, z];
+            return N instanceof Promise ? N.then((W) => [!0, W]) : [!0, N];
           }
           console.error(
             "State loaded from storage couldn't be migrated since no migrate function was provided"
           );
         } else
-          return [!1, h.state];
+          return [!1, g.state];
       return [!1, void 0];
-    }).then((h) => {
-      var z;
-      const [S, B] = h;
-      if (b = d.merge(
-        B,
-        (z = a()) != null ? z : f
-      ), t(b, !0), S)
-        return l();
+    }).then((g) => {
+      var N;
+      const [W, x] = g;
+      if (f = i.merge(
+        x,
+        (N = n()) != null ? N : h
+      ), t(f, !0), W)
+        return c();
     }).then(() => {
-      w == null || w(b, void 0), b = a(), m = !0, n.forEach((h) => h(b));
-    }).catch((h) => {
-      w == null || w(void 0, h);
+      b == null || b(f, void 0), f = n(), m = !0, a.forEach((g) => g(f));
+    }).catch((g) => {
+      b == null || b(void 0, g);
     });
   };
-  return s.persist = {
-    setOptions: (g) => {
-      d = {
-        ...d,
-        ...g
-      }, g.storage && (u = g.storage);
+  return o.persist = {
+    setOptions: (v) => {
+      i = {
+        ...i,
+        ...v
+      }, v.storage && (p = v.storage);
     },
     clearStorage: () => {
-      u == null || u.removeItem(d.name);
+      p == null || p.removeItem(i.name);
     },
-    getOptions: () => d,
-    rehydrate: () => k(),
+    getOptions: () => i,
+    rehydrate: () => w(),
     hasHydrated: () => m,
-    onHydrate: (g) => (o.add(g), () => {
-      o.delete(g);
+    onHydrate: (v) => (d.add(v), () => {
+      d.delete(v);
     }),
-    onFinishHydration: (g) => (n.add(g), () => {
-      n.delete(g);
+    onFinishHydration: (v) => (a.add(v), () => {
+      a.delete(v);
     })
-  }, d.skipHydration || k(), b || f;
-}, ie = Le, I = "/api";
-async function A(r, i) {
+  }, i.skipHydration || w(), f || h;
+}, me = $e, $ = "/api";
+async function j(r, l) {
   const t = await fetch(r, {
-    ...i,
+    ...l,
     headers: {
       "Content-Type": "application/json",
-      ...i == null ? void 0 : i.headers
+      ...l == null ? void 0 : l.headers
     }
   });
   if (!t.ok) {
-    const a = await t.json().catch(() => ({ error: "Unknown error" }));
-    throw new Error(a.error || `HTTP ${t.status}`);
+    const n = await t.json().catch(() => ({ error: "Unknown error" }));
+    throw new Error(n.error || `HTTP ${t.status}`);
   }
   return t.json();
 }
-async function We() {
-  return A(`${I}/nodes/generators`);
+async function Me() {
+  return j(`${$}/nodes/generators`);
+}
+async function je() {
+  return j(`${$}/nodes/transforms`);
 }
-async function Ae() {
-  return A(`${I}/nodes/transforms`);
+async function De() {
+  return j(`${$}/nodes/text`);
+}
+async function Te() {
+  return j(`${$}/nodes/vision`);
 }
-async function De(r, i, t) {
-  return A(`${I}/execute/sync`, {
+async function Ue(r, l, t) {
+  return j(`${$}/execute/sync`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: i, aiProviders: t })
+    body: JSON.stringify({ nodes: r, edges: l, aiProviders: t })
   });
 }
-async function $e(r, i) {
-  return A(`${I}/export/yaml`, {
+async function Oe(r, l) {
+  return j(`${$}/export/yaml`, {
     method: "POST",
-    body: JSON.stringify({ nodes: r, edges: i })
+    body: JSON.stringify({ nodes: r, edges: l })
   });
 }
-async function Me() {
-  return A(`${I}/images`);
+async function Re() {
+  return j(`${$}/images`);
 }
-function F(r) {
-  return `${I}/images/${r}/blob`;
+function oe(r) {
+  return `${$}/images/${r}/blob`;
 }
-async function je(r) {
+async function Ee(r) {
   try {
-    return await A(`${I}/images/${r}/workflow`);
+    return await j(`${$}/images/${r}/workflow`);
   } catch {
     return null;
   }
 }
-async function Pe(r) {
-  const i = new FormData();
-  i.append("file", r);
-  const t = await fetch(`${I}/uploads`, {
+async function Be(r) {
+  const l = new FormData();
+  l.append("file", r);
+  const t = await fetch(`${$}/uploads`, {
     method: "POST",
-    body: i
+    body: l
   });
   if (!t.ok) {
-    const a = await t.json().catch(() => ({ error: "Upload failed" }));
-    throw new Error(a.error || `HTTP ${t.status}`);
+    const n = await t.json().catch(() => ({ error: "Upload failed" }));
+    throw new Error(n.error || `HTTP ${t.status}`);
   }
   return t.json();
 }
-async function Te() {
-  return A(`${I}/uploads`);
+async function Ge() {
+  return j(`${$}/uploads`);
 }
-async function Ue(r) {
-  const i = await fetch(`${I}/uploads/${r}`, {
+async function Ve(r) {
+  const l = await fetch(`${$}/uploads/${r}`, {
     method: "DELETE"
   });
-  if (!i.ok)
-    throw new Error(`Failed to delete upload: ${i.status}`);
+  if (!l.ok)
+    throw new Error(`Failed to delete upload: ${l.status}`);
 }
-function de(r) {
-  return `${I}/uploads/${r}/blob`;
+function pe(r) {
+  return `${$}/uploads/${r}/blob`;
 }
-async function Ee(r) {
-  return A(`${I}/import`, {
+async function Fe(r) {
+  return j(`${$}/import`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
-async function Oe(r) {
-  return A(`${I}/import/validate`, {
+async function He(r) {
+  return j(`${$}/import/validate`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
-const re = "http://localhost:11434", ae = "http://localhost:1234", $ = se()(
-  ie(
-    (r, i) => ({
+async function _e(r) {
+  return j(`${$}/generate/workflow`, {
+    method: "POST",
+    body: JSON.stringify(r)
+  });
+}
+async function Ke() {
+  return j(`${$}/generate/status`);
+}
+const se = "http://localhost:11434", ie = "http://localhost:1234", O = ce()(
+  me(
+    (r, l) => ({
       ai: {
         ollama: {
-          baseUrl: re,
+          baseUrl: se,
           enabled: !1
         },
         lmstudio: {
-          baseUrl: ae,
+          baseUrl: ie,
           enabled: !1
         }
       },
       showSettings: !1,
-      setAIProvider: (t, a) => {
-        r((s) => ({
+      setAIProvider: (t, n) => {
+        r((o) => ({
           ai: {
-            ...s.ai,
-            [t]: a
+            ...o.ai,
+            [t]: n
           }
         }));
       },
       clearAIProvider: (t) => {
-        r((a) => {
-          const s = { ...a.ai };
-          return delete s[t], { ai: s };
+        r((n) => {
+          const o = { ...n.ai };
+          return delete o[t], { ai: o };
         });
       },
       openSettings: () => r({ showSettings: !0 }),
       closeSettings: () => r({ showSettings: !1 }),
       getConfiguredProviders: () => {
-        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;
+        var o, i, m, d, a, p, c;
+        const { ai: t } = l(), n = {};
+        return (o = t.openai) != null && o.enabled && t.openai.apiKey && (n.openai = { apiKey: t.openai.apiKey }), (i = t.anthropic) != null && i.enabled && t.anthropic.apiKey && (n.anthropic = { apiKey: t.anthropic.apiKey }), (m = t.gemini) != null && m.enabled && t.gemini.apiKey && (n.gemini = { apiKey: t.gemini.apiKey }), (d = t.grok) != null && d.enabled && t.grok.apiKey && (n.grok = { apiKey: t.grok.apiKey }), (a = t.openrouter) != null && a.enabled && t.openrouter.apiKey && (n.openrouter = { apiKey: t.openrouter.apiKey }), (p = t.ollama) != null && p.enabled && (n.ollama = { baseUrl: t.ollama.baseUrl || se }), (c = t.lmstudio) != null && c.enabled && (n.lmstudio = { baseUrl: t.lmstudio.baseUrl || ie }), n;
       }
     }),
     {
@@ -264,17 +279,17 @@ const re = "http://localhost:11434", ae = "http://localhost:1234", $ = se()(
     }
   )
 );
-let Be = 0;
-function K() {
-  return `node_${++Be}`;
+let qe = 0;
+function G() {
+  return `node_${++qe}`;
 }
-function oe() {
-  const r = Date.now(), i = Math.random().toString(36).substring(2, 8);
-  return `wf_${r}_${i}`;
+function le() {
+  const r = Date.now(), l = Math.random().toString(36).substring(2, 8);
+  return `wf_${r}_${l}`;
 }
-const x = se()(
-  ie(
-    (r, i) => ({
+const k = ce()(
+  me(
+    (r, l) => ({
       nodes: [],
       edges: [],
       selectedNodeId: null,
@@ -282,6 +297,8 @@ const x = se()(
       previewVisible: {},
       generators: [],
       transforms: [],
+      textProviders: [],
+      visionProviders: [],
       // Workflow persistence state
       savedWorkflows: [],
       activeWorkflowId: null,
@@ -291,36 +308,38 @@ const x = se()(
       execution: {
         status: "idle",
         imageIds: [],
+        imageUrls: [],
         previews: {},
         dataOutputs: {},
         nodeStatus: {}
       },
       loadTemplate: (t) => {
-        const a = /* @__PURE__ */ new Map(), s = t.workflow.nodes.map((m) => {
-          const o = K();
-          return a.set(m.id, o), {
-            id: o,
+        const n = /* @__PURE__ */ new Map(), o = t.workflow.nodes.map((m) => {
+          const d = G();
+          return n.set(m.id, d), {
+            id: d,
             type: m.type,
             position: m.position,
             data: m.data
           };
-        }), d = t.workflow.edges.map((m) => {
-          const o = a.get(m.source) || m.source, n = a.get(m.target) || m.target;
+        }), i = t.workflow.edges.map((m) => {
+          const d = n.get(m.source) || m.source, a = n.get(m.target) || m.target;
           return {
-            id: `edge_${o}_${n}`,
-            source: o,
-            target: n
+            id: `edge_${d}_${a}`,
+            source: d,
+            target: a
           };
         });
         r({
-          nodes: s,
-          edges: d,
+          nodes: o,
+          edges: i,
           selectedNodeId: null,
           currentTemplateId: t.id,
           previewVisible: {},
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -337,6 +356,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -344,198 +364,245 @@ const x = se()(
         });
       },
       togglePreview: (t) => {
-        r((a) => ({
+        r((n) => ({
           previewVisible: {
-            ...a.previewVisible,
-            [t]: a.previewVisible[t] === !1
+            ...n.previewVisible,
+            [t]: n.previewVisible[t] === !1
             // default true, toggle
           }
         }));
       },
       setGenerators: (t) => r({ generators: t }),
       setTransforms: (t) => r({ transforms: t }),
-      addNode: (t, a) => {
-        var o, n, u;
-        const s = K();
-        let d;
+      setTextProviders: (t) => r({ textProviders: t }),
+      setVisionProviders: (t) => r({ visionProviders: t }),
+      addNode: (t, n) => {
+        var d, a, p;
+        const o = G();
+        let i;
         if (t.type === "generator")
-          d = {
+          i = {
             generatorName: t.name,
-            params: R(t)
+            params: _(t),
+            isAI: t.isAI,
+            // Track if this is an AI generator (can accept text input)
+            acceptsReferenceImages: t.acceptsReferenceImages,
+            maxReferenceImages: t.maxReferenceImages
           };
         else if (t.type === "transform")
-          d = {
+          i = {
             operation: t.name,
-            params: R(t)
+            providerName: t.providerName,
+            // Track which provider this transform belongs to
+            isAI: t.isAI,
+            // Track if this is an AI transform (can accept text input)
+            params: _(t),
+            acceptsReferenceImages: t.acceptsReferenceImages,
+            maxReferenceImages: t.maxReferenceImages
           };
         else if (t.type === "input")
-          d = {
+          i = {
             uploadId: void 0,
             filename: void 0,
             mime: void 0
           };
         else if (t.type === "vision")
-          d = {
+          i = {
             providerName: t.name,
-            params: R(t)
+            providerLabel: t.label,
+            // Human-readable label (e.g., "Gemini Vision")
+            params: _(t)
           };
         else if (t.type === "text")
-          d = {
+          i = {
             providerName: t.name,
-            params: R(t)
+            providerLabel: t.label,
+            // Human-readable label (e.g., "Gemini Text")
+            params: _(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 c = ((d = t.params) == null ? void 0 : d.properties) || {}, u = ((a = c.provider) == null ? void 0 : a.default) || "filesystem";
+          i = {
+            destination: ((p = c.destination) == null ? void 0 : p.default) || "./output/image.png",
+            provider: u
           };
         }
         const m = {
-          id: s,
+          id: o,
           type: t.type,
-          position: a,
-          data: d
+          position: n,
+          data: i
         };
-        r((l) => ({
-          nodes: [...l.nodes, m]
+        r((c) => ({
+          nodes: [...c.nodes, m]
         }));
       },
-      updateNodeData: (t, a) => {
-        r((s) => ({
-          nodes: s.nodes.map(
-            (d) => d.id === t ? { ...d, data: { ...d.data, ...a } } : d
+      updateNodeData: (t, n) => {
+        r((o) => ({
+          nodes: o.nodes.map(
+            (i) => i.id === t ? { ...i, data: { ...i.data, ...n } } : i
           )
         }));
       },
       deleteNode: (t) => {
-        r((a) => ({
-          nodes: a.nodes.filter((s) => s.id !== t),
-          edges: a.edges.filter((s) => s.source !== t && s.target !== t),
-          selectedNodeId: a.selectedNodeId === t ? null : a.selectedNodeId
+        r((n) => ({
+          nodes: n.nodes.filter((o) => o.id !== t),
+          edges: n.edges.filter((o) => o.source !== t && o.target !== t),
+          selectedNodeId: n.selectedNodeId === t ? null : n.selectedNodeId
         }));
       },
+      duplicateNode: (t) => {
+        const n = l(), o = n.nodes.find((d) => d.id === t);
+        if (!o) return;
+        const i = G(), m = {
+          ...o,
+          id: i,
+          position: {
+            x: o.position.x + 50,
+            y: o.position.y + 50
+          },
+          data: JSON.parse(JSON.stringify(o.data)),
+          // Deep clone
+          selected: !1
+        };
+        r({
+          nodes: [...n.nodes, m],
+          selectedNodeId: i
+          // Select the new node
+        });
+      },
       setNodes: (t) => r({ nodes: t }),
       addEdge: (t) => {
         if (!t.source || !t.target) return;
-        const s = {
-          id: `edge_${t.source}_${t.target}`,
+        const n = [t.sourceHandle, t.targetHandle].filter(Boolean).join("_"), i = {
+          id: n ? `edge_${t.source}_${t.target}_${n}` : `edge_${t.source}_${t.target}`,
           source: t.source,
-          target: t.target
+          target: t.target,
+          sourceHandle: t.sourceHandle ?? void 0,
+          targetHandle: t.targetHandle ?? void 0
         };
-        r((d) => ({
-          edges: [...d.edges, s]
+        r((m) => ({
+          edges: [...m.edges, i]
         }));
       },
       deleteEdge: (t) => {
-        r((a) => ({
-          edges: a.edges.filter((s) => s.id !== t)
+        r((n) => ({
+          edges: n.edges.filter((o) => o.id !== t)
         }));
       },
       setEdges: (t) => r({ edges: t }),
       setSelectedNode: (t) => r({ selectedNodeId: t }),
       execute: async () => {
-        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";
+        const { nodes: t, edges: n } = l(), o = t.map((a) => ({
+          id: a.id,
+          type: a.type,
+          position: a.position,
+          data: a.data
+        })), i = n.map((a) => ({
+          id: a.id,
+          source: a.source,
+          target: a.target,
+          sourceHandle: a.sourceHandle ?? void 0,
+          targetHandle: a.targetHandle ?? void 0
+        })), m = O.getState().getConfiguredProviders(), d = {};
+        for (const a of t)
+          d[a.id] = "running";
         r({
           execution: {
             status: "running",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
-            nodeStatus: o
+            nodeStatus: d
           }
         });
         try {
-          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({
+          const a = await Ue(o, i, m), p = {};
+          for (const c of t)
+            p[c.id] = a.status === "completed" ? "completed" : "error";
+          a.status === "completed" ? r({
             execution: {
               status: "completed",
-              imageIds: n.imageIds,
-              previews: n.previews || {},
-              dataOutputs: n.dataOutputs || {},
-              nodeStatus: u
+              imageIds: a.imageIds,
+              imageUrls: a.imageUrls || [],
+              previews: a.previews || {},
+              dataOutputs: a.dataOutputs || {},
+              nodeStatus: p
             }
           }) : r({
             execution: {
               status: "error",
               imageIds: [],
+              imageUrls: [],
               previews: {},
               dataOutputs: {},
-              nodeStatus: u,
-              error: n.error
+              nodeStatus: p,
+              error: a.error
             }
           });
-        } catch (n) {
-          const u = {};
-          for (const l of t)
-            u[l.id] = "error";
+        } catch (a) {
+          const p = {};
+          for (const c of t)
+            p[c.id] = "error";
           r({
             execution: {
               status: "error",
               imageIds: [],
+              imageUrls: [],
               previews: {},
               dataOutputs: {},
-              nodeStatus: u,
-              error: n instanceof Error ? n.message : "Unknown error"
+              nodeStatus: p,
+              error: a instanceof Error ? a.message : "Unknown error"
             }
           });
         }
       },
       exportToYaml: async () => {
-        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
+        const { nodes: t, edges: n } = l(), o = t.map((d) => ({
+          id: d.id,
+          type: d.type,
+          position: d.position,
+          data: d.data
+        })), i = n.map((d) => ({
+          id: d.id,
+          source: d.source,
+          target: d.target,
+          sourceHandle: d.sourceHandle ?? void 0,
+          targetHandle: d.targetHandle ?? void 0
         }));
-        return (await $e(s, d)).yaml;
+        return (await Oe(o, i)).yaml;
       },
-      importFromYaml: (t, a, s) => {
-        const d = /* @__PURE__ */ new Map(), m = t.map((n) => {
-          const u = K();
-          return d.set(n.id, u), {
-            id: u,
-            type: n.type,
-            position: n.position,
-            data: n.data
+      importFromYaml: (t, n, o) => {
+        const i = /* @__PURE__ */ new Map(), m = t.map((a) => {
+          const p = G();
+          return i.set(a.id, p), {
+            id: p,
+            type: a.type,
+            position: a.position,
+            data: a.data
           };
-        }), o = a.map((n) => {
-          const u = d.get(n.source) || n.source, l = d.get(n.target) || n.target;
+        }), d = n.map((a) => {
+          const p = i.get(a.source) || a.source, c = i.get(a.target) || a.target;
           return {
-            id: `edge_${u}_${l}`,
-            source: u,
-            target: l
+            id: `edge_${p}_${c}`,
+            source: p,
+            target: c
           };
         });
         r({
           nodes: m,
-          edges: o,
+          edges: d,
           selectedNodeId: null,
           currentTemplateId: null,
           previewVisible: {},
           activeWorkflowId: null,
-          activeWorkflowName: s || "Imported Workflow",
+          activeWorkflowName: o || "Imported Workflow",
           hasUnsavedChanges: !0,
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -559,6 +626,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -567,54 +635,55 @@ const x = se()(
       },
       saveWorkflow: (t) => {
         const {
-          nodes: a,
-          edges: s,
-          activeWorkflowId: d,
+          nodes: n,
+          edges: o,
+          activeWorkflowId: i,
           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
+          savedWorkflows: d,
+          currentTemplateId: a
+        } = l(), p = Date.now();
+        if (i) {
+          const c = d.map(
+            (u) => u.id === i ? { ...u, name: t || m, nodes: n, edges: o, updatedAt: p } : u
           );
           return r({
-            savedWorkflows: l,
+            savedWorkflows: c,
             activeWorkflowName: t || m,
             hasUnsavedChanges: !1
-          }), d;
+          }), i;
         } else {
-          const l = oe(), p = {
-            id: l,
+          const c = le(), u = {
+            id: c,
             name: t || m,
-            nodes: a,
-            edges: s,
-            createdAt: u,
-            updatedAt: u,
-            templateId: n || void 0
+            nodes: n,
+            edges: o,
+            createdAt: p,
+            updatedAt: p,
+            templateId: a || void 0
           };
           return r({
-            savedWorkflows: [...o, p],
-            activeWorkflowId: l,
+            savedWorkflows: [...d, u],
+            activeWorkflowId: c,
             activeWorkflowName: t || m,
             hasUnsavedChanges: !1
-          }), l;
+          }), c;
         }
       },
       loadWorkflow: (t) => {
-        const { savedWorkflows: a } = i(), s = a.find((d) => d.id === t);
-        s && r({
-          nodes: s.nodes,
-          edges: s.edges,
+        const { savedWorkflows: n } = l(), o = n.find((i) => i.id === t);
+        o && r({
+          nodes: o.nodes,
+          edges: o.edges,
           selectedNodeId: null,
-          currentTemplateId: s.templateId || null,
+          currentTemplateId: o.templateId || null,
           previewVisible: {},
           activeWorkflowId: t,
-          activeWorkflowName: s.name,
+          activeWorkflowName: o.name,
           hasUnsavedChanges: !1,
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -622,9 +691,9 @@ const x = se()(
         });
       },
       deleteWorkflow: (t) => {
-        const { savedWorkflows: a, activeWorkflowId: s } = i(), d = a.filter((m) => m.id !== t);
-        r(s === t ? {
-          savedWorkflows: d,
+        const { savedWorkflows: n, activeWorkflowId: o } = l(), i = n.filter((m) => m.id !== t);
+        r(o === t ? {
+          savedWorkflows: i,
           nodes: [],
           edges: [],
           selectedNodeId: null,
@@ -636,32 +705,125 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
           }
-        } : { savedWorkflows: d });
+        } : { savedWorkflows: i });
       },
-      renameWorkflow: (t, a) => {
-        const { savedWorkflows: s, activeWorkflowId: d } = i(), m = s.map(
-          (o) => o.id === t ? { ...o, name: a, updatedAt: Date.now() } : o
+      renameWorkflow: (t, n) => {
+        const { savedWorkflows: o, activeWorkflowId: i } = l(), m = o.map(
+          (d) => d.id === t ? { ...d, name: n, updatedAt: Date.now() } : d
         );
         r({
           savedWorkflows: m,
-          ...d === t ? { activeWorkflowName: a } : {}
+          ...i === t ? { activeWorkflowName: n } : {}
         });
       },
       duplicateWorkflow: (t) => {
-        const { savedWorkflows: a } = i(), s = a.find((n) => n.id === t);
-        if (!s) return "";
-        const d = Date.now(), m = oe(), o = {
-          ...s,
+        const { savedWorkflows: n } = l(), o = n.find((a) => a.id === t);
+        if (!o) return "";
+        const i = Date.now(), m = le(), d = {
+          ...o,
           id: m,
-          name: `${s.name} (Copy)`,
-          createdAt: d,
-          updatedAt: d
+          name: `${o.name} (Copy)`,
+          createdAt: i,
+          updatedAt: i
         };
-        return r({ savedWorkflows: [...a, o] }), m;
+        return r({ savedWorkflows: [...n, d] }), m;
+      },
+      loadGeneratedWorkflow: (t) => {
+        const n = /* @__PURE__ */ new Map(), o = 250, i = 150, m = 3, d = t.nodes.map((p, c) => {
+          const u = G();
+          n.set(p.id, u);
+          const h = p.nodeType.split(":"), f = h[0], w = Math.floor(c / m), y = {
+            x: 100 + c % m * o,
+            y: 100 + w * i
+          };
+          let b;
+          if (f === "generator")
+            b = {
+              generatorName: h.slice(1).join(":"),
+              params: p.parameters,
+              isAI: !0
+              // Assume AI since we're generating from AI
+            };
+          else if (f === "transform") {
+            const g = h[1];
+            b = {
+              operation: h.slice(2).join(":"),
+              providerName: g,
+              params: p.parameters
+            };
+          } else if (f === "input")
+            b = {
+              uploadId: void 0,
+              filename: void 0,
+              mime: void 0
+            };
+          else if (f === "vision")
+            b = {
+              providerName: h.slice(1).join(":"),
+              params: p.parameters
+            };
+          else if (f === "text") {
+            const g = h.slice(1).join(":"), N = p.parameters.jsonSchema, W = N != null && N.properties ? {
+              type: "object",
+              properties: Object.fromEntries(
+                Object.entries(N.properties).map(([x, C]) => [
+                  x,
+                  {
+                    type: C.type || "string",
+                    description: C.description
+                  }
+                ])
+              )
+            } : void 0;
+            b = {
+              providerName: g,
+              params: p.parameters,
+              outputSchema: W
+            };
+          } else
+            b = {
+              destination: p.parameters.destination || "./output/image.png",
+              provider: p.parameters.provider || "filesystem"
+            };
+          return {
+            id: u,
+            type: f,
+            position: y,
+            data: b
+          };
+        }), a = t.edges.map((p) => {
+          const c = n.get(p.source) || p.source, u = n.get(p.target) || p.target, h = [p.sourceHandle, p.targetHandle].filter(Boolean).join("_");
+          return {
+            id: h ? `edge_${c}_${u}_${h}` : `edge_${c}_${u}`,
+            source: c,
+            target: u,
+            sourceHandle: p.sourceHandle ?? void 0,
+            targetHandle: p.targetHandle ?? void 0
+          };
+        });
+        r({
+          nodes: d,
+          edges: a,
+          selectedNodeId: null,
+          currentTemplateId: null,
+          previewVisible: {},
+          activeWorkflowId: null,
+          activeWorkflowName: "AI Generated Workflow",
+          hasUnsavedChanges: !0,
+          execution: {
+            status: "idle",
+            imageIds: [],
+            imageUrls: [],
+            previews: {},
+            dataOutputs: {},
+            nodeStatus: {}
+          }
+        });
       }
     }),
     {
@@ -673,28 +835,28 @@ const x = se()(
     }
   )
 );
-function R(r) {
+function _(r) {
   var t;
-  const i = {};
+  const l = {};
   if ((t = r.params) != null && t.properties)
-    for (const [a, s] of Object.entries(r.params.properties))
-      s.default !== void 0 && (i[a] = s.default);
-  return i;
+    for (const [n, o] of Object.entries(r.params.properties))
+      o.default !== void 0 && (l[n] = o.default);
+  return l;
 }
-function U(r) {
+function B(r) {
   return r === "running" ? "border-yellow-400 animate-pulse" : r === "completed" ? "border-green-500" : r === "error" ? "border-red-500" : "";
 }
-function Q({ nodeId: r, color: i }) {
-  const t = x((s) => s.previewVisible[r] !== !1), a = x((s) => s.togglePreview);
+function X({ nodeId: r, color: l }) {
+  const t = k((o) => o.previewVisible[r] !== !1), n = k((o) => o.togglePreview);
   return /* @__PURE__ */ e(
     "button",
     {
-      onClick: (s) => {
-        s.stopPropagation(), a(r);
+      onClick: (o) => {
+        o.stopPropagation(), n(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 ${i}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e("svg", { className: `w-3.5 h-3.5 ${l}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: t ? /* @__PURE__ */ e(
         "path",
         {
           strokeLinecap: "round",
@@ -714,72 +876,139 @@ function Q({ nodeId: r, color: i }) {
     }
   );
 }
-const Re = T(function({
-  id: i,
+const Je = E(function({
+  id: l,
   data: t,
-  selected: a
+  selected: n
 }) {
-  const s = x((u) => u.execution.previews[i]), d = x((u) => u.execution.nodeStatus[i]), m = x((u) => u.previewVisible[i] !== !1), n = U(d) || (a ? "border-blue-500" : "border-blue-200");
-  return /* @__PURE__ */ c(
+  const o = k((u) => u.execution.previews[l]), i = k((u) => u.execution.nodeStatus[l]), m = k((u) => u.previewVisible[l] !== !1), a = B(i) || (n ? "border-blue-500" : "border-blue-200"), p = t.isAI, c = t.acceptsReferenceImages;
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${n}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
       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: [
+        p && /* @__PURE__ */ e(
+          A,
+          {
+            type: "target",
+            position: P.Top,
+            id: "text",
+            className: "w-3 h-3 !bg-pink-500",
+            title: "Text input (optional prompt from text/vision node)"
+          }
+        ),
+        c && /* @__PURE__ */ e(
+          A,
+          {
+            type: "target",
+            position: P.Left,
+            id: "references",
+            className: "w-3 h-3 !bg-violet-500",
+            style: { top: "50%" },
+            title: `Reference images (up to ${t.maxReferenceImages || 14})`
+          }
+        ),
+        o && 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: o, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ s("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(Q, { nodeId: i, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(X, { nodeId: l, 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, l]) => /* @__PURE__ */ c("div", { className: "truncate", children: [
+          p && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
+          c && /* @__PURE__ */ e("div", { className: "text-[10px] text-violet-500 dark:text-violet-400 mb-1", children: "← Connect reference images" }),
+          /* @__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, h]) => /* @__PURE__ */ s("div", { className: "truncate", children: [
             u,
             ": ",
-            String(l).slice(0, 20)
+            String(h).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-blue-500" })
+        /* @__PURE__ */ e(A, { type: "source", position: P.Right, className: "w-3 h-3 !bg-blue-500" })
       ]
     }
   );
-}), Fe = T(function({
-  id: i,
+}), Qe = E(function({
+  id: l,
   data: t,
-  selected: a
+  selected: n
 }) {
-  const s = x((u) => u.execution.previews[i]), d = x((u) => u.execution.nodeStatus[i]), m = x((u) => u.previewVisible[i] !== !1), n = U(d) || (a ? "border-teal-500" : "border-teal-200");
-  return /* @__PURE__ */ c(
+  const o = k((u) => u.execution.previews[l]), i = k((u) => u.execution.nodeStatus[l]), m = k((u) => u.previewVisible[l] !== !1), a = B(i) || (n ? "border-teal-500" : "border-teal-200"), p = t.isAI, c = t.acceptsReferenceImages;
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${n}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${a}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-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(Q, { nodeId: i, color: "text-teal-500 dark:text-teal-400" })
+        p && /* @__PURE__ */ e(
+          A,
+          {
+            type: "target",
+            position: P.Top,
+            id: "text",
+            className: "w-3 h-3 !bg-pink-500",
+            title: "Text input (optional prompt from text/vision node)"
+          }
+        ),
+        /* @__PURE__ */ e(A, { type: "target", position: P.Left, id: "image", className: "w-3 h-3 !bg-teal-500" }),
+        c && /* @__PURE__ */ e(
+          A,
+          {
+            type: "target",
+            position: P.Bottom,
+            id: "references",
+            className: "w-3 h-3 !bg-violet-500",
+            title: `Reference images (up to ${t.maxReferenceImages || 13})`
+          }
+        ),
+        o && 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: o, alt: "Preview", className: "w-full h-24 object-contain" }) }),
+        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
+            p ? /* @__PURE__ */ s("svg", { className: "w-3 h-3 text-purple-500", fill: "currentColor", viewBox: "0 0 20 20", children: [
+              /* @__PURE__ */ e("path", { d: "M13 7H7v6h6V7z" }),
+              /* @__PURE__ */ e(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M7 2a1 1 0 012 0v1h2V2a1 1 0 112 0v1h2a2 2 0 012 2v2h1a1 1 0 110 2h-1v2h1a1 1 0 110 2h-1v2a2 2 0 01-2 2h-2v1a1 1 0 11-2 0v-1H9v1a1 1 0 11-2 0v-1H5a2 2 0 01-2-2v-2H2a1 1 0 110-2h1V9H2a1 1 0 010-2h1V5a2 2 0 012-2h2V2zM5 5h10v10H5V5z",
+                  clipRule: "evenodd"
+                }
+              )
+            ] }) : /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-teal-500" }),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: `font-semibold text-sm ${p ? "text-purple-700 dark:text-purple-400" : "text-teal-700 dark:text-teal-400"}`,
+                children: t.operation
+              }
+            ),
+            /* @__PURE__ */ e(
+              X,
+              {
+                nodeId: l,
+                color: p ? "text-purple-500 dark:text-purple-400" : "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, l]) => /* @__PURE__ */ c("div", { className: "truncate", children: [
+          p && /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 mb-1", children: "↑ Connect text node for dynamic prompt" }),
+          c && /* @__PURE__ */ e("div", { className: "text-[10px] text-violet-500 dark:text-violet-400 mb-1", children: "↓ Connect reference images" }),
+          /* @__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, h]) => /* @__PURE__ */ s("div", { className: "truncate", children: [
             u,
             ": ",
-            String(l).slice(0, 20)
+            String(h).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-teal-500" })
+        /* @__PURE__ */ e(A, { type: "source", position: P.Right, className: "w-3 h-3 !bg-teal-500" })
       ]
     }
   );
-}), Ve = T(function({ id: i, data: t, selected: a }) {
-  const s = x((o) => o.execution.nodeStatus[i]), m = U(s) || (a ? "border-green-500" : "border-green-200");
-  return /* @__PURE__ */ c(
+}), Ye = E(function({ id: l, data: t, selected: n }) {
+  const o = k((d) => d.execution.nodeStatus[l]), m = B(o) || (n ? "border-green-500" : "border-green-200");
+  return /* @__PURE__ */ s(
     "div",
     {
       className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${m}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-green-500" }),
-        /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ e(A, { type: "target", position: P.Left, className: "w-3 h-3 !bg-green-500" }),
+        /* @__PURE__ */ s("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" })
         ] }),
@@ -787,54 +1016,54 @@ const Re = T(function({
       ]
     }
   );
-}), Ge = T(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 = U(d) || (a ? "border-amber-500" : "border-amber-200"), p = C(
-    async (v) => {
+}), Xe = E(function({ id: l, data: t, selected: n }) {
+  const o = k((y) => y.execution.previews[l]), i = k((y) => y.execution.nodeStatus[l]), m = k((y) => y.previewVisible[l] !== !1), d = k((y) => y.updateNodeData), a = Q(null), c = B(i) || (n ? "border-amber-500" : "border-amber-200"), u = L(
+    async (y) => {
       try {
-        const w = await Pe(v);
-        o(i, {
-          uploadId: w.id,
-          filename: w.filename,
-          mime: w.mime
+        const b = await Be(y);
+        d(l, {
+          uploadId: b.id,
+          filename: b.filename,
+          mime: b.mime
         });
-      } catch (w) {
-        console.error("Upload failed:", w);
+      } catch (b) {
+        console.error("Upload failed:", b);
       }
     },
-    [i, o]
-  ), f = C(
-    (v) => {
-      v.preventDefault(), v.stopPropagation();
-      const w = v.dataTransfer.files[0];
-      w && w.type.startsWith("image/") && p(w);
+    [l, d]
+  ), h = L(
+    (y) => {
+      y.preventDefault(), y.stopPropagation();
+      const b = y.dataTransfer.files[0];
+      b && b.type.startsWith("image/") && u(b);
     },
-    [p]
-  ), 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);
+    [u]
+  ), f = L((y) => {
+    y.preventDefault(), y.stopPropagation();
+  }, []), w = L(
+    (y) => {
+      var g;
+      const b = (g = y.target.files) == null ? void 0 : g[0];
+      b && u(b);
     },
-    [p]
-  ), g = s || (t.uploadId ? de(t.uploadId) : null);
-  return /* @__PURE__ */ c(
+    [u]
+  ), v = o || (t.uploadId ? pe(t.uploadId) : null);
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${l}`,
-      onDrop: f,
-      onDragOver: b,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${c}`,
+      onDrop: h,
+      onDragOver: f,
       children: [
-        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(
+        v && 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: v, alt: "Uploaded", className: "w-full h-24 object-contain" }) }) : v ? 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 v;
-              return (v = n.current) == null ? void 0 : v.click();
+              var y;
+              return (y = a.current) == null ? void 0 : y.click();
             },
-            children: /* @__PURE__ */ c("div", { className: "text-center text-amber-600 dark:text-amber-400", children: [
+            children: /* @__PURE__ */ s("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" })
             ] })
@@ -843,48 +1072,48 @@ const Re = T(function({
         /* @__PURE__ */ e(
           "input",
           {
-            ref: n,
+            ref: a,
             type: "file",
             accept: "image/*",
             className: "hidden",
-            onChange: k
+            onChange: w
           }
         ),
-        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ s("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(Q, { nodeId: i, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(X, { nodeId: l, color: "text-amber-500 dark:text-amber-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: t.filename || "No image selected" })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-amber-500" })
+        /* @__PURE__ */ e(A, { type: "source", position: P.Right, className: "w-3 h-3 !bg-amber-500" })
       ]
     }
   );
-}), qe = T(function({
-  id: i,
+}), Ze = E(function({
+  id: l,
   data: t,
-  selected: a
+  selected: n
 }) {
-  var n, u;
-  const s = x((l) => l.execution.nodeStatus[i]), d = x((l) => {
-    var p;
-    return (p = l.execution.dataOutputs) == null ? void 0 : p[i];
-  }), o = U(s) || (a ? "border-cyan-500" : "border-cyan-200");
-  return /* @__PURE__ */ c(
+  var c, u, h;
+  const o = k((f) => f.execution.nodeStatus[l]), i = k((f) => {
+    var w;
+    return (w = f.execution.dataOutputs) == null ? void 0 : w[l];
+  }), d = B(o) || (n ? "border-cyan-500" : "border-cyan-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], p = a.length > 0;
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.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__ */ e(A, { type: "target", position: P.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__ */ s("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
+          (u = i.content) == null ? void 0 : u.slice(0, 200),
+          (((h = i.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
-        /* @__PURE__ */ 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__ */ s("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-2", children: [
+            /* @__PURE__ */ s("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",
@@ -895,35 +1124,75 @@ const Re = T(function({
                 }
               )
             ] }),
-            /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-cyan-700 dark:text-cyan-400", children: t.providerName })
+            /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-cyan-700 dark:text-cyan-400", children: t.providerLabel || t.providerName })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ c("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ s("div", { className: "truncate", children: [
             String(t.params.prompt).slice(0, 30),
             "..."
-          ] }) : null })
+          ] }) : null }),
+          p && /* @__PURE__ */ s("div", { className: "mt-2 pt-2 border-t border-cyan-200 dark:border-cyan-800", children: [
+            /* @__PURE__ */ e("div", { className: "text-[10px] text-cyan-500 dark:text-cyan-400 font-medium mb-1", children: "Outputs:" }),
+            a.map(([f]) => /* @__PURE__ */ s(
+              "div",
+              {
+                className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ e("span", { className: "w-1.5 h-1.5 rounded-full bg-cyan-400" }),
+                  f
+                ]
+              },
+              f
+            ))
+          ] })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-cyan-500" })
+        p ? /* @__PURE__ */ s(U, { children: [
+          /* @__PURE__ */ e(
+            A,
+            {
+              type: "source",
+              position: P.Right,
+              id: "output",
+              className: "w-3 h-3 !bg-cyan-500",
+              style: { top: "50%" },
+              title: "Full JSON output"
+            }
+          ),
+          a.map(([f, w], v) => /* @__PURE__ */ e(
+            A,
+            {
+              type: "source",
+              position: P.Right,
+              id: `output.${f}`,
+              className: "w-2.5 h-2.5 !bg-cyan-400",
+              style: {
+                top: `${70 + v * 14}%`
+              },
+              title: `${f}: ${w.description || w.type}`
+            },
+            f
+          ))
+        ] }) : /* @__PURE__ */ e(A, { type: "source", position: P.Right, className: "w-3 h-3 !bg-cyan-500" })
       ]
     }
   );
-}), Ke = T(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 = l.execution.dataOutputs) == null ? void 0 : p[i];
-  }), o = U(s) || (a ? "border-pink-500" : "border-pink-200");
-  return /* @__PURE__ */ c(
+}), et = E(function({ id: l, data: t, selected: n }) {
+  var c, u, h;
+  const o = k((f) => f.execution.nodeStatus[l]), i = k((f) => {
+    var w;
+    return (w = f.execution.dataOutputs) == null ? void 0 : w[l];
+  }), d = B(o) || (n ? "border-pink-500" : "border-pink-200"), a = (c = t.outputSchema) != null && c.properties ? Object.entries(t.outputSchema.properties) : [], p = a.length > 0;
+  return /* @__PURE__ */ s(
     "div",
     {
-      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
+      className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${d}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.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__ */ e(A, { type: "target", position: P.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__ */ s("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
+          (u = i.content) == null ? void 0 : u.slice(0, 200),
+          (((h = i.content) == null ? void 0 : h.length) || 0) > 200 && "..."
         ] }) }),
-        /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ s("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ s("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",
               {
@@ -932,29 +1201,69 @@ const Re = T(function({
                 clipRule: "evenodd"
               }
             ) }),
-            /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-pink-700 dark:text-pink-400", children: t.providerName })
+            /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-pink-700 dark:text-pink-400", children: t.providerLabel || t.providerName })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ c("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: t.params.prompt ? /* @__PURE__ */ s("div", { className: "truncate", children: [
             String(t.params.prompt).slice(0, 30),
             "..."
-          ] }) : null })
+          ] }) : null }),
+          p && /* @__PURE__ */ s("div", { className: "mt-2 pt-2 border-t border-pink-200 dark:border-pink-800", children: [
+            /* @__PURE__ */ e("div", { className: "text-[10px] text-pink-500 dark:text-pink-400 font-medium mb-1", children: "Outputs:" }),
+            a.map(([f]) => /* @__PURE__ */ s(
+              "div",
+              {
+                className: "text-[10px] text-gray-500 dark:text-zinc-400 flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ e("span", { className: "w-1.5 h-1.5 rounded-full bg-pink-400" }),
+                  f
+                ]
+              },
+              f
+            ))
+          ] })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-pink-500" })
+        p ? /* @__PURE__ */ s(U, { children: [
+          /* @__PURE__ */ e(
+            A,
+            {
+              type: "source",
+              position: P.Right,
+              id: "output",
+              className: "w-3 h-3 !bg-pink-500",
+              style: { top: "50%" },
+              title: "Full JSON output"
+            }
+          ),
+          a.map(([f, w], v) => /* @__PURE__ */ e(
+            A,
+            {
+              type: "source",
+              position: P.Right,
+              id: `output.${f}`,
+              className: "w-2.5 h-2.5 !bg-pink-400",
+              style: {
+                top: `${70 + v * 14}%`
+              },
+              title: `${f}: ${w.description || w.type}`
+            },
+            f
+          ))
+        ] }) : /* @__PURE__ */ e(A, { type: "source", position: P.Right, className: "w-3 h-3 !bg-pink-500" })
       ]
     }
   );
-}), _e = {
-  generator: Re,
-  transform: Fe,
-  save: Ve,
-  input: Ge,
-  vision: qe,
-  text: Ke
-}, He = {
+}), tt = {
+  generator: Je,
+  transform: Qe,
+  save: Ye,
+  input: Xe,
+  vision: Ze,
+  text: et
+}, rt = {
   type: "smoothstep",
   animated: !1,
   markerEnd: {
-    type: ye.ArrowClosed,
+    type: Ce.ArrowClosed,
     color: "#64748b",
     width: 20,
     height: 20
@@ -964,50 +1273,52 @@ const Re = T(function({
     strokeWidth: 2
   }
 };
-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);
+function at() {
+  const r = k((h) => h.nodes), l = k((h) => h.edges), t = k((h) => h.setNodes), n = k((h) => h.setEdges), o = k((h) => h.addEdge), i = k((h) => h.setSelectedNode), m = L(
+    (h) => {
+      const { source: f, target: w } = h;
+      if (!f || !w) return !1;
+      const v = r.find((g) => g.id === f), y = r.find((g) => g.id === w);
+      return !(!v || !y || v.type === "save" || y.type === "generator" || y.type === "input" || l.find(
+        (g) => g.target === w && g.targetHandle === h.targetHandle
+      ) || f === w);
     },
-    [r, i]
-  ), o = C(
-    (f) => {
-      t(we(f, r));
+    [r, l]
+  ), d = L(
+    (h) => {
+      t(Ne(h, r));
     },
     [r, t]
-  ), n = C(
-    (f) => {
-      a(ve(f, i));
+  ), a = L(
+    (h) => {
+      n(ze(h, l));
     },
-    [i, a]
-  ), u = C(
-    (f) => {
-      s(f);
+    [l, n]
+  ), p = L(
+    (h) => {
+      o(h);
     },
-    [s]
-  ), l = C(
-    (f, b) => {
-      d(b.id);
+    [o]
+  ), c = L(
+    (h, f) => {
+      i(f.id);
     },
-    [d]
-  ), p = C(() => {
-    d(null);
-  }, [d]);
-  return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ c(
-    ke,
+    [i]
+  ), u = L(() => {
+    i(null);
+  }, [i]);
+  return /* @__PURE__ */ e("div", { className: "h-full w-full", children: /* @__PURE__ */ s(
+    we,
     {
       nodes: r,
-      edges: i,
-      onNodesChange: o,
-      onEdgesChange: n,
-      onConnect: u,
-      onNodeClick: l,
-      onPaneClick: p,
-      nodeTypes: _e,
-      defaultEdgeOptions: He,
+      edges: l,
+      onNodesChange: d,
+      onEdgesChange: a,
+      onConnect: p,
+      onNodeClick: c,
+      onPaneClick: u,
+      nodeTypes: tt,
+      defaultEdgeOptions: rt,
       isValidConnection: m,
       nodesDraggable: !0,
       nodesConnectable: !0,
@@ -1017,93 +1328,103 @@ function Qe() {
       snapToGrid: !0,
       snapGrid: [15, 15],
       children: [
-        /* @__PURE__ */ e(Ne, {}),
-        /* @__PURE__ */ e(ze, {}),
-        /* @__PURE__ */ e(Ce, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
+        /* @__PURE__ */ e(Ie, {}),
+        /* @__PURE__ */ e(Se, {}),
+        /* @__PURE__ */ e(Le, { nodeStrokeWidth: 3, zoomable: !0, pannable: !0 })
       ]
     }
   ) });
 }
-function Je({ onSelect: r }) {
-  const [i, t] = N([]), [a, s] = N(!0), [d, m] = N(null), o = async () => {
+function nt({ onSelect: r }) {
+  const [l, t] = I([]), [n, o] = I(!0), [i, m] = I(null), d = async () => {
     try {
-      s(!0);
-      const l = await Te();
-      t(l), m(null);
-    } catch (l) {
-      m(l instanceof Error ? l.message : "Failed to load uploads");
+      o(!0);
+      const c = await Ge();
+      t(c), m(null);
+    } catch (c) {
+      m(c instanceof Error ? c.message : "Failed to load uploads");
     } finally {
-      s(!1);
+      o(!1);
     }
   };
-  M(() => {
-    o();
+  D(() => {
+    d();
   }, []);
-  const n = async (l, p) => {
-    if (p.stopPropagation(), !!confirm("Delete this upload?"))
+  const a = async (c, u) => {
+    if (u.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await Ue(l), t((f) => f.filter((b) => b.id !== l));
-      } catch (f) {
-        console.error("Failed to delete:", f);
+        await Ve(c), t((h) => h.filter((f) => f.id !== c));
+      } catch (h) {
+        console.error("Failed to delete:", h);
       }
-  }, 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,
+  }, p = (c) => c < 1024 ? `${c} B` : c < 1024 * 1024 ? `${(c / 1024).toFixed(1)} KB` : `${(c / (1024 * 1024)).toFixed(1)} MB`;
+  return n ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "Loading uploads..." }) : i ? /* @__PURE__ */ s("div", { className: "p-4 text-center text-red-500 dark:text-red-400", children: [
+    i,
     /* @__PURE__ */ e(
       "button",
       {
-        onClick: o,
+        onClick: d,
         className: "ml-2 text-teal-500 dark:text-teal-400 hover:underline",
         children: "Retry"
       }
     )
-  ] }) : 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(
+  ] }) : l.length === 0 ? /* @__PURE__ */ e("div", { className: "p-4 text-center text-gray-500 dark:text-zinc-400", children: "No uploads yet. Drag an image onto an Input node to upload." }) : /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-2", children: l.map((c) => /* @__PURE__ */ s(
     "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(l),
+      onClick: () => r == null ? void 0 : r(c),
       children: [
         /* @__PURE__ */ e(
           "img",
           {
-            src: de(l.id),
-            alt: l.filename,
+            src: pe(c.id),
+            alt: c.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) => n(l.id, p),
+            onClick: (u) => a(c.id, u),
             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: 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) })
+        /* @__PURE__ */ e("div", { className: "p-1 text-xs truncate bg-white dark:bg-zinc-800 text-gray-800 dark:text-zinc-200", children: c.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: p(c.size) })
       ]
     },
-    l.id
+    c.id
   )) }) });
 }
-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 } = _({
+function ot() {
+  const r = k((x) => x.setGenerators), l = k((x) => x.setTransforms), t = k((x) => x.setTextProviders), n = k((x) => x.setVisionProviders), o = k((x) => x.generators), i = k((x) => x.transforms), m = k((x) => x.textProviders), d = k((x) => x.visionProviders), a = k((x) => x.addNode), [p, c] = I(!1), { data: u } = F({
     queryKey: ["generators"],
-    queryFn: We
-  }), { data: n } = _({
+    queryFn: Me
+  }), { data: h } = F({
     queryKey: ["transforms"],
-    queryFn: Ae
+    queryFn: je
+  }), { data: f } = F({
+    queryKey: ["textProviders"],
+    queryFn: De
+  }), { data: w } = F({
+    queryKey: ["visionProviders"],
+    queryFn: Te
   });
-  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 = {
+  D(() => {
+    u && r(u);
+  }, [u, r]), D(() => {
+    h && l(h);
+  }, [h, l]), D(() => {
+    f && t(f);
+  }, [f, t]), D(() => {
+    w && n(w);
+  }, [w, n]);
+  const v = (x, C) => {
+    x.dataTransfer.setData("application/json", JSON.stringify(C)), x.dataTransfer.effectAllowed = "move";
+  }, y = (x) => {
+    a(x, { x: 250, y: 150 + Math.random() * 100 });
+  }, b = {
     id: "input:upload",
     type: "input",
     name: "upload",
@@ -1114,7 +1435,7 @@ function Ye() {
       type: "object",
       properties: {}
     }
-  }, f = {
+  }, g = {
     id: "save:filesystem",
     type: "save",
     name: "save",
@@ -1135,42 +1456,42 @@ function Ye() {
         }
       }
     }
-  }, b = t.reduce(
-    (g, v) => {
-      const w = v.category || "Other";
-      return g[w] || (g[w] = []), g[w].push(v), g;
+  }, N = o.reduce(
+    (x, C) => {
+      const S = C.category || "Other";
+      return x[S] || (x[S] = []), x[S].push(C), x;
     },
     {}
-  ), k = a.reduce(
-    (g, v) => {
-      const w = v.category || "Other";
-      return g[w] || (g[w] = []), g[w].push(v), g;
+  ), W = i.reduce(
+    (x, C) => {
+      const S = C.category || "Other";
+      return x[S] || (x[S] = []), x[S].push(C), x;
     },
     {}
   );
-  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: [
+  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__ */ s("div", { className: "p-4", children: [
     /* @__PURE__ */ e("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white mb-4", children: "Nodes" }),
-    /* @__PURE__ */ c("div", { className: "mb-6", children: [
-      /* @__PURE__ */ c("div", { className: "flex items-center justify-between mb-2", children: [
+    /* @__PURE__ */ s("div", { className: "mb-6", children: [
+      /* @__PURE__ */ s("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__ */ c(
+        /* @__PURE__ */ s(
           "button",
           {
-            onClick: () => m(!d),
+            onClick: () => c(!p),
             className: "text-xs text-amber-600 dark:text-amber-400 hover:text-amber-700 dark:hover:text-amber-300",
             children: [
-              d ? "Hide" : "Browse",
+              p ? "Hide" : "Browse",
               " Uploads"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ s(
         "div",
         {
           draggable: !0,
-          onDragStart: (g) => u(g, p),
-          onDoubleClick: () => l(p),
+          onDragStart: (x) => v(x, b),
+          onDoubleClick: () => y(b),
           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" }),
@@ -1178,56 +1499,90 @@ function Ye() {
           ]
         }
       ),
-      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, {}) })
+      p && /* @__PURE__ */ e("div", { className: "mt-2 border border-amber-200 dark:border-amber-700 rounded bg-white dark:bg-zinc-900 max-h-64 overflow-y-auto", children: /* @__PURE__ */ e(nt, {}) })
     ] }),
-    /* @__PURE__ */ c("div", { className: "mb-6", children: [
+    /* @__PURE__ */ s("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, 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 }),
-        v.map((w) => /* @__PURE__ */ c(
+      Object.entries(N).map(([x, C]) => /* @__PURE__ */ s("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: x }),
+        C.map((S) => /* @__PURE__ */ s(
           "div",
           {
             draggable: !0,
-            onDragStart: (h) => u(h, w),
-            onDoubleClick: () => l(w),
+            onDragStart: (T) => v(T, S),
+            onDoubleClick: () => y(S),
             className: "px-3 py-2 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors",
             children: [
-              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-blue-700 dark:text-blue-300", children: w.label }),
-              w.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: w.description })
+              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-blue-700 dark:text-blue-300", children: S.label }),
+              S.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: S.description })
             ]
           },
-          w.id
+          S.id
         ))
-      ] }, g))
+      ] }, x))
     ] }),
-    /* @__PURE__ */ c("div", { className: "mb-6", children: [
+    /* @__PURE__ */ s("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(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 }),
-        v.map((w) => /* @__PURE__ */ c(
+      Object.entries(W).map(([x, C]) => /* @__PURE__ */ s("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-1", children: x }),
+        C.map((S) => /* @__PURE__ */ s(
           "div",
           {
             draggable: !0,
-            onDragStart: (h) => u(h, w),
-            onDoubleClick: () => l(w),
+            onDragStart: (T) => v(T, S),
+            onDoubleClick: () => y(S),
             className: "px-3 py-2 bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-teal-100 dark:hover:bg-teal-900/50 transition-colors",
             children: [
-              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-teal-700 dark:text-teal-300", children: w.label }),
-              w.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: w.description })
+              /* @__PURE__ */ e("div", { className: "text-sm font-medium text-teal-700 dark:text-teal-300", children: S.label }),
+              S.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: S.description })
             ]
           },
-          w.id
+          S.id
         ))
-      ] }, g))
+      ] }, x))
     ] }),
-    /* @__PURE__ */ c("div", { className: "mb-6", children: [
+    m.length > 0 && /* @__PURE__ */ s("div", { className: "mb-6", children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-pink-600 dark:text-pink-400 uppercase tracking-wide mb-2", children: "AI Text" }),
+      m.map((x) => /* @__PURE__ */ s(
+        "div",
+        {
+          draggable: !0,
+          onDragStart: (C) => v(C, x),
+          onDoubleClick: () => y(x),
+          className: "px-3 py-2 bg-pink-50 dark:bg-pink-900/30 border border-pink-200 dark:border-pink-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-pink-100 dark:hover:bg-pink-900/50 transition-colors",
+          children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-pink-700 dark:text-pink-300", children: x.label }),
+            x.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: x.description })
+          ]
+        },
+        x.id
+      ))
+    ] }),
+    d.length > 0 && /* @__PURE__ */ s("div", { className: "mb-6", children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-cyan-600 dark:text-cyan-400 uppercase tracking-wide mb-2", children: "AI Vision" }),
+      d.map((x) => /* @__PURE__ */ s(
+        "div",
+        {
+          draggable: !0,
+          onDragStart: (C) => v(C, x),
+          onDoubleClick: () => y(x),
+          className: "px-3 py-2 bg-cyan-50 dark:bg-cyan-900/30 border border-cyan-200 dark:border-cyan-700 rounded mb-1 cursor-grab active:cursor-grabbing hover:bg-cyan-100 dark:hover:bg-cyan-900/50 transition-colors",
+          children: [
+            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-cyan-700 dark:text-cyan-300", children: x.label }),
+            x.description && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: x.description })
+          ]
+        },
+        x.id
+      ))
+    ] }),
+    /* @__PURE__ */ s("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__ */ c(
+      /* @__PURE__ */ s(
         "div",
         {
           draggable: !0,
-          onDragStart: (g) => u(g, f),
-          onDoubleClick: () => l(f),
+          onDragStart: (x) => v(x, g),
+          onDoubleClick: () => y(g),
           className: "px-3 py-2 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 rounded cursor-grab active:cursor-grabbing hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors",
           children: [
             /* @__PURE__ */ e("div", { className: "text-sm font-medium text-green-700 dark:text-green-300", children: "Save" }),
@@ -1238,120 +1593,153 @@ function Ye() {
     ] })
   ] }) });
 }
-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)
+function st() {
+  var f, w, v, y;
+  const r = k((b) => b.selectedNodeId), l = k((b) => b.nodes), t = k((b) => b.generators), n = k((b) => b.transforms), o = k((b) => b.textProviders), i = k((b) => b.visionProviders), m = k((b) => b.updateNodeData), d = k((b) => b.deleteNode), a = l.find((b) => b.id === r);
+  if (!a)
     return /* @__PURE__ */ e("div", { className: "w-80 bg-gray-50 dark:bg-zinc-800 border-l border-gray-200 dark:border-zinc-700 p-4", children: /* @__PURE__ */ e("div", { className: "text-gray-500 dark:text-zinc-400 text-sm", children: "Select a node to edit its properties" }) });
-  let 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, k) => {
-    if (m.type === "generator") {
-      const g = m.data;
-      s(m.id, {
-        params: { ...g.params, [b]: k }
+  let p, c = "";
+  if (a.type === "generator") {
+    const b = a.data, g = t.find((N) => N.name === b.generatorName);
+    p = (f = g == null ? void 0 : g.params) == null ? void 0 : f.properties, c = (g == null ? void 0 : g.label) || b.generatorName;
+  } else if (a.type === "transform") {
+    const b = a.data, g = n.find((N) => N.name === b.operation);
+    p = (w = g == null ? void 0 : g.params) == null ? void 0 : w.properties, c = (g == null ? void 0 : g.label) || b.operation;
+  } else if (a.type === "save") {
+    const g = a.data.provider === "floimg-cloud";
+    c = g ? "Save to FloImg Cloud" : "Save", p = {
+      destination: {
+        type: "string",
+        title: g ? "Filename" : "Destination",
+        description: g ? "Filename for cloud storage" : "File path to save the image"
+      }
+    };
+  } else if (a.type === "text") {
+    const b = a.data, g = o.find((N) => N.name === b.providerName);
+    p = (v = g == null ? void 0 : g.params) == null ? void 0 : v.properties, c = (g == null ? void 0 : g.label) || b.providerName;
+  } else if (a.type === "vision") {
+    const b = a.data, g = i.find((N) => N.name === b.providerName);
+    p = (y = g == null ? void 0 : g.params) == null ? void 0 : y.properties, c = (g == null ? void 0 : g.label) || b.providerName;
+  }
+  const u = (b, g) => {
+    if (a.type === "generator") {
+      const N = a.data;
+      m(a.id, {
+        params: { ...N.params, [b]: g }
+      });
+    } else if (a.type === "transform") {
+      const N = a.data;
+      m(a.id, {
+        params: { ...N.params, [b]: g }
       });
-    } else if (m.type === "transform") {
-      const g = m.data;
-      s(m.id, {
-        params: { ...g.params, [b]: k }
+    } else if (a.type === "save")
+      m(a.id, { [b]: g });
+    else if (a.type === "text") {
+      const N = a.data;
+      m(a.id, {
+        params: { ...N.params, [b]: g }
       });
-    } 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];
+    } else if (a.type === "vision") {
+      const N = a.data;
+      m(a.id, {
+        params: { ...N.params, [b]: g }
+      });
+    }
+  }, h = (b) => {
+    if (a.type === "generator")
+      return a.data.params[b];
+    if (a.type === "transform")
+      return a.data.params[b];
+    if (a.type === "save")
+      return a.data[b];
+    if (a.type === "text")
+      return a.data.params[b];
+    if (a.type === "vision")
+      return a.data.params[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__ */ 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 }),
+  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__ */ s("div", { className: "p-4", children: [
+    /* @__PURE__ */ s("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 }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: () => d(m.id),
+          onClick: () => d(a.id),
           className: "text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 text-sm",
           children: "Delete"
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-4", children: o && Object.entries(o).map(([b, k]) => /* @__PURE__ */ e(
-      Ze,
+    /* @__PURE__ */ e("div", { className: "space-y-4", children: p && Object.entries(p).map(([b, g]) => /* @__PURE__ */ e(
+      it,
       {
         name: b,
-        field: k,
-        value: l(b),
-        onChange: (g) => u(b, g)
+        field: g,
+        value: h(b),
+        onChange: (N) => u(b, N)
       },
       b
-    )) })
+    )) }),
+    (a.type === "text" || a.type === "vision") && /* @__PURE__ */ e(
+      lt,
+      {
+        nodeId: a.id,
+        outputSchema: a.data.outputSchema,
+        updateNodeData: 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(
+function it({ name: r, field: l, value: t, onChange: n }) {
+  const o = l.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 l.enum ? /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
+    /* @__PURE__ */ s(
       "select",
       {
         value: String(t || ""),
-        onChange: (m) => a(m.target.value),
-        className: d,
+        onChange: (m) => n(m.target.value),
+        className: i,
         children: [
           /* @__PURE__ */ e("option", { value: "", children: "Select..." }),
-          i.enum.map((m) => /* @__PURE__ */ e("option", { value: m, children: m }, m))
+          l.enum.map((m) => /* @__PURE__ */ e("option", { value: m, children: m }, m))
         ]
       }
     ),
-    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 }),
+    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
+  ] }) : l.type === "number" ? /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
     /* @__PURE__ */ e(
       "input",
       {
         type: "number",
         value: t !== void 0 ? Number(t) : "",
-        onChange: (m) => a(Number(m.target.value)),
-        min: i.minimum,
-        max: i.maximum,
-        className: d
+        onChange: (m) => n(Number(m.target.value)),
+        min: l.minimum,
+        max: l.maximum,
+        className: i
       }
     ),
-    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: [
+    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
+  ] }) : l.type === "boolean" ? /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
         checked: !!t,
-        onChange: (m) => a(m.target.checked),
+        onChange: (m) => n(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: 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("label", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: o })
+  ] }) : r.toLowerCase().includes("color") && typeof t == "string" && t.startsWith("#") ? /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
+    /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "color",
           value: String(t || "#000000"),
-          onChange: (m) => a(m.target.value),
+          onChange: (m) => n(m.target.value),
           className: "h-10 w-14 p-1 border border-gray-300 dark:border-zinc-600 rounded"
         }
       ),
@@ -1360,142 +1748,266 @@ function Ze({ name: r, field: i, value: t, onChange: a }) {
         {
           type: "text",
           value: String(t || ""),
-          onChange: (m) => a(m.target.value),
-          className: d + " flex-1"
+          onChange: (m) => n(m.target.value),
+          className: i + " flex-1"
         }
       )
     ] })
-  ] }) : 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 }),
+  ] }) : l.type === "object" ? /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
     /* @__PURE__ */ e(
       "textarea",
       {
         value: t ? JSON.stringify(t, null, 2) : "{}",
         onChange: (m) => {
           try {
-            a(JSON.parse(m.target.value));
+            n(JSON.parse(m.target.value));
           } catch {
           }
         },
         rows: 4,
-        className: d + " font-mono text-xs"
+        className: i + " font-mono text-xs"
       }
     ),
-    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 }),
+    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
+  ] }) : /* @__PURE__ */ s("div", { children: [
+    /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1", children: o }),
     r === "prompt" || r === "code" || r === "text" ? /* @__PURE__ */ e(
       "textarea",
       {
         value: String(t || ""),
-        onChange: (m) => a(m.target.value),
+        onChange: (m) => n(m.target.value),
         rows: 3,
-        className: d
+        className: i
       }
     ) : /* @__PURE__ */ e(
       "input",
       {
         type: "text",
         value: String(t || ""),
-        onChange: (m) => a(m.target.value),
-        className: d
+        onChange: (m) => n(m.target.value),
+        className: i
       }
     ),
-    i.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: i.description })
+    l.description && /* @__PURE__ */ e("p", { className: "mt-1 text-xs text-gray-500 dark:text-zinc-400", children: l.description })
   ] });
 }
-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);
+function lt({ nodeId: r, outputSchema: l, updateNodeData: t }) {
+  const [n, o] = I(""), i = (l == null ? void 0 : l.properties) || {}, m = Object.entries(i), d = () => {
+    if (!n.trim()) return;
+    const u = {
+      type: "object",
+      properties: {
+        ...i,
+        [n.trim()]: { type: "string" }
+      }
+    };
+    t(r, { outputSchema: u }), o("");
+  }, a = (u) => {
+    const h = { ...i };
+    delete h[u], Object.keys(h).length === 0 ? t(r, { outputSchema: void 0 }) : t(r, {
+      outputSchema: { type: "object", properties: h }
+    });
+  }, p = (u, h) => {
+    t(r, {
+      outputSchema: {
+        type: "object",
+        properties: {
+          ...i,
+          [u]: { ...i[u], type: h }
+        }
+      }
+    });
+  }, c = (u, h) => {
+    t(r, {
+      outputSchema: {
+        type: "object",
+        properties: {
+          ...i,
+          [u]: { ...i[u], description: h || void 0 }
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ s("div", { className: "mt-6 pt-4 border-t border-gray-200 dark:border-zinc-700", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-medium text-gray-700 dark:text-zinc-300", children: "Output Schema" }),
+      /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-500", children: m.length > 0 ? `${m.length} output${m.length > 1 ? "s" : ""}` : "No outputs defined" })
+    ] }),
+    /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-zinc-400 mb-3", children: "Define output properties to enable connecting individual JSON fields to other nodes." }),
+    m.length > 0 && /* @__PURE__ */ e("div", { className: "space-y-2 mb-3", children: m.map(([u, h]) => /* @__PURE__ */ s(
+      "div",
+      {
+        className: "flex items-center gap-2 p-2 bg-pink-50 dark:bg-pink-900/20 rounded border border-pink-200 dark:border-pink-800",
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e("span", { className: "text-sm font-medium text-pink-700 dark:text-pink-300 truncate", children: u }),
+              /* @__PURE__ */ s(
+                "select",
+                {
+                  value: h.type,
+                  onChange: (f) => p(u, f.target.value),
+                  className: "text-xs px-1.5 py-0.5 rounded border border-pink-300 dark:border-pink-700 bg-white dark:bg-zinc-800 text-gray-700 dark:text-zinc-300",
+                  children: [
+                    /* @__PURE__ */ e("option", { value: "string", children: "string" }),
+                    /* @__PURE__ */ e("option", { value: "number", children: "number" }),
+                    /* @__PURE__ */ e("option", { value: "boolean", children: "boolean" }),
+                    /* @__PURE__ */ e("option", { value: "object", children: "object" }),
+                    /* @__PURE__ */ e("option", { value: "array", children: "array" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                value: h.description || "",
+                onChange: (f) => c(u, f.target.value),
+                placeholder: "Description (optional)",
+                className: "mt-1 w-full text-xs px-2 py-1 rounded border border-pink-200 dark:border-pink-700 bg-white dark:bg-zinc-800 text-gray-600 dark:text-zinc-400 placeholder-gray-400 dark:placeholder-zinc-500"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => a(u),
+              className: "text-pink-500 hover:text-pink-700 dark:text-pink-400 dark:hover:text-pink-300 p-1",
+              title: "Remove property",
+              children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", 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"
+                }
+              ) })
+            }
+          )
+        ]
+      },
+      u
+    )) }),
+    /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: n,
+          onChange: (u) => o(u.target.value),
+          onKeyDown: (u) => u.key === "Enter" && d(),
+          placeholder: "Property name...",
+          className: "flex-1 px-2 py-1.5 text-sm border border-gray-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-900 text-gray-900 dark:text-zinc-100 placeholder-gray-400 dark:placeholder-zinc-500"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: d,
+          disabled: !n.trim(),
+          className: "px-3 py-1.5 text-sm font-medium text-white bg-pink-500 rounded hover:bg-pink-600 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: "Add"
+        }
+      )
+    ] }),
+    m.length > 0 && /* @__PURE__ */ e("p", { className: "mt-3 text-xs text-gray-500 dark:text-zinc-500", children: "Connect from the small pink handles on the right of the node to route individual properties." })
+  ] });
+}
+function dt(r, l) {
+  const t = new Map(r.map((d) => [d.id, d])), n = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map();
+  for (const d of r)
+    n.set(d.id, 0), o.set(d.id, []);
+  for (const d of l) {
+    const a = o.get(d.source) || [];
+    a.push(d.target), o.set(d.source, a), n.set(d.target, (n.get(d.target) || 0) + 1);
   }
-  const d = [];
-  for (const [o, n] of a)
-    n === 0 && d.push(o);
+  const i = [];
+  for (const [d, a] of n)
+    a === 0 && i.push(d);
   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);
+  for (; i.length > 0; ) {
+    const d = i.shift(), a = t.get(d);
+    a && m.push(a);
+    const p = o.get(d) || [];
+    for (const c of p) {
+      const u = (n.get(c) || 1) - 1;
+      n.set(c, u), u === 0 && i.push(c);
     }
   }
   return m;
 }
-function tt(r) {
-  const i = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
-  return `${i}_${t}`;
+function ct(r) {
+  const l = r.type || "node", t = r.id.replace(/[^a-zA-Z0-9]/g, "_");
+  return `${l}_${t}`;
 }
-function E(r) {
+function V(r) {
   return typeof r == "string" ? r.includes(`
 `) ? "`" + r.replace(/`/g, "\\`").replace(/\$/g, "\\$") + "`" : JSON.stringify(r) : JSON.stringify(r, null, 2);
 }
-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;
+function mt(r, l, t) {
+  const n = t.get(r.id), o = [], i = l.find((d) => d.target === r.id), m = i ? t.get(i.source) : null;
   switch (r.type) {
     case "generator": {
-      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(`,
+      const d = r.data;
+      o.push(d.generatorName);
+      const a = d.params || {}, p = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${V(u)}`).join(`,
 `);
       return {
-        code: `// Generate image using ${o.generatorName}
-const ${a} = await ${o.generatorName}({
-${u}
+        code: `// Generate image using ${d.generatorName}
+const ${n} = await ${d.generatorName}({
+${p}
 });`,
-        imports: s
+        imports: o
       };
     }
     case "input":
       return {
         code: `// Load input image
-const ${a} = await flo.loadImage("./input.png");`,
+const ${n} = await flo.loadImage("./input.png");`,
         imports: []
       };
     case "transform": {
-      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";
+      const d = r.data, a = d.params || {}, p = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `${u}: ${V(h)}`).join(", "), c = m || "image";
       return {
-        code: `// Apply ${o.operation} transform
-const ${a} = await flo.transform(${l}, "${o.operation}"${u ? `, { ${u} }` : ""});`,
+        code: `// Apply ${d.operation} transform
+const ${n} = await flo.transform(${c}, "${d.operation}"${p ? `, { ${p} }` : ""});`,
         imports: []
       };
     }
     case "vision": {
-      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(`,
+      const d = r.data;
+      o.push(d.providerName);
+      const a = d.params || {}, p = m || "image", c = Object.entries(a).filter(([, u]) => u !== void 0 && u !== "").map(([u, h]) => `  ${u}: ${V(h)}`).join(`,
 `);
       return {
-        code: `// Analyze image with ${o.providerName}
-const ${a} = await ${o.providerName}.analyze(${u}, {
-${l}
+        code: `// Analyze image with ${d.providerName}
+const ${n} = await ${d.providerName}.analyze(${p}, {
+${c}
 });`,
-        imports: s
+        imports: o
       };
     }
     case "text": {
-      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(`,
+      const d = r.data;
+      o.push(d.providerName);
+      const a = d.params || {}, p = Object.entries(a).filter(([, c]) => c !== void 0 && c !== "").map(([c, u]) => `  ${c}: ${V(u)}`).join(`,
 `);
       return {
-        code: `// Generate text with ${o.providerName}
-const ${a} = await ${o.providerName}.generate({
-${u}
+        code: `// Generate text with ${d.providerName}
+const ${n} = await ${d.providerName}.generate({
+${p}
 });`,
-        imports: s
+        imports: o
       };
     }
     case "save": {
-      const o = r.data;
+      const d = r.data;
       return {
         code: `// Save result
-await flo.save(${m || "result"}, ${E(o.destination)});`,
+await flo.save(${m || "result"}, ${V(d.destination)});`,
         imports: []
       };
     }
@@ -1506,33 +2018,33 @@ await flo.save(${m || "result"}, ${E(o.destination)});`,
       };
   }
 }
-function at(r, i) {
+function pt(r, l) {
   if (r.length === 0)
     return `// Empty workflow
 // Add nodes to your canvas to generate code`;
-  const t = et(r, i), a = /* @__PURE__ */ new Map();
-  for (const u of t)
-    a.set(u.id, tt(u));
-  const s = /* @__PURE__ */ new Set(), d = [];
-  for (const u of t) {
-    const { code: l, imports: p } = rt(u, i, a);
-    d.push(l);
-    for (const f of p)
-      s.add(f);
+  const t = dt(r, l), n = /* @__PURE__ */ new Map();
+  for (const p of t)
+    n.set(p.id, ct(p));
+  const o = /* @__PURE__ */ new Set(), i = [];
+  for (const p of t) {
+    const { code: c, imports: u } = mt(p, l, n);
+    i.push(c);
+    for (const h of u)
+      o.add(h);
   }
   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 = `/**
+  o.size > 0 && m.push(`import { ${Array.from(o).join(", ")} } from "@teamflojo/floimg";`), m.push('import * as flo from "@teamflojo/floimg";');
+  const d = `/**
  * FloImg Workflow
  * Generated by FloImg Studio
  * https://floimg.com
  */
 
-`, n = `
+`, a = `
 async function runWorkflow() {
-${d.map(
-    (u) => u.split(`
-`).map((l) => "  " + l).join(`
+${i.map(
+    (p) => p.split(`
+`).map((c) => "  " + c).join(`
 `)
   ).join(`
 
@@ -1542,80 +2054,80 @@ ${d.map(
 // Run the workflow
 runWorkflow().catch(console.error);
 `;
-  return o + m.join(`
+  return d + m.join(`
 `) + `
-` + n;
+` + a;
 }
-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" });
+function ut({ isOpen: r, onClose: l, onImport: t }) {
+  const [n, o] = I(""), [i, m] = I(!1), [d, a] = I(null), [p, c] = I(!1), u = L(async () => {
+    if (!n.trim()) {
+      a({ message: "Please enter or paste YAML content" });
       return;
     }
-    m(!0), n(null);
+    m(!0), a(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
+      const g = await Fe(n);
+      g.success ? (t(g.nodes, g.edges, g.name), o(""), l()) : a({
+        message: g.error || "Import failed",
+        line: g.line,
+        column: g.column
       });
-    } catch (h) {
-      n({ message: h instanceof Error ? h.message : "Import failed" });
+    } catch (g) {
+      a({ message: g instanceof Error ? g.message : "Import failed" });
     } finally {
       m(!1);
     }
-  }, [a, t, i]), f = C(async () => {
-    if (!a.trim()) {
-      n({ message: "Please enter or paste YAML content" });
+  }, [n, t, l]), h = L(async () => {
+    if (!n.trim()) {
+      a({ message: "Please enter or paste YAML content" });
       return;
     }
-    m(!0), n(null);
+    m(!0), a(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" });
+      const g = await He(n);
+      g.valid ? (a(null), a({ message: "Valid YAML!" }), setTimeout(() => a(null), 2e3)) : g.errors.length > 0 && a(g.errors[0]);
+    } catch (g) {
+      a({ message: g instanceof Error ? g.message : "Validation failed" });
     } finally {
       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" });
+  }, [n]), f = L(async (g) => {
+    if (!g.name.endsWith(".yaml") && !g.name.endsWith(".yml")) {
+      a({ message: "Please upload a .yaml or .yml file" });
       return;
     }
     try {
-      const z = await h.text();
-      s(z), n(null);
+      const N = await g.text();
+      o(N), a(null);
     } catch {
-      n({ message: "Failed to read file" });
+      a({ 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);
+  }, []), w = L((g) => {
+    g.preventDefault(), c(!0);
+  }, []), v = L((g) => {
+    g.preventDefault(), c(!1);
+  }, []), y = L(
+    (g) => {
+      g.preventDefault(), c(!1);
+      const N = g.dataTransfer.files[0];
+      N && f(N);
     },
-    [b]
-  ), w = C(
-    (h) => {
-      var S;
-      const z = (S = h.target.files) == null ? void 0 : S[0];
-      z && b(z);
+    [f]
+  ), b = L(
+    (g) => {
+      var W;
+      const N = (W = g.target.files) == null ? void 0 : W[0];
+      N && f(N);
     },
-    [b]
+    [f]
   );
-  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: [
+  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("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__ */ s("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,
+          onClick: l,
           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",
@@ -1629,27 +2141,27 @@ function ot({ isOpen: r, onClose: i, onImport: t }) {
         }
       )
     ] }),
-    /* @__PURE__ */ c("div", { className: "p-4 flex-1 overflow-auto", children: [
+    /* @__PURE__ */ s("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(
+      /* @__PURE__ */ s(
         "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"}`,
+          onDragOver: w,
+          onDragLeave: v,
+          onDrop: y,
+          className: `border-2 border-dashed rounded-lg p-4 mb-4 text-center transition-colors ${p ? "border-teal-500 bg-teal-50 dark:bg-teal-900/20" : "border-gray-300 dark:border-zinc-600"}`,
           children: [
             /* @__PURE__ */ e(
               "input",
               {
                 type: "file",
                 accept: ".yaml,.yml",
-                onChange: w,
+                onChange: b,
                 className: "hidden",
                 id: "yaml-file-input"
               }
             ),
-            /* @__PURE__ */ c(
+            /* @__PURE__ */ s(
               "label",
               {
                 htmlFor: "yaml-file-input",
@@ -1687,9 +2199,9 @@ function ot({ isOpen: r, onClose: i, onImport: t }) {
       /* @__PURE__ */ e(
         "textarea",
         {
-          value: a,
-          onChange: (h) => {
-            s(h.target.value), n(null);
+          value: n,
+          onChange: (g) => {
+            o(g.target.value), a(null);
           },
           placeholder: `name: My Workflow
 steps:
@@ -1713,42 +2225,42 @@ steps:
           className: "w-full h-64 p-3 font-mono text-sm bg-gray-100 dark:bg-zinc-900 border border-gray-300 dark:border-zinc-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500 text-gray-800 dark:text-zinc-200"
         }
       ),
-      o && /* @__PURE__ */ c(
+      d && /* @__PURE__ */ s(
         "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"}`,
+          className: `mt-4 p-3 rounded-lg text-sm ${d.message === "Valid YAML!" ? "bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-red-50 dark:bg-red-900/30 text-red-700 dark:text-red-400"}`,
           children: [
-            /* @__PURE__ */ e("span", { className: "font-medium", children: o.message }),
-            o.line && /* @__PURE__ */ c("span", { className: "ml-2 text-xs", children: [
+            /* @__PURE__ */ e("span", { className: "font-medium", children: d.message }),
+            d.line && /* @__PURE__ */ s("span", { className: "ml-2 text-xs", children: [
               "(line ",
-              o.line,
-              o.column ? `, column ${o.column}` : "",
+              d.line,
+              d.column ? `, column ${d.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__ */ s("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__ */ s("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: f,
-            disabled: d || !a.trim(),
+            onClick: h,
+            disabled: i || !n.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(
+        /* @__PURE__ */ s(
           "button",
           {
-            onClick: p,
-            disabled: d || !a.trim(),
+            onClick: u,
+            disabled: i || !n.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: [
+              i && /* @__PURE__ */ s("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
                   {
@@ -1777,56 +2289,58 @@ steps:
     ] })
   ] }) }) : null;
 }
-function nt({
+function gt({
   brandingSlot: r,
-  beforeActionsSlot: i,
+  beforeActionsSlot: l,
   afterActionsSlot: t,
-  hideAttribution: a = !1
+  hideAttribution: n = !1
 } = {}) {
-  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"), [J, le] = N(""), [Y, ce] = N(""), [X, j] = N(null), [me, V] = N(!1), [Z, G] = N("");
-  M(() => {
-    const y = () => {
-      j("New workflow created"), setTimeout(() => j(null), 2e3);
+  const o = k((z) => z.execution), i = k((z) => z.execute), m = k((z) => z.exportToYaml), d = k((z) => z.importFromYaml), a = k((z) => z.nodes), p = k((z) => z.edges), c = O((z) => z.openSettings), u = k((z) => z.activeWorkflowName), h = k((z) => z.hasUnsavedChanges), f = k((z) => z.saveWorkflow), w = k((z) => z.toggleLibrary), v = k((z) => z.setActiveWorkflowName), y = k((z) => z.selectedNodeId), b = k((z) => z.duplicateNode), [g, N] = I(!1), [W, x] = I(!1), [C, S] = I("yaml"), [T, ue] = I(""), [Z, ge] = I(""), [ee, R] = I(null), [he, K] = I(!1), [te, q] = I("");
+  D(() => {
+    const z = () => {
+      R("New workflow created"), setTimeout(() => R(null), 2e3);
     };
-    return window.addEventListener("new-workflow-created", y), () => window.removeEventListener("new-workflow-created", y);
+    return window.addEventListener("new-workflow-created", z), () => window.removeEventListener("new-workflow-created", z);
   }, []);
-  const q = C(() => {
-    n.length !== 0 && (b(), j("Saved!"), setTimeout(() => j(null), 2e3));
-  }, [n.length, b]), ue = () => {
-    G(p), V(!0);
-  }, ee = () => {
-    const y = Z.trim();
-    y && y !== p && g(y), V(!1);
-  };
-  M(() => {
-    function y(D) {
-      (D.metaKey || D.ctrlKey) && D.key === "s" && (D.preventDefault(), q());
+  const J = L(() => {
+    a.length !== 0 && (f(), R("Saved!"), setTimeout(() => R(null), 2e3));
+  }, [a.length, f]), xe = () => {
+    q(u), K(!0);
+  }, re = () => {
+    const z = te.trim();
+    z && z !== u && v(z), K(!1);
+  }, ae = L(() => {
+    y && b(y);
+  }, [y, b]);
+  D(() => {
+    function z(M) {
+      (M.metaKey || M.ctrlKey) && M.key === "s" && (M.preventDefault(), J()), (M.metaKey || M.ctrlKey) && M.key === "d" && (M.preventDefault(), ae());
     }
-    return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
-  }, [q]);
-  const ge = async () => {
-    await d();
-  }, pe = async () => {
-    const y = await m();
-    le(y);
-    const D = at(n, u);
-    ce(D), w(!0);
-  }, he = () => {
-    const y = S === "yaml" ? J : Y;
-    navigator.clipboard.writeText(y);
-  }, fe = C(
-    (y, D, be) => {
-      o(y, D, be), j("Workflow imported!"), setTimeout(() => j(null), 2e3);
+    return document.addEventListener("keydown", z), () => document.removeEventListener("keydown", z);
+  }, [J, ae]);
+  const be = async () => {
+    await i();
+  }, fe = async () => {
+    const z = await m();
+    ue(z);
+    const M = pt(a, p);
+    ge(M), N(!0);
+  }, ke = () => {
+    const z = C === "yaml" ? T : Z;
+    navigator.clipboard.writeText(z);
+  }, ve = L(
+    (z, M, ye) => {
+      d(z, M, ye), R("Workflow imported!"), setTimeout(() => R(null), 2e3);
     },
-    [o]
+    [d]
   );
-  return /* @__PURE__ */ c(P, { 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: [
+  return /* @__PURE__ */ s(U, { children: [
+    /* @__PURE__ */ s("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__ */ s("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: k,
+            onClick: w,
             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(
@@ -1840,10 +2354,10 @@ function nt({
             ) })
           }
         ),
-        /* @__PURE__ */ c("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ s("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,
-          !a && /* @__PURE__ */ e(
+          !n && /* @__PURE__ */ e(
             "a",
             {
               href: "https://flojo.io",
@@ -1854,16 +2368,16 @@ function nt({
             }
           )
         ] }),
-        /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-          me ? /* @__PURE__ */ e(
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          he ? /* @__PURE__ */ e(
             "input",
             {
               type: "text",
-              value: Z,
-              onChange: (y) => G(y.target.value),
-              onBlur: ee,
-              onKeyDown: (y) => {
-                y.key === "Enter" && ee(), y.key === "Escape" && (G(p), V(!1));
+              value: te,
+              onChange: (z) => q(z.target.value),
+              onBlur: re,
+              onKeyDown: (z) => {
+                z.key === "Enter" && re(), z.key === "Escape" && (q(u), K(!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
@@ -1871,30 +2385,30 @@ function nt({
           ) : /* @__PURE__ */ e(
             "button",
             {
-              onClick: ue,
+              onClick: xe,
               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: p
+              children: u
             }
           ),
-          f && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
-          X && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: X })
+          h && /* @__PURE__ */ e("span", { className: "text-xs text-amber-600 dark:text-amber-400", children: "(unsaved)" }),
+          ee && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: ee })
         ] }),
-        /* @__PURE__ */ c("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
-          n.length,
+        /* @__PURE__ */ s("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
+          a.length,
           " node",
-          n.length !== 1 ? "s" : ""
+          a.length !== 1 ? "s" : ""
         ] })
       ] }),
-      /* @__PURE__ */ c("div", { className: "flex items-center gap-3", children: [
-        i,
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+        l,
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: l,
+            onClick: c,
             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__ */ c("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+            children: /* @__PURE__ */ s("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
               /* @__PURE__ */ e(
                 "path",
                 {
@@ -1919,8 +2433,8 @@ function nt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: q,
-            disabled: n.length === 0,
+            onClick: J,
+            disabled: a.length === 0,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
             title: "Save Workflow (Cmd+S)",
             children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
@@ -1937,7 +2451,7 @@ function nt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => z(!0),
+            onClick: () => x(!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"
           }
@@ -1945,8 +2459,8 @@ function nt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: pe,
-            disabled: n.length === 0,
+            onClick: fe,
+            disabled: a.length === 0,
             className: "px-4 py-2 text-sm font-medium text-gray-700 dark:text-zinc-200 bg-white dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 rounded-md hover:bg-gray-50 dark:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-not-allowed",
             children: "Export"
           }
@@ -1954,11 +2468,11 @@ function nt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: ge,
-            disabled: n.length === 0 || s.status === "running",
+            onClick: be,
+            disabled: a.length === 0 || o.status === "running",
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
-            children: s.status === "running" ? /* @__PURE__ */ c(P, { children: [
-              /* @__PURE__ */ c("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
+            children: o.status === "running" ? /* @__PURE__ */ s(U, { children: [
+              /* @__PURE__ */ s("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
                   {
@@ -1980,8 +2494,8 @@ function nt({
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ c(P, { children: [
-              /* @__PURE__ */ c("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+            ] }) : /* @__PURE__ */ s(U, { children: [
+              /* @__PURE__ */ s("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
                   {
@@ -2008,54 +2522,44 @@ function nt({
         t
       ] })
     ] }),
-    s.status === "completed" && s.imageIds.length > 0 && /* @__PURE__ */ e("div", { className: "bg-green-50 dark:bg-green-900/30 border-b border-green-200 dark:border-green-800 px-4 py-3", children: /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ c("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
+    o.status === "completed" && o.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__ */ s("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ s("span", { className: "text-green-700 dark:text-green-400 font-medium", children: [
         "Generated ",
-        s.imageIds.length,
+        o.imageIds.length,
         " image",
-        s.imageIds.length !== 1 ? "s" : ""
+        o.imageIds.length !== 1 ? "s" : ""
       ] }),
-      /* @__PURE__ */ e("div", { className: "flex gap-2", children: s.imageIds.slice(0, 4).map((y) => /* @__PURE__ */ e(
-        "a",
+      /* @__PURE__ */ e("div", { className: "flex gap-2", children: o.imageUrls.slice(0, 4).map((z, M) => /* @__PURE__ */ e("a", { href: z, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
+        "img",
         {
-          href: F(y),
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "block",
-          children: /* @__PURE__ */ e(
-            "img",
-            {
-              src: F(y),
-              alt: "Generated",
-              className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
-            }
-          )
-        },
-        y
-      )) })
+          src: z,
+          alt: "Generated",
+          className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
+        }
+      ) }, M)) })
     ] }) }),
-    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: [
+    o.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__ */ s("span", { className: "text-red-700 dark:text-red-400", children: [
       "Error: ",
-      s.error
+      o.error
     ] }) }),
-    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: [
+    g && /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("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__ */ s("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+        /* @__PURE__ */ s("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__ */ c("div", { className: "flex gap-1 bg-gray-100 dark:bg-zinc-700 rounded-lg p-1", children: [
+          /* @__PURE__ */ s("div", { className: "flex gap-1 bg-gray-100 dark:bg-zinc-700 rounded-lg p-1", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                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"}`,
+                onClick: () => S("yaml"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${C === "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: () => 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"}`,
+                onClick: () => S("javascript"),
+                className: `px-3 py-1 text-sm font-medium rounded-md transition-colors ${C === "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"
               }
             )
@@ -2064,7 +2568,7 @@ function nt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: () => w(!1),
+            onClick: () => N(!1),
             className: "text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200",
             children: /* @__PURE__ */ e("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
@@ -2078,14 +2582,14 @@ function nt({
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: S === "yaml" ? J : Y }) }),
-      /* @__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("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: C === "yaml" ? T : Z }) }),
+      /* @__PURE__ */ s("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: C === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
+        /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: he,
+              onClick: ke,
               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"
             }
@@ -2093,7 +2597,7 @@ function nt({
           /* @__PURE__ */ e(
             "button",
             {
-              onClick: () => w(!1),
+              onClick: () => N(!1),
               className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
               children: "Close"
             }
@@ -2102,64 +2606,64 @@ function nt({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      ot,
+      ut,
       {
-        isOpen: h,
-        onClose: () => z(!1),
-        onImport: fe
+        isOpen: W,
+        onClose: () => x(!1),
+        onImport: ve
       }
     )
   ] });
 }
-function st() {
-  const r = x((n) => n.loadTemplate), [i, t] = N(null), {
-    data: a,
-    isLoading: s,
-    error: d,
+function ht() {
+  const r = k((a) => a.loadTemplate), [l, t] = I(null), {
+    data: n,
+    isLoading: o,
+    error: i,
     refetch: m
-  } = _({
+  } = F({
     queryKey: ["images"],
-    queryFn: Me,
+    queryFn: Re,
     refetchInterval: 5e3
     // Auto-refresh every 5 seconds
-  }), o = async (n) => {
-    t(n);
+  }), d = async (a) => {
+    t(a);
     try {
-      const u = await je(n);
-      if (u != null && u.workflow) {
-        const l = {
-          id: `image-${n}`,
-          name: `Workflow from ${n}`,
+      const p = await Ee(a);
+      if (p != null && p.workflow) {
+        const c = {
+          id: `image-${a}`,
+          name: `Workflow from ${a}`,
           description: "Loaded from gallery image",
           category: "Gallery",
           generator: "unknown",
           workflow: {
-            nodes: u.workflow.nodes,
-            edges: u.workflow.edges
+            nodes: p.workflow.nodes,
+            edges: p.workflow.edges
           }
         };
-        r(l), window.dispatchEvent(new CustomEvent("workflow-loaded"));
+        r(c), window.dispatchEvent(new CustomEvent("workflow-loaded"));
       } else
         alert("No workflow metadata available for this image");
-    } catch (u) {
-      console.error("Failed to load workflow:", u), alert("Failed to load workflow");
+    } catch (p) {
+      console.error("Failed to load workflow:", p), alert("Failed to load workflow");
     } finally {
       t(null);
     }
   };
-  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: [
+  return o ? /* @__PURE__ */ e("div", { className: "p-8 text-center text-gray-500 dark:text-zinc-400", children: "Loading images..." }) : i ? /* @__PURE__ */ s("div", { className: "p-8 text-center text-red-500 dark:text-red-400", children: [
     "Error loading images: ",
-    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: [
+    i instanceof Error ? i.message : "Unknown error"
+  ] }) : !n || n.length === 0 ? /* @__PURE__ */ s("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__ */ 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: [
+  ] }) : /* @__PURE__ */ s("div", { className: "p-4 bg-gray-100 dark:bg-zinc-900 min-h-full", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ s("h2", { className: "text-lg font-semibold text-gray-800 dark:text-white", children: [
         "Gallery (",
-        a.length,
+        n.length,
         " image",
-        a.length !== 1 ? "s" : "",
+        n.length !== 1 ? "s" : "",
         ")"
       ] }),
       /* @__PURE__ */ e(
@@ -2171,32 +2675,32 @@ function st() {
         }
       )
     ] }),
-    /* @__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,
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: n.map((a) => /* @__PURE__ */ e(
+      xt,
       {
-        image: n,
-        onLoadWorkflow: () => o(n.id),
-        isLoading: i === n.id
+        image: a,
+        onLoadWorkflow: () => d(a.id),
+        isLoading: l === a.id
       },
-      n.id
+      a.id
     )) })
   ] });
 }
-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: [
+function xt({ image: r, onLoadWorkflow: l, isLoading: t }) {
+  const n = (i) => new Date(i).toLocaleString(), o = (i) => i < 1024 ? `${i} B` : i < 1048576 ? `${(i / 1024).toFixed(1)} KB` : `${(i / 1048576).toFixed(1)} MB`;
+  return /* @__PURE__ */ s("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__ */ s("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         "a",
         {
-          href: F(r.id),
+          href: oe(r.id),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block aspect-square bg-gray-100 dark:bg-zinc-900",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: F(r.id),
+              src: oe(r.id),
               alt: r.filename,
               className: "w-full h-full object-cover",
               loading: "lazy"
@@ -2207,8 +2711,8 @@ function it({ image: r, onLoadWorkflow: i, 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: (d) => {
-            d.preventDefault(), i();
+          onClick: (i) => {
+            i.preventDefault(), l();
           },
           disabled: t,
           className: "px-3 py-1.5 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 disabled:opacity-50",
@@ -2216,18 +2720,18 @@ function it({ image: r, onLoadWorkflow: i, isLoading: t }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ c("div", { className: "p-3", children: [
+    /* @__PURE__ */ s("div", { className: "p-3", children: [
       /* @__PURE__ */ e("div", { className: "text-sm font-medium text-gray-800 dark:text-white truncate", children: r.filename }),
-      /* @__PURE__ */ c("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
+      /* @__PURE__ */ s("div", { className: "text-xs text-gray-500 dark:text-zinc-400 mt-1", children: [
         r.mime,
         " • ",
-        s(r.size)
+        o(r.size)
       ] }),
-      /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: a(r.createdAt) })
+      /* @__PURE__ */ e("div", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-1", children: n(r.createdAt) })
     ] })
   ] });
 }
-const dt = {
+const bt = {
   id: "sales-dashboard",
   name: "Sales Dashboard",
   description: "Quarterly revenue bar chart with gradient styling",
@@ -2277,7 +2781,7 @@ const dt = {
     ],
     edges: []
   }
-}, lt = {
+}, ft = {
   id: "user-growth",
   name: "User Growth Line Chart",
   description: "Monthly user growth with smooth bezier curves",
@@ -2325,7 +2829,7 @@ const dt = {
     ],
     edges: []
   }
-}, ct = {
+}, kt = {
   id: "api-flow",
   name: "API Request Flow",
   description: "Sequence diagram showing API authentication flow",
@@ -2367,7 +2871,7 @@ const dt = {
     ],
     edges: []
   }
-}, mt = {
+}, vt = {
   id: "system-architecture",
   name: "System Architecture",
   description: "Microservices architecture diagram",
@@ -2425,7 +2929,7 @@ const dt = {
     ],
     edges: []
   }
-}, ut = {
+}, yt = {
   id: "git-workflow",
   name: "Git Branch Workflow",
   description: "Git branching strategy with feature and release branches",
@@ -2468,7 +2972,7 @@ const dt = {
     ],
     edges: []
   }
-}, gt = {
+}, wt = {
   id: "website-qr",
   name: "Website QR Code",
   description: "QR code linking to your website with custom styling",
@@ -2496,7 +3000,7 @@ const dt = {
     ],
     edges: []
   }
-}, pt = {
+}, Nt = {
   id: "wifi-qr",
   name: "WiFi QR Code",
   description: "Scannable QR code for WiFi network access",
@@ -2524,7 +3028,7 @@ const dt = {
     ],
     edges: []
   }
-}, ht = {
+}, zt = {
   id: "chart-watermark",
   name: "Chart with Watermark",
   description: "Bar chart with company watermark and rounded corners",
@@ -2590,7 +3094,7 @@ const dt = {
       { id: "e2", source: "transform-1", target: "transform-2" }
     ]
   }
-}, ft = {
+}, Ct = {
   id: "diagram-webp",
   name: "Diagram to WebP",
   description: "Mermaid diagram converted to optimized WebP format",
@@ -2631,108 +3135,108 @@ const dt = {
     ],
     edges: [{ id: "e1", source: "gen-1", target: "transform-1" }]
   }
-}, O = [
+}, H = [
   // Charts
-  dt,
-  lt,
+  bt,
+  ft,
   // Diagrams
-  ct,
-  mt,
-  ut,
+  kt,
+  vt,
+  yt,
   // QR Codes
-  gt,
-  pt,
+  wt,
+  Nt,
   // Pipelines
-  ht,
-  ft
+  zt,
+  Ct
 ];
-function bt() {
-  const r = new Set(O.map((i) => i.category));
+function It() {
+  const r = new Set(H.map((l) => l.category));
   return Array.from(r).sort();
 }
-function $t(r) {
-  return O.filter((i) => i.category === r);
+function Vt(r) {
+  return H.filter((l) => l.category === r);
 }
-function ne(r) {
-  return O.find((i) => i.id === r);
+function de(r) {
+  return H.find((l) => l.id === r);
 }
-function Mt(r) {
-  const i = r.toLowerCase();
-  return O.filter(
+function Ft(r) {
+  const l = r.toLowerCase();
+  return H.filter(
     (t) => {
-      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)));
+      var n;
+      return t.name.toLowerCase().includes(l) || t.description.toLowerCase().includes(l) || t.category.toLowerCase().includes(l) || t.generator.toLowerCase().includes(l) || ((n = t.tags) == null ? void 0 : n.some((o) => o.toLowerCase().includes(l)));
     }
   );
 }
-function xt({ onSelect: r }) {
-  const [i, t] = N(null), [a, s] = N(""), d = te(() => bt(), []), m = te(() => {
-    let o = O;
-    if (i && (o = o.filter((n) => n.category === i)), a) {
-      const n = a.toLowerCase();
-      o = o.filter(
-        (u) => {
-          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)));
+function St({ onSelect: r }) {
+  const [l, t] = I(null), [n, o] = I(""), i = ne(() => It(), []), m = ne(() => {
+    let d = H;
+    if (l && (d = d.filter((a) => a.category === l)), n) {
+      const a = n.toLowerCase();
+      d = d.filter(
+        (p) => {
+          var c;
+          return p.name.toLowerCase().includes(a) || p.description.toLowerCase().includes(a) || p.generator.toLowerCase().includes(a) || ((c = p.tags) == null ? void 0 : c.some((u) => u.toLowerCase().includes(a)));
         }
       );
     }
-    return o;
-  }, [i, a]);
-  return /* @__PURE__ */ c("div", { className: "p-6", children: [
-    /* @__PURE__ */ c("div", { className: "mb-6", children: [
+    return d;
+  }, [l, n]);
+  return /* @__PURE__ */ s("div", { className: "p-6", children: [
+    /* @__PURE__ */ s("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__ */ c("div", { className: "flex flex-wrap gap-4 mb-6", children: [
+    /* @__PURE__ */ s("div", { className: "flex flex-wrap gap-4 mb-6", children: [
       /* @__PURE__ */ e(
         "input",
         {
           type: "text",
           placeholder: "Search templates...",
-          value: a,
-          onChange: (o) => s(o.target.value),
+          value: n,
+          onChange: (d) => o(d.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__ */ c("div", { className: "flex gap-2 flex-wrap", children: [
+      /* @__PURE__ */ s("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 ${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"}`,
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${l === null ? "bg-teal-600 text-white" : "bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600"}`,
             children: "All"
           }
         ),
-        d.map((o) => /* @__PURE__ */ e(
+        i.map((d) => /* @__PURE__ */ e(
           "button",
           {
-            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
+            onClick: () => t(d),
+            className: `px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${l === d ? "bg-teal-600 text-white" : "bg-gray-200 dark:bg-zinc-700 text-gray-700 dark:text-zinc-300 hover:bg-gray-300 dark:hover:bg-zinc-600"}`,
+            children: d
           },
-          o
+          d
         ))
       ] })
     ] }),
-    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,
+    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((d) => /* @__PURE__ */ e(
+      Lt,
       {
-        template: o,
-        onSelect: () => r(o.id)
+        template: d,
+        onSelect: () => r(d.id)
       },
-      o.id
+      d.id
     )) })
   ] });
 }
-function kt({ template: r, onSelect: i }) {
-  const t = r.workflow.nodes.length, a = r.workflow.edges.length, s = {
+function Lt({ template: r, onSelect: l }) {
+  const t = r.workflow.nodes.length, n = r.workflow.edges.length, o = {
     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__ */ 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: [
+  return /* @__PURE__ */ s("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",
       {
@@ -2740,7 +3244,7 @@ function kt({ template: r, onSelect: i }) {
         alt: r.name,
         className: "max-w-full max-h-full object-contain"
       }
-    ) : /* @__PURE__ */ c("div", { className: "text-center text-gray-400 dark:text-zinc-500", children: [
+    ) : /* @__PURE__ */ s("div", { className: "text-center text-gray-400 dark:text-zinc-500", children: [
       /* @__PURE__ */ e(
         "svg",
         {
@@ -2761,20 +3265,20 @@ function kt({ template: r, onSelect: i }) {
       ),
       /* @__PURE__ */ e("span", { className: "text-sm", children: "No preview" })
     ] }) }),
-    /* @__PURE__ */ c("div", { className: "p-4", children: [
-      /* @__PURE__ */ c("div", { className: "flex items-start justify-between mb-2", children: [
+    /* @__PURE__ */ s("div", { className: "p-4", children: [
+      /* @__PURE__ */ s("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 ${s[r.generator] || "bg-gray-100 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"}`,
+            className: `px-2 py-0.5 rounded text-xs font-medium ${o[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__ */ 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__ */ s("div", { className: "flex items-center gap-4 text-xs text-gray-500 dark:text-zinc-500 mb-4", children: [
+        /* @__PURE__ */ s("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",
             {
@@ -2788,7 +3292,7 @@ function kt({ template: r, onSelect: i }) {
           " node",
           t !== 1 ? "s" : ""
         ] }),
-        a > 0 && /* @__PURE__ */ c("span", { className: "flex items-center gap-1", children: [
+        n > 0 && /* @__PURE__ */ s("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",
             {
@@ -2798,23 +3302,23 @@ function kt({ template: r, onSelect: i }) {
               d: "M13 7l5 5m0 0l-5 5m5-5H6"
             }
           ) }),
-          a,
+          n,
           " edge",
-          a !== 1 ? "s" : ""
+          n !== 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((d) => /* @__PURE__ */ e(
+      r.tags && r.tags.length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1 mb-4", children: r.tags.slice(0, 4).map((i) => /* @__PURE__ */ e(
         "span",
         {
           className: "px-2 py-0.5 bg-gray-100 dark:bg-zinc-700 text-gray-600 dark:text-zinc-400 rounded text-xs",
-          children: d
+          children: i
         },
-        d
+        i
       )) }),
       /* @__PURE__ */ e(
         "button",
         {
-          onClick: i,
+          onClick: l,
           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"
         }
@@ -2822,67 +3326,67 @@ function kt({ template: r, onSelect: i }) {
     ] })
   ] });
 }
-function wt({
+function Wt({
   workflow: r,
-  isActive: i,
+  isActive: l,
   onLoad: t,
-  onDelete: a,
-  onRename: s,
-  onDuplicate: d
+  onDelete: n,
+  onRename: o,
+  onDuplicate: i
 }) {
-  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();
+  const [m, d] = I(!1), [a, p] = I(r.name), [c, u] = I(!1), h = () => {
+    a.trim() && a !== r.name && o(a.trim()), d(!1);
+  }, f = (w) => {
+    const v = new Date(w), b = (/* @__PURE__ */ new Date()).getTime() - v.getTime(), g = Math.floor(b / 6e4), N = Math.floor(b / 36e5), W = Math.floor(b / 864e5);
+    return g < 1 ? "Just now" : g < 60 ? `${g}m ago` : N < 24 ? `${N}h ago` : W < 7 ? `${W}d ago` : v.toLocaleDateString();
   };
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ s(
     "div",
     {
-      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"}`,
+      className: `group relative p-3 rounded-lg border transition-colors ${l ? "bg-teal-50 dark:bg-teal-900/20 border-teal-200 dark:border-teal-800" : "bg-white dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600"}`,
       children: [
-        /* @__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: [
+        /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ s("button", { onClick: t, className: "flex-1 text-left min-w-0", children: [
             m ? /* @__PURE__ */ e(
               "input",
               {
                 type: "text",
-                value: n,
-                onChange: (k) => u(k.target.value),
-                onBlur: f,
-                onKeyDown: (k) => {
-                  k.key === "Enter" && f(), k.key === "Escape" && (u(r.name), o(!1));
+                value: a,
+                onChange: (w) => p(w.target.value),
+                onBlur: h,
+                onKeyDown: (w) => {
+                  w.key === "Enter" && h(), w.key === "Escape" && (p(r.name), d(!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: (k) => k.stopPropagation()
+                onClick: (w) => w.stopPropagation()
               }
             ) : /* @__PURE__ */ e("span", { className: "block text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate", children: r.name }),
-            /* @__PURE__ */ c("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
+            /* @__PURE__ */ s("span", { className: "block text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [
               r.nodes.length,
               " nodes · Updated ",
-              b(r.updatedAt)
+              f(r.updatedAt)
             ] })
           ] }),
-          /* @__PURE__ */ c("div", { className: "relative", children: [
+          /* @__PURE__ */ s("div", { className: "relative", children: [
             /* @__PURE__ */ e(
               "button",
               {
-                onClick: (k) => {
-                  k.stopPropagation(), p(!l);
+                onClick: (w) => {
+                  w.stopPropagation(), u(!c);
                 },
                 className: "p-1 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 rounded opacity-0 group-hover:opacity-100 transition-opacity",
                 children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
               }
             ),
-            l && /* @__PURE__ */ c(P, { children: [
-              /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => p(!1) }),
-              /* @__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: [
+            c && /* @__PURE__ */ s(U, { children: [
+              /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => u(!1) }),
+              /* @__PURE__ */ s("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: (k) => {
-                      k.stopPropagation(), o(!0), p(!1);
+                    onClick: (w) => {
+                      w.stopPropagation(), d(!0), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Rename"
@@ -2891,8 +3395,8 @@ function wt({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (k) => {
-                      k.stopPropagation(), d(), p(!1);
+                    onClick: (w) => {
+                      w.stopPropagation(), i(), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Duplicate"
@@ -2901,8 +3405,8 @@ function wt({
                 /* @__PURE__ */ e(
                   "button",
                   {
-                    onClick: (k) => {
-                      k.stopPropagation(), window.confirm("Delete this workflow?") && a(), p(!1);
+                    onClick: (w) => {
+                      w.stopPropagation(), window.confirm("Delete this workflow?") && n(), u(!1);
                     },
                     className: "w-full px-3 py-1.5 text-left text-sm text-red-600 dark:text-red-400 hover:bg-zinc-100 dark:hover:bg-zinc-700",
                     children: "Delete"
@@ -2912,24 +3416,24 @@ function wt({
             ] })
           ] })
         ] }),
-        i && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
+        l && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 w-2 h-2 bg-teal-500 rounded-full" })
       ]
     }
   );
 }
-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);
+function At() {
+  const r = k((c) => c.showLibrary), l = k((c) => c.toggleLibrary), t = k((c) => c.savedWorkflows), n = k((c) => c.activeWorkflowId), o = k((c) => c.loadWorkflow), i = k((c) => c.deleteWorkflow), m = k((c) => c.renameWorkflow), d = k((c) => c.duplicateWorkflow), a = k((c) => c.newWorkflow);
   if (!r) return null;
-  const u = [...t].sort((l, p) => p.updatedAt - l.updatedAt);
-  return /* @__PURE__ */ c(P, { 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: [
+  const p = [...t].sort((c, u) => u.updatedAt - c.updatedAt);
+  return /* @__PURE__ */ s(U, { children: [
+    /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: l }),
+    /* @__PURE__ */ s("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__ */ s("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: i,
+            onClick: l,
             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",
@@ -2943,11 +3447,11 @@ function vt() {
           }
         )
       ] }),
-      /* @__PURE__ */ e("div", { className: "p-4 border-b border-zinc-200 dark:border-zinc-700", children: /* @__PURE__ */ c(
+      /* @__PURE__ */ e("div", { className: "p-4 border-b border-zinc-200 dark:border-zinc-700", children: /* @__PURE__ */ s(
         "button",
         {
           onClick: () => {
-            n(), i(), window.dispatchEvent(new window.CustomEvent("new-workflow-created"));
+            a(), l(), 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: [
@@ -2964,7 +3468,7 @@ function vt() {
           ]
         }
       ) }),
-      /* @__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: "flex-1 overflow-y-auto p-4", children: p.length === 0 ? /* @__PURE__ */ s("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",
           {
@@ -2985,21 +3489,21 @@ function vt() {
         ) }),
         /* @__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((l) => /* @__PURE__ */ e(
-        wt,
+      ] }) : /* @__PURE__ */ e("div", { className: "space-y-2", children: p.map((c) => /* @__PURE__ */ e(
+        Wt,
         {
-          workflow: l,
-          isActive: l.id === a,
+          workflow: c,
+          isActive: c.id === n,
           onLoad: () => {
-            s(l.id), i();
+            o(c.id), l();
           },
-          onDelete: () => d(l.id),
-          onRename: (p) => m(l.id, p),
-          onDuplicate: () => o(l.id)
+          onDelete: () => i(c.id),
+          onRename: (u) => m(c.id, u),
+          onDuplicate: () => d(c.id)
         },
-        l.id
+        c.id
       )) }) }),
-      /* @__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: [
+      /* @__PURE__ */ s("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" : "",
@@ -3008,7 +3512,7 @@ function vt() {
     ] })
   ] });
 }
-const yt = [
+const Pt = [
   {
     id: "openai",
     name: "OpenAI",
@@ -3026,10 +3530,17 @@ const yt = [
   {
     id: "gemini",
     name: "Google AI",
-    description: "Gemini Vision, Gemini Text",
+    description: "Gemini Vision, Gemini Text, Gemini Edit",
     placeholder: "AIza...",
     docsUrl: "https://aistudio.google.com/apikey"
   },
+  {
+    id: "grok",
+    name: "xAI (Grok)",
+    description: "Grok Vision, Grok Text",
+    placeholder: "xai-...",
+    docsUrl: "https://console.x.ai/"
+  },
   {
     id: "openrouter",
     name: "OpenRouter",
@@ -3037,7 +3548,7 @@ const yt = [
     placeholder: "sk-or-...",
     docsUrl: "https://openrouter.ai/keys"
   }
-], Nt = [
+], $t = [
   {
     id: "ollama",
     name: "Ollama",
@@ -3053,21 +3564,21 @@ const yt = [
     docsUrl: "https://lmstudio.ai"
   }
 ];
-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 = () => {
+function Mt({ provider: r }) {
+  const l = O((h) => h.ai), t = O((h) => h.setAIProvider), n = l[r.id], o = (n == null ? void 0 : n.enabled) ?? !1, i = (n == null ? void 0 : n.apiKey) ?? "", [m, d] = I(i), [a, p] = I(!1), c = () => {
     t(r.id, {
       apiKey: m,
-      enabled: !s
+      enabled: !o
     });
-  }, p = (f) => {
-    o(f), t(r.id, {
-      apiKey: f,
-      enabled: s
+  }, u = (h) => {
+    d(h), t(r.id, {
+      apiKey: h,
+      enabled: o
     });
   };
-  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: [
+  return /* @__PURE__ */ s("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
+    /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ s("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",
@@ -3081,13 +3592,13 @@ function zt({ 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__ */ c("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ e("div", { className: "mt-2 flex items-center gap-2", children: /* @__PURE__ */ s("div", { className: "relative flex-1", children: [
         /* @__PURE__ */ e(
           "input",
           {
-            type: n ? "text" : "password",
+            type: a ? "text" : "password",
             value: m,
-            onChange: (f) => p(f.target.value),
+            onChange: (h) => u(h.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"
           }
@@ -3096,9 +3607,9 @@ function zt({ provider: r }) {
           "button",
           {
             type: "button",
-            onClick: () => u(!n),
+            onClick: () => p(!a),
             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: n ? /* @__PURE__ */ e(
+            children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: a ? /* @__PURE__ */ e(
               "path",
               {
                 strokeLinecap: "round",
@@ -3122,33 +3633,33 @@ function zt({ provider: r }) {
     /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(
       "button",
       {
-        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"}`,
+        onClick: c,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${o ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${s ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${o ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-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 = () => {
+function jt({ provider: r }) {
+  const l = O((c) => c.ai), t = O((c) => c.setAIProvider), n = l[r.id], o = (n == null ? void 0 : n.enabled) ?? !1, i = (n == null ? void 0 : n.baseUrl) ?? r.defaultUrl, [m, d] = I(i), a = () => {
     t(r.id, {
       baseUrl: m,
-      enabled: !s
+      enabled: !o
     });
-  }, u = (l) => {
-    o(l), t(r.id, {
-      baseUrl: l,
-      enabled: s
+  }, p = (c) => {
+    d(c), t(r.id, {
+      baseUrl: c,
+      enabled: o
     });
   };
-  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: [
+  return /* @__PURE__ */ s("div", { className: "flex items-start gap-4 p-4 border border-gray-200 dark:border-zinc-700 rounded-lg", children: [
+    /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ s("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",
@@ -3168,7 +3679,7 @@ function Ct({ provider: r }) {
         {
           type: "text",
           value: m,
-          onChange: (l) => u(l.target.value),
+          onChange: (c) => p(c.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"
         }
@@ -3177,30 +3688,30 @@ function Ct({ provider: r }) {
     /* @__PURE__ */ e("div", { className: "flex items-center", children: /* @__PURE__ */ e(
       "button",
       {
-        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"}`,
+        onClick: a,
+        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${o ? "bg-teal-600" : "bg-gray-300 dark:bg-zinc-600"}`,
         children: /* @__PURE__ */ e(
           "span",
           {
-            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${s ? "translate-x-6" : "translate-x-1"}`
+            className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${o ? "translate-x-6" : "translate-x-1"}`
           }
         )
       }
     ) })
   ] });
 }
-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: [
+function Dt() {
+  const r = O((t) => t.showSettings), l = O((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__ */ s("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__ */ s("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ s("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: i,
+          onClick: l,
           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",
@@ -3214,16 +3725,16 @@ function St() {
         }
       )
     ] }),
-    /* @__PURE__ */ c("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
-      /* @__PURE__ */ c("section", { children: [
+    /* @__PURE__ */ s("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [
+      /* @__PURE__ */ s("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: yt.map((t) => /* @__PURE__ */ e(zt, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: Pt.map((t) => /* @__PURE__ */ e(Mt, { provider: t }, t.id)) })
       ] }),
-      /* @__PURE__ */ c("section", { children: [
+      /* @__PURE__ */ s("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: Nt.map((t) => /* @__PURE__ */ e(Ct, { provider: t }, t.id)) })
+        /* @__PURE__ */ e("div", { className: "space-y-3", children: $t.map((t) => /* @__PURE__ */ e(jt, { 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__ */ c("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__ */ s("div", { className: "flex items-start gap-3", children: [
         /* @__PURE__ */ e(
           "svg",
           {
@@ -3242,7 +3753,7 @@ function St() {
             )
           }
         ),
-        /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ s("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." })
         ] })
@@ -3251,116 +3762,436 @@ function St() {
     /* @__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: i,
+        onClick: l,
         className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700",
         children: "Done"
       }
     ) })
   ] }) }) : null;
 }
-function jt() {
-  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));
-    }
-  }, [a]), M(() => {
-    const o = () => {
-      i("editor");
-    };
-    return window.addEventListener("workflow-loaded", o), () => {
-      window.removeEventListener("workflow-loaded", o);
+function Tt({ isOpen: r, onClose: l, onApplyWorkflow: t }) {
+  const [n, o] = I([]), [i, m] = I(""), [d, a] = I(!1), [p, c] = I(null), [u, h] = I(null), [f, w] = I(""), v = Q(null), y = Q(null);
+  D(() => {
+    r && u === null && Ke().then((x) => {
+      h(x.available), w(x.message);
+    }).catch(() => {
+      h(!1), w("Failed to check AI availability");
+    });
+  }, [r, u]), D(() => {
+    r && y.current && y.current.focus();
+  }, [r]), D(() => {
+    var x;
+    (x = v.current) == null || x.scrollIntoView({ behavior: "smooth" });
+  }, [n]);
+  const b = L(async () => {
+    if (!i.trim() || d) return;
+    const x = {
+      role: "user",
+      content: i.trim(),
+      timestamp: Date.now()
     };
-  }, []);
-  const s = C(
-    (o) => {
-      const n = ne(o);
-      n && (a(n), i("editor"));
-    },
-    [a]
-  ), d = C(
-    (o) => {
-      var u;
-      o.preventDefault();
-      const n = o.dataTransfer.getData("application/json");
-      if (n)
-        try {
-          const l = JSON.parse(n), p = (u = document.querySelector(".react-flow")) == null ? void 0 : u.getBoundingClientRect();
-          if (!p) return;
-          const f = {
-            x: o.clientX - p.left,
-            y: o.clientY - p.top
-          };
-          t(l, f);
-        } catch (l) {
-          console.error("Failed to parse dropped node:", l);
-        }
-    },
-    [t]
-  ), m = C((o) => {
-    o.preventDefault(), o.dataTransfer.dropEffect = "move";
-  }, []);
-  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(
+    o((C) => [...C, x]), m(""), a(!0), c(null);
+    try {
+      const C = await _e({
+        prompt: x.content,
+        history: n
+      }), S = {
+        role: "assistant",
+        content: C.message,
+        workflow: C.workflow,
+        timestamp: Date.now()
+      };
+      o((T) => [...T, S]), !C.success && C.error && c(C.error);
+    } catch (C) {
+      c(C instanceof Error ? C.message : "Failed to generate workflow");
+    } finally {
+      a(!1);
+    }
+  }, [i, d, n]), g = (x) => {
+    x.key === "Enter" && !x.shiftKey && (x.preventDefault(), b());
+  }, N = (x) => {
+    t(x), l();
+  }, W = () => {
+    o([]), c(null);
+  };
+  return r ? /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ s("div", { className: "bg-white dark:bg-zinc-800 rounded-lg shadow-xl w-full max-w-2xl mx-4 h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-zinc-700", children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              className: "h-5 w-5 text-teal-600",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: "AI Workflow Generator" })
+        ] }),
+        /* @__PURE__ */ e("span", { className: "text-xs bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-300 px-2 py-0.5 rounded", children: "Gemini 3 Pro" })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        n.length > 0 && /* @__PURE__ */ e(
           "button",
           {
-            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"
+            onClick: W,
+            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",
+            title: "New Chat",
+            children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 4v16m8-8H4"
+              }
+            ) })
           }
         ),
         /* @__PURE__ */ e(
           "button",
           {
-            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"
+            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",
+            children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", 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__ */ s("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
+      u === !1 && /* @__PURE__ */ e("div", { className: "bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg p-4", children: /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ e("p", { className: "font-medium text-amber-800 dark:text-amber-200", children: "AI Generation Not Available" }),
+          /* @__PURE__ */ e("p", { className: "text-sm text-amber-700 dark:text-amber-300 mt-1", children: f }),
+          /* @__PURE__ */ e("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-2", children: "Set GEMINI_API_KEY in your environment to enable this feature." })
+        ] })
+      ] }) }),
+      n.length === 0 && u !== !1 && /* @__PURE__ */ s("div", { className: "text-center py-8", children: [
+        /* @__PURE__ */ e("div", { className: "inline-flex items-center justify-center w-16 h-16 bg-teal-100 dark:bg-teal-900/50 rounded-full mb-4", children: /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "h-8 w-8 text-teal-600 dark:text-teal-400",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ e("h4", { className: "text-lg font-medium text-gray-900 dark:text-white mb-2", children: "Describe your workflow" }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 dark:text-zinc-400 max-w-md mx-auto", children: "Tell me what you want to create and I'll generate a workflow for you. For example:" }),
+        /* @__PURE__ */ e("div", { className: "mt-4 space-y-2", children: [
+          "Generate an image of a sunset and resize it to 800x600",
+          "Use Gemini text to generate 3 creative image prompts about space exploration, then generate images from each prompt",
+          "Generate an image with Gemini, then use it as a reference to create a variation with different lighting",
+          "Create a product mockup: generate a minimalist logo, then composite it onto a t-shirt image",
+          "Build an AI art pipeline: generate a base image, apply artistic style transfer, then upscale to 4K"
+        ].map((x, C) => /* @__PURE__ */ s(
+          "button",
+          {
+            onClick: () => m(x),
+            className: "block w-full text-left text-sm px-4 py-2 bg-gray-100 dark:bg-zinc-700 hover:bg-gray-200 dark:hover:bg-zinc-600 rounded-lg text-gray-700 dark:text-zinc-300 transition-colors",
+            children: [
+              '"',
+              x,
+              '"'
+            ]
+          },
+          C
+        )) })
+      ] }),
+      n.map((x, C) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: `flex ${x.role === "user" ? "justify-end" : "justify-start"}`,
+          children: /* @__PURE__ */ s(
+            "div",
+            {
+              className: `max-w-[80%] rounded-lg px-4 py-3 ${x.role === "user" ? "bg-teal-600 text-white" : "bg-gray-100 dark:bg-zinc-700 text-gray-900 dark:text-white"}`,
+              children: [
+                /* @__PURE__ */ e("p", { className: "text-sm whitespace-pre-wrap", children: x.content }),
+                x.role === "assistant" && x.workflow && /* @__PURE__ */ s("div", { className: "mt-3 pt-3 border-t border-gray-200 dark:border-zinc-600", children: [
+                  /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-2", children: [
+                    /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-500 dark:text-zinc-400", children: "Generated Workflow" }),
+                    /* @__PURE__ */ e(
+                      "button",
+                      {
+                        onClick: () => N(x.workflow),
+                        className: "text-xs px-3 py-1 bg-teal-600 hover:bg-teal-700 text-white rounded transition-colors",
+                        children: "Apply to Canvas"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 rounded p-2 text-xs", children: /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+                    x.workflow.nodes.map((S, T) => /* @__PURE__ */ s(
+                      "div",
+                      {
+                        className: "flex items-center gap-2 text-gray-600 dark:text-zinc-300",
+                        children: [
+                          /* @__PURE__ */ e("span", { className: "font-mono bg-gray-100 dark:bg-zinc-700 px-1.5 py-0.5 rounded", children: S.nodeType.split(":").pop() }),
+                          S.label && /* @__PURE__ */ s("span", { className: "text-gray-400", children: [
+                            "(",
+                            S.label,
+                            ")"
+                          ] })
+                        ]
+                      },
+                      T
+                    )),
+                    x.workflow.edges.length > 0 && /* @__PURE__ */ s("div", { className: "text-gray-400 dark:text-zinc-500 pt-1", children: [
+                      x.workflow.edges.length,
+                      " connection",
+                      x.workflow.edges.length !== 1 ? "s" : ""
+                    ] })
+                  ] }) })
+                ] })
+              ]
+            }
+          )
+        },
+        C
+      )),
+      d && /* @__PURE__ */ e("div", { className: "flex justify-start", children: /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-700 rounded-lg px-4 py-3", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ s("div", { className: "flex space-x-1", children: [
+          /* @__PURE__ */ e("div", { className: "w-2 h-2 bg-gray-400 dark:bg-zinc-500 rounded-full animate-bounce" }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-2 h-2 bg-gray-400 dark:bg-zinc-500 rounded-full animate-bounce",
+              style: { animationDelay: "0.1s" }
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "w-2 h-2 bg-gray-400 dark:bg-zinc-500 rounded-full animate-bounce",
+              style: { animationDelay: "0.2s" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: "Generating workflow..." })
+      ] }) }) }),
+      p && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-3", children: /* @__PURE__ */ e("p", { className: "text-sm text-red-700 dark:text-red-300", children: p }) }),
+      /* @__PURE__ */ e("div", { ref: v })
+    ] }),
+    /* @__PURE__ */ s("div", { className: "border-t border-gray-200 dark:border-zinc-700 p-4", children: [
+      /* @__PURE__ */ s("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ e(
+          "textarea",
+          {
+            ref: y,
+            value: i,
+            onChange: (x) => m(x.target.value),
+            onKeyDown: g,
+            placeholder: u === !1 ? "AI generation not available" : "Describe what workflow you want to create...",
+            disabled: d || u === !1,
+            rows: 2,
+            className: "flex-1 resize-none rounded-lg border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 px-4 py-2 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-zinc-500 focus:border-teal-500 focus:outline-none focus:ring-1 focus:ring-teal-500 disabled:opacity-50 disabled:cursor-not-allowed"
           }
         ),
         /* @__PURE__ */ e(
           "button",
           {
-            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"
+            onClick: b,
+            disabled: !i.trim() || d || u === !1,
+            className: "self-end px-4 py-2 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-lg transition-colors",
+            children: /* @__PURE__ */ e("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 19l9 2-9-18-9 18 9-2zm0 0v-8"
+              }
+            ) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("p", { className: "text-xs text-gray-400 dark:text-zinc-500 mt-2", children: "Press Enter to send, Shift+Enter for new line" })
+    ] })
+  ] }) }) : null;
+}
+function Ut() {
+  const { screenToFlowPosition: r } = Ae(), l = k((o) => o.addNode), t = L(
+    (o) => {
+      o.preventDefault();
+      const i = o.dataTransfer.getData("application/json");
+      if (i)
+        try {
+          const m = JSON.parse(i), d = r({
+            x: o.clientX,
+            y: o.clientY
+          });
+          l(m, d);
+        } catch (m) {
+          console.error("Failed to parse dropped node:", m);
+        }
+    },
+    [l, r]
+  ), n = L((o) => {
+    o.preventDefault(), o.dataTransfer.dropEffect = "move";
+  }, []);
+  return /* @__PURE__ */ e("div", { className: "flex-1", onDrop: t, onDragOver: n, children: /* @__PURE__ */ e(at, {}) });
+}
+function Ht() {
+  const [r, l] = I("editor"), [t, n] = I(!1), o = k((a) => a.loadTemplate), i = k((a) => a.loadGeneratedWorkflow);
+  D(() => {
+    const p = new URLSearchParams(window.location.search).get("template");
+    if (p) {
+      const c = de(p);
+      c && (o(c), window.history.replaceState({}, "", window.location.pathname));
+    }
+  }, [o]), D(() => {
+    const a = () => {
+      l("editor");
+    };
+    return window.addEventListener("workflow-loaded", a), () => {
+      window.removeEventListener("workflow-loaded", a);
+    };
+  }, []);
+  const m = L(
+    (a) => {
+      const p = de(a);
+      p && (o(p), l("editor"));
+    },
+    [o]
+  ), d = L(
+    (a) => {
+      i(a), l("editor");
+    },
+    [i]
+  );
+  return /* @__PURE__ */ s(We, { children: [
+    /* @__PURE__ */ e(Dt, {}),
+    /* @__PURE__ */ e(
+      Tt,
+      {
+        isOpen: t,
+        onClose: () => n(!1),
+        onApplyWorkflow: d
+      }
+    ),
+    /* @__PURE__ */ e(At, {}),
+    /* @__PURE__ */ s("div", { className: "h-screen flex flex-col bg-gray-100 dark:bg-zinc-900", children: [
+      /* @__PURE__ */ e(gt, {}),
+      /* @__PURE__ */ e("div", { className: "bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ s("div", { className: "flex", children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => l("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"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => l("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"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => l("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__ */ s(
+          "button",
+          {
+            onClick: () => n(!0),
+            className: "mr-4 px-4 py-1.5 text-sm font-medium text-white bg-gradient-to-r from-teal-500 to-cyan-500 hover:from-teal-600 hover:to-cyan-600 rounded-full flex items-center gap-2 transition-all shadow-sm hover:shadow",
+            children: [
+              /* @__PURE__ */ e("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                }
+              ) }),
+              "AI Generate"
+            ]
           }
         )
       ] }) }),
-      /* @__PURE__ */ c("div", { className: "flex-1 flex overflow-hidden", children: [
-        r === "editor" && /* @__PURE__ */ c(P, { children: [
-          /* @__PURE__ */ e(Ye, {}),
-          /* @__PURE__ */ e("div", { className: "flex-1", onDrop: d, onDragOver: m, children: /* @__PURE__ */ e(Qe, {}) }),
-          /* @__PURE__ */ e(Xe, {})
+      /* @__PURE__ */ s("div", { className: "flex-1 flex overflow-hidden", children: [
+        r === "editor" && /* @__PURE__ */ s(U, { children: [
+          /* @__PURE__ */ e(ot, {}),
+          /* @__PURE__ */ e(Ut, {}),
+          /* @__PURE__ */ e(st, {})
         ] }),
-        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 }) })
+        r === "gallery" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(ht, {}) }),
+        r === "templates" && /* @__PURE__ */ e("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ e(St, { onSelect: m }) })
       ] })
     ] })
   ] });
 }
 export {
-  St as AISettings,
-  jt 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
+  Dt as AISettings,
+  Ht as App,
+  ht as Gallery,
+  st as NodeInspector,
+  ot as NodePalette,
+  St as TemplateGallery,
+  gt as Toolbar,
+  nt as UploadGallery,
+  at as WorkflowEditor,
+  At as WorkflowLibrary,
+  It as getCategories,
+  de as getTemplateById,
+  Vt as getTemplatesByCategory,
+  Ft as searchTemplates,
+  H as templates,
+  k as useWorkflowStore
 };
 //# sourceMappingURL=index.js.map