@vitavision/ui 0.12.0 → 0.14.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { AlertTriangle, ArrowDown, ArrowUp, ArrowUpDown, Check, CheckCircle2, ChevronDown, ChevronRight, CircleCheck, CircleX, HelpCircle, Info, Loader2, Minus, Moon, Sun, SunMoon, TriangleAlert, X, XCircle } from "lucide-react";
-import { createContext, isValidElement, use, useCallback, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { createContext, isValidElement, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -246,7 +246,7 @@ function ThemeToggle({ storageKey = DEFAULT_THEME_STORAGE_KEY, className }) {
 }
 //#endregion
 //#region src/components/ui/Badge.tsx
-const TONE_CLASSES = {
+const TONE_CLASSES$1 = {
 	neutral: "bg-raised text-fg-muted ring-line",
 	normal: "bg-normal/12 text-normal ring-normal/25",
 	defect: "bg-defect/12 text-defect ring-defect/25",
@@ -271,7 +271,7 @@ const DOT_CLASSES = {
 function Badge({ tone = "neutral", className, children }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-tone": tone,
-		className: cn("inline-flex items-center gap-1 rounded-control px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset", TONE_CLASSES[tone], className),
+		className: cn("inline-flex items-center gap-1 rounded-control px-1.5 py-0.5 text-xs font-medium ring-1 ring-inset", TONE_CLASSES$1[tone], className),
 		children
 	});
 }
@@ -346,6 +346,93 @@ function DensityProvider({ value, children }) {
 	});
 }
 //#endregion
+//#region src/components/ui/Breakdown.tsx
+/** Counts written the same on the server and in every browser: `2,556`, `0.5`. */
+const count$1 = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+const TONE_CLASSES = {
+	normal: "bg-normal",
+	warn: "bg-warn",
+	defect: "bg-defect",
+	neutral: "bg-fg-subtle"
+};
+/** A count as drawn: 0 for anything that is not a finite, positive number. */
+const amount = (value) => Number.isFinite(value) && value > 0 ? value : 0;
+/** The segments that are drawn, the whole, and the rest of it. */
+function measure(segments, total) {
+	const shown = segments.filter((segment) => amount(segment.value) > 0);
+	const sum = shown.reduce((acc, segment) => acc + amount(segment.value), 0);
+	const whole = total !== void 0 && Number.isFinite(total) && total > sum ? total : sum;
+	return {
+		shown,
+		sum,
+		whole,
+		rest: whole - sum
+	};
+}
+/**
+* The counts of a breakdown in words: `"412 done, 20 to check, 3 problems, 131 to do of 566"`.
+*
+* It is the default accessible name of `Breakdown`, and the text for a tooltip or a label printed
+* beside the bar. Segments of 0 are left out; the rest of the total is named only with a
+* `remainderLabel`. With nothing to count it reads `"0 of 566"`.
+*
+* @param segments - The categories, in order.
+* @param options - The `total` and the `remainderLabel`.
+* @returns The text.
+*/
+function breakdownText(segments, options = {}) {
+	const { shown, whole, rest } = measure(segments, options.total);
+	const parts = shown.map((segment) => `${count$1.format(amount(segment.value))} ${segment.label}`);
+	if (options.remainderLabel !== void 0 && rest > 0) parts.push(`${count$1.format(rest)} ${options.remainderLabel}`);
+	return `${parts.length > 0 ? parts.join(", ") : "0"} of ${count$1.format(whole)}`;
+}
+/**
+* A thin bar of counts by category: 412 done, 20 to check and 3 problems out of 566, with the
+* rest as empty track. Segments are drawn in the order given, each as wide as its share of the
+* total (a non-zero count is never narrower than 2 px); segments of 0 are left out.
+*
+* Its colours are verdicts, so use it only for things the app has judged — never for a share of
+* a continuous quantity or for series side by side (use `Progress` or a chart).
+*
+* A `role="img"` whose name lists every non-zero count, as `breakdownText` writes it: "412 done,
+* 20 to check, 3 problems, 131 to do of 566". `aria-label` or `aria-labelledby` replaces it. The track
+* matches `Progress` and follows the density in force. State is exposed as `data-state`
+* (`"empty"` with nothing counted, `"partial"`, or `"complete"` when the segments fill the
+* total), and each segment's tone as its `data-tone`. Width changes ease over 300 ms, and not at
+* all with reduced motion.
+*/
+function Breakdown({ segments, total, remainderLabel, className, "aria-label": ariaLabel, ...rest }) {
+	const density = useDensity();
+	const { shown, sum, rest: remainder } = measure(segments, total);
+	const name = ariaLabel ?? (rest["aria-labelledby"] ? void 0 : breakdownText(segments, {
+		total,
+		remainderLabel
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		role: "img",
+		"aria-label": name,
+		"data-state": sum === 0 ? "empty" : remainder > 0 ? "partial" : "complete",
+		...rest,
+		className: cn("w-full overflow-hidden rounded-full bg-line", byDensity(density, "h-1.5", "h-1"), className),
+		style: {
+			display: "flex",
+			gap: 1,
+			...rest.style
+		},
+		children: [shown.map((segment) => /* @__PURE__ */ jsx("div", {
+			"data-tone": segment.tone,
+			className: cn("h-full transition-[flex-grow] duration-300", TONE_CLASSES[segment.tone]),
+			style: {
+				flex: `${amount(segment.value)} 0 0`,
+				minWidth: 2
+			}
+		}, segment.label)), remainder > 0 && /* @__PURE__ */ jsx("div", {
+			className: "h-full transition-[flex-grow] duration-300",
+			style: { flex: `${remainder} 0 0` }
+		})]
+	});
+}
+//#endregion
 //#region src/components/ui/Button.tsx
 const VARIANT_CLASSES = {
 	primary: "bg-signal text-signal-fg hover:bg-signal-strong",
@@ -767,6 +854,9 @@ function SkeletonRows({ rows = 3, className }) {
 * A `role="progressbar"` with `aria-valuenow` in percent. Its accessible name is
 * `aria-label` if given, else `label`, else "Progress" — pass one that names the job when
 * a screen shows more than one bar.
+*
+* @deprecated Use `Progress`: a value out of a `max` with a "412 of 2,556" value text, an
+* indeterminate state, and a track that follows the density.
 */
 function ProgressBar({ fraction, label, "aria-label": ariaLabel, className }) {
 	const percent = Math.round(Math.min(Math.max(fraction, 0), 1) * 100);
@@ -885,6 +975,131 @@ function Field({ label, description, error, required = false, annotation, as = "
 	});
 }
 //#endregion
+//#region src/components/ui/highlightSpans.ts
+/** The kinds in the order their styles stack: a later one wins where two would clash. */
+const HIGHLIGHT_KINDS = [
+	"tag",
+	"protected-term",
+	"placeholder",
+	"mismatch"
+];
+/**
+* Cuts `text` into runs that are each covered by one fixed set of spans. Spans are clamped
+* to the text; empty, inverted and non-finite ones are dropped. Overlapping spans are kept:
+* the overlap is a run covered by both.
+*
+* @param text - The string, shown as text.
+* @param spans - The highlights, in any order.
+* @returns The runs, in order, together covering the whole text.
+*/
+function segmentText(text, spans) {
+	const length = text.length;
+	const clamp = (offset) => Math.floor(Math.max(0, Math.min(length, offset)));
+	const valid = spans.map((span) => ({
+		span,
+		start: clamp(span.start),
+		end: clamp(span.end)
+	})).filter(({ start, end }) => Number.isFinite(start) && Number.isFinite(end) && end > start);
+	const cuts = /* @__PURE__ */ new Set([0, length]);
+	for (const { start, end } of valid) {
+		cuts.add(start);
+		cuts.add(end);
+	}
+	const points = [...cuts].sort((a, b) => a - b);
+	const segments = [];
+	for (let i = 0; i + 1 < points.length; i++) {
+		const start = points[i];
+		const end = points[i + 1];
+		const covering = valid.filter((v) => v.start <= start && v.end >= end).map((v) => v.span);
+		segments.push({
+			text: text.slice(start, end),
+			start,
+			end,
+			spans: covering
+		});
+	}
+	return segments;
+}
+/**
+* Spans for every match of every rule: `%1`, `<b>`, a glossary term. Empty matches are
+* skipped. The result is sorted by start, then longest first.
+*
+* @param text - The string to search.
+* @param rules - Each pattern and the kind its matches get.
+* @returns The spans, ready for `HighlightedText`.
+*
+* @example
+* ```ts
+* findSpans("Open %1 in <b>ParamsManager</b>", [
+*   { pattern: /%\d+/, kind: "placeholder" },
+*   { pattern: /<\/?[a-z][^>]*>/i, kind: "tag" },
+*   { pattern: /\bParamsManager\b/, kind: "protected-term" },
+* ]);
+* ```
+*/
+function findSpans(text, rules) {
+	const spans = [];
+	for (const rule of rules) {
+		const flags = rule.pattern.flags.includes("g") ? rule.pattern.flags : `${rule.pattern.flags}g`;
+		for (const match of text.matchAll(new RegExp(rule.pattern.source, flags))) {
+			if (match[0] === "") continue;
+			const start = match.index;
+			spans.push({
+				start,
+				end: start + match[0].length,
+				kind: rule.kind,
+				...rule.label === void 0 ? {} : { label: rule.label }
+			});
+		}
+	}
+	return spans.sort((a, b) => a.start - b.start || b.end - a.end);
+}
+//#endregion
+//#region src/components/ui/HighlightedText.tsx
+/** What a screen reader hears after a span of each kind, by default. */
+const LABELS = {
+	placeholder: "placeholder",
+	tag: "markup",
+	"protected-term": "protected term",
+	mismatch: "mismatch"
+};
+/** The look of each kind; listed in `HIGHLIGHT_KINDS` order, so a later kind wins a clash. */
+const STYLES = {
+	tag: "rounded-sm bg-raised px-px font-mono text-fg-muted",
+	"protected-term": "underline decoration-fg-subtle decoration-dotted decoration-1 underline-offset-[3px]",
+	placeholder: "rounded-sm bg-raised px-px font-mono text-fg ring-1 ring-line-strong ring-inset",
+	mismatch: "bg-defect/12 text-fg underline decoration-defect decoration-wavy decoration-1 underline-offset-[3px]"
+};
+/**
+* A string with highlighted spans: placeholders (`%1`, `{count}`), markup tags (`<b>`),
+* protected terms (`ParamsManager`) and mismatches, each drawn in its own shape. The caller
+* supplies the spans, or finds them with `findSpans`.
+*
+* The text is rendered as text, never as HTML. Each span is a `<mark>` with `data-kind` (the
+* kinds covering it, space-separated), followed by its label for screen readers ("%1,
+* placeholder"), which a copy of the text leaves out.
+*/
+function HighlightedText({ text, spans = [], labels, className, ...rest }) {
+	const segments = segmentText(text, spans);
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		className: cn("break-words whitespace-pre-wrap", className),
+		children: segments.map((segment) => {
+			if (segment.spans.length === 0) return segment.text;
+			const kinds = HIGHLIGHT_KINDS.filter((kind) => segment.spans.some((span) => span.kind === kind));
+			const said = segment.spans.map((span) => span.label ?? (labels?.[span.kind] === void 0 ? LABELS[span.kind] : labels[span.kind])).filter((label) => typeof label === "string" && label !== "");
+			return /* @__PURE__ */ jsxs("mark", {
+				"data-kind": kinds.join(" "),
+				className: cn("bg-transparent text-inherit", ...kinds.map((kind) => STYLES[kind])),
+				children: [segment.text, said.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "sr-only select-none",
+					children: `, ${[...new Set(said)].join(", ")}`
+				})]
+			}, segment.start);
+		})
+	});
+}
+//#endregion
 //#region src/components/ui/numberText.ts
 /**
 * A number at a fixed number of decimals, without a negative zero (`-0.000` reads as a sign
@@ -1074,17 +1289,6 @@ function UnitNumberInput({ unit, style, "aria-describedby": describedBy, ...rest
 		})]
 	});
 }
-/**
-* Multi-line text — set in mono, for JSON and lists. Takes every `<textarea>` prop, `ref`
-* included.
-*/
-function Textarea({ className, "aria-describedby": describedBy, ...rest }) {
-	return /* @__PURE__ */ jsx("textarea", {
-		...useFieldDescription(describedBy),
-		...rest,
-		className: cn(controlClasses, "py-1.5 font-mono", className)
-	});
-}
 //#endregion
 //#region src/components/ui/listboxModel.ts
 /**
@@ -1361,6 +1565,52 @@ function ReadoutStrip({ items, className }) {
 	});
 }
 //#endregion
+//#region src/components/ui/Progress.tsx
+/** Counts written the same on the server and in every browser: `2,556`, `0.5`. */
+const count = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+/**
+* The accessible value text of a progress: `"412 of 2,556"`, or `null` while indeterminate.
+*
+* @param value - Done so far; `null` or `undefined` for an unknown amount.
+* @param max - The whole. Defaults to 100.
+* @returns The text, with the value clamped to `[0, max]`.
+*/
+function progressText(value, max = 100) {
+	if (value === null || value === void 0 || !Number.isFinite(value)) return null;
+	const whole = max > 0 ? max : 100;
+	return `${count.format(Math.min(Math.max(value, 0), whole))} of ${count.format(whole)}`;
+}
+/**
+* A progress bar: determinate when it has a `value` (a `max`, 100 by default), indeterminate
+* without one. Name it with `aria-label` or `aria-labelledby`.
+*
+* A `progressbar` with `aria-valuenow`, `aria-valuemax` and `aria-valuetext` ("412 of 2,556",
+* or your `valueText`); indeterminate, it has none of them, as the ARIA pattern asks.
+* The track follows the density in force. State is exposed as `data-state`
+* (`"indeterminate"`, `"loading"` or `"complete"`). With reduced motion the indeterminate bar
+* holds still.
+*/
+function Progress({ value, max = 100, valueText, className, ...rest }) {
+	const density = useDensity();
+	const whole = max > 0 ? max : 100;
+	const text = progressText(value, whole);
+	const done = text === null ? null : Math.min(Math.max(value, 0), whole);
+	return /* @__PURE__ */ jsx("div", {
+		role: "progressbar",
+		"aria-valuemin": done === null ? void 0 : 0,
+		"aria-valuemax": done === null ? void 0 : whole,
+		"aria-valuenow": done ?? void 0,
+		"aria-valuetext": done === null ? void 0 : valueText ?? text ?? void 0,
+		"data-state": done === null ? "indeterminate" : done >= whole ? "complete" : "loading",
+		...rest,
+		className: cn("relative w-full overflow-hidden rounded-full bg-line", byDensity(density, "h-1.5", "h-1"), className),
+		children: done === null ? /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 w-1/3 animate-progress-sweep rounded-full bg-signal" }) : /* @__PURE__ */ jsx("div", {
+			className: "h-full rounded-full bg-signal transition-[width] duration-300",
+			style: { width: `${done / whole * 100}%` }
+		})
+	});
+}
+//#endregion
 //#region src/components/ui/Popover.tsx
 /**
 * Floating content anchored to `trigger`, on the `overlay` surface with a shadow (floating
@@ -1854,7 +2104,68 @@ function sortRows(rows, columns, sort) {
 	return sortOrder(rows, columns, sort).map((index) => rows[index]);
 }
 //#endregion
+//#region src/components/ui/tableWindow.ts
+/**
+* The rows that intersect the visible part of the body, plus `overscan` on each side.
+* Degenerate input (no rows, a row height ≤ 0, NaN) gives an empty window.
+*/
+function rowWindow({ rowCount, rowHeight, scrollTop, viewportHeight, headerHeight, overscan }) {
+	const count = Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : 0;
+	if (count === 0 || !(rowHeight > 0)) return {
+		start: 0,
+		end: 0,
+		before: 0,
+		after: 0
+	};
+	const extra = Math.max(0, Math.floor(overscan) || 0);
+	const top = Math.max(0, scrollTop || 0);
+	const bottom = Math.max(top, top + Math.max(0, viewportHeight || 0) - Math.max(0, headerHeight || 0));
+	const first = Math.min(count, Math.floor(top / rowHeight));
+	const last = Math.min(count, Math.max(first + 1, Math.ceil(bottom / rowHeight)));
+	const start = Math.max(0, first - extra);
+	const end = Math.min(count, last + extra);
+	return {
+		start,
+		end,
+		before: start * rowHeight,
+		after: (count - end) * rowHeight
+	};
+}
+/**
+* The `scrollTop` that shows the row at `position` in full below the sticky header, moving
+* as little as possible: unchanged when it is already in view, else aligned to the nearer
+* edge. A viewport shorter than one row aligns the row's top.
+*/
+function scrollTopFor(position, { rowHeight, scrollTop, viewportHeight, headerHeight }) {
+	const rowTop = position * rowHeight;
+	const visible = viewportHeight - headerHeight;
+	if (rowTop < scrollTop || visible < rowHeight) return rowTop;
+	if (rowTop + rowHeight > scrollTop + visible) return rowTop + rowHeight - visible;
+	return scrollTop;
+}
+/**
+* The position a navigation key moves to from `position`, among `rowCount` rows, `page` rows
+* to a screen; `null` for a key that does not navigate.
+*/
+function navigate(key, position, rowCount, page) {
+	const last = rowCount - 1;
+	if (last < 0) return null;
+	const step = Math.max(1, Math.floor(page));
+	const clamp = (p) => Math.min(last, Math.max(0, p));
+	switch (key) {
+		case "ArrowDown": return clamp(position + 1);
+		case "ArrowUp": return clamp(position - 1);
+		case "PageDown": return clamp(position + step);
+		case "PageUp": return clamp(position - step);
+		case "Home": return 0;
+		case "End": return last;
+		default: return null;
+	}
+}
+//#endregion
 //#region src/components/ui/Table.tsx
