canopycms 0.1.0 → 0.2.0-int.121

package/dist/editor/EntryNavigator.js

@@ -5,7 +5,10 @@ import { ActionIcon, Badge, Box, Button, CloseButton, Group, Highlight, Loader,
 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 { EDITOR_ACTIONS } from './copy.js';
 import { DestructiveMenuItem } from './components/DestructiveMenuItem.js';
+import { UnsavedMark } from './components/UnsavedMark.js';
+import { BranchRowLock } from './components/BranchRowLock.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 }) })] }));
@@ -44,7 +47,8 @@ const filterTree = (nodes, query) => {
     for (const node of nodes) {
         const label = String(node.label ?? '');
         if (node.nodeProps?.isEntry) {
-            if (matchesEntryQuery({ label, slug: node.nodeProps.slug }, query)) {
+            const { slug, title } = node.nodeProps;
+            if (matchesEntryQuery({ label, title, slug }, query)) {
                 kept.push(node);
             }
         }
@@ -71,14 +75,19 @@ const firstEntryPath = (nodes, query) => {
         }
     };
     walk(nodes);
-    const match = entries.find((node) => matchesEntryQuery({ label: String(node.label ?? ''), slug: node.nodeProps?.slug }, query));
+    const match = entries.find((node) => matchesEntryQuery({
+        label: String(node.label ?? ''),
+        title: node.nodeProps?.title,
+        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.
+ * 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.
  */
-const TruncatedLabel = ({ label, highlight, fw, }) => {
+const TruncatedLabel = ({ label, highlight = '', fw, size = 'sm', c }) => {
     const elementRef = useRef(null);
     const [truncated, setTruncated] = useState(false);
     const setElement = useCallback((node) => {
@@ -100,7 +109,7 @@ const TruncatedLabel = ({ label, highlight, fw, }) => {
             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 })) }));
+    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 })) }));
 };
 /** The keys Mantine's tree acts on, matched as it matches them, by `code`. */
 const TREE_KEYS = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Space']);
