@sentropic/design-system-react 0.3.0 → 0.5.0

package/dist/catalog.js

@@ -1,6 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "./classNames.js";
+// Normalises an action item so the rest of the component only deals with the
+// React-native shape: `id` (from id|value) and `variant` (from variant|danger).
+function actionId(item, index, prefix = "item") {
+    return item.id ?? item.value ?? (index === undefined ? undefined : `${prefix}-${index}`);
+}
+function isDangerAction(item) {
+    return item.variant === "danger" || item.danger === true;
+}
 const DATA_TONES = [
     "category1",
     "category2",
@@ -137,21 +145,12 @@ function pct(value, min = 0, max = 100) {
         return 0;
     return clamp(((value - min) / (max - min)) * 100, 0, 100);
 }
-function pointsFrom(values, width, height) {
-    const ys = values.map((entry) => (typeof entry === "number" ? entry : entry.y ?? entry.value ?? 0));
-    const max = Math.max(...ys, 1);
-    return ys
-        .map((value, index) => {
-        const x = ys.length === 1 ? width / 2 : (index / (ys.length - 1)) * width;
-        const y = height - (value / max) * height;
-        return `${x},${y}`;
-    })
-        .join(" ");
-}
-export function Accordion({ items, openIds, defaultOpenIds = [], allowMultiple = true, onChange, className, ...rest }) {
-    const [open, setOpen] = useControlled(openIds, defaultOpenIds, onChange);
+export function Accordion({ items, openIds, defaultOpenIds, open: openAlias, allowMultiple, multiple, onChange, className, ...rest }) {
+    const initialOpen = defaultOpenIds ?? openAlias ?? [];
+    const resolvedAllowMultiple = allowMultiple ?? multiple ?? true;
+    const [open, setOpen] = useControlled(openIds, initialOpen, onChange);
     const toggle = (id) => {
-        const next = open.includes(id) ? open.filter((value) => value !== id) : allowMultiple ? [...open, id] : [id];
+        const next = open.includes(id) ? open.filter((value) => value !== id) : resolvedAllowMultiple ? [...open, id] : [id];
         setOpen(next);
     };
     return (_jsx("div", { ...rest, className: classNames("st-accordion", className), children: items.map((item, index) => {
@@ -165,46 +164,6 @@ export function Accordion({ items, openIds, defaultOpenIds = [], allowMultiple =
 export function Alert({ tone = "info", title, message, actions, children, className, ...rest }) {
     return (_jsxs("section", { ...rest, className: classNames("st-alert", `st-alert--${tone}`, className), role: tone === "warning" || tone === "error" ? "alert" : "status", children: [_jsxs("div", { className: "st-alert__content", children: [_jsx("h2", { className: "st-alert__title", children: title }), message ? _jsx("p", { className: "st-alert__message", children: message }) : null, children] }), actions ? _jsx("div", { className: "st-alert__actions", children: actions }) : null] }));
 }
-function LinearChart({ data, label, width = 320, height = 160, className, type }) {
-    const classBase = type === "areaChart" ? "st-areaChart" : "st-lineChart";
-    const points = pointsFrom(data, width, height);
-    const accessibleLabel = label ?? (type === "areaChart" ? "Area chart" : "Line chart");
-    return (_jsxs("figure", { className: classNames(classBase, className), "aria-label": accessibleLabel, children: [_jsx("span", { className: "st-visually-hidden", children: accessibleLabel }), _jsxs("svg", { viewBox: `0 0  `, "aria-hidden": "true", children: [_jsx("polyline", { className: `${classBase}__line`, points: points, fill: "none" }), type === "areaChart" ? _jsx("polygon", { className: "st-areaChart__area", points: `0,${height} ${points} ${width},${height}` }) : null, data.map((datum, index) => (_jsx("circle", { className: `${classBase}__dot`, cx: points.split(" ")[index]?.split(",")[0], cy: points.split(" ")[index]?.split(",")[1], r: "4" }, index)))] })] }));
-}
-export function AreaChart(props) {
-    return _jsx(LinearChart, { ...props, type: "areaChart" });
-}
-export function LineChart(props) {
-    return _jsx(LinearChart, { ...props, type: "lineChart" });
-}
-export function BarChart({ data, label = "Bar chart", width = 320, height = 160, className, ...rest }) {
-    const max = Math.max(...data.map((datum) => datum.value ?? datum.y ?? 0), 1);
-    return (_jsxs("figure", { ...rest, className: classNames("st-barChart", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: `0 0  `, "aria-hidden": "true", children: data.map((datum, index) => {
-                    const value = datum.value ?? datum.y ?? 0;
-                    const barWidth = width / Math.max(data.length, 1) - 8;
-                    const barHeight = (value / max) * height;
-                    return (_jsx("rect", { className: classNames("st-barChart__bar", `st-barChart__bar--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`), x: index * (barWidth + 8) + 4, y: height - barHeight, width: barWidth, height: barHeight }, index));
-                }) })] }));
-}
-export function DonutChart({ data, label = "Donut chart", className, ...rest }) {
-    const total = data.reduce((sum, datum) => sum + (datum.value ?? datum.y ?? 0), 0);
-    return (_jsxs("figure", { ...rest, className: classNames("st-donutChart", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsxs("svg", { viewBox: "0 0 120 120", "aria-hidden": "true", children: [data.map((datum, index) => (_jsx("circle", { className: classNames("st-donutChart__slice", `st-donutChart__slice--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`), cx: "60", cy: "60", r: 36 - index * 3, fill: "none", strokeWidth: "8" }, index))), _jsx("text", { className: "st-donutChart__center", x: "60", y: "64", textAnchor: "middle", children: total })] })] }));
-}
-export function ScatterPlot({ data, label = "Scatter chart", className, ...rest }) {
-    return (_jsxs("figure", { ...rest, className: classNames("st-scatterPlot", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: "0 0 320 160", "aria-hidden": "true", children: data.map((datum, index) => (_jsx("circle", { className: classNames("st-scatterPlot__point", `st-scatterPlot__point--${datum.tone ?? DATA_TONES[index % DATA_TONES.length]}`), cx: clamp(datum.x * 24 + 24, 12, 308), cy: clamp(148 - datum.y * 24, 12, 148), r: "5", children: _jsx("title", { children: datum.label ?? `${datum.x}, ${datum.y}` }) }, index))) })] }));
-}
-export function StackedBarChart({ data, label = "Stacked bar chart", className, ...rest }) {
-    return (_jsxs("figure", { ...rest, className: classNames("st-stackedBar", className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: "0 0 320 160", "aria-hidden": "true", children: data.map((bar, barIndex) => {
-                    let x = 16;
-                    const total = Math.max(bar.segments.reduce((sum, segment) => sum + segment.value, 0), 1);
-                    return (_jsxs("g", { transform: `translate(0 ${barIndex * 32 + 16})`, children: [bar.segments.map((segment, index) => {
-                                const width = (segment.value / total) * 220;
-                                const rect = (_jsx("rect", { className: classNames("st-stackedBar__seg", `st-stackedBar__seg--${segment.tone ?? DATA_TONES[index % DATA_TONES.length]}`), x: x, y: "0", width: width, height: "20" }, segment.label));
-                                x += width;
-                                return rect;
-                            }), _jsx("text", { className: "st-stackedBar__categoryLabel", x: "250", y: "15", children: bar.label })] }, bar.label));
-                }) })] }));
-}
 export function AspectRatio({ ratio = "16 / 9", className, style, children, ...rest }) {
     const aspectRatio = typeof ratio === "number" ? String(ratio) : ratio;
     return (_jsx("div", { ...rest, className: classNames("st-aspectRatio", className), style: { aspectRatio, ...style }, children: children }));
@@ -292,11 +251,12 @@ export function Combobox({ label, options, value, size = "md", placeholder = "Se
                         selectOption(option);
                     }, children: option.label }, option.value)))) : (_jsx("li", { className: "st-combobox__empty", role: "option", "aria-disabled": "true", "aria-selected": "false", children: noResultsLabel })) })) : null] }));
 }
