canopycms 0.2.0 → 0.3.0

package/dist/editor/EntryNavigator.js

@@ -1,14 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActionIcon, Badge, Box, Button, CloseButton, Group, Highlight, Loader, Menu, ScrollArea, Stack, Text, TextInput, Tooltip, Tree, useTree, rem, } from '@mantine/core';
+import { ActionIcon, Badge, Box, Button, CloseButton, Group, Highlight, Loader, Menu, ScrollArea, SegmentedControl, Stack, Text, TextInput, Tooltip, Tree, useTree, rem, } from '@mantine/core';
+import { useMergedRef } from '@mantine/hooks';
 import { IconArrowDown, IconAlertTriangle, IconArrowUp, IconDots, IconEdit, IconFolderPlus, IconLock, IconPlus, IconSearch, IconTrash, } from '@tabler/icons-react';
 import { calculatePathToEntry } from './editor-utils.js';
-import { matchesEntryQuery } from './entry-search.js';
+import { entryDetailLine, matchesEntryQuery } from './entry-search.js';
 import { EDITOR_ACTIONS } from './copy.js';
 import { DestructiveMenuItem } from './components/DestructiveMenuItem.js';
 import { UnsavedMark } from './components/UnsavedMark.js';
 import { BranchRowLock } from './components/BranchRowLock.js';
