npm - @mastra/playground-ui - Versions diffs - 68.0.0 → 69.0.0-alpha.1 - Mend

@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2284) hide show

package/dist/domains/knowledge/components/KnowledgePageTree.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KnowledgePageTree.cjs.js","names":["useMemo","buildPageTree","useState","useRef","pageAncestorIds","visiblePageRows","prefersMotion","Fragment","cn","ChevronRight","childCountLabel","Pin"],"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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"}
1	+ {"version":3,"file":"KnowledgePageTree.cjs.js","names":["useMemo","buildPageTree","useState","useRef","pageAncestorIds","visiblePageRows","prefersMotion","Fragment","cn","DisclosureChevron","scopeTitle","KnowledgeSourceIcon","Folder","FileText","childCountLabel","Pin"],"sources":["../../../../src/domains/knowledge/components/KnowledgePageTree.tsx"],"sourcesContent":["import { FileText, Folder, Pin } from 'lucide-react';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { scopeTitle } from '../lib/pageAddress';\nimport { buildPageTree, childCountLabel, pageAncestorIds, visiblePageRows } from '../lib/pageTree';\nimport { prefersMotion } from '../lib/useLeavingNodes';\nimport type { KnowledgePagePayload } from '../pageTypes';\nimport { KnowledgeSourceIcon } from './KnowledgeSourceIcon';\n\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\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 h-8 cursor-pointer items-center gap-2 rounded-md pr-2 text-body-sm text-foreground outline-none focus-visible:bg-fill-subtle',\n selected ? 'bg-fill-hover' : 'hover:bg-fill-subtle',\n )}\n style={{ paddingLeft: `${row.depth * 12 + 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-3 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground\"\n onClick={event => {\n event.stopPropagation();\n toggle(row.page.id, !row.expanded);\n }}\n >\n <DisclosureChevron direction=\"right\" open={row.expanded} className=\"size-3\" />\n </button>\n ) : (\n <span className=\"size-3 shrink-0\" aria-hidden />\n )}\n <span className=\"flex shrink-0 items-center text-muted-foreground [&>svg]:size-3.5\" aria-hidden>\n {row.page.isScope && scopeTitle(row.page) !== row.page.name ? (\n <KnowledgeSourceIcon page={row.page} />\n ) : row.hasChildren ? (\n <Folder />\n ) : (\n <FileText />\n )}\n </span>\n <span className={cn('min-w-0 flex-1 truncate', row.page.isScope && 'font-medium')}>\n {scopeTitle(row.page)}\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-placeholder 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 h-8 w-full items-center text-left text-caption text-muted-foreground hover:text-foreground\"\n style={{ paddingLeft: `${depth * 12 + 42}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/components/KnowledgePageTree.es.js CHANGED Viewed

@@ -1,9 +1,12 @@
-import { t as cn } from "../../../utils-DQx8TpNT.js";
+import { scopeTitle } from "../lib/pageAddress.es.js";
 import { buildPageTree, childCountLabel, pageAncestorIds, visiblePageRows } from "../lib/pageTree.es.js";
 import { prefersMotion } from "../lib/useLeavingNodes.es.js";
+import { KnowledgeSourceIcon } from "./KnowledgeSourceIcon.es.js";
+import { DisclosureChevron } from "../../../components/DisclosureChevron.es.js";
+import { t as cn } from "../../../utils-DQx8TpNT.js";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight, Pin } from "lucide-react";
+import { FileText, Folder, 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
@@ -181,34 +184,40 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 					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` },
+				className: cn("flex h-8 cursor-pointer items-center gap-2 rounded-md pr-2 text-body-sm text-foreground outline-none focus-visible:bg-fill-subtle", selected ? "bg-fill-hover" : "hover:bg-fill-subtle"),
+				style: { paddingLeft: `${row.depth * 12 + 4}px` },
 				children: [
 					row.hasChildren ? /* @__PURE__ */ jsx("button", {
 						type: "button",
 						tabIndex: -1,
 						"aria-label": row.expanded ? `Collapse ${row.page.name}` : `Expand ${row.page.name}`,
-						className: "flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground hover:text-foreground",
+						className: "flex size-3 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground",
 						onClick: (event) => {
 							event.stopPropagation();
 							toggle(row.page.id, !row.expanded);
 						},
-						children: /* @__PURE__ */ jsx(ChevronRight, {
-							size: 14,
-							className: cn("transition-transform", row.expanded && "rotate-90")
+						children: /* @__PURE__ */ jsx(DisclosureChevron, {
+							direction: "right",
+							open: row.expanded,
+							className: "size-3"
 						})
 					}) : /* @__PURE__ */ jsx("span", {
-						className: "size-5 shrink-0",
+						className: "size-3 shrink-0",
 						"aria-hidden": true
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: cn("min-w-0 flex-1 truncate text-body", row.page.isScope && "font-medium"),
-						children: row.page.name
+						className: "flex shrink-0 items-center text-muted-foreground [&>svg]:size-3.5",
+						"aria-hidden": true,
+						children: row.page.isScope && scopeTitle(row.page) !== row.page.name ? /* @__PURE__ */ jsx(KnowledgeSourceIcon, { page: row.page }) : row.hasChildren ? /* @__PURE__ */ jsx(Folder, {}) : /* @__PURE__ */ jsx(FileText, {})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: cn("min-w-0 flex-1 truncate", row.page.isScope && "font-medium"),
+						children: scopeTitle(row.page)
 					}),
 					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",
+						className: "shrink-0 text-caption text-placeholder tabular-nums",
 						children: childCountLabel(row.page)
 					}) : null,
 					pinned.has(row.page.id) ? /* @__PURE__ */ jsx(Pin, {
@@ -226,8 +235,8 @@ function KnowledgePageTree({ pages, pinnedIds, selectedPageId, onSelect, initial
 				const more = loadMore?.get(parentId);
 				return more ? /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: "flex min-h-7 w-full items-center text-left text-caption text-muted-foreground hover:text-foreground",
-					style: { paddingLeft: `${depth * 16 + 28}px` },
+					className: "flex h-8 w-full items-center text-left text-caption text-muted-foreground hover:text-foreground",
+					style: { paddingLeft: `${depth * 12 + 42}px` },
 					onClick: more,
 					children: "Load more"
 				}, `more-${parentId}`) : null;

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

	@@ -1 +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, 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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"}
1	+ {"version":3,"file":"KnowledgePageTree.es.js","names":[],"sources":["../../../../src/domains/knowledge/components/KnowledgePageTree.tsx"],"sourcesContent":["import { FileText, Folder, Pin } from 'lucide-react';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport { scopeTitle } from '../lib/pageAddress';\nimport { buildPageTree, childCountLabel, pageAncestorIds, visiblePageRows } from '../lib/pageTree';\nimport { prefersMotion } from '../lib/useLeavingNodes';\nimport type { KnowledgePagePayload } from '../pageTypes';\nimport { KnowledgeSourceIcon } from './KnowledgeSourceIcon';\n\nimport { DisclosureChevron } from '@/ds/components/DisclosureChevron';\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 h-8 cursor-pointer items-center gap-2 rounded-md pr-2 text-body-sm text-foreground outline-none focus-visible:bg-fill-subtle',\n selected ? 'bg-fill-hover' : 'hover:bg-fill-subtle',\n )}\n style={{ paddingLeft: `${row.depth * 12 + 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-3 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground\"\n onClick={event => {\n event.stopPropagation();\n toggle(row.page.id, !row.expanded);\n }}\n >\n <DisclosureChevron direction=\"right\" open={row.expanded} className=\"size-3\" />\n </button>\n ) : (\n <span className=\"size-3 shrink-0\" aria-hidden />\n )}\n <span className=\"flex shrink-0 items-center text-muted-foreground [&>svg]:size-3.5\" aria-hidden>\n {row.page.isScope && scopeTitle(row.page) !== row.page.name ? (\n <KnowledgeSourceIcon page={row.page} />\n ) : row.hasChildren ? (\n <Folder />\n ) : (\n <FileText />\n )}\n </span>\n <span className={cn('min-w-0 flex-1 truncate', row.page.isScope && 'font-medium')}>\n {scopeTitle(row.page)}\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-placeholder 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 h-8 w-full items-center text-left text-caption text-muted-foreground hover:text-foreground\"\n style={{ paddingLeft: `${depth * 12 + 42}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/components/KnowledgeSourceIcon.cjs.js ADDED Viewed

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_knowledge_lib_pageAddress = require("../lib/pageAddress.cjs.js");
+const require_utils = require("../../../utils-uDc1ofX1.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/domains/knowledge/components/KnowledgeSourceIcon.tsx
+function KnowledgeSourceIcon({ page, className }) {
+	const SourceIcon = require_domains_knowledge_lib_pageAddress.scopeSource(page)?.icon;
+	if (!SourceIcon) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SourceIcon, {
+		"aria-hidden": true,
+		className: require_utils.cn("shrink-0 text-foreground", className)
+	});
+}
+exports.KnowledgeSourceIcon = KnowledgeSourceIcon;
+//# sourceMappingURL=KnowledgeSourceIcon.cjs.js.map

package/dist/domains/knowledge/components/KnowledgeSourceIcon.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KnowledgeSourceIcon.cjs.js","names":["scopeSource","cn"],"sources":["../../../../src/domains/knowledge/components/KnowledgeSourceIcon.tsx"],"sourcesContent":["import { scopeSource } from '../lib/pageAddress';\nimport type { KnowledgePagePayload } from '../pageTypes';\n\nimport { cn } from '@/lib/utils';\n\nexport function KnowledgeSourceIcon({ page, className }: { page: KnowledgePagePayload; className?: string }) {\n const SourceIcon = scopeSource(page)?.icon;\n if (!SourceIcon) return null;\n return <SourceIcon aria-hidden className={cn('shrink-0 text-foreground', className)} />;\n}\n"],"mappings":";;;;;AAKA,SAAgB,oBAAoB,EAAE,MAAM,aAAiE;CAC3G,MAAM,aAAaA,0CAAAA,YAAY,IAAI,CAAC,EAAE;CACtC,IAAI,CAAC,YAAY,OAAO;CACxB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;EAAY,eAAA;EAAY,WAAWC,cAAAA,GAAG,4BAA4B,SAAS;CAAI,CAAA;AACxF"}

package/dist/domains/knowledge/components/KnowledgeSourceIcon.d.ts ADDED Viewed

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

package/dist/domains/knowledge/components/KnowledgeSourceIcon.es.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { scopeSource } from "../lib/pageAddress.es.js";
+import { t as cn } from "../../../utils-DQx8TpNT.js";
+import { jsx } from "react/jsx-runtime";
+// src/domains/knowledge/components/KnowledgeSourceIcon.tsx
+function KnowledgeSourceIcon({ page, className }) {
+	const SourceIcon = scopeSource(page)?.icon;
+	if (!SourceIcon) return null;
+	return /* @__PURE__ */ jsx(SourceIcon, {
+		"aria-hidden": true,
+		className: cn("shrink-0 text-foreground", className)
+	});
+}
+export { KnowledgeSourceIcon };
+//# sourceMappingURL=KnowledgeSourceIcon.es.js.map

package/dist/domains/knowledge/components/KnowledgeSourceIcon.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KnowledgeSourceIcon.es.js","names":[],"sources":["../../../../src/domains/knowledge/components/KnowledgeSourceIcon.tsx"],"sourcesContent":["import { scopeSource } from '../lib/pageAddress';\nimport type { KnowledgePagePayload } from '../pageTypes';\n\nimport { cn } from '@/lib/utils';\n\nexport function KnowledgeSourceIcon({ page, className }: { page: KnowledgePagePayload; className?: string }) {\n const SourceIcon = scopeSource(page)?.icon;\n if (!SourceIcon) return null;\n return <SourceIcon aria-hidden className={cn('shrink-0 text-foreground', className)} />;\n}\n"],"mappings":";;;;AAKA,SAAgB,oBAAoB,EAAE,MAAM,aAAiE;CAC3G,MAAM,aAAa,YAAY,IAAI,CAAC,EAAE;CACtC,IAAI,CAAC,YAAY,OAAO;CACxB,OAAO,oBAAC,YAAD;EAAY,eAAA;EAAY,WAAW,GAAG,4BAA4B,SAAS;CAAI,CAAA;AACxF"}

package/dist/domains/knowledge/components/KnowledgeTooltip.cjs.js ADDED Viewed

@@ -0,0 +1,10 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_tooltip = require("../../../tooltip-BsExuMO8.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/domains/knowledge/components/KnowledgeTooltip.tsx
+function KnowledgeTooltip({ label, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_tooltip.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipTrigger, { render: children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_tooltip.TooltipContent, { children: label })] });
+}
+exports.KnowledgeTooltip = KnowledgeTooltip;
+//# sourceMappingURL=KnowledgeTooltip.cjs.js.map

package/dist/domains/knowledge/components/KnowledgeTooltip.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KnowledgeTooltip.cjs.js","names":["Tooltip","TooltipTrigger","TooltipContent"],"sources":["../../../../src/domains/knowledge/components/KnowledgeTooltip.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\n\nexport function KnowledgeTooltip({ label, children }: { label: ReactNode; children: ReactElement }) {\n return (\n <Tooltip>\n <TooltipTrigger render={children} />\n <TooltipContent>{label}</TooltipContent>\n </Tooltip>\n );\n}\n"],"mappings":";;;;AAIA,SAAgB,iBAAiB,EAAE,OAAO,YAA0D;CAClG,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACA,gBAAAA,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD,EAAgB,QAAQ,SAAW,CAAA,GACnC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,gBAAD,EAAA,UAAiB,MAAsB,CAAA,CAChC,EAAA,CAAA;AAEb"}

package/dist/domains/knowledge/components/KnowledgeTooltip.d.ts ADDED Viewed

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

package/dist/domains/knowledge/components/KnowledgeTooltip.es.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "../../../tooltip-DJcze2VZ.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/domains/knowledge/components/KnowledgeTooltip.tsx
+function KnowledgeTooltip({ label, children }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: children }), /* @__PURE__ */ jsx(TooltipContent, { children: label })] });
+}
+export { KnowledgeTooltip };
+//# sourceMappingURL=KnowledgeTooltip.es.js.map

