@graph-artifact/core 0.1.13 → 0.1.15

package/dist/components/GraphCanvas.d.ts

@@ -54,11 +54,24 @@ interface GraphCanvasProps {
          */
         includeBackground?: boolean;
         /**
-         * Whether to embed webfonts into the exported image.
-         * Defaults to false because many apps load fonts from cross-origin
-         * stylesheets (e.g. Google Fonts), which causes DOMExceptions during export.
+         * Export a tightly-cropped image around the graph content (nodes + edges),
+         * instead of exporting the entire viewer viewport.
+         *
+         * Defaults to true.
+         */
+        cropToGraph?: boolean;
+        /** Padding (CSS px) around the cropped content when `cropToGraph` is enabled. */
+        cropPadding?: number;
+        /**
+         * Extra reserved space (CSS px) above the graph content for logo/branding
+         * when exporting.
+         */
+        reservedTop?: number;
+        /**
+         * Extra reserved space (CSS px) below the graph content for watermark
+         * when exporting.
          */
-        embedFonts?: boolean;
+        reservedBottom?: number;
         /** Optional error callback for export failures. */
         onError?: (error: Error) => void;
     };

package/dist/components/GraphCanvas.js

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { ReactFlow, Background, Controls, MiniMap, ReactFlowProvider, useReactFlow, useNodesInitialized, useStore, useStoreApi, Panel, } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
-import { toBlob } from 'html-to-image';
+import { exportToPng } from './exportPng.js';
 import { layoutNodes, buildLayoutEdges } from '../layout/index.js';
 import { getConfig, getNodeTypes } from '../config.js';
 import { useTheme } from '../ThemeContext.js';
 import { RoutedEdge } from './edges/RoutedEdge.js';
+import { getBoxShadowMaxExtent } from '../utils/boxShadow.js';
 // Stable reference — must be outside the component to avoid infinite re-renders
 const edgeTypes = { routed: RoutedEdge };
 function cornerToPanelPosition(pos) {
@@ -183,10 +184,19 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
         metadata,
         storeApi,
     ]);
+    // Check if any nodes have measured dimensions (more reliable than useNodesInitialized)
+    const hasMeasuredNodes = useStore((s) => {
+        for (const n of s.nodeLookup.values()) {
+            if (n.measured?.width && n.measured?.height)
+                return true;
+        }
+        return false;
+    });
     // Phase 2: Recompute when React Flow measurements change so intersections
     // always use actual rendered node dimensions.
     useEffect(() => {
-        if (!nodesInitialized || !contextRef.current)
+        // Use hasMeasuredNodes instead of nodesInitialized (more reliable)
+        if (!hasMeasuredNodes || !contextRef.current)
             return;
         const nodeLookup = storeApi.getState().nodeLookup;
         const measuredPositions = new Map();
@@ -206,7 +216,34 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             });
         }
         setEdges(buildLayoutEdges(contextRef.current, theme, measuredPositions));