+import { BranchNotAvailableNotice } from './components/BranchNotAvailableNotice.js';
 import { ReasonedMenuItem } from './components/ReasonedMenuItem.js';
 import { UnavailableTypeMessage } from './components/UnavailableTypeMessage.js';
 const UnavailableTypeRow = ({ schemaRefs }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", align: "flex-start", mt: 4, "data-testid": "unavailable-type-message", children: [_jsx(Box, { c: "orange", style: { display: 'flex', flexShrink: 0, paddingTop: 2 }, children: _jsx(IconAlertTriangle, { size: 14, "aria-hidden": true }) }), _jsx(Text, { size: "xs", c: "orange", children: _jsx(UnavailableTypeMessage, { schemaRefs: schemaRefs }) })] }));
@@ -38,31 +40,37 @@ const expandedStateFor = (nodes, acc = {}) => {
     return acc;
 };
 /**
- * The nodes of `nodes` that match `query`. An entry matches on label or slug; a collection whose
- * label matches keeps its whole subtree, and any other collection survives only with its matching
- * descendants. Nodes keep the position data (`childIndex`, `totalChildrenCount`) of the full tree.
+ * The nodes of `nodes` that match `query` and, given `changed`, are in it. An entry matches on
+ * label, title or slug; a collection whose label matches keeps its whole subtree, or under `changed` its
+ * changed entries, and any other collection survives only with its matching descendants. Nodes keep
+ * the position data (`childIndex`, `totalChildrenCount`) of the full tree.
  */
-const filterTree = (nodes, query) => {
+const filterTree = (nodes, query, changed) => {
     const kept = [];
     for (const node of nodes) {
         const label = String(node.label ?? '');
         if (node.nodeProps?.isEntry) {
             const { slug, title } = node.nodeProps;
-            if (matchesEntryQuery({ label, title, slug }, query)) {
+            if (matchesEntryQuery({ label, title, slug }, query) &&
+                (!changed || changed.has(node.value))) {
                 kept.push(node);
             }
+            continue;
         }
-        else if (matchesEntryQuery({ label }, query)) {
+        // An empty query matches every label, so under Changed a collection is never kept whole.
+        const labelMatches = matchesEntryQuery({ label }, query);
+        if (labelMatches && !changed) {
             kept.push(node);
+            continue;
         }
-        else {
-            const children = filterTree(node.children ?? [], query);
-            if (children.length > 0)
-                kept.push({ ...node, children });
-        }
+        const children = filterTree(node.children ?? [], labelMatches ? '' : query, changed);
+        if (children.length > 0)
+            kept.push({ ...node, children });
     }
     return kept;
 };
+/** Whether `value` is a node of `nodes`, at any depth. */
+const hasNode = (nodes, value) => nodes.some((node) => node.value === value || hasNode(node.children ?? [], value));
 /** The first entry in tree order that matches `query`, else the first entry of any kind. */
 const firstEntryPath = (nodes, query) => {
     const entries = [];
@@ -82,10 +90,11 @@ const firstEntryPath = (nodes, query) => {
     }, query));
     return (match ?? entries[0])?.value;
 };
+const TOOLTIP_DELAY = 400;
 /**
- * A line of a row, truncated with an ellipsis. Its full text shows in a tooltip, and only while
- * the text is cut: the width is measured when the pointer or focus enters the row, not on every
- * render.
+ * A line of a row, truncated with an ellipsis. Its full text shows in a tooltip on hover, and only
+ * while the text is cut: the width is measured when the pointer or focus enters the row, not on
+ * every render.
  */
 const TruncatedLabel = ({ label, highlight = '', fw, size = 'sm', c }) => {
     const elementRef = useRef(null);
@@ -102,14 +111,88 @@ const TruncatedLabel = ({ label, highlight = '', fw, size = 'sm', c }) => {
             const element = elementRef.current;
             setTruncated(!!element && element.scrollWidth > element.clientWidth);
         };
+        // The tree focuses the row's treeitem, which also holds the rows nested under it.
+        const item = row.closest('[role="treeitem"]') ?? row;
+        const focusIn = (event) => {
+            const target = event.target;
+            if (target === item || (target instanceof Node && row.contains(target)))
+                measure();
+        };
         row.addEventListener('mouseenter', measure);
-        row.addEventListener('focusin', measure);
+        item.addEventListener('focusin', focusIn);
         return () => {
             row.removeEventListener('mouseenter', measure);
-            row.removeEventListener('focusin', measure);
+            item.removeEventListener('focusin', focusIn);
         };
     }, []);
-    return (_jsx(Tooltip, { label: label, openDelay: 400, withinPortal: true, disabled: !truncated, children: highlight ? (_jsx(Highlight, { ref: setElement, highlight: highlight, size: size, fw: fw, truncate: "end", style: { minWidth: 0 }, children: label })) : (_jsx(Text, { ref: setElement, size: size, fw: fw, c: c, truncate: "end", style: { minWidth: 0 }, children: label })) }));
+    return (_jsx(Tooltip, { label: label, openDelay: TOOLTIP_DELAY, withinPortal: true, disabled: !truncated, children: highlight ? (_jsx(Highlight, { ref: setElement, highlight: highlight, size: size, fw: fw, truncate: "end", style: { minWidth: 0 }, children: label })) : (_jsx(Text, { ref: setElement, size: size, fw: fw, c: c, truncate: "end", style: { minWidth: 0 }, children: label })) }));
+};
+/**
+ * A row's cut-off detail line in full once keyboard focus has rested on the row for
+ * `TOOLTIP_DELAY`. Anchored to the whole row, below its focus ring or, without room, above it, so
+ * it never covers the row's title; Escape hides it until focus next arrives (WCAG 1.4.13).
+ */
+const RowDetailTip = ({ detail, children, }) => {
+    const rowRef = useRef(null);
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        const row = rowRef.current;
+        const item = row?.closest('[role="treeitem"]');
+        if (!row || !item || !detail)
+            return;
+        let timer;
+        let open = false;
+        // While shown it also marks the row, so PreviewPane's Escape leaves the key to it.
+        const show = (next) => {
+            open = next;
+            setShown(next);
+            if (next)
+                item.setAttribute('data-mantine-stop-propagation', 'true');
+            else
+                item.removeAttribute('data-mantine-stop-propagation');
+        };
+        const cutOff = () => {
+            const line = row.querySelector('[data-testid="entry-nav-detail"] > *');
+            return !!line && line.scrollWidth > line.clientWidth;
+        };
+        const onFocusIn = (event) => {
+            if (event.target !== item)
+                return;
+            clearTimeout(timer);
+            // Not after a click, which focuses the treeitem too and would pin it over the next row.
+            timer = setTimeout(() => show(item.matches(':focus-visible') && cutOff()), TOOLTIP_DELAY);
+        };
+        const onFocusOut = (event) => {
+            if (event.target !== item)
+                return;
+            clearTimeout(timer);
+            show(false);
+        };
+        // Handled, so a panel's own Escape waits for the next press.
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape' || event.target !== item)
+                return;
+            clearTimeout(timer);
+            if (!open)
+                return;
+            event.preventDefault();
+            show(false);
+        };
+        item.addEventListener('focusin', onFocusIn);
+        item.addEventListener('focusout', onFocusOut);
+        item.addEventListener('keydown', onKeyDown);
+        return () => {
+            item.removeEventListener('focusin', onFocusIn);
+            item.removeEventListener('focusout', onFocusOut);
+            item.removeEventListener('keydown', onKeyDown);
+            clearTimeout(timer);
+            show(false);
+        };
+    }, [detail]);
+    // Rendered without a detail too, so the row keeps its place in the tree as one arrives.
+    return (_jsx(Tooltip, { ref: rowRef, label: detail ?? '', disabled: !detail, opened: shown, position: "bottom-start", 
+        // Clears the row's 2px focus ring and its 2px offset.
+        offset: 8, withinPortal: true, children: children }));
 };
 /** The keys Mantine's tree acts on, matched as it matches them, by `code`. */
 const TREE_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space']);
@@ -124,7 +207,7 @@ const stopTreeKeys = (event) => {
         event.stopPropagation();
 };
 const UnsavedDot = ({ label }) => (_jsx(Tooltip, { label: label, withinPortal: true, children: _jsx(UnsavedMark, { role: "img", "aria-label": label, "data-testid": "unsaved-dot" }) }));