package/dist/domains/knowledge/components/KnowledgeTooltip.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"KnowledgeTooltip.es.js","names":[],"sources":["../../../../src/domains/knowledge/components/KnowledgeTooltip.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from 'react';\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip/tooltip';\n\nexport function KnowledgeTooltip({ label, children }: { label: ReactNode; children: ReactElement }) {\n return (\n <Tooltip>\n <TooltipTrigger render={children} />\n <TooltipContent>{label}</TooltipContent>\n </Tooltip>\n );\n}\n"],"mappings":";;;AAIA,SAAgB,iBAAiB,EAAE,OAAO,YAA0D;CAClG,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAgB,QAAQ,SAAW,CAAA,GACnC,oBAAC,gBAAD,EAAA,UAAiB,MAAsB,CAAA,CAChC,EAAA,CAAA;AAEb"}

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

@@ -5,23 +5,35 @@ 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;
+var NO_INSETS = {
+	left: 0,
+	right: 0
+};
+function uncoveredInsets(width, insets) {
+	return width - insets.left - insets.right > 0 ? insets : NO_INSETS;
+}
 /**
 * 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 }) {
+function fitViewport({ bounds, width, height, ring, anchor, insets: drawers = NO_INSETS }) {
+	const insets = uncoveredInsets(width, drawers);
 	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);
+	const visible = width - insets.left - insets.right;
+	const viewport = (0, _xyflow_react.getViewportForBounds)(bounds, visible, 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,
+			x: insets.left + visible / 2 - cx * viewport.zoom,
 			y: height / 2 - cy * viewport.zoom
 		};
 	}
-	return viewport;
+	return {
+		...viewport,
+		x: viewport.x + insets.left
+	};
 }
 /** Margin around the drawn nodes on the first view, as a share of the pane. */
 var INITIAL_FIT_PADDING = .05;
