@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/table/table.js

@@ -3,9 +3,9 @@ import { cn, cnAll } from "../lib/cn.js";
 import { Button as Button$1 } from "../button/button.js";
 import { Select as Select$1, SelectItem } from "../select/select.js";
 import { cva } from "class-variance-authority";
-import { forwardRef, useMemo, useState } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
 import { Cell, Column, Row, Table, TableBody, TableFooter, TableHeader } from "react-aria-components";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/table/table.tsx
 /**
 * Table, ported from the legacy shadcn table onto React Aria's Table.
@@ -58,8 +58,27 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * overflow-hidden is load-bearing: the header fill runs to the table's edge and
 * would square off the rounded corners without it.
+*
+* THE EDGE SHADOWS. A table wider than its card scrolls inside it, and on a
+* trackpad the scrollbar only shows while scrolling, so a cut-off column looks
+* like the table's last one. The card carries `data-overflow-start` and
+* `data-overflow-end` while columns are hidden on that side (the Table sets
+* them from its scroll position), and each draws a shadow on that edge: the
+* text colour fading to nothing at 15%, so it follows the theme. With a sticky
+* first column the start is never hidden behind the card's edge, so the start
+* shadow stays off and the sticky column's own divider does that job.
 */
-const tableCardVariants = cva(["w-full box-border overflow-hidden"], {
+const tableCardVariants = cva([
+	"w-full box-border overflow-hidden relative isolate",
+	"before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:z-2 before:w-6",
+	"before:bg-linear-to-r rtl:before:bg-linear-to-l before:from-foreground before:to-transparent",
+	"before:opacity-0 motion-safe:before:transition-opacity",
+	"data-[overflow-start]:not-data-[sticky-first]:before:opacity-15",
+	"after:pointer-events-none after:absolute after:inset-y-0 after:end-0 after:z-2 after:w-6",
+	"after:bg-linear-to-l rtl:after:bg-linear-to-r after:from-foreground after:to-transparent",
+	"after:opacity-0 motion-safe:after:transition-opacity",
+	"data-[overflow-end]:after:opacity-15"
+], {
 	variants: { frame: {
 		card: "rounded-md border-(length:--border-width) border-separator bg-background",
 		none: ""
@@ -149,7 +168,7 @@ const tableColumnVariants = cva([
 	}
 });
 const tableRowVariants = cva([
-	"box-border",
+	"group/row box-border",
 	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
 	"hover:bg-muted data-[hovered]:bg-muted data-[focused]:bg-muted",
 	"data-[highlighted]:bg-primary-subtle",
@@ -192,6 +211,78 @@ const tableCellVariants = cva([
 	}
 });
 /**
+* The first cell of every row, held in place while the rest scroll under it
+* (`stickyFirstColumn`).
+*
+* A sticky cell is opaque -- otherwise the scrolled cells show through it -- so
+* it repaints whatever fill its row has: the row's hover, focus and highlight
+* through `group/row`, the stripe when striped. A divider on its trailing edge
+* marks where the frozen column ends.
+*/
+const tableStickyCellVariants = cva(["sticky start-0 z-1", "border-e-(length:--border-width) border-e-separator"], {
+	variants: {
+		part: {
+			header: "bg-header-fill",
+			bare: "bg-background",
+			body: [
+				"bg-background",
+				"group-hover/row:bg-muted group-data-[hovered]/row:bg-muted group-data-[focused]/row:bg-muted",
+				"group-data-[highlighted]/row:bg-primary-subtle"
+			]
+		},
+		striped: {
+			true: "",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		part: "body",
+		striped: true,
+		class: "group-even/row:bg-row-stripe"
+	}],
+	defaultVariants: {
+		part: "body",
+		striped: false
+	}
+});
+/**
+* Which sides of a scroll container hide content right now.
+*
+* Read from the container on scroll and whenever it or the table resizes, so
+* a window resize or rows arriving later update it too. scrollLeft runs
+* negative in a right-to-left layout; the distance travelled is what counts.
+*/
+function useScrollEdges(scroller) {
+	const [edges, setEdges] = useState({
+		start: false,
+		end: false
+	});
+	useEffect(() => {
+		const el = scroller.current;
+		if (!el) return;
+		const update = () => {
+			const hidden = el.scrollWidth - el.clientWidth;
+			const travelled = Math.abs(el.scrollLeft);
+			const start = hidden > 1 && travelled > 1;
+			const end = hidden > 1 && travelled < hidden - 1;
+			setEdges((prev) => prev.start === start && prev.end === end ? prev : {
+				start,
+				end
+			});
+		};
+		update();
+		el.addEventListener("scroll", update, { passive: true });
+		const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+		resize?.observe(el);
+		if (el.firstElementChild) resize?.observe(el.firstElementChild);
+		return () => {
+			el.removeEventListener("scroll", update);
+			resize?.disconnect();
+		};
+	}, [scroller]);
+	return edges;
+}
+/**
 * Both glyphs are aria-hidden and neither is focusable.
 *
 * The chevron says "this row does something"; the ROW is what React Aria makes
@@ -269,7 +360,7 @@ function SortCaretGlyph({ direction }) {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		className: "size-(--icon-sm) ms-1 inline-block align-middle",
-		children: direction === "none" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m4 7 4-4 4 4" }), /* @__PURE__ */ jsx("path", { d: "m4 9 4 4 4-4" })] }) : /* @__PURE__ */ jsx("path", { d: direction === "ascending" ? "m4 10 4-4 4 4" : "m4 6 4 4 4-4" })
+		children: direction === "none" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("path", { d: "m4 7 4-4 4 4" }), /* @__PURE__ */ jsx("path", { d: "m4 9 4 4 4-4" })] }) : /* @__PURE__ */ jsx("path", { d: direction === "ascending" ? "m4 10 4-4 4 4" : "m4 6 4 4 4-4" })
 	});
 }
 /** Builds columns that keep each column's own value type. */
@@ -317,7 +408,7 @@ function compareKeys(a, b) {
 	if (typeof a === "number" && typeof b === "number") return a - b;
 	return String(a).localeCompare(String(b));
 }
-const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, frame, headerType, headerFill, striped, totalRow, empty, minWidth, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }, ref) {
+const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant, sortDescriptor, defaultSortDescriptor, onSortChange, onRowAction, isRowHighlighted, rowClassName, frame, headerType, headerFill, striped, totalRow, empty, minWidth, stickyFirstColumn, pageSize, pageSizeOptions, onPageSizeChange, pageLabels, className, ...props }, ref) {
 	const isControlled = sortDescriptor !== void 0;
 	const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);
 	const activeSort = isControlled ? sortDescriptor : uncontrolledSort;
@@ -352,10 +443,20 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 	const tableStyle = {};
 	if (minWidth !== void 0) tableStyle.minWidth = minWidth;
 	if (hasWidths) tableStyle.tableLayout = "fixed";
