@steffolino/diagram-kit-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stefan Stretz
+
+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,20 @@
+# @steffolino/diagram-kit-react
+
+Interactive React renderer for `@steffolino/diagram-kit-core` graphs: real `dagre`
+auto-layout, click-to-select detail panel.
+
+```tsx
+import { fromYaml } from '@steffolino/diagram-kit-adapters'
+import { DiagramView } from '@steffolino/diagram-kit-react'
+
+const graph = fromYaml(yamlSource)
+
+function Diagram() {
+  return <DiagramView graph={graph} layout={{ direction: 'TB' }} />
+}
+```
+
+Requires `react`/`react-dom` ^18 or ^19 as peer dependencies.
+
+Part of the diagram-kit monorepo. See the repo root README for the full
+picture.

package/dist/DetailPanel.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'react';
+import type { DiagramNode, ThemeColors } from '@steffolino/diagram-kit-core';
+export type DetailPanelPosition = 'top' | 'right' | 'bottom' | 'left';
+export interface DetailPanelProps {
+    node: DiagramNode;
+    colors: ThemeColors;
+    onClose: () => void;
+    /** Which edge of the diagram the panel docks to. Default "right". */
+    position?: DetailPanelPosition;
+    /** Frosted-glass styling (translucent + backdrop blur) instead of a flat surface color. Default false. */
+    glass?: boolean;
+    /** The diagram's own laid-out width/height, so the panel scales down for a small diagram instead of overhanging past its edges at a fixed size. */
+    containerWidth: number;
+    containerHeight: number;
+}
+export declare function DetailPanel({ node, colors, onClose, position, glass, containerWidth, containerHeight, }: DetailPanelProps): JSX.Element;
+//# sourceMappingURL=DetailPanel.d.ts.map

package/dist/DetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPanel.d.ts","sourceRoot":"","sources":["../src/DetailPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,GAAG,EAAE,MAAM,OAAO,CAAA;AAC/C,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAG5E,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAErE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAA;IACjB,MAAM,EAAE,WAAW,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,0GAA0G;IAC1G,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mJAAmJ;IACnJ,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,CAAA;CACxB;AA2BD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAkB,EAClB,KAAa,EACb,cAAc,EACd,eAAe,GAChB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiDhC"}

package/dist/DetailPanel.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { withAlpha } from '@steffolino/diagram-kit-core';
+const SIDEBAR_SIZE = 260;
+const BAR_SIZE = 160;
+function positionStyle(position, colors, containerWidth, containerHeight) {
+    const width = Math.min(SIDEBAR_SIZE, containerWidth * 0.75);
+    const height = Math.min(BAR_SIZE, containerHeight * 0.6);
+    switch (position) {
+        case 'left':
+            return { top: 0, left: 0, bottom: 0, width, borderRight: `1px solid ${colors.border}` };
+        case 'top':
+            return { top: 0, left: 0, right: 0, height, borderBottom: `1px solid ${colors.border}` };
+        case 'bottom':
+            return { bottom: 0, left: 0, right: 0, height, borderTop: `1px solid ${colors.border}` };
+        case 'right':
+        default:
+            return { top: 0, right: 0, bottom: 0, width, borderLeft: `1px solid ${colors.border}` };
+    }
+}
+export function DetailPanel({ node, colors, onClose, position = 'right', glass = false, containerWidth, containerHeight, }) {
+    return (_jsxs("aside", { "aria-label": `Details for ${node.label}`, style: {
+            position: 'absolute',
+            padding: 16,
+            background: glass ? withAlpha(colors.surface, 0.6) : colors.surface,
+            backdropFilter: glass ? 'blur(14px) saturate(160%)' : undefined,
+            WebkitBackdropFilter: glass ? 'blur(14px) saturate(160%)' : undefined,
+            color: colors.text,
+            overflowY: 'auto',
+            ...positionStyle(position, colors, containerWidth, containerHeight),
+        }, children: [_jsx("button", { type: "button", "aria-label": "Close details", onClick: onClose, style: {
+                    background: 'none',
+                    border: 'none',
+                    color: colors.textMuted,
+                    cursor: 'pointer',
+                    float: 'right',
+                    fontSize: 14,
+                }, children: "Close" }), _jsx("h3", { style: { margin: '0 0 4px', fontSize: 14, fontWeight: 600 }, children: node.label }), node.badge && (_jsx("span", { style: {
+                    display: 'inline-block',
+                    fontSize: 11,
+                    padding: '2px 6px',
+                    borderRadius: 4,
+                    background: colors.border,
+                    color: colors.textMuted,
+                    marginBottom: 8,
+                }, children: node.badge })), node.detail && _jsx("p", { style: { fontSize: 13, color: colors.textMuted, lineHeight: 1.5 }, children: node.detail })] }));
+}
+//# sourceMappingURL=DetailPanel.js.map

