@graph-artifact/core 0.1.0

package/dist/components/nodes/SequenceNodes.js

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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
+ */
+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',
+};
+export const SequenceParticipantNode = memo(function SequenceParticipantNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const participantType = String(data.participantType ?? 'participant');
+    const meta = data.meta;
+    const w = data.layoutWidth ?? 150;
+    const h = data.layoutHeight ?? 40;
+    if (participantType === 'actor') {
+        // Stick figure actor
+        const cx = w / 2;
+        return (_jsxs("div", { style: { width: w, height: h + 16, position: 'relative', cursor: 'pointer' }, children: [_jsxs("svg", { width: w, height: h + 16, viewBox: `0 0 ${w} ${h + 16}`, children: [_jsx("circle", { cx: cx, cy: 10, r: 8, fill: "none", stroke: theme.color.orange1, strokeWidth: 1.5 }), _jsx("line", { x1: cx, y1: 18, x2: cx, y2: 30, stroke: theme.color.orange1, strokeWidth: 1.5 }), _jsx("line", { x1: cx - 12, y1: 22, x2: cx + 12, y2: 22, stroke: theme.color.orange1, strokeWidth: 1.5 }), _jsx("line", { x1: cx, y1: 30, x2: cx - 8, y2: 40, stroke: theme.color.orange1, strokeWidth: 1.5 }), _jsx("line", { x1: cx, y1: 30, x2: cx + 8, y2: 40, stroke: theme.color.orange1, strokeWidth: 1.5 }), _jsx("text", { x: cx, y: h + 12, textAnchor: "middle", fill: theme.color.gray4, fontSize: 12, fontWeight: 600, fontFamily: theme.font.family, children: label })] }), _jsx(Handle, { type: "source", position: Position.Bottom, style: invisibleHandle }), _jsx(Handle, { type: "target", position: Position.Top, style: invisibleHandle })] }));
+    }
+    // Box participant
+    return (_jsxs("div", { style: {
+            width: w,
+            height: h,
+            backgroundColor: theme.color.orange1,
+            borderRadius: theme.radius.md,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: 'pointer',
+            fontFamily: theme.font.family,
+            boxShadow: meta ? `0 0 0 2px ${theme.color.orange2}` : undefined,
+        }, children: [_jsx("span", { style: {
+                    color: theme.color.white,
+                    fontSize: theme.font.size.sm,
+                    fontWeight: theme.font.weight.bold,
+                    textAlign: 'center',
+                    whiteSpace: 'pre-wrap',
+                    lineHeight: 1.2,
+                    overflow: 'hidden',
+                    padding: '0 4px',
+                }, children: label }), _jsx(Handle, { type: "source", position: Position.Bottom, style: invisibleHandle }), _jsx(Handle, { type: "target", position: Position.Top, style: invisibleHandle }), _jsx(Handle, { type: "source", id: "left", position: Position.Left, style: invisibleHandle }), _jsx(Handle, { type: "target", id: "left", position: Position.Left, style: invisibleHandle }), _jsx(Handle, { type: "source", id: "right", position: Position.Right, style: invisibleHandle }), _jsx(Handle, { type: "target", id: "right", position: Position.Right, style: invisibleHandle })] }));
+});
+// ─── Lifeline Node ─────────────────────────────────────────────────────────
+export const SequenceLifelineNode = memo(function SequenceLifelineNode({ data }) {
+    const theme = useTheme();
+    const height = data.lifelineHeight ?? 200;
+    return (_jsx("div", { style: {
+            width: 2,
+            height,
+            pointerEvents: 'none',
+        }, children: _jsx("svg", { width: 2, height: height, style: { overflow: 'visible' }, children: _jsx("line", { x1: 1, y1: 0, x2: 1, y2: height, stroke: theme.color.gray2, strokeWidth: 1.5, strokeDasharray: "6,4" }) }) }));
+});
+// ─── Anchor Node ───────────────────────────────────────────────────────────
+export const SequenceAnchorNode = memo(function SequenceAnchorNode() {
+    return (_jsxs("div", { style: { width: 2, height: 2, pointerEvents: 'none' }, children: [_jsx(Handle, { type: "source", position: Position.Right, style: invisibleHandle }), _jsx(Handle, { type: "target", position: Position.Left, style: invisibleHandle }), _jsx(Handle, { type: "source", id: "left", position: Position.Left, style: invisibleHandle }), _jsx(Handle, { type: "target", id: "right", position: Position.Right, style: invisibleHandle }), _jsx(Handle, { type: "source", id: "top", position: Position.Top, style: invisibleHandle }), _jsx(Handle, { type: "target", id: "bottom", position: Position.Bottom, style: invisibleHandle })] }));
+});
+// ─── Note Node ─────────────────────────────────────────────────────────────
+export const SequenceNoteNode = memo(function SequenceNoteNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const w = data.noteWidth ?? 140;
+    const h = data.noteHeight ?? 36;
+    const ns = theme.nodeStyles.sequence;
+    return (_jsx("div", { style: {
+            width: w,
+            backgroundColor: theme.color.darkBg3,
+            border: `${ns.note.borderWidth} solid ${theme.color.gray2}`,
+            borderRadius: theme.radius.sm,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: `${ns.note.paddingY} ${theme.space[2]}`,
+            pointerEvents: 'none',
+            boxSizing: 'border-box',
+        }, children: _jsx("span", { style: {
+                color: theme.color.gray4,
+                fontSize: theme.font.size.sm,
+                fontFamily: theme.font.family,
+                textAlign: 'center',
+                lineHeight: theme.lineHeight.tight,
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                overflow: 'hidden',
+            }, children: label }) }));
+});
+// ─── Message Label Node ───────────────────────────────────────────────────
+export const SequenceMessageLabelNode = memo(function SequenceMessageLabelNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const w = data.labelWidth ?? 120;
+    return (_jsx("div", { style: {
+            width: w,
+            display: 'flex',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+        }, children: _jsx("span", { style: {
+                color: theme.color.gray4,
+                fontSize: theme.font.size.sm,
+                fontFamily: theme.font.family,
+                fontWeight: theme.font.weight.medium,
+                textAlign: 'center',
+                whiteSpace: 'pre-wrap',
+                lineHeight: 1.3,
+            }, children: label }) }));
+});
+// ─── Number Circle Node ──────────────────────────────────────────────────
+export const SequenceNumberNode = memo(function SequenceNumberNode({ data }) {
+    const theme = useTheme();
+    const num = data.number ?? 1;
+    const ns = theme.nodeStyles.sequence;
+    const size = ns.number.size;
+    return (_jsx("div", { style: {
+            width: size,
+            height: size,
+            borderRadius: '50%',
+            border: `${ns.number.borderWidth} solid ${theme.color.gray3}`,
+            backgroundColor: theme.color.darkBg2,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+        }, children: _jsx("span", { style: {
+                color: theme.color.gray4,
+                fontSize: ns.number.fontSize,
+                fontFamily: theme.font.family,
+                fontWeight: theme.font.weight.semibold,
+                lineHeight: 1,
+            }, children: num }) }));
+});
+export const SequenceBlockNode = memo(function SequenceBlockNode({ data }) {
+    const theme = useTheme();
+    const ns = theme.nodeStyles.sequence;
+    const blockType = String(data.blockType ?? 'alt');
+    const blockLabel = String(data.blockLabel ?? '');
+    const w = data.blockWidth ?? 300;
+    const h = data.blockHeight ?? 100;
+    const sections = data.sections;
+    const messageY = data.messageY;
+    const blockStartY = data.blockStartY ?? 0;
+    return (_jsxs("div", { style: {
+            width: w,
+            height: h,
+            border: `${ns.block.borderWidth} dashed ${theme.color.gray2}`,
+            borderRadius: theme.radius.sm,
+            position: 'relative',
+            pointerEvents: 'none',
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    backgroundColor: theme.color.gray2,
+                    borderRadius: `${theme.radius.sm} 0 ${theme.radius.sm} 0`,
+                    padding: `2px ${theme.space[2]}`,
+                }, children: _jsx("span", { style: {
+                        color: theme.color.gray4,
+                        fontSize: theme.font.size.sm,
+                        fontWeight: theme.font.weight.semibold,
+                        fontFamily: theme.font.family,
+                    }, children: blockType }) }), blockLabel && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 2,
+                    left: blockType.length * ns.block.labelCharWidth + ns.block.labelOffsetBase,
+                }, children: _jsxs("span", { style: {
+                        color: theme.color.gray3,
+                        fontSize: theme.font.size.sm,
+                        fontFamily: theme.font.family,
+                        fontStyle: 'italic',
+                    }, children: ["[", blockLabel, "]"] }) })), sections && messageY && sections.map((section, i) => {
+                const sectionY = messageY[section.startIndex]
+                    ? messageY[section.startIndex] - blockStartY - 25
+                    : h / 2;
+                return (_jsx("div", { style: {
+                        position: 'absolute',
+                        top: sectionY,
+                        left: 0,
+                        width: '100%',
+                        borderTop: `${ns.block.dividerWidth} dashed ${theme.color.gray2}`,
+                    }, children: _jsxs("span", { style: {
+                            position: 'absolute',
+                            top: 2,
+                            left: Number(theme.space[2].replace('px', '')),
+                            color: theme.color.gray3,
+                            fontSize: theme.font.size.sm,
+                            fontFamily: theme.font.family,
+                            fontStyle: 'italic',
+                        }, children: ["[", section.label || 'else', "]"] }) }, i));
+            })] }));
+});

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

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