+/** Rows per screen before a windowed table has measured itself (a server render, the first paint). */
+const INITIAL_ROWS = 20;
 /** The header icon for a sort state: the direction when sorted, both arrows when only sortable. */
 const SORT_ICONS = {
 	ascending: ArrowUp,
@@ -1875,8 +2186,13 @@ const SORT_ICONS = {
 * `defaultSort`) or controlled (`sort` with `onSortChange`); with `manualSort` the headers
 * show it and the rows render as given. Row callbacks always receive a row's index in `rows`,
 * whatever the order on screen.
+*
+* Activatable rows also move focus with the arrow keys, Page Up / Page Down and Home / End;
+* with `selectionFollowsFocus` each of those moves also activates the row it lands on.
+* With `windowed` the table scrolls itself (vertically, under a sticky header), renders only the
+* rows in view, and uses a fixed layout: give columns a `width` where the content needs it.
 */
-function Table({ columns, rows, rowKey, empty = "Nothing here.", caption, className, onRowClick, isRowActive, onRowHover, sort: controlledSort, defaultSort = null, onSortChange, manualSort = false }) {
+function Table({ columns, rows, rowKey, empty = "Nothing here.", caption, className, onRowClick, isRowActive, onRowHover, sort: controlledSort, defaultSort = null, onSortChange, manualSort = false, windowed, selectionFollowsFocus = false }) {
 	const density = useDensity();
 	const [ownSort, setOwnSort] = useState(defaultSort);
 	const controlled = controlledSort !== void 0;
@@ -1892,71 +2208,282 @@ function Table({ columns, rows, rowKey, empty = "Nothing here.", caption, classN
 		if (!controlled) setOwnSort(next);
 		onSortChange?.(next);
 	};
+	const rowHeight = windowed?.rowHeight ?? 0;
+	const scrollRef = useRef(null);
+	const headRef = useRef(null);
+	const bodyRef = useRef(null);
+	const pendingFocus = useRef(null);
+	const [scrollTop, setScrollTop] = useState(0);
+	const [measured, setMeasured] = useState(null);
+	const viewportHeight = measured?.viewport ?? windowed?.height ?? INITIAL_ROWS * rowHeight;
+	const headerHeight = measured?.header ?? 0;
+	const range = windowed ? rowWindow({
+		rowCount: order.length,
+		rowHeight,
+		scrollTop,
+		viewportHeight,
+		headerHeight,
+		overscan: windowed.overscan ?? 8
+	}) : {
+		start: 0,
+		end: order.length,
+		before: 0,
+		after: 0
+	};
+	const isWindowed = windowed !== void 0;
+	const hasRows = rows.length > 0;
+	useLayoutEffect(() => {
+		const scroller = scrollRef.current;
+		if (!isWindowed || !hasRows || !scroller || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			if (!scroller.isConnected) return;
+			const next = {
+				viewport: scroller.clientHeight,
+				header: headRef.current?.offsetHeight ?? 0
+			};
+			setMeasured((last) => last?.viewport === next.viewport && last.header === next.header ? last : next);
+		};
+		measure();
+		setScrollTop(scroller.scrollTop);
+		const observer = new ResizeObserver(measure);
+		observer.observe(scroller);
+		return () => observer.disconnect();
+	}, [isWindowed, hasRows]);
+	useLayoutEffect(() => {
+		const target = pendingFocus.current;
+		if (target === null) return;
+		const row = bodyRef.current?.querySelector(`tr[data-position="${target}"]`);
+		if (!row) return;
+		pendingFocus.current = null;
+		row.focus({ preventScroll: isWindowed });
+	});
+	/**
+	* Moves focus from the row at `position` for a navigation key, activating the new row when
+	* selection follows focus; `true` when the key was one.
+	*/
+	const moveFocus = (event, position) => {
+		const page = windowed ? Math.floor((viewportHeight - headerHeight) / rowHeight) : 10;
+		const target = navigate(event.key, position, order.length, page);
+		if (target === null) return false;
+		if (selectionFollowsFocus && onRowClick && target !== position) {
+			const index = order[target];
+			onRowClick(rows[index], index, event);
+		}
+		pendingFocus.current = target;
+		const scroller = scrollRef.current;
+		if (windowed && scroller) {
+			scroller.scrollTop = scrollTopFor(target, {
+				rowHeight,
+				scrollTop: scroller.scrollTop,
+				viewportHeight,
+				headerHeight
+			});
+			setScrollTop(scroller.scrollTop);
+		}
+		const row = bodyRef.current?.querySelector(`tr[data-position="${target}"]`);
+		if (row) {
+			pendingFocus.current = null;
+			row.focus({ preventScroll: windowed !== void 0 });
+		}
+		return true;
+	};
 	if (rows.length === 0) return /* @__PURE__ */ jsx("p", {
 		className: cn("text-center text-fg-muted", byDensity(density, "py-6 text-sm", "py-3 text-xs"), className),
 		children: empty
 	});
+	const spacer = (height) => /* @__PURE__ */ jsx("tr", {
+		"aria-hidden": "true",
+		style: { height },
+		children: /* @__PURE__ */ jsx("td", {
+			colSpan: columns.length,
+			className: "p-0"
+		})
+	});
+	const scrollStop = windowed !== void 0 && !onRowClick && !columns.some(isSortable);
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("w-full overflow-x-auto", className),
+		ref: scrollRef,
+		className: cn("w-full", windowed ? scrollStop && "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-signal" : "overflow-x-auto", className),
+		style: windowed ? {
+			overflow: "auto",
+			height: windowed.height ?? "100%"
+		} : void 0,
+		onScroll: windowed ? (event) => setScrollTop(event.currentTarget.scrollTop) : void 0,
+		...scrollStop ? {
+			tabIndex: 0,
+			role: "region",
+			"aria-label": caption ?? "Table"
+		} : {},
 		children: /* @__PURE__ */ jsxs("table", {
 			className: cn("w-full text-left", byDensity(density, "text-sm", "text-[11px]")),
+			style: windowed ? { tableLayout: "fixed" } : void 0,
+			"aria-rowcount": windowed ? order.length + 1 : void 0,
 			children: [
 				caption && /* @__PURE__ */ jsx("caption", {
 					className: "sr-only",
 					children: caption
 				}),
-				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
-					className: "border-b border-line",
-					children: columns.map((column) => {
-						const sortable = isSortable(column);
-						const direction = sortable && sort?.key === column.key ? sort.direction : void 0;
-						const SortIcon = SORT_ICONS[direction ?? "none"];
-						return /* @__PURE__ */ jsx("th", {
-							scope: "col",
-							style: column.width ? { width: column.width } : void 0,
-							"aria-sort": direction,
-							"data-sort": sortable ? direction ?? "none" : void 0,
-							className: cn("font-medium text-fg-muted last:pr-0", byDensity(density, "pb-2 pr-3 text-xs", "pb-1 pr-2 text-[10px]"), column.numeric && "text-right"),
-							children: sortable ? /* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => changeSort(column),
-								className: cn("-mx-1 flex w-fit max-w-full cursor-pointer items-center gap-1 rounded-control px-1", "font-medium transition-colors hover:text-fg", focusRing, column.numeric ? "ml-auto flex-row-reverse text-right" : "text-left", direction && "text-fg"),
-								children: [column.header, /* @__PURE__ */ jsx(SortIcon, {
-									"aria-hidden": true,
-									className: cn("shrink-0", byDensity(density, "size-3", "size-2.5"), !direction && "text-fg-subtle")
-								})]
-							}) : column.header
-						}, column.key);
+				/* @__PURE__ */ jsx("thead", {
+					ref: headRef,
+					children: /* @__PURE__ */ jsx("tr", {
+						className: "border-b border-line",
+						"aria-rowindex": windowed ? 1 : void 0,
+						children: columns.map((column) => {
+							const sortable = isSortable(column);
+							const direction = sortable && sort?.key === column.key ? sort.direction : void 0;
+							const SortIcon = SORT_ICONS[direction ?? "none"];
+							return /* @__PURE__ */ jsx("th", {
+								scope: "col",
+								style: windowed ? {
+									position: "sticky",
+									top: 0,
+									zIndex: 1,
+									...column.width ? { width: column.width } : {}
+								} : column.width ? { width: column.width } : void 0,
+								"aria-sort": direction,
+								"data-sort": sortable ? direction ?? "none" : void 0,
+								className: cn("font-medium text-fg-muted last:pr-0", byDensity(density, "pb-2 pr-3 text-xs", "pb-1 pr-2 text-[10px]"), column.numeric && "text-right", windowed && "bg-surface shadow-[inset_0_-1px_0_var(--line)]"),
+								children: sortable ? /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									onClick: () => changeSort(column),
+									className: cn("-mx-1 flex w-fit max-w-full cursor-pointer items-center gap-1 rounded-control px-1", "font-medium transition-colors hover:text-fg", focusRing, column.numeric ? "ml-auto flex-row-reverse text-right" : "text-left", direction && "text-fg"),
+									children: [column.header, /* @__PURE__ */ jsx(SortIcon, {
+										"aria-hidden": true,
+										className: cn("shrink-0", byDensity(density, "size-3", "size-2.5"), !direction && "text-fg-subtle")
+									})]
+								}) : column.header
+							}, column.key);
+						})
 					})
-				}) }),
-				/* @__PURE__ */ jsx("tbody", { children: order.map((index) => {
-					const row = rows[index];
-					const active = isRowActive?.(row, index) ?? false;
-					return /* @__PURE__ */ jsx("tr", {
-						"data-state": active ? "active" : void 0,
-						className: cn("border-b border-line/60 last:border-0", onRowClick && "cursor-pointer hover:bg-raised", active && "bg-signal/10"),
-						tabIndex: onRowClick ? 0 : void 0,
-						"aria-current": active ? true : void 0,
-						onClick: onRowClick ? (event) => onRowClick(row, index, event) : void 0,
-						onKeyDown: onRowClick ? (event) => {
-							if (event.key === "Enter" || event.key === " ") {
-								event.preventDefault();
-								onRowClick(row, index, event);
-							}
-						} : void 0,
-						onPointerEnter: onRowHover ? () => onRowHover(row, index) : void 0,
-						onPointerLeave: onRowHover ? () => onRowHover(null, null) : void 0,
-						children: columns.map((column) => /* @__PURE__ */ jsx("td", {
-							className: cn("align-middle text-fg last:pr-0", byDensity(density, "py-2 pr-3", "py-0.5 pr-2"), column.numeric && "text-right font-mono tabular-nums"),
-							children: column.cell(row)
-						}, column.key))
-					}, rowKey(row, index));
-				}) })
+				}),
+				/* @__PURE__ */ jsxs("tbody", {
+					ref: bodyRef,
+					children: [
+						range.before > 0 && spacer(range.before),
+						order.slice(range.start, range.end).map((index, offset) => {
+							const row = rows[index];
+							const active = isRowActive?.(row, index) ?? false;
+							const position = range.start + offset;
+							return /* @__PURE__ */ jsx("tr", {
+								"data-position": position,
+								"aria-rowindex": windowed ? position + 2 : void 0,
+								style: windowed ? { height: rowHeight } : void 0,
+								"data-state": active ? "active" : void 0,
+								className: cn(!windowed && "border-b border-line/60 last:border-0", onRowClick && "cursor-pointer hover:bg-raised", active && "bg-signal/10"),
+								tabIndex: onRowClick ? 0 : void 0,
+								"aria-current": active ? true : void 0,
+								onClick: onRowClick ? (event) => onRowClick(row, index, event) : void 0,
+								onKeyDown: onRowClick ? (event) => {
+									if (event.key === "Enter" || event.key === " ") {
+										event.preventDefault();
+										onRowClick(row, index, event);
+									} else if (event.target === event.currentTarget && moveFocus(event, position)) event.preventDefault();
+								} : void 0,
+								onPointerEnter: onRowHover ? () => onRowHover(row, index) : void 0,
+								onPointerLeave: onRowHover ? () => onRowHover(null, null) : void 0,
+								children: columns.map((column) => /* @__PURE__ */ jsx("td", {
+									className: cn("align-middle text-fg last:pr-0", byDensity(density, "py-2 pr-3", "py-0.5 pr-2"), column.numeric && "text-right font-mono tabular-nums", windowed && "shadow-[inset_0_-1px_0_color-mix(in_oklab,var(--line)_60%,transparent)]"),
+									style: windowed ? {
+										whiteSpace: "nowrap",
+										overflow: "hidden",
+										textOverflow: "ellipsis"
+									} : void 0,
+									children: column.cell(row)
+								}, column.key))
+							}, rowKey(row, index));
+						}),
+						range.after > 0 && spacer(range.after)
+					]
+				})
 			]
 		})
 	});
 }
 //#endregion
