@graph-artifact/core 0.1.0

package/dist/components/edges/RoutedEdge.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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.
+ */
+import { BaseEdge } from '@xyflow/react';
+import { useTheme } from '../../ThemeContext.js';
+// ─── Cardinality Drawing ────────────────────────────────────────────────────
+//
+// Matches Mermaid's crow's foot notation:
+//
+//   ONLY_ONE    ||   Two perpendicular lines near node
+//   ZERO_OR_ONE o|   Perpendicular line near node, circle farther away
+//   ONE_OR_MORE |{   Perpendicular line at node, crow's foot fanning outward
+//   ZERO_OR_MORE o{  Crow's foot fanning outward, circle beyond tips
+//
+// Coordinate system:
+//   `d` = distance from node boundary (0 = at boundary, positive = away from node)
+//   `p` = perpendicular offset (positive = left when facing away from node)
+const SW = 1.5; // stroke width
+const H = 7; // half-height of perpendicular tick marks
+const CR = 5; // circle radius
+const FOOT = 10; // crow's foot length (base to tips)
+const NODE_CLEARANCE = 2; // keep symbols just outside node boundary
+function snapAngleToCardinal(angle) {
+    const cx = Math.cos(angle);
+    const cy = Math.sin(angle);
+    const ax = Math.abs(cx);
+    const ay = Math.abs(cy);
+    // Near-vertical
+    if (ax < 0.12)
+        return cy >= 0 ? Math.PI / 2 : -Math.PI / 2;
+    // Near-horizontal
+    if (ay < 0.12)
+        return cx >= 0 ? 0 : Math.PI;
+    return angle;
+}
+/**
+ * Draws a cardinality symbol at the path endpoint, oriented along the edge.
+ *
+ * `angle` points FROM the path toward the node (in radians).
+ * We draw AWAY from the node, so we negate the angle direction.
+ */
+function CardinalitySymbol({ card, token, isSourceEnd, x, y, angle, color, bgColor, }) {
+    const snapped = snapAngleToCardinal(angle);
+    // "away" direction: opposite of angle (away from node)
+    const awayX = -Math.cos(snapped);
+    const awayY = -Math.sin(snapped);
+    // perpendicular (90° CCW from away direction)
+    const perpX = -awayY;
+    const perpY = awayX;
+    // Point at (d, p): d = distance away from node, p = perpendicular offset
+    function pt(d, p) {
+        return [
+            x + awayX * (d + NODE_CLEARANCE) + perpX * p,
+            y + awayY * (d + NODE_CLEARANCE) + perpY * p,
+        ];
+    }
+    const elements = [];
+    function line(d1, p1, d2, p2, key) {
+        const [x1, y1] = pt(d1, p1);
+        const [x2, y2] = pt(d2, p2);
+        elements.push(_jsx("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: color, strokeWidth: SW }, key));
+    }
+    function circle(d, key) {
+        const [cx, cy] = pt(d, 0);
+        elements.push(_jsx("circle", { cx: cx, cy: cy, r: CR, stroke: color, strokeWidth: SW, fill: bgColor }, key));
+    }
+    function tick(d, key) {
+        line(d, -H, d, H, key);
+    }
+    // Crow's foot: 3 lines from a point near node fanning to spread tips away
+    function crowsFoot(baseD) {
+        const tipD = baseD + FOOT;
+        line(baseD, 0, tipD, -H, 'f1');
+        line(baseD, 0, tipD, 0, 'f2');
+        line(baseD, 0, tipD, H, 'f3');
+    }
+    function glyphKindFromTokenChar(ch) {
+        if (!ch)
+            return null;
+        if (ch === '|')
+            return 'tick';
+        if (ch === 'o')
+            return 'circle';
+        if (ch === '{' || ch === '}')
+            return 'crow';
+        return null;
+    }
+    function resolveNearFar(cardinality) {
+        let near;
+        let far;
+        switch (cardinality) {
+            case 'ZERO_OR_ONE':
+                near = 'tick';
+                far = 'circle';
+                break;
+            case 'ONE_OR_MORE':
+                near = 'tick';
+                far = 'crow';
+                break;
+            case 'ZERO_OR_MORE':
+                near = 'crow';
+                far = 'circle';
+                break;
+            default:
+                return null;
+        }
+        if (token && token.length >= 2) {
+            const nearChar = isSourceEnd ? token[0] : token[token.length - 1];
+            const farChar = isSourceEnd ? token[token.length - 1] : token[0];
+            const nearFromToken = glyphKindFromTokenChar(nearChar);
+            const farFromToken = glyphKindFromTokenChar(farChar);
+            if (nearFromToken && farFromToken) {
+                const expected = [near, far].sort().join(':');
+                const tokenKinds = [nearFromToken, farFromToken].sort().join(':');
+                if (expected === tokenKinds) {
+                    return { near: nearFromToken, far: farFromToken };
+                }
+            }
+        }
+        return { near, far };
+    }
+    function drawOrdered(near, far) {
+        if (near === 'tick' && far === 'circle') {
+            tick(0, 't1');
+            circle(6 + CR, 'c1');
+            return;
+        }
+        if (near === 'circle' && far === 'tick') {
+            circle(CR, 'c1');
+            tick(10, 't1');
+            return;
+        }
+        if (near === 'tick' && far === 'crow') {
+            tick(0, 't1');
+            crowsFoot(4);
+            return;
+        }
+        if (near === 'crow' && far === 'tick') {
+            crowsFoot(0);
+            tick(FOOT + 2, 't1');
+            return;
+        }
+        if (near === 'crow' && far === 'circle') {
+            crowsFoot(0);
+            circle(FOOT + CR + 2, 'c1');
+            return;
+        }
+        if (near === 'circle' && far === 'crow') {
+            circle(CR, 'c1');
+            crowsFoot(CR + 2);
+        }
+    }
+    switch (card) {
+        case 'ONLY_ONE': // || — two tick marks
+            tick(0, 't1');
+            tick(6, 't2');
+            break;
+        case 'ZERO_OR_ONE':
+        case 'ONE_OR_MORE':
+        case 'ZERO_OR_MORE': {
+            const ordered = resolveNearFar(card);
+            if (ordered)
+                drawOrdered(ordered.near, ordered.far);
+            break;
+        }
+    }
+    return _jsx("g", { children: elements });
+}
+// ─── Main Component ──────────────────────────────────────────────────────────
+export function RoutedEdge({ data, markerEnd, style, label, labelStyle, labelBgStyle, labelBgPadding, labelBgBorderRadius, }) {
+    const theme = useTheme();
+    const svgPath = data?.svgPath ?? '';
+    const labelX = data?.labelX ?? 0;
+    const labelY = data?.labelY ?? 0;
+    const cardSource = data?.cardSource;
+    const cardTarget = data?.cardTarget;
+    const cardSourceToken = data?.cardSourceToken;
+    const cardTargetToken = data?.cardTargetToken;
+    if (!svgPath)
+        return null;
+    const edgeColor = style?.stroke ?? String(theme.edgeDefaults.style.stroke ?? theme.color.gray3);
+    const bgColor = data?.bgColor ?? theme.color.darkBg2;
+    const hasCardinality = cardSource || cardTarget;
+    // Endpoint data passed directly from edge routing (no SVG parsing needed)
+    const startX = data?.pathStartX;
+    const startY = data?.pathStartY;
+    const startAngle = data?.pathStartAngle;
+    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 }))] }));
+}