+	const scrollRef = useRef(null);
+	const edges = useScrollEdges(scrollRef);
+	const stickyCell = (part) => tableStickyCellVariants({
+		part,
+		striped: part === "body" && !!striped
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "table-card",
+		"data-overflow-start": edges.start || void 0,
+		"data-overflow-end": edges.end || void 0,
+		"data-sticky-first": stickyFirstColumn || void 0,
 		className: cnAll(tableCardVariants({ frame })),
 		children: [/* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
 			"data-slot": "table-scroll",
 			className: cnAll(tableScrollVariants()),
 			children: /* @__PURE__ */ jsxs(Table, {
@@ -386,7 +487,7 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 							className: cnAll(tableColumnVariants({
 								align: column.align ?? (column.numeric ? "end" : void 0),
 								headerType
-							})),
+							}), stickyFirstColumn && column === columns[0] && stickyCell(headerFill === "none" ? "bare" : "header")),
 							style: column.width === void 0 ? void 0 : { width: column.width },
 							children: [column.header, column.sortable ? /* @__PURE__ */ jsx(SortCaretGlyph, { direction: activeSort?.column === column.id ? activeSort.direction : "none" }) : null]
 						}, column.id)), onRowAction ? /* @__PURE__ */ jsx(Column, {
@@ -414,7 +515,7 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 									className: cnAll(tableCellVariants({
 										align: column.align ?? (column.numeric ? "end" : void 0),
 										numeric: column.numeric
-									})),
+									}), stickyFirstColumn && column === columns[0] && stickyCell("body")),
 									children: column.cell ? column.cell({
 										value,
 										row,
@@ -438,7 +539,7 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 								className: cnAll(tableCellVariants({
 									align: col.align ?? (col.numeric ? "end" : void 0),
 									numeric: col.numeric
-								})),
+								}), stickyFirstColumn && col === columns[0] && stickyCell("bare")),
 								children: totalRow(col)
 							}, col.id)), onRowAction ? /* @__PURE__ */ jsx(Cell, {
 								"data-slot": "table-cell",
@@ -456,7 +557,7 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-slot": "table-pagination-pages",
 				className: "flex items-center gap-1",
-				children: pageCount <= 1 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: pageCount <= 1 ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Button$1, {
 						variant: "ghost",
 						size: "sm",
@@ -509,6 +610,6 @@ const Table$1 = forwardRef(function Table$2({ data, columns, getRowId, variant,
 	});
 });
 //#endregion
-export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableVariants };
+export { Table$1 as Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableStickyCellVariants, tableVariants };
 
 //# sourceMappingURL=table.js.map

package/dist/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["Table","AriaTable","AriaTableHeader","AriaColumn","AriaTableBody","AriaRow","AriaCell","AriaTableFooter","Button","Select"],"sources":["../../src/table/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useMemo,\n  useState,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\nimport {\n  Cell as AriaCell,\n  Column as AriaColumn,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableBody as AriaTableBody,\n  TableFooter as AriaTableFooter,\n  TableHeader as AriaTableHeader,\n  type SortDescriptor,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * Table, ported from the legacy shadcn table onto React Aria's Table.\n *\n * The legacy component in the product app rendered NOTHING -- its body was\n * `return <>{children(renderProps)}</>` -- so all six of its consumers\n * hand-built `<table>`, `tableLayout: fixed`, a `<colgroup>` and a min-width,\n * and its config object was opt-OUT, so they wrote paragraphs of\n * `enabled: false`. Six consumers produced six different tables. This one\n * renders from `data` + `columns` + `getRowId`; everything else is opt-in.\n *\n * WIDTHS ARE CSS, and that is not a stylistic choice. React Aria's own `width`\n * on a `<Column>` is ignored outside a `ResizableTableContainer`, and its\n * dev-warning is dead code in 1.21.1 -- `for (let prop in ['width', ...])`\n * iterates the INDICES, so the guard tests `'0' in props` and never fires. A\n * width handed to React Aria disappears with no error and no console output:\n * `width={120}` measured 42.675px in a browser. So `Column.width` is emitted\n * as a style on the header cell, and any width puts the table into\n * `table-layout: fixed` -- without which a declared width is only a hint.\n *\n * THE ROW HIGHLIGHT IS PAINTED FROM `:hover` AS WELL AS `data-[hovered]`, and\n * that is a departure from the rule that state comes from React Aria data\n * attributes rather than bare pseudo-classes. React Aria stamps `data-hovered`\n * on a row ONLY when the row is interactive -- `onRowAction` or a selection\n * mode -- exactly as it gates `Column` hover on `allowsSorting`. Four of the\n * six legacy consumers are read-only tables that painted a hover fill, so\n * `data-[hovered]` alone would drop their pointer affordance in silence. The\n * rule exists because `:focus` fires on click where `data-[focus-visible]`\n * does not; `:hover` has no such twin, and on an interactive row the two\n * selectors match the same element with the same colour. The keyboard needs no\n * workaround: `data-focused` IS emitted on read-only rows.\n *\n * `leading-*` sits on the table rather than on the cell. tailwind-merge treats\n * a later `text-*` as owning line-height and silently strips a `leading-*`\n * that precedes it, and the cells carry `text-start`/`text-center`/`text-end`.\n * Line-height inherits, so putting it one level up removes the hazard instead\n * of policing it.\n */\n\n/**\n * The card. Every table in the product sits in one.\n *\n * The edge uses `separator`, NOT `border`, and that reverses what an earlier\n * revision of this file claimed. Measured against the running product, its card\n * is `border border-border` resolving to #e6e6e6 -- the same hairline as the row\n * dividers. The earlier argument was that the card edge is where WCAG 1.4.11\n * lands; on reflection it does not. 1.4.11 covers what is needed to identify\n * user interface COMPONENTS and their states, and a static table is not one:\n * the interactive parts inside it -- sortable headers, pagination buttons --\n * carry their own focus indicators and borders, which are still held to 3:1.\n *\n * overflow-hidden is load-bearing: the header fill runs to the table's edge and\n * would square off the rounded corners without it.\n */\nexport const tableCardVariants = cva([\"w-full box-border overflow-hidden\"], {\n  variants: {\n    frame: {\n      card: \"rounded-md border-(length:--border-width) border-separator bg-background\",\n      /*\n       * No frame. Eleven of the product's tables either sit inside a card\n       * already -- gaining a second nested border and radius from an\n       * unconditional one -- or are deliberately bare on the page.\n       */\n      none: \"\",\n    },\n  },\n  defaultVariants: { frame: \"card\" },\n});\n\n/**\n * An absent value is an em-dash, not the word \"null\".\n *\n * The default renderer was `String(value)`, which paints the literal text\n * `null` into the cell -- a defect rather than a gap, and six of the product's\n * tables print a dash there. Zero and empty string are values and are left\n * alone; only null and undefined are absent.\n */\nfunction renderValue<T>(column: Column<T, unknown>, value: unknown, row: T): ReactNode {\n  if (value === null || value === undefined) return \"—\";\n\n  const formatted = column.format?.(value, row);\n  if (formatted !== undefined) return formatted;\n\n  /*\n   * Only primitives have a sensible default rendering. String(someObject) is\n   * \"[object Object]\", which is the same class of silent nonsense as the\n   * literal \"null\" this function exists to stop -- so an object-valued column\n   * renders nothing until it is given `format` or `cell`, which is loud enough\n   * to notice and quiet enough not to lie.\n   */\n  if (typeof value === \"string\" || typeof value === \"number\") return value;\n  if (typeof value === \"boolean\") return String(value);\n  return null;\n}\n\n/** Reserved id for the chevron column, so it cannot collide with a real one. */\nconst CHEVRON_COLUMN_ID = \"__table_row_action\";\n\n/*\n * The chevron column is sized to its glyph, not to a share of the table.\n * Given a percentage AND the usual --density-row-pad-x on both sides it pushed\n * the total past 100% under table-layout: fixed, and a table that fits grew a\n * horizontal scrollbar. w-10 is the spacing scale rather than a bracket value,\n * which check:hardcoding would reject.\n */\nconst CHEVRON_CELL = \"w-10 px-0 text-center\";\n\n/** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */\nexport const tableScrollVariants = cva([\"w-full overflow-x-auto box-border\"]);\n\nexport const tableVariants = cva([\n  \"w-full border-collapse box-border\",\n  // font-sans and the explicit colours are not boilerplate: the reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none and an unstyled\n  // table would inherit the host's serif on a transparent ground.\n  \"font-sans text-base leading-(--leading-normal)\",\n  \"bg-background text-foreground\",\n]);\n\n/**\n * The header is near-white, not a grey band.\n *\n * The product fills it with its `--neutral-200`, #fffcfc: white carrying three\n * counts of warmth in green and blue. An earlier revision of this file called\n * that \"not worth a token of its own\" and used `background`, which made the\n * header exactly the colour of the rows -- so the band vanished and the only\n * thing separating the header was the divider under it. The difference is\n * small on purpose; absent is not the same as small. It is `--color-header-fill`\n * now, and it inverts properly in dark rather than being pinned to white.\n */\nexport const tableHeaderVariants = cva([\"text-muted-foreground\"], {\n  variants: { headerFill: { subtle: \"bg-header-fill\", none: \"bg-transparent\" } },\n  defaultVariants: { headerFill: \"subtle\" },\n});\n\n/** The pagination bar. A sibling of the table, never a row inside it. */\nexport const tablePaginationVariants = cva([\n  \"flex items-center justify-between gap-(--density-control-gap) box-border\",\n  \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\n/** The footer band. Heavier than a row rule, because it closes the table. */\nexport const tableFooterVariants = cva([\n  \"bg-background font-semibold text-foreground\",\n  \"border-t-(length:--border-width) border-t-border\",\n]);\n\n/** Shared focus treatment. Authored once; both the column header and the row take it. */\nconst FOCUS_RING = [\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none, and the width utility resolves its style from that same variable, so\n  // a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n];\n\nexport const tableColumnVariants = cva(\n  [\n    \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n    \"box-border align-middle text-sm font-semibold select-none\",\n    ...FOCUS_RING,\n    // The whole cell is the hit target, not just the label. At compact density\n    // --density-row-pad-y is 7px, so a control wrapping only its text lands\n    // under the 24x24 floor of WCAG 2.2 target size (2.5.8) -- which the story\n    // harness enables explicitly on top of axe's defaults.\n    \"data-[allows-sorting]:cursor-pointer\",\n  ],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /*\n       * Eleven tables -- a plurality of the app -- label columns in uppercase\n       * with tracking, and not one was reachable: the label was hardcoded\n       * `text-sm font-semibold`, and `className` lands on the <table>.\n       */\n      headerType: {\n        sentence: \"text-sm leading-none\",\n        caps: \"text-xs uppercase tracking-wide leading-none\",\n      },\n    },\n    defaultVariants: { align: \"start\", headerType: \"sentence\" },\n  },\n);\n\nexport const tableRowVariants = cva(\n  [\n    \"box-border\",\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n    // See the header comment: :hover is what covers a read-only row.\n    \"hover:bg-muted data-[hovered]:bg-muted data-[focused]:bg-muted\",\n    // After the state fills, so the marked row keeps its identity while hovered.\n    \"data-[highlighted]:bg-primary-subtle\",\n    ...FOCUS_RING,\n  ],\n  {\n    variants: {\n      /*\n       * `grid` is gone. Across 25 real tables in the product not one drew\n       * vertical rules between cells -- a variant nobody asked for, shipped\n       * while the caps header eleven tables need was unreachable.\n       */\n      variant: {\n        lined: \"border-t-(length:--border-width) border-t-separator\",\n        plain: \"\",\n      },\n      /* rowClassName could not fake this: it gets the row but not its index. */\n      striped: { true: \"[&:nth-child(even)]:bg-row-stripe\", false: \"\" },\n    },\n    defaultVariants: { variant: \"lined\", striped: false },\n  },\n);\n\nexport const tableCellVariants = cva(\n  [\"px-(--density-row-pad-x) py-(--density-row-pad-y)\", \"box-border align-middle\", ...FOCUS_RING],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /* Ten tables set tabular figures -- the app's most consistent convention. */\n      numeric: { true: \"tabular-nums\", false: \"\" },\n    },\n    defaultVariants: { align: \"start\", numeric: false },\n  },\n);\n\n/**\n * Identity for a row.\n *\n * Declared here rather than imported: React's own `Key` includes `bigint`,\n * which React Aria's collections do not accept, and importing React Aria's\n * would leak its types through the public API for no gain. This IS the set\n * React Aria takes.\n */\nexport type RowKey = string | number;\n\n/**\n * Both glyphs are aria-hidden and neither is focusable.\n *\n * The chevron says \"this row does something\"; the ROW is what React Aria makes\n * pressable and announces, so a second target would be a keyboard trap for no\n * gain. The caret says which way a column is sorted -- `aria-sort` already\n * tells assistive tech, but without a glyph the direction is carried by tint\n * alone, which is WCAG 1.4.1 use-of-colour.\n *\n * Drawn inline rather than taken as props: this package ships no icon set, and\n * Checkbox and Select already inline their single glyphs this way.\n */\n/**\n * Which page numbers to show, with gaps collapsed to an ellipsis.\n *\n * One sibling either side of the current page, plus the first and last, which\n * is what the product's own pager renders at its call sites: page 1 of 18 gives\n * `1 2 ... 18`. It is not a prop, because no consumer has asked for a second\n * width and a number nobody tunes is a number better inlined.\n */\nfunction pageWindow(current: number, total: number): (number | \"ellipsis\")[] {\n  const pages: (number | \"ellipsis\")[] = [];\n  const start = Math.max(1, current - 1);\n  const end = Math.min(total, current + 1);\n\n  if (start > 1) {\n    pages.push(1);\n    if (start > 2) pages.push(\"ellipsis\");\n  }\n  for (let page = start; page <= end; page++) pages.push(page);\n  if (end < total) {\n    if (end < total - 1) pages.push(\"ellipsis\");\n    pages.push(total);\n  }\n  return pages;\n}\n\nfunction PageChevronGlyph({ direction }: { direction: \"previous\" | \"next\" }) {\n  return (\n    <svg\n      data-slot=\"table-pagination-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d={direction === \"next\" ? \"m6 3 5 5-5 5\" : \"m10 3-5 5 5 5\"} />\n    </svg>\n  );\n}\n\nfunction RowChevronGlyph() {\n  return (\n    <svg\n      data-slot=\"table-row-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) text-muted-foreground\"\n    >\n      {/* Logical, so it mirrors in RTL with the rest of the table. */}\n      <path d=\"m6 3 5 5-5 5\" className=\"rtl:-scale-x-100\" />\n    </svg>\n  );\n}\n\nfunction SortCaretGlyph({ direction }: { direction: \"ascending\" | \"descending\" | \"none\" }) {\n  return (\n    <svg\n      data-slot=\"table-sort-caret\"\n      data-direction={direction}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) ms-1 inline-block align-middle\"\n    >\n      {direction === \"none\" ? (\n        <>\n          <path d=\"m4 7 4-4 4 4\" />\n          <path d=\"m4 9 4 4 4-4\" />\n        </>\n      ) : (\n        <path d={direction === \"ascending\" ? \"m4 10 4-4 4 4\" : \"m4 6 4 4 4-4\"} />\n      )}\n    </svg>\n  );\n}\n\n/** One column of a `Table`. */\nexport type Column<T, V = unknown> = {\n  /** Stable key. Becomes the column's id and the sort descriptor's `column`. */\n  id: string;\n  /** Header content. */\n  header: ReactNode;\n  /** Pulls this column's value out of a row. */\n  accessor: (row: T) => V;\n  /**\n   * Renders the cell. Defaults to `format?.(value, row) ?? String(value)`.\n   *\n   * Method syntax, not an arrow property, and that is load-bearing. A table\n   * holds columns of DIFFERENT value types in one array, so the array element\n   * has to be `Column<T, unknown>` -- and under `strictFunctionTypes` an arrow\n   * property is contravariant in its parameters, which would make\n   * `Column<T, string>` unassignable to it. Method members are checked\n   * bivariantly, which is precisely the semantics a heterogeneous collection\n   * needs. The alternative is `Column<T, any>`, and this package has no\n   * eslint-disable in it anywhere.\n   */\n  cell?(ctx: { value: V; row: T; index: number }): ReactNode;\n  /**\n   * Value to string. Deliberately separate from `cell`: this is what CSV\n   * export and sort comparators consume, and a ReactNode is no use to either.\n   */\n  format?(value: V, row: T): string;\n  /**\n   * Logical alignment, applied to BOTH the column header and its cells --\n   * React Aria keeps no link between the two, so the component owns it.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Column width. Any width on any column puts the table into\n   * `table-layout: fixed`.\n   *\n   * Emitted as CSS, NEVER forwarded to React Aria's own `width` prop. React\n   * Aria ignores that one outside a `ResizableTableContainer`, and its\n   * dev-warning is dead code in 1.21.1 (`for...in` over an array literal, so\n   * the guard tests `'0' in props`). A width handed to it disappears with no\n   * error and no console output.\n   */\n  width?: number | `${number}%`;\n  /**\n   * A column of figures: tabular numerals, end-aligned unless `align` says\n   * otherwise. Ten of the product's tables set tabular figures -- the most\n   * consistently applied convention in the app. Without it, proportional\n   * digits leave a column of numbers ragged.\n   */\n  numeric?: boolean;\n  /** Opts this column into sorting. Off by default. */\n  sortable?: boolean;\n};\n\nexport interface TableProps<T> extends VariantProps<typeof tableRowVariants> {\n  /** The rows to render. */\n  data: readonly T[];\n  /** The columns, in display order. */\n  columns: readonly Column<T, unknown>[];\n  /** Stable identity for a row. Used as its key and to resolve `onRowAction`. */\n  getRowId: (row: T) => RowKey;\n  /**\n   * Required. React Aria's Table renders no `<caption>`, so this is the\n   * accessible name and there is no other source for it.\n   */\n  \"aria-label\": string;\n  /**\n   * The sorted column and direction, CONTROLLED.\n   *\n   * Pass this and the table stops sorting: you own the row order, which is\n   * what server-side sorting needs. Leave it off and the table sorts `data`\n   * itself from `defaultSortDescriptor` and header clicks.\n   */\n  sortDescriptor?: SortDescriptor;\n  /** The initial sort when uncontrolled. */\n  defaultSortDescriptor?: SortDescriptor;\n  /** Fires when a sortable column header is activated, controlled or not. */\n  onSortChange?: (descriptor: SortDescriptor) => void;\n  /**\n   * Fires on click or Enter. Receives the ROW, where React Aria's own handler\n   * receives a key -- every legacy consumer looked the row up again anyway.\n   *\n   * Setting it also makes rows interactive, which is what switches React\n   * Aria's `data-hovered` on.\n   */\n  onRowAction?: (row: T) => void;\n  /**\n   * Marks a row as the viewer's own -- the product tints \"Alfred AI (You)\".\n   *\n   * The tint is not the message. A fill alone is WCAG 1.4.1 use-of-colour, so\n   * the highlighted row is expected to say so in its own content, the way the\n   * product's does. This tints and sets `data-highlighted`; it does not invent\n   * meaning the row does not already carry.\n   */\n  isRowHighlighted?: (row: T) => boolean;\n  /** Extra classes per row, for styling that depends on row DATA. */\n  rowClassName?: (row: T) => string;\n  /**\n   * Rendered in place of the rows when `data` is empty.\n   *\n   * There is no default string on purpose: user-visible copy belongs in\n   * `useMessages()`, a mechanism this package does not have yet, and it is the\n   * one rule ARCHITECTURE says cannot be retrofitted.\n   */\n  empty?: ReactNode;\n  /** Minimum table width in px. Below it the wrapper scrolls horizontally. */\n  minWidth?: number;\n  /**\n   * Rows per page. Omit it and every row renders with no pagination UI.\n   *\n   * The table holds the page itself and slices AFTER sorting, so a sort\n   * reorders the whole set rather than shuffling the current page, and lands\n   * you back on page 1.\n   *\n   * With `pageSizeOptions` this is the STARTING size and the table owns it\n   * from then on; a later change to the prop does not move a reader who has\n   * chosen their own. Without them it is simply the size.\n   */\n  pageSize?: number;\n  /**\n   * Rows-per-page choices. Given them, the bar grows a select on its trailing\n   * side, which is the arrangement every paged table in the product uses:\n   * page numbers leading, rows-per-page trailing.\n   */\n  pageSizeOptions?: readonly number[];\n  /** Notified after the reader picks a new size. The table has already applied it. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /**\n   * Copy for the pagination controls.\n   *\n   * These carry English defaults, which is a known debt: ARCHITECTURE section\n   * 7 rule 9 routes user-visible copy through a `useMessages()` hook that does\n   * not exist in this package yet. They are props so a consumer is not stuck\n   * waiting for it, and so the eventual mechanism has somewhere to land. The\n   * navigation landmark takes its name from `aria-label` instead, which avoids\n   * inventing a fourth string.\n   */\n  pageLabels?: {\n    previous?: string;\n    next?: string;\n    /**\n     * Accessible name for a page button.\n     *\n     * `isCurrent` exists because `aria-current` cannot reach the button.\n     * React Aria's Button runs its props through `filterDOMProps`, whose\n     * allowlist covers `id` and the labelling attributes and nothing else, so\n     * an `aria-current` handed to it is dropped with no error -- the same\n     * class of silent loss as `Column.width`. The current page therefore says\n     * so in its name, which every screen reader announces.\n     */\n    page?: (page: number, isCurrent: boolean) => string;\n    /** Option text in the rows-per-page select. */\n    perPage?: (pageSize: number) => string;\n    /** Accessible name for the rows-per-page select itself. */\n    rowsPerPage?: string;\n  };\n  /**\n   * Whether the table draws its own card. `none` for one that already sits\n   * inside a card, or is meant to be bare on the page.\n   */\n  frame?: \"card\" | \"none\";\n  /** Column label treatment: sentence case, or uppercase with tracking. */\n  headerType?: \"sentence\" | \"caps\";\n  /** Header background. `none` for report tables that carry no band. */\n  headerFill?: \"subtle\" | \"none\";\n  /** Zebra-stripe alternate rows. */\n  striped?: boolean;\n  /**\n   * A footer row, in a real `<tfoot>`.\n   *\n   * Called once per column; return the cell content, or null for a blank. A\n   * real footer rather than one more row of data, so it is announced as one.\n   */\n  totalRow?: (column: Column<T, unknown>) => ReactNode;\n  /** Extra classes for the table. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Builds columns that keep each column's own value type. */\nexport function createColumns<T>() {\n  return {\n    column: <V,>(definition: Column<T, V>): Column<T, V> => definition,\n  };\n}\n\n/**\n * A data table.\n *\n * Maturity: **beta**. Selection, row expansion, filtering, grouping, the total\n * row and pagination are deliberately absent -- each had one consumer or none\n * across the six legacy tables, and the stateful ones belong to DataGrid.\n *\n * @example\n * const { column } = createColumns<Channel>();\n * const columns = useMemo(() => [\n *   column({ id: \"name\", header: \"Channel\", accessor: (r) => r.name }),\n *   column({ id: \"cost\", header: \"Cost\", accessor: (r) => r.cost,\n *            format: (v) => currency(v), align: \"end\", sortable: true }),\n * ], []);\n *\n * <Table aria-label=\"Channels\" data={rows} columns={columns} getRowId={(r) => r.id} />\n */\n/**\n * The orderable value behind a cell.\n *\n * Objects are NOT stringified. `String(someObject)` is \"[object Object]\", so a\n * column of objects would sort every row equal while looking like it worked --\n * and a column's own `format` already exists to turn its value into a string,\n * so that is what gets used instead of a blind cast.\n *\n * Numbers stay numbers even when the column formats them: sorting \"$1,220\"\n * against \"$12,480\" lexically puts the larger first.\n */\nfunction sortKey<T>(column: Column<T, unknown>, row: T): string | number {\n  const value = column.accessor(row);\n  if (typeof value === \"number\" || typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? 1 : 0;\n  if (value instanceof Date) return value.getTime();\n  if (value == null) return \"\";\n  return column.format?.(value, row) ?? \"\";\n}\n\n/** Orders two cell keys. Numbers numerically, strings by locale. */\nfunction compareKeys(a: string | number, b: string | number): number {\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  // localeCompare so \"Item 10\" sorts after \"Item 9\", not before it.\n  return String(a).localeCompare(String(b));\n}\n\nexport const Table = forwardRef(function Table<T>(\n  {\n    data,\n    columns,\n    getRowId,\n    variant,\n    sortDescriptor,\n    defaultSortDescriptor,\n    onSortChange,\n    onRowAction,\n    isRowHighlighted,\n    rowClassName,\n    frame,\n    headerType,\n    headerFill,\n    striped,\n    totalRow,\n    empty,\n    minWidth,\n    pageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    pageLabels,\n    className,\n    ...props\n  }: TableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  /*\n   * Uncontrolled sorting is the component's job, not the call site's.\n   *\n   * React Aria holds no sort state and never reorders rows -- it reports the\n   * descriptor and stops. Leaving it there would mean `sortable: true` renders\n   * a header that highlights, announces itself via aria-sort, and sorts\n   * nothing until the consumer writes the state and the comparator by hand.\n   * That is a demo that only works in a story.\n   *\n   * So: uncontrolled, the table holds the descriptor and sorts `data`.\n   * Controlled (a `sortDescriptor` prop), it sorts nothing and the consumer\n   * owns the order, which is what server-side sorting requires.\n   */\n  const isControlled = sortDescriptor !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);\n  const activeSort = isControlled ? sortDescriptor : uncontrolledSort;\n\n  const rows = useMemo(() => {\n    if (isControlled || !activeSort) return data;\n    const sorted = columns.find((column) => column.id === activeSort.column);\n    if (!sorted) return data;\n\n    const direction = activeSort.direction === \"descending\" ? -1 : 1;\n    return [...data].sort(\n      (a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)),\n    );\n  }, [data, columns, activeSort, isControlled]);\n\n  /*\n   * Paging happens AFTER sorting, which is the whole reason it lives in the\n   * component. Slice first and a sort would only reshuffle the ten rows you\n   * can see, so \"sort by cost ascending\" would not find the cheapest row in\n   * the set -- the single most common way a hand-rolled table gets this wrong.\n   */\n  // A size the reader picked outranks the prop, and is held here rather than\n  // synced from it by an effect -- an effect would snap them back to the\n  // consumer's default on every unrelated re-render.\n  const [chosenSize, setChosenSize] = useState<number>();\n  const rowsPerPage = chosenSize ?? pageSize;\n\n  const pageCount = rowsPerPage ? Math.max(1, Math.ceil(rows.length / rowsPerPage)) : 1;\n  const [page, setPage] = useState(1);\n  // Clamped rather than reset by an effect, so a shrinking `data` cannot strand\n  // the view on a page that no longer exists.\n  const currentPage = Math.min(page, pageCount);\n  const pageStart = rowsPerPage ? (currentPage - 1) * rowsPerPage : 0;\n  const visibleRows = rowsPerPage ? rows.slice(pageStart, pageStart + rowsPerPage) : rows;\n\n  const labels = {\n    previous: pageLabels?.previous ?? \"Go to previous page\",\n    next: pageLabels?.next ?? \"Go to next page\",\n    page:\n      pageLabels?.page ??\n      ((target: number, isCurrent: boolean) =>\n        isCurrent ? `Page ${target}, current page` : `Go to page ${target}`),\n    perPage: pageLabels?.perPage ?? ((size: number) => `${size} per page`),\n    rowsPerPage: pageLabels?.rowsPerPage ?? \"Rows per page\",\n  };\n\n  const rowsByKey = new Map<RowKey, T>(data.map((row) => [getRowId(row), row]));\n  const hasWidths = columns.some((column) => column.width !== undefined);\n\n  const tableStyle: CSSProperties = {};\n  if (minWidth !== undefined) tableStyle.minWidth = minWidth;\n  // Declared widths only hold under a fixed layout; otherwise the browser\n  // treats them as hints and the columns drift, which is why 5 of the 6 legacy\n  // consumers set this by hand.\n  if (hasWidths) tableStyle.tableLayout = \"fixed\";\n\n  return (\n    <div data-slot=\"table-card\" className={cnAll(tableCardVariants({ frame }))}>\n      <div data-slot=\"table-scroll\" className={cnAll(tableScrollVariants())}>\n        <AriaTable\n          // The ref goes on the table itself, never on the table-card or\n          // table-scroll divs this component wraps it in -- callers need the\n          // real HTMLTableElement (to measure it, scroll it into view, etc.),\n          // not one of the two divs this component renders around it.\n          ref={ref}\n          {...props}\n          data-slot=\"table\"\n          className={cn(tableVariants(), className)}\n          style={tableStyle}\n          sortDescriptor={activeSort}\n          onSortChange={(descriptor) => {\n            if (!isControlled) setUncontrolledSort(descriptor);\n            // Back to the first page: the order changed under you, so staying on\n            // page 3 shows rows you did not ask to see.\n            setPage(1);\n            onSortChange?.(descriptor);\n          }}\n          onRowAction={\n            onRowAction\n              ? (key) => {\n                  const row = rowsByKey.get(key);\n                  if (row !== undefined) onRowAction(row);\n                }\n              : undefined\n          }\n        >\n          <AriaTableHeader\n            data-slot=\"table-header\"\n            className={cnAll(tableHeaderVariants({ headerFill }))}\n          >\n            {columns.map((column) => (\n              <AriaColumn\n                key={column.id}\n                id={column.id}\n                isRowHeader={column === columns[0]}\n                allowsSorting={column.sortable}\n                data-slot=\"table-column\"\n                className={cnAll(\n                  tableColumnVariants({\n                    align: column.align ?? (column.numeric ? \"end\" : undefined),\n                    headerType,\n                  }),\n                )}\n                style={column.width === undefined ? undefined : { width: column.width }}\n              >\n                {column.header}\n                {/*\n                 * A sortable column says so BEFORE it is sorted. Rendering the\n                 * caret only once sorted left a sortable header looking exactly\n                 * like a fixed one, so the only way to discover sorting was to\n                 * click a header and see whether anything moved -- the same gap\n                 * the product closed in its own header, and the reason the\n                 * paired chevron exists rather than an arrow.\n                 */}\n                {column.sortable ? (\n                  <SortCaretGlyph\n                    direction={activeSort?.column === column.id ? activeSort.direction : \"none\"}\n                  />\n                ) : null}\n              </AriaColumn>\n            ))}\n            {onRowAction ? (\n              /*\n               * The chevron's own column. Its header is intentionally EMPTY: a\n               * visually-hidden label would be user-visible copy, and section 7\n               * rule 9 has nowhere to put it until useMessages() exists.\n               */\n              <AriaColumn\n                id={CHEVRON_COLUMN_ID}\n                data-slot=\"table-column\"\n                className={cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL)}\n              >\n                {\"\"}\n              </AriaColumn>\n            ) : null}\n          </AriaTableHeader>\n          <AriaTableBody\n            data-slot=\"table-body\"\n            renderEmptyState={empty === undefined ? undefined : () => empty}\n          >\n            {visibleRows.map((row, index) => (\n              <AriaRow\n                key={String(getRowId(row))}\n                id={getRowId(row)}\n                data-slot=\"table-row\"\n                data-highlighted={isRowHighlighted?.(row) || undefined}\n                className={cn(\n                  cnAll(\n                    tableRowVariants({ variant, striped }),\n                    onRowAction && \"cursor-pointer\",\n                  ),\n                  rowClassName?.(row),\n                )}\n              >\n                {columns.map((column) => {\n                  const value: unknown = column.accessor(row);\n                  return (\n                    <AriaCell\n                      key={column.id}\n                      data-slot=\"table-cell\"\n                      className={cnAll(\n                        tableCellVariants({\n                          align: column.align ?? (column.numeric ? \"end\" : undefined),\n                          numeric: column.numeric,\n                        }),\n                      )}\n                    >\n                      {column.cell\n                        ? column.cell({ value, row, index })\n                        : renderValue(column, value, row)}\n                    </AriaCell>\n                  );\n                })}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    <RowChevronGlyph />\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            ))}\n          </AriaTableBody>\n          {totalRow ? (\n            <AriaTableFooter data-slot=\"table-footer\" className={cnAll(tableFooterVariants())}>\n              <AriaRow id=\"__table_total\">\n                {columns.map((col) => (\n                  <AriaCell\n                    key={col.id}\n                    data-slot=\"table-cell\"\n                    className={cnAll(\n                      tableCellVariants({\n                        align: col.align ?? (col.numeric ? \"end\" : undefined),\n                        numeric: col.numeric,\n                      }),\n                    )}\n                  >\n                    {totalRow(col)}\n                  </AriaCell>\n                ))}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    {\"\"}\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            </AriaTableFooter>\n          ) : null}\n        </AriaTable>\n      </div>\n      {rowsPerPage === undefined || (pageCount <= 1 && !pageSizeOptions) ? null : (\n        <nav\n          data-slot=\"table-pagination\"\n          aria-label={`${props[\"aria-label\"]} pagination`}\n          className={cnAll(tablePaginationVariants())}\n        >\n          {/* Present even when empty, so the select stays on the trailing edge. */}\n          <div data-slot=\"table-pagination-pages\" className=\"flex items-center gap-1\">\n            {pageCount <= 1 ? null : (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.previous}\n                  isDisabled={currentPage <= 1}\n                  onPress={() => setPage(currentPage - 1)}\n                >\n                  <PageChevronGlyph direction=\"previous\" />\n                </Button>\n                {pageWindow(currentPage, pageCount).map((entry, index) =>\n                  entry === \"ellipsis\" ? (\n                    <span\n                      // The gap is decoration; the pages either side of it are\n                      // what a reader navigates by, so this is not announced.\n                      key={`ellipsis-${String(index)}`}\n                      data-slot=\"table-pagination-ellipsis\"\n                      aria-hidden=\"true\"\n                      className=\"px-2 text-sm text-muted-foreground\"\n                    >\n                      &hellip;\n                    </span>\n                  ) : (\n                    <Button\n                      key={entry}\n                      variant={entry === currentPage ? \"primary\" : \"ghost\"}\n                      size=\"sm\"\n                      className=\"min-w-(--density-control-h-sm) px-2\"\n                      aria-label={labels.page(entry, entry === currentPage)}\n                      onPress={() => setPage(entry)}\n                    >\n                      {entry}\n                    </Button>\n                  ),\n                )}\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.next}\n                  isDisabled={currentPage >= pageCount}\n                  onPress={() => setPage(currentPage + 1)}\n                >\n                  <PageChevronGlyph direction=\"next\" />\n                </Button>\n              </>\n            )}\n          </div>\n          {pageSizeOptions === undefined ? null : (\n            <Select\n              // Select is w-full by default, which in this flex row stretches\n              // it across the whole bar and drags it back to the leading edge\n              // the moment the page numbers retire.\n              className=\"w-auto\"\n              label={labels.rowsPerPage}\n              labelHidden\n              selectedKey={String(rowsPerPage)}\n              onSelectionChange={(key) => {\n                const size = Number(key);\n                setChosenSize(size);\n                // Page 4 of 18 is page 1 of 2 at a larger size; keeping the\n                // number would land the reader past the end of the data.\n                setPage(1);\n                onPageSizeChange?.(size);\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <SelectItem key={option} id={String(option)}>\n                  {labels.perPage(option)}\n                </SelectItem>\n              ))}\n            </Select>\n          )}\n        </nav>\n      )}\n    </div>\n  );\n}\n// forwardRef cannot carry a type parameter through a .tsx call expression, so\n// Table<T>'s generic signature is restored here with a type-only cast on the\n// export; it costs nothing at runtime and the inner function is still named\n// \"Table\" for DevTools.\n) as <T>(props: TableProps<T> & RefAttributes<HTMLTableElement>) => ReactElement | null;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAa,oBAAoB,IAAI,CAAC,mCAAmC,GAAG;CAC1E,UAAU,EACR,OAAO;EACL,MAAM;EAMN,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;;;;;;;;;AAUD,SAAS,YAAe,QAA4B,OAAgB,KAAmB;CACrF,IAAI,UAAU,QAAQ,UAAU,KAAA,GAAW,OAAO;CAElD,MAAM,YAAY,OAAO,SAAS,OAAO,GAAG;CAC5C,IAAI,cAAc,KAAA,GAAW,OAAO;CASpC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU,OAAO;CACnE,IAAI,OAAO,UAAU,WAAW,OAAO,OAAO,KAAK;CACnD,OAAO;AACT;;AAGA,MAAM,oBAAoB;AAS1B,MAAM,eAAe;;AAGrB,MAAa,sBAAsB,IAAI,CAAC,mCAAmC,CAAC;AAE5E,MAAa,gBAAgB,IAAI;CAC/B;CAIA;CACA;AACF,CAAC;;;;;;;;;;;;AAaD,MAAa,sBAAsB,IAAI,CAAC,uBAAuB,GAAG;CAChE,UAAU,EAAE,YAAY;EAAE,QAAQ;EAAkB,MAAM;CAAiB,EAAE;CAC7E,iBAAiB,EAAE,YAAY,SAAS;AAC1C,CAAC;;AAGD,MAAa,0BAA0B,IAAI;CACzC;CACA;CACA;AACF,CAAC;;AAGD,MAAa,sBAAsB,IAAI,CACrC,+CACA,kDACF,CAAC;;AAGD,MAAM,aAAa;CAIjB;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,sBAAsB,IACjC;CACE;CACA;CACA,GAAG;CAKH;AACF,GACA;CACE,UAAU;EACR,OAAO;GAAE,OAAO;GAAc,QAAQ;GAAe,KAAK;EAAW;EAMrE,YAAY;GACV,UAAU;GACV,MAAM;EACR;CACF;CACA,iBAAiB;EAAE,OAAO;EAAS,YAAY;CAAW;AAC5D,CACF;AAEA,MAAa,mBAAmB,IAC9B;CACE;CACA;CAEA;CAEA;CACA,GAAG;AACL,GACA;CACE,UAAU;EAMR,SAAS;GACP,OAAO;GACP,OAAO;EACT;EAEA,SAAS;GAAE,MAAM;GAAqC,OAAO;EAAG;CAClE;CACA,iBAAiB;EAAE,SAAS;EAAS,SAAS;CAAM;AACtD,CACF;AAEA,MAAa,oBAAoB,IAC/B;CAAC;CAAqD;CAA2B,GAAG;AAAU,GAC9F;CACE,UAAU;EACR,OAAO;GAAE,OAAO;GAAc,QAAQ;GAAe,KAAK;EAAW;EAErE,SAAS;GAAE,MAAM;GAAgB,OAAO;EAAG;CAC7C;CACA,iBAAiB;EAAE,OAAO;EAAS,SAAS;CAAM;AACpD,CACF;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAS,WAAW,SAAiB,OAAwC;CAC3E,MAAM,QAAiC,CAAC;CACxC,MAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,CAAC;CACrC,MAAM,MAAM,KAAK,IAAI,OAAO,UAAU,CAAC;CAEvC,IAAI,QAAQ,GAAG;EACb,MAAM,KAAK,CAAC;EACZ,IAAI,QAAQ,GAAG,MAAM,KAAK,UAAU;CACtC;CACA,KAAK,IAAI,OAAO,OAAO,QAAQ,KAAK,QAAQ,MAAM,KAAK,IAAI;CAC3D,IAAI,MAAM,OAAO;EACf,IAAI,MAAM,QAAQ,GAAG,MAAM,KAAK,UAAU;EAC1C,MAAM,KAAK,KAAK;CAClB;CACA,OAAO;AACT;AAEA,SAAS,iBAAiB,EAAE,aAAiD;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAG,cAAc,SAAS,iBAAiB,gBAAkB,CAAA;CAChE,CAAA;AAET;AAEA,SAAS,kBAAkB;CACzB,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EAGV,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAe,WAAU;EAAoB,CAAA;CAClD,CAAA;AAET;AAEA,SAAS,eAAe,EAAE,aAAiE;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,kBAAgB;EAChB,eAAY;EACZ,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,WAAU;EAET,UAAA,cAAc,SACb,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA,GACxB,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA,CACxB,EAAA,CAAA,IAEF,oBAAC,QAAD,EAAM,GAAG,cAAc,cAAc,kBAAkB,eAAiB,CAAA;CAEvE,CAAA;AAET;;AAoLA,SAAgB,gBAAmB;CACjC,OAAO,EACL,SAAa,eAA2C,WAC1D;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAS,QAAW,QAA4B,KAAyB;CACvE,MAAM,QAAQ,OAAO,SAAS,GAAG;CACjC,IAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU,OAAO;CACnE,IAAI,OAAO,UAAU,WAAW,OAAO,QAAQ,IAAI;CACnD,IAAI,iBAAiB,MAAM,OAAO,MAAM,QAAQ;CAChD,IAAI,SAAS,MAAM,OAAO;CAC1B,OAAO,OAAO,SAAS,OAAO,GAAG,KAAK;AACxC;;AAGA,SAAS,YAAY,GAAoB,GAA4B;CACnE,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,UAAU,OAAO,IAAI;CAE/D,OAAO,OAAO,CAAC,CAAC,CAAC,cAAc,OAAO,CAAC,CAAC;AAC1C;AAEA,MAAaA,UAAQ,WAAW,SAASA,QACvC,EACE,MACA,SACA,UACA,SACA,gBACA,uBACA,cACA,aACA,kBACA,cACA,OACA,YACA,YACA,SACA,UACA,OACA,UACA,UACA,iBACA,kBACA,YACA,WACA,GAAG,SAEL,KACA;CAcA,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,qBAAqB;CAC9E,MAAM,aAAa,eAAe,iBAAiB;CAEnD,MAAM,OAAO,cAAc;EACzB,IAAI,gBAAgB,CAAC,YAAY,OAAO;EACxC,MAAM,SAAS,QAAQ,MAAM,WAAW,OAAO,OAAO,WAAW,MAAM;EACvE,IAAI,CAAC,QAAQ,OAAO;EAEpB,MAAM,YAAY,WAAW,cAAc,eAAe,KAAK;EAC/D,OAAO,CAAC,GAAG,IAAI,CAAC,CAAC,MACd,GAAG,MAAM,YAAY,YAAY,QAAQ,QAAQ,CAAC,GAAG,QAAQ,QAAQ,CAAC,CAAC,CAC1E;CACF,GAAG;EAAC;EAAM;EAAS;EAAY;CAAY,CAAC;CAW5C,MAAM,CAAC,YAAY,iBAAiB,SAAiB;CACrD,MAAM,cAAc,cAAc;CAElC,MAAM,YAAY,cAAc,KAAK,IAAI,GAAG,KAAK,KAAK,KAAK,SAAS,WAAW,CAAC,IAAI;CACpF,MAAM,CAAC,MAAM,WAAW,SAAS,CAAC;CAGlC,MAAM,cAAc,KAAK,IAAI,MAAM,SAAS;CAC5C,MAAM,YAAY,eAAe,cAAc,KAAK,cAAc;CAClE,MAAM,cAAc,cAAc,KAAK,MAAM,WAAW,YAAY,WAAW,IAAI;CAEnF,MAAM,SAAS;EACb,UAAU,YAAY,YAAY;EAClC,MAAM,YAAY,QAAQ;EAC1B,MACE,YAAY,UACV,QAAgB,cAChB,YAAY,QAAQ,OAAO,kBAAkB,cAAc;EAC/D,SAAS,YAAY,aAAa,SAAiB,GAAG,KAAK;EAC3D,aAAa,YAAY,eAAe;CAC1C;CAEA,MAAM,YAAY,IAAI,IAAe,KAAK,KAAK,QAAQ,CAAC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC;CAC5E,MAAM,YAAY,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAA,CAAS;CAErE,MAAM,aAA4B,CAAC;CACnC,IAAI,aAAa,KAAA,GAAW,WAAW,WAAW;CAIlD,IAAI,WAAW,WAAW,cAAc;CAExC,OACE,qBAAC,OAAD;EAAK,aAAU;EAAa,WAAW,MAAM,kBAAkB,EAAE,MAAM,CAAC,CAAC;EAAzE,UAAA,CACE,oBAAC,OAAD;GAAK,aAAU;GAAe,WAAW,MAAM,oBAAoB,CAAC;GAClE,UAAA,qBAACC,OAAD;IAKO;IACL,GAAI;IACJ,aAAU;IACV,WAAW,GAAG,cAAc,GAAG,SAAS;IACxC,OAAO;IACP,gBAAgB;IAChB,eAAe,eAAe;KAC5B,IAAI,CAAC,cAAc,oBAAoB,UAAU;KAGjD,QAAQ,CAAC;KACT,eAAe,UAAU;IAC3B;IACA,aACE,eACK,QAAQ;KACP,MAAM,MAAM,UAAU,IAAI,GAAG;KAC7B,IAAI,QAAQ,KAAA,GAAW,YAAY,GAAG;IACxC,IACA,KAAA;IAxBR,UAAA;KA2BE,qBAACC,aAAD;MACE,aAAU;MACV,WAAW,MAAM,oBAAoB,EAAE,WAAW,CAAC,CAAC;MAFtD,UAAA,CAIG,QAAQ,KAAK,WACZ,qBAACC,QAAD;OAEE,IAAI,OAAO;OACX,aAAa,WAAW,QAAQ;OAChC,eAAe,OAAO;OACtB,aAAU;OACV,WAAW,MACT,oBAAoB;QAClB,OAAO,OAAO,UAAU,OAAO,UAAU,QAAQ,KAAA;QACjD;OACF,CAAC,CACH;OACA,OAAO,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,EAAE,OAAO,OAAO,MAAM;OAZxE,UAAA,CAcG,OAAO,QASP,OAAO,WACN,oBAAC,gBAAD,EACE,WAAW,YAAY,WAAW,OAAO,KAAK,WAAW,YAAY,OACtE,CAAA,IACC,IACM;MA3BL,GAAA,OAAO,EA2BF,CACb,GACA,cAMC,oBAACA,QAAD;OACE,IAAI;OACJ,aAAU;OACV,WAAW,MAAM,oBAAoB,EAAE,WAAW,CAAC,GAAG,YAAY;OAEjE,UAAA;MACS,CAAA,IACV,IACW;;KACjB,oBAACC,WAAD;MACE,aAAU;MACV,kBAAkB,UAAU,KAAA,IAAY,KAAA,UAAkB;MAEzD,UAAA,YAAY,KAAK,KAAK,UACrB,qBAACC,KAAD;OAEE,IAAI,SAAS,GAAG;OAChB,aAAU;OACV,oBAAkB,mBAAmB,GAAG,KAAK,KAAA;OAC7C,WAAW,GACT,MACE,iBAAiB;QAAE;QAAS;OAAQ,CAAC,GACrC,eAAe,gBACjB,GACA,eAAe,GAAG,CACpB;OAXF,UAAA,CAaG,QAAQ,KAAK,WAAW;QACvB,MAAM,QAAiB,OAAO,SAAS,GAAG;QAC1C,OACE,oBAACC,MAAD;SAEE,aAAU;SACV,WAAW,MACT,kBAAkB;UAChB,OAAO,OAAO,UAAU,OAAO,UAAU,QAAQ,KAAA;UACjD,SAAS,OAAO;SAClB,CAAC,CACH;SAEC,UAAA,OAAO,OACJ,OAAO,KAAK;UAAE;UAAO;UAAK;SAAM,CAAC,IACjC,YAAY,QAAQ,OAAO,GAAG;QAC1B,GAZH,OAAO,EAYJ;OAEd,CAAC,GACA,cACC,oBAACA,MAAD;QACE,aAAU;QACV,WAAW,MAAM,kBAAkB,GAAG,YAAY;QAElD,UAAA,oBAAC,iBAAD,CAAkB,CAAA;OACV,CAAA,IACR,IACG;MAvCF,GAAA,OAAO,SAAS,GAAG,CAAC,CAuClB,CACV;KACY,CAAA;KACd,WACC,oBAACC,aAAD;MAAiB,aAAU;MAAe,WAAW,MAAM,oBAAoB,CAAC;MAC9E,UAAA,qBAACF,KAAD;OAAS,IAAG;OAAZ,UAAA,CACG,QAAQ,KAAK,QACZ,oBAACC,MAAD;QAEE,aAAU;QACV,WAAW,MACT,kBAAkB;SAChB,OAAO,IAAI,UAAU,IAAI,UAAU,QAAQ,KAAA;SAC3C,SAAS,IAAI;QACf,CAAC,CACH;QAEC,UAAA,SAAS,GAAG;OACL,GAVH,IAAI,EAUD,CACX,GACA,cACC,oBAACA,MAAD;QACE,aAAU;QACV,WAAW,MAAM,kBAAkB,GAAG,YAAY;QAEjD,UAAA;OACO,CAAA,IACR,IACG;;KACM,CAAA,IACf;IACK;;EACR,CAAA,GACJ,gBAAgB,KAAA,KAAc,aAAa,KAAK,CAAC,kBAAmB,OACnE,qBAAC,OAAD;GACE,aAAU;GACV,cAAY,GAAG,MAAM,cAAc;GACnC,WAAW,MAAM,wBAAwB,CAAC;GAH5C,UAAA,CAME,oBAAC,OAAD;IAAK,aAAU;IAAyB,WAAU;IAC/C,UAAA,aAAa,IAAI,OAChB,qBAAA,UAAA,EAAA,UAAA;KACE,oBAACE,UAAD;MACE,SAAQ;MACR,MAAK;MACL,WAAU;MACV,cAAY,OAAO;MACnB,YAAY,eAAe;MAC3B,eAAe,QAAQ,cAAc,CAAC;MAEtC,UAAA,oBAAC,kBAAD,EAAkB,WAAU,WAAY,CAAA;KAClC,CAAA;KACP,WAAW,aAAa,SAAS,CAAC,CAAC,KAAK,OAAO,UAC9C,UAAU,aACR,oBAAC,QAAD;MAIE,aAAU;MACV,eAAY;MACZ,WAAU;MACX,UAAA;KAEK,GANC,YAAY,OAAO,KAAK,GAMzB,IAEN,oBAACA,UAAD;MAEE,SAAS,UAAU,cAAc,YAAY;MAC7C,MAAK;MACL,WAAU;MACV,cAAY,OAAO,KAAK,OAAO,UAAU,WAAW;MACpD,eAAe,QAAQ,KAAK;MAE3B,UAAA;KACK,GARD,KAQC,CAEZ;KACA,oBAACA,UAAD;MACE,SAAQ;MACR,MAAK;MACL,WAAU;MACV,cAAY,OAAO;MACnB,YAAY,eAAe;MAC3B,eAAe,QAAQ,cAAc,CAAC;MAEtC,UAAA,oBAAC,kBAAD,EAAkB,WAAU,OAAQ,CAAA;KAC9B,CAAA;IACR,EAAA,CAAA;GAED,CAAA,GACJ,oBAAoB,KAAA,IAAY,OAC/B,oBAACC,UAAD;IAIE,WAAU;IACV,OAAO,OAAO;IACd,aAAA;IACA,aAAa,OAAO,WAAW;IAC/B,oBAAoB,QAAQ;KAC1B,MAAM,OAAO,OAAO,GAAG;KACvB,cAAc,IAAI;KAGlB,QAAQ,CAAC;KACT,mBAAmB,IAAI;IACzB;IAEC,UAAA,gBAAgB,KAAK,WACpB,oBAAC,YAAD;KAAyB,IAAI,OAAO,MAAM;KACvC,UAAA,OAAO,QAAQ,MAAM;IACZ,GAFK,MAEL,CACb;GACK,CAAA,CAEP;EAEJ,CAAA,CAAA;;AAET,CAKA"}
+{"version":3,"file":"table.js","names":["Table","AriaTable","AriaTableHeader","AriaColumn","AriaTableBody","AriaRow","AriaCell","AriaTableFooter","Button","Select"],"sources":["../../src/table/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n  type RefObject,\n} from \"react\";\nimport {\n  Cell as AriaCell,\n  Column as AriaColumn,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableBody as AriaTableBody,\n  TableFooter as AriaTableFooter,\n  TableHeader as AriaTableHeader,\n  type SortDescriptor,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * Table, ported from the legacy shadcn table onto React Aria's Table.\n *\n * The legacy component in the product app rendered NOTHING -- its body was\n * `return <>{children(renderProps)}</>` -- so all six of its consumers\n * hand-built `<table>`, `tableLayout: fixed`, a `<colgroup>` and a min-width,\n * and its config object was opt-OUT, so they wrote paragraphs of\n * `enabled: false`. Six consumers produced six different tables. This one\n * renders from `data` + `columns` + `getRowId`; everything else is opt-in.\n *\n * WIDTHS ARE CSS, and that is not a stylistic choice. React Aria's own `width`\n * on a `<Column>` is ignored outside a `ResizableTableContainer`, and its\n * dev-warning is dead code in 1.21.1 -- `for (let prop in ['width', ...])`\n * iterates the INDICES, so the guard tests `'0' in props` and never fires. A\n * width handed to React Aria disappears with no error and no console output:\n * `width={120}` measured 42.675px in a browser. So `Column.width` is emitted\n * as a style on the header cell, and any width puts the table into\n * `table-layout: fixed` -- without which a declared width is only a hint.\n *\n * THE ROW HIGHLIGHT IS PAINTED FROM `:hover` AS WELL AS `data-[hovered]`, and\n * that is a departure from the rule that state comes from React Aria data\n * attributes rather than bare pseudo-classes. React Aria stamps `data-hovered`\n * on a row ONLY when the row is interactive -- `onRowAction` or a selection\n * mode -- exactly as it gates `Column` hover on `allowsSorting`. Four of the\n * six legacy consumers are read-only tables that painted a hover fill, so\n * `data-[hovered]` alone would drop their pointer affordance in silence. The\n * rule exists because `:focus` fires on click where `data-[focus-visible]`\n * does not; `:hover` has no such twin, and on an interactive row the two\n * selectors match the same element with the same colour. The keyboard needs no\n * workaround: `data-focused` IS emitted on read-only rows.\n *\n * `leading-*` sits on the table rather than on the cell. tailwind-merge treats\n * a later `text-*` as owning line-height and silently strips a `leading-*`\n * that precedes it, and the cells carry `text-start`/`text-center`/`text-end`.\n * Line-height inherits, so putting it one level up removes the hazard instead\n * of policing it.\n */\n\n/**\n * The card. Every table in the product sits in one.\n *\n * The edge uses `separator`, NOT `border`, and that reverses what an earlier\n * revision of this file claimed. Measured against the running product, its card\n * is `border border-border` resolving to #e6e6e6 -- the same hairline as the row\n * dividers. The earlier argument was that the card edge is where WCAG 1.4.11\n * lands; on reflection it does not. 1.4.11 covers what is needed to identify\n * user interface COMPONENTS and their states, and a static table is not one:\n * the interactive parts inside it -- sortable headers, pagination buttons --\n * carry their own focus indicators and borders, which are still held to 3:1.\n *\n * overflow-hidden is load-bearing: the header fill runs to the table's edge and\n * would square off the rounded corners without it.\n *\n * THE EDGE SHADOWS. A table wider than its card scrolls inside it, and on a\n * trackpad the scrollbar only shows while scrolling, so a cut-off column looks\n * like the table's last one. The card carries `data-overflow-start` and\n * `data-overflow-end` while columns are hidden on that side (the Table sets\n * them from its scroll position), and each draws a shadow on that edge: the\n * text colour fading to nothing at 15%, so it follows the theme. With a sticky\n * first column the start is never hidden behind the card's edge, so the start\n * shadow stays off and the sticky column's own divider does that job.\n */\nexport const tableCardVariants = cva(\n  [\n    \"w-full box-border overflow-hidden relative isolate\",\n    \"before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:z-2 before:w-6\",\n    \"before:bg-linear-to-r rtl:before:bg-linear-to-l before:from-foreground before:to-transparent\",\n    \"before:opacity-0 motion-safe:before:transition-opacity\",\n    \"data-[overflow-start]:not-data-[sticky-first]:before:opacity-15\",\n    \"after:pointer-events-none after:absolute after:inset-y-0 after:end-0 after:z-2 after:w-6\",\n    \"after:bg-linear-to-l rtl:after:bg-linear-to-r after:from-foreground after:to-transparent\",\n    \"after:opacity-0 motion-safe:after:transition-opacity\",\n    \"data-[overflow-end]:after:opacity-15\",\n  ],\n  {\n    variants: {\n      frame: {\n        card: \"rounded-md border-(length:--border-width) border-separator bg-background\",\n        /*\n         * No frame. Eleven of the product's tables either sit inside a card\n         * already -- gaining a second nested border and radius from an\n         * unconditional one -- or are deliberately bare on the page.\n         */\n        none: \"\",\n      },\n    },\n    defaultVariants: { frame: \"card\" },\n  },\n);\n\n/**\n * An absent value is an em-dash, not the word \"null\".\n *\n * The default renderer was `String(value)`, which paints the literal text\n * `null` into the cell -- a defect rather than a gap, and six of the product's\n * tables print a dash there. Zero and empty string are values and are left\n * alone; only null and undefined are absent.\n */\nfunction renderValue<T>(column: Column<T, unknown>, value: unknown, row: T): ReactNode {\n  if (value === null || value === undefined) return \"—\";\n\n  const formatted = column.format?.(value, row);\n  if (formatted !== undefined) return formatted;\n\n  /*\n   * Only primitives have a sensible default rendering. String(someObject) is\n   * \"[object Object]\", which is the same class of silent nonsense as the\n   * literal \"null\" this function exists to stop -- so an object-valued column\n   * renders nothing until it is given `format` or `cell`, which is loud enough\n   * to notice and quiet enough not to lie.\n   */\n  if (typeof value === \"string\" || typeof value === \"number\") return value;\n  if (typeof value === \"boolean\") return String(value);\n  return null;\n}\n\n/** Reserved id for the chevron column, so it cannot collide with a real one. */\nconst CHEVRON_COLUMN_ID = \"__table_row_action\";\n\n/*\n * The chevron column is sized to its glyph, not to a share of the table.\n * Given a percentage AND the usual --density-row-pad-x on both sides it pushed\n * the total past 100% under table-layout: fixed, and a table that fits grew a\n * horizontal scrollbar. w-10 is the spacing scale rather than a bracket value,\n * which check:hardcoding would reject.\n */\nconst CHEVRON_CELL = \"w-10 px-0 text-center\";\n\n/** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */\nexport const tableScrollVariants = cva([\"w-full overflow-x-auto box-border\"]);\n\nexport const tableVariants = cva([\n  \"w-full border-collapse box-border\",\n  // font-sans and the explicit colours are not boilerplate: the reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none and an unstyled\n  // table would inherit the host's serif on a transparent ground.\n  \"font-sans text-base leading-(--leading-normal)\",\n  \"bg-background text-foreground\",\n]);\n\n/**\n * The header is near-white, not a grey band.\n *\n * The product fills it with its `--neutral-200`, #fffcfc: white carrying three\n * counts of warmth in green and blue. An earlier revision of this file called\n * that \"not worth a token of its own\" and used `background`, which made the\n * header exactly the colour of the rows -- so the band vanished and the only\n * thing separating the header was the divider under it. The difference is\n * small on purpose; absent is not the same as small. It is `--color-header-fill`\n * now, and it inverts properly in dark rather than being pinned to white.\n */\nexport const tableHeaderVariants = cva([\"text-muted-foreground\"], {\n  variants: { headerFill: { subtle: \"bg-header-fill\", none: \"bg-transparent\" } },\n  defaultVariants: { headerFill: \"subtle\" },\n});\n\n/** The pagination bar. A sibling of the table, never a row inside it. */\nexport const tablePaginationVariants = cva([\n  \"flex items-center justify-between gap-(--density-control-gap) box-border\",\n  \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\n/** The footer band. Heavier than a row rule, because it closes the table. */\nexport const tableFooterVariants = cva([\n  \"bg-background font-semibold text-foreground\",\n  \"border-t-(length:--border-width) border-t-border\",\n]);\n\n/** Shared focus treatment. Authored once; both the column header and the row take it. */\nconst FOCUS_RING = [\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none, and the width utility resolves its style from that same variable, so\n  // a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n];\n\nexport const tableColumnVariants = cva(\n  [\n    \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n    \"box-border align-middle text-sm font-semibold select-none\",\n    ...FOCUS_RING,\n    // The whole cell is the hit target, not just the label. At compact density\n    // --density-row-pad-y is 7px, so a control wrapping only its text lands\n    // under the 24x24 floor of WCAG 2.2 target size (2.5.8) -- which the story\n    // harness enables explicitly on top of axe's defaults.\n    \"data-[allows-sorting]:cursor-pointer\",\n  ],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /*\n       * Eleven tables -- a plurality of the app -- label columns in uppercase\n       * with tracking, and not one was reachable: the label was hardcoded\n       * `text-sm font-semibold`, and `className` lands on the <table>.\n       */\n      headerType: {\n        sentence: \"text-sm leading-none\",\n        caps: \"text-xs uppercase tracking-wide leading-none\",\n      },\n    },\n    defaultVariants: { align: \"start\", headerType: \"sentence\" },\n  },\n);\n\nexport const tableRowVariants = cva(\n  [\n    // The group a sticky first cell reads the row's state from (tableStickyCellVariants).\n    \"group/row box-border\",\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n    // See the header comment: :hover is what covers a read-only row.\n    \"hover:bg-muted data-[hovered]:bg-muted data-[focused]:bg-muted\",\n    // After the state fills, so the marked row keeps its identity while hovered.\n    \"data-[highlighted]:bg-primary-subtle\",\n    ...FOCUS_RING,\n  ],\n  {\n    variants: {\n      /*\n       * `grid` is gone. Across 25 real tables in the product not one drew\n       * vertical rules between cells -- a variant nobody asked for, shipped\n       * while the caps header eleven tables need was unreachable.\n       */\n      variant: {\n        lined: \"border-t-(length:--border-width) border-t-separator\",\n        plain: \"\",\n      },\n      /* rowClassName could not fake this: it gets the row but not its index. */\n      striped: { true: \"[&:nth-child(even)]:bg-row-stripe\", false: \"\" },\n    },\n    defaultVariants: { variant: \"lined\", striped: false },\n  },\n);\n\nexport const tableCellVariants = cva(\n  [\"px-(--density-row-pad-x) py-(--density-row-pad-y)\", \"box-border align-middle\", ...FOCUS_RING],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /* Ten tables set tabular figures -- the app's most consistent convention. */\n      numeric: { true: \"tabular-nums\", false: \"\" },\n    },\n    defaultVariants: { align: \"start\", numeric: false },\n  },\n);\n\n/**\n * The first cell of every row, held in place while the rest scroll under it\n * (`stickyFirstColumn`).\n *\n * A sticky cell is opaque -- otherwise the scrolled cells show through it -- so\n * it repaints whatever fill its row has: the row's hover, focus and highlight\n * through `group/row`, the stripe when striped. A divider on its trailing edge\n * marks where the frozen column ends.\n */\nexport const tableStickyCellVariants = cva(\n  [\n    \"sticky start-0 z-1\",\n    \"border-e-(length:--border-width) border-e-separator\",\n  ],\n  {\n    variants: {\n      part: {\n        header: \"bg-header-fill\",\n        bare: \"bg-background\",\n        body: [\n          \"bg-background\",\n          \"group-hover/row:bg-muted group-data-[hovered]/row:bg-muted group-data-[focused]/row:bg-muted\",\n          \"group-data-[highlighted]/row:bg-primary-subtle\",\n        ],\n      },\n      striped: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { part: \"body\", striped: true, class: \"group-even/row:bg-row-stripe\" },\n    ],\n    defaultVariants: { part: \"body\", striped: false },\n  },\n);\n\n/**\n * Which sides of a scroll container hide content right now.\n *\n * Read from the container on scroll and whenever it or the table resizes, so\n * a window resize or rows arriving later update it too. scrollLeft runs\n * negative in a right-to-left layout; the distance travelled is what counts.\n */\nfunction useScrollEdges(scroller: RefObject<HTMLDivElement | null>) {\n  const [edges, setEdges] = useState({ start: false, end: false });\n  useEffect(() => {\n    const el = scroller.current;\n    if (!el) return;\n    const update = () => {\n      const hidden = el.scrollWidth - el.clientWidth;\n      const travelled = Math.abs(el.scrollLeft);\n      const start = hidden > 1 && travelled > 1;\n      const end = hidden > 1 && travelled < hidden - 1;\n      setEdges((prev) => (prev.start === start && prev.end === end ? prev : { start, end }));\n    };\n    update();\n    el.addEventListener(\"scroll\", update, { passive: true });\n    const resize = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(update);\n    resize?.observe(el);\n    if (el.firstElementChild) resize?.observe(el.firstElementChild);\n    return () => {\n      el.removeEventListener(\"scroll\", update);\n      resize?.disconnect();\n    };\n  }, [scroller]);\n  return edges;\n}\n\n/**\n * Identity for a row.\n *\n * Declared here rather than imported: React's own `Key` includes `bigint`,\n * which React Aria's collections do not accept, and importing React Aria's\n * would leak its types through the public API for no gain. This IS the set\n * React Aria takes.\n */\nexport type RowKey = string | number;\n\n/**\n * Both glyphs are aria-hidden and neither is focusable.\n *\n * The chevron says \"this row does something\"; the ROW is what React Aria makes\n * pressable and announces, so a second target would be a keyboard trap for no\n * gain. The caret says which way a column is sorted -- `aria-sort` already\n * tells assistive tech, but without a glyph the direction is carried by tint\n * alone, which is WCAG 1.4.1 use-of-colour.\n *\n * Drawn inline rather than taken as props: this package ships no icon set, and\n * Checkbox and Select already inline their single glyphs this way.\n */\n/**\n * Which page numbers to show, with gaps collapsed to an ellipsis.\n *\n * One sibling either side of the current page, plus the first and last, which\n * is what the product's own pager renders at its call sites: page 1 of 18 gives\n * `1 2 ... 18`. It is not a prop, because no consumer has asked for a second\n * width and a number nobody tunes is a number better inlined.\n */\nfunction pageWindow(current: number, total: number): (number | \"ellipsis\")[] {\n  const pages: (number | \"ellipsis\")[] = [];\n  const start = Math.max(1, current - 1);\n  const end = Math.min(total, current + 1);\n\n  if (start > 1) {\n    pages.push(1);\n    if (start > 2) pages.push(\"ellipsis\");\n  }\n  for (let page = start; page <= end; page++) pages.push(page);\n  if (end < total) {\n    if (end < total - 1) pages.push(\"ellipsis\");\n    pages.push(total);\n  }\n  return pages;\n}\n\nfunction PageChevronGlyph({ direction }: { direction: \"previous\" | \"next\" }) {\n  return (\n    <svg\n      data-slot=\"table-pagination-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d={direction === \"next\" ? \"m6 3 5 5-5 5\" : \"m10 3-5 5 5 5\"} />\n    </svg>\n  );\n}\n\nfunction RowChevronGlyph() {\n  return (\n    <svg\n      data-slot=\"table-row-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) text-muted-foreground\"\n    >\n      {/* Logical, so it mirrors in RTL with the rest of the table. */}\n      <path d=\"m6 3 5 5-5 5\" className=\"rtl:-scale-x-100\" />\n    </svg>\n  );\n}\n\nfunction SortCaretGlyph({ direction }: { direction: \"ascending\" | \"descending\" | \"none\" }) {\n  return (\n    <svg\n      data-slot=\"table-sort-caret\"\n      data-direction={direction}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) ms-1 inline-block align-middle\"\n    >\n      {direction === \"none\" ? (\n        <>\n          <path d=\"m4 7 4-4 4 4\" />\n          <path d=\"m4 9 4 4 4-4\" />\n        </>\n      ) : (\n        <path d={direction === \"ascending\" ? \"m4 10 4-4 4 4\" : \"m4 6 4 4 4-4\"} />\n      )}\n    </svg>\n  );\n}\n\n/** One column of a `Table`. */\nexport type Column<T, V = unknown> = {\n  /** Stable key. Becomes the column's id and the sort descriptor's `column`. */\n  id: string;\n  /** Header content. */\n  header: ReactNode;\n  /** Pulls this column's value out of a row. */\n  accessor: (row: T) => V;\n  /**\n   * Renders the cell. Defaults to `format?.(value, row) ?? String(value)`.\n   *\n   * Method syntax, not an arrow property, and that is load-bearing. A table\n   * holds columns of DIFFERENT value types in one array, so the array element\n   * has to be `Column<T, unknown>` -- and under `strictFunctionTypes` an arrow\n   * property is contravariant in its parameters, which would make\n   * `Column<T, string>` unassignable to it. Method members are checked\n   * bivariantly, which is precisely the semantics a heterogeneous collection\n   * needs. The alternative is `Column<T, any>`, and this package has no\n   * eslint-disable in it anywhere.\n   */\n  cell?(ctx: { value: V; row: T; index: number }): ReactNode;\n  /**\n   * Value to string. Deliberately separate from `cell`: this is what CSV\n   * export and sort comparators consume, and a ReactNode is no use to either.\n   */\n  format?(value: V, row: T): string;\n  /**\n   * Logical alignment, applied to BOTH the column header and its cells --\n   * React Aria keeps no link between the two, so the component owns it.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Column width. Any width on any column puts the table into\n   * `table-layout: fixed`.\n   *\n   * Emitted as CSS, NEVER forwarded to React Aria's own `width` prop. React\n   * Aria ignores that one outside a `ResizableTableContainer`, and its\n   * dev-warning is dead code in 1.21.1 (`for...in` over an array literal, so\n   * the guard tests `'0' in props`). A width handed to it disappears with no\n   * error and no console output.\n   */\n  width?: number | `${number}%`;\n  /**\n   * A column of figures: tabular numerals, end-aligned unless `align` says\n   * otherwise. Ten of the product's tables set tabular figures -- the most\n   * consistently applied convention in the app. Without it, proportional\n   * digits leave a column of numbers ragged.\n   */\n  numeric?: boolean;\n  /** Opts this column into sorting. Off by default. */\n  sortable?: boolean;\n};\n\nexport interface TableProps<T> extends VariantProps<typeof tableRowVariants> {\n  /** The rows to render. */\n  data: readonly T[];\n  /** The columns, in display order. */\n  columns: readonly Column<T, unknown>[];\n  /** Stable identity for a row. Used as its key and to resolve `onRowAction`. */\n  getRowId: (row: T) => RowKey;\n  /**\n   * Required. React Aria's Table renders no `<caption>`, so this is the\n   * accessible name and there is no other source for it.\n   */\n  \"aria-label\": string;\n  /**\n   * The sorted column and direction, CONTROLLED.\n   *\n   * Pass this and the table stops sorting: you own the row order, which is\n   * what server-side sorting needs. Leave it off and the table sorts `data`\n   * itself from `defaultSortDescriptor` and header clicks.\n   */\n  sortDescriptor?: SortDescriptor;\n  /** The initial sort when uncontrolled. */\n  defaultSortDescriptor?: SortDescriptor;\n  /** Fires when a sortable column header is activated, controlled or not. */\n  onSortChange?: (descriptor: SortDescriptor) => void;\n  /**\n   * Fires on click or Enter. Receives the ROW, where React Aria's own handler\n   * receives a key -- every legacy consumer looked the row up again anyway.\n   *\n   * Setting it also makes rows interactive, which is what switches React\n   * Aria's `data-hovered` on.\n   */\n  onRowAction?: (row: T) => void;\n  /**\n   * Marks a row as the viewer's own -- the product tints \"Alfred AI (You)\".\n   *\n   * The tint is not the message. A fill alone is WCAG 1.4.1 use-of-colour, so\n   * the highlighted row is expected to say so in its own content, the way the\n   * product's does. This tints and sets `data-highlighted`; it does not invent\n   * meaning the row does not already carry.\n   */\n  isRowHighlighted?: (row: T) => boolean;\n  /** Extra classes per row, for styling that depends on row DATA. */\n  rowClassName?: (row: T) => string;\n  /**\n   * Rendered in place of the rows when `data` is empty.\n   *\n   * There is no default string on purpose: user-visible copy belongs in\n   * `useMessages()`, a mechanism this package does not have yet, and it is the\n   * one rule ARCHITECTURE says cannot be retrofitted.\n   */\n  empty?: ReactNode;\n  /**\n   * Minimum table width in px. Below it the wrapper scrolls horizontally, and\n   * the card shows a shadow on each edge that hides columns.\n   */\n  minWidth?: number;\n  /**\n   * Keeps the first column in place while the rest scroll sideways. For a\n   * register wider than its card whose first column says which row is which\n   * (an invoice number, a person's name).\n   */\n  stickyFirstColumn?: boolean;\n  /**\n   * Rows per page. Omit it and every row renders with no pagination UI.\n   *\n   * The table holds the page itself and slices AFTER sorting, so a sort\n   * reorders the whole set rather than shuffling the current page, and lands\n   * you back on page 1.\n   *\n   * With `pageSizeOptions` this is the STARTING size and the table owns it\n   * from then on; a later change to the prop does not move a reader who has\n   * chosen their own. Without them it is simply the size.\n   */\n  pageSize?: number;\n  /**\n   * Rows-per-page choices. Given them, the bar grows a select on its trailing\n   * side, which is the arrangement every paged table in the product uses:\n   * page numbers leading, rows-per-page trailing.\n   */\n  pageSizeOptions?: readonly number[];\n  /** Notified after the reader picks a new size. The table has already applied it. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /**\n   * Copy for the pagination controls.\n   *\n   * These carry English defaults, which is a known debt: ARCHITECTURE section\n   * 7 rule 9 routes user-visible copy through a `useMessages()` hook that does\n   * not exist in this package yet. They are props so a consumer is not stuck\n   * waiting for it, and so the eventual mechanism has somewhere to land. The\n   * navigation landmark takes its name from `aria-label` instead, which avoids\n   * inventing a fourth string.\n   */\n  pageLabels?: {\n    previous?: string;\n    next?: string;\n    /**\n     * Accessible name for a page button.\n     *\n     * `isCurrent` exists because `aria-current` cannot reach the button.\n     * React Aria's Button runs its props through `filterDOMProps`, whose\n     * allowlist covers `id` and the labelling attributes and nothing else, so\n     * an `aria-current` handed to it is dropped with no error -- the same\n     * class of silent loss as `Column.width`. The current page therefore says\n     * so in its name, which every screen reader announces.\n     */\n    page?: (page: number, isCurrent: boolean) => string;\n    /** Option text in the rows-per-page select. */\n    perPage?: (pageSize: number) => string;\n    /** Accessible name for the rows-per-page select itself. */\n    rowsPerPage?: string;\n  };\n  /**\n   * Whether the table draws its own card. `none` for one that already sits\n   * inside a card, or is meant to be bare on the page.\n   */\n  frame?: \"card\" | \"none\";\n  /** Column label treatment: sentence case, or uppercase with tracking. */\n  headerType?: \"sentence\" | \"caps\";\n  /** Header background. `none` for report tables that carry no band. */\n  headerFill?: \"subtle\" | \"none\";\n  /** Zebra-stripe alternate rows. */\n  striped?: boolean;\n  /**\n   * A footer row, in a real `<tfoot>`.\n   *\n   * Called once per column; return the cell content, or null for a blank. A\n   * real footer rather than one more row of data, so it is announced as one.\n   */\n  totalRow?: (column: Column<T, unknown>) => ReactNode;\n  /** Extra classes for the table. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Builds columns that keep each column's own value type. */\nexport function createColumns<T>() {\n  return {\n    column: <V,>(definition: Column<T, V>): Column<T, V> => definition,\n  };\n}\n\n/**\n * A data table.\n *\n * Maturity: **beta**. Selection, row expansion, filtering, grouping, the total\n * row and pagination are deliberately absent -- each had one consumer or none\n * across the six legacy tables, and the stateful ones belong to DataGrid.\n *\n * @example\n * const { column } = createColumns<Channel>();\n * const columns = useMemo(() => [\n *   column({ id: \"name\", header: \"Channel\", accessor: (r) => r.name }),\n *   column({ id: \"cost\", header: \"Cost\", accessor: (r) => r.cost,\n *            format: (v) => currency(v), align: \"end\", sortable: true }),\n * ], []);\n *\n * <Table aria-label=\"Channels\" data={rows} columns={columns} getRowId={(r) => r.id} />\n */\n/**\n * The orderable value behind a cell.\n *\n * Objects are NOT stringified. `String(someObject)` is \"[object Object]\", so a\n * column of objects would sort every row equal while looking like it worked --\n * and a column's own `format` already exists to turn its value into a string,\n * so that is what gets used instead of a blind cast.\n *\n * Numbers stay numbers even when the column formats them: sorting \"$1,220\"\n * against \"$12,480\" lexically puts the larger first.\n */\nfunction sortKey<T>(column: Column<T, unknown>, row: T): string | number {\n  const value = column.accessor(row);\n  if (typeof value === \"number\" || typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? 1 : 0;\n  if (value instanceof Date) return value.getTime();\n  if (value == null) return \"\";\n  return column.format?.(value, row) ?? \"\";\n}\n\n/** Orders two cell keys. Numbers numerically, strings by locale. */\nfunction compareKeys(a: string | number, b: string | number): number {\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  // localeCompare so \"Item 10\" sorts after \"Item 9\", not before it.\n  return String(a).localeCompare(String(b));\n}\n\nexport const Table = forwardRef(function Table<T>(\n  {\n    data,\n    columns,\n    getRowId,\n    variant,\n    sortDescriptor,\n    defaultSortDescriptor,\n    onSortChange,\n    onRowAction,\n    isRowHighlighted,\n    rowClassName,\n    frame,\n    headerType,\n    headerFill,\n    striped,\n    totalRow,\n    empty,\n    minWidth,\n    stickyFirstColumn,\n    pageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    pageLabels,\n    className,\n    ...props\n  }: TableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  /*\n   * Uncontrolled sorting is the component's job, not the call site's.\n   *\n   * React Aria holds no sort state and never reorders rows -- it reports the\n   * descriptor and stops. Leaving it there would mean `sortable: true` renders\n   * a header that highlights, announces itself via aria-sort, and sorts\n   * nothing until the consumer writes the state and the comparator by hand.\n   * That is a demo that only works in a story.\n   *\n   * So: uncontrolled, the table holds the descriptor and sorts `data`.\n   * Controlled (a `sortDescriptor` prop), it sorts nothing and the consumer\n   * owns the order, which is what server-side sorting requires.\n   */\n  const isControlled = sortDescriptor !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);\n  const activeSort = isControlled ? sortDescriptor : uncontrolledSort;\n\n  const rows = useMemo(() => {\n    if (isControlled || !activeSort) return data;\n    const sorted = columns.find((column) => column.id === activeSort.column);\n    if (!sorted) return data;\n\n    const direction = activeSort.direction === \"descending\" ? -1 : 1;\n    return [...data].sort(\n      (a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)),\n    );\n  }, [data, columns, activeSort, isControlled]);\n\n  /*\n   * Paging happens AFTER sorting, which is the whole reason it lives in the\n   * component. Slice first and a sort would only reshuffle the ten rows you\n   * can see, so \"sort by cost ascending\" would not find the cheapest row in\n   * the set -- the single most common way a hand-rolled table gets this wrong.\n   */\n  // A size the reader picked outranks the prop, and is held here rather than\n  // synced from it by an effect -- an effect would snap them back to the\n  // consumer's default on every unrelated re-render.\n  const [chosenSize, setChosenSize] = useState<number>();\n  const rowsPerPage = chosenSize ?? pageSize;\n\n  const pageCount = rowsPerPage ? Math.max(1, Math.ceil(rows.length / rowsPerPage)) : 1;\n  const [page, setPage] = useState(1);\n  // Clamped rather than reset by an effect, so a shrinking `data` cannot strand\n  // the view on a page that no longer exists.\n  const currentPage = Math.min(page, pageCount);\n  const pageStart = rowsPerPage ? (currentPage - 1) * rowsPerPage : 0;\n  const visibleRows = rowsPerPage ? rows.slice(pageStart, pageStart + rowsPerPage) : rows;\n\n  const labels = {\n    previous: pageLabels?.previous ?? \"Go to previous page\",\n    next: pageLabels?.next ?? \"Go to next page\",\n    page:\n      pageLabels?.page ??\n      ((target: number, isCurrent: boolean) =>\n        isCurrent ? `Page ${target}, current page` : `Go to page ${target}`),\n    perPage: pageLabels?.perPage ?? ((size: number) => `${size} per page`),\n    rowsPerPage: pageLabels?.rowsPerPage ?? \"Rows per page\",\n  };\n\n  const rowsByKey = new Map<RowKey, T>(data.map((row) => [getRowId(row), row]));\n  const hasWidths = columns.some((column) => column.width !== undefined);\n\n  const tableStyle: CSSProperties = {};\n  if (minWidth !== undefined) tableStyle.minWidth = minWidth;\n  // Declared widths only hold under a fixed layout; otherwise the browser\n  // treats them as hints and the columns drift, which is why 5 of the 6 legacy\n  // consumers set this by hand.\n  if (hasWidths) tableStyle.tableLayout = \"fixed\";\n\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const edges = useScrollEdges(scrollRef);\n  const stickyCell = (part: \"header\" | \"bare\" | \"body\") =>\n    tableStickyCellVariants({ part, striped: part === \"body\" && !!striped });\n\n  return (\n    <div\n      data-slot=\"table-card\"\n      data-overflow-start={edges.start || undefined}\n      data-overflow-end={edges.end || undefined}\n      data-sticky-first={stickyFirstColumn || undefined}\n      className={cnAll(tableCardVariants({ frame }))}\n    >\n      <div ref={scrollRef} data-slot=\"table-scroll\" className={cnAll(tableScrollVariants())}>\n        <AriaTable\n          // The ref goes on the table itself, never on the table-card or\n          // table-scroll divs this component wraps it in -- callers need the\n          // real HTMLTableElement (to measure it, scroll it into view, etc.),\n          // not one of the two divs this component renders around it.\n          ref={ref}\n          {...props}\n          data-slot=\"table\"\n          className={cn(tableVariants(), className)}\n          style={tableStyle}\n          sortDescriptor={activeSort}\n          onSortChange={(descriptor) => {\n            if (!isControlled) setUncontrolledSort(descriptor);\n            // Back to the first page: the order changed under you, so staying on\n            // page 3 shows rows you did not ask to see.\n            setPage(1);\n            onSortChange?.(descriptor);\n          }}\n          onRowAction={\n            onRowAction\n              ? (key) => {\n                  const row = rowsByKey.get(key);\n                  if (row !== undefined) onRowAction(row);\n                }\n              : undefined\n          }\n        >\n          <AriaTableHeader\n            data-slot=\"table-header\"\n            className={cnAll(tableHeaderVariants({ headerFill }))}\n          >\n            {columns.map((column) => (\n              <AriaColumn\n                key={column.id}\n                id={column.id}\n                isRowHeader={column === columns[0]}\n                allowsSorting={column.sortable}\n                data-slot=\"table-column\"\n                className={cnAll(\n                  tableColumnVariants({\n                    align: column.align ?? (column.numeric ? \"end\" : undefined),\n                    headerType,\n                  }),\n                  stickyFirstColumn &&\n                    column === columns[0] &&\n                    stickyCell(headerFill === \"none\" ? \"bare\" : \"header\"),\n                )}\n                style={column.width === undefined ? undefined : { width: column.width }}\n              >\n                {column.header}\n                {/*\n                 * A sortable column says so BEFORE it is sorted. Rendering the\n                 * caret only once sorted left a sortable header looking exactly\n                 * like a fixed one, so the only way to discover sorting was to\n                 * click a header and see whether anything moved -- the same gap\n                 * the product closed in its own header, and the reason the\n                 * paired chevron exists rather than an arrow.\n                 */}\n                {column.sortable ? (\n                  <SortCaretGlyph\n                    direction={activeSort?.column === column.id ? activeSort.direction : \"none\"}\n                  />\n                ) : null}\n              </AriaColumn>\n            ))}\n            {onRowAction ? (\n              /*\n               * The chevron's own column. Its header is intentionally EMPTY: a\n               * visually-hidden label would be user-visible copy, and section 7\n               * rule 9 has nowhere to put it until useMessages() exists.\n               */\n              <AriaColumn\n                id={CHEVRON_COLUMN_ID}\n                data-slot=\"table-column\"\n                className={cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL)}\n              >\n                {\"\"}\n              </AriaColumn>\n            ) : null}\n          </AriaTableHeader>\n          <AriaTableBody\n            data-slot=\"table-body\"\n            renderEmptyState={empty === undefined ? undefined : () => empty}\n          >\n            {visibleRows.map((row, index) => (\n              <AriaRow\n                key={String(getRowId(row))}\n                id={getRowId(row)}\n                data-slot=\"table-row\"\n                data-highlighted={isRowHighlighted?.(row) || undefined}\n                className={cn(\n                  cnAll(\n                    tableRowVariants({ variant, striped }),\n                    onRowAction && \"cursor-pointer\",\n                  ),\n                  rowClassName?.(row),\n                )}\n              >\n                {columns.map((column) => {\n                  const value: unknown = column.accessor(row);\n                  return (\n                    <AriaCell\n                      key={column.id}\n                      data-slot=\"table-cell\"\n                      className={cnAll(\n                        tableCellVariants({\n                          align: column.align ?? (column.numeric ? \"end\" : undefined),\n                          numeric: column.numeric,\n                        }),\n                        stickyFirstColumn && column === columns[0] && stickyCell(\"body\"),\n                      )}\n                    >\n                      {column.cell\n                        ? column.cell({ value, row, index })\n                        : renderValue(column, value, row)}\n                    </AriaCell>\n                  );\n                })}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    <RowChevronGlyph />\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            ))}\n          </AriaTableBody>\n          {totalRow ? (\n            <AriaTableFooter data-slot=\"table-footer\" className={cnAll(tableFooterVariants())}>\n              <AriaRow id=\"__table_total\">\n                {columns.map((col) => (\n                  <AriaCell\n                    key={col.id}\n                    data-slot=\"table-cell\"\n                    className={cnAll(\n                      tableCellVariants({\n                        align: col.align ?? (col.numeric ? \"end\" : undefined),\n                        numeric: col.numeric,\n                      }),\n                      stickyFirstColumn && col === columns[0] && stickyCell(\"bare\"),\n                    )}\n                  >\n                    {totalRow(col)}\n                  </AriaCell>\n                ))}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    {\"\"}\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            </AriaTableFooter>\n          ) : null}\n        </AriaTable>\n      </div>\n      {rowsPerPage === undefined || (pageCount <= 1 && !pageSizeOptions) ? null : (\n        <nav\n          data-slot=\"table-pagination\"\n          aria-label={`${props[\"aria-label\"]} pagination`}\n          className={cnAll(tablePaginationVariants())}\n        >\n          {/* Present even when empty, so the select stays on the trailing edge. */}\n          <div data-slot=\"table-pagination-pages\" className=\"flex items-center gap-1\">\n            {pageCount <= 1 ? null : (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.previous}\n                  isDisabled={currentPage <= 1}\n                  onPress={() => setPage(currentPage - 1)}\n                >\n                  <PageChevronGlyph direction=\"previous\" />\n                </Button>\n                {pageWindow(currentPage, pageCount).map((entry, index) =>\n                  entry === \"ellipsis\" ? (\n                    <span\n                      // The gap is decoration; the pages either side of it are\n                      // what a reader navigates by, so this is not announced.\n                      key={`ellipsis-${String(index)}`}\n                      data-slot=\"table-pagination-ellipsis\"\n                      aria-hidden=\"true\"\n                      className=\"px-2 text-sm text-muted-foreground\"\n                    >\n                      &hellip;\n                    </span>\n                  ) : (\n                    <Button\n                      key={entry}\n                      variant={entry === currentPage ? \"primary\" : \"ghost\"}\n                      size=\"sm\"\n                      className=\"min-w-(--density-control-h-sm) px-2\"\n                      aria-label={labels.page(entry, entry === currentPage)}\n                      onPress={() => setPage(entry)}\n                    >\n                      {entry}\n                    </Button>\n                  ),\n                )}\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.next}\n                  isDisabled={currentPage >= pageCount}\n                  onPress={() => setPage(currentPage + 1)}\n                >\n                  <PageChevronGlyph direction=\"next\" />\n                </Button>\n              </>\n            )}\n          </div>\n          {pageSizeOptions === undefined ? null : (\n            <Select\n              // Select is w-full by default, which in this flex row stretches\n              // it across the whole bar and drags it back to the leading edge\n              // the moment the page numbers retire.\n              className=\"w-auto\"\n              label={labels.rowsPerPage}\n              labelHidden\n              selectedKey={String(rowsPerPage)}\n              onSelectionChange={(key) => {\n                const size = Number(key);\n                setChosenSize(size);\n                // Page 4 of 18 is page 1 of 2 at a larger size; keeping the\n                // number would land the reader past the end of the data.\n                setPage(1);\n                onPageSizeChange?.(size);\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <SelectItem key={option} id={String(option)}>\n                  {labels.perPage(option)}\n                </SelectItem>\n              ))}\n            </Select>\n          )}\n        </nav>\n      )}\n    </div>\n  );\n}\n// forwardRef cannot carry a type parameter through a .tsx call expression, so\n// Table<T>'s generic signature is restored here with a type-only cast on the\n// export; it costs nothing at runtime and the inner function is still named\n// \"Table\" for DevTools.\n) as <T>(props: TableProps<T> & RefAttributes<HTMLTableElement>) => ReactElement | null;\n"],"mappings":"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"}