@mastra/playground-ui 68.0.0-alpha.2 → 68.0.0

package/dist/domains/knowledge/components/KnowledgePageTree.es.js

@@ -1,9 +1,30 @@
 import { t as cn } from "../../../utils-DQx8TpNT.js";
-import { buildPageTree, pageAncestorIds, visiblePageRows } from "../lib/pageTree.es.js";
+import { buildPageTree, childCountLabel, pageAncestorIds, visiblePageRows } from "../lib/pageTree.es.js";
+import { prefersMotion } from "../lib/useLeavingNodes.es.js";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight, Pin } from "lucide-react";
 // src/domains/knowledge/components/KnowledgePageTree.tsx
+/**
+* The box of the nearest ancestor (or the element itself) that really scrolls vertically. The tree sets
+* `overflow-y: auto` itself but, as tall as its rows, never overflows; a parent is what scrolls, so a
+* node counts only when its content is taller than it is.
+*/
+function scrollingBox(element) {
+	let overflowing;
+	for (let node = element; node; node = node.parentElement) {
+		const { overflowY } = getComputedStyle(node);
+		if (overflowY !== "auto" && overflowY !== "scroll" && overflowY !== "overlay") continue;
+		if (node.scrollHeight > node.clientHeight) return node.getBoundingClientRect();
+		overflowing ??= node;
+	}
+	return (overflowing ?? element)?.getBoundingClientRect();
+}
+/** Where in the scroller a row focused from elsewhere lands, as a fraction of its height from the top. */
+var SCROLL_ROW_AT = 1 / 3;
+/** A row between these fractions of the scroller is comfortably in view and is not moved. */
+var COMFORT_TOP = .1;
+var COMFORT_BOTTOM = .7;
 /** The key {@link KnowledgePageTree}'s `loadMore` uses for the root level. */
 var KNOWLEDGE_TREE_ROOT = "";
 /**
@@ -14,7 +35,8 @@ var KNOWLEDGE_TREE_ROOT = "";
 *
 * A host that loads the tree a level at a time passes `mayHaveChildren` (so unloaded pages still offer
 * a chevron), listens to `onExpandedChange` to load the opened levels, and passes `loadMore` for
-* levels with more children to fetch.
+* levels with more children to fetch. A page's `childCount`, when the server sends one, shows beside
+* its name. Selecting a page with children also opens it.
 */
 function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initiallyExpanded, mayHaveChildren, onExpandedChange, loadMore, "aria-label": ariaLabel = "Knowledge pages" }) {
 	const roots = useMemo(() => buildPageTree(pages), [pages]);
@@ -22,9 +44,16 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 	const [expanded, setExpanded] = useState(() => new Set(initiallyExpanded ?? roots.map((root) => root.page.id)));
 	const [focusedId, setFocusedId] = useState(null);
 	const itemRefs = useRef(/* @__PURE__ */ new Map());
+	const revealed = useRef(null);
 	useEffect(() => {
-		if (!selectedPageId) return;
+		if (!selectedPageId) {
+			revealed.current = null;
+			return;
+		}
 		const path = pageAncestorIds(pages, selectedPageId);
+		const key = [selectedPageId, ...path].join("/");
+		if (revealed.current === key) return;
+		revealed.current = key;
 		setExpanded((current) => path.every((id) => current.has(id)) ? current : /* @__PURE__ */ new Set([...current, ...path]));
 	}, [pages, selectedPageId]);
 	useEffect(() => {
@@ -38,6 +67,35 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 		expanded,
 		mayHaveChildren
 	]);
+	const scroller = useRef(null);
+	const scrolledTo = useRef(null);
+	const userScrolled = useRef(false);
+	useEffect(() => {
+		if (!selectedPageId) {
+			scrolledTo.current = null;
+			return;
+		}
+		const element = itemRefs.current.get(selectedPageId);
+		if (!element) return;
+		const first = scrolledTo.current !== selectedPageId;
+		if (first) {
+			scrolledTo.current = selectedPageId;
+			userScrolled.current = false;
+		} else if (userScrolled.current) return;
+		const box = scrollingBox(scroller.current);
+		const at = element.getBoundingClientRect();
+		if (!first && !box) return;
+		if (!first && box && box.height === 0 && at.top >= box.top && at.bottom <= box.bottom) return;
+		if (box && box.height > 0) {
+			if (at.top >= box.top + box.height * COMFORT_TOP && at.bottom <= box.top + box.height * COMFORT_BOTTOM) return;
+			element.style.scrollMarginTop = `${box.height * SCROLL_ROW_AT}px`;
+		}
+		element.scrollIntoView?.({
+			block: "start",
+			behavior: first && prefersMotion() ? "smooth" : "auto"
+		});
+		element.style.scrollMarginTop = "";
+	}, [rows, selectedPageId]);
 	const activeId = focusedId && rows.some((row) => row.page.id === focusedId) ? focusedId : rows.find((row) => row.page.id === selectedPageId)?.page.id ?? rows[0]?.page.id;
 	const toggle = (id, open) => setExpanded((current) => {
 		if (current.has(id) === open) return current;
@@ -83,9 +141,14 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 	});
 	const ancestorAt = [];
 	return /* @__PURE__ */ jsx("div", {
+		ref: scroller,
 		role: "tree",
 		"aria-label": ariaLabel,
 		className: "min-h-0 overflow-y-auto py-1",
+		onWheel: () => userScrolled.current = true,
+		onTouchMove: () => userScrolled.current = true,
+		onPointerDown: () => userScrolled.current = true,
+		onKeyDown: () => userScrolled.current = true,
 		children: rows.map((row, index) => {
 			const selected = row.page.id === selectedPageId;
 			ancestorAt[row.depth] = row.page.id;
@@ -114,7 +177,10 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 				tabIndex: row.page.id === activeId ? 0 : -1,
 				onFocus: () => setFocusedId(row.page.id),
 				onKeyDown: (event) => onKeyDown(event, index),
-				onClick: () => onSelect(row.page),
+				onClick: () => {
+					onSelect(row.page);
+					if (row.hasChildren) toggle(row.page.id, true);
+				},
 				className: cn("flex min-h-8 cursor-pointer items-center gap-1 rounded-md pr-2 outline-none focus-visible:ring-1 focus-visible:ring-border-focus", selected ? "bg-fill text-foreground" : "text-foreground hover:bg-fill"),
 				style: { paddingLeft: `${row.depth * 16 + 4}px` },
 				children: [
@@ -139,6 +205,12 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 						className: cn("min-w-0 flex-1 truncate text-body", row.page.isScope && "font-medium"),
 						children: row.page.name
 					}),
+					row.page.childCount ? /* @__PURE__ */ jsx("span", {
+						"data-testid": "knowledge-tree-count",
+						"aria-label": `${childCountLabel(row.page)} below`,
+						className: "shrink-0 text-caption text-muted-foreground tabular-nums",
+						children: childCountLabel(row.page)
+					}) : null,
 					pinned.has(row.page.id) ? /* @__PURE__ */ jsx(Pin, {
 						size: 12,
 						className: "shrink-0 text-badge-amber-indicator",

package/dist/domains/knowledge/components/KnowledgePageTree.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"KnowledgePageTree.es.js","names":[],"sources":["../../../../src/domains/knowledge/components/KnowledgePageTree.tsx"],"sourcesContent":["import { ChevronRight, Pin } from 'lucide-react';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { buildPageTree, pageAncestorIds, visiblePageRows } from '../lib/pageTree';\nimport type { KnowledgePagePayload } from '../pageTypes';\n\nimport { cn } from '@/utils/cn';\n\n/** The key {@link KnowledgePageTree}'s `loadMore` uses for the root level. */\nexport const KNOWLEDGE_TREE_ROOT = '';\n\n/**\n * The Knowledge page tree: scopes and pages nested by parent, siblings in\n * stored order. Selecting a page from elsewhere (graph, search) opens the path\n * to it. Keyboard follows the WAI-ARIA tree pattern: Up/Down move, Right opens\n * or enters, Left closes or goes to the parent, Enter/Space selects.\n *\n * A host that loads the tree a level at a time passes `mayHaveChildren` (so unloaded pages still offer\n * a chevron), listens to `onExpandedChange` to load the opened levels, and passes `loadMore` for\n * levels with more children to fetch.\n */\nexport function KnowledgePageTree({\n  pages,\n  pinnedIds,\n  selectedPageId,\n  onSelect,\n  initiallyExpanded,\n  mayHaveChildren,\n  onExpandedChange,\n  loadMore,\n  'aria-label': ariaLabel = 'Knowledge pages',\n}: {\n  pages: KnowledgePagePayload[];\n  pinnedIds?: readonly string[];\n  selectedPageId?: string | null;\n  onSelect: (page: KnowledgePagePayload) => void;\n  /** Ids open on first render; defaults to every root. */\n  initiallyExpanded?: string[];\n  /** True for a page whose children are not loaded yet, so it can still be opened. */\n  mayHaveChildren?: (page: KnowledgePagePayload) => boolean;\n  onExpandedChange?: (expanded: ReadonlySet<string>) => void;\n  /** Parent id ({@link KNOWLEDGE_TREE_ROOT} for the roots) to a loader for its next children. */\n  loadMore?: ReadonlyMap<string, () => void>;\n  'aria-label'?: string;\n}) {\n  const roots = useMemo(() => buildPageTree(pages), [pages]);\n  const pinned = useMemo(() => new Set(pinnedIds), [pinnedIds]);\n  const [expanded, setExpanded] = useState<Set<string>>(\n    () => new Set(initiallyExpanded ?? roots.map(root => root.page.id)),\n  );\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  const itemRefs = useRef(new Map<string, HTMLDivElement>());\n\n  useEffect(() => {\n    if (!selectedPageId) return;\n    const path = pageAncestorIds(pages, selectedPageId);\n    setExpanded(current => (path.every(id => current.has(id)) ? current : new Set([...current, ...path])));\n  }, [pages, selectedPageId]);\n\n  useEffect(() => {\n    onExpandedChange?.(expanded);\n  }, [expanded, onExpandedChange]);\n\n  const rows = useMemo(\n    () =>\n      visiblePageRows(roots, expanded).map(row =>\n        !row.hasChildren && mayHaveChildren?.(row.page) ? { ...row, hasChildren: true } : row,\n      ),\n    [roots, expanded, mayHaveChildren],\n  );\n  const activeId =\n    focusedId && rows.some(row => row.page.id === focusedId)\n      ? focusedId\n      : (rows.find(row => row.page.id === selectedPageId)?.page.id ?? rows[0]?.page.id);\n\n  const toggle = (id: string, open: boolean) =>\n    setExpanded(current => {\n      if (current.has(id) === open) return current;\n      const next = new Set(current);\n      if (open) next.add(id);\n      else next.delete(id);\n      return next;\n    });\n\n  const focus = (id: string | undefined) => {\n    if (!id) return;\n    setFocusedId(id);\n    itemRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number) => {\n    const row = rows[index];\n    if (!row) return;\n    switch (event.key) {\n      case 'ArrowDown':\n        focus(rows[index + 1]?.page.id);\n        break;\n      case 'ArrowUp':\n        focus(rows[index - 1]?.page.id);\n        break;\n      case 'ArrowRight':\n        if (row.hasChildren && !row.expanded) toggle(row.page.id, true);\n        else if (row.expanded) focus(rows[index + 1]?.page.id);\n        break;\n      case 'ArrowLeft':\n        if (row.expanded) toggle(row.page.id, false);\n        else focus(rows.slice(0, index).findLast(candidate => candidate.depth < row.depth)?.page.id);\n        break;\n      case 'Enter':\n      case ' ':\n        onSelect(row.page);\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n  };\n\n  if (rows.length === 0) {\n    return <p className=\"px-3 py-2 text-body text-muted-foreground\">No pages yet.</p>;\n  }\n\n  const ancestorAt: string[] = [];\n  return (\n    <div role=\"tree\" aria-label={ariaLabel} className=\"min-h-0 overflow-y-auto py-1\">\n      {rows.map((row, index) => {\n        const selected = row.page.id === selectedPageId;\n        ancestorAt[row.depth] = row.page.id;\n        // Levels whose last loaded child is this row's subtree end here: offer their next children.\n        const nextDepth = rows[index + 1]?.depth ?? -1;\n        const closing: Array<{ parentId: string; depth: number }> = [];\n        for (let depth = row.depth - 1; depth >= nextDepth; depth--) {\n          const parentId = depth < 0 ? KNOWLEDGE_TREE_ROOT : ancestorAt[depth];\n          if (parentId !== undefined) closing.push({ parentId, depth: depth + 1 });\n        }\n        if (row.expanded && rows[index + 1]?.depth !== row.depth + 1)\n          closing.unshift({ parentId: row.page.id, depth: row.depth + 1 });\n        return (\n          <Fragment key={row.page.id}>\n            <div\n              ref={element => {\n                if (element) itemRefs.current.set(row.page.id, element);\n                else itemRefs.current.delete(row.page.id);\n              }}\n              role=\"treeitem\"\n              aria-level={row.depth + 1}\n              aria-selected={selected}\n              aria-expanded={row.hasChildren ? row.expanded : undefined}\n              tabIndex={row.page.id === activeId ? 0 : -1}\n              onFocus={() => setFocusedId(row.page.id)}\n              onKeyDown={event => onKeyDown(event, index)}\n              onClick={() => onSelect(row.page)}\n              className={cn(\n                'flex min-h-8 cursor-pointer items-center gap-1 rounded-md pr-2 outline-none focus-visible:ring-1 focus-visible:ring-border-focus',\n                selected ? 'bg-fill text-foreground' : 'text-foreground hover:bg-fill',\n              )}\n              style={{ paddingLeft: `${row.depth * 16 + 4}px` }}\n            >\n              {row.hasChildren ? (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={row.expanded ? `Collapse ${row.page.name}` : `Expand ${row.page.name}`}\n                  className=\"flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground\"\n                  onClick={event => {\n                    event.stopPropagation();\n                    toggle(row.page.id, !row.expanded);\n                  }}\n                >\n                  <ChevronRight size={14} className={cn('transition-transform', row.expanded && 'rotate-90')} />\n                </button>\n              ) : (\n                <span className=\"size-5 shrink-0\" aria-hidden />\n              )}\n              <span className={cn('min-w-0 flex-1 truncate text-body', row.page.isScope && 'font-medium')}>\n                {row.page.name}\n              </span>\n              {pinned.has(row.page.id) ? (\n                <Pin size={12} className=\"shrink-0 text-badge-amber-indicator\" aria-label=\"Pinned\" />\n              ) : null}\n              {row.page.isScope && row.page.address && row.page.address !== row.page.name ? (\n                <span\n                  data-testid=\"knowledge-tree-address\"\n                  className=\"max-w-1/2 min-w-0 truncate text-caption text-muted-foreground\"\n                >\n                  {row.page.address}\n                </span>\n              ) : null}\n            </div>\n            {closing.map(({ parentId, depth }) => {\n              const more = loadMore?.get(parentId);\n              return more ? (\n                <button\n                  key={`more-${parentId}`}\n                  type=\"button\"\n                  className=\"flex min-h-7 w-full items-center text-left text-caption text-muted-foreground hover:text-foreground\"\n                  style={{ paddingLeft: `${depth * 16 + 28}px` }}\n                  onClick={more}\n                >\n                  Load more\n                </button>\n              ) : null;\n            })}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"KnowledgePageTree.es.js","names":[],"sources":["../../../../src/domains/knowledge/components/KnowledgePageTree.tsx"],"sourcesContent":["import { ChevronRight, Pin } from 'lucide-react';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { buildPageTree, childCountLabel, pageAncestorIds, visiblePageRows } from '../lib/pageTree';\nimport { prefersMotion } from '../lib/useLeavingNodes';\nimport type { KnowledgePagePayload } from '../pageTypes';\n\nimport { cn } from '@/utils/cn';\n\n/**\n * The box of the nearest ancestor (or the element itself) that really scrolls vertically. The tree sets\n * `overflow-y: auto` itself but, as tall as its rows, never overflows; a parent is what scrolls, so a\n * node counts only when its content is taller than it is.\n */\nfunction scrollingBox(element: HTMLElement | null): DOMRect | undefined {\n  let overflowing: HTMLElement | undefined;\n  for (let node = element; node; node = node.parentElement) {\n    const { overflowY } = getComputedStyle(node);\n    if (overflowY !== 'auto' && overflowY !== 'scroll' && overflowY !== 'overlay') continue;\n    if (node.scrollHeight > node.clientHeight) return node.getBoundingClientRect();\n    overflowing ??= node;\n  }\n  return (overflowing ?? element)?.getBoundingClientRect();\n}\n\n/** Where in the scroller a row focused from elsewhere lands, as a fraction of its height from the top. */\nconst SCROLL_ROW_AT = 1 / 3;\n/** A row between these fractions of the scroller is comfortably in view and is not moved. */\nconst COMFORT_TOP = 0.1;\nconst COMFORT_BOTTOM = 0.7;\n\n/** The key {@link KnowledgePageTree}'s `loadMore` uses for the root level. */\nexport const KNOWLEDGE_TREE_ROOT = '';\n\n/**\n * The Knowledge page tree: scopes and pages nested by parent, siblings in\n * stored order. Selecting a page from elsewhere (graph, search) opens the path\n * to it. Keyboard follows the WAI-ARIA tree pattern: Up/Down move, Right opens\n * or enters, Left closes or goes to the parent, Enter/Space selects.\n *\n * A host that loads the tree a level at a time passes `mayHaveChildren` (so unloaded pages still offer\n * a chevron), listens to `onExpandedChange` to load the opened levels, and passes `loadMore` for\n * levels with more children to fetch. A page's `childCount`, when the server sends one, shows beside\n * its name. Selecting a page with children also opens it.\n */\nexport function KnowledgePageTree({\n  pages,\n  pinnedIds,\n  selectedPageId,\n  onSelect,\n  initiallyExpanded,\n  mayHaveChildren,\n  onExpandedChange,\n  loadMore,\n  'aria-label': ariaLabel = 'Knowledge pages',\n}: {\n  pages: KnowledgePagePayload[];\n  pinnedIds?: readonly string[];\n  selectedPageId?: string | null;\n  onSelect: (page: KnowledgePagePayload) => void;\n  /** Ids open on first render; defaults to every root. */\n  initiallyExpanded?: string[];\n  /** True for a page whose children are not loaded yet, so it can still be opened. */\n  mayHaveChildren?: (page: KnowledgePagePayload) => boolean;\n  onExpandedChange?: (expanded: ReadonlySet<string>) => void;\n  /** Parent id ({@link KNOWLEDGE_TREE_ROOT} for the roots) to a loader for its next children. */\n  loadMore?: ReadonlyMap<string, () => void>;\n  'aria-label'?: string;\n}) {\n  const roots = useMemo(() => buildPageTree(pages), [pages]);\n  const pinned = useMemo(() => new Set(pinnedIds), [pinnedIds]);\n  const [expanded, setExpanded] = useState<Set<string>>(\n    () => new Set(initiallyExpanded ?? roots.map(root => root.page.id)),\n  );\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  const itemRefs = useRef(new Map<string, HTMLDivElement>());\n\n  // Open the path to a selection once. Later renders with the same selection and path (a refetch, a\n  // level loading) leave it alone, so a parent the user collapses over the selection stays collapsed.\n  const revealed = useRef<string | null>(null);\n  useEffect(() => {\n    if (!selectedPageId) {\n      // Forget the last reveal, so picking the same page again after a clear opens its path.\n      revealed.current = null;\n      return;\n    }\n    const path = pageAncestorIds(pages, selectedPageId);\n    const key = [selectedPageId, ...path].join('/');\n    if (revealed.current === key) return;\n    revealed.current = key;\n    setExpanded(current => (path.every(id => current.has(id)) ? current : new Set([...current, ...path])));\n  }, [pages, selectedPageId]);\n\n  useEffect(() => {\n    onExpandedChange?.(expanded);\n  }, [expanded, onExpandedChange]);\n\n  const rows = useMemo(\n    () =>\n      visiblePageRows(roots, expanded).map(row =>\n        !row.hasChildren && mayHaveChildren?.(row.page) ? { ...row, hasChildren: true } : row,\n      ),\n    [roots, expanded, mayHaveChildren],\n  );\n  // Bring the selected row into view when it is selected, as soon as it exists, and again if rows that load\n  // later push it out of view (a deep page's levels arrive one after another). Once the user scrolls, presses a key or\n  // a pointer in the tree it is left alone. The row goes a third of the way down the scroller, middle-top, not\n  // hard against its bottom edge; keyboard focus is not moved.\n  const scroller = useRef<HTMLDivElement>(null);\n  const scrolledTo = useRef<string | null>(null);\n  const userScrolled = useRef(false);\n  useEffect(() => {\n    if (!selectedPageId) {\n      scrolledTo.current = null;\n      return;\n    }\n    const element = itemRefs.current.get(selectedPageId);\n    if (!element) return;\n    const first = scrolledTo.current !== selectedPageId;\n    if (first) {\n      scrolledTo.current = selectedPageId;\n      userScrolled.current = false;\n    } else if (userScrolled.current) return;\n    const box = scrollingBox(scroller.current);\n    const at = element.getBoundingClientRect();\n    if (!first && !box) return;\n    if (!first && box && box.height === 0 && at.top >= box.top && at.bottom <= box.bottom) return;\n    if (box && box.height > 0) {\n      // A row already well inside the scroller stays where it is.\n      const inView = at.top >= box.top + box.height * COMFORT_TOP && at.bottom <= box.top + box.height * COMFORT_BOTTOM;\n      if (inView) return;\n      // Otherwise it lands a third of the way down; the browser clamps this at the top and bottom of the list.\n      element.style.scrollMarginTop = `${box.height * SCROLL_ROW_AT}px`;\n    }\n    element.scrollIntoView?.({ block: 'start', behavior: first && prefersMotion() ? 'smooth' : 'auto' });\n    // The margin only steers this scroll; left on, focus() scrolls and a resized pane would keep a stale gap.\n    element.style.scrollMarginTop = '';\n  }, [rows, selectedPageId]);\n  const activeId =\n    focusedId && rows.some(row => row.page.id === focusedId)\n      ? focusedId\n      : (rows.find(row => row.page.id === selectedPageId)?.page.id ?? rows[0]?.page.id);\n\n  const toggle = (id: string, open: boolean) =>\n    setExpanded(current => {\n      if (current.has(id) === open) return current;\n      const next = new Set(current);\n      if (open) next.add(id);\n      else next.delete(id);\n      return next;\n    });\n\n  const focus = (id: string | undefined) => {\n    if (!id) return;\n    setFocusedId(id);\n    itemRefs.current.get(id)?.focus();\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number) => {\n    const row = rows[index];\n    if (!row) return;\n    switch (event.key) {\n      case 'ArrowDown':\n        focus(rows[index + 1]?.page.id);\n        break;\n      case 'ArrowUp':\n        focus(rows[index - 1]?.page.id);\n        break;\n      case 'ArrowRight':\n        if (row.hasChildren && !row.expanded) toggle(row.page.id, true);\n        else if (row.expanded) focus(rows[index + 1]?.page.id);\n        break;\n      case 'ArrowLeft':\n        if (row.expanded) toggle(row.page.id, false);\n        else focus(rows.slice(0, index).findLast(candidate => candidate.depth < row.depth)?.page.id);\n        break;\n      case 'Enter':\n      case ' ':\n        onSelect(row.page);\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n  };\n\n  if (rows.length === 0) {\n    return <p className=\"px-3 py-2 text-body text-muted-foreground\">No pages yet.</p>;\n  }\n\n  const ancestorAt: string[] = [];\n  return (\n    <div\n      ref={scroller}\n      role=\"tree\"\n      aria-label={ariaLabel}\n      className=\"min-h-0 overflow-y-auto py-1\"\n      onWheel={() => (userScrolled.current = true)}\n      onTouchMove={() => (userScrolled.current = true)}\n      onPointerDown={() => (userScrolled.current = true)}\n      onKeyDown={() => (userScrolled.current = true)}\n    >\n      {rows.map((row, index) => {\n        const selected = row.page.id === selectedPageId;\n        ancestorAt[row.depth] = row.page.id;\n        // Levels whose last loaded child is this row's subtree end here: offer their next children.\n        const nextDepth = rows[index + 1]?.depth ?? -1;\n        const closing: Array<{ parentId: string; depth: number }> = [];\n        for (let depth = row.depth - 1; depth >= nextDepth; depth--) {\n          const parentId = depth < 0 ? KNOWLEDGE_TREE_ROOT : ancestorAt[depth];\n          if (parentId !== undefined) closing.push({ parentId, depth: depth + 1 });\n        }\n        if (row.expanded && rows[index + 1]?.depth !== row.depth + 1)\n          closing.unshift({ parentId: row.page.id, depth: row.depth + 1 });\n        return (\n          <Fragment key={row.page.id}>\n            <div\n              ref={element => {\n                if (element) itemRefs.current.set(row.page.id, element);\n                else itemRefs.current.delete(row.page.id);\n              }}\n              role=\"treeitem\"\n              aria-level={row.depth + 1}\n              aria-selected={selected}\n              aria-expanded={row.hasChildren ? row.expanded : undefined}\n              tabIndex={row.page.id === activeId ? 0 : -1}\n              onFocus={() => setFocusedId(row.page.id)}\n              onKeyDown={event => onKeyDown(event, index)}\n              onClick={() => {\n                onSelect(row.page);\n                // Selecting a page with children opens it too, which loads them in a lazily loaded tree.\n                if (row.hasChildren) toggle(row.page.id, true);\n              }}\n              className={cn(\n                'flex min-h-8 cursor-pointer items-center gap-1 rounded-md pr-2 outline-none focus-visible:ring-1 focus-visible:ring-border-focus',\n                selected ? 'bg-fill text-foreground' : 'text-foreground hover:bg-fill',\n              )}\n              style={{ paddingLeft: `${row.depth * 16 + 4}px` }}\n            >\n              {row.hasChildren ? (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={row.expanded ? `Collapse ${row.page.name}` : `Expand ${row.page.name}`}\n                  className=\"flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground\"\n                  onClick={event => {\n                    event.stopPropagation();\n                    toggle(row.page.id, !row.expanded);\n                  }}\n                >\n                  <ChevronRight size={14} className={cn('transition-transform', row.expanded && 'rotate-90')} />\n                </button>\n              ) : (\n                <span className=\"size-5 shrink-0\" aria-hidden />\n              )}\n              <span className={cn('min-w-0 flex-1 truncate text-body', row.page.isScope && 'font-medium')}>\n                {row.page.name}\n              </span>\n              {row.page.childCount ? (\n                <span\n                  data-testid=\"knowledge-tree-count\"\n                  aria-label={`${childCountLabel(row.page)} below`}\n                  className=\"shrink-0 text-caption text-muted-foreground tabular-nums\"\n                >\n                  {childCountLabel(row.page)}\n                </span>\n              ) : null}\n              {pinned.has(row.page.id) ? (\n                <Pin size={12} className=\"shrink-0 text-badge-amber-indicator\" aria-label=\"Pinned\" />\n              ) : null}\n              {row.page.isScope && row.page.address && row.page.address !== row.page.name ? (\n                <span\n                  data-testid=\"knowledge-tree-address\"\n                  className=\"max-w-1/2 min-w-0 truncate text-caption text-muted-foreground\"\n                >\n                  {row.page.address}\n                </span>\n              ) : null}\n            </div>\n            {closing.map(({ parentId, depth }) => {\n              const more = loadMore?.get(parentId);\n              return more ? (\n                <button\n                  key={`more-${parentId}`}\n                  type=\"button\"\n                  className=\"flex min-h-7 w-full items-center text-left text-caption text-muted-foreground hover:text-foreground\"\n                  style={{ paddingLeft: `${depth * 16 + 28}px` }}\n                  onClick={more}\n                >\n                  Load more\n                </button>\n              ) : null;\n            })}\n          </Fragment>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/knowledge/lib/circleText.cjs.js

@@ -0,0 +1,9 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+// src/domains/knowledge/lib/circleText.ts
+/** The text with any word wider than the circle cut short with an ellipsis, so words never break mid-way. */
+function fitWords(text, maxChars) {
+	return text.split(/(\s+|(?<=:))/).map((word) => word.length > maxChars && !/^\s+$/.test(word) ? `${word.slice(0, maxChars - 1)}\u2026` : word).join("");
+}
+exports.fitWords = fitWords;
+
+//# sourceMappingURL=circleText.cjs.js.map

package/dist/domains/knowledge/lib/circleText.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleText.cjs.js","names":[],"sources":["../../../../src/domains/knowledge/lib/circleText.ts"],"sourcesContent":["/** The text with any word wider than the circle cut short with an ellipsis, so words never break mid-way. */\nexport function fitWords(text: string, maxChars: number): string {\n  return text\n    .split(/(\\s+|(?<=:))/)\n    .map(word => (word.length > maxChars && !/^\\s+$/.test(word) ? `${word.slice(0, maxChars - 1)}\\u2026` : word))\n    .join('');\n}\n"],"mappings":";;;AACA,SAAgB,SAAS,MAAc,UAA0B;CAC/D,OAAO,KACJ,MAAM,cAAc,CAAC,CACrB,KAAI,SAAS,KAAK,SAAS,YAAY,CAAC,QAAQ,KAAK,IAAI,IAAI,GAAG,KAAK,MAAM,GAAG,WAAW,CAAC,EAAE,UAAU,IAAK,CAAC,CAC5G,KAAK,EAAE;AACZ"}

package/dist/domains/knowledge/lib/circleText.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/domains/knowledge/lib/circleText';

package/dist/domains/knowledge/lib/circleText.es.js

@@ -0,0 +1,8 @@
+// src/domains/knowledge/lib/circleText.ts
+/** The text with any word wider than the circle cut short with an ellipsis, so words never break mid-way. */
+function fitWords(text, maxChars) {
+	return text.split(/(\s+|(?<=:))/).map((word) => word.length > maxChars && !/^\s+$/.test(word) ? `${word.slice(0, maxChars - 1)}\u2026` : word).join("");
+}
+export { fitWords };
+
+//# sourceMappingURL=circleText.es.js.map

package/dist/domains/knowledge/lib/circleText.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circleText.es.js","names":[],"sources":["../../../../src/domains/knowledge/lib/circleText.ts"],"sourcesContent":["/** The text with any word wider than the circle cut short with an ellipsis, so words never break mid-way. */\nexport function fitWords(text: string, maxChars: number): string {\n  return text\n    .split(/(\\s+|(?<=:))/)\n    .map(word => (word.length > maxChars && !/^\\s+$/.test(word) ? `${word.slice(0, maxChars - 1)}\\u2026` : word))\n    .join('');\n}\n"],"mappings":";;AACA,SAAgB,SAAS,MAAc,UAA0B;CAC/D,OAAO,KACJ,MAAM,cAAc,CAAC,CACrB,KAAI,SAAS,KAAK,SAAS,YAAY,CAAC,QAAQ,KAAK,IAAI,IAAI,GAAG,KAAK,MAAM,GAAG,WAAW,CAAC,EAAE,UAAU,IAAK,CAAC,CAC5G,KAAK,EAAE;AACZ"}

package/dist/domains/knowledge/lib/fitViewport.cjs.js

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_knowledge_lib_graphShape = require("./graphShape.cjs.js");
+require("./useLeavingNodes.cjs.js");
+let _xyflow_react = require("@xyflow/react");
+// src/domains/knowledge/lib/fitViewport.ts
+/** How far Fit view may zoom out to frame a ring of linked pages, which the readable floor would crop. */
+var RING_MIN_ZOOM = .15;
+/**
+* The viewport that frames `bounds`. Zoom stops at the readable floor, so what is cropped is the edge, not
+* the page being looked at; only Fit view, with an outer ring, goes lower so the whole ring shows.
+*/
+function fitViewport({ bounds, width, height, ring, anchor }) {
+	const floor = ring ? RING_MIN_ZOOM : require_domains_knowledge_lib_graphShape.READABLE_MIN_ZOOM;
+	const viewport = (0, _xyflow_react.getViewportForBounds)(bounds, width, height, floor, 2, .1);
+	if (anchor && viewport.zoom <= floor) {
+		const cx = anchor.position.x + (anchor.width ?? 0) / 2;
+		const cy = anchor.position.y + (anchor.height ?? 0) / 2;
+		return {
+			zoom: viewport.zoom,
+			x: width / 2 - cx * viewport.zoom,
+			y: height / 2 - cy * viewport.zoom
+		};
+	}
+	return viewport;
+}
+/** Margin around the drawn nodes on the first view, as a share of the pane. */
+var INITIAL_FIT_PADDING = .05;
+/** The first view never zooms in past the pages' own size, however few there are. */
+var INITIAL_FIT_MAX_ZOOM = 1;
+/** How long after the first view the graph keeps refitting as pages arrive, unless the user acts first. */
+var INITIAL_SETTLE_MS = 3e3;
+/**
+* The first view of a graph: every drawn node in the pane with a small margin, never zoomed in past what
+* fits, and clear of `legend` (the box, in pane pixels, an overlay covers at the top left). When the plain
+* fit would put a node under the legend, the pane is fitted again beside it or below it, whichever keeps
+* the pages larger.
+*/
+function fitAllViewport({ bounds, nodes, width, height, legend }) {
+	const fitIn = (left, top) => {
+		const view = (0, _xyflow_react.getViewportForBounds)(bounds, width - left, height - top, RING_MIN_ZOOM, 1, INITIAL_FIT_PADDING);
+		return {
+			zoom: view.zoom,
+			x: view.x + left,
+			y: view.y + top
+		};
+	};
+	const plain = fitIn(0, 0);
+	if (!legend) return plain;
+	if (!nodes.some((node) => {
+		const left = node.x * plain.zoom + plain.x;
+		const top = node.y * plain.zoom + plain.y;
+		return left < legend.right && top < legend.bottom;
+	})) return plain;
+	const beside = fitIn(legend.right, 0);
+	const below = fitIn(0, legend.bottom);
+	return beside.zoom >= below.zoom ? beside : below;
+}
+/** How long a view change animates: the same as the layout's own transition, and none under reduced motion. */
+var fitDuration = (motion) => motion ? 700 : 0;
+/** How close to the pane's edge a refocused page may sit before the view moves to bring it in. */
+var NUDGE_PADDING = 24;
+/**
+* How far to move the view along one axis so a page at `start` (screen position) of `size` stays inside a
+* pane of `extent`, with padding. Zero when it already is; centred when it can't fit with the padding.
+*/
+function nudgeAxis(start, size, extent) {
+	if (size + 48 > extent) return extent / 2 - (start + size / 2);
+	if (start < 24) return 24 - start;
+	const overflow = start + size - (extent - 24);
+	return overflow > 0 ? -overflow : 0;
+}
+exports.INITIAL_FIT_MAX_ZOOM = INITIAL_FIT_MAX_ZOOM;
+exports.INITIAL_FIT_PADDING = INITIAL_FIT_PADDING;
+exports.INITIAL_SETTLE_MS = INITIAL_SETTLE_MS;
+exports.NUDGE_PADDING = NUDGE_PADDING;
+exports.RING_MIN_ZOOM = RING_MIN_ZOOM;
+exports.fitAllViewport = fitAllViewport;
+exports.fitDuration = fitDuration;
+exports.fitViewport = fitViewport;
+exports.nudgeAxis = nudgeAxis;
+
+//# sourceMappingURL=fitViewport.cjs.js.map

package/dist/domains/knowledge/lib/fitViewport.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitViewport.cjs.js","names":["READABLE_MIN_ZOOM","getViewportForBounds"],"sources":["../../../../src/domains/knowledge/lib/fitViewport.ts"],"sourcesContent":["import { getViewportForBounds } from '@xyflow/react';\nimport type { Viewport } from '@xyflow/react';\n\nimport { READABLE_MIN_ZOOM } from './graphShape';\nimport { KNOWLEDGE_GRAPH_TRANSITION_MS } from './useLeavingNodes';\n\n/** How far Fit view may zoom out to frame a ring of linked pages, which the readable floor would crop. */\nexport const RING_MIN_ZOOM = 0.15;\n\ninterface FitInput {\n  bounds: { x: number; y: number; width: number; height: number };\n  width: number;\n  height: number;\n  /** Fit view on a focus with an outer ring of linked pages: frame all of it, below the readable floor if need be. */\n  ring?: boolean;\n  /** The focus (or the layout's centre): what stays centred when a floor stops the fit. */\n  anchor?: { position: { x: number; y: number }; width?: number; height?: number };\n}\n\n/**\n * The viewport that frames `bounds`. Zoom stops at the readable floor, so what is cropped is the edge, not\n * the page being looked at; only Fit view, with an outer ring, goes lower so the whole ring shows.\n */\nexport function fitViewport({ bounds, width, height, ring, anchor }: FitInput): Viewport {\n  const floor = ring ? RING_MIN_ZOOM : READABLE_MIN_ZOOM;\n  const viewport = getViewportForBounds(bounds, width, height, floor, 2, 0.1);\n  if (anchor && viewport.zoom <= floor) {\n    const cx = anchor.position.x + (anchor.width ?? 0) / 2;\n    const cy = anchor.position.y + (anchor.height ?? 0) / 2;\n    return { zoom: viewport.zoom, x: width / 2 - cx * viewport.zoom, y: height / 2 - cy * viewport.zoom };\n  }\n  return viewport;\n}\n\n/** Margin around the drawn nodes on the first view, as a share of the pane. */\nexport const INITIAL_FIT_PADDING = 0.05;\n/** The first view never zooms in past the pages' own size, however few there are. */\nexport const INITIAL_FIT_MAX_ZOOM = 1;\n/** How long after the first view the graph keeps refitting as pages arrive, unless the user acts first. */\nexport const INITIAL_SETTLE_MS = 3000;\n\ntype Rect = { x: number; y: number; width: number; height: number };\n\n/**\n * The first view of a graph: every drawn node in the pane with a small margin, never zoomed in past what\n * fits, and clear of `legend` (the box, in pane pixels, an overlay covers at the top left). When the plain\n * fit would put a node under the legend, the pane is fitted again beside it or below it, whichever keeps\n * the pages larger.\n */\nexport function fitAllViewport({\n  bounds,\n  nodes,\n  width,\n  height,\n  legend,\n}: {\n  bounds: Rect;\n  nodes: Rect[];\n  width: number;\n  height: number;\n  legend?: { right: number; bottom: number };\n}): Viewport {\n  const fitIn = (left: number, top: number): Viewport => {\n    const view = getViewportForBounds(\n      bounds,\n      width - left,\n      height - top,\n      RING_MIN_ZOOM,\n      INITIAL_FIT_MAX_ZOOM,\n      INITIAL_FIT_PADDING,\n    );\n    return { zoom: view.zoom, x: view.x + left, y: view.y + top };\n  };\n  const plain = fitIn(0, 0);\n  if (!legend) return plain;\n  const covered = nodes.some(node => {\n    const left = node.x * plain.zoom + plain.x;\n    const top = node.y * plain.zoom + plain.y;\n    return left < legend.right && top < legend.bottom;\n  });\n  if (!covered) return plain;\n  const beside = fitIn(legend.right, 0);\n  const below = fitIn(0, legend.bottom);\n  return beside.zoom >= below.zoom ? beside : below;\n}\n\n/** How long a view change animates: the same as the layout's own transition, and none under reduced motion. */\nexport const fitDuration = (motion: boolean) => (motion ? KNOWLEDGE_GRAPH_TRANSITION_MS : 0);\n\n/** How close to the pane's edge a refocused page may sit before the view moves to bring it in. */\nexport const NUDGE_PADDING = 24;\n\n/**\n * How far to move the view along one axis so a page at `start` (screen position) of `size` stays inside a\n * pane of `extent`, with padding. Zero when it already is; centred when it can't fit with the padding.\n */\nexport function nudgeAxis(start: number, size: number, extent: number): number {\n  if (size + NUDGE_PADDING * 2 > extent) return extent / 2 - (start + size / 2);\n  if (start < NUDGE_PADDING) return NUDGE_PADDING - start;\n  const overflow = start + size - (extent - NUDGE_PADDING);\n  return overflow > 0 ? -overflow : 0;\n}\n"],"mappings":";;;;;;AAOA,IAAa,gBAAgB;;;;;AAgB7B,SAAgB,YAAY,EAAE,QAAQ,OAAO,QAAQ,MAAM,UAA8B;CACvF,MAAM,QAAQ,OAAO,gBAAgBA,yCAAAA;CACrC,MAAM,YAAA,GAAWC,cAAAA,qBAAAA,CAAqB,QAAQ,OAAO,QAAQ,OAAO,GAAG,EAAG;CAC1E,IAAI,UAAU,SAAS,QAAQ,OAAO;EACpC,MAAM,KAAK,OAAO,SAAS,KAAK,OAAO,SAAS,KAAK;EACrD,MAAM,KAAK,OAAO,SAAS,KAAK,OAAO,UAAU,KAAK;EACtD,OAAO;GAAE,MAAM,SAAS;GAAM,GAAG,QAAQ,IAAI,KAAK,SAAS;GAAM,GAAG,SAAS,IAAI,KAAK,SAAS;EAAK;CACtG;CACA,OAAO;AACT;;AAGA,IAAa,sBAAsB;;AAEnC,IAAa,uBAAuB;;AAEpC,IAAa,oBAAoB;;;;;;;AAUjC,SAAgB,eAAe,EAC7B,QACA,OACA,OACA,QACA,UAOW;CACX,MAAM,SAAS,MAAc,QAA0B;EACrD,MAAM,QAAA,GAAOA,cAAAA,qBAAAA,CACX,QACA,QAAQ,MACR,SAAS,KACT,eAAA,GAEA,mBACF;EACA,OAAO;GAAE,MAAM,KAAK;GAAM,GAAG,KAAK,IAAI;GAAM,GAAG,KAAK,IAAI;EAAI;CAC9D;CACA,MAAM,QAAQ,MAAM,GAAG,CAAC;CACxB,IAAI,CAAC,QAAQ,OAAO;CAMpB,IAAI,CALY,MAAM,MAAK,SAAQ;EACjC,MAAM,OAAO,KAAK,IAAI,MAAM,OAAO,MAAM;EACzC,MAAM,MAAM,KAAK,IAAI,MAAM,OAAO,MAAM;EACxC,OAAO,OAAO,OAAO,SAAS,MAAM,OAAO;CAC7C,CACK,GAAS,OAAO;CACrB,MAAM,SAAS,MAAM,OAAO,OAAO,CAAC;CACpC,MAAM,QAAQ,MAAM,GAAG,OAAO,MAAM;CACpC,OAAO,OAAO,QAAQ,MAAM,OAAO,SAAS;AAC9C;;AAGA,IAAa,eAAe,WAAqB,SAAA,MAAyC;;AAG1F,IAAa,gBAAgB;;;;;AAM7B,SAAgB,UAAU,OAAe,MAAc,QAAwB;CAC7E,IAAI,OAAO,KAAoB,QAAQ,OAAO,SAAS,KAAK,QAAQ,OAAO;CAC3E,IAAI,QAAA,IAAuB,OAAA,KAAuB;CAClD,MAAM,WAAW,QAAQ,QAAQ,SAAA;CACjC,OAAO,WAAW,IAAI,CAAC,WAAW;AACpC"}

package/dist/domains/knowledge/lib/fitViewport.d.ts

@@ -0,0 +1 @@
+export * from '../../../src/domains/knowledge/lib/fitViewport';

package/dist/domains/knowledge/lib/fitViewport.es.js

@@ -0,0 +1,73 @@
+import { READABLE_MIN_ZOOM } from "./graphShape.es.js";
+import "./useLeavingNodes.es.js";
+import { getViewportForBounds } from "@xyflow/react";
+// src/domains/knowledge/lib/fitViewport.ts
+/** How far Fit view may zoom out to frame a ring of linked pages, which the readable floor would crop. */
+var RING_MIN_ZOOM = .15;
+/**
+* The viewport that frames `bounds`. Zoom stops at the readable floor, so what is cropped is the edge, not
+* the page being looked at; only Fit view, with an outer ring, goes lower so the whole ring shows.
+*/
+function fitViewport({ bounds, width, height, ring, anchor }) {
+	const floor = ring ? RING_MIN_ZOOM : READABLE_MIN_ZOOM;
+	const viewport = getViewportForBounds(bounds, width, height, floor, 2, .1);
+	if (anchor && viewport.zoom <= floor) {
+		const cx = anchor.position.x + (anchor.width ?? 0) / 2;
+		const cy = anchor.position.y + (anchor.height ?? 0) / 2;
+		return {
+			zoom: viewport.zoom,
+			x: width / 2 - cx * viewport.zoom,
+			y: height / 2 - cy * viewport.zoom
+		};
+	}
+	return viewport;
+}
+/** Margin around the drawn nodes on the first view, as a share of the pane. */
+var INITIAL_FIT_PADDING = .05;
+/** The first view never zooms in past the pages' own size, however few there are. */
+var INITIAL_FIT_MAX_ZOOM = 1;
+/** How long after the first view the graph keeps refitting as pages arrive, unless the user acts first. */
+var INITIAL_SETTLE_MS = 3e3;
+/**
+* The first view of a graph: every drawn node in the pane with a small margin, never zoomed in past what
+* fits, and clear of `legend` (the box, in pane pixels, an overlay covers at the top left). When the plain
+* fit would put a node under the legend, the pane is fitted again beside it or below it, whichever keeps
+* the pages larger.
+*/
+function fitAllViewport({ bounds, nodes, width, height, legend }) {
+	const fitIn = (left, top) => {
+		const view = getViewportForBounds(bounds, width - left, height - top, RING_MIN_ZOOM, 1, INITIAL_FIT_PADDING);
+		return {
+			zoom: view.zoom,
+			x: view.x + left,
+			y: view.y + top
+		};
+	};
+	const plain = fitIn(0, 0);
+	if (!legend) return plain;
+	if (!nodes.some((node) => {
+		const left = node.x * plain.zoom + plain.x;
+		const top = node.y * plain.zoom + plain.y;
+		return left < legend.right && top < legend.bottom;
+	})) return plain;
+	const beside = fitIn(legend.right, 0);
+	const below = fitIn(0, legend.bottom);
+	return beside.zoom >= below.zoom ? beside : below;
+}
+/** How long a view change animates: the same as the layout's own transition, and none under reduced motion. */
+var fitDuration = (motion) => motion ? 700 : 0;
+/** How close to the pane's edge a refocused page may sit before the view moves to bring it in. */
+var NUDGE_PADDING = 24;
+/**
+* How far to move the view along one axis so a page at `start` (screen position) of `size` stays inside a
+* pane of `extent`, with padding. Zero when it already is; centred when it can't fit with the padding.
+*/
+function nudgeAxis(start, size, extent) {
+	if (size + 48 > extent) return extent / 2 - (start + size / 2);
+	if (start < 24) return 24 - start;
+	const overflow = start + size - (extent - 24);
+	return overflow > 0 ? -overflow : 0;
+}
+export { INITIAL_FIT_MAX_ZOOM, INITIAL_FIT_PADDING, INITIAL_SETTLE_MS, NUDGE_PADDING, RING_MIN_ZOOM, fitAllViewport, fitDuration, fitViewport, nudgeAxis };
+
+//# sourceMappingURL=fitViewport.es.js.map

package/dist/domains/knowledge/lib/fitViewport.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitViewport.es.js","names":[],"sources":["../../../../src/domains/knowledge/lib/fitViewport.ts"],"sourcesContent":["import { getViewportForBounds } from '@xyflow/react';\nimport type { Viewport } from '@xyflow/react';\n\nimport { READABLE_MIN_ZOOM } from './graphShape';\nimport { KNOWLEDGE_GRAPH_TRANSITION_MS } from './useLeavingNodes';\n\n/** How far Fit view may zoom out to frame a ring of linked pages, which the readable floor would crop. */\nexport const RING_MIN_ZOOM = 0.15;\n\ninterface FitInput {\n  bounds: { x: number; y: number; width: number; height: number };\n  width: number;\n  height: number;\n  /** Fit view on a focus with an outer ring of linked pages: frame all of it, below the readable floor if need be. */\n  ring?: boolean;\n  /** The focus (or the layout's centre): what stays centred when a floor stops the fit. */\n  anchor?: { position: { x: number; y: number }; width?: number; height?: number };\n}\n\n/**\n * The viewport that frames `bounds`. Zoom stops at the readable floor, so what is cropped is the edge, not\n * the page being looked at; only Fit view, with an outer ring, goes lower so the whole ring shows.\n */\nexport function fitViewport({ bounds, width, height, ring, anchor }: FitInput): Viewport {\n  const floor = ring ? RING_MIN_ZOOM : READABLE_MIN_ZOOM;\n  const viewport = getViewportForBounds(bounds, width, height, floor, 2, 0.1);\n  if (anchor && viewport.zoom <= floor) {\n    const cx = anchor.position.x + (anchor.width ?? 0) / 2;\n    const cy = anchor.position.y + (anchor.height ?? 0) / 2;\n    return { zoom: viewport.zoom, x: width / 2 - cx * viewport.zoom, y: height / 2 - cy * viewport.zoom };\n  }\n  return viewport;\n}\n\n/** Margin around the drawn nodes on the first view, as a share of the pane. */\nexport const INITIAL_FIT_PADDING = 0.05;\n/** The first view never zooms in past the pages' own size, however few there are. */\nexport const INITIAL_FIT_MAX_ZOOM = 1;\n/** How long after the first view the graph keeps refitting as pages arrive, unless the user acts first. */\nexport const INITIAL_SETTLE_MS = 3000;\n\ntype Rect = { x: number; y: number; width: number; height: number };\n\n/**\n * The first view of a graph: every drawn node in the pane with a small margin, never zoomed in past what\n * fits, and clear of `legend` (the box, in pane pixels, an overlay covers at the top left). When the plain\n * fit would put a node under the legend, the pane is fitted again beside it or below it, whichever keeps\n * the pages larger.\n */\nexport function fitAllViewport({\n  bounds,\n  nodes,\n  width,\n  height,\n  legend,\n}: {\n  bounds: Rect;\n  nodes: Rect[];\n  width: number;\n  height: number;\n  legend?: { right: number; bottom: number };\n}): Viewport {\n  const fitIn = (left: number, top: number): Viewport => {\n    const view = getViewportForBounds(\n      bounds,\n      width - left,\n      height - top,\n      RING_MIN_ZOOM,\n      INITIAL_FIT_MAX_ZOOM,\n      INITIAL_FIT_PADDING,\n    );\n    return { zoom: view.zoom, x: view.x + left, y: view.y + top };\n  };\n  const plain = fitIn(0, 0);\n  if (!legend) return plain;\n  const covered = nodes.some(node => {\n    const left = node.x * plain.zoom + plain.x;\n    const top = node.y * plain.zoom + plain.y;\n    return left < legend.right && top < legend.bottom;\n  });\n  if (!covered) return plain;\n  const beside = fitIn(legend.right, 0);\n  const below = fitIn(0, legend.bottom);\n  return beside.zoom >= below.zoom ? beside : below;\n}\n\n/** How long a view change animates: the same as the layout's own transition, and none under reduced motion. */\nexport const fitDuration = (motion: boolean) => (motion ? KNOWLEDGE_GRAPH_TRANSITION_MS : 0);\n\n/** How close to the pane's edge a refocused page may sit before the view moves to bring it in. */\nexport const NUDGE_PADDING = 24;\n\n/**\n * How far to move the view along one axis so a page at `start` (screen position) of `size` stays inside a\n * pane of `extent`, with padding. Zero when it already is; centred when it can't fit with the padding.\n */\nexport function nudgeAxis(start: number, size: number, extent: number): number {\n  if (size + NUDGE_PADDING * 2 > extent) return extent / 2 - (start + size / 2);\n  if (start < NUDGE_PADDING) return NUDGE_PADDING - start;\n  const overflow = start + size - (extent - NUDGE_PADDING);\n  return overflow > 0 ? -overflow : 0;\n}\n"],"mappings":";;;;;AAOA,IAAa,gBAAgB;;;;;AAgB7B,SAAgB,YAAY,EAAE,QAAQ,OAAO,QAAQ,MAAM,UAA8B;CACvF,MAAM,QAAQ,OAAO,gBAAgB;CACrC,MAAM,WAAW,qBAAqB,QAAQ,OAAO,QAAQ,OAAO,GAAG,EAAG;CAC1E,IAAI,UAAU,SAAS,QAAQ,OAAO;EACpC,MAAM,KAAK,OAAO,SAAS,KAAK,OAAO,SAAS,KAAK;EACrD,MAAM,KAAK,OAAO,SAAS,KAAK,OAAO,UAAU,KAAK;EACtD,OAAO;GAAE,MAAM,SAAS;GAAM,GAAG,QAAQ,IAAI,KAAK,SAAS;GAAM,GAAG,SAAS,IAAI,KAAK,SAAS;EAAK;CACtG;CACA,OAAO;AACT;;AAGA,IAAa,sBAAsB;;AAEnC,IAAa,uBAAuB;;AAEpC,IAAa,oBAAoB;;;;;;;AAUjC,SAAgB,eAAe,EAC7B,QACA,OACA,OACA,QACA,UAOW;CACX,MAAM,SAAS,MAAc,QAA0B;EACrD,MAAM,OAAO,qBACX,QACA,QAAQ,MACR,SAAS,KACT,eAAA,GAEA,mBACF;EACA,OAAO;GAAE,MAAM,KAAK;GAAM,GAAG,KAAK,IAAI;GAAM,GAAG,KAAK,IAAI;EAAI;CAC9D;CACA,MAAM,QAAQ,MAAM,GAAG,CAAC;CACxB,IAAI,CAAC,QAAQ,OAAO;CAMpB,IAAI,CALY,MAAM,MAAK,SAAQ;EACjC,MAAM,OAAO,KAAK,IAAI,MAAM,OAAO,MAAM;EACzC,MAAM,MAAM,KAAK,IAAI,MAAM,OAAO,MAAM;EACxC,OAAO,OAAO,OAAO,SAAS,MAAM,OAAO;CAC7C,CACK,GAAS,OAAO;CACrB,MAAM,SAAS,MAAM,OAAO,OAAO,CAAC;CACpC,MAAM,QAAQ,MAAM,GAAG,OAAO,MAAM;CACpC,OAAO,OAAO,QAAQ,MAAM,OAAO,SAAS;AAC9C;;AAGA,IAAa,eAAe,WAAqB,SAAA,MAAyC;;AAG1F,IAAa,gBAAgB;;;;;AAM7B,SAAgB,UAAU,OAAe,MAAc,QAAwB;CAC7E,IAAI,OAAO,KAAoB,QAAQ,OAAO,SAAS,KAAK,QAAQ,OAAO;CAC3E,IAAI,QAAA,IAAuB,OAAA,KAAuB;CAClD,MAAM,WAAW,QAAQ,QAAQ,SAAA;CACjC,OAAO,WAAW,IAAI,CAAC,WAAW;AACpC"}