@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/pages/heatmap/heatmap.js

@@ -0,0 +1,1967 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { $ as cohortCells, L as Heatmap, R as calendarCells, z as heatmapDomain } from "../../shared-DVZJ2nST.js";
+import { u as recipe } from "../../recipes-BbGw00ut.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { Stack } from "@stealthscale/component-layout";
+import { Heading, Text } from "@stealthscale/component-typography";
+//#region src/heatmap/examples/readings.ts
+/**
+* Keys of the days of the week, Monday first.
+*/
+const WEEKDAYS = [
+	"mon",
+	"tue",
+	"wed",
+	"thu",
+	"fri",
+	"sat",
+	"sun"
+];
+/**
+* Keys of the working days, Monday to Friday.
+*/
+const WORKDAYS = WEEKDAYS.slice(0, 5);
+/**
+* Keys of the trading hours, from 08 to 19.
+*/
+const TRADING_HOURS = Array.from({ length: 12 }, (_, at) => String(at + 8).padStart(2, "0"));
+/**
+* Returns the headings of hours from their keys, each written as the hour on the clock, such as
+* "17:00" for "17".
+*
+* @param keys - The hours' two-digit keys, in order.
+*/
+function hoursOf(keys) {
+	return keys.map((key) => ({
+		key,
+		label: `${key}:00`
+	}));
+}
+/**
+* Returns readings from a row of values per row key, in the columns' order. A short row leaves the
+* rest of its cells missing.
+*
+* @param columns - The columns' keys, in order.
+* @param rows - Each row's key with its values.
+*/
+function gridOf(columns, rows) {
+	return rows.flatMap(([row, values]) => columns.map((column, at) => ({
+		column,
+		row,
+		value: values[at] ?? null
+	})));
+}
+/**
+* Lists a week of card authorisations per hour: a lunchtime peak, a larger evening peak at 17:00,
+* and a weekend at 40% of a working day. Tuesday at 17:00 is the busiest hour, with 405.
+*/
+const AUTHORISATIONS = WEEKDAYS.flatMap((row, day) => TRADING_HOURS.map((column, hour) => {
+	const lunchtime = Math.max(0, 9 - Math.abs(hour - 4) * 3);
+	const evening = Math.max(0, 11 - Math.abs(hour - 9) * 2);
+	const weekend = day > 4 ? .4 : 1;
+	return {
+		column,
+		row,
+		value: Math.round(((lunchtime + evening) * weekend + (day * 7 + hour * 3) % 5) * 27)
+	};
+}));
+/**
+* Keys of the wards.
+*/
+const WARDS = [
+	"cardiology",
+	"neurology",
+	"oncology",
+	"paediatrics",
+	"respiratory"
+];
+/**
+* Lists the beds occupied per ward on the working days of one week. The oncology feed was down all
+* week and nobody counted paediatrics on Wednesday: six readings are missing, beside real counts
+* as low as 8.
+*/
+const OCCUPANCY = gridOf(WORKDAYS, [
+	["cardiology", [
+		22,
+		24,
+		23,
+		26,
+		21
+	]],
+	["neurology", [
+		14,
+		12,
+		15,
+		17,
+		13
+	]],
+	["oncology", [
+		null,
+		null,
+		null,
+		null,
+		null
+	]],
+	["paediatrics", [
+		9,
+		11,
+		null,
+		12,
+		8
+	]],
+	["respiratory", [
+		18,
+		19,
+		21,
+		24,
+		20
+	]]
+]);
+/**
+* Lists the build minutes per pipeline on the working days of one week. Friday is when everyone
+* merges: payments-web builds for 388 minutes then.
+*/
+const BUILD_MINUTES = gridOf(WORKDAYS, [
+	["checkout-api", [
+		128,
+		143,
+		96,
+		212,
+		341
+	]],
+	["ledger-worker", [
+		64,
+		71,
+		58,
+		88,
+		154
+	]],
+	["payments-web", [
+		186,
+		174,
+		203,
+		241,
+		388
+	]],
+	["risk-engine", [
+		42,
+		55,
+		37,
+		61,
+		119
+	]]
+]);
+/**
+* Keys of the depots.
+*/
+const DEPOTS = [
+	"antwerpen",
+	"duisburg",
+	"rotterdam"
+];
+/**
+* Keys of the depots' hours, every second hour from 06 to 16.
+*/
+const DEPOT_HOURS = [
+	"06",
+	"08",
+	"10",
+	"12",
+	"14",
+	"16"
+];
+/**
+* Lists the parcels scanned per depot and hour this week: from 590 to 1,940.
+*/
+const SCANS_THIS_WEEK = gridOf(DEPOT_HOURS, [
+	["antwerpen", [
+		980,
+		1420,
+		1610,
+		1290,
+		940,
+		720
+	]],
+	["duisburg", [
+		760,
+		1120,
+		1380,
+		1040,
+		810,
+		590
+	]],
+	["rotterdam", [
+		1240,
+		1810,
+		1940,
+		1520,
+		1180,
+		860
+	]]
+]);
+/**
+* Lists the parcels scanned per depot and hour last week: the same shape at about half the volume,
+* from 320 to 1,060.
+*/
+const SCANS_LAST_WEEK = gridOf(DEPOT_HOURS, [
+	["antwerpen", [
+		540,
+		790,
+		880,
+		700,
+		510,
+		390
+	]],
+	["duisburg", [
+		410,
+		620,
+		750,
+		570,
+		440,
+		320
+	]],
+	["rotterdam", [
+		690,
+		980,
+		1060,
+		840,
+		650,
+		470
+	]]
+]);
+/**
+* Keys of the teams.
+*/
+const TEAMS = [
+	"customer-success",
+	"data-platform",
+	"design",
+	"payments",
+	"security"
+];
+/**
+* Keys of the quarters.
+*/
+const QUARTERS = [
+	"q1",
+	"q2",
+	"q3",
+	"q4"
+];
+/**
+* Lists the headcount against plan per team and quarter: payments at 9 under plan in Q2 is the
+* furthest under, security at 11 over in Q4 the furthest over.
+*/
+const HEADCOUNT_VARIANCE = gridOf(QUARTERS, [
+	["customer-success", [
+		-3,
+		-1,
+		2,
+		4
+	]],
+	["data-platform", [
+		1,
+		3,
+		6,
+		9
+	]],
+	["design", [
+		0,
+		-2,
+		-4,
+		-5
+	]],
+	["payments", [
+		-6,
+		-9,
+		-4,
+		1
+	]],
+	["security", [
+		2,
+		2,
+		5,
+		11
+	]]
+]);
+/**
+* Keys of the hours of the morning checkout-api failed, from 09 to 14.
+*/
+const INCIDENT_HOURS = [
+	"09",
+	"10",
+	"11",
+	"12",
+	"13",
+	"14"
+];
+/**
+* Lists the 5xx responses per service and hour the morning checkout-api failed: 512 at 12:00.
+*/
+const ERRORS = gridOf(INCIDENT_HOURS, [
+	["auth-gateway", [
+		2,
+		1,
+		4,
+		3,
+		2,
+		1
+	]],
+	["checkout-api", [
+		6,
+		9,
+		148,
+		512,
+		96,
+		12
+	]],
+	["ledger-worker", [
+		0,
+		0,
+		2,
+		34,
+		8,
+		1
+	]],
+	["search-index", [
+		11,
+		8,
+		14,
+		22,
+		17,
+		9
+	]]
+]);
+/**
+* Keys of the teaching weeks, from 1 to 36.
+*/
+const TERM_WEEKS = Array.from({ length: 36 }, (_, at) => String(at + 1));
+/**
+* Lists the share of pupils present per school day and teaching week, in percent: from 97% down to
+* 82% at the bottom of a dip through the winter term, in weeks 15 and 16.
+*/
+const ATTENDANCE = WORKDAYS.flatMap((row, day) => TERM_WEEKS.map((column, week) => ({
+	column,
+	row,
+	value: 97 - Math.max(0, 9 - Math.abs(week - 14)) - day - (week * 5 + day * 3) % 4
+})));
+//#endregion
+//#region src/heatmap/examples/attendance.example.tsx
+var attendance_example_exports = /* @__PURE__ */ __exportAll({
+	Attendance: () => Attendance,
+	source: () => source$16
+});
+function Attendance() {
+	const $ = c(20);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("attendance.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = TERM_WEEKS.map((key) => ({
+			key,
+			label: t("attendance.week", { week: key })
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("attendance.corner");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("attendance.label");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = WORKDAYS.map((key_0) => ({
+			key: key_0,
+			label: t(`days.${key_0}`)
+		}));
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("attendance.value");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			style: "unit",
+			unit: "percent"
+		};
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Heatmap, {
+			caption: t0,
+			cells: ATTENDANCE,
+			columns: t1,
+			corner: t2,
+			label: t3,
+			rows: t4,
+			size: "sm",
+			valueLabel: t5,
+			valueOptions: t6
+		});
+		$[13] = t0;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+const source$16 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { ATTENDANCE, TERM_WEEKS, WORKDAYS } from \"./readings.ts\";\n\nexport function Attendance(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      caption={t(\"attendance.caption\")}\n      cells={ATTENDANCE}\n      columns={TERM_WEEKS.map((key) => ({ key, label: t(\"attendance.week\", { week: key }) }))}\n      corner={t(\"attendance.corner\")}\n      label={t(\"attendance.label\")}\n      rows={WORKDAYS.map((key) => ({ key, label: t(`days.${key}`) }))}\n      size=\"sm\"\n      valueLabel={t(\"attendance.value\")}\n      valueOptions={{ style: \"unit\", unit: \"percent\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/authorisations.example.tsx
+var authorisations_example_exports = /* @__PURE__ */ __exportAll({
+	Authorisations: () => Authorisations,
+	source: () => source$15
+});
+function Authorisations() {
+	const $ = c(19);
+	const { t } = useWords("heatmap");
+	let T0;
+	let t0;
+	if ($[0] !== t) {
+		const [busiest] = AUTHORISATIONS.toSorted(_temp$2);
+		T0 = Heatmap;
+		t0 = t("authorisations.caption", {
+			count: busiest?.value,
+			day: t(`days.${busiest?.row ?? ""}`),
+			hour: busiest?.column
+		});
+		$[0] = t;
+		$[1] = T0;
+		$[2] = t0;
+	} else {
+		T0 = $[1];
+		t0 = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = hoursOf(TRADING_HOURS);
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("authorisations.corner");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("authorisations.label");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = WEEKDAYS.map((key) => ({
+			key,
+			label: t(`days.${key}`)
+		}));
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("authorisations.value");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== T0 || $[13] !== t0 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			cells: AUTHORISATIONS,
+			columns: t1,
+			corner: t2,
+			label: t3,
+			rows: t4,
+			valueLabel: t5
+		});
+		$[12] = T0;
+		$[13] = t0;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
+	return t6;
+}
+function _temp$2(first, second) {
+	return (second.value ?? 0) - (first.value ?? 0);
+}
+const source$15 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { AUTHORISATIONS, hoursOf, TRADING_HOURS, WEEKDAYS } from \"./readings.ts\";\n\nexport function Authorisations(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n  const [busiest] = AUTHORISATIONS.toSorted(\n    (first, second) => (second.value ?? 0) - (first.value ?? 0),\n  );\n\n  return (\n    <Heatmap\n      caption={t(\"authorisations.caption\", {\n        count: busiest?.value,\n        day: t(`days.${busiest?.row ?? \"\"}`),\n        hour: busiest?.column,\n      })}\n      cells={AUTHORISATIONS}\n      columns={hoursOf(TRADING_HOURS)}\n      corner={t(\"authorisations.corner\")}\n      label={t(\"authorisations.label\")}\n      rows={WEEKDAYS.map((key) => ({ key, label: t(`days.${key}`) }))}\n      valueLabel={t(\"authorisations.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/days.ts
+/**
+* Milliseconds in a day.
+*/
+const DAY = 864e5;
+/**
+* Returns a reading per day from a civil date on, each valued from its weekday, 0 being Sunday,
+* its place in the run and its date.
+*
+* @param from - The first day, written `YYYY-MM-DD`.
+* @param count - The number of days.
+* @param value - Returns a day's value from its weekday, its place and its date.
+*/
+function daysOf(from, count, value) {
+	const start = Date.parse(`${from}T00:00:00Z`);
+	return Array.from({ length: count }, (_, at) => {
+		const day = new Date(start + at * DAY);
+		const date = day.toISOString().slice(0, 10);
+		return {
+			date,
+			value: value(day.getUTCDay(), at, date)
+		};
+	});
+}
+/**
+* Returns whether a weekday, 0 being Sunday, is on a weekend.
+*/
+function weekend(weekday) {
+	return weekday === 0 || weekday === 6;
+}
+/**
+* Lists a year of deploys per day from 1 October 2025: none at weekends, one a day over the
+* holidays, a release push in the week of 9 March, and no record from 9 to 22 February, when the
+* collector was offline. The release week is the busiest, with 80 deploys.
+*/
+const DEPLOYS = daysOf("2025-10-01", 365, (weekday, at, date) => {
+	if (date >= "2026-02-09" && date <= "2026-02-22") return null;
+	if (weekend(weekday)) return 0;
+	if (date >= "2025-12-22" && date <= "2026-01-02") return 1;
+	return 3 + at * 7 % 11 + (date >= "2026-03-09" && date <= "2026-03-13" ? 8 : 0);
+});
+/**
+* Lists 13 weeks of on-call pages per day from Monday 5 January 2026: one to six on a working day,
+* up to two at a weekend, and 14 during the incident on Tuesday 17 February.
+*/
+const PAGES = daysOf("2026-01-05", 91, (weekday, at, date) => {
+	if (date === "2026-02-17") return 14;
+	return weekend(weekday) ? at % 3 : 1 + at * 5 % 6;
+});
+/**
+* Lists a quarter of hotel rooms booked per night from 1 April 2026, of 84: 30 to 54 on a
+* weeknight, 70 to 82 on a Friday or a Saturday, and all 84 over the conference from 12 to 14 May.
+*/
+const BOOKINGS = daysOf("2026-04-01", 91, (weekday, at, date) => {
+	if (date >= "2026-05-12" && date <= "2026-05-14") return 84;
+	return weekday === 5 || weekday === 6 ? 70 + at * 3 % 13 : 30 + at * 7 % 25;
+});
+//#endregion
+//#region src/heatmap/examples/bookings.example.tsx
+var bookings_example_exports = /* @__PURE__ */ __exportAll({
+	Bookings: () => Bookings,
+	source: () => source$14
+});
+function Bookings() {
+	const $ = c(21);
+	const { i18n, t } = useWords("heatmap");
+	const [picked, setPicked] = useState();
+	let t0;
+	if ($[0] !== i18n.language) {
+		t0 = calendarCells(BOOKINGS, { locale: i18n.language });
+		$[0] = i18n.language;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("bookings.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("bookings.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("bookings.value");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t0 || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Heatmap, {
+			...t0,
+			caption: t1,
+			label: t2,
+			onSelect: setPicked,
+			size: "lg",
+			valueLabel: t3
+		});
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== picked || $[14] !== t) {
+		t5 = picked === void 0 ? t("bookings.none") : t("bookings.picked", {
+			count: picked.value,
+			date: picked.label
+		});
+		$[13] = picked;
+		$[14] = t;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			tone: "muted",
+			children: t5
+		});
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== t4 || $[19] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Stack, { children: [t4, t6] });
+		$[18] = t4;
+		$[19] = t6;
+		$[20] = t7;
+	} else t7 = $[20];
+	return t7;
+}
+const source$14 = "import { type ReactElement, useState } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { CalendarCell, Heatmap, calendarCells } from \"@stealthscale/component-charts\";\n\nimport { BOOKINGS } from \"./days.ts\";\n\nexport function Bookings(): ReactElement {\n  const { i18n, t } = useWords(\"heatmap\");\n  const [picked, setPicked] = useState<CalendarCell>();\n\n  return (\n    <Stack>\n      <Heatmap\n        {...calendarCells(BOOKINGS, { locale: i18n.language })}\n        caption={t(\"bookings.caption\")}\n        label={t(\"bookings.label\")}\n        onSelect={setPicked}\n        size=\"lg\"\n        valueLabel={t(\"bookings.value\")}\n      />\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {picked === undefined\n          ? t(\"bookings.none\")\n          : t(\"bookings.picked\", { count: picked.value, date: picked.label })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/builds.example.tsx
+var builds_example_exports = /* @__PURE__ */ __exportAll({
+	Builds: () => Builds,
+	source: () => source$13
+});
+function Builds() {
+	const $ = c(18);
+	const { t } = useWords("heatmap");
+	let T0;
+	let t0;
+	if ($[0] !== t) {
+		const [slowest] = BUILD_MINUTES.filter(_temp$1).toSorted(_temp2);
+		T0 = Heatmap;
+		t0 = t("builds.caption", {
+			minutes: slowest?.value,
+			pipeline: slowest?.row
+		});
+		$[0] = t;
+		$[1] = T0;
+		$[2] = t0;
+	} else {
+		T0 = $[1];
+		t0 = $[2];
+	}
+	let t1;
+	if ($[3] !== t) {
+		t1 = WORKDAYS.map((key) => ({
+			key,
+			label: t(`days.${key}`)
+		}));
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t) {
+		t2 = t("builds.corner");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("builds.label");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("builds.value");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== T0 || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			cells: BUILD_MINUTES,
+			columns: t1,
+			corner: t2,
+			label: t3,
+			size: "lg",
+			valueLabel: t4,
+			values: true
+		});
+		$[11] = T0;
+		$[12] = t0;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+function _temp2(first, second) {
+	return (second.value ?? 0) - (first.value ?? 0);
+}
+function _temp$1(cell) {
+	return cell.column === "fri";
+}
+const source$13 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { BUILD_MINUTES, WORKDAYS } from \"./readings.ts\";\n\nexport function Builds(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n  const [slowest] = BUILD_MINUTES.filter((cell) => cell.column === \"fri\").toSorted(\n    (first, second) => (second.value ?? 0) - (first.value ?? 0),\n  );\n\n  return (\n    <Heatmap\n      caption={t(\"builds.caption\", { minutes: slowest?.value, pipeline: slowest?.row })}\n      cells={BUILD_MINUTES}\n      columns={WORKDAYS.map((key) => ({ key, label: t(`days.${key}`) }))}\n      corner={t(\"builds.corner\")}\n      label={t(\"builds.label\")}\n      size=\"lg\"\n      valueLabel={t(\"builds.value\")}\n      values\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/clinic.example.tsx
+var clinic_example_exports = /* @__PURE__ */ __exportAll({
+	Clinic: () => Clinic,
+	source: () => source$12
+});
+const INTAKES = [
+	[
+		24,
+		21,
+		19,
+		17,
+		16,
+		15
+	],
+	[
+		31,
+		26,
+		23,
+		21,
+		19
+	],
+	[
+		7,
+		7,
+		6,
+		6
+	],
+	[
+		28,
+		24,
+		21
+	],
+	[22, 19],
+	[19]
+];
+function Clinic() {
+	const $ = c(23);
+	const { i18n, t } = useWords("heatmap");
+	let T0;
+	let t0;
+	if ($[0] !== i18n.language || $[1] !== t) {
+		const month = new Intl.DateTimeFormat(i18n.language, {
+			month: "short",
+			timeZone: "UTC"
+		});
+		const cohorts = INTAKES.map((retained, at) => ({
+			key: String(at),
+			label: month.format(Date.UTC(2026, at, 1)),
+			retained,
+			size: retained[0] ?? 0
+		}));
+		T0 = Heatmap;
+		let t1;
+		if ($[4] !== t) {
+			t1 = (cohort) => t("clinic.cohort", {
+				label: cohort.label,
+				size: cohort.size
+			});
+			$[4] = t;
+			$[5] = t1;
+		} else t1 = $[5];
+		let t2;
+		if ($[6] !== t) {
+			t2 = (period) => t("clinic.period", { period });
+			$[6] = t;
+			$[7] = t2;
+		} else t2 = $[7];
+		t0 = cohortCells(cohorts, {
+			label: t1,
+			locale: i18n.language,
+			measure: "count",
+			periodLabel: t2
+		});
+		$[0] = i18n.language;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = t0;
+	} else {
+		T0 = $[2];
+		t0 = $[3];
+	}
+	let t1;
+	if ($[8] !== t) {
+		t1 = t("clinic.caption");
+		$[8] = t;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== t) {
+		t2 = t("clinic.corner");
+		$[10] = t;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== t) {
+		t3 = t("clinic.label");
+		$[12] = t;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t) {
+		t4 = t("clinic.value");
+		$[14] = t;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== T0 || $[17] !== t0 || $[18] !== t1 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...t0,
+			caption: t1,
+			corner: t2,
+			label: t3,
+			valueLabel: t4,
+			values: true
+		});
+		$[16] = T0;
+		$[17] = t0;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	return t5;
+}
+const source$12 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, cohortCells } from \"@stealthscale/component-charts\";\n\nconst INTAKES = [\n  [24, 21, 19, 17, 16, 15],\n  [31, 26, 23, 21, 19],\n  [7, 7, 6, 6],\n  [28, 24, 21],\n  [22, 19],\n  [19],\n];\n\nexport function Clinic(): ReactElement {\n  const { i18n, t } = useWords(\"heatmap\");\n  const month = new Intl.DateTimeFormat(i18n.language, { month: \"short\", timeZone: \"UTC\" });\n  const cohorts = INTAKES.map((retained, at) => ({\n    key: String(at),\n    label: month.format(Date.UTC(2026, at, 1)),\n    retained,\n    size: retained[0] ?? 0,\n  }));\n\n  return (\n    <Heatmap\n      {...cohortCells(cohorts, {\n        label: (cohort) => t(\"clinic.cohort\", { label: cohort.label, size: cohort.size }),\n        locale: i18n.language,\n        measure: \"count\",\n        periodLabel: (period) => t(\"clinic.period\", { period }),\n      })}\n      caption={t(\"clinic.caption\")}\n      corner={t(\"clinic.corner\")}\n      label={t(\"clinic.label\")}\n      valueLabel={t(\"clinic.value\")}\n      values\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/deploys.example.tsx
+var deploys_example_exports = /* @__PURE__ */ __exportAll({
+	Deploys: () => Deploys,
+	source: () => source$11
+});
+function Deploys() {
+	const $ = c(16);
+	const { i18n, t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== i18n.language) {
+		t0 = calendarCells(DEPLOYS, {
+			from: "2025-10-01",
+			locale: i18n.language,
+			to: "2026-09-30"
+		});
+		$[0] = i18n.language;
+		$[1] = t0;
+	} else t0 = $[1];
+	const calendar = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("deploys.caption", { count: 80 });
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("deploys.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("deploys.missing");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("deploys.value");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== calendar || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Heatmap, {
+			...calendar,
+			caption: t1,
+			label: t2,
+			missingLabel: t3,
+			size: "sm",
+			valueLabel: t4
+		});
+		$[10] = calendar;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+const source$11 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, calendarCells } from \"@stealthscale/component-charts\";\n\nimport { DEPLOYS } from \"./days.ts\";\n\nexport function Deploys(): ReactElement {\n  const { i18n, t } = useWords(\"heatmap\");\n  const calendar = calendarCells(DEPLOYS, {\n    from: \"2025-10-01\",\n    locale: i18n.language,\n    to: \"2026-09-30\",\n  });\n\n  return (\n    <Heatmap\n      {...calendar}\n      caption={t(\"deploys.caption\", { count: 80 })}\n      label={t(\"deploys.label\")}\n      missingLabel={t(\"deploys.missing\")}\n      size=\"sm\"\n      valueLabel={t(\"deploys.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/depots.example.tsx
+var depots_example_exports = /* @__PURE__ */ __exportAll({
+	Depots: () => Depots,
+	source: () => source$10
+});
+const WEEKS = [{
+	cells: SCANS_THIS_WEEK,
+	week: "this"
+}, {
+	cells: SCANS_LAST_WEEK,
+	week: "last"
+}];
+function Depots() {
+	const $ = c(5);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = heatmapDomain([...SCANS_THIS_WEEK, ...SCANS_LAST_WEEK]);
+		$[0] = t0;
+	} else t0 = $[0];
+	const domain = t0;
+	let t1;
+	if ($[1] !== t) {
+		t1 = WEEKS.map((t2) => {
+			const { cells, week } = t2;
+			return /* @__PURE__ */ jsxs(Stack, {
+				gap: "sm",
+				children: [/* @__PURE__ */ jsx(Heading, {
+					as: "h3",
+					size: "sm",
+					children: t(`depots.${week}`)
+				}), /* @__PURE__ */ jsx(Heatmap, {
+					cells,
+					columns: hoursOf(DEPOT_HOURS),
+					corner: t("depots.corner"),
+					domain,
+					label: t("depots.label", { week: t(`depots.weeks.${week}`) }),
+					rows: DEPOTS.map((key) => ({
+						key,
+						label: t(`names.${key}`)
+					})),
+					valueLabel: t("depots.value")
+				})]
+			}, week);
+		});
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Stack, {
+			gap: "lg",
+			children: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+const source$10 = "import { type ReactElement } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Heading } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, heatmapDomain } from \"@stealthscale/component-charts\";\n\nimport { DEPOT_HOURS, DEPOTS, hoursOf, SCANS_LAST_WEEK, SCANS_THIS_WEEK } from \"./readings.ts\";\n\nconst WEEKS = [\n  { cells: SCANS_THIS_WEEK, week: \"this\" },\n  { cells: SCANS_LAST_WEEK, week: \"last\" },\n];\n\nexport function Depots(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n  const domain = heatmapDomain([...SCANS_THIS_WEEK, ...SCANS_LAST_WEEK]);\n\n  return (\n    <Stack gap=\"lg\">\n      {WEEKS.map(({ cells, week }) => (\n        <Stack gap=\"sm\" key={week}>\n          <Heading as=\"h3\" size=\"sm\">\n            {t(`depots.${week}`)}\n          </Heading>\n          <Heatmap\n            cells={cells}\n            columns={hoursOf(DEPOT_HOURS)}\n            corner={t(\"depots.corner\")}\n            domain={domain}\n            label={t(\"depots.label\", { week: t(`depots.weeks.${week}`) })}\n            rows={DEPOTS.map((key) => ({ key, label: t(`names.${key}`) }))}\n            valueLabel={t(\"depots.value\")}\n          />\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/incidents.example.tsx
+var incidents_example_exports = /* @__PURE__ */ __exportAll({
+	Incidents: () => Incidents,
+	source: () => source$9
+});
+function Incidents() {
+	const $ = c(22);
+	const { t } = useWords("heatmap");
+	const [picked, setPicked] = useState();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("incidents.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = hoursOf(INCIDENT_HOURS);
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("incidents.corner");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("incidents.label");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("incidents.value");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t0 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Heatmap, {
+			caption: t0,
+			cells: ERRORS,
+			columns: t1,
+			corner: t2,
+			label: t3,
+			onSelect: setPicked,
+			size: "lg",
+			valueLabel: t4
+		});
+		$[9] = t0;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== picked || $[15] !== t) {
+		t6 = picked === void 0 ? t("incidents.none") : t("incidents.picked", {
+			count: picked.value,
+			hour: picked.column,
+			service: picked.row
+		});
+		$[14] = picked;
+		$[15] = t;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			tone: "muted",
+			children: t6
+		});
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t5 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t5, t7]
+		});
+		$[19] = t5;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
+}
+const source$9 = "import { type ReactElement, useState } from \"react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, HeatmapCell } from \"@stealthscale/component-charts\";\n\nimport { ERRORS, hoursOf, INCIDENT_HOURS } from \"./readings.ts\";\n\nexport function Incidents(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n  const [picked, setPicked] = useState<HeatmapCell>();\n\n  return (\n    <Stack align=\"flex-start\">\n      <Heatmap\n        caption={t(\"incidents.caption\")}\n        cells={ERRORS}\n        columns={hoursOf(INCIDENT_HOURS)}\n        corner={t(\"incidents.corner\")}\n        label={t(\"incidents.label\")}\n        onSelect={setPicked}\n        size=\"lg\"\n        valueLabel={t(\"incidents.value\")}\n      />\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {picked === undefined\n          ? t(\"incidents.none\")\n          : t(\"incidents.picked\", {\n              count: picked.value,\n              hour: picked.column,\n              service: picked.row,\n            })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/pages.example.tsx
+var pages_example_exports = /* @__PURE__ */ __exportAll({
+	Pages: () => Pages,
+	source: () => source$8
+});
+function Pages() {
+	const $ = c(13);
+	const { i18n, t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== i18n.language) {
+		t0 = calendarCells(PAGES, {
+			locale: i18n.language,
+			weekStartsOn: "mon"
+		});
+		$[0] = i18n.language;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("pages.caption", { count: 14 });
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("pages.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("pages.value");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t0 || $[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Heatmap, {
+			...t0,
+			caption: t1,
+			label: t2,
+			valueLabel: t3
+		});
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+}
+const source$8 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, calendarCells } from \"@stealthscale/component-charts\";\n\nimport { PAGES } from \"./days.ts\";\n\nexport function Pages(): ReactElement {\n  const { i18n, t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      {...calendarCells(PAGES, { locale: i18n.language, weekStartsOn: \"mon\" })}\n      caption={t(\"pages.caption\", { count: 14 })}\n      label={t(\"pages.label\")}\n      valueLabel={t(\"pages.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/palette.example.tsx
+var palette_example_exports = /* @__PURE__ */ __exportAll({
+	Palette: () => Palette,
+	source: () => source$7
+});
+function Palette() {
+	const $ = c(14);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = hoursOf(TRADING_HOURS);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("authorisations.corner");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("authorisations.label");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = WEEKDAYS.map((key) => ({
+			key,
+			label: t(`days.${key}`)
+		}));
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("authorisations.value");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Heatmap, {
+			cells: AUTHORISATIONS,
+			color: "purple",
+			columns: t0,
+			corner: t1,
+			label: t2,
+			rows: t3,
+			valueLabel: t4
+		});
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { AUTHORISATIONS, hoursOf, TRADING_HOURS, WEEKDAYS } from \"./readings.ts\";\n\nexport function Palette(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      cells={AUTHORISATIONS}\n      color=\"purple\"\n      columns={hoursOf(TRADING_HOURS)}\n      corner={t(\"authorisations.corner\")}\n      label={t(\"authorisations.label\")}\n      rows={WEEKDAYS.map((key) => ({ key, label: t(`days.${key}`) }))}\n      valueLabel={t(\"authorisations.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/quarter.example.tsx
+var quarter_example_exports = /* @__PURE__ */ __exportAll({
+	Quarter: () => Quarter,
+	source: () => source$6
+});
+function Quarter(props) {
+	const $ = c(14);
+	const { i18n, t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== i18n.language) {
+		t0 = calendarCells(DEPLOYS, {
+			from: "2026-01-01",
+			locale: i18n.language,
+			to: "2026-03-31"
+		});
+		$[0] = i18n.language;
+		$[1] = t0;
+	} else t0 = $[1];
+	const calendar = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("quarter.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("deploys.missing");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("deploys.value");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== calendar || $[9] !== props || $[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Heatmap, {
+			...calendar,
+			label: t1,
+			missingLabel: t2,
+			valueLabel: t3,
+			...props
+		});
+		$[8] = calendar;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	return t4;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, calendarCells } from \"@stealthscale/component-charts\";\n\nimport { DEPLOYS } from \"./days.ts\";\n\nexport function Quarter(\n  props: Omit<Parameters<typeof Heatmap>[0], \"cells\" | \"label\">,\n): ReactElement {\n  const { i18n, t } = useWords(\"heatmap\");\n  const calendar = calendarCells(DEPLOYS, {\n    from: \"2026-01-01\",\n    locale: i18n.language,\n    to: \"2026-03-31\",\n  });\n\n  return (\n    <Heatmap\n      {...calendar}\n      label={t(\"quarter.label\")}\n      missingLabel={t(\"deploys.missing\")}\n      valueLabel={t(\"deploys.value\")}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$5
+});
+function Quiet() {
+	const $ = c(11);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("quiet.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("quiet.empty");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("quiet.label");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t0 || $[8] !== t2 || $[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Heatmap, {
+			caption: t0,
+			cells: t1,
+			empty: t2,
+			label: t3
+		});
+		$[7] = t0;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	return t4;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      caption={t(\"quiet.caption\")}\n      cells={[]}\n      empty={t(\"quiet.empty\")}\n      label={t(\"quiet.label\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/readout.example.tsx
+var readout_example_exports = /* @__PURE__ */ __exportAll({
+	Readout: () => Readout,
+	source: () => source$4
+});
+function Readout() {
+	const $ = c(16);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = Math.max(...AUTHORISATIONS.map(_temp));
+		$[0] = t0;
+	} else t0 = $[0];
+	const most = t0;
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = hoursOf(TRADING_HOURS);
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t) {
+		t2 = t("authorisations.corner");
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = AUTHORISATIONS.findIndex((cell_0) => cell_0.value === most);
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t) {
+		t4 = t("authorisations.label");
+		$[5] = t;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== t) {
+		t5 = WEEKDAYS.map((key) => ({
+			key,
+			label: t(`days.${key}`)
+		}));
+		$[7] = t;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t) {
+		t6 = t("authorisations.value");
+		$[9] = t;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t2 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Heatmap, {
+			cells: AUTHORISATIONS,
+			columns: t1,
+			corner: t2,
+			defaultIndex: t3,
+			label: t4,
+			rows: t5,
+			valueLabel: t6
+		});
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+function _temp(cell) {
+	return cell.value ?? 0;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { AUTHORISATIONS, hoursOf, TRADING_HOURS, WEEKDAYS } from \"./readings.ts\";\n\nexport function Readout(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n  const most = Math.max(...AUTHORISATIONS.map((cell) => cell.value ?? 0));\n\n  return (\n    <Heatmap\n      cells={AUTHORISATIONS}\n      columns={hoursOf(TRADING_HOURS)}\n      corner={t(\"authorisations.corner\")}\n      defaultIndex={AUTHORISATIONS.findIndex((cell) => cell.value === most)}\n      label={t(\"authorisations.label\")}\n      rows={WEEKDAYS.map((key) => ({ key, label: t(`days.${key}`) }))}\n      valueLabel={t(\"authorisations.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/signups.example.tsx
+var signups_example_exports = /* @__PURE__ */ __exportAll({
+	Signups: () => Signups,
+	source: () => source$3
+});
+const SIGNUPS = [
+	1840,
+	1520,
+	1610,
+	1980,
+	1750,
+	1690,
+	1880,
+	1420
+].map((size, at) => {
+	const first = (at >= 4 ? .6 : .52) + (at * 5 % 7 - 3) * .01;
+	const kept = .86 + at * 3 % 4 * .01;
+	return {
+		retained: Array.from({ length: 8 - at }, (_, period) => {
+			if (period === 0) return size;
+			if (at === 2 && period === 2) return null;
+			return Math.round(size * first * kept ** (period - 1));
+		}),
+		size
+	};
+});
+function Signups() {
+	const $ = c(26);
+	const { i18n, t } = useWords("heatmap");
+	let T0;
+	let t0;
+	if ($[0] !== i18n.language || $[1] !== t) {
+		const month = new Intl.DateTimeFormat(i18n.language, {
+			month: "short",
+			timeZone: "UTC",
+			year: "numeric"
+		});
+		const cohorts = SIGNUPS.map((t1, at) => {
+			const { retained, size } = t1;
+			return {
+				key: `2026-${String(at + 1).padStart(2, "0")}`,
+				label: month.format(Date.UTC(2026, at, 1)),
+				retained,
+				size
+			};
+		});
+		T0 = Heatmap;
+		let t2;
+		if ($[4] !== t) {
+			t2 = (cohort) => t("signups.cohort", {
+				label: cohort.label,
+				size: cohort.size
+			});
+			$[4] = t;
+			$[5] = t2;
+		} else t2 = $[5];
+		let t3;
+		if ($[6] !== t) {
+			t3 = (period) => t("signups.period", { period });
+			$[6] = t;
+			$[7] = t3;
+		} else t3 = $[7];
+		t0 = cohortCells(cohorts, {
+			average: t("signups.average"),
+			label: t2,
+			locale: i18n.language,
+			periodLabel: t3
+		});
+		$[0] = i18n.language;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = t0;
+	} else {
+		T0 = $[2];
+		t0 = $[3];
+	}
+	let t1;
+	if ($[8] !== t) {
+		t1 = t("signups.caption");
+		$[8] = t;
+		$[9] = t1;
+	} else t1 = $[9];
+	let t2;
+	if ($[10] !== t) {
+		t2 = t("signups.corner");
+		$[10] = t;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== t) {
+		t3 = t("signups.label");
+		$[12] = t;
+		$[13] = t3;
+	} else t3 = $[13];
+	let t4;
+	if ($[14] !== t) {
+		t4 = t("signups.missing");
+		$[14] = t;
+		$[15] = t4;
+	} else t4 = $[15];
+	let t5;
+	if ($[16] !== t) {
+		t5 = t("signups.value");
+		$[16] = t;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== T0 || $[19] !== t0 || $[20] !== t1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t0,
+			caption: t1,
+			corner: t2,
+			label: t3,
+			missingLabel: t4,
+			valueLabel: t5,
+			values: true
+		});
+		$[18] = T0;
+		$[19] = t0;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t6;
+	} else t6 = $[25];
+	return t6;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap, cohortCells } from \"@stealthscale/component-charts\";\n\nconst SIGNUPS = [1840, 1520, 1610, 1980, 1750, 1690, 1880, 1420].map((size, at) => {\n  const first = (at >= 4 ? 0.6 : 0.52) + (((at * 5) % 7) - 3) * 0.01;\n  const kept = 0.86 + ((at * 3) % 4) * 0.01;\n\n  return {\n    retained: Array.from({ length: 8 - at }, (_, period) => {\n      if (period === 0) return size;\n      if (at === 2 && period === 2) return null;\n\n      return Math.round(size * first * kept ** (period - 1));\n    }),\n    size,\n  };\n});\n\nexport function Signups(): ReactElement {\n  const { i18n, t } = useWords(\"heatmap\");\n  const month = new Intl.DateTimeFormat(i18n.language, {\n    month: \"short\",\n    timeZone: \"UTC\",\n    year: \"numeric\",\n  });\n  const cohorts = SIGNUPS.map(({ retained, size }, at) => ({\n    key: `2026-${String(at + 1).padStart(2, \"0\")}`,\n    label: month.format(Date.UTC(2026, at, 1)),\n    retained,\n    size,\n  }));\n\n  return (\n    <Heatmap\n      {...cohortCells(cohorts, {\n        average: t(\"signups.average\"),\n        label: (cohort) => t(\"signups.cohort\", { label: cohort.label, size: cohort.size }),\n        locale: i18n.language,\n        periodLabel: (period) => t(\"signups.period\", { period }),\n      })}\n      caption={t(\"signups.caption\")}\n      corner={t(\"signups.corner\")}\n      label={t(\"signups.label\")}\n      missingLabel={t(\"signups.missing\")}\n      valueLabel={t(\"signups.value\")}\n      values\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/sizes.example.tsx
+var sizes_example_exports = /* @__PURE__ */ __exportAll({
+	Sizes: () => Sizes,
+	source: () => source$2
+});
+function Sizes(props) {
+	const $ = c(12);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = hoursOf(INCIDENT_HOURS);
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("sizes.corner");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("sizes.label");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("sizes.value");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== props || $[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Heatmap, {
+			cells: ERRORS,
+			columns: t0,
+			corner: t1,
+			label: t2,
+			valueLabel: t3,
+			...props
+		});
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { ERRORS, hoursOf, INCIDENT_HOURS } from \"./readings.ts\";\n\nexport function Sizes(props: Omit<Parameters<typeof Heatmap>[0], \"cells\" | \"label\">): ReactElement {\n  const { t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      cells={ERRORS}\n      columns={hoursOf(INCIDENT_HOURS)}\n      corner={t(\"sizes.corner\")}\n      label={t(\"sizes.label\")}\n      valueLabel={t(\"sizes.value\")}\n      {...props}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/variance.example.tsx
+var variance_example_exports = /* @__PURE__ */ __exportAll({
+	Variance: () => Variance,
+	source: () => source$1
+});
+function Variance() {
+	const $ = c(20);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("variance.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = QUARTERS.map((key) => ({
+			key,
+			label: t(`quarters.${key}`)
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("variance.corner");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("variance.label");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = TEAMS.map((key_0) => ({
+			key: key_0,
+			label: t(`names.${key_0}`)
+		}));
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("variance.value");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = { signDisplay: "exceptZero" };
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Heatmap, {
+			caption: t0,
+			cells: HEADCOUNT_VARIANCE,
+			columns: t1,
+			corner: t2,
+			label: t3,
+			rows: t4,
+			scale: "diverging",
+			size: "lg",
+			valueLabel: t5,
+			valueOptions: t6,
+			values: true
+		});
+		$[13] = t0;
+		$[14] = t1;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { HEADCOUNT_VARIANCE, QUARTERS, TEAMS } from \"./readings.ts\";\n\nexport function Variance(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      caption={t(\"variance.caption\")}\n      cells={HEADCOUNT_VARIANCE}\n      columns={QUARTERS.map((key) => ({ key, label: t(`quarters.${key}`) }))}\n      corner={t(\"variance.corner\")}\n      label={t(\"variance.label\")}\n      rows={TEAMS.map((key) => ({ key, label: t(`names.${key}`) }))}\n      scale=\"diverging\"\n      size=\"lg\"\n      valueLabel={t(\"variance.value\")}\n      valueOptions={{ signDisplay: \"exceptZero\" }}\n      values\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/examples/wards.example.tsx
+var wards_example_exports = /* @__PURE__ */ __exportAll({
+	Wards: () => Wards,
+	source: () => source
+});
+function Wards() {
+	const $ = c(22);
+	const { t } = useWords("heatmap");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("wards.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = WORKDAYS.map((key) => ({
+			key,
+			label: t(`wards.days.${key}`)
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("wards.corner");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("wards.label");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("wards.missing");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = WARDS.map((key_0) => ({
+			key: key_0,
+			label: t(`names.${key_0}`)
+		}));
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("wards.value");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t0 || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Heatmap, {
+			caption: t0,
+			cells: OCCUPANCY,
+			columns: t1,
+			corner: t2,
+			label: t3,
+			missingLabel: t4,
+			rows: t5,
+			valueLabel: t6
+		});
+		$[14] = t0;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Heatmap } from \"@stealthscale/component-charts\";\n\nimport { OCCUPANCY, WARDS, WORKDAYS } from \"./readings.ts\";\n\nexport function Wards(): ReactElement {\n  const { t } = useWords(\"heatmap\");\n\n  return (\n    <Heatmap\n      caption={t(\"wards.caption\")}\n      cells={OCCUPANCY}\n      columns={WORKDAYS.map((key) => ({ key, label: t(`wards.days.${key}`) }))}\n      corner={t(\"wards.corner\")}\n      label={t(\"wards.label\")}\n      missingLabel={t(\"wards.missing\")}\n      rows={WARDS.map((key) => ({ key, label: t(`names.${key}`) }))}\n      valueLabel={t(\"wards.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/heatmap/heatmap.specimen.tsx
+/**
+* Catalogue page for the heatmap.
+*
+* @remarks
+*   `scenesOf` generates the shape and size scenes from the heat recipe, the shapes rendered as a
+*   calendar quarter. The other scenes are hand-written: a week of card authorisations with the
+*   busiest hour in the caption, the readout at that hour, missing readings beside the fewest
+*   counted, values printed in the cells, two weeks read on one domain, a diverging scale, a picked
+*   cell, a dense grid that scrolls, a year of deploys as a calendar, a calendar whose weeks start
+*   on Monday, a picked day, signup cohorts with their average, clinic cohorts with their counts, a
+*   stated palette, the authorisations at a phone's width, and a heatmap without cells. Every scene
+*   renders a component from `examples/` and shows that file as its source. The words are keys
+*   under `heatmap` in `locales/en/specimen/heatmap.json`. The page imports the heatmap's barrel
+*   directly, because the props reader follows a specimen's own imports and not an examples barrel.
+*/
+/**
+* Hand-written scene for a week of card authorisations.
+*/
+const authorised = {
+	about: "heatmap.authorisations.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Authorisations, {})
+	}),
+	example: authorisations_example_exports,
+	title: "heatmap.authorisations.title"
+};
+/**
+* Hand-written scene for the readout at the busiest hour.
+*/
+const readout = {
+	about: "heatmap.readout.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Readout, {})
+	}),
+	example: readout_example_exports,
+	title: "heatmap.readout.title"
+};
+/**
+* Hand-written scene for missing readings beside the fewest counted.
+*/
+const missing = {
+	about: "heatmap.wards.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Wards, {})
+	}),
+	example: wards_example_exports,
+	title: "heatmap.wards.title"
+};
+/**
+* Hand-written scene for values printed in the cells.
+*/
+const printed = {
+	about: "heatmap.builds.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Builds, {})
+	}),
+	example: builds_example_exports,
+	title: "heatmap.builds.title"
+};
+/**
+* Hand-written scene for two weeks read on one domain.
+*/
+const compared = {
+	about: "heatmap.depots.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Depots, {})
+	}),
+	example: depots_example_exports,
+	title: "heatmap.depots.title"
+};
+/**
+* Hand-written scene for a diverging scale.
+*/
+const diverged = {
+	about: "heatmap.variance.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Variance, {})
+	}),
+	example: variance_example_exports,
+	title: "heatmap.variance.title"
+};
+/**
+* Hand-written scene for a picked cell.
+*/
+const picked = {
+	about: "heatmap.incidents.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Incidents, {})
+	}),
+	example: incidents_example_exports,
+	title: "heatmap.incidents.title"
+};
+/**
+* Hand-written scene for a dense grid that scrolls sideways.
+*/
+const dense = {
+	about: "heatmap.attendance.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Attendance, {})
+	}),
+	example: attendance_example_exports,
+	title: "heatmap.attendance.title"
+};
+/**
+* Hand-written scene for a year of deploys laid out as a calendar.
+*/
+const calendar = {
+	about: "heatmap.deploys.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Deploys, {})
+	}),
+	example: deploys_example_exports,
+	title: "heatmap.deploys.title"
+};
+/**
+* Hand-written scene for a calendar whose weeks start on Monday.
+*/
+const weekStart = {
+	about: "heatmap.pages.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Pages, {})
+	}),
+	example: pages_example_exports,
+	title: "heatmap.pages.title"
+};
+/**
+* Hand-written scene for a picked day.
+*/
+const pickedDay = {
+	about: "heatmap.bookings.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Bookings, {})
+	}),
+	example: bookings_example_exports,
+	title: "heatmap.bookings.title"
+};
+/**
+* Hand-written scene for signup cohorts with their average.
+*/
+const cohorts = {
+	about: "heatmap.signups.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "3xl",
+		children: /* @__PURE__ */ jsx(Signups, {})
+	}),
+	example: signups_example_exports,
+	title: "heatmap.signups.title"
+};
+/**
+* Hand-written scene for clinic cohorts with their counts.
+*/
+const counted = {
+	about: "heatmap.clinic.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Clinic, {})
+	}),
+	example: clinic_example_exports,
+	title: "heatmap.clinic.title"
+};
+/**
+* Hand-written scene for a stated palette.
+*/
+const tinted = {
+	about: "heatmap.palette.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Palette, {})
+	}),
+	example: palette_example_exports,
+	title: "heatmap.palette.title"
+};
+/**
+* Hand-written scene for the authorisations at a phone's width.
+*/
+const narrow = {
+	about: "heatmap.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Authorisations, {})
+	}),
+	example: authorisations_example_exports,
+	title: "heatmap.narrow.title"
+};
+/**
+* Hand-written scene for a heatmap without cells.
+*/
+const empty = {
+	about: "heatmap.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "heatmap.quiet.title"
+};
+var heatmap_specimen_default = specimen({
+	about: "heatmap.about",
+	id: "components/charts/heatmap",
+	imports: "import { Heatmap } from \"@stealthscale/component-charts\";",
+	scenes: [
+		authorised,
+		readout,
+		missing,
+		printed,
+		compared,
+		diverged,
+		picked,
+		dense,
+		calendar,
+		weekStart,
+		pickedDay,
+		cohorts,
+		counted,
+		...scenesOf(recipe, {
+			axes: {
+				shape: {
+					direction: "column",
+					draw: (props) => /* @__PURE__ */ jsx(Quarter, { ...props }),
+					example: quarter_example_exports
+				},
+				size: { direction: "column" }
+			},
+			draw: (props) => /* @__PURE__ */ jsx(Sizes, { ...props }),
+			example: sizes_example_exports,
+			namespace: "heatmap",
+			order: ["shape", "size"]
+		}),
+		tinted,
+		narrow,
+		empty
+	],
+	title: "heatmap.title"
+});
+//#endregion
+export { authorised, calendar, cohorts, compared, counted, heatmap_specimen_default as default, dense, diverged, empty, missing, narrow, picked, pickedDay, printed, readout, tinted, weekStart };