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

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

@@ -1,17 +1,35 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_domains_knowledge_lib_graphShape = require("../lib/graphShape.cjs.js");
+const require_domains_knowledge_lib_pageAddress = require("../lib/pageAddress.cjs.js");
 const require_domains_knowledge_lib_pageRefs = require("../lib/pageRefs.cjs.js");
+const require_domains_knowledge_lib_pagesByRefContext = require("../lib/pagesByRefContext.cjs.js");
 const require_domains_knowledge_lib_popupPlacement = require("../lib/popupPlacement.cjs.js");
 const require_domains_knowledge_lib_useStableWhile = require("../lib/useStableWhile.cjs.js");
 const require_domains_knowledge_components_KnowledgePageDetail = require("./KnowledgePageDetail.cjs.js");
 const require_domains_knowledge_components_KnowledgePageGraph = require("./KnowledgePageGraph.cjs.js");
 const require_domains_knowledge_components_KnowledgePageTree = require("./KnowledgePageTree.cjs.js");
+const require_domains_knowledge_components_KnowledgeSourceIcon = require("./KnowledgeSourceIcon.cjs.js");
+const require_domains_knowledge_components_KnowledgeTooltip = require("./KnowledgeTooltip.cjs.js");
+const require_ActionRow = require("../../../ActionRow-BlC9GAef.cjs");
+const require_Button = require("../../../Button-BfICfyxD.cjs");
+const require_buttons_group = require("../../../buttons-group-DM6_Kohs.cjs");
+const require_DataPanel = require("../../../DataPanel-LfExjFpP.cjs");
 const require_EmptyState = require("../../../EmptyState-Dc-sP95H.cjs");
+const require_scroll_area = require("../../../scroll-area-BU_TorPW.cjs");
+const require_components_SearchInput = require("../../../components/SearchInput.cjs.js");
+const require_components_Skeleton = require("../../../components/Skeleton.cjs.js");
+const require_tabs_tab = require("../../../tabs-tab-Dj2huH5T.cjs");
+const require_Tree = require("../../../Tree-6pubDJLQ.cjs");
 const require_Txt = require("../../../Txt-_00wWxTd.cjs");
+const require_icons_Icon = require("../../../icons/Icon.cjs.js");
+const require_primitives_menu_item = require("../../../primitives/menu-item.cjs.js");
+const require_primitives_raised_surface = require("../../../primitives/raised-surface.cjs.js");
 const require_hooks_use_is_mobile = require("../../../hooks/use-is-mobile.cjs.js");
+const require_utils = require("../../../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
+let react_dom = require("react-dom");
 // src/domains/knowledge/components/KnowledgePageExplorer.tsx
 /** Page ids are ULIDs; a bare `[[id]]` is askable, a bare `[[Name]]` is not. */
 var PAGE_ID_SHAPE = /^[0-9A-Z]{26}$/;
@@ -90,8 +108,18 @@ function visibleLinks(known, drawn, selectedId, all) {
 		more
 	};
 }
-/** The round buttons floating over the graph: muted when off or idle, a solid fill when pressed. */
-var FLOAT_BUTTON = "flex size-9 cursor-pointer items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-overlay transition-colors hover:bg-fill-subtle hover:text-foreground aria-pressed:border-transparent aria-pressed:bg-fill-inverse aria-pressed:text-background aria-pressed:hover:bg-fill-inverse disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-card";
+function explorerTab(view, showPage) {
+	if (showPage) return "page";
+	if (view === "tree") return "tree";
+	return "graph";
+}
+var TREE_DRAWER_INSET = 296;
+var TREE_TOGGLE_INSET = 44;
+function treeInset(overlay, treeOpen) {
+	if (!overlay) return 0;
+	return treeOpen ? TREE_DRAWER_INSET : TREE_TOGGLE_INSET;
+}
+var PAGE_DRAWER_INSET = 392;
 var noTreeLevels = () => [];
 var noKeys = [];
 var noLinkedPages = () => [];
@@ -165,6 +193,73 @@ function withinScope(pages, scopeId) {
 	};
 	return pages.filter(isInside);
 }
