@mesantosrai/pipeline-canvas 1.0.0

package/dist/components/PipelineCanvas.mjs

@@ -0,0 +1,1016 @@
+import { jsxs as o, jsx as t, Fragment as F } from "react/jsx-runtime";
+import h, { useMemo as oe, useCallback as v, useRef as Ae, useState as Re, useEffect as Pe } from "react";
+import De, { MarkerType as tt, useNodesState as st, useEdgesState as nt, addEdge as Ie, Background as Le, BackgroundVariant as Oe, Controls as $e, MiniMap as rt, Position as S } from "reactflow";
+/* empty css                                        */
+import { usePipelineStore as ot } from "../store/pipelineStore.mjs";
+import { usePipelineContext as lt } from "../context/PipelineContext.mjs";
+import { PipelineNodeConfig as it } from "./PipelineNodeConfig.mjs";
+import { PipelineNodePalette as at } from "./PipelineNodePalette.mjs";
+import { SavedPipelinesList as ct } from "./SavedPipelinesList.mjs";
+import { SavePipelineDialog as dt } from "./SavePipelineDialog.mjs";
+import { ExecutionLogsPanel as ut } from "./ExecutionLogsPanel.mjs";
+import { CustomHandle as E } from "./CustomHandle.mjs";
+import { NodeContextMenu as gt } from "./NodeContextMenu.mjs";
+import { Loader2 as O, CheckCircle2 as f, Plus as ht, XCircle as $, Square as mt, Play as pt, Save as ft, Trash2 as xt, Sparkles as Ue, Globe as bt, AlertCircle as Z, MessageSquare as wt, Atom as Nt, Dna as vt, FileInput as yt } from "lucide-react";
+const z = (e, n, d) => {
+  if (d)
+    return "border-green-500 shadow-[0_0_10px_rgba(34,197,94,0.3)]";
+  switch (e) {
+    case "running":
+      return "border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.5)] animate-pulse-glow";
+    case "success":
+    case "completed":
+      return "border-green-500 shadow-[0_0_10px_rgba(34,197,94,0.3)]";
+    case "error":
+      return "border-red-500 shadow-[0_0_10px_rgba(239,68,68,0.3)]";
+    case "pending":
+      return n ? "border-gray-300 opacity-60" : "border-gray-300";
+    default:
+      return "border-gray-300";
+  }
+}, H = ({ label: e, nodeId: n, onUpdate: d }) => {
+  const [c, m] = Re(!1), [p, u] = Re(e), b = Ae(null);
+  Pe(() => {
+    c && b.current && (b.current.focus(), b.current.select());
+  }, [c]), Pe(() => {
+    u(e);
+  }, [e]);
+  const y = () => {
+    m(!0);
+  }, j = () => {
+    p.trim() !== e && d(n, p.trim() || e), m(!1);
+  }, A = (C) => {
+    C.key === "Enter" ? (C.preventDefault(), j()) : C.key === "Escape" && (u(e), m(!1));
+  };
+  return c ? /* @__PURE__ */ t(
+    "input",
+    {
+      ref: b,
+      type: "text",
+      value: p,
+      onChange: (C) => u(C.target.value),
+      onBlur: j,
+      onKeyDown: A,
+      className: "w-full text-center text-xs font-medium text-white bg-gray-700/80 border border-gray-500 rounded px-2 py-1 outline-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+      onClick: (C) => C.stopPropagation(),
+      onDoubleClick: (C) => C.stopPropagation()
+    }
+  ) : /* @__PURE__ */ t(
+    "div",
+    {
+      onDoubleClick: y,
+      className: "text-center text-xs font-medium text-gray-200 cursor-text hover:text-white transition-colors px-1 py-0.5 rounded hover:bg-gray-800/50",
+      title: "Double-click to edit",
+      children: e || "Unnamed"
+    }
+  );
+}, Ct = ({ data: e }) => {
+  var b;
+  const n = e.status, d = e.isExecuting, c = Ae(0), m = n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0;
+  h.useEffect(() => {
+    e.id && (n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && console.log("[InputNode] Status check:", {
+      nodeId: e.id,
+      status: n,
+      hasResultMetadata: !!(e.result_metadata && Object.keys(e.result_metadata).length > 0),
+      isCompleted: m,
+      resultMetadataKeys: e.result_metadata ? Object.keys(e.result_metadata) : []
+    });
+  }, [e.id, n, e.result_metadata, m]);
+  const p = () => {
+    if (m)
+      return /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" });
+    switch (n) {
+      case "running":
+        return /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ t(O, { className: "w-4 h-4 animate-spin text-blue-500" }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-blue-400/30 rounded-full animate-ping" })
+        ] });
+      case "error":
+        return /* @__PURE__ */ t($, { className: "w-4 h-4 text-red-500" });
+      default:
+        return e.result_metadata && Object.keys(e.result_metadata).length > 0 ? /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" }) : null;
+    }
+  }, u = (y) => {
+    const j = Date.now(), A = j - c.current;
+    c.current = j, A > 300 && y.stopPropagation();
+  };
+  return /* @__PURE__ */ o("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `
+          px-4 py-3 bg-white border-2 rounded-xl min-w-[220px] relative transition-all duration-300
+          ${z(n, d, !!(e.result_metadata && Object.keys(e.result_metadata).length > 0))}
+        `,
+        onClick: u,
+        onDoubleClick: () => {
+        },
+        children: [
+          /* @__PURE__ */ t(E, { type: "source", position: S.Right }),
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${n === "running" ? "bg-blue-100" : m ? "bg-green-100" : n === "error" ? "bg-red-100" : "bg-blue-100"}`, children: /* @__PURE__ */ t(yt, { className: `w-4 h-4 ${n === "running" ? "text-blue-600" : m ? "text-green-600" : n === "error" ? "text-red-600" : "text-blue-600"}` }) }),
+              /* @__PURE__ */ t("span", { className: "font-semibold text-sm text-gray-900", children: "Input" })
+            ] }),
+            p()
+          ] }),
+          /* @__PURE__ */ t("div", { className: "text-xs text-gray-500 pl-10", children: ((b = e.config) == null ? void 0 : b.filename) || "No file selected" }),
+          (n === "success" || n === "completed" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && /* @__PURE__ */ t("div", { className: "absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shadow-lg z-10", children: /* @__PURE__ */ t(f, { className: "w-3 h-3 text-white" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-1 w-full", onClick: (y) => y.stopPropagation(), children: /* @__PURE__ */ t(
+      H,
+      {
+        label: e.label || "Input",
+        nodeId: e.id,
+        onUpdate: e.onUpdateLabel || (() => {
+        })
+      }
+    ) })
+  ] });
+}, kt = ({ data: e }) => {
+  var p;
+  const n = e.status, d = e.isExecuting, c = n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0, m = () => {
+    if (c)
+      return /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" });
+    switch (n) {
+      case "running":
+        return /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ t(O, { className: "w-4 h-4 animate-spin text-blue-500" }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-blue-400/30 rounded-full animate-ping" })
+        ] });
+      case "error":
+        return /* @__PURE__ */ t($, { className: "w-4 h-4 text-red-500" });
+      default:
+        return e.result_metadata && Object.keys(e.result_metadata).length > 0 ? /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" }) : null;
+    }
+  };
+  return /* @__PURE__ */ o("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `
+          px-4 py-3 bg-white border-2 rounded-xl min-w-[220px] relative transition-all duration-300
+          ${z(n, d, !!(e.result_metadata && Object.keys(e.result_metadata).length > 0))}
+        `,
+        onClick: (u) => u.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(E, { type: "target", position: S.Left }),
+          /* @__PURE__ */ t(E, { type: "source", position: S.Right }),
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${n === "running" ? "bg-blue-100" : c ? "bg-green-100" : n === "error" ? "bg-red-100" : "bg-purple-100"}`, children: /* @__PURE__ */ t(Ue, { className: `w-4 h-4 ${n === "running" ? "text-blue-600" : c ? "text-green-600" : n === "error" ? "text-red-600" : "text-purple-600"}` }) }),
+              /* @__PURE__ */ t("span", { className: "font-semibold text-sm text-gray-900", children: "RFdiffusion" })
+            ] }),
+            m()
+          ] }),
+          /* @__PURE__ */ o("div", { className: "text-xs text-gray-500 space-y-1 pl-10", children: [
+            /* @__PURE__ */ o("div", { children: [
+              "Contigs: ",
+              ((p = e.config) == null ? void 0 : p.contigs) || "N/A"
+            ] }),
+            e.error && /* @__PURE__ */ o("div", { className: "text-red-600 flex items-center gap-1", children: [
+              /* @__PURE__ */ t(Z, { className: "w-3 h-3" }),
+              e.error
+            ] })
+          ] }),
+          (n === "success" || n === "completed" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && /* @__PURE__ */ t("div", { className: "absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shadow-lg z-10", children: /* @__PURE__ */ t(f, { className: "w-3 h-3 text-white" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-1 w-full", onClick: (u) => u.stopPropagation(), children: /* @__PURE__ */ t(
+      H,
+      {
+        label: e.label || "RFdiffusion",
+        nodeId: e.id,
+        onUpdate: e.onUpdateLabel || (() => {
+        })
+      }
+    ) })
+  ] });
+}, _t = ({ data: e }) => {
+  var p;
+  const n = e.status, d = e.isExecuting, c = n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0, m = () => {
+    if (c)
+      return /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" });
+    switch (n) {
+      case "running":
+        return /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ t(O, { className: "w-4 h-4 animate-spin text-blue-500" }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-blue-400/30 rounded-full animate-ping" })
+        ] });
+      case "error":
+        return /* @__PURE__ */ t($, { className: "w-4 h-4 text-red-500" });
+      default:
+        return e.result_metadata && Object.keys(e.result_metadata).length > 0 ? /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" }) : null;
+    }
+  };
+  return /* @__PURE__ */ o("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `
+          px-4 py-3 bg-white border-2 rounded-xl min-w-[220px] relative transition-all duration-300
+          ${z(n, d, !!(e.result_metadata && Object.keys(e.result_metadata).length > 0))}
+        `,
+        onClick: (u) => u.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(E, { type: "target", position: S.Left }),
+          /* @__PURE__ */ t(E, { type: "source", position: S.Right }),
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${n === "running" ? "bg-blue-100" : c ? "bg-green-100" : n === "error" ? "bg-red-100" : "bg-green-100"}`, children: /* @__PURE__ */ t(vt, { className: `w-4 h-4 ${n === "running" ? "text-blue-600" : c ? "text-green-600" : n === "error" ? "text-red-600" : "text-green-600"}` }) }),
+              /* @__PURE__ */ t("span", { className: "font-semibold text-sm text-gray-900", children: "ProteinMPNN" })
+            ] }),
+            m()
+          ] }),
+          /* @__PURE__ */ o("div", { className: "text-xs text-gray-500 space-y-1 pl-10", children: [
+            /* @__PURE__ */ o("div", { children: [
+              "Sequences: ",
+              ((p = e.config) == null ? void 0 : p.num_sequences) || "N/A"
+            ] }),
+            e.error && /* @__PURE__ */ o("div", { className: "text-red-600 flex items-center gap-1", children: [
+              /* @__PURE__ */ t(Z, { className: "w-3 h-3" }),
+              e.error
+            ] })
+          ] }),
+          (n === "success" || n === "completed" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && /* @__PURE__ */ t("div", { className: "absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shadow-lg z-10", children: /* @__PURE__ */ t(f, { className: "w-3 h-3 text-white" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-1 w-full", onClick: (u) => u.stopPropagation(), children: /* @__PURE__ */ t(
+      H,
+      {
+        label: e.label || "ProteinMPNN",
+        nodeId: e.id,
+        onUpdate: e.onUpdateLabel || (() => {
+        })
+      }
+    ) })
+  ] });
+}, Mt = ({ data: e }) => {
+  var p;
+  const n = e.status, d = e.isExecuting, c = n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0, m = () => {
+    if (c)
+      return /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" });
+    switch (n) {
+      case "running":
+        return /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ t(O, { className: "w-4 h-4 animate-spin text-blue-500" }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-blue-400/30 rounded-full animate-ping" })
+        ] });
+      case "error":
+        return /* @__PURE__ */ t($, { className: "w-4 h-4 text-red-500" });
+      default:
+        return e.result_metadata && Object.keys(e.result_metadata).length > 0 ? /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" }) : null;
+    }
+  };
+  return /* @__PURE__ */ o("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `
+          px-4 py-3 bg-white border-2 rounded-xl min-w-[220px] relative transition-all duration-300
+          ${z(n, d, !!(e.result_metadata && Object.keys(e.result_metadata).length > 0))}
+        `,
+        onClick: (u) => u.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(E, { type: "target", position: S.Left }),
+          /* @__PURE__ */ t(E, { type: "source", position: S.Right }),
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${n === "running" ? "bg-blue-100" : c ? "bg-green-100" : n === "error" ? "bg-red-100" : "bg-orange-100"}`, children: /* @__PURE__ */ t(Nt, { className: `w-4 h-4 ${n === "running" ? "text-blue-600" : c ? "text-green-600" : n === "error" ? "text-red-600" : "text-orange-600"}` }) }),
+              /* @__PURE__ */ t("span", { className: "font-semibold text-sm text-gray-900", children: "AlphaFold" })
+            ] }),
+            m()
+          ] }),
+          /* @__PURE__ */ o("div", { className: "text-xs text-gray-500 space-y-1 pl-10", children: [
+            /* @__PURE__ */ o("div", { children: [
+              "Recycles: ",
+              ((p = e.config) == null ? void 0 : p.recycle_count) || "N/A"
+            ] }),
+            e.error && /* @__PURE__ */ o("div", { className: "text-red-600 flex items-center gap-1", children: [
+              /* @__PURE__ */ t(Z, { className: "w-3 h-3" }),
+              e.error
+            ] })
+          ] }),
+          (n === "success" || n === "completed" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && /* @__PURE__ */ t("div", { className: "absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shadow-lg z-10", children: /* @__PURE__ */ t(f, { className: "w-3 h-3 text-white" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-1 w-full", onClick: (u) => u.stopPropagation(), children: /* @__PURE__ */ t(
+      H,
+      {
+        label: e.label || "AlphaFold",
+        nodeId: e.id,
+        onUpdate: e.onUpdateLabel || (() => {
+        })
+      }
+    ) })
+  ] });
+}, St = ({ data: e }) => {
+  var u;
+  const n = e.status, d = e.isExecuting, c = n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0, m = () => {
+    if (c)
+      return /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" });
+    switch (n) {
+      case "running":
+        return /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ t(O, { className: "w-4 h-4 animate-spin text-blue-500" }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-blue-400/30 rounded-full animate-ping" })
+        ] });
+      case "error":
+        return /* @__PURE__ */ t($, { className: "w-4 h-4 text-red-500" });
+      default:
+        return e.result_metadata && Object.keys(e.result_metadata).length > 0 ? /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" }) : null;
+    }
+  }, p = (u = e.config) != null && u.code ? e.config.code.length > 40 ? e.config.code.substring(0, 40).replace(/\n/g, " ") + "..." : e.config.code.replace(/\n/g, " ") : "No code";
+  return /* @__PURE__ */ o("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `
+          px-4 py-3 bg-white border-2 rounded-xl min-w-[220px] relative transition-all duration-300
+          ${z(n, d, !!(e.result_metadata && Object.keys(e.result_metadata).length > 0))}
+        `,
+        onClick: (b) => b.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(E, { type: "source", position: S.Right }),
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${n === "running" ? "bg-blue-100" : c ? "bg-green-100" : n === "error" ? "bg-red-100" : "bg-green-100"}`, children: /* @__PURE__ */ t(wt, { className: `w-4 h-4 ${n === "running" ? "text-blue-600" : c ? "text-green-600" : n === "error" ? "text-red-600" : "text-green-600"}` }) }),
+              /* @__PURE__ */ t("span", { className: "font-semibold text-sm text-gray-900", children: "Code Execution" })
+            ] }),
+            m()
+          ] }),
+          /* @__PURE__ */ t("div", { className: "text-xs text-gray-500 pl-10 font-mono", children: p }),
+          (n === "success" || n === "completed" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && /* @__PURE__ */ t("div", { className: "absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shadow-lg z-10", children: /* @__PURE__ */ t(f, { className: "w-3 h-3 text-white" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-1 w-full", onClick: (b) => b.stopPropagation(), children: /* @__PURE__ */ t(
+      H,
+      {
+        label: e.label || "Code Execution",
+        nodeId: e.id,
+        onUpdate: e.onUpdateLabel || (() => {
+        })
+      }
+    ) })
+  ] });
+}, Et = ({ data: e }) => {
+  var u, b;
+  const n = e.status, d = e.isExecuting, c = n === "completed" || n === "success" || e.result_metadata && Object.keys(e.result_metadata).length > 0, m = () => {
+    if (c)
+      return /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" });
+    switch (n) {
+      case "running":
+        return /* @__PURE__ */ o("div", { className: "relative", children: [
+          /* @__PURE__ */ t(O, { className: "w-4 h-4 animate-spin text-blue-500" }),
+          /* @__PURE__ */ t("div", { className: "absolute inset-0 bg-blue-400/30 rounded-full animate-ping" })
+        ] });
+      case "error":
+        return /* @__PURE__ */ t($, { className: "w-4 h-4 text-red-500" });
+      default:
+        return e.result_metadata && Object.keys(e.result_metadata).length > 0 ? /* @__PURE__ */ t(f, { className: "w-4 h-4 text-green-500" }) : null;
+    }
+  }, p = (u = e.config) != null && u.url ? e.config.url.length > 30 ? e.config.url.substring(0, 30) + "..." : e.config.url : "No URL";
+  return /* @__PURE__ */ o("div", { className: "flex flex-col items-center", children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: `
+          px-4 py-3 bg-white border-2 rounded-xl min-w-[220px] relative transition-all duration-300
+          ${z(n, d, !!(e.result_metadata && Object.keys(e.result_metadata).length > 0))}
+        `,
+        onClick: (y) => y.stopPropagation(),
+        children: [
+          /* @__PURE__ */ t(E, { type: "target", position: S.Left }),
+          /* @__PURE__ */ t(E, { type: "source", position: S.Right }),
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-2", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center ${n === "running" ? "bg-blue-100" : c ? "bg-green-100" : n === "error" ? "bg-red-100" : "bg-blue-100"}`, children: /* @__PURE__ */ t(bt, { className: `w-4 h-4 ${n === "running" ? "text-blue-600" : c ? "text-green-600" : n === "error" ? "text-red-600" : "text-blue-600"}` }) }),
+              /* @__PURE__ */ t("span", { className: "font-semibold text-sm text-gray-900", children: "HTTP Request" })
+            ] }),
+            m()
+          ] }),
+          /* @__PURE__ */ o("div", { className: "text-xs text-gray-500 space-y-1 pl-10", children: [
+            /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ t("span", { className: "font-medium", children: ((b = e.config) == null ? void 0 : b.method) || "GET" }),
+              /* @__PURE__ */ t("span", { className: "text-gray-400", children: "•" }),
+              /* @__PURE__ */ t("span", { className: "truncate", children: p })
+            ] }),
+            e.error && /* @__PURE__ */ o("div", { className: "text-red-600 flex items-center gap-1", children: [
+              /* @__PURE__ */ t(Z, { className: "w-3 h-3" }),
+              e.error
+            ] })
+          ] }),
+          (n === "success" || n === "completed" || e.result_metadata && Object.keys(e.result_metadata).length > 0) && /* @__PURE__ */ t("div", { className: "absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center shadow-lg z-10", children: /* @__PURE__ */ t(f, { className: "w-3 h-3 text-white" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "mt-1 w-full", onClick: (y) => y.stopPropagation(), children: /* @__PURE__ */ t(
+      H,
+      {
+        label: e.label || "HTTP Request",
+        nodeId: e.id,
+        onUpdate: e.onUpdateLabel || (() => {
+        })
+      }
+    ) })
+  ] });
+}, jt = Object.freeze({
+  input_node: Ct,
+  rfdiffusion_node: kt,
+  proteinmpnn_node: _t,
+  alphafold_node: Mt,
+  message_input_node: St,
+  http_request_node: Et
+}), Vt = () => {
+  const {
+    currentPipeline: e,
+    ghostBlueprint: n,
+    isExecuting: d,
+    viewMode: c,
+    setViewMode: m,
+    approveBlueprint: p,
+    rejectBlueprint: u,
+    updateNode: b,
+    deleteNode: y,
+    addNode: j,
+    addEdge: A,
+    startExecution: C,
+    stopExecution: Be,
+    clearPipeline: Fe,
+    lastSavedAt: le,
+    isSaving: ze,
+    setCurrentPipeline: ie,
+    syncPipelines: ae
+  } = ot(), { authState: X, apiClient: ee } = lt(), ce = X == null ? void 0 : X.user;
+  h.useEffect(() => {
+    ce && ee && (console.log("[PipelineCanvas] Syncing pipelines from backend..."), ae({ apiClient: ee, authState: X }).catch((s) => {
+      console.error("[PipelineCanvas] Failed to sync pipelines:", s);
+    }));
+  }, [ce, ee, X, ae]);
+  const de = oe(() => jt, []), [L, R] = h.useState(null), [ue, He] = h.useState(!1), [Xe, ge] = h.useState(!1), he = h.useRef(null), J = h.useRef(!1);
+  h.useEffect(() => {
+    const s = (e == null ? void 0 : e.id) || null, r = s !== he.current;
+    if (e && e.nodes.length > 0 && r && J.current && !L && c === "editor") {
+      const i = e.nodes.find((g) => g.type === "input_node") || e.nodes[0];
+      i && (console.log("[PipelineCanvas] Auto-selecting first node for configuration:", i.id, i.type), setTimeout(() => {
+        R(i.id);
+      }, 100)), J.current = !1;
+    } else r && !J.current && L && R(null);
+    he.current = s;
+  }, [e == null ? void 0 : e.id, e == null ? void 0 : e.nodes.length, L, c]), h.useEffect(() => {
+    const s = () => {
+      console.log("[PipelineCanvas] Blueprint approved, will auto-select first node"), J.current = !0;
+    };
+    return window.addEventListener("blueprint-approved", s), () => {
+      window.removeEventListener("blueprint-approved", s);
+    };
+  }, []);
+  const [x, me] = h.useState(null), [q, pe] = h.useState({ right: 16, top: 80 }), [P, qe] = h.useState({ width: 900, height: 600 }), [V, fe] = h.useState(!1), [W, xe] = h.useState(!1), [l, be] = h.useState(null), [te, Ve] = h.useState({ x: 0, y: 0 }), [w, We] = h.useState({ x: 0, y: 0, width: 0, height: 0, right: 0, top: 0 }), k = h.useRef(null), Ye = v((s) => {
+    const r = s.target;
+    if (!(r.tagName === "BUTTON" || r.tagName === "INPUT" || r.tagName === "SELECT" || r.tagName === "TEXTAREA" || r.closest("button") || r.closest("input") || r.closest("select") || r.closest("textarea") || r.closest('[role="button"]') || r.closest('[class*="cursor-col-resize"]') || r.closest('[class*="cursor-row-resize"]') || r.closest('[class*="cursor-nwse-resize"]') || r.closest('[class*="cursor-nesw-resize"]')) && k.current) {
+      fe(!0);
+      const a = k.current.getBoundingClientRect();
+      Ve({
+        x: s.clientX - a.left,
+        y: s.clientY - a.top
+      }), s.preventDefault();
+    }
+  }, []), se = v((s) => {
+    var r, a;
+    if (W && k.current) {
+      const i = (r = k.current.parentElement) == null ? void 0 : r.getBoundingClientRect();
+      if (i) {
+        const g = s.clientX - w.x, N = s.clientY - w.y;
+        let _ = w.width, M = w.height, I = w.right, B = w.top;
+        l != null && l.includes("width-right") || l != null && l.includes("both-bottom-right") || l != null && l.includes("both-top-right") ? _ = Math.max(400, Math.min(1200, w.width + g)) : (l != null && l.includes("width-left") || l != null && l.includes("both-bottom-left") || l != null && l.includes("both-top-left")) && (_ = Math.max(400, Math.min(1200, w.width - g)), I = w.right + (w.width - _), I = Math.max(0, Math.min(i.width - _, I))), l != null && l.includes("height-bottom") || l != null && l.includes("both-bottom-right") || l != null && l.includes("both-bottom-left") ? M = Math.max(300, Math.min(i.height - w.top, w.height + N)) : (l != null && l.includes("height-top") || l != null && l.includes("both-top-right") || l != null && l.includes("both-top-left")) && (M = Math.max(300, Math.min(i.height - w.top, w.height - N)), B = w.top + (w.height - M), B = Math.max(0, Math.min(i.height - M, B))), qe({ width: _, height: M }), pe({ right: I, top: B });
+      }
+    } else if (V && k.current) {
+      const i = (a = k.current.parentElement) == null ? void 0 : a.getBoundingClientRect();
+      if (i) {
+        const g = s.clientX - i.left - te.x, N = s.clientY - i.top - te.y, _ = i.width - g - P.width, M = 0, I = i.width - P.width, B = 0, et = i.height - 100;
+        pe({
+          right: Math.max(M, Math.min(_, I)),
+          top: Math.max(B, Math.min(N, et))
+        });
+      }
+    }
+  }, [V, W, te, w, l, P.width]), ne = v(() => {
+    fe(!1), xe(!1), be(null);
+  }, []), D = v((s, r) => {
+    var a;
+    if (s.preventDefault(), s.stopPropagation(), k.current) {
+      xe(!0), be(r);
+      const i = k.current.getBoundingClientRect();
+      if ((a = k.current.parentElement) == null ? void 0 : a.getBoundingClientRect()) {
+        let N = s.clientX;
+        r.includes("width-left") || r.includes("both-bottom-left") || r.includes("both-top-left") ? N = i.left : (r.includes("width-right") || r.includes("both-bottom-right") || r.includes("both-top-right")) && (N = i.right), We({
+          x: N,
+          y: s.clientY,
+          width: P.width,
+          height: P.height,
+          right: q.right,
+          top: q.top
+        });
+      }
+    }
+  }, [P, q]);
+  h.useEffect(() => {
+    if (V || W)
+      return document.addEventListener("mousemove", se), document.addEventListener("mouseup", ne), () => {
+        document.removeEventListener("mousemove", se), document.removeEventListener("mouseup", ne);
+      };
+  }, [V, W, se, ne]);
+  const U = oe(() => {
+    const s = [];
+    return n && n.nodes.forEach((r, a) => {
+      s.push({
+        ...r,
+        status: "idle",
+        position: { x: 100 + a % 3 * 300, y: 100 + Math.floor(a / 3) * 200 }
+      });
+    }), e && e.nodes.forEach((r) => {
+      s.push(r);
+    }), s.map((r, a) => ({
+      id: r.id,
+      type: r.type,
+      position: r.position || { x: 100 + a % 3 * 300, y: 100 + Math.floor(a / 3) * 200 },
+      data: {
+        ...r,
+        label: r.label,
+        config: r.config,
+        status: r.status,
+        error: r.error,
+        result_metadata: r.result_metadata,
+        isExecuting: d,
+        onUpdateLabel: (i, g) => {
+          b(i, { label: g });
+        }
+      },
+      style: {
+        opacity: n && !e ? 0.5 : 1,
+        borderStyle: n && !e ? "dashed" : "solid"
+      }
+    }));
+  }, [e, n, d]), T = oe(() => {
+    const s = [];
+    return n && s.push(...n.edges), e && s.push(...e.edges), s.map((r) => {
+      const a = e == null ? void 0 : e.nodes.find((N) => N.id === r.source), i = (a == null ? void 0 : a.status) === "running", g = (a == null ? void 0 : a.status) === "success" || (a == null ? void 0 : a.status) === "completed";
+      return {
+        id: `e${r.source}-${r.target}`,
+        source: r.source,
+        target: r.target,
+        type: "smoothstep",
+        animated: d && (i || g),
+        style: {
+          stroke: g ? "#22c55e" : i ? "#3b82f6" : "#9ca3af",
+          strokeWidth: i ? 3 : 2
+        },
+        markerEnd: {
+          type: tt.ArrowClosed,
+          color: g ? "#22c55e" : i ? "#3b82f6" : "#9ca3af"
+        }
+      };
+    });
+  }, [e, n, d]), [Y, we, Ne] = st(U), [ve, K, ye] = nt(T), Ce = h.useRef(""), ke = h.useRef("");
+  h.useEffect(() => {
+    const s = JSON.stringify(U.map((r) => ({ id: r.id, data: r.data, position: r.position })));
+    s !== Ce.current && (Ce.current = s, we(U));
+  }, [U, we]), h.useEffect(() => {
+    const s = JSON.stringify(T.map((r) => ({ id: r.id, source: r.source, target: r.target })));
+    s !== ke.current && (ke.current = s, K(T));
+  }, [T, K]);
+  const G = h.useRef(null);
+  h.useEffect(() => (Y.length > 0 && e && (G.current && clearTimeout(G.current), G.current = setTimeout(() => {
+    const s = e.nodes.map((a) => {
+      const i = Y.find((g) => g.id === a.id);
+      return i && i.position ? {
+        ...a,
+        position: i.position
+      } : a;
+    });
+    s.some((a) => {
+      var g, N, _, M;
+      const i = e.nodes.find((I) => I.id === a.id);
+      return i && (((g = i.position) == null ? void 0 : g.x) !== ((N = a.position) == null ? void 0 : N.x) || ((_ = i.position) == null ? void 0 : _.y) !== ((M = a.position) == null ? void 0 : M.y));
+    }) && ie({
+      ...e,
+      nodes: s,
+      updatedAt: /* @__PURE__ */ new Date()
+    });
+  }, 500)), () => {
+    G.current && clearTimeout(G.current);
+  }), [Y, e, ie]);
+  const _e = v(
+    (s) => {
+      if (!s || !s.source || !s.target) {
+        console.warn("[PipelineCanvas] Invalid connection params:", s);
+        return;
+      }
+      try {
+        A(s.source, s.target), K((r) => Ie(s, r)), K((r) => Ie(s, r));
+      } catch (r) {
+        console.error("[PipelineCanvas] Error adding edge:", r);
+      }
+    },
+    [A, K]
+  ), Me = v((s, r) => {
+    R(r.id);
+  }, []), Se = v((s, r) => {
+    R(r.id);
+  }, []), Ee = v((s, r) => {
+    s.preventDefault(), s.stopPropagation(), me({
+      nodeId: r.id,
+      x: s.clientX,
+      y: s.clientY
+    });
+  }, []), re = v(
+    (s) => {
+      y(s), R(null);
+    },
+    [y]
+  ), Ke = v(() => {
+    if (!x) return;
+    (e == null ? void 0 : e.nodes.find((r) => r.id === x.nodeId)) && R(x.nodeId);
+  }, [x, e]), Ge = v(() => {
+    x && confirm("Are you sure you want to delete this node?") && re(x.nodeId);
+  }, [x, re]), Je = v(() => {
+    x && R(x.nodeId);
+  }, [x]), Te = v(() => {
+    var a, i;
+    if (!x || !e) return;
+    const s = e.nodes.find((g) => g.id === x.nodeId);
+    if (!s) return;
+    const r = {
+      ...s,
+      id: `node_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      label: `${s.label} (Copy)`,
+      position: {
+        x: (((a = s.position) == null ? void 0 : a.x) || 0) + 50,
+        y: (((i = s.position) == null ? void 0 : i.y) || 0) + 50
+      },
+      status: "idle",
+      error: void 0,
+      result_metadata: void 0
+    };
+    j(r);
+  }, [x, e, j]), Qe = v(() => {
+    me(null);
+  }, []), Ze = () => {
+    ge(!0);
+  }, Q = !!n && !e, je = ((e == null ? void 0 : e.nodes.length) || 0) > 0;
+  return /* @__PURE__ */ o("div", { className: "h-full flex flex-col bg-[#1a1a2e]", children: [
+    /* @__PURE__ */ o("div", { className: "h-14 flex items-center justify-between px-4 border-b border-gray-700/50 bg-[#1e1e32]", children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-4", children: [
+        e && /* @__PURE__ */ t("div", { className: "flex items-center gap-2 text-xs text-gray-400", children: ze ? /* @__PURE__ */ o(F, { children: [
+          /* @__PURE__ */ t(O, { className: "w-3 h-3 animate-spin" }),
+          /* @__PURE__ */ t("span", { children: "Saving..." })
+        ] }) : le ? /* @__PURE__ */ o(F, { children: [
+          /* @__PURE__ */ t(f, { className: "w-3 h-3 text-green-500" }),
+          /* @__PURE__ */ t("span", { className: "text-gray-300", children: "Saved" }),
+          /* @__PURE__ */ t("span", { className: "text-gray-500", children: "•" }),
+          /* @__PURE__ */ t("span", { children: ((s) => {
+            if (!s) return "";
+            const r = s instanceof Date ? s : new Date(s);
+            if (isNaN(r.getTime())) return "";
+            const i = (/* @__PURE__ */ new Date()).getTime() - r.getTime(), g = Math.floor(i / 1e3), N = Math.floor(g / 60);
+            return g < 10 ? "Just now" : g < 60 ? `${g}s ago` : N < 60 ? `${N}m ago` : r.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+          })(le) })
+        ] }) : null }),
+        /* @__PURE__ */ o("div", { className: "flex bg-gray-800/50 rounded-lg p-0.5", children: [
+          /* @__PURE__ */ t(
+            "button",
+            {
+              onClick: () => m("editor"),
+              className: `px-4 py-1.5 text-xs font-medium rounded-md transition-all ${c === "editor" ? "bg-gray-700 text-white shadow-sm" : "text-gray-400 hover:text-gray-200"}`,
+              children: "Editor"
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              onClick: () => m("executions"),
+              className: `px-4 py-1.5 text-xs font-medium rounded-md transition-all flex items-center gap-1.5 ${c === "executions" ? "bg-gray-700 text-white shadow-sm" : "text-gray-400 hover:text-gray-200"}`,
+              children: [
+                "Executions",
+                d && /* @__PURE__ */ o("span", { className: "relative flex h-2 w-2", children: [
+                  /* @__PURE__ */ t("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" }),
+                  /* @__PURE__ */ t("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-green-500" })
+                ] })
+              ]
+            }
+          )
+        ] }),
+        Q && /* @__PURE__ */ t("span", { className: "px-2 py-1 text-xs bg-yellow-500/20 text-yellow-400 rounded border border-yellow-500/30", children: "Review Blueprint" })
+      ] }),
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+        !Q && c === "editor" && /* @__PURE__ */ o(
+          "button",
+          {
+            onClick: () => He(!ue),
+            className: "px-3 py-1.5 text-xs bg-gray-700 text-gray-200 rounded-lg hover:bg-gray-600 flex items-center gap-1.5 transition-colors",
+            title: "Toggle node palette",
+            children: [
+              /* @__PURE__ */ t(ht, { className: "w-3.5 h-3.5" }),
+              "Add Node"
+            ]
+          }
+        ),
+        Q ? /* @__PURE__ */ o(F, { children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              onClick: p,
+              className: "px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-500 flex items-center gap-1.5 transition-colors",
+              children: [
+                /* @__PURE__ */ t(f, { className: "w-3.5 h-3.5" }),
+                "Approve"
+              ]
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              onClick: u,
+              className: "px-3 py-1.5 text-xs bg-red-600/80 text-white rounded-lg hover:bg-red-500 flex items-center gap-1.5 transition-colors",
+              children: [
+                /* @__PURE__ */ t($, { className: "w-3.5 h-3.5" }),
+                "Reject"
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ o(F, { children: [
+          je && /* @__PURE__ */ o(F, { children: [
+            d ? /* @__PURE__ */ o(
+              "button",
+              {
+                onClick: Be,
+                className: "px-3 py-1.5 text-xs bg-red-600/80 text-white rounded-lg hover:bg-red-500 flex items-center gap-1.5 transition-colors",
+                children: [
+                  /* @__PURE__ */ t(mt, { className: "w-3.5 h-3.5" }),
+                  "Stop"
+                ]
+              }
+            ) : /* @__PURE__ */ o(
+              "button",
+              {
+                onClick: C,
+                className: "px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-500 flex items-center gap-1.5 transition-colors",
+                children: [
+                  /* @__PURE__ */ t(pt, { className: "w-3.5 h-3.5" }),
+                  "Run All"
+                ]
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                onClick: Ze,
+                className: "px-3 py-1.5 text-xs bg-gray-700 text-gray-200 rounded-lg hover:bg-gray-600 flex items-center gap-1.5 transition-colors",
+                children: [
+                  /* @__PURE__ */ t(ft, { className: "w-3.5 h-3.5" }),
+                  "Save"
+                ]
+              }
+            )
+          ] }),
+          je && /* @__PURE__ */ o(
+            "button",
+            {
+              onClick: Fe,
+              className: "px-3 py-1.5 text-xs bg-gray-700 text-red-400 rounded-lg hover:bg-red-600/20 flex items-center gap-1.5 transition-colors",
+              children: [
+                /* @__PURE__ */ t(xt, { className: "w-3.5 h-3.5" }),
+                "Clear"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "flex-1 relative flex min-h-0", children: c === "editor" ? (
+      // Editor View - Canvas with saved pipelines on left and palette on right
+      /* @__PURE__ */ o(F, { children: [
+        /* @__PURE__ */ t(ct, {}),
+        /* @__PURE__ */ t("div", { className: "flex-1 relative", children: U.length === 0 ? /* @__PURE__ */ t("div", { className: "h-full flex flex-col items-center justify-center bg-[#1a1a2e]", children: /* @__PURE__ */ o("div", { className: "text-center", children: [
+          /* @__PURE__ */ t("div", { className: "w-16 h-16 rounded-full bg-gray-800/50 flex items-center justify-center mx-auto mb-4", children: /* @__PURE__ */ t(Ue, { className: "w-8 h-8 text-gray-500" }) }),
+          /* @__PURE__ */ t("p", { className: "text-gray-400 mb-2", children: "No pipeline nodes yet" }),
+          /* @__PURE__ */ t("p", { className: "text-sm text-gray-500", children: 'Ask the agent to create a pipeline, or click "Add Node" to build one manually' })
+        ] }) }) : /* @__PURE__ */ o(
+          De,
+          {
+            nodes: Y,
+            edges: ve,
+            onNodesChange: Ne,
+            onEdgesChange: ye,
+            onConnect: _e,
+            onNodeClick: Me,
+            onNodeDoubleClick: Se,
+            onNodeContextMenu: Ee,
+            nodeTypes: de,
+            fitView: !0,
+            className: "bg-[#1a1a2e]",
+            children: [
+              /* @__PURE__ */ t(
+                Le,
+                {
+                  variant: Oe.Dots,
+                  gap: 20,
+                  size: 1,
+                  color: "#374151"
+                }
+              ),
+              /* @__PURE__ */ t($e, { className: "bg-gray-800 border-gray-700 rounded-lg" }),
+              /* @__PURE__ */ t(
+                rt,
+                {
+                  className: "bg-gray-800/50 rounded-lg",
+                  nodeColor: (s) => {
+                    var r;
+                    switch ((r = s.data) == null ? void 0 : r.status) {
+                      case "running":
+                        return "#3b82f6";
+                      case "success":
+                        return "#22c55e";
+                      case "error":
+                        return "#ef4444";
+                      default:
+                        return "#6b7280";
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ) }),
+        ue && !Q && /* @__PURE__ */ t(at, {})
+      ] })
+    ) : (
+      // Executions View - Split canvas and logs
+      /* @__PURE__ */ o("div", { className: "flex-1 flex min-h-0", children: [
+        /* @__PURE__ */ o("div", { className: "w-1/2 border-r border-gray-700/50 relative", children: [
+          U.length === 0 ? /* @__PURE__ */ t("div", { className: "h-full flex items-center justify-center bg-[#1a1a2e]", children: /* @__PURE__ */ t("p", { className: "text-gray-500", children: "No nodes to display" }) }) : /* @__PURE__ */ o(
+            De,
+            {
+              nodes: Y,
+              edges: ve,
+              onNodesChange: Ne,
+              onEdgesChange: ye,
+              onConnect: _e,
+              onNodeClick: Me,
+              onNodeDoubleClick: Se,
+              onNodeContextMenu: Ee,
+              nodeTypes: de,
+              fitView: !0,
+              className: "bg-[#1a1a2e]",
+              nodesDraggable: !d,
+              nodesConnectable: !d,
+              elementsSelectable: !d,
+              children: [
+                /* @__PURE__ */ t(
+                  Le,
+                  {
+                    variant: Oe.Dots,
+                    gap: 20,
+                    size: 1,
+                    color: "#374151"
+                  }
+                ),
+                /* @__PURE__ */ t($e, { className: "bg-gray-800 border-gray-700 rounded-lg" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "absolute bottom-4 left-4 flex items-center gap-2", children: [
+            /* @__PURE__ */ t("button", { className: "p-2 bg-gray-800/80 rounded-lg text-gray-400 hover:text-white transition-colors", children: /* @__PURE__ */ t("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) }),
+            /* @__PURE__ */ t("button", { className: "p-2 bg-gray-800/80 rounded-lg text-gray-400 hover:text-white transition-colors", children: /* @__PURE__ */ t("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) }),
+            /* @__PURE__ */ t("button", { className: "p-2 bg-gray-800/80 rounded-lg text-gray-400 hover:text-white transition-colors", children: /* @__PURE__ */ t("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" }) }) }),
+            /* @__PURE__ */ t("button", { className: "p-2 bg-gray-800/80 rounded-lg text-gray-400 hover:text-white transition-colors", children: /* @__PURE__ */ t("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "w-1/2 bg-[#1e1e32]", children: /* @__PURE__ */ t(ut, {}) })
+      ] })
+    ) }),
+    /* @__PURE__ */ t(
+      dt,
+      {
+        isOpen: Xe,
+        onClose: () => ge(!1)
+      }
+    ),
+    L && c === "editor" && /* @__PURE__ */ o(
+      "div",
+      {
+        ref: k,
+        className: "absolute bg-[#1e1e32] border border-gray-700/50 rounded-xl shadow-2xl z-10 flex flex-col",
+        style: {
+          right: `${q.right}px`,
+          top: `${q.top}px`,
+          width: `${P.width}px`,
+          height: `${P.height}px`,
+          maxHeight: "calc(100vh - 100px)",
+          // Constrain height
+          cursor: V ? "grabbing" : W ? l != null && l.includes("both-top-left") || l != null && l.includes("both-bottom-right") ? "nwse-resize" : l != null && l.includes("both-top-right") || l != null && l.includes("both-bottom-left") ? "nesw-resize" : l != null && l.includes("width") ? "col-resize" : "row-resize" : "grab",
+          userSelect: "none"
+        },
+        onMouseDown: Ye,
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ t(
+            it,
+            {
+              nodeId: L,
+              onUpdate: (s) => b(L, s),
+              onDelete: () => re(L),
+              onClose: () => R(null)
+            }
+          ) }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute top-0 left-0 right-0 h-1 cursor-row-resize hover:bg-blue-500/50 transition-colors z-20",
+              onMouseDown: (s) => D(s, "height-top"),
+              style: { height: "4px" }
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 right-0 w-1 cursor-col-resize hover:bg-blue-500/50 transition-colors z-20",
+              onMouseDown: (s) => D(s, "width-right"),
+              style: { width: "4px" }
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 right-0 h-1 cursor-row-resize hover:bg-blue-500/50 transition-colors z-20",
+              onMouseDown: (s) => D(s, "height-bottom"),
+              style: { height: "4px" }
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute top-0 bottom-0 left-0 w-1 cursor-col-resize hover:bg-blue-500/50 transition-colors z-20",
+              onMouseDown: (s) => D(s, "width-left"),
+              style: { width: "4px" }
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute top-0 left-0 w-4 h-4 cursor-nwse-resize z-30",
+              onMouseDown: (s) => D(s, "both-top-left")
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute top-0 right-0 w-4 h-4 cursor-nesw-resize z-30",
+              onMouseDown: (s) => D(s, "both-top-right")
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-30",
+              onMouseDown: (s) => D(s, "both-bottom-right")
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 w-4 h-4 cursor-nesw-resize z-30",
+              onMouseDown: (s) => D(s, "both-bottom-left")
+            }
+          )
+        ]
+      }
+    ),
+    x && (() => {
+      const s = (e == null ? void 0 : e.nodes.find((r) => r.id === x.nodeId)) || (n == null ? void 0 : n.nodes.find((r) => r.id === x.nodeId));
+      return s ? /* @__PURE__ */ t(
+        gt,
+        {
+          x: x.x,
+          y: x.y,
+          nodeId: x.nodeId,
+          nodeLabel: s.label || s.type,
+          onRename: Ke,
+          onDelete: Ge,
+          onConfigure: Je,
+          onDuplicate: Te,
+          onClose: Qe
+        }
+      ) : null;
+    })()
+  ] });
+};
+export {
+  Vt as PipelineCanvas
+};
+//# sourceMappingURL=PipelineCanvas.mjs.map