-export function ContentSwitcher({ items, value, activeId, onChange, size = "md", className, ...rest }) {
+export function ContentSwitcher({ items, value, activeId, onChange, onchange, size = "md", className, ...rest }) {
+    const handleChange = onChange ?? onchange;
     const current = value ?? activeId ?? idFrom(items[0] ?? {}, 0, "content");
     return (_jsx("div", { ...rest, className: classNames("st-contentSwitcher", `st-contentSwitcher--${size}`, className), role: "group", children: items.map((item, index) => {
             const itemId = idFrom(item, index, "content");
-            return (_jsx("button", { type: "button", className: classNames("st-contentSwitcher__option st-contentSwitcher__button", itemId === current && "st-contentSwitcher__option--selected"), disabled: item.disabled, "aria-pressed": itemId === current, onClick: () => onChange?.(itemId), children: item.label }, itemId));
+            return (_jsx("button", { type: "button", className: classNames("st-contentSwitcher__option st-contentSwitcher__button", itemId === current && "st-contentSwitcher__option--selected"), disabled: item.disabled, "aria-pressed": itemId === current, onClick: () => handleChange?.(itemId), children: item.label }, itemId));
         }) }));
 }
 export function CopyButton({ text: copyText, value, label = "Copy", copiedLabel = "Copied", size = "md", className, onClick, ...rest }) {
@@ -307,11 +267,6 @@ export function CopyButton({ text: copyText, value, label = "Copy", copiedLabel
             onClick?.(event);
         }, children: _jsx("span", { className: "st-copyButton__label", children: copied ? copiedLabel : label }) }));
 }
-export function DataTable({ columns, rows, caption, size = "md", className, pageSize, page = 1, totalItems, ...rest }) {
-    const visibleRows = pageSize ? rows.slice((page - 1) * pageSize, page * pageSize) : rows;
-    const total = totalItems ?? rows.length;
-    return (_jsxs("div", { className: "st-dataTable-wrap", children: [_jsxs("table", { ...rest, className: classNames("st-dataTable", `st-dataTable--${size}`, className), children: [caption ? _jsx("caption", { children: caption }) : null, _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { children: column.label }, column.key)) }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsx("tr", { children: columns.map((column) => (_jsx("td", { className: classNames(column.align === "center" && "st-dataTable__cell--center", column.align === "end" && "st-dataTable__cell--end"), children: column.render?.(row, column) ?? text(row[column.key]) }, column.key))) }, row.id))) })] }), pageSize ? _jsx("div", { className: "st-dataTable__pagerStatus", children: `${(page - 1) * pageSize + 1}-${Math.min(page * pageSize, total)} of ${total}` }) : null] }));
-}
 export function DatePicker({ label, value, size = "md", className, ...rest }) {
     return (_jsx("div", { ...rest, className: classNames("st-datepicker", `st-datepicker--${size}`, className), children: _jsx(Field, { label: label, children: (inputId) => _jsx("input", { id: inputId, className: "st-control st-datepicker__control", type: "date", defaultValue: value }) }) }));
 }
@@ -338,7 +293,8 @@ export function Drawer({ open = false, title, description, footer, placement = "
                 onClose?.();
         }, children: _jsxs("aside", { ...rest, ref: panelRef, className: classNames("st-drawer", `st-drawer--${placement}`, className), role: "dialog", "aria-modal": "true", "aria-label": text(title) || "Drawer", tabIndex: -1, onKeyDown: (event) => trapTabKey(event, panelRef.current), children: [_jsxs("div", { className: "st-drawer__header", children: [title ? _jsx("h2", { className: "st-drawer__title", children: title }) : null, _jsx("button", { ref: closeRef, type: "button", className: "st-drawer__close", onClick: onClose, "aria-label": "Close", children: "x" })] }), description ? _jsx("p", { className: "st-drawer__description", children: description }) : null, _jsx("div", { className: "st-drawer__body", children: children }), footer ? _jsx("div", { className: "st-drawer__footer", children: footer }) : null] }) }));
 }
