@genfeedai/workflow-ui 0.1.3 → 0.1.4

package/dist/{chunk-7P2JWDC7.mjs → chunk-O5II6BOJ.mjs}

@@ -1,18 +1,456 @@
-import { nodeTypes } from './chunk-E3YBVMYZ.mjs';
-import { getMediaFromNode } from './chunk-E323WAZG.mjs';
-import { useCanvasKeyboardShortcuts } from './chunk-IASLG6IA.mjs';
-import { Button } from './chunk-7SKSRSS7.mjs';
-import { usePromptEditorStore } from './chunk-CV4M7CNU.mjs';
-import { useUIStore, useSettingsStore, useExecutionStore } from './chunk-SQK4JDYY.mjs';
-import { useWorkflowStore } from './chunk-RIGVIEYB.mjs';
-import { useNodes, ViewportPortal, useViewport, useStore, getBezierPath, BaseEdge, useReactFlow, ReactFlow, SelectionMode, ConnectionMode, Background, BackgroundVariant, Controls, MiniMap } from '@xyflow/react';
-import { Pause, Palette, Lock, Unlock, Trash2, Search, X, Keyboard, PanelLeft, Download, ChevronLeft, ChevronRight, ZoomOut, ZoomIn } from 'lucide-react';
-import { memo, useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import { nodeTypes, NodeDetailModal } from './chunk-PANZDSP6.mjs';
+import { calculateWorkflowCost, formatCost } from './chunk-JTPADIUO.mjs';
+import { useContextMenu, useCanvasKeyboardShortcuts, ContextMenu } from './chunk-ZD2BADZO.mjs';
+import { useUIStore, useSettingsStore, useExecutionStore } from './chunk-LT3ZJJL6.mjs';
+import { useWorkflowStore, getHandleType } from './chunk-R727OFBR.mjs';
+import { useReactFlow, getBezierPath, BaseEdge, useNodes, ViewportPortal, useViewport, useStore, ReactFlow, SelectionMode, ConnectionMode, Background, BackgroundVariant, Controls, MiniMap } from '@xyflow/react';
+import { Plus, Search, Pause, Play, Trash2, AlignHorizontalSpaceAround, AlignVerticalSpaceAround, Grid3X3, Ungroup, Group, Palette, Lock, Unlock, X, Keyboard, PanelLeft, XCircle, AlertTriangle, CheckCircle, Info, Check, Copy, DollarSign } from 'lucide-react';
+import { memo, useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import '@xyflow/react/dist/style.css';
-import { NODE_DEFINITIONS } from '@genfeedai/types';
-import { clsx } from 'clsx';
+import { CONNECTION_RULES, getNodesByCategory, NODE_DEFINITIONS } from '@genfeedai/types';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Image from 'next/image';
+import { clsx } from 'clsx';
+import { createPortal } from 'react-dom';
+
+var CATEGORY_LABELS = {
+  input: "Input",
+  ai: "AI",
+  processing: "Processing",
+  output: "Output",
+  composition: "Composition"
+};
+var CATEGORY_ORDER = ["input", "ai", "processing", "output", "composition"];
+function ConnectionDropMenuComponent() {
+  const { connectionDropMenu, closeConnectionDropMenu } = useUIStore();
+  const { addNode, findCompatibleHandle, onConnect } = useWorkflowStore();
+  const reactFlow = useReactFlow();
+  const [search, setSearch] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const backdropRef = useRef(null);
+  const isOpen = connectionDropMenu !== null;
+  const compatibleNodes = useMemo(() => {
+    if (!connectionDropMenu) return [];
+    const sourceType = connectionDropMenu.sourceHandleType;
+    const compatibleTargetTypes = CONNECTION_RULES[sourceType] ?? [];
+    const nodesByCategory = getNodesByCategory();
+    const result = [];
+    for (const category of CATEGORY_ORDER) {
+      const defs = nodesByCategory[category] ?? [];
+      for (const def of defs) {
+        const hasCompatibleInput = def.inputs.some(
+          (input) => compatibleTargetTypes.includes(input.type)
+        );
+        if (hasCompatibleInput) {
+          result.push({
+            type: def.type,
+            label: def.label,
+            category
+          });
+        }
+      }
+    }
+    return result;
+  }, [connectionDropMenu]);
+  const filteredNodes = useMemo(() => {
+    if (!search.trim()) return compatibleNodes;
+    const query = search.toLowerCase();
+    return compatibleNodes.filter(
+      (n) => n.label.toLowerCase().includes(query) || n.type.toLowerCase().includes(query)
+    );
+  }, [compatibleNodes, search]);
+  const groupedNodes = useMemo(() => {
+    const grouped = {};
+    for (const node of filteredNodes) {
+      if (!grouped[node.category]) grouped[node.category] = [];
+      grouped[node.category].push(node);
+    }
+    return grouped;
+  }, [filteredNodes]);
+  useEffect(() => {
+    if (isOpen) {
+      setSearch("");
+      setSelectedIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [search]);
+  useEffect(() => {
+    if (listRef.current) {
+      const items = listRef.current.querySelectorAll("[data-node-item]");
+      const selected = items[selectedIndex];
+      selected?.scrollIntoView({ block: "nearest" });
+    }
+  }, [selectedIndex]);
+  const handleSelect = useCallback(
+    (nodeType) => {
+      if (!connectionDropMenu) return;
+      const position = reactFlow.screenToFlowPosition({
+        x: connectionDropMenu.screenPosition.x,
+        y: connectionDropMenu.screenPosition.y
+      });
+      const newNodeId = addNode(nodeType, position);
+      const compatibleHandle = findCompatibleHandle(
+        connectionDropMenu.sourceNodeId,
+        connectionDropMenu.sourceHandleId,
+        newNodeId
+      );
+      if (compatibleHandle) {
+        onConnect({
+          source: connectionDropMenu.sourceNodeId,
+          sourceHandle: connectionDropMenu.sourceHandleId,
+          target: newNodeId,
+          targetHandle: compatibleHandle
+        });
+      }
+      closeConnectionDropMenu();
+    },
+    [connectionDropMenu, reactFlow, addNode, findCompatibleHandle, onConnect, closeConnectionDropMenu]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.min(prev + 1, filteredNodes.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter" && filteredNodes[selectedIndex]) {
+        e.preventDefault();
+        handleSelect(filteredNodes[selectedIndex].type);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        closeConnectionDropMenu();
+      }
+    },
+    [filteredNodes, selectedIndex, handleSelect, closeConnectionDropMenu]
+  );
+  const handleBackdropClick = (e) => {
+    if (e.target === backdropRef.current) {
+      closeConnectionDropMenu();
+    }
+  };
+  if (!isOpen || !connectionDropMenu) return null;
+  const menuStyle = {
+    position: "fixed",
+    left: connectionDropMenu.screenPosition.x,
+    top: connectionDropMenu.screenPosition.y,
+    zIndex: 50
+  };
+  let flatIndex = 0;
+  return /* @__PURE__ */ jsx("div", { ref: backdropRef, className: "fixed inset-0 z-40", onClick: handleBackdropClick, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: menuStyle,
+      className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-64 max-h-80 flex flex-col",
+      role: "dialog",
+      "aria-label": "Add Node",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border)]", children: [
+          /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5 text-[var(--muted-foreground)]" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: "Add Connected Node" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-2", onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--muted-foreground)]" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              placeholder: "Search compatible nodes...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              className: "w-full pl-7 pr-2 py-1.5 text-xs bg-[var(--secondary)] border border-[var(--border)] rounded-md outline-none focus:ring-1 focus:ring-[var(--ring)]"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            className: "flex-1 overflow-y-auto px-1.5 pb-1.5",
+            onKeyDown: handleKeyDown,
+            children: filteredNodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-[var(--muted-foreground)] text-xs py-4", children: "No compatible nodes found" }) : Object.entries(groupedNodes).map(([category, nodes]) => {
+              if (!nodes || nodes.length === 0) return null;
+              return /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-[10px] font-semibold text-[var(--muted-foreground)] uppercase tracking-wider px-2 py-1", children: CATEGORY_LABELS[category] }),
+                nodes.map((node) => {
+                  const currentIndex = flatIndex++;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      "data-node-item": true,
+                      onClick: () => handleSelect(node.type),
+                      className: `w-full text-left px-2 py-1.5 rounded text-xs transition-colors ${currentIndex === selectedIndex ? "bg-[var(--primary)]/10 text-[var(--foreground)]" : "text-[var(--foreground)] hover:bg-[var(--secondary)]"}`,
+                      children: node.label
+                    },
+                    node.type
+                  );
+                })
+              ] }, category);
+            })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var ConnectionDropMenu = memo(ConnectionDropMenuComponent);
+var DATA_TYPE_COLORS = {
+  image: ["#3b82f6", "#60a5fa"],
+  // blue
+  video: ["#8b5cf6", "#a78bfa"],
+  // purple
+  text: ["#22c55e", "#4ade80"],
+  // green
+  audio: ["#f97316", "#fb923c"],
+  // orange
+  number: ["#6b7280", "#9ca3af"]
+  // gray
+};
+var DEFAULT_COLORS = ["#6b7280", "#9ca3af"];
+function EditableEdgeComponent({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style = {},
+  markerEnd,
+  data,
+  selected
+}) {
+  const [edgePath, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const hasPause = data?.hasPause === true;
+  const dataType = data?.dataType ?? null;
+  const [colorStart, colorEnd] = dataType ? DATA_TYPE_COLORS[dataType] ?? DEFAULT_COLORS : DEFAULT_COLORS;
+  const gradientId = `edge-gradient-${id}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: colorStart }),
+      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: colorEnd })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 20,
+        className: "react-flow__edge-interaction"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          stroke: `url(#${gradientId})`,
+          strokeWidth: selected ? 3 : 2,
+          ...hasPause && {
+            strokeDasharray: "8 4"
+          }
+        }
+      }
+    ),
+    hasPause && /* @__PURE__ */ jsx(
+      "foreignObject",
+      {
+        width: 20,
+        height: 20,
+        x: labelX - 10,
+        y: labelY - 10,
+        className: "pointer-events-none",
+        children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-5 h-5 rounded-full bg-amber-500 text-white shadow-sm", children: /* @__PURE__ */ jsx(Pause, { className: "w-3 h-3" }) })
+      }
+    ),
+    selected && !hasPause && /* @__PURE__ */ jsx(
+      "foreignObject",
+      {
+        width: 8,
+        height: 8,
+        x: labelX - 4,
+        y: labelY - 4,
+        className: "pointer-events-none",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "w-2 h-2 rounded-full",
+            style: { backgroundColor: colorStart }
+          }
+        )
+      }
+    )
+  ] });
+}
+var EditableEdge = memo(EditableEdgeComponent);
+function EdgeToolbarComponent() {
+  const { selectedEdgeId, selectEdge } = useUIStore();
+  const { edges, toggleEdgePause, removeEdge } = useWorkflowStore();
+  const reactFlow = useReactFlow();
+  const selectedEdge = useMemo(
+    () => selectedEdgeId ? edges.find((e) => e.id === selectedEdgeId) : null,
+    [selectedEdgeId, edges]
+  );
+  const position = useMemo(() => {
+    if (!selectedEdge) return null;
+    const sourceNode = reactFlow.getNode(selectedEdge.source);
+    const targetNode = reactFlow.getNode(selectedEdge.target);
+    if (!sourceNode || !targetNode) return null;
+    const midX = (sourceNode.position.x + (sourceNode.measured?.width ?? 280) / 2 + (targetNode.position.x + (targetNode.measured?.width ?? 280) / 2)) / 2;
+    const midY = (sourceNode.position.y + (sourceNode.measured?.height ?? 200) / 2 + (targetNode.position.y + (targetNode.measured?.height ?? 200) / 2)) / 2;
+    return reactFlow.flowToScreenPosition({ x: midX, y: midY });
+  }, [selectedEdge, reactFlow]);
+  if (!selectedEdge || !position) return null;
+  const hasPause = selectedEdge.data?.hasPause === true;
+  const handleTogglePause = (e) => {
+    e.stopPropagation();
+    toggleEdgePause(selectedEdge.id);
+  };
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    removeEdge(selectedEdge.id);
+    selectEdge(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed z-30 flex items-center gap-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg px-1.5 py-1",
+      style: {
+        left: position.x,
+        top: position.y - 40,
+        transform: "translateX(-50%)"
+      },
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleTogglePause,
+            title: hasPause ? "Resume edge" : "Pause edge",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: hasPause ? /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Pause, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--border)]" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDelete,
+            title: "Delete edge",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-red-500/10 hover:text-red-500",
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+var EdgeToolbar = memo(EdgeToolbarComponent);
+var REFERENCE_COLOR = "#52525b";
+function ReferenceEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  markerEnd,
+  source,
+  target
+}) {
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const isConnectedToSelection = useMemo(() => {
+    const selectedNodes = nodes.filter((n) => n.selected);
+    if (selectedNodes.length === 0) return false;
+    return selectedNodes.some((n) => n.id === source || n.id === target);
+  }, [nodes, source, target]);
+  const [edgePath] = useMemo(() => {
+    return getBezierPath({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+      curvature: 0.25
+    });
+  }, [sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition]);
+  const gradientId = useMemo(() => {
+    const selectionKey = isConnectedToSelection ? "active" : "dimmed";
+    return `reference-gradient-${selectionKey}-${id}`;
+  }, [isConnectedToSelection, id]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: "0%",
+          stopColor: REFERENCE_COLOR,
+          stopOpacity: isConnectedToSelection ? 1 : 0.25
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: "50%",
+          stopColor: REFERENCE_COLOR,
+          stopOpacity: isConnectedToSelection ? 0.55 : 0.1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "stop",
+        {
+          offset: "100%",
+          stopColor: REFERENCE_COLOR,
+          stopOpacity: isConnectedToSelection ? 1 : 0.25
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: {
+          ...style,
+          stroke: `url(#${gradientId})`,
+          strokeWidth: 2,
+          strokeDasharray: "6 4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: edgePath,
+        fill: "none",
+        strokeWidth: 10,
+        stroke: "transparent",
+        className: "react-flow__edge-interaction"
+      }
+    )
+  ] });
+}
 
 // src/types/groups.ts
 var GROUP_COLORS = {
@@ -856,254 +1294,651 @@ function ShortcutHelpModal() {
     }
   );
 }