+var SKELETON_ROW_WIDTHS = [
+	"w-32",
+	"w-24",
+	"w-40",
+	"w-28",
+	"w-36",
+	"w-20"
+];
+function TreeRowsSkeleton({ label, rows }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "status",
+		"aria-label": label,
+		className: "flex flex-col",
+		children: SKELETON_ROW_WIDTHS.slice(0, rows).map((width, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex h-8 items-center gap-2 px-1",
+			style: { paddingLeft: `${index % 3 * 12 + 4}px` },
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.Skeleton, { className: "size-3.5 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: width })]
+		}, width))
+	});
+}
+function NotesSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "status",
+		"aria-label": "Loading notes",
+		className: "flex flex-col gap-2",
+		children: [0, 1].map((index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-2 rounded-lg border border-border p-3",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-24" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-full" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-2/3" })
+			]
+		}, index))
+	});
+}
+function PageSkeleton({ compact }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "status",
+		"aria-label": "Loading page",
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `flex flex-col gap-2 border-b border-border ${compact ? "px-4 pt-3 pb-4" : "bg-fill-subtle px-6 pt-5 pb-4"}`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, {
+					line: "text-caption",
+					className: "w-28"
+				}),
+				compact ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, {
+					line: "text-title",
+					className: "h-5 w-56"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-72 max-w-full" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, {
+					line: "text-caption",
+					className: "w-40"
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `flex flex-col gap-3 ${compact ? "p-4" : "p-6"}`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-full max-w-3xl" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-5/6 max-w-2xl" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Skeleton.SkeletonText, { className: "w-2/3 max-w-xl" })
+			]
+		})]
+	});
+}
 function MoreButton({ onClick, label = "Load more" }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -178,10 +273,7 @@ function MoreNotes({ source, pageId, cursor, pagesById, onPageClick }) {
 	const chunk = source.usePage(pageId, cursor);
 	const [showNext, setShowNext] = (0, react.useState)(false);
 	const known = (0, react.useMemo)(() => withPages(pagesById, chunk.data?.related ?? []), [chunk.data, pagesById]);
-	if (chunk.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "text-caption text-muted-foreground",
-		children: "Loading notes…"
-	});
+	if (chunk.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotesSkeleton, {});
 	if (!chunk.data) return null;
 	const next = chunk.data.notesNextCursor;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
@@ -203,7 +295,7 @@ function MoreNotes({ source, pageId, cursor, pagesById, onPageClick }) {
 	}) : null] });
 }
 /** A page's children, a page at a time. */
