@stealthscale/component-charts 0.2.1 → 0.2.3

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

@@ -0,0 +1,1066 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { K as DistributionChart } 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/distribution-chart/examples/deliveries.ts
+/**
+* Lists the delivery times in days of a shop's orders in two regions, which the distribution
+* chart's examples share: North's 90 deliveries take 1.2 to 7.4 days, South's 70 take 2.1 to 8.2.
+*/
+/**
+* Lists North's delivery times in days.
+*/
+const NORTH$1 = [
+	1.2,
+	2.4,
+	3.6,
+	2.1,
+	3,
+	1.6,
+	2.6,
+	3.9,
+	2.2,
+	3.1,
+	1.8,
+	2.7,
+	4.6,
+	2.3,
+	3.3,
+	1.9,
+	2.8,
+	7.4,
+	2.4,
+	3.6,
+	2.1,
+	2.9,
+	1.5,
+	2.5,
+	3.9,
+	2.2,
+	3.1,
+	1.7,
+	2.7,
+	4.4,
+	2.3,
+	3.3,
+	1.9,
+	2.8,
+	6.8,
+	2.4,
+	3.5,
+	2,
+	2.9,
+	1.5,
+	2.5,
+	3.8,
+	2.2,
+	3.1,
+	1.7,
+	2.6,
+	4.2,
+	2.3,
+	3.2,
+	1.9,
+	2.8,
+	5.8,
+	2.4,
+	3.5,
+	2,
+	2.9,
+	1.4,
+	2.5,
+	3.7,
+	2.1,
+	3,
+	1.7,
+	2.6,
+	4.1,
+	2.2,
+	3.2,
+	1.8,
+	2.7,
+	5.1,
+	2.4,
+	3.4,
+	2,
+	2.9,
+	1.3,
+	2.5,
+	3.7,
+	2.1,
+	3,
+	1.6,
+	2.6,
+	4,
+	2.2,
+	3.2,
+	1.8,
+	2.7,
+	4.8,
+	2.3,
+	3.4,
+	2,
+	2.8
+];
+/**
+* Lists South's delivery times in days.
+*/
+const SOUTH$1 = [
+	2.1,
+	4.2,
+	2.7,
+	4.4,
+	3,
+	4.6,
+	3.2,
+	4.8,
+	3.4,
+	5.1,
+	3.5,
+	5.4,
+	3.7,
+	5.8,
+	3.9,
+	6.5,
+	4,
+	8.2,
+	4.2,
+	2.6,
+	4.4,
+	2.9,
+	4.5,
+	3.1,
+	4.8,
+	3.3,
+	5,
+	3.5,
+	5.3,
+	3.7,
+	5.7,
+	3.8,
+	6.3,
+	4,
+	8.1,
+	4.1,
+	2.5,
+	4.3,
+	2.8,
+	4.5,
+	3.1,
+	4.7,
+	3.3,
+	4.9,
+	3.4,
+	5.2,
+	3.6,
+	5.6,
+	3.8,
+	6.1,
+	3.9,
+	7.2,
+	4.1,
+	2.3,
+	4.3,
+	2.8,
+	4.5,
+	3,
+	4.7,
+	3.2,
+	4.9,
+	3.4,
+	5.1,
+	3.6,
+	5.5,
+	3.7,
+	5.9,
+	3.9,
+	6.8,
+	4.1
+];
+//#endregion
+//#region src/distribution-chart/examples/busiest.example.tsx
+var busiest_example_exports = /* @__PURE__ */ __exportAll({
+	Busiest: () => Busiest,
+	source: () => source$5
+});
+function Busiest() {
+	const $ = c(23);
+	const { t } = useWords("distribution-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("busiest.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("regions.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("regions.regions");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("regions.north");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "north",
+			label: t3,
+			values: NORTH$1
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("regions.south");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "south",
+			label: t5,
+			values: SOUTH$1
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t4 || $[15] !== t6) {
+		t7 = [t4, t6];
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			style: "unit",
+			unit: "day",
+			unitDisplay: "narrow"
+		};
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t0 || $[19] !== t1 || $[20] !== t2 || $[21] !== t7) {
+		t9 = /* @__PURE__ */ jsx(DistributionChart, {
+			caption: t0,
+			defaultIndex: 2,
+			label: t1,
+			legendLabel: t2,
+			series: t7,
+			valueOptions: t8
+		});
+		$[18] = t0;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t7;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DistributionChart } from \"@stealthscale/component-charts\";\n\nimport { NORTH, SOUTH } from \"./deliveries.ts\";\n\nexport function Busiest(): ReactElement {\n  const { t } = useWords(\"distribution-chart\");\n\n  return (\n    <DistributionChart\n      caption={t(\"busiest.caption\")}\n      defaultIndex={2}\n      label={t(\"regions.label\")}\n      legendLabel={t(\"regions.regions\")}\n      series={[\n        { key: \"north\", label: t(\"regions.north\"), values: NORTH },\n        { key: \"south\", label: t(\"regions.south\"), values: SOUTH },\n      ]}\n      valueOptions={{ style: \"unit\", unit: \"day\", unitDisplay: \"narrow\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/distribution-chart/examples/hidden.example.tsx
+var hidden_example_exports = /* @__PURE__ */ __exportAll({
+	Hidden: () => Hidden,
+	source: () => source$4
+});
+function Hidden() {
+	const $ = c(24);
+	const { t } = useWords("distribution-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("hidden.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = ["south"];
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("regions.label");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("regions.regions");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("regions.north");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = {
+			key: "north",
+			label: t4,
+			values: NORTH$1
+		};
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("regions.south");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t6) {
+		t7 = {
+			key: "south",
+			label: t6,
+			values: SOUTH$1
+		};
+		$[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] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {
+			style: "unit",
+			unit: "day",
+			unitDisplay: "narrow"
+		};
+		$[18] = t9;
+	} else t9 = $[18];
+	let t10;
+	if ($[19] !== t0 || $[20] !== t2 || $[21] !== t3 || $[22] !== t8) {
+		t10 = /* @__PURE__ */ jsx(DistributionChart, {
+			caption: t0,
+			defaultHiddenKeys: t1,
+			label: t2,
+			legendLabel: t3,
+			series: t8,
+			valueOptions: t9
+		});
+		$[19] = t0;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t8;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DistributionChart } from \"@stealthscale/component-charts\";\n\nimport { NORTH, SOUTH } from \"./deliveries.ts\";\n\nexport function Hidden(): ReactElement {\n  const { t } = useWords(\"distribution-chart\");\n\n  return (\n    <DistributionChart\n      caption={t(\"hidden.caption\")}\n      defaultHiddenKeys={[\"south\"]}\n      label={t(\"regions.label\")}\n      legendLabel={t(\"regions.regions\")}\n      series={[\n        { key: \"north\", label: t(\"regions.north\"), values: NORTH },\n        { key: \"south\", label: t(\"regions.south\"), values: SOUTH },\n      ]}\n      valueOptions={{ style: \"unit\", unit: \"day\", unitDisplay: \"narrow\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/distribution-chart/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$3
+});
+const NORTH = [];
+const SOUTH = [];
+function Quiet() {
+	const $ = c(22);
+	const { t } = useWords("distribution-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("regions.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("regions.north");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "north",
+			label: t3,
+			values: NORTH
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("regions.south");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "south",
+			label: t5,
+			values: SOUTH
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t4 || $[15] !== t6) {
+		t7 = [t4, t6];
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== t0 || $[18] !== t1 || $[19] !== t2 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(DistributionChart, {
+			caption: t0,
+			empty: t1,
+			label: t2,
+			series: t7
+		});
+		$[17] = t0;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DistributionChart } from \"@stealthscale/component-charts\";\n\nconst NORTH: number[] = [];\nconst SOUTH: number[] = [];\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"distribution-chart\");\n\n  return (\n    <DistributionChart\n      caption={t(\"quiet.caption\")}\n      empty={t(\"quiet.empty\")}\n      label={t(\"regions.label\")}\n      series={[\n        { key: \"north\", label: t(\"regions.north\"), values: NORTH },\n        { key: \"south\", label: t(\"regions.south\"), values: SOUTH },\n      ]}\n    />\n  );\n}\n";
+//#endregion
+//#region src/distribution-chart/examples/regions.example.tsx
+var regions_example_exports = /* @__PURE__ */ __exportAll({
+	Regions: () => Regions,
+	source: () => source$2
+});
+function Regions() {
+	const $ = c(23);
+	const { t } = useWords("distribution-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("regions.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("regions.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("regions.regions");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("regions.north");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "north",
+			label: t3,
+			values: NORTH$1
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("regions.south");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "south",
+			label: t5,
+			values: SOUTH$1
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t4 || $[15] !== t6) {
+		t7 = [t4, t6];
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			style: "unit",
+			unit: "day",
+			unitDisplay: "narrow"
+		};
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t0 || $[19] !== t1 || $[20] !== t2 || $[21] !== t7) {
+		t9 = /* @__PURE__ */ jsx(DistributionChart, {
+			caption: t0,
+			label: t1,
+			legendLabel: t2,
+			series: t7,
+			valueOptions: t8
+		});
+		$[18] = t0;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t7;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DistributionChart } from \"@stealthscale/component-charts\";\n\nimport { NORTH, SOUTH } from \"./deliveries.ts\";\n\nexport function Regions(): ReactElement {\n  const { t } = useWords(\"distribution-chart\");\n\n  return (\n    <DistributionChart\n      caption={t(\"regions.caption\")}\n      label={t(\"regions.label\")}\n      legendLabel={t(\"regions.regions\")}\n      series={[\n        { key: \"north\", label: t(\"regions.north\"), values: NORTH },\n        { key: \"south\", label: t(\"regions.south\"), values: SOUTH },\n      ]}\n      valueOptions={{ style: \"unit\", unit: \"day\", unitDisplay: \"narrow\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/distribution-chart/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source$1
+});
+function Replay() {
+	const $ = c(35);
+	const { t } = useWords("distribution-chart");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("regions.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("regions.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("regions.regions");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("regions.north");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "north",
+			label: t3,
+			values: NORTH$1
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("regions.south");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "south",
+			label: t5,
+			values: SOUTH$1
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t4 || $[15] !== t6) {
+		t7 = [t4, t6];
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			style: "unit",
+			unit: "day",
+			unitDisplay: "narrow"
+		};
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== run || $[19] !== t0 || $[20] !== t1 || $[21] !== t2 || $[22] !== t7) {
+		t9 = /* @__PURE__ */ jsx(DistributionChart, {
+			animate: true,
+			caption: t0,
+			label: t1,
+			legendLabel: t2,
+			series: t7,
+			valueOptions: t8
+		}, run);
+		$[18] = run;
+		$[19] = t0;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t7;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== run) {
+		t10 = () => {
+			setRun(run + 1);
+		};
+		$[24] = run;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== t) {
+		t12 = t("replay.replay");
+		$[27] = t;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== t10 || $[30] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t10,
+			size: "sm",
+			variant: "outline",
+			children: [t11, t12]
+		});
+		$[29] = t10;
+		$[30] = t12;
+		$[31] = t13;
+	} else t13 = $[31];
+	let t14;
+	if ($[32] !== t13 || $[33] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t9, t13]
+		});
+		$[32] = t13;
+		$[33] = t9;
+		$[34] = t14;
+	} else t14 = $[34];
+	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 { DistributionChart } from \"@stealthscale/component-charts\";\n\nimport { NORTH, SOUTH } from \"./deliveries.ts\";\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"distribution-chart\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack align=\"flex-start\">\n      <DistributionChart\n        animate\n        caption={t(\"regions.caption\")}\n        key={run}\n        label={t(\"regions.label\")}\n        legendLabel={t(\"regions.regions\")}\n        series={[\n          { key: \"north\", label: t(\"regions.north\"), values: NORTH },\n          { key: \"south\", label: t(\"regions.south\"), values: SOUTH },\n        ]}\n        valueOptions={{ style: \"unit\", unit: \"day\", unitDisplay: \"narrow\" }}\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/distribution-chart/examples/sessions.ts
+/**
+* Lists the session lengths in minutes of an app's users on two plans, which the distribution
+* chart's examples share: 120 sessions on the free plan and 30 on the paid plan.
+*/
+/**
+* Lists the free plan's session lengths in minutes.
+*/
+const FREE = [
+	1,
+	4,
+	7,
+	17,
+	4,
+	7,
+	12,
+	3,
+	6,
+	10,
+	2,
+	5,
+	9,
+	1,
+	4,
+	8,
+	18,
+	4,
+	7,
+	13,
+	3,
+	6,
+	10,
+	3,
+	5,
+	9,
+	2,
+	5,
+	8,
+	19,
+	4,
+	7,
+	13,
+	3,
+	6,
+	11,
+	3,
+	5,
+	9,
+	2,
+	5,
+	8,
+	20,
+	4,
+	7,
+	14,
+	3,
+	6,
+	11,
+	3,
+	5,
+	9,
+	2,
+	5,
+	8,
+	22,
+	4,
+	7,
+	14,
+	3,
+	6,
+	11,
+	3,
+	5,
+	9,
+	2,
+	5,
+	8,
+	26,
+	4,
+	7,
+	14,
+	4,
+	6,
+	11,
+	3,
+	5,
+	9,
+	2,
+	5,
+	8,
+	33,
+	4,
+	7,
+	15,
+	4,
+	6,
+	12,
+	3,
+	6,
+	10,
+	2,
+	5,
+	8,
+	58,
+	4,
+	7,
+	16,
+	4,
+	6,
+	12,
+	3,
+	6,
+	10,
+	2,
+	5,
+	8,
+	72,
+	4,
+	7,
+	16,
+	4,
+	6,
+	12,
+	3,
+	6,
+	10,
+	2,
+	5,
+	9
+];
+/**
+* Lists the paid plan's session lengths in minutes.
+*/
+const PRO = [
+	7,
+	13,
+	17,
+	22,
+	36,
+	11,
+	15,
+	20,
+	29,
+	10,
+	14,
+	19,
+	26,
+	8,
+	13,
+	17,
+	23,
+	44,
+	12,
+	16,
+	21,
+	32,
+	11,
+	15,
+	19,
+	27,
+	9,
+	14,
+	18,
+	24
+];
+//#endregion
+//#region src/distribution-chart/examples/sessions.example.tsx
+var sessions_example_exports = /* @__PURE__ */ __exportAll({
+	Sessions: () => Sessions,
+	source: () => source
+});
+function Sessions() {
+	const $ = c(23);
+	const { t } = useWords("distribution-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("sessions.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("sessions.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("sessions.plans");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("sessions.free");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "free",
+			label: t3,
+			values: FREE
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("sessions.pro");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "pro",
+			label: t5,
+			values: PRO
+		};
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t4 || $[15] !== t6) {
+		t7 = [t4, t6];
+		$[14] = t4;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = {
+			style: "unit",
+			unit: "minute",
+			unitDisplay: "short"
+		};
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t0 || $[19] !== t1 || $[20] !== t2 || $[21] !== t7) {
+		t9 = /* @__PURE__ */ jsx(DistributionChart, {
+			caption: t0,
+			label: t1,
+			legendLabel: t2,
+			normalize: true,
+			series: t7,
+			valueOptions: t8
+		});
+		$[18] = t0;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t7;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DistributionChart } from \"@stealthscale/component-charts\";\n\nimport { FREE, PRO } from \"./sessions.ts\";\n\nexport function Sessions(): ReactElement {\n  const { t } = useWords(\"distribution-chart\");\n\n  return (\n    <DistributionChart\n      caption={t(\"sessions.caption\")}\n      label={t(\"sessions.label\")}\n      legendLabel={t(\"sessions.plans\")}\n      normalize\n      series={[\n        { key: \"free\", label: t(\"sessions.free\"), values: FREE },\n        { key: \"pro\", label: t(\"sessions.pro\"), values: PRO },\n      ]}\n      valueOptions={{ style: \"unit\", unit: \"minute\", unitDisplay: \"short\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/distribution-chart/distribution-chart.specimen.tsx
+/**
+* Catalogue page for the distribution chart.
+*
+* @remarks
+*   The distribution chart has no recipe of its own: the chart's recipe styles its figure, so every
+*   scene is hand-written. The scenes render delivery times of two regions, session lengths of two
+*   plans as shares, the tooltip open at a bin, a series the legend hides at first, the bars
+*   animated in with a replay, the regions at a phone's width, and a chart without values. Every
+*   scene renders a component from `examples/` and shows that file as its source. The words are
+*   keys under `distribution-chart` in `locales/en/specimen/distribution-chart.json`.
+*/
+/**
+* Hand-written scene for two series counted into the same bins.
+*/
+const two = {
+	about: "distribution-chart.regions.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Regions, {})
+	}),
+	example: regions_example_exports,
+	title: "distribution-chart.regions.title"
+};
+/**
+* Hand-written scene for series of different sizes as shares.
+*/
+const shares = {
+	about: "distribution-chart.sessions.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Sessions, {})
+	}),
+	example: sessions_example_exports,
+	title: "distribution-chart.sessions.title"
+};
+/**
+* Hand-written scene for the tooltip open at a bin.
+*/
+const tooltip = {
+	about: "distribution-chart.busiest.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Busiest, {})
+	}),
+	example: busiest_example_exports,
+	title: "distribution-chart.busiest.title"
+};
+/**
+* Hand-written scene for a series the legend hides at first.
+*/
+const hiding = {
+	about: "distribution-chart.hidden.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Hidden, {})
+	}),
+	example: hidden_example_exports,
+	title: "distribution-chart.hidden.title"
+};
+/**
+* Hand-written scene for the bars animated in, with a replay.
+*/
+const animated = {
+	about: "distribution-chart.replay.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Replay, {})
+	}),
+	example: replay_example_exports,
+	title: "distribution-chart.replay.title"
+};
+/**
+* Hand-written scene for the regions at a phone's width.
+*/
+const narrow = {
+	about: "distribution-chart.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Regions, {})
+	}),
+	example: regions_example_exports,
+	title: "distribution-chart.narrow.title"
+};
+/**
+* Hand-written scene for a chart without values.
+*/
+const empty = {
+	about: "distribution-chart.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "distribution-chart.quiet.title"
+};
+var distribution_chart_specimen_default = specimen({
+	about: "distribution-chart.about",
+	id: "components/charts/distribution-chart",
+	imports: "import { DistributionChart } from \"@stealthscale/component-charts\";",
+	scenes: [
+		two,
+		shares,
+		tooltip,
+		hiding,
+		animated,
+		narrow,
+		empty
+	],
+	title: "distribution-chart.title"
+});
+//#endregion
+export { animated, distribution_chart_specimen_default as default, empty, hiding, narrow, shares, tooltip, two };