@stealthscale/component-graphs 0.2.1 → 0.2.2

package/dist/pages/graph/graph.js

@@ -0,0 +1,1619 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as ZoomLevel, c as Controls, f as Root, g as layoutGraph, h as Canvas, l as Control, m as Summary, o as PaletteItem, p as Caption, s as MiniMap$1, x as diffGraphs } from "../../shared-DOF4V8-Q.js";
+import { t as recipe } from "../../recipes-lWPA4IJC.js";
+import { useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { Button } from "@stealthscale/component-actions";
+import { Badge } from "@stealthscale/component-data";
+import { addEdge, useEdgesState, useNodesState } from "@xyflow/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, scenesOf, specimen, useWords } from "@stealthscale/specimen";
+import { MaximizeIcon, MinusIcon, PlusIcon, XIcon } from "lucide-react";
+import { Grid, Stack } from "@stealthscale/component-layout";
+import { DataList } from "@stealthscale/component-collections";
+import { Heading, Text } from "@stealthscale/component-typography";
+//#region src/graph/examples/changes.example.tsx
+var changes_example_exports = /* @__PURE__ */ __exportAll({
+	Changes: () => Changes,
+	source: () => source$7
+});
+const ORIGIN$1 = {
+	x: 0,
+	y: 0
+};
+const BEFORE$1 = {
+	links: [
+		["screen", "draft"],
+		["draft", "publish"],
+		["publish", "notify"]
+	],
+	steps: [
+		["screen", "screening"],
+		["draft", "small"],
+		["publish", "helpCentre"],
+		["notify", "email"]
+	]
+};
+const AFTER$1 = {
+	links: [
+		["screen", "draft"],
+		["draft", "score"],
+		["score", "publish"]
+	],
+	steps: [
+		["screen", "screening"],
+		["draft", "large"],
+		["score", "three"],
+		["publish", "helpCentre"]
+	]
+};
+const LOOKS = {
+	added: {
+		mark: "+",
+		palette: "success"
+	},
+	changed: {
+		mark: "~",
+		palette: "warning"
+	},
+	removed: {
+		mark: "−",
+		palette: "error"
+	},
+	unchanged: {
+		mark: "",
+		palette: "neutral"
+	}
+};
+function edgesOf$1(links) {
+	return links.map(([source, target]) => ({
+		id: `${source}-${target}`,
+		source,
+		target
+	}));
+}
+function changed({ change }) {
+	return change !== "unchanged";
+}
+function Changes() {
+	const $ = c(5);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = (steps) => steps.map((t1) => {
+			const [id, detail] = t1;
+			return {
+				data: {
+					label: t(`versions.steps.${id}`),
+					subtitle: t(`versions.details.${detail}`)
+				},
+				id,
+				position: ORIGIN$1
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodesOf = t0;
+	let t1;
+	if ($[2] !== nodesOf || $[3] !== t) {
+		const diff = diffGraphs({
+			edges: edgesOf$1(BEFORE$1.links),
+			nodes: nodesOf(BEFORE$1.steps)
+		}, {
+			edges: edgesOf$1(AFTER$1.links),
+			nodes: nodesOf(AFTER$1.steps)
+		});
+		const fields = { subtitle: t("versions.list.subtitle") };
+		const groups = [{
+			entries: diff.nodes.filter(changed),
+			title: t("versions.list.steps")
+		}, {
+			entries: diff.edges.filter(changed),
+			title: t("versions.list.links")
+		}];
+		const count = groups.reduce(_temp$1, 0);
+		t1 = /* @__PURE__ */ jsxs(Stack, {
+			gap: "md",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "output",
+				children: t("versions.list.summary", { count })
+			}), groups.map((t2) => {
+				const { entries: entries_0, title } = t2;
+				return /* @__PURE__ */ jsxs(Stack, {
+					gap: "sm",
+					children: [/* @__PURE__ */ jsx(Heading, {
+						as: "h3",
+						size: "sm",
+						children: title
+					}), /* @__PURE__ */ jsx(DataList.Root, {
+						orientation: "horizontal",
+						children: entries_0.map((entry) => /* @__PURE__ */ jsxs(DataList.Item, { children: [/* @__PURE__ */ jsx(DataList.ItemLabel, { children: /* @__PURE__ */ jsx(Badge, {
+							palette: LOOKS[entry.change].palette,
+							size: "sm",
+							variant: "surface",
+							children: `${LOOKS[entry.change].mark} ${t(`versions.${entry.change}`)}`
+						}) }), /* @__PURE__ */ jsx(DataList.ItemValue, { children: entry.fields.length === 0 ? entry.label : t("versions.list.fields", {
+							fields: entry.fields.map((field) => fields[field] ?? field).join(", "),
+							label: entry.label
+						}) })] }, entry.id))
+					})]
+				}, title);
+			})]
+		});
+		$[2] = nodesOf;
+		$[3] = t;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function _temp$1(sum, t0) {
+	const { entries } = t0;
+	return sum + entries.length;
+}
+const source$7 = "import { type ReactElement } from \"react\";\n\nimport { type Edge, type Node } from \"@xyflow/react\";\n\nimport { DataList } from \"@stealthscale/component-collections\";\nimport { Badge } from \"@stealthscale/component-data\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Heading, Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { GraphChange, diffGraphs } from \"@stealthscale/component-graphs\";\n\nconst ORIGIN = { x: 0, y: 0 };\n\nconst BEFORE = {\n  links: [\n    [\"screen\", \"draft\"],\n    [\"draft\", \"publish\"],\n    [\"publish\", \"notify\"],\n  ],\n  steps: [\n    [\"screen\", \"screening\"],\n    [\"draft\", \"small\"],\n    [\"publish\", \"helpCentre\"],\n    [\"notify\", \"email\"],\n  ],\n} as const;\n\nconst AFTER = {\n  links: [\n    [\"screen\", \"draft\"],\n    [\"draft\", \"score\"],\n    [\"score\", \"publish\"],\n  ],\n  steps: [\n    [\"screen\", \"screening\"],\n    [\"draft\", \"large\"],\n    [\"score\", \"three\"],\n    [\"publish\", \"helpCentre\"],\n  ],\n} as const;\n\nconst LOOKS = {\n  added: { mark: \"+\", palette: \"success\" },\n  changed: { mark: \"~\", palette: \"warning\" },\n  removed: { mark: \"−\", palette: \"error\" },\n  unchanged: { mark: \"\", palette: \"neutral\" },\n} as const;\n\nfunction edgesOf(links: typeof AFTER.links | typeof BEFORE.links): Edge[] {\n  return links.map(([source, target]) => ({ id: `${source}-${target}`, source, target }));\n}\n\nfunction changed({ change }: GraphChange): boolean {\n  return change !== \"unchanged\";\n}\n\nexport function Changes(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const nodesOf = (steps: typeof AFTER.steps | typeof BEFORE.steps): Node[] =>\n    steps.map(([id, detail]) => ({\n      data: { label: t(`versions.steps.${id}`), subtitle: t(`versions.details.${detail}`) },\n      id,\n      position: ORIGIN,\n    }));\n  const diff = diffGraphs(\n    { edges: edgesOf(BEFORE.links), nodes: nodesOf(BEFORE.steps) },\n    { edges: edgesOf(AFTER.links), nodes: nodesOf(AFTER.steps) },\n  );\n  const fields: Record<string, string> = { subtitle: t(\"versions.list.subtitle\") };\n  const groups = [\n    { entries: diff.nodes.filter(changed), title: t(\"versions.list.steps\") },\n    { entries: diff.edges.filter(changed), title: t(\"versions.list.links\") },\n  ];\n  const count = groups.reduce((sum, { entries }) => sum + entries.length, 0);\n\n  return (\n    <Stack gap=\"md\">\n      <Text as=\"output\">{t(\"versions.list.summary\", { count })}</Text>\n      {groups.map(({ entries, title }) => (\n        <Stack gap=\"sm\" key={title}>\n          <Heading as=\"h3\" size=\"sm\">\n            {title}\n          </Heading>\n          <DataList.Root orientation=\"horizontal\">\n            {entries.map((entry) => (\n              <DataList.Item key={entry.id}>\n                <DataList.ItemLabel>\n                  <Badge palette={LOOKS[entry.change].palette} size=\"sm\" variant=\"surface\">\n                    {`${LOOKS[entry.change].mark} ${t(`versions.${entry.change}`)}`}\n                  </Badge>\n                </DataList.ItemLabel>\n                <DataList.ItemValue>\n                  {entry.fields.length === 0\n                    ? entry.label\n                    : t(\"versions.list.fields\", {\n                        fields: entry.fields.map((field) => fields[field] ?? field).join(\", \"),\n                        label: entry.label,\n                      })}\n                </DataList.ItemValue>\n              </DataList.Item>\n            ))}\n          </DataList.Root>\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/editor.example.tsx
+var editor_example_exports = /* @__PURE__ */ __exportAll({
+	Editor: () => Editor,
+	source: () => source$6
+});
+const IDS$1 = [
+	"webhook",
+	"enrich",
+	"route",
+	"slack",
+	"email"
+];
+const LINKS = [
+	["webhook", "enrich"],
+	["enrich", "route"],
+	["route", "slack"]
+];
+function Editor() {
+	const $ = c(51);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = layoutGraph(IDS$1.map((id) => ({
+			data: { label: t(`editor.${id}`) },
+			id,
+			position: {
+				x: 0,
+				y: 0
+			},
+			type: id === "webhook" ? "input" : id === "slack" || id === "email" ? "output" : "default"
+		})), LINKS.map(_temp), { ranksep: 64 });
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const [nodes, , onNodesChange] = useNodesState(t0);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = LINKS.map(_temp2);
+		$[2] = t1;
+	} else t1 = $[2];
+	const [edges, setEdges, onEdgesChange] = useEdgesState(t1);
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("controls");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t) {
+		t3 = t("zoomIn");
+		$[5] = t;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(PlusIcon, {});
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Control, {
+			action: "zoomIn",
+			label: t3,
+			children: t4
+		});
+		$[8] = t3;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t) {
+		t6 = t("zoomOut");
+		$[10] = t;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(MinusIcon, {});
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Control, {
+			action: "zoomOut",
+			label: t6,
+			children: t7
+		});
+		$[13] = t6;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== t) {
+		t9 = t("fit");
+		$[15] = t;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(MaximizeIcon, {});
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t9) {
+		t11 = /* @__PURE__ */ jsx(Control, {
+			action: "fit",
+			label: t9,
+			children: t10
+		});
+		$[18] = t9;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t11 || $[21] !== t2 || $[22] !== t5 || $[23] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(Controls, {
+			label: t2,
+			children: [
+				t5,
+				t8,
+				t11
+			]
+		});
+		$[20] = t11;
+		$[21] = t2;
+		$[22] = t5;
+		$[23] = t8;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t) {
+		t13 = t("editor.label");
+		$[25] = t;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== setEdges) {
+		t14 = (connection) => {
+			setEdges((current) => addEdge(connection, current));
+		};
+		$[27] = setEdges;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(XIcon, {});
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t) {
+		t16 = (t17) => {
+			const { source: source_1, target: target_1 } = t17;
+			return t("editor.remove", {
+				source: source_1,
+				target: target_1
+			});
+		};
+		$[30] = t;
+		$[31] = t16;
+	} else t16 = $[31];
+	let t17;
+	if ($[32] !== edges || $[33] !== nodes || $[34] !== onEdgesChange || $[35] !== onNodesChange || $[36] !== t13 || $[37] !== t14 || $[38] !== t16) {
+		t17 = /* @__PURE__ */ jsx(Canvas, {
+			edges,
+			label: t13,
+			nodes,
+			onConnect: t14,
+			onEdgesChange,
+			onNodesChange,
+			removeGlyph: t15,
+			removeName: t16
+		});
+		$[32] = edges;
+		$[33] = nodes;
+		$[34] = onEdgesChange;
+		$[35] = onNodesChange;
+		$[36] = t13;
+		$[37] = t14;
+		$[38] = t16;
+		$[39] = t17;
+	} else t17 = $[39];
+	let t18;
+	if ($[40] !== t12 || $[41] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(Root, { children: [t12, t17] });
+		$[40] = t12;
+		$[41] = t17;
+		$[42] = t18;
+	} else t18 = $[42];
+	let t19;
+	if ($[43] !== edges.length || $[44] !== t) {
+		t19 = t("editor.count", { count: edges.length });
+		$[43] = edges.length;
+		$[44] = t;
+		$[45] = t19;
+	} else t19 = $[45];
+	let t20;
+	if ($[46] !== t19) {
+		t20 = /* @__PURE__ */ jsx(Text, {
+			as: "output",
+			size: "sm",
+			tone: "muted",
+			children: t19
+		});
+		$[46] = t19;
+		$[47] = t20;
+	} else t20 = $[47];
+	let t21;
+	if ($[48] !== t18 || $[49] !== t20) {
+		t21 = /* @__PURE__ */ jsxs(Stack, { children: [t18, t20] });
+		$[48] = t18;
+		$[49] = t20;
+		$[50] = t21;
+	} else t21 = $[50];
+	return t21;
+}
+function _temp2(t0) {
+	const [source_0, target_0] = t0;
+	return {
+		id: `${source_0}-${target_0}`,
+		source: source_0,
+		target: target_0
+	};
+}
+function _temp(t0) {
+	const [source, target] = t0;
+	return {
+		id: `${source}-${target}`,
+		source,
+		target
+	};
+}
+const source$6 = "import { type ReactElement } from \"react\";\n\nimport { addEdge, useEdgesState, useNodesState } from \"@xyflow/react\";\nimport { MaximizeIcon, MinusIcon, PlusIcon, XIcon } from \"lucide-react\";\n\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { Text } from \"@stealthscale/component-typography\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph, layoutGraph } from \"@stealthscale/component-graphs\";\n\nconst IDS = [\"webhook\", \"enrich\", \"route\", \"slack\", \"email\"] as const;\n\nconst LINKS = [\n  [\"webhook\", \"enrich\"],\n  [\"enrich\", \"route\"],\n  [\"route\", \"slack\"],\n] as const;\n\nexport function Editor(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const [nodes, , onNodesChange] = useNodesState(\n    layoutGraph(\n      IDS.map((id) => ({\n        data: { label: t(`editor.${id}`) },\n        id,\n        position: { x: 0, y: 0 },\n        type: id === \"webhook\" ? \"input\" : id === \"slack\" || id === \"email\" ? \"output\" : \"default\",\n      })),\n      LINKS.map(([source, target]) => ({ id: `${source}-${target}`, source, target })),\n      { ranksep: 64 },\n    ),\n  );\n  const [edges, setEdges, onEdgesChange] = useEdgesState(\n    LINKS.map(([source, target]) => ({ id: `${source}-${target}`, source, target })),\n  );\n\n  return (\n    <Stack>\n      <Graph.Root>\n        <Graph.Controls label={t(\"controls\")}>\n          <Graph.Control action=\"zoomIn\" label={t(\"zoomIn\")}>\n            <PlusIcon />\n          </Graph.Control>\n          <Graph.Control action=\"zoomOut\" label={t(\"zoomOut\")}>\n            <MinusIcon />\n          </Graph.Control>\n          <Graph.Control action=\"fit\" label={t(\"fit\")}>\n            <MaximizeIcon />\n          </Graph.Control>\n        </Graph.Controls>\n        <Graph.Canvas\n          edges={edges}\n          label={t(\"editor.label\")}\n          nodes={nodes}\n          onConnect={(connection) => {\n            setEdges((current) => addEdge(connection, current));\n          }}\n          onEdgesChange={onEdgesChange}\n          onNodesChange={onNodesChange}\n          removeGlyph={<XIcon />}\n          removeName={({ source, target }) => t(\"editor.remove\", { source, target })}\n        />\n      </Graph.Root>\n      <Text as=\"output\" size=\"sm\" tone=\"muted\">\n        {t(\"editor.count\", { count: edges.length })}\n      </Text>\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/judge.example.tsx
+var judge_example_exports = /* @__PURE__ */ __exportAll({
+	Judge: () => Judge,
+	source: () => source$5
+});
+const EDGES$3 = [
+	{
+		id: "draft-judge",
+		source: "draft",
+		target: "judge"
+	},
+	{
+		id: "judge-publish",
+		source: "judge",
+		sourceHandle: "pass",
+		target: "publish"
+	},
+	{
+		id: "judge-revise",
+		source: "judge",
+		sourceHandle: "fail",
+		target: "revise"
+	}
+];
+function Judge() {
+	const $ = c(14);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = layoutGraph([
+			{
+				data: {
+					label: t("judge.draft"),
+					subtitle: t("judge.model")
+				},
+				id: "draft",
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			{
+				data: {
+					invalid: true,
+					label: t("judge.judge"),
+					outputs: [{
+						id: "pass",
+						label: t("judge.pass")
+					}, {
+						id: "fail",
+						label: t("judge.fail")
+					}],
+					problem: t("judge.problem"),
+					subtitle: t("judge.rubric")
+				},
+				id: "judge",
+				position: {
+					x: 0,
+					y: 0
+				}
+			},
+			{
+				data: { label: t("judge.publish") },
+				id: "publish",
+				position: {
+					x: 0,
+					y: 0
+				},
+				type: "output"
+			},
+			{
+				data: { label: t("judge.revise") },
+				id: "revise",
+				position: {
+					x: 0,
+					y: 0
+				},
+				type: "output"
+			}
+		], EDGES$3, { ranksep: 96 });
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("judge.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== nodes || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Canvas, {
+			edges: EDGES$3,
+			label: t1,
+			nodes,
+			readOnly: true
+		});
+		$[4] = nodes;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("judge.caption");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Caption, { children: t3 });
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t2 || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Root, { children: [t2, t4] });
+		$[11] = t2;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+}
+const source$5 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph, layoutGraph } from \"@stealthscale/component-graphs\";\n\nconst EDGES = [\n  { id: \"draft-judge\", source: \"draft\", target: \"judge\" },\n  { id: \"judge-publish\", source: \"judge\", sourceHandle: \"pass\", target: \"publish\" },\n  { id: \"judge-revise\", source: \"judge\", sourceHandle: \"fail\", target: \"revise\" },\n];\n\nexport function Judge(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const nodes = layoutGraph(\n    [\n      {\n        data: { label: t(\"judge.draft\"), subtitle: t(\"judge.model\") },\n        id: \"draft\",\n        position: { x: 0, y: 0 },\n      },\n      {\n        data: {\n          invalid: true,\n          label: t(\"judge.judge\"),\n          outputs: [\n            { id: \"pass\", label: t(\"judge.pass\") },\n            { id: \"fail\", label: t(\"judge.fail\") },\n          ],\n          problem: t(\"judge.problem\"),\n          subtitle: t(\"judge.rubric\"),\n        },\n        id: \"judge\",\n        position: { x: 0, y: 0 },\n      },\n      {\n        data: { label: t(\"judge.publish\") },\n        id: \"publish\",\n        position: { x: 0, y: 0 },\n        type: \"output\",\n      },\n      {\n        data: { label: t(\"judge.revise\") },\n        id: \"revise\",\n        position: { x: 0, y: 0 },\n        type: \"output\",\n      },\n    ],\n    EDGES,\n    { ranksep: 96 },\n  );\n\n  return (\n    <Graph.Root>\n      <Graph.Canvas edges={EDGES} label={t(\"judge.label\")} nodes={nodes} readOnly />\n      <Graph.Caption>{t(\"judge.caption\")}</Graph.Caption>\n    </Graph.Root>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/pipeline.example.tsx
+var pipeline_example_exports = /* @__PURE__ */ __exportAll({
+	Pipeline: () => Pipeline,
+	source: () => source$4
+});
+const STEPS$1 = [
+	{
+		id: "orders",
+		type: "input"
+	},
+	{
+		id: "customers",
+		type: "input"
+	},
+	{
+		id: "clean",
+		status: {
+			key: "succeeded",
+			palette: "success"
+		},
+		type: "default"
+	},
+	{
+		id: "join",
+		status: {
+			key: "running",
+			palette: "info"
+		},
+		type: "default"
+	},
+	{
+		id: "revenue",
+		type: "output"
+	},
+	{
+		id: "churn",
+		status: {
+			key: "failed",
+			palette: "error"
+		},
+		type: "output"
+	}
+];
+const EDGES$2 = [
+	{
+		id: "orders-clean",
+		source: "orders",
+		target: "clean"
+	},
+	{
+		id: "clean-join",
+		source: "clean",
+		target: "join"
+	},
+	{
+		id: "customers-join",
+		source: "customers",
+		target: "join"
+	},
+	{
+		id: "join-revenue",
+		source: "join",
+		target: "revenue"
+	},
+	{
+		id: "join-churn",
+		source: "join",
+		target: "churn"
+	}
+];
+function Pipeline() {
+	const $ = c(38);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = layoutGraph(STEPS$1.map((step) => ({
+			data: {
+				label: t(`pipeline.${step.id}.label`),
+				subtitle: t(`pipeline.${step.id}.kind`),
+				..."status" in step ? { status: {
+					label: t(`status.${step.status.key}`),
+					palette: step.status.palette
+				} } : {}
+			},
+			id: step.id,
+			position: {
+				x: 0,
+				y: 0
+			},
+			type: step.type
+		})), EDGES$2, { ranksep: 64 });
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("controls");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("zoomIn");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(PlusIcon, {});
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Control, {
+			action: "zoomIn",
+			label: t2,
+			children: t3
+		});
+		$[7] = t2;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = t("zoomOut");
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(MinusIcon, {});
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5) {
+		t7 = /* @__PURE__ */ jsx(Control, {
+			action: "zoomOut",
+			label: t5,
+			children: t6
+		});
+		$[12] = t5;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t) {
+		t8 = t("fit");
+		$[14] = t;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(MaximizeIcon, {});
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== t8) {
+		t10 = /* @__PURE__ */ jsx(Control, {
+			action: "fit",
+			label: t8,
+			children: t9
+		});
+		$[17] = t8;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(ZoomLevel, {});
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t1 || $[21] !== t10 || $[22] !== t4 || $[23] !== t7) {
+		t12 = /* @__PURE__ */ jsxs(Controls, {
+			label: t1,
+			children: [
+				t4,
+				t7,
+				t10,
+				t11
+			]
+		});
+		$[20] = t1;
+		$[21] = t10;
+		$[22] = t4;
+		$[23] = t7;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== t) {
+		t13 = t("pipeline.label");
+		$[25] = t;
+		$[26] = t13;
+	} else t13 = $[26];
+	let t14;
+	if ($[27] !== nodes || $[28] !== t13) {
+		t14 = /* @__PURE__ */ jsx(Canvas, {
+			edges: EDGES$2,
+			label: t13,
+			nodes,
+			readOnly: true
+		});
+		$[27] = nodes;
+		$[28] = t13;
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] !== t) {
+		t15 = t("pipeline.caption");
+		$[30] = t;
+		$[31] = t15;
+	} else t15 = $[31];
+	let t16;
+	if ($[32] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Caption, { children: t15 });
+		$[32] = t15;
+		$[33] = t16;
+	} else t16 = $[33];
+	let t17;
+	if ($[34] !== t12 || $[35] !== t14 || $[36] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Root, { children: [
+			t12,
+			t14,
+			t16
+		] });
+		$[34] = t12;
+		$[35] = t14;
+		$[36] = t16;
+		$[37] = t17;
+	} else t17 = $[37];
+	return t17;
+}
+const source$4 = "import { type ReactElement } from \"react\";\n\nimport { MaximizeIcon, MinusIcon, PlusIcon } from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph, layoutGraph } from \"@stealthscale/component-graphs\";\n\nconst STEPS = [\n  { id: \"orders\", type: \"input\" },\n  { id: \"customers\", type: \"input\" },\n  { id: \"clean\", status: { key: \"succeeded\", palette: \"success\" }, type: \"default\" },\n  { id: \"join\", status: { key: \"running\", palette: \"info\" }, type: \"default\" },\n  { id: \"revenue\", type: \"output\" },\n  { id: \"churn\", status: { key: \"failed\", palette: \"error\" }, type: \"output\" },\n] as const;\n\nconst EDGES = [\n  { id: \"orders-clean\", source: \"orders\", target: \"clean\" },\n  { id: \"clean-join\", source: \"clean\", target: \"join\" },\n  { id: \"customers-join\", source: \"customers\", target: \"join\" },\n  { id: \"join-revenue\", source: \"join\", target: \"revenue\" },\n  { id: \"join-churn\", source: \"join\", target: \"churn\" },\n];\n\nexport function Pipeline(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const nodes = layoutGraph(\n    STEPS.map((step) => ({\n      data: {\n        label: t(`pipeline.${step.id}.label`),\n        subtitle: t(`pipeline.${step.id}.kind`),\n        ...(\"status\" in step\n          ? { status: { label: t(`status.${step.status.key}`), palette: step.status.palette } }\n          : {}),\n      },\n      id: step.id,\n      position: { x: 0, y: 0 },\n      type: step.type,\n    })),\n    EDGES,\n    { ranksep: 64 },\n  );\n\n  return (\n    <Graph.Root>\n      <Graph.Controls label={t(\"controls\")}>\n        <Graph.Control action=\"zoomIn\" label={t(\"zoomIn\")}>\n          <PlusIcon />\n        </Graph.Control>\n        <Graph.Control action=\"zoomOut\" label={t(\"zoomOut\")}>\n          <MinusIcon />\n        </Graph.Control>\n        <Graph.Control action=\"fit\" label={t(\"fit\")}>\n          <MaximizeIcon />\n        </Graph.Control>\n        <Graph.ZoomLevel />\n      </Graph.Controls>\n      <Graph.Canvas edges={EDGES} label={t(\"pipeline.label\")} nodes={nodes} readOnly />\n      <Graph.Caption>{t(\"pipeline.caption\")}</Graph.Caption>\n    </Graph.Root>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/services.example.tsx
+var services_example_exports = /* @__PURE__ */ __exportAll({
+	Services: () => Services,
+	source: () => source$3
+});
+const CALLS = [
+	["gateway", "auth"],
+	["gateway", "catalog"],
+	["gateway", "cart"],
+	["gateway", "search"],
+	["cart", "pricing"],
+	["cart", "inventory"],
+	["catalog", "inventory"],
+	["catalog", "media"],
+	["search", "catalog"],
+	["checkout", "cart"],
+	["checkout", "payments"],
+	["checkout", "shipping"],
+	["payments", "fraud"],
+	["payments", "ledger"],
+	["shipping", "inventory"],
+	["gateway", "checkout"]
+];
+const IDS = [...new Set(CALLS.flat())];
+const EDGES$1 = CALLS.map(([source, target]) => ({
+	id: `${source}-${target}`,
+	source,
+	target
+}));
+function Services() {
+	const $ = c(19);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = layoutGraph(IDS.map((id) => ({
+			data: { label: t(`services.${id}`) },
+			id,
+			position: {
+				x: 0,
+				y: 0
+			}
+		})), EDGES$1, { direction: "right" });
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("services.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== nodes || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Canvas, {
+			edges: EDGES$1,
+			label: t1,
+			nodes,
+			readOnly: true
+		});
+		$[4] = nodes;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== t) {
+		t3 = t("services.overview");
+		$[7] = t;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== t3) {
+		t4 = /* @__PURE__ */ jsx(MiniMap$1, { label: t3 });
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
+	let t5;
+	if ($[11] !== t) {
+		t5 = t("services.caption");
+		$[11] = t;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Caption, { children: t5 });
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== t2 || $[16] !== t4 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			direction: "right",
+			ratio: "wide",
+			children: [
+				t2,
+				t4,
+				t6
+			]
+		});
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	return t7;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph, layoutGraph } from \"@stealthscale/component-graphs\";\n\nconst CALLS = [\n  [\"gateway\", \"auth\"],\n  [\"gateway\", \"catalog\"],\n  [\"gateway\", \"cart\"],\n  [\"gateway\", \"search\"],\n  [\"cart\", \"pricing\"],\n  [\"cart\", \"inventory\"],\n  [\"catalog\", \"inventory\"],\n  [\"catalog\", \"media\"],\n  [\"search\", \"catalog\"],\n  [\"checkout\", \"cart\"],\n  [\"checkout\", \"payments\"],\n  [\"checkout\", \"shipping\"],\n  [\"payments\", \"fraud\"],\n  [\"payments\", \"ledger\"],\n  [\"shipping\", \"inventory\"],\n  [\"gateway\", \"checkout\"],\n] as const;\n\nconst IDS = [...new Set(CALLS.flat())];\n\nconst EDGES = CALLS.map(([source, target]) => ({ id: `${source}-${target}`, source, target }));\n\nexport function Services(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const nodes = layoutGraph(\n    IDS.map((id) => ({ data: { label: t(`services.${id}`) }, id, position: { x: 0, y: 0 } })),\n    EDGES,\n    { direction: \"right\" },\n  );\n\n  return (\n    <Graph.Root direction=\"right\" ratio=\"wide\">\n      <Graph.Canvas edges={EDGES} label={t(\"services.label\")} nodes={nodes} readOnly />\n      <Graph.MiniMap label={t(\"services.overview\")} />\n      <Graph.Caption>{t(\"services.caption\")}</Graph.Caption>\n    </Graph.Root>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/versions.example.tsx
+var versions_example_exports = /* @__PURE__ */ __exportAll({
+	Versions: () => Versions,
+	source: () => source$2
+});
+const ORIGIN = {
+	x: 0,
+	y: 0
+};
+const BEFORE = {
+	links: [
+		["screen", "draft"],
+		["draft", "publish"],
+		["publish", "notify"]
+	],
+	steps: [
+		["screen", "screening"],
+		["draft", "small"],
+		["publish", "helpCentre"],
+		["notify", "email"]
+	]
+};
+const AFTER = {
+	links: [
+		["screen", "draft"],
+		["draft", "score"],
+		["score", "publish"]
+	],
+	steps: [
+		["screen", "screening"],
+		["draft", "large"],
+		["score", "three"],
+		["publish", "helpCentre"]
+	]
+};
+function edgesOf(links) {
+	return links.map(([source, target]) => ({
+		id: `${source}-${target}`,
+		source,
+		target
+	}));
+}
+function Versions() {
+	const $ = c(62);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = (steps) => steps.map((t1) => {
+			const [id, detail] = t1;
+			return {
+				data: {
+					label: t(`versions.steps.${id}`),
+					subtitle: t(`versions.details.${detail}`)
+				},
+				id,
+				position: ORIGIN
+			};
+		});
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodesOf = t0;
+	let T0;
+	let T1;
+	let T2;
+	let T3;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let words;
+	if ($[2] !== nodesOf || $[3] !== t) {
+		const before = {
+			edges: edgesOf(BEFORE.links),
+			nodes: nodesOf(BEFORE.steps)
+		};
+		const after = {
+			edges: edgesOf(AFTER.links),
+			nodes: nodesOf(AFTER.steps)
+		};
+		const diff = diffGraphs(before, after);
+		let t9;
+		if ($[17] !== t) {
+			t9 = t("versions.added");
+			$[17] = t;
+			$[18] = t9;
+		} else t9 = $[18];
+		let t10;
+		if ($[19] !== t) {
+			t10 = t("versions.changed");
+			$[19] = t;
+			$[20] = t10;
+		} else t10 = $[20];
+		let t11;
+		if ($[21] !== t) {
+			t11 = t("versions.removed");
+			$[21] = t;
+			$[22] = t11;
+		} else t11 = $[22];
+		let t12;
+		if ($[23] !== t10 || $[24] !== t11 || $[25] !== t9) {
+			t12 = {
+				addedLabel: t9,
+				changedLabel: t10,
+				removedLabel: t11
+			};
+			$[23] = t10;
+			$[24] = t11;
+			$[25] = t9;
+			$[26] = t12;
+		} else t12 = $[26];
+		words = t12;
+		T3 = Grid.Root;
+		t6 = "fit-xs";
+		t7 = "md";
+		const t13 = before.edges;
+		let t14;
+		if ($[27] !== t) {
+			t14 = t("versions.before.label");
+			$[27] = t;
+			$[28] = t14;
+		} else t14 = $[28];
+		let t15;
+		if ($[29] !== t) {
+			t15 = t("versions.before.caption");
+			$[29] = t;
+			$[30] = t15;
+		} else t15 = $[30];
+		let t16;
+		if ($[31] !== t15) {
+			t16 = /* @__PURE__ */ jsx(Caption, { children: t15 });
+			$[31] = t15;
+			$[32] = t16;
+		} else t16 = $[32];
+		const t17 = /* @__PURE__ */ jsxs(Root, {
+			ratio: "portrait",
+			children: [/* @__PURE__ */ jsx(Canvas, {
+				changes: diff,
+				edges: t13,
+				label: t14,
+				nodes: layoutGraph(before.nodes, before.edges),
+				readOnly: true,
+				...words
+			}), t16]
+		});
+		if ($[33] !== t17) {
+			t8 = /* @__PURE__ */ jsx(Grid.Item, { children: t17 });
+			$[33] = t17;
+			$[34] = t8;
+		} else t8 = $[34];
+		T2 = Grid.Item;
+		T1 = Root;
+		t5 = "portrait";
+		T0 = Canvas;
+		t1 = diff;
+		t2 = after.edges;
+		if ($[35] !== t) {
+			t3 = t("versions.after.label");
+			$[35] = t;
+			$[36] = t3;
+		} else t3 = $[36];
+		t4 = layoutGraph(after.nodes, after.edges);
+		$[2] = nodesOf;
+		$[3] = t;
+		$[4] = T0;
+		$[5] = T1;
+		$[6] = T2;
+		$[7] = T3;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+		$[16] = words;
+	} else {
+		T0 = $[4];
+		T1 = $[5];
+		T2 = $[6];
+		T3 = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+		t6 = $[13];
+		t7 = $[14];
+		t8 = $[15];
+		words = $[16];
+	}
+	let t9;
+	if ($[37] !== T0 || $[38] !== t1 || $[39] !== t2 || $[40] !== t3 || $[41] !== t4 || $[42] !== words) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			changes: t1,
+			edges: t2,
+			label: t3,
+			nodes: t4,
+			readOnly: true,
+			...words
+		});
+		$[37] = T0;
+		$[38] = t1;
+		$[39] = t2;
+		$[40] = t3;
+		$[41] = t4;
+		$[42] = words;
+		$[43] = t9;
+	} else t9 = $[43];
+	let t10;
+	if ($[44] !== t) {
+		t10 = t("versions.after.caption");
+		$[44] = t;
+		$[45] = t10;
+	} else t10 = $[45];
+	let t11;
+	if ($[46] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Caption, { children: t10 });
+		$[46] = t10;
+		$[47] = t11;
+	} else t11 = $[47];
+	let t12;
+	if ($[48] !== T1 || $[49] !== t11 || $[50] !== t5 || $[51] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(T1, {
+			ratio: t5,
+			children: [t9, t11]
+		});
+		$[48] = T1;
+		$[49] = t11;
+		$[50] = t5;
+		$[51] = t9;
+		$[52] = t12;
+	} else t12 = $[52];
+	let t13;
+	if ($[53] !== T2 || $[54] !== t12) {
+		t13 = /* @__PURE__ */ jsx(T2, { children: t12 });
+		$[53] = T2;
+		$[54] = t12;
+		$[55] = t13;
+	} else t13 = $[55];
+	let t14;
+	if ($[56] !== T3 || $[57] !== t13 || $[58] !== t6 || $[59] !== t7 || $[60] !== t8) {
+		t14 = /* @__PURE__ */ jsxs(T3, {
+			columns: t6,
+			gap: t7,
+			children: [t8, t13]
+		});
+		$[56] = T3;
+		$[57] = t13;
+		$[58] = t6;
+		$[59] = t7;
+		$[60] = t8;
+		$[61] = t14;
+	} else t14 = $[61];
+	return t14;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport { type Edge, type Node } from \"@xyflow/react\";\n\nimport { Grid } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph, diffGraphs, layoutGraph } from \"@stealthscale/component-graphs\";\n\nconst ORIGIN = { x: 0, y: 0 };\n\nconst BEFORE = {\n  links: [\n    [\"screen\", \"draft\"],\n    [\"draft\", \"publish\"],\n    [\"publish\", \"notify\"],\n  ],\n  steps: [\n    [\"screen\", \"screening\"],\n    [\"draft\", \"small\"],\n    [\"publish\", \"helpCentre\"],\n    [\"notify\", \"email\"],\n  ],\n} as const;\n\nconst AFTER = {\n  links: [\n    [\"screen\", \"draft\"],\n    [\"draft\", \"score\"],\n    [\"score\", \"publish\"],\n  ],\n  steps: [\n    [\"screen\", \"screening\"],\n    [\"draft\", \"large\"],\n    [\"score\", \"three\"],\n    [\"publish\", \"helpCentre\"],\n  ],\n} as const;\n\nfunction edgesOf(links: typeof AFTER.links | typeof BEFORE.links): Edge[] {\n  return links.map(([source, target]) => ({ id: `${source}-${target}`, source, target }));\n}\n\nexport function Versions(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const nodesOf = (steps: typeof AFTER.steps | typeof BEFORE.steps): Node[] =>\n    steps.map(([id, detail]) => ({\n      data: { label: t(`versions.steps.${id}`), subtitle: t(`versions.details.${detail}`) },\n      id,\n      position: ORIGIN,\n    }));\n  const before = { edges: edgesOf(BEFORE.links), nodes: nodesOf(BEFORE.steps) };\n  const after = { edges: edgesOf(AFTER.links), nodes: nodesOf(AFTER.steps) };\n  const diff = diffGraphs(before, after);\n  const words = {\n    addedLabel: t(\"versions.added\"),\n    changedLabel: t(\"versions.changed\"),\n    removedLabel: t(\"versions.removed\"),\n  };\n\n  return (\n    <Grid.Root columns=\"fit-xs\" gap=\"md\">\n      <Grid.Item>\n        <Graph.Root ratio=\"portrait\">\n          <Graph.Canvas\n            changes={diff}\n            edges={before.edges}\n            label={t(\"versions.before.label\")}\n            nodes={layoutGraph(before.nodes, before.edges)}\n            readOnly\n            {...words}\n          />\n          <Graph.Caption>{t(\"versions.before.caption\")}</Graph.Caption>\n        </Graph.Root>\n      </Grid.Item>\n      <Grid.Item>\n        <Graph.Root ratio=\"portrait\">\n          <Graph.Canvas\n            changes={diff}\n            edges={after.edges}\n            label={t(\"versions.after.label\")}\n            nodes={layoutGraph(after.nodes, after.edges)}\n            readOnly\n            {...words}\n          />\n          <Graph.Caption>{t(\"versions.after.caption\")}</Graph.Caption>\n        </Graph.Root>\n      </Grid.Item>\n    </Grid.Root>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/workflow.example.tsx
+var workflow_example_exports = /* @__PURE__ */ __exportAll({
+	Workflow: () => Workflow,
+	source: () => source$1
+});
+const KINDS = [
+	"fraud",
+	"stock",
+	"notice"
+];
+function Workflow() {
+	const $ = c(78);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = t("workflow.placed");
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== t0) {
+		t1 = { label: t0 };
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			x: 0,
+			y: 0
+		};
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== t1) {
+		t3 = {
+			data: t1,
+			id: "placed",
+			position: t2,
+			type: "input"
+		};
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("workflow.receipt");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t4) {
+		t5 = { label: t4 };
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = {
+			x: 0,
+			y: 240
+		};
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== t5) {
+		t7 = {
+			data: t5,
+			id: "receipt",
+			position: t6,
+			type: "output"
+		};
+		$[12] = t5;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== t3 || $[15] !== t7) {
+		t8 = [t3, t7];
+		$[14] = t3;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	const [nodes, setNodes, onNodesChange] = useNodesState(t8);
+	let t9;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = [{
+			id: "placed-receipt",
+			source: "placed",
+			target: "receipt"
+		}];
+		$[17] = t9;
+	} else t9 = $[17];
+	const [edges, setEdges, onEdgesChange] = useEdgesState(t9);
+	let t10;
+	if ($[18] !== edges || $[19] !== nodes) {
+		t10 = {
+			edges,
+			nodes
+		};
+		$[18] = edges;
+		$[19] = nodes;
+		$[20] = t10;
+	} else t10 = $[20];
+	const start = useRef(t10);
+	let t11;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = [];
+		$[21] = t11;
+	} else t11 = $[21];
+	const [versions, setVersions] = useState(t11);
+	const [note, setNote] = useState();
+	let t12;
+	if ($[22] !== t) {
+		t12 = new Map(KINDS.map((kind) => [kind, t(`workflow.kinds.${kind}`)]));
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	const names = t12;
+	let t13;
+	if ($[24] !== setEdges || $[25] !== setNodes) {
+		t13 = (version) => {
+			setVersions((known) => [version, ...known]);
+			setNote(version.note);
+			setNodes(version.nodes);
+			setEdges(version.edges);
+		};
+		$[24] = setEdges;
+		$[25] = setNodes;
+		$[26] = t13;
+	} else t13 = $[26];
+	const commit = t13;
+	let t14;
+	if ($[27] !== commit || $[28] !== edges || $[29] !== names || $[30] !== nodes || $[31] !== t) {
+		t14 = (kind_0, position) => {
+			const label = names.get(kind_0) ?? kind_0;
+			const id = `${kind_0}-${crypto.randomUUID()}`;
+			commit({
+				edges,
+				nodes: [...nodes, {
+					data: { label },
+					id,
+					origin: [.5, .5],
+					position
+				}],
+				note: t("workflow.edits.add", { name: label })
+			});
+		};
+		$[27] = commit;
+		$[28] = edges;
+		$[29] = names;
+		$[30] = nodes;
+		$[31] = t;
+		$[32] = t14;
+	} else t14 = $[32];
+	const add = t14;
+	let t15;
+	if ($[33] !== add || $[34] !== t) {
+		t15 = KINDS.map((kind_1) => /* @__PURE__ */ jsx(PaletteItem, {
+			item: kind_1,
+			onAdd: add,
+			size: "sm",
+			children: t(`workflow.add.${kind_1}`)
+		}, kind_1));
+		$[33] = add;
+		$[34] = t;
+		$[35] = t15;
+	} else t15 = $[35];
+	let t16;
+	if ($[36] !== t15) {
+		t16 = /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: "sm",
+			wrap: true,
+			children: t15
+		});
+		$[36] = t15;
+		$[37] = t16;
+	} else t16 = $[37];
+	let t17;
+	if ($[38] !== t) {
+		t17 = t("workflow.label");
+		$[38] = t;
+		$[39] = t17;
+	} else t17 = $[39];
+	let t18;
+	if ($[40] !== commit || $[41] !== t) {
+		t18 = (graph, step) => {
+			const touched = step.nodes.length > 0 ? step.nodes : step.edges;
+			const kind_2 = step.type === "remove" && step.nodes.length === 0 ? "unlink" : step.type;
+			commit({
+				...graph,
+				note: t(`workflow.edits.${kind_2}`, { count: touched.length })
+			});
+		};
+		$[40] = commit;
+		$[41] = t;
+		$[42] = t18;
+	} else t18 = $[42];
+	let t19;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = /* @__PURE__ */ jsx(XIcon, {});
+		$[43] = t19;
+	} else t19 = $[43];
+	let t20;
+	if ($[44] !== t) {
+		t20 = (t21) => {
+			const { source, target } = t21;
+			return t("workflow.remove", {
+				source,
+				target
+			});
+		};
+		$[44] = t;
+		$[45] = t20;
+	} else t20 = $[45];
+	let t21;
+	if ($[46] !== add || $[47] !== edges || $[48] !== nodes || $[49] !== onEdgesChange || $[50] !== onNodesChange || $[51] !== t17 || $[52] !== t18 || $[53] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Canvas, {
+			edges,
+			label: t17,
+			nodes,
+			onDropItem: add,
+			onEdgesChange,
+			onGraphChange: t18,
+			onNodesChange,
+			removeGlyph: t19,
+			removeName: t20
+		});
+		$[46] = add;
+		$[47] = edges;
+		$[48] = nodes;
+		$[49] = onEdgesChange;
+		$[50] = onNodesChange;
+		$[51] = t17;
+		$[52] = t18;
+		$[53] = t20;
+		$[54] = t21;
+	} else t21 = $[54];
+	let t22;
+	if ($[55] !== note || $[56] !== t) {
+		t22 = note ?? t("workflow.none");
+		$[55] = note;
+		$[56] = t;
+		$[57] = t22;
+	} else t22 = $[57];
+	let t23;
+	if ($[58] !== t22) {
+		t23 = /* @__PURE__ */ jsx("output", { children: t22 });
+		$[58] = t22;
+		$[59] = t23;
+	} else t23 = $[59];
+	const t24 = versions.length === 0 ? true : void 0;
+	let t25;
+	if ($[60] !== setEdges || $[61] !== setNodes || $[62] !== t || $[63] !== versions) {
+		t25 = () => {
+			const [last, ...rest] = versions;
+			if (last === void 0) return;
+			const graph_0 = rest[0] ?? start.current;
+			setNodes(graph_0.nodes);
+			setEdges(graph_0.edges);
+			setVersions(rest);
+			setNote(t("workflow.undone", { edit: last.note }));
+		};
+		$[60] = setEdges;
+		$[61] = setNodes;
+		$[62] = t;
+		$[63] = versions;
+		$[64] = t25;
+	} else t25 = $[64];
+	let t26;
+	if ($[65] !== t) {
+		t26 = t("workflow.undo");
+		$[65] = t;
+		$[66] = t26;
+	} else t26 = $[66];
+	let t27;
+	if ($[67] !== t24 || $[68] !== t25 || $[69] !== t26) {
+		t27 = /* @__PURE__ */ jsx(Button, {
+			"aria-disabled": t24,
+			onClick: t25,
+			size: "sm",
+			variant: "outline",
+			children: t26
+		});
+		$[67] = t24;
+		$[68] = t25;
+		$[69] = t26;
+		$[70] = t27;
+	} else t27 = $[70];
+	let t28;
+	if ($[71] !== t23 || $[72] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(Summary, { children: [t23, t27] });
+		$[71] = t23;
+		$[72] = t27;
+		$[73] = t28;
+	} else t28 = $[73];
+	let t29;
+	if ($[74] !== t16 || $[75] !== t21 || $[76] !== t28) {
+		t29 = /* @__PURE__ */ jsxs(Root, { children: [
+			t16,
+			t21,
+			t28
+		] });
+		$[74] = t16;
+		$[75] = t21;
+		$[76] = t28;
+		$[77] = t29;
+	} else t29 = $[77];
+	return t29;
+}
+const source$1 = "import { type ReactElement, useRef, useState } from \"react\";\n\nimport { type Edge, type Node, useEdgesState, useNodesState, type XYPosition } from \"@xyflow/react\";\nimport { XIcon } from \"lucide-react\";\n\nimport { Button } from \"@stealthscale/component-actions\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph } from \"@stealthscale/component-graphs\";\n\nconst KINDS = [\"fraud\", \"stock\", \"notice\"] as const;\n\ninterface Version {\n  readonly edges: Edge[];\n  readonly nodes: Node[];\n  readonly note: string;\n}\n\nexport function Workflow(): ReactElement {\n  const { t } = useWords(\"graph\");\n  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([\n    {\n      data: { label: t(\"workflow.placed\") },\n      id: \"placed\",\n      position: { x: 0, y: 0 },\n      type: \"input\",\n    },\n    {\n      data: { label: t(\"workflow.receipt\") },\n      id: \"receipt\",\n      position: { x: 0, y: 240 },\n      type: \"output\",\n    },\n  ]);\n  const [edges, setEdges, onEdgesChange] = useEdgesState([\n    { id: \"placed-receipt\", source: \"placed\", target: \"receipt\" },\n  ]);\n  const start = useRef({ edges, nodes });\n  const [versions, setVersions] = useState<Version[]>([]);\n  const [note, setNote] = useState<string>();\n  const names = new Map<string, string>(KINDS.map((kind) => [kind, t(`workflow.kinds.${kind}`)]));\n  const commit = (version: Version): void => {\n    setVersions((known) => [version, ...known]);\n    setNote(version.note);\n    setNodes(version.nodes);\n    setEdges(version.edges);\n  };\n  const add = (kind: string, position: XYPosition): void => {\n    const label = names.get(kind) ?? kind;\n    const id = `${kind}-${crypto.randomUUID()}`;\n\n    commit({\n      edges,\n      nodes: [...nodes, { data: { label }, id, origin: [0.5, 0.5], position }],\n      note: t(\"workflow.edits.add\", { name: label }),\n    });\n  };\n\n  return (\n    <Graph.Root>\n      <Stack direction=\"row\" gap=\"sm\" wrap>\n        {KINDS.map((kind) => (\n          <Graph.PaletteItem item={kind} key={kind} onAdd={add} size=\"sm\">\n            {t(`workflow.add.${kind}`)}\n          </Graph.PaletteItem>\n        ))}\n      </Stack>\n      <Graph.Canvas\n        edges={edges}\n        label={t(\"workflow.label\")}\n        nodes={nodes}\n        onDropItem={add}\n        onEdgesChange={onEdgesChange}\n        onGraphChange={(graph, step) => {\n          const touched = step.nodes.length > 0 ? step.nodes : step.edges;\n          const kind = step.type === \"remove\" && step.nodes.length === 0 ? \"unlink\" : step.type;\n\n          commit({ ...graph, note: t(`workflow.edits.${kind}`, { count: touched.length }) });\n        }}\n        onNodesChange={onNodesChange}\n        removeGlyph={<XIcon />}\n        removeName={({ source, target }) => t(\"workflow.remove\", { source, target })}\n      />\n      <Graph.Summary>\n        <output>{note ?? t(\"workflow.none\")}</output>\n        <Button\n          aria-disabled={versions.length === 0 ? true : undefined}\n          onClick={() => {\n            const [last, ...rest] = versions;\n\n            if (last === undefined) return;\n\n            const graph = rest[0] ?? start.current;\n\n            setNodes(graph.nodes);\n            setEdges(graph.edges);\n            setVersions(rest);\n            setNote(t(\"workflow.undone\", { edit: last.note }));\n          }}\n          size=\"sm\"\n          variant=\"outline\"\n        >\n          {t(\"workflow.undo\")}\n        </Button>\n      </Graph.Summary>\n    </Graph.Root>\n  );\n}\n";
+//#endregion
+//#region src/graph/examples/review.example.tsx
+var review_example_exports = /* @__PURE__ */ __exportAll({
+	Review: () => Review,
+	source: () => source
+});
+const STEPS = [
+	"draft",
+	"review",
+	"publish"
+];
+const EDGES = [{
+	id: "draft-review",
+	source: "draft",
+	target: "review"
+}, {
+	id: "review-publish",
+	source: "review",
+	target: "publish"
+}];
+function Review(props) {
+	const $ = c(10);
+	const { t } = useWords("graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = layoutGraph(STEPS.map((step) => ({
+			data: { label: t(`review.${step}`) },
+			id: step,
+			position: {
+				x: 0,
+				y: 0
+			},
+			type: step === "draft" ? "input" : step === "publish" ? "output" : "default"
+		})), EDGES, { ranksep: 48 });
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("review.label");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== nodes || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Canvas, {
+			edges: EDGES,
+			label: t1,
+			nodes,
+			readOnly: true
+		});
+		$[4] = nodes;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Root, {
+			...props,
+			children: t2
+		});
+		$[7] = props;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { Graph, layoutGraph } from \"@stealthscale/component-graphs\";\n\nconst STEPS = [\"draft\", \"review\", \"publish\"] as const;\n\nconst EDGES = [\n  { id: \"draft-review\", source: \"draft\", target: \"review\" },\n  { id: \"review-publish\", source: \"review\", target: \"publish\" },\n];\n\nexport function Review(props: Graph.RootProps): ReactElement {\n  const { t } = useWords(\"graph\");\n  const nodes = layoutGraph(\n    STEPS.map((step) => ({\n      data: { label: t(`review.${step}`) },\n      id: step,\n      position: { x: 0, y: 0 },\n      type: step === \"draft\" ? \"input\" : step === \"publish\" ? \"output\" : \"default\",\n    })),\n    EDGES,\n    { ranksep: 48 },\n  );\n\n  return (\n    <Graph.Root {...props}>\n      <Graph.Canvas edges={EDGES} label={t(\"review.label\")} nodes={nodes} readOnly />\n    </Graph.Root>\n  );\n}\n";
+//#endregion
+//#region src/graph/graph.specimen.tsx
+/**
+* Catalogue page for the graph kit.
+*
+* @remarks
+*   `scenesOf` generates the `ratio` scene from a three-step review flow, one canvas per ratio in
+*   an `md` room. The other scenes are hand-written: a read-only data pipeline laid out by rank, an
+*   editable canvas whose connections a person makes and removes, a palette that adds steps with a
+*   history that undoes each edit, a judge whose two ports fan out with a problem on the card, a
+*   map of services with the overview map, two versions of a flow marked with their changes, and
+*   the list of those changes. Every scene renders a component from `examples/` and shows that file
+*   as its source. The words are keys under `graph` in `locales/en/specimen/graph.json`. The page
+*   imports the review example directly, because the props reader follows a specimen's own imports
+*   and the example files they name, not an examples barrel.
+*/
+/**
+* Hand-written scene for a read-only pipeline laid out by rank.
+*/
+const read = {
+	about: "graph.pipeline.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Pipeline, {})
+	}),
+	example: pipeline_example_exports,
+	title: "graph.pipeline.title"
+};
+/**
+* Hand-written scene for a canvas whose connections a person makes and removes.
+*/
+const edit = {
+	about: "graph.editor.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Editor, {})
+	}),
+	example: editor_example_exports,
+	title: "graph.editor.title"
+};
+/**
+* Hand-written scene for a palette that adds steps and a history that undoes each edit.
+*/
+const palette = {
+	about: "graph.workflow.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Workflow, {})
+	}),
+	example: workflow_example_exports,
+	title: "graph.workflow.title"
+};
+/**
+* Hand-written scene for named ports that fan out and a problem on the card.
+*/
+const ports = {
+	about: "graph.judge.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Judge, {})
+	}),
+	example: judge_example_exports,
+	title: "graph.judge.title"
+};
+/**
+* Hand-written scene for a graph larger than its canvas, with the overview map.
+*/
+const overview = {
+	about: "graph.services.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "4xl",
+		children: /* @__PURE__ */ jsx(Services, {})
+	}),
+	example: services_example_exports,
+	title: "graph.services.title"
+};
+/**
+* Hand-written scene for two versions of a flow side by side, each marked with the changes.
+*/
+const compared = {
+	about: "graph.versions.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "4xl",
+		children: /* @__PURE__ */ jsx(Versions, {})
+	}),
+	example: versions_example_exports,
+	title: "graph.versions.title"
+};
+/**
+* Hand-written scene for the list of changes between two versions.
+*/
+const listed = {
+	about: "graph.versions.list.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "md",
+		children: /* @__PURE__ */ jsx(Changes, {})
+	}),
+	example: changes_example_exports,
+	title: "graph.versions.list.title"
+};
+var graph_specimen_default = specimen({
+	about: "graph.about",
+	id: "components/graphs/graph",
+	imports: "import { diffGraphs, Graph, layoutGraph } from \"@stealthscale/component-graphs\";",
+	scenes: [
+		read,
+		edit,
+		palette,
+		ports,
+		overview,
+		compared,
+		listed,
+		...scenesOf(recipe, {
+			axes: { ratio: { direction: "column" } },
+			draw: (props) => /* @__PURE__ */ jsx(Room, {
+				size: "md",
+				children: /* @__PURE__ */ jsx(Review, { ...props })
+			}),
+			example: review_example_exports,
+			namespace: "graph"
+		})
+	],
+	title: "graph.title"
+});
+//#endregion
+export { compared, graph_specimen_default as default, edit, listed, overview, palette, ports, read };