+//#region src/components/ui/Textarea.tsx
+/** Sets a ref of either kind. */
+function assign(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Fits a textarea's height to its content between `minRows` and `maxRows` lines, and scrolls
+* only past the cap.
+*/
+function fit(node, minRows, maxRows) {
+	const style = getComputedStyle(node);
+	const line = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2 || 20;
+	const border = Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth);
+	const chrome = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom) + border;
+	const min = minRows * line + chrome;
+	const max = maxRows === void 0 ? Number.POSITIVE_INFINITY : Math.max(min, maxRows * line + chrome);
+	node.style.height = `${min}px`;
+	const content = node.scrollHeight + border;
+	node.style.height = `${Math.min(Math.max(content, min), max)}px`;
+	node.style.overflowY = content > max + .5 ? "auto" : "hidden";
+}
+/**
+* Multi-line text, on the shared control palette. Takes every `<textarea>` prop, `ref`
+* included; inside a `Field` it is described by the field's description and error, and
+* shown invalid while the field has an error.
+*
+* With `minRows` or `maxRows` it grows with its content between the two (and scrolls past
+* `maxRows`); without them it is `rows` tall and the reader can resize it. State is exposed
+* as `data-invalid`.
+*/
+function Textarea({ className, "aria-describedby": describedBy, invalid, mono = false, minRows, maxRows, rows, value, onChange, onValueChange, ref, ...rest }) {
+	const field = useFieldDescription(describedBy);
+	const isInvalid = invalid === true || field["aria-invalid"] === true;
+	const grows = minRows !== void 0 || maxRows !== void 0;
+	const floor = Math.max(1, Math.floor(minRows ?? 1));
+	const cap = maxRows === void 0 ? void 0 : Math.max(floor, Math.floor(maxRows));
+	const node = useRef(null);
+	const setNode = useCallback((element) => {
+		node.current = element;
+		assign(ref, element);
+	}, [ref]);
+	useLayoutEffect(() => {
+		if (grows && node.current) fit(node.current, floor, cap);
+	}, [
+		grows,
+		floor,
+		cap,
+		mono,
+		value
+	]);
+	useLayoutEffect(() => {
+		const element = node.current;
+		if (!grows || !element || typeof ResizeObserver === "undefined") return void 0;
+		let width = element.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (element.clientWidth === width) return;
+			width = element.clientWidth;
+			fit(element, floor, cap);
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		grows,
+		floor,
+		cap
+	]);
+	const change = (event) => {
+		onChange?.(event);
+		onValueChange?.(event.currentTarget.value);
+		if (grows) fit(event.currentTarget, floor, cap);
+	};
+	return /* @__PURE__ */ jsx("textarea", {
+		...field,
+		"aria-invalid": isInvalid || void 0,
+		"data-invalid": isInvalid ? "" : void 0,
+		...rest,
+		...value === void 0 ? {} : { value },
+		ref: setNode,
+		rows: grows ? floor : rows,
+		onChange: change,
+		className: cn(controlClasses, "py-1.5", grows && "resize-none", mono && "font-mono", "data-invalid:border-defect data-invalid:hover:border-defect", className)
+	});
+}
+//#endregion
 //#region src/components/ui/Toggle.tsx
 /**
 * A setting: changes how the thing behaves from now on, and reads as one ("show the mask").
@@ -2325,6 +2852,6 @@ function Tabs({ items, active, onSelect, label, idPrefix, className }) {
 	});
 }
 //#endregion
-export { Badge, Button, ButtonLink, Callout, Checkbox, ConfirmDialog, CountRun, DEFAULT_THEME_STORAGE_KEY, DensityProvider, Dialog, DialogClose, Disclosure, DropdownMenu, Empty, ErrorBox, Field, InfoHint, Input, Kbd, Listbox, MenuCheckboxItem, MenuItem, MenuLabel, MenuSeparator, NumberInput, PageHeader, Panel, Popover, PopoverClose, PoseInput, ProgressBar, ReadoutStrip, Section, SegmentedControl, Select, Skeleton, SkeletonRows, Slider, StatusDot, Switch, Table, Tabs, Textarea, ThemeToggle, Toaster, ToggleChip, Tooltip, TooltipProvider, VectorInput, buttonClasses, byDensity, cn, controlClasses, createToastStore, defaultToastStore, focusRing, focusRingInset, formatNumber, initTheme, inputClasses, parseNumber, readThemeChoice, resolveTheme, setThemeChoice, sortRows, toast, toneColor, useControlHeight, useDensity };
+export { Badge, Breakdown, Button, ButtonLink, Callout, Checkbox, ConfirmDialog, CountRun, DEFAULT_THEME_STORAGE_KEY, DensityProvider, Dialog, DialogClose, Disclosure, DropdownMenu, Empty, ErrorBox, Field, HighlightedText, InfoHint, Input, Kbd, Listbox, MenuCheckboxItem, MenuItem, MenuLabel, MenuSeparator, NumberInput, PageHeader, Panel, Popover, PopoverClose, PoseInput, Progress, ProgressBar, ReadoutStrip, Section, SegmentedControl, Select, Skeleton, SkeletonRows, Slider, StatusDot, Switch, Table, Tabs, Textarea, ThemeToggle, Toaster, ToggleChip, Tooltip, TooltipProvider, VectorInput, breakdownText, buttonClasses, byDensity, cn, controlClasses, createToastStore, defaultToastStore, findSpans, focusRing, focusRingInset, formatNumber, initTheme, inputClasses, parseNumber, progressText, readThemeChoice, resolveTheme, setThemeChoice, sortRows, toast, toneColor, useControlHeight, useDensity };
 
 //# sourceMappingURL=index.js.map