@mastra/playground-ui 69.0.0-alpha.0 → 69.0.0-alpha.2

package/dist/domains/knowledge/components/KnowledgePageGraph.cjs.js

@@ -10,6 +10,9 @@ const require_domains_knowledge_lib_pageTree = require("../lib/pageTree.cjs.js")
 const require_domains_knowledge_lib_tooltipSide = require("../lib/tooltipSide.cjs.js");
 const require_domains_knowledge_lib_useLeavingNodes = require("../lib/useLeavingNodes.cjs.js");
 const require_domains_knowledge_components_KnowledgePageCard = require("./KnowledgePageCard.cjs.js");
+const require_domains_knowledge_components_KnowledgeTooltip = require("./KnowledgeTooltip.cjs.js");
+const require_Button = require("../../../Button-BfICfyxD.cjs");
+const require_buttons_group = require("../../../buttons-group-DM6_Kohs.cjs");
 const require_Metadata = require("../../../Metadata-5GJlO4GU.cjs");
 const require_Txt = require("../../../Txt-_00wWxTd.cjs");
 let react = require("react");
@@ -18,6 +21,10 @@ let lucide_react = require("lucide-react");
 let _xyflow_react = require("@xyflow/react");
 require("@xyflow/react/dist/style.css");
 // src/domains/knowledge/components/KnowledgePageGraph.tsx
