@stealthscale/component-collections 0.1.1 → 0.1.3

package/dist/pages/table/table.js

@@ -0,0 +1,1701 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { B as Body, F as Root, I as Header, L as ColumnHeader, M as Scroller, N as Row, P as RowHeader, R as Cell, T as Simple, z as Caption } from "../../shared-DVn824MJ.js";
+import { s as recipe } from "../../recipes-C1oaF8pO.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Matrix, Room, landmarked, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+//#region src/table/examples/accounts.example.tsx
+const ACCOUNTS$8 = [
+	{
+		amount: "4,120.00",
+		key: "bridge",
+		state: "settled"
+	},
+	{
+		amount: "880.40",
+		key: "halden",
+		state: "held"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin",
+		state: "queued"
+	}
+];
+function Accounts() {
+	const $ = c(24);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			key: "name",
+			label: t1,
+			rowHeader: true
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("state");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "state",
+			label: t3
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("amount");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "amount",
+			label: t5,
+			numeric: true
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = [
+			t2,
+			t4,
+			t6
+		];
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t) {
+		t8 = ACCOUNTS$8.map((t9) => {
+			const { amount, key, state } = t9;
+			return {
+				amount,
+				key,
+				name: t(key),
+				state: t(state)
+			};
+		});
+		$[18] = t;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t0 || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t7,
+			rows: t8,
+			rowToKey: _temp$9,
+			variant: "surface"
+		});
+		$[20] = t0;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	return t9;
+}
+function _temp$9(row) {
+	return row.key;
+}
+//#endregion
+//#region src/table/examples/empty.example.tsx
+var empty_example_exports = /* @__PURE__ */ __exportAll({
+	Empty: () => Empty,
+	source: () => source$9
+});
+function Empty() {
+	const $ = c(20);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			key: "name",
+			label: t1,
+			rowHeader: true
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("amount");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "amount",
+			label: t3,
+			numeric: true
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = [t2, t4];
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t("nothing");
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = [];
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t0 || $[17] !== t5 || $[18] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t5,
+			empty: t6,
+			rows: t7,
+			rowToKey: _temp$8,
+			variant: "surface"
+		});
+		$[16] = t0;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t8;
+	} else t8 = $[19];
+	return t8;
+}
+function _temp$8(row) {
+	return row.key;
+}
+const source$9 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n}\n\nexport function Empty(): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        { key: \"name\", label: t(\"account\"), rowHeader: true },\n        { key: \"amount\", label: t(\"amount\"), numeric: true },\n      ]}\n      empty={t(\"nothing\")}\n      rows={[]}\n      rowToKey={(row) => row.key}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/fixed.example.tsx
+var fixed_example_exports = /* @__PURE__ */ __exportAll({
+	Fixed: () => Fixed,
+	source: () => source$8
+});
+const ACCOUNTS$7 = [
+	{
+		amount: "4,120.00",
+		key: "bridge",
+		state: "settled"
+	},
+	{
+		amount: "880.40",
+		key: "halden",
+		state: "held"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin",
+		state: "queued"
+	}
+];
+function Fixed() {
+	const $ = c(24);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			key: "name",
+			label: t1,
+			rowHeader: true,
+			width: "40%"
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("state");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "state",
+			label: t3,
+			width: "25%"
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("amount");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "amount",
+			label: t5,
+			numeric: true,
+			width: "35%"
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = [
+			t2,
+			t4,
+			t6
+		];
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t) {
+		t8 = ACCOUNTS$7.map((t9) => {
+			const { amount, key, state } = t9;
+			return {
+				amount,
+				key,
+				name: t(key),
+				state: t(state)
+			};
+		});
+		$[18] = t;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t0 || $[21] !== t7 || $[22] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t7,
+			layout: "fixed",
+			rows: t8,
+			rowToKey: _temp$7,
+			variant: "surface"
+		});
+		$[20] = t0;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+	} else t9 = $[23];
+	return t9;
+}
+function _temp$7(row) {
+	return row.key;
+}
+const source$8 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n  readonly state: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\", state: \"settled\" },\n  { amount: \"880.40\", key: \"halden\", state: \"held\" },\n  { amount: \"12,500.00\", key: \"perrin\", state: \"queued\" },\n] as const;\n\nexport function Fixed(): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        { key: \"name\", label: t(\"account\"), rowHeader: true, width: \"40%\" },\n        { key: \"state\", label: t(\"state\"), width: \"25%\" },\n        { key: \"amount\", label: t(\"amount\"), numeric: true, width: \"35%\" },\n      ]}\n      layout=\"fixed\"\n      rows={ACCOUNTS.map(({ amount, key, state }) => ({\n        amount,\n        key,\n        name: t(key),\n        state: t(state),\n      }))}\n      rowToKey={(row) => row.key}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/linked.example.tsx
+var linked_example_exports = /* @__PURE__ */ __exportAll({
+	Linked: () => Linked,
+	source: () => source$7
+});
+const ACCOUNTS$6 = [
+	{
+		amount: "4,120.00",
+		key: "bridge"
+	},
+	{
+		amount: "880.40",
+		key: "halden"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin"
+	}
+];
+function linkOf(row) {
+	return /* @__PURE__ */ jsx("a", {
+		href: `#${row.key}`,
+		children: row.name
+	});
+}
+function Linked(props) {
+	const $ = c(20);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			cell: linkOf,
+			key: "name",
+			label: t1,
+			rowHeader: true
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("amount");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "amount",
+			label: t3,
+			numeric: true
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = [t2, t4];
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = ACCOUNTS$6.map((t7) => {
+			const { amount, key } = t7;
+			return {
+				amount,
+				key,
+				name: t(key)
+			};
+		});
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== props || $[16] !== t0 || $[17] !== t5 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t5,
+			rows: t6,
+			rowToKey: _temp$6,
+			variant: "surface",
+			...props
+		});
+		$[15] = props;
+		$[16] = t0;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+function _temp$6(row) {
+	return row.key;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\" },\n  { amount: \"880.40\", key: \"halden\" },\n  { amount: \"12,500.00\", key: \"perrin\" },\n] as const;\n\nfunction linkOf(row: Account): ReactElement {\n  return <a href={`#${row.key}`}>{row.name}</a>;\n}\n\nexport function Linked(\n  props: Omit<Table.SimpleProps<Account>, \"columns\" | \"rows\" | \"rowToKey\">,\n): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        { cell: linkOf, key: \"name\", label: t(\"account\"), rowHeader: true },\n        { key: \"amount\", label: t(\"amount\"), numeric: true },\n      ]}\n      rows={ACCOUNTS.map(({ amount, key }) => ({ amount, key, name: t(key) }))}\n      rowToKey={(row) => row.key}\n      variant=\"surface\"\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/notes.example.tsx
+var notes_example_exports = /* @__PURE__ */ __exportAll({
+	Notes: () => Notes,
+	source: () => source$6
+});
+const ACCOUNTS$5 = [
+	{
+		amount: "4,120.00",
+		key: "bridge"
+	},
+	{
+		amount: "880.40",
+		key: "halden"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin"
+	}
+];
+function Notes(props) {
+	const $ = c(25);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			key: "name",
+			label: t1,
+			rowHeader: true
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("note");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "note",
+			label: t3
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("amount");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "amount",
+			label: t5,
+			numeric: true
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t2 || $[15] !== t4 || $[16] !== t6) {
+		t7 = [
+			t2,
+			t4,
+			t6
+		];
+		$[14] = t2;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+	} else t7 = $[17];
+	let t8;
+	if ($[18] !== t) {
+		t8 = ACCOUNTS$5.map((t9) => {
+			const { amount, key } = t9;
+			return {
+				amount,
+				key,
+				name: t(key),
+				note: t(`${key}Note`)
+			};
+		});
+		$[18] = t;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== props || $[21] !== t0 || $[22] !== t7 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t7,
+			rows: t8,
+			rowToKey: _temp$5,
+			variant: "surface",
+			...props
+		});
+		$[20] = props;
+		$[21] = t0;
+		$[22] = t7;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	return t9;
+}
+function _temp$5(row) {
+	return row.key;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n  readonly note: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\" },\n  { amount: \"880.40\", key: \"halden\" },\n  { amount: \"12,500.00\", key: \"perrin\" },\n] as const;\n\nexport function Notes(\n  props: Omit<Table.SimpleProps<Account>, \"columns\" | \"rows\" | \"rowToKey\">,\n): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        { key: \"name\", label: t(\"account\"), rowHeader: true },\n        { key: \"note\", label: t(\"note\") },\n        { key: \"amount\", label: t(\"amount\"), numeric: true },\n      ]}\n      rows={ACCOUNTS.map(({ amount, key }) => ({\n        amount,\n        key,\n        name: t(key),\n        note: t(`${key}Note`),\n      }))}\n      rowToKey={(row) => row.key}\n      variant=\"surface\"\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/payouts.example.tsx
+var payouts_example_exports = /* @__PURE__ */ __exportAll({
+	Payouts: () => Payouts,
+	source: () => source$5
+});
+const ACCOUNTS$4 = [
+	{
+		amount: "4,120.00",
+		key: "bridge"
+	},
+	{
+		amount: "880.40",
+		key: "halden"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin"
+	}
+];
+const TOTAL = "17,500.40";
+function Payouts(props) {
+	const $ = c(23);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			key: "name",
+			label: t1,
+			rowHeader: true
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("amount");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "amount",
+			label: t3,
+			numeric: true,
+			sorted: "descending"
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = [t2, t4];
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = ACCOUNTS$4.map((t7) => {
+			const { amount, key } = t7;
+			return {
+				amount,
+				key,
+				name: t(key)
+			};
+		});
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t) {
+		t7 = (column) => {
+			if (column.key === "name") return t("total");
+			return column.numeric === true ? TOTAL : null;
+		};
+		$[15] = t;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== props || $[18] !== t0 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t5,
+			rows: t6,
+			rowToKey: _temp$4,
+			total: t7,
+			variant: "surface",
+			...props
+		});
+		$[17] = props;
+		$[18] = t0;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+}
+function _temp$4(row) {
+	return row.key;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\" },\n  { amount: \"880.40\", key: \"halden\" },\n  { amount: \"12,500.00\", key: \"perrin\" },\n] as const;\n\nconst TOTAL = \"17,500.40\";\n\nexport function Payouts(\n  props: Omit<Table.SimpleProps<Account>, \"columns\" | \"rows\" | \"rowToKey\">,\n): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        { key: \"name\", label: t(\"account\"), rowHeader: true },\n        { key: \"amount\", label: t(\"amount\"), numeric: true, sorted: \"descending\" },\n      ]}\n      rows={ACCOUNTS.map(({ amount, key }) => ({ amount, key, name: t(key) }))}\n      rowToKey={(row) => row.key}\n      total={(column) => {\n        if (column.key === \"name\") return t(\"total\");\n\n        return column.numeric === true ? TOTAL : null;\n      }}\n      variant=\"surface\"\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/quarters.example.tsx
+var quarters_example_exports = /* @__PURE__ */ __exportAll({
+	Quarters: () => Quarters,
+	source: () => source$4
+});
+const ACCOUNTS$3 = [
+	{
+		amount: "4,120.00",
+		key: "bridge"
+	},
+	{
+		amount: "880.40",
+		key: "halden"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin"
+	}
+];
+const QUARTERS = [
+	[
+		"Jan",
+		"Feb",
+		"Mar"
+	],
+	[
+		"Apr",
+		"May",
+		"Jun"
+	],
+	[
+		"Jul",
+		"Aug",
+		"Sep"
+	]
+];
+function Quarters() {
+	const $ = c(12);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("byMonth");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = [{
+			key: "name",
+			label: t1,
+			rowHeader: true
+		}, ...QUARTERS.map(_temp3$1)];
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = ACCOUNTS$3.map((t4) => {
+			const { amount, key } = t4;
+			return {
+				amount,
+				key,
+				name: t(key)
+			};
+		});
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t0 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t2,
+			rows: t3,
+			rowToKey: _temp4,
+			rules: "all",
+			variant: "surface"
+		});
+		$[8] = t0;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+function _temp4(row_0) {
+	return row_0.key;
+}
+function _temp3$1(months, at) {
+	return {
+		columns: months.map(_temp2$2),
+		label: `Q${String(at + 1)}`
+	};
+}
+function _temp2$2(month) {
+	return {
+		cell: _temp$3,
+		key: month,
+		label: month,
+		numeric: true
+	};
+}
+function _temp$3(row) {
+	return row.amount;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\" },\n  { amount: \"880.40\", key: \"halden\" },\n  { amount: \"12,500.00\", key: \"perrin\" },\n] as const;\n\nconst QUARTERS = [\n  [\"Jan\", \"Feb\", \"Mar\"],\n  [\"Apr\", \"May\", \"Jun\"],\n  [\"Jul\", \"Aug\", \"Sep\"],\n] as const;\n\nexport function Quarters(): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"byMonth\")}\n      columns={[\n        { key: \"name\", label: t(\"account\"), rowHeader: true },\n        ...QUARTERS.map((months, at) => ({\n          columns: months.map((month) => ({\n            cell: (row: Account) => row.amount,\n            key: month,\n            label: month,\n            numeric: true,\n          })),\n          label: `Q${String(at + 1)}`,\n        })),\n      ]}\n      rows={ACCOUNTS.map(({ amount, key }) => ({ amount, key, name: t(key) }))}\n      rowToKey={(row) => row.key}\n      rules=\"all\"\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/runs.example.tsx
+var runs_example_exports = /* @__PURE__ */ __exportAll({
+	Runs: () => Runs,
+	source: () => source$3
+});
+const ACCOUNTS$2 = [
+	{
+		amount: "4,120.00",
+		key: "bridge"
+	},
+	{
+		amount: "880.40",
+		key: "halden"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin"
+	}
+];
+const MONTHS$1 = ["Jan", "Feb"];
+function Runs() {
+	const $ = c(30);
+	const { t } = useWords("table");
+	const id = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== id || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Caption, {
+			id,
+			children: t0
+		});
+		$[2] = id;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t) {
+		t2 = t("account");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ColumnHeader, { children: t2 });
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("month");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ColumnHeader, { children: t4 });
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t("amount");
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ColumnHeader, {
+			"data-numeric": true,
+			children: t6
+		});
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t3 || $[18] !== t5 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(Row, { children: [
+			t3,
+			t5,
+			t7
+		] }) });
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t) {
+		t9 = ACCOUNTS$2.map((account) => /* @__PURE__ */ jsx(Body, { children: MONTHS$1.map((month, at) => /* @__PURE__ */ jsxs(Row, { children: [
+			at === 0 ? /* @__PURE__ */ jsx(RowHeader, {
+				rowSpan: MONTHS$1.length,
+				scope: "rowgroup",
+				children: t(account.key)
+			}) : null,
+			/* @__PURE__ */ jsx(Cell, { children: month }),
+			/* @__PURE__ */ jsx(Cell, {
+				"data-numeric": true,
+				children: account.amount
+			})
+		] }, month)) }, account.key));
+		$[21] = t;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t1 || $[24] !== t8 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Root, { children: [
+			t1,
+			t8,
+			t9
+		] });
+		$[23] = t1;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] !== id || $[28] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Scroller, {
+			"aria-labelledby": id,
+			variant: "surface",
+			children: t10
+		});
+		$[27] = id;
+		$[28] = t10;
+		$[29] = t11;
+	} else t11 = $[29];
+	return t11;
+}
+const source$3 = "import { type ReactElement, useId } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\" },\n  { amount: \"880.40\", key: \"halden\" },\n  { amount: \"12,500.00\", key: \"perrin\" },\n] as const;\n\nconst MONTHS = [\"Jan\", \"Feb\"] as const;\n\nexport function Runs(): ReactElement {\n  const { t } = useWords(\"table\");\n  const id = useId();\n\n  return (\n    <Table.Scroller aria-labelledby={id} variant=\"surface\">\n      <Table.Root>\n        <Table.Caption id={id}>{t(\"caption\")}</Table.Caption>\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeader>{t(\"account\")}</Table.ColumnHeader>\n            <Table.ColumnHeader>{t(\"month\")}</Table.ColumnHeader>\n            <Table.ColumnHeader data-numeric>{t(\"amount\")}</Table.ColumnHeader>\n          </Table.Row>\n        </Table.Header>\n        {ACCOUNTS.map((account) => (\n          <Table.Body key={account.key}>\n            {MONTHS.map((month, at) => (\n              <Table.Row key={month}>\n                {at === 0 ? (\n                  <Table.RowHeader rowSpan={MONTHS.length} scope=\"rowgroup\">\n                    {t(account.key)}\n                  </Table.RowHeader>\n                ) : null}\n                <Table.Cell>{month}</Table.Cell>\n                <Table.Cell data-numeric>{account.amount}</Table.Cell>\n              </Table.Row>\n            ))}\n          </Table.Body>\n        ))}\n      </Table.Root>\n    </Table.Scroller>\n  );\n}\n";
+//#endregion
+//#region src/table/examples/sections.example.tsx
+var sections_example_exports = /* @__PURE__ */ __exportAll({
+	Sections: () => Sections,
+	source: () => source$2
+});
+const ACCOUNTS$1 = [
+	{
+		amount: "4,120.00",
+		key: "bridge",
+		state: "settled"
+	},
+	{
+		amount: "880.40",
+		key: "halden",
+		state: "held"
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin",
+		state: "queued"
+	}
+];
+function Sections() {
+	const $ = c(21);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("account");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = {
+			key: "name",
+			label: t1,
+			rowHeader: true
+		};
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("amount");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "amount",
+			label: t3,
+			numeric: true
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = [t2, t4];
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	let t7;
+	if ($[13] !== t) {
+		t6 = (state) => t(state);
+		t7 = ACCOUNTS$1.map((t8) => {
+			const { amount, key, state: state_0 } = t8;
+			return {
+				amount,
+				key,
+				name: t(key),
+				state: state_0
+			};
+		});
+		$[13] = t;
+		$[14] = t6;
+		$[15] = t7;
+	} else {
+		t6 = $[14];
+		t7 = $[15];
+	}
+	let t8;
+	if ($[16] !== t0 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Simple, {
+			caption: t0,
+			columns: t5,
+			groupBy: _temp$2,
+			groupLabel: t6,
+			rows: t7,
+			rowToKey: _temp2$1,
+			variant: "surface"
+		});
+		$[16] = t0;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
+}
+function _temp2$1(row_0) {
+	return row_0.key;
+}
+function _temp$2(row) {
+	return row.state;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n  readonly state: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\", state: \"settled\" },\n  { amount: \"880.40\", key: \"halden\", state: \"held\" },\n  { amount: \"12,500.00\", key: \"perrin\", state: \"queued\" },\n] as const;\n\nexport function Sections(): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        { key: \"name\", label: t(\"account\"), rowHeader: true },\n        { key: \"amount\", label: t(\"amount\"), numeric: true },\n      ]}\n      groupBy={(row) => row.state}\n      groupLabel={(state) => t(state)}\n      rows={ACCOUNTS.map(({ amount, key, state }) => ({ amount, key, name: t(key), state }))}\n      rowToKey={(row) => row.key}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/sortable.example.tsx
+var sortable_example_exports = /* @__PURE__ */ __exportAll({
+	Sortable: () => Sortable,
+	source: () => source$1
+});
+const ACCOUNTS = [
+	{
+		amount: "4,120.00",
+		key: "bridge",
+		value: 4120
+	},
+	{
+		amount: "880.40",
+		key: "halden",
+		value: 880.4
+	},
+	{
+		amount: "12,500.00",
+		key: "perrin",
+		value: 12500
+	}
+];
+const MARKS = {
+	ascending: ArrowUpIcon,
+	descending: ArrowDownIcon
+};
+function headed(text, direction) {
+	const Mark = direction === void 0 ? ArrowUpDownIcon : MARKS[direction];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [text, /* @__PURE__ */ jsx(Mark, {
+		"aria-hidden": true,
+		size: "1em"
+	})] });
+}
+function compared(sort) {
+	const sign = sort.direction === "ascending" ? 1 : -1;
+	return (left, right) => sign * (sort.key === "amount" ? left.value - right.value : left.name.localeCompare(right.name));
+}
+function Sortable() {
+	const $ = c(41);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			direction: "descending",
+			key: "amount"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const [sort, setSort] = useState(t0);
+	let t1;
+	if ($[1] !== sort.direction || $[2] !== sort.key) {
+		t1 = (key) => sort.key === key ? sort.direction : void 0;
+		$[1] = sort.direction;
+		$[2] = sort.key;
+		$[3] = t1;
+	} else t1 = $[3];
+	const directionOf = t1;
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("caption");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== directionOf || $[7] !== t) {
+		t3 = headed(t("account"), directionOf("name"));
+		$[6] = directionOf;
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== directionOf) {
+		t4 = directionOf("name");
+		$[9] = directionOf;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("sortByAccount");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t3 || $[14] !== t4 || $[15] !== t5) {
+		t6 = {
+			key: "name",
+			label: t3,
+			rowHeader: true,
+			sorted: t4,
+			sortLabel: t5
+		};
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== directionOf || $[18] !== t) {
+		t7 = headed(t("amount"), directionOf("amount"));
+		$[17] = directionOf;
+		$[18] = t;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== directionOf) {
+		t8 = directionOf("amount");
+		$[20] = directionOf;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== t) {
+		t9 = t("sortByAmount");
+		$[22] = t;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
+		t10 = {
+			key: "amount",
+			label: t7,
+			numeric: true,
+			sorted: t8,
+			sortLabel: t9
+		};
+		$[24] = t7;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== t10 || $[29] !== t6) {
+		t11 = [t6, t10];
+		$[28] = t10;
+		$[29] = t6;
+		$[30] = t11;
+	} else t11 = $[30];
+	let t12;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = (key_0) => {
+			setSort((was) => ({
+				direction: was.key === key_0 && was.direction === "ascending" ? "descending" : "ascending",
+				key: key_0
+			}));
+		};
+		$[31] = t12;
+	} else t12 = $[31];
+	let t13;
+	if ($[32] !== sort || $[33] !== t) {
+		let t14;
+		if ($[35] !== t) {
+			t14 = (t15) => {
+				const { amount, key: key_1, value } = t15;
+				return {
+					amount,
+					key: key_1,
+					name: t(key_1),
+					value
+				};
+			};
+			$[35] = t;
+			$[36] = t14;
+		} else t14 = $[36];
+		t13 = ACCOUNTS.map(t14).toSorted(compared(sort));
+		$[32] = sort;
+		$[33] = t;
+		$[34] = t13;
+	} else t13 = $[34];
+	let t14;
+	if ($[37] !== t11 || $[38] !== t13 || $[39] !== t2) {
+		t14 = /* @__PURE__ */ jsx(Simple, {
+			caption: t2,
+			columns: t11,
+			onSort: t12,
+			rows: t13,
+			rowToKey: _temp$1,
+			variant: "surface"
+		});
+		$[37] = t11;
+		$[38] = t13;
+		$[39] = t2;
+		$[40] = t14;
+	} else t14 = $[40];
+	return t14;
+}
+function _temp$1(row) {
+	return row.key;
+}
+const source$1 = "import { type ReactElement, type ReactNode, useState } from \"react\";\n\nimport { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Account {\n  readonly amount: string;\n  readonly key: string;\n  readonly name: string;\n  readonly value: number;\n}\n\ntype Direction = \"ascending\" | \"descending\";\n\ninterface Sort {\n  readonly direction: Direction;\n  readonly key: string;\n}\n\nconst ACCOUNTS = [\n  { amount: \"4,120.00\", key: \"bridge\", value: 4120 },\n  { amount: \"880.40\", key: \"halden\", value: 880.4 },\n  { amount: \"12,500.00\", key: \"perrin\", value: 12_500 },\n] as const;\n\nconst MARKS = { ascending: ArrowUpIcon, descending: ArrowDownIcon };\n\nfunction headed(text: string, direction: Direction | undefined): ReactNode {\n  const Mark = direction === undefined ? ArrowUpDownIcon : MARKS[direction];\n\n  return (\n    <>\n      {text}\n      <Mark aria-hidden size=\"1em\" />\n    </>\n  );\n}\n\nfunction compared(sort: Sort): (left: Account, right: Account) => number {\n  const sign = sort.direction === \"ascending\" ? 1 : -1;\n\n  return (left, right) =>\n    sign * (sort.key === \"amount\" ? left.value - right.value : left.name.localeCompare(right.name));\n}\n\nexport function Sortable(): ReactElement {\n  const { t } = useWords(\"table\");\n  const [sort, setSort] = useState<Sort>({ direction: \"descending\", key: \"amount\" });\n  const directionOf = (key: string): Direction | undefined =>\n    sort.key === key ? sort.direction : undefined;\n\n  return (\n    <Table.Simple<Account>\n      caption={t(\"caption\")}\n      columns={[\n        {\n          key: \"name\",\n          label: headed(t(\"account\"), directionOf(\"name\")),\n          rowHeader: true,\n          sorted: directionOf(\"name\"),\n          sortLabel: t(\"sortByAccount\"),\n        },\n        {\n          key: \"amount\",\n          label: headed(t(\"amount\"), directionOf(\"amount\")),\n          numeric: true,\n          sorted: directionOf(\"amount\"),\n          sortLabel: t(\"sortByAmount\"),\n        },\n      ]}\n      onSort={(key) => {\n        setSort((was) => ({\n          direction: was.key === key && was.direction === \"ascending\" ? \"descending\" : \"ascending\",\n          key,\n        }));\n      }}\n      rows={ACCOUNTS.map(({ amount, key, value }) => ({\n        amount,\n        key,\n        name: t(key),\n        value,\n      })).toSorted(compared(sort))}\n      rowToKey={(row) => row.key}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/examples/weeks.example.tsx
+var weeks_example_exports = /* @__PURE__ */ __exportAll({
+	Weeks: () => Weeks,
+	source: () => source
+});
+const MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep"
+];
+const WEEKS = Array.from({ length: 12 }, (_, at) => at + 1);
+function Weeks(props) {
+	const $ = c(14);
+	const { t } = useWords("table");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("week");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t1) {
+		t2 = [{
+			key: "week",
+			label: t1,
+			rowHeader: true,
+			width: "7rem"
+		}, ...MONTHS.map(_temp2)];
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = WEEKS.map((week) => ({ week: t("weekAt", { at: String(week) }) }));
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = { maxBlockSize: "13rem" };
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== props || $[10] !== t0 || $[11] !== t2 || $[12] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Simple, {
+			"aria-label": t0,
+			columns: t2,
+			layout: "fixed",
+			rows: t3,
+			rowToKey: _temp3,
+			style: t4,
+			variant: "surface",
+			...props
+		});
+		$[9] = props;
+		$[10] = t0;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+function _temp3(row) {
+	return row.week;
+}
+function _temp2(month) {
+	return {
+		cell: _temp,
+		key: month,
+		label: month,
+		numeric: true,
+		width: "7rem"
+	};
+}
+function _temp() {
+	return "17,500.40";
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Table } from \"@stealthscale/component-collections\";\n\ninterface Week {\n  readonly week: string;\n}\n\nconst MONTHS = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\"] as const;\n\nconst WEEKS = Array.from({ length: 12 }, (_, at) => at + 1);\n\nexport function Weeks(\n  props: Omit<Table.SimpleProps<Week>, \"columns\" | \"rows\" | \"rowToKey\">,\n): ReactElement {\n  const { t } = useWords(\"table\");\n\n  return (\n    <Table.Simple<Week>\n      aria-label={t(\"caption\")}\n      columns={[\n        { key: \"week\", label: t(\"week\"), rowHeader: true, width: \"7rem\" },\n        ...MONTHS.map((month) => ({\n          cell: () => \"17,500.40\",\n          key: month,\n          label: month,\n          numeric: true,\n          width: \"7rem\",\n        })),\n      ]}\n      layout=\"fixed\"\n      rows={WEEKS.map((week) => ({ week: t(\"weekAt\", { at: String(week) }) }))}\n      rowToKey={(row) => row.week}\n      style={{ maxBlockSize: \"13rem\" }}\n      variant=\"surface\"\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/table/table.specimen.tsx
+/**
+* Catalogue page for the table.
+*
+* @remarks
+*   `scenesOf` generates the sizes by looks, alignment, corners, rules, stripes, banded names,
+*   interactive rows and palettes, each from an example. The interactive and palette scenes stage a
+*   hover on the second row, and the held scenes stage a scroll position, so the behaviour shows in
+*   a still image. The layout scene is hand-written, because a fixed layout needs declared widths
+*   an auto layout does not. Sorting, spanning headers, row groups, sections, an empty table and
+*   the three held tables have hand-written scenes. Every scene renders a component from
+*   `examples/` and shows that file as its source. The words are keys under `table` in
+*   `locales/en/specimen/table.json`.
+*/
+/**
+* Layouts of the layout scene.
+*/
+const LAYOUTS = ["auto", "fixed"];
+/**
+* Returns the distance from the end of one element to the start of another, on one axis.
+*
+* @remarks
+*   The staging scrolls by this distance, so a whole row or column meets the sticky edge and no
+*   part of one shows under it.
+*/
+function between(scroller, from, to, axis) {
+	const start = scroller.querySelector(from)?.getBoundingClientRect();
+	const end = scroller.querySelector(to)?.getBoundingClientRect();
+	if (start === void 0 || end === void 0) return 0;
+	return axis === "block" ? end.top - start.bottom : end.left - start.right;
+}
+/**
+* Renders a table and sets a hover or a scroll position on it after it mounts.
+*
+* @remarks
+*   A still image shows no pointer and no scroll, so the scene sets the attribute or the position
+*   the page would. The staging never appears in an example.
+*/
+function Staged(t0) {
+	const $ = c(8);
+	const { children, columns: t1, hover: t2, rows: t3 } = t0;
+	const columns = t1 === void 0 ? 0 : t1;
+	const hover = t2 === void 0 ? false : t2;
+	const rows = t3 === void 0 ? 0 : t3;
+	const [box, setBox] = useState(null);
+	let t4;
+	let t5;
+	if ($[0] !== box || $[1] !== columns || $[2] !== hover || $[3] !== rows) {
+		t4 = () => {
+			const scroller = box?.querySelector(".table__viewport");
+			const row = hover ? box?.querySelector("tbody > tr:nth-child(2)") : void 0;
+			if (scroller === void 0 || scroller === null) return;
+			scroller.scrollTo({
+				left: between(scroller, "thead th", `thead th:nth-child(${String(columns + 2)})`, "inline"),
+				top: between(scroller, "thead", `tbody > tr:nth-child(${String(rows + 1)})`, "block")
+			});
+			if (row !== void 0 && row !== null) row.dataset["hover"] = "";
+			return () => {
+				if (row !== void 0 && row !== null) delete row.dataset["hover"];
+			};
+		};
+		t5 = [
+			box,
+			columns,
+			hover,
+			rows
+		];
+		$[0] = box;
+		$[1] = columns;
+		$[2] = hover;
+		$[3] = rows;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t4 = $[4];
+		t5 = $[5];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[6] !== children) {
+		t6 = /* @__PURE__ */ jsx("div", {
+			ref: setBox,
+			children
+		});
+		$[6] = children;
+		$[7] = t6;
+	} else t6 = $[7];
+	return t6;
+}
+/**
+* Renders the weeks table scrolled, named after its sticky axes so each region's name is unique.
+*/
+function Held(t0) {
+	const $ = c(26);
+	const { columns, rows, stickyColumn: t1, stickyHeader: t2 } = t0;
+	const stickyColumn = t1 === void 0 ? false : t1;
+	const stickyHeader = t2 === void 0 ? false : t2;
+	const { t } = useWords("table");
+	let T0;
+	let T1;
+	let T2;
+	let sticky;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== columns || $[1] !== rows || $[2] !== stickyColumn || $[3] !== stickyHeader || $[4] !== t) {
+		sticky = {
+			stickyColumn,
+			stickyHeader
+		};
+		T2 = Room;
+		t6 = "sm";
+		T1 = Staged;
+		t4 = columns;
+		t5 = rows;
+		T0 = Weeks;
+		t3 = landmarked(t("caption"), sticky);
+		$[0] = columns;
+		$[1] = rows;
+		$[2] = stickyColumn;
+		$[3] = stickyHeader;
+		$[4] = t;
+		$[5] = T0;
+		$[6] = T1;
+		$[7] = T2;
+		$[8] = sticky;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else {
+		T0 = $[5];
+		T1 = $[6];
+		T2 = $[7];
+		sticky = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+		t6 = $[12];
+	}
+	let t7;
+	if ($[13] !== T0 || $[14] !== sticky || $[15] !== t3) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			"aria-label": t3,
+			...sticky
+		});
+		$[13] = T0;
+		$[14] = sticky;
+		$[15] = t3;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== T1 || $[18] !== t4 || $[19] !== t5 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T1, {
+			columns: t4,
+			rows: t5,
+			children: t7
+		});
+		$[17] = T1;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	let t9;
+	if ($[22] !== T2 || $[23] !== t6 || $[24] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T2, {
+			size: t6,
+			children: t8
+		});
+		$[22] = T2;
+		$[23] = t6;
+		$[24] = t8;
+		$[25] = t9;
+	} else t9 = $[25];
+	return t9;
+}
+/**
+* Hand-written scene for the two layouts.
+*/
+const layouts = {
+	about: "table.layout.about",
+	axes: ["layout"],
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "layout",
+		of: LAYOUTS,
+		children: (layout) => /* @__PURE__ */ jsx(Room, {
+			size: "sm",
+			children: layout === "fixed" ? /* @__PURE__ */ jsx(Fixed, {}) : /* @__PURE__ */ jsx(Accounts, {})
+		})
+	}),
+	example: fixed_example_exports,
+	title: "table.layout.title"
+};
+/**
+* Hand-written scene for columns that sort on a press.
+*/
+const sorting = {
+	about: "table.sorting.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Sortable, {})
+	}),
+	example: sortable_example_exports,
+	title: "table.sorting.title"
+};
+/**
+* Hand-written scene for headers that span columns.
+*/
+const quarters = {
+	about: "table.quarters.about",
+	draw: Quarters,
+	example: quarters_example_exports,
+	title: "table.quarters.title"
+};
+/**
+* Hand-written scene for headers that span rows.
+*/
+const runs = {
+	about: "table.runs.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Runs, {})
+	}),
+	example: runs_example_exports,
+	title: "table.runs.title"
+};
+/**
+* Hand-written scene for rows grouped into sections.
+*/
+const sections = {
+	about: "table.sections.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Sections, {})
+	}),
+	example: sections_example_exports,
+	title: "table.sections.title"
+};
+/**
+* Hand-written scene for a table with no rows.
+*/
+const empty = {
+	about: "table.empty.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Empty, {})
+	}),
+	example: empty_example_exports,
+	title: "table.empty.title"
+};
+/**
+* Hand-written scene for sticky header rows, scrolled down two rows.
+*/
+const stickyHeader = {
+	about: "table.stickyHeader.about",
+	axes: ["stickyHeader"],
+	draw: () => /* @__PURE__ */ jsx(Held, {
+		rows: 2,
+		stickyHeader: true
+	}),
+	example: weeks_example_exports,
+	props: { stickyHeader: true },
+	title: "table.stickyHeader.title"
+};
+/**
+* Hand-written scene for a sticky first column, scrolled sideways.
+*/
+const stickyColumn = {
+	about: "table.stickyColumn.about",
+	axes: ["stickyColumn"],
+	draw: () => /* @__PURE__ */ jsx(Held, {
+		columns: 2,
+		stickyColumn: true
+	}),
+	example: weeks_example_exports,
+	props: { stickyColumn: true },
+	title: "table.stickyColumn.title"
+};
+/**
+* Hand-written scene for sticky header rows and a sticky first column, scrolled both ways.
+*/
+const stickyBoth = {
+	about: "table.stickyBoth.about",
+	axes: ["stickyColumn", "stickyHeader"],
+	draw: () => /* @__PURE__ */ jsx(Held, {
+		columns: 2,
+		rows: 2,
+		stickyColumn: true,
+		stickyHeader: true
+	}),
+	example: weeks_example_exports,
+	props: {
+		stickyColumn: true,
+		stickyHeader: true
+	},
+	title: "table.stickyBoth.title"
+};
+var table_specimen_default = specimen({
+	about: "table.about",
+	id: "components/collections/table",
+	imports: "import { Table } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				align: {
+					draw: (props) => /* @__PURE__ */ jsx(Room, {
+						size: "sm",
+						children: /* @__PURE__ */ jsx(Notes, { ...props })
+					}),
+					example: notes_example_exports
+				},
+				interactive: {
+					draw: (props) => /* @__PURE__ */ jsx(Staged, {
+						hover: true,
+						children: /* @__PURE__ */ jsx(Linked, { ...props })
+					}),
+					example: linked_example_exports
+				},
+				palette: {
+					draw: (props) => /* @__PURE__ */ jsx(Staged, {
+						hover: true,
+						children: /* @__PURE__ */ jsx(Linked, { ...props })
+					}),
+					example: linked_example_exports,
+					with: { interactive: true }
+				},
+				size: { across: "variant" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Payouts, { ...props }),
+			example: payouts_example_exports,
+			namespace: "table",
+			order: [
+				"size",
+				"align",
+				"radius",
+				"rules",
+				"striped",
+				"banded",
+				"interactive",
+				"palette"
+			],
+			skip: {
+				layout: "a fixed layout needs declared widths, so a hand-written scene draws both layouts",
+				stickyColumn: "the three held scenes at the foot of the page stage a scroll position",
+				stickyHeader: "the three held scenes at the foot of the page stage a scroll position"
+			}
+		}),
+		layouts,
+		sorting,
+		quarters,
+		runs,
+		sections,
+		empty,
+		stickyHeader,
+		stickyColumn,
+		stickyBoth
+	],
+	title: "table.title"
+});
+//#endregion
+export { table_specimen_default as default, empty, layouts, quarters, runs, sections, sorting, stickyBoth, stickyColumn, stickyHeader };