@graph-artifact/core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Graph Artifact
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,62 @@
+# @graph-artifact/core
+
+Composable diagram toolkit with:
+- Mermaid-like parsing (`parseMermaid`)
+- graph layout/routing engine (`layoutParsedGraph`)
+- React renderer (`DiagramCanvas`, `GraphCanvas`)
+- Swagger/OpenAPI focused diagram generation
+
+## Install
+
+```bash
+npm i @graph-artifact/core
+```
+
+Peer dependencies:
+- `react`
+- `react-dom`
+- `@xyflow/react`
+- `react-markdown`
+
+## Entry points
+
+- `@graph-artifact/core`: headless/core APIs (Node-safe)
+- `@graph-artifact/core/core`: explicit headless/core APIs
+- `@graph-artifact/core/react`: React rendering APIs
+
+## Quick start (core)
+
+```ts
+import { parseMermaid, layoutParsedGraph, getThemeTokens } from '@graph-artifact/core';
+
+const parsed = parseMermaid('flowchart TB\nA-->B');
+if (parsed && parsed.kind === 'graph') {
+  const theme = { ...getThemeTokens('dark'), name: 'dark' };
+  const { nodes, edges } = layoutParsedGraph(parsed, { theme });
+  console.log(nodes.length, edges.length);
+}
+```
+
+## Quick start (React)
+
+```tsx
+import { parseMermaid } from '@graph-artifact/core';
+import { ThemeProvider, DiagramCanvas } from '@graph-artifact/core/react';
+
+const parsed = parseMermaid('flowchart TB\nA-->B');
+
+export function App() {
+  if (!parsed || parsed.kind !== 'graph') return null;
+  return (
+    <ThemeProvider>
+      <DiagramCanvas parsed={parsed} metadata={{}} onNodeClick={() => {}} />
+    </ThemeProvider>
+  );
+}
+```
+
+## Notes
+
+- Use `@graph-artifact/core/react` for UI components.
+- Use `@graph-artifact/core` for parser/layout/server workflows.
+- For invalid syntax/layout, surface parse/layout errors to callers instead of crashing UI runtimes.

package/dist/ThemeContext.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+import type { ThemeOverride } from './types.js';
+import type { ThemeTokens } from './theme/index.js';
+export interface Theme {
+    color: Record<string, string>;
+    font: {
+        family: string;
+        mono: string;
+        size: Record<string, string>;
+        weight: Record<string, number>;
+    };
+    space: Record<string | number, string>;
+    radius: Record<string, string>;
+    shadow: Record<string, string>;
+    lineHeight: Record<string, string>;
+    borderWidth: Record<string, string>;
+    statusColors: Record<string, {
+        bg: string;
+        text: string;
+    }>;
+    handleStyle: {
+        background: string;
+        border: string;
+        width: number;
+        height: number;
+    };
+    edgeDefaults: {
+        style: Record<string, string | number>;
+        labelStyle: Record<string, string | number>;
+        labelBgStyle: Record<string, string | number>;
+        labelBgPadding: [number, number];
+        labelBgBorderRadius: number;
+        dashedPattern: string;
+        thickWidth: number;
+        markerSize: number;
+    };
+    nodeBase: ThemeTokens['nodeBase'];
+    nodeStyles: ThemeTokens['nodeStyles'];
+}
+export declare const defaultTheme: Theme;
+interface ThemeProviderProps {
+    overrides?: ThemeOverride;
+    children: ReactNode;
+}
+export declare function ThemeProvider({ overrides, children }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): Theme;
+export {};