+var NO_PANE_INSETS = {
+	left: 0,
+	right: 0
+};
 var SCOPE_STYLE = {
 	"--knowledge-color": "var(--chart-blue)",
 	background: "color-mix(in oklab, var(--chart-blue) 16%, var(--card))"
@@ -226,7 +233,7 @@ function DotNode({ data }) {
 		const scaledWidth = tip.offsetWidth * tipScale;
 		const scaledHeight = tip.offsetHeight * tipScale;
 		if (!scaledWidth || !scaledHeight) return;
-		const obstacles = [...graph.querySelectorAll("[data-testid=\"knowledge-page-node\"], [data-testid=\"knowledge-page-dot\"]"), ...(graph.parentElement ?? graph).querySelectorAll("[aria-label=\"Legend\"], [data-testid=\"knowledge-graph-back\"], .react-flow__controls")].map(boxOf).filter((box) => box.right > box.left && !(box.left === tipBox.left && box.top === tipBox.top) && !(box.left === dotBox.left && box.top === dotBox.top));
+		const obstacles = [...graph.querySelectorAll("[data-testid=\"knowledge-page-node\"], [data-testid=\"knowledge-page-dot\"]"), ...(graph.parentElement ?? graph).querySelectorAll("[aria-label=\"Legend\"], [data-testid=\"knowledge-graph-back\"], [data-knowledge-graph-zoom]")].map(boxOf).filter((box) => box.right > box.left && !(box.left === tipBox.left && box.top === tipBox.top) && !(box.left === dotBox.left && box.top === dotBox.top));
 		setSide(require_domains_knowledge_lib_tooltipSide.chooseTooltipSide({
 			dot: dotBox,
 			tip: {
@@ -337,6 +344,7 @@ function PageNodeComponent({ data }) {
 	const rest = require_domains_knowledge_lib_graphShape.isRestCircle(page);
 	const compact = size < COMPACT_CIRCLE_SIZE;
 	const fit = Math.max(4, Math.floor(size * CIRCLE_TEXT_SHARE / (compact ? 6.5 : 7.5)));
+	const tip = circleTooltip(data, kind);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": "knowledge-page-node",
 		"data-page-id": page.id,
@@ -346,64 +354,72 @@ function PageNodeComponent({ data }) {
 			width: size,
 			height: size
 		},
-		title: placeholder ? `${kind}: ${page.address}. Nothing written to it yet.` : rest ? `Show ${Math.min(12, page.childCount ?? 12)} more of ${page.childCount ?? "the rest"}` : group ? `${page.name}: click to show them` : page.isScope && page.address ? `${kind}: ${page.address}` : data.links && data.links.in + data.links.out > 0 ? `${page.name}: ${require_domains_knowledge_lib_linkCountsText.linkCountsText(data.links, data.notShown)}` : page.name,
+		"aria-label": tip,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: `knowledge-circle flex size-full flex-col items-center justify-center gap-0.5 overflow-hidden rounded-full border-2 text-center shadow-raised ${rest ? "hover:border-foreground" : ""}`,
-				"data-selected": selected || void 0,
-				"data-far": data.far || void 0,
-				style: {
-					...placeholder || rest ? PLACEHOLDER_STYLE : data.far ? FAR_STYLE : page.isScope ? SCOPE_STYLE : PAGE_STYLE,
-					paddingInline: size * (.26 / 2)
-				},
-				children: [data.far ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: page.isScope ? void 0 : "muted",
-					className: "pointer-events-none inline-flex max-w-full items-center justify-center gap-1 whitespace-nowrap uppercase",
-					style: page.isScope ? { color: "var(--chart-blue)" } : void 0,
-					"data-testid": page.isScope ? "knowledge-scope-caption" : "knowledge-page-caption",
-					children: [data.level ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LevelIcon, { level: data.level }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "truncate",
-						children: rest ? "More" : data.isParent ? "Parent" : kind
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+				label: tip,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: `knowledge-circle flex size-full flex-col items-center justify-center gap-0.5 overflow-hidden rounded-full border-2 text-center shadow-raised ${rest ? "hover:border-foreground" : ""}`,
+					"data-selected": selected || void 0,
+					"data-far": data.far || void 0,
+					style: {
+						...placeholder || rest ? PLACEHOLDER_STYLE : data.far ? FAR_STYLE : page.isScope ? SCOPE_STYLE : PAGE_STYLE,
+						paddingInline: size * (.26 / 2)
+					},
+					children: [data.far ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: page.isScope ? void 0 : "muted",
+						className: "pointer-events-none inline-flex max-w-full items-center justify-center gap-1 whitespace-nowrap uppercase",
+						style: page.isScope ? { color: "var(--chart-blue)" } : void 0,
+						"data-testid": page.isScope ? "knowledge-scope-caption" : "knowledge-page-caption",
+						children: [data.level ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LevelIcon, { level: data.level }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate",
+							children: rest ? "More" : data.isParent ? "Parent" : kind
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: compact ? "meta" : "label",
+						tone: "ink",
+						className: `pointer-events-none max-w-full overflow-hidden [overflow-wrap:normal] ${compact ? "line-clamp-2" : "line-clamp-3"}`,
+						style: data.far ? { color: "var(--background)" } : void 0,
+						"data-testid": "knowledge-circle-name",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreakAtColons, { text: require_domains_knowledge_lib_circleText.fitWords(require_domains_knowledge_lib_pageAddress.scopeTitle(page), fit) })
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: compact ? "meta" : "label",
-					tone: "ink",
-					className: `pointer-events-none max-w-full overflow-hidden [overflow-wrap:normal] ${compact ? "line-clamp-2" : "line-clamp-3"}`,
-					style: data.far ? { color: "var(--background)" } : void 0,
-					"data-testid": "knowledge-circle-name",
-					children: page.isScope && page.address && !group ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BreakAtColons, { text: require_domains_knowledge_lib_circleText.fitWords(page.address, fit) }) : require_domains_knowledge_lib_circleText.fitWords(page.name, fit)
-				})]
+				})
 			}),
 			pinned ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinBadge, { size }) : null,
-			data.hiddenLinks && (data.hiddenLinks.in > 0 || data.hiddenLinks.out > 0) ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				"data-testid": "knowledge-hidden-links",
-				title: require_domains_knowledge_lib_linkCountsText.linkCountsText(data.hiddenLinks),
-				"aria-label": require_domains_knowledge_lib_linkCountsText.linkCountsText(data.hiddenLinks),
-				className: "absolute bottom-full left-1/2 -mb-1 flex -translate-x-1/2 gap-1 rounded-full border border-border bg-card px-1.5 shadow-raised",
-				children: [data.hiddenLinks.in > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					style: { color: "var(--chart-orange)" },
-					children: ["→", data.hiddenLinks.in]
-				}) : null, data.hiddenLinks.out > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					style: { color: LINK_EDGE_COLOR },
-					children: [data.hiddenLinks.out, "→"]
-				}) : null]
+			data.hiddenLinks && (data.hiddenLinks.in > 0 || data.hiddenLinks.out > 0) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+				label: require_domains_knowledge_lib_linkCountsText.linkCountsText(data.hiddenLinks),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					"data-testid": "knowledge-hidden-links",
+					"aria-label": require_domains_knowledge_lib_linkCountsText.linkCountsText(data.hiddenLinks),
+					className: "absolute bottom-full left-1/2 -mb-1 flex -translate-x-1/2 gap-1 rounded-full border border-border bg-card px-1.5 shadow-raised",
+					children: [data.hiddenLinks.in > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						style: { color: "var(--chart-orange)" },
+						children: ["→", data.hiddenLinks.in]
+					}) : null, data.hiddenLinks.out > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						style: { color: LINK_EDGE_COLOR },
+						children: [data.hiddenLinks.out, "→"]
+					}) : null]
+				})
 			}) : null,