-function ChildPages({ useTreeLevels, parentId, onPageClick }) {
+function ChildPages({ useTreeLevels, parentId, onOpen }) {
 	const [cursors, setCursors] = (0, react.useState)([]);
 	const levels = useTreeLevels((0, react.useMemo)(() => [{ parentId }, ...cursors.map((cursor) => ({
 		parentId,
@@ -211,31 +303,121 @@ function ChildPages({ useTreeLevels, parentId, onPageClick }) {
 	}))], [parentId, cursors]));
 	const pages = levels.flatMap((level) => level.data?.pages ?? []);
 	const last = levels[levels.length - 1];
-	if (levels[0]?.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "text-caption text-muted-foreground",
-		children: "Loading pages…"
-	});
-	if (pages.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "text-body text-muted-foreground",
-		"data-testid": "knowledge-no-child-pages",
-		children: "No pages under this one."
+	if (levels[0]?.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageDetail.KnowledgeDetailSection, {
+		label: "Pages",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeRowsSkeleton, {
+			label: "Loading pages",
+			rows: 3
+		})
 	});
 	const next = last?.data?.nextCursor;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-		className: "flex flex-col gap-1",
-		children: pages.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
-			className: "flex flex-col",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				className: "text-left text-body font-medium text-info-indicator hover:underline",
-				onClick: () => onPageClick(child),
-				children: child.name
-			}), child.description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "truncate text-caption text-muted-foreground",
-				children: child.description
-			}) : null]
-		}, child.id))
-	}), next ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreButton, { onClick: () => setCursors((current) => [...current, next]) }) : null] });
+	if (pages.length === 0 && !next) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_domains_knowledge_components_KnowledgePageDetail.KnowledgeDetailSection, {
+		label: "Pages",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `rounded-xl p-1 ${require_primitives_raised_surface.raisedSurfaceStyle}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tree.Tree, {
+				className: "rounded-lg bg-background p-1",
+				onSelect: onOpen,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageItems, {
+					pages,
+					useTreeLevels,
+					onOpen
+				})
+			})
+		}), next ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreButton, { onClick: () => setCursors((current) => [...current, next]) }) : null]
+	});
+}
+function ChildPageItems({ pages, useTreeLevels, onOpen }) {
+	return pages.map((child) => child.childCount !== 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageFolder, {
+		page: child,
+		useTreeLevels,
+		onOpen
+	}, child.id) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tree.Tree.File, {
+		id: child.id,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tree.Tree.Icon, {
+			className: "text-muted-foreground",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileText, {})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageLabel, { page: child })]
+	}, child.id));
+}
+function ChildPageLabel({ page }) {
+	if (!page.description) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tree.Tree.Label, { children: page.name });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+		label: page.description,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tree.Tree.Label, { children: page.name })
+	});
+}
+function ChildPageFolder({ page, useTreeLevels, onOpen }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tree.Tree.Folder, {
+		id: page.id,
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Tree.Tree.FolderTrigger, {
+			actions: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				variant: "ghost",
+				size: "icon-sm",
+				tooltip: `Open ${page.name}`,
+				"aria-label": `Open ${page.name}`,
+				onClick: () => onOpen(page.id),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowRight, {})
+			}),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tree.Tree.Icon, {
+					className: "text-muted-foreground",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Folder, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageLabel, { page }),
+				page.childCount ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					as: "span",
+					variant: "caption",
+					tone: "muted",
+					className: "ml-auto pl-2 tabular-nums",
+					children: page.childCount
+				}) : null
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tree.Tree.FolderContent, { children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageLevel, {
+			parentId: page.id,
+			useTreeLevels,
+			onOpen
+		}) : null })]
+	});
+}
+function ChildPageLevel({ parentId, useTreeLevels, onOpen }) {
+	const [cursors, setCursors] = (0, react.useState)([]);
+	const levels = useTreeLevels([{ parentId }, ...cursors.map((cursor) => ({
+		parentId,
+		cursor
+	}))]);
+	const pages = levels.flatMap((level) => level.data?.pages ?? []);
+	const next = levels[levels.length - 1]?.data?.nextCursor;
+	if (levels[0]?.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		role: "none",
+		className: "pl-6",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeRowsSkeleton, {
+			label: "Loading pages",
+			rows: 2
+		})
+	});
+	if (levels[0]?.isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageLevelNote, { children: "Couldn’t load the pages under this one." });
+	if (pages.length === 0 && !next) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageLevelNote, { children: "No pages under this one." });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPageItems, {
+		pages,
+		useTreeLevels,
+		onOpen
+	}), next ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		role: "none",
+		className: "pl-9",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreButton, { onClick: () => setCursors((current) => [...current, next]) })
+	}) : null] });
+}
+function ChildPageLevelNote({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		role: "none",
+		className: "flex h-8 items-center pl-9 text-caption text-muted-foreground",
+		children
+	});
 }
 /** What a clicked mention line stands for: the notes on one page that mention the other. */
 function MentionPopup({ source, mention, pagesById, onOpen, onClose }) {
@@ -296,11 +478,7 @@ function MentionPopup({ source, mention, pagesById, onOpen, onClose }) {
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "min-h-0 overflow-y-auto",
-			children: detail.isPending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-				variant: "caption",
-				tone: "muted",
-				children: "Loading notes…"
-			}) : notes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+			children: detail.isPending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotesSkeleton, {}) : notes.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
 				variant: "caption",
 				tone: "muted",
 				children: [
@@ -312,7 +490,11 @@ function MentionPopup({ source, mention, pagesById, onOpen, onClose }) {
 				className: "flex flex-col gap-2",
 				children: notes.map((note) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageDetail.KnowledgeNoteItem, {
 					note,
-					pagesById: withPages(pagesById, detail.data?.related ?? []),
+					pagesById: withPages(pagesById, detail.data ? [
+						...detail.data.related,
+						...detail.data.ancestors,
+						detail.data.page
+					] : []),
 					onPageClick: (page) => onOpen(page.id),
 					compact: true
 				}, note.id))
@@ -320,15 +502,12 @@ function MentionPopup({ source, mention, pagesById, onOpen, onClose }) {
 		})]
 	});
 }
-function SelectedPage({ source, pageId, pagesById, onSelect, highlightMentionOf }) {
+function SelectedPage({ source, pageId, pagesById, onSelect, highlightMentionOf, compact }) {
 	const detail = source.usePage(pageId);
 	const activity = (source.useActivity ?? noActivity)(pageId);
 	const [moreNotes, setMoreNotes] = (0, react.useState)(null);
 	const known = (0, react.useMemo)(() => detail.data ? withPages(pagesById, [...detail.data.ancestors, ...detail.data.related]) : pagesById, [detail.data, pagesById]);
-	if (detail.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "text-ui-md p-4 text-muted-foreground",
-		children: "Loading page…"
-	});
+	if (detail.isPending) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageSkeleton, { compact });
 	if (detail.isError || !detail.data) {
 		const notFound = isNotFound(detail.error);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_EmptyState.EmptyState, {
@@ -341,6 +520,7 @@ function SelectedPage({ source, pageId, pagesById, onSelect, highlightMentionOf
 	const onPageClick = (page) => onSelect(page.id);
 	const next = detail.data.notesNextCursor;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageDetail.KnowledgePageDetail, {
+		compact,
 		page: detail.data.page,
 		notes: detail.data.notes,
 		pin: detail.data.pin ?? void 0,
@@ -353,7 +533,7 @@ function SelectedPage({ source, pageId, pagesById, onSelect, highlightMentionOf
 		childPages: source.useTreeLevels ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChildPages, {
 			useTreeLevels: source.useTreeLevels,
 			parentId: pageId,
-			onPageClick
+			onOpen: onSelect
 		}, pageId) : void 0,
 		notesMore: next ? moreNotes?.pageId === pageId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreNotes, {
 			source,
@@ -374,30 +554,39 @@ function SearchBox({ source, onSelect }) {
 	const seen = /* @__PURE__ */ new Set();
 	const pages = results.map((hit) => hit.page).filter((page) => seen.has(page.id) ? false : (seen.add(page.id), true)).slice(0, 10);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "relative min-w-60 flex-1",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			"aria-label": "Search knowledge",
+		className: "relative w-64 min-w-0",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_SearchInput.SearchInput, {
+			label: "Search knowledge",
 			placeholder: "Search pages and notes",
-			className: "text-ui-md h-8 w-full rounded border border-border bg-card px-2",
+			size: "sm",
 			value: query,
-			onChange: (event) => setQuery(event.target.value)
-		}), pages.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			role: "listbox",
-			"aria-label": "Search results",
-			className: "absolute z-20 mt-1 max-h-72 w-full overflow-auto rounded border border-border bg-card shadow-raised",
-			children: pages.map((page) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-				role: "option",
-				"aria-selected": false,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "text-ui-md w-full px-2 py-1.5 text-left hover:bg-muted",
-					onClick: () => {
-						onSelect(page.id);
-						setQuery("");
-					},
-					children: page.name
+			onValueChange: setQuery
+		}), pages.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `absolute z-20 mt-1 w-full overflow-hidden rounded-xl ${require_primitives_raised_surface.overlaySurfaceStyle}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_scroll_area.ScrollArea, {
+				maxHeight: "18rem",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					role: "listbox",
+					"aria-label": "Search results",
+					className: "p-1",
+					children: pages.map((page) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						role: "option",
+						"aria-selected": false,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: require_utils.cn(require_primitives_menu_item.menuItemButtonClass, "whitespace-normal"),
+							onClick: () => {
+								onSelect(page.id);
+								setQuery("");
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "line-clamp-2",
+								children: page.name
+							})
+						})
+					}, page.id))
 				})
