cortena-ui 1.2.0 → 1.3.1

package/dist/index.js

@@ -2,7 +2,7 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { z } from "zod";
-import { AlertTriangle, ArrowDown, ArrowUp, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, Copy, Download, EyeOff, FileIcon, GripVertical, Inbox, Info, ListFilter, Minus, OctagonAlert, PinOff, RefreshCw, Search, Settings2, Terminal, Upload, X } from "lucide-react";
+import { AlertTriangle, ArrowDown, ArrowUp, CalendarIcon, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, Copy, Download, EyeOff, FileIcon, GripVertical, Inbox, Info, ListFilter, Minus, MoreHorizontal, OctagonAlert, PinOff, RefreshCw, Search, Settings2, Terminal, Upload, X } from "lucide-react";
 import * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { cva } from "class-variance-authority";
@@ -39,7 +39,7 @@ import { useRender } from "@base-ui/react/use-render";
 import { Controller, FormProvider, useForm, useFormContext, useFormState } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
-import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, PointerSensor, TouchSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Toast as Toast$1 } from "@base-ui/react/toast";
@@ -58,7 +58,11 @@ function cn(...inputs) {
 * Alert — an inline callout. Tinted variants use the `-soft` fill for the
 * background and the tone colour for the border and icon; the body text stays
 * on the foreground token so it reads in both themes.
+*
+* The error tone is `destructive`, the same spelling Button uses; `danger` is
+* a deprecated alias of it and paints identically.
 */
+const DESTRUCTIVE_ALERT = "bg-[var(--ds-destructive-soft)] border-[var(--ds-destructive)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-destructive)]";
 const alertVariants = cva([
 	"flex gap-3 rounded-[var(--ds-radius-md)] border px-3.5 py-3",
 	"text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)]",
@@ -68,7 +72,9 @@ const alertVariants = cva([
 		default: "bg-[var(--ds-card)] border-[var(--ds-border-subtle)] [&_[data-slot=alert-icon]]:text-[color:var(--ds-muted-foreground)]",
 		success: "bg-[var(--ds-success-soft)] border-[var(--ds-success)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-success)]",
 		warn: "bg-[var(--ds-warning-soft)] border-[var(--ds-warning)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-warning)]",
-		danger: "bg-[var(--ds-destructive-soft)] border-[var(--ds-destructive)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-destructive)]",
+		destructive: DESTRUCTIVE_ALERT,
+		/** @deprecated Use `destructive`, the name Button and Badge use; this alias paints the same. */
+		danger: DESTRUCTIVE_ALERT,
 		info: "bg-[var(--ds-info-soft)] border-[var(--ds-info)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-info)]"
 	} },
 	defaultVariants: { variant: "default" }
@@ -106,9 +112,11 @@ function AlertDescription({ className, ...props }) {
 //#region src/components/badge.tsx
 /**
 * Badge — the mono, uppercase status label. Each tone pairs a `-soft` fill
-* with its foreground token; `warn`, `danger` and `secondary` are aliases kept
-* for cortenaweb call sites.
+* with its foreground token. The error tone is `destructive`, the same
+* spelling Button and Alert use; `warn`, `danger` and `secondary` are
+* deprecated aliases kept for cortenaweb call sites and paint identically.
 */
+const DESTRUCTIVE_BADGE = "bg-[var(--ds-destructive-soft)] text-[color:var(--ds-destructive)]";
 const badgeVariants = cva([
 	"inline-flex items-center gap-1.5 px-1.5 py-0.5 whitespace-nowrap",
 	"rounded-[var(--ds-radius-sm)]",
@@ -120,9 +128,11 @@ const badgeVariants = cva([
 		default: "bg-[var(--ds-primary-soft)] text-[color:var(--ds-primary-soft-foreground)]",
 		success: "bg-[var(--ds-success-soft)] text-[color:var(--ds-success)]",
 		warning: "bg-[var(--ds-warning-soft)] text-[color:var(--ds-warning)]",
+		/** @deprecated Use `warning`; this alias paints the same. */
 		warn: "bg-[var(--ds-warning-soft)] text-[color:var(--ds-warning)]",
-		danger: "bg-[var(--ds-destructive-soft)] text-[color:var(--ds-destructive)]",
-		destructive: "bg-[var(--ds-destructive-soft)] text-[color:var(--ds-destructive)]",
+		destructive: DESTRUCTIVE_BADGE,
+		/** @deprecated Use `destructive`, the name Button and Alert use; this alias paints the same. */
+		danger: DESTRUCTIVE_BADGE,
 		info: "bg-[var(--ds-info-soft)] text-[color:var(--ds-info)]",
 		neutral: "bg-[var(--ds-hover)] text-[color:var(--ds-muted-foreground)]",
 		secondary: "bg-[var(--ds-hover)] text-[color:var(--ds-muted-foreground)]",
@@ -194,41 +204,48 @@ function Button({ className, variant, size, ...props }) {
 	});
 }
 //#endregion
+//#region src/lib/render.tsx
+function renderWith(render, props, children, Fallback) {
+	if (!render) return /* @__PURE__ */ jsx(Fallback, {
+		...props,
+		children
+	});
+	const Element = render.type;
+	const given = render.props;
+	return /* @__PURE__ */ jsx(Element, {
+		...render.props,
+		...props,
+		children: children ?? given.children
+	});
+}
+//#endregion
 //#region src/components/button-link.tsx
 function ButtonLink({ className, variant, size, render, disabled, children, ...props }) {
 	const classes = cn(buttonVariants({
 		variant,
 		size
 	}), disabled && "pointer-events-none opacity-50", className);
-	const merged = {
+	return renderWith(render, {
 		...props,
 		"data-slot": "button-link",
 		className: classes,
 		"aria-disabled": disabled || void 0,
 		tabIndex: disabled ? -1 : props.tabIndex
-	};
-	if (render) {
-		const Element = render.type;
-		return /* @__PURE__ */ jsx(Element, {
-			...render.props,
-			...merged,
-			children: children ?? render.props.children
-		});
-	}
-	return /* @__PURE__ */ jsx("a", {
-		...merged,
-		children
-	});
+	}, children, "a");
 }
 //#endregion
 //#region src/components/card.tsx
-function Card({ className, hover, accent, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+/**
+* Card — the bordered surface everything else sits on. `render` changes the
+* element without changing the look, which is how a card becomes a landmark.
+*/
+function Card({ className, hover, accent, render, children, ...props }) {
+	return renderWith(render, {
 		"data-slot": "card",
 		"data-accent": accent ? "" : void 0,
-		className: cn("flex flex-col rounded-[var(--ds-radius-lg)] border bg-[var(--ds-card)] text-[color:var(--ds-foreground)]", "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", accent ? "border-[var(--ds-ring)]" : "border-[var(--ds-border-subtle)]", hover && "hover:border-[var(--ds-border)] hover:bg-[var(--ds-popover)]", className),
-		...props
-	});
+		...props,
+		className: cn("flex flex-col rounded-[var(--ds-radius-lg)] border bg-[var(--ds-card)] text-[color:var(--ds-foreground)]", "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", accent ? "border-[var(--ds-ring)]" : "border-[var(--ds-border-subtle)]", hover && "hover:border-[var(--ds-border)] hover:bg-[var(--ds-popover)]", className)
+	}, children, "div");
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -484,6 +501,9 @@ function seriesColor(config, key, index) {
 	const position = (config ? Object.keys(config) : []).indexOf(key);
 	return vizVar(position >= 0 ? position : index ?? 0);
 }
+/** The box `testMode` falls back to when the layout gives the chart none. */
+const TEST_WIDTH = 600;
+const TEST_HEIGHT = 300;
 /**
 * ChartContainer — the sized, token-styled surface every chart draws in.
 *
@@ -492,7 +512,7 @@ function seriesColor(config, key, index) {
 * cursor classes from tokens with a caption-sm floor for text, so a custom
 * chart composed inside it needs no local colours or fonts.
 */
-function ChartContainer({ config = {}, height = 300, responsive = true, className, style, children, ...props }) {
+function ChartContainer({ config = {}, height = 300, responsive = true, testMode = false, className, style, children, ...props }) {
 	const [element, setElement] = React.useState(null);
 	const vars = React.useMemo(() => {
 		const out = {};
@@ -508,9 +528,14 @@ function ChartContainer({ config = {}, height = 300, responsive = true, classNam
 		children: /* @__PURE__ */ jsx("div", {
 			ref: setElement,
 			"data-slot": "chart",
+			"data-test-mode": testMode ? "" : void 0,
 			className: cn("relative w-full min-w-0 overflow-hidden text-[length:var(--ds-text-caption-sm)] text-[color:var(--ds-foreground)]", responsive ? "flex justify-center" : "block [&>div]:h-full [&>div]:w-full", "[&_.recharts-cartesian-axis-tick-value]:fill-[var(--ds-muted-foreground)]", "[&_.recharts-polar-angle-axis-tick-value]:fill-[var(--ds-muted-foreground)]", "[&_.recharts-polar-radius-axis-tick-value]:fill-[var(--ds-muted-foreground)]", "[&_.recharts-cartesian-grid-horizontal_line]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-cartesian-grid-vertical_line]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-polar-grid-angle_line]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-polar-grid-concentric-polygon]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-polar-grid-concentric-circle]:stroke-[var(--ds-border-subtle)]", "[&_.recharts-cartesian-axis-line]:stroke-[var(--ds-border)]", "[&_.recharts-cartesian-axis-tick-line]:stroke-[var(--ds-border)]", "[&_.recharts-radial-bar-background-sector]:fill-[var(--ds-muted)]", "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--ds-hover)]", "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--ds-border-strong)]", "[&_.recharts-reference-line_line]:stroke-[var(--ds-border-strong)]", "[&_.recharts-pie-sector_.recharts-sector]:stroke-[var(--ds-card)]", "[&_.recharts-funnel-trapezoid_.recharts-trapezoid]:stroke-[var(--ds-card)]", "[&_.recharts-layer]:outline-hidden [&_.recharts-surface]:outline-hidden [&_.recharts-sector]:outline-hidden", "[&_text]:font-[family-name:var(--ds-font-body)]", className),
 			style: {
 				height,
+				...testMode ? {
+					minWidth: TEST_WIDTH,
+					minHeight: TEST_HEIGHT
+				} : null,
 				...vars,
 				...style
 			},
@@ -518,6 +543,8 @@ function ChartContainer({ config = {}, height = 300, responsive = true, classNam
 			children: responsive ? /* @__PURE__ */ jsx(ResponsiveContainer$1, {
 				width: "100%",
 				height: "100%",
+				minWidth: testMode ? TEST_WIDTH : void 0,
+				minHeight: testMode ? TEST_HEIGHT : void 0,
 				children
 			}) : children
 		})
@@ -650,6 +677,30 @@ function ChartLegend(props) {
 function isSeriesArray(data) {
 	return Array.isArray(data) && data.length > 0 && data.every((d) => d && typeof d === "object" && Array.isArray(d.data));
 }
+/** True for the `{ rows, columns, values }` categorical matrix shape. */
+function isMatrix(data) {
+	if (!data || typeof data !== "object" || Array.isArray(data)) return false;
+	const m = data;
+	return Array.isArray(m.rows) && Array.isArray(m.columns) && Array.isArray(m.values);
+}
+/**
+* Pivot a categorical matrix onto the Nivo heatmap shape. Every row gets a
+* point for every column so the grid stays rectangular; a missing or
+* non-finite cell becomes `null`, which Nivo paints with `emptyColor` rather
+* than as a zero.
+*/
+function matrixToSeries(matrix) {
+	return matrix.rows.map((row, r) => ({
+		id: row,
+		data: matrix.columns.map((column, c) => {
+			const value = matrix.values[r]?.[c];
+			return {
+				x: column,
+				y: typeof value === "number" && Number.isFinite(value) ? value : null
+			};
+		})
+	}));
+}
 /**
 * Infer the category key and the series keys of a row array the way the
 * webchat renderer did: the first string field is the index, every numeric
@@ -732,6 +783,7 @@ function treeIdentity(tree) {
 /** True when there is nothing to draw. */
 function isEmptyData(data) {
 	if (data == null) return true;
+	if (isMatrix(data)) return data.rows.length === 0 || data.columns.length === 0;
 	if (Array.isArray(data)) {
 		if (data.length === 0) return true;
 		if (isSeriesArray(data)) return data.every((s) => s.data.length === 0);
@@ -898,14 +950,28 @@ function useNivoTheme() {
 }
 //#endregion
 //#region src/components/chart/nivo-charts.tsx
-const lazy = (load) => React.lazy(async () => ({ default: await load() }));
-const HeatMapSvg = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMap);
-const HeatMapCanvas = lazy(async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas);
-const CalendarSvg = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendar);
-const CalendarCanvas = lazy(async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas);
-const TreeMapSvg = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMap);
-const TreeMapCanvas = lazy(async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas);
-const SunburstSvg = lazy(async () => (await import("@nivo/sunburst")).ResponsiveSunburst);
+const loaders = {
+	"heatmap-svg": async () => (await import("@nivo/heatmap")).ResponsiveHeatMap,
+	"heatmap-canvas": async () => (await import("@nivo/heatmap")).ResponsiveHeatMapCanvas,
+	"calendar-svg": async () => (await import("@nivo/calendar")).ResponsiveCalendar,
+	"calendar-canvas": async () => (await import("@nivo/calendar")).ResponsiveCalendarCanvas,
+	"treemap-svg": async () => (await import("@nivo/treemap")).ResponsiveTreeMap,
+	"treemap-canvas": async () => (await import("@nivo/treemap")).ResponsiveTreeMapCanvas,
+	"sunburst-svg": async () => (await import("@nivo/sunburst")).ResponsiveSunburst
+};
+let chunks = /* @__PURE__ */ new Map();
+function chunk(name) {
+	let component = chunks.get(name);
+	if (!component) {
+		component = React.lazy(async () => ({ default: await loaders[name]() }));
+		chunks.set(name, component);
+	}
+	return component;
+}
+/** Forget every loaded-or-failed Nivo chunk, so the next render loads it again. */
+function resetNivoChunks() {
+	chunks = /* @__PURE__ */ new Map();
+}
 /**
 * Resolved series colours for Nivo: config colours are `var()` strings, which
 * Nivo cannot use, so a configured colour is resolved through the container's
@@ -955,8 +1021,8 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 	const labelOn = (d) => onFill(d.color);
 	switch (type) {
 		case "heatmap": {
-			const Component = canvas ? HeatMapCanvas : HeatMapSvg;
-			const rows = data;
+			const Component = chunk(canvas ? "heatmap-canvas" : "heatmap-svg");
+			const rows = isMatrix(data) ? matrixToSeries(data) : data;
 			const cells = rows.reduce((n, r) => n + r.data.length, 0);
 			const colorConfig = scale === "diverging" ? {
 				type: "diverging",
@@ -1004,7 +1070,7 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 			});
 		}
 		case "calendar": {
-			const Component = canvas ? CalendarCanvas : CalendarSvg;
+			const Component = chunk(canvas ? "calendar-canvas" : "calendar-svg");
 			const days = data;
 			const range = calendarRange(days, from, to);
 			return /* @__PURE__ */ jsx(Component, {
@@ -1038,7 +1104,7 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 			});
 		}
 		case "treemap": {
-			const Component = canvas ? TreeMapCanvas : TreeMapSvg;
+			const Component = chunk(canvas ? "treemap-canvas" : "treemap-svg");
 			const tree = data;
 			return /* @__PURE__ */ jsx(Component, {
 				data: tree,
@@ -1065,8 +1131,9 @@ function NivoChart({ type, data, config, renderer, scale, legend, valueFormatter
 			});
 		}
 		case "sunburst": {
+			const Component = chunk("sunburst-svg");
 			const tree = data;
-			return /* @__PURE__ */ jsx(SunburstSvg, {
+			return /* @__PURE__ */ jsx(Component, {
 				data: tree,
 				id: treeIdentity(tree),
 				value: "value",
@@ -1342,21 +1409,43 @@ function seriesKeys(type, data, indexBy, keys) {
 		case "pie":
 		case "donut":
 		case "funnel": return toSlices(data).map((s) => s.id);
+		case "heatmap":
+			if (isMatrix(data)) return data.rows.map(String);
+			return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];
 		case "scatter":
-		case "scatterplot":
-		case "heatmap": return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];
+		case "scatterplot": return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];
 		case "treemap":
 		case "sunburst": return (data.children ?? []).map((c) => String(c.id ?? c.name ?? ""));
 		case "calendar": return [];
 	}
 }
+/**
+* Catches a Nivo chunk that failed to load. Recovering takes two things,
+* because `React.lazy` memoises a rejection for the life of the page: fresh
+* lazy components ({@link resetNivoChunks}) and a boundary that leaves its
+* failed state. `resetKey` does the second on its own when the chart changes,
+* and the fallback gets a `retry` that does both.
+*/
 var ChunkBoundary = class extends React.Component {
-	state = { failed: false };
+	state = {
+		failed: false,
+		key: this.props.resetKey
+	};
 	static getDerivedStateFromError() {
 		return { failed: true };
 	}
+	static getDerivedStateFromProps(props, state) {
+		return props.resetKey === state.key ? null : {
+			failed: false,
+			key: props.resetKey
+		};
+	}
+	retry = () => {
+		resetNivoChunks();
+		this.setState({ failed: false });
+	};
 	render() {
-		return this.state.failed ? this.props.fallback : this.props.children;
+		return this.state.failed ? this.props.fallback(this.retry) : this.props.children;
 	}
 };
 /**
@@ -1368,6 +1457,14 @@ var ChunkBoundary = class extends React.Component {
 * Colours, fonts, axes, grid, tooltip, legend and the empty, loading and
 * error states all come from cortena-design tokens; a consumer passes data
 * and, optionally, a `config` of labels.
+*
+* `heatmap` takes either the Nivo series shape or a categorical
+* {@link ChartMatrix} — `{ rows, columns, values }` — for the correlation and
+* confusion matrices that are already in that form.
+*
+* `testMode` gives the drawing area a 600×300 floor so a chart still draws
+* where the layout gives it no size; see {@link ChartContainerProps.testMode}
+* and README.md, "Charts in tests".
 */
 function Chart({ type, data, config, renderer = "svg", indexBy, keys, stacked, scale = "sequential", legend, grid = true, tooltip = true, valueFormatter, from, to, loading, error, emptyMessage, className, height, ...props }) {
 	const engine = chartEngine(type);
@@ -1388,7 +1485,18 @@ function Chart({ type, data, config, renderer = "svg", indexBy, keys, stacked, s
 	else if (errorText) body = /* @__PURE__ */ jsx(ChartError, { children: errorText });
 	else if (empty) body = /* @__PURE__ */ jsx(ChartEmpty, { children: emptyMessage });
 	else if (engine === "nivo") body = /* @__PURE__ */ jsx(ChunkBoundary, {
-		fallback: /* @__PURE__ */ jsx(ChartError, { children: "Chart could not be loaded" }),
+		resetKey: `${type}|${renderer}`,
+		fallback: (retry) => /* @__PURE__ */ jsxs(ChartError, { children: [
+			"Chart could not be loaded.",
+			" ",
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "chart-retry",
+				onClick: retry,
+				className: "underline underline-offset-2",
+				children: "Retry"
+			})
+		] }),
 		children: /* @__PURE__ */ jsx(React.Suspense, {
 			fallback: /* @__PURE__ */ jsx(ChartLoading, {}),
 			children: /* @__PURE__ */ jsx(NivoChart, {
@@ -1512,15 +1620,22 @@ function Input({ className, type, ...props }) {
 //#endregion
 //#region src/components/spinner.tsx
 /**
-* Spinner — a ring with a primary-coloured leading edge. Announces itself as
+* Spinner — a ring with a coloured leading edge. Announces itself as
 * `role="status"` with a "Loading" label; pass `aria-label` to override.
+*
+* ```tsx
+* <Button disabled>
+*   <Spinner tone="inverse" /> Saving…
+* </Button>
+* ```
 */
-function Spinner({ className, size = 16, style, ...props }) {
+function Spinner({ className, size = 16, tone = "default", style, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "spinner",
+		"data-tone": tone,
 		role: "status",
 		"aria-label": "Loading",
-		className: cn("inline-block shrink-0 animate-spin rounded-[var(--ds-radius-full)]", "border-2 border-[var(--ds-border)] border-t-[var(--ds-primary)]", className),
+		className: cn("inline-block shrink-0 animate-spin rounded-[var(--ds-radius-full)] border-2", tone === "inverse" ? "border-[var(--ds-primary-foreground)]/35 border-t-[var(--ds-primary-foreground)]" : "border-[var(--ds-border)] border-t-[var(--ds-primary)]", className),
 		style: {
 			width: size,
 			height: size,
@@ -1713,21 +1828,6 @@ function DropdownMenuShortcut({ className, ...props }) {
 }
 //#endregion
 //#region src/components/select.tsx
-/**
-* Select.
-*
-* `SelectContent` composes Base UI's Portal + Positioner + Popup so consumers
-* keep writing `<SelectContent side="bottom" align="start">`; positioning
-* props are forwarded to the Positioner, which is where Base UI reads them.
-*
-* Radix users:
-* - `SelectValue` shows the raw value unless the Root is given `items`
-*   (`{ [value]: label }` or `[{ value, label }]`) or `itemToStringLabel`;
-*   Base UI does not read the label out of an unmounted `SelectItem`.
-* - `onValueChange` receives `(value, eventDetails)`.
-* - `SelectContent` defaults to the dropdown layout; pass
-*   `alignItemWithTrigger` for Base UI's native-like overlay of the selected item.
-*/
 function Select(props) {
 	return /* @__PURE__ */ jsx(Select$1.Root, { ...props });
 }
@@ -1850,12 +1950,25 @@ function toSheet(table, rows = exportRows(table)) {
 		}))
 	};
 }
+/**
+* Text a spreadsheet would evaluate rather than display. Excel, Sheets and
+* LibreOffice all treat a leading `=`, `+`, `-` or `@` as the start of a
+* formula, and a leading tab or CR as whitespace they strip before looking
+* again — so `\t=cmd|'/c calc'!A1` is a formula too. Only strings are checked:
+* a number, boolean or Date cell cannot carry one, and prefixing `-5` would
+* turn a number column into text.
+*/
+const FORMULA_START = /^[=+\-@\t\r]/;
 function csvField(value) {
 	if (value == null) return "";
-	const text = value instanceof Date ? value.toISOString() : String(value);
+	let text = value instanceof Date ? value.toISOString() : String(value);
+	if (typeof value === "string" && FORMULA_START.test(text)) text = `'${text}`;
 	return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, "\"\"")}"` : text;
 }
-/** RFC 4180 text: comma separated, CRLF lines, quotes doubled. */
+/**
+* RFC 4180 text: comma separated, CRLF lines, quotes doubled. A cell that a
+* spreadsheet would read as a formula is prefixed with `'` so it stays text.
+*/
 function toCsv(table, rows) {
 	const { headers, records } = toSheet(table, rows);
 	return [headers, ...records].map((line) => line.map(csvField).join(",")).join("\r\n");
@@ -2542,14 +2655,20 @@ function useLocalStrategy(source, query, mode) {
 	const targetPage = infinite ? loadedForScope.length : query.page;
 	const needs = infinite ? loadedForScope.length < wantedPages : !(state.scopeKey === scopeKey && state.page === query.page && state.pages.length > 0);
 	const requestKey = `${scopeKey}|${targetPage}|${tick}`;
+	const fetchRef = React.useRef(fetch);
+	React.useEffect(() => {
+		fetchRef.current = fetch;
+	});
+	const hasFetch = Boolean(fetch);
 	React.useEffect(() => {
-		if (!fetch || !needs) return;
+		const run = fetchRef.current;
+		if (!run || !needs) return;
 		const controller = new AbortController();
 		setState((s) => ({
 			...s,
 			isFetching: true
 		}));
-		fetch({
+		run({
 			...scope,
 			page: targetPage
 		}, controller.signal).then((result) => {
@@ -2571,7 +2690,7 @@ function useLocalStrategy(source, query, mode) {
 		});
 		return () => controller.abort();
 	}, [
-		fetch,
+		hasFetch,
 		requestKey,
 		needs
 	]);
@@ -2808,7 +2927,7 @@ function DataTable(props) {
 	return /* @__PURE__ */ jsx(DataTableOwned, { ...props });
 }
 function DataTableOwned(props) {
-	const { className, maxHeight, virtualize, rowHeight, stickyHeader, density, renderSubComponent, toolbar, bulkActions, toolbarActions, searchPlaceholder, emptyState, emptyMessage, pageSizeOptions, enableExport, exportFileName, loading, error, onRowClick, ...options } = props;
+	const { className, maxHeight, virtualize, rowHeight, stickyHeader, density, renderSubComponent, toolbar, bulkActions, toolbarActions, searchPlaceholder, emptyState, emptyMessage, pageSizeOptions, enableExport, exportFileName, loading, error, onRowClick, activeRowId, rowClassName, ...options } = props;
 	const instance = useDataTable({
 		...options,
 		enableExpanding: options.enableExpanding ?? Boolean(renderSubComponent)
@@ -2833,7 +2952,9 @@ function DataTableOwned(props) {
 		exportFileName,
 		loading,
 		error,
-		onRowClick
+		onRowClick,
+		activeRowId,
+		rowClassName
 	});
 }
 function pinAttrs(column, table) {
@@ -2911,7 +3032,7 @@ function EditableCell({ cell, instance, onDone }) {
 		className: "h-7 px-2 py-0 text-[length:var(--ds-text-body-sm)]"
 	});
 }
-function DataTableView({ instance, className, maxHeight, virtualize, rowHeight = 40, stickyHeader = true, density = "default", renderSubComponent, toolbar = true, bulkActions, toolbarActions, searchPlaceholder, emptyState, emptyMessage = "No results", pageSizeOptions, enableExport = true, exportFileName = "export", loading, error, onRowClick }) {
+function DataTableView({ instance, className, maxHeight, virtualize, rowHeight = 40, stickyHeader = true, density = "default", renderSubComponent, toolbar = true, bulkActions, toolbarActions, searchPlaceholder, emptyState, emptyMessage = "No results", pageSizeOptions, enableExport = true, exportFileName = "export", loading, error, onRowClick, activeRowId, rowClassName }) {
 	const { table, paginationMode } = instance;
 	const rows = table.getRowModel().rows;
 	const leafColumns = table.getVisibleLeafColumns();
@@ -3101,6 +3222,7 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 		const endStart = cells.findIndex((cell) => cell.column.getIsPinned() === "end");
 		const splitAt = endStart === -1 ? cells.length : endStart;
 		const selected = row.getIsSelected();
+		const active = activeRowId != null && row.id === activeRowId;
 		const expanded = renderSubComponent && row.getIsExpanded();
 		const renderCell = (cell, c) => {
 			const column = cell.column;
@@ -3127,7 +3249,7 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 					rowId: row.id,
 					columnId: column.id
 				}) : void 0,
-				className: cn("relative align-middle outline-none", isEditing ? "px-1.5 py-1" : cellPadding, alignClass[meta?.align ?? "start"], "focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]", pin.pinned && "z-[1] bg-[var(--ds-card)] group-hover/row:bg-[linear-gradient(var(--ds-hover),var(--ds-hover))] group-data-[selected]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))]", pin.pinned === "start" && pin.edge && "shadow-[inset_-1px_0_0_var(--ds-border)]", pin.pinned === "end" && pin.edge && "shadow-[inset_1px_0_0_var(--ds-border)]", !isEditing && "truncate", meta?.cellClassName),
+				className: cn("relative align-middle outline-none", isEditing ? "px-1.5 py-1" : cellPadding, alignClass[meta?.align ?? "start"], "focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-[var(--ds-ring)]", pin.pinned && "z-[1] bg-[var(--ds-card)] group-hover/row:bg-[linear-gradient(var(--ds-hover),var(--ds-hover))] group-data-[selected]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))] group-data-[active]/row:bg-[linear-gradient(var(--ds-primary-soft),var(--ds-primary-soft))]", pin.pinned === "start" && pin.edge && "shadow-[inset_-1px_0_0_var(--ds-border)]", pin.pinned === "end" && pin.edge && "shadow-[inset_1px_0_0_var(--ds-border)]", !isEditing && "truncate", meta?.cellClassName),
 				children: isEditing ? /* @__PURE__ */ jsx(EditableCell, {
 					cell,
 					instance,
@@ -3145,12 +3267,13 @@ function DataTableView({ instance, className, maxHeight, virtualize, rowHeight =
 			"data-slot": "data-table-row",
 			"data-index": virtualIndex,
 			"data-selected": selected ? "" : void 0,
+			"data-active": active ? "" : void 0,
 			"data-expanded": expanded ? "" : void 0,
 			"aria-rowindex": index + 2,
 			"aria-selected": table.options.enableRowSelection ? selected : void 0,
 			ref: isVirtual ? virtualizer.measureElement : void 0,
 			onClick: onRowClick ? (e) => onRowClick(row.original, e) : void 0,
-			className: cn("group/row border-b border-[var(--ds-border-subtle)] transition-colors duration-[var(--ds-duration-fast)]", "hover:bg-[var(--ds-hover)] data-[selected]:bg-[var(--ds-primary-soft)]", onRowClick && "cursor-pointer"),
+			className: cn("group/row border-b border-[var(--ds-border-subtle)] transition-colors duration-[var(--ds-duration-fast)]", "hover:bg-[var(--ds-hover)] data-[selected]:bg-[var(--ds-primary-soft)]", "data-[active]:bg-[var(--ds-primary-soft)]", onRowClick && "cursor-pointer", rowClassName?.(row.original)),
 			children: [
 				cells.slice(0, splitAt).map((cell, c) => renderCell(cell, c)),
 				/* @__PURE__ */ jsx("td", {
@@ -4205,6 +4328,10 @@ function RadioGroupItem({ className, ...props }) {
 * SectionCard — a Card with a header row (title, description, actions), a
 * body and an optional footer. It composes the Card parts rather than
 * restyling them, so a SectionCard and a hand-built Card look identical.
+*
+* `render` is Card's and reaches the outer element, so a section card can be
+* the landmark it is named after: `render={<section aria-labelledby={id} />}`
+* with the same `id` on the title, or `render={<aside />}` for a side panel.
 */
 function SectionCard({ title, description, actions, footer, flush, bodyClassName, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Card, {
@@ -4263,6 +4390,7 @@ const TONE_CLASS = {
 	accent: "bg-[var(--ds-primary)]",
 	success: "bg-[var(--ds-success)]",
 	warning: "bg-[var(--ds-warning)]",
+	destructive: "bg-[var(--ds-destructive)]",
 	danger: "bg-[var(--ds-destructive)]",
 	info: "bg-[var(--ds-info)]",
 	neutral: "bg-[var(--ds-text-tertiary)]"
@@ -5064,14 +5192,21 @@ const buttonSize = z.enum([
 	"lg"
 ]).describe("Control size.");
 /**
+* Root-relative means one slash and then a path. `//evil.example/x` is
+* protocol-relative — the browser resolves it against the page's scheme and
+* goes off-origin — and `/\evil.example` is the same trick, because browsers
+* treat a backslash after the leading slash as a second slash.
+*/
+const rootRelative = (value) => value.startsWith("/") && value[1] !== "/" && value[1] !== "\\";
+/**
 * A URL an agent may point at.
 *
 * Restricted by scheme rather than sanitised after the fact: `javascript:` and
 * friends never reach the DOM because they never pass validation, so the
 * component gets an error card instead.
 */
-const httpUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || value.startsWith("/") || value.startsWith("#"), "Must be an http(s), root-relative or fragment URL.").describe("Destination URL (http, https, root-relative or fragment).");
-const imageUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || value.startsWith("/"), "Must be an http(s), root-relative or data:image URL.").describe("Image URL (http, https, root-relative or data:image).");
+const httpUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || rootRelative(value) || value.startsWith("#"), "Must be an http(s), root-relative or fragment URL.").describe("Destination URL (http, https, root-relative or fragment).");
+const imageUrl = z.string().refine((value) => /^https?:\/\//i.test(value) || /^data:image\//i.test(value) || rootRelative(value), "Must be an http(s), root-relative or data:image URL.").describe("Image URL (http, https, root-relative or data:image).");
 /** Every chart type the Chart composite draws, Recharts and Nivo alike. */
 const chartType = z.enum([
 	"bar",
@@ -6744,6 +6879,119 @@ function AvatarFallback({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/breadcrumb.tsx
+/**
+* Breadcrumb — the trail above a page title.
+*
+* A `<nav aria-label="Breadcrumb">` around an ordered list, which is what
+* assistive technology expects: the list order is the hierarchy, so a screen
+* reader announces "list, 4 items" and reads the path in order. Separators are
+* decorative list items, not text inside the links, so a link's accessible
+* name is the crumb and nothing else.
+*
+* The last crumb is `BreadcrumbPage`, not a link: it is the page you are on,
+* so it carries `aria-current="page"` and is not focusable. Everything before
+* it is a `BreadcrumbLink`.
+*
+* ```tsx
+* <Breadcrumb>
+*   <BreadcrumbList>
+*     <BreadcrumbItem>
+*       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+*     </BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem>
+*       <BreadcrumbEllipsis />
+*     </BreadcrumbItem>
+*     <BreadcrumbSeparator />
+*     <BreadcrumbItem>
+*       <BreadcrumbPage>Invoice 4021</BreadcrumbPage>
+*     </BreadcrumbItem>
+*   </BreadcrumbList>
+* </Breadcrumb>
+* ```
+*
+* **Router links.** `BreadcrumbLink` renders an `<a>` by default. Pass
+* `render` with the router's link component and the class name, `href` and
+* handlers are merged onto it, the same contract as `ButtonLink`:
+* `render={<NextLink href="/projects" />}` or
+* `render={<Link to="/projects" />}`. This is deliberately not Base UI's
+* `render` — a breadcrumb is markup, not a Base UI primitive — but it takes
+* the same shape so there is one thing to remember.
+*/
+function Breadcrumb({ className, ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"data-slot": "breadcrumb",
+		"aria-label": "Breadcrumb",
+		className: cn("min-w-0", className),
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-slot": "breadcrumb-list",
+		className: cn("flex flex-wrap items-center gap-1.5 break-words p-0 sm:gap-2", "list-none text-[length:var(--ds-text-caption-lg)]", "leading-[var(--ds-text-caption-lg--line-height)] text-[color:var(--ds-muted-foreground)]", className),
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-item",
+		className: cn("inline-flex min-w-0 items-center gap-1.5", className),
+		...props
+	});
+}
+function BreadcrumbLink({ className, render, children, ...props }) {
+	return renderWith(render, {
+		...props,
+		"data-slot": "breadcrumb-link",
+		className: cn("truncate rounded-[var(--ds-radius-sm)] text-[color:var(--ds-muted-foreground)] no-underline", "transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:text-[color:var(--ds-foreground)] hover:underline underline-offset-4", "outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "[&_svg]:size-3.5 [&_svg]:shrink-0", className)
+	}, children, "a");
+}
+/**
+* The current page: the last crumb, which is not a link.
+*
+* A plain `<span aria-current="page">`, deliberately not `role="link"` with
+* `aria-disabled` — a disabled link that cannot be focused is a fiction, and
+* it makes `getByRole("link")` return a crumb that navigates nowhere. With a
+* span, the roles in the trail are exactly the crumbs you can travel to.
+*/
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "breadcrumb-page",
+		"aria-current": "page",
+		className: cn("truncate font-medium text-[color:var(--ds-foreground)]", className),
+		...props
+	});
+}
+/** Decorative divider between two crumbs; a chevron unless children replace it. */
+function BreadcrumbSeparator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: cn("inline-flex shrink-0 items-center text-[color:var(--ds-text-tertiary)] [&_svg]:size-3.5", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+	});
+}
+/**
+* Stands in for the crumbs a long trail collapses; put it inside a
+* BreadcrumbItem. The glyph is hidden and the label is not: an ellipsis that
+* announces nothing leaves a screen-reader user with a gap in the path.
+*/
+function BreadcrumbEllipsis({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		className: cn("inline-flex size-5 items-center justify-center text-[color:var(--ds-text-tertiary)]", "[&_svg]:size-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: children ?? "More levels"
+		})]
+	});
+}
+//#endregion
 //#region src/components/chip.tsx
 /**
 * Chip — a pill for filters, tags and selected values. Unlike Badge it keeps
@@ -7299,6 +7547,30 @@ function DateRangePicker(props) {
 * `onFiles` receives only the accepted files; rejections go to `onReject`.
 * `FileList` and `formatFileSize` are separate parts for listing what was
 * picked, so a form can keep the zone and the list in different places.
+*
+* ## Wrapping a whole page as a drop target
+*
+* `noClick` and `noKeyboard` turn off the two activators that only make sense
+* on a dashed box: clicking anywhere inside opens the file dialog, and Enter /
+* Space on the focused root does the same. A page-sized zone wraps content
+* that has its own buttons and inputs, so both have to go — otherwise every
+* click in the page opens a file picker.
+*
+* ```tsx
+* <Dropzone noClick noKeyboard onFiles={upload} className="min-h-dvh border-0 bg-transparent p-0">
+*   {({ isDragActive, open }) => (
+*     <>
+*       <PageContent />
+*       <Button onClick={open}>Browse…</Button>
+*       {isDragActive ? <DropHint /> : null}
+*     </>
+*   )}
+* </Dropzone>
+* ```
+*
+* The render-prop form gets react-dropzone's `open()`, which is the way back
+* to the file dialog from a deliberate control. With `noClick` the root also
+* drops its `cursor-pointer`, since it is no longer clickable.
 */
 const UNITS = [
 	"B",
@@ -7332,13 +7604,15 @@ function describeAccept(accept) {
 	}
 	return exts.size > 0 ? [...exts].join(", ") : void 0;
 }
-function Dropzone({ onFiles, onReject, accept, multiple = true, maxSize, maxFiles, disabled = false, label, hint, children, className, ref, ...props }) {
+function Dropzone({ onFiles, onReject, accept, multiple = true, maxSize, maxFiles, disabled = false, noClick = false, noKeyboard = false, label, hint, children, className, ref, ...props }) {
 	const state = useDropzone({
 		accept,
 		multiple,
 		maxSize,
 		maxFiles,
 		disabled,
+		noClick,
+		noKeyboard,
 		onDropAccepted: (files) => onFiles(files),
 		onDropRejected: (rejections) => onReject?.(rejections)
 	});
@@ -7373,7 +7647,7 @@ function Dropzone({ onFiles, onReject, accept, multiple = true, maxSize, maxFile
 		...getRootProps({
 			...props,
 			ref: setRoot,
-			className: cn("group/dropzone flex flex-col items-center justify-center gap-2 p-6 text-center", "rounded-[var(--ds-radius-lg)] border border-dashed border-[var(--ds-border)] bg-[var(--ds-card)]", "cursor-pointer select-none outline-none", "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]", "focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[active]:border-[var(--ds-primary)] data-[active]:bg-[var(--ds-primary-soft)]", "data-[reject]:border-[var(--ds-destructive)] data-[reject]:bg-[var(--ds-destructive-soft)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
+			className: cn("group/dropzone flex flex-col items-center justify-center gap-2 p-6 text-center", "rounded-[var(--ds-radius-lg)] border border-dashed border-[var(--ds-border)] bg-[var(--ds-card)]", noClick ? "select-none outline-none" : "cursor-pointer select-none outline-none", "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]", "hover:border-[var(--ds-border-strong)] hover:bg-[var(--ds-hover)]", "focus-visible:border-[var(--ds-ring)] focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[active]:border-[var(--ds-primary)] data-[active]:bg-[var(--ds-primary-soft)]", "data-[reject]:border-[var(--ds-destructive)] data-[reject]:bg-[var(--ds-destructive-soft)]", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
 		}),
 		"data-slot": "dropzone",
 		"data-active": isDragActive || void 0,
@@ -7381,6 +7655,8 @@ function Dropzone({ onFiles, onReject, accept, multiple = true, maxSize, maxFile
 		"data-reject": isDragReject || void 0,
 		"data-focused": isFocused || void 0,
 		"data-disabled": disabled || void 0,
+		"data-no-click": noClick || void 0,
+		"data-no-keyboard": noKeyboard || void 0,
 		children: [/* @__PURE__ */ jsx("input", {
 			"data-slot": "dropzone-input",
 			...getInputProps()
@@ -7760,9 +8036,35 @@ function Segmented({ className, value, onValueChange, options, "aria-label": ari
 * Description, Close); only the Popup's placement differs, chosen by `side`.
 * `SheetContent` composes Portal + Backdrop + Popup so consumers keep writing
 * `<SheetContent side="right">…</SheetContent>`.
+*
+* ## Non-modal side panels
+*
+* `modal={false}` is the help-panel / inspector case: a sheet read *alongside*
+* the app rather than instead of it. No backdrop is rendered, focus is not
+* trapped, page scroll is not locked, and the rest of the page stays clickable,
+* so a user can keep working with the panel open. `modal="trap-focus"` is the
+* middle setting Base UI offers: focus stays inside, the page still scrolls.
+*
+* ```tsx
+* <Sheet modal={false} open={helpOpen} onOpenChange={setHelpOpen}>
+*   <SheetContent side="right" disablePointerDismissal>…</SheetContent>
+* </Sheet>
+* ```
+*
+* A non-modal sheet closes when focus or a press leaves it; pass
+* `disablePointerDismissal` (a Base UI Root prop, forwarded) to keep it open
+* until the user closes it. `modal` is on the Root because that is where Base
+* UI reads it; `SheetContent` picks the backdrop up from there through context.
 */
-function Sheet(props) {
-	return /* @__PURE__ */ jsx(Dialog$1.Root, { ...props });
+const SheetModalContext = React.createContext(true);
+function Sheet({ modal = true, ...props }) {
+	return /* @__PURE__ */ jsx(SheetModalContext.Provider, {
+		value: modal,
+		children: /* @__PURE__ */ jsx(Dialog$1.Root, {
+			modal,
+			...props
+		})
+	});
 }
 function SheetTrigger(props) {
 	return /* @__PURE__ */ jsx(Dialog$1.Trigger, {
@@ -7804,12 +8106,14 @@ const sheetVariants = cva([
 	defaultVariants: { side: "right" }
 });
 function SheetContent({ side = "right", className, children, keepMounted, container, ...props }) {
+	const modal = React.useContext(SheetModalContext);
 	return /* @__PURE__ */ jsxs(SheetPortal, {
 		keepMounted,
 		container,
-		children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(Dialog$1.Popup, {
+		children: [modal === false ? null : /* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsx(Dialog$1.Popup, {
 			"data-slot": "sheet-content",
 			"data-side": side,
+			"data-modal": modal === false ? void 0 : modal === true ? "" : modal,
 			className: cn(sheetVariants({ side }), className),
 			...props,
 			children
@@ -7846,6 +8150,40 @@ function SheetDescription({ className, ...props }) {
 }
 //#endregion
 //#region src/components/sortable-list.tsx
+/**
+* SortableList.
+*
+* A reorderable list over dnd-kit: `DndContext` + `SortableContext` around one
+* `useSortable` item per entry. The list owns nothing — it calls `onReorder`
+* with the next array and the consumer stores it. Pointer and keyboard sensors
+* are wired (Space picks up, arrows move, Space drops, Escape cancels) and a
+* `DragOverlay` paints the lifted copy with `--ds-shadow-lg` while the item
+* left behind dims and takes the ring colour.
+*
+* By default the whole row is the drag activator. Pass `handle` to restrict
+* dragging to a `<SortableHandle>` (or any element given `handleProps`) so
+* buttons and inputs inside a row stay clickable.
+*
+* ## Touch
+*
+* A pointer drag and a touch scroll start the same way, so something has to
+* say which one a finger means. In handle mode only the small handle is
+* `touch-none`, so the rest of the row scrolls: nothing to decide. In
+* whole-row mode the whole row is `touch-none`, which is why a touch list
+* whose rows are the activators cannot be scrolled by dragging over them.
+*
+* `touchScroll` is the way out, and it defaults to whichever of those is
+* already true — `true` in handle mode, `false` in whole-row mode, so existing
+* lists behave exactly as before. Setting it `true` on a whole-row list drops
+* `touch-none` and swaps the PointerSensor for a MouseSensor plus a
+* TouchSensor with delay activation: a quick swipe scrolls, a press held for
+* {@link TOUCH_DELAY_MS} picks the row up. `false` in handle mode is the
+* opposite trade — the row never scrolls under a finger.
+*/
+/** How long a finger must rest on a row before it becomes a drag. */
+const TOUCH_DELAY_MS = 250;
+/** How far it may slip in that time and still count as a press, not a scroll. */
+const TOUCH_TOLERANCE_PX = 8;
 /** dnd-kit types its listeners as a bag of `Function`s; narrow them to the handlers they are. */
 function asHandlers(listeners) {
 	return listeners ?? {};
@@ -7858,7 +8196,7 @@ const SortableItemContext = React.createContext({
 	disabled: false
 });
 const itemClassName = cn("relative rounded-[var(--ds-radius-md)] outline-none", "focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40", "data-[dragging]:opacity-50 data-[dragging]:ring-2 data-[dragging]:ring-[var(--ds-ring)]");
-function SortableItem({ id, item, handle, disabled, renderItem, className }) {
+function SortableItem({ id, item, handle, disabled, touchScroll, renderItem, className }) {
 	const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
 		id,
 		disabled
@@ -7896,7 +8234,7 @@ function SortableItem({ id, item, handle, disabled, renderItem, className }) {
 				transform: CSS.Translate.toString(transform),
 				transition
 			},
-			className: cn(itemClassName, !handle && !disabled && "cursor-grab touch-none data-[dragging]:cursor-grabbing", className),
+			className: cn(itemClassName, !handle && !disabled && "cursor-grab data-[dragging]:cursor-grabbing", !touchScroll && !disabled && "touch-none", className),
 			...rowActivator,
 			children: renderItem(item, {
 				handleProps,
@@ -7923,9 +8261,19 @@ function SortableHandle({ className, children, ...props }) {
 		children: children ?? /* @__PURE__ */ jsx(GripVertical, { "aria-hidden": true })
 	});
 }
-function SortableList({ items, getId, onReorder, renderItem, orientation = "vertical", handle = false, disabled = false, itemClassName: itemClass, className, ...props }) {
+function SortableList({ items, getId, onReorder, renderItem, orientation = "vertical", handle = false, disabled = false, touchScroll = handle, itemClassName: itemClass, className, ...props }) {
 	const [activeId, setActiveId] = React.useState(null);
-	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const delayTouch = touchScroll && !handle;
+	const pointerSensor = useSensor(PointerSensor, { activationConstraint: { distance: 4 } });
+	const mouseSensor = useSensor(MouseSensor, { activationConstraint: { distance: 4 } });
+	const touchSensor = useSensor(TouchSensor, { activationConstraint: {
+		delay: TOUCH_DELAY_MS,
+		tolerance: TOUCH_TOLERANCE_PX
+	} });
+	const keyboardSensor = useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates });
+	const pointerSensors = useSensors(pointerSensor, keyboardSensor);
+	const splitSensors = useSensors(mouseSensor, touchSensor, keyboardSensor);
+	const sensors = delayTouch ? splitSensors : pointerSensors;
 	const ids = React.useMemo(() => items.map(getId), [items, getId]);
 	const activeItem = activeId === null ? void 0 : items[ids.indexOf(activeId)];
 	const onDragStart = React.useCallback((event) => {
@@ -7938,7 +8286,12 @@ function SortableList({ items, getId, onReorder, renderItem, orientation = "vert
 		const from = ids.indexOf(active.id);
 		const to = ids.indexOf(over.id);
 		if (from < 0 || to < 0) return;
-		onReorder(arrayMove([...items], from, to));
+		onReorder(arrayMove([...items], from, to), {
+			from,
+			to,
+			activeId: active.id,
+			overId: over.id
+		});
 	}, [
 		ids,
 		items,
@@ -7959,6 +8312,7 @@ function SortableList({ items, getId, onReorder, renderItem, orientation = "vert
 				"data-slot": "sortable-list",
 				"data-orientation": orientation,
 				"data-disabled": disabled || void 0,
+				"data-touch-scroll": touchScroll ? "" : void 0,
 				className: cn("flex list-none gap-2 p-0", orientation === "horizontal" ? "flex-row flex-wrap" : "flex-col", className),
 				...props,
 				children: items.map((item, index) => /* @__PURE__ */ jsx(SortableItem, {
@@ -7966,6 +8320,7 @@ function SortableList({ items, getId, onReorder, renderItem, orientation = "vert
 					item,
 					handle,
 					disabled,
+					touchScroll,
 					renderItem,
 					className: itemClass
 				}, ids[index] ?? index))
@@ -8312,6 +8667,6 @@ function useCortenaTheme(options = {}) {
 	};
 }
 //#endregion
-export { A2UIErrorCard, A2UIRenderer, A2UI_CATALOGUE_ID, A2UI_DEFAULT_SURFACE_ID, A2UI_VERSION, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertIcon, AlertTitle, Area, AreaChart, Avatar, AvatarFallback, AvatarImage, Badge, Bar, BarChart, Button, ButtonLink, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, Cell, Chart, ChartContainer, ChartEmpty, ChartError, ChartLegend, ChartLegendContent, ChartLoading, ChartTooltip, ChartTooltipContent, Checkbox, Chip, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposedChart, DEFAULT_THEME_STORAGE_KEY, DataTable, DataTableColumnHeader, DataTableExportMenu, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableView, DataTableViewOptions, DateField, DatePicker, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, EmptyState, ErrorBanner, Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, Fieldset, FieldsetLegend, FileList, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Funnel, FunnelChart, Input, Kbd, Label, LabelList, Line, LineChart, LoadingSkeleton, Markdown, NIVO_TYPES, PageHeader, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RECHARTS_TYPES, Radar, RadarChart, RadioGroup, RadioGroupItem, RechartsLegend, RechartsTooltip, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, ScrollArea, ScrollBar, SectionCard, Segmented, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHandle, SortableList, Spinner, StatusDot, Switch, THEME_MESSAGE_TYPE, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toast, Toaster, Toolbar, ToolbarEnd, ToolbarSeparator, ToolbarStart, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VIZ_SERIES_COUNT, XAxis, YAxis, alertVariants, applyStoredTheme, applyTheme, arrayMove, badgeVariants, buildCatalogueDoc, buttonVariants, catalogueMarkdown, catalogueNames, chartEngine, chartScales, chipVariants, cn, createColumnHelper, dataTableFeatures, defaultCatalogue, downloadCsv, downloadExcel, exampleMessages, fieldVariants, foldMessages, formatDateDefault, formatDateISO, formatDateLong, formatDateShort, formatFileSize, formatRelative, getAtPointer, getThemeInitScript, inputClassName, isDataBinding, labelVariants, markdownSanitizeSchema, nivoTheme, parseA2UIMessages, parseDateDefault, parseDateISO, pointerSegments, readAction, readChildren, readComponent, readStoredTheme, resolveColor, resolvePointer, resolveValue, resolveVizSeries, seriesColor, setAtPointer, sheetVariants, textareaClassName, themeFromBackground, themeFromMessage, themeInitScript, toCsv, toHex, toSheet, toastVariants, useChart, useComboboxFilter, useCortenaTheme, useDataTable, useForm, useFormField, useNivoTheme, useToast, vizSeriesVars, vizVar, zodResolver };
+export { A2UIErrorCard, A2UIRenderer, A2UI_CATALOGUE_ID, A2UI_DEFAULT_SURFACE_ID, A2UI_VERSION, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertIcon, AlertTitle, Area, AreaChart, Avatar, AvatarFallback, AvatarImage, Badge, Bar, BarChart, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CartesianGrid, Cell, Chart, ChartContainer, ChartEmpty, ChartError, ChartLegend, ChartLegendContent, ChartLoading, ChartTooltip, ChartTooltipContent, Checkbox, Chip, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposedChart, DEFAULT_THEME_STORAGE_KEY, DataTable, DataTableColumnHeader, DataTableExportMenu, DataTableFacetedFilter, DataTablePagination, DataTableToolbar, DataTableView, DataTableViewOptions, DateField, DatePicker, DateRangePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Dropzone, EmptyState, ErrorBanner, Field, FieldContent, FieldControl, FieldDescription, FieldError, FieldGroup, FieldLabel, Fieldset, FieldsetLegend, FileList, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Funnel, FunnelChart, Input, Kbd, Label, LabelList, Line, LineChart, LoadingSkeleton, Markdown, NIVO_TYPES, PageHeader, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RECHARTS_TYPES, Radar, RadarChart, RadioGroup, RadioGroupItem, RechartsLegend, RechartsTooltip, ReferenceLine, ResponsiveContainer, Scatter, ScatterChart, ScrollArea, ScrollBar, SectionCard, Segmented, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, SortableHandle, SortableList, Spinner, StatusDot, Switch, THEME_MESSAGE_TYPE, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toast, Toaster, Toolbar, ToolbarEnd, ToolbarSeparator, ToolbarStart, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VIZ_SERIES_COUNT, XAxis, YAxis, alertVariants, applyStoredTheme, applyTheme, arrayMove, badgeVariants, buildCatalogueDoc, buttonVariants, catalogueMarkdown, catalogueNames, chartEngine, chartScales, chipVariants, cn, createColumnHelper, dataTableFeatures, defaultCatalogue, downloadCsv, downloadExcel, exampleMessages, fieldVariants, foldMessages, formatDateDefault, formatDateISO, formatDateLong, formatDateShort, formatFileSize, formatRelative, getAtPointer, getThemeInitScript, inputClassName, isDataBinding, labelVariants, markdownSanitizeSchema, nivoTheme, parseA2UIMessages, parseDateDefault, parseDateISO, pointerSegments, readAction, readChildren, readComponent, readStoredTheme, resolveColor, resolvePointer, resolveValue, resolveVizSeries, seriesColor, setAtPointer, sheetVariants, textareaClassName, themeFromBackground, themeFromMessage, themeInitScript, toCsv, toHex, toSheet, toastVariants, useChart, useComboboxFilter, useCortenaTheme, useDataTable, useForm, useFormField, useNivoTheme, useToast, vizSeriesVars, vizVar, zodResolver };
 
 //# sourceMappingURL=index.js.map