@vitavision/ui 0.11.0 → 0.13.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { AlertTriangle, 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 { 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, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -767,6 +767,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 +888,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 +1202,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 +1478,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
@@ -1775,62 +1938,454 @@ function Slider({ value, onValueChange, onValueCommit, min = 0, max = 1, step =
 	});
 }
 //#endregion
+//#region src/components/ui/tableSort.ts
+/** Strings by a fixed English collation that reads digit runs as numbers: "frame 9" before "frame 10". */
+const collator = new Intl.Collator("en", { numeric: true });
+/**
+* Whether a column's header sorts the table: `sortable` if given, otherwise whether the column
+* says how to order (`sortValue` or `compare`).
+*/
+function isSortable(column) {
+	return column.sortable ?? (column.sortValue !== void 0 || column.compare !== void 0);
+}
+/** The sort after a click on `column`'s header: its first direction, then the other, then none. */
+function nextSort(current, column) {
+	const first = column.firstSort ?? "ascending";
+	if (current?.key !== column.key) return {
+		key: column.key,
+		direction: first
+	};
+	if (current.direction !== first) return null;
+	return {
+		key: column.key,
+		direction: first === "ascending" ? "descending" : "ascending"
+	};
+}
+/** A value with no place in the order: `null`, `undefined` or `NaN`. */
+function missing(value) {
+	return value === null || value === void 0 || Number.isNaN(value);
+}
+/**
+* Two present values in ascending order: numbers by value (compared, not subtracted, so two
+* infinities tie), strings by the collator, and every number before every string.
+*/
+function compareValues(a, b) {
+	if (typeof a === "number" && typeof b === "number") return a < b ? -1 : a > b ? 1 : 0;
+	if (typeof a === "string" && typeof b === "string") return collator.compare(a, b);
+	return typeof a === "number" ? -1 : 1;
+}
+/**
+* The display order of `rows` under `sort`, as indices into `rows`. `Table` renders through it
+* so each row keeps its original index for the row callbacks.
+*/
+function sortOrder(rows, columns, sort) {
+	const order = rows.map((_, index) => index);
+	if (!sort) return order;
+	const column = columns.find((candidate) => candidate.key === sort.key);
+	if (!column || !isSortable(column)) return order;
+	const sign = sort.direction === "descending" ? -1 : 1;
+	const { compare, sortValue } = column;
+	if (compare) return order.sort((a, b) => sign * compare(rows[a], rows[b]) || a - b);
+	if (!sortValue) return order;
+	const values = rows.map((row) => sortValue(row));
+	return order.sort((a, b) => {
+		const left = values[a];
+		const right = values[b];
+		const leftMissing = missing(left);
+		const rightMissing = missing(right);
+		if (leftMissing || rightMissing) return leftMissing === rightMissing ? a - b : leftMissing ? 1 : -1;
+		return sign * compareValues(left, right) || a - b;
+	});
+}
+/**
+* The rows in the order a `Table` with these columns shows them under `sort`.
+*
+* The sort is stable in both directions: rows that compare equal keep their order in `rows`.
+* With the column's `compare`, that function decides (reversed for `"descending"`). With its
+* `sortValue`, numbers compare by value and strings by a fixed English collation that reads
+* digit runs as numbers ("frame 9" before "frame 10"), the same on a server as in any
+* browser; numbers come before strings; and `null`, `undefined` and `NaN` go last in both
+* directions. A `null` sort, a `key` that names no column, and a column that is not sortable or
+* has neither function leave the order as given.
+*
+* @param rows - The rows, in their own order. Not modified.
+* @param columns - The table's columns; only `key`, `sortable`, `sortValue` and `compare` are read.
+* @param sort - The column and direction, or `null` for the rows' own order.
+* @returns A new array of the same rows, sorted.
+*/
+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,
+	descending: ArrowDown,
+	none: ArrowUpDown
+};
 /**
 * A table of rows, with numeric columns set in mono and right-aligned.
 *
 * With `onRowClick` the rows are keyboard-reachable (Tab, then Enter or Space) while keeping
 * their table semantics. The active row carries `aria-current` and `data-state="active"`;
 * padding follows the density in force. With no rows it renders the `empty` message instead.
+*
+* A column with a `sortValue` or a `compare` gets a header button: each click moves its sort
+* from the column's `firstSort` direction to the other one, then back to the rows' own order.
+* The sorted header carries `aria-sort` and `data-sort` (`"ascending"` or `"descending"`);
+* other sortable headers carry `data-sort="none"`. The sort is kept by the table (from
+* `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 `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 }) {
+function Table({ columns, rows, rowKey, empty = "Nothing here.", caption, className, onRowClick, isRowActive, onRowHover, sort: controlledSort, defaultSort = null, onSortChange, manualSort = false, windowed }) {
 	const density = useDensity();
+	const [ownSort, setOwnSort] = useState(defaultSort);
+	const controlled = controlledSort !== void 0;
+	const sort = controlled ? controlledSort : ownSort;
+	const order = useMemo(() => manualSort ? rows.map((_, index) => index) : sortOrder(rows, columns, sort), [
+		rows,
+		columns,
+		sort,
+		manualSort
+	]);
+	const changeSort = (column) => {
+		const next = nextSort(sort, column);
+		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;
+	useLayoutEffect(() => {
+		const scroller = scrollRef.current;
+		if (!isWindowed || !scroller || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const next = {
+				viewport: scroller.clientHeight,
+				header: headRef.current?.offsetHeight ?? 0
+			};
+			setMeasured((last) => last?.viewport === next.viewport && last.header === next.header ? last : next);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(scroller);
+		return () => observer.disconnect();
+	}, [isWindowed]);
+	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; `true` when the key was one. */
+	const moveFocus = (key, position) => {
+		const page = windowed ? Math.floor((viewportHeight - headerHeight) / rowHeight) : 10;
+		const target = navigate(key, position, order.length, page);
+		if (target === null) return false;
+		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 && !windowed) {
+			pendingFocus.current = null;
+			row.focus();
+		}
+		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) => /* @__PURE__ */ jsx("th", {
-						scope: "col",
-						style: column.width ? { width: column.width } : void 0,
-						className: cn("font-medium text-fg-muted", byDensity(density, "pb-2 pr-3 text-xs", "pb-1 pr-2 text-[10px]"), column.numeric && "text-right"),
-						children: column.header
-					}, column.key))
-				}) }),
-				/* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx("tr", {
-					"data-state": isRowActive?.(row, index) ? "active" : void 0,
-					className: cn("border-b border-line/60 last:border-0", onRowClick && "cursor-pointer hover:bg-raised", isRowActive?.(row, index) && "bg-signal/10"),
-					tabIndex: onRowClick ? 0 : void 0,
-					"aria-current": isRowActive?.(row, index) ? 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__ */ 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__ */ 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.key, 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").
@@ -2199,6 +2754,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, toast, toneColor, useControlHeight, useDensity };
+export { Badge, 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, 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