-			}, page.id))
+			})
 		}) : null]
 	});
 }
@@ -480,7 +669,9 @@ function useLazyTree(source, graph, selected, graphOpened) {
 * opens it as a page straight away. Selecting in the tree keeps the current view, so the graph frames the
 * page instead.
 */
-function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view, onViewChange }) {
+function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view: requestedView, onViewChange, toolbarEnd, flush = false }) {
+	const narrow = require_hooks_use_is_mobile.useIsMobile(1024);
+	const view = !narrow && requestedView === "tree" ? "graph" : requestedView;
 	const selected = source.usePage(selectedPageId);
 	const lazyMode = !!source.useTreeLevels;
 	const [graphOpened, setGraphOpened] = (0, react.useState)([]);
@@ -690,7 +881,14 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 	const [mention, setMention] = (0, react.useState)(null);
 	const [marked, setMarked] = (0, react.useState)(null);
 	const closeMention = (0, react.useCallback)(() => setMention(null), []);
-	const graphShown = !require_hooks_use_is_mobile.useIsMobile(1024) || view === "graph";
+	const graphShown = !narrow || view === "graph";
+	const overlay = !narrow;
+	const [treeOpen, setTreeOpen] = (0, react.useState)(true);
+	const [drawerLastId, setDrawerLastId] = (0, react.useState)();
+	const viewTabs = (0, react.useRef)(null);
+	const showPagesButton = (0, react.useRef)(null);
+	const hidePagesButton = (0, react.useRef)(null);
+	const focusTabOnPageOpen = (0, react.useRef)(false);
 	const highlightMentionOf = marked && marked.source === selectedPageId ? marked.target : void 0;
 	const showPage = view === "page" && !!selectedPageId;
 	const [history, setHistory] = (0, react.useState)([]);
@@ -716,9 +914,13 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 		onSelect(pageId);
 		onViewChange("page");
 	};