-export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, readOnlyReason, dirtyPaths, revealCollection, onRevealed, }) => {
+export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, readOnlyReason, dirtyPaths, reveal, onRevealed, onChangedOnlyChange, changedOnly: changedOnlyProp = false, unsavedCount: unsavedCountProp = 0, unsavedEntries, entryListFailed = false, branchNotAvailable = false, onSwitchBranch, onFilterEnter, onFilterEscape, onRowMenuOpen, filterRef, filterShortcut, }) => {
     // Shadow the entry-mutation callbacks with undefined when readOnly, so every
     // downstream reference (hasEntryMenu, canReorder, the menu items themselves)
     // sees them as absent rather than threading a readOnly check through each
@@ -138,7 +221,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     const localExpandedStateRef = useRef(expandedStateRef?.current ?? {});
     const [query, setQuery] = useState('');
     const filterInputRef = useRef(null);
-    const filtering = query.trim() !== '';
+    const mergedFilterRef = useMergedRef(filterInputRef, filterRef);
+    const changedOnly = changedOnlyProp && !!onChangedOnlyChange;
+    const filtering = query.trim() !== '' || changedOnly;
     // Read from the tree's expand/collapse callbacks, which fire from state updaters.
     const filteringRef = useRef(false);
     useEffect(() => {
@@ -150,6 +235,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             label: entry.label,
             nodeProps: {
                 status: entry.status,
+                route: entry.route,
                 title: entry.title,
                 missing: entry.missing,
                 noPage: entry.noPage,
@@ -174,6 +260,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                         label: entry?.label ?? col.label,
                         nodeProps: {
                             status: entry?.status,
+                            route: entry?.route,
                             title: entry?.title,
                             missing: entry?.missing,
                             noPage: entry?.noPage,
@@ -284,6 +371,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             label: item.label,
             nodeProps: {
                 status: item.status,
+                route: item.route,
                 title: item.title,
                 missing: item.missing,
                 noPage: item.noPage,
@@ -296,19 +384,28 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     }, [collections, items, hiddenRootPath]);
     // Filtered from the finished tree, so each node keeps its position in the whole collection and
     // Move up / Move down stay correct while a filter is on.
-    const filteredTree = useMemo(() => (filtering ? filterTree(treeData, query) : treeData), [filtering, treeData, query]);
+    const filteredTree = useMemo(() => filtering
+        ? filterTree(treeData, query, changedOnly ? (dirtyPaths ?? new Set()) : undefined)
+        : treeData, [filtering, treeData, query, changedOnly, dirtyPaths]);
+    // A caller may pass a new but equal `dirtyPaths` as drafts change: that alone never reopens a
+    // folder the user closed, while a new query or new folders re-expand.
+    const filteredFolders = useMemo(() => Object.keys(expandedStateFor(filteredTree)).join('\n'), [filteredTree]);
     // Collections that hold an entry with unsaved changes, found over the whole tree so a filter
     // never hides the reason for a dot.
-    const dirtyCollections = useMemo(() => {
+    // `listedUnsaved` counts the unsaved entries the tree has rows for.
+    const { dirtyCollections, listedUnsaved } = useMemo(() => {
         const dirty = new Set();
+        let listed = 0;
         if (!dirtyPaths?.size)
-            return dirty;
+            return { dirtyCollections: dirty, listedUnsaved: listed };
         const walk = (nodes) => {
             let any = false;
             for (const node of nodes) {
                 if (node.nodeProps?.isEntry) {
-                    if (dirtyPaths.has(node.value))
+                    if (dirtyPaths.has(node.value)) {
                         any = true;
+                        listed += 1;
+                    }
                 }
                 else if (walk(node.children ?? [])) {
                     dirty.add(node.value);
@@ -318,8 +415,21 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             return any;
         };
         walk(treeData);
-        return dirty;
+        return { dirtyCollections: dirty, listedUnsaved: listed };
     }, [treeData, dirtyPaths]);
+    // Unsaved entries the tree has no row for, which Changed offers beneath it.
+    const unlistedNamed = useMemo(() => {
+        if (!changedOnly || !unsavedEntries?.length)
+            return [];
+        const rows = new Set();
+        const walk = (nodes) => nodes.forEach((node) => {
+            rows.add(node.value);
+            walk(node.children ?? []);
+        });
+        walk(treeData);
+        return unsavedEntries.filter((entry) => !rows.has(entry.path));
+    }, [changedOnly, unsavedEntries, treeData]);
+    const unlistedMatches = useMemo(() => unlistedNamed.filter((entry) => matchesEntryQuery({ label: entry.label }, query)), [unlistedNamed, query]);
     // The hidden root's own row never renders, so its message is shown once above the tree.
     const hiddenRootAddRefused = !readOnly &&
         !!hiddenRootPath &&
@@ -365,6 +475,8 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     // The expanded state from before the filter started, put back exactly when it clears. The tree
     // drops the state of nodes it no longer renders, so it cannot be recovered from the tree itself.
     const expandedBeforeFilterRef = useRef(null);
+    const servedRevealRef = useRef();
+    const revealAwaitsRestoreRef = useRef(false);
     useEffect(() => {
         if (filtering) {
             expandedBeforeFilterRef.current ??= tree.expandedState;
@@ -372,14 +484,21 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         }
         else if (expandedBeforeFilterRef.current) {
             // Plus the ancestors of an entry picked while filtering, so it stays in view.
-            tree.setExpandedState({
+            const next = {
                 ...expandedBeforeFilterRef.current,
                 ...calculatePathToEntry(selectedPath, treeData),
-            });
+            };
+            tree.setExpandedState(next);
             expandedBeforeFilterRef.current = null;
+            // A reveal that cleared the filter added its row's folders, kept as its own expansion is.
+            if (reveal && servedRevealRef.current !== reveal.seq) {
+                revealAwaitsRestoreRef.current = true;
+                localExpandedStateRef.current = next;
+                onExpandedStateChange?.(next);
+            }
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- runs when the filter or the filtered tree changes; `tree` is a fresh object each render
-    }, [filtering, filteredTree]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- runs when the filter, its query or its folders change; `tree` is a fresh object each render
+    }, [filtering, filteredFolders, query.trim()]);
     useEffect(() => {
         if (!selectedPath || !treeData || filtering)
             return;
@@ -415,25 +534,53 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         hasScrolledRef.current = false;
     }, []);
     const treeBoxRef = useRef(null);
-    const servedRevealRef = useRef();
     // Runs again as the filter clears and the expansion lands, then focuses the row a frame later.
     useEffect(() => {
-        if (!revealCollection || !treeData || servedRevealRef.current === revealCollection.seq)
+        if (!reveal || !treeData || servedRevealRef.current === reveal.seq) {
+            revealAwaitsRestoreRef.current = false;
             return;
+        }
         const served = () => {
-            servedRevealRef.current = revealCollection.seq;
+            servedRevealRef.current = reveal.seq;
             onRevealed?.();
         };
-        if (query) {
+        if (reveal.kind === 'changed') {
             setQuery('');
+            served();
             return;
         }
-        const value = collectionNodeValue(treeData, revealCollection.path);
+        // An empty tree that is still loading gets its rows; this runs again when they arrive.
+        if (treeData.length === 0 && loading)
+            return;
+        // This commit's expanded state predates the restore's, which re-runs this effect.
+        if (revealAwaitsRestoreRef.current) {
+            revealAwaitsRestoreRef.current = false;
+            return;
+        }
+        const value = reveal.kind === 'collection'
+            ? collectionNodeValue(treeData, reveal.path)
+            : hasNode(treeData, reveal.path)
+                ? reveal.path
+                : undefined;
         if (!value) {
             served();
             return;
         }
-        const wanted = { ...calculatePathToEntry(value, treeData), [value]: true };
+        const wanted = {
+            ...calculatePathToEntry(value, treeData),
+            ...(reveal.kind === 'collection' ? { [value]: true } : {}),
+        };
+        if (filtering) {
+            // The filter's restore expands the row's folders along with what was open before it.
+            expandedBeforeFilterRef.current = {
+                ...(expandedBeforeFilterRef.current ?? tree.expandedState),
+                ...wanted,
+            };
+            setQuery('');
+            if (changedOnly)
+                onChangedOnlyChange?.(false);
+            return;
+        }
         if (Object.keys(wanted).some((key) => !tree.expandedState[key])) {
             const next = { ...tree.expandedState, ...wanted };
             tree.setExpandedState(next);
@@ -449,7 +596,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         });
         return () => cancelAnimationFrame(frame);
         // eslint-disable-next-line react-hooks/exhaustive-deps -- `tree` and the callbacks are fresh each render
-    }, [revealCollection, treeData, query, tree.expandedState]);
+    }, [reveal, treeData, filtering, loading, tree.expandedState]);
     const clearFilter = () => {
         setQuery('');
         filterInputRef.current?.focus();
@@ -458,17 +605,20 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         // Enter and Escape during IME composition commit or cancel the composition, nothing more.
         if (event.nativeEvent.isComposing)
             return;
-        if (event.key === 'Escape' && query) {
-            // Clears the filter and nothing else: the surrounding drawer stays open.
+        if (event.key === 'Escape' && (query || onFilterEscape)) {
+            // A query clears and nothing else: the surrounding drawer stays open.
             event.preventDefault();
             event.stopPropagation();
-            setQuery('');
+            if (query)
+                setQuery('');
+            else
+                onFilterEscape?.();
         }
         else if (event.key === 'Enter' && filtering) {
-            const path = firstEntryPath(filteredTree, query);
+            const path = firstEntryPath(filteredTree, query) ?? unlistedMatches[0]?.path;
             if (path) {
                 event.preventDefault();
-                onSelect(path);
+                (onFilterEnter ?? onSelect)(path);
             }
         }
     };
@@ -477,6 +627,10 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         const status = node.nodeProps?.status;
         const entryMissing = !!node.nodeProps?.missing;
         const entryNoPage = !!node.nodeProps?.noPage;
+        const route = node.nodeProps?.route;
+        const detail = entryMissing
+            ? status
+            : entryDetailLine({ typeLabel: status, route: entryNoPage ? undefined : route });
         // Collection-level mutation callbacks are nulled when readOnly, same as the entry-level ones
         // above, so hasCollectionMenu is false; a row that would have had a menu shows its lock.
         const rawOnAdd = node.nodeProps?.onAdd;
@@ -541,67 +695,85 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         const showCollectionDirtyDot = !isEntry && dirtyCollections.has(node.value);
         const adminItems = onAddSubCollection || onEdit || onDelete;
         const hasCollectionContentItems = onAdd || canReorder;
-        return (_jsxs(Box, { ...elementProps, ref: selected ? selectedNodeRef : undefined, "data-nav-row": true, "data-nav-selected": selected ? '' : undefined, "data-testid": `entry-nav-item-${testIdSuffix}`, onClick: (event) => {
-                elementProps.onClick(event);
-                if (isLeaf && isEntry) {
-                    onSelect(node.value);
-                }
-            }, style: {
-                ...elementProps.style,
-                marginBottom: 4,
-                borderRadius: 10,
-                paddingInline: 10,
-                paddingBlock: 6,
-                paddingLeft: `calc(${rem(8)} + ${rem(level * 12)})`,
-                backgroundColor: selected ? 'var(--mantine-primary-color-light)' : undefined,
-                color: selected ? 'var(--mantine-primary-color-light-color)' : undefined,
-                border: selected
-                    ? '1px solid var(--mantine-primary-color-light-color)'
-                    : '1px solid transparent',
-                transition: 'background-color 120ms ease, border-color 120ms ease',
-            }, children: [_jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", style: { width: '100%' }, children: [_jsxs(Group, { gap: 6, wrap: "nowrap", style: { flex: 1, minWidth: 0 }, children: [_jsx(Box, { w: 18, h: 18, style: {
-                                        display: 'flex',
-                                        flexShrink: 0,
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                    }, children: _jsx(Chevron, { expanded: expanded, visible: showChevron }) }), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsxs(Group, { gap: 6, wrap: "nowrap", style: { minWidth: 0 }, children: [_jsx(TruncatedLabel, { label: label, highlight: filtering ? query.trim() : '', fw: selected ? 600 : 500 }), showEntryDirtyDot && _jsx(UnsavedDot, { label: "Unsaved changes" }), showCollectionDirtyDot && _jsx(UnsavedDot, { label: "Contains unsaved changes" }), conflictNotice && (_jsx(Tooltip, { label: "This content was updated on the base branch \u2014 a reviewer will reconcile", withArrow: true, children: _jsx(Badge, { size: "xs", variant: "light", color: "orange", "data-testid": "conflict-badge", style: { flexShrink: 0 }, children: "Conflict" }) })), entryLocked && (_jsx(Tooltip, { label: "You can't edit this entry", withinPortal: true, children: _jsx(Box, { component: "span", role: "img", "aria-label": "You can't edit this entry", "data-testid": "entry-lock", c: "dimmed", style: { display: 'inline-flex', flexShrink: 0 }, children: _jsx(IconLock, { size: 14, "aria-hidden": true }) }) }))] }), status && (_jsx(Box, { "data-testid": "entry-nav-type", style: { minWidth: 0 }, children: _jsx(TruncatedLabel, { label: status, size: "xs", 
-                                                // A missing file is an error, in error text, not a dimmed type.
-                                                c: entryMissing ? 'var(--canopy-danger-text)' : 'dimmed' }) }))] })] }), _jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [hasCollectionMenu && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Collection actions", "data-testid": `collection-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        onAdd();
-                                                    }, "data-testid": "add-entry-menu-item", children: "Add entry\u2026" })), canReorder && (_jsxs(_Fragment, { children: [_jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowUp, { size: 14 }), blockedReason: canMoveUp ? undefined : 'Already first', onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onReorderEntry?.(parentCollectionPath, contentId, 'up');
-                                                            }, children: "Move up" }), _jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowDown, { size: 14 }), blockedReason: canMoveDown ? undefined : 'Already last', onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onReorderEntry?.(parentCollectionPath, contentId, 'down');
-                                                            }, children: "Move down" })] })), adminItems && (_jsxs(_Fragment, { children: [hasCollectionContentItems && _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Admin" })] })), onAddSubCollection && (_jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        onAddSubCollection();
-                                                    }, children: "Add sub-collection\u2026" })), onEdit && (_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        onEdit();
-                                                    }, children: "Edit collection\u2026" })), onDelete && (_jsx(DestructiveMenuItem, { leftSection: _jsx(IconTrash, { size: 14 }), onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        onDelete();
-                                                    }, children: "Delete collection" }))] })] })), showsLockSlot &&
-                                    (readOnlyReason ? (_jsx(BranchRowLock, { label: isCollection ? 'Collection actions' : 'Entry actions', reason: readOnlyReason })) : (
-                                    // The branch's state is still loading: hold the slot so rows do not shift. It draws
-                                    // nothing, so it needs no reveal.
-                                    _jsx(Box, { w: 18, h: 18, "aria-hidden": true, "data-testid": "branch-lock-pending" }))), hasEntryMenu && (_jsxs(Menu, { shadow: "md", width: 180, withinPortal: true, position: "bottom-end", children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Entry actions", "data-testid": `entry-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onRenameEntry && (_jsxs(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
-                                                        event.stopPropagation();
-                                                        onRenameEntry(entryPath);
-                                                    }, "data-testid": "rename-entry-menu-item", children: [entryNoPage ? EDITOR_ACTIONS.changeSlug : EDITOR_ACTIONS.changeUrl, "\u2026"] })), onReorderEntry && contentId && parentCollectionPath && (_jsxs(_Fragment, { children: [_jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowUp, { size: 14 }), blockedReason: canMoveUp ? undefined : 'Already first', onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onReorderEntry(parentCollectionPath, contentId, 'up');
-                                                            }, children: "Move up" }), _jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowDown, { size: 14 }), blockedReason: canMoveDown ? undefined : 'Already last', onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onReorderEntry(parentCollectionPath, contentId, 'down');
-                                                            }, children: "Move down" })] })), onDeleteEntry && (_jsxs(_Fragment, { children: [(onRenameEntry || (onReorderEntry && contentId && parentCollectionPath)) && (_jsx(Menu.Divider, {})), _jsx(DestructiveMenuItem, { leftSection: _jsx(IconTrash, { size: 14 }), onClick: (event) => {
-                                                                event.stopPropagation();
-                                                                onDeleteEntry(entryPath);
-                                                            }, "data-testid": "delete-entry-menu-item", children: "Delete entry" })] }))] })] }))] })] }), isCollection && unavailableSchemaRefs && unavailableSchemaRefs.length > 0 && (_jsx(UnavailableTypeRow, { schemaRefs: unavailableSchemaRefs })), isCollection && addRefused && _jsx(AddRefusedRow, {})] }));
+        return (_jsx(RowDetailTip, { detail: detail, children: _jsxs(Box, { ...elementProps, ref: selected ? selectedNodeRef : undefined, "data-nav-row": true, "data-nav-selected": selected ? '' : undefined, "data-testid": `entry-nav-item-${testIdSuffix}`, onClick: (event) => {
+                    elementProps.onClick(event);
+                    if (isLeaf && isEntry) {
+                        onSelect(node.value);
+                    }
+                }, style: {
+                    ...elementProps.style,
+                    marginBottom: 4,
+                    borderRadius: 10,
+                    paddingInline: 10,
+                    paddingBlock: 6,
+                    paddingLeft: `calc(${rem(8)} + ${rem(level * 12)})`,
+                    backgroundColor: selected ? 'var(--mantine-primary-color-light)' : undefined,
+                    color: selected ? 'var(--mantine-primary-color-light-color)' : undefined,
+                    border: selected
+                        ? '1px solid var(--mantine-primary-color-light-color)'
+                        : '1px solid transparent',
+                    transition: 'background-color 120ms ease, border-color 120ms ease',
+                }, children: [_jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", style: { width: '100%' }, children: [_jsxs(Group, { gap: 6, wrap: "nowrap", style: { flex: 1, minWidth: 0 }, children: [_jsx(Box, { w: 18, h: 18, style: {
+                                            display: 'flex',
+                                            flexShrink: 0,
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                        }, children: _jsx(Chevron, { expanded: expanded, visible: showChevron }) }), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsxs(Group, { gap: 6, wrap: "nowrap", style: { minWidth: 0 }, children: [_jsx(TruncatedLabel, { label: label, highlight: filtering ? query.trim() : '', fw: selected ? 600 : 500 }), showEntryDirtyDot && _jsx(UnsavedDot, { label: "Unsaved changes" }), showCollectionDirtyDot && _jsx(UnsavedDot, { label: "Contains unsaved changes" }), conflictNotice && (_jsx(Tooltip, { label: "This content was updated on the base branch \u2014 a reviewer will reconcile", withArrow: true, children: _jsx(Badge, { size: "xs", variant: "light", color: "orange", "data-testid": "conflict-badge", style: { flexShrink: 0 }, children: "Conflict" }) })), entryLocked && (_jsx(Tooltip, { label: "You can't edit this entry", withinPortal: true, children: _jsx(Box, { component: "span", role: "img", "aria-label": "You can't edit this entry", "data-testid": "entry-lock", c: "dimmed", style: { display: 'inline-flex', flexShrink: 0 }, children: _jsx(IconLock, { size: 14, "aria-hidden": true }) }) }))] }), detail && (_jsx(Box, { "data-testid": "entry-nav-detail", style: { minWidth: 0 }, children: _jsx(TruncatedLabel, { label: detail, size: "xs", 
+                                                    // A missing file is an error, in error text, not a dimmed type.
+                                                    c: entryMissing ? 'var(--canopy-danger-text)' : 'dimmed' }) }))] })] }), _jsxs(Group, { gap: 4, wrap: "nowrap", style: { flexShrink: 0 }, children: [hasCollectionMenu && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", onOpen: onRowMenuOpen, children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Collection actions", "data-testid": `collection-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onAdd();
+                                                        }, "data-testid": "add-entry-menu-item", children: "Add entry\u2026" })), canReorder && (_jsxs(_Fragment, { children: [_jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowUp, { size: 14 }), blockedReason: canMoveUp ? undefined : 'Already first', onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    onReorderEntry?.(parentCollectionPath, contentId, 'up');
+                                                                }, children: "Move up" }), _jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowDown, { size: 14 }), blockedReason: canMoveDown ? undefined : 'Already last', onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    onReorderEntry?.(parentCollectionPath, contentId, 'down');
+                                                                }, children: "Move down" })] })), adminItems && (_jsxs(_Fragment, { children: [hasCollectionContentItems && _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Admin" })] })), onAddSubCollection && (_jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onAddSubCollection();
+                                                        }, children: "Add sub-collection\u2026" })), onEdit && (_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onEdit();
+                                                        }, children: "Edit collection\u2026" })), onDelete && (_jsx(DestructiveMenuItem, { leftSection: _jsx(IconTrash, { size: 14 }), onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onDelete();
+                                                        }, children: "Delete collection" }))] })] })), showsLockSlot &&
+                                        (readOnlyReason ? (_jsx(BranchRowLock, { label: isCollection ? 'Collection actions' : 'Entry actions', reason: readOnlyReason })) : (
+                                        // The branch's state is still loading: hold the slot so rows do not shift. It draws
+                                        // nothing, so it needs no reveal.
+                                        _jsx(Box, { w: 18, h: 18, "aria-hidden": true, "data-testid": "branch-lock-pending" }))), hasEntryMenu && (_jsxs(Menu, { shadow: "md", width: 180, withinPortal: true, position: "bottom-end", onOpen: onRowMenuOpen, children: [_jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "xs", variant: "subtle", color: "gray", onClick: (event) => event.stopPropagation(), "aria-label": "Entry actions", "data-testid": `entry-menu-${testIdSuffix}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { onKeyDown: stopTreeKeys, children: [onRenameEntry && (_jsxs(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            onRenameEntry(entryPath);
+                                                        }, "data-testid": "rename-entry-menu-item", children: [entryNoPage ? EDITOR_ACTIONS.changeSlug : EDITOR_ACTIONS.changeUrl, "\u2026"] })), onReorderEntry && contentId && parentCollectionPath && (_jsxs(_Fragment, { children: [_jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowUp, { size: 14 }), blockedReason: canMoveUp ? undefined : 'Already first', onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    onReorderEntry(parentCollectionPath, contentId, 'up');
+                                                                }, children: "Move up" }), _jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowDown, { size: 14 }), blockedReason: canMoveDown ? undefined : 'Already last', onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    onReorderEntry(parentCollectionPath, contentId, 'down');
+                                                                }, children: "Move down" })] })), onDeleteEntry && (_jsxs(_Fragment, { children: [(onRenameEntry ||
+                                                                (onReorderEntry && contentId && parentCollectionPath)) && (_jsx(Menu.Divider, {})), _jsx(DestructiveMenuItem, { leftSection: _jsx(IconTrash, { size: 14 }), onClick: (event) => {
+                                                                    event.stopPropagation();
+                                                                    onDeleteEntry(entryPath);
+                                                                }, "data-testid": "delete-entry-menu-item", children: "Delete entry" })] }))] })] }))] })] }), isCollection && unavailableSchemaRefs && unavailableSchemaRefs.length > 0 && (_jsx(UnavailableTypeRow, { schemaRefs: unavailableSchemaRefs })), isCollection && addRefused && _jsx(AddRefusedRow, {})] }) }));
+    };
+    // Changed can't list every entry it counts: those with no row are offered beneath the tree, and
+    // drafts whose entries aren't named yet are counted there.
+    const unsavedCount = Math.max(unsavedCountProp, listedUnsaved + unlistedNamed.length);
+    const unnamedUnsaved = unsavedCount - listedUnsaved - unlistedNamed.length;
+    const showAll = () => {
+        onChangedOnlyChange?.(false);
+        filterInputRef.current?.focus();
     };