package/dist/ThemeContext.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+import { getConfig } from './config.js';
+import { getThemeTokens } from './theme/index.js';
+// ─── Build Theme from Tokens ──────────────────────────────────────────────────
+function buildTheme(tokens) {
+    return {
+        color: { ...tokens.color },
+        font: {
+            family: tokens.font.family,
+            mono: tokens.font.mono,
+            size: { ...tokens.font.size },
+            weight: { ...tokens.font.weight },
+        },
+        space: { ...tokens.space },
+        radius: { ...tokens.radius },
+        shadow: { ...tokens.shadow },
+        statusColors: { ...tokens.statusColors },
+        handleStyle: { ...tokens.handleStyle },
+        edgeDefaults: {
+            style: { ...tokens.edgeDefaults.style },
+            labelStyle: { ...tokens.edgeDefaults.labelStyle },
+            labelBgStyle: { ...tokens.edgeDefaults.labelBgStyle },
+            labelBgPadding: [...tokens.edgeDefaults.labelBgPadding],
+            labelBgBorderRadius: tokens.edgeDefaults.labelBgBorderRadius,
+            dashedPattern: tokens.edgeDefaults.dashedPattern,
+            thickWidth: tokens.edgeDefaults.thickWidth,
+            markerSize: tokens.edgeDefaults.markerSize,
+        },
+        nodeBase: tokens.nodeBase,
+        nodeStyles: tokens.nodeStyles,
+        lineHeight: { ...tokens.lineHeight },
+        borderWidth: { ...tokens.borderWidth },
+    };
+}
+// Static default for context initial value (dark theme)
+export const defaultTheme = buildTheme(getThemeTokens('dark'));
+// ─── Deep Merge ───────────────────────────────────────────────────────────────
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value) && typeof value !== 'function';
+}
+function deepMerge(base, overrides) {
+    const result = { ...base };
+    for (const key of Object.keys(overrides)) {
+        const baseVal = base[key];
+        const overVal = overrides[key];
+        if (isPlainObject(baseVal) && isPlainObject(overVal)) {
+            result[key] = deepMerge(baseVal, overVal);
+        }
+        else if (overVal !== undefined) {
+            result[key] = overVal;
+        }
+    }
+    return result;
+}
+// ─── Theme Resolution ────────────────────────────────────────────────────────
+// Merges: base theme tokens → config.theme overrides → instance overrides
+function resolveTheme(instanceOverrides) {
+    const { baseTheme, theme: configOverrides } = getConfig();
+    // Start from the selected base theme
+    const tokens = getThemeTokens(baseTheme);
+    let resolved = buildTheme(tokens);
+    // Layer 1: package-level config overrides
+    if (configOverrides && Object.keys(configOverrides).length > 0) {
+        resolved = deepMerge(resolved, configOverrides);
+    }
+    // Layer 2: instance-level overrides (per ThemeProvider)
+    if (instanceOverrides && Object.keys(instanceOverrides).length > 0) {
+        resolved = deepMerge(resolved, instanceOverrides);
+    }
+    return resolved;
+}
+// ─── Context & Provider ───────────────────────────────────────────────────────
+const ThemeContext = createContext(defaultTheme);
+export function ThemeProvider({ overrides, children }) {
+    const theme = useMemo(() => resolveTheme(overrides), [overrides]);
+    return _jsx(ThemeContext.Provider, { value: theme, children: children });
+}
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/dist/components/DiagramCanvas.d.ts

@@ -0,0 +1,8 @@
+import type { ParsedDiagram, NodeMetadata } from '../types.js';
+interface DiagramCanvasProps {
+    parsed: ParsedDiagram;
+    metadata?: Record<string, NodeMetadata>;
+    onNodeClick: (nodeId: string, nodeLabel: string) => void;
+}
+export declare function DiagramCanvas({ parsed, metadata, onNodeClick }: DiagramCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DiagramCanvas.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GraphCanvas } from './GraphCanvas.js';
+function UnsupportedCustomDiagram({ parsed }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+            opacity: 0.8,
+            fontSize: 14,
+        }, children: `Diagram type '${parsed.diagramType}' is detected but custom rendering is not implemented yet.` }));
+}
+export function DiagramCanvas({ parsed, metadata, onNodeClick }) {
+    if (parsed.kind === 'graph') {
+        return _jsx(GraphCanvas, { parsed: parsed, metadata: metadata, onNodeClick: onNodeClick });
+    }
+    return _jsx(UnsupportedCustomDiagram, { parsed: parsed });
+}

package/dist/components/GraphCanvas.d.ts