-			badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"data-testid": "knowledge-child-count-badge",
-				"aria-label": `${badge} children, not all drawn`,
-				className: "absolute top-full left-1/2 -mt-1 -translate-x-1/2 rounded-full border border-border bg-card px-1.5 shadow-raised",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "ink",
-					children: badge
+			badge ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+				label: `${badge} children, not all drawn`,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-testid": "knowledge-child-count-badge",
+					"aria-label": `${badge} children, not all drawn`,
+					className: "absolute top-full left-1/2 -mt-1 -translate-x-1/2 rounded-full border border-border bg-card px-1.5 shadow-raised",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "ink",
+						children: badge
+					})
 				})
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Handle, {
@@ -419,6 +435,18 @@ function PageNodeComponent({ data }) {
 		]
 	});
 }
+function circleTooltip(data, kind) {
+	const { page, links, notShown } = data;
+	if (isPlaceholder(page)) return `${kind}: ${page.address}. Nothing written to it yet.`;
+	if (require_domains_knowledge_lib_graphShape.isRestCircle(page)) return `Show ${Math.min(12, page.childCount ?? 12)} more of ${page.childCount ?? "the rest"}`;
+	if (require_domains_knowledge_lib_graphShape.isScopeGroup(page)) return `${page.name}: click to show them`;
+	if (page.isScope && page.address) {
+		const title = require_domains_knowledge_lib_pageAddress.scopeTitle(page);
+		return title === page.address ? `${kind}: ${title}` : `${kind}: ${title} (${page.address})`;
+	}
+	if (links && links.in + links.out > 0) return `${page.name}: ${require_domains_knowledge_lib_linkCountsText.linkCountsText(links, notShown)}`;
+	return page.name;
+}
 function isPlaceholder(page) {
 	return page.id.startsWith("unplaced:");
 }
@@ -500,367 +528,388 @@ function graphBounds(nodes) {
 }
 var LEGEND_SWATCH = "knowledge-circle inline-block size-3 shrink-0 rounded-full border-2";
 /** What the circles, lines and badge mean. */
