@stealthscale/component-collections 0.1.1 → 0.1.3

package/dist/pages/listbox/listbox.js

@@ -0,0 +1,1277 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { Z as Simple, at as useFilter, it as useGridCollection, ot as useListCollection } from "../../shared-DVn824MJ.js";
+import { u as recipe } from "../../recipes-C1oaF8pO.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, ButtonPropsProvider } from "@stealthscale/component-actions";
+import { Matrix, Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { createPortal } from "react-dom";
+import { CheckIcon, LandmarkIcon, MinusIcon, StoreIcon, XIcon } from "lucide-react";
+import { Popover } from "@stealthscale/component-disclosure";
+import { Group, Stack } from "@stealthscale/component-layout";
+//#region src/listbox/examples/clients.example.tsx
+var clients_example_exports = /* @__PURE__ */ __exportAll({
+	Clients: () => Clients,
+	source: () => source$10
+});
+const CLIENTS$8 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Clients(props) {
+	const $ = c(12);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS$8.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp$10,
+			itemToValue: _temp2$10,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["fathom"];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== collection || $[9] !== props || $[10] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			defaultValue: t2,
+			label: t3,
+			mark: t4,
+			...props
+		});
+		$[8] = collection;
+		$[9] = props;
+		$[10] = t3;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function _temp2$10(client_0) {
+	return client_0.id;
+}
+function _temp$10(client) {
+	return client.name;
+}
+const source$10 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Clients(props: Omit<Listbox.SimpleProps<Client>, \"collection\">): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map((id) => ({ id, name: t(id) })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/consignments.example.tsx
+var consignments_example_exports = /* @__PURE__ */ __exportAll({
+	Consignments: () => Consignments,
+	source: () => source$9
+});
+const COUNT = 1e4;
+function Consignments() {
+	const $ = c(11);
+	const { i18n, t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = Array.from({ length: COUNT }, (_, at) => ({
+			id: String(at),
+			name: t("consignment", { at: String(at + 1).padStart(5, "0") })
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const rows = t0;
+	let t1;
+	if ($[2] !== rows) {
+		t1 = {
+			itemToString: _temp$9,
+			itemToValue: _temp2$9,
+			rows
+		};
+		$[2] = rows;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] !== i18n.language || $[5] !== t) {
+		t2 = t("consignments", { count: COUNT.toLocaleString(i18n.language) });
+		$[4] = i18n.language;
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== collection || $[9] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			label: t2,
+			mark: t3,
+			tall: 8,
+			variant: "surface"
+		});
+		$[8] = collection;
+		$[9] = t2;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+function _temp2$9(consignment_0) {
+	return consignment_0.id;
+}
+function _temp$9(consignment) {
+	return consignment.name;
+}
+const source$9 = "import { type ReactElement, useMemo } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Consignment {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst COUNT = 10_000;\n\nexport function Consignments(): ReactElement {\n  const { i18n, t } = useWords(\"listbox\");\n  const rows = useMemo(\n    () =>\n      Array.from({ length: COUNT }, (_, at) => ({\n        id: String(at),\n        name: t(\"consignment\", { at: String(at + 1).padStart(5, \"0\") }),\n      })),\n    [t],\n  );\n  const { collection } = useListCollection<Consignment>({\n    itemToString: (consignment) => consignment.name,\n    itemToValue: (consignment) => consignment.id,\n    rows,\n  });\n\n  return (\n    <Listbox.Simple<Consignment>\n      collection={collection}\n      label={t(\"consignments\", { count: COUNT.toLocaleString(i18n.language) })}\n      mark={<CheckIcon size=\"100%\" />}\n      tall={8}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/described.example.tsx
+var described_example_exports = /* @__PURE__ */ __exportAll({
+	Described: () => Described,
+	source: () => source$8
+});
+const CLIENTS$7 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Described(props) {
+	const $ = c(14);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS$7.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp$8,
+			itemToValue: _temp2$8,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["fathom"];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	let t4;
+	if ($[5] !== t) {
+		t3 = (client_1) => t(`${client_1.id}Of`);
+		t4 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== collection || $[10] !== props || $[11] !== t3 || $[12] !== t4) {
+		t6 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			defaultValue: t2,
+			description: t3,
+			label: t4,
+			mark: t5,
+			...props
+		});
+		$[9] = collection;
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t6;
+	} else t6 = $[13];
+	return t6;
+}
+function _temp2$8(client_0) {
+	return client_0.id;
+}
+function _temp$8(client) {
+	return client.name;
+}
+const source$8 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Described(props: Omit<Listbox.SimpleProps<Client>, \"collection\">): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map((id) => ({ id, name: t(id) })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      description={(client) => t(`${client.id}Of`)}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/everything.example.tsx
+var everything_example_exports = /* @__PURE__ */ __exportAll({
+	Everything: () => Everything,
+	source: () => source$7
+});
+const CLIENTS$6 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Everything() {
+	const $ = c(18);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS$6.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp$7,
+			itemToValue: _temp2$7,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["fathom"];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		t5 = /* @__PURE__ */ jsx(MinusIcon, { size: "100%" });
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== t) {
+		t6 = t("all");
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("nothing");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== collection || $[14] !== t3 || $[15] !== t6 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Simple, {
+			boxed: true,
+			collection,
+			defaultValue: t2,
+			label: t3,
+			mark: t4,
+			mixedMark: t5,
+			selectAll: t6,
+			selectionMode: "multiple",
+			summary: t7,
+			variant: "surface"
+		});
+		$[13] = collection;
+		$[14] = t3;
+		$[15] = t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+function _temp2$7(client_0) {
+	return client_0.id;
+}
+function _temp$7(client) {
+	return client.name;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Everything(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map((id) => ({ id, name: t(id) })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      boxed\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      mixedMark={<MinusIcon size=\"100%\" />}\n      selectAll={t(\"all\")}\n      selectionMode=\"multiple\"\n      summary={t(\"nothing\")}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/filtered.example.tsx
+var filtered_example_exports = /* @__PURE__ */ __exportAll({
+	Filtered: () => Filtered,
+	source: () => source$6
+});
+const CLIENTS$5 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Filtered() {
+	const $ = c(25);
+	const { t } = useWords("listbox");
+	const filter = useFilter();
+	const t0 = filter.contains;
+	let t1;
+	if ($[0] !== t) {
+		t1 = CLIENTS$5.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== filter.contains || $[3] !== t1) {
+		t2 = {
+			filter: t0,
+			itemToString: _temp$6,
+			itemToValue: _temp2$6,
+			rows: t1
+		};
+		$[2] = filter.contains;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const { collection, narrow } = useListCollection(t2);
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = ["fathom"];
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("none");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("clients");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		t7 = /* @__PURE__ */ jsx(XIcon, { size: "100%" });
+		$[10] = t6;
+		$[11] = t7;
+	} else {
+		t6 = $[10];
+		t7 = $[11];
+	}
+	let t8;
+	if ($[12] !== t) {
+		t8 = t("clear");
+		$[12] = t;
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t) {
+		t9 = t("filter");
+		$[14] = t;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== narrow || $[17] !== t8 || $[18] !== t9) {
+		t10 = {
+			clearIndicator: t7,
+			clearLabel: t8,
+			onNarrow: narrow,
+			placeholder: t9
+		};
+		$[16] = narrow;
+		$[17] = t8;
+		$[18] = t9;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== collection || $[21] !== t10 || $[22] !== t4 || $[23] !== t5) {
+		t11 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			defaultValue: t3,
+			empty: t4,
+			label: t5,
+			mark: t6,
+			narrowing: t10,
+			variant: "surface"
+		});
+		$[20] = collection;
+		$[21] = t10;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
+}
+function _temp2$6(client_0) {
+	return client_0.id;
+}
+function _temp$6(client) {
+	return client.name;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, XIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useFilter, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Filtered(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const filter = useFilter();\n  const { collection, narrow } = useListCollection<Client>({\n    filter: filter.contains,\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map((id) => ({ id, name: t(id) })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      empty={t(\"none\")}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      narrowing={{\n        clearIndicator: <XIcon size=\"100%\" />,\n        clearLabel: t(\"clear\"),\n        onNarrow: narrow,\n        placeholder: t(\"filter\"),\n      }}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/grouped.example.tsx
+var grouped_example_exports = /* @__PURE__ */ __exportAll({
+	Grouped: () => Grouped,
+	source: () => source$5
+});
+const CLIENTS$4 = [
+	{
+		id: "fathom",
+		status: "held"
+	},
+	{
+		id: "lantern",
+		status: "held"
+	},
+	{
+		id: "pebble",
+		status: "closed"
+	},
+	{
+		id: "quartz",
+		status: "closed"
+	}
+];
+function Grouped() {
+	const $ = c(13);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS$4.map((t1) => {
+			const { id, status } = t1;
+			return {
+				id,
+				name: t(id),
+				status
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp$5,
+			itemToValue: _temp2$5,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["fathom"];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	let t4;
+	if ($[5] !== t) {
+		t3 = (status_0) => t(status_0);
+		t4 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+		$[7] = t4;
+	} else {
+		t3 = $[6];
+		t4 = $[7];
+	}
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== collection || $[10] !== t3 || $[11] !== t4) {
+		t6 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			defaultValue: t2,
+			groupBy: _temp3$2,
+			groupLabel: t3,
+			label: t4,
+			mark: t5,
+			variant: "surface"
+		});
+		$[9] = collection;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+function _temp3$2(client_1) {
+	return client_1.status;
+}
+function _temp2$5(client_0) {
+	return client_0.id;
+}
+function _temp$5(client) {
+	return client.name;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n  readonly status: \"closed\" | \"held\";\n}\n\nconst CLIENTS = [\n  { id: \"fathom\", status: \"held\" },\n  { id: \"lantern\", status: \"held\" },\n  { id: \"pebble\", status: \"closed\" },\n  { id: \"quartz\", status: \"closed\" },\n] as const;\n\nexport function Grouped(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map(({ id, status }) => ({ id, name: t(id), status })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      groupBy={(client) => client.status}\n      groupLabel={(status) => t(status)}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/held.example.tsx
+var held_example_exports = /* @__PURE__ */ __exportAll({
+	Held: () => Held,
+	source: () => source$4
+});
+const CLIENTS$3 = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+function Held() {
+	const $ = c(29);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = ["fathom"];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [picked, setPicked] = useState(t0);
+	let t1;
+	if ($[1] !== t) {
+		t1 = CLIENTS$3.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = {
+			itemToString: _temp$4,
+			itemToValue: _temp2$4,
+			rows: t1
+		};
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const { collection } = useListCollection(t2);
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		t5 = (next) => {
+			setPicked(next.value);
+		};
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== collection || $[10] !== picked || $[11] !== t3) {
+		t6 = /* @__PURE__ */ jsx(Simple, {
+			boxed: true,
+			collection,
+			label: t3,
+			mark: t4,
+			onValueChange: t5,
+			selectionMode: "multiple",
+			value: picked,
+			variant: "surface"
+		});
+		$[9] = collection;
+		$[10] = picked;
+		$[11] = t3;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			setPicked([...CLIENTS$3]);
+		};
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("takeAll");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Button, {
+			onClick: t7,
+			size: "sm",
+			variant: "outline",
+			children: t8
+		});
+		$[16] = t8;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => {
+			setPicked([]);
+		};
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t) {
+		t11 = t("takeNone");
+		$[19] = t;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Button, {
+			onClick: t10,
+			size: "sm",
+			variant: "outline",
+			children: t11
+		});
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t12 || $[24] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(Group, {
+			attached: true,
+			children: [t9, t12]
+		});
+		$[23] = t12;
+		$[24] = t9;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t13 || $[27] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t6, t13]
+		});
+		$[26] = t13;
+		$[27] = t6;
+		$[28] = t14;
+	} else t14 = $[28];
+	return t14;
+}
+function _temp2$4(client_0) {
+	return client_0.id;
+}
+function _temp$4(client) {
+	return client.name;
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Group, Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nexport function Held(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const [picked, setPicked] = useState<string[]>([\"fathom\"]);\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map((id) => ({ id, name: t(id) })),\n  });\n\n  return (\n    <Stack gap=\"md\">\n      <Listbox.Simple<Client>\n        boxed\n        collection={collection}\n        label={t(\"clients\")}\n        mark={<CheckIcon size=\"100%\" />}\n        onValueChange={(next) => {\n          setPicked(next.value);\n        }}\n        selectionMode=\"multiple\"\n        value={picked}\n        variant=\"surface\"\n      />\n      <Group attached>\n        <Button\n          onClick={() => {\n            setPicked([...CLIENTS]);\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          {t(\"takeAll\")}\n        </Button>\n        <Button\n          onClick={() => {\n            setPicked([]);\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          {t(\"takeNone\")}\n        </Button>\n      </Group>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/kinds.example.tsx
+var kinds_example_exports = /* @__PURE__ */ __exportAll({
+	Kinds: () => Kinds,
+	source: () => source$3
+});
+const CLIENTS$2 = [
+	{
+		id: "fathom",
+		kind: "bank"
+	},
+	{
+		id: "lantern",
+		kind: "shop"
+	},
+	{
+		id: "pebble",
+		kind: "bank"
+	},
+	{
+		id: "quartz",
+		kind: "shop"
+	}
+];
+function kindOf(client) {
+	return client.kind === "bank" ? /* @__PURE__ */ jsx(LandmarkIcon, {
+		"aria-hidden": true,
+		size: "1em"
+	}) : /* @__PURE__ */ jsx(StoreIcon, {
+		"aria-hidden": true,
+		size: "1em"
+	});
+}
+function Kinds() {
+	const $ = c(11);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS$2.map((t1) => {
+			const { id, kind } = t1;
+			return {
+				id,
+				kind,
+				name: t(id)
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp$3,
+			itemToValue: _temp2$3,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["fathom"];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== collection || $[9] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			defaultValue: t2,
+			icon: kindOf,
+			label: t3,
+			mark: t4,
+			variant: "surface"
+		});
+		$[8] = collection;
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+function _temp2$3(client_0) {
+	return client_0.id;
+}
+function _temp$3(client) {
+	return client.name;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, LandmarkIcon, StoreIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly kind: \"bank\" | \"shop\";\n  readonly name: string;\n}\n\nconst CLIENTS = [\n  { id: \"fathom\", kind: \"bank\" },\n  { id: \"lantern\", kind: \"shop\" },\n  { id: \"pebble\", kind: \"bank\" },\n  { id: \"quartz\", kind: \"shop\" },\n] as const;\n\nfunction kindOf(client: Client): ReactElement {\n  return client.kind === \"bank\" ? (\n    <LandmarkIcon aria-hidden size=\"1em\" />\n  ) : (\n    <StoreIcon aria-hidden size=\"1em\" />\n  );\n}\n\nexport function Kinds(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map(({ id, kind }) => ({ id, kind, name: t(id) })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      icon={kindOf}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/locked.example.tsx
+var locked_example_exports = /* @__PURE__ */ __exportAll({
+	Locked: () => Locked,
+	source: () => source$2
+});
+const CLIENTS$1 = [
+	{
+		closed: false,
+		id: "fathom"
+	},
+	{
+		closed: false,
+		id: "lantern"
+	},
+	{
+		closed: false,
+		id: "pebble"
+	},
+	{
+		closed: true,
+		id: "quartz"
+	}
+];
+function Locked() {
+	const $ = c(11);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS$1.map((t1) => {
+			const { closed, id } = t1;
+			return {
+				closed,
+				id,
+				name: t(id)
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			isItemDisabled: _temp$2,
+			itemToString: _temp2$2,
+			itemToValue: _temp3$1,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = ["fathom"];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("clients");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== collection || $[9] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Simple, {
+			collection,
+			defaultValue: t2,
+			label: t3,
+			mark: t4,
+			variant: "surface"
+		});
+		$[8] = collection;
+		$[9] = t3;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+}
+function _temp3$1(client_1) {
+	return client_1.id;
+}
+function _temp2$2(client_0) {
+	return client_0.name;
+}
+function _temp$2(client) {
+	return client.closed;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly closed: boolean;\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\n  { closed: false, id: \"fathom\" },\n  { closed: false, id: \"lantern\" },\n  { closed: false, id: \"pebble\" },\n  { closed: true, id: \"quartz\" },\n] as const;\n\nexport function Locked(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    isItemDisabled: (client) => client.closed,\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map(({ closed, id }) => ({ closed, id, name: t(id) })),\n  });\n\n  return (\n    <Listbox.Simple<Client>\n      collection={collection}\n      defaultValue={[\"fathom\"]}\n      label={t(\"clients\")}\n      mark={<CheckIcon size=\"100%\" />}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/ports.example.tsx
+var ports_example_exports = /* @__PURE__ */ __exportAll({
+	Ports: () => Ports,
+	source: () => source$1
+});
+const COLUMNS = "4";
+const PORTS = [
+	"NLRTM",
+	"DEHAM",
+	"BEANR",
+	"FRLEH",
+	"GBFXT",
+	"ESVLC",
+	"ITGOA",
+	"PLGDN",
+	"SEGOT",
+	"DKAAR",
+	"NOOSL",
+	"FIHEL"
+];
+function Ports() {
+	const $ = c(8);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			columnCount: Number(COLUMNS),
+			itemToString: _temp$1,
+			itemToValue: _temp2$1,
+			rows: PORTS.map(_temp3)
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const { collection } = useGridCollection(t0);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = ["NLRTM", "DEHAM"];
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("ports");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== collection || $[6] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Simple, {
+			boxed: true,
+			collection,
+			columns: COLUMNS,
+			defaultValue: t1,
+			label: t2,
+			mark: t3,
+			selectionMode: "multiple",
+			variant: "surface"
+		});
+		$[5] = collection;
+		$[6] = t2;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+}
+function _temp3(code) {
+	return { code };
+}
+function _temp2$1(port_0) {
+	return port_0.code;
+}
+function _temp$1(port) {
+	return port.code;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useGridCollection } from \"@stealthscale/component-collections\";\n\ninterface Port {\n  readonly code: string;\n}\n\nconst COLUMNS = \"4\";\n\nconst PORTS = [\n  \"NLRTM\",\n  \"DEHAM\",\n  \"BEANR\",\n  \"FRLEH\",\n  \"GBFXT\",\n  \"ESVLC\",\n  \"ITGOA\",\n  \"PLGDN\",\n  \"SEGOT\",\n  \"DKAAR\",\n  \"NOOSL\",\n  \"FIHEL\",\n];\n\nexport function Ports(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useGridCollection<Port>({\n    columnCount: Number(COLUMNS),\n    itemToString: (port) => port.code,\n    itemToValue: (port) => port.code,\n    rows: PORTS.map((code) => ({ code })),\n  });\n\n  return (\n    <Listbox.Simple<Port>\n      boxed\n      collection={collection}\n      columns={COLUMNS}\n      defaultValue={[\"NLRTM\", \"DEHAM\"]}\n      label={t(\"ports\")}\n      mark={<CheckIcon size=\"100%\" />}\n      selectionMode=\"multiple\"\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/listbox/examples/triggered.example.tsx
+var triggered_example_exports = /* @__PURE__ */ __exportAll({
+	Triggered: () => Triggered,
+	source: () => source
+});
+const CLIENTS = [
+	"fathom",
+	"lantern",
+	"pebble",
+	"quartz"
+];
+const OUTLINED = { variant: "outline" };
+function Triggered() {
+	const $ = c(18);
+	const { t } = useWords("listbox");
+	let t0;
+	if ($[0] !== t) {
+		t0 = CLIENTS.map((id) => ({
+			id,
+			name: t(id)
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = {
+			itemToString: _temp,
+			itemToValue: _temp2,
+			rows: t0
+		};
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	const { collection } = useListCollection(t1);
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("pick");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ButtonPropsProvider, {
+			value: OUTLINED,
+			children: /* @__PURE__ */ jsx(Popover.Trigger, {
+				as: Button,
+				children: t2
+			})
+		});
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("clients");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = ["fathom"];
+		t6 = /* @__PURE__ */ jsx(CheckIcon, { size: "100%" });
+		$[10] = t5;
+		$[11] = t6;
+	} else {
+		t5 = $[10];
+		t6 = $[11];
+	}
+	let t7;
+	if ($[12] !== collection || $[13] !== t4) {
+		t7 = createPortal(/* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, { children: /* @__PURE__ */ jsx(Simple, {
+			"aria-label": t4,
+			collection,
+			defaultValue: t5,
+			mark: t6
+		}) }) }), document.body);
+		$[12] = collection;
+		$[13] = t4;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t3 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Popover.Root, {
+			size: "xs",
+			children: [t3, t7]
+		});
+		$[15] = t3;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
+}
+function _temp2(client_0) {
+	return client_0.id;
+}
+function _temp(client) {
+	return client.name;
+}
+const source = "import { type ReactElement } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { CheckIcon } from \"lucide-react\";\n\nimport { Button, ButtonPropsProvider } from \"@stealthscale/component-actions\";\nimport { Popover } from \"@stealthscale/component-disclosure\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Listbox, useListCollection } from \"@stealthscale/component-collections\";\n\ninterface Client {\n  readonly id: string;\n  readonly name: string;\n}\n\nconst CLIENTS = [\"fathom\", \"lantern\", \"pebble\", \"quartz\"] as const;\n\nconst OUTLINED = { variant: \"outline\" } as const;\n\nexport function Triggered(): ReactElement {\n  const { t } = useWords(\"listbox\");\n  const { collection } = useListCollection<Client>({\n    itemToString: (client) => client.name,\n    itemToValue: (client) => client.id,\n    rows: CLIENTS.map((id) => ({ id, name: t(id) })),\n  });\n\n  return (\n    <Popover.Root size=\"xs\">\n      <ButtonPropsProvider value={OUTLINED}>\n        <Popover.Trigger as={Button}>{t(\"pick\")}</Popover.Trigger>\n      </ButtonPropsProvider>\n      {createPortal(\n        <Popover.Positioner>\n          <Popover.Content>\n            <Listbox.Simple<Client>\n              aria-label={t(\"clients\")}\n              collection={collection}\n              defaultValue={[\"fathom\"]}\n              mark={<CheckIcon size=\"100%\" />}\n            />\n          </Popover.Content>\n        </Popover.Positioner>,\n        document.body,\n      )}\n    </Popover.Root>\n  );\n}\n";
+//#endregion
+//#region src/listbox/listbox.specimen.tsx
+/**
+* Catalogue page for the listbox.
+*
+* @remarks
+*   `scenesOf` generates the looks by sizes, selected fills, highlights, palettes, effects, corners
+*   and orientations, each from an example in a room of a sidebar's width, with Fathom selected.
+*   The highlight scene highlights Lantern, so the highlight and the selection show together. The
+*   columns axis has a hand-written scene, because twelve column counts in one room truncate the
+*   port codes past five columns. The other hand-written scenes show props that are not recipe
+*   axes: selection modes, select all, a controlled value, icons, descriptions, groups, a disabled
+*   row, a popover, a windowed list and a filter. Every scene renders a component from `examples/`
+*   and shows that file as its source. The words are keys under `listbox` in
+*   `locales/en/specimen/listbox.json`.
+*/
+/**
+* Selection modes of the modes scene.
+*/
+const MODES = [
+	"single",
+	"multiple",
+	"extended"
+];
+/**
+* Props every raised list in a generated scene takes.
+*/
+const RAISED = { variant: "surface" };
+/**
+* Renders its children and sets `data-highlighted` on the Lantern row.
+*
+* @remarks
+*   The machine sets the attribute on the highlighted row only while the list has keyboard focus,
+*   and one list on a page has focus at a time. The attribute is staging, so it never appears in
+*   an example.
+*/
+function Highlighted(t0) {
+	const $ = c(5);
+	const { children } = t0;
+	const [box, setBox] = useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== box) {
+		t1 = () => {
+			const row = box?.querySelector("[role=\"option\"][data-value=\"lantern\"]");
+			if (row === void 0 || row === null) return;
+			row.dataset["highlighted"] = "";
+			return () => {
+				delete row.dataset["highlighted"];
+			};
+		};
+		t2 = [box];
+		$[0] = box;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== children) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref: setBox,
+			children
+		});
+		$[3] = children;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+/**
+* Hand-written scene for the three selection modes, boxed where the list allows several rows.
+*/
+const modes = {
+	about: "listbox.modes.about",
+	draw: () => /* @__PURE__ */ jsx(Matrix, {
+		knob: "selectionMode",
+		of: MODES,
+		children: (selectionMode) => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Clients, {
+				boxed: selectionMode !== "single",
+				selectionMode,
+				variant: "surface"
+			})
+		})
+	}),
+	example: clients_example_exports,
+	props: {
+		boxed: false,
+		selectionMode: "single",
+		variant: "surface"
+	},
+	title: "listbox.modes.title"
+};
+/**
+* Returns a hand-written scene that renders one example in a room of a sidebar's width.
+*
+* @param key - The scene's key under `listbox`.
+* @param example - The example module the scene shows as its source.
+* @param Drawing - The example's component.
+* @param props - Props the scene passes to an example that takes them.
+* @returns The scene.
+*/
+function roomed(key, example, Drawing, props) {
+	return {
+		about: `listbox.${key}.about`,
+		draw: () => /* @__PURE__ */ jsx(Room, {
+			size: "xs",
+			children: /* @__PURE__ */ jsx(Drawing, { ...props })
+		}),
+		example,
+		...props === void 0 ? {} : { props },
+		title: `listbox.${key}.title`
+	};
+}
+/**
+* Hand-written scene for a grid of tiles in four columns.
+*/
+const tiles = {
+	about: "listbox.columns.about",
+	axes: ["columns"],
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Ports, {})
+	}),
+	example: ports_example_exports,
+	title: "listbox.columns.title"
+};
+var listbox_specimen_default = specimen({
+	about: "listbox.about",
+	id: "components/collections/listbox",
+	imports: "import { Listbox } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: {
+				effect: { with: {
+					...RAISED,
+					selected: "solid"
+				} },
+				highlight: {
+					draw: (props) => /* @__PURE__ */ jsx(Room, {
+						size: "xs",
+						children: /* @__PURE__ */ jsx(Highlighted, { children: /* @__PURE__ */ jsx(Clients, { ...props }) })
+					}),
+					with: {
+						...RAISED,
+						defaultHighlightedValue: "lantern"
+					}
+				},
+				orientation: {
+					direction: "column",
+					draw: (props) => /* @__PURE__ */ jsx(Room, {
+						size: "sm",
+						children: /* @__PURE__ */ jsx(Described, { ...props })
+					}),
+					example: described_example_exports,
+					with: RAISED
+				},
+				palette: { with: {
+					...RAISED,
+					selected: "solid"
+				} },
+				radius: { with: RAISED },
+				selected: { with: RAISED },
+				variant: { across: "size" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "xs",
+				children: /* @__PURE__ */ jsx(Clients, { ...props })
+			}),
+			example: clients_example_exports,
+			namespace: "listbox",
+			order: [
+				"variant",
+				"selected",
+				"highlight",
+				"palette",
+				"effect",
+				"radius",
+				"orientation"
+			],
+			skip: { columns: "twelve counts in one room truncate the codes, so a hand-written scene shows four" }
+		}),
+		tiles,
+		modes,
+		roomed("whole", everything_example_exports, Everything),
+		roomed("outside", held_example_exports, Held),
+		roomed("kinds", kinds_example_exports, Kinds),
+		roomed("described", described_example_exports, Described, RAISED),
+		roomed("grouped", grouped_example_exports, Grouped),
+		roomed("locked", locked_example_exports, Locked),
+		roomed("triggered", triggered_example_exports, Triggered),
+		roomed("many", consignments_example_exports, Consignments),
+		roomed("narrowing", filtered_example_exports, Filtered)
+	],
+	title: "listbox.title"
+});
+//#endregion
+export { listbox_specimen_default as default, modes, tiles };