@stealthscale/component-collections 0.1.2 → 0.1.3

package/dist/pages/status-matrix/status-matrix.js

@@ -0,0 +1,1403 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { j as StatusMatrix } from "../../shared-DVn824MJ.js";
+import { c 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 { scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { CheckIcon, CircleDashedIcon, LoaderIcon, MinusIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { Text } from "@stealthscale/component-typography";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/status-matrix/examples/empty.example.tsx
+var empty_example_exports = /* @__PURE__ */ __exportAll({
+	Empty: () => Empty,
+	source: () => source$4
+});
+const SITES$2 = [
+	"Dublin",
+	"Reston",
+	"Osaka"
+];
+function Empty() {
+	const $ = c(36);
+	const { t } = useWords("status-matrix");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("checks");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		t2 = SITES$2.map(_temp$4);
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	if ($[4] !== t) {
+		t3 = t("corner");
+		$[4] = t;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("nothing");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("worst");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = [];
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t) {
+		t7 = t("down");
+		$[11] = t;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(XIcon, {});
+		$[13] = t8;
+	} else t8 = $[13];
+	let t9;
+	if ($[14] !== t7) {
+		t9 = {
+			label: t7,
+			mark: t8,
+			tone: "error"
+		};
+		$[14] = t7;
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t) {
+		t10 = t("fine");
+		$[16] = t;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(CheckIcon, {});
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== t10) {
+		t12 = {
+			label: t10,
+			mark: t11,
+			tone: "success"
+		};
+		$[19] = t10;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t12 || $[22] !== t9) {
+		t13 = {
+			down: t9,
+			fine: t12
+		};
+		$[21] = t12;
+		$[22] = t9;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== t) {
+		t14 = t("unmeasured");
+		$[24] = t;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(CircleDashedIcon, {});
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== t14) {
+		t16 = {
+			label: t14,
+			mark: t15,
+			tone: "neutral"
+		};
+		$[27] = t14;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t0 || $[30] !== t13 || $[31] !== t16 || $[32] !== t3 || $[33] !== t4 || $[34] !== t5) {
+		t17 = /* @__PURE__ */ jsx(StatusMatrix, {
+			caption: t0,
+			cells: t1,
+			columns: t2,
+			corner: t3,
+			empty: t4,
+			rollup: t5,
+			rows: t6,
+			rules: "all",
+			states: t13,
+			unmeasured: t16,
+			variant: "surface"
+		});
+		$[29] = t0;
+		$[30] = t13;
+		$[31] = t16;
+		$[32] = t3;
+		$[33] = t4;
+		$[34] = t5;
+		$[35] = t17;
+	} else t17 = $[35];
+	return t17;
+}
+function _temp$4(site) {
+	return {
+		id: site,
+		label: site
+	};
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, CircleDashedIcon, XIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { StatusMatrix } from \"@stealthscale/component-collections\";\n\nconst SITES = [\"Dublin\", \"Reston\", \"Osaka\"] as const;\n\nexport function Empty(): ReactElement {\n  const { t } = useWords(\"status-matrix\");\n\n  return (\n    <StatusMatrix\n      caption={t(\"checks\")}\n      cells={[]}\n      columns={SITES.map((site) => ({ id: site, label: site }))}\n      corner={t(\"corner\")}\n      empty={t(\"nothing\")}\n      rollup={t(\"worst\")}\n      rows={[]}\n      rules=\"all\"\n      states={{\n        down: { label: t(\"down\"), mark: <XIcon />, tone: \"error\" },\n        fine: { label: t(\"fine\"), mark: <CheckIcon />, tone: \"success\" },\n      }}\n      unmeasured={{ label: t(\"unmeasured\"), mark: <CircleDashedIcon />, tone: \"neutral\" }}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/status-matrix/examples/gapped.example.tsx
+var gapped_example_exports = /* @__PURE__ */ __exportAll({
+	Gapped: () => Gapped,
+	source: () => source$3
+});
+const SERVICES$2 = [
+	{
+		group: "platform",
+		id: "auth"
+	},
+	{
+		group: "platform",
+		id: "billing"
+	},
+	{
+		group: "streaming",
+		id: "media"
+	}
+];
+const REGIONS$1 = [
+	"EU",
+	"US",
+	"APAC"
+];
+const CELLS$3 = [
+	{
+		column: "EU",
+		row: "auth",
+		state: "fine"
+	},
+	{
+		column: "US",
+		row: "auth",
+		state: "fine"
+	},
+	{
+		column: "EU",
+		row: "billing",
+		state: "slow"
+	},
+	{
+		column: "US",
+		row: "billing",
+		state: "down"
+	},
+	{
+		column: "EU",
+		row: "media",
+		state: "rolling"
+	},
+	{
+		column: "US",
+		row: "media",
+		state: "fine"
+	}
+];
+function Gapped() {
+	const $ = c(49);
+	const { t } = useWords("status-matrix");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("rollout");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = REGIONS$1.map(_temp$3);
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("corner");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("legend");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("worst");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = SERVICES$2.map((t6) => {
+			const { group, id } = t6;
+			return {
+				group: t(group),
+				id,
+				label: id
+			};
+		});
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("down");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(XIcon, {});
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t6) {
+		t8 = {
+			label: t6,
+			mark: t7,
+			tone: "error"
+		};
+		$[14] = t6;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("fine");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(CheckIcon, {});
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== t9) {
+		t11 = {
+			label: t9,
+			mark: t10,
+			tone: "success"
+		};
+		$[19] = t9;
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t) {
+		t12 = t("rolling");
+		$[21] = t;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(LoaderIcon, {});
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== t12) {
+		t14 = {
+			label: t12,
+			mark: t13,
+			tone: "info"
+		};
+		$[24] = t12;
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== t) {
+		t15 = t("slow");
+		$[26] = t;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx(TriangleAlertIcon, {});
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t15) {
+		t17 = {
+			label: t15,
+			mark: t16,
+			tone: "warning"
+		};
+		$[29] = t15;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== t11 || $[32] !== t14 || $[33] !== t17 || $[34] !== t8) {
+		t18 = {
+			down: t8,
+			fine: t11,
+			rolling: t14,
+			slow: t17
+		};
+		$[31] = t11;
+		$[32] = t14;
+		$[33] = t17;
+		$[34] = t8;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== t) {
+		t19 = t("unmeasured");
+		$[36] = t;
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(CircleDashedIcon, {});
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== t19) {
+		t21 = {
+			label: t19,
+			mark: t20,
+			tone: "neutral"
+		};
+		$[39] = t19;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] !== t0 || $[42] !== t18 || $[43] !== t2 || $[44] !== t21 || $[45] !== t3 || $[46] !== t4 || $[47] !== t5) {
+		t22 = /* @__PURE__ */ jsx(StatusMatrix, {
+			caption: t0,
+			cells: CELLS$3,
+			columns: t1,
+			corner: t2,
+			legend: t3,
+			rollup: t4,
+			rows: t5,
+			rules: "all",
+			states: t18,
+			unmeasured: t21,
+			variant: "surface"
+		});
+		$[41] = t0;
+		$[42] = t18;
+		$[43] = t2;
+		$[44] = t21;
+		$[45] = t3;
+		$[46] = t4;
+		$[47] = t5;
+		$[48] = t22;
+	} else t22 = $[48];
+	return t22;
+}
+function _temp$3(region) {
+	return {
+		id: region,
+		label: region
+	};
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { CheckIcon, CircleDashedIcon, LoaderIcon, TriangleAlertIcon, XIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { MatrixCell, StatusMatrix } from \"@stealthscale/component-collections\";\n\nconst SERVICES = [\n  { group: \"platform\", id: \"auth\" },\n  { group: \"platform\", id: \"billing\" },\n  { group: \"streaming\", id: \"media\" },\n] as const;\n\nconst REGIONS = [\"EU\", \"US\", \"APAC\"] as const;\n\nconst CELLS: readonly MatrixCell[] = [\n  { column: \"EU\", row: \"auth\", state: \"fine\" },\n  { column: \"US\", row: \"auth\", state: \"fine\" },\n  { column: \"EU\", row: \"billing\", state: \"slow\" },\n  { column: \"US\", row: \"billing\", state: \"down\" },\n  { column: \"EU\", row: \"media\", state: \"rolling\" },\n  { column: \"US\", row: \"media\", state: \"fine\" },\n];\n\nexport function Gapped(): ReactElement {\n  const { t } = useWords(\"status-matrix\");\n\n  return (\n    <StatusMatrix\n      caption={t(\"rollout\")}\n      cells={CELLS}\n      columns={REGIONS.map((region) => ({ id: region, label: region }))}\n      corner={t(\"corner\")}\n      legend={t(\"legend\")}\n      rollup={t(\"worst\")}\n      rows={SERVICES.map(({ group, id }) => ({ group: t(group), id, label: id }))}\n      rules=\"all\"\n      states={{\n        down: { label: t(\"down\"), mark: <XIcon />, tone: \"error\" },\n        fine: { label: t(\"fine\"), mark: <CheckIcon />, tone: \"success\" },\n        rolling: { label: t(\"rolling\"), mark: <LoaderIcon />, tone: \"info\" },\n        slow: { label: t(\"slow\"), mark: <TriangleAlertIcon />, tone: \"warning\" },\n      }}\n      unmeasured={{ label: t(\"unmeasured\"), mark: <CircleDashedIcon />, tone: \"neutral\" }}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/status-matrix/examples/health.example.tsx
+var health_example_exports = /* @__PURE__ */ __exportAll({
+	Health: () => Health,
+	source: () => source$2
+});
+const SERVICES$1 = [
+	{
+		group: "payments",
+		id: "checkout-api"
+	},
+	{
+		group: "payments",
+		id: "ledger"
+	},
+	{
+		group: "discovery",
+		id: "search-api"
+	},
+	{
+		group: "discovery",
+		id: "ranking"
+	}
+];
+const REGIONS = [
+	"EU",
+	"US",
+	"APAC"
+];
+const CELLS$2 = [
+	{
+		column: "EU",
+		row: "checkout-api",
+		state: "fine"
+	},
+	{
+		column: "US",
+		row: "checkout-api",
+		state: "down"
+	},
+	{
+		column: "APAC",
+		row: "checkout-api",
+		state: "slow"
+	},
+	{
+		column: "EU",
+		row: "ledger",
+		state: "fine"
+	},
+	{
+		column: "US",
+		row: "ledger",
+		state: "fine"
+	},
+	{
+		column: "APAC",
+		row: "ledger",
+		state: "fine"
+	},
+	{
+		column: "EU",
+		row: "search-api",
+		state: "fine"
+	},
+	{
+		column: "US",
+		row: "search-api",
+		state: "rolling"
+	},
+	{
+		column: "APAC",
+		row: "search-api",
+		state: "fine"
+	},
+	{
+		column: "EU",
+		row: "ranking",
+		state: "slow"
+	},
+	{
+		column: "US",
+		row: "ranking",
+		state: "fine"
+	},
+	{
+		column: "APAC",
+		row: "ranking",
+		state: "skipped"
+	}
+];
+function Health(props) {
+	const $ = c(59);
+	const { t } = useWords("status-matrix");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = (state, row, column) => t("crossing", {
+			column: column.id,
+			row: row.id,
+			state: state.label
+		});
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = REGIONS.map(_temp$2);
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("corner");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("legend");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("worst");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = SERVICES$1.map((t7) => {
+			const { group, id } = t7;
+			return {
+				group: t(group),
+				id,
+				label: id
+			};
+		});
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("down");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(XIcon, {});
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t7) {
+		t9 = {
+			label: t7,
+			mark: t8,
+			tone: "error"
+		};
+		$[16] = t7;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("fine");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(CheckIcon, {});
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t10) {
+		t12 = {
+			label: t10,
+			mark: t11,
+			tone: "success"
+		};
+		$[21] = t10;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] !== t) {
+		t13 = t("rolling");
+		$[23] = t;
+		$[24] = t13;
+	} else t13 = $[24];
+	let t14;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(LoaderIcon, {});
+		$[25] = t14;
+	} else t14 = $[25];
+	let t15;
+	if ($[26] !== t13) {
+		t15 = {
+			label: t13,
+			mark: t14,
+			tone: "info"
+		};
+		$[26] = t13;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== t) {
+		t16 = t("skipped");
+		$[28] = t;
+		$[29] = t16;
+	} else t16 = $[29];
+	let t17;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(MinusIcon, {});
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== t16) {
+		t18 = {
+			label: t16,
+			mark: t17,
+			tone: "neutral"
+		};
+		$[31] = t16;
+		$[32] = t18;
+	} else t18 = $[32];
+	let t19;
+	if ($[33] !== t) {
+		t19 = t("slow");
+		$[33] = t;
+		$[34] = t19;
+	} else t19 = $[34];
+	let t20;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(TriangleAlertIcon, {});
+		$[35] = t20;
+	} else t20 = $[35];
+	let t21;
+	if ($[36] !== t19) {
+		t21 = {
+			label: t19,
+			mark: t20,
+			tone: "warning"
+		};
+		$[36] = t19;
+		$[37] = t21;
+	} else t21 = $[37];
+	let t22;
+	if ($[38] !== t12 || $[39] !== t15 || $[40] !== t18 || $[41] !== t21 || $[42] !== t9) {
+		t22 = {
+			down: t9,
+			fine: t12,
+			rolling: t15,
+			skipped: t18,
+			slow: t21
+		};
+		$[38] = t12;
+		$[39] = t15;
+		$[40] = t18;
+		$[41] = t21;
+		$[42] = t9;
+		$[43] = t22;
+	} else t22 = $[43];
+	let t23;
+	if ($[44] !== t) {
+		t23 = t("unmeasured");
+		$[44] = t;
+		$[45] = t23;
+	} else t23 = $[45];
+	let t24;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t24 = /* @__PURE__ */ jsx(CircleDashedIcon, {});
+		$[46] = t24;
+	} else t24 = $[46];
+	let t25;
+	if ($[47] !== t23) {
+		t25 = {
+			label: t23,
+			mark: t24,
+			tone: "neutral"
+		};
+		$[47] = t23;
+		$[48] = t25;
+	} else t25 = $[48];
+	let t26;
+	if ($[49] !== props || $[50] !== t0 || $[51] !== t1 || $[52] !== t22 || $[53] !== t25 || $[54] !== t3 || $[55] !== t4 || $[56] !== t5 || $[57] !== t6) {
+		t26 = /* @__PURE__ */ jsx(StatusMatrix, {
+			caption: t0,
+			cellLabel: t1,
+			cells: CELLS$2,
+			columns: t2,
+			corner: t3,
+			legend: t4,
+			rollup: t5,
+			rows: t6,
+			rules: "all",
+			states: t22,
+			unmeasured: t25,
+			variant: "surface",
+			...props
+		});
+		$[49] = props;
+		$[50] = t0;
+		$[51] = t1;
+		$[52] = t22;
+		$[53] = t25;
+		$[54] = t3;
+		$[55] = t4;
+		$[56] = t5;
+		$[57] = t6;
+		$[58] = t26;
+	} else t26 = $[58];
+	return t26;
+}
+function _temp$2(region) {
+	return {
+		id: region,
+		label: region
+	};
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport {\n  CheckIcon,\n  CircleDashedIcon,\n  LoaderIcon,\n  MinusIcon,\n  TriangleAlertIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { MatrixCell, StatusMatrix, StatusMatrixProps } from \"@stealthscale/component-collections\";\n\nconst SERVICES = [\n  { group: \"payments\", id: \"checkout-api\" },\n  { group: \"payments\", id: \"ledger\" },\n  { group: \"discovery\", id: \"search-api\" },\n  { group: \"discovery\", id: \"ranking\" },\n] as const;\n\nconst REGIONS = [\"EU\", \"US\", \"APAC\"] as const;\n\nconst CELLS: readonly MatrixCell[] = [\n  { column: \"EU\", row: \"checkout-api\", state: \"fine\" },\n  { column: \"US\", row: \"checkout-api\", state: \"down\" },\n  { column: \"APAC\", row: \"checkout-api\", state: \"slow\" },\n  { column: \"EU\", row: \"ledger\", state: \"fine\" },\n  { column: \"US\", row: \"ledger\", state: \"fine\" },\n  { column: \"APAC\", row: \"ledger\", state: \"fine\" },\n  { column: \"EU\", row: \"search-api\", state: \"fine\" },\n  { column: \"US\", row: \"search-api\", state: \"rolling\" },\n  { column: \"APAC\", row: \"search-api\", state: \"fine\" },\n  { column: \"EU\", row: \"ranking\", state: \"slow\" },\n  { column: \"US\", row: \"ranking\", state: \"fine\" },\n  { column: \"APAC\", row: \"ranking\", state: \"skipped\" },\n];\n\nexport function Health(\n  props: Omit<StatusMatrixProps, \"cells\" | \"columns\" | \"rows\" | \"states\" | \"unmeasured\">,\n): ReactElement {\n  const { t } = useWords(\"status-matrix\");\n\n  return (\n    <StatusMatrix\n      caption={t(\"caption\")}\n      cellLabel={(state, row, column) =>\n        t(\"crossing\", { column: column.id, row: row.id, state: state.label })\n      }\n      cells={CELLS}\n      columns={REGIONS.map((region) => ({ id: region, label: region }))}\n      corner={t(\"corner\")}\n      legend={t(\"legend\")}\n      rollup={t(\"worst\")}\n      rows={SERVICES.map(({ group, id }) => ({ group: t(group), id, label: id }))}\n      rules=\"all\"\n      states={{\n        down: { label: t(\"down\"), mark: <XIcon />, tone: \"error\" },\n        fine: { label: t(\"fine\"), mark: <CheckIcon />, tone: \"success\" },\n        rolling: { label: t(\"rolling\"), mark: <LoaderIcon />, tone: \"info\" },\n        skipped: { label: t(\"skipped\"), mark: <MinusIcon />, tone: \"neutral\" },\n        slow: { label: t(\"slow\"), mark: <TriangleAlertIcon />, tone: \"warning\" },\n      }}\n      unmeasured={{ label: t(\"unmeasured\"), mark: <CircleDashedIcon />, tone: \"neutral\" }}\n      variant=\"surface\"\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/status-matrix/examples/plumbing.example.tsx
+var plumbing_example_exports = /* @__PURE__ */ __exportAll({
+	Plumbing: () => Plumbing,
+	source: () => source$1
+});
+const SERVICES = [
+	"cdn",
+	"dns",
+	"mail",
+	"object-store"
+];
+const SITES$1 = [
+	"Dublin",
+	"Reston",
+	"Osaka"
+];
+const CELLS$1 = [
+	{
+		column: "Dublin",
+		row: "cdn",
+		state: "fine"
+	},
+	{
+		column: "Reston",
+		row: "cdn",
+		state: "fine"
+	},
+	{
+		column: "Osaka",
+		row: "cdn",
+		state: "slow"
+	},
+	{
+		column: "Dublin",
+		row: "dns",
+		state: "fine"
+	},
+	{
+		column: "Reston",
+		row: "dns",
+		state: "fine"
+	},
+	{
+		column: "Osaka",
+		row: "dns",
+		state: "fine"
+	},
+	{
+		column: "Dublin",
+		row: "mail",
+		state: "skipped"
+	},
+	{
+		column: "Reston",
+		row: "mail",
+		state: "rolling"
+	},
+	{
+		column: "Osaka",
+		row: "mail",
+		state: "skipped"
+	},
+	{
+		column: "Dublin",
+		row: "object-store",
+		state: "down"
+	},
+	{
+		column: "Reston",
+		row: "object-store",
+		state: "fine"
+	},
+	{
+		column: "Osaka",
+		row: "object-store",
+		state: "fine"
+	}
+];
+function Plumbing() {
+	const $ = c(50);
+	const { t } = useWords("status-matrix");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("shared");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = SITES$1.map(_temp$1);
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("corner");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("worst");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = SERVICES.map(_temp2$1);
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t) {
+		t5 = t("down");
+		$[8] = t;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(XIcon, {});
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t5) {
+		t7 = {
+			label: t5,
+			mark: t6,
+			tone: "error"
+		};
+		$[11] = t5;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t) {
+		t8 = t("fine");
+		$[13] = t;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(CheckIcon, {});
+		$[15] = t9;
+	} else t9 = $[15];
+	let t10;
+	if ($[16] !== t8) {
+		t10 = {
+			label: t8,
+			mark: t9,
+			tone: "success"
+		};
+		$[16] = t8;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t) {
+		t11 = t("rolling");
+		$[18] = t;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(LoaderIcon, {});
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t11) {
+		t13 = {
+			label: t11,
+			mark: t12,
+			tone: "info"
+		};
+		$[21] = t11;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== t) {
+		t14 = t("skipped");
+		$[23] = t;
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(MinusIcon, {});
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== t14) {
+		t16 = {
+			label: t14,
+			mark: t15,
+			tone: "neutral"
+		};
+		$[26] = t14;
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== t) {
+		t17 = t("slow");
+		$[28] = t;
+		$[29] = t17;
+	} else t17 = $[29];
+	let t18;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(TriangleAlertIcon, {});
+		$[30] = t18;
+	} else t18 = $[30];
+	let t19;
+	if ($[31] !== t17) {
+		t19 = {
+			label: t17,
+			mark: t18,
+			tone: "warning"
+		};
+		$[31] = t17;
+		$[32] = t19;
+	} else t19 = $[32];
+	let t20;
+	if ($[33] !== t10 || $[34] !== t13 || $[35] !== t16 || $[36] !== t19 || $[37] !== t7) {
+		t20 = {
+			down: t7,
+			fine: t10,
+			rolling: t13,
+			skipped: t16,
+			slow: t19
+		};
+		$[33] = t10;
+		$[34] = t13;
+		$[35] = t16;
+		$[36] = t19;
+		$[37] = t7;
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== t) {
+		t21 = t("unmeasured");
+		$[39] = t;
+		$[40] = t21;
+	} else t21 = $[40];
+	let t22;
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(CircleDashedIcon, {});
+		$[41] = t22;
+	} else t22 = $[41];
+	let t23;
+	if ($[42] !== t21) {
+		t23 = {
+			label: t21,
+			mark: t22,
+			tone: "neutral"
+		};
+		$[42] = t21;
+		$[43] = t23;
+	} else t23 = $[43];
+	let t24;
+	if ($[44] !== t0 || $[45] !== t2 || $[46] !== t20 || $[47] !== t23 || $[48] !== t3) {
+		t24 = /* @__PURE__ */ jsx(StatusMatrix, {
+			caption: t0,
+			cells: CELLS$1,
+			columns: t1,
+			corner: t2,
+			rollup: t3,
+			rows: t4,
+			rules: "all",
+			states: t20,
+			unmeasured: t23,
+			variant: "surface"
+		});
+		$[44] = t0;
+		$[45] = t2;
+		$[46] = t20;
+		$[47] = t23;
+		$[48] = t3;
+		$[49] = t24;
+	} else t24 = $[49];
+	return t24;
+}
+function _temp2$1(id) {
+	return {
+		id,
+		label: id
+	};
+}
+function _temp$1(site) {
+	return {
+		id: site,
+		label: site
+	};
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport {\n  CheckIcon,\n  CircleDashedIcon,\n  LoaderIcon,\n  MinusIcon,\n  TriangleAlertIcon,\n  XIcon,\n} from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { MatrixCell, StatusMatrix } from \"@stealthscale/component-collections\";\n\nconst SERVICES = [\"cdn\", \"dns\", \"mail\", \"object-store\"] as const;\n\nconst SITES = [\"Dublin\", \"Reston\", \"Osaka\"] as const;\n\nconst CELLS: readonly MatrixCell[] = [\n  { column: \"Dublin\", row: \"cdn\", state: \"fine\" },\n  { column: \"Reston\", row: \"cdn\", state: \"fine\" },\n  { column: \"Osaka\", row: \"cdn\", state: \"slow\" },\n  { column: \"Dublin\", row: \"dns\", state: \"fine\" },\n  { column: \"Reston\", row: \"dns\", state: \"fine\" },\n  { column: \"Osaka\", row: \"dns\", state: \"fine\" },\n  { column: \"Dublin\", row: \"mail\", state: \"skipped\" },\n  { column: \"Reston\", row: \"mail\", state: \"rolling\" },\n  { column: \"Osaka\", row: \"mail\", state: \"skipped\" },\n  { column: \"Dublin\", row: \"object-store\", state: \"down\" },\n  { column: \"Reston\", row: \"object-store\", state: \"fine\" },\n  { column: \"Osaka\", row: \"object-store\", state: \"fine\" },\n];\n\nexport function Plumbing(): ReactElement {\n  const { t } = useWords(\"status-matrix\");\n\n  return (\n    <StatusMatrix\n      caption={t(\"shared\")}\n      cells={CELLS}\n      columns={SITES.map((site) => ({ id: site, label: site }))}\n      corner={t(\"corner\")}\n      rollup={t(\"worst\")}\n      rows={SERVICES.map((id) => ({ id, label: id }))}\n      rules=\"all\"\n      states={{\n        down: { label: t(\"down\"), mark: <XIcon />, tone: \"error\" },\n        fine: { label: t(\"fine\"), mark: <CheckIcon />, tone: \"success\" },\n        rolling: { label: t(\"rolling\"), mark: <LoaderIcon />, tone: \"info\" },\n        skipped: { label: t(\"skipped\"), mark: <MinusIcon />, tone: \"neutral\" },\n        slow: { label: t(\"slow\"), mark: <TriangleAlertIcon />, tone: \"warning\" },\n      }}\n      unmeasured={{ label: t(\"unmeasured\"), mark: <CircleDashedIcon />, tone: \"neutral\" }}\n      variant=\"surface\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/status-matrix/examples/queues.example.tsx
+var queues_example_exports = /* @__PURE__ */ __exportAll({
+	Queues: () => Queues,
+	source: () => source
+});
+const QUEUES = ["notifications", "webhooks"];
+const SITES = [
+	"Dublin",
+	"Reston",
+	"Osaka"
+];
+const CELLS = [
+	{
+		column: "Dublin",
+		row: "notifications",
+		state: "fine"
+	},
+	{
+		column: "Reston",
+		row: "notifications",
+		state: "slow"
+	},
+	{
+		column: "Osaka",
+		row: "notifications",
+		state: "fine"
+	},
+	{
+		column: "Dublin",
+		row: "webhooks",
+		state: "down"
+	},
+	{
+		column: "Reston",
+		row: "webhooks",
+		state: "fine"
+	}
+];
+function Queues() {
+	const $ = c(51);
+	const { t } = useWords("status-matrix");
+	const [picked, setPicked] = useState();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("down");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(XIcon, {});
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t0) {
+		t2 = {
+			label: t0,
+			mark: t1,
+			tone: "error"
+		};
+		$[3] = t0;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("fine");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(CheckIcon, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = {
+			label: t3,
+			mark: t4,
+			tone: "success"
+		};
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("slow");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(TriangleAlertIcon, {});
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6) {
+		t8 = {
+			label: t6,
+			mark: t7,
+			tone: "warning"
+		};
+		$[13] = t6;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t2 || $[16] !== t5 || $[17] !== t8) {
+		t9 = {
+			down: t2,
+			fine: t5,
+			slow: t8
+		};
+		$[15] = t2;
+		$[16] = t5;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	const states = t9;
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("unmeasured");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(CircleDashedIcon, {});
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t10) {
+		t12 = {
+			label: t10,
+			mark: t11,
+			tone: "neutral"
+		};
+		$[22] = t10;
+		$[23] = t12;
+	} else t12 = $[23];
+	const unmeasured = t12;
+	let t13;
+	if ($[24] !== t) {
+		t13 = t("queues");
+		$[24] = t;
+		$[25] = t13;
+	} else t13 = $[25];
+	let t14;
+	if ($[26] !== t) {
+		t14 = (state, row, column) => t("crossing", {
+			column: column.id,
+			row: row.id,
+			state: state.label
+		});
+		$[26] = t;
+		$[27] = t14;
+	} else t14 = $[27];
+	let t15;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = SITES.map(_temp);
+		$[28] = t15;
+	} else t15 = $[28];
+	let t16;
+	if ($[29] !== t) {
+		t16 = t("queue");
+		$[29] = t;
+		$[30] = t16;
+	} else t16 = $[30];
+	let t17;
+	if ($[31] !== states || $[32] !== t || $[33] !== unmeasured) {
+		t17 = (row_0, column_0, cell) => {
+			const state_0 = (cell === void 0 ? void 0 : states[cell.state]) ?? unmeasured;
+			const said = t("picked", {
+				column: column_0,
+				row: row_0,
+				state: state_0.label
+			});
+			setPicked((was) => was === said ? void 0 : said);
+		};
+		$[31] = states;
+		$[32] = t;
+		$[33] = unmeasured;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = QUEUES.map(_temp2);
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== states || $[37] !== t13 || $[38] !== t14 || $[39] !== t16 || $[40] !== t17 || $[41] !== unmeasured) {
+		t19 = /* @__PURE__ */ jsx(StatusMatrix, {
+			caption: t13,
+			cellLabel: t14,
+			cells: CELLS,
+			columns: t15,
+			corner: t16,
+			onSelectCell: t17,
+			rows: t18,
+			rules: "all",
+			states,
+			unmeasured,
+			variant: "surface"
+		});
+		$[36] = states;
+		$[37] = t13;
+		$[38] = t14;
+		$[39] = t16;
+		$[40] = t17;
+		$[41] = unmeasured;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== picked || $[44] !== t) {
+		t20 = picked ?? t("nothingYet");
+		$[43] = picked;
+		$[44] = t;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Text, {
+			"aria-live": "polite",
+			children: t20
+		});
+		$[46] = t20;
+		$[47] = t21;
+	} else t21 = $[47];
+	let t22;
+	if ($[48] !== t19 || $[49] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [t19, t21]
+		});
+		$[48] = t19;
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
+}
+function _temp2(id) {
+	return {
+		id,
+		label: id
+	};
+}
+function _temp(site) {
+	return {
+		id: site,
+		label: site
+	};
+}
+const source = "import { type ReactElement, useState } from \"react\";\n\nimport { CheckIcon, CircleDashedIcon, TriangleAlertIcon, XIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { MatrixCell, MatrixState, StatusMatrix } from \"@stealthscale/component-collections\";\n\nconst QUEUES = [\"notifications\", \"webhooks\"] as const;\n\nconst SITES = [\"Dublin\", \"Reston\", \"Osaka\"] as const;\n\nconst CELLS: readonly MatrixCell[] = [\n  { column: \"Dublin\", row: \"notifications\", state: \"fine\" },\n  { column: \"Reston\", row: \"notifications\", state: \"slow\" },\n  { column: \"Osaka\", row: \"notifications\", state: \"fine\" },\n  { column: \"Dublin\", row: \"webhooks\", state: \"down\" },\n  { column: \"Reston\", row: \"webhooks\", state: \"fine\" },\n];\n\nexport function Queues(): ReactElement {\n  const { t } = useWords(\"status-matrix\");\n  const [picked, setPicked] = useState<string | undefined>();\n  const states: Readonly<Record<string, MatrixState>> = {\n    down: { label: t(\"down\"), mark: <XIcon />, tone: \"error\" },\n    fine: { label: t(\"fine\"), mark: <CheckIcon />, tone: \"success\" },\n    slow: { label: t(\"slow\"), mark: <TriangleAlertIcon />, tone: \"warning\" },\n  };\n  const unmeasured: MatrixState = {\n    label: t(\"unmeasured\"),\n    mark: <CircleDashedIcon />,\n    tone: \"neutral\",\n  };\n\n  return (\n    <Stack gap=\"md\">\n      <StatusMatrix\n        caption={t(\"queues\")}\n        cellLabel={(state, row, column) =>\n          t(\"crossing\", { column: column.id, row: row.id, state: state.label })\n        }\n        cells={CELLS}\n        columns={SITES.map((site) => ({ id: site, label: site }))}\n        corner={t(\"queue\")}\n        onSelectCell={(row, column, cell) => {\n          const state = (cell === undefined ? undefined : states[cell.state]) ?? unmeasured;\n          const said = t(\"picked\", { column, row, state: state.label });\n\n          setPicked((was) => (was === said ? undefined : said));\n        }}\n        rows={QUEUES.map((id) => ({ id, label: id }))}\n        rules=\"all\"\n        states={states}\n        unmeasured={unmeasured}\n        variant=\"surface\"\n      />\n      <Text aria-live=\"polite\">{picked ?? t(\"nothingYet\")}</Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/status-matrix/status-matrix.specimen.tsx
+/**
+* Catalogue page for the status matrix.
+*
+* @remarks
+*   `scenesOf` generates the size scene from the health example. The gap, picking, flat and empty
+*   scenes are hand-written, because each needs its own rows and cells. The picking scene moves a
+*   pointer onto one crossing after it mounts, so the crosshair shows in a still image. Every scene
+*   renders a component from `examples/` and shows that file as its source. The words are keys
+*   under `status-matrix` in `locales/en/specimen/status-matrix.json`.
+*/
+/**
+* Renders a matrix and dispatches a pointer move onto one crossing after it mounts.
+*
+* @remarks
+*   The event bubbles to the matrix's own handler, so the crosshair lights the crossing's row and
+*   column the way a pointer would. The staging never appears in an example.
+*/
+function Lit(t0) {
+	const $ = c(7);
+	const { children, column, row } = t0;
+	const [box, setBox] = useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== box || $[1] !== column || $[2] !== row) {
+		t1 = () => {
+			box?.querySelector(`td[data-row="${row}"][data-column="${column}"]`)?.dispatchEvent(new PointerEvent("pointermove", { bubbles: true }));
+		};
+		t2 = [
+			box,
+			column,
+			row
+		];
+		$[0] = box;
+		$[1] = column;
+		$[2] = row;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[5] !== children) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			ref: setBox,
+			children
+		});
+		$[5] = children;
+		$[6] = t3;
+	} else t3 = $[6];
+	return t3;
+}
+/**
+* Hand-written scene for a region nobody ran.
+*/
+const gapped = {
+	about: "status-matrix.gap.about",
+	draw: Gapped,
+	example: gapped_example_exports,
+	title: "status-matrix.gap.title"
+};
+/**
+* Hand-written scene for a matrix a reader picks crossings from, with the pointer on one.
+*/
+const picking = {
+	about: "status-matrix.picking.about",
+	draw: () => /* @__PURE__ */ jsx(Lit, {
+		column: "Reston",
+		row: "notifications",
+		children: /* @__PURE__ */ jsx(Queues, {})
+	}),
+	example: queues_example_exports,
+	title: "status-matrix.picking.title"
+};
+/**
+* Hand-written scene for rows without sections.
+*/
+const flat = {
+	about: "status-matrix.flat.about",
+	draw: Plumbing,
+	example: plumbing_example_exports,
+	title: "status-matrix.flat.title"
+};
+/**
+* Hand-written scene for a matrix with no rows.
+*/
+const empty = {
+	about: "status-matrix.empty.about",
+	draw: Empty,
+	example: empty_example_exports,
+	title: "status-matrix.empty.title"
+};
+var status_matrix_specimen_default = specimen({
+	about: "status-matrix.about",
+	id: "components/collections/status-matrix",
+	imports: "import { StatusMatrix } from \"@stealthscale/component-collections\";",
+	scenes: [
+		...scenesOf(recipe, {
+			axes: { size: { direction: "column" } },
+			draw: (props) => /* @__PURE__ */ jsx(Health, { ...props }),
+			example: health_example_exports,
+			namespace: "status-matrix"
+		}),
+		gapped,
+		picking,
+		flat,
+		empty
+	],
+	title: "status-matrix.title"
+});
+//#endregion
+export { status_matrix_specimen_default as default, empty, flat, gapped, picking };