-function GraphLegend({ drawn, counts, dots, linkEnds, focused, levels, branches }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
-		"aria-label": "Legend",
-		className: "pointer-events-none absolute top-2 left-2 z-10 flex flex-col gap-1 rounded-md border border-border bg-card/90 px-2 py-1.5 shadow-raised",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: LEGEND_SWATCH,
-					style: { ...SCOPE_STYLE },
-					"aria-hidden": true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Scope"
-				})]
-			}),
-			levels.includes("scope") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-level-scope",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Layers, {
-					"aria-hidden": true,
-					className: "size-3 shrink-0 text-muted-foreground"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Scope, above its pages"
-				})]
-			}) : null,
-			levels.includes("ancestor") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-level-ancestor",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpToLine, {
-					"aria-hidden": true,
-					className: "size-3 shrink-0 text-muted-foreground"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Page above the focus"
-				})]
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: LEGEND_SWATCH,
-					style: { ...PAGE_STYLE },
-					"aria-hidden": true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Page"
-				})]
-			}),
-			focused ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-focused",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: LEGEND_SWATCH,
-					style: {
-						...PAGE_STYLE,
-						outline: "2px solid var(--knowledge-color)",
-						outlineOffset: 2,
-						borderWidth: 3
-					},
-					"aria-hidden": true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Focused page"
-				})]
-			}) : null,
-			dots || linkEnds ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-dot",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "inline-block size-2 shrink-0 rounded-full bg-muted-foreground",
-					"aria-hidden": true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Page in another branch"
-				})]
-			}) : null,
-			branches.slice(0, LEGEND_BRANCH_CAP).map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2 pl-0.5",
-				"data-testid": "knowledge-legend-branch",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "inline-block size-2 shrink-0 rounded-full",
-					style: { background: branch.color },
-					"aria-hidden": true
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					className: "max-w-40 truncate",
-					title: branch.name,
-					children: branches.length > 1 ? `Under ${branch.name}` : branch.scope ? "Under parent scope" : "Under parent page"
-				})]
-			}, branch.id)),
-			branches.length > LEGEND_BRANCH_CAP ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-				className: "pl-0.5",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: [
-						"+",
-						branches.length - LEGEND_BRANCH_CAP,
-						" more branches"
-					]
-				})
-			}) : null,
-			drawn.has("out") || drawn.has("in") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [drawn.has("out") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-out",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "16",
-					height: "8",
-					"aria-hidden": true,
-					className: "shrink-0",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "4",
-						x2: "12",
-						y2: "4",
-						stroke: LINK_EDGE_COLOR,
-						strokeWidth: "1.5"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-						points: "11,1 16,4 11,7",
-						fill: LINK_EDGE_COLOR
+function GraphLegend({ drawn, counts, dots, linkEnds, focused, levels, branches, collapsible }) {
+	const [pinned, setPinned] = (0, react.useState)(!collapsible);
+	const [peeking, setPeeking] = (0, react.useState)(false);
+	const open = pinned || peeking;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "absolute top-3 left-3 z-10 flex translate-x-(--knowledge-pane-left) flex-col items-start gap-1.5 transition-transform duration-slow ease-out-custom motion-reduce:transition-none",
+		onPointerEnter: collapsible ? () => setPeeking(true) : void 0,
+		onPointerLeave: collapsible ? () => setPeeking(false) : void 0,
+		children: [collapsible ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			size: "sm",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Info, {}),
+			"aria-expanded": open,
+			className: "shadow-overlay",
+			onFocus: () => setPeeking(true),
+			onBlur: () => setPeeking(false),
+			onClick: () => {
+				setPinned((current) => !current);
+				setPeeking(false);
+			},
+			children: "Legend"
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("ul", {
+			"aria-label": "Legend",
+			hidden: collapsible && !open,
+			className: `pointer-events-none flex flex-col gap-1 rounded-lg px-2.5 py-2 ${collapsible ? "bg-card shadow-overlay" : "rounded-md border border-border bg-card/90 shadow-raised"}`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: LEGEND_SWATCH,
+						style: { ...SCOPE_STYLE },
+						"aria-hidden": true
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Scope"
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Links out of the selected page"
-				})]
-			}) : null, drawn.has("in") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-in",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "16",
-					height: "8",
-					"aria-hidden": true,
-					className: "shrink-0",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "4",
-						x2: "12",
-						y2: "4",
-						stroke: "var(--chart-orange)",
-						strokeWidth: "1.5",
-						strokeDasharray: "3 2"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-						points: "11,1 16,4 11,7",
-						fill: "var(--chart-orange)"
+				}),
+				levels.includes("scope") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-level-scope",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Layers, {
+						"aria-hidden": true,
+						className: "size-3 shrink-0 text-muted-foreground"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Scope, above its pages"
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Links into it"
-				})]
-			}) : null] }) : null,
-			drawn.has("mention") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-mention",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-					width: "12",
-					height: "4",
-					"aria-hidden": true,
-					className: "shrink-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "2",
-						x2: "12",
-						y2: "2",
-						stroke: MENTION_EDGE_COLOR,
-						strokeWidth: "2"
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Mentioned in notes"
-				})]
-			}) : null,
-			drawn.has("link") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "16",
-					height: "8",
-					"aria-hidden": true,
-					className: "shrink-0",
-					"data-testid": "knowledge-legend-link",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "4",
-						x2: "12",
-						y2: "4",
-						...LINK_EDGE_STYLE
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-						points: "11,1 16,4 11,7",
-						fill: LINK_EDGE_COLOR
+				}) : null,
+				levels.includes("ancestor") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-level-ancestor",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowUpToLine, {
+						"aria-hidden": true,
+						className: "size-3 shrink-0 text-muted-foreground"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Page above the focus"
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Linked in page body"
-				})]
-			}) : null,
-			drawn.has("dot-parent") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-dot-parent",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-					width: "16",
-					height: "4",
-					"aria-hidden": true,
-					className: "shrink-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "2",
-						x2: "16",
-						y2: "2",
-						...DOT_PARENT_EDGE_STYLE,
-						strokeOpacity: .5
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: LEGEND_SWATCH,
+						style: { ...PAGE_STYLE },
+						"aria-hidden": true
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Page"
+					})]
+				}),
+				focused ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-focused",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: LEGEND_SWATCH,
+						style: {
+							...PAGE_STYLE,
+							borderWidth: 3
+						},
+						"aria-hidden": true
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Focused page"
+					})]
+				}) : null,
+				dots || linkEnds ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-dot",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "inline-block size-2 shrink-0 rounded-full bg-muted-foreground",
+						"aria-hidden": true
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Page in another branch"
+					})]
+				}) : null,
+				branches.slice(0, LEGEND_BRANCH_CAP).map((branch) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2 pl-0.5",
+					"data-testid": "knowledge-legend-branch",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "inline-block size-2 shrink-0 rounded-full",
+						style: { background: branch.color },
+						"aria-hidden": true
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+						label: branch.name,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+							as: "span",
+							variant: "meta",
+							tone: "muted",
+							className: "pointer-events-auto max-w-40 truncate",
+							children: branches.length > 1 ? `Under ${branch.name}` : branch.scope ? "Under parent scope" : "Under parent page"
+						})
+					})]
+				}, branch.id)),
+				branches.length > LEGEND_BRANCH_CAP ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					className: "pl-0.5",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: [
+							"+",
+							branches.length - LEGEND_BRANCH_CAP,
+							" more branches"
+						]
 					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Child page (dot)"
