@graph-artifact/core 0.1.14 → 0.1.15

package/dist/components/GraphCanvas.d.ts

@@ -72,12 +72,6 @@ interface GraphCanvasProps {
          * when exporting.
          */
         reservedBottom?: number;
-        /**
-         * 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.
-         */
-        embedFonts?: boolean;
         /** 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) {
@@ -308,74 +347,68 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             maxX = Math.max(maxX, abs.x + w);
             maxY = Math.max(maxY, abs.y + h);
         }
-        // If we can't compute bounds, fall back to exporting the full viewport.
         const canCrop = isFinite(minX) && isFinite(minY) && isFinite(maxX) && isFinite(maxY);
         const cropToGraph = download?.cropToGraph ?? true;
         const contentPad = Math.max(0, download?.cropPadding ?? 32);
-        // Reserve header/footer areas for export-only branding so they never overlap content.
         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);
-        // Create an offscreen clone so export-only UI never flashes in the live viewer.
-        const clone = root.cloneNode(true);
-        clone.style.position = 'fixed';
-        clone.style.left = '-100000px';
-        clone.style.top = '0';
-        clone.style.opacity = '0';
-        clone.style.pointerEvents = 'none';
-        clone.style.backgroundColor = backgroundColor;
-        // Remove non-export UI.
-        clone.querySelectorAll('.ga-no-export').forEach((el) => el.remove());
-        // Toggle branding visibility inside clone (download-only by default).
-        clone.querySelectorAll('[data-ga-branding]').forEach((el) => {
-            el.style.display = exportBranding ? '' : 'none';
-        });
-        // Toggle background dots in clone (defaults to off).
-        clone.querySelectorAll('.react-flow__background').forEach((el) => {
-            el.style.display = includeBackground ? '' : 'none';
-        });
+        // Compute export dimensions and viewport transform.
+        let exportWidth;
+        let exportHeight;
+        let vpTransform;
         if (cropToGraph && canCrop) {
-            const w = Math.ceil((maxX - minX) + contentPad * 2);
-            const h = Math.ceil((maxY - minY) + contentPad * 2 + reservedTop + reservedBottom);
-            clone.style.width = `${w}px`;
-            clone.style.height = `${h}px`;
-            // Reposition the viewport so content is tightly framed with padding.
-            const viewport = clone.querySelector('.react-flow__viewport');
-            if (viewport) {
-                const tx = contentPad - minX;
-                const ty = reservedTop + contentPad - minY;
-                viewport.style.transform = `translate(${tx}px, ${ty}px) scale(1)`;
-            }
-            // Ensure the React Flow container expands to the clone size.
-            const rf = clone.querySelector('.react-flow');
-            if (rf) {
-                rf.style.width = '100%';
-                rf.style.height = '100%';
-            }
+            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 {
-            // Keep the clone at the current viewport size.
-            clone.style.width = `${root.clientWidth}px`;
-            clone.style.height = `${root.clientHeight}px`;
-            // Keep current zoom so export roughly matches what the user sees.
-            const viewport = clone.querySelector('.react-flow__viewport');
-            if (viewport) {
-                viewport.style.transform = `translate(${transform[0]}px, ${transform[1]}px) scale(${zoom})`;
-            }
+            exportWidth = root.clientWidth;
+            exportHeight = root.clientHeight;
+            vpTransform = `translate(${transform[0]}px, ${transform[1]}px) scale(${zoom})`;
         }
-        document.body.appendChild(clone);
         try {
-            const blob = await toBlob(clone, {
-                cacheBust: true,
+            const blob = await exportToPng(root, {
+                width: exportWidth,
+                height: exportHeight,
                 pixelRatio,
                 backgroundColor,
-                skipFonts: !(download?.embedFonts ?? false),
+                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;
@@ -392,9 +425,6 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
             console.error('[graph-artifact] Download export failed:', error);
             download?.onError?.(error);
         }
-        finally {
-            clone.remove();
-        }
     }, [
         storeApi,
         branding,
@@ -408,7 +438,6 @@ function GraphCanvasInner({ parsed, metadata, onNodeClick, canvasOverrides, hide
         download?.cropPadding,
         download?.reservedTop,
         download?.reservedBottom,
-        download?.embedFonts,
         download?.onError,
     ]);
     if (layoutError) {

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,

package/dist/components/nodes/EntityNode.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,31 +28,54 @@ function EntityHandles({ fwIn, fwOut }) {
 }
 export const EntityNode = memo(function EntityNode({ data }) {
     const theme = useTheme();
+    const { layout } = getConfig();
     const label = String(data.label ?? '');
     const attrs = data.attributes ?? [];
     const ns = theme.nodeStyles.entity;
     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,
-            width: layoutWidth,
-        }, children: [_jsx("div", { style: { ...theme.nodeBase.header, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, title: label, children: label }), attrs.length > 0 && (_jsx("div", { style: { padding: `${theme.space[2]} ${theme.space[3]}` }, children: attrs.map((attr, i) => {
-                    const parts = attr.split(' ');
-                    const type = parts[0] ?? '';
-                    const name = parts[1] ?? '';
-                    const badge = parts[2];
-                    const badgeVariant = badge === 'PK' ? 'primary' : badge === 'FK' ? 'secondary' : 'muted';
-                    return (_jsxs("div", { style: {
+            boxSizing: 'border-box',
+            width: 'fit-content',
+            minWidth,
+            maxWidth: layout.nodeSizing.common.maxWidth,
+        }, children: [_jsxs("div", { style: { padding: `${theme.space[2]} ${theme.space[3]}` }, children: [_jsx("div", { style: {
                             display: 'flex', alignItems: 'center', gap: theme.space[2],
-                            padding: `${theme.space[1]} 0`,
-                            borderBottom: i < attrs.length - 1 ? `${theme.borderWidth.sm} solid ${theme.color.gray2}` : 'none',
                             fontSize: theme.font.size.md,
-                        }, children: [_jsx("span", { style: {
-                                    color: theme.color.gray3, minWidth: ns.typeColumnWidth,
-                                    fontFamily: theme.font.mono, fontSize: theme.font.size.sm,
-                                    flexShrink: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
-                                }, children: _jsx("span", { title: type, children: type }) }), _jsx("span", { style: { color: theme.color.gray4, flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, title: name, children: name }), badge && _jsx("span", { style: theme.nodeBase.badge(badgeVariant), children: badge })] }, i));
-                }) })), _jsx(EntityHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+                            backgroundColor: theme.color.orange1,
+                            margin: `-${theme.space[2]} -${theme.space[3]}`,
+                            marginBottom: attrs.length > 0 ? theme.space[1] : `-${theme.space[2]}`,
+                            padding: `${theme.space[2]} ${theme.space[3]}`,
+                            borderRadius: `${theme.radius.lg} ${theme.radius.lg} 0 0`,
+                        }, children: _jsx("span", { style: {
+                                color: theme.color.white,
+                                fontWeight: theme.font.weight.semibold,
+                                flex: 1,
+                                minWidth: 0,
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                textAlign: 'center',
+                            }, title: label, children: label }) }), attrs.map((attr, i) => {
+                        const parts = attr.split(' ');
+                        const type = parts[0] ?? '';
+                        const name = parts[1] ?? '';
+                        const badge = parts[2];
+                        const badgeVariant = badge === 'PK' ? 'primary' : badge === 'FK' ? 'secondary' : 'muted';
+                        return (_jsxs("div", { style: {
+                                display: 'flex', alignItems: 'center', gap: theme.space[2],
+                                padding: `${theme.space[1]} 0`,
+                                borderBottom: i < attrs.length - 1 ? `${theme.borderWidth.sm} solid ${theme.color.gray2}` : 'none',
+                                fontSize: theme.font.size.md,
+                            }, children: [_jsx("span", { style: {
+                                        color: theme.color.gray3, minWidth: ns.typeColumnWidth,
+                                        fontFamily: theme.font.mono, fontSize: theme.font.size.sm,
+                                        flexShrink: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                                    }, children: _jsx("span", { title: type, children: type }) }), _jsx("span", { style: { color: theme.color.gray4, flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }, title: name, children: name }), badge && _jsx("span", { style: theme.nodeBase.badge(badgeVariant), children: badge })] }, i));
+                    })] }), _jsx(EntityHandles, { fwIn: fwIn, fwOut: fwOut })] }));
 });