@stealthscale/component-charts 0.2.1 → 0.2.3

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

@@ -0,0 +1,700 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { b as SankeyChart, it as sankeyCycles, rt as flowBalance } from "../../shared-DVZJ2nST.js";
+import { a as LOOPED, c as VISITORS, i as LINES, l as named, n as INCOME, o as QUEUE, r as LEAKY, s as STEPS, t as CHECKOUT } from "../visitors-oFFVcbIZ.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+//#region src/sankey-chart/examples/income.example.tsx
+var income_example_exports = /* @__PURE__ */ __exportAll({
+	Income: () => Income,
+	source: () => source$6
+});
+function Income() {
+	const $ = c(23);
+	const { t } = useWords("sankey-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("income.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("in");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("income.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = named(LINES, (key) => t(`names.${key}`));
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("out");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("share");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("income.value");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = {
+			currency: "EUR",
+			maximumFractionDigits: 1,
+			notation: "compact",
+			style: "currency"
+		};
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t0 || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6) {
+		t8 = /* @__PURE__ */ jsx(SankeyChart, {
+			caption: t0,
+			flows: INCOME,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4,
+			shareLabel: t5,
+			valueLabel: t6,
+			valueOptions: t7
+		});
+		$[15] = t0;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t8;
+	} else t8 = $[22];
+	return t8;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart } from \"@stealthscale/component-charts\";\n\nimport { INCOME, LINES, named } from \"./visitors.ts\";\n\nexport function Income(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n\n  return (\n    <SankeyChart\n      caption={t(\"income.caption\")}\n      flows={INCOME}\n      inflowLabel={t(\"in\")}\n      label={t(\"income.label\")}\n      nodes={named(LINES, (key) => t(`names.${key}`))}\n      outflowLabel={t(\"out\")}\n      shareLabel={t(\"share\")}\n      valueLabel={t(\"income.value\")}\n      valueOptions={{\n        currency: \"EUR\",\n        maximumFractionDigits: 1,\n        notation: \"compact\",\n        style: \"currency\",\n      }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/examples/leak.example.tsx
+var leak_example_exports = /* @__PURE__ */ __exportAll({
+	Leak: () => Leak,
+	source: () => source$5
+});
+function Leak() {
+	const $ = c(24);
+	const { t } = useWords("sankey-chart");
+	let nodes;
+	let t0;
+	if ($[0] !== t) {
+		nodes = named(QUEUE, (key) => t(`names.${key}`));
+		t0 = flowBalance(nodes, LEAKY).find(_temp$1);
+		$[0] = t;
+		$[1] = nodes;
+		$[2] = t0;
+	} else {
+		nodes = $[1];
+		t0 = $[2];
+	}
+	const leak = t0;
+	let t1;
+	if ($[3] !== leak || $[4] !== t) {
+		t1 = leak && t("leak.caption", {
+			lost: leak.inflow - leak.outflow,
+			name: t(`names.${leak.key}`)
+		});
+		$[3] = leak;
+		$[4] = t;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== t) {
+		t2 = t("in");
+		$[6] = t;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t) {
+		t3 = t("leak.label");
+		$[8] = t;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t) {
+		t4 = t("out");
+		$[10] = t;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t) {
+		t5 = t("share");
+		$[12] = t;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== t) {
+		t6 = t("leak.value");
+		$[14] = t;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] !== nodes || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SankeyChart, {
+			caption: t1,
+			flows: LEAKY,
+			inflowLabel: t2,
+			label: t3,
+			nodes,
+			outflowLabel: t4,
+			shareLabel: t5,
+			valueLabel: t6
+		});
+		$[16] = nodes;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+}
+function _temp$1(node) {
+	return node.outflow > 0 && node.inflow > node.outflow;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart, flowBalance } from \"@stealthscale/component-charts\";\n\nimport { LEAKY, named, QUEUE } from \"./visitors.ts\";\n\nexport function Leak(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n  const nodes = named(QUEUE, (key) => t(`names.${key}`));\n  const leak = flowBalance(nodes, LEAKY).find(\n    (node) => node.outflow > 0 && node.inflow > node.outflow,\n  );\n\n  return (\n    <SankeyChart\n      caption={\n        leak &&\n        t(\"leak.caption\", { lost: leak.inflow - leak.outflow, name: t(`names.${leak.key}`) })\n      }\n      flows={LEAKY}\n      inflowLabel={t(\"in\")}\n      label={t(\"leak.label\")}\n      nodes={nodes}\n      outflowLabel={t(\"out\")}\n      shareLabel={t(\"share\")}\n      valueLabel={t(\"leak.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/examples/loop.example.tsx
+var loop_example_exports = /* @__PURE__ */ __exportAll({
+	Loop: () => Loop,
+	source: () => source$4
+});
+function Loop() {
+	const $ = c(24);
+	const { t } = useWords("sankey-chart");
+	let T0;
+	let t0;
+	if ($[0] !== t) {
+		const cycles = sankeyCycles(LOOPED);
+		T0 = SankeyChart;
+		t0 = t("loop.caption", {
+			count: cycles.length,
+			names: cycles.map((flow) => t("loop.flow", {
+				from: t(`names.${flow.from}`),
+				to: t(`names.${flow.to}`)
+			})).join(", ")
+		});
+		$[0] = t;
+		$[1] = T0;
+		$[2] = t0;
+	} else {
+		T0 = $[1];
+		t0 = $[2];
+	}
+	let t1;
+	if ($[3] !== t) {
+		t1 = t("in");
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== t) {
+		t2 = t("loop.label");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = named(CHECKOUT, (key) => t(`names.${key}`));
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t) {
+		t4 = t("out");
+		$[9] = t;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("share");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t) {
+		t6 = t("loop.value");
+		$[13] = t;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== T0 || $[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			flows: LOOPED,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4,
+			shareLabel: t5,
+			valueLabel: t6
+		});
+		$[15] = T0;
+		$[16] = t0;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart, sankeyCycles } from \"@stealthscale/component-charts\";\n\nimport { CHECKOUT, LOOPED, named } from \"./visitors.ts\";\n\nexport function Loop(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n  const cycles = sankeyCycles(LOOPED);\n\n  return (\n    <SankeyChart\n      caption={t(\"loop.caption\", {\n        count: cycles.length,\n        names: cycles\n          .map((flow) =>\n            t(\"loop.flow\", { from: t(`names.${flow.from}`), to: t(`names.${flow.to}`) }),\n          )\n          .join(\", \"),\n      })}\n      flows={LOOPED}\n      inflowLabel={t(\"in\")}\n      label={t(\"loop.label\")}\n      nodes={named(CHECKOUT, (key) => t(`names.${key}`))}\n      outflowLabel={t(\"out\")}\n      shareLabel={t(\"share\")}\n      valueLabel={t(\"loop.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/examples/palette.example.tsx
+var palette_example_exports = /* @__PURE__ */ __exportAll({
+	Palette: () => Palette,
+	source: () => source$3
+});
+function Palette() {
+	const $ = c(22);
+	const { t } = useWords("sankey-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("palette.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("in");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("visitors.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = named(STEPS, (key) => t(`names.${key}`), {
+			email: "pink",
+			organic: "teal",
+			paid: "purple",
+			social: "orange"
+		});
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("out");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("share");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("visitors.value");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t0 || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SankeyChart, {
+			caption: t0,
+			flows: VISITORS,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4,
+			shareLabel: t5,
+			valueLabel: t6,
+			values: false
+		});
+		$[14] = t0;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart } from \"@stealthscale/component-charts\";\n\nimport { named, STEPS, VISITORS } from \"./visitors.ts\";\n\nexport function Palette(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n\n  return (\n    <SankeyChart\n      caption={t(\"palette.caption\")}\n      flows={VISITORS}\n      inflowLabel={t(\"in\")}\n      label={t(\"visitors.label\")}\n      nodes={named(STEPS, (key) => t(`names.${key}`), {\n        email: \"pink\",\n        organic: \"teal\",\n        paid: \"purple\",\n        social: \"orange\",\n      })}\n      outflowLabel={t(\"out\")}\n      shareLabel={t(\"share\")}\n      valueLabel={t(\"visitors.value\")}\n      values={false}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$2
+});
+function Quiet() {
+	const $ = c(12);
+	const { t } = useWords("sankey-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] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [];
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("visitors.label");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = [];
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t0 || $[9] !== t1 || $[10] !== t3) {
+		t5 = /* @__PURE__ */ jsx(SankeyChart, {
+			caption: t0,
+			empty: t1,
+			flows: t2,
+			label: t3,
+			nodes: t4
+		});
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t3;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart } from \"@stealthscale/component-charts\";\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n\n  return (\n    <SankeyChart\n      caption={t(\"quiet.caption\")}\n      empty={t(\"quiet.empty\")}\n      flows={[]}\n      label={t(\"visitors.label\")}\n      nodes={[]}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/examples/signups.example.tsx
+var signups_example_exports = /* @__PURE__ */ __exportAll({
+	Signups: () => Signups,
+	source: () => source$1
+});
+function Signups() {
+	const $ = c(22);
+	const { t } = useWords("sankey-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("signups.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("in");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("visitors.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = named(STEPS, (key) => t(`names.${key}`));
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("out");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("share");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("visitors.value");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t0 || $[15] !== t1 || $[16] !== t2 || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsx(SankeyChart, {
+			caption: t0,
+			defaultIndex: 1,
+			flows: VISITORS,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4,
+			shareLabel: t5,
+			valueLabel: t6
+		});
+		$[14] = t0;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart } from \"@stealthscale/component-charts\";\n\nimport { named, STEPS, VISITORS } from \"./visitors.ts\";\n\nexport function Signups(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n\n  return (\n    <SankeyChart\n      caption={t(\"signups.caption\")}\n      defaultIndex={1}\n      flows={VISITORS}\n      inflowLabel={t(\"in\")}\n      label={t(\"visitors.label\")}\n      nodes={named(STEPS, (key) => t(`names.${key}`))}\n      outflowLabel={t(\"out\")}\n      shareLabel={t(\"share\")}\n      valueLabel={t(\"visitors.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/examples/visitors.example.tsx
+var visitors_example_exports = /* @__PURE__ */ __exportAll({
+	Visitors: () => Visitors,
+	source: () => source
+});
+function Visitors() {
+	const $ = c(23);
+	const { t } = useWords("sankey-chart");
+	let T0;
+	let nodes;
+	let t0;
+	if ($[0] !== t) {
+		nodes = named(STEPS, (key) => t(`names.${key}`));
+		const balance = flowBalance(nodes, VISITORS);
+		const into = (key_0) => balance.find((node) => node.key === key_0)?.inflow ?? 0;
+		const visitors = balance.filter(_temp).reduce(_temp2, 0);
+		T0 = SankeyChart;
+		t0 = t("visitors.caption", {
+			signedUp: Math.round(into("signup") / visitors * 100),
+			subscribed: Math.round(into("subscribed") / into("signup") * 100)
+		});
+		$[0] = t;
+		$[1] = T0;
+		$[2] = nodes;
+		$[3] = t0;
+	} else {
+		T0 = $[1];
+		nodes = $[2];
+		t0 = $[3];
+	}
+	let t1;
+	if ($[4] !== t) {
+		t1 = t("in");
+		$[4] = t;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== t) {
+		t2 = t("visitors.label");
+		$[6] = t;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== t) {
+		t3 = t("out");
+		$[8] = t;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t) {
+		t4 = t("share");
+		$[10] = t;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t) {
+		t5 = t("visitors.value");
+		$[12] = t;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== T0 || $[15] !== nodes || $[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			flows: VISITORS,
+			inflowLabel: t1,
+			label: t2,
+			nodes,
+			outflowLabel: t3,
+			shareLabel: t4,
+			valueLabel: t5
+		});
+		$[14] = T0;
+		$[15] = nodes;
+		$[16] = t0;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t3;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	return t6;
+}
+function _temp2(sum, node_1) {
+	return sum + node_1.outflow;
+}
+function _temp(node_0) {
+	return node_0.inflow === 0;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { SankeyChart, flowBalance } from \"@stealthscale/component-charts\";\n\nimport { named, STEPS, VISITORS } from \"./visitors.ts\";\n\nexport function Visitors(): ReactElement {\n  const { t } = useWords(\"sankey-chart\");\n  const nodes = named(STEPS, (key) => t(`names.${key}`));\n  const balance = flowBalance(nodes, VISITORS);\n  const into = (key: string): number => balance.find((node) => node.key === key)?.inflow ?? 0;\n  const visitors = balance\n    .filter((node) => node.inflow === 0)\n    .reduce((sum, node) => sum + node.outflow, 0);\n\n  return (\n    <SankeyChart\n      caption={t(\"visitors.caption\", {\n        signedUp: Math.round((into(\"signup\") / visitors) * 100),\n        subscribed: Math.round((into(\"subscribed\") / into(\"signup\")) * 100),\n      })}\n      flows={VISITORS}\n      inflowLabel={t(\"in\")}\n      label={t(\"visitors.label\")}\n      nodes={nodes}\n      outflowLabel={t(\"out\")}\n      shareLabel={t(\"share\")}\n      valueLabel={t(\"visitors.value\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/sankey-chart/sankey-chart.specimen.tsx
+/**
+* Catalogue page for the sankey chart.
+*
+* @remarks
+*   The sankey chart has no recipe of its own: the chart's recipe styles its figure, so every scene
+*   is hand-written. The scenes render a month's visitors by channel and outcome with two rates in
+*   the caption, the tooltip at a flow, a year's income statement in compact euros, a checkout
+*   whose refunds close a loop, a support queue that loses tickets, the channels in stated palettes
+*   without values, the visitors at a phone's width, and a sankey without flows. Every scene
+*   renders a component from `examples/` and shows that file as its source. The words are keys
+*   under `sankey-chart` in `locales/en/specimen/sankey-chart.json`.
+*/
+/**
+* Hand-written scene for a month's visitors, two rates in the caption.
+*/
+const visited = {
+	about: "sankey-chart.visitors.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Visitors, {})
+	}),
+	example: visitors_example_exports,
+	title: "sankey-chart.visitors.title"
+};
+/**
+* Hand-written scene for the tooltip at a flow.
+*/
+const pointed = {
+	about: "sankey-chart.signups.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Signups, {})
+	}),
+	example: signups_example_exports,
+	title: "sankey-chart.signups.title"
+};
+/**
+* Hand-written scene for a year's income statement in compact euros.
+*/
+const stated = {
+	about: "sankey-chart.income.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Income, {})
+	}),
+	example: income_example_exports,
+	title: "sankey-chart.income.title"
+};
+/**
+* Hand-written scene for a checkout whose refunds close a loop, named in the caption.
+*/
+const looped = {
+	about: "sankey-chart.loop.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Loop, {})
+	}),
+	example: loop_example_exports,
+	title: "sankey-chart.loop.title"
+};
+/**
+* Hand-written scene for a support queue that loses tickets, named in the caption.
+*/
+const leaking = {
+	about: "sankey-chart.leak.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Leak, {})
+	}),
+	example: leak_example_exports,
+	title: "sankey-chart.leak.title"
+};
+/**
+* Hand-written scene for the channels in stated palettes, without values.
+*/
+const tinted = {
+	about: "sankey-chart.palette.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Palette, {})
+	}),
+	example: palette_example_exports,
+	title: "sankey-chart.palette.title"
+};
+/**
+* Hand-written scene for the visitors at a phone's width.
+*/
+const narrow = {
+	about: "sankey-chart.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Visitors, {})
+	}),
+	example: visitors_example_exports,
+	title: "sankey-chart.narrow.title"
+};
+/**
+* Hand-written scene for a sankey without flows.
+*/
+const empty = {
+	about: "sankey-chart.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "sankey-chart.quiet.title"
+};
+var sankey_chart_specimen_default = specimen({
+	about: "sankey-chart.about",
+	id: "components/charts/sankey-chart",
+	imports: "import { SankeyChart } from \"@stealthscale/component-charts\";",
+	scenes: [
+		visited,
+		pointed,
+		stated,
+		looped,
+		leaking,
+		tinted,
+		narrow,
+		empty
+	],
+	title: "sankey-chart.title"
+});
+//#endregion
+export { sankey_chart_specimen_default as default, empty, leaking, looped, narrow, pointed, stated, tinted, visited };