-				})]
-			}) : null,
-			drawn.has("up") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-up",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "16",
-					height: "8",
-					"aria-hidden": true,
-					className: "shrink-0",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "4",
-						x2: "12",
-						y2: "4",
-						...UP_EDGE_STYLE
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-						points: "9,1 15,4 9,7",
-						fill: UP_EDGE_COLOR
+				}) : null,
+				drawn.has("out") || drawn.has("in") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [drawn.has("out") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-out",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "16",
+						height: "8",
+						"aria-hidden": true,
+						className: "shrink-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "12",
+							y2: "4",
+							stroke: LINK_EDGE_COLOR,
+							strokeWidth: "1.5"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+							points: "11,1 16,4 11,7",
+							fill: LINK_EDGE_COLOR
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Links out of the selected page"
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Parent of the focused page"
-				})]
-			}) : null,
-			drawn.has("parent") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "16",
-					height: "8",
-					"aria-hidden": true,
-					className: "shrink-0",
-					"data-testid": "knowledge-legend-parent-arrow",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "4",
-						x2: "14",
-						y2: "4",
-						...PARENT_EDGE_STYLE,
-						strokeDasharray: "3 2"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
-						points: "10,1 14,4 10,7",
-						fill: "none",
-						stroke: PARENT_ARROW_COLOR,
-						strokeWidth: "1.25",
-						strokeLinecap: "round",
-						strokeLinejoin: "round"
+				}) : null, drawn.has("in") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-in",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "16",
+						height: "8",
+						"aria-hidden": true,
+						className: "shrink-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "12",
+							y2: "4",
+							stroke: "var(--chart-orange)",
+							strokeWidth: "1.5",
+							strokeDasharray: "3 2"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+							points: "11,1 16,4 11,7",
+							fill: "var(--chart-orange)"
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Links into it"
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Parent → child"
-				})]
-			}) : null,
-			counts ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				"data-testid": "knowledge-legend-link-counts",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				}) : null] }) : null,
+				drawn.has("mention") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-mention",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "12",
+						height: "4",
+						"aria-hidden": true,
+						className: "shrink-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "2",
+							x2: "12",
+							y2: "2",
+							stroke: MENTION_EDGE_COLOR,
+							strokeWidth: "2"
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 						as: "span",
 						variant: "meta",
-						style: { color: "var(--chart-orange)" },
-						children: "→4"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						tone: "muted",
+						children: "Mentioned in notes"
+					})]
+				}) : null,
+				drawn.has("link") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "16",
+						height: "8",
+						"aria-hidden": true,
+						className: "shrink-0",
+						"data-testid": "knowledge-legend-link",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "12",
+							y2: "4",
+							...LINK_EDGE_STYLE
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+							points: "11,1 16,4 11,7",
+							fill: LINK_EDGE_COLOR
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 						as: "span",
 						variant: "meta",
-						style: { color: LINK_EDGE_COLOR },
-						children: "14→"
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						tone: "muted",
+						children: "Linked in page body"
+					})]
+				}) : null,
+				drawn.has("dot-parent") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-dot-parent",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "16",
+						height: "4",
+						"aria-hidden": true,
+						className: "shrink-0",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "2",
+							x2: "16",
+							y2: "2",
+							...DOT_PARENT_EDGE_STYLE,
+							strokeOpacity: .5
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
 						as: "span",
 						variant: "meta",
 						tone: "muted",
-						children: "Links in, links out (not drawn)"
-					})
-				]
-			}) : null,
-			drawn.has("grant") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "16",
-					height: "8",
-					"aria-hidden": true,
-					className: "shrink-0",
-					"data-testid": "knowledge-legend-grant",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
-						x1: "0",
-						y1: "4",
-						x2: "12",
-						y2: "4",
-						...GRANT_EDGE_STYLE,
-						strokeDasharray: "4 2 1 2",
-						strokeWidth: "1.5"
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
-						points: "11,1 16,4 11,7",
-						fill: GRANT_EDGE_COLOR
+						children: "Child page (dot)"
 					})]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Grants access (hover for role)"