-    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "entry-navigator", children: [treeData.length > 0 && (_jsx(TextInput, { ref: filterInputRef, size: "sm", py: 4, "aria-label": "Filter entries", spellCheck: false, "data-autofocus": true, placeholder: "Filter by title or slug", value: query, onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: handleFilterKeyDown, leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), rightSection: query ? _jsx(CloseButton, { size: "sm", "aria-label": "Clear filter", onClick: clearFilter }) : null, "data-mantine-stop-propagation": query ? 'true' : undefined, "data-testid": "entry-nav-filter" })), _jsxs(ScrollArea, { type: "auto", scrollbars: "y", offsetScrollbars: true, style: { flex: 1 }, children: [hiddenRootUnavailableRefs && hiddenRootUnavailableRefs.length > 0 && (_jsx(Box, { pt: "sm", children: _jsx(UnavailableTypeRow, { schemaRefs: hiddenRootUnavailableRefs }) })), hiddenRootAddRefused && (_jsx(Box, { pt: "sm", children: _jsx(AddRefusedRow, {}) })), treeData.length === 0 ? (loading ? (_jsxs(Group, { gap: "xs", py: "sm", children: [_jsx(Loader, { size: "xs" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Loading content\u2026" })] })) : (_jsx(Text, { size: "xs", c: "dimmed", py: "sm", children: "No content" }))) : filteredTree.length === 0 ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-filter-empty", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: clearFilter, children: "Clear filter" })] })) : (_jsx(Box, { py: "sm", ref: treeBoxRef, children: _jsx(Tree, { data: filteredTree, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }) }))] })] }));
+    const outsideRows = unlistedMatches.length > 0 && (_jsxs(Stack, { gap: 2, py: 4, align: "flex-start", "data-testid": "entry-nav-changed-outside", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Not in the content tree" }), unlistedMatches.map((entry) => (_jsx(Button, { size: "compact-sm", variant: "subtle", color: "gray", leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: () => onSelect(entry.path), children: entry.label }, entry.path)))] }));
+    const changedNotice = !changedOnly ? null : entryListFailed ? (_jsx(Text, { size: "sm", c: "dimmed", py: "sm", "data-testid": "entry-nav-changed-failed", children: "The list of entries couldn't be loaded, so unsaved entries can't be shown. Choose \"Refresh branch\" in the branch menu to try again." })) : query.trim() ? (_jsxs(_Fragment, { children: [filteredTree.length === 0 && !outsideRows && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-changed-no-match", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No unsaved entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Search all entries" })] })), outsideRows] })) : unsavedCount === 0 ? (treeData.length > 0 && (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-changed-none", children: [_jsx(Text, { size: "sm", c: "dimmed", children: "No unsaved changes on this branch." }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: showAll, children: "Show all entries" })] }))) : (_jsxs(_Fragment, { children: [outsideRows, unnamedUnsaved > 0 && (_jsxs(Text, { size: "sm", c: "dimmed", py: 4, "data-testid": "entry-nav-changed-unlisted", children: [listedUnsaved + unlistedNamed.length > 0
+                        ? `${unnamedUnsaved} more: `
+                        : `${unnamedUnsaved} unsaved ${unnamedUnsaved === 1 ? 'entry' : 'entries'}: `, unnamedUnsaved === 1 ? 'loading its name…' : 'loading their names…'] }))] }));
+    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "entry-navigator", children: [treeData.length > 0 && (_jsx(TextInput, { ref: mergedFilterRef, size: "sm", py: 4, "aria-label": "Find entries", "aria-keyshortcuts": filterShortcut?.keys, spellCheck: false, "data-autofocus": true, placeholder: "Find entries", value: query, onChange: (event) => setQuery(event.currentTarget.value), onKeyDown: handleFilterKeyDown, leftSection: _jsx(IconSearch, { size: 14, "aria-hidden": true }), rightSection: query ? (_jsx(Tooltip, { label: "Clear search", withinPortal: true, children: _jsx(CloseButton, { size: "sm", "aria-label": "Clear search", onClick: clearFilter }) })) : filterShortcut ? (
+                // The placeholder's colour, so it never reads brighter than the placeholder beside it.
+                _jsx(Text, { size: "xs", c: "var(--mantine-color-placeholder)", "aria-hidden": true, "data-testid": "entry-nav-filter-shortcut", children: filterShortcut.label })) : null, rightSectionWidth: query || !filterShortcut ? undefined : 'auto', rightSectionPointerEvents: query ? undefined : 'none', rightSectionProps: query || !filterShortcut ? undefined : { style: { paddingInline: 8 } }, "data-mantine-stop-propagation": query || onFilterEscape ? 'true' : undefined, "data-testid": "entry-nav-filter" })), onChangedOnlyChange && (treeData.length > 0 || unsavedCount > 0) && (_jsx(SegmentedControl, { size: "xs", fullWidth: true, mb: 4, "aria-label": "Entries shown", value: changedOnly ? 'changed' : 'all', onChange: (value) => onChangedOnlyChange(value === 'changed'), data: [
+                    { value: 'all', label: 'All' },
+                    { value: 'changed', label: unsavedCount > 0 ? `Changed ${unsavedCount}` : 'Changed' },
+                ], "data-testid": "entry-nav-changed-filter" })), _jsxs(ScrollArea, { type: "auto", scrollbars: "y", offsetScrollbars: true, style: { flex: 1 }, children: [hiddenRootUnavailableRefs && hiddenRootUnavailableRefs.length > 0 && (_jsx(Box, { pt: "sm", children: _jsx(UnavailableTypeRow, { schemaRefs: hiddenRootUnavailableRefs }) })), hiddenRootAddRefused && (_jsx(Box, { pt: "sm", children: _jsx(AddRefusedRow, {}) })), treeData.length === 0 ? (branchNotAvailable ? (_jsx(BranchNotAvailableNotice, { onSwitchBranch: onSwitchBranch, "data-testid": "entry-nav-branch-not-available" })) : loading ? (_jsxs(Group, { gap: "xs", py: "sm", children: [_jsx(Loader, { size: "xs" }), _jsx(Text, { size: "xs", c: "dimmed", children: "Loading content\u2026" })] })) : changedNotice ? (changedNotice) : (_jsx(Text, { size: "xs", c: "dimmed", py: "sm", children: "No content" }))) : filteredTree.length === 0 && changedOnly ? (changedNotice) : filteredTree.length === 0 ? (_jsxs(Stack, { gap: 4, py: "sm", align: "flex-start", "data-testid": "entry-nav-filter-empty", children: [_jsxs(Text, { size: "sm", c: "dimmed", children: ["No entries match \u201C", query, "\u201D."] }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: clearFilter, children: "Clear search" })] })) : (_jsxs(Box, { py: "sm", ref: treeBoxRef, children: [_jsx(Tree, { data: filteredTree, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }), changedNotice] }))] })] }));
 };
 export default EntryNavigator;