package/dist/DetailPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailPanel.js","sourceRoot":"","sources":["../src/DetailPanel.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAiBxD,MAAM,YAAY,GAAG,GAAG,CAAA;AACxB,MAAM,QAAQ,GAAG,GAAG,CAAA;AAEpB,SAAS,aAAa,CACpB,QAA6B,EAC7B,MAAmB,EACnB,cAAsB,EACtB,eAAuB;IAEvB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,EAAE,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,eAAe,GAAG,GAAG,CAAC,CAAA;IAExD,QAAQ,QAAQ,EAAE,CAAC;QACjB,KAAK,MAAM;YACT,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,MAAM,CAAC,MAAM,EAAE,EAAE,CAAA;QACzF,KAAK,KAAK;YACR,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,MAAM,CAAC,MAAM,EAAE,EAAE,CAAA;QAC1F,KAAK,QAAQ;YACX,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,MAAM,CAAC,MAAM,EAAE,EAAE,CAAA;QAC1F,KAAK,OAAO,CAAC;QACb;YACE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,MAAM,CAAC,MAAM,EAAE,EAAE,CAAA;IAC3F,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,GAAG,OAAO,EAClB,KAAK,GAAG,KAAK,EACb,cAAc,EACd,eAAe,GACE;IACjB,OAAO,CACL,+BACc,eAAe,IAAI,CAAC,KAAK,EAAE,EACvC,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,EAAE;YACX,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;YACnE,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS;YAC/D,oBAAoB,EAAE,KAAK,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,SAAS;YACrE,KAAK,EAAE,MAAM,CAAC,IAAI;YAClB,SAAS,EAAE,MAAM;YACjB,GAAG,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,CAAC;SACpE,aAED,iBACE,IAAI,EAAC,QAAQ,gBACF,eAAe,EAC1B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;oBACL,UAAU,EAAE,MAAM;oBAClB,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE,MAAM,CAAC,SAAS;oBACvB,MAAM,EAAE,SAAS;oBACjB,KAAK,EAAE,OAAO;oBACd,QAAQ,EAAE,EAAE;iBACb,sBAGM,EACT,aAAI,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,IAAI,CAAC,KAAK,GAAM,EACjF,IAAI,CAAC,KAAK,IAAI,CACb,eACE,KAAK,EAAE;oBACL,OAAO,EAAE,cAAc;oBACvB,QAAQ,EAAE,EAAE;oBACZ,OAAO,EAAE,SAAS;oBAClB,YAAY,EAAE,CAAC;oBACf,UAAU,EAAE,MAAM,CAAC,MAAM;oBACzB,KAAK,EAAE,MAAM,CAAC,SAAS;oBACvB,YAAY,EAAE,CAAC;iBAChB,YAEA,IAAI,CAAC,KAAK,GACN,CACR,EACA,IAAI,CAAC,MAAM,IAAI,YAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,EAAE,GAAG,EAAE,YAAG,IAAI,CAAC,MAAM,GAAK,IACjG,CACT,CAAA;AACH,CAAC"}

package/dist/DiagramView.d.ts