package/dist/components/nodes/StateNode.js

@@ -0,0 +1,71 @@
+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); // [~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 StateHandles({ 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 StateNode = memo(function StateNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const shape = String(data.shape ?? 'round');
+    const ns = theme.nodeStyles.state;
+    const fwIn = Math.max(1, data.fwIn ?? 1);
+    const fwOut = Math.max(1, data.fwOut ?? 1);
+    const layoutWidth = data.layoutWidth;
+    const layoutHeight = data.layoutHeight;
+    // Start state: filled circle
+    if (shape === 'circle') {
+        return (_jsx("div", { style: {
+                width: layoutWidth, height: layoutHeight,
+                backgroundColor: theme.color.gray5, borderRadius: theme.radius.full,
+            }, 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.
+    if (shape === 'doublecircle') {
+        const innerSize = layoutWidth - 16; // outer - padding(8) - border(3)*2
+        return (_jsxs("div", { style: {
+                width: layoutWidth, height: layoutHeight,
+                boxSizing: 'border-box',
+                borderRadius: theme.radius.full,
+                border: `${theme.borderWidth.md} solid ${theme.color.gray5}`,
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }, children: [_jsx("div", { style: {
+                        width: innerSize, height: innerSize,
+                        backgroundColor: theme.color.gray5, borderRadius: theme.radius.full,
+                    } }), _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+    }
+    return (_jsxs("div", { style: {
+            backgroundColor: theme.color.darkBg2, border: `${theme.borderWidth.sm} solid ${theme.color.gray2}`,
+            borderLeft: `${ns.rect.accentWidth} solid ${theme.color.orange1}`, borderRadius: theme.radius.pill,
+            padding: `${theme.space[3]} ${theme.space[6]}`,
+            width: layoutWidth, height: layoutHeight,
+            boxSizing: 'border-box',
+            fontFamily: theme.font.family, cursor: 'pointer',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }, children: [_jsx("div", { style: {
+                    color: theme.color.gray5, fontSize: theme.font.size.lg, fontWeight: theme.font.weight.semibold,
+                    textAlign: 'center', whiteSpace: 'nowrap',
+                }, children: label }), _jsx(StateHandles, { fwIn: fwIn, fwOut: fwOut })] }));
+});

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

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

package/dist/components/nodes/SubgraphNode.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { useTheme } from '../../ThemeContext.js';
+export const SubgraphNode = memo(function SubgraphNode({ data }) {
+    const theme = useTheme();
+    const label = String(data.label ?? '');
+    const ns = theme.nodeStyles.subgraph;
+    return (_jsx("div", { style: {
+            fontSize: theme.font.size.sm,
+            fontWeight: theme.font.weight.semibold,
+            fontFamily: theme.font.family,
+            color: theme.color.gray3,
+            padding: `${theme.space[1]} ${theme.space[2]}`,
+            pointerEvents: ns.pointerEvents,
+        }, children: label }));
+});

package/dist/config.d.ts

@@ -0,0 +1,138 @@
+/**
+ * config.ts — Single source of truth for the entire @graph-artifact/core package.
+ *
+ * Every configurable surface lives here: base theme selection, theme overrides,
+ * canvas behavior, layout tuning, node type registry, node children registry,
+ * and layout mappings.
+ *
+ * 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';
+export interface GraphConfig {
+    /** Which theme to use as the base token set ('dark', 'light', or any registered name) */
+    baseTheme: string;
+    /** Partial theme overrides — deep-merged on top of the base theme at runtime */
+    theme: ThemeOverride;
+    /** Dagre layout tuning */
+    layout: {
+        rankSep: number;
+        erRankSep: number;
+        stateRankSep: number;
+        nodeSep: number;
+        erNodeSep: number;
+        stateNodeSep: number;
+        subgraphPadding: number;
+        /** Numeric pixel sizes for dagre node dimension calculations.
+         *  These are the SINGLE SOURCE OF TRUTH for node dimensions.
+         *  Components receive these as layoutWidth/layoutHeight via node data. */
+        nodeSizing: {
+            charWidth: number;
+            common: {
+                minWidth: number;
+                maxWidth: number;
+                lineBaseHeight: number;
+                lineStepHeight: number;
+            };
+            er: {
+                width: number;
+                headerHeight: number;
+                rowHeight: number;
+                borderExtra: number;
+            };
+            class: {
+                width: number;
+                headerHeight: number;
+                rowHeight: number;
+                dividerGap: number;
+            };
+            state: {
+                circleSize: number;
+                doublecirclePad: number;
+                doublecircleBorder: number;
+                minWidth: number;
+                height: number;
+                padding: number;
+                borderExtra: number;
+            };
+            flow: {
+                diamondSize: number;
+                circleSize: number;
+                cylinderWidth: number;
+                cylinderHeight: number;
+                minWidth: number;
+                height: number;
+                padding: number;
+            };
+        };
+        sequence: {
+            participantWidth: number;
+            participantHeight: number;
+            participantGap: number;
+            baseMessageRowHeight: number;
+            selfMessageExtra: number;
+            labelLineHeight: number;
+            labelGapBelow: number;
+            topPadding: number;
+            leftPadding: number;
+            lifelineStartOffset: number;
+            bottomParticipantGap: number;
+            anchorWidth: number;
+            anchorHeight: number;
+            noteBaseHeight: number;
+            noteLineHeight: number;
+            noteOffsetX: number;
+            noteVerticalGap: number;
+            notePaddingInner: number;
+            blockPaddingX: number;
+            blockPaddingTop: number;
+            blockPaddingBottom: number;
+            numberCircleSize: number;
+            textCharWidthEstimate: number;
+            maxCollisionIterations: number;
+        };
+    };
+    /** React Flow canvas behavior */
+    canvas: {
+        minZoom: number;
+        maxZoom: number;
+        fitView: boolean;
+        showBackground: boolean;
+        showControls: boolean;
+        showMiniMap: boolean;
+        backgroundGap: number;
+        backgroundSize: number;
+    };
+    /** Node component registry — maps type names to React components */
+    nodeTypes: Record<string, NodeComponent>;
+    /** Custom node child components — rendered inside node bodies */
+    nodeChildren: Record<string, NodeChildComponent>;
+    /** Maps diagram types (e.g. 'flowchart') to node type names (e.g. 'flow') */
+    layoutMappings: Record<string, string>;
+    /** Product/app copy overrides for host-application messaging. */
+    library: {
+        nodeDetailEmptyHint: string;
+    };
+}
+export interface ConfigureOptions {
+    baseTheme?: string;
+    theme?: ThemeOverride;
+    layout?: Partial<GraphConfig['layout']>;
+    canvas?: Partial<GraphConfig['canvas']>;
+    nodeTypes?: Record<string, NodeComponent>;
+    nodeChildren?: Record<string, NodeChildComponent>;
+    layoutMappings?: Record<string, string>;
+    library?: Partial<GraphConfig['library']>;
+}
+/** Apply partial config overrides. Call once at module load time. */
+export declare function configure(overrides: ConfigureOptions): void;
+/** Read the current config. All internal modules use this. */
+export declare function getConfig(): Readonly<GraphConfig>;
+/** Restore all defaults. Useful for testing. */
+export declare function resetConfig(): void;
+export declare function registerNodeType(name: string, component: NodeComponent): void;
+export declare function getNodeTypes(): Record<string, NodeComponent>;
+export declare function registerNodeChild(name: string, component: NodeChildComponent): void;
+export declare function getNodeChild(name: string): NodeChildComponent | undefined;
+export declare function registerLayoutMapping(diagramType: string, nodeType: string): void;
+export declare function getLayoutMapping(diagramType: string): string;

package/dist/config.js

@@ -0,0 +1,165 @@
+/**
+ * config.ts — Single source of truth for the entire @graph-artifact/core package.
+ *
+ * Every configurable surface lives here: base theme selection, theme overrides,
+ * canvas behavior, layout tuning, node type registry, node children registry,
+ * and layout mappings.
+ *
+ * Consumers call `configure()` once at module load time. Every internal module
+ * reads from `getConfig()`. Nothing is hardcoded elsewhere.
+ */
+// ─── Defaults ────────────────────────────────────────────────────────────────
+function createDefaultConfig() {
+    return {
+        baseTheme: 'dark',
+        theme: {},
+        layout: {
+            rankSep: 30,
+            erRankSep: 60,
+            stateRankSep: 60,
+            nodeSep: 30,
+            erNodeSep: 80,
+            stateNodeSep: 40,
+            subgraphPadding: 16,
+            nodeSizing: {
+                charWidth: 9,
+                common: { minWidth: 120, maxWidth: 560, lineBaseHeight: 16, lineStepHeight: 18 },
+                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,
+                    minWidth: 100, height: 40, padding: 32, borderExtra: 6,
+                },
+                flow: {
+                    diamondSize: 120, circleSize: 80, cylinderWidth: 120, cylinderHeight: 70,
+                    minWidth: 120, height: 44, padding: 40,
+                },
+            },
+            sequence: {
+                participantWidth: 150,
+                participantHeight: 40,
+                participantGap: 60,
+                baseMessageRowHeight: 55,
+                selfMessageExtra: 30,
+                labelLineHeight: 16,
+                labelGapBelow: 6,
+                topPadding: 20,
+                leftPadding: 40,
+                lifelineStartOffset: 40,
+                bottomParticipantGap: 40,
+                anchorWidth: 2,
+                anchorHeight: 2,
+                noteBaseHeight: 36,
+                noteLineHeight: 16,
+                noteOffsetX: 10,
+                noteVerticalGap: 20,
+                notePaddingInner: 12,
+                blockPaddingX: 20,
+                blockPaddingTop: 30,
+                blockPaddingBottom: 15,
+                numberCircleSize: 22,
+                textCharWidthEstimate: 6,
+                maxCollisionIterations: 16,
+            },
+        },
+        canvas: {
+            minZoom: 0.1,
+            maxZoom: 2,
+            fitView: true,
+            showBackground: true,
+            showControls: true,
+            showMiniMap: true,
+            backgroundGap: 20,
+            backgroundSize: 1,
+        },
+        nodeTypes: {},
+        nodeChildren: {},
+        layoutMappings: {
+            flowchart: 'flow',
+            mindmap: 'flow',
+            state: 'state',
+            er: 'entity',
+            class: 'class',
+            sequence: 'sequence',
+        },
+        library: {
+            nodeDetailEmptyHint: 'Attach metadata in your host app to show rich notes here.',
+        },
+    };
+}
+// ─── Singleton ───────────────────────────────────────────────────────────────
+let config = createDefaultConfig();
+// ─── Public API ──────────────────────────────────────────────────────────────
+/** Apply partial config overrides. Call once at module load time. */
+export function configure(overrides) {
+    if (overrides.baseTheme !== undefined) {
+        config = { ...config, baseTheme: overrides.baseTheme };
+    }
+    if (overrides.theme) {
+        config = { ...config, theme: { ...config.theme, ...overrides.theme } };
+    }
+    if (overrides.layout) {
+        const { nodeSizing: nsOverride, ...flatLayout } = overrides.layout;
+        const mergedNs = nsOverride
+            ? {
+                ...config.layout.nodeSizing,
+                ...nsOverride,
+                common: { ...config.layout.nodeSizing.common, ...nsOverride.common },
+                er: { ...config.layout.nodeSizing.er, ...nsOverride.er },
+                class: { ...config.layout.nodeSizing.class, ...nsOverride.class },
+                state: { ...config.layout.nodeSizing.state, ...nsOverride.state },
+                flow: { ...config.layout.nodeSizing.flow, ...nsOverride.flow },
+            }
+            : config.layout.nodeSizing;
+        const mergedSequence = overrides.layout.sequence
+            ? { ...config.layout.sequence, ...overrides.layout.sequence }
+            : config.layout.sequence;
+        config = {
+            ...config,
+            layout: { ...config.layout, ...flatLayout, nodeSizing: mergedNs, sequence: mergedSequence },
+        };
+    }
+    if (overrides.canvas) {
+        config = { ...config, canvas: { ...config.canvas, ...overrides.canvas } };
+    }
+    if (overrides.nodeTypes) {
+        config = { ...config, nodeTypes: { ...config.nodeTypes, ...overrides.nodeTypes } };
+    }
+    if (overrides.nodeChildren) {
+        config = { ...config, nodeChildren: { ...config.nodeChildren, ...overrides.nodeChildren } };
+    }
+    if (overrides.layoutMappings) {
+        config = { ...config, layoutMappings: { ...config.layoutMappings, ...overrides.layoutMappings } };
+    }
+    if (overrides.library) {
+        config = { ...config, library: { ...config.library, ...overrides.library } };
+    }
+}
+/** Read the current config. All internal modules use this. */
+export function getConfig() {
+    return config;
+}
+/** Restore all defaults. Useful for testing. */
+export function resetConfig() {
+    config = createDefaultConfig();
+}
+// ─── Registry Convenience Functions ──────────────────────────────────────────
+// These mutate the live config — same as calling configure() for a single entry.
+export function registerNodeType(name, component) {
+    config.nodeTypes = { ...config.nodeTypes, [name]: component };
+}
+export function getNodeTypes() {
+    return config.nodeTypes;
+}
+export function registerNodeChild(name, component) {
+    config.nodeChildren = { ...config.nodeChildren, [name]: component };
+}
+export function getNodeChild(name) {
+    return config.nodeChildren[name];
+}
+export function registerLayoutMapping(diagramType, nodeType) {
+    config.layoutMappings = { ...config.layoutMappings, [diagramType]: nodeType };
+}
+export function getLayoutMapping(diagramType) {
+    return config.layoutMappings[diagramType] ?? 'flow';
+}

package/dist/core.d.ts

@@ -0,0 +1,12 @@
+export type { Diagram, NodeMetadata, ThemeOverride, ParsedGraph, ParsedDiagram, ParsedCustomDiagram, ParsedNode, ParsedEdge, ParsedSubgraph, EdgeType, DiagramType, GraphDiagramType, CustomDiagramType, Cardinality, DeepPartial, NodeComponent, NodeChildProps, NodeChildComponent, SequenceParticipant, SequenceMessage, SequenceArrowType, SequenceBlock, SequenceBlockType, SequenceNote, SequenceData, } from './types.js';
+export { configure, getConfig, resetConfig, registerNodeType, getNodeTypes, registerNodeChild, getNodeChild, registerLayoutMapping, getLayoutMapping, } from './config.js';
+export type { GraphConfig, ConfigureOptions } from './config.js';
+export { registerTheme, getThemeTokens, getThemeNames } from './theme/index.js';
+export type { ThemeTokens } from './theme/index.js';
+export { layoutParsedGraph, layoutDiagram } from './layout/index.js';
+export type { LayoutOptions, LayoutResult, GraphLayoutResult, CustomLayoutResult, } from './layout/index.js';
+export { parseMermaid } from './parsers/index.js';
+export { registerDiagramPlugin, getDiagramPlugins } from './diagrams/registry.js';
+export type { DiagramPlugin } from './diagrams/types.js';
+export { createSwaggerPlugin, generateSwaggerFocusedArtifact, generateSwaggerFocusedDiagram, parseSwaggerToGraphFocused, generateSwaggerDiagrams, generateSwaggerDiagram, parseSwaggerToGraph, } from './swagger.js';
+export type { SwaggerDiagramBundle, SwaggerDiagramFlavor, SwaggerFocusedArtifact, SwaggerFocusRequest, SwaggerPlugin, SwaggerPluginConfig, SwaggerEndpointFocus, SwaggerDefinitionFocus, SwaggerGenerateOptions, SwaggerParseOptions, SwaggerPolicyOptions, } from './swagger.js';

package/dist/core.js

@@ -0,0 +1,7 @@
+// Headless/public core entry (Node-safe: no React Flow CSS side-effects).
+export { configure, getConfig, resetConfig, registerNodeType, getNodeTypes, registerNodeChild, getNodeChild, registerLayoutMapping, getLayoutMapping, } from './config.js';
+export { registerTheme, getThemeTokens, getThemeNames } from './theme/index.js';
+export { layoutParsedGraph, layoutDiagram } from './layout/index.js';
+export { parseMermaid } from './parsers/index.js';
+export { registerDiagramPlugin, getDiagramPlugins } from './diagrams/registry.js';
+export { createSwaggerPlugin, generateSwaggerFocusedArtifact, generateSwaggerFocusedDiagram, parseSwaggerToGraphFocused, generateSwaggerDiagrams, generateSwaggerDiagram, parseSwaggerToGraph, } from './swagger.js';

package/dist/diagrams/detect.d.ts

@@ -0,0 +1,2 @@
+import type { DiagramPlugin } from './types.js';
+export declare function detectDiagramPlugin(syntax: string): DiagramPlugin | null;

package/dist/diagrams/detect.js

@@ -0,0 +1,8 @@
+import { getDiagramPlugins } from './registry.js';
+export function detectDiagramPlugin(syntax) {
+    for (const plugin of getDiagramPlugins()) {
+        if (plugin.detect(syntax))
+            return plugin;
+    }
+    return null;
+}

package/dist/diagrams/plugins.d.ts

@@ -0,0 +1,2 @@
+import type { DiagramPlugin } from './types.js';
+export declare const builtinDiagramPlugins: DiagramPlugin[];