@genfeedai/workflow-ui 0.1.0

package/dist/chunk-LAJ34AH2.mjs

@@ -0,0 +1,374 @@
+import { useExecutionStore, useUIStore } from './chunk-CSUBLSKZ.mjs';
+import { require_dist } from './chunk-BJ3R5R32.mjs';
+import { __toESM } from './chunk-AC6TWLRT.mjs';
+import { Bug, Trash2, X, ChevronDown, ChevronRight, Copy, PanelLeftClose, Search, GitBranch, ArrowLeftFromLine, ArrowRightToLine, Download, Eye, CheckCircle, Columns2, LayoutGrid, Subtitles, Pencil, Grid3X3, Maximize, Crop, Film, Scissors, Layers, Wand2, Maximize2, Navigation, AudioLines, Mic, Brain, Video, Sparkles, Puzzle, Volume2, FileVideo, FileText, MessageSquare, Image } from 'lucide-react';
+import { forwardRef, memo, useCallback, useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/panels/NodePalette.tsx
+var import_types = __toESM(require_dist());
+var ICONS = {
+  // Input
+  Image,
+  MessageSquare,
+  FileText,
+  FileVideo,
+  Volume2,
+  Puzzle,
+  // AI
+  Sparkles,
+  Video,
+  Brain,
+  Mic,
+  AudioLines,
+  Navigation,
+  // Processing
+  Maximize2,
+  Wand2,
+  Layers,
+  Scissors,
+  Film,
+  Crop,
+  Maximize,
+  Grid3X3,
+  Pencil,
+  Subtitles,
+  LayoutGrid,
+  Columns2,
+  // Output
+  CheckCircle,
+  Eye,
+  Download,
+  // Composition
+  ArrowRightToLine,
+  ArrowLeftFromLine,
+  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] ?? Sparkles;
+  const handleDragStart = useCallback(
+    (event) => {
+      event.dataTransfer.setData("nodeType", type);
+      event.dataTransfer.effectAllowed = "move";
+    },
+    [type]
+  );
+  const colors = CATEGORY_COLORS[category];
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: `p-2 rounded ${colors.icon}`, children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium text-sm text-[var(--foreground)] truncate", children: label }),
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "border-b border-[var(--border)] last:border-0", children: [
+    /* @__PURE__ */ 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__ */ jsx(ChevronDown, { className: "w-4 h-4 text-[var(--muted-foreground)]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-sm text-[var(--foreground)]", children: CATEGORY_LABELS[category] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--muted-foreground)] ml-auto", children: nodes.length })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsx("div", { className: "px-4 pb-4 space-y-2", children: nodes.map((node) => /* @__PURE__ */ jsx(
+      NodeCard,
+      {
+        type: node.type,
+        label: node.label,
+        description: node.description,
+        icon: node.icon,
+        category: node.category
+      },
+      node.type
+    )) })
+  ] });
+}
+function NodePalette() {
+  const { togglePalette } = useUIStore();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [expandedCategories, setExpandedCategories] = useState(
+    /* @__PURE__ */ new Set(["input"])
+  );
+  const nodesByCategory = useMemo(() => (0, import_types.getNodesByCategory)(), []);
+  const filteredNodes = 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 = useCallback((category) => {
+    setExpandedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(category)) {
+        next.delete(category);
+      } else {
+        next.add(category);
+      }
+      return next;
+    });
+  }, []);
+  const categories = useMemo(
+    () => ["input", "ai", "processing", "output", "composition"].filter(
+      (cat) => nodesByCategory[cat].length > 0
+    ),
+    [nodesByCategory]
+  );
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "px-4 py-3 border-b border-[var(--border)] flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold text-sm text-[var(--foreground)]", children: "Nodes" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--muted-foreground)] mt-1", children: "Drag to canvas" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: togglePalette,
+          className: "p-1.5 hover:bg-[var(--secondary)] rounded-md transition-colors group",
+          title: "Close sidebar (M)",
+          children: /* @__PURE__ */ jsx(PanelLeftClose, { className: "w-4 h-4 text-[var(--muted-foreground)] group-hover:text-[var(--foreground)]" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-[var(--border)]", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--muted-foreground)]" }),
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: filteredNodes ? (
+      // Search results
+      /* @__PURE__ */ jsx("div", { className: "px-4 py-3 space-y-2", children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--muted-foreground)] text-center py-4", children: "No nodes found" }) : filteredNodes.map((node) => /* @__PURE__ */ 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__ */ jsx(
+        CategorySection,
+        {
+          category,
+          isExpanded: expandedCategories.has(category),
+          onToggle: () => toggleCategory(category)
+        },
+        category
+      ))
+    ) })
+  ] });
+}
+var PanelContainer = forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const stopPropagation = (e) => {
+      e.stopPropagation();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className,
+        onClick: stopPropagation,
+        onMouseDown: stopPropagation,
+        onPointerDown: stopPropagation,
+        onDoubleClick: stopPropagation,
+        ...props,
+        children
+      }
+    );
+  }
+);
+PanelContainer.displayName = "PanelContainer";
+function PayloadCard({ payload }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = 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__ */ jsxs("div", { className: "border border-[var(--border)] rounded-lg overflow-hidden", children: [
+    /* @__PURE__ */ 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__ */ jsx(ChevronDown, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4 text-[var(--muted-foreground)] shrink-0" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--foreground)] truncate", children: payload.nodeName || payload.nodeId }),
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded", children: payload.nodeType })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-[var(--muted-foreground)] mt-0.5", children: [
+              payload.model,
+              " \u2022 ",
+              timestamp
+            ] })
+          ] })
+        ]
+      }
+    ),
+    isExpanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border)] p-3 bg-[var(--muted)]/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-[var(--muted-foreground)] uppercase", children: "Payload" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "flex items-center gap-1 text-[10px] text-[var(--primary)] hover:underline",
+            children: [
+              /* @__PURE__ */ jsx(Copy, { className: "w-3 h-3" }),
+              copied ? "Copied!" : "Copy"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ 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 = useExecutionStore((s) => s.debugPayloads);
+  const clearDebugPayloads = useExecutionStore((s) => s.clearDebugPayloads);
+  const setShowDebugPanel = useUIStore((s) => s.setShowDebugPanel);
+  const handleClose = useCallback(() => {
+    setShowDebugPanel(false);
+  }, [setShowDebugPanel]);
+  return /* @__PURE__ */ jsxs(PanelContainer, { className: "w-80 h-full border-l border-[var(--border)] bg-[var(--background)] flex flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 border-b border-[var(--border)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Bug, { className: "w-4 h-4 text-amber-500" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-sm", children: "Debug Console" }),
+        debugPayloads.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] px-1.5 py-0.5 bg-amber-500/10 text-amber-500 rounded-full", children: debugPayloads.length })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        debugPayloads.length > 0 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: clearDebugPayloads,
+            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
+            title: "Clear all payloads",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4 text-[var(--muted-foreground)]" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleClose,
+            className: "p-1.5 hover:bg-[var(--muted)] rounded transition",
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-3 space-y-2", children: debugPayloads.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8 text-[var(--muted-foreground)]", children: [
+      /* @__PURE__ */ jsx(Bug, { className: "w-12 h-12 mx-auto mb-3 opacity-50 text-amber-500/50" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mb-2", children: "No payloads captured" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Run a workflow with debug mode enabled to capture API payloads." })
+    ] }) : debugPayloads.map((payload, index) => /* @__PURE__ */ jsx(
+      PayloadCard,
+      {
+        payload
+      },
+      `${payload.nodeId}-${payload.timestamp}-${index}`
+    )) }),
+    debugPayloads.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-[var(--border)] bg-[var(--muted)]/30", children: /* @__PURE__ */ 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 = memo(DebugPanelComponent);
+
+export { DebugPanel, NodePalette, PanelContainer };

package/dist/chunk-LDN7IX4Y.mjs

@@ -0,0 +1 @@
+

package/dist/chunk-MLJJBBTB.mjs

@@ -0,0 +1 @@
+