@@ -0,0 +1,9 @@
+import '@xyflow/react/dist/style.css';
+import type { ParsedGraph, NodeMetadata } from '../types.js';
+interface GraphCanvasProps {
+    parsed: ParsedGraph;
+    metadata?: Record<string, NodeMetadata>;
+    onNodeClick: (nodeId: string, nodeLabel: string) => void;
+}
+export declare function GraphCanvas(props: GraphCanvasProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GraphCanvas.js

@@ -0,0 +1,104 @@
+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, useNodesInitialized, useStore, useStoreApi, } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { layoutNodes, buildLayoutEdges } from '../layout/index.js';
+import { getConfig, getNodeTypes } from '../config.js';
+import { useTheme } from '../ThemeContext.js';
+import { RoutedEdge } from './edges/RoutedEdge.js';
+// Stable reference — must be outside the component to avoid infinite re-renders
+const edgeTypes = { routed: RoutedEdge };
+function GraphCanvasInner({ parsed, metadata, onNodeClick }) {
+    const theme = useTheme();
+    const { canvas } = getConfig();
+    const resolvedNodeTypes = getNodeTypes();
+    const storeApi = useStoreApi();
+    const nodesInitialized = useNodesInitialized();
+    const measuredSignature = useStore((s) => Array.from(s.nodeLookup.values()).reduce((hash, n) => {
+        const w = Math.round(n.measured?.width ?? n.width ?? 0);
+        const h = Math.round(n.measured?.height ?? n.height ?? 0);
+        const p = n.internals.positionAbsolute;
+        hash = ((hash << 5) - hash + n.id.length) | 0;
+        hash = ((hash << 5) - hash + Math.round(p.x)) | 0;
+        hash = ((hash << 5) - hash + Math.round(p.y)) | 0;
+        hash = ((hash << 5) - hash + w) | 0;
+        hash = ((hash << 5) - hash + h) | 0;
+        return hash;
+    }, 0));
+    // Phase 1: Layout nodes with dagre + initial edges with estimated dimensions
+    const layoutState = useMemo(() => {
+        try {
+            return {
+                result: layoutNodes(parsed, { theme, metadata }),
+                error: null,
+            };
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            return { result: null, error: message };
+        }
+    }, [parsed, theme, metadata]);
+    const layoutResult = layoutState.result;
+    const nodes = layoutResult?.nodes ?? [];
+    const context = layoutResult?.context ?? undefined;
+    // Edges with estimated dimensions — always available immediately
+    const estimatedEdges = useMemo(() => context
+        ? buildLayoutEdges(context, theme)
+        : (layoutResult?.edges ?? []), [context, theme, layoutResult]);
+    // Start with estimated edges so something is always visible
+    const [edges, setEdges] = useState(estimatedEdges);
+    const contextRef = useRef(context);
+    contextRef.current = context;
+    // When diagram changes, immediately show estimated edges
+    useEffect(() => {
+        setEdges(estimatedEdges);
+    }, [estimatedEdges]);
+    // Phase 2: Recompute when React Flow measurements change so intersections
+    // always use actual rendered node dimensions.
+    useEffect(() => {
+        if (!nodesInitialized || !contextRef.current)
+            return;
+        const nodeLookup = storeApi.getState().nodeLookup;
+        const measuredPositions = new Map();
+        for (const internalNode of nodeLookup.values()) {
+            const estimated = contextRef.current.estimatedPositions.get(internalNode.id);
+            if (!estimated)
+                continue;
+            const measuredW = internalNode.measured?.width ?? internalNode.width ?? estimated.width;
+            const measuredH = internalNode.measured?.height ?? internalNode.height ?? estimated.height;
+            const abs = internalNode.internals.positionAbsolute;
+            measuredPositions.set(internalNode.id, {
+                x: abs.x,
+                y: abs.y,
+                width: measuredW,
+                height: measuredH,
+            });
+        }
+        setEdges(buildLayoutEdges(contextRef.current, theme, measuredPositions));
+    }, [nodesInitialized, measuredSignature, theme, storeApi]);
+    const handleNodeClick = useCallback((_event, node) => {
+        const label = String(node.data?.label ?? node.id);
+        onNodeClick(node.id, label);
+    }, [onNodeClick]);
+    const defaultEdgeOptions = useMemo(() => ({ animated: false, style: theme.edgeDefaults.style }), [theme.edgeDefaults.style]);
+    const miniMapNodeColor = useCallback(() => theme.color.orange1, [theme.color.orange1]);
+    const miniMapMaskColor = useMemo(() => `${theme.color.gray1}cc`, [theme.color.gray1]);
+    if (layoutState.error || !layoutState.result) {
+        return (_jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 16,
+                color: theme.color.gray4,
+                fontFamily: theme.font.family,
+                fontSize: 13,
+                textAlign: 'center',
+            }, children: `Diagram syntax/layout error: ${layoutState.error ?? 'Unknown layout failure'}` }));
+    }
+    return (_jsx("div", { style: { width: '100%', height: '100%' }, children: _jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: resolvedNodeTypes, edgeTypes: edgeTypes, onNodeClick: handleNodeClick, fitView: canvas.fitView, minZoom: canvas.minZoom, maxZoom: canvas.maxZoom, defaultEdgeOptions: defaultEdgeOptions, children: [canvas.showBackground && (_jsx(Background, { color: theme.color.gray2, gap: canvas.backgroundGap, size: canvas.backgroundSize })), canvas.showControls && _jsx(Controls, {}), canvas.showMiniMap && (_jsx(MiniMap, { nodeColor: miniMapNodeColor, maskColor: miniMapMaskColor }))] }) }));
+}
+export function GraphCanvas(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(GraphCanvasInner, { ...props }) }));
+}

