@stealthscale/component-charts 0.2.1 → 0.2.3

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

@@ -0,0 +1,938 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { dt as BubbleChart } 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/bubble-chart/examples/accounts.example.tsx
+var accounts_example_exports = /* @__PURE__ */ __exportAll({
+	Accounts: () => Accounts,
+	source: () => source$4
+});
+const BUSINESS$1 = [
+	[
+		240,
+		.66,
+		216e3
+	],
+	[
+		200,
+		.43,
+		18e4
+	],
+	[
+		150,
+		.71,
+		135e3
+	],
+	[
+		120,
+		.47,
+		108e3
+	],
+	[
+		85,
+		.62,
+		76500
+	],
+	[
+		60,
+		.54,
+		54e3
+	]
+].map(([seats = 0, active = 0, arr = 0]) => ({
+	active,
+	arr,
+	seats
+}));
+const TEAM$1 = [
+	[
+		30,
+		.69,
+		18e3
+	],
+	[
+		25,
+		.77,
+		15e3
+	],
+	[
+		20,
+		.58,
+		12e3
+	],
+	[
+		15,
+		.81,
+		9e3
+	],
+	[
+		12,
+		.65,
+		7200
+	],
+	[
+		8,
+		.72,
+		4800
+	]
+].map(([seats = 0, active = 0, arr = 0]) => ({
+	active,
+	arr,
+	seats
+}));
+function Accounts() {
+	const $ = c(33);
+	const { t } = useWords("bubble-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("accounts.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("accounts.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("plans");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("accounts.business");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "business",
+			label: t3,
+			points: BUSINESS$1
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("accounts.team");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "team",
+			label: t5,
+			points: TEAM$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] !== t) {
+		t8 = t("accounts.arr");
+		$[17] = t;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {
+			currency: "EUR",
+			notation: "compact",
+			style: "currency"
+		};
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("accounts.seats");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t) {
+		t11 = t("accounts.active");
+		$[22] = t;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = { style: "percent" };
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t0 || $[26] !== t1 || $[27] !== t10 || $[28] !== t11 || $[29] !== t2 || $[30] !== t7 || $[31] !== t8) {
+		t13 = /* @__PURE__ */ jsx(BubbleChart, {
+			caption: t0,
+			label: t1,
+			legendLabel: t2,
+			series: t7,
+			sizeKey: "arr",
+			sizeLabel: t8,
+			sizeOptions: t9,
+			xKey: "seats",
+			xLabel: t10,
+			yKey: "active",
+			yLabel: t11,
+			yOptions: t12
+		});
+		$[25] = t0;
+		$[26] = t1;
+		$[27] = t10;
+		$[28] = t11;
+		$[29] = t2;
+		$[30] = t7;
+		$[31] = t8;
+		$[32] = t13;
+	} else t13 = $[32];
+	return t13;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { BubbleChart } from \"@stealthscale/component-charts\";\n\nconst BUSINESS = [\n  [240, 0.66, 216_000],\n  [200, 0.43, 180_000],\n  [150, 0.71, 135_000],\n  [120, 0.47, 108_000],\n  [85, 0.62, 76_500],\n  [60, 0.54, 54_000],\n].map(([seats = 0, active = 0, arr = 0]) => ({ active, arr, seats }));\n\nconst TEAM = [\n  [30, 0.69, 18_000],\n  [25, 0.77, 15_000],\n  [20, 0.58, 12_000],\n  [15, 0.81, 9000],\n  [12, 0.65, 7200],\n  [8, 0.72, 4800],\n].map(([seats = 0, active = 0, arr = 0]) => ({ active, arr, seats }));\n\nexport function Accounts(): ReactElement {\n  const { t } = useWords(\"bubble-chart\");\n\n  return (\n    <BubbleChart\n      caption={t(\"accounts.caption\")}\n      label={t(\"accounts.label\")}\n      legendLabel={t(\"plans\")}\n      series={[\n        { key: \"business\", label: t(\"accounts.business\"), points: BUSINESS },\n        { key: \"team\", label: t(\"accounts.team\"), points: TEAM },\n      ]}\n      sizeKey=\"arr\"\n      sizeLabel={t(\"accounts.arr\")}\n      sizeOptions={{ currency: \"EUR\", notation: \"compact\", style: \"currency\" }}\n      xKey=\"seats\"\n      xLabel={t(\"accounts.seats\")}\n      yKey=\"active\"\n      yLabel={t(\"accounts.active\")}\n      yOptions={{ style: \"percent\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/bubble-chart/examples/features.example.tsx
+var features_example_exports = /* @__PURE__ */ __exportAll({
+	Features: () => Features,
+	source: () => source$3
+});
+const FEATURES$1 = [
+	[
+		.82,
+		4.1,
+		12400
+	],
+	[
+		.64,
+		3.8,
+		9700
+	],
+	[
+		.51,
+		4.4,
+		7700
+	],
+	[
+		.38,
+		3.2,
+		5800
+	],
+	[
+		.29,
+		4.6,
+		4400
+	],
+	[
+		.21,
+		3.5,
+		3200
+	],
+	[
+		.12,
+		2.9,
+		1800
+	],
+	[
+		.08,
+		4.2,
+		1200
+	]
+].map(([adoption = 0, rating = 0, users = 0]) => ({
+	adoption,
+	rating,
+	users
+}));
+function Features() {
+	const $ = c(25);
+	const { t } = useWords("bubble-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("features.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("features.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("features.features");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = [{
+			key: "features",
+			label: t2,
+			points: FEATURES$1
+		}];
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("features.users");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { notation: "compact" };
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("features.adoption");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { style: "percent" };
+		t8 = [1, 5];
+		$[13] = t7;
+		$[14] = t8;
+	} else {
+		t7 = $[13];
+		t8 = $[14];
+	}
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("features.rating");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = { maximumFractionDigits: 1 };
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t0 || $[19] !== t1 || $[20] !== t3 || $[21] !== t4 || $[22] !== t6 || $[23] !== t9) {
+		t11 = /* @__PURE__ */ jsx(BubbleChart, {
+			caption: t0,
+			label: t1,
+			series: t3,
+			sizeKey: "users",
+			sizeLabel: t4,
+			sizeOptions: t5,
+			xKey: "adoption",
+			xLabel: t6,
+			xOptions: t7,
+			yDomain: t8,
+			yKey: "rating",
+			yLabel: t9,
+			yOptions: t10
+		});
+		$[18] = t0;
+		$[19] = t1;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t6;
+		$[23] = t9;
+		$[24] = t11;
+	} else t11 = $[24];
+	return t11;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { BubbleChart } from \"@stealthscale/component-charts\";\n\nconst FEATURES = [\n  [0.82, 4.1, 12_400],\n  [0.64, 3.8, 9700],\n  [0.51, 4.4, 7700],\n  [0.38, 3.2, 5800],\n  [0.29, 4.6, 4400],\n  [0.21, 3.5, 3200],\n  [0.12, 2.9, 1800],\n  [0.08, 4.2, 1200],\n].map(([adoption = 0, rating = 0, users = 0]) => ({ adoption, rating, users }));\n\nexport function Features(): ReactElement {\n  const { t } = useWords(\"bubble-chart\");\n\n  return (\n    <BubbleChart\n      caption={t(\"features.caption\")}\n      label={t(\"features.label\")}\n      series={[{ key: \"features\", label: t(\"features.features\"), points: FEATURES }]}\n      sizeKey=\"users\"\n      sizeLabel={t(\"features.users\")}\n      sizeOptions={{ notation: \"compact\" }}\n      xKey=\"adoption\"\n      xLabel={t(\"features.adoption\")}\n      xOptions={{ style: \"percent\" }}\n      yDomain={[1, 5]}\n      yKey=\"rating\"\n      yLabel={t(\"features.rating\")}\n      yOptions={{ maximumFractionDigits: 1 }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/bubble-chart/examples/largest.example.tsx
+var largest_example_exports = /* @__PURE__ */ __exportAll({
+	Largest: () => Largest,
+	source: () => source$2
+});
+const BUSINESS = [
+	[
+		240,
+		.66,
+		216e3
+	],
+	[
+		200,
+		.43,
+		18e4
+	],
+	[
+		150,
+		.71,
+		135e3
+	],
+	[
+		120,
+		.47,
+		108e3
+	],
+	[
+		85,
+		.62,
+		76500
+	],
+	[
+		60,
+		.54,
+		54e3
+	]
+].map(([seats = 0, active = 0, arr = 0]) => ({
+	active,
+	arr,
+	seats
+}));
+const TEAM = [
+	[
+		30,
+		.69,
+		18e3
+	],
+	[
+		25,
+		.77,
+		15e3
+	],
+	[
+		20,
+		.58,
+		12e3
+	],
+	[
+		15,
+		.81,
+		9e3
+	],
+	[
+		12,
+		.65,
+		7200
+	],
+	[
+		8,
+		.72,
+		4800
+	]
+].map(([seats = 0, active = 0, arr = 0]) => ({
+	active,
+	arr,
+	seats
+}));
+function Largest() {
+	const $ = c(33);
+	const { t } = useWords("bubble-chart");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("largest.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("accounts.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("plans");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("accounts.business");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = {
+			key: "business",
+			label: t3,
+			points: BUSINESS
+		};
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("accounts.team");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = {
+			key: "team",
+			label: t5,
+			points: TEAM
+		};
+		$[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] !== t) {
+		t8 = t("accounts.arr");
+		$[17] = t;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = {
+			currency: "EUR",
+			notation: "compact",
+			style: "currency"
+		};
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== t) {
+		t10 = t("accounts.seats");
+		$[20] = t;
+		$[21] = t10;
+	} else t10 = $[21];
+	let t11;
+	if ($[22] !== t) {
+		t11 = t("accounts.active");
+		$[22] = t;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = { style: "percent" };
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t0 || $[26] !== t1 || $[27] !== t10 || $[28] !== t11 || $[29] !== t2 || $[30] !== t7 || $[31] !== t8) {
+		t13 = /* @__PURE__ */ jsx(BubbleChart, {
+			caption: t0,
+			defaultIndex: 0,
+			label: t1,
+			legendLabel: t2,
+			series: t7,
+			sizeKey: "arr",
+			sizeLabel: t8,
+			sizeOptions: t9,
+			xKey: "seats",
+			xLabel: t10,
+			yKey: "active",
+			yLabel: t11,
+			yOptions: t12
+		});
+		$[25] = t0;
+		$[26] = t1;
+		$[27] = t10;
+		$[28] = t11;
+		$[29] = t2;
+		$[30] = t7;
+		$[31] = t8;
+		$[32] = t13;
+	} else t13 = $[32];
+	return t13;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { BubbleChart } from \"@stealthscale/component-charts\";\n\nconst BUSINESS = [\n  [240, 0.66, 216_000],\n  [200, 0.43, 180_000],\n  [150, 0.71, 135_000],\n  [120, 0.47, 108_000],\n  [85, 0.62, 76_500],\n  [60, 0.54, 54_000],\n].map(([seats = 0, active = 0, arr = 0]) => ({ active, arr, seats }));\n\nconst TEAM = [\n  [30, 0.69, 18_000],\n  [25, 0.77, 15_000],\n  [20, 0.58, 12_000],\n  [15, 0.81, 9000],\n  [12, 0.65, 7200],\n  [8, 0.72, 4800],\n].map(([seats = 0, active = 0, arr = 0]) => ({ active, arr, seats }));\n\nexport function Largest(): ReactElement {\n  const { t } = useWords(\"bubble-chart\");\n\n  return (\n    <BubbleChart\n      caption={t(\"largest.caption\")}\n      defaultIndex={0}\n      label={t(\"accounts.label\")}\n      legendLabel={t(\"plans\")}\n      series={[\n        { key: \"business\", label: t(\"accounts.business\"), points: BUSINESS },\n        { key: \"team\", label: t(\"accounts.team\"), points: TEAM },\n      ]}\n      sizeKey=\"arr\"\n      sizeLabel={t(\"accounts.arr\")}\n      sizeOptions={{ currency: \"EUR\", notation: \"compact\", style: \"currency\" }}\n      xKey=\"seats\"\n      xLabel={t(\"accounts.seats\")}\n      yKey=\"active\"\n      yLabel={t(\"accounts.active\")}\n      yOptions={{ style: \"percent\" }}\n    />\n  );\n}\n";
+//#endregion
+//#region src/bubble-chart/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$1
+});
+const ACCOUNTS = [];
+function Quiet() {
+	const $ = c(24);
+	const { t } = useWords("bubble-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("accounts.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("quiet.accounts");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t3) {
+		t4 = [{
+			key: "accounts",
+			label: t3,
+			points: ACCOUNTS
+		}];
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("accounts.arr");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("accounts.seats");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("accounts.active");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t4 || $[20] !== t5 || $[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsx(BubbleChart, {
+			caption: t0,
+			empty: t1,
+			label: t2,
+			series: t4,
+			sizeKey: "arr",
+			sizeLabel: t5,
+			xKey: "seats",
+			xLabel: t6,
+			yKey: "active",
+			yLabel: t7
+		});
+		$[16] = t0;
+		$[17] = t1;
+		$[18] = t2;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { BubbleChart } from \"@stealthscale/component-charts\";\n\nconst ACCOUNTS: Array<{ active: number; arr: number; seats: number }> = [];\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"bubble-chart\");\n\n  return (\n    <BubbleChart\n      caption={t(\"quiet.caption\")}\n      empty={t(\"quiet.empty\")}\n      label={t(\"accounts.label\")}\n      series={[{ key: \"accounts\", label: t(\"quiet.accounts\"), points: ACCOUNTS }]}\n      sizeKey=\"arr\"\n      sizeLabel={t(\"accounts.arr\")}\n      xKey=\"seats\"\n      xLabel={t(\"accounts.seats\")}\n      yKey=\"active\"\n      yLabel={t(\"accounts.active\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/bubble-chart/examples/replay.example.tsx
+var replay_example_exports = /* @__PURE__ */ __exportAll({
+	Replay: () => Replay,
+	source: () => source
+});
+const FEATURES = [
+	[
+		.82,
+		4.1,
+		12400
+	],
+	[
+		.64,
+		3.8,
+		9700
+	],
+	[
+		.51,
+		4.4,
+		7700
+	],
+	[
+		.38,
+		3.2,
+		5800
+	],
+	[
+		.29,
+		4.6,
+		4400
+	],
+	[
+		.21,
+		3.5,
+		3200
+	],
+	[
+		.12,
+		2.9,
+		1800
+	],
+	[
+		.08,
+		4.2,
+		1200
+	]
+].map(([adoption = 0, rating = 0, users = 0]) => ({
+	adoption,
+	rating,
+	users
+}));
+function Replay() {
+	const $ = c(37);
+	const { t } = useWords("bubble-chart");
+	const [run, setRun] = useState(0);
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("features.caption");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("features.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("features.features");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t2) {
+		t3 = [{
+			key: "features",
+			label: t2,
+			points: FEATURES
+		}];
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("features.users");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = { notation: "compact" };
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("features.adoption");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = { style: "percent" };
+		t8 = [1, 5];
+		$[13] = t7;
+		$[14] = t8;
+	} else {
+		t7 = $[13];
+		t8 = $[14];
+	}
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("features.rating");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = { maximumFractionDigits: 1 };
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== run || $[19] !== t0 || $[20] !== t1 || $[21] !== t3 || $[22] !== t4 || $[23] !== t6 || $[24] !== t9) {
+		t11 = /* @__PURE__ */ jsx(BubbleChart, {
+			animate: true,
+			caption: t0,
+			label: t1,
+			series: t3,
+			sizeKey: "users",
+			sizeLabel: t4,
+			sizeOptions: t5,
+			xKey: "adoption",
+			xLabel: t6,
+			xOptions: t7,
+			yDomain: t8,
+			yKey: "rating",
+			yLabel: t9,
+			yOptions: t10
+		}, run);
+		$[18] = run;
+		$[19] = t0;
+		$[20] = t1;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t6;
+		$[24] = t9;
+		$[25] = t11;
+	} else t11 = $[25];
+	let t12;
+	if ($[26] !== run) {
+		t12 = () => {
+			setRun(run + 1);
+		};
+		$[26] = run;
+		$[27] = t12;
+	} else t12 = $[27];
+	let t13;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(RotateCcwIcon, {});
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== t) {
+		t14 = t("replay.replay");
+		$[29] = t;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	if ($[31] !== t12 || $[32] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(Button, {
+			onClick: t12,
+			size: "sm",
+			variant: "outline",
+			children: [t13, t14]
+		});
+		$[31] = t12;
+		$[32] = t14;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== t11 || $[35] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(Stack, {
+			align: "flex-start",
+			children: [t11, t15]
+		});
+		$[34] = t11;
+		$[35] = t15;
+		$[36] = t16;
+	} else t16 = $[36];
+	return t16;
+}
+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 { BubbleChart } from \"@stealthscale/component-charts\";\n\nconst FEATURES = [\n  [0.82, 4.1, 12_400],\n  [0.64, 3.8, 9700],\n  [0.51, 4.4, 7700],\n  [0.38, 3.2, 5800],\n  [0.29, 4.6, 4400],\n  [0.21, 3.5, 3200],\n  [0.12, 2.9, 1800],\n  [0.08, 4.2, 1200],\n].map(([adoption = 0, rating = 0, users = 0]) => ({ adoption, rating, users }));\n\nexport function Replay(): ReactElement {\n  const { t } = useWords(\"bubble-chart\");\n  const [run, setRun] = useState(0);\n\n  return (\n    <Stack align=\"flex-start\">\n      <BubbleChart\n        animate\n        caption={t(\"features.caption\")}\n        key={run}\n        label={t(\"features.label\")}\n        series={[{ key: \"features\", label: t(\"features.features\"), points: FEATURES }]}\n        sizeKey=\"users\"\n        sizeLabel={t(\"features.users\")}\n        sizeOptions={{ notation: \"compact\" }}\n        xKey=\"adoption\"\n        xLabel={t(\"features.adoption\")}\n        xOptions={{ style: \"percent\" }}\n        yDomain={[1, 5]}\n        yKey=\"rating\"\n        yLabel={t(\"features.rating\")}\n        yOptions={{ maximumFractionDigits: 1 }}\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/bubble-chart/bubble-chart.specimen.tsx
+/**
+* Catalogue page for the bubble chart.
+*
+* @remarks
+*   The bubble chart has no recipe of its own: the chart's recipe styles its figure, so every scene
+*   is hand-written. The scenes render accounts of two plans sized by revenue, features sized by
+*   their users, the tooltip open at the largest account, the points animated in with a replay,
+*   the accounts at a phone's width, and a chart without points. Every scene renders a component
+*   from `examples/` and shows that file as its source. The words are keys under `bubble-chart` in
+*   `locales/en/specimen/bubble-chart.json`.
+*/
+/**
+* Hand-written scene for two series sized by a third field.
+*/
+const two = {
+	about: "bubble-chart.accounts.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Accounts, {})
+	}),
+	example: accounts_example_exports,
+	title: "bubble-chart.accounts.title"
+};
+/**
+* Hand-written scene for one series with a stated value domain.
+*/
+const one = {
+	about: "bubble-chart.features.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Features, {})
+	}),
+	example: features_example_exports,
+	title: "bubble-chart.features.title"
+};
+/**
+* Hand-written scene for the tooltip open at a point.
+*/
+const tooltip = {
+	about: "bubble-chart.largest.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Largest, {})
+	}),
+	example: largest_example_exports,
+	title: "bubble-chart.largest.title"
+};
+/**
+* Hand-written scene for the points animated in, with a replay.
+*/
+const animated = {
+	about: "bubble-chart.replay.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "lg",
+		children: /* @__PURE__ */ jsx(Replay, {})
+	}),
+	example: replay_example_exports,
+	title: "bubble-chart.replay.title"
+};
+/**
+* Hand-written scene for the accounts at a phone's width.
+*/
+const narrow = {
+	about: "bubble-chart.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Accounts, {})
+	}),
+	example: accounts_example_exports,
+	title: "bubble-chart.narrow.title"
+};
+/**
+* Hand-written scene for a chart without points.
+*/
+const empty = {
+	about: "bubble-chart.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "bubble-chart.quiet.title"
+};
+var bubble_chart_specimen_default = specimen({
+	about: "bubble-chart.about",
+	id: "components/charts/bubble-chart",
+	imports: "import { BubbleChart } from \"@stealthscale/component-charts\";",
+	scenes: [
+		two,
+		one,
+		tooltip,
+		animated,
+		narrow,
+		empty
+	],
+	title: "bubble-chart.title"
+});
+//#endregion
+export { animated, bubble_chart_specimen_default as default, empty, narrow, one, tooltip, two };