+	const frameInGraph = (pageId) => {
+		onSelect(pageId);
+		if (requestedView !== "graph") onViewChange("graph");
+	};
 	const selectFromTree = (page) => {
 		if (page.isScope) setFocusScopeId(page.id);
-		if (view === "graph" && (lazyMode || pagesById.has(page.id)) && page.id !== selectedPageId) onSelect(page.id);
+		if (view === "graph" && (lazyMode || pagesById.has(page.id)) && page.id !== selectedPageId) frameInGraph(page.id);
 		else openPage(page.id);
 	};
 	const leaveScopeFocusFor = (pageId) => {
@@ -731,7 +933,7 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 	const selectFromSearch = (pageId) => {
 		if (view === "graph" && (lazyMode || pagesById.has(pageId)) && pageId !== selectedPageId) {
 			leaveScopeFocusFor(pageId);
-			onSelect(pageId);
+			frameInGraph(pageId);
 		} else openAnywhere(pageId);
 	};
 	const focusScope = focusScopeId ? lazy.pages.find((page) => page.id === focusScopeId) ?? pagesById.get(focusScopeId) : void 0;
@@ -743,214 +945,364 @@ function KnowledgePageExplorer({ graph, source, selectedPageId, onSelect, view,
 	]);
 	const focusedInGraph = view === "graph" ? pagesById.get(selectedPageId ?? drawn.hub ?? "") : void 0;
 	focusedInGraph && drawn.hiddenChildren.get(focusedInGraph.id);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex min-h-0 flex-1 flex-col gap-3",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchBox, {
-					source,
-					onSelect: selectFromSearch
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					role: "group",
-					"aria-label": "View",
-					className: "flex overflow-hidden rounded border border-border",
-					children: [
-						{
-							value: "tree",
-							label: "Tree",
-							narrowOnly: true
-						},
-						{
-							value: "graph",
-							label: "Graph"
-						},
-						{
-							value: "page",
-							label: "Page"
-						}
-					].map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						"aria-pressed": option.value === "page" ? showPage : option.value === "graph" ? !showPage && view !== "tree" : view === "tree",
-						disabled: option.value === "page" && !selectedPageId,
-						className: `text-ui-md px-3 py-1 text-muted-foreground disabled:opacity-50 aria-pressed:bg-fill-inverse aria-pressed:text-background ${option.narrowOnly ? "lg:hidden" : ""}`,
-						onClick: () => onViewChange(option.value),
-						children: option.label
-					}, option.value))
+	const views = [
+		{
+			value: "tree",
+			label: "Tree",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ListTree, {}),
+			narrowOnly: true
+		},
+		{
+			value: "graph",
+			label: "Graph",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Network, {}),
+			narrowOnly: false
+		},
+		{
+			value: "page",
+			label: "Page",
+			icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileText, {}),
+			narrowOnly: false
+		}
+	];
+	const tabValue = explorerTab(view, showPage);
+	const drawerPageId = overlay && !showPage && !!selectedPageId && !isNotFound(selected.error) && selectedPageId ? selectedPageId : void 0;
+	if (drawerPageId && drawerPageId !== drawerLastId) setDrawerLastId(drawerPageId);
+	const drawerShownId = drawerPageId ?? drawerLastId;
+	const graphInsets = {
+		left: treeInset(overlay, treeOpen),
+		right: drawerPageId ? PAGE_DRAWER_INSET : 0
+	};
+	const insetStyle = {
+		"--knowledge-tree-inset": `${graphInsets.left}px`,
+		"--knowledge-tree-drawer-inset": `${overlay && treeOpen ? TREE_DRAWER_INSET : 0}px`,
+		"--knowledge-drawer-inset": `${graphInsets.right}px`
+	};
+	const focusViewTab = () => viewTabs.current?.querySelector("[role=\"tab\"][aria-selected=\"true\"]")?.focus();
+	const focusPageTabOnMount = (section) => {
+		if (!section || !focusTabOnPageOpen.current) return;
+		focusTabOnPageOpen.current = false;
+		focusViewTab();
+	};
+	const toggleTree = (open) => {
+		(0, react_dom.flushSync)(() => setTreeOpen(open));
+		(open ? hidePagesButton : showPagesButton).current?.focus();
+	};
+	const treeClosed = overlay && !treeOpen;
+	const treeHeader = overlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DataPanel.DataPanel.Header, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataPanel.DataPanel.Heading, { children: "Pages" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataPanel.DataPanel.HeaderActions, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		variant: "ghost",
+		size: "icon-sm",
+		tooltip: "Hide pages",
+		"aria-label": "Hide pages",
+		ref: hidePagesButton,
+		onClick: () => toggleTree(false),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftClose, {})
+	}) })] }) : null;
+	const treeBody = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [focusScope ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 border-b border-surface-rim bg-fill-subtle px-3 py-2",
+		"data-testid": "knowledge-scope-focus",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "eyebrow",
+				tone: "muted",
+				className: "uppercase",
+				children: focusScope.displayLabel ?? "Scope"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex min-w-0 items-center gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeSourceIcon.KnowledgeSourceIcon, {
+					page: focusScope,
+					className: "size-3.5"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgeTooltip.KnowledgeTooltip, {
+					label: focusScope.address ?? focusScope.name,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+						as: "span",
+						variant: "label",
+						tone: "ink",
+						className: "truncate",
+						children: require_domains_knowledge_lib_pageAddress.scopeTitle(focusScope)
+					})
 				})]