package/dist/components/NodeDetail.d.ts

@@ -0,0 +1,9 @@
+import type { NodeMetadata } from '../types.js';
+interface NodeDetailProps {
+    nodeId: string;
+    nodeLabel: string;
+    meta: NodeMetadata | undefined;
+    onClose: () => void;
+}
+export declare const NodeDetail: import("react").NamedExoticComponent<NodeDetailProps>;
+export {};

package/dist/components/NodeDetail.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { renderMarkdown } from '../renderMarkdown.js';
+import { useTheme } from '../ThemeContext.js';
+import { getConfig } from '../config.js';
+/**
+ * Generates scoped CSS for markdown content rendered via dangerouslySetInnerHTML.
+ * Uses a data-attribute selector for scoping so it won't leak into the consumer's app.
+ */
+function buildMarkdownStyles(theme) {
+    const scope = '[data-graph-detail-notes]';
+    return `
+${scope} h1, ${scope} h2, ${scope} h3, ${scope} h4 {
+  color: ${theme.color.gray5};
+  margin: ${theme.space[4]} 0 ${theme.space[2]} 0;
+  line-height: ${theme.lineHeight.normal};
+}
+${scope} h1 { font-size: ${theme.font.size.xxl}; font-weight: ${theme.font.weight.bold}; }
+${scope} h2 { font-size: ${theme.font.size.xl}; font-weight: ${theme.font.weight.semibold}; }
+${scope} h3 { font-size: ${theme.font.size.lg}; font-weight: ${theme.font.weight.semibold}; }
+${scope} h4 { font-size: ${theme.font.size.md}; font-weight: ${theme.font.weight.semibold}; text-transform: uppercase; letter-spacing: 0.3px; color: ${theme.color.gray3}; }
+${scope} p {
+  color: ${theme.color.gray4};
+  font-size: ${theme.font.size.lg};
+  line-height: 1.6;
+  margin: 0 0 ${theme.space[3]} 0;
+}
+${scope} ul, ${scope} ol {
+  color: ${theme.color.gray4};
+  font-size: ${theme.font.size.lg};
+  line-height: 1.6;
+  padding-left: ${theme.space[5]};
+  margin: 0 0 ${theme.space[3]} 0;
+}
+${scope} li { margin-bottom: ${theme.space[1]}; }
+${scope} code {
+  background-color: ${theme.color.gray1};
+  color: ${theme.color.orange1};
+  padding: 2px 6px;
+  border-radius: ${theme.radius.sm};
+  font-size: ${theme.font.size.base};
+  font-family: ${theme.font.mono};
+}
+${scope} pre { margin: ${theme.space[2]} 0 ${theme.space[3]} 0; }
+${scope} pre code { background: none; color: ${theme.color.gray4}; padding: 0; }
+${scope} strong { color: ${theme.color.gray5}; font-weight: ${theme.font.weight.semibold}; }
+${scope} em { color: ${theme.color.gray4}; font-style: italic; }
+${scope} a { color: ${theme.color.blue3}; text-decoration: none; }
+${scope} a:hover { text-decoration: underline; }
+${scope} hr { border: none; border-top: ${theme.borderWidth.sm} solid ${theme.color.gray2}; margin: ${theme.space[4]} 0; }
+`;
+}
+export const NodeDetail = memo(function NodeDetail({ nodeId, nodeLabel, meta, onClose }) {
+    const theme = useTheme();
+    const { library } = getConfig();
+    const detail = theme.nodeStyles.detail;
+    const status = meta?.status;
+    const statusStyle = status ? theme.statusColors[status] ?? { bg: theme.color.gray2, text: theme.color.gray4 } : null;
+    const hasNotes = meta?.notes && meta.notes.trim().length > 0;
+    const details = meta?.details;
+    const hasDetails = details && Object.keys(details).length > 0;
+    const hasContent = hasNotes || hasDetails || status;
+    const markdownCss = useMemo(() => hasNotes ? buildMarkdownStyles(theme) : '', [hasNotes, theme]);
+    return (_jsxs("div", { style: {
+            position: 'absolute', top: 0, right: 0,
+            width: 380, height: '100%',
+            backgroundColor: theme.color.darkBg2,
+            borderLeft: `${theme.borderWidth.sm} solid ${theme.color.gray2}`,
+            display: 'flex', flexDirection: 'column',
+            zIndex: 10,
+            fontFamily: theme.font.family,
+            animation: 'graphDetailSlideIn 0.2s ease-out',
+        }, children: [_jsx("style", { children: `
+@keyframes graphDetailSlideIn {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+${markdownCss}` }), _jsx("div", { style: {
+                    display: 'flex', alignItems: 'center',
+                    padding: `${theme.space[3]} ${theme.space[4]}`,
+                    borderBottom: `${theme.borderWidth.sm} solid ${theme.color.gray2}`,
+                    flexShrink: 0,
+                }, children: _jsxs("button", { onClick: onClose, style: {
+                        display: 'inline-flex', alignItems: 'center', gap: '6px',
+                        background: 'none', border: 'none',
+                        color: theme.color.gray3, fontSize: theme.font.size.base,
+                        fontWeight: theme.font.weight.medium,
+                        fontFamily: theme.font.family, cursor: 'pointer',
+                        padding: `${theme.space[1]} ${theme.space[2]}`,
+                        borderRadius: theme.radius.sm,
+                    }, children: [_jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M10 12L6 8L10 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), "Back"] }) }), _jsxs("div", { style: {
+                    flex: 1, overflowY: 'auto',
+                    padding: `${theme.space[5]} ${theme.space[4]}`,
+                }, children: [_jsxs("div", { style: { marginBottom: theme.space[5] }, children: [_jsx("h2", { style: {
+                                    fontSize: theme.font.size.xxl, fontWeight: theme.font.weight.bold,
+                                    color: theme.color.white, margin: `0 0 ${theme.space[1]} 0`,
+                                }, children: nodeLabel }), _jsx("span", { style: { fontSize: theme.font.size.md, color: theme.color.gray3, fontFamily: theme.font.mono }, children: nodeId })] }), statusStyle && status && (_jsxs("div", { style: {
+                            display: 'inline-flex', alignItems: 'center', gap: theme.space[2],
+                            padding: `${theme.space[1]} ${theme.space[3]}`,
+                            borderRadius: theme.radius.stadium,
+                            backgroundColor: statusStyle.bg, color: statusStyle.text,
+                            fontSize: theme.font.size.md, fontWeight: theme.font.weight.semibold,
+                            marginBottom: theme.space[5], textTransform: 'capitalize',
+                        }, children: [_jsx("span", { style: {
+                                    width: detail.statusDotSize, height: detail.statusDotSize,
+                                    borderRadius: theme.radius.full,
+                                    backgroundColor: statusStyle.text,
+                                } }), status] })), hasNotes && (_jsx("div", { "data-graph-detail-notes": "", dangerouslySetInnerHTML: { __html: renderMarkdown(meta.notes) } })), hasDetails && (_jsxs("div", { style: { marginTop: theme.space[5] }, children: [_jsx("h3", { style: {
+                                    fontSize: theme.font.size.xs, fontWeight: theme.font.weight.semibold, color: theme.color.gray3,
+                                    textTransform: 'uppercase', letterSpacing: detail.letterSpacing, marginBottom: theme.space[2],
+                                }, children: "Details" }), _jsx("table", { style: { width: '100%', borderCollapse: 'collapse', fontSize: theme.font.size.base }, children: _jsx("tbody", { children: Object.entries(details).map(([key, value]) => (_jsxs("tr", { style: { borderBottom: `${theme.borderWidth.sm} solid ${theme.color.darkBg3}` }, children: [_jsx("td", { style: {
+                                                    color: theme.color.gray3,
+                                                    padding: `${theme.space[2]} ${theme.space[3]} ${theme.space[2]} 0`,
+                                                    whiteSpace: 'nowrap', verticalAlign: 'top',
+                                                    fontWeight: theme.font.weight.medium,
+                                                }, children: key }), _jsx("td", { style: {
+                                                    color: theme.color.gray4,
+                                                    padding: `${theme.space[2]} 0`,
+                                                    wordBreak: 'break-word',
+                                                    fontFamily: theme.font.mono,
+                                                    fontSize: theme.font.size.md,
+                                                }, children: value })] }, key))) }) })] })), !hasContent && (_jsxs("div", { style: {
+                            padding: `${theme.space[7]} ${theme.space[4]}`,
+                            textAlign: 'center', color: theme.color.gray3,
+                            fontSize: theme.font.size.lg, fontStyle: 'italic',
+                        }, children: ["No metadata for this node.", _jsx("br", {}), _jsx("span", { style: { fontSize: theme.font.size.md, marginTop: theme.space[1], display: 'block' }, children: library.nodeDetailEmptyHint })] }))] })] }));
+});

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

@@ -0,0 +1,11 @@
+/**
+ * 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 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;