@teamflojo/floimg-studio-ui 0.1.4 → 0.1.5

package/dist/index.js

@@ -1,4 +1,4 @@
-import { jsxs as m, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { jsxs as m, jsx as e, Fragment as P } from "react/jsx-runtime";
 import { memo as T, useRef as ge, useCallback as C, useState as N, useEffect as $, useMemo as X } from "react";
 import pe, { Handle as I, Position as L, applyNodeChanges as he, applyEdgeChanges as fe, MarkerType as be, Background as xe, Controls as ke, MiniMap as we, ReactFlowProvider as ve } from "reactflow";
 import { create as oe } from "zustand";
@@ -252,9 +252,9 @@ const Z = "http://localhost:11434", ee = "http://localhost:1234", A = oe()(
     }
   )
 );
-let Pe = 0;
+let je = 0;
 function te() {
-  return `node_${++Pe}`;
+  return `node_${++je}`;
 }
 function re() {
   const r = Date.now(), s = Math.random().toString(36).substring(2, 8);
@@ -653,7 +653,7 @@ function H({ nodeId: r, color: s }) {
     }
   );
 }
-const je = T(function({
+const Pe = T(function({
   id: s,
   data: t,
   selected: o
@@ -671,7 +671,7 @@ const je = T(function({
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-blue-700 dark:text-blue-400", children: t.generatorName }),
             /* @__PURE__ */ e(H, { nodeId: s, color: "text-blue-500 dark:text-blue-400" })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
             u,
             ": ",
             String(d).slice(0, 20)
@@ -700,7 +700,7 @@ const je = T(function({
             /* @__PURE__ */ e("span", { className: "font-semibold text-sm text-teal-700 dark:text-teal-400", children: t.operation }),
             /* @__PURE__ */ e(H, { nodeId: s, color: "text-teal-500 dark:text-teal-400" })
           ] }),
-          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
+          /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 dark:text-zinc-400", children: Object.entries(t.params).filter(([, u]) => typeof u != "object" || u === null).slice(0, 2).map(([u, d]) => /* @__PURE__ */ m("div", { className: "truncate", children: [
             u,
             ": ",
             String(d).slice(0, 20)
@@ -883,7 +883,7 @@ const je = T(function({
     }
   );
 }), Be = {
-  generator: je,
+  generator: Pe,
   transform: Te,
   save: Me,
   input: Ue,
@@ -948,6 +948,9 @@ function Ge() {
       nodeTypes: Be,
       defaultEdgeOptions: Re,
       isValidConnection: l,
+      nodesDraggable: !0,
+      nodesConnectable: !0,
+      elementsSelectable: !0,
       proOptions: { hideAttribution: !0 },
       fitView: !0,
       snapToGrid: !0,
@@ -1500,8 +1503,8 @@ function Ye({
     v && v !== d && x(v), F(!1);
   };
   $(() => {
-    function v(P) {
-      (P.metaKey || P.ctrlKey) && P.key === "s" && (P.preventDefault(), K());
+    function v(j) {
+      (j.metaKey || j.ctrlKey) && j.key === "s" && (j.preventDefault(), K());
     }
     return document.addEventListener("keydown", v), () => document.removeEventListener("keydown", v);
   }, [K]);
@@ -1510,13 +1513,13 @@ function Ye({
   }, me = async () => {
     const v = await l();
     W(v);
-    const P = Qe(a, c);
-    ie(P), w(!0);
+    const j = Qe(a, c);
+    ie(j), w(!0);
   }, ue = () => {
     const v = k === "yaml" ? z : O;
     navigator.clipboard.writeText(v);
   };
-  return /* @__PURE__ */ m(j, { children: [
+  return /* @__PURE__ */ m(P, { children: [
     /* @__PURE__ */ m("div", { className: "h-14 bg-white dark:bg-zinc-800 border-b border-gray-200 dark:border-zinc-700 flex items-center justify-between px-4", children: [
       /* @__PURE__ */ m("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ e(
@@ -1645,7 +1648,7 @@ function Ye({
             onClick: ce,
             disabled: a.length === 0 || n.status === "running",
             className: "px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-md hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
-            children: n.status === "running" ? /* @__PURE__ */ m(j, { children: [
+            children: n.status === "running" ? /* @__PURE__ */ m(P, { children: [
               /* @__PURE__ */ m("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", fill: "none", children: [
                 /* @__PURE__ */ e(
                   "circle",
@@ -1668,7 +1671,7 @@ function Ye({
                 )
               ] }),
               "Running..."
-            ] }) : /* @__PURE__ */ m(j, { children: [
+            ] }) : /* @__PURE__ */ m(P, { children: [
               /* @__PURE__ */ m("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
                 /* @__PURE__ */ e(
                   "path",
@@ -2555,7 +2558,7 @@ function ut({
                 children: /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e("path", { d: "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" }) })
               }
             ),
-            d && /* @__PURE__ */ m(j, { children: [
+            d && /* @__PURE__ */ m(P, { children: [
               /* @__PURE__ */ e("div", { className: "fixed inset-0 z-10", onClick: () => p(!1) }),
               /* @__PURE__ */ m("div", { className: "absolute right-0 top-full mt-1 w-36 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 py-1 z-20", children: [
                 /* @__PURE__ */ e(
@@ -2601,7 +2604,7 @@ function gt() {
   const r = f((d) => d.showLibrary), s = f((d) => d.toggleLibrary), t = f((d) => d.savedWorkflows), o = f((d) => d.activeWorkflowId), n = f((d) => d.loadWorkflow), i = f((d) => d.deleteWorkflow), l = f((d) => d.renameWorkflow), a = f((d) => d.duplicateWorkflow), c = f((d) => d.newWorkflow);
   if (!r) return null;
   const u = [...t].sort((d, p) => p.updatedAt - d.updatedAt);
-  return /* @__PURE__ */ m(j, { children: [
+  return /* @__PURE__ */ m(P, { children: [
     /* @__PURE__ */ e("div", { className: "fixed inset-0 bg-black/20 dark:bg-black/40 z-40", onClick: s }),
     /* @__PURE__ */ m("div", { className: "fixed left-0 top-0 bottom-0 w-80 bg-zinc-50 dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-700 z-50 flex flex-col shadow-xl", children: [
       /* @__PURE__ */ m("div", { className: "flex items-center justify-between px-4 py-3 border-b border-zinc-200 dark:border-zinc-700", children: [
@@ -3014,7 +3017,7 @@ function St() {
         )
       ] }) }),
       /* @__PURE__ */ m("div", { className: "flex-1 flex overflow-hidden", children: [
-        r === "editor" && /* @__PURE__ */ m(j, { children: [
+        r === "editor" && /* @__PURE__ */ m(P, { children: [
           /* @__PURE__ */ e(Ve, {}),
           /* @__PURE__ */ e("div", { className: "flex-1", onDrop: i, onDragOver: l, children: /* @__PURE__ */ e(Ge, {}) }),
           /* @__PURE__ */ e(Ke, {})