-			}),
-			!lazyMode && graph.truncated && !showPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
-				className: "text-ui-sm text-muted-foreground",
-				children: [
-					"The graph shows the first ",
-					graph.pages.length,
-					" pages. Open the tree or search to reach the rest."
-				]
-			}) : null,
-			selectedPageId && !showPage && isNotFound(selected.error) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				role: "alert",
-				className: "text-ui-sm text-destructive-foreground",
-				children: "Page not found. The linked page may have been deleted or merged."
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex min-h-0 flex-1 flex-col gap-3 lg:flex-row",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("aside", {
-					className: `min-h-0 w-full flex-1 flex-col overflow-hidden rounded-lg border border-border bg-card lg:flex lg:w-72 lg:flex-none lg:shrink-0 ${view === "tree" ? "flex" : "hidden"}`,
-					children: [focusScope ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "flex items-center gap-2 border-b border-border bg-fill-subtle px-3 py-2",
-						"data-testid": "knowledge-scope-focus",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "flex min-w-0 flex-1 flex-col",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-								as: "span",
-								variant: "eyebrow",
-								tone: "muted",
-								className: "uppercase",
-								children: focusScope.displayLabel ?? "Scope"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-								as: "span",
-								variant: "label",
-								tone: "ink",
-								className: "truncate",
-								children: focusScope.address ?? focusScope.name
-							})]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "text-ui-sm shrink-0 rounded px-2 py-1 text-muted-foreground hover:bg-fill hover:text-foreground",
-							onClick: () => setFocusScopeId(null),
-							children: "All scopes"
-						})]
-					}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "min-h-0 flex-1 overflow-auto",
-						children: source.useTreeLevels && lazy.rootsPending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "px-3 py-2 text-body text-muted-foreground",
-							children: "Loading pages…"
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageTree.KnowledgePageTree, {
-							pages: treePages,
-							pinnedIds: graph.pinnedIds,
-							selectedPageId,
-							onSelect: selectFromTree,
-							initiallyExpanded: focusScope ? [focusScope.id] : void 0,
-							...source.useTreeLevels ? {
-								mayHaveChildren: lazy.mayHaveChildren,
-								onExpandedChange: lazy.onExpandedChange,
-								loadMore: lazy.loadMore
-							} : {}
-						}, focusScope ? focusScope.id : "all")
-					})]
-				}), showPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-					"aria-label": "Selected page",
-					className: "min-h-0 min-w-0 flex-1 overflow-auto rounded-lg border border-border bg-card",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedPage, {
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: () => setFocusScopeId(null),
+			children: "All scopes"
+		})]
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "min-h-0 flex-1 overflow-auto",
+		children: source.useTreeLevels && lazy.rootsPending ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "p-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeRowsSkeleton, {
+				label: "Loading pages",
+				rows: 6
+			})
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageTree.KnowledgePageTree, {
+			pages: treePages,
+			pinnedIds: graph.pinnedIds,
+			selectedPageId,
+			onSelect: selectFromTree,
+			initiallyExpanded: focusScope ? [focusScope.id] : void 0,
+			...source.useTreeLevels ? {
+				mayHaveChildren: lazy.mayHaveChildren,
+				onExpandedChange: lazy.onExpandedChange,
+				loadMore: lazy.loadMore
+			} : {}
+		}, focusScope ? focusScope.id : "all")
+	})] });
+	const drawerPage = drawerShownId ? pagesById.get(drawerShownId) ?? lazy.pages.find((page) => page.id === drawerShownId) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_lib_pagesByRefContext.KnowledgePagesByRef.Provider, {
+		value: fetchedPages,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `flex min-h-0 flex-1 flex-col ${flush ? "" : "gap-2"}`,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ActionRow.ActionRow, {
+					className: flush ? "shrink-0 border-b border-surface-rim px-3 py-2" : void 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ActionRow.ActionRow.Start, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tabs_tab.Tabs, {
+						ref: viewTabs,
+						value: tabValue,
+						defaultTab: tabValue,
+						onValueChange: (next) => onViewChange(next),
+						"aria-label": "View",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tabs_tab.TabList, {
+							variant: "pill-ghost",
+							size: "sm",
+							children: views.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tabs_tab.Tab, {
+								value: option.value,
+								disabled: option.value === "page" && !selectedPageId,
+								className: option.narrowOnly ? "lg:hidden" : void 0,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_Icon.Icon, {
+									size: "xs",
+									children: option.icon
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+									variant: "caption",
+									className: "text-inherit",
+									children: option.label
+								})]
+							}, option.value))
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchBox, {
 						source,
-						pageId: selectedPageId,
-						pagesById,
-						onSelect: openAnywhere,
-						highlightMentionOf
-					})
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: `relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background lg:block lg:h-full ${view === "graph" ? "block" : "hidden"}`,
-					"data-testid": "knowledge-graph-container",
+						onSelect: selectFromSearch
+					})] }), toolbarEnd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ActionRow.ActionRow.End, { children: toolbarEnd }) : null]
+				}),
+				!lazyMode && graph.truncated && !showPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+					variant: "caption",
+					tone: "muted",
+					className: flush ? "px-3 pt-2" : void 0,
+					children: [
+						"The graph shows the first ",
+						graph.pages.length,
+						" pages. Open the tree or search to reach the rest."
+					]
+				}) : null,
+				selectedPageId && !showPage && isNotFound(selected.error) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+					role: "alert",
+					variant: "caption",
+					className: `text-destructive-foreground ${flush ? "px-3 pt-2" : ""}`,
+					children: "Page not found. The linked page may have been deleted or merged."
+				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: insetStyle,
+					className: "relative flex min-h-0 flex-1 flex-col gap-3 lg:flex-row",
 					children: [
-						graphShown ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "absolute top-3 right-3 z-10 flex flex-col gap-2",
+						overlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							inert: treeClosed,
+							"aria-hidden": treeClosed || void 0,
+							"data-state": treeClosed ? "closed" : "open",
+							className: `absolute inset-y-2 left-2 z-10 flex w-72 transition duration-slow ease-out-custom motion-reduce:transition-none ${treeClosed ? "pointer-events-none -translate-x-4 opacity-0" : "translate-x-0 opacity-100"}`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DataPanel.DataPanel, {
+								variant: "inline",
+								title: "Pages",
+								className: "shadow-overlay",
+								children: [treeHeader, treeBody]
+							})
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+							"aria-label": "Pages",
+							className: `min-h-0 w-full flex-1 flex-col overflow-hidden rounded-lg border border-border bg-card lg:w-72 lg:flex-none lg:shrink-0 ${view === "tree" ? "flex" : "hidden"}`,
+							children: treeBody
+						}),
+						overlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							tooltip: "Show pages",
+							"aria-label": "Show pages",
+							size: "icon-sm",
+							inert: !treeClosed,
+							"aria-hidden": !treeClosed || void 0,
+							className: `absolute top-3 left-3 z-10 shadow-overlay transition-opacity duration-slow ease-out-custom motion-reduce:transition-none ${treeClosed ? "opacity-100" : "pointer-events-none opacity-0"}`,
+							ref: showPagesButton,
+							onClick: () => toggleTree(true),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.PanelLeftOpen, {})
+						}) : null,
+						showPage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+							ref: focusPageTabOnMount,
+							"aria-label": "Selected page",
+							className: `flex min-h-0 min-w-0 flex-1 flex-col ${overlay ? `bg-background p-2 pl-[calc(var(--knowledge-tree-inset)+0.5rem)] transition-[padding] duration-slow ease-out-custom motion-reduce:transition-none ${flush ? "" : "rounded-xl border border-border"}` : "overflow-hidden rounded-lg border border-border bg-card"}`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: overlay ? `flex min-h-0 flex-1 flex-col overflow-hidden rounded-studio-frame ${require_primitives_raised_surface.frameSurfaceStyle}` : "contents",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedPage, {
+									source,
+									pageId: selectedPageId,
+									pagesById,
+									onSelect: openAnywhere,
+									highlightMentionOf
+								})
+							})
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: `relative min-h-0 min-w-0 flex-1 overflow-hidden bg-background lg:block lg:h-full ${flush ? "" : "rounded-xl border border-border"} ${view === "graph" ? "block" : "hidden"}`,
+							"data-testid": "knowledge-graph-container",
 							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"data-testid": "knowledge-graph-back",
