@stealthscale/component-graphs 0.1.0 → 0.2.2

package/dist/pages/directed-graph/directed-graph.js

@@ -0,0 +1,1170 @@
+import { t as __exportAll } from "../../rolldown-runtime-D7D4PA-g.js";
+import { a as ZoomLevel, c as Controls, d as DirectedGraph, l as Control, s as MiniMap, u as treeEdges } from "../../shared-DOF4V8-Q.js";
+import { useState } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Room, specimen, useWords } from "@stealthscale/specimen";
+import { BrainCircuitIcon, ChartColumnIcon, ChevronDownIcon, DatabaseIcon, FileDownIcon, LayersIcon, MaximizeIcon, MinusIcon, PlusIcon } from "lucide-react";
+import { NativeSelect } from "@stealthscale/component-forms";
+import { Stack } from "@stealthscale/component-layout";
+//#region src/directed-graph/examples/controlled.example.tsx
+var controlled_example_exports = /* @__PURE__ */ __exportAll({
+	Controlled: () => Controlled,
+	source: () => source$4
+});
+const DATASETS$2 = [
+	{
+		icon: /* @__PURE__ */ jsx(DatabaseIcon, {}),
+		id: "orders",
+		kind: "source"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(DatabaseIcon, {}),
+		id: "refunds",
+		kind: "source"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(LayersIcon, {}),
+		id: "net_orders",
+		kind: "model"
+	},
+	{
+		icon: /* @__PURE__ */ jsx(ChartColumnIcon, {}),
+		id: "exec_overview",
+		kind: "dashboard"
+	}
+];
+const EDGES$3 = [
+	{
+		source: "orders",
+		target: "net_orders"
+	},
+	{
+		source: "refunds",
+		target: "net_orders"
+	},
+	{
+		source: "net_orders",
+		target: "exec_overview"
+	}
+];
+function Controlled() {
+	const $ = c(64);
+	const { t } = useWords("directed-graph");
+	const [focus, setFocus] = useState("net_orders");
+	let T0;
+	let T1;
+	let T2;
+	let nodes;
+	let t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== focus || $[1] !== t) {
+		let t6;
+		if ($[12] !== t) {
+			t6 = (dataset) => ({
+				icon: dataset.icon,
+				id: dataset.id,
+				kind: t(`kinds.${dataset.kind}`),
+				label: dataset.kind === "dashboard" ? t(`lineage.${dataset.id}`) : dataset.id
+			});
+			$[12] = t;
+			$[13] = t6;
+		} else t6 = $[13];
+		nodes = DATASETS$2.map(t6);
+		T2 = Stack;
+		t5 = "flex-start";
+		T1 = NativeSelect.Root;
+		T0 = NativeSelect.Field;
+		if ($[14] !== t) {
+			t0 = t("controlled.pick");
+			$[14] = t;
+			$[15] = t0;
+		} else t0 = $[15];
+		if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = (event) => {
+				setFocus(event.target.value === "" ? null : event.target.value);
+			};
+			$[16] = t1;
+		} else t1 = $[16];
+		if ($[17] !== t) {
+			t2 = t("controlled.none");
+			$[17] = t;
+			$[18] = t2;
+		} else t2 = $[18];
+		t3 = focus ?? "";
+		t4 = nodes.map(_temp);
+		$[0] = focus;
+		$[1] = t;
+		$[2] = T0;
+		$[3] = T1;
+		$[4] = T2;
+		$[5] = nodes;
+		$[6] = t0;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else {
+		T0 = $[2];
+		T1 = $[3];
+		T2 = $[4];
+		nodes = $[5];
+		t0 = $[6];
+		t1 = $[7];
+		t2 = $[8];
+		t3 = $[9];
+		t4 = $[10];
+		t5 = $[11];
+	}
+	let t6;
+	if ($[19] !== T0 || $[20] !== t0 || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			"aria-label": t0,
+			onChange: t1,
+			placeholder: t2,
+			value: t3,
+			children: t4
+		});
+		$[19] = T0;
+		$[20] = t0;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t6;
+	} else t6 = $[25];
+	let t7;
+	if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(NativeSelect.Indicator, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) });
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== T1 || $[28] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(T1, { children: [t6, t7] });
+		$[27] = T1;
+		$[28] = t6;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== t) {
+		t9 = t("words.clear");
+		$[30] = t;
+		$[31] = t9;
+	} else t9 = $[31];
+	let t10;
+	if ($[32] !== t) {
+		t10 = t("words.downstream");
+		$[32] = t;
+		$[33] = t10;
+	} else t10 = $[33];
+	let t11;
+	if ($[34] !== t) {
+		t11 = (t12) => {
+			const { source, target } = t12;
+			return t("words.edge", {
+				source,
+				target
+			});
+		};
+		$[34] = t;
+		$[35] = t11;
+	} else t11 = $[35];
+	let t12;
+	if ($[36] !== t) {
+		t12 = t("words.focus");
+		$[36] = t;
+		$[37] = t12;
+	} else t12 = $[37];
+	let t13;
+	if ($[38] !== t) {
+		t13 = t("controlled.label");
+		$[38] = t;
+		$[39] = t13;
+	} else t13 = $[39];
+	let t14;
+	if ($[40] !== t) {
+		t14 = t("words.description");
+		$[40] = t;
+		$[41] = t14;
+	} else t14 = $[41];
+	let t15;
+	if ($[42] !== t) {
+		t15 = t("words.prompt");
+		$[42] = t;
+		$[43] = t15;
+	} else t15 = $[43];
+	let t16;
+	let t17;
+	if ($[44] !== t) {
+		t16 = (t18) => {
+			const { downstream, name, upstream } = t18;
+			return t("words.summary", {
+				downstream,
+				name,
+				upstream
+			});
+		};
+		t17 = t("words.upstream");
+		$[44] = t;
+		$[45] = t16;
+		$[46] = t17;
+	} else {
+		t16 = $[45];
+		t17 = $[46];
+	}
+	let t18;
+	if ($[47] !== focus || $[48] !== nodes || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15 || $[55] !== t16 || $[56] !== t17 || $[57] !== t9) {
+		t18 = /* @__PURE__ */ jsx(DirectedGraph, {
+			clearLabel: t9,
+			direction: "right",
+			downstreamLabel: t10,
+			edgeName: t11,
+			edges: EDGES$3,
+			focus,
+			focusLabel: t12,
+			label: t13,
+			nodeDescription: t14,
+			nodes,
+			onFocusChange: setFocus,
+			promptLabel: t15,
+			summary: t16,
+			upstreamLabel: t17
+		});
+		$[47] = focus;
+		$[48] = nodes;
+		$[49] = t10;
+		$[50] = t11;
+		$[51] = t12;
+		$[52] = t13;
+		$[53] = t14;
+		$[54] = t15;
+		$[55] = t16;
+		$[56] = t17;
+		$[57] = t9;
+		$[58] = t18;
+	} else t18 = $[58];
+	let t19;
+	if ($[59] !== T2 || $[60] !== t18 || $[61] !== t5 || $[62] !== t8) {
+		t19 = /* @__PURE__ */ jsxs(T2, {
+			align: t5,
+			children: [t8, t18]
+		});
+		$[59] = T2;
+		$[60] = t18;
+		$[61] = t5;
+		$[62] = t8;
+		$[63] = t19;
+	} else t19 = $[63];
+	return t19;
+}
+function _temp(node) {
+	return /* @__PURE__ */ jsx("option", {
+		value: node.id,
+		children: node.label
+	}, node.id);
+}
+const source$4 = "import { type ReactElement, useState } from \"react\";\n\nimport { ChartColumnIcon, ChevronDownIcon, DatabaseIcon, LayersIcon } from \"lucide-react\";\n\nimport { NativeSelect } from \"@stealthscale/component-forms\";\nimport { Stack } from \"@stealthscale/component-layout\";\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DirectedGraph } from \"@stealthscale/component-graphs\";\n\nconst DATASETS = [\n  { icon: <DatabaseIcon />, id: \"orders\", kind: \"source\" },\n  { icon: <DatabaseIcon />, id: \"refunds\", kind: \"source\" },\n  { icon: <LayersIcon />, id: \"net_orders\", kind: \"model\" },\n  { icon: <ChartColumnIcon />, id: \"exec_overview\", kind: \"dashboard\" },\n] as const;\n\nconst EDGES = [\n  { source: \"orders\", target: \"net_orders\" },\n  { source: \"refunds\", target: \"net_orders\" },\n  { source: \"net_orders\", target: \"exec_overview\" },\n];\n\nexport function Controlled(): ReactElement {\n  const { t } = useWords(\"directed-graph\");\n  const [focus, setFocus] = useState<null | string>(\"net_orders\");\n  const nodes = DATASETS.map((dataset) => ({\n    icon: dataset.icon,\n    id: dataset.id,\n    kind: t(`kinds.${dataset.kind}`),\n    label: dataset.kind === \"dashboard\" ? t(`lineage.${dataset.id}`) : dataset.id,\n  }));\n\n  return (\n    <Stack align=\"flex-start\">\n      <NativeSelect.Root>\n        <NativeSelect.Field\n          aria-label={t(\"controlled.pick\")}\n          onChange={(event) => {\n            setFocus(event.target.value === \"\" ? null : event.target.value);\n          }}\n          placeholder={t(\"controlled.none\")}\n          value={focus ?? \"\"}\n        >\n          {nodes.map((node) => (\n            <option key={node.id} value={node.id}>\n              {node.label}\n            </option>\n          ))}\n        </NativeSelect.Field>\n        <NativeSelect.Indicator>\n          <ChevronDownIcon />\n        </NativeSelect.Indicator>\n      </NativeSelect.Root>\n      <DirectedGraph\n        clearLabel={t(\"words.clear\")}\n        direction=\"right\"\n        downstreamLabel={t(\"words.downstream\")}\n        edgeName={({ source, target }) => t(\"words.edge\", { source, target })}\n        edges={EDGES}\n        focus={focus}\n        focusLabel={t(\"words.focus\")}\n        label={t(\"controlled.label\")}\n        nodeDescription={t(\"words.description\")}\n        nodes={nodes}\n        onFocusChange={setFocus}\n        promptLabel={t(\"words.prompt\")}\n        summary={({ downstream, name, upstream }) =>\n          t(\"words.summary\", { downstream, name, upstream })\n        }\n        upstreamLabel={t(\"words.upstream\")}\n      />\n    </Stack>\n  );\n}\n";
+//#endregion
+//#region src/directed-graph/examples/empty.example.tsx
+var empty_example_exports = /* @__PURE__ */ __exportAll({
+	Empty: () => Empty,
+	source: () => source$3
+});
+function Empty() {
+	const $ = c(9);
+	const { t } = useWords("directed-graph");
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== t) {
+		t1 = t("empty.message");
+		$[1] = t;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t) {
+		t2 = t("empty.label");
+		$[3] = t;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = [];
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t4 = /* @__PURE__ */ jsx(DirectedGraph, {
+			edges: t0,
+			emptyLabel: t1,
+			label: t2,
+			nodes: t3,
+			ratio: "wide"
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+const source$3 = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DirectedGraph } from \"@stealthscale/component-graphs\";\n\nexport function Empty(): ReactElement {\n  const { t } = useWords(\"directed-graph\");\n\n  return (\n    <DirectedGraph\n      edges={[]}\n      emptyLabel={t(\"empty.message\")}\n      label={t(\"empty.label\")}\n      nodes={[]}\n      ratio=\"wide\"\n    />\n  );\n}\n";
+//#endregion
+//#region src/directed-graph/examples/isolate.example.tsx
+var isolate_example_exports = /* @__PURE__ */ __exportAll({
+	Isolate: () => Isolate,
+	source: () => source$2
+});
+const ICONS$1 = {
+	dashboard: /* @__PURE__ */ jsx(ChartColumnIcon, {}),
+	features: /* @__PURE__ */ jsx(BrainCircuitIcon, {}),
+	job: /* @__PURE__ */ jsx(FileDownIcon, {}),
+	model: /* @__PURE__ */ jsx(LayersIcon, {}),
+	source: /* @__PURE__ */ jsx(DatabaseIcon, {})
+};
+const DATASETS$1 = [
+	{
+		id: "stripe_charges",
+		kind: "source"
+	},
+	{
+		id: "app_events",
+		kind: "source"
+	},
+	{
+		id: "crm_accounts",
+		kind: "source"
+	},
+	{
+		id: "stg_charges",
+		kind: "model"
+	},
+	{
+		id: "stg_events",
+		kind: "model"
+	},
+	{
+		id: "stg_accounts",
+		kind: "model"
+	},
+	{
+		id: "fct_revenue",
+		kind: "model"
+	},
+	{
+		id: "dim_customer",
+		kind: "model"
+	},
+	{
+		id: "exec_overview",
+		kind: "dashboard"
+	},
+	{
+		id: "churn_features",
+		kind: "features"
+	},
+	{
+		id: "finance_export",
+		kind: "job"
+	}
+];
+const EDGES$2 = [
+	{
+		source: "stripe_charges",
+		target: "stg_charges"
+	},
+	{
+		source: "app_events",
+		target: "stg_events"
+	},
+	{
+		source: "crm_accounts",
+		target: "stg_accounts"
+	},
+	{
+		source: "stg_charges",
+		target: "fct_revenue"
+	},
+	{
+		source: "stg_events",
+		target: "fct_revenue"
+	},
+	{
+		source: "stg_accounts",
+		target: "dim_customer"
+	},
+	{
+		source: "stg_events",
+		target: "dim_customer"
+	},
+	{
+		source: "fct_revenue",
+		target: "exec_overview"
+	},
+	{
+		source: "dim_customer",
+		target: "exec_overview"
+	},
+	{
+		source: "dim_customer",
+		target: "churn_features"
+	},
+	{
+		source: "fct_revenue",
+		target: "finance_export"
+	}
+];
+function Isolate() {
+	const $ = c(31);
+	const { t } = useWords("directed-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = DATASETS$1.map((dataset) => ({
+			icon: ICONS$1[dataset.kind],
+			id: dataset.id,
+			kind: t(`kinds.${dataset.kind}`),
+			label: dataset.kind === "dashboard" || dataset.kind === "job" ? t(`lineage.${dataset.id}`) : dataset.id
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("words.clear");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("words.downstream");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = (t4) => {
+			const { source, target } = t4;
+			return t("words.edge", {
+				source,
+				target
+			});
+		};
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("words.focus");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t) {
+		t5 = t("isolate.label");
+		$[10] = t;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t) {
+		t6 = t("words.description");
+		$[12] = t;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== t) {
+		t7 = t("words.prompt");
+		$[14] = t;
+		$[15] = t7;
+	} else t7 = $[15];
+	let t8;
+	if ($[16] !== t) {
+		t8 = (t9) => {
+			const { downstream, name, upstream } = t9;
+			return t("words.summary", {
+				downstream,
+				name,
+				upstream
+			});
+		};
+		$[16] = t;
+		$[17] = t8;
+	} else t8 = $[17];
+	let t9;
+	if ($[18] !== t) {
+		t9 = t("words.upstream");
+		$[18] = t;
+		$[19] = t9;
+	} else t9 = $[19];
+	let t10;
+	if ($[20] !== nodes || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t6 || $[27] !== t7 || $[28] !== t8 || $[29] !== t9) {
+		t10 = /* @__PURE__ */ jsx(DirectedGraph, {
+			clearLabel: t1,
+			defaultFocus: "fct_revenue",
+			depth: 1,
+			direction: "right",
+			downstreamLabel: t2,
+			edgeName: t3,
+			edges: EDGES$2,
+			focusLabel: t4,
+			label: t5,
+			nodeDescription: t6,
+			nodes,
+			promptLabel: t7,
+			summary: t8,
+			trace: "isolate",
+			upstreamLabel: t9
+		});
+		$[20] = nodes;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	return t10;
+}
+const source$2 = "import { type ReactElement } from \"react\";\n\nimport {\n  BrainCircuitIcon,\n  ChartColumnIcon,\n  DatabaseIcon,\n  FileDownIcon,\n  LayersIcon,\n} from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DirectedGraph } from \"@stealthscale/component-graphs\";\n\nconst ICONS = {\n  dashboard: <ChartColumnIcon />,\n  features: <BrainCircuitIcon />,\n  job: <FileDownIcon />,\n  model: <LayersIcon />,\n  source: <DatabaseIcon />,\n};\n\nconst DATASETS = [\n  { id: \"stripe_charges\", kind: \"source\" },\n  { id: \"app_events\", kind: \"source\" },\n  { id: \"crm_accounts\", kind: \"source\" },\n  { id: \"stg_charges\", kind: \"model\" },\n  { id: \"stg_events\", kind: \"model\" },\n  { id: \"stg_accounts\", kind: \"model\" },\n  { id: \"fct_revenue\", kind: \"model\" },\n  { id: \"dim_customer\", kind: \"model\" },\n  { id: \"exec_overview\", kind: \"dashboard\" },\n  { id: \"churn_features\", kind: \"features\" },\n  { id: \"finance_export\", kind: \"job\" },\n] as const;\n\nconst EDGES = [\n  { source: \"stripe_charges\", target: \"stg_charges\" },\n  { source: \"app_events\", target: \"stg_events\" },\n  { source: \"crm_accounts\", target: \"stg_accounts\" },\n  { source: \"stg_charges\", target: \"fct_revenue\" },\n  { source: \"stg_events\", target: \"fct_revenue\" },\n  { source: \"stg_accounts\", target: \"dim_customer\" },\n  { source: \"stg_events\", target: \"dim_customer\" },\n  { source: \"fct_revenue\", target: \"exec_overview\" },\n  { source: \"dim_customer\", target: \"exec_overview\" },\n  { source: \"dim_customer\", target: \"churn_features\" },\n  { source: \"fct_revenue\", target: \"finance_export\" },\n];\n\nexport function Isolate(): ReactElement {\n  const { t } = useWords(\"directed-graph\");\n  const nodes = DATASETS.map((dataset) => ({\n    icon: ICONS[dataset.kind],\n    id: dataset.id,\n    kind: t(`kinds.${dataset.kind}`),\n    label:\n      dataset.kind === \"dashboard\" || dataset.kind === \"job\"\n        ? t(`lineage.${dataset.id}`)\n        : dataset.id,\n  }));\n\n  return (\n    <DirectedGraph\n      clearLabel={t(\"words.clear\")}\n      defaultFocus=\"fct_revenue\"\n      depth={1}\n      direction=\"right\"\n      downstreamLabel={t(\"words.downstream\")}\n      edgeName={({ source, target }) => t(\"words.edge\", { source, target })}\n      edges={EDGES}\n      focusLabel={t(\"words.focus\")}\n      label={t(\"isolate.label\")}\n      nodeDescription={t(\"words.description\")}\n      nodes={nodes}\n      promptLabel={t(\"words.prompt\")}\n      summary={({ downstream, name, upstream }) =>\n        t(\"words.summary\", { downstream, name, upstream })\n      }\n      trace=\"isolate\"\n      upstreamLabel={t(\"words.upstream\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/directed-graph/examples/lineage.example.tsx
+var lineage_example_exports = /* @__PURE__ */ __exportAll({
+	Lineage: () => Lineage,
+	source: () => source$1
+});
+const ICONS = {
+	dashboard: /* @__PURE__ */ jsx(ChartColumnIcon, {}),
+	features: /* @__PURE__ */ jsx(BrainCircuitIcon, {}),
+	job: /* @__PURE__ */ jsx(FileDownIcon, {}),
+	model: /* @__PURE__ */ jsx(LayersIcon, {}),
+	source: /* @__PURE__ */ jsx(DatabaseIcon, {})
+};
+const DATASETS = [
+	{
+		id: "stripe_charges",
+		kind: "source"
+	},
+	{
+		id: "app_events",
+		kind: "source"
+	},
+	{
+		id: "crm_accounts",
+		kind: "source"
+	},
+	{
+		id: "stg_charges",
+		kind: "model"
+	},
+	{
+		id: "stg_events",
+		kind: "model",
+		status: {
+			key: "failed",
+			palette: "error"
+		}
+	},
+	{
+		id: "stg_accounts",
+		kind: "model"
+	},
+	{
+		id: "fct_revenue",
+		kind: "model"
+	},
+	{
+		id: "dim_customer",
+		kind: "model",
+		status: {
+			key: "stale",
+			palette: "warning"
+		}
+	},
+	{
+		id: "exec_overview",
+		kind: "dashboard"
+	},
+	{
+		id: "churn_features",
+		kind: "features"
+	},
+	{
+		id: "finance_export",
+		kind: "job"
+	}
+];
+const EDGES$1 = [
+	{
+		source: "stripe_charges",
+		target: "stg_charges"
+	},
+	{
+		source: "app_events",
+		target: "stg_events"
+	},
+	{
+		source: "crm_accounts",
+		target: "stg_accounts"
+	},
+	{
+		source: "stg_charges",
+		target: "fct_revenue"
+	},
+	{
+		source: "stg_events",
+		target: "fct_revenue"
+	},
+	{
+		source: "stg_accounts",
+		target: "dim_customer"
+	},
+	{
+		source: "stg_events",
+		target: "dim_customer"
+	},
+	{
+		source: "fct_revenue",
+		target: "exec_overview"
+	},
+	{
+		source: "dim_customer",
+		target: "exec_overview"
+	},
+	{
+		source: "dim_customer",
+		target: "churn_features"
+	},
+	{
+		source: "fct_revenue",
+		target: "finance_export"
+	}
+];
+function Lineage() {
+	const $ = c(62);
+	const { t } = useWords("directed-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = DATASETS.map((dataset) => ({
+			icon: ICONS[dataset.kind],
+			id: dataset.id,
+			kind: t(`kinds.${dataset.kind}`),
+			label: dataset.kind === "dashboard" || dataset.kind === "job" ? t(`lineage.${dataset.id}`) : dataset.id,
+			status: "status" in dataset ? {
+				label: t(`status.${dataset.status.key}`),
+				palette: dataset.status.palette
+			} : void 0
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("lineage.caption");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = t("words.clear");
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t) {
+		t3 = t("controls");
+		$[6] = t;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== t) {
+		t4 = t("zoomIn");
+		$[8] = t;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(PlusIcon, {});
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t4) {
+		t6 = /* @__PURE__ */ jsx(Control, {
+			action: "zoomIn",
+			label: t4,
+			children: t5
+		});
+		$[11] = t4;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== t) {
+		t7 = t("zoomOut");
+		$[13] = t;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(MinusIcon, {});
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t7) {
+		t9 = /* @__PURE__ */ jsx(Control, {
+			action: "zoomOut",
+			label: t7,
+			children: t8
+		});
+		$[16] = t7;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("fit");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(MaximizeIcon, {});
+		$[20] = t11;
+	} else t11 = $[20];
+	let t12;
+	if ($[21] !== t10) {
+		t12 = /* @__PURE__ */ jsx(Control, {
+			action: "fit",
+			label: t10,
+			children: t11
+		});
+		$[21] = t10;
+		$[22] = t12;
+	} else t12 = $[22];
+	let t13;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(ZoomLevel, {});
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] !== t12 || $[25] !== t3 || $[26] !== t6 || $[27] !== t9) {
+		t14 = /* @__PURE__ */ jsxs(Controls, {
+			label: t3,
+			children: [
+				t6,
+				t9,
+				t12,
+				t13
+			]
+		});
+		$[24] = t12;
+		$[25] = t3;
+		$[26] = t6;
+		$[27] = t9;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== t) {
+		t15 = t("words.downstream");
+		$[29] = t;
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== t) {
+		t16 = (t17) => {
+			const { source, target } = t17;
+			return t("words.edge", {
+				source,
+				target
+			});
+		};
+		$[31] = t;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== t) {
+		t17 = t("words.focus");
+		$[33] = t;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t) {
+		t18 = t("lineage.label");
+		$[35] = t;
+		$[36] = t18;
+	} else t18 = $[36];
+	let t19;
+	if ($[37] !== t) {
+		t19 = t("words.description");
+		$[37] = t;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] !== t) {
+		t20 = t("lineage.overview");
+		$[39] = t;
+		$[40] = t20;
+	} else t20 = $[40];
+	let t21;
+	if ($[41] !== t20) {
+		t21 = /* @__PURE__ */ jsx(MiniMap, { label: t20 });
+		$[41] = t20;
+		$[42] = t21;
+	} else t21 = $[42];
+	let t22;
+	if ($[43] !== t) {
+		t22 = t("words.prompt");
+		$[43] = t;
+		$[44] = t22;
+	} else t22 = $[44];
+	let t23;
+	let t24;
+	if ($[45] !== t) {
+		t23 = (t25) => {
+			const { downstream, name, upstream } = t25;
+			return t("words.summary", {
+				downstream,
+				name,
+				upstream
+			});
+		};
+		t24 = t("words.upstream");
+		$[45] = t;
+		$[46] = t23;
+		$[47] = t24;
+	} else {
+		t23 = $[46];
+		t24 = $[47];
+	}
+	let t25;
+	if ($[48] !== nodes || $[49] !== t1 || $[50] !== t14 || $[51] !== t15 || $[52] !== t16 || $[53] !== t17 || $[54] !== t18 || $[55] !== t19 || $[56] !== t2 || $[57] !== t21 || $[58] !== t22 || $[59] !== t23 || $[60] !== t24) {
+		t25 = /* @__PURE__ */ jsx(DirectedGraph, {
+			caption: t1,
+			clearLabel: t2,
+			controls: t14,
+			defaultFocus: "dim_customer",
+			direction: "right",
+			downstreamLabel: t15,
+			edgeName: t16,
+			edges: EDGES$1,
+			focusLabel: t17,
+			label: t18,
+			nodeDescription: t19,
+			nodes,
+			overview: t21,
+			promptLabel: t22,
+			ratio: "wide",
+			summary: t23,
+			upstreamLabel: t24
+		});
+		$[48] = nodes;
+		$[49] = t1;
+		$[50] = t14;
+		$[51] = t15;
+		$[52] = t16;
+		$[53] = t17;
+		$[54] = t18;
+		$[55] = t19;
+		$[56] = t2;
+		$[57] = t21;
+		$[58] = t22;
+		$[59] = t23;
+		$[60] = t24;
+		$[61] = t25;
+	} else t25 = $[61];
+	return t25;
+}
+const source$1 = "import { type ReactElement } from \"react\";\n\nimport {\n  BrainCircuitIcon,\n  ChartColumnIcon,\n  DatabaseIcon,\n  FileDownIcon,\n  LayersIcon,\n  MaximizeIcon,\n  MinusIcon,\n  PlusIcon,\n} from \"lucide-react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DirectedGraph, Graph } from \"@stealthscale/component-graphs\";\n\nconst ICONS = {\n  dashboard: <ChartColumnIcon />,\n  features: <BrainCircuitIcon />,\n  job: <FileDownIcon />,\n  model: <LayersIcon />,\n  source: <DatabaseIcon />,\n};\n\nconst DATASETS = [\n  { id: \"stripe_charges\", kind: \"source\" },\n  { id: \"app_events\", kind: \"source\" },\n  { id: \"crm_accounts\", kind: \"source\" },\n  { id: \"stg_charges\", kind: \"model\" },\n  { id: \"stg_events\", kind: \"model\", status: { key: \"failed\", palette: \"error\" } },\n  { id: \"stg_accounts\", kind: \"model\" },\n  { id: \"fct_revenue\", kind: \"model\" },\n  { id: \"dim_customer\", kind: \"model\", status: { key: \"stale\", palette: \"warning\" } },\n  { id: \"exec_overview\", kind: \"dashboard\" },\n  { id: \"churn_features\", kind: \"features\" },\n  { id: \"finance_export\", kind: \"job\" },\n] as const;\n\nconst EDGES = [\n  { source: \"stripe_charges\", target: \"stg_charges\" },\n  { source: \"app_events\", target: \"stg_events\" },\n  { source: \"crm_accounts\", target: \"stg_accounts\" },\n  { source: \"stg_charges\", target: \"fct_revenue\" },\n  { source: \"stg_events\", target: \"fct_revenue\" },\n  { source: \"stg_accounts\", target: \"dim_customer\" },\n  { source: \"stg_events\", target: \"dim_customer\" },\n  { source: \"fct_revenue\", target: \"exec_overview\" },\n  { source: \"dim_customer\", target: \"exec_overview\" },\n  { source: \"dim_customer\", target: \"churn_features\" },\n  { source: \"fct_revenue\", target: \"finance_export\" },\n];\n\nexport function Lineage(): ReactElement {\n  const { t } = useWords(\"directed-graph\");\n  const nodes = DATASETS.map((dataset) => ({\n    icon: ICONS[dataset.kind],\n    id: dataset.id,\n    kind: t(`kinds.${dataset.kind}`),\n    label:\n      dataset.kind === \"dashboard\" || dataset.kind === \"job\"\n        ? t(`lineage.${dataset.id}`)\n        : dataset.id,\n    status:\n      \"status\" in dataset\n        ? { label: t(`status.${dataset.status.key}`), palette: dataset.status.palette }\n        : undefined,\n  }));\n\n  return (\n    <DirectedGraph\n      caption={t(\"lineage.caption\")}\n      clearLabel={t(\"words.clear\")}\n      controls={\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      }\n      defaultFocus=\"dim_customer\"\n      direction=\"right\"\n      downstreamLabel={t(\"words.downstream\")}\n      edgeName={({ source, target }) => t(\"words.edge\", { source, target })}\n      edges={EDGES}\n      focusLabel={t(\"words.focus\")}\n      label={t(\"lineage.label\")}\n      nodeDescription={t(\"words.description\")}\n      nodes={nodes}\n      overview={<Graph.MiniMap label={t(\"lineage.overview\")} />}\n      promptLabel={t(\"words.prompt\")}\n      ratio=\"wide\"\n      summary={({ downstream, name, upstream }) =>\n        t(\"words.summary\", { downstream, name, upstream })\n      }\n      upstreamLabel={t(\"words.upstream\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/directed-graph/examples/org-chart.example.tsx
+var org_chart_example_exports = /* @__PURE__ */ __exportAll({
+	OrgChart: () => OrgChart,
+	source: () => source
+});
+const PEOPLE = [
+	{ id: "ceo" },
+	{
+		id: "cto",
+		manager: "ceo"
+	},
+	{
+		id: "cfo",
+		manager: "ceo"
+	},
+	{
+		id: "cpo",
+		manager: "ceo"
+	},
+	{
+		id: "eng1",
+		manager: "cto"
+	},
+	{
+		id: "eng2",
+		manager: "cto"
+	},
+	{
+		id: "eng3",
+		manager: "eng1"
+	},
+	{
+		id: "eng4",
+		manager: "eng1"
+	},
+	{
+		id: "fin1",
+		manager: "cfo"
+	},
+	{
+		id: "des1",
+		manager: "cpo",
+		status: {
+			key: "leave",
+			palette: "warning"
+		}
+	},
+	{
+		id: "pm1",
+		manager: "cpo",
+		status: {
+			key: "open",
+			palette: "info"
+		}
+	}
+];
+const EDGES = treeEdges(PEOPLE, (person) => "manager" in person ? person.manager : void 0);
+function OrgChart() {
+	const $ = c(37);
+	const { t } = useWords("directed-graph");
+	let t0;
+	if ($[0] !== t) {
+		t0 = PEOPLE.map((person) => ({
+			id: person.id,
+			kind: t(`people.${person.id}.title`),
+			label: t(`people.${person.id}.name`),
+			status: "status" in person ? {
+				label: t(`org.${person.status.key}`),
+				palette: person.status.palette
+			} : void 0
+		}));
+		$[0] = t;
+		$[1] = t0;
+	} else t0 = $[1];
+	const nodes = t0;
+	let t1;
+	if ($[2] !== t) {
+		t1 = t("org.clear");
+		$[2] = t;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== t) {
+		t2 = (count) => t("org.collapse", { count });
+		$[4] = t;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = ["eng1"];
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== t) {
+		t4 = t("org.reports");
+		$[7] = t;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== t) {
+		t5 = (t6) => {
+			const { source, target } = t6;
+			return t("words.edge", {
+				source,
+				target
+			});
+		};
+		$[9] = t;
+		$[10] = t5;
+	} else t5 = $[10];
+	let t6;
+	if ($[11] !== t) {
+		t6 = t("org.empty");
+		$[11] = t;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	let t8;
+	if ($[13] !== t) {
+		t7 = (count_0) => t("org.expand", { count: count_0 });
+		t8 = t("org.label");
+		$[13] = t;
+		$[14] = t7;
+		$[15] = t8;
+	} else {
+		t7 = $[14];
+		t8 = $[15];
+	}
+	let t9;
+	if ($[16] !== t) {
+		t9 = t("org.description");
+		$[16] = t;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t) {
+		t10 = t("org.prompt");
+		$[18] = t;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t) {
+		t11 = (t12) => {
+			const { downstream, name } = t12;
+			return t("org.summary", {
+				count: downstream,
+				name
+			});
+		};
+		$[20] = t;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== t) {
+		t12 = t("org.reportsTo");
+		$[22] = t;
+		$[23] = t12;
+	} else t12 = $[23];
+	let t13;
+	if ($[24] !== nodes || $[25] !== t1 || $[26] !== t10 || $[27] !== t11 || $[28] !== t12 || $[29] !== t2 || $[30] !== t4 || $[31] !== t5 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9) {
+		t13 = /* @__PURE__ */ jsx(DirectedGraph, {
+			clearLabel: t1,
+			collapseLabel: t2,
+			collapsible: true,
+			defaultCollapsed: t3,
+			downstreamLabel: t4,
+			edgeName: t5,
+			edges: EDGES,
+			emptyLabel: t6,
+			expandLabel: t7,
+			label: t8,
+			nodeDescription: t9,
+			nodes,
+			promptLabel: t10,
+			summary: t11,
+			trace: "off",
+			upstreamLabel: t12
+		});
+		$[24] = nodes;
+		$[25] = t1;
+		$[26] = t10;
+		$[27] = t11;
+		$[28] = t12;
+		$[29] = t2;
+		$[30] = t4;
+		$[31] = t5;
+		$[32] = t6;
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t9;
+		$[36] = t13;
+	} else t13 = $[36];
+	return t13;
+}
+const source = "import { type ReactElement } from \"react\";\n\nimport { useWords } from \"@stealthscale/specimen\";\n\nimport { DirectedGraph, treeEdges } from \"@stealthscale/component-graphs\";\n\nconst PEOPLE = [\n  { id: \"ceo\" },\n  { id: \"cto\", manager: \"ceo\" },\n  { id: \"cfo\", manager: \"ceo\" },\n  { id: \"cpo\", manager: \"ceo\" },\n  { id: \"eng1\", manager: \"cto\" },\n  { id: \"eng2\", manager: \"cto\" },\n  { id: \"eng3\", manager: \"eng1\" },\n  { id: \"eng4\", manager: \"eng1\" },\n  { id: \"fin1\", manager: \"cfo\" },\n  { id: \"des1\", manager: \"cpo\", status: { key: \"leave\", palette: \"warning\" } },\n  { id: \"pm1\", manager: \"cpo\", status: { key: \"open\", palette: \"info\" } },\n] as const;\n\nconst EDGES = treeEdges(PEOPLE, (person) => (\"manager\" in person ? person.manager : undefined));\n\nexport function OrgChart(): ReactElement {\n  const { t } = useWords(\"directed-graph\");\n  const nodes = PEOPLE.map((person) => ({\n    id: person.id,\n    kind: t(`people.${person.id}.title`),\n    label: t(`people.${person.id}.name`),\n    status:\n      \"status\" in person\n        ? { label: t(`org.${person.status.key}`), palette: person.status.palette }\n        : undefined,\n  }));\n\n  return (\n    <DirectedGraph\n      clearLabel={t(\"org.clear\")}\n      collapseLabel={(count) => t(\"org.collapse\", { count })}\n      collapsible\n      defaultCollapsed={[\"eng1\"]}\n      downstreamLabel={t(\"org.reports\")}\n      edgeName={({ source, target }) => t(\"words.edge\", { source, target })}\n      edges={EDGES}\n      emptyLabel={t(\"org.empty\")}\n      expandLabel={(count) => t(\"org.expand\", { count })}\n      label={t(\"org.label\")}\n      nodeDescription={t(\"org.description\")}\n      nodes={nodes}\n      promptLabel={t(\"org.prompt\")}\n      summary={({ downstream, name }) => t(\"org.summary\", { count: downstream, name })}\n      trace=\"off\"\n      upstreamLabel={t(\"org.reportsTo\")}\n    />\n  );\n}\n";
+//#endregion
+//#region src/directed-graph/directed-graph.specimen.tsx
+/**
+* Catalogue page for the directed graph.
+*
+* @remarks
+*   Every scene is hand-written, because the directed graph has no recipe of its own: a warehouse
+*   lineage focused on one model with the controls and the overview map, the same lineage isolated
+*   to one hop, an org chart built from a flat list with branches that open and close, a focus kept
+*   in the caller's state, and a graph without a node. Every scene renders a component from
+*   `examples/` and shows that file as its source. The words are keys under `directed-graph` in
+*   `locales/en/specimen/directed-graph.json`.
+*/
+/**
+* Hand-written scene for a lineage focused on one model.
+*/
+const traced = {
+	about: "directed-graph.lineage.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "4xl",
+		children: /* @__PURE__ */ jsx(Lineage, {})
+	}),
+	example: lineage_example_exports,
+	title: "directed-graph.lineage.title"
+};
+/**
+* Hand-written scene for a lineage isolated to one hop.
+*/
+const isolated = {
+	about: "directed-graph.isolate.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Isolate, {})
+	}),
+	example: isolate_example_exports,
+	title: "directed-graph.isolate.title"
+};
+/**
+* Hand-written scene for an org chart whose branches open and close.
+*/
+const chart = {
+	about: "directed-graph.org.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "4xl",
+		children: /* @__PURE__ */ jsx(OrgChart, {})
+	}),
+	example: org_chart_example_exports,
+	title: "directed-graph.org.title"
+};
+/**
+* Hand-written scene for a focus kept in the caller's state.
+*/
+const kept = {
+	about: "directed-graph.controlled.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Controlled, {})
+	}),
+	example: controlled_example_exports,
+	title: "directed-graph.controlled.title"
+};
+/**
+* Hand-written scene for a graph without a node.
+*/
+const none = {
+	about: "directed-graph.empty.about",
+	draw: () => /* @__PURE__ */ jsx(Room, {
+		size: "2xl",
+		children: /* @__PURE__ */ jsx(Empty, {})
+	}),
+	example: empty_example_exports,
+	title: "directed-graph.empty.title"
+};
+var directed_graph_specimen_default = specimen({
+	about: "directed-graph.about",
+	id: "components/graphs/directed-graph",
+	imports: "import { DirectedGraph, Graph, treeEdges } from \"@stealthscale/component-graphs\";",
+	scenes: [
+		traced,
+		isolated,
+		chart,
+		kept,
+		none
+	],
+	title: "directed-graph.title"
+});
+//#endregion
+export { chart, directed_graph_specimen_default as default, isolated, kept, none, traced };