@@ -114,14 +123,8 @@ 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, }) => {
+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, }) => {
     // 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
@@ -147,6 +150,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             label: entry.label,
             nodeProps: {
                 status: entry.status,
+                title: entry.title,
+                missing: entry.missing,
+                noPage: entry.noPage,
                 isEntry: true,
                 entryPath: entry.path,
                 slug: entry.slug ?? lastSegment(entry.path),
@@ -168,6 +174,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                         label: entry?.label ?? col.label,
                         nodeProps: {
                             status: entry?.status,
+                            title: entry?.title,
+                            missing: entry?.missing,
+                            noPage: entry?.noPage,
                             isEntry: true,
                             entryPath: entry?.path,
                             collectionPath: col.path,
@@ -275,6 +284,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
             label: item.label,
             nodeProps: {
                 status: item.status,
+                title: item.title,
+                missing: item.missing,
+                noPage: item.noPage,
                 isEntry: true,
                 entryPath: item.path,
                 slug: item.slug ?? lastSegment(item.path),
@@ -463,15 +475,18 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
     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
-        // the entry-level ones above -- this removes the collection menu button
-        // entirely (hasCollectionMenu below) rather than leaving it enabled.
-        const onAdd = readOnly ? undefined : node.nodeProps?.onAdd;
-        const onEdit = readOnly ? undefined : node.nodeProps?.onEdit;
-        const onAddSubCollection = readOnly
-            ? undefined
-            : node.nodeProps?.onAddSubCollection;
-        const onDelete = readOnly ? undefined : node.nodeProps?.onDelete;
+        const entryMissing = !!node.nodeProps?.missing;
+        const entryNoPage = !!node.nodeProps?.noPage;
+        // 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;
+        const rawOnEdit = node.nodeProps?.onEdit;
+        const rawOnAddSubCollection = node.nodeProps?.onAddSubCollection;
+        const rawOnDelete = node.nodeProps?.onDelete;
+        const onAdd = readOnly ? undefined : rawOnAdd;
+        const onEdit = readOnly ? undefined : rawOnEdit;
+        const onAddSubCollection = readOnly ? undefined : rawOnAddSubCollection;
+        const onDelete = readOnly ? undefined : rawOnDelete;
         const entryPath = node.nodeProps?.entryPath;
         const contentId = node.nodeProps?.contentId;
         const parentCollectionPath = node.nodeProps?.parentCollectionPath;
@@ -481,7 +496,7 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         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.
+        // A read-only navigator already says writes are refused, so the add-refused line is not repeated.
         const addRefused = !readOnly && !!node.nodeProps?.addRefused;
         const isLeaf = !hasChildren || isEntry;
         const selected = node.value === selectedPath;
@@ -491,21 +506,36 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
         // Mantine only provides hasChildren=true if children.length > 0, but we want
         // collections to always be expandable
         const showChevron = hasChildren || Boolean(isCollection);
-        const canReorder = onReorderEntry && contentId && parentCollectionPath && typeof childIndex === 'number';
+        const reorderPosition = contentId && parentCollectionPath && typeof childIndex === 'number';
+        const canReorder = onReorderEntry && reorderPosition;
         const canMoveUp = canReorder && childIndex > 0;
         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);
         // 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;
+        // The same holds for an entry this user may not edit, on any branch: its own lock stays, since a
+        // path rule, not the branch, refuses it, and the branch lock leaves that row's slot empty.
+        const entryLocked = !!node.nodeProps?.itemReadOnly;
         const hasEntryMenu = isEntry &&
             entryPath &&
             !entryUnavailable &&
             !entryLocked &&
             (onDeleteEntry || onRenameEntry || onReorderEntry);
+        // The lock stands where the menu would, on exactly the rows that would otherwise have one. It
+        // is always shown: on hover alone, touch and keyboard users would see neither menu nor reason.
+        const wouldHaveCollectionMenu = isCollection &&
+            !!(rawOnAdd ||
+                rawOnEdit ||
+                rawOnAddSubCollection ||
+                rawOnDelete ||
+                (onReorderEntryProp && reorderPosition));
+        const wouldHaveEntryMenu = isEntry &&
+            !!entryPath &&
+            !entryUnavailable &&
+            !entryLocked &&
+            !!(onDeleteEntryProp || onRenameEntryProp || onReorderEntryProp);
+        const showsLockSlot = readOnly && (wouldHaveCollectionMenu || wouldHaveEntryMenu);
         const showEntryDirtyDot = isEntry && !!entryPath && !!dirtyPaths?.has(entryPath);
         const showCollectionDirtyDot = !isEntry && dirtyCollections.has(node.value);
         const adminItems = onAddSubCollection || onEdit || onDelete;
@@ -533,7 +563,9 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                                         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) => {
+                                    }, 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) => {
@@ -551,10 +583,13 @@ export const EntryNavigator = ({ items, collections, selectedPath, onSelect, onT
                                                     }, 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) => {
+                                                    }, 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.
+                                    _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: "Rename\u2026" })), onReorderEntry && contentId && parentCollectionPath && (_jsxs(_Fragment, { children: [_jsx(ReasonedMenuItem, { leftSection: _jsx(IconArrowUp, { size: 14 }), blockedReason: canMoveUp ? undefined : 'Already first', onClick: (event) => {
+                                                    }, "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) => {

package/dist/editor/FormHeader.d.ts

@@ -9,6 +9,7 @@ export interface OutlineNode {
     children?: OutlineNode[];
 }
 export interface FormHeaderProps {
+    /** The entry's name, for assistive tech only: the top bar's breadcrumb shows it. */
     title: string;
     /** The entry type's label, shown as a badge. */
     typeLabel?: string;
@@ -19,7 +20,7 @@ export interface FormHeaderProps {
     onExpandAll?: (expanded: boolean) => void;
 }
 /**
- * The form's sticky header: which entry this is, an outline of its fields to jump to, and
+ * The form's sticky header: the entry's type, 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>;

package/dist/editor/FormHeader.js

@@ -4,6 +4,7 @@ import { useRef, useState } from 'react';
 import { ActionIcon, Badge, Box, Button, Group, Popover, ScrollArea, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
 import { useIsomorphicEffect } from '@mantine/hooks';
 import { IconChevronsDown, IconChevronsUp, IconListTree } from '@tabler/icons-react';
+import { PANE_HEADER_HEIGHT } from './pane-header.js';
 /** The padding of the scroller the form sits in, which `shell/PaneLayout.tsx` sets; 0 where unset. */
 const PANE_PADDING = 'var(--canopy-form-pane-padding, 0px)';
 /** Below this header width "Outline" shows its icon alone, so the controls never clip. */
@@ -28,7 +29,7 @@ const OutlineList = ({ nodes, field, nested = false, onChoose }) => (_jsx("ul",
         return (_jsxs("li", { children: [node.path === undefined ? (_jsx(Text, { size: "xs", fw: 600, c: "dimmed", px: "xs", pt: 6, pb: 2, children: node.label })) : (_jsx(UnstyledButton, { onClick: () => onChoose(node.path), "aria-label": field ? `${field} › ${name}` : undefined, display: "block", w: "100%", py: 4, px: "xs", style: { borderRadius: 'var(--mantine-radius-sm)' }, className: "canopy-outline-item", "data-testid": "form-outline-item", children: _jsxs(Text, { size: "sm", truncate: "end", fw: field ? undefined : 500, children: [node.label, node.secondary && (_jsxs(Text, { span: true, c: "dimmed", size: "sm", children: [' ', node.secondary] }))] }) })), node.children && node.children.length > 0 && (_jsx(OutlineList, { nodes: node.children, field: node.path === undefined ? undefined : node.label, nested: true, onChoose: onChoose }))] }, node.path ?? `group-${idx}`));
     }) }));
 /**
- * The form's sticky header: which entry this is, an outline of its fields to jump to, and
+ * The form's sticky header: the entry's type, an outline of its fields to jump to, and
  * Expand all / Collapse all for every list and block field in it.
  */
 export const FormHeader = ({ title, typeLabel, outline, onSelect, onExpandAll, }) => {
@@ -63,12 +64,15 @@ export const FormHeader = ({ title, typeLabel, outline, onSelect, onExpandAll, }
             top: `calc(-1 * ${PANE_PADDING})`,
             zIndex: 3,
             margin: `calc(-1 * ${PANE_PADDING}) calc(-1 * ${PANE_PADDING}) 0`,
-            padding: `8px ${PANE_PADDING}`,
+            display: 'flex',
+            alignItems: 'center',
+            minHeight: PANE_HEADER_HEIGHT,
+            padding: `2px ${PANE_PADDING}`,
             backgroundColor: 'var(--canopy-surface-muted)',
             borderBottom: '1px solid var(--mantine-color-default-border)',
-        }, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", children: [_jsx(Text, { fw: 600, size: "sm", truncate: "end", style: { minWidth: 0 }, children: title }), typeLabel && (_jsx(Badge, { variant: "light", color: "gray", size: "sm", tt: "none", 
-                        // Gives way before the title in a narrow pane.
-                        style: { flexShrink: 2, minWidth: 0 }, children: typeLabel })), _jsxs(Group, { gap: 4, wrap: "nowrap", ml: "auto", style: { flexShrink: 0 }, children: [_jsxs(Popover, { opened: outlineOpen, onChange: setOutlineOpen, position: "bottom-end", width: 300, shadow: "md", withinPortal: true, 
+        }, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flex: 1, minWidth: 0 }, children: [_jsx(VisuallyHidden, { "data-testid": "form-header-title", children: title }), typeLabel && (_jsx(Badge, { variant: "light", color: "gray", size: "sm", tt: "none", 
+                        // Gives way before the controls in a narrow pane.
+                        style: { minWidth: 0 }, children: typeLabel })), _jsxs(Group, { gap: 4, wrap: "nowrap", ml: "auto", style: { flexShrink: 0 }, children: [_jsxs(Popover, { opened: outlineOpen, onChange: setOutlineOpen, position: "bottom-end", width: 300, shadow: "md", withinPortal: true, 
                                 // Focus enters the list; Escape hands it back to "Outline" (`closeOnEscape`). A chosen
                                 // field takes it instead, so closing returns it nowhere.
                                 trapFocus: true, returnFocus: false, children: [_jsx(Tooltip, { label: "Outline", disabled: !compact, opened: compact ? undefined : false, children: _jsx(Popover.Target, { children: _jsx(Button, { variant: "subtle", color: "gray", c: "dimmed", size: "compact-sm", px: compact ? 6 : undefined, leftSection: _jsx(IconListTree, { size: 14, "aria-hidden": true }), styles: compact ? { section: { marginInlineEnd: 0 } } : undefined, onClick: () => setOutlineOpen((open) => !open), "data-testid": "form-outline-button", children: compact ? _jsx(VisuallyHidden, { children: "Outline" }) : 'Outline' }) }) }), _jsx(Popover.Dropdown, { p: 4, children: _jsx(ScrollArea.Autosize, { mah: 400, type: "auto", children: _jsx("nav", { "aria-label": "Outline", "data-testid": "form-outline", children: _jsx(OutlineList, { nodes: outline, onChoose: (path) => {

package/dist/editor/FormRenderer.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { ContentFormat, EntrySchema, FieldConfig } from '../config/index.js';
 import type { CommentThread } from '../comment-store.js';
 import type { UserSearchResult } from '../auth/types.js';
-import type { FieldRemoval } from './undo-removal.js';
+import { type FieldRemoval } from './undo-removal.js';
 export type FormValue = Record<string, unknown>;
 export interface CustomFieldRenderProps {
     field: FieldConfig;
@@ -41,8 +41,13 @@ export interface FormRendererProps {
     format?: ContentFormat;
     /** Shows the value without accepting edits. Comments stay open. */
     readOnly?: boolean;
-    /** Told of each list item, block or image Remove takes out, or object Clear resets, for Undo. */
+    /** Told of each list item, block or image Remove takes out, for Undo. */
     onRemoved?: (removal: FieldRemoval) => void;
+    /**
+     * The entry's saved copy, which `value` is while there is no draft. A new one (a save, a reload)
+     * or showing it unchanged (a discard) ends every object's Undo clear.
+     */
+    savedValue?: FormValue;
     /** Resolves comment authors to names in field and entry threads; without it they show as ids. */
     onGetUserMetadata?: (userId: string) => Promise<UserSearchResult | null>;
     /**

package/dist/editor/FormRenderer.js

@@ -35,6 +35,7 @@ import { FormExpansionContext } from './fields/form-expansion.js';
 import { FormHeader } from './FormHeader.js';
 import { buildFormOutline, hasCollapsibleList } from './form-outline.js';
 import { findFieldTarget, focusFieldTarget } from './field-target.js';
+import { canRestoreRemoval, movedThreadsNote, openThreadsWithin, removalAnchors, restoreRemoval, } from './undo-removal.js';
 import { schemaLabel } from './schema-label.js';
 /**
  * How an Undo toast names a removed object-list item: by its title field or first non-empty
@@ -94,7 +95,7 @@ const FieldBoundary = ({ canopyPath, resetKey, update, build, fallback }) => {
             setGeneration(liveGeneration.current);
         }, fallback: fallback, children: _jsx(FieldControl, { build: () => build(guardedUpdate) }) }));
 };
-export const FormRenderer = ({ fields, value, onChange, customRenderers, branch = 'main', comments = [], currentEntryPath, currentUserId, canResolve = false, focusedFieldPath, highlightThreadId, onAddComment, onResolveThread, conflictNotice = false, fieldErrors, format, readOnly = false, onRemoved, onGetUserMetadata, header, notice, commentBlockedReason, removedItemFieldLabel, }) => {
+export const FormRenderer = ({ fields, value, onChange, customRenderers, branch = 'main', comments = [], currentEntryPath, currentUserId, canResolve = false, focusedFieldPath, highlightThreadId, onAddComment, onResolveThread, conflictNotice = false, fieldErrors, format, readOnly = false, onRemoved, savedValue, onGetUserMetadata, header, notice, commentBlockedReason, removedItemFieldLabel, }) => {
     const emit = readOnly ? noop : onChange;
     const formRef = useRef(null);
     const customTypes = new Set(Object.keys(customRenderers ?? {}));
@@ -109,6 +110,50 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
         return Object.keys(fieldErrors ?? {}).some((key) => key === row || key.startsWith(`${row}.`) || key.startsWith(`${row}[`));
     };
     const [formComments] = useState(createFormComments);
+    // An object's Undo clear lasts while it can put the object back where it was (checked by
+    // `canRestoreRemoval`), and ends with the entry, the branch, a save or a discard. It has no
+    // timer: it stays in the form for as long as the object is left unedited.
+    const [cleared, setCleared] = useState({
+        scope: boundaryResetKey,
+        savedValue,
+        byPath: {},
+    });
+    const clearScope = !readOnly && value !== savedValue ? boundaryResetKey : undefined;
+    const clearsLive = cleared.scope === clearScope && cleared.savedValue === savedValue;
+    const offeredClears = Object.fromEntries(Object.entries(clearsLive ? cleared.byPath : {}).filter(([, clear]) => canRestoreRemoval(fields, value, clear.removal)));
+    if (Object.keys(offeredClears).length !== Object.keys(cleared.byPath).length) {
+        setCleared({ scope: boundaryResetKey, savedValue, byPath: offeredClears });
+    }
+    const clearObject = (path, previous, label, update) => {
+        const removal = { kind: 'value', path, value: previous, label: `"${label}"` };
+        // Taken from the value this render shows, which the clear has not reached yet.
+        const anchors = removalAnchors(fields, value, removal);
+        // Open threads keyed to items inside it leave their fields for the entry's thread list.
+        const moved = currentEntryPath ? openThreadsWithin(comments, currentEntryPath, path) : 0;
+        update(undefined);
+        setCleared((prev) => ({
+            scope: boundaryResetKey,
+            savedValue,
+            byPath: {
+                ...(prev.scope === boundaryResetKey && prev.savedValue === savedValue ? prev.byPath : {}),
+                [normalizeCanopyPath(path)]: {
+                    removal: { ...removal, anchors },
+                    note: movedThreadsNote(moved),
+                },
+            },
+        }));
+    };
+    // Puts the object back into the value as it is now, so edits made elsewhere since are kept.
+    const undoClear = (canopyPath) => {
+        const clear = offeredClears[canopyPath];
+        const restored = clear ? restoreRemoval(fields, value, clear.removal) : undefined;
+        setCleared((prev) => {
+            const { [canopyPath]: _undone, ...rest } = prev.byPath;
+            return { ...prev, byPath: rest };
+        });
+        if (restored)
+            emit(restored);
+    };
     // The field last focused on one entry is never offered on the next.
     useEffect(() => formComments.noteFocus(undefined), [formComments, boundaryResetKey]);
     // Wraps the rendered control in an error boundary, and with an inline validation message
@@ -237,23 +282,13 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                         }) }, fieldKey(path)));
                 }
                 // A non-list object has no list item to remove, so its only way back to `undefined` is
-                // the Clear button (`onRemove`): shown only for an optional field that has a value.
-                // Reset to `undefined`, never `{}`, which `isEmptyForRequired` (entry-validator.ts) reads
-                // as present. The label is "Clear" (docs/ux-guidelines.md, Vocabulary), and it offers Undo.
+                // Clear (`onClear`): offered only for an optional field that has a value. Reset to
+                // `undefined`, never `{}`, which `isEmptyForRequired` (entry-validator.ts) reads as
+                // present. The label is "Clear" (docs/ux-guidelines.md, Vocabulary), and it offers Undo.
                 const hasValue = currentValue !== undefined && currentValue !== null;
                 const canClear = !readOnly && objectField.required !== true && hasValue;
-                return wrapWithComments(_jsx(ObjectField, { label: label, required: objectField.required, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onRemove: canClear
-                        ? () => {
-                            update(undefined);
-                            onRemoved?.({
-                                kind: 'value',
-                                path,
-                                value: currentValue,
-                                label: `"${label}"`,
-                                action: 'clear',
-                            });
-                        }
-                        : undefined, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
+                const clear = offeredClears[canopyPath];
+                return wrapWithComments(_jsx(ObjectField, { label: label, required: objectField.required, description: field.description, fields: objectField.fields, value: currentValue, onChange: (next) => update(next), onClear: canClear ? () => clearObject(path, currentValue, label, update) : undefined, onUndoClear: clear ? () => undoClear(canopyPath) : undefined, clearNote: clear?.note, renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path) }, fieldKey(path)));
             }
             case 'code':
                 return wrapWithComments(_jsx(CodeField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'string' ? currentValue : '', onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));

package/dist/editor/PreviewFrame.d.ts

@@ -4,13 +4,18 @@ export interface PreviewMarks {
     count: number;
     paths?: string[];
 }
+/**
+ * What a page's handshake says of the site's header and footer: its ready message says it renders
+ * them for `chrome=1` or that it does not, or no ready message came in `READY_TIMEOUT_MS`.
+ */
+export type SiteChromeSupport = 'supported' | 'unsupported' | 'unanswered';
 /**
  * Lightweight iframe wrapper to keep the preview in sync with form state.
  * It posts the latest draft data to the iframe after load and when data changes. A progress bar
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
- * to reload the preview.
+ * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }: {
+export declare const PreviewFrame: ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, busy, }: {
     src: string;
     path: string;
     data?: unknown;
@@ -37,4 +42,10 @@ export declare const PreviewFrame: ({ src, path, data, isLoading, className, sty
     iframeStyle?: CSSProperties;
     /** Replaces the chip's Retry, for a host whose own reload control remounts the frame. */
     onReload?: () => void;
+    /** Called with what the page's handshake says of the site's header and footer. */
+    onSiteChrome?: (support: SiteChromeSupport) => void;
+    /** A preview link's absolute URL, unfollowed; focus follows into the next page unless moved. */
+    onNavigate?: (href: string) => void;
+    /** The editor is loading the next page's data: this page stays in view, dimmed and inert. */
+    busy?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/editor/PreviewFrame.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { CANOPY_PREVIEW_ERROR, CANOPY_PREVIEW_HIGHLIGHT, CANOPY_PREVIEW_MARKS, CANOPY_PREVIEW_MESSAGE, CANOPY_PREVIEW_NAVIGATE, CANOPY_PREVIEW_READY, isOpaqueOrigin, MARK_REPORT_LIMITS, resolveMessageOrigin, } from './preview-bridge.js';
 /**
  * How long after the iframe's `load` the preview has to send its ready message before the frame
  * says live updates are off. Ready can also arrive before `load`, which waits for images too.
@@ -22,6 +22,21 @@ const visuallyHidden = {
 const isMarkPaths = (paths) => Array.isArray(paths) &&
     paths.length <= MARK_REPORT_LIMITS.paths &&
     paths.every((path) => typeof path === 'string' && path.length <= MARK_REPORT_LIMITS.pathLength);
+/** Only http(s) on the preview's origin, so the editor never opens a `javascript:` URL or another site. */
+const isPreviewNavigateMessage = (data, previewOrigin) => {
+    if (typeof data !== 'object' || data === null)
+        return false;
+    const { type, href } = data;
+    if (type !== CANOPY_PREVIEW_NAVIGATE || typeof href !== 'string')
+        return false;
+    try {
+        const url = new URL(href);
+        return (url.protocol === 'http:' || url.protocol === 'https:') && url.origin === previewOrigin;
+    }
+    catch {
+        return false;
+    }
+};
 const sendDraftUpdate = (iframe, message, targetOrigin) => {
     if (!iframe?.contentWindow)
         return;
@@ -34,9 +49,9 @@ const sendDraftUpdate = (iframe, message, targetOrigin) => {
  * Lightweight iframe wrapper to keep the preview in sync with form state.
  * It posts the latest draft data to the iframe after load and when data changes. A progress bar
  * runs until the preview's ready message arrives; when none does, a "Live updates off" chip offers
- * to reload the preview.
+ * to reload the preview. While `busy`, the page stays in view, dimmed and inert, under the bar.
  */
-export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, }) => {
+export const PreviewFrame = ({ src, path, data, isLoading, className, style, highlightEnabled, onPreviewError, onMarks, assetBase, iframeStyle, onReload, onSiteChrome, onNavigate, busy = false, }) => {
     const iframeRef = useRef(null);
     // Pin the preview origin from the src prop: outbound messages target it (never '*'),
     // and inbound messages must come from it. An iframe that navigates cross-origin
@@ -51,10 +66,15 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const [retries, setRetries] = useState(0);
     // A new src is a new page, with a handshake of its own.
     const [prevSrc, setPrevSrc] = useState(src);
+    // The frame a followed link was clicked in is replaced, which drops focus to the editor's body.
+    const [followingLink, setFollowingLink] = useState(false);
+    const [focusOnLoad, setFocusOnLoad] = useState(false);
     if (src !== prevSrc) {
         setPrevSrc(src);
         setHandshake('waiting');
         setLoaded(false);
+        setFocusOnLoad(followingLink);
+        setFollowingLink(false);
     }
     useEffect(() => {
         if (!loaded || handshake !== 'waiting')
@@ -71,6 +91,10 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const hasDraft = data !== undefined;
     const syncPending = hasDraft && handshake === 'waiting';
     const liveUpdatesOff = hasDraft && handshake === 'missing';
+    // React 18 has no `inert` prop, so it is set on the DOM.
+    useLayoutEffect(() => {
+        iframeRef.current?.toggleAttribute('inert', busy);
+    }, [busy, retries, src]);
     // Inject the progress bar keyframe animation once per page.
     useEffect(() => {
         const styleId = 'canopycms-preview-sync-style';
@@ -109,12 +133,31 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
     const postHighlightRef = useRef(postHighlight);
     const onPreviewErrorRef = useRef(onPreviewError);
     const onMarksRef = useRef(onMarks);
+    const onSiteChromeRef = useRef(onSiteChrome);
+    const onNavigateRef = useRef(onNavigate);
     useEffect(() => {
         postRef.current = post;
         postHighlightRef.current = postHighlight;
         onPreviewErrorRef.current = onPreviewError;
         onMarksRef.current = onMarks;
+        onSiteChromeRef.current = onSiteChrome;
+        onNavigateRef.current = onNavigate;
     });
+    useEffect(() => {
+        if (handshake === 'missing')
+            onSiteChromeRef.current?.('unanswered');
+    }, [handshake]);
+    // Focus the user puts anywhere before the next page loads is theirs to keep.
+    useEffect(() => {
+        if (!followingLink && !focusOnLoad)
+            return;
+        const keep = () => {
+            setFollowingLink(false);
+            setFocusOnLoad(false);
+        };
+        document.addEventListener('focusin', keep);
+        return () => document.removeEventListener('focusin', keep);
+    }, [followingLink, focusOnLoad]);
     useEffect(() => {
         post();
         // eslint-disable-next-line react-hooks/exhaustive-deps -- post is tracked via ref
@@ -138,6 +181,9 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                 postRef.current();
                 postHighlightRef.current();
                 setHandshake('ready');
+                onSiteChromeRef.current?.(event.data.siteChrome === true
+                    ? 'supported'
+                    : 'unsupported');
             }
             else if (type === CANOPY_PREVIEW_ERROR) {
                 const msg = event.data;
@@ -156,11 +202,15 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                     onMarksRef.current?.({ count, ...(isMarkPaths(paths) ? { paths } : {}) });
                 }
             }
+            else if (isPreviewNavigateMessage(event.data, previewOrigin)) {
+                onNavigateRef.current?.(event.data.href);
+                setFollowingLink(true);
+            }
         };
         window.addEventListener('message', handleMessage);
         return () => window.removeEventListener('message', handleMessage);
     }, [previewOrigin]);
-    return (_jsxs("div", { className: className, style: { position: 'relative', overflow: 'hidden', ...style }, children: [syncPending && (_jsx("div", { role: "progressbar", "aria-label": "Connecting to the preview", style: {
+    return (_jsxs("div", { className: className, "aria-busy": busy || undefined, style: { position: 'relative', overflow: 'hidden', ...style }, children: [(syncPending || busy) && (_jsx("div", { role: "progressbar", "aria-label": busy ? 'Loading the entry' : 'Connecting to the preview', style: {
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -207,9 +257,16 @@ export const PreviewFrame = ({ src, path, data, isLoading, className, style, hig
                     height: '100%',
                     border: 'none',
                     ...iframeStyle,
+                    // Eased, so a page that arrives at once barely dims.
+                    transition: 'opacity 150ms',
+                    ...(busy ? { opacity: 0.5 } : {}),
                 }, onLoad: () => {
                     post();
                     postHighlight();
                     setLoaded(true);
+                    if (focusOnLoad) {
+                        iframeRef.current?.focus();
+                        setFocusOnLoad(false);
+                    }
                 } }, `${retries}:${src}`)] }));
 };

package/dist/editor/PreviewPane.d.ts

@@ -5,9 +5,16 @@ import type { InexactMark } from './preview-marks.js';
 import type { PaneArrangement } from './shell/PaneLayout.js';
 import { type PreviewMount } from './preview-path.js';
 export interface PreviewPaneProps {
+    /** The open entry's page. */
     src: string;
     /** The page's path for the bridge and the toolbar; defaults to `src`. */
     path?: string;
+    /**
+     * The open entry's data is still loading, so `data` is not its draft yet. The page framed last
+     * stays in view, dimmed, until it arrives; with none framed yet, the viewport holds a skeleton.
+     * The toolbar already names the open entry.
+     */
+    pending?: boolean;
     /** Where the preview routes are mounted; the toolbar's path leaves out the `previewPrefix`. */
     mount?: PreviewMount;
     data?: unknown;
@@ -38,10 +45,19 @@ export interface PreviewPaneProps {
     onMaximizedChange?: (maximized: boolean) => void;
     /** A drag of the preview/form divider is under way: the preview shows its size over itself. */
     resizing?: boolean;
+    /** The site's header and footer are asked for, by `chrome=1` on a `previewPrefix` page. */
+    siteChrome?: boolean;
+    /**
+     * With it, the toolbar offers the site header and footer toggle once the page says it can show
+     * them, and whenever `siteChrome` is on, so it can always be turned off.
+     */
+    onSiteChromeChange?: (siteChrome: boolean) => void;
+    /** Called with the absolute URL of a link clicked in the preview; see `PreviewFrame`. */
+    onNavigate?: (href: string) => void;
 }
 /**
  * The preview region: a toolbar (path, width, reload, saved version) over a `PreviewFrame`. A
  * fixed width renders the iframe at that CSS width, so the site's own breakpoints apply, scaled
  * down to fit a narrower pane.
  */
-export declare const PreviewPane: ({ src, path, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PreviewPane: ({ src, path, pending, mount, previewWidth, onPreviewWidthChange, notice, onHighlightToggle, marksNothing, inexactMarks, showMarkDiagnostics, layout, maximized, onMaximizedChange, resizing, siteChrome, onSiteChromeChange, data, isLoading, onMarks, ...frameProps }: PreviewPaneProps) => import("react/jsx-runtime").JSX.Element;