canopycms 0.0.68-int.98 → 0.1.0

package/dist/editor/EntryNavigator.js

@@ -1,10 +1,127 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useEffect } from 'react';
-import { ActionIcon, Badge, Box, Group, Loader, Menu, ScrollArea, Stack, Text, Tooltip, Tree, useTree, rem, } from '@mantine/core';
-import { IconArrowDown, IconArrowUp, IconDots, IconEdit, IconFolderPlus, IconPlus, IconTrash, } from '@tabler/icons-react';
+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 { IconArrowDown, IconAlertTriangle, IconArrowUp, IconDots, IconEdit, IconFolderPlus, IconLock, IconPlus, IconSearch, IconTrash, } from '@tabler/icons-react';
 import { calculatePathToEntry } from './editor-utils.js';
-export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, }) => {
+import { matchesEntryQuery } from './entry-search.js';
+import { DestructiveMenuItem } from './components/DestructiveMenuItem.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 }) })] }));
+/** Where path rules refuse new entries, one line says so in place of the "…" menus they hide. */
+const AddRefusedRow = () => (_jsx(Text, { size: "xs", c: "dimmed", mt: 4, "data-testid": "add-refused-message", children: "You can't add entries here." }));
+const lastSegment = (path) => path.split('/').filter(Boolean).pop() ?? path;
+/** A collection's node value; a single-entry collection's node is its entry. */
+const collectionNodeValue = (nodes, path) => {
+    for (const node of nodes) {
+        if (node.value === `collection:${path}` || node.nodeProps?.collectionPath === path) {
+            return node.value;
+        }
+        const inner = node.children && collectionNodeValue(node.children, path);
+        if (inner)
+            return inner;
+    }
+    return undefined;
+};
+/** The collection values below `nodes` that have children, as an all-expanded state. */
+const expandedStateFor = (nodes, acc = {}) => {
+    for (const node of nodes) {
+        if (node.children?.length) {
+            acc[node.value] = true;
+            expandedStateFor(node.children, 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.
+ */
+const filterTree = (nodes, query) => {
+    const kept = [];
+    for (const node of nodes) {
+        const label = String(node.label ?? '');
+        if (node.nodeProps?.isEntry) {
+            if (matchesEntryQuery({ label, slug: node.nodeProps.slug }, query)) {
+                kept.push(node);
+            }
+        }
+        else if (matchesEntryQuery({ label }, query)) {
+            kept.push(node);
+        }
+        else {
+            const children = filterTree(node.children ?? [], query);
+            if (children.length > 0)
+                kept.push({ ...node, children });
+        }
+    }
+    return kept;
+};
+/** The first entry in tree order that matches `query`, else the first entry of any kind. */
+const firstEntryPath = (nodes, query) => {
+    const entries = [];
+    const walk = (list) => {
+        for (const node of list) {
+            if (node.nodeProps?.isEntry)
+                entries.push(node);
+            else
+                walk(node.children ?? []);
+        }
+    };
+    walk(nodes);
+    const match = entries.find((node) => matchesEntryQuery({ label: String(node.label ?? ''), slug: node.nodeProps?.slug }, query));
+    return (match ?? entries[0])?.value;
+};
+/**
+ * A row's title, 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.
+ */
+const TruncatedLabel = ({ label, highlight, fw, }) => {
+    const elementRef = useRef(null);
+    const [truncated, setTruncated] = useState(false);
+    const setElement = useCallback((node) => {
+        elementRef.current = node;
+    }, []);
+    useEffect(() => {
+        const row = elementRef.current?.closest('[data-nav-row]');
+        if (!row)
+            return;
+        // Read at measure time: the label swaps between Text and Highlight as a filter starts and stops.
+        const measure = () => {
+            const element = elementRef.current;
+            setTruncated(!!element && element.scrollWidth > element.clientWidth);
+        };
+        row.addEventListener('mouseenter', measure);
+        row.addEventListener('focusin', measure);
+        return () => {
+            row.removeEventListener('mouseenter', measure);
+            row.removeEventListener('focusin', measure);
+        };
+    }, []);
+    return (_jsx(Tooltip, { label: label, openDelay: 400, withinPortal: true, disabled: !truncated, children: highlight ? (_jsx(Highlight, { ref: setElement, highlight: highlight, size: "sm", fw: fw, truncate: "end", style: { minWidth: 0 }, children: label })) : (_jsx(Text, { ref: setElement, size: "sm", fw: fw, truncate: "end", style: { minWidth: 0 }, children: label })) }));
+};
+/** The keys Mantine's tree acts on, matched as it matches them, by `code`. */
+const TREE_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space']);
+/**
+ * A row menu's dropdown is portaled, but React still bubbles its key events to the row, where the
+ * tree's arrow keys would take focus out of the open menu. Only those keys stop: React's
+ * stopPropagation stops the native event too, and every other key must still reach the document,
+ * where the Mod+P shortcut and the focus traps' Tab handling listen.
+ */
+const stopTreeKeys = (event) => {
+    if (TREE_KEYS.has(event.nativeEvent.code))
+        event.stopPropagation();
+};
+const UnsavedDot = ({ label }) => (_jsx(Tooltip, { label: label, withinPortal: true, children: _jsx(Box, { component: "span", role: "img", "aria-label": label, "data-testid": "unsaved-dot", style: {
+            flexShrink: 0,
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: 'var(--mantine-color-brand-6)',
+        } }) }));
+export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onTreeControllerReady, expandedStateRef, onExpandedStateChange, onDeleteEntry: onDeleteEntryProp, onRenameEntry: onRenameEntryProp, onReorderEntry: onReorderEntryProp, hiddenRootPath, loading, readOnly = false, dirtyPaths, revealCollection, onRevealed, }) => {
     // 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
@@ -16,7 +133,32 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     const hasScrolledRef = useRef(false);
     // Track expanded state synchronously to avoid race conditions on unmount
     const localExpandedStateRef = useRef(expandedStateRef?.current ?? {});
+    const [query, setQuery] = useState('');
+    const filterInputRef = useRef(null);
+    const filtering = query.trim() !== '';
+    // Read from the tree's expand/collapse callbacks, which fire from state updaters.
+    const filteringRef = useRef(false);
+    useEffect(() => {
+        filteringRef.current = filtering;
+    }, [filtering]);
     const treeData = useMemo(() => {
+        const entryNode = (entry, parent, childIndex, totalChildren) => ({
+            value: entry.path,
+            label: entry.label,
+            nodeProps: {
+                status: entry.status,
+                isEntry: true,
+                entryPath: entry.path,
+                slug: entry.slug ?? lastSegment(entry.path),
+                contentId: entry.contentId,
+                conflictNotice: entry.conflictNotice,
+                unavailable: entry.unavailable,
+                itemReadOnly: entry.readOnly,
+                parentCollectionPath: parent.path,
+                childIndex,
+                totalChildrenCount: totalChildren,
+            },
+        });
         if (collections?.length) {
             const toTree = (col) => {
                 if (col.type === 'entry') {
@@ -28,6 +170,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                             status: entry?.status,
                             isEntry: true,
                             entryPath: entry?.path,
+                            collectionPath: col.path,
+                            slug: entry ? (entry.slug ?? lastSegment(entry.path)) : undefined,
+                            itemReadOnly: entry?.readOnly,
                         },
                         children: [],
                     };
@@ -38,51 +183,39 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                 const order = col.order ?? [];
                 const entryNodesByContentId = new Map();
                 entries.forEach((entry) => {
-                    const node = {
-                        value: entry.path,
-                        label: entry.label,
-                        nodeProps: {
-                            status: entry.status,
-                            isEntry: true,
-                            entryPath: entry.path,
-                            contentId: entry.contentId,
-                            conflictNotice: entry.conflictNotice,
-                            parentCollectionPath: col.path,
-                            childIndex: 0, // Will be set below
-                            totalChildrenCount: totalChildren,
-                        },
-                    };
                     if (entry.contentId) {
-                        entryNodesByContentId.set(entry.contentId, node);
+                        entryNodesByContentId.set(entry.contentId, entryNode(entry, col, 0, totalChildren));
                     }
                 });
-                const childNodesByContentId = new Map();
-                childCollections.forEach((child) => {
+                const withPosition = (child, childIndex) => {
                     const childTree = toTree(child);
-                    const node = {
+                    return {
                         ...childTree,
                         nodeProps: {
                             ...childTree.nodeProps,
                             contentId: child.contentId,
                             parentCollectionPath: col.path,
-                            childIndex: 0, // Will be set below
+                            childIndex,
                             totalChildrenCount: totalChildren,
                         },
                     };
+                };
+                const childNodesByContentId = new Map();
+                childCollections.forEach((child) => {
                     if (child.contentId) {
-                        childNodesByContentId.set(child.contentId, node);
+                        childNodesByContentId.set(child.contentId, withPosition(child, 0));
                     }
                 });
                 const allChildren = [];
                 const usedContentIds = new Set();
                 for (const contentId of order) {
-                    const entryNode = entryNodesByContentId.get(contentId);
-                    if (entryNode) {
-                        entryNode.nodeProps = {
-                            ...entryNode.nodeProps,
+                    const orderedEntry = entryNodesByContentId.get(contentId);
+                    if (orderedEntry) {
+                        orderedEntry.nodeProps = {
+                            ...orderedEntry.nodeProps,
                             childIndex: allChildren.length,
                         };
-                        allChildren.push(entryNode);
+                        allChildren.push(orderedEntry);
                         usedContentIds.add(contentId);
                         continue;
                     }
@@ -100,38 +233,13 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                     .filter((e) => !e.contentId || !usedContentIds.has(e.contentId))
                     .sort((a, b) => (a.label ?? '').localeCompare(b.label ?? ''));
                 for (const entry of unorderedEntries) {
-                    const node = {
-                        value: entry.path,
-                        label: entry.label,
-                        nodeProps: {
-                            status: entry.status,
-                            isEntry: true,
-                            entryPath: entry.path,
-                            contentId: entry.contentId,
-                            conflictNotice: entry.conflictNotice,
-                            parentCollectionPath: col.path,
-                            childIndex: allChildren.length,
-                            totalChildrenCount: totalChildren,
-                        },
-                    };
-                    allChildren.push(node);
+                    allChildren.push(entryNode(entry, col, allChildren.length, totalChildren));
                 }
                 const unorderedChildren = childCollections
                     .filter((c) => !c.contentId || !usedContentIds.has(c.contentId))
                     .sort((a, b) => (a.label ?? '').localeCompare(b.label ?? ''));
                 for (const child of unorderedChildren) {
-                    const childTree = toTree(child);
-                    const node = {
-                        ...childTree,
-                        nodeProps: {
-                            ...childTree.nodeProps,
-                            contentId: child.contentId,
-                            parentCollectionPath: col.path,
-                            childIndex: allChildren.length,
-                            totalChildrenCount: totalChildren,
-                        },
-                    };
-                    allChildren.push(node);
+                    allChildren.push(withPosition(child, allChildren.length));
                 }
                 // Collections should always have children array (even if empty) to show chevron
                 // This matches standard file tree UI behavior where folders always show expand/collapse
@@ -143,6 +251,8 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                         type: col.type,
                         collectionPath: col.path,
                         conflictNotice: col.conflictNotice,
+                        unavailableSchemaRefs: col.unavailableSchemaRefs,
+                        addRefused: col.addRefused,
                         onAdd: col.onAdd,
                         onEdit: col.onEdit,
                         onAddSubCollection: col.onAddSubCollection,
@@ -163,12 +273,56 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         return flatItems.map((item) => ({
             value: item.path,
             label: item.label,
-            nodeProps: { status: item.status, isEntry: true, entryPath: item.path },
+            nodeProps: {
+                status: item.status,
+                isEntry: true,
+                entryPath: item.path,
+                slug: item.slug ?? lastSegment(item.path),
+                itemReadOnly: item.readOnly,
+            },
         }));
     }, [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]);
+    // 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(() => {
+        const dirty = new Set();
+        if (!dirtyPaths?.size)
+            return dirty;
+        const walk = (nodes) => {
+            let any = false;
+            for (const node of nodes) {
+                if (node.nodeProps?.isEntry) {
+                    if (dirtyPaths.has(node.value))
+                        any = true;
+                }
+                else if (walk(node.children ?? [])) {
+                    dirty.add(node.value);
+                    any = true;
+                }
+            }
+            return any;
+        };
+        walk(treeData);
+        return dirty;
+    }, [treeData, dirtyPaths]);
+    // The hidden root's own row never renders, so its message is shown once above the tree.
+    const hiddenRootAddRefused = !readOnly &&
+        !!hiddenRootPath &&
+        collections?.length === 1 &&
+        collections[0].path === hiddenRootPath &&
+        !!collections[0].addRefused;
+    const hiddenRootUnavailableRefs = hiddenRootPath && collections?.length === 1 && collections[0].path === hiddenRootPath
+        ? collections[0].unavailableSchemaRefs
+        : undefined;
     const tree = useTree({
         initialExpandedState: expandedStateRef?.current ?? {},
+        // A filter expands and collapses nodes only for as long as it is on, so none of it is saved.
         onNodeExpand: (value) => {
+            if (filteringRef.current)
+                return;
             localExpandedStateRef.current = {
                 ...localExpandedStateRef.current,
                 [value]: true,
@@ -176,6 +330,8 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             onExpandedStateChange?.(localExpandedStateRef.current);
         },
         onNodeCollapse: (value) => {
+            if (filteringRef.current)
+                return;
             localExpandedStateRef.current = {
                 ...localExpandedStateRef.current,
                 [value]: false,
@@ -194,8 +350,26 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // 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);
     useEffect(() => {
-        if (!selectedPath || !treeData)
+        if (filtering) {
+            expandedBeforeFilterRef.current ??= tree.expandedState;
+            tree.setExpandedState(expandedStateFor(filteredTree));
+        }
+        else if (expandedBeforeFilterRef.current) {
+            // Plus the ancestors of an entry picked while filtering, so it stays in view.
+            tree.setExpandedState({
+                ...expandedBeforeFilterRef.current,
+                ...calculatePathToEntry(selectedPath, treeData),
+            });
+            expandedBeforeFilterRef.current = null;
+        }
+        // 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]);
+    useEffect(() => {
+        if (!selectedPath || !treeData || filtering)
             return;
         const savedState = expandedStateRef?.current ?? {};
         const pathToEntry = calculatePathToEntry(selectedPath, treeData);
@@ -228,7 +402,65 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     useEffect(() => {
         hasScrolledRef.current = false;
     }, []);
-    const Chevron = ({ expanded, visible }) => (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", style: { opacity: visible ? 0.9 : 0 }, children: expanded ? (_jsx("path", { d: "M7.41 8.59 12 13.17 16.59 8.59 18 10l-6 6-6-6z" })) : (_jsx("path", { d: "M10 6 8.59 7.41 13.17 12 8.59 16.59 10 18l6-6z" })) }));
+    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)
+            return;
+        const served = () => {
+            servedRevealRef.current = revealCollection.seq;
+            onRevealed?.();
+        };
+        if (query) {
+            setQuery('');
+            return;
+        }
+        const value = collectionNodeValue(treeData, revealCollection.path);
+        if (!value) {
+            served();
+            return;
+        }
+        const wanted = { ...calculatePathToEntry(value, treeData), [value]: true };
+        if (Object.keys(wanted).some((key) => !tree.expandedState[key])) {
+            const next = { ...tree.expandedState, ...wanted };
+            tree.setExpandedState(next);
+            localExpandedStateRef.current = next;
+            onExpandedStateChange?.(next);
+            return;
+        }
+        const frame = requestAnimationFrame(() => {
+            const row = Array.from(treeBoxRef.current?.querySelectorAll('[role="treeitem"]') ?? []).find((item) => item.dataset.value === value);
+            row?.scrollIntoView({ block: 'nearest' });
+            row?.focus();
+            served();
+        });
+        return () => cancelAnimationFrame(frame);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `tree` and the callbacks are fresh each render
+    }, [revealCollection, treeData, query, tree.expandedState]);
+    const clearFilter = () => {
+        setQuery('');
+        filterInputRef.current?.focus();
+    };
+    const handleFilterKeyDown = (event) => {
+        // 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.
+            event.preventDefault();
+            event.stopPropagation();
+            setQuery('');
+        }
+        else if (event.key === 'Enter' && filtering) {
+            const path = firstEntryPath(filteredTree, query);
+            if (path) {
+                event.preventDefault();
+                onSelect(path);
+            }
+        }
+    };
+    const Chevron = ({ expanded, visible }) => (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", style: { flexShrink: 0, opacity: visible ? 0.9 : 0 }, children: expanded ? (_jsx("path", { d: "M7.41 8.59 12 13.17 16.59 8.59 18 10l-6 6-6-6z" })) : (_jsx("path", { d: "M10 6 8.59 7.41 13.17 12 8.59 16.59 10 18l6-6z" })) }));
     const renderNode = ({ node, elementProps, hasChildren, expanded, level, }) => {
         const status = node.nodeProps?.status;
         // Collection-level mutation callbacks are nulled when readOnly, same as
@@ -248,8 +480,13 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         const isCollection = node.nodeProps?.isCollection;
         const isEntry = node.nodeProps?.isEntry;
         const conflictNotice = node.nodeProps?.conflictNotice;
+        const unavailableSchemaRefs = node.nodeProps?.unavailableSchemaRefs;
+        // A read-only navigator already says so once, in the branch banner.
+        const addRefused = !readOnly && !!node.nodeProps?.addRefused;
         const isLeaf = !hasChildren || isEntry;
         const selected = node.value === selectedPath;
+        const label = String(node.label ?? '');
+        const testIdSuffix = label.toLowerCase().replace(/\s+/g, '-');
         // For collections, always show chevron (even if empty) to match standard tree UI
         // Mantine only provides hasChildren=true if children.length > 0, but we want
         // collections to always be expandable
@@ -259,10 +496,21 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         const canMoveDown = canReorder && typeof totalChildrenCount === 'number' && childIndex < totalChildrenCount - 1;
         // Collections show menu for add/edit/delete actions OR for reordering (subcollections)
         const hasCollectionMenu = isCollection && (onAdd || onEdit || onAddSubCollection || onDelete || canReorder);
-        const hasEntryMenu = isEntry && entryPath && (onDeleteEntry || onRenameEntry || onReorderEntry);
-        return (_jsx(Box, { ...elementProps, ref: selected ? selectedNodeRef : undefined, "data-testid": `entry-nav-item-${String(node.label ?? '')
-                .toLowerCase()
-                .replace(/\s+/g, '-')}`, onClick: (event) => {
+        // An unavailable entry cannot be written, so its menu (rename, delete, reorder) is not offered.
+        const entryUnavailable = node.nodeProps?.unavailable;
+        // The same holds for an entry this user may not edit. A read-only navigator already says so
+        // once, in the branch banner, so only a lone read-only entry gets its own lock.
+        const entryLocked = !readOnly && !!node.nodeProps?.itemReadOnly;
+        const hasEntryMenu = isEntry &&
+            entryPath &&
+            !entryUnavailable &&
+            !entryLocked &&
+            (onDeleteEntry || onRenameEntry || onReorderEntry);
+        const showEntryDirtyDot = isEntry && !!entryPath && !!dirtyPaths?.has(entryPath);
+        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-testid": `entry-nav-item-${testIdSuffix}`, onClick: (event) => {
                 elementProps.onClick(event);
                 if (isLeaf && isEntry) {
                     onSelect(node.value);
@@ -274,49 +522,49 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                 paddingInline: 10,
                 paddingBlock: 6,
                 paddingLeft: `calc(${rem(8)} + ${rem(level * 12)})`,
-                backgroundColor: selected ? 'var(--mantine-color-brand-0)' : undefined,
-                border: selected ? '1px solid var(--mantine-color-brand-3)' : '1px solid transparent',
+                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", children: [_jsxs(Group, { gap: 6, wrap: "nowrap", children: [_jsx(Box, { w: 18, h: 18, style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                }, children: _jsx(Chevron, { expanded: expanded, visible: showChevron }) }), _jsx(Text, { size: "sm", fw: selected ? 600 : 500, truncate: "end", children: node.label }), status && (_jsx(Badge, { size: "xs", variant: "light", color: "gray", children: status })), 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", children: "conflict" }) }))] }), _jsxs(Group, { gap: 4, wrap: "nowrap", 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-${String(node.label ?? '')
-                                                .toLowerCase()
-                                                .replace(/\s+/g, '-')}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { children: [canReorder && (_jsxs(_Fragment, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconArrowUp, { size: 14 }), disabled: !canMoveUp, onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            onReorderEntry?.(parentCollectionPath, contentId, 'up');
-                                                        }, children: "Move Up" }), _jsx(Menu.Item, { leftSection: _jsx(IconArrowDown, { size: 14 }), disabled: !canMoveDown, onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            onReorderEntry?.(parentCollectionPath, contentId, 'down');
-                                                        }, children: "Move Down" }), (onAdd || onAddSubCollection || onEdit || onDelete) && _jsx(Menu.Divider, {})] })), onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    onAdd();
-                                                }, "data-testid": "add-entry-menu-item", children: "Add Entry" })), onAddSubCollection && (_jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    onAddSubCollection();
-                                                }, children: "Add Sub-Collection" })), (onAdd || onAddSubCollection) && (onEdit || onDelete) && _jsx(Menu.Divider, {}), onEdit && (_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    onEdit();
-                                                }, children: "Edit Collection" })), onDelete && (_jsx(Menu.Item, { leftSection: _jsx(IconTrash, { size: 14 }), color: "red", onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    onDelete();
-                                                }, children: "Delete Collection" }))] })] })), hasEntryMenu && (_jsxs(Menu, { shadow: "md", width: 150, 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-${String(node.label ?? '')
-                                                .toLowerCase()
-                                                .replace(/\s+/g, '-')}`, children: _jsx(IconDots, { size: 14 }) }) }), _jsxs(Menu.Dropdown, { children: [onReorderEntry && contentId && parentCollectionPath && (_jsxs(_Fragment, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconArrowUp, { size: 14 }), disabled: !canMoveUp, onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            onReorderEntry(parentCollectionPath, contentId, 'up');
-                                                        }, children: "Move Up" }), _jsx(Menu.Item, { leftSection: _jsx(IconArrowDown, { size: 14 }), disabled: !canMoveDown, onClick: (event) => {
-                                                            event.stopPropagation();
-                                                            onReorderEntry(parentCollectionPath, contentId, 'down');
-                                                        }, children: "Move Down" }), (onRenameEntry || onDeleteEntry) && _jsx(Menu.Divider, {})] })), onRenameEntry && (_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    onRenameEntry(entryPath);
-                                                }, "data-testid": "rename-entry-menu-item", children: "Rename Entry" })), onDeleteEntry && (_jsx(Menu.Item, { leftSection: _jsx(IconTrash, { size: 14 }), color: "red", onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    onDeleteEntry(entryPath);
-                                                }, "data-testid": "delete-entry-menu-item", children: "Delete Entry" }))] })] }))] })] }) }));
+            }, 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 }) }), _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" }), status && (_jsx(Badge, { size: "xs", variant: "light", color: "gray", style: { flexShrink: 0, maxWidth: 96 }, children: status })), 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 }) }) }))] }), _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" }))] })] })), 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 && (_jsx(Menu.Item, { leftSection: _jsx(IconEdit, { size: 14 }), onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        onRenameEntry(entryPath);
+                                                    }, "data-testid": "rename-entry-menu-item", children: "Rename\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(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "entry-navigator", children: _jsx(ScrollArea, { type: "auto", offsetScrollbars: true, style: { flex: 1 }, children: 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" }))) : (_jsx(Box, { py: "sm", children: _jsx(Tree, { data: treeData, tree: tree, renderNode: renderNode, selectOnClick: false, levelOffset: "sm" }) })) }) }));
+    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" }) }))] })] }));
 };
 export default EntryNavigator;

package/dist/editor/FormHeader.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/** A field in the outline, holding its rows, or an inline group holding its fields. */
+export interface OutlineNode {
+    label: string;
+    /** The canopy path to focus; absent for an inline group, which is not a field. */
+    path?: string;
+    /** A row's second value, shown dimmed beside its label. */
+    secondary?: string;
+    children?: OutlineNode[];
+}
+export interface FormHeaderProps {
+    title: string;
+    /** The entry type's label, shown as a badge. */
+    typeLabel?: string;
+    outline: OutlineNode[];
+    /** Scrolls to and focuses the field at `path`. */
+    onSelect: (path: string) => void;
+    /** Set when the form has a list or block field, so expanding and collapsing has a target. */
+    onExpandAll?: (expanded: boolean) => void;
+}
+/**
+ * The form's sticky header: which entry this is, an outline of its fields to jump to, and
+ * Expand all / Collapse all for every list and block field in it.
+ */
+export declare const FormHeader: React.FC<FormHeaderProps>;