@stealthscale/component-tables 0.1.0 → 0.2.3

package/dist/pages/data-table/data-table.js

@@ -0,0 +1,4299 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as Search, c as pinColumn, d as expandColumn, f as ColumnMenu, h as ColumnFilter, i as selectColumn, l as TablePagination, m as createColumnHelper, n as useDataTable, o as Root, p as ColumnManager, r as Table$1, s as pivot$1, u as PageSize } from "../../shared-DJAOX1dY.js";
+import { c } from "react/compiler-runtime";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import { Popover } from "@stealthscale/component-disclosure";
+import { Portal } from "@stealthscale/component-primitives";
+import { DataList } from "@stealthscale/component-collections";
+import { Field, NativeSelect } from "@stealthscale/component-forms";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Pagination } from "@stealthscale/component-navigation";
+import { Format } from "@stealthscale/component-data";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Columns3Icon, EllipsisVerticalIcon, EyeOffIcon, GripVerticalIcon, GroupIcon, ListFilterIcon, MinusIcon, PinIcon, PinOffIcon, SearchIcon, UngroupIcon, XIcon } from "lucide-react";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { Code, Text } from "@stealthscale/component-typography";
+//#region src/data-table/examples/sales.ts
+/**
+* Lists the quarters in their order.
+*/
+const QUARTERS$1 = [
+	"q1",
+	"q2",
+	"q3",
+	"q4"
+];
+/**
+* Lists the products in the order the orders list them.
+*/
+const PRODUCTS = [
+	"laptops",
+	"monitors",
+	"docks"
+];
+/**
+* Lists the regions in the order the orders list them.
+*/
+const REGIONS = [
+	"north",
+	"south",
+	"west"
+];
+/**
+* Lists each product's price in euros.
+*/
+const PRICES = {
+	docks: 240,
+	laptops: 1450,
+	monitors: 380
+};
+/**
+* Returns whether a region sold a product in a quarter.
+*/
+function sold(region, product, quarter) {
+	if (region === "west" && product === "docks") return false;
+	return !(region === "south" && product === "monitors" && quarter === "q2");
+}
+/**
+* Lists the year's orders: one to three for each region, product and quarter that sold, each of
+* one to four units.
+*/
+const SALES = QUARTERS$1.flatMap((quarter, q) => PRODUCTS.flatMap((product, p) => REGIONS.flatMap((region, r) => sold(region, product, quarter) ? Array.from({ length: 1 + (q + p + r) % 3 }, (_, n) => ({
+	product,
+	quarter,
+	region,
+	value: PRICES[product] * (1 + (q + p + r + n) % 4)
+})) : [])));
+//#endregion
+//#region src/data-table/examples/aggregates.example.tsx
+var aggregates_example_exports = /* @__PURE__ */ __exportAll({
+	Aggregates: () => Aggregates,
+	source: () => source$21
+});
+const AGGREGATES = [
+	"sum",
+	"average",
+	"min",
+	"max",
+	"count"
+];
+const EURO$20 = {
+	currency: "EUR",
+	maximumFractionDigits: 0,
+	style: "currency"
+};
+function Aggregates() {
+	const $ = c(31);
+	const { t } = useWords("data-table");
+	const [aggregate, setAggregate] = useState("average");
+	let t0;
+	if ($[0] !== aggregate || $[1] !== t) {
+		let t1;
+		if ($[3] !== t) {
+			t1 = (sale) => ({
+				quarter: t(`pivot.${sale.quarter}`),
+				region: t(`pivot.${sale.region}`),
+				value: sale.value
+			});
+			$[3] = t;
+			$[4] = t1;
+		} else t1 = $[4];
+		t0 = pivot$1(SALES.map(t1), {
+			aggregate,
+			column: "quarter",
+			format: aggregate === "count" ? void 0 : EURO$20,
+			headers: { region: t("pivot.region") },
+			missingLabel: t("pivot.missing"),
+			rows: ["region"],
+			totalLabel: t("pivot.total"),
+			value: "value"
+		});
+		$[0] = aggregate;
+		$[1] = t;
+		$[2] = t0;
+	} else t0 = $[2];
+	const table = useDataTable(t0);
+	let t1;
+	if ($[5] !== t) {
+		t1 = t("aggregates.label");
+		$[5] = t;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Field.Label, { children: t1 });
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== aggregate) {
+		t3 = (event) => {
+			const { value } = event.currentTarget;
+			setAggregate(AGGREGATES.find((each) => each === value) ?? aggregate);
+		};
+		$[9] = aggregate;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t) {
+		t4 = AGGREGATES.map((each_0) => /* @__PURE__ */ jsx("option", {
+			value: each_0,
+			children: t(`aggregates.${each_0}`)
+		}, each_0));
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== aggregate || $[14] !== t3 || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NativeSelect.Field, {
+			onChange: t3,
+			value: aggregate,
+			children: t4
+		});
+		$[13] = aggregate;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	let t6;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(NativeSelect.Indicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) });
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(NativeSelect.Root, { children: [t5, t6] });
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t2 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Grid.Root, {
+			columns: "fill-xs",
+			children: /* @__PURE__ */ jsxs(Field.Root, {
+				orientation: "horizontal",
+				size: "sm",
+				children: [t2, t7]
+			})
+		});
+		$[20] = t2;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
+	if ($[23] !== t) {
+		t9 = t("aggregates.caption");
+		$[23] = t;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t9,
+			variant: "surface"
+		});
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== t10 || $[28] !== t8 || $[29] !== table) {
+		t11 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t8, t10]
+		});
+		$[27] = t10;
+		$[28] = t8;
+		$[29] = table;
+		$[30] = t11;
+	} else t11 = $[30];
+	return t11;
+}
+const source$21 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { Field, NativeSelect } from \"@stealthscale/component-forms\";\nimport { Grid } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { SALES } from \"./sales.ts\";\n\nconst AGGREGATES = [\"sum\", \"average\", \"min\", \"max\", \"count\"] as const;\n\nconst EURO = { currency: \"EUR\", maximumFractionDigits: 0, style: \"currency\" } as const;\n\nexport function Aggregates(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const [aggregate, setAggregate] = useState<DataTable.PivotAggregate>(\"average\");\n  const table = DataTable.useDataTable(\n    DataTable.pivot(\n      SALES.map((sale) => ({\n        quarter: t(`pivot.${sale.quarter}`),\n        region: t(`pivot.${sale.region}`),\n        value: sale.value,\n      })),\n      {\n        aggregate,\n        column: \"quarter\",\n        format: aggregate === \"count\" ? undefined : EURO,\n        headers: { region: t(\"pivot.region\") },\n        missingLabel: t(\"pivot.missing\"),\n        rows: [\"region\"],\n        totalLabel: t(\"pivot.total\"),\n        value: \"value\",\n      },\n    ),\n  );\n\n  return (\n    <DataTable.Root table={table}>\n      <Grid.Root columns=\"fill-xs\">\n        <Field.Root orientation=\"horizontal\" size=\"sm\">\n          <Field.Label>{t(\"aggregates.label\")}</Field.Label>\n          <NativeSelect.Root>\n            <NativeSelect.Field\n              onChange={(event) => {\n                const { value } = event.currentTarget;\n\n                setAggregate(AGGREGATES.find((each) => each === value) ?? aggregate);\n              }}\n              value={aggregate}\n            >\n              {AGGREGATES.map((each) => (\n                <option key={each} value={each}>\n                  {t(`aggregates.${each}`)}\n                </option>\n              ))}\n            </NativeSelect.Field>\n            <NativeSelect.Indicator>\n              <ChevronDownIcon />\n            </NativeSelect.Indicator>\n          </NativeSelect.Root>\n        </Field.Root>\n      </Grid.Root>\n      <DataTable.Table caption={t(\"aggregates.caption\")} variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/claims.ts
+/**
+* Lists the categories in the order a picker offers them.
+*/
+const CATEGORIES = [
+	"travel",
+	"meals",
+	"software",
+	"office"
+];
+/**
+* Lists the claims to review, in the order they were filed.
+*/
+const FILED = [
+	{
+		amount: 412.5,
+		category: "travel",
+		id: "EX-1041",
+		topic: "flight"
+	},
+	{
+		amount: 186,
+		category: "travel",
+		id: "EX-1042",
+		topic: "hotel"
+	},
+	{
+		amount: 64.8,
+		category: "meals",
+		id: "EX-1043",
+		topic: "dinner"
+	},
+	{
+		amount: 38.2,
+		category: "travel",
+		id: "EX-1044",
+		topic: "taxi"
+	},
+	{
+		amount: 129,
+		category: "software",
+		id: "EX-1045",
+		topic: "licence"
+	},
+	{
+		amount: 249,
+		category: "office",
+		id: "EX-1046",
+		topic: "monitor"
+	}
+];
+/**
+* Returns a claim with an edit written into it: an amount as a number, a category among the
+* categories, and a description as typed.
+*
+* @param claim - The claim as it was before the edit.
+* @param field - The claim's field the edit changes, its column's id.
+* @param text - The text saved.
+* @returns The claim with the field changed.
+*/
+function writtenTo(claim, field, text) {
+	return {
+		amount: field === "amount" ? Number(text) : claim.amount,
+		category: CATEGORIES.find((each) => field === "category" && each === text) ?? claim.category,
+		description: field === "description" ? text : claim.description,
+		id: claim.id
+	};
+}
+/**
+* Lists the fields of a claim a person edits.
+*/
+const FIELDS = [
+	"amount",
+	"category",
+	"description"
+];
+/**
+* Returns the number of fields in which two lists of the same claims differ, claim by claim.
+*
+* @param rows - The claims as edited.
+* @param saved - The claims as last saved, in the same order.
+* @returns The number of changed fields.
+*/
+function changesOf(rows, saved) {
+	return rows.reduce((count, row, at) => count + FIELDS.filter((field) => row[field] !== saved[at]?.[field]).length, 0);
+}
+/**
+* Returns whether a claim's field differs from its last saved value.
+*
+* @param rows - The claims as edited.
+* @param saved - The claims as last saved, in the same order.
+* @param id - Reference of the claim.
+* @param field - The field, its column's id.
+* @returns Whether the field changed, false for a field no person edits.
+*/
+function differs(rows, saved, id, field) {
+	const at = rows.findIndex((row) => row.id === id);
+	return FIELDS.some((each) => each === field && rows[at]?.[each] !== saved[at]?.[each]);
+}
+//#endregion
+//#region src/data-table/examples/claims.example.tsx
+var claims_example_exports = /* @__PURE__ */ __exportAll({
+	Claims: () => Claims,
+	source: () => source$20
+});
+const column$19 = createColumnHelper();
+const EURO$19 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$18(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$19,
+		value
+	});
+}
+function claimOf(id) {
+	return /* @__PURE__ */ jsx(Code, {
+		size: "sm",
+		children: id
+	});
+}
+function picker(editor, names) {
+	return /* @__PURE__ */ jsx(NativeSelect.Root, {
+		size: editor.size,
+		children: /* @__PURE__ */ jsx(NativeSelect.Field, {
+			"aria-label": editor["aria-label"],
+			id: editor.id,
+			onChange: (event) => {
+				editor.commit(event.currentTarget.value);
+			},
+			value: editor.value,
+			children: CATEGORIES.map((category) => /* @__PURE__ */ jsx("option", {
+				value: category,
+				children: names[category]
+			}, category))
+		})
+	});
+}
+function Claims() {
+	const $ = c(58);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = (each) => [each, t(`claims.${each}`)];
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const names = Object.fromEntries(CATEGORIES.map(t0));
+	let t1;
+	if ($[2] !== t) {
+		t1 = () => FILED.map((filed) => ({
+			amount: filed.amount,
+			category: filed.category,
+			description: t(`claims.${filed.topic}`),
+			id: filed.id
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [saved, setSaved] = useState(t1);
+	let t2;
+	if ($[4] !== saved) {
+		t2 = () => saved.map(_temp$19);
+		$[4] = saved;
+		$[5] = t2;
+	} else t2 = $[5];
+	const [rows, setRows] = useState(t2);
+	let t3;
+	if ($[6] !== t) {
+		t3 = (text) => text.trim() === "" ? t("claims.required") : void 0;
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = (text_0) => /^\d+(\.\d{1,2})?$/u.test(text_0) ? void 0 : t("claims.invalid");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = column$19.columns([
+		column$19.accessor("id", {
+			cell: _temp2$19,
+			header: t("claims.claim"),
+			meta: { rowHeader: true }
+		}),
+		column$19.accessor("description", {
+			header: t("claims.description"),
+			meta: { edit: { validate: t3 } }
+		}),
+		column$19.accessor("category", {
+			cell: (cell_0) => names[cell_0.getValue()],
+			header: t("claims.category"),
+			meta: { edit: { editor: (editor) => picker(editor, names) } }
+		}),
+		column$19.accessor("amount", {
+			cell: _temp3$8,
+			header: t("claims.amount"),
+			meta: {
+				edit: { validate: t4 },
+				numeric: true
+			}
+		})
+	]);
+	let t6;
+	if ($[10] !== rows || $[11] !== t5) {
+		t6 = {
+			columns: t5,
+			data: rows,
+			getRowId: _temp4$4
+		};
+		$[10] = rows;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	const table = useDataTable(t6);
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("claims.caption");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== rows || $[16] !== setRows) {
+		t8 = (edit) => {
+			setRows(rows.map((row_0) => row_0.id === edit.rowId ? writtenTo(row_0, edit.columnId, edit.value) : row_0));
+		};
+		$[15] = rows;
+		$[16] = setRows;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== rows || $[19] !== saved) {
+		t9 = (id, field) => differs(rows, saved, id, field);
+		$[18] = rows;
+		$[19] = saved;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== t) {
+		t10 = t("claims.unsaved");
+		$[21] = t;
+		$[22] = t10;
+	} else t10 = $[22];
+	let t11;
+	if ($[23] !== t10 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t7,
+			grid: true,
+			onCellEdit: t8,
+			unsaved: t9,
+			unsavedLabel: t10,
+			variant: "surface"
+		});
+		$[23] = t10;
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== rows || $[29] !== saved || $[30] !== t) {
+		t12 = t("claims.changes", { count: changesOf(rows, saved) });
+		$[28] = rows;
+		$[29] = saved;
+		$[30] = t;
+		$[31] = t12;
+	} else t12 = $[31];
+	let t13;
+	if ($[32] !== t12) {
+		t13 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: t12
+		});
+		$[32] = t12;
+		$[33] = t13;
+	} else t13 = $[33];
+	let t14;
+	if ($[34] !== saved || $[35] !== setRows) {
+		t14 = () => {
+			setRows(saved);
+		};
+		$[34] = saved;
+		$[35] = setRows;
+		$[36] = t14;
+	} else t14 = $[36];
+	let t15;
+	if ($[37] !== t) {
+		t15 = t("claims.discard");
+		$[37] = t;
+		$[38] = t15;
+	} else t15 = $[38];
+	let t16;
+	if ($[39] !== t14 || $[40] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Button, {
+			onClick: t14,
+			variant: "ghost",
+			children: t15
+		});
+		$[39] = t14;
+		$[40] = t15;
+		$[41] = t16;
+	} else t16 = $[41];
+	let t17;
+	if ($[42] !== rows || $[43] !== setSaved) {
+		t17 = () => {
+			setSaved(rows);
+		};
+		$[42] = rows;
+		$[43] = setSaved;
+		$[44] = t17;
+	} else t17 = $[44];
+	let t18;
+	if ($[45] !== t) {
+		t18 = t("claims.save");
+		$[45] = t;
+		$[46] = t18;
+	} else t18 = $[46];
+	let t19;
+	if ($[47] !== t17 || $[48] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Button, {
+			onClick: t17,
+			children: t18
+		});
+		$[47] = t17;
+		$[48] = t18;
+		$[49] = t19;
+	} else t19 = $[49];
+	let t20;
+	if ($[50] !== t13 || $[51] !== t16 || $[52] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			gap: "sm",
+			wrap: true,
+			children: [
+				t13,
+				t16,
+				t19
+			]
+		});
+		$[50] = t13;
+		$[51] = t16;
+		$[52] = t19;
+		$[53] = t20;
+	} else t20 = $[53];
+	let t21;
+	if ($[54] !== t11 || $[55] !== t20 || $[56] !== table) {
+		t21 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t11, t20]
+		});
+		$[54] = t11;
+		$[55] = t20;
+		$[56] = table;
+		$[57] = t21;
+	} else t21 = $[57];
+	return t21;
+}
+function _temp4$4(row) {
+	return row.id;
+}
+function _temp3$8(cell_1) {
+	return amountOf$18(cell_1.getValue());
+}
+function _temp2$19(cell) {
+	return claimOf(cell.getValue());
+}
+function _temp$19(claim) {
+	return claim.id === "EX-1044" ? writtenTo(claim, "amount", "42.6") : claim;
+}
+const source$20 = "import { type ReactElement, type ReactNode, useState } from \"react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Format } from \"@stealthscale/component-data\";\nimport { NativeSelect } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Code, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { CATEGORIES, changesOf, type Claim, differs, FILED, writtenTo } from \"./claims.ts\";\n\nconst column = DataTable.createColumnHelper<Claim>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nfunction claimOf(id: string): ReactElement {\n  return <Code size=\"sm\">{id}</Code>;\n}\n\nfunction picker(editor: DataTable.EditorProps, names: Readonly<Record<string, string>>): ReactNode {\n  return (\n    <NativeSelect.Root size={editor.size}>\n      <NativeSelect.Field\n        aria-label={editor[\"aria-label\"]}\n        id={editor.id}\n        onChange={(event) => {\n          editor.commit(event.currentTarget.value);\n        }}\n        value={editor.value}\n      >\n        {CATEGORIES.map((category) => (\n          <option key={category} value={category}>\n            {names[category]}\n          </option>\n        ))}\n      </NativeSelect.Field>\n    </NativeSelect.Root>\n  );\n}\n\nexport function Claims(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const names = Object.fromEntries(CATEGORIES.map((each) => [each, t(`claims.${each}`)]));\n  const [saved, setSaved] = useState(() =>\n    FILED.map((filed) => ({\n      amount: filed.amount,\n      category: filed.category,\n      description: t(`claims.${filed.topic}`),\n      id: filed.id,\n    })),\n  );\n  const [rows, setRows] = useState(() =>\n    saved.map((claim) => (claim.id === \"EX-1044\" ? writtenTo(claim, \"amount\", \"42.6\") : claim)),\n  );\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"id\", {\n        cell: (cell) => claimOf(cell.getValue()),\n        header: t(\"claims.claim\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"description\", {\n        header: t(\"claims.description\"),\n        meta: {\n          edit: { validate: (text) => (text.trim() === \"\" ? t(\"claims.required\") : undefined) },\n        },\n      }),\n      column.accessor(\"category\", {\n        cell: (cell) => names[cell.getValue()],\n        header: t(\"claims.category\"),\n        meta: { edit: { editor: (editor) => picker(editor, names) } },\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"claims.amount\"),\n        meta: {\n          edit: {\n            validate: (text) => (/^\\d+(\\.\\d{1,2})?$/u.test(text) ? undefined : t(\"claims.invalid\")),\n          },\n          numeric: true,\n        },\n      }),\n    ]),\n    data: rows,\n    getRowId: (row) => row.id,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"claims.caption\")}\n        grid\n        onCellEdit={(edit) => {\n          setRows(\n            rows.map((row) =>\n              row.id === edit.rowId ? writtenTo(row, edit.columnId, edit.value) : row,\n            ),\n          );\n        }}\n        unsaved={(id, field) => differs(rows, saved, id, field)}\n        unsavedLabel={t(\"claims.unsaved\")}\n        variant=\"surface\"\n      />\n      <Stack direction=\"row\" gap=\"sm\" wrap>\n        <Text as=\"output\">{t(\"claims.changes\", { count: changesOf(rows, saved) })}</Text>\n        <Button\n          onClick={() => {\n            setRows(saved);\n          }}\n          variant=\"ghost\"\n        >\n          {t(\"claims.discard\")}\n        </Button>\n        <Button\n          onClick={() => {\n            setSaved(rows);\n          }}\n        >\n          {t(\"claims.save\")}\n        </Button>\n      </Stack>\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/payouts.ts
+/**
+* Lists the quarter's payouts in the order they were first made.
+*/
+const PAYOUTS = [
+	{
+		account: "bridgewater",
+		amount: 4120,
+		region: "benelux",
+		transfers: 12
+	},
+	{
+		account: "halden",
+		amount: 880.4,
+		region: "nordics",
+		transfers: 3
+	},
+	{
+		account: "perrin",
+		amount: 12500,
+		region: "benelux",
+		transfers: 27
+	},
+	{
+		account: "kestrel",
+		amount: 2310.75,
+		region: "nordics",
+		transfers: 8
+	},
+	{
+		account: "linnet",
+		amount: 640,
+		region: "iberia",
+		transfers: 2
+	}
+];
+//#endregion
+//#region src/data-table/examples/columns.example.tsx
+var columns_example_exports = /* @__PURE__ */ __exportAll({
+	Columns: () => Columns,
+	source: () => source$19
+});
+const column$18 = createColumnHelper();
+const EURO$18 = {
+	currency: "EUR",
+	style: "currency"
+};
+const SHARE = {
+	maximumFractionDigits: 1,
+	style: "percent"
+};
+const TOTAL = PAYOUTS.reduce((sum, payout) => sum + payout.amount, 0);
+function amountOf$17(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$18,
+		value
+	});
+}
+function shareOf(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: SHARE,
+		value
+	});
+}
+function Columns() {
+	const $ = c(21);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		let t1;
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(MinusIcon, { strokeWidth: 3 });
+			t2 = /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 });
+			$[2] = t1;
+			$[3] = t2;
+		} else {
+			t1 = $[2];
+			t2 = $[3];
+		}
+		t0 = column$18.columns([
+			selectColumn({
+				allLabel: t("selection.all"),
+				indeterminateIndicator: t1,
+				indicator: t2,
+				label: (payout) => t("selection.one", { account: t(payout.account) })
+			}),
+			column$18.accessor("account", {
+				cell: (cell) => t(cell.getValue()),
+				header: t("account"),
+				meta: { rowHeader: true },
+				size: 200
+			}),
+			column$18.accessor("transfers", {
+				header: t("transfers"),
+				meta: { numeric: true },
+				size: 120
+			}),
+			column$18.accessor(_temp$18, {
+				cell: _temp2$18,
+				header: t("details.average"),
+				id: "average",
+				meta: { numeric: true },
+				size: 180
+			}),
+			column$18.accessor(_temp3$7, {
+				cell: _temp4$3,
+				header: t("columns.share"),
+				id: "share",
+				meta: { numeric: true },
+				size: 110
+			}),
+			column$18.accessor("amount", {
+				cell: _temp5,
+				header: t("amount"),
+				meta: { numeric: true },
+				size: 140
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			maxSize: 360,
+			minSize: 80
+		};
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { columnPinning: {
+			end: [],
+			start: ["select", "account"]
+		} };
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0) {
+		t3 = {
+			columns: t0,
+			data: PAYOUTS,
+			defaultColumn: t1,
+			enableColumnResizing: true,
+			getRowId: _temp6,
+			initialState: t2
+		};
+		$[6] = t0;
+		$[7] = t3;
+	} else t3 = $[7];
+	const table = useDataTable(t3);
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("columns.caption");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	let t6;
+	if ($[10] !== t) {
+		t5 = (name) => t("columns.resize", { column: name });
+		t6 = (size) => t("columns.size", { size });
+		$[10] = t;
+		$[11] = t5;
+		$[12] = t6;
+	} else {
+		t5 = $[11];
+		t6 = $[12];
+	}
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t4,
+			resizeLabel: t5,
+			resizeValue: t6,
+			sortIndicator: t7,
+			variant: "surface"
+		});
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t8 || $[19] !== table) {
+		t9 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t8
+		});
+		$[18] = t8;
+		$[19] = table;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+function _temp6(row) {
+	return row.account;
+}
+function _temp5(cell_2) {
+	return amountOf$17(cell_2.getValue());
+}
+function _temp4$3(cell_1) {
+	return shareOf(cell_1.getValue());
+}
+function _temp3$7(payout_1) {
+	return payout_1.amount / TOTAL;
+}
+function _temp2$18(cell_0) {
+	return amountOf$17(cell_0.getValue());
+}
+function _temp$18(payout_0) {
+	return payout_0.amount / payout_0.transfers;
+}
+const source$19 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, CheckIcon, MinusIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nconst SHARE = { maximumFractionDigits: 1, style: \"percent\" } as const;\n\nconst TOTAL = PAYOUTS.reduce((sum, payout) => sum + payout.amount, 0);\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nfunction shareOf(value: number): ReactElement {\n  return <Format.Number options={SHARE} value={value} />;\n}\n\nexport function Columns(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      DataTable.selectColumn<Payout>({\n        allLabel: t(\"selection.all\"),\n        indeterminateIndicator: <MinusIcon strokeWidth={3} />,\n        indicator: <CheckIcon strokeWidth={3} />,\n        label: (payout) => t(\"selection.one\", { account: t(payout.account) }),\n      }),\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n        size: 200,\n      }),\n      column.accessor(\"transfers\", { header: t(\"transfers\"), meta: { numeric: true }, size: 120 }),\n      column.accessor((payout) => payout.amount / payout.transfers, {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"details.average\"),\n        id: \"average\",\n        meta: { numeric: true },\n        size: 180,\n      }),\n      column.accessor((payout) => payout.amount / TOTAL, {\n        cell: (cell) => shareOf(cell.getValue()),\n        header: t(\"columns.share\"),\n        id: \"share\",\n        meta: { numeric: true },\n        size: 110,\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n        size: 140,\n      }),\n    ]),\n    data: PAYOUTS,\n    defaultColumn: { maxSize: 360, minSize: 80 },\n    enableColumnResizing: true,\n    getRowId: (row) => row.account,\n    initialState: { columnPinning: { end: [], start: [\"select\", \"account\"] } },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"columns.caption\")}\n        resizeLabel={(name) => t(\"columns.resize\", { column: name })}\n        resizeValue={(size) => t(\"columns.size\", { size })}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/details.example.tsx
+var details_example_exports = /* @__PURE__ */ __exportAll({
+	Details: () => Details,
+	source: () => source$18
+});
+const column$17 = createColumnHelper();
+const EURO$17 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$16(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$17,
+		value
+	});
+}
+function detailOf(payout, words) {
+	return /* @__PURE__ */ jsxs(DataList.Root, {
+		orientation: "horizontal",
+		children: [/* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: words.transfers }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: payout.transfers })] }), /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: words.average }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: amountOf$16(payout.amount / payout.transfers) })] })]
+	});
+}
+function Details() {
+	const $ = c(14);
+	const { t } = useWords("data-table");
+	const words = {
+		average: t("details.average"),
+		transfers: t("transfers")
+	};
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "1em" });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = (payout_0) => t("details.one", { account: t(payout_0.account) });
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = (cell) => t(cell.getValue());
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = column$17.columns([
+		expandColumn({
+			detail: (payout) => detailOf(payout, words),
+			header: t("details.header"),
+			indicator: t0,
+			label: t1
+		}),
+		column$17.accessor("account", {
+			cell: t2,
+			header: t("account"),
+			meta: { rowHeader: true }
+		}),
+		column$17.accessor("amount", {
+			cell: _temp$17,
+			header: t("amount"),
+			meta: { numeric: true }
+		})
+	]);
+	let t4;
+	if ($[5] !== t3) {
+		t4 = {
+			columns: t3,
+			data: PAYOUTS,
+			getRowCanExpand: _temp2$17,
+			getRowId: _temp3$6
+		};
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	const table = useDataTable(t4);
+	let t5;
+	if ($[7] !== t) {
+		t5 = t("details.caption");
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t5,
+			variant: "surface"
+		});
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t6 || $[12] !== table) {
+		t7 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t6
+		});
+		$[11] = t6;
+		$[12] = table;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
+}
+function _temp3$6(row) {
+	return row.account;
+}
+function _temp2$17() {
+	return true;
+}
+function _temp$17(cell_0) {
+	return amountOf$16(cell_0.getValue());
+}
+const source$18 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\ninterface Words {\n  readonly average: string;\n  readonly transfers: string;\n}\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nfunction detailOf(payout: Payout, words: Words): ReactElement {\n  return (\n    <DataList.Root orientation=\"horizontal\">\n      <DataList.Item>\n        <DataList.ItemLabel>{words.transfers}</DataList.ItemLabel>\n        <DataList.ItemValue>{payout.transfers}</DataList.ItemValue>\n      </DataList.Item>\n      <DataList.Item>\n        <DataList.ItemLabel>{words.average}</DataList.ItemLabel>\n        <DataList.ItemValue>{amountOf(payout.amount / payout.transfers)}</DataList.ItemValue>\n      </DataList.Item>\n    </DataList.Root>\n  );\n}\n\nexport function Details(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const words = { average: t(\"details.average\"), transfers: t(\"transfers\") };\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      DataTable.expandColumn<Payout>({\n        detail: (payout) => detailOf(payout, words),\n        header: t(\"details.header\"),\n        indicator: <ChevronRightIcon size=\"1em\" />,\n        label: (payout) => t(\"details.one\", { account: t(payout.account) }),\n      }),\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowCanExpand: () => true,\n    getRowId: (row) => row.account,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table caption={t(\"details.caption\")} variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/transfers.ts
+/**
+* Lists each account with its region, in the order the transfers take turns.
+*/
+const ACCOUNTS = [
+	["bridgewater", "benelux"],
+	["halden", "nordics"],
+	["perrin", "benelux"],
+	["kestrel", "nordics"],
+	["linnet", "iberia"]
+];
+/**
+* Returns the state of the transfer at a place: of every six, the third is pending, the fifth
+* failed and the rest settled.
+*/
+function stateOf(at) {
+	if (at % 6 === 2) return "pending";
+	return at % 6 === 4 ? "failed" : "settled";
+}
+/**
+* Returns transfers to the five accounts in turn, newest first.
+*
+* @param count - Number of transfers.
+* @param newest - Number in the newest transfer's reference. Each older reference counts one down.
+* @returns `count` transfers, newest first.
+*/
+function transfersOf(count, newest) {
+	return Array.from({ length: Math.ceil(count / ACCOUNTS.length) }, (_, round) => ACCOUNTS.map(([account, region], turn) => ({
+		account,
+		at: round * ACCOUNTS.length + turn,
+		region
+	}))).flat().slice(0, count).map(({ account, at, region }) => ({
+		account,
+		amount: 120 + at * 373 % 4200,
+		reference: `TR-${String(newest - at)}`,
+		region,
+		state: stateOf(at)
+	}));
+}
+/**
+* Lists the quarter's transfers, newest first.
+*/
+const TRANSFERS = transfersOf(48, 1048);
+/**
+* Lists the twelve newest transfers, for the examples that show every row.
+*/
+const RECENT = TRANSFERS.slice(0, 12);
+/**
+* Arrival before the first page, for no request.
+*/
+const NONE = {
+	key: "",
+	page: {
+		count: 0,
+		rows: []
+	}
+};
+/**
+* Returns the page of transfers a request asks for.
+*
+* @param request - The page, its size, the search and the sort.
+* @returns The transfers on the page and the number that match.
+*/
+function pageOf({ pageIndex, pageSize, search, sort }) {
+	const found = TRANSFERS.filter((transfer) => transfer.reference.toLowerCase().includes(search.toLowerCase()));
+	const sorted = sort?.id === "amount" ? found.toSorted((a, b) => sort.desc ? b.amount - a.amount : a.amount - b.amount) : found;
+	return {
+		count: found.length,
+		rows: sorted.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)
+	};
+}
+/**
+* Resolves a request with its page after the delay.
+*
+* @param request - The page, its size, the search and the sort.
+* @returns The page, once the delay has passed.
+*/
+function fetchPage(request) {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve(pageOf(request));
+		}, 400);
+	});
+}
+/**
+* Requests a page whenever the request changes, and returns the last page that arrived.
+*
+* @remarks
+*   A page that arrives for a request a newer one replaced is dropped.
+* @param request - The page, its size, the search and the sort.
+* @returns The last page that arrived and whether a newer request waits.
+*/
+function useServerPage(request) {
+	const $ = c(17);
+	const { pageIndex, pageSize, search, sort } = request;
+	const id = sort?.id;
+	const desc = sort?.desc === true;
+	let t0;
+	if ($[0] !== desc || $[1] !== id || $[2] !== pageIndex || $[3] !== pageSize || $[4] !== search) {
+		t0 = JSON.stringify([
+			pageIndex,
+			pageSize,
+			search,
+			id,
+			desc
+		]);
+		$[0] = desc;
+		$[1] = id;
+		$[2] = pageIndex;
+		$[3] = pageSize;
+		$[4] = search;
+		$[5] = t0;
+	} else t0 = $[5];
+	const key = t0;
+	const [arrived, setArrived] = useState(NONE);
+	let t1;
+	let t2;
+	if ($[6] !== desc || $[7] !== id || $[8] !== key || $[9] !== pageIndex || $[10] !== pageSize || $[11] !== search) {
+		t1 = () => {
+			let current = true;
+			const sorted = id === void 0 ? void 0 : {
+				desc,
+				id
+			};
+			(async function load() {
+				const page = await fetchPage({
+					pageIndex,
+					pageSize,
+					search,
+					sort: sorted
+				});
+				if (current) setArrived({
+					key,
+					page
+				});
+			})();
+			return () => {
+				current = false;
+			};
+		};
+		t2 = [
+			desc,
+			id,
+			key,
+			pageIndex,
+			pageSize,
+			search
+		];
+		$[6] = desc;
+		$[7] = id;
+		$[8] = key;
+		$[9] = pageIndex;
+		$[10] = pageSize;
+		$[11] = search;
+		$[12] = t1;
+		$[13] = t2;
+	} else {
+		t1 = $[12];
+		t2 = $[13];
+	}
+	useEffect(t1, t2);
+	const t3 = arrived.key !== key;
+	let t4;
+	if ($[14] !== arrived.page || $[15] !== t3) {
+		t4 = {
+			loading: t3,
+			page: arrived.page
+		};
+		$[14] = arrived.page;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+}
+//#endregion
+//#region src/data-table/examples/endless.example.tsx
+var endless_example_exports = /* @__PURE__ */ __exportAll({
+	Endless: () => Endless,
+	source: () => source$17
+});
+const column$16 = createColumnHelper();
+const EURO$16 = {
+	currency: "EUR",
+	style: "currency"
+};
+const BATCH = 50;
+const ARCHIVE = transfersOf(1e3, 11e3);
+function amountOf$15(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$16,
+		value
+	});
+}
+function Endless() {
+	const $ = c(25);
+	const { t } = useWords("data-table");
+	const [rows, setRows] = useState(_temp$16);
+	const [loading, setLoading] = useState(false);
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$16.columns([
+			column$16.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: { rowHeader: true },
+				size: 150
+			}),
+			column$16.accessor((transfer) => t(transfer.account), {
+				header: t("account"),
+				id: "account",
+				size: 230
+			}),
+			column$16.accessor("amount", {
+				cell: _temp2$16,
+				header: t("amount"),
+				meta: { numeric: true },
+				size: 176
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== rows || $[3] !== t0) {
+		t1 = {
+			columns: t0,
+			data: rows,
+			getRowId: _temp3$5
+		};
+		$[2] = rows;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	const table = useDataTable(t1);
+	let t2;
+	if ($[5] !== t) {
+		t2 = t("endless.caption");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== rows.length) {
+		t3 = () => {
+			if (rows.length === ARCHIVE.length) return;
+			setLoading(true);
+			setTimeout(() => {
+				setRows(ARCHIVE.slice(0, rows.length + BATCH));
+				setLoading(false);
+			}, 400);
+		};
+		$[7] = rows.length;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		t5 = { maxBlockSize: "24rem" };
+		$[9] = t4;
+		$[10] = t5;
+	} else {
+		t4 = $[9];
+		t5 = $[10];
+	}
+	let t6;
+	if ($[11] !== loading || $[12] !== t2 || $[13] !== t3) {
+		t6 = /* @__PURE__ */ jsx(Table$1, {
+			"aria-busy": loading,
+			caption: t2,
+			onEndReached: t3,
+			sortIndicator: t4,
+			style: t5,
+			variant: "surface",
+			windowed: true
+		});
+		$[11] = loading;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== loading || $[16] !== rows.length || $[17] !== t) {
+		t7 = loading ? t("endless.loading") : t("endless.loaded", {
+			count: rows.length,
+			total: ARCHIVE.length
+		});
+		$[15] = loading;
+		$[16] = rows.length;
+		$[17] = t;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: t7
+		});
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t6 || $[22] !== t8 || $[23] !== table) {
+		t9 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t6, t8]
+		});
+		$[21] = t6;
+		$[22] = t8;
+		$[23] = table;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
+}
+function _temp3$5(row) {
+	return row.reference;
+}
+function _temp2$16(cell) {
+	return amountOf$15(cell.getValue());
+}
+function _temp$16() {
+	return ARCHIVE.slice(0, BATCH);
+}
+const source$17 = "import { type ReactElement, useState } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { DELAY } from \"./server.ts\";\nimport { type Transfer, transfersOf } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nconst BATCH = 50;\n\nconst ARCHIVE = transfersOf(1000, 11_000);\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Endless(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const [rows, setRows] = useState(() => ARCHIVE.slice(0, BATCH));\n  const [loading, setLoading] = useState(false);\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", {\n        header: t(\"ledger.reference\"),\n        meta: { rowHeader: true },\n        size: 150,\n      }),\n      column.accessor((transfer) => t(transfer.account), {\n        header: t(\"account\"),\n        id: \"account\",\n        size: 230,\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n        size: 176,\n      }),\n    ]),\n    data: rows,\n    getRowId: (row) => row.reference,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        aria-busy={loading}\n        caption={t(\"endless.caption\")}\n        onEndReached={() => {\n          if (rows.length === ARCHIVE.length) return;\n\n          setLoading(true);\n          setTimeout(() => {\n            setRows(ARCHIVE.slice(0, rows.length + BATCH));\n            setLoading(false);\n          }, DELAY);\n        }}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        style={{ maxBlockSize: \"24rem\" }}\n        variant=\"surface\"\n        windowed\n      />\n      <Text as=\"output\">\n        {loading\n          ? t(\"endless.loading\")\n          : t(\"endless.loaded\", { count: rows.length, total: ARCHIVE.length })}\n      </Text>\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/filters.example.tsx
+var filters_example_exports = /* @__PURE__ */ __exportAll({
+	Filters: () => Filters,
+	source: () => source$16
+});
+const column$15 = createColumnHelper();
+const EURO$15 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$14(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$15,
+		value
+	});
+}
+function filterOf(each, words) {
+	return /* @__PURE__ */ jsx(ColumnFilter, {
+		...words,
+		checkIndicator: /* @__PURE__ */ jsx(CheckIcon, {}),
+		column: each,
+		indicator: /* @__PURE__ */ jsx(ListFilterIcon, { size: "1em" })
+	});
+}
+function Filters() {
+	const $ = c(32);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("filters.clear");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] !== t) {
+		t1 = (name, active) => t(active ? "filters.active" : "filters.filter", { column: name });
+		t2 = t("filters.max");
+		$[2] = t;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("filters.min");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t0 || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = {
+			clearLabel: t0,
+			label: t1,
+			maxLabel: t2,
+			minLabel: t3
+		};
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	const words = t4;
+	let t5;
+	if ($[12] !== t) {
+		t5 = column$15.columns([
+			column$15.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: {
+					filter: "text",
+					rowHeader: true
+				}
+			}),
+			column$15.accessor((transfer) => t(transfer.account), {
+				filterFn: "arrHas",
+				header: t("account"),
+				id: "account",
+				meta: { filter: "select" }
+			}),
+			column$15.accessor((transfer_0) => t(`ledger.${transfer_0.state}`), {
+				filterFn: "arrHas",
+				header: t("ledger.state"),
+				id: "state",
+				meta: { filter: "select" }
+			}),
+			column$15.accessor("amount", {
+				cell: _temp$15,
+				header: t("amount"),
+				meta: {
+					filter: "range",
+					numeric: true
+				}
+			})
+		]);
+		$[12] = t;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t5) {
+		t6 = {
+			columns: t5,
+			data: RECENT,
+			getRowId: _temp2$15
+		};
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	const table = useDataTable(t6);
+	let t7;
+	if ($[16] !== t) {
+		t7 = t("filters.caption");
+		$[16] = t;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== words) {
+		t8 = (each) => filterOf(each, words);
+		$[18] = words;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t) {
+		t9 = t("filters.empty");
+		$[20] = t;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t) {
+		t10 = (count, total) => t("filters.found", {
+			count,
+			total
+		});
+		$[22] = t;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t10 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t7,
+			columnActions: t8,
+			empty: t9,
+			filteredAnnouncement: t10,
+			variant: "surface"
+		});
+		$[24] = t10;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t11;
+	} else t11 = $[28];
+	let t12;
+	if ($[29] !== t11 || $[30] !== table) {
+		t12 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t11
+		});
+		$[29] = t11;
+		$[30] = table;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
+}
+function _temp2$15(row) {
+	return row.reference;
+}
+function _temp$15(cell) {
+	return amountOf$14(cell.getValue());
+}
+const source$16 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, ListFilterIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { RECENT, type Transfer } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\ninterface FilterWords {\n  readonly clearLabel: string;\n  readonly label: (column: string, active: boolean) => string;\n  readonly maxLabel: string;\n  readonly minLabel: string;\n}\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nfunction filterOf(each: DataTable.TableColumn, words: FilterWords): ReactElement {\n  return (\n    <DataTable.ColumnFilter\n      {...words}\n      checkIndicator={<CheckIcon />}\n      column={each}\n      indicator={<ListFilterIcon size=\"1em\" />}\n    />\n  );\n}\n\nexport function Filters(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const words: FilterWords = {\n    clearLabel: t(\"filters.clear\"),\n    label: (name, active) => t(active ? \"filters.active\" : \"filters.filter\", { column: name }),\n    maxLabel: t(\"filters.max\"),\n    minLabel: t(\"filters.min\"),\n  };\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", {\n        header: t(\"ledger.reference\"),\n        meta: { filter: \"text\", rowHeader: true },\n      }),\n      column.accessor((transfer) => t(transfer.account), {\n        filterFn: \"arrHas\",\n        header: t(\"account\"),\n        id: \"account\",\n        meta: { filter: \"select\" },\n      }),\n      column.accessor((transfer) => t(`ledger.${transfer.state}`), {\n        filterFn: \"arrHas\",\n        header: t(\"ledger.state\"),\n        id: \"state\",\n        meta: { filter: \"select\" },\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { filter: \"range\", numeric: true },\n      }),\n    ]),\n    data: RECENT,\n    getRowId: (row) => row.reference,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"filters.caption\")}\n        columnActions={(each) => filterOf(each, words)}\n        empty={t(\"filters.empty\")}\n        filteredAnnouncement={(count, total) => t(\"filters.found\", { count, total })}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/forecast.ts
+/**
+* Lists the departments by the size of their budget, the largest first.
+*/
+const FORECASTS = [
+	{
+		department: "engineering",
+		q1: 124e4,
+		q2: 131e4,
+		q3: 1355e3,
+		q4: 142e4
+	},
+	{
+		department: "sales",
+		q1: 72e4,
+		q2: 76e4,
+		q3: 79e4,
+		q4: 845e3
+	},
+	{
+		department: "marketing",
+		q1: 48e4,
+		q2: 525e3,
+		q3: 61e4,
+		q4: 695e3
+	},
+	{
+		department: "design",
+		q1: 31e4,
+		q2: 318e3,
+		q3: 322500,
+		q4: 34e4
+	},
+	{
+		department: "support",
+		q1: 265e3,
+		q2: 27e4,
+		q3: 281e3,
+		q4: 295e3
+	},
+	{
+		department: "finance",
+		q1: 19e4,
+		q2: 19e4,
+		q3: 196e3,
+		q4: 205e3
+	},
+	{
+		department: "people",
+		q1: 15e4,
+		q2: 162e3,
+		q3: 158e3,
+		q4: 171e3
+	},
+	{
+		department: "legal",
+		q1: 95e3,
+		q2: 98500,
+		q3: 101e3,
+		q4: 12e4
+	}
+];
+//#endregion
+//#region src/data-table/examples/grid.example.tsx
+var grid_example_exports = /* @__PURE__ */ __exportAll({
+	Grid: () => Grid$1,
+	source: () => source$15
+});
+const column$14 = createColumnHelper();
+const EURO$14 = {
+	currency: "EUR",
+	maximumFractionDigits: 0,
+	style: "currency"
+};
+const QUARTERS = [
+	"q1",
+	"q2",
+	"q3",
+	"q4"
+];
+function amountOf$13(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$14,
+		value
+	});
+}
+function Grid$1() {
+	const $ = c(12);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$14.columns([column$14.accessor((row) => t(`grid.${row.department}`), {
+			header: t("grid.department"),
+			id: "department",
+			meta: { rowHeader: true }
+		}), ...QUARTERS.map((quarter) => column$14.accessor(quarter, {
+			cell: _temp$14,
+			header: t(`grid.${quarter}`),
+			meta: { numeric: true }
+		}))]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { cellSelection: [{
+			anchorColumnId: "q2",
+			anchorRowId: "sales",
+			focusColumnId: "q3",
+			focusRowId: "design"
+		}] };
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			columns: t0,
+			data: FORECASTS,
+			getRowId: _temp2$14,
+			initialState: t1
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("grid.caption");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			grid: true,
+			variant: "surface"
+		});
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4 || $[10] !== table) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = table;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp2$14(row_0) {
+	return row_0.department;
+}
+function _temp$14(cell) {
+	return amountOf$13(cell.getValue());
+}
+const source$15 = "import { type ReactElement } from \"react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Forecast, FORECASTS } from \"./forecast.ts\";\n\nconst column = DataTable.createColumnHelper<Forecast>();\n\nconst EURO = { currency: \"EUR\", maximumFractionDigits: 0, style: \"currency\" } as const;\n\nconst QUARTERS = [\"q1\", \"q2\", \"q3\", \"q4\"] as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Grid(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor((row) => t(`grid.${row.department}`), {\n        header: t(\"grid.department\"),\n        id: \"department\",\n        meta: { rowHeader: true },\n      }),\n      ...QUARTERS.map((quarter) =>\n        column.accessor(quarter, {\n          cell: (cell) => amountOf(cell.getValue()),\n          header: t(`grid.${quarter}`),\n          meta: { numeric: true },\n        }),\n      ),\n    ]),\n    data: FORECASTS,\n    getRowId: (row) => row.department,\n    initialState: {\n      cellSelection: [\n        { anchorColumnId: \"q2\", anchorRowId: \"sales\", focusColumnId: \"q3\", focusRowId: \"design\" },\n      ],\n    },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table caption={t(\"grid.caption\")} grid variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/grouped.example.tsx
+var grouped_example_exports = /* @__PURE__ */ __exportAll({
+	Grouped: () => Grouped,
+	source: () => source$14
+});
+const column$13 = createColumnHelper();
+const EURO$13 = {
+	currency: "EUR",
+	style: "currency"
+};
+const GLYPHS$1 = {
+	ascending: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+	descending: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+	grouped: /* @__PURE__ */ jsx(GroupIcon, {}),
+	ungrouped: /* @__PURE__ */ jsx(UngroupIcon, {}),
+	unsorted: /* @__PURE__ */ jsx(XIcon, {})
+};
+function amountOf$12(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$13,
+		value
+	});
+}
+function menuOf$1(each, words) {
+	return /* @__PURE__ */ jsx(ColumnMenu, {
+		...words,
+		actionIndicators: GLYPHS$1,
+		column: each,
+		indicator: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: "1em" })
+	});
+}
+function Grouped() {
+	const $ = c(41);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("menus.ascending");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("menus.descending");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("grouped.group");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	let t4;
+	if ($[6] !== t) {
+		t3 = (name) => t("menus.options", { column: name });
+		t4 = t("grouped.ungroup");
+		$[6] = t;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("menus.unsorted");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t0 || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+		t6 = {
+			ascendingLabel: t0,
+			descendingLabel: t1,
+			groupedLabel: t2,
+			label: t3,
+			ungroupedLabel: t4,
+			unsortedLabel: t5
+		};
+		$[11] = t0;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	const words = t6;
+	let t7;
+	if ($[18] !== t) {
+		t7 = column$13.columns([
+			column$13.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: { rowHeader: true }
+			}),
+			column$13.accessor((transfer) => t(transfer.account), {
+				header: t("account"),
+				id: "account"
+			}),
+			column$13.accessor("state", {
+				cell: (cell) => t(`ledger.${cell.getValue()}`),
+				header: t("ledger.state")
+			}),
+			column$13.accessor("amount", {
+				aggregatedCell: _temp$13,
+				aggregationFn: "sum",
+				cell: _temp2$13,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[18] = t;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			expanded: { "state:pending": true },
+			grouping: ["state"]
+		};
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t7) {
+		t9 = {
+			columns: t7,
+			data: TRANSFERS,
+			enableColumnPinning: false,
+			enableGrouping: true,
+			enableHiding: false,
+			getRowId: _temp3$4,
+			initialState: t8
+		};
+		$[21] = t7;
+		$[22] = t9;
+	} else t9 = $[22];
+	const table = useDataTable(t9);
+	let t10;
+	if ($[23] !== t) {
+		t10 = t("grouped.caption");
+		$[23] = t;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t) {
+		t11 = t("tree.collapse");
+		$[25] = t;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== words) {
+		t12 = (each) => menuOf$1(each, words);
+		$[27] = words;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "1em" });
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== t) {
+		t14 = t("tree.expand");
+		$[30] = t;
+		$[31] = t14;
+	} else t14 = $[31];
+	let t15;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[32] = t15;
+	} else t15 = $[32];
+	let t16;
+	if ($[33] !== t10 || $[34] !== t11 || $[35] !== t12 || $[36] !== t14) {
+		t16 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t10,
+			collapseLabel: t11,
+			columnActions: t12,
+			expandIndicator: t13,
+			expandLabel: t14,
+			sortIndicator: t15,
+			variant: "surface"
+		});
+		$[33] = t10;
+		$[34] = t11;
+		$[35] = t12;
+		$[36] = t14;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] !== t16 || $[39] !== table) {
+		t17 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t16
+		});
+		$[38] = t16;
+		$[39] = table;
+		$[40] = t17;
+	} else t17 = $[40];
+	return t17;
+}
+function _temp3$4(row) {
+	return row.reference;
+}
+function _temp2$13(cell_1) {
+	return amountOf$12(cell_1.getValue());
+}
+function _temp$13(cell_0) {
+	return amountOf$12(cell_0.getValue());
+}
+const source$14 = "import { type ReactElement } from \"react\";\n\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  ChevronRightIcon,\n  EllipsisVerticalIcon,\n  GroupIcon,\n  UngroupIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Transfer, TRANSFERS } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nconst GLYPHS: DataTable.ColumnMenuIndicators = {\n  ascending: <ArrowUpIcon />,\n  descending: <ArrowDownIcon />,\n  grouped: <GroupIcon />,\n  ungrouped: <UngroupIcon />,\n  unsorted: <XIcon />,\n};\n\ntype MenuWords = Omit<DataTable.ColumnMenuProps, \"actionIndicators\" | \"column\" | \"indicator\">;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nfunction menuOf(each: DataTable.TableColumn, words: MenuWords): ReactElement {\n  return (\n    <DataTable.ColumnMenu\n      {...words}\n      actionIndicators={GLYPHS}\n      column={each}\n      indicator={<EllipsisVerticalIcon size=\"1em\" />}\n    />\n  );\n}\n\nexport function Grouped(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const words: MenuWords = {\n    ascendingLabel: t(\"menus.ascending\"),\n    descendingLabel: t(\"menus.descending\"),\n    groupedLabel: t(\"grouped.group\"),\n    label: (name) => t(\"menus.options\", { column: name }),\n    ungroupedLabel: t(\"grouped.ungroup\"),\n    unsortedLabel: t(\"menus.unsorted\"),\n  };\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", { header: t(\"ledger.reference\"), meta: { rowHeader: true } }),\n      column.accessor((transfer) => t(transfer.account), { header: t(\"account\"), id: \"account\" }),\n      column.accessor(\"state\", {\n        cell: (cell) => t(`ledger.${cell.getValue()}`),\n        header: t(\"ledger.state\"),\n      }),\n      column.accessor(\"amount\", {\n        aggregatedCell: (cell) => amountOf(cell.getValue()),\n        aggregationFn: \"sum\",\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: TRANSFERS,\n    enableColumnPinning: false,\n    enableGrouping: true,\n    enableHiding: false,\n    getRowId: (row) => row.reference,\n    initialState: { expanded: { \"state:pending\": true }, grouping: [\"state\"] },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"grouped.caption\")}\n        collapseLabel={t(\"tree.collapse\")}\n        columnActions={(each) => menuOf(each, words)}\n        expandIndicator={<ChevronRightIcon size=\"1em\" />}\n        expandLabel={t(\"tree.expand\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/drive.ts
+/**
+* Serves the lazy example's shared drive: the folders and the file at its top, and the items of a
+* folder, which the "server" returns after the delay a network adds the first time the folder
+* opens.
+*/
+/**
+* Returns a folder under the path of its parent.
+*/
+function folder(parent, name, size) {
+	return {
+		kind: "folder",
+		name,
+		path: `${parent}/${name}`,
+		size
+	};
+}
+/**
+* Returns a file under the path of its parent.
+*/
+function file(parent, name, size) {
+	return {
+		kind: "file",
+		name,
+		path: `${parent}/${name}`,
+		size
+	};
+}
+/**
+* Lists the items at the drive's top.
+*/
+const ROOT = [
+	folder("", "contracts", 4812e3),
+	folder("", "invoices", 2310400),
+	folder("", "receipts", 1204800),
+	file("", "readme", 2048)
+];
+/**
+* Lists the items of each folder, by the folder's path.
+*/
+const CONTENTS = /* @__PURE__ */ new Map([
+	["/contracts", [
+		folder("/contracts", "archive", 312e4),
+		file("/contracts", "template", 184e3),
+		file("/contracts", "q3", 1508e3)
+	]],
+	["/contracts/archive", [file("/contracts/archive", "q1", 148e4), file("/contracts/archive", "q2", 164e4)]],
+	["/invoices", [file("/invoices", "september", 1120300), file("/invoices", "october", 1190100)]],
+	["/receipts", [folder("/receipts", "travel", 804600), file("/receipts", "meals", 400200)]],
+	["/receipts/travel", [file("/receipts/travel", "trains", 312400), file("/receipts/travel", "hotels", 492200)]]
+]);
+/**
+* Returns the items of the folder at a path.
+*
+* @param path - The folder's path.
+* @returns The folder's items, or none for a path without a folder.
+*/
+function contentsOf(path) {
+	return CONTENTS.get(path) ?? [];
+}
+/**
+* Returns the drive with the items of the folder at a path in place, wherever the folder is.
+*
+* @param items - The items at the drive's top.
+* @param path - The folder's path.
+* @param contents - The folder's items.
+* @returns The items, each folder on the way to the path a new object.
+*/
+function withItems(items, path, contents) {
+	return items.map((item) => {
+		if (item.path === path) return {
+			...item,
+			items: contents
+		};
+		return item.items === void 0 ? item : {
+			...item,
+			items: withItems(item.items, path, contents)
+		};
+	});
+}
+/**
+* Returns the drive, and asks the server for a folder's items the first time the folder opens.
+*
+* @returns The items, the open folders and the handler that opens and closes them.
+*/
+function useDrive() {
+	const $ = c(8);
+	const [items, setItems] = useState(ROOT);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [expanded, setExpanded] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ new Set();
+		$[1] = t1;
+	} else t1 = $[1];
+	const requested = useRef(t1);
+	let t2;
+	if ($[2] !== expanded) {
+		t2 = (updater) => {
+			const next = typeof updater === "function" ? updater(expanded) : updater;
+			setExpanded(next);
+			for (const path of Object.keys(next)) {
+				if (requested.current.has(path)) continue;
+				requested.current.add(path);
+				setTimeout(() => {
+					setItems((current) => withItems(current, path, contentsOf(path)));
+				}, 400);
+			}
+		};
+		$[2] = expanded;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== expanded || $[5] !== items || $[6] !== t2) {
+		t3 = {
+			expanded,
+			items,
+			onExpandedChange: t2
+		};
+		$[4] = expanded;
+		$[5] = items;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+//#endregion
+//#region src/data-table/examples/lazy.example.tsx
+var lazy_example_exports = /* @__PURE__ */ __exportAll({
+	Lazy: () => Lazy,
+	source: () => source$13
+});
+const column$12 = createColumnHelper();
+function sizeOf(value) {
+	return /* @__PURE__ */ jsx(Format.Byte, { value });
+}
+function Lazy() {
+	const $ = c(26);
+	const { t } = useWords("data-table");
+	const { expanded, items, onExpandedChange } = useDrive();
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$12.columns([column$12.accessor((item) => t(`lazy.${item.name}`), {
+			header: t("lazy.name"),
+			id: "name",
+			meta: { rowHeader: true }
+		}), column$12.accessor("size", {
+			cell: _temp$12,
+			header: t("lazy.size"),
+			meta: { numeric: true }
+		})]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== expanded) {
+		t1 = { expanded };
+		$[2] = expanded;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== items || $[5] !== onExpandedChange || $[6] !== t0 || $[7] !== t1) {
+		t2 = {
+			autoResetExpanded: false,
+			columns: t0,
+			data: items,
+			getRowCanExpand: _temp2$12,
+			getRowId: _temp3$3,
+			getSubRows: _temp4$2,
+			onExpandedChange,
+			state: t1
+		};
+		$[4] = items;
+		$[5] = onExpandedChange;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+	} else t2 = $[8];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[9] !== t) {
+		t3 = t("lazy.caption");
+		$[9] = t;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t) {
+		t4 = t("tree.collapse");
+		$[11] = t;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "1em" });
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t) {
+		t6 = t("tree.expand");
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== t) {
+		t7 = t("lazy.loading");
+		$[16] = t;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t3 || $[19] !== t4 || $[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			collapseLabel: t4,
+			expandIndicator: t5,
+			expandLabel: t6,
+			loadingLabel: t7,
+			variant: "surface"
+		});
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
+	if ($[23] !== t8 || $[24] !== table) {
+		t9 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t8
+		});
+		$[23] = t8;
+		$[24] = table;
+		$[25] = t9;
+	} else t9 = $[25];
+	return t9;
+}
+function _temp4$2(item_1) {
+	return item_1.items;
+}
+function _temp3$3(item_0) {
+	return item_0.path;
+}
+function _temp2$12(row) {
+	return row.original.kind === "folder";
+}
+function _temp$12(cell) {
+	return sizeOf(cell.getValue());
+}
+const source$13 = "import { type ReactElement } from \"react\";\n\nimport { ChevronRightIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Item, useDrive } from \"./drive.ts\";\n\nconst column = DataTable.createColumnHelper<Item>();\n\nfunction sizeOf(value: number): ReactElement {\n  return <Format.Byte value={value} />;\n}\n\nexport function Lazy(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const { expanded, items, onExpandedChange } = useDrive();\n  const table = DataTable.useDataTable({\n    autoResetExpanded: false,\n    columns: column.columns([\n      column.accessor((item) => t(`lazy.${item.name}`), {\n        header: t(\"lazy.name\"),\n        id: \"name\",\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"size\", {\n        cell: (cell) => sizeOf(cell.getValue()),\n        header: t(\"lazy.size\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: items,\n    getRowCanExpand: (row) => row.original.kind === \"folder\",\n    getRowId: (item) => item.path,\n    getSubRows: (item) => item.items,\n    onExpandedChange,\n    state: { expanded },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"lazy.caption\")}\n        collapseLabel={t(\"tree.collapse\")}\n        expandIndicator={<ChevronRightIcon size=\"1em\" />}\n        expandLabel={t(\"tree.expand\")}\n        loadingLabel={t(\"lazy.loading\")}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/manager.example.tsx
+var manager_example_exports = /* @__PURE__ */ __exportAll({
+	Manager: () => Manager,
+	source: () => source$12
+});
+const column$11 = createColumnHelper();
+const EURO$12 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$11(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$12,
+		value
+	});
+}
+function Manager() {
+	const $ = c(41);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$11.columns([
+			column$11.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: { rowHeader: true }
+			}),
+			column$11.accessor((transfer) => t(transfer.account), {
+				header: t("account"),
+				id: "account"
+			}),
+			column$11.accessor((transfer_0) => t(transfer_0.region), {
+				header: t("spanned.region"),
+				id: "region"
+			}),
+			column$11.accessor((transfer_1) => t(`ledger.${transfer_1.state}`), {
+				header: t("ledger.state"),
+				id: "state"
+			}),
+			column$11.accessor("amount", {
+				cell: _temp$11,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { columnVisibility: { region: false } };
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			columns: t0,
+			data: RECENT,
+			getRowId: _temp2$11,
+			initialState: t1
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = { placement: "bottom-end" };
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = {
+			size: "sm",
+			variant: "outline"
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Columns3Icon, { size: "1em" });
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t) {
+		t6 = t("manager.button");
+		$[8] = t;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: t4,
+			children: /* @__PURE__ */ jsxs(Popover.Trigger, {
+				as: Button,
+				children: [t5, t6]
+			})
+		});
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("manager.heading");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Popover.Title, { children: t8 });
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	let t11;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(CheckIcon, {});
+		t11 = /* @__PURE__ */ jsx(GripVerticalIcon, { size: "1em" });
+		$[16] = t10;
+		$[17] = t11;
+	} else {
+		t10 = $[16];
+		t11 = $[17];
+	}
+	let t12;
+	let t13;
+	if ($[18] !== t) {
+		t12 = (item) => t("manager.move", { item });
+		t13 = t("manager.heading");
+		$[18] = t;
+		$[19] = t12;
+		$[20] = t13;
+	} else {
+		t12 = $[19];
+		t13 = $[20];
+	}
+	let t14;
+	if ($[21] !== t) {
+		t14 = t("manager.reset");
+		$[21] = t;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== t12 || $[24] !== t13 || $[25] !== t14) {
+		t15 = /* @__PURE__ */ jsx(ColumnManager, {
+			checkIndicator: t10,
+			handleIndicator: t11,
+			handleLabel: t12,
+			label: t13,
+			resetLabel: t14
+		});
+		$[23] = t12;
+		$[24] = t13;
+		$[25] = t14;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== t15 || $[28] !== t9) {
+		t16 = /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsxs(Popover.Content, { children: [t9, t15] }) }) });
+		$[27] = t15;
+		$[28] = t9;
+		$[29] = t16;
+	} else t16 = $[29];
+	let t17;
+	if ($[30] !== t16 || $[31] !== t7) {
+		t17 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			justify: "end",
+			children: /* @__PURE__ */ jsxs(Popover.Root, {
+				positioning: t3,
+				size: "sm",
+				children: [t7, t16]
+			})
+		});
+		$[30] = t16;
+		$[31] = t7;
+		$[32] = t17;
+	} else t17 = $[32];
+	let t18;
+	if ($[33] !== t) {
+		t18 = t("manager.caption");
+		$[33] = t;
+		$[34] = t18;
+	} else t18 = $[34];
+	let t19;
+	if ($[35] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t18,
+			variant: "surface"
+		});
+		$[35] = t18;
+		$[36] = t19;
+	} else t19 = $[36];
+	let t20;
+	if ($[37] !== t17 || $[38] !== t19 || $[39] !== table) {
+		t20 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t17, t19]
+		});
+		$[37] = t17;
+		$[38] = t19;
+		$[39] = table;
+		$[40] = t20;
+	} else t20 = $[40];
+	return t20;
+}
+function _temp2$11(row) {
+	return row.reference;
+}
+function _temp$11(cell) {
+	return amountOf$11(cell.getValue());
+}
+const source$12 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, Columns3Icon, GripVerticalIcon } from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Format } from \"@stealthscale/component-data\";\nimport { Popover } from \"@stealthscale/component-disclosure\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Portal } from \"@stealthscale/component-primitives\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { RECENT, type Transfer } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Manager(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", { header: t(\"ledger.reference\"), meta: { rowHeader: true } }),\n      column.accessor((transfer) => t(transfer.account), { header: t(\"account\"), id: \"account\" }),\n      column.accessor((transfer) => t(transfer.region), {\n        header: t(\"spanned.region\"),\n        id: \"region\",\n      }),\n      column.accessor((transfer) => t(`ledger.${transfer.state}`), {\n        header: t(\"ledger.state\"),\n        id: \"state\",\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: RECENT,\n    getRowId: (row) => row.reference,\n    initialState: { columnVisibility: { region: false } },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <Stack direction=\"row\" justify=\"end\">\n        <Popover.Root positioning={{ placement: \"bottom-end\" }} size=\"sm\">\n          <ButtonPropsProvider value={{ size: \"sm\", variant: \"outline\" }}>\n            <Popover.Trigger as={Button}>\n              <Columns3Icon size=\"1em\" />\n              {t(\"manager.button\")}\n            </Popover.Trigger>\n          </ButtonPropsProvider>\n          <Portal>\n            <Popover.Positioner>\n              <Popover.Content>\n                <Popover.Title>{t(\"manager.heading\")}</Popover.Title>\n                <DataTable.ColumnManager\n                  checkIndicator={<CheckIcon />}\n                  handleIndicator={<GripVerticalIcon size=\"1em\" />}\n                  handleLabel={(item) => t(\"manager.move\", { item })}\n                  label={t(\"manager.heading\")}\n                  resetLabel={t(\"manager.reset\")}\n                />\n              </Popover.Content>\n            </Popover.Positioner>\n          </Portal>\n        </Popover.Root>\n      </Stack>\n      <DataTable.Table caption={t(\"manager.caption\")} variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/menus.example.tsx
+var menus_example_exports = /* @__PURE__ */ __exportAll({
+	Menus: () => Menus,
+	source: () => source$11
+});
+const column$10 = createColumnHelper();
+const EURO$11 = {
+	currency: "EUR",
+	style: "currency"
+};
+const GLYPHS = {
+	ascending: /* @__PURE__ */ jsx(ArrowUpIcon, {}),
+	descending: /* @__PURE__ */ jsx(ArrowDownIcon, {}),
+	end: /* @__PURE__ */ jsx(PinIcon, {}),
+	hide: /* @__PURE__ */ jsx(EyeOffIcon, {}),
+	start: /* @__PURE__ */ jsx(PinIcon, {}),
+	unpinned: /* @__PURE__ */ jsx(PinOffIcon, {}),
+	unsorted: /* @__PURE__ */ jsx(XIcon, {})
+};
+function amountOf$10(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$11,
+		value
+	});
+}
+function menuOf(each, words) {
+	return /* @__PURE__ */ jsx(ColumnMenu, {
+		...words,
+		actionIndicators: GLYPHS,
+		column: each,
+		indicator: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: "1em" })
+	});
+}
+function Menus() {
+	const $ = c(40);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("menus.ascending");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("menus.descending");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("menus.end");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("menus.hide");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	let t5;
+	if ($[8] !== t) {
+		t4 = (name) => t("menus.options", { column: name });
+		t5 = t("menus.start");
+		$[8] = t;
+		$[9] = t4;
+		$[10] = t5;
+	} else {
+		t4 = $[9];
+		t5 = $[10];
+	}
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("menus.unpinned");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("menus.unsorted");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t0 || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7) {
+		t8 = {
+			ascendingLabel: t0,
+			descendingLabel: t1,
+			endLabel: t2,
+			hideLabel: t3,
+			label: t4,
+			startLabel: t5,
+			unpinnedLabel: t6,
+			unsortedLabel: t7
+		};
+		$[15] = t0;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	const words = t8;
+	let t9;
+	if ($[24] !== t) {
+		t9 = column$10.columns([
+			column$10.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: { rowHeader: true }
+			}),
+			column$10.accessor((transfer) => t(transfer.account), {
+				header: t("account"),
+				id: "account"
+			}),
+			column$10.accessor((transfer_0) => t(transfer_0.region), {
+				header: t("spanned.region"),
+				id: "region"
+			}),
+			column$10.accessor("amount", {
+				cell: _temp$10,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[24] = t;
+		$[25] = t9;
+	} else t9 = $[25];
+	let t10;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = {
+			minSize: 140,
+			size: 180
+		};
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== t9) {
+		t11 = {
+			columns: t9,
+			data: RECENT,
+			defaultColumn: t10,
+			getRowId: _temp2$10
+		};
+		$[27] = t9;
+		$[28] = t11;
+	} else t11 = $[28];
+	const table = useDataTable(t11);
+	let t12;
+	if ($[29] !== t) {
+		t12 = t("menus.caption");
+		$[29] = t;
+		$[30] = t12;
+	} else t12 = $[30];
+	let t13;
+	if ($[31] !== words) {
+		t13 = (each) => menuOf(each, words);
+		$[31] = words;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[33] = t14;
+	} else t14 = $[33];
+	let t15;
+	if ($[34] !== t12 || $[35] !== t13) {
+		t15 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t12,
+			columnActions: t13,
+			sortIndicator: t14,
+			variant: "surface"
+		});
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = t15;
+	} else t15 = $[36];
+	let t16;
+	if ($[37] !== t15 || $[38] !== table) {
+		t16 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t15
+		});
+		$[37] = t15;
+		$[38] = table;
+		$[39] = t16;
+	} else t16 = $[39];
+	return t16;
+}
+function _temp2$10(row) {
+	return row.reference;
+}
+function _temp$10(cell) {
+	return amountOf$10(cell.getValue());
+}
+const source$11 = "import { type ReactElement } from \"react\";\n\nimport {\n  ArrowDownIcon,\n  ArrowUpIcon,\n  EllipsisVerticalIcon,\n  EyeOffIcon,\n  PinIcon,\n  PinOffIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { RECENT, type Transfer } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nconst GLYPHS: DataTable.ColumnMenuIndicators = {\n  ascending: <ArrowUpIcon />,\n  descending: <ArrowDownIcon />,\n  end: <PinIcon />,\n  hide: <EyeOffIcon />,\n  start: <PinIcon />,\n  unpinned: <PinOffIcon />,\n  unsorted: <XIcon />,\n};\n\ntype MenuWords = Omit<DataTable.ColumnMenuProps, \"actionIndicators\" | \"column\" | \"indicator\">;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nfunction menuOf(each: DataTable.TableColumn, words: MenuWords): ReactElement {\n  return (\n    <DataTable.ColumnMenu\n      {...words}\n      actionIndicators={GLYPHS}\n      column={each}\n      indicator={<EllipsisVerticalIcon size=\"1em\" />}\n    />\n  );\n}\n\nexport function Menus(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const words: MenuWords = {\n    ascendingLabel: t(\"menus.ascending\"),\n    descendingLabel: t(\"menus.descending\"),\n    endLabel: t(\"menus.end\"),\n    hideLabel: t(\"menus.hide\"),\n    label: (name) => t(\"menus.options\", { column: name }),\n    startLabel: t(\"menus.start\"),\n    unpinnedLabel: t(\"menus.unpinned\"),\n    unsortedLabel: t(\"menus.unsorted\"),\n  };\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", { header: t(\"ledger.reference\"), meta: { rowHeader: true } }),\n      column.accessor((transfer) => t(transfer.account), { header: t(\"account\"), id: \"account\" }),\n      column.accessor((transfer) => t(transfer.region), {\n        header: t(\"spanned.region\"),\n        id: \"region\",\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: RECENT,\n    defaultColumn: { minSize: 140, size: 180 },\n    getRowId: (row) => row.reference,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"menus.caption\")}\n        columnActions={(each) => menuOf(each, words)}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/pages.example.tsx
+var pages_example_exports = /* @__PURE__ */ __exportAll({
+	Pages: () => Pages,
+	source: () => source$10
+});
+const column$9 = createColumnHelper();
+const EURO$10 = {
+	currency: "EUR",
+	style: "currency"
+};
+const SIZES = [
+	10,
+	20,
+	50
+];
+function amountOf$9(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$10,
+		value
+	});
+}
+function Pages() {
+	const $ = c(44);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$9.columns([
+			column$9.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: { rowHeader: true }
+			}),
+			column$9.accessor((transfer) => t(transfer.account), {
+				header: t("account"),
+				id: "account"
+			}),
+			column$9.accessor((transfer_0) => t(`ledger.${transfer_0.state}`), {
+				header: t("ledger.state"),
+				id: "state"
+			}),
+			column$9.accessor("amount", {
+				cell: _temp$9,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { pagination: {
+			pageIndex: 0,
+			pageSize: 10
+		} };
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			columns: t0,
+			data: TRANSFERS,
+			getRowId: _temp2$9,
+			initialState: t1
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("ledger.caption");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			sortIndicator: t4,
+			variant: "surface"
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ChevronDownIcon, {});
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("ledger.perPage");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(PageSize, {
+			indicator: t6,
+			label: t7,
+			size: "sm",
+			sizes: SIZES
+		});
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("ledger.pages");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t) {
+		t10 = /* @__PURE__ */ jsx(Pagination.PageText, { format: (t11) => {
+			const { count, pageRange } = t11;
+			return t("ledger.range", {
+				count,
+				end: pageRange.end,
+				start: count === 0 ? 0 : pageRange.start + 1
+			});
+		} });
+		$[17] = t;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t) {
+		t11 = t("ledger.previous");
+		$[19] = t;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(ChevronLeftIcon, {});
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== t11) {
+		t13 = /* @__PURE__ */ jsx(Pagination.PrevTrigger, {
+			label: t11,
+			children: t12
+		});
+		$[22] = t11;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== t) {
+		t14 = /* @__PURE__ */ jsx(Pagination.Items, {
+			label: (page) => t("ledger.page", { page }),
+			summary: (t15) => {
+				const { page: page_0, totalPages } = t15;
+				return t("ledger.summary", {
+					page: page_0,
+					totalPages
+				});
+			}
+		});
+		$[24] = t;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== t) {
+		t15 = t("ledger.next");
+		$[26] = t;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(ChevronRightIcon, {});
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t15) {
+		t17 = /* @__PURE__ */ jsx(Pagination.NextTrigger, {
+			label: t15,
+			children: t16
+		});
+		$[29] = t15;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== t10 || $[32] !== t13 || $[33] !== t14 || $[34] !== t17 || $[35] !== t9) {
+		t18 = /* @__PURE__ */ jsxs(TablePagination, {
+			"aria-label": t9,
+			size: "sm",
+			children: [
+				t10,
+				t13,
+				t14,
+				t17
+			]
+		});
+		$[31] = t10;
+		$[32] = t13;
+		$[33] = t14;
+		$[34] = t17;
+		$[35] = t9;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t18 || $[38] !== t8) {
+		t19 = /* @__PURE__ */ jsxs(Stack, {
+			align: "baseline",
+			direction: "row",
+			gap: "md",
+			justify: "between",
+			wrap: true,
+			children: [t8, t18]
+		});
+		$[37] = t18;
+		$[38] = t8;
+		$[39] = t19;
+	} else t19 = $[39];
+	let t20;
+	if ($[40] !== t19 || $[41] !== t5 || $[42] !== table) {
+		t20 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t5, t19]
+		});
+		$[40] = t19;
+		$[41] = t5;
+		$[42] = table;
+		$[43] = t20;
+	} else t20 = $[43];
+	return t20;
+}
+function _temp2$9(row) {
+	return row.reference;
+}
+function _temp$9(cell) {
+	return amountOf$9(cell.getValue());
+}
+const source$10 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Pagination } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Transfer, TRANSFERS } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nconst SIZES = [10, 20, 50];\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Pages(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", { header: t(\"ledger.reference\"), meta: { rowHeader: true } }),\n      column.accessor((transfer) => t(transfer.account), { header: t(\"account\"), id: \"account\" }),\n      column.accessor((transfer) => t(`ledger.${transfer.state}`), {\n        header: t(\"ledger.state\"),\n        id: \"state\",\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: TRANSFERS,\n    getRowId: (row) => row.reference,\n    initialState: { pagination: { pageIndex: 0, pageSize: 10 } },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"ledger.caption\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n      <Stack align=\"baseline\" direction=\"row\" gap=\"md\" justify=\"between\" wrap>\n        <DataTable.PageSize\n          indicator={<ChevronDownIcon />}\n          label={t(\"ledger.perPage\")}\n          size=\"sm\"\n          sizes={SIZES}\n        />\n        <DataTable.Pagination aria-label={t(\"ledger.pages\")} size=\"sm\">\n          <Pagination.PageText\n            format={({ count, pageRange }) =>\n              t(\"ledger.range\", {\n                count,\n                end: pageRange.end,\n                start: count === 0 ? 0 : pageRange.start + 1,\n              })\n            }\n          />\n          <Pagination.PrevTrigger label={t(\"ledger.previous\")}>\n            <ChevronLeftIcon />\n          </Pagination.PrevTrigger>\n          <Pagination.Items\n            label={(page) => t(\"ledger.page\", { page })}\n            summary={({ page, totalPages }) => t(\"ledger.summary\", { page, totalPages })}\n          />\n          <Pagination.NextTrigger label={t(\"ledger.next\")}>\n            <ChevronRightIcon />\n          </Pagination.NextTrigger>\n        </DataTable.Pagination>\n      </Stack>\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/pinned.example.tsx
+var pinned_example_exports = /* @__PURE__ */ __exportAll({
+	Pinned: () => Pinned,
+	source: () => source$9
+});
+const column$8 = createColumnHelper();
+const EURO$9 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$8(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$9,
+		value
+	});
+}
+function Pinned() {
+	const $ = c(14);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		let t1;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(PinIcon, { size: "1em" });
+			$[2] = t1;
+		} else t1 = $[2];
+		t0 = column$8.columns([
+			pinColumn({
+				header: t("pinned.header"),
+				indicator: t1,
+				label: (payout) => t("pinned.one", { account: t(payout.account) })
+			}),
+			column$8.accessor("account", {
+				cell: (cell) => t(cell.getValue()),
+				header: t("account"),
+				meta: { rowHeader: true }
+			}),
+			column$8.accessor("transfers", {
+				header: t("transfers"),
+				meta: { numeric: true }
+			}),
+			column$8.accessor("amount", {
+				cell: _temp$8,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { rowPinning: {
+			bottom: [],
+			top: ["perrin"]
+		} };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0) {
+		t2 = {
+			columns: t0,
+			data: PAYOUTS,
+			getRowId: _temp2$8,
+			initialState: t1
+		};
+		$[4] = t0;
+		$[5] = t2;
+	} else t2 = $[5];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("pinned.caption");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			sortIndicator: t4,
+			variant: "surface"
+		});
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5 || $[12] !== table) {
+		t6 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t5
+		});
+		$[11] = t5;
+		$[12] = table;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+function _temp2$8(row) {
+	return row.account;
+}
+function _temp$8(cell_0) {
+	return amountOf$8(cell_0.getValue());
+}
+const source$9 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, PinIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Pinned(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      DataTable.pinColumn<Payout>({\n        header: t(\"pinned.header\"),\n        indicator: <PinIcon size=\"1em\" />,\n        label: (payout) => t(\"pinned.one\", { account: t(payout.account) }),\n      }),\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"transfers\", { header: t(\"transfers\"), meta: { numeric: true } }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowId: (row) => row.account,\n    initialState: { rowPinning: { bottom: [], top: [\"perrin\"] } },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"pinned.caption\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/pivot.example.tsx
+var pivot_example_exports = /* @__PURE__ */ __exportAll({
+	Pivot: () => Pivot,
+	source: () => source$8
+});
+const EURO$8 = {
+	currency: "EUR",
+	maximumFractionDigits: 0,
+	style: "currency"
+};
+function Pivot() {
+	const $ = c(9);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = pivot$1(SALES.map((sale) => ({
+			product: t(`pivot.${sale.product}`),
+			quarter: t(`pivot.${sale.quarter}`),
+			region: t(`pivot.${sale.region}`),
+			value: sale.value
+		})), {
+			column: "quarter",
+			format: EURO$8,
+			headers: {
+				product: t("pivot.product"),
+				region: t("pivot.region")
+			},
+			missingLabel: t("pivot.missing"),
+			rows: ["region", "product"],
+			totalLabel: t("pivot.total"),
+			value: "value"
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const table = useDataTable(t0);
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("pivot.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Table$1, {
+			align: "start",
+			caption: t1,
+			variant: "surface"
+		});
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2 || $[7] !== table) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t2
+		});
+		$[6] = t2;
+		$[7] = table;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+const source$8 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { SALES } from \"./sales.ts\";\n\nconst EURO = { currency: \"EUR\", maximumFractionDigits: 0, style: \"currency\" } as const;\n\nexport function Pivot(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable(\n    DataTable.pivot(\n      SALES.map((sale) => ({\n        product: t(`pivot.${sale.product}`),\n        quarter: t(`pivot.${sale.quarter}`),\n        region: t(`pivot.${sale.region}`),\n        value: sale.value,\n      })),\n      {\n        column: \"quarter\",\n        format: EURO,\n        headers: { product: t(\"pivot.product\"), region: t(\"pivot.region\") },\n        missingLabel: t(\"pivot.missing\"),\n        rows: [\"region\", \"product\"],\n        totalLabel: t(\"pivot.total\"),\n        value: \"value\",\n      },\n    ),\n  );\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table align=\"start\" caption={t(\"pivot.caption\")} variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/search.example.tsx
+var search_example_exports = /* @__PURE__ */ __exportAll({
+	Searching: () => Searching,
+	source: () => source$7
+});
+const column$7 = createColumnHelper();
+const EURO$7 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$7(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$7,
+		value
+	});
+}
+function Searching() {
+	const $ = c(31);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$7.columns([
+			column$7.accessor((payout) => t(payout.account), {
+				header: t("account"),
+				id: "account",
+				meta: { rowHeader: true }
+			}),
+			column$7.accessor((payout_0) => t(payout_0.region), {
+				header: t("spanned.region"),
+				id: "region"
+			}),
+			column$7.accessor("amount", {
+				cell: _temp$7,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			columns: t0,
+			data: PAYOUTS,
+			getRowId: _temp2$7
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const table = useDataTable(t1);
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("search.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("search.clear");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("search.label");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(SearchIcon, { size: "1em" });
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t2 || $[13] !== t4 || $[14] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t2,
+			clearIndicator: t3,
+			clearLabel: t4,
+			placeholder: t5,
+			searchIndicator: t6
+		});
+		$[12] = t2;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = t("search.caption");
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("search.empty");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = (count, total) => t("search.found", {
+			count,
+			total
+		});
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t10 || $[24] !== t8 || $[25] !== t9) {
+		t12 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t8,
+			empty: t9,
+			filteredAnnouncement: t10,
+			sortIndicator: t11,
+			variant: "surface"
+		});
+		$[23] = t10;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = t12;
+	} else t12 = $[26];
+	let t13;
+	if ($[27] !== t12 || $[28] !== t7 || $[29] !== table) {
+		t13 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t7, t12]
+		});
+		$[27] = t12;
+		$[28] = t7;
+		$[29] = table;
+		$[30] = t13;
+	} else t13 = $[30];
+	return t13;
+}
+function _temp2$7(row) {
+	return row.account;
+}
+function _temp$7(cell) {
+	return amountOf$7(cell.getValue());
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, SearchIcon, XIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Searching(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor((payout) => t(payout.account), {\n        header: t(\"account\"),\n        id: \"account\",\n        meta: { rowHeader: true },\n      }),\n      column.accessor((payout) => t(payout.region), { header: t(\"spanned.region\"), id: \"region\" }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowId: (row) => row.account,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Search\n        aria-label={t(\"search.label\")}\n        clearIndicator={<XIcon size=\"1em\" />}\n        clearLabel={t(\"search.clear\")}\n        placeholder={t(\"search.label\")}\n        searchIndicator={<SearchIcon size=\"1em\" />}\n      />\n      <DataTable.Table\n        caption={t(\"search.caption\")}\n        empty={t(\"search.empty\")}\n        filteredAnnouncement={(count, total) => t(\"search.found\", { count, total })}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/selection.example.tsx
+var selection_example_exports = /* @__PURE__ */ __exportAll({
+	Selection: () => Selection,
+	source: () => source$6
+});
+const column$6 = createColumnHelper();
+const EURO$6 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$6(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$6,
+		value
+	});
+}
+function Selection() {
+	const $ = c(21);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		let t1;
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(MinusIcon, { strokeWidth: 3 });
+			t2 = /* @__PURE__ */ jsx(CheckIcon, { strokeWidth: 3 });
+			$[2] = t1;
+			$[3] = t2;
+		} else {
+			t1 = $[2];
+			t2 = $[3];
+		}
+		t0 = column$6.columns([
+			selectColumn({
+				allLabel: t("selection.all"),
+				indeterminateIndicator: t1,
+				indicator: t2,
+				label: (payout) => t("selection.one", { account: t(payout.account) })
+			}),
+			column$6.accessor("account", {
+				cell: (cell) => t(cell.getValue()),
+				header: t("account"),
+				meta: { rowHeader: true }
+			}),
+			column$6.accessor("amount", {
+				cell: _temp$6,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[4] !== t0) {
+		t1 = {
+			columns: t0,
+			data: PAYOUTS,
+			getRowId: _temp2$6
+		};
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	const table = useDataTable(t1);
+	let t2;
+	if ($[6] !== table.state.rowSelection) {
+		t2 = Object.keys(table.state.rowSelection);
+		$[6] = table.state.rowSelection;
+		$[7] = t2;
+	} else t2 = $[7];
+	const count = t2.length;
+	let t3;
+	if ($[8] !== count || $[9] !== t) {
+		t3 = t("selection.count", { count });
+		$[8] = count;
+		$[9] = t;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			children: t3
+		});
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== t) {
+		t5 = t("selection.caption");
+		$[13] = t;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t5,
+			variant: "surface"
+		});
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== t4 || $[18] !== t6 || $[19] !== table) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [t4, t6]
+		});
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = table;
+		$[20] = t7;
+	} else t7 = $[20];
+	return t7;
+}
+function _temp2$6(row) {
+	return row.account;
+}
+function _temp$6(cell_0) {
+	return amountOf$6(cell_0.getValue());
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Selection(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      DataTable.selectColumn<Payout>({\n        allLabel: t(\"selection.all\"),\n        indeterminateIndicator: <MinusIcon strokeWidth={3} />,\n        indicator: <CheckIcon strokeWidth={3} />,\n        label: (payout) => t(\"selection.one\", { account: t(payout.account) }),\n      }),\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowId: (row) => row.account,\n  });\n  const count = Object.keys(table.state.rowSelection).length;\n\n  return (\n    <DataTable.Root table={table}>\n      <Text as=\"output\">{t(\"selection.count\", { count })}</Text>\n      <DataTable.Table caption={t(\"selection.caption\")} variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/server.example.tsx
+var server_example_exports = /* @__PURE__ */ __exportAll({
+	Server: () => Server,
+	source: () => source$5
+});
+const column$5 = createColumnHelper();
+const EURO$5 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$5(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$5,
+		value
+	});
+}
+function Server() {
+	const $ = c(64);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			pageIndex: 0,
+			pageSize: 8
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [pagination, setPagination] = useState(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[1] = t1;
+	} else t1 = $[1];
+	const [sorting, setSorting] = useState(t1);
+	const [search, setSearch] = useState("");
+	let t2;
+	if ($[2] !== pagination || $[3] !== search || $[4] !== sorting[0]) {
+		t2 = {
+			...pagination,
+			search,
+			sort: sorting[0]
+		};
+		$[2] = pagination;
+		$[3] = search;
+		$[4] = sorting[0];
+		$[5] = t2;
+	} else t2 = $[5];
+	const { loading, page } = useServerPage(t2);
+	let t3;
+	if ($[6] !== t) {
+		t3 = column$5.columns([
+			column$5.accessor("reference", {
+				enableSorting: false,
+				header: t("ledger.reference"),
+				meta: { rowHeader: true }
+			}),
+			column$5.accessor((transfer) => t(transfer.account), {
+				enableSorting: false,
+				header: t("account"),
+				id: "account"
+			}),
+			column$5.accessor("amount", {
+				cell: _temp$5,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (next) => {
+			setSearch(next);
+			setPagination(_temp3$2);
+		};
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== pagination || $[10] !== search || $[11] !== sorting) {
+		t5 = {
+			globalFilter: search,
+			pagination,
+			sorting
+		};
+		$[9] = pagination;
+		$[10] = search;
+		$[11] = sorting;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== page.count || $[14] !== page.rows || $[15] !== t3 || $[16] !== t5) {
+		t6 = {
+			columns: t3,
+			data: page.rows,
+			getRowId: _temp2$5,
+			manualFiltering: true,
+			manualPagination: true,
+			manualSorting: true,
+			onGlobalFilterChange: t4,
+			onPaginationChange: setPagination,
+			onSortingChange: setSorting,
+			rowCount: page.count,
+			state: t5
+		};
+		$[13] = page.count;
+		$[14] = page.rows;
+		$[15] = t3;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	const table = useDataTable(t6);
+	let t7;
+	if ($[18] !== t) {
+		t7 = t("server.search");
+		$[18] = t;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(XIcon, { size: "1em" });
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t) {
+		t9 = t("search.clear");
+		$[21] = t;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t) {
+		t10 = t("server.search");
+		$[23] = t;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(SearchIcon, { size: "1em" });
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== t10 || $[27] !== t7 || $[28] !== t9) {
+		t12 = /* @__PURE__ */ jsx(Search, {
+			"aria-label": t7,
+			clearIndicator: t8,
+			clearLabel: t9,
+			placeholder: t10,
+			searchIndicator: t11
+		});
+		$[26] = t10;
+		$[27] = t7;
+		$[28] = t9;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== t) {
+		t13 = t("server.caption");
+		$[30] = t;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== loading || $[33] !== t) {
+		t14 = loading ? t("server.loading") : t("server.empty");
+		$[32] = loading;
+		$[33] = t;
+		$[34] = t14;
+	} else t14 = $[34];
+	let t15;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[35] = t15;
+	} else t15 = $[35];
+	let t16;
+	if ($[36] !== loading || $[37] !== t13 || $[38] !== t14) {
+		t16 = /* @__PURE__ */ jsx(Table$1, {
+			"aria-busy": loading,
+			caption: t13,
+			empty: t14,
+			sortIndicator: t15,
+			variant: "surface"
+		});
+		$[36] = loading;
+		$[37] = t13;
+		$[38] = t14;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] !== t) {
+		t17 = t("ledger.pages");
+		$[40] = t;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
+	if ($[42] !== t) {
+		t18 = t("ledger.previous");
+		$[42] = t;
+		$[43] = t18;
+	} else t18 = $[43];
+	let t19;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(ChevronLeftIcon, {});
+		$[44] = t19;
+	} else t19 = $[44];
+	let t20;
+	if ($[45] !== t18) {
+		t20 = /* @__PURE__ */ jsx(Pagination.PrevTrigger, {
+			label: t18,
+			children: t19
+		});
+		$[45] = t18;
+		$[46] = t20;
+	} else t20 = $[46];
+	let t21;
+	if ($[47] !== t) {
+		t21 = /* @__PURE__ */ jsx(Pagination.PageText, { format: (t22) => {
+			const { page: current, totalPages } = t22;
+			return t("ledger.summary", {
+				page: current,
+				totalPages
+			});
+		} });
+		$[47] = t;
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] !== t) {
+		t22 = t("ledger.next");
+		$[49] = t;
+		$[50] = t22;
+	} else t22 = $[50];
+	let t23;
+	if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(ChevronRightIcon, {});
+		$[51] = t23;
+	} else t23 = $[51];
+	let t24;
+	if ($[52] !== t22) {
+		t24 = /* @__PURE__ */ jsx(Pagination.NextTrigger, {
+			label: t22,
+			children: t23
+		});
+		$[52] = t22;
+		$[53] = t24;
+	} else t24 = $[53];
+	let t25;
+	if ($[54] !== t17 || $[55] !== t20 || $[56] !== t21 || $[57] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(TablePagination, {
+			"aria-label": t17,
+			size: "sm",
+			children: [
+				t20,
+				t21,
+				t24
+			]
+		});
+		$[54] = t17;
+		$[55] = t20;
+		$[56] = t21;
+		$[57] = t24;
+		$[58] = t25;
+	} else t25 = $[58];
+	let t26;
+	if ($[59] !== t12 || $[60] !== t16 || $[61] !== t25 || $[62] !== table) {
+		t26 = /* @__PURE__ */ jsxs(Root, {
+			table,
+			children: [
+				t12,
+				t16,
+				t25
+			]
+		});
+		$[59] = t12;
+		$[60] = t16;
+		$[61] = t25;
+		$[62] = table;
+		$[63] = t26;
+	} else t26 = $[63];
+	return t26;
+}
+function _temp3$2(old) {
+	return {
+		...old,
+		pageIndex: 0
+	};
+}
+function _temp2$5(row) {
+	return row.reference;
+}
+function _temp$5(cell) {
+	return amountOf$5(cell.getValue());
+}
+const source$5 = "import { type ReactElement, useState } from \"react\";\n\nimport { ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, SearchIcon, XIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { Pagination } from \"@stealthscale/component-navigation\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { useServerPage } from \"./server.ts\";\nimport { type Transfer } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Server(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 8 });\n  const [sorting, setSorting] = useState<DataTable.SortingState>([]);\n  const [search, setSearch] = useState(\"\");\n  const { loading, page } = useServerPage({ ...pagination, search, sort: sorting[0] });\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"reference\", {\n        enableSorting: false,\n        header: t(\"ledger.reference\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor((transfer) => t(transfer.account), {\n        enableSorting: false,\n        header: t(\"account\"),\n        id: \"account\",\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: page.rows,\n    getRowId: (row) => row.reference,\n    manualFiltering: true,\n    manualPagination: true,\n    manualSorting: true,\n    onGlobalFilterChange: (next: string) => {\n      setSearch(next);\n      setPagination((old) => ({ ...old, pageIndex: 0 }));\n    },\n    onPaginationChange: setPagination,\n    onSortingChange: setSorting,\n    rowCount: page.count,\n    state: { globalFilter: search, pagination, sorting },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Search\n        aria-label={t(\"server.search\")}\n        clearIndicator={<XIcon size=\"1em\" />}\n        clearLabel={t(\"search.clear\")}\n        placeholder={t(\"server.search\")}\n        searchIndicator={<SearchIcon size=\"1em\" />}\n      />\n      <DataTable.Table\n        aria-busy={loading}\n        caption={t(\"server.caption\")}\n        empty={loading ? t(\"server.loading\") : t(\"server.empty\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n      <DataTable.Pagination aria-label={t(\"ledger.pages\")} size=\"sm\">\n        <Pagination.PrevTrigger label={t(\"ledger.previous\")}>\n          <ChevronLeftIcon />\n        </Pagination.PrevTrigger>\n        <Pagination.PageText\n          format={({ page: current, totalPages }) =>\n            t(\"ledger.summary\", { page: current, totalPages })\n          }\n        />\n        <Pagination.NextTrigger label={t(\"ledger.next\")}>\n          <ChevronRightIcon />\n        </Pagination.NextTrigger>\n      </DataTable.Pagination>\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/sorting.example.tsx
+var sorting_example_exports = /* @__PURE__ */ __exportAll({
+	Sorting: () => Sorting,
+	source: () => source$4
+});
+const column$4 = createColumnHelper();
+const EURO$4 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$4(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$4,
+		value
+	});
+}
+function Sorting() {
+	const $ = c(12);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$4.columns([
+			column$4.accessor("account", {
+				cell: (cell) => t(cell.getValue()),
+				header: t("account"),
+				meta: { rowHeader: true }
+			}),
+			column$4.accessor("transfers", {
+				header: t("transfers"),
+				meta: { numeric: true }
+			}),
+			column$4.accessor("amount", {
+				cell: _temp$4,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			columns: t0,
+			data: PAYOUTS,
+			getRowId: _temp2$4
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const table = useDataTable(t1);
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("sorting.caption");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t2,
+			sortIndicator: t3,
+			variant: "surface"
+		});
+		$[7] = t2;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4 || $[10] !== table) {
+		t5 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t4
+		});
+		$[9] = t4;
+		$[10] = table;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp2$4(row) {
+	return row.account;
+}
+function _temp$4(cell_0) {
+	return amountOf$4(cell_0.getValue());
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Sorting(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"transfers\", { header: t(\"transfers\"), meta: { numeric: true } }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowId: (row) => row.account,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"sorting.caption\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/spanned.example.tsx
+var spanned_example_exports = /* @__PURE__ */ __exportAll({
+	Spanned: () => Spanned,
+	source: () => source$3
+});
+const column$3 = createColumnHelper();
+const EURO$3 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$3(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$3,
+		value
+	});
+}
+function Spanned() {
+	const $ = c(13);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$3.columns([
+			column$3.accessor("region", {
+				cell: (cell) => t(cell.getValue()),
+				header: t("spanned.region"),
+				meta: { rowHeader: true },
+				spanRows: true
+			}),
+			column$3.accessor("account", {
+				cell: (cell_0) => t(cell_0.getValue()),
+				header: t("account"),
+				meta: { rowHeader: true }
+			}),
+			column$3.accessor("amount", {
+				cell: _temp$3,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { sorting: [{
+			desc: false,
+			id: "region"
+		}] };
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			columns: t0,
+			data: PAYOUTS,
+			getRowId: _temp2$3,
+			initialState: t1
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("spanned.caption");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			sortIndicator: t4,
+			variant: "surface"
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t5 || $[11] !== table) {
+		t6 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t5
+		});
+		$[10] = t5;
+		$[11] = table;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+function _temp2$3(row) {
+	return row.account;
+}
+function _temp$3(cell_1) {
+	return amountOf$3(cell_1.getValue());
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Spanned(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"region\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"spanned.region\"),\n        meta: { rowHeader: true },\n        spanRows: true,\n      }),\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowId: (row) => row.account,\n    initialState: { sorting: [{ desc: false, id: \"region\" }] },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"spanned.caption\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/totals.example.tsx
+var totals_example_exports = /* @__PURE__ */ __exportAll({
+	Totals: () => Totals,
+	source: () => source$2
+});
+const column$2 = createColumnHelper();
+const EURO$2 = {
+	currency: "EUR",
+	style: "currency"
+};
+function amountOf$2(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$2,
+		value
+	});
+}
+function Totals() {
+	const $ = c(11);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$2.columns([
+			column$2.accessor("account", {
+				cell: (cell) => t(cell.getValue()),
+				footer: t("totals.total"),
+				header: t("account"),
+				meta: { rowHeader: true }
+			}),
+			column$2.accessor("transfers", {
+				aggregationFn: "sum",
+				footer: _temp$2,
+				header: t("transfers"),
+				meta: { numeric: true }
+			}),
+			column$2.accessor("amount", {
+				aggregationFn: "sum",
+				cell: _temp2$2,
+				footer: _temp3$1,
+				header: t("amount"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			columns: t0,
+			data: PAYOUTS,
+			getRowId: _temp4$1
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const table = useDataTable(t1);
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("totals.caption");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t2,
+			variant: "surface"
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3 || $[9] !== table) {
+		t4 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t3
+		});
+		$[8] = t3;
+		$[9] = table;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+function _temp4$1(row) {
+	return row.account;
+}
+function _temp3$1(footer_0) {
+	return amountOf$2(footer_0.column.getAggregationValue());
+}
+function _temp2$2(cell_0) {
+	return amountOf$2(cell_0.getValue());
+}
+function _temp$2(footer) {
+	return footer.column.getAggregationValue();
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Payout, PAYOUTS } from \"./payouts.ts\";\n\nconst column = DataTable.createColumnHelper<Payout>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Totals(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor(\"account\", {\n        cell: (cell) => t(cell.getValue()),\n        footer: t(\"totals.total\"),\n        header: t(\"account\"),\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"transfers\", {\n        aggregationFn: \"sum\",\n        footer: (footer) => footer.column.getAggregationValue<number>(),\n        header: t(\"transfers\"),\n        meta: { numeric: true },\n      }),\n      column.accessor(\"amount\", {\n        aggregationFn: \"sum\",\n        cell: (cell) => amountOf(cell.getValue()),\n        footer: (footer) => amountOf(footer.column.getAggregationValue<number>()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: PAYOUTS,\n    getRowId: (row) => row.account,\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table caption={t(\"totals.caption\")} variant=\"surface\" />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/budgets.ts
+/**
+* Returns a team's cost centre.
+*/
+function team(centre, budget, spent) {
+	return {
+		budget,
+		centre,
+		spent
+	};
+}
+/**
+* Returns a department's cost centre, whose figures are its teams' together.
+*/
+function department(centre, teams) {
+	return {
+		budget: teams.reduce((sum, each) => sum + each.budget, 0),
+		centre,
+		spent: teams.reduce((sum, each) => sum + each.spent, 0),
+		teams
+	};
+}
+/**
+* Lists the quarter's cost centres, the departments first.
+*/
+const BUDGETS = [
+	department("engineering", [
+		department("platform", [team("infrastructure", 42e4, 391200), team("tooling", 18e4, 142500)]),
+		team("payments", 36e4, 348900),
+		team("mobile", 24e4, 251300)
+	]),
+	department("sales", [team("enterprise", 31e4, 287400), team("partners", 15e4, 96800)]),
+	department("marketing", [team("brand", 12e4, 131600), team("growth", 2e5, 177900)]),
+	team("operations", 14e4, 118200)
+];
+//#endregion
+//#region src/data-table/examples/tree.example.tsx
+var tree_example_exports = /* @__PURE__ */ __exportAll({
+	Tree: () => Tree,
+	source: () => source$1
+});
+const column$1 = createColumnHelper();
+const EURO$1 = {
+	currency: "EUR",
+	maximumFractionDigits: 0,
+	style: "currency"
+};
+function amountOf$1(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO$1,
+		value
+	});
+}
+function Tree() {
+	const $ = c(20);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = column$1.columns([
+			column$1.accessor((budget) => t(`tree.${budget.centre}`), {
+				header: t("tree.centre"),
+				id: "centre",
+				meta: { rowHeader: true }
+			}),
+			column$1.accessor("budget", {
+				cell: _temp$1,
+				header: t("tree.budget"),
+				meta: { numeric: true }
+			}),
+			column$1.accessor("spent", {
+				cell: _temp2$1,
+				header: t("tree.spent"),
+				meta: { numeric: true }
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { expanded: { engineering: true } };
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			columns: t0,
+			data: BUDGETS,
+			getRowId: _temp3,
+			getSubRows: _temp4,
+			initialState: t1
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("tree.caption");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("tree.collapse");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(ChevronRightIcon, { size: "1em" });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("tree.expand");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t3 || $[14] !== t4 || $[15] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			collapseLabel: t4,
+			expandIndicator: t5,
+			expandLabel: t6,
+			sortIndicator: t7,
+			variant: "surface"
+		});
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8 || $[18] !== table) {
+		t9 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t8
+		});
+		$[17] = t8;
+		$[18] = table;
+		$[19] = t9;
+	} else t9 = $[19];
+	return t9;
+}
+function _temp4(budget_1) {
+	return budget_1.teams;
+}
+function _temp3(budget_0) {
+	return budget_0.centre;
+}
+function _temp2$1(cell_0) {
+	return amountOf$1(cell_0.getValue());
+}
+function _temp$1(cell) {
+	return amountOf$1(cell.getValue());
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Budget, BUDGETS } from \"./budgets.ts\";\n\nconst column = DataTable.createColumnHelper<Budget>();\n\nconst EURO = { currency: \"EUR\", maximumFractionDigits: 0, style: \"currency\" } as const;\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Tree(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      column.accessor((budget) => t(`tree.${budget.centre}`), {\n        header: t(\"tree.centre\"),\n        id: \"centre\",\n        meta: { rowHeader: true },\n      }),\n      column.accessor(\"budget\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"tree.budget\"),\n        meta: { numeric: true },\n      }),\n      column.accessor(\"spent\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"tree.spent\"),\n        meta: { numeric: true },\n      }),\n    ]),\n    data: BUDGETS,\n    getRowId: (budget) => budget.centre,\n    getSubRows: (budget) => budget.teams,\n    initialState: { expanded: { engineering: true } },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"tree.caption\")}\n        collapseLabel={t(\"tree.collapse\")}\n        expandIndicator={<ChevronRightIcon size=\"1em\" />}\n        expandLabel={t(\"tree.expand\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        variant=\"surface\"\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/examples/windowed.example.tsx
+var windowed_example_exports = /* @__PURE__ */ __exportAll({
+	Windowed: () => Windowed,
+	source: () => source
+});
+const column = createColumnHelper();
+const EURO = {
+	currency: "EUR",
+	style: "currency"
+};
+const YEAR = transfersOf(1e4, 2e4);
+function amountOf(value) {
+	return /* @__PURE__ */ jsx(Format.Number, {
+		options: EURO,
+		value
+	});
+}
+function Windowed() {
+	const $ = c(15);
+	const { t } = useWords("data-table");
+	let t0;
+	if ($[0] !== t) {
+		let t1;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(PinIcon, { size: "1em" });
+			$[2] = t1;
+		} else t1 = $[2];
+		t0 = column.columns([
+			pinColumn({
+				header: t("pinned.header"),
+				indicator: t1,
+				label: (transfer) => t("windowed.pin", { reference: transfer.reference })
+			}),
+			column.accessor("reference", {
+				header: t("ledger.reference"),
+				meta: { rowHeader: true },
+				size: 150
+			}),
+			column.accessor((transfer_0) => t(transfer_0.account), {
+				header: t("account"),
+				id: "account",
+				size: 230
+			}),
+			column.accessor((transfer_1) => t(`ledger.${transfer_1.state}`), {
+				header: t("ledger.state"),
+				id: "state",
+				size: 140
+			}),
+			column.accessor("amount", {
+				cell: _temp,
+				header: t("amount"),
+				meta: { numeric: true },
+				size: 176
+			})
+		]);
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { rowPinning: {
+			bottom: [],
+			top: ["TR-19996"]
+		} };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t0) {
+		t2 = {
+			columns: t0,
+			data: YEAR,
+			getRowId: _temp2,
+			initialState: t1
+		};
+		$[4] = t0;
+		$[5] = t2;
+	} else t2 = $[5];
+	const table = useDataTable(t2);
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("windowed.caption");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(ArrowUpIcon, { size: "1em" });
+		t5 = { maxBlockSize: "24rem" };
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	let t6;
+	if ($[10] !== t3) {
+		t6 = /* @__PURE__ */ jsx(Table$1, {
+			caption: t3,
+			sortIndicator: t4,
+			style: t5,
+			variant: "surface",
+			windowed: true
+		});
+		$[10] = t3;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t6 || $[13] !== table) {
+		t7 = /* @__PURE__ */ jsx(Root, {
+			table,
+			children: t6
+		});
+		$[12] = t6;
+		$[13] = table;
+		$[14] = t7;
+	} else t7 = $[14];
+	return t7;
+}
+function _temp2(row) {
+	return row.reference;
+}
+function _temp(cell) {
+	return amountOf(cell.getValue());
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon, PinIcon } from \"lucide-react\";\n\nimport { Format } from \"@stealthscale/component-data\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DataTable } from \"@stealthscale/component-tables\";\n\nimport { type Transfer, transfersOf } from \"./transfers.ts\";\n\nconst column = DataTable.createColumnHelper<Transfer>();\n\nconst EURO = { currency: \"EUR\", style: \"currency\" } as const;\n\nconst YEAR = transfersOf(10_000, 20_000);\n\nfunction amountOf(value: number): ReactElement {\n  return <Format.Number options={EURO} value={value} />;\n}\n\nexport function Windowed(): ReactElement {\n  const { t } = useWords(\"data-table\");\n  const table = DataTable.useDataTable({\n    columns: column.columns([\n      DataTable.pinColumn<Transfer>({\n        header: t(\"pinned.header\"),\n        indicator: <PinIcon size=\"1em\" />,\n        label: (transfer) => t(\"windowed.pin\", { reference: transfer.reference }),\n      }),\n      column.accessor(\"reference\", {\n        header: t(\"ledger.reference\"),\n        meta: { rowHeader: true },\n        size: 150,\n      }),\n      column.accessor((transfer) => t(transfer.account), {\n        header: t(\"account\"),\n        id: \"account\",\n        size: 230,\n      }),\n      column.accessor((transfer) => t(`ledger.${transfer.state}`), {\n        header: t(\"ledger.state\"),\n        id: \"state\",\n        size: 140,\n      }),\n      column.accessor(\"amount\", {\n        cell: (cell) => amountOf(cell.getValue()),\n        header: t(\"amount\"),\n        meta: { numeric: true },\n        size: 176,\n      }),\n    ]),\n    data: YEAR,\n    getRowId: (row) => row.reference,\n    initialState: { rowPinning: { bottom: [], top: [\"TR-19996\"] } },\n  });\n\n  return (\n    <DataTable.Root table={table}>\n      <DataTable.Table\n        caption={t(\"windowed.caption\")}\n        sortIndicator={<ArrowUpIcon size=\"1em\" />}\n        style={{ maxBlockSize: \"24rem\" }}\n        variant=\"surface\"\n        windowed\n      />\n    </DataTable.Root>\n  );\n}\n";
+//#endregion
+//#region src/data-table/data-table.specimen.tsx
+/**
+* Catalogue page for the data table.
+*
+* @remarks
+*   The recipe has no axis, so every scene is hand-written and renders at the page's width, the
+*   room a table takes. The page imports its examples through their barrel, and the sorting
+*   example directly, which the props reader follows to the kit's parts. The words are keys under
+*   `data-table` in `locales/en/specimen/data-table.json`.
+*/
+/**
+* Names each example module a scene renders.
+*/
+const { aggregates, claims, columns, details, endless, filters, grid, grouped, lazy, manager, menus, pages, pinned, pivot, search, selection, server, spanned, totals, tree, windowed } = /* @__PURE__ */ __exportAll({
+	aggregates: () => aggregates_example_exports,
+	claims: () => claims_example_exports,
+	columns: () => columns_example_exports,
+	details: () => details_example_exports,
+	endless: () => endless_example_exports,
+	filters: () => filters_example_exports,
+	grid: () => grid_example_exports,
+	grouped: () => grouped_example_exports,
+	lazy: () => lazy_example_exports,
+	manager: () => manager_example_exports,
+	menus: () => menus_example_exports,
+	pages: () => pages_example_exports,
+	pinned: () => pinned_example_exports,
+	pivot: () => pivot_example_exports,
+	search: () => search_example_exports,
+	selection: () => selection_example_exports,
+	server: () => server_example_exports,
+	sorting: () => sorting_example_exports,
+	spanned: () => spanned_example_exports,
+	totals: () => totals_example_exports,
+	tree: () => tree_example_exports,
+	windowed: () => windowed_example_exports
+});
+/**
+* Hand-written scene for sorting from the column headers.
+*/
+const sorted = {
+	about: "data-table.sorting.about",
+	draw: () => /* @__PURE__ */ jsx(Sorting, {}),
+	example: sorting_example_exports,
+	title: "data-table.sorting.title"
+};
+/**
+* Hand-written scene for the search field over the table's rows.
+*/
+const searched = {
+	about: "data-table.search.about",
+	draw: () => /* @__PURE__ */ jsx(search.Searching, {}),
+	example: search,
+	title: "data-table.search.title"
+};
+/**
+* Hand-written scene for the filters in the columns' headers.
+*/
+const filtered = {
+	about: "data-table.filters.about",
+	draw: () => /* @__PURE__ */ jsx(filters.Filters, {}),
+	example: filters,
+	title: "data-table.filters.title"
+};
+/**
+* Hand-written scene for the menus in the columns' headers.
+*/
+const menued = {
+	about: "data-table.menus.about",
+	draw: () => /* @__PURE__ */ jsx(menus.Menus, {}),
+	example: menus,
+	title: "data-table.menus.title"
+};
+/**
+* Hand-written scene for the column manager in a popover.
+*/
+const managed = {
+	about: "data-table.manager.about",
+	draw: () => /* @__PURE__ */ jsx(manager.Manager, {}),
+	example: manager,
+	title: "data-table.manager.title"
+};
+/**
+* Hand-written scene for the pagination and the page size under the table.
+*/
+const paged = {
+	about: "data-table.pages.about",
+	draw: () => /* @__PURE__ */ jsx(pages.Pages, {}),
+	example: pages,
+	title: "data-table.pages.title"
+};
+/**
+* Hand-written scene for a table a server sorts, searches and pages.
+*/
+const served = {
+	about: "data-table.server.about",
+	draw: () => /* @__PURE__ */ jsx(server.Server, {}),
+	example: server,
+	title: "data-table.server.title"
+};
+/**
+* Hand-written scene for ten thousand rows of which the table renders those in view.
+*/
+const windowedRows = {
+	about: "data-table.windowed.about",
+	draw: () => /* @__PURE__ */ jsx(windowed.Windowed, {}),
+	example: windowed,
+	title: "data-table.windowed.title"
+};
+/**
+* Hand-written scene for rows a windowed table loads as its last row comes into view.
+*/
+const endlessRows = {
+	about: "data-table.endless.about",
+	draw: () => /* @__PURE__ */ jsx(endless.Endless, {}),
+	example: endless,
+	title: "data-table.endless.title"
+};
+/**
+* Hand-written scene for selecting rows with the select column.
+*/
+const selected = {
+	about: "data-table.selection.about",
+	draw: () => /* @__PURE__ */ jsx(selection.Selection, {}),
+	example: selection,
+	title: "data-table.selection.title"
+};
+/**
+* Hand-written scene for detail rows under expanded rows.
+*/
+const detailed = {
+	about: "data-table.details.about",
+	draw: () => /* @__PURE__ */ jsx(details.Details, {}),
+	example: details,
+	title: "data-table.details.title"
+};
+/**
+* Hand-written scene for sub-rows as rows with levels, a `treegrid` of cost centres.
+*/
+const treeRows = {
+	about: "data-table.tree.about",
+	draw: () => /* @__PURE__ */ jsx(tree.Tree, {}),
+	example: tree,
+	title: "data-table.tree.title"
+};
+/**
+* Hand-written scene for rows grouped by a column's value, with the sums of each group.
+*/
+const groupedRows = {
+	about: "data-table.grouped.about",
+	draw: () => /* @__PURE__ */ jsx(grouped.Grouped, {}),
+	example: grouped,
+	title: "data-table.grouped.title"
+};
+/**
+* Hand-written scene for folders whose items arrive after a delay the first time they open.
+*/
+const lazyRows = {
+	about: "data-table.lazy.about",
+	draw: () => /* @__PURE__ */ jsx(lazy.Lazy, {}),
+	example: lazy,
+	title: "data-table.lazy.title"
+};
+/**
+* Hand-written scene for a footer row of totals.
+*/
+const totalled = {
+	about: "data-table.totals.about",
+	draw: () => /* @__PURE__ */ jsx(totals.Totals, {}),
+	example: totals,
+	title: "data-table.totals.title"
+};
+/**
+* Hand-written scene for pinned columns and resizable columns, in a room narrower than the columns
+* together, so the figures scroll under the pinned select and account columns at every width.
+*/
+const sized = {
+	about: "data-table.columns.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(columns.Columns, {})
+	}),
+	example: columns,
+	title: "data-table.columns.title"
+};
+/**
+* Hand-written scene for rows pinned to the top with the pin column.
+*/
+const pinnedRows = {
+	about: "data-table.pinned.about",
+	draw: () => /* @__PURE__ */ jsx(pinned.Pinned, {}),
+	example: pinned,
+	title: "data-table.pinned.title"
+};
+/**
+* Hand-written scene for a column whose equal adjacent values span their rows.
+*/
+const spannedCells = {
+	about: "data-table.spanned.about",
+	draw: () => /* @__PURE__ */ jsx(spanned.Spanned, {}),
+	example: spanned,
+	title: "data-table.spanned.title"
+};
+/**
+* Hand-written scene for a pivot of orders by region and product per quarter, with its totals.
+*/
+const pivoted = {
+	about: "data-table.pivot.about",
+	draw: () => /* @__PURE__ */ jsx(pivot.Pivot, {}),
+	example: pivot,
+	title: "data-table.pivot.title"
+};
+/**
+* Hand-written scene for a pivot whose aggregate a person picks from a select.
+*/
+const aggregated = {
+	about: "data-table.aggregates.about",
+	draw: () => /* @__PURE__ */ jsx(aggregates.Aggregates, {}),
+	example: aggregates,
+	title: "data-table.aggregates.title"
+};
+/**
+* Hand-written scene for a grid of budget cells a person selects with the keys and the pointer and
+* copies into a spreadsheet.
+*/
+const gridded = {
+	about: "data-table.grid.about",
+	draw: () => /* @__PURE__ */ jsx(grid.Grid, {}),
+	example: grid,
+	title: "data-table.grid.title"
+};
+/**
+* Hand-written scene for expense claims a person edits in place, with the unsaved changes marked
+* until they are saved or discarded.
+*/
+const edited = {
+	about: "data-table.claims.about",
+	draw: () => /* @__PURE__ */ jsx(claims.Claims, {}),
+	example: claims,
+	title: "data-table.claims.title"
+};
+var data_table_specimen_default = specimen({
+	about: "data-table.about",
+	id: "components/tables/data-table",
+	imports: "import { DataTable } from \"@stealthscale/component-tables\";",
+	scenes: [
+		sorted,
+		searched,
+		filtered,
+		menued,
+		managed,
+		paged,
+		served,
+		windowedRows,
+		endlessRows,
+		selected,
+		detailed,
+		treeRows,
+		groupedRows,
+		lazyRows,
+		totalled,
+		sized,
+		pinnedRows,
+		spannedCells,
+		pivoted,
+		aggregated,
+		gridded,
+		edited
+	],
+	title: "data-table.title"
+});
+//#endregion
+export { aggregated, data_table_specimen_default as default, detailed, edited, endlessRows, filtered, gridded, groupedRows, lazyRows, managed, menued, paged, pinnedRows, pivoted, searched, selected, served, sized, sorted, spannedCells, totalled, treeRows, windowedRows };