-				})]
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "flex size-3 shrink-0 items-center justify-center rounded-full bg-badge-amber-strong text-badge-amber-foreground",
-					"aria-hidden": true,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { size: 8 })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-					as: "span",
-					variant: "meta",
-					tone: "muted",
-					children: "Pinned"
-				})]
-			})
-		]
+				}) : null,
+				drawn.has("up") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-up",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "16",
+						height: "8",
+						"aria-hidden": true,
+						className: "shrink-0",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "12",
+							y2: "4",
+							...UP_EDGE_STYLE
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+							points: "9,1 15,4 9,7",
+							fill: UP_EDGE_COLOR
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Parent of the focused page"
+					})]
+				}) : null,
+				drawn.has("parent") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "16",
+						height: "8",
+						"aria-hidden": true,
+						className: "shrink-0",
+						"data-testid": "knowledge-legend-parent-arrow",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "14",
+							y2: "4",
+							...PARENT_EDGE_STYLE,
+							strokeDasharray: "3 2"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
+							points: "10,1 14,4 10,7",
+							fill: "none",
+							stroke: PARENT_ARROW_COLOR,
+							strokeWidth: "1.25",
+							strokeLinecap: "round",
+							strokeLinejoin: "round"
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Parent → child"
+					})]
+				}) : null,
+				counts ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					"data-testid": "knowledge-legend-link-counts",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+							as: "span",
+							variant: "meta",
+							style: { color: "var(--chart-orange)" },
+							children: "→4"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+							as: "span",
+							variant: "meta",
+							style: { color: LINK_EDGE_COLOR },
+							children: "14→"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+							as: "span",
+							variant: "meta",
+							tone: "muted",
+							children: "Links in, links out (not drawn)"
+						})
+					]
+				}) : null,
+				drawn.has("grant") ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "16",
+						height: "8",
+						"aria-hidden": true,
+						className: "shrink-0",
+						"data-testid": "knowledge-legend-grant",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+							x1: "0",
+							y1: "4",
+							x2: "12",
+							y2: "4",
+							...GRANT_EDGE_STYLE,
+							strokeDasharray: "4 2 1 2",
+							strokeWidth: "1.5"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
+							points: "11,1 16,4 11,7",
+							fill: GRANT_EDGE_COLOR
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Grants access (hover for role)"
+					})]
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "flex size-3 shrink-0 items-center justify-center rounded-full bg-badge-amber-strong text-badge-amber-foreground",
+						"aria-hidden": true,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pin, { size: 8 })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "meta",
+						tone: "muted",
+						children: "Pinned"
+					})]
+				})
+			]
+		})]
 	});
 }
 /** How far the pointer may move between press and release and still count as a click, not a pan. */
@@ -940,7 +989,7 @@ function KnowledgePageGraph(props) {
 		children: "Loading pages…"
 	}) : null] });
 }
