@genfeedai/workflow-ui 0.1.0

package/dist/chunk-E544XUBL.js

@@ -0,0 +1,378 @@
+'use strict';
+
+var chunkEC2ZIWOK_js = require('./chunk-EC2ZIWOK.js');
+var chunkNSDLGLAQ_js = require('./chunk-NSDLGLAQ.js');
+var chunkZ7PWFZG5_js = require('./chunk-Z7PWFZG5.js');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/panels/NodePalette.tsx
+var import_types = chunkZ7PWFZG5_js.__toESM(chunkNSDLGLAQ_js.require_dist());
+var ICONS = {
+  // Input
+  Image: lucideReact.Image,
+  MessageSquare: lucideReact.MessageSquare,
+  FileText: lucideReact.FileText,
+  FileVideo: lucideReact.FileVideo,
+  Volume2: lucideReact.Volume2,
+  Puzzle: lucideReact.Puzzle,
+  // AI
+  Sparkles: lucideReact.Sparkles,
+  Video: lucideReact.Video,
+  Brain: lucideReact.Brain,
+  Mic: lucideReact.Mic,
+  AudioLines: lucideReact.AudioLines,
+  Navigation: lucideReact.Navigation,
+  // Processing
+  Maximize2: lucideReact.Maximize2,
+  Wand2: lucideReact.Wand2,
+  Layers: lucideReact.Layers,
+  Scissors: lucideReact.Scissors,
+  Film: lucideReact.Film,
+  Crop: lucideReact.Crop,
+  Maximize: lucideReact.Maximize,
+  Grid3X3: lucideReact.Grid3X3,
+  Pencil: lucideReact.Pencil,
+  Subtitles: lucideReact.Subtitles,
+  LayoutGrid: lucideReact.LayoutGrid,
+  Columns2: lucideReact.Columns2,
+  // Output
+  CheckCircle: lucideReact.CheckCircle,
+  Eye: lucideReact.Eye,
+  Download: lucideReact.Download,
+  // Composition
+  ArrowRightToLine: lucideReact.ArrowRightToLine,
+  ArrowLeftFromLine: lucideReact.ArrowLeftFromLine,
+  GitBranch: lucideReact.GitBranch
+};
+var CATEGORY_LABELS = {
+  input: "Input",
+  ai: "AI Generation",
+  processing: "Processing",
+  output: "Output",
+  composition: "Composition"
+};
+var CATEGORY_COLORS = {
+  input: {
+    icon: "bg-[var(--category-input)]/20 text-[var(--category-input)]",
+    hover: "hover:border-[var(--category-input)]",
+    cssVar: "var(--category-input)"
+  },
+  ai: {
+    icon: "bg-[var(--category-ai)]/20 text-[var(--category-ai)]",
+    hover: "hover:border-[var(--category-ai)]",
+    cssVar: "var(--category-ai)"
+  },
+  processing: {
+    icon: "bg-[var(--category-processing)]/20 text-[var(--category-processing)]",
+    hover: "hover:border-[var(--category-processing)]",
+    cssVar: "var(--category-processing)"
+  },
+  output: {
+    icon: "bg-[var(--category-output)]/20 text-[var(--category-output)]",
+    hover: "hover:border-[var(--category-output)]",
+    cssVar: "var(--category-output)"
+  },
+  composition: {
+    icon: "bg-[var(--category-composition)]/20 text-[var(--category-composition)]",
+    hover: "hover:border-[var(--category-composition)]",
+    cssVar: "var(--category-composition)"
+  }
+};
+function NodeCard({ type, label, description, icon, category }) {
+  const Icon = ICONS[icon] ?? lucideReact.Sparkles;
+  const handleDragStart = react.useCallback(
+    (event) => {
+      event.dataTransfer.setData("nodeType", type);
+      event.dataTransfer.effectAllowed = "move";
+    },
+    [type]
+  );
+  const colors = CATEGORY_COLORS[category];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      draggable: true,
+      onDragStart: handleDragStart,
+      className: `p-3 bg-[var(--card)] border border-[var(--border)] rounded-lg cursor-grab transition-colors group ${colors.hover}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `p-2 rounded ${colors.icon}`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm text-[var(--foreground)] truncate", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-[var(--muted-foreground)] mt-0.5 line-clamp-2", children: description })
+        ] })
+      ] })
+    }
+  );
+}
+function CategorySection({ category, isExpanded, onToggle }) {
+  const nodes = (0, import_types.getNodesByCategory)()[category];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-[var(--border)] last:border-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onToggle,
+        className: "w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-[var(--secondary)] transition cursor-pointer",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-[var(--muted-foreground)]" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm text-[var(--foreground)]", children: CATEGORY_LABELS[category] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--muted-foreground)] ml-auto", children: nodes.length })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 pb-4 space-y-2", children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+      NodeCard,
+      {
+        type: node.type,
+        label: node.label,
+        description: node.description,
+        icon: node.icon,
+        category: node.category
+      },
+      node.type
+    )) })
+  ] });
+}
+function NodePalette() {
+  const { togglePalette } = chunkEC2ZIWOK_js.useUIStore();
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [expandedCategories, setExpandedCategories] = react.useState(
+    /* @__PURE__ */ new Set(["input"])
+  );
+  const nodesByCategory = react.useMemo(() => (0, import_types.getNodesByCategory)(), []);
+  const filteredNodes = react.useMemo(() => {
+    if (!searchQuery.trim()) return null;
+    const query = searchQuery.toLowerCase();
+    const results = [];
+    for (const category of Object.keys(nodesByCategory)) {
+      for (const node of nodesByCategory[category]) {
+        if (node.label.toLowerCase().includes(query) || node.description.toLowerCase().includes(query)) {
+          results.push(node);
+        }
+      }
+    }
+    return results;
+  }, [searchQuery, nodesByCategory]);
+  const toggleCategory = react.useCallback((category) => {
+    setExpandedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  }, []);
+  const categories = react.useMemo(
+    () => ["input", "ai", "processing", "output", "composition"].filter(
+      (cat) => nodesByCategory[cat].length > 0
+    ),
+    [nodesByCategory]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 min-w-64 h-full bg-[var(--background)] border-r border-[var(--border)] flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 border-b border-[var(--border)] flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold text-sm text-[var(--foreground)]", children: "Nodes" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--muted-foreground)] mt-1", children: "Drag to canvas" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: togglePalette,
+          className: "p-1.5 hover:bg-[var(--secondary)] rounded-md transition-colors group",
+          title: "Close sidebar (M)",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { className: "w-4 h-4 text-[var(--muted-foreground)] group-hover:text-[var(--foreground)]" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-b border-[var(--border)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search nodes...",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.target.value),
+          className: "w-full pl-8 pr-3 py-1.5 text-sm bg-[var(--secondary)] border border-[var(--border)] rounded-md placeholder:text-[var(--muted-foreground)] focus:outline-none focus:ring-1 focus:ring-[var(--ring)]"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: filteredNodes ? (
+      // Search results
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 space-y-2", children: filteredNodes.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--muted-foreground)] text-center py-4", children: "No nodes found" }) : filteredNodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
+        NodeCard,
+        {
+          type: node.type,
+          label: node.label,
+          description: node.description,
+          icon: node.icon,
+          category: node.category
+        },
+        node.type
+      )) })
+    ) : (
+      // Category view
+      categories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
+        CategorySection,
+        {
+          category,
+          isExpanded: expandedCategories.has(category),
+          onToggle: () => toggleCategory(category)
+        },
+        category
+      ))
+    ) })
+  ] });
+}
+var PanelContainer = react.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const stopPropagation = (e) => {
+      e.stopPropagation();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className,
+        onClick: stopPropagation,
+        onMouseDown: stopPropagation,
+        onPointerDown: stopPropagation,
+        onDoubleClick: stopPropagation,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PanelContainer.displayName = "PanelContainer";
+function PayloadCard({ payload }) {
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = react.useCallback(
+    async (e) => {
+      e.stopPropagation();
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(payload.input, null, 2));
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch {
+        const textArea = document.createElement("textarea");
+        textArea.value = JSON.stringify(payload.input, null, 2);
+        textArea.style.position = "fixed";
+        textArea.style.left = "-9999px";
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+          document.execCommand("copy");
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2e3);
+        } catch {
+        }
+        document.body.removeChild(textArea);
+      }
+    },
+    [payload.input]
+  );
+  const timestamp = new Date(payload.timestamp).toLocaleTimeString();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-[var(--border)] rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsExpanded(!isExpanded),
+        className: "w-full flex items-center gap-2 p-3 text-left hover:bg-[var(--muted)]/50 transition",
+        children: [
+          isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--foreground)] truncate", children: payload.nodeName || payload.nodeId }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded", children: payload.nodeType })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] text-[var(--muted-foreground)] mt-0.5", children: [
+              payload.model,
+              " \u2022 ",
+              timestamp
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-[var(--border)] p-3 bg-[var(--muted)]/30", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-[var(--muted-foreground)] uppercase", children: "Payload" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "flex items-center gap-1 text-[10px] text-[var(--primary)] hover:underline",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-3 h-3" }),
+              copied ? "Copied!" : "Copy"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-[11px] font-mono text-[var(--muted-foreground)] bg-[var(--background)] p-2 rounded border border-[var(--border)] overflow-x-auto max-h-64 overflow-y-auto", children: JSON.stringify(payload.input, null, 2) })
+    ] })
+  ] });
+}
+function DebugPanelComponent() {
+  const debugPayloads = chunkEC2ZIWOK_js.useExecutionStore((s) => s.debugPayloads);
+  const clearDebugPayloads = chunkEC2ZIWOK_js.useExecutionStore((s) => s.clearDebugPayloads);
+  const setShowDebugPanel = chunkEC2ZIWOK_js.useUIStore((s) => s.setShowDebugPanel);
+  const handleClose = react.useCallback(() => {
+    setShowDebugPanel(false);
+  }, [setShowDebugPanel]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(PanelContainer, { className: "w-80 h-full border-l border-[var(--border)] bg-[var(--background)] flex flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-3 border-b border-[var(--border)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bug, { className: "w-4 h-4 text-amber-500" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm", children: "Debug Console" }),
+        debugPayloads.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded-full", children: debugPayloads.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        debugPayloads.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: clearDebugPayloads,
+            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
+            title: "Clear all payloads",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4 text-[var(--muted-foreground)]" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-3 space-y-2", children: debugPayloads.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-8 text-[var(--muted-foreground)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bug, { className: "w-12 h-12 mx-auto mb-3 opacity-50 text-amber-500/50" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium mb-2", children: "No payloads captured" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: "Run a workflow with debug mode enabled to capture API payloads." })
+    ] }) : debugPayloads.map((payload, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      PayloadCard,
+      {
+        payload
+      },
+      `${payload.nodeId}-${payload.timestamp}-${index}`
+    )) }),
+    debugPayloads.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 border-t border-[var(--border)] bg-[var(--muted)]/30", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-[var(--muted-foreground)]", children: [
+      debugPayloads.length,
+      " payload",
+      debugPayloads.length !== 1 ? "s" : "",
+      " captured. Click to expand and view details."
+    ] }) })
+  ] });
+}
+var DebugPanel = react.memo(DebugPanelComponent);
+
+exports.DebugPanel = DebugPanel;
+exports.NodePalette = NodePalette;
+exports.PanelContainer = PanelContainer;