-									"aria-label": "Back",
-									title: backTo ? "Back to the page you focused before this one" : "Back (nothing to go back to yet)",
-									disabled: !backTo,
-									className: FLOAT_BUTTON,
-									onClick: goBack,
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, {
-										"aria-hidden": true,
-										className: "size-4"
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"aria-label": "All links",
-									"aria-pressed": allLinks,
-									"data-testid": "knowledge-graph-all-links",
-									title: `All links: ${allLinks ? "on" : "off"}. Draw every link between the pages in the graph, not only the selected page's`,
-									className: FLOAT_BUTTON,
-									onClick: () => setAllLinks((current) => !current),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link2, {
-										"aria-hidden": true,
-										className: "size-4"
-									})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"aria-label": "Link counts",
-									"aria-pressed": dotCounts,
-									"data-testid": "knowledge-graph-dot-counts",
-									title: `Link counts: ${dotCounts ? "on" : "off"}. Write how many links go in and out of each dot inside it`,
-									className: FLOAT_BUTTON,
-									onClick: () => setDotCounts((current) => !current),
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Hash, {
-										"aria-hidden": true,
-										className: "size-4"
+								graphShown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "absolute top-3 right-3 z-10 -translate-x-(--knowledge-drawer-inset) transition-transform duration-slow ease-out-custom motion-reduce:transition-none",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_buttons_group.ButtonsGroup, {
+										orientation: "vertical",
+										size: "sm",
+										"aria-label": "Graph options",
+										className: "rounded-xl shadow-overlay",
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+												"data-testid": "knowledge-graph-back",
+												"aria-label": "Back",
+												tooltip: backTo ? "Back to the previous page" : "Nothing to go back to yet",
+												tooltipPosition: "left",
+												size: "icon-sm",
+												disabled: !backTo,
+												onClick: goBack,
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ArrowLeft, {})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+												"aria-label": "All links",
+												"aria-pressed": allLinks,
+												"data-testid": "knowledge-graph-all-links",
+												tooltip: allLinks ? "Show only the selected page’s links" : "Show every link between pages",
+												tooltipPosition: "left",
+												size: "icon-sm",
+												className: allLinks ? "[--control-icon:var(--foreground)]" : void 0,
+												onClick: () => setAllLinks((current) => !current),
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link2, {})
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+												"aria-label": "Link counts",
+												"aria-pressed": dotCounts,
+												"data-testid": "knowledge-graph-dot-counts",
+												tooltip: dotCounts ? "Hide link counts" : "Show link counts on each dot",
+												tooltipPosition: "left",
+												size: "icon-sm",
+												className: dotCounts ? "[--control-icon:var(--foreground)]" : void 0,
+												onClick: () => setDotCounts((current) => !current),
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Hash, {})
+											})
+										]
 									})
