@bian-womp/spark-workbench 0.2.85 → 0.2.86

package/lib/cjs/index.cjs

@@ -4453,7 +4453,7 @@ function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInv
     return (jsxRuntime.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 ? (jsxRuntime.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` } })) : (jsxRuntime.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 })), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.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 ? (jsxRuntime.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` } })) : (jsxRuntime.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 })), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.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: jsxRuntime.jsx(react$1.ArrowClockwiseIcon, { size: 10 }) }), right, validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
@@ -4464,7 +4464,7 @@ function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInv
 }
 
 function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + (kind === "input" ? " left-2" : " right-2"), style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: `${labelClassName} ${kind === "input" ? " left-2" : " right-2"}`, style: {
                     top: (y ?? 0) - 8,
                     ...(kind === "input"
                         ? { right: "50%" }
@@ -4576,7 +4576,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                             isDefault: false,
                         };
                     })();
-                    return (jsxRuntime.jsxs("span", { className: `flex items-center gap-1 w-full ${valueText?.isDefault ? "text-gray-400" : ""}`, children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined ? (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text })) : (jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsxRuntime.jsx("span", { className: `truncate pr-1 ${valueText.isDefault ? "text-gray-400" : "opacity-60"}`, style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                    return (jsxRuntime.jsxs("span", { className: `flex items-center gap-1 w-full ${valueText?.isDefault ? "text-gray-400" : ""}`, children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined ? (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text })) : (jsxRuntime.jsx("span", { style: { flex: 1, minWidth: 0, maxWidth: "100%" } })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", "data-handle-id": handleId, style: valueText !== undefined ? { maxWidth: "40%" } : {}, children: prettyHandle(handleId) }), valueText !== undefined && (jsxRuntime.jsx("span", { className: `truncate pr-1 ${valueText.isDefault ? "text-gray-400" : "opacity-60"}`, style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText.text }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -5490,6 +5490,601 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                             (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsxRuntime.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] = React.useState({
@@ -5578,6 +6173,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         return defaultExamples;
     }, [overrides, defaultExamples]);
     const canvasRef = React.useRef(null);
+    const canvasContainerRef = React.useRef(null);
     const uploadInputRef = React.useRef(null);
     const [registryReady, setRegistryReady] = React.useState(() => {
         // For local backends, registry is always ready
@@ -5939,7 +6535,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 // Normal change when not running
                                 onEngineChange?.(kind);
                             }
-                        }, children: [jsxRuntime.jsx("option", { value: "", children: "Select Engine\u2026" }), jsxRuntime.jsx("option", { value: "push", children: "Push" }), jsxRuntime.jsx("option", { value: "batched", children: "Batched" }), jsxRuntime.jsx("option", { value: "pull", children: "Pull" }), jsxRuntime.jsx("option", { value: "hybrid", children: "Hybrid" }), jsxRuntime.jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsxRuntime.jsx(react$1.PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsxRuntime.jsx(react$1.LightningIcon, { size: 24 }) })), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, children: [jsxRuntime.jsx("option", { value: "", children: "Select Engine\u2026" }), jsxRuntime.jsx("option", { value: "push", children: "Push" }), jsxRuntime.jsx("option", { value: "batched", children: "Batched" }), jsxRuntime.jsx("option", { value: "pull", children: "Pull" }), jsxRuntime.jsx("option", { value: "hybrid", children: "Hybrid" }), jsxRuntime.jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsxRuntime.jsx(react$1.PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsxRuntime.jsx(react$1.LightningIcon, { size: 24 }) })), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
+                            await downloadCanvasThumbnail(canvasContainerRef.current);
+                        }, title: "Download Flow Thumbnail (SVG)", children: jsxRuntime.jsx(react$1.ImageIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.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] = React.useState(sparkGraph.createSimpleGraphRegistry());
@@ -6029,6 +6627,7 @@ exports.WorkbenchCanvas = WorkbenchCanvas;
 exports.WorkbenchContext = WorkbenchContext;
 exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
+exports.captureCanvasThumbnail = captureCanvasThumbnail;
 exports.computeEffectiveHandles = computeEffectiveHandles;
 exports.countVisibleHandles = countVisibleHandles;
 exports.createCopyHandler = createCopyHandler;
@@ -6039,6 +6638,7 @@ exports.createNodeContextMenuHandlers = createNodeContextMenuHandlers;
 exports.createNodeCopyHandler = createNodeCopyHandler;
 exports.createSelectionContextMenuHandlers = createSelectionContextMenuHandlers;
 exports.download = download;
+exports.downloadCanvasThumbnail = downloadCanvasThumbnail;
 exports.estimateNodeSize = estimateNodeSize;
 exports.excludeViewportFromUIState = excludeViewportFromUIState;
 exports.formatDataUrlAsLabel = formatDataUrlAsLabel;