@@ -0,0 +1,38 @@
+import { type JSX } from 'react';
+import type { DiagramGraph, DiagramTheme, LayoutOptions, StackLayoutOptions, StructuralLayoutOptions } from '@steffolino/diagram-kit-core';
+import { type DetailPanelPosition } from './DetailPanel.js';
+export type LayoutMode = 'graph' | 'structural' | 'stack' | 'cycle';
+export interface DiagramViewProps {
+    graph: DiagramGraph;
+    /** "graph" (default): dagre layout. "structural": nested containment. "stack": sequential list. "cycle": left-to-right process with circular repeat loops. */
+    layoutMode?: LayoutMode;
+    layout?: LayoutOptions;
+    structuralLayout?: StructuralLayoutOptions;
+    stackLayout?: StackLayoutOptions;
+    theme?: DiagramTheme;
+    mode?: 'light' | 'dark';
+    /** Space around the graph, included in the diagram background. Default 0. */
+    padding?: number;
+    /** Show descriptions in a panel on selection (default), or below titles. */
+    detailPlacement?: 'panel' | 'inline';
+    /** Renders a built-in detail panel on node click when true (default). Pass false to only use onSelect. */
+    showDetailPanel?: boolean;
+    /** Which edge of the diagram the detail panel docks to. Default "right". */
+    detailPanelPosition?: DetailPanelPosition;
+    /** Frosted-glass node chips and detail panel (translucent + backdrop blur) over a soft gradient backdrop, instead of flat surface colors. Default false. */
+    glass?: boolean;
+    /** Tints each entity's own background/border with its category color instead of a neutral surface + accent dot. Default false — entities stay neutral (e.g. dark text on light/white), independent of the category palette. */
+    colorizeNodes?: boolean;
+    onSelect?: (nodeId: string | null) => void;
+}
+/**
+ * Interactive diagram, four layout modes sharing one renderer: "graph"
+ * (real dagre auto-layout, edges drawn as routed lines or chunky block
+ * arrows), "structural" (nested boxes from containment, no connectors —
+ * a context card containing its layers, a directory containing its
+ * files), and "stack" (a flat sequential list, no hierarchy at all).
+ * "cycle" adds circular repeat loops to a left-to-right process.
+ * Descriptions appear on selection or inline beneath titles.
+ */
+export declare function DiagramView({ graph, layoutMode, layout, structuralLayout, stackLayout, theme, mode, padding, detailPlacement, showDetailPanel, detailPanelPosition, glass, colorizeNodes, onSelect, }: DiagramViewProps): JSX.Element;
+//# sourceMappingURL=DiagramView.d.ts.map

package/dist/DiagramView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramView.d.ts","sourceRoot":"","sources":["../src/DiagramView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,GAAG,EAAkB,MAAM,OAAO,CAAA;AACnE,OAAO,KAAK,EACV,YAAY,EAEZ,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,uBAAuB,EACxB,MAAM,8BAA8B,CAAA;AAerC,OAAO,EAAe,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAExE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAA;AAEnE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,YAAY,CAAA;IACnB,8JAA8J;IAC9J,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,gBAAgB,CAAC,EAAE,uBAAuB,CAAA;IAC1C,WAAW,CAAC,EAAE,kBAAkB,CAAA;IAChC,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACvB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACpC,0GAA0G;IAC1G,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,4EAA4E;IAC5E,mBAAmB,CAAC,EAAE,mBAAmB,CAAA;IACzC,4JAA4J;IAC5J,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,+NAA+N;IAC/N,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;CAC3C;AAcD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,UAAoB,EACpB,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,KAAoB,EACpB,IAAc,EACd,OAAW,EACX,eAAyB,EACzB,eAAsB,EACtB,mBAA6B,EAC7B,KAAa,EACb,aAAqB,EACrB,QAAQ,GACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA8UhC"}