package/dist/components/nodes/ClassNode.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    data: Record<string, unknown>;
+}
+export declare const ClassNode: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/nodes/ClassNode.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { useTheme } from '../../ThemeContext.js';
+const invisibleHandle = {
+    opacity: 0,
+    width: 1,
+    height: 1,
+    border: 'none',
+    background: 'transparent',
+    pointerEvents: 'none',
+};
+function spreadPositions(count) {
+    const n = Math.max(1, count);
+    return Array.from({ length: n }, (_, i) => ((i + 1) / (n + 1)) * 100);
+}
+const SIDE_SLOTS = 5;
+const sideSlotPositions = spreadPositions(SIDE_SLOTS);
+function SideHandles({ side }) {
+    const position = side === 'left' ? Position.Left : Position.Right;
+    return (_jsxs(_Fragment, { children: [sideSlotPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `back-${side}-target-${i}`, position: position, style: { ...invisibleHandle, top: `${pct}%` } }, `${side}-t-${i}`))), sideSlotPositions.map((pct, i) => (_jsx(Handle, { type: "source", id: `back-${side}-source-${i}`, position: position, style: { ...invisibleHandle, top: `${pct}%` } }, `${side}-s-${i}`)))] }));
+}
+function ClassHandles({ fwIn, fwOut }) {
+    const targetPositions = spreadPositions(fwIn);
+    const sourcePositions = spreadPositions(fwOut);
+    return (_jsxs(_Fragment, { children: [targetPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `fw-target-${i}`, position: Position.Top, style: { ...invisibleHandle, left: `${pct}%` } }, `ft-${i}`))), sourcePositions.map((pct, i) => (_jsx(Handle, { type: "source", id: `fw-source-${i}`, position: Position.Bottom, style: { ...invisibleHandle, left: `${pct}%` } }, `fs-${i}`))), _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 ClassNode = memo(function ClassNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const props = data.properties ?? [];
+    const methods = data.methods ?? [];
+    const ns = theme.nodeStyles.class;
+    const fwIn = Math.max(1, data.fwIn ?? 1);
+    const fwOut = Math.max(1, data.fwOut ?? 1);
+    const layoutWidth = data.layoutWidth;
+    const layoutHeight = data.layoutHeight;
+    return (_jsxs("div", { style: {
+            ...theme.nodeBase.card,
+            fontFamily: theme.font.mono,
+            width: layoutWidth,
+        }, children: [_jsx("div", { style: {
+                    ...theme.nodeBase.header,
+                    fontFamily: theme.font.family,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                }, title: label, children: label }), props.length > 0 && (_jsx("div", { style: {
+                    padding: `${theme.space[2]} ${theme.space[3]}`, ...theme.nodeBase.divider,
+                }, children: props.map((p, i) => (_jsx("div", { style: {
+                        fontSize: theme.font.size.sm, color: theme.color.gray4,
+                        padding: ns.rowPadding, lineHeight: theme.lineHeight.relaxed,
+                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                    }, children: _jsx("span", { title: p, children: p.replace(/^([+\-#~])/, '$1 ').trim() }) }, i))) })), methods.length > 0 && (_jsx("div", { style: { padding: `${theme.space[2]} ${theme.space[3]}` }, children: methods.map((m, i) => (_jsx("div", { style: {
+                        fontSize: theme.font.size.sm, color: theme.color.blue3,
+                        padding: ns.rowPadding, lineHeight: theme.lineHeight.relaxed,
+                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                    }, children: _jsx("span", { title: m, children: m.replace(/^([+\-#~])/, '$1 ').trim() }) }, i))) })), props.length === 0 && methods.length === 0 && (_jsx("div", { style: {
+                    padding: `${theme.space[2]} ${theme.space[3]}`, fontSize: theme.font.size.sm,
+                    color: theme.color.gray3, fontStyle: 'italic', textAlign: 'center',
+                }, children: "(empty)" })), _jsx(ClassHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+});

package/dist/components/nodes/EntityNode.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    data: Record<string, unknown>;
+}
+export declare const EntityNode: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/nodes/EntityNode.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { useTheme } from '../../ThemeContext.js';
+const invisibleHandle = {
+    opacity: 0,
+    width: 1,
+    height: 1,
+    border: 'none',
+    background: 'transparent',
+    pointerEvents: 'none',
+};
+function spreadPositions(count) {
+    const n = Math.max(1, count);
+    return Array.from({ length: n }, (_, i) => ((i + 1) / (n + 1)) * 100);
+}
+const SIDE_SLOTS = 5;
+const sideSlotPositions = spreadPositions(SIDE_SLOTS);
+function SideHandles({ side }) {
+    const position = side === 'left' ? Position.Left : Position.Right;
+    return (_jsxs(_Fragment, { children: [sideSlotPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `back-${side}-target-${i}`, position: position, style: { ...invisibleHandle, top: `${pct}%` } }, `${side}-t-${i}`))), sideSlotPositions.map((pct, i) => (_jsx(Handle, { type: "source", id: `back-${side}-source-${i}`, position: position, style: { ...invisibleHandle, top: `${pct}%` } }, `${side}-s-${i}`)))] }));
+}
+function EntityHandles({ fwIn, fwOut }) {
+    const targetPositions = spreadPositions(fwIn);
+    const sourcePositions = spreadPositions(fwOut);
+    return (_jsxs(_Fragment, { children: [targetPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `fw-target-${i}`, position: Position.Top, style: { ...invisibleHandle, left: `${pct}%` } }, `ft-${i}`))), sourcePositions.map((pct, i) => (_jsx(Handle, { type: "source", id: `fw-source-${i}`, position: Position.Bottom, style: { ...invisibleHandle, left: `${pct}%` } }, `fs-${i}`))), _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 EntityNode = memo(function EntityNode({ data }) {
+    const theme = useTheme();
+    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;
+    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: {
+                            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.d.ts

@@ -0,0 +1,5 @@
+interface Props {
+    data: Record<string, unknown>;
+}
+export declare const FlowNode: import("react").NamedExoticComponent<Props>;
+export {};

package/dist/components/nodes/FlowNode.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import ReactMarkdown from 'react-markdown';
+import { useTheme } from '../../ThemeContext.js';
+import { getNodeChild } from '../../config.js';
+const invisibleHandle = {
+    opacity: 0,
+    width: 1,
+    height: 1,
+    border: 'none',
+    background: 'transparent',
+    pointerEvents: 'none',
+};
+function normalizeLabelMarkdown(label) {
+    return label.replace(/\\n/g, '\n').trim();
+}
+/**
+ * Generates evenly-spaced handle positions across a face.
+ * For 1 handle: [50%], for 2: [33%, 67%], for 3: [25%, 50%, 75%], etc.
+ */
+function spreadPositions(count) {
+    const n = Math.max(1, count);
+    return Array.from({ length: n }, (_, i) => ((i + 1) / (n + 1)) * 100);
+}
+/**
+ * Forward-edge handles spread across a face so multiple edges
+ * don't converge at the same point. Back-edge + lateral handles
+ * remain at fixed side positions.
+ */
+const SIDE_SLOTS = 5;
+const sideSlotPositions = spreadPositions(SIDE_SLOTS); // [~17%, 33%, 50%, 67%, 83%]
+function SideHandles({ side }) {
+    const position = side === 'left' ? Position.Left : Position.Right;
+    return (_jsxs(_Fragment, { children: [sideSlotPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `back-${side}-target-${i}`, position: position, style: { ...invisibleHandle, top: `${pct}%` } }, `${side}-t-${i}`))), sideSlotPositions.map((pct, i) => (_jsx(Handle, { type: "source", id: `back-${side}-source-${i}`, position: position, style: { ...invisibleHandle, top: `${pct}%` } }, `${side}-s-${i}`)))] }));
+}
+function NodeHandles({ fwIn, fwOut }) {
+    const targetPositions = spreadPositions(fwIn);
+    const sourcePositions = spreadPositions(fwOut);
+    return (_jsxs(_Fragment, { children: [targetPositions.map((pct, i) => (_jsx(Handle, { type: "target", id: `fw-target-${i}`, position: Position.Top, style: { ...invisibleHandle, left: `${pct}%` } }, `ft-${i}`))), sourcePositions.map((pct, i) => (_jsx(Handle, { type: "source", id: `fw-source-${i}`, position: Position.Bottom, style: { ...invisibleHandle, left: `${pct}%` } }, `fs-${i}`))), _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 })] }));
+}
+/**
+ * Diamond handles positioned based on target locations.
+ *
+ * The layout engine computes a `diamondHandleConfig` that specifies how many
+ * 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.
+ *
+ * Fallback: if no config is provided (single outgoing), uses bottom handle.
+ */
+function DiamondHandles({ handleConfig }) {
+    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 })] }));
+}
+export const FlowNode = memo(function FlowNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const labelMarkdown = normalizeLabelMarkdown(label);
+    const shape = String(data.shape ?? 'rect');
+    const meta = data.meta;
+    const ns = theme.nodeStyles.flow;
+    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 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 })),
+        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: {
+                fontFamily: theme.font.mono,
+                fontSize: theme.font.size.sm,
+                backgroundColor: theme.nodeStyles.flow.markdownCode.backgroundColor,
+                borderRadius: theme.radius.xs,
+                padding: theme.nodeStyles.flow.markdownCode.padding,
+            }, children: children })),
+        ul: ({ children }) => (_jsx("ul", { style: { margin: 0, paddingLeft: theme.space[4], lineHeight: theme.lineHeight.normal }, children: children })),
+        ol: ({ children }) => (_jsx("ol", { style: { margin: 0, paddingLeft: theme.space[4], lineHeight: theme.lineHeight.normal }, children: children })),
+        li: ({ children }) => (_jsx("li", { style: { margin: 0 }, children: children })),
+    };
+    const ChildComponent = meta?.component ? getNodeChild(meta.component) : undefined;
+    if (shape === 'diamond') {
+        // Outer container = dagre's bounding box (the diagonal of the rotated square).
+        // Inner square = diagonal / sqrt(2), then rotated 45° to form the diamond shape.
+        const diagSize = layoutWidth;
+        const innerSize = diagSize / Math.SQRT2;
+        return (_jsxs("div", { style: {
+                width: diagSize, height: diagSize, position: 'relative',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }, children: [_jsx("div", { style: {
+                        width: innerSize, height: innerSize, backgroundColor: theme.color.orange1,
+                        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,
+                            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 })] }));
+    }
+    if (shape === 'circle') {
+        return (_jsxs("div", { style: {
+                width: layoutWidth, height: layoutHeight,
+                backgroundColor: nodeBgColor, borderRadius: theme.radius.full,
+                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',
+                    }, 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') {
+        const w = layoutWidth;
+        const h = layoutHeight - 10; // subtract ry for inner body height
+        const ry = 10; // ellipse vertical radius for the cap
+        return (_jsxs("div", { style: {
+                width: w, height: h + ry, position: 'relative',
+                fontFamily: theme.font.family, cursor: 'pointer',
+            }, children: [_jsxs("svg", { width: w, height: h + ry * 2, viewBox: `0 0 ${w} ${h + ry * 2}`, style: { position: 'absolute', top: -ry, left: 0 }, children: [_jsx("path", { d: `M0,${ry} L0,${h + ry} Q0,${h + ry * 2} ${w / 2},${h + ry * 2} Q${w},${h + ry * 2} ${w},${h + ry} L${w},${ry}`, fill: theme.color.orange1 }), _jsx("ellipse", { cx: w / 2, cy: ry, rx: w / 2, ry: ry, fill: theme.color.orange2 })] }), _jsx("div", { style: {
+                        position: 'relative', width: '100%', height: '100%',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        color: theme.color.white, fontSize: theme.font.size.md,
+                        fontWeight: theme.font.weight.bold, textAlign: 'center',
+                        paddingTop: ry / 2, overflowWrap: 'break-word',
+                    }, children: _jsx(ReactMarkdown, { components: markdownComponents, children: labelMarkdown }) }), _jsx(NodeHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+    }
+    const br = shape === 'stadium' ? theme.radius.stadium : shape === 'round' ? theme.radius.xl : theme.radius.md;
+    return (_jsxs("div", { style: {
+            backgroundColor: nodeBgColor, borderRadius: br,
+            padding: `${theme.space[3]} ${theme.space[5]}`,
+            width: layoutWidth, height: layoutHeight,
+            boxSizing: 'border-box',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            fontFamily: theme.font.family, cursor: 'pointer',
+        }, children: [_jsx("div", { style: {
+                    color: nodeTextColor, fontSize: theme.font.size.lg, fontWeight: theme.font.weight.bold,
+                    textAlign: 'center', lineHeight: theme.lineHeight.normal,
+                    whiteSpace: 'normal', overflowWrap: 'break-word', width: '100%',
+                }, children: _jsx(ReactMarkdown, { components: markdownComponents, children: labelMarkdown }) }), ChildComponent && (_jsx(ChildComponent, { nodeId: String(data.id ?? ''), label: label, componentProps: meta?.componentProps })), _jsx(NodeHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+});

package/dist/components/nodes/SequenceNodes.d.ts

@@ -0,0 +1,33 @@
+/**
+ * SequenceNodes.tsx — React Flow node components for sequence diagrams.
+ *
+ * Node types:
+ *   - sequenceParticipant: Clickable participant boxes at top/bottom
+ *   - sequenceLifeline: Dashed vertical line behind messages
+ *   - sequenceAnchor: Invisible 2px nodes at message endpoints (edges attach here)
+ *   - sequenceNote: Styled note boxes spanning attached participants
+ *   - sequenceBlock: Alt/loop/opt overlay rectangles
+ *   - sequenceMessageLabel: Text label positioned above message edges
+ *   - sequenceNumber: Numbered circle on the lifeline for autonumbering
+ */
+interface ParticipantProps {
+    data: Record<string, unknown>;
+}
+export declare const SequenceParticipantNode: import("react").NamedExoticComponent<ParticipantProps>;
+export declare const SequenceLifelineNode: import("react").NamedExoticComponent<{
+    data: Record<string, unknown>;
+}>;
+export declare const SequenceAnchorNode: import("react").NamedExoticComponent<object>;
+export declare const SequenceNoteNode: import("react").NamedExoticComponent<{
+    data: Record<string, unknown>;
+}>;
+export declare const SequenceMessageLabelNode: import("react").NamedExoticComponent<{
+    data: Record<string, unknown>;
+}>;
+export declare const SequenceNumberNode: import("react").NamedExoticComponent<{
+    data: Record<string, unknown>;
+}>;
+export declare const SequenceBlockNode: import("react").NamedExoticComponent<{
+    data: Record<string, unknown>;
+}>;
+export {};