@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/pages/sparkline/sparkline.js

@@ -0,0 +1,960 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { v as Sparkline } from "../../shared-DVZJ2nST.js";
+import { t as recipe } from "../../recipes-BbGw00ut.js";
+import { c } from "react/compiler-runtime";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stat } from "@stealthscale/component-data";
+import { Table } from "@stealthscale/component-collections";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { ArrowUpIcon, RotateCcwIcon } from "lucide-react";
+import { Button } from "@stealthscale/component-actions";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/sparkline/examples/builds.example.tsx
+var builds_example_exports = /* @__PURE__ */ __exportAll({
+	Builds: () => Builds,
+	source: () => source$8
+});
+const MINUTES = [
+	4.2,
+	4.4,
+	4.1,
+	4.3,
+	3.9,
+	3.8,
+	3.9,
+	3.6,
+	3.5,
+	3.6,
+	3.4,
+	3.3,
+	3.2,
+	3.3,
+	3.1
+];
+function Builds() {
+	const $ = c(4);
+	const { t } = useWords("sparkline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("builds.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Sparkline, {
+			curve: "linear",
+			label: t0,
+			size: "lg",
+			values: MINUTES
+		});
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+const source$8 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst MINUTES = [4.2, 4.4, 4.1, 4.3, 3.9, 3.8, 3.9, 3.6, 3.5, 3.6, 3.4, 3.3, 3.2, 3.3, 3.1];\n\nexport function Builds(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n\n  return <Sparkline curve=\"linear\" label={t(\"builds.label\")} size=\"lg\" values={MINUTES} />;\n}\n";
+//#endregion
+//#region src/sparkline/examples/errors.example.tsx
+var errors_example_exports = /* @__PURE__ */ __exportAll({
+	Errors: () => Errors,
+	source: () => source$7
+});
+const HOURS$1 = [
+	3,
+	2,
+	4,
+	3,
+	5,
+	4,
+	6,
+	9,
+	14,
+	12,
+	16,
+	14
+];
+function Errors() {
+	const $ = c(20);
+	const { t } = useWords("sparkline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("errors.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("errors.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Stat.Indicator, { children: /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": true }) });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("errors.help");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.HelpText, { children: [t4, t5] });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t1 || $[14] !== t3 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Stat.Root, {
+			palette: "error",
+			children: [
+				t1,
+				t3,
+				t6
+			]
+		});
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Sparkline, {
+			color: "error",
+			size: "lg",
+			values: HOURS$1
+		});
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t7, t8]
+		});
+		$[18] = t7;
+		$[19] = t9;
+	} else t9 = $[19];
+	return t9;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst HOURS = [3, 2, 4, 3, 5, 4, 6, 9, 14, 12, 16, 14];\n\nexport function Errors(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root palette=\"error\">\n        <Stat.Label>{t(\"errors.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"errors.value\")}</Stat.ValueText>\n        <Stat.HelpText>\n          <Stat.Indicator>\n            <ArrowUpIcon aria-hidden />\n          </Stat.Indicator>\n          {t(\"errors.help\")}\n        </Stat.HelpText>\n      </Stat.Root>\n      <Sparkline color=\"error\" size=\"lg\" values={HOURS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkline/examples/launch.example.tsx
+var launch_example_exports = /* @__PURE__ */ __exportAll({
+	Launch: () => Launch,
+	source: () => source$6
+});
+const MONTHS$1 = [
+	0,
+	40,
+	95,
+	180,
+	260,
+	410,
+	590,
+	720,
+	940,
+	1240
+];
+function Launch() {
+	const $ = c(19);
+	const { t } = useWords("sparkline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("launch.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("launch.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("launch.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkline, {
+			area: true,
+			size: "lg",
+			values: MONTHS$1
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst MONTHS = [0, 40, 95, 180, 260, 410, 590, 720, 940, 1240];\n\nexport function Launch(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"launch.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"launch.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"launch.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkline area size=\"lg\" values={MONTHS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkline/examples/offline.example.tsx
+var offline_example_exports = /* @__PURE__ */ __exportAll({
+	Offline: () => Offline,
+	source: () => source$5
+});
+const READINGS = [
+	21.4,
+	21.6,
+	21.9,
+	null,
+	null,
+	22.8,
+	22.6,
+	22.1,
+	21.8
+];
+function Offline() {
+	const $ = c(19);
+	const { t } = useWords("sparkline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("offline.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("offline.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("offline.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkline, {
+			curve: "linear",
+			size: "lg",
+			values: READINGS
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst READINGS = [21.4, 21.6, 21.9, null, null, 22.8, 22.6, 22.1, 21.8];\n\nexport function Offline(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"offline.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"offline.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"offline.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkline curve=\"linear\" size=\"lg\" values={READINGS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkline/examples/primary.example.tsx
+var primary_example_exports = /* @__PURE__ */ __exportAll({
+	Primary: () => Primary,
+	source: () => source$4
+});
+const WEEK = [
+	12,
+	18,
+	15,
+	21,
+	22,
+	30,
+	27
+];
+function Primary(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Sparkline, {
+			values: WEEK,
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst WEEK = [12, 18, 15, 21, 22, 30, 27];\n\nexport function Primary(props: Omit<Parameters<typeof Sparkline>[0], \"values\">): ReactElement {\n  return <Sparkline values={WEEK} {...props} />;\n}\n";
+//#endregion
+//#region src/sparkline/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source$3
+});
+const MONTHS = [
+	0,
+	40,
+	95,
+	180,
+	260,
+	410,
+	590,
+	720,
+	940,
+	1240
+];
+function Replay() {
+	const $ = c(16);
+	const { t } = useWords("sparkline");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("replay.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== run || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Sparkline, {
+			animate: true,
+			area: true,
+			label: t0,
+			size: "lg",
+			values: MONTHS
+		}, run);
+		$[2] = run;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== run) {
+		t2 = () => {
+			setRun(run + 1);
+		};
+		$[5] = run;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("replay.replay");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t2 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t2,
+			size: "sm",
+			variant: "outline",
+			children: [t3, t4]
+		});
+		$[10] = t2;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t1 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			children: [t1, t5]
+		});
+		$[13] = t1;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
+}
+const source$3 = "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 { Sparkline } from \"@stealthscale/component-charts\";\n\nconst MONTHS = [0, 40, 95, 180, 260, 410, 590, 720, 940, 1240];\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack direction=\"row\">\n      <Sparkline animate area key={run} label={t(\"replay.label\")} size=\"lg\" values={MONTHS} />\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/sparkline/examples/revenue.example.tsx
+var revenue_example_exports = /* @__PURE__ */ __exportAll({
+	Revenue: () => Revenue,
+	source: () => source$2
+});
+const DAYS = [
+	5980,
+	6420,
+	6110,
+	7030,
+	6890,
+	7560,
+	8130
+];
+function Revenue() {
+	const $ = c(20);
+	const { t } = useWords("sparkline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("revenue.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("revenue.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Stat.Indicator, { children: /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": true }) });
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("revenue.help");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.HelpText, { children: [t4, t5] });
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t1 || $[14] !== t3 || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Stat.Root, {
+			palette: "success",
+			children: [
+				t1,
+				t3,
+				t6
+			]
+		});
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Sparkline, {
+			size: "lg",
+			values: DAYS
+		});
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t7) {
+		t9 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t7, t8]
+		});
+		$[18] = t7;
+		$[19] = t9;
+	} else t9 = $[19];
+	return t9;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { ArrowUpIcon } from \"lucide-react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst DAYS = [5980, 6420, 6110, 7030, 6890, 7560, 8130];\n\nexport function Revenue(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root palette=\"success\">\n        <Stat.Label>{t(\"revenue.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"revenue.value\")}</Stat.ValueText>\n        <Stat.HelpText>\n          <Stat.Indicator>\n            <ArrowUpIcon aria-hidden />\n          </Stat.Indicator>\n          {t(\"revenue.help\")}\n        </Stat.HelpText>\n      </Stat.Root>\n      <Sparkline size=\"lg\" values={DAYS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkline/examples/services.example.tsx
+var services_example_exports = /* @__PURE__ */ __exportAll({
+	Services: () => Services,
+	source: () => source$1
+});
+const SERVICES = [
+	{
+		key: "api",
+		now: "182 ms",
+		run: [
+			160,
+			170,
+			168,
+			190,
+			240,
+			210,
+			185,
+			182
+		]
+	},
+	{
+		key: "search",
+		now: "94 ms",
+		run: [
+			120,
+			118,
+			110,
+			104,
+			99,
+			97,
+			95,
+			94
+		]
+	},
+	{
+		key: "checkout",
+		now: "311 ms",
+		run: [
+			250,
+			255,
+			262,
+			270,
+			284,
+			290,
+			305,
+			311
+		]
+	},
+	{
+		key: "auth",
+		now: "45 ms",
+		run: [
+			44,
+			46,
+			45,
+			47,
+			44,
+			45,
+			46,
+			45
+		]
+	}
+];
+function Services() {
+	const $ = c(32);
+	const { t } = useWords("sparkline");
+	const id = useId();
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("services.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== id || $[3] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Table.Caption, {
+			id,
+			children: t0
+		});
+		$[2] = id;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t) {
+		t2 = t("services.service");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Table.ColumnHeader, { children: t2 });
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("services.now");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Table.ColumnHeader, {
+			"data-numeric": true,
+			children: t4
+		});
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t("services.day");
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Table.ColumnHeader, { children: t6 });
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t3 || $[18] !== t5 || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+			t3,
+			t5,
+			t7
+		] }) });
+		$[17] = t3;
+		$[18] = t5;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== t) {
+		t9 = SERVICES.map((service) => /* @__PURE__ */ jsxs(Table.Row, { children: [
+			/* @__PURE__ */ jsx(Table.RowHeader, { children: t(`services.${service.key}`) }),
+			/* @__PURE__ */ jsx(Table.Cell, {
+				"data-numeric": true,
+				children: service.now
+			}),
+			/* @__PURE__ */ jsx(Table.Cell, { children: /* @__PURE__ */ jsx(Sparkline, {
+				size: "sm",
+				values: service.run
+			}) })
+		] }, service.key));
+		$[21] = t;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Table.Body, { children: t9 });
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== t1 || $[26] !== t10 || $[27] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Table.Root, { children: [
+			t1,
+			t8,
+			t10
+		] });
+		$[25] = t1;
+		$[26] = t10;
+		$[27] = t8;
+		$[28] = t11;
+	} else t11 = $[28];
+	let t12;
+	if ($[29] !== id || $[30] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Table.Scroller, {
+			"aria-labelledby": id,
+			variant: "surface",
+			children: t11
+		});
+		$[29] = id;
+		$[30] = t11;
+		$[31] = t12;
+	} else t12 = $[31];
+	return t12;
+}
+const source$1 = "import { type ReactElement, useId } from \"react\";\n\nimport { Table } from \"@stealthscale/component-collections\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst SERVICES = [\n  { key: \"api\", now: \"182 ms\", run: [160, 170, 168, 190, 240, 210, 185, 182] },\n  { key: \"search\", now: \"94 ms\", run: [120, 118, 110, 104, 99, 97, 95, 94] },\n  { key: \"checkout\", now: \"311 ms\", run: [250, 255, 262, 270, 284, 290, 305, 311] },\n  { key: \"auth\", now: \"45 ms\", run: [44, 46, 45, 47, 44, 45, 46, 45] },\n];\n\nexport function Services(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n  const id = useId();\n\n  return (\n    <Table.Scroller aria-labelledby={id} variant=\"surface\">\n      <Table.Root>\n        <Table.Caption id={id}>{t(\"services.caption\")}</Table.Caption>\n        <Table.Header>\n          <Table.Row>\n            <Table.ColumnHeader>{t(\"services.service\")}</Table.ColumnHeader>\n            <Table.ColumnHeader data-numeric>{t(\"services.now\")}</Table.ColumnHeader>\n            <Table.ColumnHeader>{t(\"services.day\")}</Table.ColumnHeader>\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {SERVICES.map((service) => (\n            <Table.Row key={service.key}>\n              <Table.RowHeader>{t(`services.${service.key}`)}</Table.RowHeader>\n              <Table.Cell data-numeric>{service.now}</Table.Cell>\n              <Table.Cell>\n                <Sparkline size=\"sm\" values={service.run} />\n              </Table.Cell>\n            </Table.Row>\n          ))}\n        </Table.Body>\n      </Table.Root>\n    </Table.Scroller>\n  );\n}\n";
+//#endregion
+//#region src/sparkline/examples/target.example.tsx
+var target_example_exports = /* @__PURE__ */ __exportAll({
+	Target: () => Target,
+	source: () => source
+});
+const HOURS = [
+	182,
+	196,
+	210,
+	254,
+	318,
+	342,
+	296,
+	240,
+	205,
+	190
+];
+function Target() {
+	const $ = c(19);
+	const { t } = useWords("sparkline");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("target.label");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(Stat.Label, { children: t0 });
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("target.value");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Stat.ValueText, { children: t2 });
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("target.help");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Stat.HelpText, { children: t4 });
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t1 || $[13] !== t3 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(Stat.Root, { children: [
+			t1,
+			t3,
+			t5
+		] });
+		$[12] = t1;
+		$[13] = t3;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(Sparkline, {
+			baseline: 300,
+			size: "lg",
+			values: HOURS
+		});
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-end",
+			direction: "row",
+			justify: "between",
+			children: [t6, t7]
+		});
+		$[17] = t6;
+		$[18] = t8;
+	} else t8 = $[18];
+	return t8;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { Stat } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Sparkline } from \"@stealthscale/component-charts\";\n\nconst HOURS = [182, 196, 210, 254, 318, 342, 296, 240, 205, 190];\n\nexport function Target(): ReactElement {\n  const { t } = useWords(\"sparkline\");\n\n  return (\n    <Stack align=\"flex-end\" direction=\"row\" justify=\"between\">\n      <Stat.Root>\n        <Stat.Label>{t(\"target.label\")}</Stat.Label>\n        <Stat.ValueText>{t(\"target.value\")}</Stat.ValueText>\n        <Stat.HelpText>{t(\"target.help\")}</Stat.HelpText>\n      </Stat.Root>\n      <Sparkline baseline={300} size=\"lg\" values={HOURS} />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/sparkline/sparkline.specimen.tsx
+/**
+* Catalogue page for the sparkline.
+*
+* @remarks
+*   `scenesOf` generates the size and stretch scenes from the spark recipe. The other scenes are
+*   hand-written: revenue beside its stat, latency per service in a table, errors in the error
+*   palette, customers since launch filled under the line, latency against a target, a run with
+*   missing readings, a named run on its own, and the line animated in with a replay. Every
+*   scene renders a component from `examples/` and shows that file as its source. The words are
+*   keys under `sparkline` in `locales/en/specimen/sparkline.json`. The page imports the
+*   sparkline's barrel directly, because the props reader follows a specimen's own imports and not
+*   an examples barrel.
+*/
+/**
+* Hand-written scene for a run beside its figure.
+*/
+const figure = {
+	about: "sparkline.revenue.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Revenue, {})
+	}),
+	example: revenue_example_exports,
+	title: "sparkline.revenue.title"
+};
+/**
+* Hand-written scene for runs in a table.
+*/
+const table = {
+	about: "sparkline.services.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Services, {})
+	}),
+	example: services_example_exports,
+	title: "sparkline.services.title"
+};
+/**
+* Hand-written scene for a run in a palette.
+*/
+const palette = {
+	about: "sparkline.errors.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Errors, {})
+	}),
+	example: errors_example_exports,
+	title: "sparkline.errors.title"
+};
+/**
+* Hand-written scene for a run from zero filled under its line.
+*/
+const filled = {
+	about: "sparkline.launch.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Launch, {})
+	}),
+	example: launch_example_exports,
+	title: "sparkline.launch.title"
+};
+/**
+* Hand-written scene for a run against a target.
+*/
+const baseline = {
+	about: "sparkline.target.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Target, {})
+	}),
+	example: target_example_exports,
+	title: "sparkline.target.title"
+};
+/**
+* Hand-written scene for a run with missing readings.
+*/
+const gaps = {
+	about: "sparkline.offline.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "sm",
+		children: /* @__PURE__ */ jsx(Offline, {})
+	}),
+	example: offline_example_exports,
+	title: "sparkline.offline.title"
+};
+/**
+* Hand-written scene for a named run on its own.
+*/
+const named = {
+	about: "sparkline.builds.about",
+	draw: Builds,
+	example: builds_example_exports,
+	title: "sparkline.builds.title"
+};
+/**
+* Hand-written scene for the line animated in, with a replay.
+*/
+const animated = {
+	about: "sparkline.replay.about",
+	draw: Replay,
+	example: replay_example_exports,
+	title: "sparkline.replay.title"
+};
+var sparkline_specimen_default = specimen({
+	about: "sparkline.about",
+	id: "components/charts/sparkline",
+	imports: "import { Sparkline } from \"@stealthscale/component-charts\";",
+	scenes: [
+		figure,
+		table,
+		...scenesOf(recipe, {
+			axes: { stretch: { draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "sm",
+				children: /* @__PURE__ */ jsx(Primary, { ...props })
+			}) } },
+			draw: (props) => /* @__PURE__ */ jsx(Primary, { ...props }),
+			example: primary_example_exports,
+			namespace: "sparkline",
+			order: ["size", "stretch"]
+		}),
+		palette,
+		filled,
+		baseline,
+		gaps,
+		named,
+		animated
+	],
+	title: "sparkline.title"
+});
+//#endregion
+export { animated, baseline, sparkline_specimen_default as default, figure, filled, gaps, named, palette, table };