@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/pages/chord-diagram/chord-diagram.js

@@ -0,0 +1,891 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { nt as chordLayout, rt as flowBalance, tt as ChordDiagram } from "../../shared-DVZJ2nST.js";
+import { l as named } 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/chord-diagram/examples/calls.ts
+/**
+* Keys of the services.
+*/
+const SERVICES = [
+	"api",
+	"auth",
+	"billing",
+	"search",
+	"jobs"
+];
+/**
+* Lists an hour of calls between the services: every pair calls both ways, and api sends 6,100
+* calls and receives 3,400.
+*/
+const CALLS = [
+	{
+		from: "api",
+		to: "auth",
+		value: 2600
+	},
+	{
+		from: "auth",
+		to: "api",
+		value: 1900
+	},
+	{
+		from: "api",
+		to: "billing",
+		value: 1400
+	},
+	{
+		from: "billing",
+		to: "api",
+		value: 700
+	},
+	{
+		from: "api",
+		to: "search",
+		value: 2100
+	},
+	{
+		from: "search",
+		to: "api",
+		value: 800
+	},
+	{
+		from: "jobs",
+		to: "billing",
+		value: 900
+	},
+	{
+		from: "billing",
+		to: "jobs",
+		value: 400
+	},
+	{
+		from: "jobs",
+		to: "auth",
+		value: 500
+	},
+	{
+		from: "auth",
+		to: "jobs",
+		value: 250
+	},
+	{
+		from: "search",
+		to: "jobs",
+		value: 300
+	},
+	{
+		from: "jobs",
+		to: "search",
+		value: 700
+	}
+];
+/**
+* Lists the calls with jobs calling itself 2,600 times as it requeues its own work.
+*/
+const REQUEUED = [...CALLS, {
+	from: "jobs",
+	to: "jobs",
+	value: 2600
+}];
+/**
+* Keys of the services and the audit log.
+*/
+const AUDITED = [...SERVICES, "audit"];
+/**
+* Lists the calls with three services writing 2,000 calls to an audit log that calls nobody.
+*/
+const LOGGED = [
+	...CALLS,
+	{
+		from: "api",
+		to: "audit",
+		value: 900
+	},
+	{
+		from: "auth",
+		to: "audit",
+		value: 700
+	},
+	{
+		from: "billing",
+		to: "audit",
+		value: 400
+	}
+];
+/**
+* Keys of the regions.
+*/
+const REGIONS = [
+	"north",
+	"south",
+	"east",
+	"west"
+];
+/**
+* Lists a decade of moves between the regions: every pair moves both ways, and north gains 1,030
+* people.
+*/
+const MOVES = [
+	{
+		from: "south",
+		to: "north",
+		value: 840
+	},
+	{
+		from: "north",
+		to: "south",
+		value: 190
+	},
+	{
+		from: "east",
+		to: "north",
+		value: 520
+	},
+	{
+		from: "north",
+		to: "east",
+		value: 140
+	},
+	{
+		from: "south",
+		to: "west",
+		value: 310
+	},
+	{
+		from: "west",
+		to: "south",
+		value: 90
+	},
+	{
+		from: "east",
+		to: "west",
+		value: 260
+	},
+	{
+		from: "west",
+		to: "east",
+		value: 230
+	}
+];
+//#endregion
+//#region src/chord-diagram/examples/audit.example.tsx
+var audit_example_exports = /* @__PURE__ */ __exportAll({
+	Audit: () => Audit,
+	source: () => source$7
+});
+function Audit() {
+	const $ = c(17);
+	const { t } = useWords("chord-diagram");
+	let T0;
+	let nodes;
+	let t0;
+	if ($[0] !== t) {
+		nodes = named(AUDITED, (key) => t(`names.${key}`));
+		const audit = flowBalance(nodes, LOGGED).find(_temp$5);
+		T0 = ChordDiagram;
+		t0 = t("audit.caption", {
+			name: t("names.audit"),
+			received: audit?.inflow
+		});
+		$[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("audit.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] !== T0 || $[11] !== nodes || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			defaultIndex: 14,
+			flows: LOGGED,
+			inflowLabel: t1,
+			label: t2,
+			nodes,
+			outflowLabel: t3
+		});
+		$[10] = T0;
+		$[11] = nodes;
+		$[12] = t0;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+}
+function _temp$5(node) {
+	return node.key === "audit";
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram, flowBalance } from \"@stealthscale/component-charts\";\n\nimport { AUDITED, LOGGED, named } from \"./calls.ts\";\n\nexport function Audit(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n  const nodes = named(AUDITED, (key) => t(`names.${key}`));\n  const audit = flowBalance(nodes, LOGGED).find((node) => node.key === \"audit\");\n\n  return (\n    <ChordDiagram\n      caption={t(\"audit.caption\", { name: t(\"names.audit\"), received: audit?.inflow })}\n      defaultIndex={14}\n      flows={LOGGED}\n      inflowLabel={t(\"in\")}\n      label={t(\"audit.label\")}\n      nodes={nodes}\n      outflowLabel={t(\"out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/internal.example.tsx
+var internal_example_exports = /* @__PURE__ */ __exportAll({
+	Internal: () => Internal,
+	source: () => source$6
+});
+function Internal() {
+	const $ = c(18);
+	const { t } = useWords("chord-diagram");
+	let T0;
+	let t0;
+	if ($[0] !== t) {
+		const own = REQUEUED.find(_temp$4);
+		T0 = ChordDiagram;
+		t0 = t("internal.caption", {
+			calls: own?.value,
+			name: t(`names.${own?.from ?? ""}`)
+		});
+		$[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("internal.label");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = named(SERVICES, (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] !== T0 || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			flows: REQUEUED,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4
+		});
+		$[11] = T0;
+		$[12] = t0;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+function _temp$4(flow) {
+	return flow.from === flow.to;
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram } from \"@stealthscale/component-charts\";\n\nimport { named, REQUEUED, SERVICES } from \"./calls.ts\";\n\nexport function Internal(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n  const own = REQUEUED.find((flow) => flow.from === flow.to);\n\n  return (\n    <ChordDiagram\n      caption={t(\"internal.caption\", {\n        calls: own?.value,\n        name: t(`names.${own?.from ?? \"\"}`),\n      })}\n      flows={REQUEUED}\n      inflowLabel={t(\"in\")}\n      label={t(\"internal.label\")}\n      nodes={named(SERVICES, (key) => t(`names.${key}`))}\n      outflowLabel={t(\"out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/layout.example.tsx
+var layout_example_exports = /* @__PURE__ */ __exportAll({
+	Layout: () => Layout,
+	source: () => source$5
+});
+function Layout() {
+	const $ = c(25);
+	const { i18n, t } = useWords("chord-diagram");
+	let groups;
+	let nodes;
+	let t0;
+	if ($[0] !== t) {
+		nodes = named(SERVICES, (key) => t(`names.${key}`));
+		({groups} = chordLayout(nodes, CALLS));
+		t0 = groups.reduce(_temp$3, 0);
+		$[0] = t;
+		$[1] = groups;
+		$[2] = nodes;
+		$[3] = t0;
+	} else {
+		groups = $[1];
+		nodes = $[2];
+		t0 = $[3];
+	}
+	const arcs = t0;
+	const [first] = groups;
+	let T0;
+	let t1;
+	if ($[4] !== arcs || $[5] !== first?.endAngle || $[6] !== first?.key || $[7] !== first?.startAngle || $[8] !== i18n.language || $[9] !== t) {
+		const share = new Intl.NumberFormat(i18n.language, { style: "percent" });
+		T0 = ChordDiagram;
+		t1 = t("layout.caption", {
+			name: t(`names.${first?.key ?? ""}`),
+			share: share.format(((first?.endAngle ?? 0) - (first?.startAngle ?? 0)) / arcs)
+		});
+		$[4] = arcs;
+		$[5] = first?.endAngle;
+		$[6] = first?.key;
+		$[7] = first?.startAngle;
+		$[8] = i18n.language;
+		$[9] = t;
+		$[10] = T0;
+		$[11] = t1;
+	} else {
+		T0 = $[10];
+		t1 = $[11];
+	}
+	let t2;
+	if ($[12] !== t) {
+		t2 = t("in");
+		$[12] = t;
+		$[13] = t2;
+	} else t2 = $[13];
+	let t3;
+	if ($[14] !== t) {
+		t3 = t("services.label");
+		$[14] = t;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== t) {
+		t4 = t("out");
+		$[16] = t;
+		$[17] = t4;
+	} else t4 = $[17];
+	let t5;
+	if ($[18] !== T0 || $[19] !== nodes || $[20] !== t1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			caption: t1,
+			flows: CALLS,
+			inflowLabel: t2,
+			label: t3,
+			nodes,
+			outflowLabel: t4
+		});
+		$[18] = T0;
+		$[19] = nodes;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t5;
+	} else t5 = $[24];
+	return t5;
+}
+function _temp$3(sum, group) {
+	return sum + group.endAngle - group.startAngle;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram, chordLayout } from \"@stealthscale/component-charts\";\n\nimport { CALLS, named, SERVICES } from \"./calls.ts\";\n\nexport function Layout(): ReactElement {\n  const { i18n, t } = useWords(\"chord-diagram\");\n  const nodes = named(SERVICES, (key) => t(`names.${key}`));\n  const { groups } = chordLayout(nodes, CALLS);\n  const arcs = groups.reduce((sum, group) => sum + group.endAngle - group.startAngle, 0);\n  const [first] = groups;\n  const share = new Intl.NumberFormat(i18n.language, { style: \"percent\" });\n\n  return (\n    <ChordDiagram\n      caption={t(\"layout.caption\", {\n        name: t(`names.${first?.key ?? \"\"}`),\n        share: share.format(((first?.endAngle ?? 0) - (first?.startAngle ?? 0)) / arcs),\n      })}\n      flows={CALLS}\n      inflowLabel={t(\"in\")}\n      label={t(\"services.label\")}\n      nodes={nodes}\n      outflowLabel={t(\"out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/migration.example.tsx
+var migration_example_exports = /* @__PURE__ */ __exportAll({
+	Migration: () => Migration,
+	source: () => source$4
+});
+function Migration() {
+	const $ = c(18);
+	const { t } = useWords("chord-diagram");
+	let nodes;
+	let t0;
+	if ($[0] !== t) {
+		nodes = named(REGIONS, (key) => t(`names.${key}`));
+		t0 = flowBalance(nodes, MOVES).find(_temp$2);
+		$[0] = t;
+		$[1] = nodes;
+		$[2] = t0;
+	} else {
+		nodes = $[1];
+		t0 = $[2];
+	}
+	const north = t0;
+	const t1 = (north?.inflow ?? 0) - (north?.outflow ?? 0);
+	let t2;
+	if ($[3] !== t || $[4] !== t1) {
+		t2 = t("migration.caption", {
+			gained: t1,
+			name: t("names.north")
+		});
+		$[3] = t;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("migration.in");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("migration.label");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("migration.out");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== nodes || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(ChordDiagram, {
+			caption: t2,
+			flows: MOVES,
+			inflowLabel: t3,
+			label: t4,
+			nodes,
+			outflowLabel: t5
+		});
+		$[12] = nodes;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+function _temp$2(region) {
+	return region.key === "north";
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram, flowBalance } from \"@stealthscale/component-charts\";\n\nimport { MOVES, named, REGIONS } from \"./calls.ts\";\n\nexport function Migration(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n  const nodes = named(REGIONS, (key) => t(`names.${key}`));\n  const north = flowBalance(nodes, MOVES).find((region) => region.key === \"north\");\n\n  return (\n    <ChordDiagram\n      caption={t(\"migration.caption\", {\n        gained: (north?.inflow ?? 0) - (north?.outflow ?? 0),\n        name: t(\"names.north\"),\n      })}\n      flows={MOVES}\n      inflowLabel={t(\"migration.in\")}\n      label={t(\"migration.label\")}\n      nodes={nodes}\n      outflowLabel={t(\"migration.out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/pair.example.tsx
+var pair_example_exports = /* @__PURE__ */ __exportAll({
+	Pair: () => Pair,
+	source: () => source$3
+});
+function Pair() {
+	const $ = c(18);
+	const { t } = useWords("chord-diagram");
+	let T0;
+	let t0;
+	if ($[0] !== t) {
+		const there = CALLS.find(_temp$1)?.value;
+		const back = CALLS.find(_temp2)?.value;
+		T0 = ChordDiagram;
+		t0 = t("pair.caption", {
+			back,
+			there
+		});
+		$[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("services.label");
+		$[5] = t;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = named(SERVICES, (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] !== T0 || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			defaultIndex: 1,
+			flows: CALLS,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4
+		});
+		$[11] = T0;
+		$[12] = t0;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return t5;
+}
+function _temp2(flow_0) {
+	return flow_0.from === "auth" && flow_0.to === "api";
+}
+function _temp$1(flow) {
+	return flow.from === "api" && flow.to === "auth";
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram } from \"@stealthscale/component-charts\";\n\nimport { CALLS, named, SERVICES } from \"./calls.ts\";\n\nexport function Pair(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n  const there = CALLS.find((flow) => flow.from === \"api\" && flow.to === \"auth\")?.value;\n  const back = CALLS.find((flow) => flow.from === \"auth\" && flow.to === \"api\")?.value;\n\n  return (\n    <ChordDiagram\n      caption={t(\"pair.caption\", { back, there })}\n      defaultIndex={1}\n      flows={CALLS}\n      inflowLabel={t(\"in\")}\n      label={t(\"services.label\")}\n      nodes={named(SERVICES, (key) => t(`names.${key}`))}\n      outflowLabel={t(\"out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/palette.example.tsx
+var palette_example_exports = /* @__PURE__ */ __exportAll({
+	Palette: () => Palette,
+	source: () => source$2
+});
+function Palette() {
+	const $ = c(16);
+	const { t } = useWords("chord-diagram");
+	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("services.label");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = named(SERVICES, (key) => t(`names.${key}`), {
+			api: "teal",
+			auth: "purple",
+			billing: "orange",
+			search: "pink"
+		});
+		$[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] !== t0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ChordDiagram, {
+			caption: t0,
+			flows: CALLS,
+			inflowLabel: t1,
+			label: t2,
+			nodes: t3,
+			outflowLabel: t4
+		});
+		$[10] = t0;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram } from \"@stealthscale/component-charts\";\n\nimport { CALLS, named, SERVICES } from \"./calls.ts\";\n\nexport function Palette(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n\n  return (\n    <ChordDiagram\n      caption={t(\"palette.caption\")}\n      flows={CALLS}\n      inflowLabel={t(\"in\")}\n      label={t(\"services.label\")}\n      nodes={named(SERVICES, (key) => t(`names.${key}`), {\n        api: \"teal\",\n        auth: \"purple\",\n        billing: \"orange\",\n        search: \"pink\",\n      })}\n      outflowLabel={t(\"out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/quiet.example.tsx
+var quiet_example_exports = /* @__PURE__ */ __exportAll({
+	Quiet: () => Quiet,
+	source: () => source$1
+});
+function Quiet() {
+	const $ = c(14);
+	const { t } = useWords("chord-diagram");
+	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("services.label");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = named(SERVICES, (key) => t(`names.${key}`));
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t0 || $[10] !== t1 || $[11] !== t3 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ChordDiagram, {
+			caption: t0,
+			empty: t1,
+			flows: t2,
+			label: t3,
+			nodes: t4
+		});
+		$[9] = t0;
+		$[10] = t1;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram } from \"@stealthscale/component-charts\";\n\nimport { named, SERVICES } from \"./calls.ts\";\n\nexport function Quiet(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n\n  return (\n    <ChordDiagram\n      caption={t(\"quiet.caption\")}\n      empty={t(\"quiet.empty\")}\n      flows={[]}\n      label={t(\"services.label\")}\n      nodes={named(SERVICES, (key) => t(`names.${key}`))}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/examples/services.example.tsx
+var services_example_exports = /* @__PURE__ */ __exportAll({
+	Services: () => Services,
+	source: () => source
+});
+function Services() {
+	const $ = c(17);
+	const { t } = useWords("chord-diagram");
+	let T0;
+	let nodes;
+	let t0;
+	if ($[0] !== t) {
+		nodes = named(SERVICES, (key) => t(`names.${key}`));
+		const [loudest] = flowBalance(nodes, CALLS).toSorted(_temp);
+		T0 = ChordDiagram;
+		t0 = t("services.caption", {
+			name: t(`names.${loudest?.key ?? ""}`),
+			received: loudest?.inflow,
+			sent: loudest?.outflow
+		});
+		$[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("services.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] !== T0 || $[11] !== nodes || $[12] !== t0 || $[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			caption: t0,
+			flows: CALLS,
+			inflowLabel: t1,
+			label: t2,
+			nodes,
+			outflowLabel: t3
+		});
+		$[10] = T0;
+		$[11] = nodes;
+		$[12] = t0;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+}
+function _temp(first, second) {
+	return second.outflow - first.outflow;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { ChordDiagram, flowBalance } from \"@stealthscale/component-charts\";\n\nimport { CALLS, named, SERVICES } from \"./calls.ts\";\n\nexport function Services(): ReactElement {\n  const { t } = useWords(\"chord-diagram\");\n  const nodes = named(SERVICES, (key) => t(`names.${key}`));\n  const [loudest] = flowBalance(nodes, CALLS).toSorted(\n    (first, second) => second.outflow - first.outflow,\n  );\n\n  return (\n    <ChordDiagram\n      caption={t(\"services.caption\", {\n        name: t(`names.${loudest?.key ?? \"\"}`),\n        received: loudest?.inflow,\n        sent: loudest?.outflow,\n      })}\n      flows={CALLS}\n      inflowLabel={t(\"in\")}\n      label={t(\"services.label\")}\n      nodes={nodes}\n      outflowLabel={t(\"out\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/chord-diagram/chord-diagram.specimen.tsx
+/**
+* Catalogue page for the chord diagram.
+*
+* @remarks
+*   The chord diagram has no recipe of its own: the chart's recipe styles its figure, so every
+*   scene is hand-written. The scenes render an hour of calls between five services with the
+*   loudest in the caption, the readout at a pair, a decade of moves between regions, a service
+*   that calls itself, an audit log that only receives, the exported layout, stated palettes, the
+*   calls at a phone's width, and a diagram without flows. Every scene renders a component from
+*   `examples/` and shows that file as its source. The words are keys under `chord-diagram` in
+*   `locales/en/specimen/chord-diagram.json`.
+*/
+/**
+* Hand-written scene for an hour of calls between five services.
+*/
+const called = {
+	about: "chord-diagram.services.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Services, {})
+	}),
+	example: services_example_exports,
+	title: "chord-diagram.services.title"
+};
+/**
+* Hand-written scene for the readout at a pair of services.
+*/
+const paired = {
+	about: "chord-diagram.pair.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Pair, {})
+	}),
+	example: pair_example_exports,
+	title: "chord-diagram.pair.title"
+};
+/**
+* Hand-written scene for a decade of moves between four regions.
+*/
+const moved = {
+	about: "chord-diagram.migration.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Migration, {})
+	}),
+	example: migration_example_exports,
+	title: "chord-diagram.migration.title"
+};
+/**
+* Hand-written scene for a service that calls itself.
+*/
+const requeued = {
+	about: "chord-diagram.internal.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Internal, {})
+	}),
+	example: internal_example_exports,
+	title: "chord-diagram.internal.title"
+};
+/**
+* Hand-written scene for an audit log that only receives.
+*/
+const logged = {
+	about: "chord-diagram.audit.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Audit, {})
+	}),
+	example: audit_example_exports,
+	title: "chord-diagram.audit.title"
+};
+/**
+* Hand-written scene for a caption read from the exported layout.
+*/
+const laid = {
+	about: "chord-diagram.layout.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Layout, {})
+	}),
+	example: layout_example_exports,
+	title: "chord-diagram.layout.title"
+};
+/**
+* Hand-written scene for the services in stated palettes.
+*/
+const tinted = {
+	about: "chord-diagram.palette.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Palette, {})
+	}),
+	example: palette_example_exports,
+	title: "chord-diagram.palette.title"
+};
+/**
+* Hand-written scene for the calls at a phone's width.
+*/
+const narrow = {
+	about: "chord-diagram.narrow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "xs",
+		children: /* @__PURE__ */ jsx(Services, {})
+	}),
+	example: services_example_exports,
+	title: "chord-diagram.narrow.title"
+};
+/**
+* Hand-written scene for a chord diagram without flows.
+*/
+const empty = {
+	about: "chord-diagram.quiet.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Quiet, {})
+	}),
+	example: quiet_example_exports,
+	title: "chord-diagram.quiet.title"
+};
+var chord_diagram_specimen_default = specimen({
+	about: "chord-diagram.about",
+	id: "components/charts/chord-diagram",
+	imports: "import { ChordDiagram } from \"@stealthscale/component-charts\";",
+	scenes: [
+		called,
+		paired,
+		moved,
+		requeued,
+		logged,
+		laid,
+		tinted,
+		narrow,
+		empty
+	],
+	title: "chord-diagram.title"
+});
+//#endregion
+export { called, chord_diagram_specimen_default as default, empty, laid, logged, moved, narrow, paired, requeued, tinted };