-function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selectedPageId, centerId, hiddenLinks, knownLinks, nearIds, exactLinkCounts, fetchedLinks, onHover, showCounts, onPreview, onSelect, onOpen, onClearSelection, onMentionSelect }) {
+function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selectedPageId, centerId, hiddenLinks, knownLinks, nearIds, exactLinkCounts, fetchedLinks, onHover, showCounts, onPreview, onSelect, onOpen, onClearSelection, onMentionSelect, insets = NO_PANE_INSETS, collapsibleLegend }) {
 	const { graphPages, allEdges } = (0, react.useMemo)(() => {
 		const granted = require_domains_knowledge_lib_pageGraph.grantGraph(pages, grants);
 		return {
@@ -1046,7 +1095,7 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 			const owner = branch ? pageById.get(branch) : void 0;
 			if (branch && color && owner && !seen.has(branch)) seen.set(branch, {
 				id: branch,
-				name: owner.displayLabel ?? owner.name,
+				name: owner.displayLabel ?? require_domains_knowledge_lib_pageAddress.scopeTitle(owner),
 				color,
 				scope: !!owner.isScope
 			});
@@ -1256,19 +1305,22 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 	const hasNodes = nodes.length > 0;
 	const drawnNodes = require_domains_knowledge_lib_useLeavingNodes.useLeavingNodes(emphasisedNodes, require_domains_knowledge_lib_useLeavingNodes.prefersMotion());
 	const linkedIds = laidOut.shape.linked;
+	const paneStyle = { "--knowledge-pane-left": `${insets.left}px` };
 	const fitState = (0, react.useRef)({
 		nodes,
 		selectedPageId,
 		centerId,
 		reactFlow,
-		linkedIds
+		linkedIds,
+		insets
 	});
 	fitState.current = {
 		nodes,
 		selectedPageId,
 		centerId,
 		reactFlow,
-		linkedIds
+		linkedIds,
+		insets
 	};
 	const fitPending = (0, react.useRef)(false);
 	const paneAndNodes = () => {
@@ -1294,7 +1346,7 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 	const fit = (0, react.useCallback)((duration) => {
 		const view = paneAndNodes();
 		if (!view) return;
-		const { selectedPageId: selected, centerId: centre, linkedIds: linked } = fitState.current;
+		const { selectedPageId: selected, centerId: centre, linkedIds: linked, insets: covered } = fitState.current;
 		const anchor = view.current.find((node) => node.id === (selected ?? centre));
 		const ring = !!selected && view.current.some((node) => linked.has(node.id));
 		const viewport = require_domains_knowledge_lib_fitViewport.fitViewport({
@@ -1302,7 +1354,8 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 			width: view.width,
 			height: view.height,
 			ring,
-			anchor
+			anchor,
+			insets: covered
 		});
 		view.flow.setViewport(viewport, duration ? { duration } : void 0);
 	}, []);
@@ -1324,7 +1377,8 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 			legend: box && legend ? {
 				right: legend.right - box.left + 8,
 				bottom: legend.bottom - box.top + 8
-			} : void 0
+			} : void 0,
+			insets: fitState.current.insets
 		});
 		view.flow.setViewport(viewport);
 	}, []);
@@ -1332,11 +1386,12 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 		const container = containerRef.current;
 		const width = container?.clientWidth ?? 0;
 		const height = container?.clientHeight ?? 0;
-		const { nodes: current, selectedPageId: selected, centerId: centre, reactFlow: flow } = fitState.current;
+		const { nodes: current, selectedPageId: selected, centerId: centre, reactFlow: flow, insets } = fitState.current;
 		const anchor = current.find((node) => node.id === (selected ?? centre));
 		if (!anchor || width === 0 || height === 0) return;
+		const covered = require_domains_knowledge_lib_fitViewport.uncoveredInsets(width, insets);
 		const view = flow.getViewport();
-		const dx = require_domains_knowledge_lib_fitViewport.nudgeAxis(anchor.position.x * view.zoom + view.x, (anchor.width ?? 0) * view.zoom, width);
+		const dx = require_domains_knowledge_lib_fitViewport.nudgeAxis(anchor.position.x * view.zoom + view.x - covered.left, (anchor.width ?? 0) * view.zoom, width - covered.left - covered.right);
 		const dy = require_domains_knowledge_lib_fitViewport.nudgeAxis(anchor.position.y * view.zoom + view.y, (anchor.height ?? 0) * view.zoom, height);
 		if (dx === 0 && dy === 0) return;
 		flow.setViewport({
@@ -1386,6 +1441,13 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 	const selectedHere = (0, react.useRef)(null);
 	const selectedIsLoaded = !!selectedPageId && pagesById.has(selectedPageId);
 	const initialized = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (initialized.current) nudgeToSelection(require_domains_knowledge_lib_fitViewport.fitDuration(require_domains_knowledge_lib_useLeavingNodes.prefersMotion()));
+	}, [
+		insets.left,
+		insets.right,
+		nudgeToSelection
+	]);
 	const settleUntil = (0, react.useRef)(0);
 	const settledOn = (0, react.useRef)(null);
 	const fittedLayout = (0, react.useRef)("");
@@ -1491,6 +1553,7 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: containerRef,
+		style: paneStyle,
 		className: "knowledge-graph relative size-full",
 		"data-emphasis": neighbours ? "on" : void 0,
 		"data-testid": "knowledge-page-graph",
