@bian-womp/spark-workbench 0.2.84 → 0.2.86

package/lib/esm/index.js

@@ -5,7 +5,7 @@ import { Position, Handle, NodeResizer, useReactFlow, ReactFlowProvider, ReactFl
 import React, { useCallback, useState, useRef, useEffect, useMemo, createContext, useContext, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
+import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadIcon, UploadIcon, ImageIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -157,9 +157,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const defNodeIds = new Set(this._def.nodes.map((n) => n.nodeId));
         const defEdgeIds = new Set(this._def.edges.map((e) => e.id));
         const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
+        const filteredSizes = Object.fromEntries(Object.entries(this.sizes).filter(([id]) => defNodeIds.has(id)));
         const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
         const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
         this.positions = filteredPositions;
+        this.sizes = filteredSizes;
         this.selection = { nodes: filteredNodes, edges: filteredEdges };
         this.emit("graphChanged", { def: this._def });
         this.refreshValidation();
@@ -216,8 +218,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
             params: node.params,
             resolvedHandles: node.resolvedHandles,
         });
-        if (node.position)
-            this.positions[id] = node.position;
+        if (options?.position)
+            this.positions[id] = options.position;
+        if (options?.size)
+            this.sizes[id] = options.size;
         this.emit("graphChanged", {
             def: this._def,
             change: {
@@ -235,6 +239,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this._def.nodes = this._def.nodes.filter((n) => n.nodeId !== nodeId);
         this._def.edges = this._def.edges.filter((e) => e.source.nodeId !== nodeId && e.target.nodeId !== nodeId);
         delete this.positions[nodeId];
+        delete this.sizes[nodeId];
         delete this.nodeNames[nodeId];
         this.emit("graphChanged", {
             def: this._def,
@@ -301,14 +306,16 @@ class InMemoryWorkbench extends AbstractWorkbench {
         return { ...this.positions };
     }
     setSizes(sizes, options) {
+        const updatedSizes = { ...this.sizes };
         for (const [nodeId, size] of Object.entries(sizes)) {
             if (size) {
-                this.sizes = { ...this.sizes, [nodeId]: size };
+                updatedSizes[nodeId] = size;
             }
             else {
-                this.sizes = lod.omit(this.sizes, nodeId);
+                delete updatedSizes[nodeId];
             }
         }
+        this.sizes = updatedSizes;
         this.emit("graphUiChanged", {
             change: { type: "resizeNodes" },
             ...options,
@@ -466,6 +473,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         if (selection.nodes.length === 0)
             return null;
         const positions = this.getPositions();
+        const sizes = this.getSizes();
         const selectedNodeSet = new Set(selection.nodes);
         // Collect nodes to copy
         const nodesToCopy = this.def.nodes.filter((n) => selectedNodeSet.has(n.nodeId));
@@ -477,15 +485,16 @@ class InMemoryWorkbench extends AbstractWorkbench {
         let maxX = -Infinity;
         let maxY = -Infinity;
         nodesToCopy.forEach((node) => {
-            const pos = positions[node.nodeId] || { x: 0, y: 0 };
-            const size = getNodeSize?.(node.nodeId, node.typeId) || {
-                width: 200,
-                height: 100,
-            };
-            minX = Math.min(minX, pos.x);
-            minY = Math.min(minY, pos.y);
-            maxX = Math.max(maxX, pos.x + size.width);
-            maxY = Math.max(maxY, pos.y + size.height);
+            const pos = positions[node.nodeId];
+            const size = sizes[node.nodeId] || getNodeSize?.(node.nodeId, node.typeId);
+            if (pos) {
+                minX = Math.min(minX, pos.x);
+                minY = Math.min(minY, pos.y);
+                if (size) {
+                    maxX = Math.max(maxX, pos.x + size.width);
+                    maxY = Math.max(maxY, pos.y + size.height);
+                }
+            }
         });
         const bounds = { minX, minY, maxX, maxY };
         const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -495,7 +504,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const allInputs = runner.getInputs(this.def);
         const selectedEdgeSet = new Set(selection.edges);
         const copiedNodes = nodesToCopy.map((node) => {
-            const pos = positions[node.nodeId] || { x: 0, y: 0 };
+            const pos = positions[node.nodeId];
+            const size = sizes[node.nodeId];
             // Get all inbound edges for this node
             const inboundEdges = this.def.edges.filter((e) => e.target.nodeId === node.nodeId);
             // Build set of handles that have inbound edges
@@ -512,10 +522,13 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 typeId: node.typeId,
                 params: node.params,
                 resolvedHandles: node.resolvedHandles,
-                position: {
-                    x: pos.x - centerX,
-                    y: pos.y - centerY,
-                },
+                position: pos
+                    ? {
+                        x: pos.x - centerX,
+                        y: pos.y - centerY,
+                    }
+                    : undefined,
+                size,
                 inputs: inputsToCopy,
                 originalNodeId: node.nodeId,
             };
@@ -550,6 +563,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         if (selection.nodes.length === 0)
             return [];
         const positions = this.getPositions();
+        const sizes = this.getSizes();
         const newNodes = [];
         // Get inputs without bindings (literal values only)
         const allInputs = runner.getInputs(this.def) || {};
@@ -558,7 +572,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
             const n = this.def.nodes.find((n) => n.nodeId === nodeId);
             if (!n)
                 continue;
-            const pos = positions[nodeId] || { x: 0, y: 0 };
+            const pos = positions[nodeId];
+            const size = sizes[nodeId];
             const inboundHandles = new Set(this.def.edges
                 .filter((e) => e.target.nodeId === nodeId)
                 .map((e) => e.target.handle));
@@ -566,10 +581,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
             const newNodeId = this.addNode({
                 typeId: n.typeId,
                 params: n.params,
-                position: { x: pos.x + 24, y: pos.y + 24 },
                 resolvedHandles: n.resolvedHandles,
             }, {
                 inputs: inputsWithoutBindings,
+                position: pos ? { x: pos.x + 24, y: pos.y + 24 } : undefined,
+                size,
                 copyOutputsFrom: nodeId,
                 dry: true,
             });
@@ -616,8 +632,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 const coerced = await coerceIfNeeded(outputTypeId, inType, unwrap(outputValue));
                 newNodeId = this.addNode({
                     typeId: singleTarget.nodeTypeId,
+                }, {
+                    inputs: { [singleTarget.inputHandle]: coerced },
                     position: { x: pos.x + 180, y: pos.y },
-                }, { inputs: { [singleTarget.inputHandle]: coerced } });
+                });
             }
             else if (isArray && arrTarget) {
                 const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
@@ -625,8 +643,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 const coerced = await coerceIfNeeded(outputTypeId, inType, unwrap(outputValue));
                 newNodeId = this.addNode({
                     typeId: arrTarget.nodeTypeId,
+                }, {
                     position: { x: pos.x + 180, y: pos.y },
-                }, { inputs: { [arrTarget.inputHandle]: coerced } });
+                    inputs: { [arrTarget.inputHandle]: coerced },
+                });
             }
             else if (isArray && elemTarget) {
                 const nodeDesc = registry.nodes.get(elemTarget.nodeTypeId);
@@ -642,8 +662,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
                     const row = Math.floor(idx / COLS);
                     newNodeId = this.addNode({
                         typeId: elemTarget.nodeTypeId,
+                    }, {
                         position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
-                    }, { inputs: { [elemTarget.inputHandle]: coercedItems[idx] } });
+                        inputs: { [elemTarget.inputHandle]: coercedItems[idx] },
+                    });
                 }
             }
             if (newNodeId) {
@@ -665,7 +687,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const n = this.def.nodes.find((n) => n.nodeId === nodeId);
         if (!n)
             return undefined;
-        const pos = this.getPositions()[nodeId] || { x: 0, y: 0 };
+        const pos = this.getPositions()[nodeId];
+        const size = this.getSizes()[nodeId];
         // Get inputs without bindings (literal values only)
         const allInputs = runner.getInputs(this.def)[nodeId] || {};
         const inboundHandles = new Set(this.def.edges
@@ -675,10 +698,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const newNodeId = this.addNode({
             typeId: n.typeId,
             params: n.params,
-            position: { x: pos.x + 24, y: pos.y + 24 },
             resolvedHandles: n.resolvedHandles,
         }, {
             inputs: inputsWithoutBindings,
+            position: pos ? { x: pos.x + 24, y: pos.y + 24 } : undefined,
+            size,
             copyOutputsFrom: nodeId,
             dry: true,
         });
@@ -696,17 +720,19 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const n = this.def.nodes.find((n) => n.nodeId === nodeId);
         if (!n)
             return undefined;
-        const pos = this.getPositions()[nodeId] || { x: 0, y: 0 };
+        const pos = this.getPositions()[nodeId];
+        const size = this.getSizes()[nodeId];
         // Get all inputs (including those with bindings, since edges will be duplicated)
         const inputs = runner.getInputs(this.def)[nodeId] || {};
         // Add the duplicated node
         const newNodeId = this.addNode({
             typeId: n.typeId,
             params: n.params,
-            position: { x: pos.x + 24, y: pos.y + 24 },
             resolvedHandles: n.resolvedHandles,
         }, {
             inputs,
+            position: pos ? { x: pos.x + 24, y: pos.y + 24 } : undefined,
+            size,
             copyOutputsFrom: nodeId,
             dry: true,
         });
@@ -740,12 +766,15 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 typeId: nodeData.typeId,
                 params: nodeData.params,
                 resolvedHandles: nodeData.resolvedHandles,
-                position: {
-                    x: nodeData.position.x + center.x,
-                    y: nodeData.position.y + center.y,
-                },
             }, {
                 inputs: nodeData.inputs,
+                position: nodeData.position
+                    ? {
+                        x: nodeData.position.x + center.x,
+                        y: nodeData.position.y + center.y,
+                    }
+                    : undefined,
+                size: nodeData.size,
                 copyOutputsFrom: nodeData.originalNodeId,
                 dry: true,
             });
@@ -4422,7 +4451,7 @@ function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInv
     return (jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
             maxHeight: NODE_HEADER_HEIGHT_PX,
             minHeight: NODE_HEADER_HEIGHT_PX,
-        }, children: [isEditing ? (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), className: "flex-1 h-full text-sm bg-transparent border border-blue-500 rounded px-1 outline-none wb-nodrag", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` } })) : (jsx("strong", { className: `flex-1 h-full text-sm select-none truncate ${typeId ? "cursor-text" : ""}`, style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, onDoubleClick: handleDoubleClick, title: typeId ? "Double-click to rename" : undefined, children: displayName })), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", { className: "w-4 h-4 border border-gray-400 rounded text-[10px] leading-3 flex items-center justify-center", title: "Invalidate and re-run", onClick: (e) => {
+        }, children: [isEditing ? (jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), className: "flex-1 h-full text-sm bg-transparent border border-blue-500 rounded px-1 outline-none wb-nodrag", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` } })) : (jsx("strong", { className: `react-flow__node-title flex-1 h-full text-sm select-none truncate ${typeId ? "cursor-text" : ""}`, style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, onDoubleClick: handleDoubleClick, title: typeId ? "Double-click to rename" : undefined, children: displayName })), jsxs("div", { className: "flex items-center gap-1", children: [jsx("button", { className: "w-4 h-4 border border-gray-400 rounded text-[10px] leading-3 flex items-center justify-center", title: "Invalidate and re-run", onClick: (e) => {
                             e.stopPropagation();
                             handleInvalidate();
                         }, children: jsx(ArrowClockwiseIcon, { size: 10 }) }), right, validation.issues && validation.issues.length > 0 && (jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
@@ -4433,7 +4462,7 @@ function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInv
 }
 
 function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
-    return (jsxs(Fragment, { children: [jsx(Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsx("div", { className: labelClassName + (kind === "input" ? " left-2" : " right-2"), style: {
+    return (jsxs(Fragment, { children: [jsx(Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsx("div", { className: `${labelClassName} ${kind === "input" ? " left-2" : " right-2"}`, style: {
                     top: (y ?? 0) - 8,
                     ...(kind === "input"
                         ? { right: "50%" }
@@ -4545,7 +4574,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                             isDefault: false,
                         };
                     })();
-                    return (jsxs("span", { className: `flex items-center gap-1 w-full ${valueText?.isDefault ? "text-gray-400" : ""}`, children: [kind === "output" ? (jsxs(Fragment, { children: [valueText !== undefined ? (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text })) : (jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsx("span", { className: `truncate pr-1 ${valueText.isDefault ? "text-gray-400" : "opacity-60"}`, style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                    return (jsxs("span", { className: `flex items-center gap-1 w-full ${valueText?.isDefault ? "text-gray-400" : ""}`, children: [kind === "output" ? (jsxs(Fragment, { children: [valueText !== undefined ? (jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text })) : (jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxs(Fragment, { children: [jsx("span", { className: "truncate shrink-0", "data-handle-id": handleId, style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsx("span", { className: `truncate pr-1 ${valueText.isDefault ? "text-gray-400" : "opacity-60"}`, style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text }))] })), hasAny && (jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -5158,7 +5187,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         setNodeMenuOpen(false);
         setSelectionMenuOpen(false);
     };
-    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId, position: opts.position }, { inputs: opts.inputs, commit: true }), [wb]);
+    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId }, { inputs: opts.inputs, position: opts.position, commit: true }), [wb]);
     const onCloseMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
@@ -5459,6 +5488,601 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                             (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 
+/**
+ * Flow thumbnail capture utility
+ * Captures React Flow canvas as SVG image
+ */
+// ============================================================================
+// Utility Functions
+// ============================================================================
+/**
+ * Parses CSS transform string to extract translate and scale values
+ */
+function parseViewportTransform(transform) {
+    let translateX = 0;
+    let translateY = 0;
+    let scale = 1;
+    if (transform && transform !== "none") {
+        // Try translate() scale() format first
+        const translateMatch = transform.match(/translate\(([^,]+)px,\s*([^)]+)px\)/);
+        const scaleMatch = transform.match(/scale\(([^)]+)\)/);
+        if (translateMatch) {
+            translateX = parseFloat(translateMatch[1]);
+            translateY = parseFloat(translateMatch[2]);
+        }
+        if (scaleMatch) {
+            scale = parseFloat(scaleMatch[1]);
+        }
+        // Fallback to matrix format
+        if (!translateMatch) {
+            const matrixMatch = transform.match(/matrix\(([^)]+)\)/);
+            if (matrixMatch) {
+                const values = matrixMatch[1]
+                    .split(",")
+                    .map((v) => parseFloat(v.trim()));
+                if (values.length >= 6) {
+                    scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
+                    translateX = values[4];
+                    translateY = values[5];
+                }
+            }
+        }
+    }
+    return { translateX, translateY, scale };
+}
+/**
+ * Calculates visible viewport bounds in flow coordinates
+ */
+function calculateVisibleBounds(viewportRect, transform) {
+    const { translateX, translateY, scale } = transform;
+    // Guard against division by zero
+    if (scale === 0) {
+        console.warn("[flowThumbnail] Viewport scale is 0, using default bounds");
+        return {
+            minX: -translateX,
+            minY: -translateY,
+            maxX: viewportRect.width - translateX,
+            maxY: viewportRect.height - translateY,
+        };
+    }
+    // Screen to flow: (screenX - translateX) / scale
+    return {
+        minX: (0 - translateX) / scale,
+        minY: (0 - translateY) / scale,
+        maxX: (viewportRect.width - translateX) / scale,
+        maxY: (viewportRect.height - translateY) / scale,
+    };
+}
+/**
+ * Parses border radius string (px or rem) to pixels
+ */
+function parseBorderRadius(borderRadiusStr) {
+    if (borderRadiusStr === "0px") {
+        return 8; // default
+    }
+    const match = borderRadiusStr.match(/([\d.]+)(px|rem)/);
+    if (match) {
+        const value = parseFloat(match[1]);
+        const unit = match[2];
+        // Convert rem to px (assuming 16px base) or use px directly
+        return unit === "rem" ? value * 16 : value;
+    }
+    // Try direct parseFloat as fallback
+    const parsed = parseFloat(borderRadiusStr);
+    return isNaN(parsed) ? 8 : parsed;
+}
+/**
+ * Extracts stroke color from element, with fallback
+ */
+function extractStrokeColor(element) {
+    if (element instanceof SVGPathElement) {
+        return (element.getAttribute("stroke") ||
+            window.getComputedStyle(element).stroke ||
+            "#b1b1b7");
+    }
+    const style = window.getComputedStyle(element);
+    return (style.borderColor || style.borderTopColor || "#6b7280" // gray-500 default
+    );
+}
+/**
+ * Extracts stroke/border width from element, ensuring minimum value
+ */
+function extractStrokeWidth(element, minWidth = 1) {
+    if (element instanceof SVGPathElement) {
+        const width = parseFloat(element.getAttribute("stroke-width") || "0") ||
+            parseFloat(window.getComputedStyle(element).strokeWidth || "2");
+        return width > 0 ? width : minWidth;
+    }
+    const style = window.getComputedStyle(element);
+    const width = parseFloat(style.borderWidth || style.borderTopWidth || "0");
+    return width > 0 ? width : minWidth;
+}
+/**
+ * Checks if a rectangle intersects with visible bounds
+ */
+function isRectVisible(x, y, width, height, bounds) {
+    return (x + width >= bounds.minX &&
+        x <= bounds.maxX &&
+        y + height >= bounds.minY &&
+        y <= bounds.maxY);
+}
+/**
+ * Parses path data to get bounding box
+ * Handles M (moveTo), L (lineTo), C (cubic Bezier), Q (quadratic Bezier), and H/V (horizontal/vertical) commands
+ */
+function getPathBounds(pathData) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    // Match coordinates from various path commands: M, L, C, Q, T, S, H, V
+    // Pattern matches: command letter followed by coordinate pairs
+    const coordPattern = /[MLCQTSHV](-?\d+\.?\d*),(-?\d+\.?\d*)/g;
+    const coords = pathData.match(coordPattern);
+    if (coords) {
+        coords.forEach((coord) => {
+            const match = coord.match(/(-?\d+\.?\d*),(-?\d+\.?\d*)/);
+            if (match) {
+                const x = parseFloat(match[1]);
+                const y = parseFloat(match[2]);
+                if (!isNaN(x) && !isNaN(y)) {
+                    minX = Math.min(minX, x);
+                    minY = Math.min(minY, y);
+                    maxX = Math.max(maxX, x);
+                    maxY = Math.max(maxY, y);
+                }
+            }
+        });
+    }
+    return { minX, minY, maxX, maxY };
+}
+// ============================================================================
+// Edge Extraction
+// ============================================================================
+/**
+ * Extracts visible edge paths from React Flow viewport
+ */
+function extractEdgePaths(viewport, visibleBounds) {
+    const edges = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const edgePathElements = viewport.querySelectorAll(".react-flow__edge-path");
+    edgePathElements.forEach((pathEl) => {
+        const pathData = pathEl.getAttribute("d");
+        if (!pathData)
+            return;
+        const pathBounds = getPathBounds(pathData);
+        // Only include edge if it intersects with visible viewport
+        if (pathBounds.maxX >= visibleBounds.minX &&
+            pathBounds.minX <= visibleBounds.maxX &&
+            pathBounds.maxY >= visibleBounds.minY &&
+            pathBounds.minY <= visibleBounds.maxY) {
+            edges.push({
+                d: pathData,
+                stroke: extractStrokeColor(pathEl),
+                strokeWidth: extractStrokeWidth(pathEl, 2),
+            });
+            // Update bounding box
+            minX = Math.min(minX, pathBounds.minX);
+            minY = Math.min(minY, pathBounds.minY);
+            maxX = Math.max(maxX, pathBounds.maxX);
+            maxY = Math.max(maxY, pathBounds.maxY);
+        }
+    });
+    return { edges, bounds: { minX, minY, maxX, maxY } };
+}
+// ============================================================================
+// Node Extraction
+// ============================================================================
+/**
+ * Extracts node position from transform style
+ */
+function extractNodePosition(nodeEl) {
+    const transformStyle = nodeEl.style.transform || "";
+    const translateMatch = transformStyle.match(/translate\(([^,]+)px,\s*([^)]+)px\)/);
+    if (translateMatch) {
+        return {
+            x: parseFloat(translateMatch[1]),
+            y: parseFloat(translateMatch[2]),
+        };
+    }
+    return { x: 0, y: 0 };
+}
+/**
+ * Extracts node dimensions from inline styles
+ */
+function extractNodeDimensions(nodeEl) {
+    const widthMatch = nodeEl.style.width?.match(/(\d+)px/);
+    const heightMatch = nodeEl.style.height?.match(/(\d+)px/);
+    return {
+        width: widthMatch ? parseFloat(widthMatch[1]) : 150,
+        height: heightMatch ? parseFloat(heightMatch[1]) : 40,
+    };
+}
+/**
+ * Extracts node styles (colors, border, radius) from computed styles
+ */
+function extractNodeStyles(nodeContent) {
+    const computedStyle = window.getComputedStyle(nodeContent);
+    // Use gray background for nodes in thumbnail
+    const fill = "#f3f4f6"; // gray-100 equivalent
+    const stroke = extractStrokeColor(nodeContent);
+    const strokeWidth = extractStrokeWidth(nodeContent, 1);
+    const borderRadiusStr = computedStyle.borderRadius || "8px";
+    const rx = parseBorderRadius(borderRadiusStr);
+    const ry = rx; // Use same radius for both x and y
+    return { fill, stroke, strokeWidth, rx, ry };
+}
+/**
+ * Determines if a handle is a source (output) or target (input)
+ */
+function isHandleSource(handleEl) {
+    return (handleEl.classList.contains("react-flow__handle-right") ||
+        handleEl.classList.contains("react-flow__handle-source"));
+}
+/**
+ * Extracts handle position and calculates absolute coordinates
+ */
+function extractHandlePosition(handleEl, nodeX, nodeY, nodeWidth, isSource) {
+    const handleStyle = window.getComputedStyle(handleEl);
+    const handleTop = parseFloat(handleStyle.top || "0");
+    const handleLeft = handleStyle.left;
+    const handleRight = handleStyle.right;
+    const handleY = nodeY + handleTop;
+    let handleX;
+    if (isSource) {
+        // Source handles are on the right edge
+        if (handleRight !== "auto" && handleRight !== "") {
+            const rightValue = parseFloat(handleRight) || 0;
+            handleX = nodeX + nodeWidth + rightValue;
+        }
+        else {
+            handleX = nodeX + nodeWidth;
+        }
+    }
+    else {
+        // Target handles are on the left edge
+        if (handleLeft !== "auto" && handleLeft !== "") {
+            const leftValue = parseFloat(handleLeft) || 0;
+            handleX = nodeX + leftValue;
+        }
+        else {
+            handleX = nodeX;
+        }
+    }
+    return { x: handleX, y: handleY };
+}
+/**
+ * Extracts handles from a node element
+ */
+function extractNodeHandles(nodeEl, nodeX, nodeY, nodeWidth) {
+    const handles = [];
+    const handleElements = nodeEl.querySelectorAll(".react-flow__handle");
+    handleElements.forEach((handleEl) => {
+        const handleStyle = window.getComputedStyle(handleEl);
+        const handleWidth = parseFloat(handleStyle.width || "12");
+        const handleHeight = parseFloat(handleStyle.height || "12");
+        const isSource = isHandleSource(handleEl);
+        const position = extractHandlePosition(handleEl, nodeX, nodeY, nodeWidth, isSource);
+        handles.push({
+            x: position.x,
+            y: position.y,
+            width: handleWidth,
+            height: handleHeight,
+            fill: handleStyle.backgroundColor || "rgba(255, 255, 255, 0.5)",
+            stroke: extractStrokeColor(handleEl),
+            strokeWidth: extractStrokeWidth(handleEl, 1),
+            type: isSource ? "source" : "target",
+        });
+    });
+    return handles;
+}
+/**
+ * Extracts node title text and position
+ */
+function extractNodeTitle(nodeEl, nodeX, nodeY) {
+    const titleElement = nodeEl.querySelector(".react-flow__node-title");
+    if (!titleElement)
+        return undefined;
+    const titleText = titleElement.textContent || titleElement.innerText || "";
+    if (!titleText.trim())
+        return undefined;
+    const titleStyle = window.getComputedStyle(titleElement);
+    const titleRect = titleElement.getBoundingClientRect();
+    const nodeRect = nodeEl.getBoundingClientRect();
+    // Calculate title position relative to node (in flow coordinates)
+    const titleRelativeX = titleRect.left - nodeRect.left;
+    const titleRelativeY = titleRect.top - nodeRect.top;
+    // Get font properties
+    const fontSize = parseFloat(titleStyle.fontSize || "14");
+    const fill = titleStyle.color || "#374151"; // gray-700 default
+    const fontWeight = titleStyle.fontWeight || "600"; // bold default
+    // Calculate text position (SVG text uses baseline)
+    const lineHeight = parseFloat(titleStyle.lineHeight || String(fontSize * 1.2));
+    const textBaselineOffset = lineHeight * 0.8; // Approximate baseline offset
+    return {
+        text: titleText.trim(),
+        x: nodeX + titleRelativeX,
+        y: nodeY + titleRelativeY + textBaselineOffset,
+        fontSize,
+        fill,
+        fontWeight,
+    };
+}
+/**
+ * Extracts visible nodes from React Flow viewport
+ */
+function extractNodes(viewport, visibleBounds) {
+    const nodes = [];
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    const nodeElements = viewport.querySelectorAll(".react-flow__node");
+    nodeElements.forEach((nodeEl) => {
+        const position = extractNodePosition(nodeEl);
+        const dimensions = extractNodeDimensions(nodeEl);
+        // Get the actual node content div (first child)
+        const nodeContent = nodeEl.firstElementChild;
+        if (!nodeContent)
+            return;
+        const styles = extractNodeStyles(nodeContent);
+        const handles = extractNodeHandles(nodeEl, position.x, position.y, dimensions.width);
+        const title = extractNodeTitle(nodeEl, position.x, position.y);
+        // Only include node if it's within visible viewport
+        if (isRectVisible(position.x, position.y, dimensions.width, dimensions.height, visibleBounds)) {
+            nodes.push({
+                x: position.x,
+                y: position.y,
+                width: dimensions.width,
+                height: dimensions.height,
+                ...styles,
+                handles,
+                title,
+            });
+            // Update bounding box
+            minX = Math.min(minX, position.x);
+            minY = Math.min(minY, position.y);
+            maxX = Math.max(maxX, position.x + dimensions.width);
+            maxY = Math.max(maxY, position.y + dimensions.height);
+            // Update bounding box to include handles
+            handles.forEach((handle) => {
+                minX = Math.min(minX, handle.x);
+                minY = Math.min(minY, handle.y);
+                maxX = Math.max(maxX, handle.x + handle.width);
+                maxY = Math.max(maxY, handle.y + handle.height);
+            });
+        }
+    });
+    return { nodes, bounds: { minX, minY, maxX, maxY } };
+}
+// ============================================================================
+// SVG Rendering
+// ============================================================================
+/**
+ * Creates SVG element with dot pattern background (matching React Flow)
+ */
+function createSVGElement(width, height) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("width", String(width));
+    svg.setAttribute("height", String(height));
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    // Create defs section for patterns
+    const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+    // Create dot pattern (matching React Flow's BackgroundVariant.Dots)
+    // React Flow uses gap={12} and size={1} by default
+    const pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
+    pattern.setAttribute("id", "dot-pattern");
+    pattern.setAttribute("x", "0");
+    pattern.setAttribute("y", "0");
+    pattern.setAttribute("width", "24"); // gap between dots (matching React Flow default)
+    pattern.setAttribute("height", "24");
+    pattern.setAttribute("patternUnits", "userSpaceOnUse");
+    // Create a circle for the dot (centered in the pattern cell)
+    const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circle.setAttribute("cx", "12"); // Center of 24x24 pattern cell
+    circle.setAttribute("cy", "12");
+    circle.setAttribute("r", "1"); // dot radius = 1 (matching React Flow size={1})
+    circle.setAttribute("fill", "#f1f1f1"); // gray color matching React Flow default
+    pattern.appendChild(circle);
+    defs.appendChild(pattern);
+    svg.appendChild(defs);
+    // Create background rectangle with white base
+    const bgRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    bgRect.setAttribute("width", String(width));
+    bgRect.setAttribute("height", String(height));
+    bgRect.setAttribute("fill", "#ffffff"); // Base background color
+    svg.appendChild(bgRect);
+    // Create pattern overlay rectangle
+    const patternRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    patternRect.setAttribute("width", String(width));
+    patternRect.setAttribute("height", String(height));
+    patternRect.setAttribute("fill", "url(#dot-pattern)");
+    svg.appendChild(patternRect);
+    // Create group with transform
+    const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+    svg.appendChild(group);
+    return { svg, group };
+}
+/**
+ * Renders a node rectangle to SVG group
+ */
+function renderNodeRect(group, node) {
+    const rectEl = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rectEl.setAttribute("x", String(node.x));
+    rectEl.setAttribute("y", String(node.y));
+    rectEl.setAttribute("width", String(node.width));
+    rectEl.setAttribute("height", String(node.height));
+    rectEl.setAttribute("rx", String(node.rx));
+    rectEl.setAttribute("ry", String(node.ry));
+    rectEl.setAttribute("fill", node.fill);
+    rectEl.setAttribute("stroke", node.stroke);
+    rectEl.setAttribute("stroke-width", String(node.strokeWidth));
+    group.appendChild(rectEl);
+}
+/**
+ * Renders a handle to SVG group
+ */
+function renderHandle(group, handle) {
+    const handleEl = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    // Handles are centered on edges
+    handleEl.setAttribute("x", String(handle.x - handle.width / 2));
+    handleEl.setAttribute("y", String(handle.y - handle.height / 2));
+    handleEl.setAttribute("width", String(handle.width));
+    handleEl.setAttribute("height", String(handle.height));
+    handleEl.setAttribute("rx", String(handle.width / 2)); // Make handles circular/rounded
+    handleEl.setAttribute("ry", String(handle.height / 2));
+    handleEl.setAttribute("fill", handle.fill);
+    handleEl.setAttribute("stroke", handle.stroke);
+    handleEl.setAttribute("stroke-width", String(handle.strokeWidth));
+    group.appendChild(handleEl);
+}
+/**
+ * Renders node title text to SVG group
+ */
+function renderNodeTitle(group, title) {
+    const textEl = document.createElementNS("http://www.w3.org/2000/svg", "text");
+    textEl.setAttribute("x", String(title.x));
+    textEl.setAttribute("y", String(title.y));
+    textEl.setAttribute("font-size", String(title.fontSize));
+    textEl.setAttribute("fill", title.fill);
+    textEl.setAttribute("font-weight", title.fontWeight);
+    textEl.setAttribute("font-family", "system-ui, -apple-system, sans-serif");
+    textEl.textContent = title.text;
+    group.appendChild(textEl);
+}
+/**
+ * Renders an edge path to SVG group
+ */
+function renderEdgePath(group, edge) {
+    const pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    pathEl.setAttribute("d", edge.d);
+    pathEl.setAttribute("fill", "none");
+    pathEl.setAttribute("stroke", edge.stroke);
+    pathEl.setAttribute("stroke-width", String(edge.strokeWidth));
+    group.appendChild(pathEl);
+}
+/**
+ * Renders all nodes, handles, titles, and edges to SVG group
+ */
+function renderContentToSVG(group, nodes, edges, transformX, transformY) {
+    group.setAttribute("transform", `translate(${transformX}, ${transformY})`);
+    // Render nodes
+    nodes.forEach((node) => {
+        renderNodeRect(group, node);
+        node.handles.forEach((handle) => renderHandle(group, handle));
+        if (node.title) {
+            renderNodeTitle(group, node.title);
+        }
+    });
+    // Render edges
+    edges.forEach((edge) => renderEdgePath(group, edge));
+}
+// ============================================================================
+// Main Capture Function
+// ============================================================================
+/**
+ * Captures a React Flow container element as an SVG image and returns data URL
+ * @param containerElement - The React Flow container DOM element
+ * @returns Promise resolving to SVG data URL string, or null if capture fails
+ */
+async function captureCanvasThumbnail(containerElement) {
+    if (!containerElement) {
+        console.warn("[flowThumbnail] Container element is null");
+        return null;
+    }
+    try {
+        // Find the React Flow viewport element
+        const reactFlowViewport = containerElement.querySelector(".react-flow__viewport");
+        if (!reactFlowViewport) {
+            console.warn("[flowThumbnail] React Flow viewport not found");
+            return null;
+        }
+        // Parse viewport transform
+        const viewportStyle = window.getComputedStyle(reactFlowViewport);
+        const viewportTransform = viewportStyle.transform || viewportStyle.getPropertyValue("transform");
+        const transform = parseViewportTransform(viewportTransform);
+        // Calculate visible bounds
+        const viewportRect = reactFlowViewport.getBoundingClientRect();
+        const visibleBounds = calculateVisibleBounds(viewportRect, transform);
+        // Extract edges and nodes
+        const { edges, bounds: edgeBounds } = extractEdgePaths(reactFlowViewport, visibleBounds);
+        const { nodes, bounds: nodeBounds } = extractNodes(reactFlowViewport, visibleBounds);
+        // Calculate overall bounding box
+        // Handle case where one or both bounds might be Infinity (no content)
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        if (edgeBounds.minX !== Infinity) {
+            minX = Math.min(minX, edgeBounds.minX);
+            minY = Math.min(minY, edgeBounds.minY);
+            maxX = Math.max(maxX, edgeBounds.maxX);
+            maxY = Math.max(maxY, edgeBounds.maxY);
+        }
+        if (nodeBounds.minX !== Infinity) {
+            minX = Math.min(minX, nodeBounds.minX);
+            minY = Math.min(minY, nodeBounds.minY);
+            maxX = Math.max(maxX, nodeBounds.maxX);
+            maxY = Math.max(maxY, nodeBounds.maxY);
+        }
+        // If no visible content, use the visible viewport bounds
+        if (minX === Infinity || (nodes.length === 0 && edges.length === 0)) {
+            minX = visibleBounds.minX;
+            minY = visibleBounds.minY;
+            maxX = visibleBounds.maxX;
+            maxY = visibleBounds.maxY;
+        }
+        // Use the visible viewport bounds exactly (what the user sees)
+        const contentMinX = visibleBounds.minX;
+        const contentMinY = visibleBounds.minY;
+        const contentMaxX = visibleBounds.maxX;
+        const contentMaxY = visibleBounds.maxY;
+        const contentWidth = contentMaxX - contentMinX;
+        const contentHeight = contentMaxY - contentMinY;
+        // Create SVG
+        const { svg, group } = createSVGElement(contentWidth, contentHeight);
+        // Render content
+        renderContentToSVG(group, nodes, edges, -contentMinX, -contentMinY);
+        // Serialize SVG to string
+        const serializer = new XMLSerializer();
+        const svgString = serializer.serializeToString(svg);
+        // Return SVG data URL
+        const svgDataUrl = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgString)))}`;
+        return svgDataUrl;
+    }
+    catch (error) {
+        console.error("[flowThumbnail] Failed to capture thumbnail:", error);
+        return null;
+    }
+}
+/**
+ * Captures a React Flow container element as an SVG image and downloads it
+ * @param containerElement - The React Flow container DOM element
+ * @returns Promise resolving to true if successful, false otherwise
+ */
+async function downloadCanvasThumbnail(containerElement) {
+    const svgDataUrl = await captureCanvasThumbnail(containerElement);
+    if (!svgDataUrl) {
+        return false;
+    }
+    // Create blob and download
+    const base64Data = svgDataUrl.split(",")[1];
+    const svgString = atob(base64Data);
+    const blob = new Blob([svgString], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `flow-thumbnail-${Date.now()}.svg`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+    return true;
+}
+
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
     const { wb, runner, registry, selectedNodeId, runAutoLayout } = useWorkbenchContext();
     const [transportStatus, setTransportStatus] = useState({
@@ -5547,6 +6171,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         return defaultExamples;
     }, [overrides, defaultExamples]);
     const canvasRef = useRef(null);
+    const canvasContainerRef = useRef(null);
     const uploadInputRef = useRef(null);
     const [registryReady, setRegistryReady] = useState(() => {
         // For local backends, registry is always ready
@@ -5908,7 +6533,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 // Normal change when not running
                                 onEngineChange?.(kind);
                             }
-                        }, children: [jsx("option", { value: "", children: "Select Engine\u2026" }), jsx("option", { value: "push", children: "Push" }), jsx("option", { value: "batched", children: "Batched" }), jsx("option", { value: "pull", children: "Pull" }), jsx("option", { value: "hybrid", children: "Hybrid" }), jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsx(PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsx(LightningIcon, { size: 24 }) })), renderStartStopButton(), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, children: [jsx("option", { value: "", children: "Select Engine\u2026" }), jsx("option", { value: "push", children: "Push" }), jsx("option", { value: "batched", children: "Batched" }), jsx("option", { value: "pull", children: "Pull" }), jsx("option", { value: "hybrid", children: "Hybrid" }), jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsx(PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsx(LightningIcon, { size: 24 }) })), renderStartStopButton(), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
+                            await downloadCanvasThumbnail(canvasContainerRef.current);
+                        }, title: "Download Flow Thumbnail (SVG)", children: jsx(ImageIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = useState(createSimpleGraphRegistry());
@@ -5983,5 +6610,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
     return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
-export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, createCopyHandler, createDefaultContextMenuHandlers, createHandleBounds, createHandleLayout, createNodeContextMenuHandlers, createNodeCopyHandler, createSelectionContextMenuHandlers, download, estimateNodeSize, excludeViewportFromUIState, formatDataUrlAsLabel, formatDeclaredTypeSignature, getBakeableOutputs, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, isValidViewport, layoutNode, mergeUIState, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, captureCanvasThumbnail, computeEffectiveHandles, countVisibleHandles, createCopyHandler, createDefaultContextMenuHandlers, createHandleBounds, createHandleLayout, createNodeContextMenuHandlers, createNodeCopyHandler, createSelectionContextMenuHandlers, download, downloadCanvasThumbnail, estimateNodeSize, excludeViewportFromUIState, formatDataUrlAsLabel, formatDeclaredTypeSignature, getBakeableOutputs, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, isValidViewport, layoutNode, mergeUIState, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map