@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/pages/stream-graph/stream-graph.js

@@ -0,0 +1,1662 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { l as StreamGraph } 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";
+//#region src/stream-graph/examples/campaign.example.tsx
+var campaign_example_exports = /* @__PURE__ */ __exportAll({
+	Campaign: () => Campaign,
+	source: () => source$5
+});
+const WEEKS$3 = [
+	[
+		42,
+		18,
+		4,
+		0,
+		6
+	],
+	[
+		43,
+		18,
+		5,
+		0,
+		7
+	],
+	[
+		45,
+		19,
+		5,
+		0,
+		6
+	],
+	[
+		44,
+		19,
+		6,
+		1,
+		7
+	],
+	[
+		46,
+		20,
+		12,
+		1,
+		7
+	],
+	[
+		47,
+		19,
+		26,
+		2,
+		8
+	],
+	[
+		48,
+		20,
+		38,
+		3,
+		7
+	],
+	[
+		47,
+		21,
+		31,
+		5,
+		8
+	],
+	[
+		49,
+		21,
+		19,
+		8,
+		8
+	],
+	[
+		50,
+		20,
+		11,
+		11,
+		9
+	],
+	[
+		51,
+		21,
+		8,
+		14,
+		8
+	],
+	[
+		52,
+		22,
+		7,
+		16,
+		9
+	],
+	[
+		51,
+		22,
+		6,
+		18,
+		9
+	],
+	[
+		53,
+		23,
+		6,
+		19,
+		10
+	],
+	[
+		54,
+		22,
+		5,
+		21,
+		9
+	],
+	[
+		55,
+		23,
+		5,
+		22,
+		10
+	]
+].map(([organic = 0, direct = 0, social = 0, email = 0, referral = 0], index) => ({
+	direct: direct * 1e3,
+	email: email * 1e3,
+	organic: organic * 1e3,
+	referral: referral * 1e3,
+	social: social * 1e3,
+	week: new Date(Date.UTC(2026, 5, 8 + index * 7)).toISOString().slice(0, 10)
+}));
+function Campaign() {
+	const $ = c(39);
+	const { t } = useWords("stream-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("campaign.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("traffic.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("traffic.sources");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("traffic.organic");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "organic",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("traffic.direct");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "direct",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("traffic.social");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = {
+			key: "social",
+			label: t8
+		};
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("traffic.email");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = {
+			key: "email",
+			label: t10
+		};
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("traffic.referral");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = {
+			key: "referral",
+			label: t12
+		};
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t11 || $[28] !== t13 || $[29] !== t5 || $[30] !== t7 || $[31] !== t9) {
+		t14 = [
+			t5,
+			t7,
+			t9,
+			t11,
+			t13
+		];
+		$[27] = t11;
+		$[28] = t13;
+		$[29] = t5;
+		$[30] = t7;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = { notation: "compact" };
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t0 || $[35] !== t1 || $[36] !== t14 || $[37] !== t3) {
+		t16 = /* @__PURE__ */ jsx(StreamGraph, {
+			caption: t0,
+			categoryKey: "week",
+			data: WEEKS$3,
+			defaultIndex: 6,
+			label: t1,
+			labelOptions: t2,
+			legendLabel: t3,
+			series: t14,
+			valueOptions: t15
+		});
+		$[34] = t0;
+		$[35] = t1;
+		$[36] = t14;
+		$[37] = t3;
+		$[38] = t16;
+	} else t16 = $[38];
+	return t16;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { StreamGraph } from \"@stealthscale/component-charts\";\n\nconst WEEKS = [\n  [42, 18, 4, 0, 6],\n  [43, 18, 5, 0, 7],\n  [45, 19, 5, 0, 6],\n  [44, 19, 6, 1, 7],\n  [46, 20, 12, 1, 7],\n  [47, 19, 26, 2, 8],\n  [48, 20, 38, 3, 7],\n  [47, 21, 31, 5, 8],\n  [49, 21, 19, 8, 8],\n  [50, 20, 11, 11, 9],\n  [51, 21, 8, 14, 8],\n  [52, 22, 7, 16, 9],\n  [51, 22, 6, 18, 9],\n  [53, 23, 6, 19, 10],\n  [54, 22, 5, 21, 9],\n  [55, 23, 5, 22, 10],\n].map(([organic = 0, direct = 0, social = 0, email = 0, referral = 0], index) => ({\n  direct: direct * 1000,\n  email: email * 1000,\n  organic: organic * 1000,\n  referral: referral * 1000,\n  social: social * 1000,\n  week: new Date(Date.UTC(2026, 5, 8 + index * 7)).toISOString().slice(0, 10),\n}));\n\nexport function Campaign(): ReactElement {\n  const { t } = useWords(\"stream-graph\");\n\n  return (\n    <StreamGraph\n      caption={t(\"campaign.caption\")}\n      categoryKey=\"week\"\n      data={WEEKS}\n      defaultIndex={6}\n      label={t(\"traffic.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      legendLabel={t(\"traffic.sources\")}\n      series={[\n        { key: \"organic\", label: t(\"traffic.organic\") },\n        { key: \"direct\", label: t(\"traffic.direct\") },\n        { key: \"social\", label: t(\"traffic.social\") },\n        { key: \"email\", label: t(\"traffic.email\") },\n        { key: \"referral\", label: t(\"traffic.referral\") },\n      ]}\n      valueOptions={{ notation: \"compact\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/stream-graph/examples/listening.example.tsx
+var listening_example_exports = /* @__PURE__ */ __exportAll({
+	Listening: () => Listening,
+	source: () => source$4
+});
+const MONTHS$1 = [
+	[
+		130,
+		82,
+		60,
+		32,
+		30,
+		50
+	],
+	[
+		128,
+		85,
+		62,
+		40,
+		38,
+		45
+	],
+	[
+		135,
+		88,
+		64,
+		46,
+		52,
+		42
+	],
+	[
+		120,
+		80,
+		66,
+		30,
+		25,
+		40
+	],
+	[
+		118,
+		82,
+		70,
+		32,
+		24,
+		45
+	],
+	[
+		125,
+		78,
+		74,
+		28,
+		22,
+		52
+	],
+	[
+		130,
+		75,
+		78,
+		25,
+		20,
+		60
+	],
+	[
+		140,
+		72,
+		84,
+		22,
+		18,
+		72
+	],
+	[
+		150,
+		70,
+		88,
+		20,
+		16,
+		85
+	],
+	[
+		160,
+		68,
+		94,
+		18,
+		15,
+		95
+	],
+	[
+		155,
+		70,
+		96,
+		20,
+		16,
+		90
+	],
+	[
+		145,
+		74,
+		92,
+		24,
+		19,
+		75
+	]
+].map(([pop = 0, rock = 0, hiphop = 0, jazz = 0, classical = 0, electronic = 0], index) => ({
+	classical,
+	electronic,
+	hiphop,
+	jazz,
+	month: new Date(Date.UTC(2025, 9 + index, 1)).toISOString().slice(0, 10),
+	pop,
+	rock
+}));
+function Listening() {
+	const $ = c(44);
+	const { t } = useWords("stream-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("listening.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("listening.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			month: "short",
+			timeZone: "UTC"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("listening.genres");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("listening.pop");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "pop",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("listening.rock");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "rock",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("listening.hiphop");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = {
+			key: "hiphop",
+			label: t8
+		};
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("listening.jazz");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = {
+			key: "jazz",
+			label: t10
+		};
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("listening.classical");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = {
+			key: "classical",
+			label: t12
+		};
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t) {
+		t14 = t("listening.electronic");
+		$[27] = t;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t14) {
+		t15 = {
+			key: "electronic",
+			label: t14
+		};
+		$[29] = t14;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t11 || $[32] !== t13 || $[33] !== t15 || $[34] !== t5 || $[35] !== t7 || $[36] !== t9) {
+		t16 = [
+			t5,
+			t7,
+			t9,
+			t11,
+			t13,
+			t15
+		];
+		$[31] = t11;
+		$[32] = t13;
+		$[33] = t15;
+		$[34] = t5;
+		$[35] = t7;
+		$[36] = t9;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = {
+			style: "unit",
+			unit: "hour",
+			unitDisplay: "short"
+		};
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== t0 || $[40] !== t1 || $[41] !== t16 || $[42] !== t3) {
+		t18 = /* @__PURE__ */ jsx(StreamGraph, {
+			baseline: "silhouette",
+			caption: t0,
+			categoryKey: "month",
+			data: MONTHS$1,
+			label: t1,
+			labelOptions: t2,
+			legendLabel: t3,
+			series: t16,
+			valueOptions: t17
+		});
+		$[39] = t0;
+		$[40] = t1;
+		$[41] = t16;
+		$[42] = t3;
+		$[43] = t18;
+	} else t18 = $[43];
+	return t18;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { StreamGraph } from \"@stealthscale/component-charts\";\n\nconst MONTHS = [\n  [130, 82, 60, 32, 30, 50],\n  [128, 85, 62, 40, 38, 45],\n  [135, 88, 64, 46, 52, 42],\n  [120, 80, 66, 30, 25, 40],\n  [118, 82, 70, 32, 24, 45],\n  [125, 78, 74, 28, 22, 52],\n  [130, 75, 78, 25, 20, 60],\n  [140, 72, 84, 22, 18, 72],\n  [150, 70, 88, 20, 16, 85],\n  [160, 68, 94, 18, 15, 95],\n  [155, 70, 96, 20, 16, 90],\n  [145, 74, 92, 24, 19, 75],\n].map(([pop = 0, rock = 0, hiphop = 0, jazz = 0, classical = 0, electronic = 0], index) => ({\n  classical,\n  electronic,\n  hiphop,\n  jazz,\n  month: new Date(Date.UTC(2025, 9 + index, 1)).toISOString().slice(0, 10),\n  pop,\n  rock,\n}));\n\nexport function Listening(): ReactElement {\n  const { t } = useWords(\"stream-graph\");\n\n  return (\n    <StreamGraph\n      baseline=\"silhouette\"\n      caption={t(\"listening.caption\")}\n      categoryKey=\"month\"\n      data={MONTHS}\n      label={t(\"listening.label\")}\n      labelOptions={{ month: \"short\", timeZone: \"UTC\" }}\n      legendLabel={t(\"listening.genres\")}\n      series={[\n        { key: \"pop\", label: t(\"listening.pop\") },\n        { key: \"rock\", label: t(\"listening.rock\") },\n        { key: \"hiphop\", label: t(\"listening.hiphop\") },\n        { key: \"jazz\", label: t(\"listening.jazz\") },\n        { key: \"classical\", label: t(\"listening.classical\") },\n        { key: \"electronic\", label: t(\"listening.electronic\") },\n      ]}\n      valueOptions={{ style: \"unit\", unit: \"hour\", unitDisplay: \"short\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/stream-graph/examples/ordered.example.tsx
+var ordered_example_exports = /* @__PURE__ */ __exportAll({
+	Ordered: () => Ordered,
+	source: () => source$3
+});
+const WEEKS$2 = [
+	[
+		42,
+		18,
+		4,
+		0,
+		6
+	],
+	[
+		43,
+		18,
+		5,
+		0,
+		7
+	],
+	[
+		45,
+		19,
+		5,
+		0,
+		6
+	],
+	[
+		44,
+		19,
+		6,
+		1,
+		7
+	],
+	[
+		46,
+		20,
+		12,
+		1,
+		7
+	],
+	[
+		47,
+		19,
+		26,
+		2,
+		8
+	],
+	[
+		48,
+		20,
+		38,
+		3,
+		7
+	],
+	[
+		47,
+		21,
+		31,
+		5,
+		8
+	],
+	[
+		49,
+		21,
+		19,
+		8,
+		8
+	],
+	[
+		50,
+		20,
+		11,
+		11,
+		9
+	],
+	[
+		51,
+		21,
+		8,
+		14,
+		8
+	],
+	[
+		52,
+		22,
+		7,
+		16,
+		9
+	],
+	[
+		51,
+		22,
+		6,
+		18,
+		9
+	],
+	[
+		53,
+		23,
+		6,
+		19,
+		10
+	],
+	[
+		54,
+		22,
+		5,
+		21,
+		9
+	],
+	[
+		55,
+		23,
+		5,
+		22,
+		10
+	]
+].map(([organic = 0, direct = 0, social = 0, email = 0, referral = 0], index) => ({
+	direct: direct * 1e3,
+	email: email * 1e3,
+	organic: organic * 1e3,
+	referral: referral * 1e3,
+	social: social * 1e3,
+	week: new Date(Date.UTC(2026, 5, 8 + index * 7)).toISOString().slice(0, 10)
+}));
+function Ordered() {
+	const $ = c(39);
+	const { t } = useWords("stream-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("ordered.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("traffic.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("traffic.sources");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("traffic.organic");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "organic",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("traffic.direct");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "direct",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("traffic.social");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = {
+			key: "social",
+			label: t8
+		};
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("traffic.email");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = {
+			key: "email",
+			label: t10
+		};
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("traffic.referral");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = {
+			key: "referral",
+			label: t12
+		};
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t11 || $[28] !== t13 || $[29] !== t5 || $[30] !== t7 || $[31] !== t9) {
+		t14 = [
+			t5,
+			t7,
+			t9,
+			t11,
+			t13
+		];
+		$[27] = t11;
+		$[28] = t13;
+		$[29] = t5;
+		$[30] = t7;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = { notation: "compact" };
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t0 || $[35] !== t1 || $[36] !== t14 || $[37] !== t3) {
+		t16 = /* @__PURE__ */ jsx(StreamGraph, {
+			caption: t0,
+			categoryKey: "week",
+			data: WEEKS$2,
+			insideOut: false,
+			label: t1,
+			labelOptions: t2,
+			legendLabel: t3,
+			series: t14,
+			valueOptions: t15
+		});
+		$[34] = t0;
+		$[35] = t1;
+		$[36] = t14;
+		$[37] = t3;
+		$[38] = t16;
+	} else t16 = $[38];
+	return t16;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { StreamGraph } from \"@stealthscale/component-charts\";\n\nconst WEEKS = [\n  [42, 18, 4, 0, 6],\n  [43, 18, 5, 0, 7],\n  [45, 19, 5, 0, 6],\n  [44, 19, 6, 1, 7],\n  [46, 20, 12, 1, 7],\n  [47, 19, 26, 2, 8],\n  [48, 20, 38, 3, 7],\n  [47, 21, 31, 5, 8],\n  [49, 21, 19, 8, 8],\n  [50, 20, 11, 11, 9],\n  [51, 21, 8, 14, 8],\n  [52, 22, 7, 16, 9],\n  [51, 22, 6, 18, 9],\n  [53, 23, 6, 19, 10],\n  [54, 22, 5, 21, 9],\n  [55, 23, 5, 22, 10],\n].map(([organic = 0, direct = 0, social = 0, email = 0, referral = 0], index) => ({\n  direct: direct * 1000,\n  email: email * 1000,\n  organic: organic * 1000,\n  referral: referral * 1000,\n  social: social * 1000,\n  week: new Date(Date.UTC(2026, 5, 8 + index * 7)).toISOString().slice(0, 10),\n}));\n\nexport function Ordered(): ReactElement {\n  const { t } = useWords(\"stream-graph\");\n\n  return (\n    <StreamGraph\n      caption={t(\"ordered.caption\")}\n      categoryKey=\"week\"\n      data={WEEKS}\n      insideOut={false}\n      label={t(\"traffic.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      legendLabel={t(\"traffic.sources\")}\n      series={[\n        { key: \"organic\", label: t(\"traffic.organic\") },\n        { key: \"direct\", label: t(\"traffic.direct\") },\n        { key: \"social\", label: t(\"traffic.social\") },\n        { key: \"email\", label: t(\"traffic.email\") },\n        { key: \"referral\", label: t(\"traffic.referral\") },\n      ]}\n      valueOptions={{ notation: \"compact\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/stream-graph/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$2
+});
+const WEEKS$1 = [];
+function Quiet() {
+	const $ = c(30);
+	const { t } = useWords("stream-graph");
+	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("traffic.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("traffic.sources");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("traffic.organic");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t4) {
+		t5 = {
+			key: "organic",
+			label: t4
+		};
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("traffic.direct");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t6) {
+		t7 = {
+			key: "direct",
+			label: t6
+		};
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = t("traffic.social");
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t8) {
+		t9 = {
+			key: "social",
+			label: t8
+		};
+		$[18] = t8;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t5 || $[21] !== t7 || $[22] !== t9) {
+		t10 = [
+			t5,
+			t7,
+			t9
+		];
+		$[20] = t5;
+		$[21] = t7;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== t0 || $[25] !== t1 || $[26] !== t10 || $[27] !== t2 || $[28] !== t3) {
+		t11 = /* @__PURE__ */ jsx(StreamGraph, {
+			caption: t0,
+			categoryKey: "week",
+			data: WEEKS$1,
+			empty: t1,
+			label: t2,
+			legendLabel: t3,
+			series: t10
+		});
+		$[24] = t0;
+		$[25] = t1;
+		$[26] = t10;
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t11;
+	} else t11 = $[29];
+	return t11;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { StreamGraph } from \"@stealthscale/component-charts\";\n\nconst WEEKS: Array<{ direct: number; organic: number; social: number; week: string }> = [];\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"stream-graph\");\n\n  return (\n    <StreamGraph\n      caption={t(\"quiet.caption\")}\n      categoryKey=\"week\"\n      data={WEEKS}\n      empty={t(\"quiet.empty\")}\n      label={t(\"traffic.label\")}\n      legendLabel={t(\"traffic.sources\")}\n      series={[\n        { key: \"organic\", label: t(\"traffic.organic\") },\n        { key: \"direct\", label: t(\"traffic.direct\") },\n        { key: \"social\", label: t(\"traffic.social\") },\n      ]}\n    />\n  );\n}\n";
+//#endregion
+//#region src/stream-graph/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source$1
+});
+const MONTHS = [
+	[
+		130,
+		82,
+		60,
+		32,
+		30,
+		50
+	],
+	[
+		128,
+		85,
+		62,
+		40,
+		38,
+		45
+	],
+	[
+		135,
+		88,
+		64,
+		46,
+		52,
+		42
+	],
+	[
+		120,
+		80,
+		66,
+		30,
+		25,
+		40
+	],
+	[
+		118,
+		82,
+		70,
+		32,
+		24,
+		45
+	],
+	[
+		125,
+		78,
+		74,
+		28,
+		22,
+		52
+	],
+	[
+		130,
+		75,
+		78,
+		25,
+		20,
+		60
+	],
+	[
+		140,
+		72,
+		84,
+		22,
+		18,
+		72
+	],
+	[
+		150,
+		70,
+		88,
+		20,
+		16,
+		85
+	],
+	[
+		160,
+		68,
+		94,
+		18,
+		15,
+		95
+	],
+	[
+		155,
+		70,
+		96,
+		20,
+		16,
+		90
+	],
+	[
+		145,
+		74,
+		92,
+		24,
+		19,
+		75
+	]
+].map(([pop = 0, rock = 0, hiphop = 0, jazz = 0, classical = 0, electronic = 0], index) => ({
+	classical,
+	electronic,
+	hiphop,
+	jazz,
+	month: new Date(Date.UTC(2025, 9 + index, 1)).toISOString().slice(0, 10),
+	pop,
+	rock
+}));
+function Replay() {
+	const $ = c(56);
+	const { t } = useWords("stream-graph");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("listening.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("listening.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			month: "short",
+			timeZone: "UTC"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("listening.genres");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("listening.pop");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "pop",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("listening.rock");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "rock",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("listening.hiphop");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = {
+			key: "hiphop",
+			label: t8
+		};
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("listening.jazz");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = {
+			key: "jazz",
+			label: t10
+		};
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("listening.classical");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = {
+			key: "classical",
+			label: t12
+		};
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t) {
+		t14 = t("listening.electronic");
+		$[27] = t;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t14) {
+		t15 = {
+			key: "electronic",
+			label: t14
+		};
+		$[29] = t14;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t11 || $[32] !== t13 || $[33] !== t15 || $[34] !== t5 || $[35] !== t7 || $[36] !== t9) {
+		t16 = [
+			t5,
+			t7,
+			t9,
+			t11,
+			t13,
+			t15
+		];
+		$[31] = t11;
+		$[32] = t13;
+		$[33] = t15;
+		$[34] = t5;
+		$[35] = t7;
+		$[36] = t9;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = {
+			style: "unit",
+			unit: "hour",
+			unitDisplay: "short"
+		};
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== run || $[40] !== t0 || $[41] !== t1 || $[42] !== t16 || $[43] !== t3) {
+		t18 = /* @__PURE__ */ jsx(StreamGraph, {
+			animate: true,
+			baseline: "silhouette",
+			caption: t0,
+			categoryKey: "month",
+			data: MONTHS,
+			label: t1,
+			labelOptions: t2,
+			legendLabel: t3,
+			series: t16,
+			valueOptions: t17
+		}, run);
+		$[39] = run;
+		$[40] = t0;
+		$[41] = t1;
+		$[42] = t16;
+		$[43] = t3;
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== run) {
+		t19 = () => {
+			setRun(run + 1);
+		};
+		$[45] = run;
+		$[46] = t19;
+	} else t19 = $[46];
+	let t20;
+	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[47] = t20;
+	} else t20 = $[47];
+	let t21;
+	if ($[48] !== t) {
+		t21 = t("replay.replay");
+		$[48] = t;
+		$[49] = t21;
+	} else t21 = $[49];
+	let t22;
+	if ($[50] !== t19 || $[51] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t19,
+			size: "sm",
+			variant: "outline",
+			children: [t20, t21]
+		});
+		$[50] = t19;
+		$[51] = t21;
+		$[52] = t22;
+	} else t22 = $[52];
+	let t23;
+	if ($[53] !== t18 || $[54] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t18, t22]
+		});
+		$[53] = t18;
+		$[54] = t22;
+		$[55] = t23;
+	} else t23 = $[55];
+	return t23;
+}
+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 { StreamGraph } from \"@stealthscale/component-charts\";\n\nconst MONTHS = [\n  [130, 82, 60, 32, 30, 50],\n  [128, 85, 62, 40, 38, 45],\n  [135, 88, 64, 46, 52, 42],\n  [120, 80, 66, 30, 25, 40],\n  [118, 82, 70, 32, 24, 45],\n  [125, 78, 74, 28, 22, 52],\n  [130, 75, 78, 25, 20, 60],\n  [140, 72, 84, 22, 18, 72],\n  [150, 70, 88, 20, 16, 85],\n  [160, 68, 94, 18, 15, 95],\n  [155, 70, 96, 20, 16, 90],\n  [145, 74, 92, 24, 19, 75],\n].map(([pop = 0, rock = 0, hiphop = 0, jazz = 0, classical = 0, electronic = 0], index) => ({\n  classical,\n  electronic,\n  hiphop,\n  jazz,\n  month: new Date(Date.UTC(2025, 9 + index, 1)).toISOString().slice(0, 10),\n  pop,\n  rock,\n}));\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"stream-graph\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack align=\"flex-start\">\n      <StreamGraph\n        animate\n        baseline=\"silhouette\"\n        caption={t(\"listening.caption\")}\n        categoryKey=\"month\"\n        data={MONTHS}\n        key={run}\n        label={t(\"listening.label\")}\n        labelOptions={{ month: \"short\", timeZone: \"UTC\" }}\n        legendLabel={t(\"listening.genres\")}\n        series={[\n          { key: \"pop\", label: t(\"listening.pop\") },\n          { key: \"rock\", label: t(\"listening.rock\") },\n          { key: \"hiphop\", label: t(\"listening.hiphop\") },\n          { key: \"jazz\", label: t(\"listening.jazz\") },\n          { key: \"classical\", label: t(\"listening.classical\") },\n          { key: \"electronic\", label: t(\"listening.electronic\") },\n        ]}\n        valueOptions={{ style: \"unit\", unit: \"hour\", unitDisplay: \"short\" }}\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/stream-graph/examples/traffic.example.tsx
+var traffic_example_exports = /* @__PURE__ */ __exportAll({
+	Traffic: () => Traffic,
+	source: () => source
+});
+const WEEKS = [
+	[
+		42,
+		18,
+		4,
+		0,
+		6
+	],
+	[
+		43,
+		18,
+		5,
+		0,
+		7
+	],
+	[
+		45,
+		19,
+		5,
+		0,
+		6
+	],
+	[
+		44,
+		19,
+		6,
+		1,
+		7
+	],
+	[
+		46,
+		20,
+		12,
+		1,
+		7
+	],
+	[
+		47,
+		19,
+		26,
+		2,
+		8
+	],
+	[
+		48,
+		20,
+		38,
+		3,
+		7
+	],
+	[
+		47,
+		21,
+		31,
+		5,
+		8
+	],
+	[
+		49,
+		21,
+		19,
+		8,
+		8
+	],
+	[
+		50,
+		20,
+		11,
+		11,
+		9
+	],
+	[
+		51,
+		21,
+		8,
+		14,
+		8
+	],
+	[
+		52,
+		22,
+		7,
+		16,
+		9
+	],
+	[
+		51,
+		22,
+		6,
+		18,
+		9
+	],
+	[
+		53,
+		23,
+		6,
+		19,
+		10
+	],
+	[
+		54,
+		22,
+		5,
+		21,
+		9
+	],
+	[
+		55,
+		23,
+		5,
+		22,
+		10
+	]
+].map(([organic = 0, direct = 0, social = 0, email = 0, referral = 0], index) => ({
+	direct: direct * 1e3,
+	email: email * 1e3,
+	organic: organic * 1e3,
+	referral: referral * 1e3,
+	social: social * 1e3,
+	week: new Date(Date.UTC(2026, 5, 8 + index * 7)).toISOString().slice(0, 10)
+}));
+function Traffic() {
+	const $ = c(39);
+	const { t } = useWords("stream-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("traffic.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("traffic.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("traffic.sources");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("traffic.organic");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "organic",
+			label: t4
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("traffic.direct");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "direct",
+			label: t6
+		};
+		$[13] = t6;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t) {
+		t8 = t("traffic.social");
+		$[15] = t;
+		$[16] = t8;
+	} else t8 = $[16];
+	let t9;
+	if ($[17] !== t8) {
+		t9 = {
+			key: "social",
+			label: t8
+		};
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t) {
+		t10 = t("traffic.email");
+		$[19] = t;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== t10) {
+		t11 = {
+			key: "email",
+			label: t10
+		};
+		$[21] = t10;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== t) {
+		t12 = t("traffic.referral");
+		$[23] = t;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t12) {
+		t13 = {
+			key: "referral",
+			label: t12
+		};
+		$[25] = t12;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== t11 || $[28] !== t13 || $[29] !== t5 || $[30] !== t7 || $[31] !== t9) {
+		t14 = [
+			t5,
+			t7,
+			t9,
+			t11,
+			t13
+		];
+		$[27] = t11;
+		$[28] = t13;
+		$[29] = t5;
+		$[30] = t7;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = { notation: "compact" };
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t0 || $[35] !== t1 || $[36] !== t14 || $[37] !== t3) {
+		t16 = /* @__PURE__ */ jsx(StreamGraph, {
+			caption: t0,
+			categoryKey: "week",
+			data: WEEKS,
+			label: t1,
+			labelOptions: t2,
+			legendLabel: t3,
+			series: t14,
+			valueOptions: t15
+		});
+		$[34] = t0;
+		$[35] = t1;
+		$[36] = t14;
+		$[37] = t3;
+		$[38] = t16;
+	} else t16 = $[38];
+	return t16;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { StreamGraph } from \"@stealthscale/component-charts\";\n\nconst WEEKS = [\n  [42, 18, 4, 0, 6],\n  [43, 18, 5, 0, 7],\n  [45, 19, 5, 0, 6],\n  [44, 19, 6, 1, 7],\n  [46, 20, 12, 1, 7],\n  [47, 19, 26, 2, 8],\n  [48, 20, 38, 3, 7],\n  [47, 21, 31, 5, 8],\n  [49, 21, 19, 8, 8],\n  [50, 20, 11, 11, 9],\n  [51, 21, 8, 14, 8],\n  [52, 22, 7, 16, 9],\n  [51, 22, 6, 18, 9],\n  [53, 23, 6, 19, 10],\n  [54, 22, 5, 21, 9],\n  [55, 23, 5, 22, 10],\n].map(([organic = 0, direct = 0, social = 0, email = 0, referral = 0], index) => ({\n  direct: direct * 1000,\n  email: email * 1000,\n  organic: organic * 1000,\n  referral: referral * 1000,\n  social: social * 1000,\n  week: new Date(Date.UTC(2026, 5, 8 + index * 7)).toISOString().slice(0, 10),\n}));\n\nexport function Traffic(): ReactElement {\n  const { t } = useWords(\"stream-graph\");\n\n  return (\n    <StreamGraph\n      caption={t(\"traffic.caption\")}\n      categoryKey=\"week\"\n      data={WEEKS}\n      label={t(\"traffic.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      legendLabel={t(\"traffic.sources\")}\n      series={[\n        { key: \"organic\", label: t(\"traffic.organic\") },\n        { key: \"direct\", label: t(\"traffic.direct\") },\n        { key: \"social\", label: t(\"traffic.social\") },\n        { key: \"email\", label: t(\"traffic.email\") },\n        { key: \"referral\", label: t(\"traffic.referral\") },\n      ]}\n      valueOptions={{ notation: \"compact\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/stream-graph/stream-graph.specimen.tsx
+/**
+* Catalogue page for the stream graph.
+*
+* @remarks
+*   The stream graph has no recipe of its own: the chart's recipe styles its figure, so every scene
+*   is hand-written. The scenes render traffic sources stacked inside out, listening by genre on a
+*   centred baseline, the sources in the series' order, the tooltip open at a campaign's peak, the
+*   bands animated in with a replay, the traffic at a phone's width, and a range without rows.
+*   Every scene renders a component from `examples/` and shows that file as its source. The words
+*   are keys under `stream-graph` in `locales/en/specimen/stream-graph.json`.
+*/
+/**
+* Hand-written scene for series stacked inside out.
+*/
+const insideOut = {
+	about: "stream-graph.traffic.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Traffic, {})
+	}),
+	example: traffic_example_exports,
+	title: "stream-graph.traffic.title"
+};
+/**
+* Hand-written scene for a stack centred on a straight line.
+*/
+const centred = {
+	about: "stream-graph.listening.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Listening, {})
+	}),
+	example: listening_example_exports,
+	title: "stream-graph.listening.title"
+};
+/**
+* Hand-written scene for series stacked in their order.
+*/
+const order = {
+	about: "stream-graph.ordered.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Ordered, {})
+	}),
+	example: ordered_example_exports,
+	title: "stream-graph.ordered.title"
+};
+/**
+* Hand-written scene for the tooltip open at a row.
+*/
+const tooltip = {
+	about: "stream-graph.campaign.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Campaign, {})
+	}),
+	example: campaign_example_exports,
+	title: "stream-graph.campaign.title"
+};
+/**
+* Hand-written scene for the bands animated in, with a replay.
+*/
+const animated = {
+	about: "stream-graph.replay.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Replay, {})
+	}),
+	example: replay_example_exports,
+	title: "stream-graph.replay.title"
+};
+/**
+* Hand-written scene for the traffic at a phone's width.
+*/
+const narrow = {
+	about: "stream-graph.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Traffic, {})
+	}),
+	example: traffic_example_exports,
+	title: "stream-graph.narrow.title"
+};
+/**
+* Hand-written scene for a range without rows.
+*/
+const empty = {
+	about: "stream-graph.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "stream-graph.quiet.title"
+};
+var stream_graph_specimen_default = specimen({
+	about: "stream-graph.about",
+	id: "components/charts/stream-graph",
+	imports: "import { StreamGraph } from \"@stealthscale/component-charts\";",
+	scenes: [
+		insideOut,
+		centred,
+		order,
+		tooltip,
+		animated,
+		narrow,
+		empty
+	],
+	title: "stream-graph.title"
+});
+//#endregion
+export { animated, centred, stream_graph_specimen_default as default, empty, insideOut, narrow, order, tooltip };