@@ -35,16 +47,17 @@ var INITIAL_SETTLE_MS = 3e3;
 * 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 }) {
+function fitAllViewport({ bounds, nodes, width, height, legend, insets: drawers = NO_INSETS }) {
+	const insets = uncoveredInsets(width, drawers);
 	const fitIn = (left, top) => {
-		const view = (0, _xyflow_react.getViewportForBounds)(bounds, width - left, height - top, RING_MIN_ZOOM, 1, INITIAL_FIT_PADDING);
+		const view = (0, _xyflow_react.getViewportForBounds)(bounds, width - left - insets.right, 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);
+	const plain = fitIn(insets.left, 0);
 	if (!legend) return plain;
 	if (!nodes.some((node) => {
 		const left = node.x * plain.zoom + plain.x;
@@ -52,7 +65,7 @@ function fitAllViewport({ bounds, nodes, width, height, legend }) {
 		return left < legend.right && top < legend.bottom;
 	})) return plain;
 	const beside = fitIn(legend.right, 0);
-	const below = fitIn(0, legend.bottom);
+	const below = fitIn(insets.left, 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. */
@@ -78,5 +91,6 @@ exports.fitAllViewport = fitAllViewport;
 exports.fitDuration = fitDuration;
 exports.fitViewport = fitViewport;
 exports.nudgeAxis = nudgeAxis;
+exports.uncoveredInsets = uncoveredInsets;
 //# sourceMappingURL=fitViewport.cjs.js.map

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

	@@ -1 +1 @@
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"}
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 insets?: PaneInsets;\n}\n\nexport interface PaneInsets {\n left: number;\n right: number;\n}\n\nconst NO_INSETS: PaneInsets = { left: 0, right: 0 };\n\nexport function uncoveredInsets(width: number, insets: PaneInsets): PaneInsets {\n return width - insets.left - insets.right > 0 ? insets : NO_INSETS;\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, insets: drawers = NO_INSETS }: FitInput): Viewport {\n const insets = uncoveredInsets(width, drawers);\n const floor = ring ? RING_MIN_ZOOM : READABLE_MIN_ZOOM;\n const visible = width - insets.left - insets.right;\n const viewport = getViewportForBounds(bounds, visible, 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 {\n zoom: viewport.zoom,\n x: insets.left + visible / 2 - cx viewport.zoom,\n y: height / 2 - cy * viewport.zoom,\n };\n }\n return { ...viewport, x: viewport.x + insets.left };\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 insets: drawers = NO_INSETS,\n}: {\n bounds: Rect;\n nodes: Rect[];\n width: number;\n height: number;\n legend?: { right: number; bottom: number };\n insets?: PaneInsets;\n}): Viewport {\n const insets = uncoveredInsets(width, drawers);\n const fitIn = (left: number, top: number): Viewport => {\n const view = getViewportForBounds(\n bounds,\n width - left - insets.right,\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(insets.left, 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(insets.left, 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;AAkB7B,IAAM,YAAwB;CAAE,MAAM;CAAG,OAAO;AAAE;AAElD,SAAgB,gBAAgB,OAAe,QAAgC;CAC7E,OAAO,QAAQ,OAAO,OAAO,OAAO,QAAQ,IAAI,SAAS;AAC3D;;;;;AAMA,SAAgB,YAAY,EAAE,QAAQ,OAAO,QAAQ,MAAM,QAAQ,QAAQ,UAAU,aAAiC;CACpH,MAAM,SAAS,gBAAgB,OAAO,OAAO;CAC7C,MAAM,QAAQ,OAAO,gBAAgBA,yCAAAA;CACrC,MAAM,UAAU,QAAQ,OAAO,OAAO,OAAO;CAC7C,MAAM,YAAA,GAAWC,cAAAA,qBAAAA,CAAqB,QAAQ,SAAS,QAAQ,OAAO,GAAG,EAAG;CAC5E,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;GACL,MAAM,SAAS;GACf,GAAG,OAAO,OAAO,UAAU,IAAI,KAAK,SAAS;GAC7C,GAAG,SAAS,IAAI,KAAK,SAAS;EAChC;CACF;CACA,OAAO;EAAE,GAAG;EAAU,GAAG,SAAS,IAAI,OAAO;CAAK;AACpD;;AAGA,IAAa,sBAAsB;;AAEnC,IAAa,uBAAuB;;AAEpC,IAAa,oBAAoB;;;;;;;AAUjC,SAAgB,eAAe,EAC7B,QACA,OACA,OACA,QACA,QACA,QAAQ,UAAU,aAQP;CACX,MAAM,SAAS,gBAAgB,OAAO,OAAO;CAC7C,MAAM,SAAS,MAAc,QAA0B;EACrD,MAAM,QAAA,GAAOA,cAAAA,qBAAAA,CACX,QACA,QAAQ,OAAO,OAAO,OACtB,SAAS,KACT,eAAA,GAEA,mBACF;EACA,OAAO;GAAE,MAAM,KAAK;GAAM,GAAG,KAAK,IAAI;GAAM,GAAG,KAAK,IAAI;EAAI;CAC9D;CACA,MAAM,QAAQ,MAAM,OAAO,MAAM,CAAC;CAClC,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,OAAO,MAAM,OAAO,MAAM;CAC9C,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.es.js CHANGED Viewed

@@ -4,23 +4,35 @@ 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;
+var NO_INSETS = {
+	left: 0,
+	right: 0
+};
+function uncoveredInsets(width, insets) {
+	return width - insets.left - insets.right > 0 ? insets : NO_INSETS;
+}
 /**
 * 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 }) {
+function fitViewport({ bounds, width, height, ring, anchor, insets: drawers = NO_INSETS }) {
+	const insets = uncoveredInsets(width, drawers);
 	const floor = ring ? RING_MIN_ZOOM : READABLE_MIN_ZOOM;
-	const viewport = getViewportForBounds(bounds, width, height, floor, 2, .1);
+	const visible = width - insets.left - insets.right;
+	const viewport = getViewportForBounds(bounds, visible, 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,
+			x: insets.left + visible / 2 - cx * viewport.zoom,
 			y: height / 2 - cy * viewport.zoom
 		};
 	}
-	return viewport;
+	return {
+		...viewport,
+		x: viewport.x + insets.left
+	};
 }
 /** Margin around the drawn nodes on the first view, as a share of the pane. */
 var INITIAL_FIT_PADDING = .05;
@@ -34,16 +46,17 @@ var INITIAL_SETTLE_MS = 3e3;
 * 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 }) {
+function fitAllViewport({ bounds, nodes, width, height, legend, insets: drawers = NO_INSETS }) {
+	const insets = uncoveredInsets(width, drawers);
 	const fitIn = (left, top) => {
-		const view = getViewportForBounds(bounds, width - left, height - top, RING_MIN_ZOOM, 1, INITIAL_FIT_PADDING);
+		const view = getViewportForBounds(bounds, width - left - insets.right, 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);
+	const plain = fitIn(insets.left, 0);
 	if (!legend) return plain;
 	if (!nodes.some((node) => {
 		const left = node.x * plain.zoom + plain.x;
@@ -51,7 +64,7 @@ function fitAllViewport({ bounds, nodes, width, height, legend }) {
 		return left < legend.right && top < legend.bottom;
 	})) return plain;
 	const beside = fitIn(legend.right, 0);
-	const below = fitIn(0, legend.bottom);
+	const below = fitIn(insets.left, 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. */
@@ -68,6 +81,6 @@ function nudgeAxis(start, size, extent) {
 	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 };
+export { INITIAL_FIT_MAX_ZOOM, INITIAL_FIT_PADDING, INITIAL_SETTLE_MS, NUDGE_PADDING, RING_MIN_ZOOM, fitAllViewport, fitDuration, fitViewport, nudgeAxis, uncoveredInsets };
 //# sourceMappingURL=fitViewport.es.js.map

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

	@@ -1 +1 @@
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"}
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 insets?: PaneInsets;\n}\n\nexport interface PaneInsets {\n left: number;\n right: number;\n}\n\nconst NO_INSETS: PaneInsets = { left: 0, right: 0 };\n\nexport function uncoveredInsets(width: number, insets: PaneInsets): PaneInsets {\n return width - insets.left - insets.right > 0 ? insets : NO_INSETS;\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, insets: drawers = NO_INSETS }: FitInput): Viewport {\n const insets = uncoveredInsets(width, drawers);\n const floor = ring ? RING_MIN_ZOOM : READABLE_MIN_ZOOM;\n const visible = width - insets.left - insets.right;\n const viewport = getViewportForBounds(bounds, visible, 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 {\n zoom: viewport.zoom,\n x: insets.left + visible / 2 - cx viewport.zoom,\n y: height / 2 - cy * viewport.zoom,\n };\n }\n return { ...viewport, x: viewport.x + insets.left };\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 insets: drawers = NO_INSETS,\n}: {\n bounds: Rect;\n nodes: Rect[];\n width: number;\n height: number;\n legend?: { right: number; bottom: number };\n insets?: PaneInsets;\n}): Viewport {\n const insets = uncoveredInsets(width, drawers);\n const fitIn = (left: number, top: number): Viewport => {\n const view = getViewportForBounds(\n bounds,\n width - left - insets.right,\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(insets.left, 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(insets.left, 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;AAkB7B,IAAM,YAAwB;CAAE,MAAM;CAAG,OAAO;AAAE;AAElD,SAAgB,gBAAgB,OAAe,QAAgC;CAC7E,OAAO,QAAQ,OAAO,OAAO,OAAO,QAAQ,IAAI,SAAS;AAC3D;;;;;AAMA,SAAgB,YAAY,EAAE,QAAQ,OAAO,QAAQ,MAAM,QAAQ,QAAQ,UAAU,aAAiC;CACpH,MAAM,SAAS,gBAAgB,OAAO,OAAO;CAC7C,MAAM,QAAQ,OAAO,gBAAgB;CACrC,MAAM,UAAU,QAAQ,OAAO,OAAO,OAAO;CAC7C,MAAM,WAAW,qBAAqB,QAAQ,SAAS,QAAQ,OAAO,GAAG,EAAG;CAC5E,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;GACL,MAAM,SAAS;GACf,GAAG,OAAO,OAAO,UAAU,IAAI,KAAK,SAAS;GAC7C,GAAG,SAAS,IAAI,KAAK,SAAS;EAChC;CACF;CACA,OAAO;EAAE,GAAG;EAAU,GAAG,SAAS,IAAI,OAAO;CAAK;AACpD;;AAGA,IAAa,sBAAsB;;AAEnC,IAAa,uBAAuB;;AAEpC,IAAa,oBAAoB;;;;;;;AAUjC,SAAgB,eAAe,EAC7B,QACA,OACA,OACA,QACA,QACA,QAAQ,UAAU,aAQP;CACX,MAAM,SAAS,gBAAgB,OAAO,OAAO;CAC7C,MAAM,SAAS,MAAc,QAA0B;EACrD,MAAM,OAAO,qBACX,QACA,QAAQ,OAAO,OAAO,OACtB,SAAS,KACT,eAAA,GAEA,mBACF;EACA,OAAO;GAAE,MAAM,KAAK;GAAM,GAAG,KAAK,IAAI;GAAM,GAAG,KAAK,IAAI;EAAI;CAC9D;CACA,MAAM,QAAQ,MAAM,OAAO,MAAM,CAAC;CAClC,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,OAAO,MAAM,OAAO,MAAM;CAC9C,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"}