@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/pages/timeline-chart/timeline-chart.js

@@ -0,0 +1,1124 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as TimelineChart } from "../../shared-DVZJ2nST.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { RotateCcwIcon } from "lucide-react";
+import { Button } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+import { Text } from "@stealthscale/component-typography";
+//#region src/timeline-chart/examples/burst.example.tsx
+var burst_example_exports = /* @__PURE__ */ __exportAll({
+	Burst: () => Burst,
+	source: () => source$5
+});
+const MOMENTS$4 = [
+	{
+		at: "13:52:00",
+		kind: "deploy",
+		lane: "changes"
+	},
+	{
+		at: "14:03:05",
+		color: "warning",
+		kind: "latency",
+		lane: "alerts"
+	},
+	{
+		at: "14:03:20",
+		color: "error",
+		kind: "errors",
+		lane: "alerts"
+	},
+	{
+		at: "14:03:41",
+		color: "warning",
+		kind: "latency",
+		lane: "alerts"
+	},
+	{
+		at: "14:04:02",
+		color: "warning",
+		kind: "queue",
+		lane: "alerts"
+	},
+	{
+		at: "14:04:18",
+		color: "error",
+		kind: "errors",
+		lane: "alerts"
+	},
+	{
+		at: "14:04:37",
+		color: "error",
+		kind: "checkout",
+		lane: "alerts"
+	},
+	{
+		at: "14:05:02",
+		color: "warning",
+		kind: "latency",
+		lane: "alerts"
+	},
+	{
+		at: "14:21:00",
+		kind: "rollback",
+		lane: "changes"
+	},
+	{
+		at: "14:26:30",
+		color: "success",
+		kind: "recovered",
+		lane: "alerts"
+	}
+];
+function Burst() {
+	const $ = c(27);
+	const { i18n, t } = useWords("timeline-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("burst.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = MOMENTS$4.map((moment, index) => ({
+			at: `2026-09-28T${moment.at}Z`,
+			color: moment.color,
+			key: String(index),
+			label: t(`burst.${moment.kind}`),
+			lane: moment.lane
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("burst.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			hour: "2-digit",
+			hourCycle: "h23",
+			minute: "2-digit",
+			second: "2-digit",
+			timeZone: "UTC"
+		};
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("burst.changes");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "changes",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("burst.alerts");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "alerts",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t5 || $[16] !== t7) {
+		t8 = [t5, t7];
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = (count) => t("burst.more", { count });
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== i18n.language || $[21] !== t0 || $[22] !== t1 || $[23] !== t2 || $[24] !== t8 || $[25] !== t9) {
+		t10 = /* @__PURE__ */ jsx(TimelineChart, {
+			caption: t0,
+			defaultIndex: 2,
+			events: t1,
+			label: t2,
+			labelOptions: t3,
+			lanes: t8,
+			locale: i18n.language,
+			moreLabel: t9,
+			since: "2026-09-28T13:30:00Z",
+			until: "2026-09-28T15:30:00Z"
+		});
+		$[20] = i18n.language;
+		$[21] = t0;
+		$[22] = t1;
+		$[23] = t2;
+		$[24] = t8;
+		$[25] = t9;
+		$[26] = t10;
+	} else t10 = $[26];
+	return t10;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TimelineChart, TimelineEvent } from \"@stealthscale/component-charts\";\n\nconst MOMENTS: ReadonlyArray<{\n  at: string;\n  color?: TimelineEvent[\"color\"];\n  kind: string;\n  lane: string;\n}> = [\n  { at: \"13:52:00\", kind: \"deploy\", lane: \"changes\" },\n  { at: \"14:03:05\", color: \"warning\", kind: \"latency\", lane: \"alerts\" },\n  { at: \"14:03:20\", color: \"error\", kind: \"errors\", lane: \"alerts\" },\n  { at: \"14:03:41\", color: \"warning\", kind: \"latency\", lane: \"alerts\" },\n  { at: \"14:04:02\", color: \"warning\", kind: \"queue\", lane: \"alerts\" },\n  { at: \"14:04:18\", color: \"error\", kind: \"errors\", lane: \"alerts\" },\n  { at: \"14:04:37\", color: \"error\", kind: \"checkout\", lane: \"alerts\" },\n  { at: \"14:05:02\", color: \"warning\", kind: \"latency\", lane: \"alerts\" },\n  { at: \"14:21:00\", kind: \"rollback\", lane: \"changes\" },\n  { at: \"14:26:30\", color: \"success\", kind: \"recovered\", lane: \"alerts\" },\n];\n\nexport function Burst(): ReactElement {\n  const { i18n, t } = useWords(\"timeline-chart\");\n\n  return (\n    <TimelineChart\n      caption={t(\"burst.caption\")}\n      defaultIndex={2}\n      events={MOMENTS.map((moment, index) => ({\n        at: `2026-09-28T${moment.at}Z`,\n        color: moment.color,\n        key: String(index),\n        label: t(`burst.${moment.kind}`),\n        lane: moment.lane,\n      }))}\n      label={t(\"burst.label\")}\n      labelOptions={{\n        hour: \"2-digit\",\n        hourCycle: \"h23\",\n        minute: \"2-digit\",\n        second: \"2-digit\",\n        timeZone: \"UTC\",\n      }}\n      lanes={[\n        { key: \"changes\", label: t(\"burst.changes\") },\n        { key: \"alerts\", label: t(\"burst.alerts\") },\n      ]}\n      locale={i18n.language}\n      moreLabel={(count) => t(\"burst.more\", { count })}\n      since=\"2026-09-28T13:30:00Z\"\n      until=\"2026-09-28T15:30:00Z\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/timeline-chart/examples/deploys.example.tsx
+var deploys_example_exports = /* @__PURE__ */ __exportAll({
+	Deploys: () => Deploys,
+	source: () => source$4
+});
+const MOMENTS$3 = [
+	{
+		at: "03:00",
+		color: "neutral",
+		kind: "backup",
+		lane: "db"
+	},
+	{
+		at: "06:30",
+		color: "warning",
+		kind: "backlog",
+		lane: "worker"
+	},
+	{
+		at: "08:10",
+		color: "success",
+		kind: "cleared",
+		lane: "worker"
+	},
+	{
+		at: "09:12",
+		kind: "deploy",
+		lane: "api",
+		version: "4.12"
+	},
+	{
+		at: "10:05",
+		kind: "deploy",
+		lane: "web",
+		version: "2.8"
+	},
+	{
+		at: "11:40",
+		color: "warning",
+		kind: "slow",
+		lane: "db"
+	},
+	{
+		at: "13:20",
+		kind: "deploy",
+		lane: "web",
+		version: "2.9"
+	},
+	{
+		at: "14:03",
+		color: "warning",
+		kind: "latency",
+		lane: "api"
+	},
+	{
+		at: "14:05",
+		color: "error",
+		kind: "errors",
+		lane: "api"
+	},
+	{
+		at: "14:09",
+		color: "warning",
+		kind: "latency",
+		lane: "api"
+	},
+	{
+		at: "14:12",
+		color: "info",
+		kind: "notice"
+	},
+	{
+		at: "16:20",
+		kind: "rollback",
+		lane: "api",
+		version: "4.11"
+	},
+	{
+		at: "18:40",
+		kind: "deploy",
+		lane: "api",
+		version: "4.13"
+	},
+	{
+		at: "20:55",
+		kind: "deploy",
+		lane: "web",
+		version: "2.9.1"
+	},
+	{
+		at: "21:15",
+		kind: "deploy",
+		lane: "worker",
+		version: "1.7"
+	},
+	{
+		at: "23:10",
+		color: "neutral",
+		kind: "failover",
+		lane: "db"
+	}
+];
+function Deploys() {
+	const $ = c(37);
+	const { i18n, t } = useWords("timeline-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("deploys.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = MOMENTS$3.map((moment, index) => ({
+			at: `2026-09-28T${moment.at}:00Z`,
+			color: moment.color,
+			key: String(index),
+			label: t(`deploys.${moment.kind}`, { version: moment.version }),
+			lane: moment.lane
+		}));
+		$[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] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			hour: "2-digit",
+			hourCycle: "h23",
+			minute: "2-digit",
+			timeZone: "UTC"
+		};
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("deploys.api");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "api",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("deploys.web");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "web",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("deploys.worker");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = {
+			key: "worker",
+			label: t8
+		};
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("deploys.db");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = {
+			key: "db",
+			label: t10
+		};
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t11 || $[24] !== t5 || $[25] !== t7 || $[26] !== t9) {
+		t12 = [
+			t5,
+			t7,
+			t9,
+			t11
+		];
+		$[23] = t11;
+		$[24] = t5;
+		$[25] = t7;
+		$[26] = t9;
+		$[27] = t12;
+	} else t12 = $[27];
+	const t13 = i18n.language;
+	let t14;
+	if ($[28] !== t) {
+		t14 = t("deploys.other");
+		$[28] = t;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== i18n.language || $[31] !== t0 || $[32] !== t1 || $[33] !== t12 || $[34] !== t14 || $[35] !== t2) {
+		t15 = /* @__PURE__ */ jsx(TimelineChart, {
+			caption: t0,
+			events: t1,
+			label: t2,
+			labelOptions: t3,
+			lanes: t12,
+			locale: t13,
+			otherLabel: t14,
+			since: "2026-09-28T00:00:00Z",
+			until: "2026-09-29T00:00:00Z"
+		});
+		$[30] = i18n.language;
+		$[31] = t0;
+		$[32] = t1;
+		$[33] = t12;
+		$[34] = t14;
+		$[35] = t2;
+		$[36] = t15;
+	} else t15 = $[36];
+	return t15;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TimelineChart, TimelineEvent } from \"@stealthscale/component-charts\";\n\nconst MOMENTS: ReadonlyArray<{\n  at: string;\n  color?: TimelineEvent[\"color\"];\n  kind: string;\n  lane?: string;\n  version?: string;\n}> = [\n  { at: \"03:00\", color: \"neutral\", kind: \"backup\", lane: \"db\" },\n  { at: \"06:30\", color: \"warning\", kind: \"backlog\", lane: \"worker\" },\n  { at: \"08:10\", color: \"success\", kind: \"cleared\", lane: \"worker\" },\n  { at: \"09:12\", kind: \"deploy\", lane: \"api\", version: \"4.12\" },\n  { at: \"10:05\", kind: \"deploy\", lane: \"web\", version: \"2.8\" },\n  { at: \"11:40\", color: \"warning\", kind: \"slow\", lane: \"db\" },\n  { at: \"13:20\", kind: \"deploy\", lane: \"web\", version: \"2.9\" },\n  { at: \"14:03\", color: \"warning\", kind: \"latency\", lane: \"api\" },\n  { at: \"14:05\", color: \"error\", kind: \"errors\", lane: \"api\" },\n  { at: \"14:09\", color: \"warning\", kind: \"latency\", lane: \"api\" },\n  { at: \"14:12\", color: \"info\", kind: \"notice\" },\n  { at: \"16:20\", kind: \"rollback\", lane: \"api\", version: \"4.11\" },\n  { at: \"18:40\", kind: \"deploy\", lane: \"api\", version: \"4.13\" },\n  { at: \"20:55\", kind: \"deploy\", lane: \"web\", version: \"2.9.1\" },\n  { at: \"21:15\", kind: \"deploy\", lane: \"worker\", version: \"1.7\" },\n  { at: \"23:10\", color: \"neutral\", kind: \"failover\", lane: \"db\" },\n];\n\nexport function Deploys(): ReactElement {\n  const { i18n, t } = useWords(\"timeline-chart\");\n\n  return (\n    <TimelineChart\n      caption={t(\"deploys.caption\")}\n      events={MOMENTS.map((moment, index) => ({\n        at: `2026-09-28T${moment.at}:00Z`,\n        color: moment.color,\n        key: String(index),\n        label: t(`deploys.${moment.kind}`, { version: moment.version }),\n        lane: moment.lane,\n      }))}\n      label={t(\"deploys.label\")}\n      labelOptions={{ hour: \"2-digit\", hourCycle: \"h23\", minute: \"2-digit\", timeZone: \"UTC\" }}\n      lanes={[\n        { key: \"api\", label: t(\"deploys.api\") },\n        { key: \"web\", label: t(\"deploys.web\") },\n        { key: \"worker\", label: t(\"deploys.worker\") },\n        { key: \"db\", label: t(\"deploys.db\") },\n      ]}\n      locale={i18n.language}\n      otherLabel={t(\"deploys.other\")}\n      since=\"2026-09-28T00:00:00Z\"\n      until=\"2026-09-29T00:00:00Z\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/timeline-chart/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$3
+});
+const MOMENTS$2 = [];
+function Quiet() {
+	const $ = c(11);
+	const { i18n, t } = useWords("timeline-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("quiet.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("quiet.empty");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("quiet.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== i18n.language || $[7] !== t0 || $[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TimelineChart, {
+			caption: t0,
+			empty: t1,
+			events: MOMENTS$2,
+			label: t2,
+			locale: i18n.language
+		});
+		$[6] = i18n.language;
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TimelineChart, TimelineEvent } from \"@stealthscale/component-charts\";\n\nconst MOMENTS: TimelineEvent[] = [];\n\nexport function Quiet(): ReactElement {\n  const { i18n, t } = useWords(\"timeline-chart\");\n\n  return (\n    <TimelineChart\n      caption={t(\"quiet.caption\")}\n      empty={t(\"quiet.empty\")}\n      events={MOMENTS}\n      label={t(\"quiet.label\")}\n      locale={i18n.language}\n    />\n  );\n}\n";
+//#endregion
+//#region src/timeline-chart/examples/releases.example.tsx
+var releases_example_exports = /* @__PURE__ */ __exportAll({
+	Releases: () => Releases,
+	source: () => source$2
+});
+const RELEASES = [
+	{
+		at: "2025-10-14",
+		kind: "release",
+		version: "3.0"
+	},
+	{
+		at: "2025-11-18",
+		kind: "release",
+		version: "3.1"
+	},
+	{
+		at: "2026-01-20",
+		kind: "release",
+		version: "3.2"
+	},
+	{
+		at: "2026-02-24",
+		kind: "release",
+		version: "3.3"
+	},
+	{
+		at: "2026-02-26",
+		color: "warning",
+		kind: "patch",
+		version: "3.3.1"
+	},
+	{
+		at: "2026-04-07",
+		kind: "release",
+		version: "4.0"
+	},
+	{
+		at: "2026-05-12",
+		kind: "release",
+		version: "4.1"
+	},
+	{
+		at: "2026-06-16",
+		kind: "release",
+		version: "4.2"
+	},
+	{
+		at: "2026-06-19",
+		color: "warning",
+		kind: "patch",
+		version: "4.2.1"
+	},
+	{
+		at: "2026-07-21",
+		kind: "release",
+		version: "4.3"
+	},
+	{
+		at: "2026-09-01",
+		kind: "release",
+		version: "4.4"
+	}
+];
+function Releases() {
+	const $ = c(12);
+	const { i18n, t } = useWords("timeline-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("releases.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = RELEASES.map((release) => ({
+			at: `${release.at}T12:00:00Z`,
+			color: release.color,
+			key: release.version,
+			label: t(`releases.${release.kind}`, { version: release.version })
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("releases.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			dateStyle: "medium",
+			timeZone: "UTC"
+		};
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== i18n.language || $[8] !== t0 || $[9] !== t1 || $[10] !== t2) {
+		t4 = /* @__PURE__ */ jsx(TimelineChart, {
+			caption: t0,
+			events: t1,
+			label: t2,
+			labelOptions: t3,
+			locale: i18n.language,
+			since: "2025-10-01T00:00:00Z",
+			ticks: 3,
+			until: "2026-10-01T00:00:00Z"
+		});
+		$[7] = i18n.language;
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TimelineChart, TimelineEvent } from \"@stealthscale/component-charts\";\n\nconst RELEASES: ReadonlyArray<{\n  at: string;\n  color?: TimelineEvent[\"color\"];\n  kind: \"patch\" | \"release\";\n  version: string;\n}> = [\n  { at: \"2025-10-14\", kind: \"release\", version: \"3.0\" },\n  { at: \"2025-11-18\", kind: \"release\", version: \"3.1\" },\n  { at: \"2026-01-20\", kind: \"release\", version: \"3.2\" },\n  { at: \"2026-02-24\", kind: \"release\", version: \"3.3\" },\n  { at: \"2026-02-26\", color: \"warning\", kind: \"patch\", version: \"3.3.1\" },\n  { at: \"2026-04-07\", kind: \"release\", version: \"4.0\" },\n  { at: \"2026-05-12\", kind: \"release\", version: \"4.1\" },\n  { at: \"2026-06-16\", kind: \"release\", version: \"4.2\" },\n  { at: \"2026-06-19\", color: \"warning\", kind: \"patch\", version: \"4.2.1\" },\n  { at: \"2026-07-21\", kind: \"release\", version: \"4.3\" },\n  { at: \"2026-09-01\", kind: \"release\", version: \"4.4\" },\n];\n\nexport function Releases(): ReactElement {\n  const { i18n, t } = useWords(\"timeline-chart\");\n\n  return (\n    <TimelineChart\n      caption={t(\"releases.caption\")}\n      events={RELEASES.map((release) => ({\n        at: `${release.at}T12:00:00Z`,\n        color: release.color,\n        key: release.version,\n        label: t(`releases.${release.kind}`, { version: release.version }),\n      }))}\n      label={t(\"releases.label\")}\n      labelOptions={{ dateStyle: \"medium\", timeZone: \"UTC\" }}\n      locale={i18n.language}\n      since=\"2025-10-01T00:00:00Z\"\n      ticks={3}\n      until=\"2026-10-01T00:00:00Z\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/timeline-chart/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source$1
+});
+const MOMENTS$1 = [
+	{
+		at: "09:12",
+		kind: "deploy",
+		lane: "api",
+		version: "4.12"
+	},
+	{
+		at: "10:05",
+		kind: "deploy",
+		lane: "web",
+		version: "2.8"
+	},
+	{
+		at: "13:20",
+		kind: "deploy",
+		lane: "web",
+		version: "2.9"
+	},
+	{
+		at: "14:03",
+		color: "warning",
+		kind: "latency",
+		lane: "api"
+	},
+	{
+		at: "14:05",
+		color: "error",
+		kind: "errors",
+		lane: "api"
+	},
+	{
+		at: "16:05",
+		kind: "rollback",
+		lane: "api",
+		version: "4.11"
+	},
+	{
+		at: "20:55",
+		kind: "deploy",
+		lane: "web",
+		version: "2.9.1"
+	}
+];
+function Replay() {
+	const $ = c(36);
+	const { i18n, t } = useWords("timeline-chart");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("replay.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = MOMENTS$1.map((moment, index) => ({
+			at: `2026-09-28T${moment.at}:00Z`,
+			color: moment.color,
+			key: String(index),
+			label: t(`deploys.${moment.kind}`, { version: moment.version }),
+			lane: moment.lane
+		}));
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("replay.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			hour: "2-digit",
+			hourCycle: "h23",
+			minute: "2-digit",
+			timeZone: "UTC"
+		};
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("deploys.api");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "api",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("deploys.web");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "web",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t5 || $[16] !== t7) {
+		t8 = [t5, t7];
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== i18n.language || $[19] !== run || $[20] !== t0 || $[21] !== t1 || $[22] !== t2 || $[23] !== t8) {
+		t9 = /* @__PURE__ */ jsx(TimelineChart, {
+			animate: true,
+			caption: t0,
+			events: t1,
+			label: t2,
+			labelOptions: t3,
+			lanes: t8,
+			locale: i18n.language,
+			since: "2026-09-28T00:00:00Z",
+			until: "2026-09-29T00:00:00Z"
+		}, run);
+		$[18] = i18n.language;
+		$[19] = run;
+		$[20] = t0;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t8;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== run) {
+		t10 = () => {
+			setRun(run + 1);
+		};
+		$[25] = run;
+		$[26] = t10;
+	} else t10 = $[26];
+	let t11;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== t) {
+		t12 = t("replay.replay");
+		$[28] = t;
+		$[29] = t12;
+	} else t12 = $[29];
+	let t13;
+	if ($[30] !== t10 || $[31] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t10,
+			size: "sm",
+			variant: "outline",
+			children: [t11, t12]
+		});
+		$[30] = t10;
+		$[31] = t12;
+		$[32] = t13;
+	} else t13 = $[32];
+	let t14;
+	if ($[33] !== t13 || $[34] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t9, t13]
+		});
+		$[33] = t13;
+		$[34] = t9;
+		$[35] = t14;
+	} else t14 = $[35];
+	return t14;
+}
+const source$1 = "import { type ReactElement, useState } from \"react\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { TimelineChart, TimelineEvent } from \"@stealthscale/component-charts\";\n\nconst MOMENTS: ReadonlyArray<{\n  at: string;\n  color?: TimelineEvent[\"color\"];\n  kind: string;\n  lane: string;\n  version?: string;\n}> = [\n  { at: \"09:12\", kind: \"deploy\", lane: \"api\", version: \"4.12\" },\n  { at: \"10:05\", kind: \"deploy\", lane: \"web\", version: \"2.8\" },\n  { at: \"13:20\", kind: \"deploy\", lane: \"web\", version: \"2.9\" },\n  { at: \"14:03\", color: \"warning\", kind: \"latency\", lane: \"api\" },\n  { at: \"14:05\", color: \"error\", kind: \"errors\", lane: \"api\" },\n  { at: \"16:05\", kind: \"rollback\", lane: \"api\", version: \"4.11\" },\n  { at: \"20:55\", kind: \"deploy\", lane: \"web\", version: \"2.9.1\" },\n];\n\nexport function Replay(): ReactElement {\n  const { i18n, t } = useWords(\"timeline-chart\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack align=\"flex-start\">\n      <TimelineChart\n        animate\n        caption={t(\"replay.caption\")}\n        events={MOMENTS.map((moment, index) => ({\n          at: `2026-09-28T${moment.at}:00Z`,\n          color: moment.color,\n          key: String(index),\n          label: t(`deploys.${moment.kind}`, { version: moment.version }),\n          lane: moment.lane,\n        }))}\n        key={run}\n        label={t(\"replay.label\")}\n        labelOptions={{ hour: \"2-digit\", hourCycle: \"h23\", minute: \"2-digit\", timeZone: \"UTC\" }}\n        lanes={[\n          { key: \"api\", label: t(\"deploys.api\") },\n          { key: \"web\", label: t(\"deploys.web\") },\n        ]}\n        locale={i18n.language}\n        since=\"2026-09-28T00:00:00Z\"\n        until=\"2026-09-29T00:00:00Z\"\n      />\n      <Button\n        onClick={() => {\n          setRun(run + 1);\n        }}\n        size=\"sm\"\n        variant=\"outline\"\n      >\n        <RotateCcwIcon />\n        {t(\"replay.replay\")}\n      </Button>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/timeline-chart/examples/select.example.tsx
+var select_example_exports = /* @__PURE__ */ __exportAll({
+	Select: () => Select,
+	source: () => source
+});
+const MOMENTS = [
+	{
+		at: "03:00",
+		color: "neutral",
+		kind: "backup",
+		lane: "db"
+	},
+	{
+		at: "09:12",
+		kind: "deploy",
+		lane: "api",
+		version: "4.12"
+	},
+	{
+		at: "11:40",
+		color: "warning",
+		kind: "slow",
+		lane: "db"
+	},
+	{
+		at: "14:03",
+		color: "warning",
+		kind: "latency",
+		lane: "api"
+	},
+	{
+		at: "14:05",
+		color: "error",
+		kind: "errors",
+		lane: "api"
+	},
+	{
+		at: "14:09",
+		color: "warning",
+		kind: "latency",
+		lane: "api"
+	},
+	{
+		at: "16:05",
+		kind: "rollback",
+		lane: "api",
+		version: "4.11"
+	},
+	{
+		at: "18:40",
+		kind: "deploy",
+		lane: "api",
+		version: "4.13"
+	},
+	{
+		at: "23:10",
+		color: "neutral",
+		kind: "failover",
+		lane: "db"
+	}
+];
+function Select() {
+	const $ = c(45);
+	const { i18n, t } = useWords("timeline-chart");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	const [picked, setPicked] = useState(t0);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[1] !== i18n.language || $[2] !== picked || $[3] !== t) {
+		const list = new Intl.ListFormat(i18n.language);
+		T1 = Stack;
+		let t6;
+		if ($[11] !== t) {
+			t6 = t("select.caption");
+			$[11] = t;
+			$[12] = t6;
+		} else t6 = $[12];
+		let t7;
+		if ($[13] !== t) {
+			t7 = MOMENTS.map((moment, index) => ({
+				at: `2026-09-28T${moment.at}:00Z`,
+				color: moment.color,
+				key: String(index),
+				label: t(`deploys.${moment.kind}`, { version: moment.version }),
+				lane: moment.lane
+			}));
+			$[13] = t;
+			$[14] = t7;
+		} else t7 = $[14];
+		let t8;
+		if ($[15] !== t) {
+			t8 = t("select.label");
+			$[15] = t;
+			$[16] = t8;
+		} else t8 = $[16];
+		let t9;
+		if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+			t9 = {
+				hour: "2-digit",
+				hourCycle: "h23",
+				minute: "2-digit",
+				timeZone: "UTC"
+			};
+			$[17] = t9;
+		} else t9 = $[17];
+		let t10;
+		if ($[18] !== t) {
+			t10 = t("deploys.api");
+			$[18] = t;
+			$[19] = t10;
+		} else t10 = $[19];
+		let t11;
+		if ($[20] !== t10) {
+			t11 = {
+				key: "api",
+				label: t10
+			};
+			$[20] = t10;
+			$[21] = t11;
+		} else t11 = $[21];
+		let t12;
+		if ($[22] !== t) {
+			t12 = t("deploys.db");
+			$[22] = t;
+			$[23] = t12;
+		} else t12 = $[23];
+		let t13;
+		if ($[24] !== t12) {
+			t13 = {
+				key: "db",
+				label: t12
+			};
+			$[24] = t12;
+			$[25] = t13;
+		} else t13 = $[25];
+		let t14;
+		if ($[26] !== t11 || $[27] !== t13) {
+			t14 = [t11, t13];
+			$[26] = t11;
+			$[27] = t13;
+			$[28] = t14;
+		} else t14 = $[28];
+		if ($[29] !== i18n.language || $[30] !== t14 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8) {
+			t5 = /* @__PURE__ */ jsx(TimelineChart, {
+				caption: t6,
+				events: t7,
+				label: t8,
+				labelOptions: t9,
+				lanes: t14,
+				locale: i18n.language,
+				onSelect: setPicked,
+				since: "2026-09-28T00:00:00Z",
+				until: "2026-09-29T00:00:00Z"
+			});
+			$[29] = i18n.language;
+			$[30] = t14;
+			$[31] = t6;
+			$[32] = t7;
+			$[33] = t8;
+			$[34] = t5;
+		} else t5 = $[34];
+		T0 = Text;
+		t1 = "output";
+		t2 = "sm";
+		t3 = "muted";
+		t4 = picked.length === 0 ? t("select.none") : t("select.picked", {
+			count: picked.length,
+			list: list.format(picked.map(_temp))
+		});
+		$[1] = i18n.language;
+		$[2] = picked;
+		$[3] = t;
+		$[4] = T0;
+		$[5] = T1;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else {
+		T0 = $[4];
+		T1 = $[5];
+		t1 = $[6];
+		t2 = $[7];
+		t3 = $[8];
+		t4 = $[9];
+		t5 = $[10];
+	}
+	let t6;
+	if ($[35] !== T0 || $[36] !== t1 || $[37] !== t2 || $[38] !== t3 || $[39] !== t4) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			as: t1,
+			size: t2,
+			tone: t3,
+			children: t4
+		});
+		$[35] = T0;
+		$[36] = t1;
+		$[37] = t2;
+		$[38] = t3;
+		$[39] = t4;
+		$[40] = t6;
+	} else t6 = $[40];
+	let t7;
+	if ($[41] !== T1 || $[42] !== t5 || $[43] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(T1, { children: [t5, t6] });
+		$[41] = T1;
+		$[42] = t5;
+		$[43] = t6;
+		$[44] = t7;
+	} else t7 = $[44];
+	return t7;
+}
+function _temp(event) {
+	return event.label;
+}
+const source = "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 { TimelineChart, TimelineEvent } from \"@stealthscale/component-charts\";\n\nconst MOMENTS: ReadonlyArray<{\n  at: string;\n  color?: TimelineEvent[\"color\"];\n  kind: string;\n  lane: string;\n  version?: string;\n}> = [\n  { at: \"03:00\", color: \"neutral\", kind: \"backup\", lane: \"db\" },\n  { at: \"09:12\", kind: \"deploy\", lane: \"api\", version: \"4.12\" },\n  { at: \"11:40\", color: \"warning\", kind: \"slow\", lane: \"db\" },\n  { at: \"14:03\", color: \"warning\", kind: \"latency\", lane: \"api\" },\n  { at: \"14:05\", color: \"error\", kind: \"errors\", lane: \"api\" },\n  { at: \"14:09\", color: \"warning\", kind: \"latency\", lane: \"api\" },\n  { at: \"16:05\", kind: \"rollback\", lane: \"api\", version: \"4.11\" },\n  { at: \"18:40\", kind: \"deploy\", lane: \"api\", version: \"4.13\" },\n  { at: \"23:10\", color: \"neutral\", kind: \"failover\", lane: \"db\" },\n];\n\nexport function Select(): ReactElement {\n  const { i18n, t } = useWords(\"timeline-chart\");\n  const [picked, setPicked] = useState<readonly TimelineEvent[]>([]);\n  const list = new Intl.ListFormat(i18n.language);\n\n  return (\n    <Stack>\n      <TimelineChart\n        caption={t(\"select.caption\")}\n        events={MOMENTS.map((moment, index) => ({\n          at: `2026-09-28T${moment.at}:00Z`,\n          color: moment.color,\n          key: String(index),\n          label: t(`deploys.${moment.kind}`, { version: moment.version }),\n          lane: moment.lane,\n        }))}\n        label={t(\"select.label\")}\n        labelOptions={{ hour: \"2-digit\", hourCycle: \"h23\", minute: \"2-digit\", timeZone: \"UTC\" }}\n        lanes={[\n          { key: \"api\", label: t(\"deploys.api\") },\n          { key: \"db\", label: t(\"deploys.db\") },\n        ]}\n        locale={i18n.language}\n        onSelect={setPicked}\n        since=\"2026-09-28T00:00:00Z\"\n        until=\"2026-09-29T00:00:00Z\"\n      />\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {picked.length === 0\n          ? t(\"select.none\")\n          : t(\"select.picked\", {\n              count: picked.length,\n              list: list.format(picked.map((event) => event.label)),\n            })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/timeline-chart/timeline-chart.specimen.tsx
+/**
+* Catalogue page for the timeline chart.
+*
+* @remarks
+*   The timeline has no recipe of its own: the chart's recipe styles its figure and its markers, so
+*   every scene is hand-written. The scenes render a day of deploys and incidents across four
+*   services, an incident's alerts in one marker with the tooltip open, a year of releases in one
+*   lane, a selection read under the chart, the markers animated in with a replay, the day at a
+*   phone's width, and a timeline without moments. Every scene renders a component from
+*   `examples/` and shows that file as its source. The words are keys under `timeline-chart` in
+*   `locales/en/specimen/timeline-chart.json`.
+*/
+/**
+* Hand-written scene for a lane per service.
+*/
+const lanes = {
+	about: "timeline-chart.deploys.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Deploys, {})
+	}),
+	example: deploys_example_exports,
+	title: "timeline-chart.deploys.title"
+};
+/**
+* Hand-written scene for moments that share a marker, with the tooltip open at it.
+*/
+const clusters = {
+	about: "timeline-chart.burst.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Burst, {})
+	}),
+	example: burst_example_exports,
+	title: "timeline-chart.burst.title"
+};
+/**
+* Hand-written scene for a timeline of one lane.
+*/
+const single = {
+	about: "timeline-chart.releases.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Releases, {})
+	}),
+	example: releases_example_exports,
+	title: "timeline-chart.releases.title"
+};
+/**
+* Hand-written scene for a marker's moments handed to the caller.
+*/
+const selection = {
+	about: "timeline-chart.select.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Select, {})
+	}),
+	example: select_example_exports,
+	title: "timeline-chart.select.title"
+};
+/**
+* Hand-written scene for the markers animated in, with a replay.
+*/
+const animated = {
+	about: "timeline-chart.replay.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Replay, {})
+	}),
+	example: replay_example_exports,
+	title: "timeline-chart.replay.title"
+};
+/**
+* Hand-written scene for the day at a phone's width.
+*/
+const narrow = {
+	about: "timeline-chart.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Deploys, {})
+	}),
+	example: deploys_example_exports,
+	title: "timeline-chart.narrow.title"
+};
+/**
+* Hand-written scene for a timeline without moments.
+*/
+const empty = {
+	about: "timeline-chart.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "timeline-chart.quiet.title"
+};
+var timeline_chart_specimen_default = specimen({
+	about: "timeline-chart.about",
+	id: "components/charts/timeline-chart",
+	imports: "import { TimelineChart } from \"@stealthscale/component-charts\";",
+	scenes: [
+		lanes,
+		clusters,
+		single,
+		selection,
+		animated,
+		narrow,
+		empty
+	],
+	title: "timeline-chart.title"
+});
+//#endregion
+export { animated, clusters, timeline_chart_specimen_default as default, empty, lanes, narrow, selection, single };