package/dist/DiagramView.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { layoutGraph, layoutCycle, layoutStructural, layoutStack, defaultTheme, categoryColor, pointsToSvgPath, blockArrowPoints, pointsToPolygon, withAlpha, detailLines, detailHeight, } from '@steffolino/diagram-kit-core';
+import { DetailPanel } from './DetailPanel.js';
+function NodeContent({ node, accent, colors }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: accent, flexShrink: 0 } }), _jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }, children: node.label }), node.badge && (_jsx("span", { style: { fontSize: 10, color: colors.textMuted, whiteSpace: 'nowrap' }, children: node.badge }))] }));
+}
+/**
+ * Interactive diagram, four layout modes sharing one renderer: "graph"
+ * (real dagre auto-layout, edges drawn as routed lines or chunky block
+ * arrows), "structural" (nested boxes from containment, no connectors —
+ * a context card containing its layers, a directory containing its
+ * files), and "stack" (a flat sequential list, no hierarchy at all).
+ * "cycle" adds circular repeat loops to a left-to-right process.
+ * Descriptions appear on selection or inline beneath titles.
+ */
+export function DiagramView({ graph, layoutMode = 'graph', layout, structuralLayout, stackLayout, theme = defaultTheme, mode = 'light', padding = 0, detailPlacement = 'panel', showDetailPanel = true, detailPanelPosition = 'right', glass = false, colorizeNodes = false, onSelect, }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const colors = theme[mode];
+    const showDetails = detailPlacement === 'inline';
+    const backdropGradient = useMemo(() => {
+        if (!glass)
+            return undefined;
+        const [a, b, c] = colors.categories;
+        return `radial-gradient(circle at 15% 15%, ${a ?? colors.edge}55, transparent 45%), radial-gradient(circle at 85% 30%, ${b ?? colors.edge}44, transparent 50%), radial-gradient(circle at 50% 90%, ${c ?? colors.edge}33, transparent 55%)`;
+    }, [glass, colors]);
+    const positioned = useMemo(() => {
+        if (layoutMode === 'cycle')
+            return layoutCycle(graph, { showDetails });
+        if (layoutMode === 'structural')
+            return layoutStructural(graph, { ...structuralLayout, showDetails });
+        if (layoutMode === 'stack')
+            return layoutStack(graph, { ...stackLayout, showDetails });
+        return layoutGraph(graph, { ...layout, showDetails });
+    }, [graph, layout, structuralLayout, stackLayout, layoutMode, showDetails]);
+    const nodeById = useMemo(() => new Map(graph.nodes.map((n) => [n.id, n])), [graph.nodes]);
+    const containerIds = useMemo(() => new Set(graph.nodes.filter((n) => n.parentId).map((n) => n.parentId)), [graph.nodes]);
+    const maxWeight = useMemo(() => Math.max(1, ...graph.edges.map((e) => e.weight ?? 1)), [graph.edges]);
+    const select = (id) => {
+        setSelectedId((current) => {
+            const next = current === id ? null : id;
+            onSelect?.(next);
+            return next;
+        });
+    };
+    const selectedNode = selectedId ? (nodeById.get(selectedId) ?? null) : null;
+    // Neutral by default (e.g. dark text on a light/white surface), independent
+    // of the category palette — the accent dot alone carries the category.
+    // With `colorizeNodes`, the entity's own fill/border tint toward its
+    // category color instead.
+    function entityFill(accent, glassAlpha, solidAlpha) {
+        if (colorizeNodes)
+            return withAlpha(accent, glass ? glassAlpha * 0.7 : solidAlpha);
+        return glass ? withAlpha(colors.surface, 0.55) : colors.surface;
+    }
+    function entityBorder(accent, selected) {
+        if (selected)
+            return accent;
+        if (colorizeNodes)
+            return withAlpha(accent, 0.5);
+        return glass ? withAlpha(colors.border, 0.5) : colors.border;
+    }
+    const chipStyle = (node, selected, accent) => ({
+        display: 'flex',
+        // With inline detail text, pin the title to a fixed offset from the box
+        // top (rather than centering) so it lines up across nodes whose boxes
+        // are taller than their own content (e.g. cycle mode's uniform-height
+        // boxes) — centering would push shorter-text titles down out of line
+        // with the rest of the row. With no inline detail, there's nothing
+        // below the title to align against, so just center it in the box.
+        alignItems: (showDetails ? 'flex-start' : 'center'),
+        justifyContent: 'center',
+        gap: 6,
+        padding: showDetails ? '14px 10px 0' : '0 10px',
+        borderRadius: 8,
+        border: `1px solid ${entityBorder(accent, selected)}`,
+        background: entityFill(accent, 0.3, 0.14),
+        backdropFilter: glass ? 'blur(10px) saturate(160%)' : undefined,
+        WebkitBackdropFilter: glass ? 'blur(10px) saturate(160%)' : undefined,
+        color: colors.text,
+        fontSize: 12,
+        fontWeight: 500,
+        cursor: 'pointer',
+        boxShadow: selected ? `0 0 0 2px ${accent}33` : undefined,
+    });
+    function renderDescription(node, width) {
+        const lines = showDetails ? detailLines(node.detail, width - 24) : [];
+        return lines.length > 0 ? (_jsx("span", { style: { display: 'block', marginTop: 8, fontSize: 11, lineHeight: '15px', fontWeight: 400, color: colors.textMuted, textAlign: 'center' }, children: lines.map((line, i) => _jsx("span", { style: { display: 'block', whiteSpace: 'pre' }, children: line || '\u00a0' }, i)) })) : null;
+    }
+    function renderContent(node, width, accent) {
+        return (_jsxs("span", { style: { display: 'block', width: '100%', minWidth: 0 }, children: [_jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }, children: _jsx(NodeContent, { node: node, accent: accent, colors: colors }) }), renderDescription(node, width)] }));
+    }
+    function renderLeaf(node, position) {
+        const selected = node.id === selectedId;
+        const accent = categoryColor(node.category, theme, mode);
+        const left = position.x - position.width / 2;
+        const top = position.y - position.height / 2;
+        if (node.shape === 'cylinder') {
+            const capHeight = Math.min(20, position.height * 0.35);
+            return (_jsxs("div", { role: "button", tabIndex: 0, "aria-pressed": selected, onClick: () => select(node.id), onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && select(node.id), style: { position: 'absolute', left, top, width: position.width, height: position.height, cursor: 'pointer' }, children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            top: capHeight / 2,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            borderRadius: '0 0 8px 8px',
+                            border: `1px solid ${entityBorder(accent, selected)}`,
+                            borderTop: 'none',
+                            background: entityFill(accent, 0.3, 0.14),
+                        } }), _jsx("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                            height: capHeight,
+                            borderRadius: '50%',
+                            border: `1px solid ${entityBorder(accent, selected)}`,
+                            background: entityFill(accent, 0.3, 0.14),
+                        } }), _jsx("div", { style: {
+                            position: 'absolute',
+                            top: capHeight,
+                            left: 0,
+                            right: 0,
+                            bottom: 0,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            gap: 6,
+                            padding: '0 10px',
+                            color: colors.text,
+                            fontSize: 12,
+                            fontWeight: 500,
+                        }, children: renderContent(node, position.width, accent) })] }, node.id));
+        }
+        return (_jsx("button", { type: "button", "aria-pressed": selected, onClick: () => select(node.id), style: { position: 'absolute', left, top, width: position.width, height: position.height, ...chipStyle(node, selected, accent) }, children: renderContent(node, position.width, accent) }, node.id));
+    }
+    function renderContainer(node, position) {
+        const selected = node.id === selectedId;
+        const accent = categoryColor(node.category, theme, mode);
+        const left = position.x - position.width / 2;
+        const top = position.y - position.height / 2;
+        return (_jsxs("div", { style: {
+                position: 'absolute',
+                left,
+                top,
+                width: position.width,
+                height: position.height,
+                borderRadius: 10,
+                border: `1px ${node.borderStyle === 'dashed' ? 'dashed' : 'solid'} ${entityBorder(accent, selected)}`,
+                background: colorizeNodes
+                    ? withAlpha(accent, glass ? 0.14 : 0.1)
+                    : glass
+                        ? withAlpha(colors.surface, 0.35)
+                        : withAlpha(colors.surface, 0.6),
+                backdropFilter: glass ? 'blur(10px) saturate(160%)' : undefined,
+                WebkitBackdropFilter: glass ? 'blur(10px) saturate(160%)' : undefined,
+            }, children: [_jsxs("button", { type: "button", "aria-pressed": selected, onClick: () => select(node.id), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        width: '100%',
+                        padding: '6px 10px',
+                        background: 'none',
+                        border: 'none',
+                        borderBottom: `1px solid ${colorizeNodes ? withAlpha(accent, 0.4) : colors.border}`,
+                        color: colors.text,
+                        fontSize: 12,
+                        fontWeight: 600,
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                    }, children: [_jsx("span", { style: { width: 8, height: 8, borderRadius: '50%', background: accent, flexShrink: 0 } }), node.label, node.badge && (_jsx("span", { style: { fontSize: 10, fontWeight: 500, color: colors.textMuted }, children: node.badge }))] }), _jsx("div", { style: { padding: '0 12px', height: detailHeight(node, position.width, showDetails) }, children: renderDescription(node, position.width) })] }, node.id));
+    }
+    return (_jsxs("div", { style: {
+            position: 'relative',
+            width: positioned.width + padding * 2,
+            height: positioned.height + padding * 2,
+            background: backdropGradient ? `${backdropGradient}, ${colors.background}` : colors.background,
+        }, children: [_jsxs("div", { style: { position: 'absolute', left: padding, top: padding, width: positioned.width, height: positioned.height }, children: [positioned.edges.length > 0 && (_jsx("svg", { width: positioned.width, height: positioned.height, style: { position: 'absolute', inset: 0 }, "aria-hidden": "true", focusable: "false", children: positioned.edges.map((edge) => {
+                            const source = graph.edges.find((e) => e.id === edge.id);
+                            const strokeColor = layoutMode === 'cycle' && source && source.source === source.target
+                                ? categoryColor(nodeById.get(source.source)?.category, theme, mode)
+                                : source?.projected ? colors.edgeProjected : colors.edge;
+                            const midpoint = edge.points[Math.floor((edge.points.length - 1) / 2)];
+                            if (edge.arrow || source?.style === 'block') {
+                                const polygon = edge.arrow ?? blockArrowPoints(edge.points);
+                                return (_jsxs("g", { children: [_jsx("polygon", { points: pointsToPolygon(polygon), fill: strokeColor, opacity: 0.85 }), source?.label && midpoint && (_jsx("text", { x: midpoint.x, y: midpoint.y - 12, textAnchor: "middle", fontSize: 10, fill: colors.textMuted, stroke: colors.background, strokeWidth: 4, paintOrder: "stroke", children: source.label }))] }, edge.id));
+                            }
+                            const strokeWidth = 1 + ((source?.weight ?? 1) / maxWeight) * 2;
+                            return (_jsxs("g", { children: [_jsx("path", { d: pointsToSvgPath(edge.points), fill: "none", stroke: strokeColor, strokeWidth: strokeWidth, strokeDasharray: source?.projected ? '4 3' : undefined }), source?.label && midpoint && (_jsx("text", { x: midpoint.x, y: midpoint.y - 6, textAnchor: "middle", fontSize: 10, fill: colors.textMuted, stroke: colors.background, strokeWidth: 4, paintOrder: "stroke", children: source.label }))] }, edge.id));
+                        }) })), positioned.nodes.map((position) => {
+                        const node = nodeById.get(position.id);
+                        if (!node)
+                            return null;
+                        if (layoutMode === 'structural' && containerIds.has(node.id)) {
+                            return renderContainer(node, position);
+                        }
+                        return renderLeaf(node, position);
+                    })] }), !showDetails && showDetailPanel && selectedNode && (_jsx(DetailPanel, { node: selectedNode, colors: colors, position: detailPanelPosition, glass: glass, containerWidth: positioned.width + padding * 2, containerHeight: positioned.height + padding * 2, onClose: () => select(null) }))] }));
+}
+//# sourceMappingURL=DiagramView.js.map

package/dist/DiagramView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramView.js","sourceRoot":"","sources":["../src/DiagramView.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { DiagramView } from './DiagramView.js';
+export type { DiagramViewProps, LayoutMode } from './DiagramView.js';
+export { DetailPanel } from './DetailPanel.js';
+export type { DetailPanelProps, DetailPanelPosition } from './DetailPanel.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { DiagramView } from './DiagramView.js';
+export { DetailPanel } from './DetailPanel.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@steffolino/diagram-kit-react",
+  "version": "0.1.0",
+  "description": "Interactive React renderer for diagram-kit graphs: auto-layout, click-to-select detail panel.",
+  "license": "MIT",
+  "author": "Stefan Stretz",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/steffolino/diagram-kit.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/steffolino/diagram-kit/tree/master/packages/react#readme",
+  "bugs": "https://github.com/steffolino/diagram-kit/issues",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "diagram",
+    "react",
+    "graph",
+    "visualization",
+    "architecture-diagram"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@steffolino/diagram-kit-core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}