-var PROMPT_NODE_TYPES = ["prompt"];
-function NodeDetailModal() {
-  const { activeModal, nodeDetailNodeId, nodeDetailStartIndex, closeNodeDetailModal } = useUIStore();
-  const { getNodeById } = useWorkflowStore();
-  const { openEditor } = usePromptEditorStore();
-  const [zoomLevel, setZoomLevel] = useState(1);
-  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
-  const [isPanning, setIsPanning] = useState(false);
-  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const node = useMemo(() => {
-    if (!nodeDetailNodeId) return null;
-    return getNodeById(nodeDetailNodeId);
-  }, [nodeDetailNodeId, getNodeById]);
-  useEffect(() => {
-    if (activeModal !== "nodeDetail" || !node) return;
-    if (PROMPT_NODE_TYPES.includes(node.type)) {
-      const promptData = node.data;
-      closeNodeDetailModal();
-      openEditor(node.id, promptData.prompt ?? "");
+function CostModal() {
+  const { activeModal, closeModal } = useUIStore();
+  const nodes = useWorkflowStore((state) => state.nodes);
+  const actualCost = useExecutionStore((state) => state.actualCost);
+  const backdropRef = useRef(null);
+  const isOpen = activeModal === "cost";
+  const breakdown = useMemo(() => calculateWorkflowCost(nodes), [nodes]);
+  const handleClose = () => {
+    closeModal();
+  };
+  const handleBackdropClick = (e) => {
+    if (e.target === backdropRef.current) {
+      handleClose();
     }
-  }, [activeModal, node, closeNodeDetailModal, openEditor]);
-  const mediaInfo = useMemo(() => {
-    if (!node) return { url: null, type: null };
-    return getMediaFromNode(node.type, node.data);
-  }, [node]);
-  const nodeDef = useMemo(() => {
-    if (!node) return null;
-    return NODE_DEFINITIONS[node.type];
-  }, [node]);
-  const imageUrls = mediaInfo.urls ?? [];
-  const hasMultipleImages = imageUrls.length > 1;
-  const displayUrl = hasMultipleImages ? imageUrls[currentIndex] ?? mediaInfo.url : mediaInfo.url;
-  const goToPrevious = useCallback(() => {
-    setCurrentIndex((prev) => Math.max(prev - 1, 0));
-    setZoomLevel(1);
-    setPanOffset({ x: 0, y: 0 });
-  }, []);
-  const goToNext = useCallback(() => {
-    setCurrentIndex((prev) => Math.min(prev + 1, imageUrls.length - 1));
-    setZoomLevel(1);
-    setPanOffset({ x: 0, y: 0 });
-  }, [imageUrls.length]);
-  useEffect(() => {
-    setZoomLevel(1);
-    setPanOffset({ x: 0, y: 0 });
-    setCurrentIndex(nodeDetailStartIndex);
-  }, [nodeDetailNodeId, nodeDetailStartIndex]);
-  useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (activeModal !== "nodeDetail") return;
-      if (e.key === "Escape") {
-        closeNodeDetailModal();
-      }
-      if (e.key === "+" || e.key === "=") {
-        setZoomLevel((prev) => Math.min(prev + 0.25, 4));
-      }
-      if (e.key === "-") {
-        setZoomLevel((prev) => Math.max(prev - 0.25, 0.25));
-      }
-      if (e.key === "0") {
-        setZoomLevel(1);
-        setPanOffset({ x: 0, y: 0 });
-      }
-      if (e.key === "ArrowLeft") {
-        goToPrevious();
-      }
-      if (e.key === "ArrowRight") {
-        goToNext();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [activeModal, closeNodeDetailModal, goToPrevious, goToNext]);
-  const handleMouseDown = useCallback(
-    (e) => {
-      if (zoomLevel > 1) {
-        setIsPanning(true);
-        setPanStart({ x: e.clientX - panOffset.x, y: e.clientY - panOffset.y });
-      }
-    },
-    [zoomLevel, panOffset]
-  );
-  const handleMouseMove = useCallback(
-    (e) => {
-      if (isPanning) {
-        setPanOffset({
-          x: e.clientX - panStart.x,
-          y: e.clientY - panStart.y
-        });
-      }
-    },
-    [isPanning, panStart]
-  );
-  const handleMouseUp = useCallback(() => {
-    setIsPanning(false);
-  }, []);
-  const handleDownload = useCallback(() => {
-    const url = displayUrl ?? mediaInfo.url;
-    if (!url) return;
-    const link = document.createElement("a");
-    link.href = url;
-    const suffix = hasMultipleImages ? `_${currentIndex + 1}` : "";
-    link.download = `${node?.data.label || "output"}${suffix}.${mediaInfo.type === "video" ? "mp4" : "png"}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }, [displayUrl, mediaInfo, node, hasMultipleImages, currentIndex]);
-  if (activeModal !== "nodeDetail" || !node || !nodeDef) {
-    return null;
-  }
-  if (PROMPT_NODE_TYPES.includes(node.type)) {
-    return null;
-  }
-  const nodeData = node.data;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 bg-black/80", onClick: closeNodeDetailModal }),
-    /* @__PURE__ */ jsxs("div", { className: "fixed inset-4 z-50 flex flex-col bg-card rounded-lg border border-border shadow-xl overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-medium text-foreground", children: nodeData.label }),
-          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground bg-secondary px-2 py-0.5 rounded", children: nodeDef.label })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          displayUrl && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: handleDownload, children: [
-            /* @__PURE__ */ jsx(Download, { className: "h-4 w-4 mr-1" }),
-            "Download"
-          ] }),
-          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: closeNodeDetailModal, children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs(
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      handleClose();
+    }
+  };
+  if (!isOpen) return null;
+  const hasActualCost = actualCost > 0;
+  const variance = hasActualCost ? actualCost - breakdown.total : 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: backdropRef,
+      onClick: handleBackdropClick,
+      onKeyDown: handleKeyDown,
+      className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+      style: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "relative w-full h-full flex items-center justify-center bg-background overflow-hidden",
-          onMouseDown: handleMouseDown,
-          onMouseMove: handleMouseMove,
-          onMouseUp: handleMouseUp,
-          onMouseLeave: handleMouseUp,
-          style: { cursor: zoomLevel > 1 ? isPanning ? "grabbing" : "grab" : "default" },
+          className: "bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-xl w-full max-w-lg",
+          role: "dialog",
+          "aria-label": "Cost Breakdown",
           children: [
-            displayUrl ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "transition-transform duration-100",
-                style: {
-                  transform: `scale(${zoomLevel}) translate(${panOffset.x / zoomLevel}px, ${panOffset.y / zoomLevel}px)`
-                },
-                children: [
-                  mediaInfo.type === "image" && /* @__PURE__ */ jsx(
-                    Image,
-                    {
-                      src: displayUrl,
-                      alt: nodeData.label,
-                      width: 800,
-                      height: 600,
-                      className: "max-h-[calc(100vh-200px)] max-w-[calc(100vw-100px)] object-contain rounded-lg",
-                      unoptimized: true
-                    }
-                  ),
-                  mediaInfo.type === "video" && /* @__PURE__ */ jsx(
-                    "video",
-                    {
-                      src: displayUrl,
-                      controls: true,
-                      autoPlay: true,
-                      loop: true,
-                      className: "max-h-[calc(100vh-200px)] max-w-[calc(100vw-100px)] rounded-lg"
-                    }
-                  )
-                ]
-              }
-            ) : /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-center", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-lg", children: "No preview available" }),
-              /* @__PURE__ */ jsx("p", { className: "text-sm mt-2", children: "Generate content to see the preview" })
-            ] }),
-            hasMultipleImages && currentIndex > 0 && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-sm",
-                onClick: goToPrevious,
-                className: "absolute left-4 top-1/2 -translate-y-1/2 bg-card/80 hover:bg-card border border-border shadow-md",
-                title: "Previous image (\u2190)",
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
-              }
-            ),
-            hasMultipleImages && currentIndex < imageUrls.length - 1 && /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon-sm",
-                onClick: goToNext,
-                className: "absolute right-4 top-1/2 -translate-y-1/2 bg-card/80 hover:bg-card border border-border shadow-md",
-                title: "Next image (\u2192)",
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
-              }
-            ),
-            hasMultipleImages && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 bg-card/80 border border-border rounded-full px-3 py-1 text-xs text-muted-foreground shadow-md", children: [
-              currentIndex + 1,
-              " / ",
-              imageUrls.length
-            ] }),
-            displayUrl && mediaInfo.type === "image" && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 right-4 flex items-center gap-2 bg-card border border-border rounded-lg p-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[var(--border)]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(DollarSign, { className: "w-4 h-4 text-[var(--muted-foreground)]" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Cost Breakdown" })
+              ] }),
               /* @__PURE__ */ jsx(
-                Button,
+                "button",
                 {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: () => setZoomLevel((prev) => Math.max(prev - 0.25, 0.25)),
-                  title: "Zoom out (-)",
-                  children: /* @__PURE__ */ jsx(ZoomOut, { className: "w-4 h-4" })
+                  onClick: handleClose,
+                  className: "p-1 rounded hover:bg-[var(--secondary)] transition-colors",
+                  children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
                 }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground w-12 text-center", children: [
-                Math.round(zoomLevel * 100),
-                "%"
-              ] }),
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-4", children: breakdown.nodes.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-[var(--muted-foreground)] py-8", children: "No billable nodes in workflow" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "max-h-[40vh] overflow-y-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-left text-xs text-[var(--muted-foreground)] border-b border-[var(--border)]", children: [
+                  /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium", children: "Node" }),
+                  /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium", children: "Model" }),
+                  /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium", children: "Unit" }),
+                  /* @__PURE__ */ jsx("th", { className: "pb-2 font-medium text-right", children: "Cost" })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: breakdown.nodes.map((estimate) => /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: "border-b border-[var(--border)] last:border-0",
+                    children: [
+                      /* @__PURE__ */ jsx("td", { className: "py-2 truncate max-w-[120px]", title: estimate.nodeLabel, children: estimate.nodeLabel }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 text-[var(--muted-foreground)] font-mono text-xs", children: estimate.model }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 text-[var(--muted-foreground)] text-xs", children: estimate.unit }),
+                      /* @__PURE__ */ jsx("td", { className: "py-2 text-right font-mono", children: formatCost(estimate.cost) })
+                    ]
+                  },
+                  estimate.nodeId
+                )) })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-3 border-t border-[var(--border)] space-y-1.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[var(--muted-foreground)]", children: "Estimated Total" }),
+                  /* @__PURE__ */ jsx("span", { className: "font-mono font-medium", children: formatCost(breakdown.total) })
+                ] }),
+                hasActualCost && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[var(--muted-foreground)]", children: "Actual Cost" }),
+                    /* @__PURE__ */ jsx("span", { className: "font-mono font-medium text-green-500", children: formatCost(actualCost) })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[var(--muted-foreground)]", children: "Variance" }),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        className: `font-mono text-xs ${variance > 0 ? "text-red-400" : variance < 0 ? "text-green-400" : "text-[var(--muted-foreground)]"}`,
+                        children: [
+                          variance > 0 ? "+" : "",
+                          formatCost(variance)
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
+              ] })
+            ] }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var EMPTY_HISTORY = [];
+function formatRelativeTime(timestamp) {
+  const diff = Date.now() - timestamp;
+  const seconds = Math.floor(diff / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return "Just now";
+}
+function calculateFanPosition(index, _total) {
+  const verticalSpacing = 60;
+  const curveStrength = 0.15;
+  const xOffset = index * index * curveStrength;
+  const x = -28 + xOffset;
+  const y = -(index * verticalSpacing + 56);
+  return { x, y };
+}
+function FanItem({
+  item,
+  index,
+  total,
+  onDragStart
+}) {
+  const { x, y } = calculateFanPosition(index);
+  const delay = index * 30;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      draggable: true,
+      onDragStart: (e) => onDragStart(e, item),
+      className: "absolute w-14 h-14 rounded-lg overflow-hidden border-2 border-neutral-600 hover:border-blue-500 shadow-lg cursor-grab active:cursor-grabbing transition-colors duration-150 animate-fan-enter group",
+      style: {
+        "--fan-x": `${x}px`,
+        "--fan-y": `${y}px`,
+        animationDelay: `${delay}ms`,
+        zIndex: 10 - index
+      },
+      title: `${formatRelativeTime(item.timestamp)}
+${item.prompt?.substring(0, 50) || ""}...`,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: item.image,
+          alt: `History ${index + 1}`,
+          className: "w-full h-full object-cover pointer-events-none",
+          draggable: false
+        }
+      )
+    }
+  );
+}
+function HistorySidebar({
+  history,
+  onClear,
+  onClose,
+  onDragStart,
+  triggerRect
+}) {
+  const sidebarRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  const sidebarStyle = {
+    position: "fixed",
+    zIndex: 200
+  };
+  if (triggerRect) {
+    const left = Math.max(16, triggerRect.left - 140);
+    const bottom = window.innerHeight - triggerRect.top + 8;
+    sidebarStyle.left = `${left}px`;
+    sidebarStyle.bottom = `${bottom}px`;
+  } else {
+    sidebarStyle.right = "100px";
+    sidebarStyle.bottom = "100px";
+  }
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: sidebarRef,
+        className: "w-80 max-h-[420px] bg-neutral-800 border border-neutral-600 rounded-lg shadow-xl flex flex-col",
+        style: sidebarStyle,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-neutral-700 flex items-center justify-between shrink-0", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-sm text-neutral-200 font-medium", children: [
+              "All History (",
+              history.length,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(
-                Button,
+                "button",
                 {
-                  variant: "ghost",
-                  size: "icon-sm",
-                  onClick: () => setZoomLevel((prev) => Math.min(prev + 0.25, 4)),
-                  title: "Zoom in (+)",
-                  children: /* @__PURE__ */ jsx(ZoomIn, { className: "w-4 h-4" })
+                  onClick: onClear,
+                  className: "text-[10px] text-neutral-500 hover:text-red-400 transition-colors",
+                  title: "Clear all history",
+                  children: "Clear All"
                 }
               ),
               /* @__PURE__ */ jsx(
-                Button,
+                "button",
                 {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: () => {
-                    setZoomLevel(1);
-                    setPanOffset({ x: 0, y: 0 });
-                  },
-                  title: "Reset zoom (0)",
-                  children: "Reset"
+                  onClick: onClose,
+                  className: "w-5 h-5 rounded hover:bg-neutral-700 flex items-center justify-center text-neutral-400 hover:text-white transition-colors",
+                  title: "Close",
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-3 h-3",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+                    }
+                  )
                 }
               )
             ] })
-          ]
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-2 space-y-1.5", children: history.map((item, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              draggable: true,
+              onDragStart: (e) => onDragStart(e, item),
+              className: "flex gap-3 p-2 rounded-lg hover:bg-neutral-700/50 cursor-grab active:cursor-grabbing group transition-colors",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "w-14 h-14 rounded overflow-hidden shrink-0 border border-neutral-600 group-hover:border-blue-500 transition-colors", children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.image,
+                    alt: `History ${index + 1}`,
+                    className: "w-full h-full object-cover pointer-events-none",
+                    draggable: false
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col justify-center", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-[11px] text-neutral-300 truncate", children: item.prompt?.substring(0, 60) || "No prompt" }),
+                  /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-neutral-500 mt-0.5", children: [
+                    formatRelativeTime(item.timestamp),
+                    item.model ? ` \xB7 ${item.model}` : ""
+                  ] })
+                ] })
+              ]
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t border-neutral-700 bg-neutral-900/50 shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-500", children: "Drag images to canvas to create nodes" }) })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function GlobalImageHistory() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [showSidebar, setShowSidebar] = useState(false);
+  const drawerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const history = useWorkflowStore((state) => state.globalImageHistory ?? EMPTY_HISTORY);
+  const clearGlobalHistory = useWorkflowStore((state) => state.clearGlobalHistory);
+  const fanItems = history.slice(0, 10);
+  const hasOverflow = history.length > 10;
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (drawerRef.current && !drawerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen && !showSidebar) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen, showSidebar]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        if (showSidebar) {
+          setShowSidebar(false);
+        } else {
+          setIsOpen(false);
         }
-      ) })
-    ] })
+      }
+    };
+    if (isOpen || showSidebar) {
+      document.addEventListener("keydown", handleKeyDown);
+    }
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, showSidebar]);
+  const handleDragStart = useCallback((e, item) => {
+    e.dataTransfer.setData(
+      "application/history-image",
+      JSON.stringify({
+        image: item.image,
+        prompt: item.prompt,
+        timestamp: item.timestamp
+      })
+    );
+    e.dataTransfer.effectAllowed = "copy";
+    setTimeout(() => {
+      setIsOpen(false);
+      setShowSidebar(false);
+    }, 0);
+  }, []);
+  const handleShowAll = useCallback(() => {
+    setIsOpen(false);
+    setShowSidebar(true);
+  }, []);
+  const handleCloseSidebar = useCallback(() => {
+    setShowSidebar(false);
+  }, []);
+  const handleClear = useCallback(() => {
+    clearGlobalHistory();
+    setIsOpen(false);
+    setShowSidebar(false);
+  }, [clearGlobalHistory]);
+  if (history.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { ref: drawerRef, className: "absolute bottom-4 right-64 z-10", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        onClick: () => setIsOpen(!isOpen),
+        className: "relative w-8 h-8 rounded-lg flex items-center justify-center bg-neutral-800 hover:bg-neutral-700 border border-neutral-600 text-neutral-400 hover:text-white shadow-lg transition-colors",
+        title: `${history.length} image${history.length > 1 ? "s" : ""} in history`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1 bg-blue-500 rounded-full text-[10px] text-white flex items-center justify-center font-bold", children: history.length > 99 ? "99+" : history.length })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute bottom-full right-1/2 translate-x-1/2 mb-2",
+        style: { zIndex: 100 },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-0 h-0", children: fanItems.map((item, index) => /* @__PURE__ */ jsx(
+            FanItem,
+            {
+              item,
+              index,
+              total: fanItems.length,
+              onDragStart: handleDragStart
+            },
+            item.id
+          )) }),
+          hasOverflow && (() => {
+            const topItemPos = calculateFanPosition(fanItems.length - 1, fanItems.length);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleShowAll,
+                className: "absolute animate-fan-enter bg-neutral-800 hover:bg-neutral-700 border border-neutral-600 rounded-lg px-2 py-1 text-[10px] text-neutral-300 hover:text-white shadow-lg transition-colors whitespace-nowrap",
+                style: {
+                  "--fan-x": `${topItemPos.x}px`,
+                  "--fan-y": `${topItemPos.y - 60}px`,
+                  animationDelay: `${fanItems.length * 30}ms`
+                },
+                children: [
+                  "+",
+                  history.length - 10,
+                  " more"
+                ]
+              }
+            );
+          })()
+        ]
+      }
+    ),
+    showSidebar && /* @__PURE__ */ jsx(
+      HistorySidebar,
+      {
+        history,
+        onClear: handleClear,
+        onClose: handleCloseSidebar,
+        onDragStart: handleDragStart,
+        triggerRect: triggerRef.current?.getBoundingClientRect() || null
+      }
+    )
   ] });
 }
+var NODE_GAP = 32;
+var EST_NODE_WIDTH = 280;
+var EST_NODE_HEIGHT = 200;
+function MultiSelectToolbarComponent({ onDownloadAsZip }) {
+  const { nodes, selectedNodeIds, onNodesChange, createGroup, deleteGroup, groups } = useWorkflowStore();
+  const reactFlow = useReactFlow();
+  const selectedNodes = useMemo(
+    () => nodes.filter((n) => selectedNodeIds.includes(n.id)),
+    [nodes, selectedNodeIds]
+  );
+  const selectedGroup = useMemo(() => {
+    if (selectedNodes.length < 2) return null;
+    return groups.find((g) => selectedNodeIds.every((id) => g.nodeIds.includes(id))) ?? null;
+  }, [groups, selectedNodeIds, selectedNodes.length]);
+  const toolbarPosition = useMemo(() => {
+    if (selectedNodes.length < 2) return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    for (const node of selectedNodes) {
+      const x = node.position.x;
+      const y = node.position.y;
+      const w = node.measured?.width ?? EST_NODE_WIDTH;
+      if (x < minX) minX = x;
+      if (y < minY) minY = y;
+      if (x + w > maxX) maxX = x + w;
+    }
+    const centerX = (minX + maxX) / 2;
+    const topY = minY - 48;
+    return reactFlow.flowToScreenPosition({ x: centerX, y: topY });
+  }, [selectedNodes, reactFlow]);
+  const stackHorizontal = useCallback(() => {
+    if (selectedNodes.length < 2) return;
+    const sorted = [...selectedNodes].sort((a, b) => a.position.x - b.position.x);
+    const baseY = sorted[0].position.y;
+    const changes = sorted.map((node, i) => ({
+      type: "position",
+      id: node.id,
+      position: {
+        x: sorted[0].position.x + i * (EST_NODE_WIDTH + NODE_GAP),
+        y: baseY
+      }
+    }));
+    onNodesChange(changes);
+  }, [selectedNodes, onNodesChange]);
+  const stackVertical = useCallback(() => {
+    if (selectedNodes.length < 2) return;
+    const sorted = [...selectedNodes].sort((a, b) => a.position.y - b.position.y);
+    const baseX = sorted[0].position.x;
+    const changes = sorted.map((node, i) => ({
+      type: "position",
+      id: node.id,
+      position: {
+        x: baseX,
+        y: sorted[0].position.y + i * (EST_NODE_HEIGHT + NODE_GAP)
+      }
+    }));
+    onNodesChange(changes);
+  }, [selectedNodes, onNodesChange]);
+  const arrangeGrid = useCallback(() => {
+    if (selectedNodes.length < 2) return;
+    const cols = Math.ceil(Math.sqrt(selectedNodes.length));
+    const sorted = [...selectedNodes].sort((a, b) => {
+      const rowDiff = Math.floor(a.position.y / EST_NODE_HEIGHT) - Math.floor(b.position.y / EST_NODE_HEIGHT);
+      if (rowDiff !== 0) return rowDiff;
+      return a.position.x - b.position.x;
+    });
+    const baseX = sorted[0].position.x;
+    const baseY = sorted[0].position.y;
+    const changes = sorted.map((node, i) => ({
+      type: "position",
+      id: node.id,
+      position: {
+        x: baseX + i % cols * (EST_NODE_WIDTH + NODE_GAP),
+        y: baseY + Math.floor(i / cols) * (EST_NODE_HEIGHT + NODE_GAP)
+      }
+    }));
+    onNodesChange(changes);
+  }, [selectedNodes, onNodesChange]);
+  const handleGroup = useCallback(() => {
+    if (selectedNodeIds.length < 2) return;
+    createGroup(selectedNodeIds);
+  }, [selectedNodeIds, createGroup]);
+  const handleUngroup = useCallback(() => {
+    if (!selectedGroup) return;
+    deleteGroup(selectedGroup.id);
+  }, [selectedGroup, deleteGroup]);
+  if (selectedNodes.length < 2 || !toolbarPosition) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fixed z-30 flex items-center gap-1 bg-[var(--background)] border border-[var(--border)] rounded-lg shadow-lg px-1.5 py-1",
+      style: {
+        left: toolbarPosition.x,
+        top: toolbarPosition.y,
+        transform: "translateX(-50%)"
+      },
+      onMouseDown: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "px-1.5 text-xs font-medium text-[var(--muted-foreground)]", children: selectedNodeIds.length }),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--border)]" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: stackHorizontal,
+            title: "Stack horizontal",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: /* @__PURE__ */ jsx(AlignHorizontalSpaceAround, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: stackVertical,
+            title: "Stack vertical",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: /* @__PURE__ */ jsx(AlignVerticalSpaceAround, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: arrangeGrid,
+            title: "Arrange as grid",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: /* @__PURE__ */ jsx(Grid3X3, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--border)]" }),
+        selectedGroup ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleUngroup,
+            title: "Ungroup",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: /* @__PURE__ */ jsx(Ungroup, { className: "h-3.5 w-3.5" })
+          }
+        ) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleGroup,
+            title: "Group",
+            className: "flex h-7 w-7 items-center justify-center rounded text-[var(--muted-foreground)] transition hover:bg-[var(--secondary)] hover:text-[var(--foreground)]",
+            children: /* @__PURE__ */ jsx(Group, { className: "h-3.5 w-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+var MultiSelectToolbar = memo(MultiSelectToolbarComponent);
+var typeStyles = {
+  info: "bg-neutral-800 border-neutral-600 text-neutral-100",
+  success: "bg-green-900 border-green-700 text-green-100",
+  warning: "bg-orange-900 border-orange-600 text-orange-100",
+  error: "bg-red-900 border-red-700 text-red-100"
+};
+var typeIcons = {
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: XCircle
+};
+function NotificationItem({
+  id,
+  type,
+  title,
+  message
+}) {
+  const removeNotification = useUIStore((state) => state.removeNotification);
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    const textToCopy = message ? `${title}
+
+${message}` : title;
+    await navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [title, message]);
+  const Icon = typeIcons[type];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `flex flex-col rounded-lg border shadow-xl animate-in fade-in slide-in-from-top-4 duration-300 max-w-md ${typeStyles[type]}`,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 shrink-0" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: title }),
+          message && /* @__PURE__ */ jsx("p", { className: "text-xs opacity-80 mt-0.5 break-words", children: message })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleCopy,
+            className: "p-1 rounded hover:bg-white/10 transition-colors shrink-0",
+            title: "Copy message",
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => removeNotification(id),
+            className: "p-1 rounded hover:bg-white/10 transition-colors shrink-0",
+            title: "Dismiss",
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    }
+  );
+}
+function NotificationToast() {
+  const notifications = useUIStore((state) => state.notifications);
+  if (notifications.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "fixed top-6 right-6 z-[200] flex flex-col gap-2", children: notifications.map((notification) => /* @__PURE__ */ jsx(
+    NotificationItem,
+    {
+      id: notification.id,
+      type: notification.type,
+      title: notification.title,
+      message: notification.message
+    },
+    notification.id
+  )) });
+}
 var DEFAULT_NODE_COLOR = "#6b7280";
 function supportsImageInput(schema) {
   if (!schema) return true;
@@ -1119,7 +1954,12 @@ function getEdgeDataType(edge, nodeMap) {
   const sourceHandle = nodeDef.outputs.find((h) => h.id === edge.sourceHandle);
   return sourceHandle?.type ?? null;
 }
-function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
+var edgeTypesMap = {
+  default: EditableEdge,
+  bezier: EditableEdge,
+  reference: ReferenceEdge
+};
+function WorkflowCanvas({ nodeTypes: nodeTypesProp, onDownloadAsZip } = {}) {
   const {
     nodes,
     edges,
@@ -1140,11 +1980,13 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
   } = useWorkflowStore();
   const {
     selectNode,
+    selectEdge,
     setHighlightedNodeIds,
     highlightedNodeIds,
     showPalette,
     togglePalette,
-    openModal
+    openModal,
+    openConnectionDropMenu
   } = useUIStore();
   const reactFlow = useReactFlow();
   const { edgeStyle, showMinimap } = useSettingsStore();
@@ -1157,8 +1999,28 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
   const [draggingNodeId, setDraggingNodeId] = useState(null);
   const hideTimeoutRef = useRef(null);
   const MINIMAP_HIDE_DELAY = 1500;
+  const {
+    isOpen: isContextMenuOpen,
+    position: contextMenuPosition,
+    menuItems: contextMenuItems,
+    openNodeMenu,
+    openEdgeMenu,
+    openPaneMenu,
+    openSelectionMenu,
+    close: closeContextMenu
+  } = useContextMenu();
   const openShortcutHelp = useCallback(() => openModal("shortcutHelp"), [openModal]);
   const openNodeSearch = useCallback(() => openModal("nodeSearch"), [openModal]);
+  const deleteSelectedElements = useCallback(() => {
+    const nodesToDelete = nodes.filter((n) => selectedNodeIds.includes(n.id));
+    const edgesToDelete = edges.filter((e) => e.selected);
+    if (nodesToDelete.length > 0) {
+      onNodesChange(nodesToDelete.map((n) => ({ type: "remove", id: n.id })));
+    }
+    if (edgesToDelete.length > 0) {
+      onEdgesChange(edgesToDelete.map((e) => ({ type: "remove", id: e.id })));
+    }
+  }, [nodes, edges, selectedNodeIds, onNodesChange, onEdgesChange]);
   useCanvasKeyboardShortcuts({
     selectedNodeIds,
     groups,
@@ -1171,7 +2033,8 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
     togglePalette,
     fitView: reactFlow.fitView,
     openShortcutHelp,
-    openNodeSearch
+    openNodeSearch,
+    deleteSelectedElements
   });
   useEffect(() => {
     if (selectedNodeIds.length === 0) {
@@ -1209,11 +2072,13 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
       const dataType = getEdgeDataType(edge, nodeMap);
       const typeClass = dataType ? `edge-${dataType}` : "";
       const isDisabledTarget = isEdgeTargetingDisabledInput(edge);
+      const enrichedData = { ...edge.data, dataType };
       if (!isRunning && hasActiveNodeExecutions) {
         const isActiveEdge = activeNodeExecutions.has(edge.source) || activeNodeExecutions.has(edge.target);
         if (isActiveEdge && !isDisabledTarget) {
           return {
             ...edge,
+            data: enrichedData,
             animated: false,
             className: `${typeClass} executing`.trim()
           };
@@ -1225,6 +2090,7 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
         if (isDisabledTarget) {
           return {
             ...edge,
+            data: enrichedData,
             animated: false,
             className: `${typeClass} edge-disabled`.trim()
           };
@@ -1232,12 +2098,14 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
         if (!isInExecutionScope) {
           return {
             ...edge,
+            data: enrichedData,
             animated: false,
             className: typeClass
           };
         }
         return {
           ...edge,
+          data: enrichedData,
           animated: false,
           className: `${typeClass} ${isExecutingEdge ? "executing" : "active-pipe"}`.trim()
         };
@@ -1245,6 +2113,7 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
       if (isDisabledTarget) {
         return {
           ...edge,
+          data: enrichedData,
           className: `${typeClass} edge-disabled`.trim()
         };
       }
@@ -1252,11 +2121,13 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
         const isConnected = highlightedSet.has(edge.source) && highlightedSet.has(edge.target);
         return {
           ...edge,
+          data: enrichedData,
           className: `${typeClass} ${isConnected ? "highlighted" : "dimmed"}`.trim()
         };
       }
       return {
         ...edge,
+        data: enrichedData,
         className: typeClass
       };
     });
@@ -1279,8 +2150,15 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
   );
   const handlePaneClick = useCallback(() => {
     selectNode(null);
+    selectEdge(null);
     setSelectedNodeIds([]);
-  }, [selectNode, setSelectedNodeIds]);
+  }, [selectNode, selectEdge, setSelectedNodeIds]);
+  const handleEdgeClick = useCallback(
+    (_event, edge) => {
+      selectEdge(edge.id);
+    },
+    [selectEdge]
+  );
   const handleSelectionChange = useCallback(
     ({ nodes: selectedNodes }) => {
       setSelectedNodeIds(selectedNodes.map((n) => n.id));
@@ -1290,30 +2168,56 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
   const handleNodeContextMenu = useCallback(
     (event, node) => {
       event.preventDefault();
+      if (selectedNodeIds.length > 1 && selectedNodeIds.includes(node.id)) {
+        openSelectionMenu(selectedNodeIds, event.clientX, event.clientY);
+      } else {
+        openNodeMenu(node.id, event.clientX, event.clientY);
+      }
     },
-    [selectedNodeIds]
+    [selectedNodeIds, openNodeMenu, openSelectionMenu]
   );
   const handleEdgeContextMenu = useCallback(
     (event, edge) => {
       event.preventDefault();
+      openEdgeMenu(edge.id, event.clientX, event.clientY);
     },
-    []
+    [openEdgeMenu]
   );
   const handlePaneContextMenu = useCallback(
     (event) => {
       event.preventDefault();
+      openPaneMenu(event.clientX, event.clientY);
     },
-    []
+    [openPaneMenu]
   );
   const handleSelectionContextMenu = useCallback(
     (event, selectedNodes) => {
       event.preventDefault();
+      const nodeIds = selectedNodes.map((n) => n.id);
+      openSelectionMenu(nodeIds, event.clientX, event.clientY);
     },
-    []
+    [openSelectionMenu]
   );
   const handleDrop = useCallback(
     (event) => {
       event.preventDefault();
+      const historyData = event.dataTransfer.getData("application/history-image");
+      if (historyData) {
+        try {
+          const parsed = JSON.parse(historyData);
+          const position2 = reactFlow.screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY
+          });
+          const nodeId = addNode("imageInput", position2);
+          if (nodeId && parsed.image) {
+            const { updateNodeData } = useWorkflowStore.getState();
+            updateNodeData(nodeId, { outputImage: parsed.image });
+          }
+        } catch {
+        }
+        return;
+      }
       const nodeType = event.dataTransfer.getData("nodeType");
       if (!nodeType) return;
       const position = reactFlow.screenToFlowPosition({
@@ -1345,7 +2249,27 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
       if (!sourceNodeId || !sourceHandleId) return;
       const target = event.target;
       const nodeElement = target.closest(".react-flow__node");
-      if (!nodeElement) return;
+      if (!nodeElement) {
+        const sourceNode = nodes.find((n) => n.id === sourceNodeId);
+        if (!sourceNode) return;
+        const sourceHandleType = getHandleType(
+          sourceNode.type,
+          sourceHandleId,
+          "source"
+        );
+        if (!sourceHandleType) return;
+        const clientX = "clientX" in event ? event.clientX : event.touches?.[0]?.clientX ?? 0;
+        const clientY = "clientY" in event ? event.clientY : event.touches?.[0]?.clientY ?? 0;
+        const flowPosition = reactFlow.screenToFlowPosition({ x: clientX, y: clientY });
+        openConnectionDropMenu({
+          position: flowPosition,
+          screenPosition: { x: clientX, y: clientY },
+          sourceNodeId,
+          sourceHandleId,
+          sourceHandleType
+        });
+        return;
+      }
       const targetNodeId = nodeElement.getAttribute("data-id");
       if (!targetNodeId || targetNodeId === sourceNodeId) return;
       const droppedOnHandle = target.closest(".react-flow__handle");
@@ -1359,7 +2283,7 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
         targetHandle: compatibleHandle
       });
     },
-    [findCompatibleHandle, onConnect]
+    [findCompatibleHandle, onConnect, nodes, reactFlow, openConnectionDropMenu]
   );
   const checkValidConnection = useCallback(
     (connection) => {
@@ -1427,11 +2351,16 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
         onNodeDragStart: handleNodeDragStart,
         onNodeDrag: handleNodeDrag,
         onNodeDragStop: handleNodeDragStop,
+        onEdgeClick: handleEdgeClick,
         isValidConnection: checkValidConnection,
         nodeTypes: nodeTypesProp ?? nodeTypes,
+        edgeTypes: edgeTypesMap,
         fitView: true,
         snapToGrid: true,
         snapGrid: [16, 16],
+        minZoom: 0.1,
+        maxZoom: 4,
+        nodeDragThreshold: 5,
         connectionMode: ConnectionMode.Loose,
         selectionMode: SelectionMode.Partial,
         selectionOnDrag: true,
@@ -1474,9 +2403,24 @@ function WorkflowCanvas({ nodeTypes: nodeTypesProp } = {}) {
         ]
       }
     ),
+    isContextMenuOpen && /* @__PURE__ */ jsx(
+      ContextMenu,
+      {
+        x: contextMenuPosition.x,
+        y: contextMenuPosition.y,
+        items: contextMenuItems,
+        onClose: closeContextMenu
+      }
+    ),
+    /* @__PURE__ */ jsx(EdgeToolbar, {}),
+    /* @__PURE__ */ jsx(MultiSelectToolbar, { onDownloadAsZip }),
     /* @__PURE__ */ jsx(NodeDetailModal, {}),
     /* @__PURE__ */ jsx(ShortcutHelpModal, {}),
-    /* @__PURE__ */ jsx(NodeSearch, {})
+    /* @__PURE__ */ jsx(NodeSearch, {}),
+    /* @__PURE__ */ jsx(ConnectionDropMenu, {}),
+    /* @__PURE__ */ jsx(CostModal, {}),
+    /* @__PURE__ */ jsx(NotificationToast, {}),
+    /* @__PURE__ */ jsx(GlobalImageHistory, {})
   ] });
 }
 function PauseEdgeComponent({
@@ -1530,4 +2474,4 @@ function PauseEdgeComponent({
 }
 var PauseEdge = memo(PauseEdgeComponent);
 
-export { DEFAULT_GROUP_COLORS, GROUP_COLORS, GroupOverlay, HelperLines, NodeSearch, PauseEdge, ShortcutHelpModal, WorkflowCanvas };
+export { ConnectionDropMenu, DEFAULT_GROUP_COLORS, EdgeToolbar, EditableEdge, GROUP_COLORS, GlobalImageHistory, GroupOverlay, HelperLines, NodeSearch, NotificationToast, PauseEdge, ReferenceEdge, ShortcutHelpModal, WorkflowCanvas };