-								})
+								}) : null,
+								graphShown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageGraph.KnowledgePageGraph, {
+									pages: graphPages,
+									edges: linkEdges,
+									pinnedIds: graph.pinnedIds,
+									grants: graph.grants,
+									selectedPageId,
+									centerId: drawn.hub,
+									hiddenLinks,
+									knownLinks,
+									fetchedLinks: hoverEdges,
+									exactLinkCounts: exactCounts,
+									onHover: setHoveredId,
+									nearIds: focusLinkIds,
+									settled: graphSettled,
+									insets: graphInsets,
+									collapsibleLegend: overlay,
+									showCounts: dotCounts,
+									onPreview: (page) => {
+										if (require_domains_knowledge_lib_graphShape.isChildPlaceholder(page) && page.parentId) previewParent(page.parentId);
+									},
+									onSelect: (page) => {
+										if (require_domains_knowledge_lib_graphShape.isChildPlaceholder(page)) return page.parentId ? previewParent(page.parentId) : void 0;
+										if (require_domains_knowledge_lib_graphShape.isRestCircle(page)) {
+											const parentId = page.parentId;
+											if (!parentId) return void 0;
+											setRevealed((current) => new Map(current).set(parentId, (current.get(parentId) ?? 0) + 12));
+											return lazy.loadMore.get(parentId)?.();
+										}
+										if (require_domains_knowledge_lib_graphShape.isScopeGroup(page)) return setOpenGroups((current) => new Set(current).add(page.id));
+										frameInGraph(page.id);
+									},
+									onOpen: (page) => openPage(page.id),
+									onClearSelection: () => {
+										setMention(null);
+										if (selectedPageId) onSelect(null);
+									},
+									onMentionSelect: setMention
+								}) : null,
+								overlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									inert: !drawerPageId,
+									"aria-hidden": !drawerPageId || void 0,
+									"data-state": drawerPageId ? "open" : "closed",
+									onTransitionEnd: (event) => {
+										if (!drawerPageId && event.target === event.currentTarget) setDrawerLastId(void 0);
+									},
+									className: `absolute inset-y-2 right-2 z-10 flex w-96 transition duration-slow ease-out-custom motion-reduce:transition-none ${drawerPageId ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-4 opacity-0"}`,
+									children: drawerShownId ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DataPanel.DataPanel, {
+										variant: "inline",
+										title: "Page details",
+										className: "shadow-overlay",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DataPanel.DataPanel.Header, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataPanel.DataPanel.Heading, {
+											className: "min-w-0 flex-1 shrink",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												className: "truncate",
+												children: drawerPage?.name ?? "Page"
+											})
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_DataPanel.DataPanel.HeaderActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+											variant: "ghost",
+											size: "icon-sm",
+											tooltip: "Open page",
+											"aria-label": "Open page",
+											onClick: () => {
+												focusTabOnPageOpen.current = true;
+												openPage(drawerShownId);
+											},
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SquareArrowOutUpRight, {})
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DataPanel.DataPanel.CloseButton, {
+											icon: "x",
+											label: "Close page details",
+											tooltip: "Close",
+											onClick: () => {
+												focusViewTab();
+												onSelect(null);
+											}
+										})] })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "flex min-h-0 flex-1 flex-col overflow-hidden",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedPage, {
+												source,
+												pageId: drawerShownId,
+												pagesById,
+												onSelect: selectFromSearch,
+												highlightMentionOf,
+												compact: true
+											})
+										})]
+									}) : null
+								}) : null,
+								mention && graphShown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MentionPopup, {
+									source,
+									mention,
+									pagesById,
+									onClose: closeMention,
+									onOpen: (pageId) => {
+										setMarked(pageId === mention.source.id ? {
+											source: mention.source.id,
+											target: mention.target.id
+										} : null);
+										setMention(null);
+										openAnywhere(pageId);
+									}
+								}) : null
 							]
-						}) : null,
-						graphShown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_knowledge_components_KnowledgePageGraph.KnowledgePageGraph, {
-							pages: graphPages,
-							edges: linkEdges,
-							pinnedIds: graph.pinnedIds,
-							grants: graph.grants,
-							selectedPageId,
-							centerId: drawn.hub,
-							hiddenLinks,
-							knownLinks,
-							fetchedLinks: hoverEdges,
-							exactLinkCounts: exactCounts,
-							onHover: setHoveredId,
-							nearIds: focusLinkIds,
-							settled: graphSettled,
-							showCounts: dotCounts,
-							onPreview: (page) => {
-								if (require_domains_knowledge_lib_graphShape.isChildPlaceholder(page) && page.parentId) previewParent(page.parentId);
-							},
-							onSelect: (page) => {
-								if (require_domains_knowledge_lib_graphShape.isChildPlaceholder(page)) return page.parentId ? previewParent(page.parentId) : void 0;
-								if (require_domains_knowledge_lib_graphShape.isRestCircle(page)) {
-									const parentId = page.parentId;
-									if (!parentId) return void 0;
-									setRevealed((current) => new Map(current).set(parentId, (current.get(parentId) ?? 0) + 12));
-									return lazy.loadMore.get(parentId)?.();
-								}
-								if (require_domains_knowledge_lib_graphShape.isScopeGroup(page)) return setOpenGroups((current) => new Set(current).add(page.id));
-								onSelect(page.id);
-								if (view !== "graph") onViewChange("graph");
-							},
-							onOpen: (page) => openPage(page.id),
-							onClearSelection: () => {
-								setMention(null);
-								if (selectedPageId) onSelect(null);
-							},
-							onMentionSelect: setMention
-						}) : null,
-						mention && graphShown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MentionPopup, {
-							source,
-							mention,
-							pagesById,
-							onClose: closeMention,
-							onOpen: (pageId) => {
-								setMarked(pageId === mention.source.id ? {
-									source: mention.source.id,
-									target: mention.target.id
-								} : null);
-								setMention(null);
-								openAnywhere(pageId);
-							}
-						}) : null
+						})
 					]
-				})]
-			})
-		]
+				})
+			]
+		})
 	});
 }
 exports.FOCUS_LINK_CAP = FOCUS_LINK_CAP;