-export function Dropdown({ label = "Select", options, value, open: controlledOpen, placeholder = "Select", onSelect, className, ...rest }) {
+export function Dropdown({ label = "Select", options, value, open: controlledOpen, placeholder = "Select", onSelect, onselect, className, ...rest }) {
+    const handleSelect = onSelect ?? onselect;
     const hostRef = React.useRef(null);
     const itemRefs = React.useRef([]);
     const [open, setOpen] = useControlled(controlledOpen, false);
@@ -358,7 +314,7 @@ export function Dropdown({ label = "Select", options, value, open: controlledOpe
         setCurrent(option.value);
         setOpen(false);
         setActiveIndex(-1);
-        onSelect?.(option.value);
+        handleSelect?.(option.value);
     };
     useOutsideMouseDown(open, hostRef, () => setOpen(false));
     useEscape(open, () => setOpen(false));
@@ -392,50 +348,126 @@ export function Dropdown({ label = "Select", options, value, open: controlledOpe
 export function EmptyState({ title, message, action, children, className, ...rest }) {
     return (_jsx("section", { ...rest, className: classNames("st-empty-state st-emptyState", className), children: _jsxs("div", { className: "st-empty-state__content", children: [_jsx("h2", { className: "st-empty-state__title st-emptyState__title", children: title }), message ? _jsx("p", { className: "st-empty-state__message st-emptyState__message", children: message }) : null, children, action ? _jsx("div", { className: "st-empty-state__action", children: action }) : null] }) }));
 }
+function formatFileSize(bytes) {
+    if (typeof bytes !== "number" || !Number.isFinite(bytes) || bytes < 0)
+        return "";
+    if (bytes === 0)
+        return "0 B";
+    const units = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / Math.pow(1024, i);
+    const formatted = value >= 10 || i === 0 ? value.toFixed(0) : value.toFixed(1);
+    return `${formatted} ${units[i]}`;
+}
+function fileItemName(item) {
+    return item.file?.name ?? item.name;
+}
+function fileItemSize(item) {
+    return item.file?.size ?? item.size;
+}
 export function FileUploader({ label = "Upload", items = [], disabled = false, className, ...rest }) {
-    return (_jsxs("div", { ...rest, className: classNames("st-fileUploader-field", className), children: [_jsxs("div", { className: classNames("st-fileUploader__dropzone", disabled && "st-fileUploader__dropzone--disabled"), children: [_jsx("span", { className: "st-fileUploader__trigger", children: label }), _jsx("input", { className: "st-fileUploader__input", type: "file", disabled: disabled, "aria-label": text(label) })] }), _jsx("ul", { className: "st-fileUploader__list", children: items.map((item, index) => (_jsxs("li", { className: classNames("st-fileUploader__item", item.status && `st-fileUploader__item--${item.status}`), children: [_jsx("span", { className: "st-fileUploader__itemName st-fileUploader__name", children: item.name }), item.error ? _jsx("span", { className: "st-fileUploader__itemError", children: item.error }) : null] }, item.id ?? item.name ?? index))) })] }));
+    return (_jsxs("div", { ...rest, className: classNames("st-fileUploader-field", className), children: [_jsxs("div", { className: classNames("st-fileUploader__dropzone", disabled && "st-fileUploader__dropzone--disabled"), children: [_jsx("span", { className: "st-fileUploader__trigger", children: label }), _jsx("input", { className: "st-fileUploader__input", type: "file", disabled: disabled, "aria-label": text(label) })] }), _jsx("ul", { className: "st-fileUploader__list", children: items.map((item, index) => {
+                    const name = fileItemName(item);
+                    const size = fileItemSize(item);
+                    const sizeLabel = formatFileSize(size);
+                    return (_jsxs("li", { className: classNames("st-fileUploader__item", item.status && `st-fileUploader__item--${item.status}`), children: [_jsx("span", { className: "st-fileUploader__itemName st-fileUploader__name", children: name }), sizeLabel ? _jsx("span", { className: "st-fileUploader__itemSize", children: sizeLabel }) : null, item.error ? _jsx("span", { className: "st-fileUploader__itemError", children: item.error }) : null] }, item.id ?? name ?? index));
+                }) })] }));
 }
 export function Footer({ brand, columns, links, copyright, className, ...rest }) {
     const groups = columns ?? (links ? [{ links }] : []);
     return (_jsxs("footer", { ...rest, className: classNames("st-footer", className), children: [_jsxs("div", { className: "st-footer__top", children: [brand ? _jsx("div", { className: "st-footer__brand", children: brand }) : null, _jsx("div", { className: "st-footer__columns", children: groups.map((group, index) => (_jsxs("nav", { children: [group.title ? _jsx("h2", { children: group.title }) : null, group.links.map((link) => (_jsx("a", { href: link.href, children: link.label }, link.href)))] }, index))) })] }), copyright ? _jsx("div", { className: "st-footer__copyright", children: copyright }) : null] }));
 }
+/**
+ * Maps a dash style (or the legacy `weak` flag) to an SVG stroke-dasharray.
+ * Returns null for a solid stroke.
+ */
+export function edgeDashArray(dash, weak) {
+    const effective = dash ?? (weak ? "dashed" : undefined);
+    switch (effective) {
+        case "dashed":
+            return "6 4";
+        case "dotted":
+            return "1 4";
+        case "long-dash":
+            return "12 6";
+        case "solid":
+        default:
+            return null;
+    }
+}
 // ---------------------------------------------------------------------------
 // SVG path helpers for the various node shapes.
-// All shapes are centered at (0,0) and sized to inscribe within radius r.
+// All shapes are centered at (0,0). Each shape is scaled so its filled area
+// matches that of the reference circle (π·r²) — this keeps equal-weight nodes
+// visually balanced rather than letting squares/diamonds read as "bigger".
+//
+// Per-shape scale factors (closed-form, area = π·r²):
+//   square / roundedbox : half-side  = (√π)/2 · r        ≈ 0.8862·r
+//   diamond             : half-diag   = √(π/2) · r        ≈ 1.2533·r
+//   triangle (equilat.) : circumradius= √(π/(3√3/4)) · r  ≈ 1.5551·r
+//   hexagon (regular)   : circumradius= √(π/(3√3/2)) · r  ≈ 1.0996·r
+//   star (5-pt, k=0.42) : outer radius= √(π/A₁) · r       ≈ 1.5953·r
+//                          where A₁ is the unit-star area (≈1.2343).
 // ---------------------------------------------------------------------------
+const FORCE_GRAPH_STAR_INNER_RATIO = 0.42;
+const FORCE_GRAPH_STAR_AREA_FACTOR = 1.5953498885642274; // √(π / unit-star-area)
+// Format a coordinate: 4 dp, snapping floating-point near-zero (e.g. 9e-16)
+// to a clean 0 so paths never contain scientific notation.
+function forceGraphFmt(n) {
+    const v = Math.abs(n) < 1e-9 ? 0 : n;
+    return Number(v.toFixed(4)).toString();
+}
 export function nodeShapePath(shape, r) {
     const s = shape ?? "dot";
     if (s === "dot" || s === "circle")
         return null; // use <circle>
     if (s === "diamond") {
-        return `M 0 ${-r} L ${r} 0 L 0 ${r} L ${-r} 0 Z`;
+        const d = Math.sqrt(Math.PI / 2) * r; // half-diagonal
+        return `M 0 ${forceGraphFmt(-d)} L ${forceGraphFmt(d)} 0 L 0 ${forceGraphFmt(d)} L ${forceGraphFmt(-d)} 0 Z`;
     }
     if (s === "star") {
-        const outer = r;
-        const inner = r * 0.42;
+        const outer = FORCE_GRAPH_STAR_AREA_FACTOR * r;
+        const inner = outer * FORCE_GRAPH_STAR_INNER_RATIO;
         const pts = [];
         for (let i = 0; i < 10; i++) {
             const angle = (i * Math.PI) / 5 - Math.PI / 2;
             const rad = i % 2 === 0 ? outer : inner;
-            pts.push(`${rad * Math.cos(angle)},${rad * Math.sin(angle)}`);
+            pts.push(`${forceGraphFmt(rad * Math.cos(angle))},${forceGraphFmt(rad * Math.sin(angle))}`);
         }
         return `M ${pts.join(" L ")} Z`;
     }
     if (s === "hexagon") {
+        const R = Math.sqrt(Math.PI / ((3 * Math.sqrt(3)) / 2)) * r; // circumradius
         const pts = [];
         for (let i = 0; i < 6; i++) {
             const angle = (i * Math.PI) / 3 - Math.PI / 6;
-            pts.push(`${r * Math.cos(angle)},${r * Math.sin(angle)}`);
+            pts.push(`${forceGraphFmt(R * Math.cos(angle))},${forceGraphFmt(R * Math.sin(angle))}`);
         }
         return `M ${pts.join(" L ")} Z`;
     }
     if (s === "box" || s === "square") {
-        const h = r * 0.85;
-        return `M ${-h} ${-h} L ${h} ${-h} L ${h} ${h} L ${-h} ${h} Z`;
+        const h = (Math.sqrt(Math.PI) / 2) * r; // half-side, area = (2h)² = π·r²
+        return `M ${forceGraphFmt(-h)} ${forceGraphFmt(-h)} L ${forceGraphFmt(h)} ${forceGraphFmt(-h)} L ${forceGraphFmt(h)} ${forceGraphFmt(h)} L ${forceGraphFmt(-h)} ${forceGraphFmt(h)} Z`;
+    }
+    if (s === "roundedbox") {
+        const h = (Math.sqrt(Math.PI) / 2) * r; // same footprint as square
+        const rx = h * 0.6; // ≈ r·0.3 rounding radius (h ≈ 0.886·r)
+        // Rounded rectangle via arcs, clockwise from top edge.
+        return (`M ${forceGraphFmt(-h + rx)} ${forceGraphFmt(-h)} ` +
+            `L ${forceGraphFmt(h - rx)} ${forceGraphFmt(-h)} A ${forceGraphFmt(rx)} ${forceGraphFmt(rx)} 0 0 1 ${forceGraphFmt(h)} ${forceGraphFmt(-h + rx)} ` +
+            `L ${forceGraphFmt(h)} ${forceGraphFmt(h - rx)} A ${forceGraphFmt(rx)} ${forceGraphFmt(rx)} 0 0 1 ${forceGraphFmt(h - rx)} ${forceGraphFmt(h)} ` +
+            `L ${forceGraphFmt(-h + rx)} ${forceGraphFmt(h)} A ${forceGraphFmt(rx)} ${forceGraphFmt(rx)} 0 0 1 ${forceGraphFmt(-h)} ${forceGraphFmt(h - rx)} ` +
+            `L ${forceGraphFmt(-h)} ${forceGraphFmt(-h + rx)} A ${forceGraphFmt(rx)} ${forceGraphFmt(rx)} 0 0 1 ${forceGraphFmt(-h + rx)} ${forceGraphFmt(-h)} Z`);
     }
     if (s === "triangle") {
-        const h = r * 1.1;
-        return `M 0 ${-h} L ${h * 0.9} ${h * 0.6} L ${-h * 0.9} ${h * 0.6} Z`;
+        // Equilateral, centred at centroid; circumradius h so apex is up.
+        const h = Math.sqrt(Math.PI / ((3 * Math.sqrt(3)) / 4)) * r;
+        const pts = [];
+        for (let i = 0; i < 3; i++) {
+            const angle = (i * 2 * Math.PI) / 3 - Math.PI / 2;
+            pts.push(`${forceGraphFmt(h * Math.cos(angle))},${forceGraphFmt(h * Math.sin(angle))}`);
+        }
+        return `M ${pts.join(" L ")} Z`;
     }
     return null;
 }
@@ -573,9 +605,14 @@ function runForceGraphSimulation(ns, es, w, h, ticks, nodeRadius) {
             }
             sn.x += sn.vx;
             sn.y += sn.vy;
-            // Keep inside a padded viewport.
-            sn.x = Math.max(nodeRadius * 2, Math.min(w - nodeRadius * 2, sn.x));
-            sn.y = Math.max(nodeRadius * 2, Math.min(h - nodeRadius * 2, sn.y));
+            // Soft clamp: allow the layout to overflow the canvas so it keeps a
+            // natural shape (fit-to-content reframes it afterwards). The wide bound
+            // only guards against runaway coordinates, it no longer glues nodes to
+            // the four edges.
+            const padX = w * 0.5 + nodeRadius * 2;
+            const padY = h * 0.5 + nodeRadius * 2;
+            sn.x = Math.max(-padX, Math.min(w + padX, sn.x));
+            sn.y = Math.max(-padY, Math.min(h + padY, sn.y));
         }
         temperature *= cooling;
     }
@@ -584,7 +621,12 @@ function runForceGraphSimulation(ns, es, w, h, ticks, nodeRadius) {
         out.set(sn.id, { x: sn.x, y: sn.y });
     return out;
 }
-export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nodeRadius = 7, showLabels = true, iterations = 300, selectedIds = [], focusId = null, onSelect, onOpenEntity, onEdgeHover, legend, className, ...rest }) {
+// Curvature offset factor: how far (relative to chord length) the control
+// point bows out at edgeCurve=1. Kept modest so edgeCurve≈0.15 reads "light".
+const FORCE_GRAPH_CURVE_FACTOR = 0.5;
+// Fit-to-content margin (per side, fraction of the content box).
+const FORCE_GRAPH_CONTENT_MARGIN = 0.08;
+export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nodeRadius = 7, showLabels = true, iterations = 300, selectedIds = [], focusId = null, onSelect, onOpenEntity, onEdgeHover, legend, edgeCurve = 0.15, className, ...rest }) {
     // SSR-safe reduced-motion check (window may be undefined during SSR/tests).
     const prefersReducedMotion = typeof window !== "undefined" &&
         typeof window.matchMedia === "function" &&
@@ -615,6 +657,7 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
     }), [nodes, layout, width, height, nodeRadius, toneMap]);
     const positionedEdges = React.useMemo(() => {
         const nodeById = new Map(nodes.map((n) => [n.id, n]));
+        const curve = Math.max(0, edgeCurve ?? 0);
         return edges
             .map((e, i) => {
             const a = layout.get(e.source);
@@ -623,22 +666,134 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
                 return null;
             const srcNode = nodeById.get(e.source);
             const tgtNode = nodeById.get(e.target);
+            const x1 = a.x, y1 = a.y, x2 = b.x, y2 = b.y;
+            // Quadratic control point: midpoint pushed perpendicular to the chord.
+            let path = null;
+            let cx = (x1 + x2) / 2;
+            let cy = (y1 + y2) / 2;
+            if (curve > 0) {
+                const dx = x2 - x1;
+                const dy = y2 - y1;
+                const dist = Math.sqrt(dx * dx + dy * dy) || 0.0001;
+                const off = curve * dist * FORCE_GRAPH_CURVE_FACTOR;
+                // Unit perpendicular to the chord.
+                const px = -dy / dist;
+                const py = dx / dist;
+                cx = (x1 + x2) / 2 + px * off;
+                cy = (y1 + y2) / 2 + py * off;
+                path = `M ${x1} ${y1} Q ${cx} ${cy} ${x2} ${y2}`;
+            }
+            const dashArray = edgeDashArray(e.dash, e.weak);
+            const strokeWidth = typeof e.width === "number" ? e.width : e.emphasis ? 2.5 : null;
             return {
                 edge: e,
                 i,
-                x1: a.x,
-                y1: a.y,
-                x2: b.x,
-                y2: b.y,
+                x1,
+                y1,
+                x2,
+                y2,
+                // Tooltip / label anchor follows the curve apex when curved.
+                midX: cx,
+                midY: cy,
+                path,
+                dashArray,
+                strokeWidth,
                 srcLabel: srcNode?.label ?? e.source,
                 tgtLabel: tgtNode?.label ?? e.target,
             };
         })
             .filter((e) => e !== null);
-    }, [nodes, edges, layout]);
+    }, [nodes, edges, layout, edgeCurve]);
+    // ---------------------------------------------------------------------------
+    // Fit-to-content (Feature 5): after warmup the layout may extend beyond the
+    // nominal width/height. Compute the real content bounding-box (node centres
+    // ± radius) and frame it with an 8% margin on each side. The base viewBox is
+    // this frame (not the fixed 0,0,w,h), so the graph is centred and never
+    // clipped, whatever the aspect ratio. Zoom/pan stay relative to this frame.
+    // ---------------------------------------------------------------------------
+    const contentBox = React.useMemo(() => {
+        if (positionedNodes.length === 0) {
+            return { x: 0, y: 0, w: width, h: height };
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const p of positionedNodes) {
+            // Use the worst-case extent for non-circular shapes (area-scaled) so the
+            // glyph (and a little label room) is never clipped.
+            const ext = p.r * 1.7;
+            minX = Math.min(minX, p.x - ext);
+            minY = Math.min(minY, p.y - ext);
+            maxX = Math.max(maxX, p.x + ext);
+            maxY = Math.max(maxY, p.y + ext);
+        }
+        let w = maxX - minX;
+        let h = maxY - minY;
+        // Guard against a degenerate (single node / collinear) box.
+        if (!(w > 0)) {
+            w = width;
+            minX = maxX - w / 2;
+        }
+        if (!(h > 0)) {
+            h = height;
+            minY = maxY - h / 2;
+        }
+        const mx = w * FORCE_GRAPH_CONTENT_MARGIN;
+        const my = h * FORCE_GRAPH_CONTENT_MARGIN;
+        return { x: minX - mx, y: minY - my, w: w + 2 * mx, h: h + 2 * my };
+    }, [positionedNodes, width, height]);
     const [hoveredNodeIndex, setHoveredNodeIndex] = React.useState(null);
     const [hoveredEdgeIndex, setHoveredEdgeIndex] = React.useState(null);
     const selectedSet = React.useMemo(() => new Set(selectedIds), [selectedIds]);
