canopycms 0.1.0 → 0.2.0-int.119

package/dist/editor/Editor.js

@@ -23,7 +23,7 @@ import { SystemHealthPanel } from './admin/SystemHealthPanel.js';
 // Import directly from helpers to avoid server-only code in authorization barrel
 import { isAdmin, isPrivileged, isReviewer } from '../authorization/helpers.js';
 import { fieldBreadcrumb } from './field-breadcrumb.js';
-import { buildPreviewRoute, buildPreviewSrc, buildCollectionLabels, entryStatusLabel, entryTypeLabel, buildBreadcrumbSegments, } from './editor-utils.js';
+import { buildPreviewRoute, buildPreviewSrc, buildCollectionLabels, entryStatusLabel, entryTypeLabel, entryTypeLine, buildBreadcrumbSegments, entryNameSource, } from './editor-utils.js';
 import { useEditorLayout, useDraftManager, useEntryManager, useGroupManager, usePermissionManager, useCommentSystem, useBranchManager, useUserContext, useSchemaManager, } from './hooks/index.js';
 import { useBranchActions } from './hooks/useBranchActions.js';
 import { CONTENT_PANEL_WIDTH_MAX, CONTENT_PANEL_WIDTH_MIN, editorLayoutStorageKey, } from './hooks/useEditorLayout.js';
@@ -52,7 +52,7 @@ import { hideCollectionOutcomeUnknown } from './hooks/useSchemaManager.js';
 import { AssetContextProvider, SiteMdxAllowContext, authenticatedAssetBase, useApiClient, } from './context/index.js';
 import { EntryLinkContext } from './fields/entry-link/index.js';
 import { MediaLibrary } from './media/MediaLibrary.js';
-import { removalAnchors, restoreRemoval, openThreadsWithin, restoredFieldPath, } from './undo-removal.js';
+import { removalAnchors, restoreRemoval, movedThreadsNote, openThreadsWithin, restoredFieldPath, } from './undo-removal.js';
 import { formatCanopyPath } from './canopy-path.js';
 import { itemKeysOnPath, resolveThreadPath, withItemKeys } from '../item-keys.js';
 import { ENTRY_NOT_LOADED_COMMENT_MESSAGE, NEW_ITEM_COMMENT_MESSAGE, } from './comments/item-anchor-copy.js';
@@ -122,7 +122,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const [deleteInProgress, setDeleteInProgress] = useState(false);
     // A rename or delete asked for from the top bar's entry menu, whose item is gone once it acts.
     const [entryChangeFromMenu, setEntryChangeFromMenu] = useState(false);
-    const allContentCrumbRef = useRef(null);
+    const contentToggleRef = useRef(null);
     // Draft compile/render error reported by the preview page (null = renders cleanly)
     const [previewError, setPreviewError] = useState(null);
     const apiClient = useApiClient();
@@ -140,12 +140,13 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const commentUserId = userContext?.userId ?? currentUser;
     // Below 64em (1024px) the editor starts stacked and the content panel never docks.
     const wideWindow = useMediaQuery('(min-width: 64em)', true, { getInitialValueInEffect: false }) !== false;
-    const { loaded: layoutLoaded, layout, setLayout, highlightEnabled, setHighlightEnabled, sideSplitPercent, stackedSplitPercent, setSplitPercent, previewWidth, setPreviewWidth, contentPanelOpen, setContentPanelOpen, contentPanelWidth, setContentPanelWidth, } = useEditorLayout({
+    const { loaded: layoutLoaded, layout, setLayout, highlightEnabled, setHighlightEnabled, sideSplitPercent, stackedSplitPercent, setSplitPercent, previewWidth, setPreviewWidth, siteChrome, setSiteChrome, contentPanelOpen, setContentPanelOpen, contentPanelWidth, setContentPanelWidth, } = useEditorLayout({
         storageKey: editorLayoutStorageKey(basePath),
         defaultLayout: wideWindow ? 'side' : 'stacked',
     });
-    // In the stacked layout the content panel lays over the form only, so the preview stays in view.
-    const contentPanelDocked = layout === 'side' && wideWindow;
+    // A wide window docks the content panel: beside the panes side by side, and beside the form row
+    // only when stacked, so the preview keeps its full width. A narrow one lays it over the form.
+    const contentPanelDocked = wideWindow;
     // Comments state (shared between useCommentSystem and useBranchManager)
     const [commentsForBranchSummaries, setCommentsForBranchSummaries] = useState([]);
     // 1. Branch manager (provides branchNameState, no dependencies)
@@ -188,6 +189,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             contentRoot,
             basePath,
         }),
