@teamflojo/floimg-studio-ui 0.1.6 → 0.1.7

package/dist/index.js

@@ -1,8 +1,8 @@
-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 { jsxs as c, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { memo as P, useRef as xe, useCallback as C, useState as N, useEffect as M, useMemo as ee } from "react";
+import ke, { Handle as W, Position as A, applyNodeChanges as we, applyEdgeChanges as ve, MarkerType as ye, Background as Ne, Controls as ze, MiniMap as Ce, ReactFlowProvider as Se } from "reactflow";
 import { create as se } from "zustand";
-import { useQuery as _ } from "@tanstack/react-query";
+import { useQuery as K } from "@tanstack/react-query";
 function Ie(r, i) {
   let t;
   try {
@@ -20,12 +20,12 @@ function Ie(r, i) {
     removeItem: (s) => t.removeItem(s)
   };
 }
-const H = (r) => (i) => {
+const _ = (r) => (i) => {
   try {
     const t = r(i);
     return t instanceof Promise ? t : {
       then(a) {
-        return H(a)(t);
+        return _(a)(t);
       },
       catch(a) {
         return this;
@@ -37,7 +37,7 @@ const H = (r) => (i) => {
         return this;
       },
       catch(a) {
-        return H(a)(t);
+        return _(a)(t);
       }
     };
   }
@@ -87,7 +87,7 @@ const H = (r) => (i) => {
       return h((z = a()) != null ? z : f);
     });
     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) => {
+    return _(u.getItem.bind(u))(d.name).then((h) => {
       if (h)
         if (typeof h.version == "number" && h.version !== d.version) {
           if (d.migrate) {
@@ -138,7 +138,7 @@ const H = (r) => (i) => {
     })
   }, d.skipHydration || k(), b || f;
 }, ie = Le, I = "/api";
-async function A(r, i) {
+async function D(r, i) {
   const t = await fetch(r, {
     ...i,
     headers: {
@@ -153,37 +153,37 @@ async function A(r, i) {
   return t.json();
 }
 async function We() {
-  return A(`${I}/nodes/generators`);
+  return D(`${I}/nodes/generators`);
 }
 async function Ae() {
-  return A(`${I}/nodes/transforms`);
+  return D(`${I}/nodes/transforms`);
 }
 async function De(r, i, t) {
-  return A(`${I}/execute/sync`, {
+  return D(`${I}/execute/sync`, {
     method: "POST",
     body: JSON.stringify({ nodes: r, edges: i, aiProviders: t })
   });
 }
 async function $e(r, i) {
-  return A(`${I}/export/yaml`, {
+  return D(`${I}/export/yaml`, {
     method: "POST",
     body: JSON.stringify({ nodes: r, edges: i })
   });
 }
 async function Me() {
-  return A(`${I}/images`);
+  return D(`${I}/images`);
 }
-function F(r) {
+function te(r) {
   return `${I}/images/${r}/blob`;
 }
-async function je(r) {
+async function Ue(r) {
   try {
-    return await A(`${I}/images/${r}/workflow`);
+    return await D(`${I}/images/${r}/workflow`);
   } catch {
     return null;
   }
 }
-async function Pe(r) {
+async function je(r) {
   const i = new FormData();
   i.append("file", r);
   const t = await fetch(`${I}/uploads`, {
@@ -196,10 +196,10 @@ async function Pe(r) {
   }
   return t.json();
 }
-async function Te() {
-  return A(`${I}/uploads`);
+async function Pe() {
+  return D(`${I}/uploads`);
 }
-async function Ue(r) {
+async function Te(r) {
   const i = await fetch(`${I}/uploads/${r}`, {
     method: "DELETE"
   });
@@ -210,13 +210,13 @@ function de(r) {
   return `${I}/uploads/${r}/blob`;
 }
 async function Ee(r) {
-  return A(`${I}/import`, {
+  return D(`${I}/import`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
 }
 async function Oe(r) {
-  return A(`${I}/import/validate`, {
+  return D(`${I}/import/validate`, {
     method: "POST",
     body: JSON.stringify({ yaml: r })
   });
@@ -265,7 +265,7 @@ const re = "http://localhost:11434", ae = "http://localhost:1234", $ = se()(
   )
 );
 let Be = 0;
-function K() {
+function q() {
   return `node_${++Be}`;
 }
 function oe() {
@@ -291,13 +291,14 @@ 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();
+          const o = q();
           return a.set(m.id, o), {
             id: o,
             type: m.type,
@@ -321,6 +322,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -337,6 +339,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -356,7 +359,7 @@ const x = se()(
       setTransforms: (t) => r({ transforms: t }),
       addNode: (t, a) => {
         var o, n, u;
-        const s = K();
+        const s = q();
         let d;
         if (t.type === "generator")
           d = {
@@ -451,6 +454,7 @@ const x = se()(
           execution: {
             status: "running",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: o
@@ -464,6 +468,7 @@ const x = se()(
             execution: {
               status: "completed",
               imageIds: n.imageIds,
+              imageUrls: n.imageUrls || [],
               previews: n.previews || {},
               dataOutputs: n.dataOutputs || {},
               nodeStatus: u
@@ -472,6 +477,7 @@ const x = se()(
             execution: {
               status: "error",
               imageIds: [],
+              imageUrls: [],
               previews: {},
               dataOutputs: {},
               nodeStatus: u,
@@ -486,6 +492,7 @@ const x = se()(
             execution: {
               status: "error",
               imageIds: [],
+              imageUrls: [],
               previews: {},
               dataOutputs: {},
               nodeStatus: u,
@@ -509,7 +516,7 @@ const x = se()(
       },
       importFromYaml: (t, a, s) => {
         const d = /* @__PURE__ */ new Map(), m = t.map((n) => {
-          const u = K();
+          const u = q();
           return d.set(n.id, u), {
             id: u,
             type: n.type,
@@ -536,6 +543,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -559,6 +567,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -615,6 +624,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -636,6 +646,7 @@ const x = se()(
           execution: {
             status: "idle",
             imageIds: [],
+            imageUrls: [],
             previews: {},
             dataOutputs: {},
             nodeStatus: {}
@@ -681,10 +692,10 @@ function R(r) {
       s.default !== void 0 && (i[a] = s.default);
   return i;
 }
-function U(r) {
+function T(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 }) {
+function H({ nodeId: r, color: i }) {
   const t = x((s) => s.previewVisible[r] !== !1), a = x((s) => s.togglePreview);
   return /* @__PURE__ */ e(
     "button",
@@ -714,12 +725,12 @@ function Q({ nodeId: r, color: i }) {
     }
   );
 }
-const Re = T(function({
+const Re = P(function({
   id: i,
   data: t,
   selected: a
 }) {
-  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");
+  const s = x((u) => u.execution.previews[i]), d = x((u) => u.execution.nodeStatus[i]), m = x((u) => u.previewVisible[i] !== !1), n = T(d) || (a ? "border-blue-500" : "border-blue-200");
   return /* @__PURE__ */ c(
     "div",
     {
@@ -730,7 +741,7 @@ const Re = T(function({
           /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-blue-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-blue-700 dark:text-blue-400", children: t.generatorName }),
-            /* @__PURE__ */ e(Q, { nodeId: i, color: "text-blue-500 dark:text-blue-400" })
+            /* @__PURE__ */ e(H, { nodeId: i, color: "text-blue-500 dark:text-blue-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, l]) => /* @__PURE__ */ c("div", { className: "truncate", children: [
             u,
@@ -738,28 +749,28 @@ const Re = T(function({
             String(l).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-blue-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-blue-500" })
       ]
     }
   );
-}), Fe = T(function({
+}), Fe = P(function({
   id: i,
   data: t,
   selected: a
 }) {
-  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");
+  const s = x((u) => u.execution.previews[i]), d = x((u) => u.execution.nodeStatus[i]), m = x((u) => u.previewVisible[i] !== !1), n = T(d) || (a ? "border-teal-500" : "border-teal-200");
   return /* @__PURE__ */ c(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${n}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-teal-500" }),
+        /* @__PURE__ */ e(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-teal-500" }),
         s && m && /* @__PURE__ */ e("div", { className: "bg-gray-100 dark:bg-zinc-900 border-b border-gray-200 dark:border-zinc-700", children: /* @__PURE__ */ e("img", { src: s, alt: "Preview", className: "w-full h-24 object-contain" }) }),
         /* @__PURE__ */ c("div", { className: "px-4 py-3", children: [
           /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-teal-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-teal-700 dark:text-teal-400", children: t.operation }),
-            /* @__PURE__ */ e(Q, { nodeId: i, color: "text-teal-500 dark:text-teal-400" })
+            /* @__PURE__ */ e(H, { nodeId: i, color: "text-teal-500 dark:text-teal-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, l]) => /* @__PURE__ */ c("div", { className: "truncate", children: [
             u,
@@ -767,18 +778,18 @@ const Re = T(function({
             String(l).slice(0, 20)
           ] }, u)) })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-teal-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-teal-500" })
       ]
     }
   );
-}), 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");
+}), Ve = P(function({ id: i, data: t, selected: a }) {
+  const s = x((o) => o.execution.nodeStatus[i]), m = T(s) || (a ? "border-green-500" : "border-green-200");
   return /* @__PURE__ */ c(
     "div",
     {
       className: `px-4 py-3 rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] ${m}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-green-500" }),
+        /* @__PURE__ */ e(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-green-500" }),
         /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
           /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-green-500" }),
           /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-green-700 dark:text-green-400", children: "Save" })
@@ -787,11 +798,11 @@ 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(
+}), Ge = P(function({ id: i, data: t, selected: a }) {
+  const s = x((v) => v.execution.previews[i]), d = x((v) => v.execution.nodeStatus[i]), m = x((v) => v.previewVisible[i] !== !1), o = x((v) => v.updateNodeData), n = xe(null), l = T(d) || (a ? "border-amber-500" : "border-amber-200"), p = C(
     async (v) => {
       try {
-        const w = await Pe(v);
+        const w = await je(v);
         o(i, {
           uploadId: w.id,
           filename: w.filename,
@@ -854,15 +865,15 @@ const Re = T(function({
           /* @__PURE__ */ c("div", { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ e("div", { className: "w-3 h-3 rounded-full bg-amber-500" }),
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-amber-700 dark:text-amber-400", children: "Input" }),
-            /* @__PURE__ */ e(Q, { nodeId: i, color: "text-amber-500 dark:text-amber-400" })
+            /* @__PURE__ */ e(H, { nodeId: i, color: "text-amber-500 dark:text-amber-400" })
           ] }),
           /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400 truncate", children: t.filename || "No image selected" })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-amber-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-amber-500" })
       ]
     }
   );
-}), qe = T(function({
+}), qe = P(function({
   id: i,
   data: t,
   selected: a
@@ -871,13 +882,13 @@ const Re = T(function({
   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");
+  }), o = T(s) || (a ? "border-cyan-500" : "border-cyan-200");
   return /* @__PURE__ */ c(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-cyan-500" }),
+        /* @__PURE__ */ e(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-cyan-500" }),
         d && /* @__PURE__ */ e("div", { className: "bg-cyan-50 dark:bg-cyan-900/30 border-b border-cyan-100 dark:border-cyan-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ c("pre", { className: "text-xs text-cyan-800 dark:text-cyan-200 whitespace-pre-wrap", children: [
           (n = d.content) == null ? void 0 : n.slice(0, 200),
           (((u = d.content) == null ? void 0 : u.length) || 0) > 200 && "..."
@@ -902,22 +913,22 @@ const Re = T(function({
             "..."
           ] }) : null })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-cyan-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-cyan-500" })
       ]
     }
   );
-}), Ke = T(function({ id: i, data: t, selected: a }) {
+}), Ke = P(function({ id: i, data: t, selected: a }) {
   var n, u;
   const s = x((l) => l.execution.nodeStatus[i]), d = x((l) => {
     var p;
     return (p = l.execution.dataOutputs) == null ? void 0 : p[i];
-  }), o = U(s) || (a ? "border-pink-500" : "border-pink-200");
+  }), o = T(s) || (a ? "border-pink-500" : "border-pink-200");
   return /* @__PURE__ */ c(
     "div",
     {
       className: `rounded-lg border-2 bg-white dark:bg-zinc-800 shadow-md min-w-[180px] overflow-hidden ${o}`,
       children: [
-        /* @__PURE__ */ e(L, { type: "target", position: W.Left, className: "w-3 h-3 !bg-pink-500" }),
+        /* @__PURE__ */ e(W, { type: "target", position: A.Left, className: "w-3 h-3 !bg-pink-500" }),
         d && /* @__PURE__ */ e("div", { className: "bg-pink-50 dark:bg-pink-900/30 border-b border-pink-100 dark:border-pink-800 p-2 max-h-24 overflow-auto", children: /* @__PURE__ */ c("pre", { className: "text-xs text-pink-800 dark:text-pink-200 whitespace-pre-wrap", children: [
           (n = d.content) == null ? void 0 : n.slice(0, 200),
           (((u = d.content) == null ? void 0 : u.length) || 0) > 200 && "..."
@@ -939,7 +950,7 @@ const Re = T(function({
             "..."
           ] }) : null })
         ] }),
-        /* @__PURE__ */ e(L, { type: "source", position: W.Right, className: "w-3 h-3 !bg-pink-500" })
+        /* @__PURE__ */ e(W, { type: "source", position: A.Right, className: "w-3 h-3 !bg-pink-500" })
       ]
     }
   );
@@ -1028,7 +1039,7 @@ function Je({ onSelect: r }) {
   const [i, t] = N([]), [a, s] = N(!0), [d, m] = N(null), o = async () => {
     try {
       s(!0);
-      const l = await Te();
+      const l = await Pe();
       t(l), m(null);
     } catch (l) {
       m(l instanceof Error ? l.message : "Failed to load uploads");
@@ -1042,7 +1053,7 @@ function Je({ onSelect: r }) {
   const n = async (l, p) => {
     if (p.stopPropagation(), !!confirm("Delete this upload?"))
       try {
-        await Ue(l), t((f) => f.filter((b) => b.id !== l));
+        await Te(l), t((f) => f.filter((b) => b.id !== l));
       } catch (f) {
         console.error("Failed to delete:", f);
       }
@@ -1087,10 +1098,10 @@ function Je({ onSelect: r }) {
   )) }) });
 }
 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 } = _({
+  const r = x((g) => g.setGenerators), i = x((g) => g.setTransforms), t = x((g) => g.generators), a = x((g) => g.transforms), s = x((g) => g.addNode), [d, m] = N(!1), { data: o } = K({
     queryKey: ["generators"],
     queryFn: We
-  }), { data: n } = _({
+  }), { data: n } = K({
     queryKey: ["transforms"],
     queryFn: Ae
   });
@@ -1783,44 +1794,44 @@ function nt({
   afterActionsSlot: t,
   hideAttribution: a = !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("");
+  const s = x((y) => y.execution), d = x((y) => y.execute), m = x((y) => y.exportToYaml), o = x((y) => y.importFromYaml), n = x((y) => y.nodes), u = x((y) => y.edges), l = $((y) => y.openSettings), p = x((y) => y.activeWorkflowName), f = x((y) => y.hasUnsavedChanges), b = x((y) => y.saveWorkflow), k = x((y) => y.toggleLibrary), g = x((y) => y.setActiveWorkflowName), [v, w] = N(!1), [h, z] = N(!1), [S, B] = N("yaml"), [Q, le] = N(""), [J, ce] = N(""), [Y, U] = N(null), [me, F] = N(!1), [X, V] = N("");
   M(() => {
     const y = () => {
-      j("New workflow created"), setTimeout(() => j(null), 2e3);
+      U("New workflow created"), setTimeout(() => U(null), 2e3);
     };
     return window.addEventListener("new-workflow-created", y), () => window.removeEventListener("new-workflow-created", y);
   }, []);
-  const q = C(() => {
-    n.length !== 0 && (b(), j("Saved!"), setTimeout(() => j(null), 2e3));
+  const G = C(() => {
+    n.length !== 0 && (b(), U("Saved!"), setTimeout(() => U(null), 2e3));
   }, [n.length, b]), ue = () => {
-    G(p), V(!0);
-  }, ee = () => {
-    const y = Z.trim();
-    y && y !== p && g(y), V(!1);
+    V(p), F(!0);
+  }, Z = () => {
+    const y = X.trim();
+    y && y !== p && g(y), F(!1);
   };
   M(() => {
-    function y(D) {
-      (D.metaKey || D.ctrlKey) && D.key === "s" && (D.preventDefault(), q());
+    function y(L) {
+      (L.metaKey || L.ctrlKey) && L.key === "s" && (L.preventDefault(), G());
     }
     return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
-  }, [q]);
+  }, [G]);
   const ge = async () => {
     await d();
   }, pe = async () => {
     const y = await m();
     le(y);
-    const D = at(n, u);
-    ce(D), w(!0);
+    const L = at(n, u);
+    ce(L), w(!0);
   }, he = () => {
-    const y = S === "yaml" ? J : Y;
+    const y = S === "yaml" ? Q : J;
     navigator.clipboard.writeText(y);
   }, fe = C(
-    (y, D, be) => {
-      o(y, D, be), j("Workflow imported!"), setTimeout(() => j(null), 2e3);
+    (y, L, be) => {
+      o(y, L, be), U("Workflow imported!"), setTimeout(() => U(null), 2e3);
     },
     [o]
   );
-  return /* @__PURE__ */ c(P, { children: [
+  return /* @__PURE__ */ c(j, { children: [
     /* @__PURE__ */ c("div", { className: "h-14 bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700 flex items-center justify-between px-4", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ e(
@@ -1859,11 +1870,11 @@ function nt({
             "input",
             {
               type: "text",
-              value: Z,
-              onChange: (y) => G(y.target.value),
-              onBlur: ee,
+              value: X,
+              onChange: (y) => V(y.target.value),
+              onBlur: Z,
               onKeyDown: (y) => {
-                y.key === "Enter" && ee(), y.key === "Escape" && (G(p), V(!1));
+                y.key === "Enter" && Z(), y.key === "Escape" && (V(p), F(!1));
               },
               className: "w-48 px-2 py-1 text-sm font-medium bg-white dark:bg-zinc-900 border border-teal-500 rounded focus:outline-none focus:ring-1 focus:ring-teal-500 text-gray-900 dark:text-zinc-100",
               autoFocus: !0
@@ -1878,7 +1889,7 @@ function nt({
             }
           ),
           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 })
+          Y && /* @__PURE__ */ e("span", { className: "text-xs text-green-600 dark:text-green-400", children: Y })
         ] }),
         /* @__PURE__ */ c("span", { className: "text-sm text-gray-500 dark:text-zinc-400", children: [
           n.length,
@@ -1919,7 +1930,7 @@ function nt({
         /* @__PURE__ */ e(
           "button",
           {
-            onClick: q,
+            onClick: G,
             disabled: n.length === 0,
             className: "p-2 text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-700 rounded-md disabled:opacity-50 disabled:cursor-not-allowed",
             title: "Save Workflow (Cmd+S)",
@@ -1957,7 +1968,7 @@ function nt({
             onClick: ge,
             disabled: n.length === 0 || s.status === "running",
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
-            children: s.status === "running" ? /* @__PURE__ */ c(P, { children: [
+            children: s.status === "running" ? /* @__PURE__ */ c(j, { children: [
               /* @__PURE__ */ c("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
@@ -1980,7 +1991,7 @@ function nt({
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ c(P, { children: [
+            ] }) : /* @__PURE__ */ c(j, { children: [
               /* @__PURE__ */ c("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
@@ -2015,24 +2026,14 @@ function nt({
         " image",
         s.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: s.imageUrls.slice(0, 4).map((y, L) => /* @__PURE__ */ e("a", { href: y, target: "_blank", rel: "noopener noreferrer", className: "block", children: /* @__PURE__ */ e(
+        "img",
         {
-          href: 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: y,
+          alt: "Generated",
+          className: "h-12 w-12 object-cover rounded border border-green-300 dark:border-green-700"
+        }
+      ) }, L)) })
     ] }) }),
     s.status === "error" && /* @__PURE__ */ e("div", { className: "bg-red-50 dark:bg-red-900/30 border-b border-red-200 dark:border-red-800 px-4 py-3", children: /* @__PURE__ */ c("span", { className: "text-red-700 dark:text-red-400", children: [
       "Error: ",
@@ -2078,7 +2079,7 @@ 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__ */ e("div", { className: "p-4 overflow-auto flex-1", children: /* @__PURE__ */ e("pre", { className: "bg-gray-100 dark:bg-zinc-900 p-4 rounded text-sm font-mono whitespace-pre-wrap text-gray-800 dark:text-zinc-200", children: S === "yaml" ? Q : J }) }),
       /* @__PURE__ */ c("div", { className: "flex justify-between items-center px-4 py-3 border-t border-gray-200 dark:border-zinc-700", children: [
         /* @__PURE__ */ e("span", { className: "text-xs text-gray-500 dark:text-zinc-400", children: S === "yaml" ? "Use with floimg CLI: floimg run workflow.yaml" : "Run with Node.js or Bun" }),
         /* @__PURE__ */ c("div", { className: "flex gap-2", children: [
@@ -2117,7 +2118,7 @@ function st() {
     isLoading: s,
     error: d,
     refetch: m
-  } = _({
+  } = K({
     queryKey: ["images"],
     queryFn: Me,
     refetchInterval: 5e3
@@ -2125,7 +2126,7 @@ function st() {
   }), o = async (n) => {
     t(n);
     try {
-      const u = await je(n);
+      const u = await Ue(n);
       if (u != null && u.workflow) {
         const l = {
           id: `image-${n}`,
@@ -2189,14 +2190,14 @@ function it({ image: r, onLoadWorkflow: i, isLoading: t }) {
       /* @__PURE__ */ e(
         "a",
         {
-          href: F(r.id),
+          href: te(r.id),
           target: "_blank",
           rel: "noopener noreferrer",
           className: "block aspect-square bg-gray-100 dark:bg-zinc-900",
           children: /* @__PURE__ */ e(
             "img",
             {
-              src: F(r.id),
+              src: te(r.id),
               alt: r.filename,
               className: "w-full h-full object-cover",
               loading: "lazy"
@@ -2666,7 +2667,7 @@ function Mt(r) {
   );
 }
 function xt({ onSelect: r }) {
-  const [i, t] = N(null), [a, s] = N(""), d = te(() => bt(), []), m = te(() => {
+  const [i, t] = N(null), [a, s] = N(""), d = ee(() => bt(), []), m = ee(() => {
     let o = O;
     if (i && (o = o.filter((n) => n.category === i)), a) {
       const n = a.toLowerCase();
@@ -2875,7 +2876,7 @@ function wt({
                 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: [
+            l && /* @__PURE__ */ c(j, { 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: [
                 /* @__PURE__ */ e(
@@ -2921,7 +2922,7 @@ function vt() {
   const r = x((l) => l.showLibrary), i = x((l) => l.toggleLibrary), t = x((l) => l.savedWorkflows), a = x((l) => l.activeWorkflowId), s = x((l) => l.loadWorkflow), d = x((l) => l.deleteWorkflow), m = x((l) => l.renameWorkflow), o = x((l) => l.duplicateWorkflow), n = x((l) => l.newWorkflow);
   if (!r) return null;
   const u = [...t].sort((l, p) => p.updatedAt - l.updatedAt);
-  return /* @__PURE__ */ c(P, { children: [
+  return /* @__PURE__ */ c(j, { children: [
     /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: i }),
     /* @__PURE__ */ c("div", { className: "fixed left-0 top-0 bottom-0 w-80 bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700 z-50 flex flex-col shadow-xl", children: [
       /* @__PURE__ */ c("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700", children: [
@@ -3258,7 +3259,7 @@ function St() {
     ) })
   ] }) }) : null;
 }
-function jt() {
+function Ut() {
   const [r, i] = N("editor"), t = x((o) => o.addNode), a = x((o) => o.loadTemplate);
   M(() => {
     const n = new URLSearchParams(window.location.search).get("template");
@@ -3334,7 +3335,7 @@ function jt() {
         )
       ] }) }),
       /* @__PURE__ */ c("div", { className: "flex-1 flex overflow-hidden", children: [
-        r === "editor" && /* @__PURE__ */ c(P, { children: [
+        r === "editor" && /* @__PURE__ */ c(j, { children: [
           /* @__PURE__ */ e(Ye, {}),
           /* @__PURE__ */ e("div", { className: "flex-1", onDrop: d, onDragOver: m, children: /* @__PURE__ */ e(Qe, {}) }),
           /* @__PURE__ */ e(Xe, {})
@@ -3347,7 +3348,7 @@ function jt() {
 }
 export {
   St as AISettings,
-  jt as App,
+  Ut as App,
   st as Gallery,
   Xe as NodeInspector,
   Ye as NodePalette,