+    // Adjacency: id -> set of directly connected node ids. Used to keep the
+    // direct neighbours of selected/focused nodes fully visible (demand 6).
+    const adjacency = React.useMemo(() => {
+        const adj = new Map();
+        const add = (a, b) => {
+            let set = adj.get(a);
+            if (!set) {
+                set = new Set();
+                adj.set(a, set);
+            }
+            set.add(b);
+        };
+        for (const e of edges) {
+            add(e.source, e.target);
+            add(e.target, e.source);
+        }
+        return adj;
+    }, [edges]);
+    // True when a selection/focus is active — only then do we dim non-related
+    // nodes. The set of "active" ids = selected ∪ focus ∪ all their neighbours.
+    const hasActiveSelection = selectedSet.size > 0 || focusId != null;
+    const activeAndNeighbours = React.useMemo(() => {
+        const active = new Set(selectedSet);
+        if (focusId != null)
+            active.add(focusId);
+        // Expand to direct neighbours so they stay fully visible.
+        const withNeighbours = new Set(active);
+        for (const id of active) {
+            const nb = adjacency.get(id);
+            if (nb)
+                for (const n of nb)
+                    withNeighbours.add(n);
+        }
+        return withNeighbours;
+    }, [selectedSet, focusId, adjacency]);
+    // A node is dimmed by selection when there IS an active selection and the
+    // node is neither selected/focused nor a direct neighbour of one.
+    function isSelectionDimmed(id) {
+        if (!hasActiveSelection)
+            return false;
+        return !activeAndNeighbours.has(id);
+    }
+    // An edge stays fully visible when at least one endpoint is in the
+    // selected/focused set (it is a connection of the selection).
+    function isEdgeSelectionDimmed(e) {
+        if (!hasActiveSelection)
+            return false;
+        const srcActive = selectedSet.has(e.source) || focusId === e.source;
+        const tgtActive = selectedSet.has(e.target) || focusId === e.target;
+        return !(srcActive || tgtActive);
+    }
     // Keyboard handler for a node element: Space/Enter → onSelect, Enter → onOpenEntity.
     function handleNodeKeydown(id, e) {
         if (e.key === "Enter" || e.key === " ") {
@@ -650,10 +805,11 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
         }
     }
     // ---------------------------------------------------------------------------