@@ -1503,51 +1566,78 @@ function KnowledgePageGraphInner({ pages, edges, pinnedIds = [], grants, selecte
 				y: event.clientY
 			};
 		},
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphLegend, {
-			branches: dotBranches,
-			levels: drawnLevels,
-			focused: !!selectedPageId && laidOut.positions.has(selectedPageId),
-			dots: [...laidOut.shape.form.values()].includes("dot"),
-			linkEnds: laidOut.shape.linked.size > 0,
-			drawn: drawnEdgeStyles,
-			counts: [...hiddenLinks ?? []].some(([id, hidden]) => laidOut.shape.form.get(id) === "full" && (hidden.in > 0 || hidden.out > 0))
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_xyflow_react.ReactFlow, {
-			nodes: drawnNodes,
-			edges: emphasisedEdges,
-			nodeTypes,
-			edgeTypes,
-			onInit: () => {
-				initialized.current = true;
-				settleUntil.current = Date.now() + require_domains_knowledge_lib_fitViewport.INITIAL_SETTLE_MS;
-				settledOn.current = fitState.current.selectedPageId ?? null;
-				fittedLayout.current = fitState.current.nodes.map((node) => `${node.id}@${node.position.x},${node.position.y}`).join("|");
-				fitInitial();
-			},
-			minZoom: .1,
-			proOptions: { hideAttribution: true },
-			nodesConnectable: false,
-			nodesDraggable: false,
-			onPaneClick,
-			onNodeMouseEnter,
-			onNodeMouseLeave,
-			onNodeClick,
-			onEdgeClick,
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Background, {
-				variant: _xyflow_react.BackgroundVariant.Dots,
-				gap: 26,
-				size: 1.4,
-				color: "var(--border-strong)"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Controls, {
-				showInteractive: false,
-				showFitView: false,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.ControlButton, {
-					onClick: () => fit(require_domains_knowledge_lib_fitViewport.fitDuration(require_domains_knowledge_lib_useLeavingNodes.prefersMotion())),
-					title: "Fit view",
-					"aria-label": "Fit view",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize, { "aria-hidden": true })
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GraphLegend, {
+				collapsible: collapsibleLegend,
+				branches: dotBranches,
+				levels: drawnLevels,
+				focused: !!selectedPageId && laidOut.positions.has(selectedPageId),
+				dots: [...laidOut.shape.form.values()].includes("dot"),
+				linkEnds: laidOut.shape.linked.size > 0,
+				drawn: drawnEdgeStyles,
+				counts: [...hiddenLinks ?? []].some(([id, hidden]) => laidOut.shape.form.get(id) === "full" && (hidden.in > 0 || hidden.out > 0))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.ReactFlow, {
+				nodes: drawnNodes,
+				edges: emphasisedEdges,
+				nodeTypes,
+				edgeTypes,
+				onInit: () => {
+					initialized.current = true;
+					settleUntil.current = Date.now() + require_domains_knowledge_lib_fitViewport.INITIAL_SETTLE_MS;
+					settledOn.current = fitState.current.selectedPageId ?? null;
+					fittedLayout.current = fitState.current.nodes.map((node) => `${node.id}@${node.position.x},${node.position.y}`).join("|");
+					fitInitial();
+				},
+				minZoom: .1,
+				proOptions: { hideAttribution: true },
+				nodesConnectable: false,
+				nodesDraggable: false,
+				onPaneClick,
+				onNodeMouseEnter,
+				onNodeMouseLeave,
+				onNodeClick,
+				onEdgeClick,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_xyflow_react.Background, {
+					variant: _xyflow_react.BackgroundVariant.Dots,
+					gap: 26,
+					size: 1.4,
+					color: "var(--border-strong)"
 				})
-			})]
-		})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "absolute bottom-3 left-3 z-10 translate-x-(--knowledge-tree-drawer-inset,0px) transition-transform duration-slow ease-out-custom motion-reduce:transition-none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_buttons_group.ButtonsGroup, {
+					size: "sm",
+					"aria-label": "Zoom",
+					"data-knowledge-graph-zoom": true,
+					className: "rounded-full shadow-overlay",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							size: "icon-sm",
+							tooltip: "Zoom out",
+							"aria-label": "Zoom out",
+							onClick: () => void reactFlow.zoomOut({ duration: require_domains_knowledge_lib_fitViewport.fitDuration(require_domains_knowledge_lib_useLeavingNodes.prefersMotion()) }),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Minus, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							size: "icon-sm",
+							tooltip: "Zoom in",
+							"aria-label": "Zoom in",
+							onClick: () => void reactFlow.zoomIn({ duration: require_domains_knowledge_lib_fitViewport.fitDuration(require_domains_knowledge_lib_useLeavingNodes.prefersMotion()) }),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Plus, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							size: "icon-sm",
+							tooltip: "Fit view",
+							"aria-label": "Fit view",
+							onClick: () => fit(require_domains_knowledge_lib_fitViewport.fitDuration(require_domains_knowledge_lib_useLeavingNodes.prefersMotion())),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Maximize, {})
+						})
+					]
+				})
+			})
+		]
 	});
 }
 exports.KnowledgePageGraph = KnowledgePageGraph;