@bian-womp/spark-workbench 0.2.90 → 0.2.92

package/lib/cjs/src/misc/DefaultNodeHeader.d.ts

@@ -1,8 +1,7 @@
 import React from "react";
-export declare function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInvalidate, }: {
+export declare function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate, }: {
     id: string;
     typeId?: string;
-    title?: string;
     validation: {
         inputs?: any[];
         outputs?: any[];

package/lib/cjs/src/misc/DefaultNodeHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/misc/DefaultNodeHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,YAAY,GACb,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE;QAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;QAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;QAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAA;KAAE,CAAC;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,2CAgJA"}
+{"version":3,"file":"DefaultNodeHeader.d.ts","sourceRoot":"","sources":["../../../../src/misc/DefaultNodeHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,MAAM,EACN,UAAU,EACV,KAAK,EACL,MAAM,EACN,YAAY,GACb,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE;QAAE,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC;QAAC,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;QAAC,MAAM,CAAC,EAAE,GAAG,EAAE,CAAA;KAAE,CAAC;IAChE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,2CAgJA"}

package/lib/cjs/src/misc/thumbnail-utils.d.ts

@@ -2,16 +2,52 @@
  * Flow thumbnail capture utility
  * Captures React Flow canvas as SVG image
  */
+export interface ThumbnailOptions {
+    /**
+     * If true, export the whole graph instead of just the viewport. Default: true
+     */
+    ignoreViewport?: boolean;
+    /**
+     * Padding to add when exporting whole graph (in pixels). Default: 40
+     */
+    padding?: number;
+    /**
+     * Whether to export handles. Default: true
+     */
+    exportHandles?: boolean;
+    /**
+     * Whether to export node titles. Default: true
+     */
+    exportNodeTitle?: boolean;
+    /**
+     * Whether to export background dot pattern. Default: true
+     */
+    exportBackgroundPattern?: boolean;
+    /**
+     * Background color of nodes. Default: "#f3f4f6"
+     */
+    nodeBackgroundColor?: string;
+    /**
+     * Color of background dot pattern. Default: "#f1f1f1"
+     */
+    backgroundPatternColor?: string;
+    /**
+     * Background color of the SVG. Default: "#ffffff"
+     */
+    backgroundColor?: string;
+}
 /**
  * Captures a React Flow container element as an SVG image and returns data URL
  * @param containerElement - The React Flow container DOM element
+ * @param options - Options for thumbnail capture
  * @returns Promise resolving to SVG data URL string, or null if capture fails
  */
-export declare function captureCanvasThumbnail(containerElement: HTMLElement | null): Promise<string | null>;
+export declare function captureCanvasThumbnail(containerElement: HTMLElement | null, options?: ThumbnailOptions): Promise<string | null>;
 /**
  * Captures a React Flow container element as an SVG image and downloads it
  * @param containerElement - The React Flow container DOM element
+ * @param options - Options for thumbnail capture
  * @returns Promise resolving to true if successful, false otherwise
  */
-export declare function downloadCanvasThumbnail(containerElement: HTMLElement | null): Promise<boolean>;
+export declare function downloadCanvasThumbnail(containerElement: HTMLElement | null, options?: ThumbnailOptions): Promise<boolean>;
 //# sourceMappingURL=thumbnail-utils.d.ts.map

package/lib/cjs/src/misc/thumbnail-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail-utils.d.ts","sourceRoot":"","sources":["../../../../src/misc/thumbnail-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+tBH;;;;GAIG;AACH,wBAAsB,sBAAsB,CAC1C,gBAAgB,EAAE,WAAW,GAAG,IAAI,GACnC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA6FxB;AAED;;;;GAIG;AACH,wBAAsB,uBAAuB,CAC3C,gBAAgB,EAAE,WAAW,GAAG,IAAI,GACnC,OAAO,CAAC,OAAO,CAAC,CAoBlB"}
+{"version":3,"file":"thumbnail-utils.d.ts","sourceRoot":"","sources":["../../../../src/misc/thumbnail-utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA2DH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAgsBD;;;;;GAKG;AACH,wBAAsB,sBAAsB,CAC1C,gBAAgB,EAAE,WAAW,GAAG,IAAI,EACpC,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA0IxB;AAED;;;;;GAKG;AACH,wBAAsB,uBAAuB,CAC3C,gBAAgB,EAAE,WAAW,GAAG,IAAI,EACpC,OAAO,GAAE,gBAAqB,GAC7B,OAAO,CAAC,OAAO,CAAC,CAoBlB"}

package/lib/esm/index.js

@@ -3149,11 +3149,12 @@ function extractEdgePaths(viewport, visibleBounds) {
         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) {
+        // Only include edge if it intersects with visible viewport (or if ignoring viewport)
+        if (!visibleBounds ||
+            (pathBounds.maxX >= visibleBounds.minX &&
+                pathBounds.minX <= visibleBounds.maxX &&
+                pathBounds.maxY >= visibleBounds.minY &&
+                pathBounds.minY <= visibleBounds.maxY)) {
             edges.push({
                 d: pathData,
                 stroke: extractStrokeColor(pathEl),
@@ -3199,10 +3200,10 @@ function extractNodeDimensions(nodeEl) {
 /**
  * Extracts node styles (colors, border, radius) from computed styles
  */
-function extractNodeStyles(nodeContent) {
+function extractNodeStyles(nodeContent, nodeBackgroundColor) {
     const computedStyle = window.getComputedStyle(nodeContent);
-    // Use gray background for nodes in thumbnail
-    const fill = "#f3f4f6"; // gray-100 equivalent
+    // Use provided background color or default gray background for nodes in thumbnail
+    const fill = nodeBackgroundColor || "#f3f4f6"; // gray-100 equivalent
     const stroke = extractStrokeColor(nodeContent);
     const strokeWidth = extractStrokeWidth(nodeContent, 1);
     const borderRadiusStr = computedStyle.borderRadius || "8px";
@@ -3309,7 +3310,8 @@ function extractNodeTitle(nodeEl, nodeX, nodeY) {
 /**
  * Extracts visible nodes from React Flow viewport
  */
-function extractNodes(viewport, visibleBounds) {
+function extractNodes(viewport, visibleBounds, options = {}) {
+    const { exportHandles = true, exportNodeTitle = true, nodeBackgroundColor, } = options;
     const nodes = [];
     let minX = Infinity;
     let minY = Infinity;
@@ -3323,11 +3325,16 @@ function extractNodes(viewport, visibleBounds) {
         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)) {
+        const styles = extractNodeStyles(nodeContent, nodeBackgroundColor);
+        const handles = exportHandles
+            ? extractNodeHandles(nodeEl, position.x, position.y, dimensions.width)
+            : [];
+        const title = exportNodeTitle
+            ? extractNodeTitle(nodeEl, position.x, position.y)
+            : undefined;
+        // Only include node if it's within visible viewport (or if ignoring viewport)
+        if (!visibleBounds ||
+            isRectVisible(position.x, position.y, dimensions.width, dimensions.height, visibleBounds)) {
             nodes.push({
                 x: position.x,
                 y: position.y,
@@ -3359,43 +3366,47 @@ function extractNodes(viewport, visibleBounds) {
 /**
  * Creates SVG element with dot pattern background (matching React Flow)
  */
-function createSVGElement(width, height) {
+function createSVGElement(width, height, options = {}) {
+    const { exportBackgroundPattern = true, backgroundPatternColor = "#f1f1f1", backgroundColor = "#ffffff", } = options;
     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
+    // Create background rectangle with configurable background color
     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
+    bgRect.setAttribute("fill", backgroundColor);
     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 dot pattern if enabled
+    if (exportBackgroundPattern) {
+        // 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", backgroundPatternColor);
+        pattern.appendChild(circle);
+        defs.appendChild(pattern);
+        svg.appendChild(defs);
+        // 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);
@@ -3462,13 +3473,16 @@ function renderEdgePath(group, edge) {
 /**
  * Renders all nodes, handles, titles, and edges to SVG group
  */
-function renderContentToSVG(group, nodes, edges, transformX, transformY) {
+function renderContentToSVG(group, nodes, edges, transformX, transformY, options = {}) {
+    const { exportHandles = true, exportNodeTitle = true } = options;
     group.setAttribute("transform", `translate(${transformX}, ${transformY})`);
     // Render nodes
     nodes.forEach((node) => {
         renderNodeRect(group, node);
-        node.handles.forEach((handle) => renderHandle(group, handle));
-        if (node.title) {
+        if (exportHandles) {
+            node.handles.forEach((handle) => renderHandle(group, handle));
+        }
+        if (exportNodeTitle && node.title) {
             renderNodeTitle(group, node.title);
         }
     });
@@ -3481,9 +3495,11 @@ function renderContentToSVG(group, nodes, edges, transformX, transformY) {
 /**
  * Captures a React Flow container element as an SVG image and returns data URL
  * @param containerElement - The React Flow container DOM element
+ * @param options - Options for thumbnail capture
  * @returns Promise resolving to SVG data URL string, or null if capture fails
  */
-async function captureCanvasThumbnail(containerElement) {
+async function captureCanvasThumbnail(containerElement, options = {}) {
+    const { ignoreViewport = true, padding = 40, exportHandles = true, exportNodeTitle = true, exportBackgroundPattern = true, nodeBackgroundColor, backgroundPatternColor, backgroundColor, } = options;
     if (!containerElement) {
         console.warn("[flowThumbnail] Container element is null");
         return null;
@@ -3499,12 +3515,18 @@ async function captureCanvasThumbnail(containerElement) {
         const viewportStyle = window.getComputedStyle(reactFlowViewport);
         const viewportTransform = viewportStyle.transform || viewportStyle.getPropertyValue("transform");
         const transform = parseViewportTransform(viewportTransform);
-        // Calculate visible bounds
+        // Calculate visible bounds (null if ignoring viewport)
         const viewportRect = reactFlowViewport.getBoundingClientRect();
-        const visibleBounds = calculateVisibleBounds(viewportRect, transform);
-        // Extract edges and nodes
+        const visibleBounds = ignoreViewport
+            ? null
+            : calculateVisibleBounds(viewportRect, transform);
+        // Extract edges and nodes (pass null bounds if ignoring viewport to get all)
         const { edges, bounds: edgeBounds } = extractEdgePaths(reactFlowViewport, visibleBounds);
-        const { nodes, bounds: nodeBounds } = extractNodes(reactFlowViewport, visibleBounds);
+        const { nodes, bounds: nodeBounds } = extractNodes(reactFlowViewport, visibleBounds, {
+            exportHandles,
+            exportNodeTitle,
+            nodeBackgroundColor,
+        });
         // Calculate overall bounding box
         // Handle case where one or both bounds might be Infinity (no content)
         let minX = Infinity;
@@ -3523,24 +3545,50 @@ async function captureCanvasThumbnail(containerElement) {
             maxX = Math.max(maxX, nodeBounds.maxX);
             maxY = Math.max(maxY, nodeBounds.maxY);
         }
-        // If no visible content, use the visible viewport bounds
+        // If no content found, return null
         if (minX === Infinity || (nodes.length === 0 && edges.length === 0)) {
+            if (ignoreViewport) {
+                console.warn("[flowThumbnail] No content found in graph");
+                return null;
+            }
+            // Fallback to visible viewport bounds if not ignoring viewport
             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;
+        // Calculate content bounds with padding if ignoring viewport
+        let contentMinX;
+        let contentMinY;
+        let contentMaxX;
+        let contentMaxY;
+        if (ignoreViewport) {
+            // Add padding when exporting whole graph
+            contentMinX = minX - padding;
+            contentMinY = minY - padding;
+            contentMaxX = maxX + padding;
+            contentMaxY = maxY + padding;
+        }
+        else {
+            // Use the visible viewport bounds exactly (what the user sees)
+            contentMinX = visibleBounds.minX;
+            contentMinY = visibleBounds.minY;
+            contentMaxX = visibleBounds.maxX;
+            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);
+        // Create SVG with options
+        const { svg, group } = createSVGElement(contentWidth, contentHeight, {
+            exportBackgroundPattern,
+            backgroundPatternColor,
+            backgroundColor,
+        });
+        // Render content with options
+        renderContentToSVG(group, nodes, edges, -contentMinX, -contentMinY, {
+            exportHandles,
+            exportNodeTitle,
+        });
         // Serialize SVG to string
         const serializer = new XMLSerializer();
         const svgString = serializer.serializeToString(svg);
@@ -3556,10 +3604,11 @@ async function captureCanvasThumbnail(containerElement) {
 /**
  * Captures a React Flow container element as an SVG image and downloads it
  * @param containerElement - The React Flow container DOM element
+ * @param options - Options for thumbnail capture
  * @returns Promise resolving to true if successful, false otherwise
  */
-async function downloadCanvasThumbnail(containerElement) {
-    const svgDataUrl = await captureCanvasThumbnail(containerElement);
+async function downloadCanvasThumbnail(containerElement, options = {}) {
+    const svgDataUrl = await captureCanvasThumbnail(containerElement, options);
     if (!svgDataUrl) {
         return false;
     }
@@ -4518,24 +4567,24 @@ function IssueBadge({ level, title, size = 12, className, }) {
     return (jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsx(XCircleIcon, { size: size, weight: "fill" })) : (jsx(WarningCircleIcon, { size: size, weight: "fill" })) }));
 }
 
-function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInvalidate, }) {
+function DefaultNodeHeader({ id, typeId, validation, right, showId, onInvalidate, }) {
     const ctx = useWorkbenchContext();
     const [isEditing, setIsEditing] = React.useState(false);
     const [editValue, setEditValue] = React.useState("");
     const inputRef = React.useRef(null);
     // Use getNodeDisplayName if typeId is provided, otherwise use title prop
-    const displayName = typeId ? ctx.getNodeDisplayName(id) : title ?? id;
-    const effectiveTypeId = typeId ?? title ?? id;
+    const displayName = typeId ? ctx.getNodeDisplayName(id) : id;
+    const effectiveTypeId = typeId ?? id;
     // Get the default display name (without custom name) for comparison
     const getDefaultDisplayName = React.useCallback(() => {
         if (!typeId)
-            return title ?? id;
+            return id;
         const node = ctx.wb.def.nodes.find((n) => n.nodeId === id);
         if (!node)
             return id;
         const desc = ctx.registry.nodes.get(node.typeId);
         return desc?.displayName || node.typeId;
-    }, [ctx, id, typeId, title]);
+    }, [ctx, id, typeId]);
     const handleInvalidate = React.useCallback(() => {
         try {
             if (onInvalidate)