-    // Zoom + pan state. Store zoom as a scale multiplier + pan offset so syncing
-    // with width/height props is trivial.
-    //   vbW = width / zoomScale,  vbH = height / zoomScale
-    //   vbX / vbY = pan offset in SVG coordinate space
+    // Zoom + pan state (framed by the fit-to-content box, Feature 5). The base
+    // frame is `contentBox` (not 0,0,w,h). Zoom is a scale multiplier and pan is
+    // an offset in SVG coords, both relative to that base frame:
+    //   vbW = baseW / zoomScale,  vbH = baseH / zoomScale
+    //   vbX = baseX + panX,       vbY = baseY + panY
     // ---------------------------------------------------------------------------
     const [zoomScale, setZoomScale] = React.useState(1);
     const [panX, setPanX] = React.useState(0);
@@ -662,10 +818,15 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
     const panStartRef = React.useRef({ x: 0, y: 0, panX: 0, panY: 0 });
     const svgRef = React.useRef(null);
     const [isPanning, setIsPanning] = React.useState(false);
-    const vbW = width / zoomScale;
-    const vbH = height / zoomScale;
-    const vbX = panX;
-    const vbY = panY;
+    // Base frame dimensions = fit-to-content box.
+    const baseW = contentBox.w;
+    const baseH = contentBox.h;
+    const baseX = contentBox.x;
+    const baseY = contentBox.y;
+    const vbW = baseW / zoomScale;
+    const vbH = baseH / zoomScale;
+    const vbX = baseX + panX;
+    const vbY = baseY + panY;
     function resetView() {
         setZoomScale(1);
         setPanX(0);
@@ -682,14 +843,17 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
         // Anchor zoom around the cursor position in SVG coords.
         if (svgRef.current) {
             const rect = svgRef.current.getBoundingClientRect();
-            const cursorSvgX = panX + ((ev.clientX - rect.left) / rect.width) * (width / zoomScale);
-            const cursorSvgY = panY + ((ev.clientY - rect.top) / rect.height) * (height / zoomScale);
-            const newVbW = width / newScale;
-            const newVbH = height / newScale;
-            const ratioX = (cursorSvgX - panX) / (width / zoomScale);
-            const ratioY = (cursorSvgY - panY) / (height / zoomScale);
-            setPanX(cursorSvgX - ratioX * newVbW);
-            setPanY(cursorSvgY - ratioY * newVbH);
+            const curW = baseW / zoomScale;
+            const curH = baseH / zoomScale;
+            const cursorSvgX = vbX + ((ev.clientX - rect.left) / rect.width) * curW;
+            const cursorSvgY = vbY + ((ev.clientY - rect.top) / rect.height) * curH;
+            const newVbW = baseW / newScale;
+            const newVbH = baseH / newScale;
+            const ratioX = (cursorSvgX - vbX) / curW;
+            const ratioY = (cursorSvgY - vbY) / curH;
+            // New top-left so the cursor anchor stays put, then back out the pan term.
+            setPanX(cursorSvgX - ratioX * newVbW - baseX);
+            setPanY(cursorSvgY - ratioY * newVbH - baseY);
         }
         setZoomScale(newScale);
     }
@@ -723,10 +887,15 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
     const hoveredNodeRelCount = hoveredNode
         ? positionedEdges.filter((e) => e.edge.source === hoveredNode.node.id || e.edge.target === hoveredNode.node.id).length
         : 0;
