@stealthscale/component-charts 0.2.2 → 0.2.3

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

@@ -0,0 +1,853 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { Mt as colorOf, at as CandlestickChart } from "../../shared-DVZJ2nST.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReferenceLine } from "recharts";
+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/candlestick-chart/examples/acme.ts
+/**
+* Lists the daily prices in dollars of a share, ACME, over the 22 trading days of September 2026,
+* which the candlestick chart's examples share: it opened the month at $156.22 and closed it at
+* $176.03.
+*/
+const ACME = [
+	{
+		close: 154.87,
+		day: "2026-09-01",
+		high: 156.81,
+		low: 153.08,
+		open: 156.22
+	},
+	{
+		close: 155.25,
+		day: "2026-09-02",
+		high: 156.72,
+		low: 153.4,
+		open: 154.6
+	},
+	{
+		close: 158.24,
+		day: "2026-09-03",
+		high: 159.43,
+		low: 153.9,
+		open: 155.19
+	},
+	{
+		close: 159.72,
+		day: "2026-09-04",
+		high: 161.19,
+		low: 155.99,
+		open: 157.93
+	},
+	{
+		close: 161.9,
+		day: "2026-09-07",
+		high: 162.25,
+		low: 159.16,
+		open: 159.31
+	},
+	{
+		close: 160.61,
+		day: "2026-09-08",
+		high: 162.06,
+		low: 158.67,
+		open: 161.6
+	},
+	{
+		close: 160.88,
+		day: "2026-09-09",
+		high: 162.74,
+		low: 159.88,
+		open: 160.37
+	},
+	{
+		close: 165.92,
+		day: "2026-09-10",
+		high: 168.03,
+		low: 160.18,
+		open: 160.45
+	},
+	{
+		close: 165,
+		day: "2026-09-11",
+		high: 165.95,
+		low: 164.31,
+		open: 165.77
+	},
+	{
+		close: 167.78,
+		day: "2026-09-14",
+		high: 168.81,
+		low: 163.8,
+		open: 165.28
+	},
+	{
+		close: 165.28,
+		day: "2026-09-15",
+		high: 168.8,
+		low: 164.39,
+		open: 168.46
+	},
+	{
+		close: 161.79,
+		day: "2026-09-16",
+		high: 166.24,
+		low: 160.3,
+		open: 165.1
+	},
+	{
+		close: 167.15,
+		day: "2026-09-17",
+		high: 167.16,
+		low: 161.48,
+		open: 161.76
+	},
+	{
+		close: 168.02,
+		day: "2026-09-18",
+		high: 168.13,
+		low: 166.04,
+		open: 166.78
+	},
+	{
+		close: 170.25,
+		day: "2026-09-21",
+		high: 171.16,
+		low: 167.04,
+		open: 167.91
+	},
+	{
+		close: 173.2,
+		day: "2026-09-22",
+		high: 173.94,
+		low: 169.91,
+		open: 170.43
+	},
+	{
+		close: 172.07,
+		day: "2026-09-23",
+		high: 173.67,
+		low: 171.87,
+		open: 173.2
+	},
+	{
+		close: 171.96,
+		day: "2026-09-24",
+		high: 173.44,
+		low: 171.4,
+		open: 172.7
+	},
+	{
+		close: 180.02,
+		day: "2026-09-25",
+		high: 181.37,
+		low: 171.51,
+		open: 172.08
+	},
+	{
+		close: 178.14,
+		day: "2026-09-28",
+		high: 181.66,
+		low: 177.91,
+		open: 180.03
+	},
+	{
+		close: 181.08,
+		day: "2026-09-29",
+		high: 181.55,
+		low: 177.44,
+		open: 178.49
+	},
+	{
+		close: 176.03,
+		day: "2026-09-30",
+		high: 182.42,
+		low: 176.03,
+		open: 181.19
+	}
+];
+//#endregion
+//#region src/candlestick-chart/examples/busiest.example.tsx
+var busiest_example_exports = /* @__PURE__ */ __exportAll({
+	Busiest: () => Busiest,
+	source: () => source$5
+});
+function Busiest() {
+	const $ = c(9);
+	const { t } = useWords("candlestick-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("busiest.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("daily.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		t3 = {
+			currency: "USD",
+			style: "currency"
+		};
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== t0 || $[7] !== t1) {
+		t4 = /* @__PURE__ */ jsx(CandlestickChart, {
+			caption: t0,
+			categoryKey: "day",
+			data: ACME,
+			defaultIndex: 18,
+			label: t1,
+			labelOptions: t2,
+			valueOptions: t3
+		});
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { CandlestickChart } from \"@stealthscale/component-charts\";\n\nimport { ACME } from \"./acme.ts\";\n\nexport function Busiest(): ReactElement {\n  const { t } = useWords(\"candlestick-chart\");\n\n  return (\n    <CandlestickChart\n      caption={t(\"busiest.caption\")}\n      categoryKey=\"day\"\n      data={ACME}\n      defaultIndex={18}\n      label={t(\"daily.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      valueOptions={{ currency: \"USD\", style: \"currency\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/candlestick-chart/examples/daily.example.tsx
+var daily_example_exports = /* @__PURE__ */ __exportAll({
+	Daily: () => Daily,
+	source: () => source$4
+});
+function Daily() {
+	const $ = c(9);
+	const { t } = useWords("candlestick-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("daily.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("daily.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		t3 = {
+			currency: "USD",
+			style: "currency"
+		};
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== t0 || $[7] !== t1) {
+		t4 = /* @__PURE__ */ jsx(CandlestickChart, {
+			caption: t0,
+			categoryKey: "day",
+			data: ACME,
+			label: t1,
+			labelOptions: t2,
+			valueOptions: t3
+		});
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { CandlestickChart } from \"@stealthscale/component-charts\";\n\nimport { ACME } from \"./acme.ts\";\n\nexport function Daily(): ReactElement {\n  const { t } = useWords(\"candlestick-chart\");\n\n  return (\n    <CandlestickChart\n      caption={t(\"daily.caption\")}\n      categoryKey=\"day\"\n      data={ACME}\n      label={t(\"daily.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      valueOptions={{ currency: \"USD\", style: \"currency\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/candlestick-chart/examples/opening.example.tsx
+var opening_example_exports = /* @__PURE__ */ __exportAll({
+	Opening: () => Opening,
+	source: () => source$3
+});
+function Opening() {
+	const $ = c(17);
+	const { t } = useWords("candlestick-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("opening.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("daily.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		t3 = {
+			currency: "USD",
+			style: "currency"
+		};
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== t) {
+		t4 = t("opening.open");
+		$[6] = t;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t4) {
+		t5 = {
+			position: "insideTopRight",
+			value: t4
+		};
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = colorOf("neutral");
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== t5) {
+		t7 = /* @__PURE__ */ jsx(ReferenceLine, {
+			label: t5,
+			stroke: t6,
+			strokeDasharray: "6 4",
+			y: 156.22
+		});
+		$[11] = t5;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t0 || $[14] !== t1 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(CandlestickChart, {
+			caption: t0,
+			categoryKey: "day",
+			data: ACME,
+			label: t1,
+			labelOptions: t2,
+			valueOptions: t3,
+			children: t7
+		});
+		$[13] = t0;
+		$[14] = t1;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { ReferenceLine } from \"recharts\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { CandlestickChart, Chart } from \"@stealthscale/component-charts\";\n\nimport { ACME } from \"./acme.ts\";\n\nexport function Opening(): ReactElement {\n  const { t } = useWords(\"candlestick-chart\");\n\n  return (\n    <CandlestickChart\n      caption={t(\"opening.caption\")}\n      categoryKey=\"day\"\n      data={ACME}\n      label={t(\"daily.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      valueOptions={{ currency: \"USD\", style: \"currency\" }}\n    >\n      <ReferenceLine\n        label={{ position: \"insideTopRight\", value: t(\"opening.open\") }}\n        stroke={Chart.colorOf(\"neutral\")}\n        strokeDasharray=\"6 4\"\n        y={156.22}\n      />\n    </CandlestickChart>\n  );\n}\n";
+//#endregion
+//#region src/candlestick-chart/examples/euro.ts
+/**
+* Lists the daily rates of the euro in dollars over the 22 trading days of September 2026, which
+* the candlestick chart's examples share: the rate opened the month at 1.0917, closed it at 1.1059,
+* and closed September 14 where it opened.
+*/
+const EURO = [
+	{
+		close: 1.0921,
+		day: "2026-09-01",
+		high: 1.0922,
+		low: 1.091,
+		open: 1.0917
+	},
+	{
+		close: 1.0948,
+		day: "2026-09-02",
+		high: 1.0948,
+		low: 1.0913,
+		open: 1.0918
+	},
+	{
+		close: 1.0905,
+		day: "2026-09-03",
+		high: 1.0945,
+		low: 1.0883,
+		open: 1.0937
+	},
+	{
+		close: 1.0914,
+		day: "2026-09-04",
+		high: 1.0929,
+		low: 1.0906,
+		open: 1.0915
+	},
+	{
+		close: 1.0814,
+		day: "2026-09-07",
+		high: 1.087,
+		low: 1.0803,
+		open: 1.086
+	},
+	{
+		close: 1.0839,
+		day: "2026-09-08",
+		high: 1.0858,
+		low: 1.083,
+		open: 1.0845
+	},
+	{
+		close: 1.0838,
+		day: "2026-09-09",
+		high: 1.0857,
+		low: 1.0823,
+		open: 1.083
+	},
+	{
+		close: 1.0832,
+		day: "2026-09-10",
+		high: 1.0859,
+		low: 1.0826,
+		open: 1.0852
+	},
+	{
+		close: 1.0811,
+		day: "2026-09-11",
+		high: 1.0824,
+		low: 1.0796,
+		open: 1.0803
+	},
+	{
+		close: 1.0799,
+		day: "2026-09-14",
+		high: 1.0803,
+		low: 1.0799,
+		open: 1.0799
+	},
+	{
+		close: 1.0832,
+		day: "2026-09-15",
+		high: 1.0844,
+		low: 1.0781,
+		open: 1.0795
+	},
+	{
+		close: 1.0884,
+		day: "2026-09-16",
+		high: 1.0892,
+		low: 1.0872,
+		open: 1.0883
+	},
+	{
+		close: 1.088,
+		day: "2026-09-17",
+		high: 1.0907,
+		low: 1.084,
+		open: 1.0869
+	},
+	{
+		close: 1.0865,
+		day: "2026-09-18",
+		high: 1.0903,
+		low: 1.0854,
+		open: 1.0899
+	},
+	{
+		close: 1.0932,
+		day: "2026-09-21",
+		high: 1.0942,
+		low: 1.0908,
+		open: 1.0922
+	},
+	{
+		close: 1.0888,
+		day: "2026-09-22",
+		high: 1.092,
+		low: 1.0883,
+		open: 1.0918
+	},
+	{
+		close: 1.0932,
+		day: "2026-09-23",
+		high: 1.0938,
+		low: 1.0903,
+		open: 1.0914
+	},
+	{
+		close: 1.0941,
+		day: "2026-09-24",
+		high: 1.0942,
+		low: 1.0916,
+		open: 1.0929
+	},
+	{
+		close: 1.0966,
+		day: "2026-09-25",
+		high: 1.0976,
+		low: 1.0929,
+		open: 1.0938
+	},
+	{
+		close: 1.0984,
+		day: "2026-09-28",
+		high: 1.1014,
+		low: 1.0957,
+		open: 1.0981
+	},
+	{
+		close: 1.1056,
+		day: "2026-09-29",
+		high: 1.108,
+		low: 1.0994,
+		open: 1.1009
+	},
+	{
+		close: 1.1059,
+		day: "2026-09-30",
+		high: 1.1068,
+		low: 1.1033,
+		open: 1.1064
+	}
+];
+//#endregion
+//#region src/candlestick-chart/examples/pair.example.tsx
+var pair_example_exports = /* @__PURE__ */ __exportAll({
+	Pair: () => Pair,
+	source: () => source$2
+});
+function Pair() {
+	const $ = c(9);
+	const { t } = useWords("candlestick-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("pair.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("pair.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		t3 = {
+			maximumFractionDigits: 4,
+			minimumFractionDigits: 4
+		};
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== t0 || $[7] !== t1) {
+		t4 = /* @__PURE__ */ jsx(CandlestickChart, {
+			caption: t0,
+			categoryKey: "day",
+			data: EURO,
+			label: t1,
+			labelOptions: t2,
+			valueOptions: t3
+		});
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { CandlestickChart } from \"@stealthscale/component-charts\";\n\nimport { EURO } from \"./euro.ts\";\n\nexport function Pair(): ReactElement {\n  const { t } = useWords(\"candlestick-chart\");\n\n  return (\n    <CandlestickChart\n      caption={t(\"pair.caption\")}\n      categoryKey=\"day\"\n      data={EURO}\n      label={t(\"pair.label\")}\n      labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n      valueOptions={{ maximumFractionDigits: 4, minimumFractionDigits: 4 }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/candlestick-chart/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$1
+});
+const DAYS = [];
+function Quiet() {
+	const $ = c(10);
+	const { t } = useWords("candlestick-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("daily.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t1 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(CandlestickChart, {
+			caption: t0,
+			categoryKey: "day",
+			data: DAYS,
+			empty: t1,
+			label: t2
+		});
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { CandlestickChart } from \"@stealthscale/component-charts\";\n\nconst DAYS: Array<{ close: number; day: string; high: number; low: number; open: number }> = [];\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"candlestick-chart\");\n\n  return (\n    <CandlestickChart\n      caption={t(\"quiet.caption\")}\n      categoryKey=\"day\"\n      data={DAYS}\n      empty={t(\"quiet.empty\")}\n      label={t(\"daily.label\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/candlestick-chart/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source
+});
+function Replay() {
+	const $ = c(21);
+	const { t } = useWords("candlestick-chart");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("daily.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("daily.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			day: "numeric",
+			month: "short",
+			timeZone: "UTC"
+		};
+		t3 = {
+			currency: "USD",
+			style: "currency"
+		};
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== run || $[7] !== t0 || $[8] !== t1) {
+		t4 = /* @__PURE__ */ jsx(CandlestickChart, {
+			animate: true,
+			caption: t0,
+			categoryKey: "day",
+			data: ACME,
+			label: t1,
+			labelOptions: t2,
+			valueOptions: t3
+		}, run);
+		$[6] = run;
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== run) {
+		t5 = () => {
+			setRun(run + 1);
+		};
+		$[10] = run;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("replay.replay");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== t5 || $[16] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t5,
+			size: "sm",
+			variant: "outline",
+			children: [t6, t7]
+		});
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t4 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t4, t8]
+		});
+		$[18] = t4;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+const source = "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 { CandlestickChart } from \"@stealthscale/component-charts\";\n\nimport { ACME } from \"./acme.ts\";\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"candlestick-chart\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack align=\"flex-start\">\n      <CandlestickChart\n        animate\n        caption={t(\"daily.caption\")}\n        categoryKey=\"day\"\n        data={ACME}\n        key={run}\n        label={t(\"daily.label\")}\n        labelOptions={{ day: \"numeric\", month: \"short\", timeZone: \"UTC\" }}\n        valueOptions={{ currency: \"USD\", style: \"currency\" }}\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/candlestick-chart/candlestick-chart.specimen.tsx
+/**
+* Catalogue page for the candlestick chart.
+*
+* @remarks
+*   The candlestick 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 of a share's daily prices, the tooltip open at
+*   its largest day, a currency pair to four decimals with a flat day, a dashed line at the month's
+*   opening price, the candles animated in with a replay, the month at a phone's width, and a
+*   candlestick chart without prices. Every scene renders a component from `examples/` and shows
+*   that file as its source. The words are keys under `candlestick-chart` in
+*   `locales/en/specimen/candlestick-chart.json`.
+*/
+/**
+* Hand-written scene for a month of a share's daily prices.
+*/
+const automatic = {
+	about: "candlestick-chart.daily.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Daily, {})
+	}),
+	example: daily_example_exports,
+	title: "candlestick-chart.daily.title"
+};
+/**
+* Hand-written scene for the tooltip open at a day.
+*/
+const tooltip = {
+	about: "candlestick-chart.busiest.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Busiest, {})
+	}),
+	example: busiest_example_exports,
+	title: "candlestick-chart.busiest.title"
+};
+/**
+* Hand-written scene for a currency pair with a flat day.
+*/
+const decimals = {
+	about: "candlestick-chart.pair.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Pair, {})
+	}),
+	example: pair_example_exports,
+	title: "candlestick-chart.pair.title"
+};
+/**
+* Hand-written scene for a reference line at the month's opening price.
+*/
+const referenced = {
+	about: "candlestick-chart.opening.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Opening, {})
+	}),
+	example: opening_example_exports,
+	title: "candlestick-chart.opening.title"
+};
+/**
+* Hand-written scene for the candles animated in, with a replay.
+*/
+const animated = {
+	about: "candlestick-chart.replay.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Replay, {})
+	}),
+	example: replay_example_exports,
+	title: "candlestick-chart.replay.title"
+};
+/**
+* Hand-written scene for the month at a phone's width.
+*/
+const narrow = {
+	about: "candlestick-chart.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Daily, {})
+	}),
+	example: daily_example_exports,
+	title: "candlestick-chart.narrow.title"
+};
+/**
+* Hand-written scene for a candlestick chart without prices.
+*/
+const empty = {
+	about: "candlestick-chart.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "candlestick-chart.quiet.title"
+};
+var candlestick_chart_specimen_default = specimen({
+	about: "candlestick-chart.about",
+	id: "components/charts/candlestick-chart",
+	imports: "import { candleChange, candleDirection, CandlestickChart } from \"@stealthscale/component-charts\";",
+	scenes: [
+		automatic,
+		tooltip,
+		decimals,
+		referenced,
+		animated,
+		narrow,
+		empty
+	],
+	title: "candlestick-chart.title"
+});
+//#endregion
+export { animated, automatic, decimals, candlestick_chart_specimen_default as default, empty, narrow, referenced, tooltip };