@graph-artifact/core 0.1.13 → 0.1.15

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 })] }));
 });

package/dist/components/nodes/FlowNode.js

@@ -72,13 +72,20 @@ function NodeHandles({ fwIn, fwOut }) {
  * source handles are needed at each position (bottom, left, right) based on
  * where each outgoing edge's target is located relative to the diamond center.
  *
+ * `fwIn` specifies how many incoming edges need target handles (for spreading).
+ *
  * Fallback: if no config is provided (single outgoing), uses bottom handle.
  */
-function DiamondHandles({ handleConfig }) {
+function DiamondHandles({ handleConfig, fwIn = 1 }) {
     const bottom = handleConfig?.bottom ?? 1;
     const left = handleConfig?.left ?? 0;
     const right = handleConfig?.right ?? 0;
-    return (_jsxs(_Fragment, { children: [_jsx(Handle, { type: "target", id: "fw-target-0", position: Position.Top, style: invisibleHandle }), Array.from({ length: bottom }, (_, i) => (_jsx(Handle, { type: "source", id: `fw-source-bottom-${i}`, position: Position.Bottom, style: invisibleHandle }, `db-${i}`))), Array.from({ length: left }, (_, i) => (_jsx(Handle, { type: "source", id: `fw-source-left-${i}`, position: Position.Left, style: invisibleHandle }, `dl-${i}`))), Array.from({ length: right }, (_, i) => (_jsx(Handle, { type: "source", id: `fw-source-right-${i}`, position: Position.Right, style: invisibleHandle }, `dr-${i}`))), _jsx(Handle, { type: "source", id: "fw-source-0", position: Position.Bottom, style: invisibleHandle }), _jsx(SideHandles, { side: "left" }), _jsx(SideHandles, { side: "right" }), _jsx(Handle, { type: "target", id: "lateral-target", position: Position.Left, style: invisibleHandle }), _jsx(Handle, { type: "source", id: "lateral-source", position: Position.Right, style: invisibleHandle })] }));
+    // Spread multiple incoming target handles across the top edge
+    const targetCount = Math.max(1, fwIn);
+    const targetPositions = targetCount === 1
+        ? [50]
+        : Array.from({ length: targetCount }, (_, i) => 25 + (50 * i) / (targetCount - 1));
+    return (_jsxs(_Fragment, { children: [targetPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `fw-target-${i}`, position: Position.Top, style: { ...invisibleHandle, left: `${pct}%` } }, `dt-${i}`))), Array.from({ length: bottom }, (_, i) => (_jsx(Handle, { type: "source", id: `fw-source-bottom-${i}`, position: Position.Bottom, style: invisibleHandle }, `db-${i}`))), Array.from({ length: left }, (_, i) => (_jsx(Handle, { type: "source", id: `fw-source-left-${i}`, position: Position.Left, style: invisibleHandle }, `dl-${i}`))), Array.from({ length: right }, (_, i) => (_jsx(Handle, { type: "source", id: `fw-source-right-${i}`, position: Position.Right, style: invisibleHandle }, `dr-${i}`))), _jsx(Handle, { type: "source", id: "fw-source-0", position: Position.Bottom, style: invisibleHandle }), _jsx(SideHandles, { side: "left" }), _jsx(SideHandles, { side: "right" }), _jsx(Handle, { type: "target", id: "lateral-target", position: Position.Left, style: invisibleHandle }), _jsx(Handle, { type: "source", id: "lateral-source", position: Position.Right, style: invisibleHandle })] }));
 }
 export const FlowNode = memo(function FlowNode({ data }) {
     const theme = useTheme();
@@ -94,7 +101,15 @@ export const FlowNode = memo(function FlowNode({ data }) {
     const nodeBgColor = data.nodeBgColor ?? theme.color.orange1;
     const nodeTextColor = data.nodeTextColor ?? theme.color.white;
     const markdownComponents = {
-        p: ({ children }) => (_jsx("p", { style: { margin: 0, whiteSpace: 'pre-wrap', lineHeight: theme.lineHeight.normal }, children: children })),
+        p: ({ children }) => (_jsx("p", { style: {
+                margin: 0,
+                whiteSpace: 'pre-wrap',
+                lineHeight: theme.lineHeight.normal,
+                // Ensure long unbroken glyph runs (e.g. box-drawing lines) don't
+                // visually overflow fixed-width nodes, which breaks subgraph bounds.
+                overflowWrap: 'anywhere',
+                wordBreak: 'break-word',
+            }, children: children })),
         strong: ({ children }) => (_jsx("strong", { style: { fontWeight: theme.font.weight.bold }, children: children })),
         em: ({ children }) => (_jsx("em", { style: { fontStyle: 'italic' }, children: children })),
         code: ({ children }) => (_jsx("code", { style: {
@@ -122,11 +137,11 @@ export const FlowNode = memo(function FlowNode({ data }) {
                         transform: 'rotate(45deg)', borderRadius: theme.radius.md,
                         display: 'flex', alignItems: 'center', justifyContent: 'center',
                     }, children: _jsx("span", { style: {
-                            transform: 'rotate(-45deg)', color: theme.color.white, fontSize: theme.font.size.base,
+                            transform: 'rotate(-45deg)', color: theme.color.white, fontSize: theme.font.size.lg,
                             fontWeight: theme.font.weight.bold, fontFamily: theme.font.family,
                             textAlign: 'center', lineHeight: theme.lineHeight.tight,
                             padding: theme.space[2], maxWidth: ns.diamond.labelMaxWidth, overflowWrap: 'break-word',
-                        }, children: _jsx(ReactMarkdown, { components: markdownComponents, children: labelMarkdown }) }) }), _jsx(DiamondHandles, { handleConfig: data.diamondHandleConfig })] }));
+                        }, children: _jsx(ReactMarkdown, { components: markdownComponents, children: labelMarkdown }) }) }), _jsx(DiamondHandles, { handleConfig: data.diamondHandleConfig, fwIn: data.fwIn })] }));
     }
     if (shape === 'circle') {
         return (_jsxs("div", { style: {
@@ -135,8 +150,8 @@ export const FlowNode = memo(function FlowNode({ data }) {
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
                 fontFamily: theme.font.family,
             }, children: [_jsx(Handle, { type: "target", id: "fw-target-0", position: Position.Top, style: invisibleHandle }), _jsx("span", { style: {
-                        color: nodeTextColor, fontSize: theme.font.size.md, fontWeight: theme.font.weight.bold,
-                        textAlign: 'center', padding: theme.space[1], maxWidth: '100%', overflowWrap: 'break-word',
+                        color: nodeTextColor, fontSize: theme.font.size.lg, fontWeight: theme.font.weight.bold,
+                        textAlign: 'center', padding: theme.space[2], maxWidth: '100%', overflowWrap: 'break-word',
                     }, children: _jsx(ReactMarkdown, { components: markdownComponents, children: labelMarkdown }) }), _jsx(Handle, { type: "source", id: "fw-source-0", position: Position.Bottom, style: invisibleHandle }), _jsx(NodeHandles, { fwIn: fwIn, fwOut: fwOut })] }));
     }
     if (shape === 'cylinder') {

package/dist/components/nodes/StateNode.js

@@ -34,29 +34,25 @@ export const StateNode = memo(function StateNode({ data }) {
     const fwOut = Math.max(1, data.fwOut ?? 1);
     const layoutWidth = data.layoutWidth;
     const layoutHeight = data.layoutHeight;
-    // Start state: filled circle
+    // Start state: ring with thick orange border and transparent center
     if (shape === 'circle') {
         return (_jsx("div", { style: {
-                width: layoutWidth, height: layoutHeight,
-                backgroundColor: theme.color.orange1, borderRadius: theme.radius.full,
+                width: layoutWidth,
+                height: layoutHeight,
+                boxSizing: 'border-box',
+                borderRadius: theme.radius.full,
+                border: `10px solid ${theme.color.orange1}`,
+                backgroundColor: 'transparent',
             }, children: _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut }) }));
     }
-    // End state: bullseye (outer ring + inner filled dot).
-    // layoutWidth/layoutHeight include the border, so use box-sizing: border-box.
+    // End state: solid filled circle
     if (shape === 'doublecircle') {
-        const innerSize = layoutWidth - 16; // outer - padding(8) - border(3)*2
-        return (_jsxs("div", { style: {
-                width: layoutWidth, height: layoutHeight,
-                boxSizing: 'border-box',
+        return (_jsx("div", { style: {
+                width: layoutWidth,
+                height: layoutHeight,
+                backgroundColor: theme.color.orange1,
                 borderRadius: theme.radius.full,
-                border: `${theme.borderWidth.md} solid ${theme.color.orange1}`,
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }, children: [_jsx("div", { style: {
-                        width: innerSize, height: innerSize,
-                        // Inner fill: dark in dark mode, dark gray in light mode.
-                        backgroundColor: theme.mode === 'dark' ? theme.color.darkBg2 : theme.color.gray5,
-                        borderRadius: theme.radius.full,
-                    } }), _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+            }, children: _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut }) }));
     }
     return (_jsxs("div", { style: {
             backgroundColor: theme.color.orange1,

package/dist/components/nodes/SubgraphNode.js

@@ -6,10 +6,10 @@ export const SubgraphNode = memo(function SubgraphNode({ data }) {
     const label = String(data.label ?? '');
     const ns = theme.nodeStyles.subgraph;
     return (_jsx("div", { style: {
-            fontSize: theme.font.size.sm,
+            fontSize: theme.font.size.base,
             fontWeight: theme.font.weight.semibold,
             fontFamily: theme.font.family,
-            color: theme.color.gray3,
+            color: theme.mode === 'dark' ? theme.color.white : theme.color.gray5,
             padding: `${theme.space[1]} ${theme.space[2]}`,
             pointerEvents: ns.pointerEvents,
         }, children: label }));

package/dist/config.d.ts

@@ -8,7 +8,7 @@
  * Consumers call `configure()` once at module load time. Every internal module
  * reads from `getConfig()`. Nothing is hardcoded elsewhere.
  */
-import type { ThemeOverride, NodeComponent, NodeChildComponent } from './types.js';
+import type { NodeChildComponent, NodeComponent, ThemeOverride } from './types.js';
 export interface GraphConfig {
     /** Which theme to use as the base token set ('dark', 'light', or any registered name) */
     baseTheme: string;

package/dist/config.js

@@ -15,11 +15,11 @@ function createDefaultConfig() {
         theme: {},
         layout: {
             rankSep: 30,
-            erRankSep: 60,
-            stateRankSep: 60,
+            erRankSep: 100,
+            stateRankSep: 25,
             nodeSep: 30,
-            erNodeSep: 80,
-            stateNodeSep: 40,
+            erNodeSep: 120,
+            stateNodeSep: 20,
             subgraphPadding: 16,
             nodeSizing: {
                 charWidth: 9,
@@ -27,11 +27,11 @@ function createDefaultConfig() {
                 er: { width: 220, headerHeight: 33, rowHeight: 23, borderExtra: 2 },
                 class: { width: 240, headerHeight: 33, rowHeight: 20, dividerGap: 17 },
                 state: {
-                    circleSize: 28, doublecirclePad: 8, doublecircleBorder: 3,
+                    circleSize: 36, doublecirclePad: 0, doublecircleBorder: 0,
                     minWidth: 100, height: 40, padding: 32, borderExtra: 6,
                 },
                 flow: {
-                    diamondSize: 120, circleSize: 80, cylinderWidth: 120, cylinderHeight: 70,
+                    diamondSize: 150, circleSize: 100, cylinderWidth: 120, cylinderHeight: 70,
                     minWidth: 120, height: 44, padding: 40,
                 },
             },
@@ -45,7 +45,7 @@ function createDefaultConfig() {
                 labelGapBelow: 6,
                 topPadding: 20,
                 leftPadding: 40,
-                lifelineStartOffset: 40,
+                lifelineStartOffset: 0, // Lifelines connect directly to participant bottom
                 bottomParticipantGap: 40,
                 anchorWidth: 2,
                 anchorHeight: 2,

package/dist/layout/dagre/index.js

@@ -112,6 +112,48 @@ export function createDagreGraph(parsed, layoutConfig, nodeSizeOverrides) {
             }
         }
     }
+    // Calculate actual depth (longest path) for each subgraph
+    const subgraphDepth = new Map();
+    if (parsed.subgraphs) {
+        for (const sg of parsed.subgraphs) {
+            const internalNodes = new Set(sg.nodeIds);
+            // Build adjacency list for internal edges
+            const adj = new Map();
+            for (const nodeId of sg.nodeIds) {
+                adj.set(nodeId, []);
+            }
+            for (const edge of parsed.edges) {
+                if (internalNodes.has(edge.source) && internalNodes.has(edge.target)) {
+                    adj.get(edge.source)?.push(edge.target);
+                }
+            }
+            // Find longest path using DFS with cycle detection
+            const memo = new Map();
+            const visiting = new Set();
+            function longestPath(node) {
+                if (memo.has(node))
+                    return memo.get(node);
+                if (visiting.has(node))
+                    return 0; // Cycle detected, stop recursion
+                visiting.add(node);
+                const neighbors = adj.get(node) ?? [];
+                let maxDepth = 0;
+                for (const neighbor of neighbors) {
+                    maxDepth = Math.max(maxDepth, 1 + longestPath(neighbor));
+                }
+                visiting.delete(node);
+                memo.set(node, maxDepth);
+                return maxDepth;
+            }
+            // Find max depth from any starting node
+            let maxDepth = 0;
+            for (const nodeId of sg.nodeIds) {
+                maxDepth = Math.max(maxDepth, longestPath(nodeId));
+            }
+            // Just use the depth + 1 for minimal clearance
+            subgraphDepth.set(sg.id, maxDepth + 1);
+        }
+    }
     parsed.edges.forEach((edge, i) => {
         // Pass label dimensions to dagre so it spaces edges apart
         // and generates better waypoints. Without this, dagre treats
@@ -126,12 +168,19 @@ export function createDagreGraph(parsed, layoutConfig, nodeSizeOverrides) {
             g.setNode(dagreSrc, fallbackNode);
         if (!g.hasNode(dagreTgt))
             g.setNode(dagreTgt, fallbackNode);
+        // For edges FROM a subgraph, add minlen based on actual subgraph depth
+        let minlen = 1;
+        if (edge.sourceSubgraphId) {
+            // Use calculated depth to push target just below subgraph
+            minlen = subgraphDepth.get(edge.sourceSubgraphId) ?? 2;
+        }
         // Use index as edge name for multigraph — prevents overwriting when
         // multiple edges exist between the same source→target pair.
         g.setEdge(dagreSrc, dagreTgt, {
             width: labelWidth,
             height: labelHeight,
             labelpos: 'c',
+            minlen,
         }, `e${i}`);
     });
     try {

package/dist/layout/dagre/nodeSizing.js

@@ -134,13 +134,14 @@ function erNodeSize(node, sizing) {
     const attrCount = node.attributes?.length ?? 0;
     const attrs = node.attributes ?? [];
     // Height breakdown (mirrors EntityNode CSS):
-    //   headerHeight:  header padding (space[2]*2) + font (size.lg) + line-height
-    //   sectionPad:    attribute wrapper padding (space[2]*2 = 8+8 = 16px)
+    //   sectionPad:    wrapper padding (space[2]*2 = 8+8 = 16px)
+    //   headerRow:     header row height (same as attribute rows)
     //   rowHeight:     per-row padding (space[1]*2 = 4+4) + font (size.md) * line-height
-    //   dividers:      1px borderBottom between attribute rows
+    //   dividers:      1px borderBottom between rows (header + attrs - 1)
     //   borderExtra:   card border (borderWidth.sm * 2 = 1+1 = 2px)
-    const sectionPad = attrCount > 0 ? 16 : 0;
-    const dividers = attrCount > 1 ? attrCount - 1 : 0;
+    const sectionPad = 16; // always have wrapper padding now
+    const totalRows = 1 + attrCount; // header + attributes
+    const dividers = totalRows > 1 ? totalRows - 1 : 0;
     const badgeRoom = attrs.some((attr) => {
         const t = attr.trim().split(/\s+/);
         return t[2] === 'PK' || t[2] === 'FK' || t[2] === 'UK';
@@ -157,9 +158,8 @@ function erNodeSize(node, sizing) {
     const estimatedWidth = Math.max(sizing.er.width, 24 + 90 + 8 + contentChars * sizing.charWidth + badgeRoom);
     return {
         width: clampWidth(estimatedWidth),
-        height: sizing.er.headerHeight
-            + sectionPad
-            + attrCount * sizing.er.rowHeight
+        height: sectionPad
+            + totalRows * sizing.er.rowHeight
             + dividers
             + sizing.er.borderExtra,
     };