-    return (_jsxs("div", { ...rest, className: classNames("st-forceGraph", prefersReducedMotion && "st-forceGraph--static", className), role: "img", "aria-label": label, children: [_jsxs("svg", { ref: svgRef, viewBox: viewBox, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", className: classNames(isPanning && "st-forceGraph__svg--panning"), onWheel: handleWheel, onMouseDown: handleBgMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [_jsx("g", { className: "st-forceGraph__edges", children: positionedEdges.map((e) => (_jsxs(React.Fragment, { children: [_jsx("line", { className: "st-forceGraph__edgeHit", role: "presentation", x1: e.x1, y1: e.y1, x2: e.x2, y2: e.y2, onMouseEnter: () => {
-                                        setHoveredEdgeIndex(e.i);
-                                        onEdgeHover?.(e.edge);
-                                    }, onMouseLeave: () => setHoveredEdgeIndex(null) }), _jsx("line", { className: classNames("st-forceGraph__edge", e.edge.weak && "st-forceGraph__edge--weak", hoveredEdgeIndex === e.i && "st-forceGraph__edge--hovered"), x1: e.x1, y1: e.y1, x2: e.x2, y2: e.y2, pointerEvents: "none" })] }, e.i))) }), _jsx("g", { className: "st-forceGraph__nodes", children: positionedNodes.map((p) => {
+    return (_jsxs("div", { ...rest, className: classNames("st-forceGraph", prefersReducedMotion && "st-forceGraph--static", className), role: "img", "aria-label": label, children: [_jsxs("svg", { ref: svgRef, viewBox: viewBox, preserveAspectRatio: "xMidYMid meet", width: "100%", height: "100%", focusable: "false", "aria-hidden": "true", className: classNames(isPanning && "st-forceGraph__svg--panning"), onWheel: handleWheel, onMouseDown: handleBgMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: [_jsx("g", { className: "st-forceGraph__edges", children: positionedEdges.map((e) => {
+                            const onHitEnter = () => {
+                                setHoveredEdgeIndex(e.i);
+                                onEdgeHover?.(e.edge);
+                            };
+                            const onHitLeave = () => setHoveredEdgeIndex(null);
+                            const edgeClass = classNames("st-forceGraph__edge", e.edge.weak && "st-forceGraph__edge--weak", e.edge.emphasis && "st-forceGraph__edge--emphasis", hoveredEdgeIndex === e.i && "st-forceGraph__edge--hovered", isEdgeSelectionDimmed(e.edge) && "st-forceGraph__edge--dim");
+                            return (_jsxs(React.Fragment, { children: [e.path ? (_jsx("path", { className: "st-forceGraph__edgeHit", role: "presentation", d: e.path, fill: "none", onMouseEnter: onHitEnter, onMouseLeave: onHitLeave })) : (_jsx("line", { className: "st-forceGraph__edgeHit", role: "presentation", x1: e.x1, y1: e.y1, x2: e.x2, y2: e.y2, onMouseEnter: onHitEnter, onMouseLeave: onHitLeave })), e.path ? (_jsx("path", { className: edgeClass, d: e.path, fill: "none", strokeDasharray: e.dashArray ?? undefined, strokeWidth: e.strokeWidth ?? undefined, pointerEvents: "none" })) : (_jsx("line", { className: edgeClass, x1: e.x1, y1: e.y1, x2: e.x2, y2: e.y2, strokeDasharray: e.dashArray ?? undefined, strokeWidth: e.strokeWidth ?? undefined, pointerEvents: "none" }))] }, e.i));
+                        }) }), _jsx("g", { className: "st-forceGraph__nodes", children: positionedNodes.map((p) => {
                             const ariaLabel = `${p.title}${p.node.group !== undefined ? `: ${p.node.group}` : ""}`;
                             const pressed = selectedSet.has(p.node.id);
                             const shapeProps = {
@@ -743,28 +912,32 @@ export function ForceGraph({ nodes, edges, label, width = 480, height = 360, nod
                                 onDoubleClick: () => onOpenEntity?.(p.node.id),
                                 onKeyDown: (e) => handleNodeKeydown(p.node.id, e),
                             };
-                            return (_jsxs("g", { className: classNames("st-forceGraph__node", `st-forceGraph__node--${p.tone}`, hoveredNodeIndex !== null && hoveredNodeIndex !== p.i && "st-forceGraph__node--dim", pressed && "st-forceGraph__node--selected", focusId === p.node.id && "st-forceGraph__node--focus"), transform: `translate(${p.x} ${p.y})`, children: [p.shapePath ? (_jsx("path", { ...shapeProps, d: p.shapePath })) : (_jsx("circle", { ...shapeProps, r: p.r })), showLabels ? (_jsx("text", { className: "st-forceGraph__label", x: p.r + 3, y: 0, dominantBaseline: "middle", children: p.title })) : null] }, p.node.id));
+                            return (_jsxs("g", { className: classNames("st-forceGraph__node", `st-forceGraph__node--${p.tone}`, ((hoveredNodeIndex !== null && hoveredNodeIndex !== p.i) ||
+                                    isSelectionDimmed(p.node.id)) &&
+                                    "st-forceGraph__node--dim", pressed && "st-forceGraph__node--selected", focusId === p.node.id && "st-forceGraph__node--focus"), transform: `translate(${p.x} ${p.y})`, children: [p.shapePath ? (_jsx("path", { ...shapeProps, d: p.shapePath })) : (_jsx("circle", { ...shapeProps, r: p.r })), showLabels ? (_jsx("text", { className: "st-forceGraph__label", x: p.r + 3, y: 0, dominantBaseline: "middle", children: p.title })) : null] }, p.node.id));
                         }) })] }), hoveredNode ? (_jsxs("div", { className: "st-forceGraph__tooltip", role: "presentation", style: {
                     left: `${((hoveredNode.x - vbX) / vbW) * 100}%`,
                     top: `${((hoveredNode.y - vbY) / vbH) * 100}%`,
                 }, children: [_jsx("span", { className: "st-forceGraph__tooltipLabel", children: hoveredNode.title }), hoveredNode.node.group !== undefined ? (_jsx("span", { className: "st-forceGraph__tooltipMeta", children: hoveredNode.node.group })) : null, hoveredNodeRelCount > 0 ? (_jsxs("span", { className: "st-forceGraph__tooltipMeta", children: [hoveredNodeRelCount, " relation", hoveredNodeRelCount === 1 ? "" : "s"] })) : null] })) : null, hoveredEdge ? (_jsxs("div", { className: "st-forceGraph__tooltip st-forceGraph__tooltip--edge", role: "presentation", style: {
-                    left: `${(((hoveredEdge.x1 + hoveredEdge.x2) / 2 - vbX) / vbW) * 100}%`,
-                    top: `${(((hoveredEdge.y1 + hoveredEdge.y2) / 2 - vbY) / vbH) * 100}%`,
+                    left: `${((hoveredEdge.midX - vbX) / vbW) * 100}%`,
+                    top: `${((hoveredEdge.midY - vbY) / vbH) * 100}%`,
                 }, children: [_jsx("span", { className: "st-forceGraph__tooltipLabel", children: hoveredEdge.srcLabel }), hoveredEdge.edge.relation ? (_jsx("span", { className: "st-forceGraph__tooltipRelation", children: hoveredEdge.edge.relation })) : null, _jsx("span", { className: "st-forceGraph__tooltipLabel", children: hoveredEdge.tgtLabel })] })) : null, isZoomed ? (_jsx("button", { className: "st-forceGraph__resetBtn", type: "button", "aria-label": "Reset view", onClick: resetView, children: "\u21BA" })) : null, legend && legend.length > 0 ? (_jsx("div", { className: "st-forceGraph__legend", "aria-label": "Graph legend", children: legend.map((entry, idx) => {
                     const swatchPath = entry.shape !== undefined ? nodeShapePath(entry.shape, 7) : null;
                     const swatchTone = entry.tone ?? "category1";
+                    const swatchDash = entry.shape === undefined ? edgeDashArray(entry.dash, entry.weak) : null;
                     return (_jsxs("div", { className: "st-forceGraph__legendEntry", children: [entry.shape !== undefined ? (
-                            // Node shape legend entry
-                            _jsx("svg", { className: "st-forceGraph__legendSwatch", viewBox: "-8 -8 16 16", width: "16", height: "16", "aria-hidden": "true", children: swatchPath ? (_jsx("path", { d: swatchPath, className: `st-forceGraph__legendShape st-forceGraph__legendShape--${swatchTone}` })) : (_jsx("circle", { r: "7", className: `st-forceGraph__legendShape st-forceGraph__legendShape--${swatchTone}` })) })) : (
+                            // Node shape legend entry (viewBox widened for area-scaled glyphs)
+                            _jsx("svg", { className: "st-forceGraph__legendSwatch", viewBox: "-13 -13 26 26", width: "16", height: "16", "aria-hidden": "true", children: swatchPath ? (_jsx("path", { d: swatchPath, className: `st-forceGraph__legendShape st-forceGraph__legendShape--${swatchTone}` })) : (_jsx("circle", { r: "7", className: `st-forceGraph__legendShape st-forceGraph__legendShape--${swatchTone}` })) })) : (
                             // Edge style legend entry
-                            _jsx("svg", { className: "st-forceGraph__legendSwatch", viewBox: "0 0 16 8", width: "16", height: "8", "aria-hidden": "true", children: _jsx("line", { x1: "0", y1: "4", x2: "16", y2: "4", className: classNames("st-forceGraph__legendEdge", entry.weak && "st-forceGraph__legendEdge--weak") }) })), _jsx("span", { className: "st-forceGraph__legendLabel", children: entry.label })] }, idx));
+                            _jsx("svg", { className: "st-forceGraph__legendSwatch", viewBox: "0 0 16 8", width: "16", height: "8", "aria-hidden": "true", children: _jsx("line", { x1: "0", y1: "4", x2: "16", y2: "4", className: classNames("st-forceGraph__legendEdge", entry.weak && "st-forceGraph__legendEdge--weak"), strokeDasharray: swatchDash ?? undefined }) })), _jsx("span", { className: "st-forceGraph__legendLabel", children: entry.label })] }, idx));
                 }) })) : null] }));
 }
 export function GraphLegend({ entries, title, className, ...rest }) {
     return (_jsxs("div", { ...rest, className: classNames("st-graphLegend", className), "aria-label": title ?? "Graph legend", children: [title ? _jsx("p", { className: "st-graphLegend__title", children: title }) : null, _jsx("ul", { className: "st-graphLegend__list", role: "list", children: entries.map((entry, idx) => {
                     const swatchPath = entry.shape !== undefined ? nodeShapePath(entry.shape, 7) : null;
                     const swatchTone = entry.tone ?? "category1";
-                    return (_jsxs("li", { className: "st-graphLegend__entry", children: [entry.shape !== undefined ? (_jsx("svg", { className: "st-graphLegend__swatch", viewBox: "-8 -8 16 16", width: "16", height: "16", "aria-hidden": "true", children: swatchPath ? (_jsx("path", { d: swatchPath, className: `st-graphLegend__shape st-graphLegend__shape--${swatchTone}` })) : (_jsx("circle", { r: "7", className: `st-graphLegend__shape st-graphLegend__shape--${swatchTone}` })) })) : (_jsx("svg", { className: "st-graphLegend__swatch", viewBox: "0 0 16 8", width: "16", height: "8", "aria-hidden": "true", children: _jsx("line", { x1: "0", y1: "4", x2: "16", y2: "4", className: classNames("st-graphLegend__edge", entry.weak && "st-graphLegend__edge--weak") }) })), _jsx("span", { className: "st-graphLegend__label", children: entry.label })] }, idx));
+                    const swatchDash = entry.shape === undefined ? edgeDashArray(entry.dash, entry.weak) : null;
+                    return (_jsxs("li", { className: "st-graphLegend__entry", children: [entry.shape !== undefined ? (_jsx("svg", { className: "st-graphLegend__swatch", viewBox: "-13 -13 26 26", width: "16", height: "16", "aria-hidden": "true", children: swatchPath ? (_jsx("path", { d: swatchPath, className: `st-graphLegend__shape st-graphLegend__shape--${swatchTone}` })) : (_jsx("circle", { r: "7", className: `st-graphLegend__shape st-graphLegend__shape--${swatchTone}` })) })) : (_jsx("svg", { className: "st-graphLegend__swatch", viewBox: "0 0 16 8", width: "16", height: "8", "aria-hidden": "true", children: _jsx("line", { x1: "0", y1: "4", x2: "16", y2: "4", className: classNames("st-graphLegend__edge", entry.weak && "st-graphLegend__edge--weak"), strokeDasharray: swatchDash ?? undefined }) })), _jsx("span", { className: "st-graphLegend__label", children: entry.label })] }, idx));
                 }) })] }));
 }
 export function Form({ status = "idle", message, children, className, ...rest }) {
@@ -805,11 +978,15 @@ export function Link({ muted = false, standalone = false, disabled = false, clas
 export function LoadingState({ label, title, variant = "spinner", className, ...rest }) {
     return (_jsxs("section", { ...rest, className: classNames("st-loading", `st-loading--${variant}`, className), "aria-live": "polite", children: [_jsx("span", { className: "st-loading__spinner", "aria-hidden": "true" }), _jsx("span", { className: "st-loading__label", children: label ?? title ?? "Loading" })] }));
 }
+function itemKind(item) {
+    const tagged = item;
+    return tagged.type ?? tagged.kind;
+}
 function isDivider(item) {
-    return "type" in item && item.type === "divider";
+    return itemKind(item) === "divider";
 }
 function isGroup(item) {
-    return "type" in item && item.type === "group";
+    return itemKind(item) === "group";
 }
 export function Menu({ items, dense = false, onSelect, className, role, ...rest }) {
     const rootRef = React.useRef(null);
@@ -843,19 +1020,21 @@ export function Menu({ items, dense = false, onSelect, className, role, ...rest
             if (isDivider(item))
                 return _jsx("div", { className: "st-menu__divider", role: "separator" }, item.id ?? index);
             if (isGroup(item)) {
-                return (_jsxs("section", { className: "st-menu__group", children: [_jsx("h3", { children: item.label }), item.items.map((child) => (_jsx("button", { type: "button", role: "menuitem", className: "st-menu__item", disabled: child.disabled, onClick: () => onSelect?.(child), onKeyDown: (event) => handleItemKeyDown(event, child), children: _jsx("span", { className: "st-menu__itemLabel", children: child.label }) }, child.id ?? text(child.label))))] }, item.id ?? index));
+                return (_jsxs("section", { className: "st-menu__group", children: [_jsx("h3", { children: item.label }), (item.items ?? []).map((child) => (_jsx("button", { type: "button", role: "menuitem", className: classNames("st-menu__item", isDangerAction(child) && "st-menu__item--danger"), disabled: child.disabled, onClick: () => onSelect?.(child), onKeyDown: (event) => handleItemKeyDown(event, child), children: _jsx("span", { className: "st-menu__itemLabel", children: child.label }) }, actionId(child) ?? text(child.label))))] }, item.id ?? index));
             }
-            return (_jsx("button", { type: "button", role: "menuitem", disabled: item.disabled, className: classNames("st-menu__item", item.variant === "danger" && "st-menu__item--danger"), onClick: () => onSelect?.(item), onKeyDown: (event) => handleItemKeyDown(event, item), children: _jsx("span", { className: "st-menu__itemLabel", children: item.label }) }, item.id ?? text(item.label) ?? index));
+            const action = item;
+            return (_jsx("button", { type: "button", role: "menuitem", disabled: action.disabled, className: classNames("st-menu__item", isDangerAction(action) && "st-menu__item--danger"), onClick: () => onSelect?.(action), onKeyDown: (event) => handleItemKeyDown(event, action), children: _jsx("span", { className: "st-menu__itemLabel", children: action.label }) }, actionId(action) ?? text(action.label) ?? index));
         }) }));
 }
 export function MenuPopover({ trigger, items = [], open = true, placement = "bottom-start", children, className, ...rest }) {
     return (_jsxs("div", { ...rest, className: classNames("st-menuPopover", `st-menuPopover--${placement}`, className), children: [trigger, open ? _jsx("div", { className: "st-menuPopover__content", children: items.length ? _jsx(Menu, { items: items, role: "presentation" }) : children }) : null] }));
 }