-    }, [nodesInitialized, measuredSignature, theme, storeApi]);
+    }, [hasMeasuredNodes, measuredSignature, theme, storeApi, parsed.diagramType]);
+    // Sequence diagrams (and others without context) return edges directly.
+    // React Flow may not render edges until anchor nodes are registered.
+    // Re-set edges after a short delay to ensure nodes are ready.
+    const didInitialEdgeRefresh = useRef(false);
+    useEffect(() => {
+        // Only for diagrams without context (sequence, etc.)
+        if (contextRef.current)
+            return;
+        if (didInitialEdgeRefresh.current)
+            return;
+        if (!initialLayoutState.result)
+            return;
+        const edgesToSet = initialLayoutState.result.edges;
+        if (!edgesToSet || edgesToSet.length === 0)
+            return;
+        // Use double rAF to ensure React Flow has registered all nodes
+        didInitialEdgeRefresh.current = true;
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setEdges([...edgesToSet]);
+            });
+        });
+    }, [initialLayoutState, hasMeasuredNodes]);
+    // Reset the flag when diagram changes
+    useEffect(() => {
+        didInitialEdgeRefresh.current = false;
+    }, [parsed]);
     // Subgraph boxes are visual annotations; compute their bounds from measured
     // child node DOM dimensions so they never drift due to sizing changes.
     useEffect(() => {
@@ -218,7 +255,9 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
         const nodeLookup = storeApi.getState().nodeLookup;
         // Include extra pad so node shadows/rounded corners don't peek outside.
         // We intentionally over-pad here; subgraphs are visual groupings, not tight boxes.
-        const pad = layout.subgraphPadding + 16;
+        const shadowPad = Math.ceil(getBoxShadowMaxExtent(theme.shadow.card));
+        const extraPad = Math.max(16, shadowPad + 6);
+        const pad = layout.subgraphPadding + extraPad;
         const labelOffset = theme.nodeStyles.subgraph.labelOffset;
         const boundsById = new Map();
         for (const sg of parsed.subgraphs) {
@@ -273,7 +312,6 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
     const miniMapNodeColor = useCallback(() => theme.color.orange1, [theme.color.orange1]);
     const miniMapMaskColor = useMemo(() => `${theme.color.gray1}cc`, [theme.color.gray1]);
     const exportRef = useRef(null);
-    const [isExporting, setIsExporting] = useState(false);
     const brandingVisibility = useMemo(() => {
         const v = branding?.visibility ?? {};
         return {
@@ -281,38 +319,96 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             download: v.download ?? true,
         };
     }, [branding?.visibility]);
-    const showBrandingNow = isExporting ? brandingVisibility.download : brandingVisibility.canvas;
-    const showBackgroundNow = isExporting ? Boolean(download?.includeBackground) : Boolean(canvas.showBackground);
     const onDownload = useCallback(async () => {
-        if (!exportRef.current)
+        const root = exportRef.current;
+        if (!root)
             return;
         const fileName = (download?.fileName ?? 'diagram')
             .trim()
             .replace(/[^\w\- ]+/g, '')
             .replace(/\s+/g, '-')
             .slice(0, 80) || 'diagram';
-        setIsExporting(true);
+        const state = storeApi.getState();
+        const nodeLookup = state.nodeLookup;
+        const transform = state.transform; // [x, y, zoom]
+        const zoom = transform[2] ?? 1;
+        // Compute content bounds in graph coordinates from measured node boxes.
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of nodeLookup.values()) {
+            if (n.hidden)
+                continue;
+            const abs = n.internals.positionAbsolute;
+            const w = n.measured?.width ?? n.width ?? 0;
+            const h = n.measured?.height ?? n.height ?? 0;
+            if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0)
+                continue;
+            minX = Math.min(minX, abs.x);
+            minY = Math.min(minY, abs.y);
+            maxX = Math.max(maxX, abs.x + w);
+            maxY = Math.max(maxY, abs.y + h);
+        }
+        const canCrop = isFinite(minX) && isFinite(minY) && isFinite(maxX) && isFinite(maxY);
+        const cropToGraph = download?.cropToGraph ?? true;
+        const contentPad = Math.max(0, download?.cropPadding ?? 32);
+        const exportBranding = Boolean(brandingVisibility.download && (branding?.logo?.src || branding?.logo?.node || branding?.watermark?.text));
+        const reservedTop = Math.max(0, download?.reservedTop ?? (exportBranding && (branding?.logo?.src || branding?.logo?.node) ? 76 : 0));
+        const reservedBottom = Math.max(0, download?.reservedBottom ?? (exportBranding && branding?.watermark?.text ? 56 : 0));
+        const pixelRatio = Math.max(1, download?.pixelRatio ?? 4);
+        const backgroundColor = download?.backgroundColor ?? canvas.containerBackground;
+        const includeBackground = Boolean(download?.includeBackground);
+        // Compute export dimensions and viewport transform.
+        let exportWidth;
+        let exportHeight;
+        let vpTransform;
+        if (cropToGraph && canCrop) {
+            exportWidth = Math.ceil((maxX - minX) + contentPad * 2);
+            exportHeight = Math.ceil((maxY - minY) + contentPad * 2 + reservedTop + reservedBottom);
+            const tx = contentPad - minX;
+            const ty = reservedTop + contentPad - minY;
+            vpTransform = `translate(${tx}px, ${ty}px) scale(1)`;
+        }
+        else {
+            exportWidth = root.clientWidth;
+            exportHeight = root.clientHeight;
+            vpTransform = `translate(${transform[0]}px, ${transform[1]}px) scale(${zoom})`;
+        }
         try {
-            // Wait for React to commit export-only visuals (branding/background toggles)
-            // before html-to-image snapshots the DOM.
-            await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve())));
-            // Prefer blob + object URL over a data URL. In some browsers, downloads
-            // triggered after an async boundary can be blocked when using data URLs.
-            const blob = await toBlob(exportRef.current, {
-                cacheBust: true,
-                pixelRatio: Math.max(1, download?.pixelRatio ?? 2),
-                backgroundColor: download?.backgroundColor ?? canvas.containerBackground,
-                // Avoid CORS errors when the host app uses cross-origin stylesheets for fonts.
-                // If the host wants font embedding, they can explicitly enable it.
-                skipFonts: !(download?.embedFonts ?? false),
-                filter: (node) => {
-                    if (!(node instanceof Element))
-                        return true;
-                    return !node.classList.contains('ga-no-export');
+            const blob = await exportToPng(root, {
+                width: exportWidth,
+                height: exportHeight,
+                pixelRatio,
+                backgroundColor,
+                filter: (el) => !el.classList.contains('ga-no-export'),
+                onClone: (clone) => {
+                    // Set viewport transform for cropped/framed export.
+                    const vp = clone.querySelector('.react-flow__viewport');
+                    if (vp)
+                        vp.style.transform = vpTransform;
+                    // Toggle branding visibility (download-only by default).
+                    clone.querySelectorAll('[data-ga-branding]').forEach((el) => {
+                        const htmlEl = el;
+                        if (!exportBranding) {
+                            htmlEl.style.display = 'none';
+                        }
+                        else if (el.hasAttribute('data-ga-watermark')) {
+                            htmlEl.style.display = 'flex';
+                        }
+                        else {
+                            htmlEl.style.display = 'block';
+                        }
+                    });
+                    // Toggle background dots (defaults to off).
+                    clone.querySelectorAll('.react-flow__background').forEach((el) => {
+                        el.style.display = includeBackground ? 'block' : 'none';
+                    });
+                    // Ensure the React Flow container fills the export frame.
+                    const rf = clone.querySelector('.react-flow');
+                    if (rf) {
+                        rf.style.width = '100%';
+                        rf.style.height = '100%';
+                    }
                 },
             });
-            if (!blob)
-                throw new Error('Export failed: no image data produced.');
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
@@ -329,18 +425,20 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             console.error('[graph-artifact] Download export failed:', error);
             download?.onError?.(error);
         }
-        finally {
-            setIsExporting(false);
-        }
     }, [
+        storeApi,
+        branding,
+        brandingVisibility.download,
         canvas.containerBackground,
-        canvas.showBackground,
-        download?.backgroundColor,
         download?.fileName,
         download?.pixelRatio,
+        download?.backgroundColor,
         download?.includeBackground,
+        download?.cropToGraph,
+        download?.cropPadding,
+        download?.reservedTop,
+        download?.reservedBottom,
         download?.onError,
-        download?.embedFonts,
     ]);
     if (layoutError) {
         return (_jsx("div", { style: {
@@ -392,7 +490,7 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
         }
         /* Ensure inline SVG logos scale to the requested width. */
         .ga-logo svg { width: 100%; height: auto; display: block; }
-      ` }), showBrandingNow && (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { style: {
+      ` }), (branding?.logo?.src || branding?.logo?.node) && (_jsx("div", { "data-ga-branding": true, "data-ga-logo": true, style: {
                     position: 'absolute',
                     zIndex: 5,
                     pointerEvents: 'none',
@@ -401,18 +499,18 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                     ...(branding.logo.position === 'bottom-right' ? { bottom: 12, right: 12 } : {}),
                     ...(branding.logo.position === 'top-left' || !branding.logo.position ? { top: 12, left: 12 } : {}),
                     opacity: branding.logo.opacity ?? 1,
+                    display: brandingVisibility.canvas ? 'block' : 'none',
                 }, children: branding.logo.node ? (_jsx("div", { className: "ga-logo", style: {
                         width: branding.logo.width ?? 120,
                         height: branding.logo.height,
                         display: 'block',
-                    }, children: branding.logo.node })) : (_jsx("img", { src: branding.logo.src, alt: branding.logo.alt ?? 'logo', width: branding.logo.width ?? 120, height: branding.logo.height, style: { display: 'block' } })) })), showBrandingNow && branding?.watermark?.text && (_jsxs("div", { style: {
+                    }, children: branding.logo.node })) : (_jsx("img", { src: branding.logo.src, alt: branding.logo.alt ?? 'logo', width: branding.logo.width ?? 120, height: branding.logo.height, style: { display: 'block' } })) })), branding?.watermark?.text && (_jsxs("div", { "data-ga-branding": true, "data-ga-watermark": true, style: {
                     position: 'absolute',
                     left: '50%',
                     bottom: 14,
                     transform: 'translateX(-50%)',
                     zIndex: 5,
                     pointerEvents: 'none',
-                    display: 'flex',
                     alignItems: 'center',
                     gap: 8,
                     fontFamily: theme.font.family,
@@ -421,7 +519,8 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
                     opacity: branding.watermark.opacity ?? 0.9,
                     userSelect: 'none',
                     whiteSpace: 'nowrap',
-                }, children: [branding.watermark.icon ?? null, _jsx("span", { children: branding.watermark.text })] })), _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, zIndexMode: "manual", colorMode: theme.mode, proOptions: hideAttribution ? { hideAttribution: true } : undefined, children: [showBackgroundNow && (_jsx(Background, { color: canvas.gridColor === 'auto' ? theme.color.gray2 : canvas.gridColor, gap: canvas.backgroundGap, size: canvas.backgroundSize })), canvas.showControls && (_jsx("div", { className: "ga-no-export", children: _jsx(Controls, { position: canvas.controlsPosition, 
+                    display: brandingVisibility.canvas ? 'flex' : 'none',
+                }, children: [branding.watermark.icon ?? null, _jsx("span", { children: branding.watermark.text })] })), _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, zIndexMode: "manual", colorMode: theme.mode, proOptions: hideAttribution ? { hideAttribution: true } : undefined, children: [_jsx(Background, { style: { display: canvas.showBackground ? 'block' : 'none' }, color: canvas.gridColor === 'auto' ? theme.color.gray2 : canvas.gridColor, gap: canvas.backgroundGap, size: canvas.backgroundSize }), canvas.showControls && (_jsx("div", { className: "ga-no-export", children: _jsx(Controls, { position: canvas.controlsPosition, 
                             // Remove the "lock" (interactive) button; we want pan/zoom always available.
                             showInteractive: false }) })), ((download?.enabled ?? canvas.showControls) && download?.enabled !== false) && (_jsx(Panel, { position: cornerToPanelPosition(download?.position ?? 'top-right'), className: "ga-no-export", children: _jsx("button", { type: "button", onClick: onDownload, "aria-label": "Download diagram", title: "Download", style: {
                                 display: 'inline-flex',

package/dist/components/edges/RoutedEdge.d.ts

@@ -2,10 +2,9 @@
  * RoutedEdge — Renders a pre-computed SVG path from dagre waypoints,
  * with optional ER cardinality markers (crow's foot notation).
  *
- * Instead of using SVG <marker> definitions (which have unreliable
- * orient/refX behavior across browsers), we draw cardinality symbols
- * as explicit SVG elements at the path endpoints using the tangent
- * angle computed during edge routing.
+ * Edge lines render in the default edge SVG layer (below nodes).
+ * Cardinality symbols render in EdgeLabelRenderer (above nodes),
+ * so they're never hidden behind ER card bodies or shadows.
  */
 import type { EdgeProps } from '@xyflow/react';
 export declare function RoutedEdge({ data, markerEnd, style, label, labelStyle, labelBgStyle, labelBgPadding, labelBgBorderRadius, }: EdgeProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/edges/RoutedEdge.js

@@ -1,14 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * RoutedEdge — Renders a pre-computed SVG path from dagre waypoints,
  * with optional ER cardinality markers (crow's foot notation).
  *
- * Instead of using SVG <marker> definitions (which have unreliable
- * orient/refX behavior across browsers), we draw cardinality symbols
- * as explicit SVG elements at the path endpoints using the tangent
- * angle computed during edge routing.
+ * Edge lines render in the default edge SVG layer (below nodes).
+ * Cardinality symbols render in EdgeLabelRenderer (above nodes),
+ * so they're never hidden behind ER card bodies or shadows.
  */
-import { BaseEdge } from '@xyflow/react';
+import { BaseEdge, EdgeLabelRenderer } from '@xyflow/react';
 import { useTheme } from '../../ThemeContext.js';
 // ─── Cardinality Drawing ────────────────────────────────────────────────────
 //
@@ -195,5 +194,13 @@ export function RoutedEdge({ data, markerEnd, style, label, labelStyle, labelBgS
     const endX = data?.pathEndX;
     const endY = data?.pathEndY;
     const endAngle = data?.pathEndAngle;
-    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { path: svgPath, markerEnd: hasCardinality ? undefined : markerEnd, style: style, label: label, labelX: labelX, labelY: labelY, labelStyle: labelStyle, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius }), cardSource && startX != null && startY != null && startAngle != null && (_jsx(CardinalitySymbol, { card: cardSource, token: cardSourceToken, isSourceEnd: true, x: startX, y: startY, angle: startAngle, color: edgeColor, bgColor: bgColor })), cardTarget && endX != null && endY != null && endAngle != null && (_jsx(CardinalitySymbol, { card: cardTarget, token: cardTargetToken, isSourceEnd: false, x: endX, y: endY, angle: endAngle, color: edgeColor, bgColor: bgColor }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(BaseEdge, { path: svgPath, markerEnd: hasCardinality ? undefined : markerEnd, style: style, label: label, labelX: labelX, labelY: labelY, labelStyle: labelStyle, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding, labelBgBorderRadius: labelBgBorderRadius }), hasCardinality && (_jsx(EdgeLabelRenderer, { children: _jsxs("svg", { style: {
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: 0,
+                        height: 0,
+                        overflow: 'visible',
+                        pointerEvents: 'none',
+                    }, children: [cardSource && startX != null && startY != null && startAngle != null && (_jsx(CardinalitySymbol, { card: cardSource, token: cardSourceToken, isSourceEnd: true, x: startX, y: startY, angle: startAngle, color: edgeColor, bgColor: bgColor })), cardTarget && endX != null && endY != null && endAngle != null && (_jsx(CardinalitySymbol, { card: cardTarget, token: cardTargetToken, isSourceEnd: false, x: endX, y: endY, angle: endAngle, color: edgeColor, bgColor: bgColor }))] }) }))] }));
 }

package/dist/components/exportPng.d.ts

@@ -0,0 +1,46 @@
+/**
+ * exportPng.ts
+ *
+ * Zero-dependency PNG export using native browser APIs.
+ * Replaces html-to-image (which regressed in versions > 1.11.11,
+ * producing blank exports and crashing on cross-origin font stylesheets).
+ *
+ * Pipeline: clone → inline computed styles → consumer mutations →
+ *           embed images → serialize XHTML → SVG foreignObject →
+ *           Image → Canvas → PNG Blob
+ */
+interface ExportToPngOptions {
+    /** Width of the exported image in CSS pixels. */
+    width: number;
+    /** Height of the exported image in CSS pixels. */
+    height: number;
+    /** Device pixel ratio (higher = sharper). Default 2. */
+    pixelRatio?: number;
+    /** Background fill color. Default '#ffffff'. */
+    backgroundColor?: string;
+    /**
+     * Called for each child element during filtering.
+     * Return false to exclude the element from the export.
+     */
+    filter?: (element: Element) => boolean;
+    /**
+     * Called after the clone is created and styles are inlined,
+     * but before serialization. Use this to mutate the clone
+     * (viewport transforms, branding visibility, etc.).
+     */
+    onClone?: (clone: HTMLElement) => void;
+}
+/**
+ * Export a DOM element to a PNG Blob using native browser APIs.
+ *
+ * 1. Clone the element
+ * 2. Inline all computed styles (so the clone is self-contained)
+ * 3. Filter out unwanted children
+ * 4. Embed external images as data URIs
+ * 5. Let consumer mutate the clone
+ * 6. Serialize to XHTML → wrap in SVG foreignObject
+ * 7. Load SVG as Image → draw to Canvas → export PNG Blob
+ */
+declare function exportToPng(element: HTMLElement, options: ExportToPngOptions): Promise<Blob>;
+export { exportToPng };
+export type { ExportToPngOptions };

package/dist/components/exportPng.js

@@ -0,0 +1,156 @@
+/**
+ * exportPng.ts
+ *
+ * Zero-dependency PNG export using native browser APIs.
+ * Replaces html-to-image (which regressed in versions > 1.11.11,
+ * producing blank exports and crashing on cross-origin font stylesheets).
+ *
+ * Pipeline: clone → inline computed styles → consumer mutations →
+ *           embed images → serialize XHTML → SVG foreignObject →
+ *           Image → Canvas → PNG Blob
+ */
+// ---------------------------------------------------------------------------
+// Style inlining
+// ---------------------------------------------------------------------------
+/**
+ * Recursively copy every computed style from the live DOM onto a clone.
+ * Both trees must be structurally identical (call before any filtering).
+ */
+function inlineStyles(source, target) {
+    const isStyleable = (source instanceof HTMLElement || source instanceof SVGElement) &&
+        (target instanceof HTMLElement || target instanceof SVGElement);
+    if (isStyleable) {
+        const computed = window.getComputedStyle(source);
+        const len = computed.length;
+        let css = '';
+        for (let i = 0; i < len; i++) {
+            const prop = computed[i];
+            css += `${prop}:${computed.getPropertyValue(prop)};`;
+        }
+        target.style.cssText = css;
+    }
+    const srcKids = source.children;
+    const tgtKids = target.children;
+    const count = Math.min(srcKids.length, tgtKids.length);
+    for (let i = 0; i < count; i++) {
+        inlineStyles(srcKids[i], tgtKids[i]);
+    }
+}
+// ---------------------------------------------------------------------------
+// Filtering
+// ---------------------------------------------------------------------------
+/** Recursively remove elements from a clone that fail the predicate. */
+function applyFilter(root, filter) {
+    for (let i = root.children.length - 1; i >= 0; i--) {
+        const child = root.children[i];
+        if (!filter(child)) {
+            child.remove();
+        }
+        else {
+            applyFilter(child, filter);
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Image embedding
+// ---------------------------------------------------------------------------
+/**
+ * Convert <img> elements with external src to data URIs so they render
+ * inside the SVG foreignObject sandbox (which blocks external resources).
+ */
+async function embedImages(root) {
+    const imgs = root.querySelectorAll('img');
+    for (const img of Array.from(imgs)) {
+        const src = img.getAttribute('src') ?? '';
+        if (!src || src.startsWith('data:'))
+            continue;
+        try {
+            const resp = await fetch(src);
+            const blob = await resp.blob();
+            const dataUrl = await new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = reject;
+                reader.readAsDataURL(blob);
+            });
+            img.setAttribute('src', dataUrl);
+        }
+        catch {
+            // Non-critical: image won't appear in export
+        }
+    }
+}
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+/**
+ * Export a DOM element to a PNG Blob using native browser APIs.
+ *
+ * 1. Clone the element
+ * 2. Inline all computed styles (so the clone is self-contained)
+ * 3. Filter out unwanted children
+ * 4. Embed external images as data URIs
+ * 5. Let consumer mutate the clone
+ * 6. Serialize to XHTML → wrap in SVG foreignObject
+ * 7. Load SVG as Image → draw to Canvas → export PNG Blob
+ */
+async function exportToPng(element, options) {
+    const { width, height, pixelRatio = 2, backgroundColor = '#ffffff', filter, onClone, } = options;
+    // 1. Clone (exact structural copy — indices must match source for inlining)
+    const clone = element.cloneNode(true);
+    // 2. Inline computed styles from the live DOM (before any structural changes)
+    inlineStyles(element, clone);
+    // 3. Filter unwanted elements (safe now — inlining already used aligned indices)
+    if (filter)
+        applyFilter(clone, filter);
+    // 4. Embed external images as data URIs
+    await embedImages(clone);
+    // 5. Let consumer mutate the styled clone (viewport transforms, branding, etc.)
+    if (onClone)
+        onClone(clone);
+    // 6. Lock clone dimensions for the export frame
+    clone.style.width = `${width}px`;
+    clone.style.height = `${height}px`;
+    clone.style.overflow = 'hidden';
+    clone.style.margin = '0';
+    // 7. Serialize to XHTML
+    const xhtml = new XMLSerializer().serializeToString(clone);
+    // 8. Wrap in SVG foreignObject
+    const svg = [
+        `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">`,
+        `<foreignObject x="0" y="0" width="100%" height="100%">`,
+        xhtml,
+        `</foreignObject>`,
+        `</svg>`,
+    ].join('');
+    const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    try {
+        // 9. Load SVG as Image
+        const img = await new Promise((resolve, reject) => {
+            const image = new Image();
+            image.onload = () => resolve(image);
+            image.onerror = () => reject(new Error('SVG image failed to load — export aborted'));
+            image.src = svgUrl;
+        });
+        // 10. Draw to high-DPI canvas
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.ceil(width * pixelRatio);
+        canvas.height = Math.ceil(height * pixelRatio);
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            throw new Error('Cannot create canvas 2d context');
+        ctx.scale(pixelRatio, pixelRatio);
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, width, height);
+        ctx.drawImage(img, 0, 0, width, height);
+        // 11. Export as PNG blob
+        return await new Promise((resolve, reject) => {
+            canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Canvas toBlob returned null'))), 'image/png', 1.0);
+        });
+    }
+    finally {
+        URL.revokeObjectURL(svgUrl);
+    }
+}
+export { exportToPng };

package/dist/components/nodes/ClassNode.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { memo } from 'react';
 import { Handle, Position } from '@xyflow/react';
 import { useTheme } from '../../ThemeContext.js';
+import { getConfig } from '../../config.js';
 const invisibleHandle = {
     opacity: 0,
     width: 1,
@@ -27,6 +28,7 @@ function ClassHandles({ fwIn, fwOut }) {
 }
 export const ClassNode = memo(function ClassNode({ data }) {
     const theme = useTheme();
+    const { layout } = getConfig();
     const label = String(data.label ?? '');
     const props = data.properties ?? [];
     const methods = data.methods ?? [];
@@ -34,11 +36,16 @@ export const ClassNode = memo(function ClassNode({ data }) {
     const fwIn = Math.max(1, data.fwIn ?? 1);
     const fwOut = Math.max(1, data.fwOut ?? 1);
     const layoutWidth = data.layoutWidth;
-    const layoutHeight = data.layoutHeight;
+    const minWidth = Number.isFinite(layoutWidth) && layoutWidth > 0
+        ? layoutWidth
+        : layout.nodeSizing.common.minWidth;
     return (_jsxs("div", { style: {
             ...theme.nodeBase.card,
             fontFamily: theme.font.mono,
-            width: layoutWidth,
+            boxSizing: 'border-box',
+            width: 'fit-content',
+            minWidth,
+            maxWidth: layout.nodeSizing.common.maxWidth,
         }, children: [_jsx("div", { style: {
                     ...theme.nodeBase.header,
                     fontFamily: theme.font.family,