+        resolvePreviewRoute: (entry) => buildPreviewRoute(entry, { previewBaseByCollection, contentRoot }),
         setBusy: setEntriesLoading,
     });
     // The content overlay and a maximized preview hide the form; `navigatorOpen` is only the
@@ -204,8 +206,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         setNavigatorOpen(false);
     };
     // An open overlay docks open, as the URL's ask for no entry does at load; `navigatorOpen` is only
-    // the overlay's, so a docked panel never resurfaces as one. Waits for the stored layout, whose
-    // arrival could otherwise dock an overlay the stacked layout keeps.
+    // the overlay's, so a docked panel never resurfaces as one. Waits for the stored preferences, so
+    // the open state it sets lands on them, not on the defaults they replace.
     useEffect(() => {
         if (layoutLoaded && contentPanelDocked && navigatorOpen) {
             setContentPanelOpen(true);
@@ -305,7 +307,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     contentReadOnlyRef.current = contentReadOnly;
     // Undo for a form Remove: a toast whose Undo puts the item back into the entry's draft as it
     // is then, through a functional update, so edits made since are kept. It acts only on the
-    // branch and entry it was raised for, and its toast closes when either changes.
+    // branch and entry it was raised for, and its toast closes when either changes. An object's
+    // Clear offers its Undo in the form instead (FormRenderer), which a save ends via `savedValue`.
     const loadedValuesRef = useRef(loadedValues);
     loadedValuesRef.current = loadedValues;
     const draftsRef = useRef(drafts);
@@ -332,7 +335,6 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             ...removal,
             anchors: displayValue ? removalAnchors(fields, displayValue, removal) : undefined,
         };
-        const doing = removal.action === 'clear' ? 'clearing' : 'removing';
         // Open threads keyed inside what was removed leave their fields for the entry's thread list.
         const movedThreads = currentEntry
             ? openThreadsWithin(displayComments, currentEntry.path, removal.kind === 'list-item' ? [...removal.listPath, removal.index] : removal.path)
@@ -350,7 +352,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             undoToastsRef.current.delete(id);
             if (!open) {
                 notifications.show({
-                    message: `Too late to undo ${doing} ${removal.label}.`,
+                    message: `Too late to undo removing ${removal.label}.`,
                     color: 'yellow',
                 });
                 return;
@@ -363,7 +365,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             const now = draftsRef.current[contentId] ?? loadedValuesRef.current[contentId];
             if (!now || !restoreRemoval(fields, now, anchored)) {
                 notifications.show({
-                    message: `Couldn't undo ${doing} ${removal.label}: that part of the entry has changed. ${removal.action === 'clear' ? 'Fill it in again' : 'Add it again'} if you still need it.`,
+                    message: `Couldn't undo removing ${removal.label}: that part of the entry has changed. Add it again if you still need it.`,
                     color: 'yellow',
                 });
                 return;
@@ -385,9 +387,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         undoToastsRef.current.set(id, contentId);
         const toast = {
             id,
-            message: (_jsx(UndoToastMessage, { label: removal.label, action: removal.action, note: movedThreads > 0
-                    ? `Its ${movedThreads === 1 ? 'comment thread' : `${movedThreads} comment threads`} moved to "Comment on this entry".`
-                    : undefined, onUndo: undo, onHold: () => notifications.update({ ...toast, autoClose: false }), onRelease: () => notifications.update(toast) })),
+            message: (_jsx(UndoToastMessage, { label: removal.label, note: movedThreadsNote(movedThreads), onUndo: undo, onHold: () => notifications.update({ ...toast, autoClose: false }), onRelease: () => notifications.update(toast) })),
             autoClose: getNotificationDuration(8000),
             withCloseButton: true,
             onClose: () => undoToastsRef.current.delete(id),
@@ -976,8 +976,11 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             list.push({
                 path: entry.path,
                 label: entry.label,
+                title: entry.title,
                 slug: entry.slug,
                 status: entryStatusLabel(activeCollections, entry),
+                missing: entry.status === 'missing' || undefined,
+                noPage: !entry.previewSrc || undefined,
                 contentId: entry.contentId,
                 readOnly: entry.canEdit === false || undefined,
                 conflictNotice: !!(entry.contentId && currentBranch?.conflictFiles?.includes(entry.contentId)),
@@ -1048,13 +1051,15 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const [contentPanelFocusRequest, setContentPanelFocusRequest] = useState(0);
     const openNavigator = () => {
         navigatorOpenerRef.current = rememberOpener();
-        // In the same commit as the overlay mounts, so its focus request meets no inert form panel.
+        // In the commit that opens the overlay, so the form panel is no longer inert when the overlay
+        // mounts, then or a frame later as its slide starts, and serves its focus request.
         if (!contentPanelDocked)
             setPreviewMaximized(false);
         setContentPanelShown(true);
         setContentPanelFocusRequest((request) => request + 1);
     };
-    // A collection crumb opens the panel as "All content" does, then its collection's row takes focus.
+    // A collection crumb opens the panel as the rail's Content button does, then its collection's row
+    // takes focus.
     const [collectionReveal, setCollectionReveal] = useState();
     // Only ever rises: the navigator serves each seq once, and the request is cleared once served.
     const revealSeqRef = useRef(0);
@@ -1084,9 +1089,10 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         })
             .catch(console.error);
     };
-    // The entry menu's trigger stands in for its item; once the entry is deleted, "All content".
+    // The entry menu's trigger stands in for its item; once the entry is deleted, the rail's Content
+    // button, where another entry is found.
     const entryChangeReturnTarget = entryChangeFromMenu
-        ? () => navigatorToggleRef.current ?? allContentCrumbRef.current
+        ? () => navigatorToggleRef.current ?? contentToggleRef.current
         : undefined;
     const navigatorReturnTarget = () => returnTarget(navigatorOpenerRef.current, () => navigatorToggleRef.current);
     const branchReturnTarget = () => returnTarget(branchOpenerRef.current, () => branchToggleRef.current);
@@ -1145,11 +1151,23 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         entries: entriesState.map((e) => ({
             contentId: e.contentId,
             label: e.label,
+            title: e.title,
             slug: e.slug,
             collectionPath: e.collectionPath,
             collectionName: e.collectionName,
         })),
     }), [entriesState]);
+    // Quick open names each entry's type and route under its label.
+    const quickOpenEntries = useMemo(() => entriesState.map((e) => ({
+        path: e.path,
+        label: e.label,
+        title: e.title,
+        slug: e.slug,
+        collectionPath: e.collectionPath,
+        collectionName: e.collectionName,
+        typeLabel: entryTypeLine(activeCollections, e),
+        route: buildPreviewRoute(e, { previewBaseByCollection, contentRoot }),
+    })), [entriesState, activeCollections, previewBaseByCollection, contentRoot]);
     const CenteredMessage = ({ children }) => (_jsx("div", { style: {
             display: 'flex',
             alignItems: 'center',
@@ -1162,11 +1180,15 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         fields: schema,
         data: displayValue,
     });
-    // Only the default preview has the toolbar that maximizes and restores it. With no value to
-    // preview (an entry loading, or failed to load, with no draft) the form shows instead, and the
-    // choice reapplies once a value arrives.
+    // Only the default preview has the toolbar that maximizes and restores it. It stays maximized
+    // while an entry loads. With no value after a failed load and no draft, the form shows instead,
+    // and the choice reapplies once a value arrives.
     const previewCanMaximize = !renderPreview && Boolean(currentEntry?.previewSrc) && !currentEntryUnavailable;
-    const previewShownMaximized = previewMaximized && previewCanMaximize && Boolean(previewFrameData);
+    // The open entry's data is loading, not failed: the preview keeps its last page, dimmed.
+    const previewPending = previewCanMaximize &&
+        !previewFrameData &&
+        loadFailedKey !== `${branchNameState}:${currentEntry?.contentId}`;
+    const previewShownMaximized = previewMaximized && previewCanMaximize && (Boolean(previewFrameData) || previewPending);
     useEffect(() => {
         if (!previewCanMaximize)
             setPreviewMaximized(false);
@@ -1176,8 +1198,9 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         ? fieldBreadcrumb(schema, displayValue, previewError.fieldPath).join(' › ')
         : '';
     // An unavailable entry previews nothing: the site cannot read it, and a stored draft would
-    // otherwise mount the frame at a page that answers not-found.
-    const defaultPreview = currentEntry?.previewSrc && previewFrameData && !currentEntryUnavailable ? (_jsx(PreviewPane, { src: currentEntry.previewSrc, data: previewFrameData, isLoading: previewLoadingState, highlightEnabled: highlightEnabled, onPreviewError: setPreviewError, onMarks: onPreviewMarks, assetBase: authenticatedAssetBase(basePath), mount: { basePath, previewPrefix }, previewWidth: previewWidth, onPreviewWidthChange: setPreviewWidth, onHighlightToggle: () => {
+    // otherwise mount the frame at a page that answers not-found. The pane stays mounted while an
+    // entry loads, so its toolbar never leaves on a switch.
+    const defaultPreview = currentEntry?.previewSrc && (previewFrameData || previewPending) && !currentEntryUnavailable ? (_jsx(PreviewPane, { src: currentEntry.previewSrc, pending: previewPending, data: previewFrameData, isLoading: previewLoadingState, highlightEnabled: highlightEnabled, onPreviewError: setPreviewError, onMarks: onPreviewMarks, assetBase: authenticatedAssetBase(basePath), mount: { basePath, previewPrefix }, previewWidth: previewWidth, onPreviewWidthChange: setPreviewWidth, onHighlightToggle: () => {
             setHighlightEnabled(!highlightEnabled);
             clearPreviewMarks();
         }, marksNothing: previewMarksNothing, inexactMarks: previewInexactMarks, showMarkDiagnostics: userIsAdmin, layout: layout, maximized: previewShownMaximized, onMaximizedChange: (maximized) => {
@@ -1185,7 +1208,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             if (maximized && !contentPanelDocked)
                 setNavigatorOpen(false);
             setPreviewMaximized(maximized);
-        }, resizing: paneResizing, notice: previewError && (_jsx(Alert, { color: "red", title: "Preview error", withCloseButton: true, onClose: () => setPreviewError(null), radius: 0, children: previewErrorField
+        }, resizing: paneResizing, siteChrome: siteChrome, onSiteChromeChange: setSiteChrome, notice: previewError && (_jsx(Alert, { color: "red", title: "Preview error", withCloseButton: true, onClose: () => setPreviewError(null), radius: 0, children: previewErrorField
                 ? `${previewErrorField}: ${previewError.message}`
                 : previewError.message })) })) : (_jsx(Paper, { withBorder: true, shadow: "xs", h: "100%", bg: "var(--mantine-color-body)", style: {
             display: 'flex',
@@ -1237,8 +1260,11 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                     : entriesState.map((e) => ({
                         path: e.path,
                         label: e.label,
+                        title: e.title,
                         slug: e.slug,
                         status: entryStatusLabel(activeCollections, e),
+                        missing: e.status === 'missing' || undefined,
+                        noPage: !e.previewSrc || undefined,
                         readOnly: e.canEdit === false || undefined,
                     })), selectedPath: selectedPath, onSelect: openEntry, onTreeControllerReady: handleTreeControllerReady, expandedStateRef: treeExpandedStateRef, onExpandedStateChange: handleExpandedStateChange, onDeleteEntry: handleDeleteEntry, onRenameEntry: handleRenameEntry, onReorderEntry: userIsAdmin ? handleReorderEntry : undefined, hiddenRootPath: hiddenRootPath, loading: entriesInitializing, readOnly: branchContentLocked, dirtyPaths: dirtyPaths, revealCollection: collectionReveal, onRevealed: () => setCollectionReveal(undefined) }) }) }));
     return (_jsx(CanopyCMSProvider, { ...(themeOptions ?? {}), children: _jsx(AssetContextProvider, { basePath: basePath, children: _jsx(EditorShell, { topBar: _jsx(EditorHeader, { currentEntry: currentEntry, branchName: branchNameState, operatingMode: operatingMode, branchStatus: currentBranch?.status, busy: busy, breadcrumbSegments: breadcrumbSegments, editedFiles: editedFiles, modifiedCount: modifiedCount, 
@@ -1253,7 +1279,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                     // fail-closed computation of "are writes blocked" in this component.
                     branchIsProtected: currentBranch?.isProtected ?? true, branchReadOnly: currentBranch?.readOnly, branchWriteBlocked: branchContentLocked, 
                     // A failed fetch leaves the list empty too; the banner says that one.
-                    branchLoading: !currentBranch && (branchesLoading || branchSummaries.length === 0), onNavigatorOpen: openNavigator, onCollectionOpen: revealCollection, navigatorToggleRef: navigatorToggleRef, branchToggleRef: branchToggleRef, onFileReload: () => handleReload(() => navigatorToggleRef.current), onFileDiscardDraft: () => handleDiscardFileDraft(() => navigatorToggleRef.current), onEntryRename: () => currentEntry && handleRenameEntry(currentEntry.path, true), onEntryDelete: () => currentEntry && handleDeleteEntry(currentEntry.path, true), allContentRef: allContentCrumbRef, entryUnavailable: currentEntryUnavailable, onEntrySelect: openEntry, onBranchReloadData: () => {
+                    branchLoading: !currentBranch && (branchesLoading || branchSummaries.length === 0), onCollectionOpen: revealCollection, navigatorToggleRef: navigatorToggleRef, branchToggleRef: branchToggleRef, onFileReload: () => handleReload(() => navigatorToggleRef.current), onFileDiscardDraft: () => handleDiscardFileDraft(() => navigatorToggleRef.current), onEntryRename: () => currentEntry && handleRenameEntry(currentEntry.path, true), onEntryDelete: () => currentEntry && handleDeleteEntry(currentEntry.path, true), entryUnavailable: currentEntryUnavailable, onEntrySelect: openEntry, onBranchReloadData: () => {
                         void Promise.all([handleReloadBranchData(), refreshEntries(branchNameState)]).catch(console.error);
                     }, onBranchDiscardDrafts: () => handleDiscardDrafts(() => branchToggleRef.current), onBranchManagerOpen: openBranchManager, onSave: currentEntryUnavailable ? noop : handleSave, onSaveAll: runSaveAll, saveAllProgress: saveAllProgress, saving: singleSaving?.branch === branchNameState &&
                         singleSaving.contentId === currentEntry?.contentId, savedSignal: lastSaved?.seq, savedHere: lastSaved?.branch === branchNameState &&
@@ -1267,14 +1293,10 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                         if (branchNameState && !isSaveAllRunning()) {
                             handleWithdraw(branchNameState).catch(console.error);
                         }
-                    } }), banner: _jsx(BranchLockBanner, { branchName: branchNameState, branchStatus: currentBranch?.status, branchReadOnly: currentBranch?.readOnly, branchWriteBlocked: branchContentLocked, onBranchManagerOpen: openBranchManager }), rail: _jsx(EditorRail, { siteTitle: siteTitle, onHomeOpen: () => {
-                        const first = entriesState[0];
-                        if (first)
-                            openEntry(first.path);
-                    }, contentPanelOpen: contentPanelShown, contentPanelId: CONTENT_PANEL_ID, onContentToggle: () => contentPanelShown ? setContentPanelShown(false) : openNavigator(), onQuickOpen: openQuickOpen, quickOpenShortcut: quickOpenShortcut, quickOpenKeys: quickOpenKeys, branchesOpen: branchManagerOpen, onBranchesOpen: openBranchManager, onCommentsOpen: clientOperatingStrategy(operatingMode ?? 'prod').supportsComments() &&
+                    } }), banner: _jsx(BranchLockBanner, { branchName: branchNameState, branchStatus: currentBranch?.status, branchReadOnly: currentBranch?.readOnly, branchWriteBlocked: branchContentLocked, onBranchManagerOpen: openBranchManager }), rail: _jsx(EditorRail, { contentPanelOpen: contentPanelShown, contentPanelId: CONTENT_PANEL_ID, onContentToggle: () => contentPanelShown ? setContentPanelShown(false) : openNavigator(), contentToggleRef: contentToggleRef, onQuickOpen: openQuickOpen, quickOpenShortcut: quickOpenShortcut, quickOpenKeys: quickOpenKeys, branchesOpen: branchManagerOpen, onBranchesOpen: openBranchManager, onCommentsOpen: clientOperatingStrategy(operatingMode ?? 'prod').supportsComments() &&
                         branchNameState
                         ? () => setCommentsPanelOpen(true)
-                        : undefined, commentsOpen: commentsPanelOpen, unresolvedCommentCount: comments.filter((t) => !t.resolved).length, mediaLibraryOpen: mediaLibraryOpen, onMediaLibraryOpen: () => setMediaLibraryOpen(true), mediaButtonRef: mediaButtonRef, layout: layout, onLayoutChange: setLayout, layoutBlocked: previewShownMaximized, onPermissionManagerOpen: userIsAdmin ? () => setPermissionManagerOpen(true) : undefined, onGroupManagerOpen: userIsAdmin ? () => setGroupManagerOpen(true) : undefined, onSystemHealthOpen: userIsAdmin ? () => setSystemHealthOpen(true) : undefined, settingsToggleRef: settingsToggleRef, AccountComponent: AccountComponent, onAccountClick: onAccountClick, onLogoutClick: onLogoutClick }), panel: contentPanelDocked ? contentPanel : undefined, main: _jsx(Box, { h: "100%", children: _jsx(PaneLayout, { formOverlay: contentPanelDocked ? undefined : contentPanel, formInert: contentOverlayShown, previewMaximized: previewShownMaximized, 
+                        : undefined, commentsOpen: commentsPanelOpen, unresolvedCommentCount: comments.filter((t) => !t.resolved).length, mediaLibraryOpen: mediaLibraryOpen, onMediaLibraryOpen: () => setMediaLibraryOpen(true), mediaButtonRef: mediaButtonRef, layout: layout, onLayoutChange: setLayout, layoutBlocked: previewShownMaximized, onPermissionManagerOpen: userIsAdmin ? () => setPermissionManagerOpen(true) : undefined, onGroupManagerOpen: userIsAdmin ? () => setGroupManagerOpen(true) : undefined, onSystemHealthOpen: userIsAdmin ? () => setSystemHealthOpen(true) : undefined, settingsToggleRef: settingsToggleRef, AccountComponent: AccountComponent, onAccountClick: onAccountClick, onLogoutClick: onLogoutClick }), panel: contentPanelDocked && layout === 'side' ? contentPanel : undefined, main: _jsx(Box, { h: "100%", children: _jsx(PaneLayout, { formAside: contentPanelDocked && layout === 'stacked' ? contentPanel : undefined, formOverlay: contentPanelDocked ? undefined : contentPanel, formInert: contentOverlayShown, previewMaximized: previewShownMaximized, 
                         // Sizing the pane, by pointer or key, gives the page the pane's width.
                         onSeparatorDrag: (dragging) => {
                             setPaneResizing(dragging);
@@ -1294,7 +1316,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                         // A hidden draft's discard changes nothing on screen, so it says so.
                                         onDiscard: () => handleDiscardFileDraft(() => navigatorToggleRef.current, {
                                             announce: true,
-                                        }) })), fields: schema, value: displayValue, readOnly: contentReadOnly, onRemoved: handleFieldRemoved, commentBlockedReason: commentBlockedReason, removedItemFieldLabel: commentFieldLabel, onGetUserMetadata: getCommentUserMetadata, header: {
+                                        }) })), fields: schema, value: displayValue, readOnly: contentReadOnly, onRemoved: handleFieldRemoved, savedValue: loadedValue, commentBlockedReason: commentBlockedReason, removedItemFieldLabel: commentFieldLabel, onGetUserMetadata: getCommentUserMetadata, header: {
                                         title: currentEntry.label,
                                         typeLabel: entryTypeLabel(activeCollections, currentEntry),
                                     }, 
@@ -1311,7 +1333,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                         currentBranch?.conflictFiles?.includes(currentEntry.contentId)) }) }) })) : schema.length === 0 ? (_jsx(CenteredMessage, { children: "No fields to edit." })) : loadFailedKey !== `${branchNameState}:${currentEntry.contentId}` ? (_jsx(Stack, { gap: "lg", p: "md", "data-testid": "entry-loading-skeleton", children: [0, 1, 2].map((row) => (_jsxs(Stack, { gap: 6, children: [_jsx(Skeleton, { h: 12, w: 120 }), _jsx(Skeleton, { h: 36 })] }, row))) })) : (_jsx(Alert, { color: "red", variant: "light", m: "md", title: "This entry couldn't be loaded.", "data-testid": "entry-load-failed", children: _jsx(Button, { variant: "default", onClick: () => {
                                     setLoadFailedKey(null);
                                     setLoadAttempt((attempt) => attempt + 1);
-                                }, children: "Retry" }) })) }) }), overlays: _jsxs(_Fragment, { children: [_jsx(QuickOpenPalette, { opened: quickOpenOpen, onOpen: openQuickOpen, onClose: () => setQuickOpenOpen(false), returnFocusTo: quickOpenFromOverlay ? navigatorReturnTarget : undefined, entries: entriesState, 
+                                }, children: "Retry" }) })) }) }), overlays: _jsxs(_Fragment, { children: [_jsx(QuickOpenPalette, { opened: quickOpenOpen, onOpen: openQuickOpen, onClose: () => setQuickOpenOpen(false), returnFocusTo: quickOpenFromOverlay ? navigatorReturnTarget : undefined, entries: quickOpenEntries, 
                             // The hidden root's entries sit at the top of the tree, so they get no heading here either.
                             collectionLabel: (path) => path === hiddenRootPath ? '' : collectionLabels.get(path), onSelect: setSelectedPath }), _jsx(BranchesDrawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), confirmOpen: branchConfirmOpen, returnFocusTo: branchReturnTarget, children: _jsx(BranchManager, { branches: branchSummaries, mode: operatingMode, user: userContext, currentBranchName: currentBranch?.name ?? branchNameState, currentWorkflowBlockedReason: saveAllProgress ? 'Wait for Save all to finish.' : undefined, onSelect: async (name) => {
                                     try {
@@ -1343,7 +1365,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                 : undefined, onRemoveEntryType: editingCollection ? (path, name) => removeEntryType(path, name) : undefined, onReloadEntryTypes: editingCollection ? readEntryTypes : undefined, onClose: handleCloseCollectionEditor, isSaving: schemaLoading, error: collectionEditorError, restored: restoredCollectionInput, onDiscardRestored: () => {
                                 collectionDraftRef.current = null;
                                 setRestoredCollectionInput(null);
-                            } })), renamingEntry && (_jsx(RenameEntryModal, { isOpen: renameModalOpen, entryLabel: renamingEntry.label, currentSlug: renamingEntry.slug || '', onSave: handleRenameSubmit, 
+                            } })), renamingEntry && (_jsx(RenameEntryModal, { isOpen: renameModalOpen, entryLabel: renamingEntry.label, nameSource: entryNameSource(activeCollections, renamingEntry, entryValue(renamingEntry)), hasPage: !!renamingEntry.previewSrc, currentSlug: renamingEntry.slug || '', onSave: handleRenameSubmit, 
                             // `renamingEntry` stays until the next rename, so the dialog plays its exit and
                             // returns focus.
                             onClose: () => {

package/dist/editor/EntryNavigator.d.ts

@@ -5,9 +5,16 @@ type TreeController = ReturnType<typeof useTree>;
 export interface EntryNavItem {
     path: LogicalPath;
     label: string;
+    /** The entry's title, matched by the filter where the label is a singleton's type label. */
+    title?: string;
     /** Matched by the filter; the last segment of `path` when absent. */
     slug?: string;
+    /** The row's second line: the entry's type, or "Missing" (`entryStatusLabel`). */
     status?: string;
+    /** The entry's file is gone: its second line is error text. */
+    missing?: boolean;
+    /** The entry has no page on the site, so its menu changes its slug rather than its URL. */
+    noPage?: boolean;
     collectionPath?: LogicalPath;
     contentId?: ContentId;
     /** True when this entry's file conflicted during rebase */
@@ -46,7 +53,7 @@ export interface EntryNavigatorProps {
     onExpandedStateChange?: (state: Record<string, boolean>) => void;
     /** Called when user requests to delete an entry */
     onDeleteEntry?: (path: LogicalPath) => void;
-    /** Called when user requests to rename an entry */
+    /** Called when the user asks to change an entry's URL (its slug) */
     onRenameEntry?: (path: LogicalPath) => void;
     /** Called when user reorders an entry within a collection */
     onReorderEntry?: (collectionPath: LogicalPath, contentId: string, direction: 'up' | 'down') => void;

package/dist/editor/EntryNavigator.js

@@ -5,7 +5,9 @@ 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 { 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 +46,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 +74,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 +108,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,13 +122,7 @@ 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)',
-        } }) }));
+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, dirtyPaths, revealCollection, onRevealed, }) => {
     // Shadow the entry-mutation callbacks with undefined when readOnly, so every
     // downstream reference (hasEntryMenu, canReorder, the menu items themselves)
@@ -147,6 +149,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 +173,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 +283,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,6 +474,8 @@ 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;
+        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 -- this removes the collection menu button
         // entirely (hasCollectionMenu below) rather than leaving it enabled.
@@ -533,7 +546,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 +566,10 @@ 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" }))] })] })), 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>;
     /**