-export function MenuTriggerButton({ open = false, type = "button", className, children, ...rest }) {
-    return (_jsx("button", { ...rest, type: type, className: classNames("st-menuTriggerButton st-button st-button--secondary st-button--sm", className), "aria-expanded": open, children: children }));
+export function MenuTriggerButton({ open, expanded, type = "button", className, children, ...rest }) {
+    const isOpen = open ?? expanded ?? false;
+    return (_jsx("button", { ...rest, type: type, className: classNames("st-menuTriggerButton st-button st-button--secondary st-button--sm", className), "aria-expanded": isOpen, children: children }));
 }
 export function MessageActions({ actions, visibility = "always", className, ...rest }) {
-    return (_jsx("nav", { ...rest, className: classNames("st-messageActions", visibility === "hover" && "st-messageActions--hoverOnly", className), "aria-label": "Message actions", children: actions.map((action, index) => (_jsx("button", { type: "button", className: classNames("st-button st-button--ghost st-button--sm", action.variant === "danger" && "st-button--danger"), disabled: action.disabled, onClick: action.onClick, children: action.label }, action.id ?? index))) }));
+    return (_jsx("nav", { ...rest, className: classNames("st-messageActions", visibility === "hover" && "st-messageActions--hoverOnly", className), "aria-label": "Message actions", children: actions.map((action, index) => (_jsx("button", { type: "button", className: classNames("st-button st-button--ghost st-button--sm", action.variant === "danger" && "st-button--danger"), disabled: action.disabled, "aria-label": action.label == null && action.icon != null ? text(action.id) || undefined : undefined, onClick: action.onClick, children: action.label ?? action.icon }, action.id ?? index))) }));
 }
 export function MessageStatusBadge({ status, tone, labels, className, ...rest }) {
     const normalized = status === "sent" ? "completed" : status === "streaming" ? "processing" : status === "error" ? "failed" : status;
@@ -930,8 +1109,9 @@ export function Pagination({ page, pageSize = 10, totalItems, totalPages, pageCo
     const visiblePages = Array.from({ length: pages }, (_, index) => index + 1);
     return (_jsxs("nav", { ...rest, className: classNames("st-pagination", className), "aria-label": "Pagination", children: [_jsx("button", { type: "button", disabled: page <= 1, onClick: () => onPageChange?.(page - 1), children: "Previous" }), _jsx("span", { className: "st-pagination__page--active", children: totalItems ? `${start}-${end} of ${totalItems}` : `Page ${page} of ${pages}` }), _jsx("span", { className: "st-pagination__pages", children: visiblePages.map((pageNumber) => (_jsx("button", { type: "button", className: classNames("st-pagination__page", pageNumber === page && "st-pagination__page--active"), "aria-label": `Page ${pageNumber}`, "aria-current": pageNumber === page ? "page" : undefined, onClick: () => onPageChange?.(pageNumber), children: pageNumber }, pageNumber))) }), _jsx("button", { type: "button", disabled: page >= pages, onClick: () => onPageChange?.(page + 1), children: "Next" })] }));
 }
-export function PaginationNav({ page = 1, totalPages = 1, previousHref, nextHref, className, ...rest }) {
-    return (_jsxs("nav", { ...rest, className: classNames("st-paginationNav", className), "aria-label": "Pagination navigation", children: [previousHref ? _jsx("a", { href: previousHref, children: "Previous" }) : _jsx("button", { type: "button", disabled: page <= 1, children: "Previous" }), _jsx("ol", { className: "st-paginationNav__list", children: Array.from({ length: totalPages }, (_, index) => index + 1).map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: classNames("st-paginationNav__page", item === page && "st-paginationNav__page--active"), children: ["Page ", item] }) }, item))) }), nextHref ? _jsx("a", { href: nextHref, children: "Next" }) : _jsx("button", { type: "button", disabled: page >= totalPages, children: "Next" })] }));
+export function PaginationNav({ page = 1, totalPages, pageCount, previousHref, nextHref, className, ...rest }) {
+    const pages = totalPages ?? pageCount ?? 1;
+    return (_jsxs("nav", { ...rest, className: classNames("st-paginationNav", className), "aria-label": "Pagination navigation", children: [previousHref ? _jsx("a", { href: previousHref, children: "Previous" }) : _jsx("button", { type: "button", disabled: page <= 1, children: "Previous" }), _jsx("ol", { className: "st-paginationNav__list", children: Array.from({ length: pages }, (_, index) => index + 1).map((item) => (_jsx("li", { children: _jsxs("button", { type: "button", className: classNames("st-paginationNav__page", item === page && "st-paginationNav__page--active"), children: ["Page ", item] }) }, item))) }), nextHref ? _jsx("a", { href: nextHref, children: "Next" }) : _jsx("button", { type: "button", disabled: page >= pages, children: "Next" })] }));
 }
 export function PasswordInput({ label, helperText, errorText, size = "md", className, ...rest }) {
     const [shown, setShown] = React.useState(false);
@@ -978,9 +1158,6 @@ export function Slider({ label, size = "md", value, defaultValue, min = 0, max =
     const numeric = Number(value ?? defaultValue ?? 0);
     return (_jsxs("div", { className: classNames("st-slider", `st-slider--${size}`, className), children: [_jsxs("div", { className: "st-slider__header", children: [label ? _jsx("label", { className: "st-field__label", children: label }) : null, _jsx("span", { className: "st-slider__value", children: numeric })] }), _jsx("input", { ...rest, className: "st-slider__input", type: "range", min: min, max: max, defaultValue: defaultValue, value: value })] }));
 }
-export function Sparkline({ data, label = "Sparkline", tone = "neutral", className, ...rest }) {
-    return (_jsxs("figure", { ...rest, className: classNames("st-sparkline", `st-sparkline--${tone}`, className), "aria-label": label, children: [_jsx("span", { className: "st-visually-hidden", children: label }), _jsx("svg", { viewBox: "0 0 120 40", "aria-hidden": "true", children: _jsx("polyline", { className: "st-sparkline__line", points: pointsFrom(data, 120, 40), fill: "none" }) })] }));
-}
 export function StreamingMessage({ text: messageText, events = [], mode = "live", className, ...rest }) {
     return (_jsxs("section", { ...rest, className: classNames("st-streamingMessage", `st-streamingMessage--${mode}`, className), children: [_jsx("div", { className: "st-streamingMessage__text", children: messageText }), _jsx("ul", { className: "st-streamingMessage__trailList", children: events.map((event) => _jsx("li", { children: event.label }, event.id)) })] }));
 }
@@ -993,11 +1170,12 @@ export function Switch({ label, helperText, className, ...rest }) {
 export function Table({ columns, rows, caption = "Table", className, ...rest }) {
     return (_jsx("div", { className: "st-table-wrap", children: _jsxs("table", { ...rest, className: classNames("st-table", className), children: [_jsx("caption", { children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((column) => _jsx("th", { children: column.label }, column.key)) }) }), _jsx("tbody", { children: rows.map((row, index) => (_jsx("tr", { children: columns.map((column) => _jsx("td", { className: classNames(column.align === "center" && "st-table__cell--center", (column.align === "right" || column.align === "end") && "st-table__cell--right"), children: text(row[column.key]) }, column.key)) }, text(row.id) || index))) })] }) }));
 }
-export function Tabs({ items, activeValue, activeId, label = "Tabs", onChange, className, ...rest }) {
+export function Tabs({ items, activeValue, activeId, label = "Tabs", onChange, onchange, className, ...rest }) {
+    const handleChange = onChange ?? onchange;
     const reactId = React.useId();
     const tabRefs = React.useRef([]);
     const first = items.find((item) => !item.disabled) ?? items[0];
-    const [current, setCurrent] = useControlled(activeValue ?? activeId, idFrom(first ?? {}, 0, "tab"), onChange);
+    const [current, setCurrent] = useControlled(activeValue ?? activeId, idFrom(first ?? {}, 0, "tab"), handleChange);
     const itemIds = items.map((item, index) => idFrom(item, index, "tab"));
     const activeIndex = Math.max(0, itemIds.indexOf(current));
     const active = items[activeIndex] ?? first;