canopycms 0.2.0-int.121 → 0.3.0

package/dist/editor/Editor.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, useRef } from 'react';
-import { ActionIcon, Alert, Box, Button, Menu, Paper, Skeleton, Stack, Text, Tooltip, } from '@mantine/core';
-import { IconChevronDown, IconChevronUp, IconDots, IconFolderPlus, IconPlus, IconSearch, } from '@tabler/icons-react';
-import { useMediaQuery } from '@mantine/hooks';
+import { ActionIcon, Alert, Box, Button, Center, Menu, Paper, Skeleton, Stack, Text, Tooltip, } from '@mantine/core';
+import { IconChevronDown, IconChevronUp, IconDots, IconFolderPlus, IconPlus, } from '@tabler/icons-react';
+import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 const noop = () => { };
 import { EntryNavigator } from './EntryNavigator.js';
@@ -13,7 +13,7 @@ import { displayPreviewPath, previewPageKey } from './preview-path.js';
 import { showPreviewLinkOutcome } from './components/PreviewLinkToast.js';
 import { clientOperatingStrategy } from '../operating-mode/client.js';
 import { EditorShell } from './shell/EditorShell.js';
-import { PaneLayout } from './shell/PaneLayout.js';
+import { FORM_PANE_ID, PaneLayout } from './shell/PaneLayout.js';
 import { SidePanelHost } from './shell/SidePanelHost.js';
 import { CanopyCMSProvider } from './theme.js';
 import { BranchManager } from './BranchManager.js';
@@ -25,7 +25,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, entryTypeLine, buildBreadcrumbSegments, entryNameSource, } from './editor-utils.js';
+import { buildPreviewRoute, buildPreviewSrc, buildCollectionLabels, entryStatusLabel, entryTypeLabel, 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';
@@ -33,17 +33,17 @@ import { EntrySchemaUnavailableError } from './hooks/useEntryManager.js';
 import { useEntryLinkResolution } from './hooks/useEntryLinkResolution.js';
 import { useReferenceResolution } from './hooks/useReferenceResolution.js';
 import { usePreviewMarks } from './hooks/usePreviewMarks.js';
-import { BranchLockBanner, describeBranchLock, EditorHeader, EditorRail } from './components/index.js';
+import { branchBarStatus, describeBranchLock } from './branch-lock.js';
+import { EditorHeader, EditorRail, EntryHeader } from './components/index.js';
 import { showSaveAllResult } from './components/SaveAllResult.js';
 import { RenameEntryModal } from './components/RenameEntryModal.js';
-import { QuickOpenPalette } from './components/QuickOpenPalette.js';
-import { rememberOpener, returnTarget } from './utils/focus-return.js';
+import { focusIsIdle, rememberOpener, returnTarget } from './utils/focus-return.js';
 import { modKeyLabel } from './platform.js';
-import { EDITOR_ACTIONS } from './copy.js';
 import { EntryCreateModal } from './components/EntryCreateModal.js';
 import { ConfirmDeleteModal } from './components/ConfirmDeleteModal.js';
 import { ReferencedByList, referencedDeleteMessage } from './components/ReferencedByList.js';
 import { NoEditPermissionNotice } from './components/NoEditPermissionNotice.js';
+import { BranchNotAvailableNotice } from './components/BranchNotAvailableNotice.js';
 import { ReadOnlyDraftNotice } from './components/ReadOnlyDraftNotice.js';
 import { UnavailableEntryNotice } from './components/UnavailableEntryNotice.js';
 import { unavailableSchemaRefs } from './unavailable-entry-type.js';
@@ -62,6 +62,7 @@ import { findFieldTarget, focusFieldTarget } from './field-target.js';
 import { UndoToastMessage } from './components/UndoToastMessage.js';
 import { getNotificationDuration } from './utils/env.js';
 import { MayHaveLandedError } from './unanswered.js';
+import { sanitizeBranchName } from '../paths/branch-name.js';
 // Stable fallbacks, so reference resolution's memo and effect don't re-run on every render
 // while no entry is open.
 const EMPTY_SCHEMA = [];
@@ -80,6 +81,13 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const [groupManagerOpen, setGroupManagerOpen] = useState(false);
     const [permissionManagerOpen, setPermissionManagerOpen] = useState(false);
     const [branchManagerOpen, setBranchManagerOpen] = useState(false);
+    // Each opening remounts Branches; one from New branch… starts on its new-branch form.
+    const [branchManagerOpening, setBranchManagerOpening] = useState({ seq: 0, create: false });
+    const openBranchesDrawer = (create) => {
+        branchOpenerRef.current = rememberOpener();
+        setBranchManagerOpening(({ seq }) => ({ seq: seq + 1, create }));
+        setBranchManagerOpen(true);
+    };
     const [mediaLibraryOpen, setMediaLibraryOpen] = useState(false);
     const [systemHealthOpen, setSystemHealthOpen] = useState(false);
     const [collectionEditorOpen, setCollectionEditorOpen] = useState(false);
@@ -95,8 +103,6 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const [restoredCollectionInput, setRestoredCollectionInput] = useState(null);
     // Each open or close of the collection dialog moves it on, so a slow open answers only if current.
     const collectionOpeningRef = useRef(0);
-    const [quickOpenOpen, setQuickOpenOpen] = useState(false);
-    const [quickOpenFromOverlay, setQuickOpenFromOverlay] = useState(false);
     const navigatorToggleRef = useRef(null);
     const mediaButtonRef = useRef(null);
     const branchToggleRef = useRef(null);
@@ -105,10 +111,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const branchOpenerRef = useRef(null);
     // Null when the panel opened from a menu item, which unmounts on click, or with focus on the page.
     const navigatorOpenerRef = useRef(null);
-    const quickOpenOpenRef = useRef(false);
-    useEffect(() => {
-        quickOpenOpenRef.current = quickOpenOpen;
-    }, [quickOpenOpen]);
+    const entryFilterRef = useRef(null);
     const [renameModalOpen, setRenameModalOpen] = useState(false);
     const [renamingEntry, setRenamingEntry] = useState(null);
     const [renameModalError, setRenameModalError] = useState(null);
@@ -157,7 +160,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         labels: [],
     }));
     const applySubmitStampsRef = useRef(() => { });
-    const { branchName: branchNameState, setBranchName, branchSummaries, currentBranch, branchesLoadFailed, addCreatedBranch, handleSubmit, handleWithdraw, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
+    const { branchName: branchNameState, setBranchName, branchSummaries, currentBranch, branchesLoadFailed, branchesLoaded, addCreatedBranch, handleSubmit, handleWithdraw, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
         initialBranch: branchName,
         operatingMode,
         setBusy: setBranchesLoading,
@@ -179,9 +182,23 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     // loading state during that window anyway.
     const branchContentLocked = currentBranch?.writeBlocked ?? true;
     const branchLoading = !currentBranch && (branchesLoading || branchSummaries.length === 0);
-    // A row's lock reason on an unanswered branch would be "details could not be loaded", which is
-    // not yet true; once the fetch has failed it is, and the lock says so.
-    const branchRowsPending = branchLoading && !branchesLoadFailed;
+    // No lock reason is true yet while the list is unanswered; once it has failed, or answered
+    // without this branch, the lock says which.
+    const branchPending = !currentBranch && !branchesLoaded && !branchesLoadFailed;
+    const branchMissing = !currentBranch && branchesLoaded;
+    // The bar's lock-state row, with the inputs EditorHeader gets, for the states that must agree.
+    const branchBarState = branchBarStatus({
+        branchStatus: currentBranch?.status,
+        branchReadOnly: currentBranch?.readOnly,
+        branchWriteBlocked: branchContentLocked,
+        branchPending,
+        branchMissing,
+        isProtected: currentBranch?.isProtected,
+    }).value;
+    // With no branch named, the bar shows no row, so neither do the empty states.
+    const branchNotAvailable = !!branchNameState && branchBarState === 'not-available';
+    // Set once the branch actions below exist; they depend on the drafts, which depend on the entries.
+    const switchBranchRef = useRef(async () => { });
     // 2. Entry manager (depends on branchNameState, owns selectedPath)
     const { selectedPath, setSelectedPath, closeEntry, entries: entriesState, collections: collectionsFromApi, currentEntry, availableSchemas, entriesInitializing, entriesLoadFailed, navigatorOpen, setNavigatorOpen, refreshEntries, refreshContent, handleCreateEntry, renameEntry, loadEntry, readEntryValue, saveEntry, getEntryVersion, adoptEntryVersion, followMovedEntry, recreateEntry, createModalOpen, createModalCollection, createModalError, createModalCreating, createModalExistingSlugs, handleCreateModalSubmit, closeCreateModal, } = useEntryManager({
         initialEntries: entries,
@@ -197,7 +214,18 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         }),
         resolvePreviewRoute: (entry) => buildPreviewRoute(entry, { previewBaseByCollection, contentRoot }),
         setBusy: setEntriesLoading,
+        branchBarState,
+        switchBranch: (branch) => switchBranchRef.current(branch),
+        // To the entry menu, which names the entry opened; a dialog keeps focus.
+        onHistoryRestore: () => requestAnimationFrame(() => {
+            if (!document.activeElement?.closest('[role="dialog"]')) {
+                navigatorToggleRef.current?.focus({ preventScroll: true });
+            }
+        }),
     });
+    // The "Not available" empty states wait for the load to answer with nothing: content that does
+    // load, for a branch the list lags in granting, shows as usual.
+    const branchShowsNotAvailable = branchNotAvailable && !entriesInitializing && entriesState.length === 0;
     // The content overlay and a maximized preview hide the form; `navigatorOpen` is only the
     // overlay's. Anything that focuses something in the form reveals it first. Opening an entry
     // closes the overlay only, so the preview stays maximized across entries (see
@@ -296,6 +324,17 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         onBranchCreated: addCreatedBranch,
         userId: userContext?.userId,
     });
+    switchBranchRef.current = async (branch) => {
+        const listed = (name) => name === branch || name === sanitizeBranchName(branch);
+        if (branchSummaries.length > 0 && !branchSummaries.some((b) => listed(b.name))) {
+            notifications.show({
+                message: `Branch “${branch}” no longer exists or you can no longer open it, so you're still on “${branchNameState}”.`,
+                color: 'yellow',
+            });
+            throw new Error(`Branch ${branch} is not listed`);
+        }
+        await handleBranchChange(branch);
+    };
     // 5. Comment system (depends on branchNameState)
     const { comments, getCommentUser, focusedFieldPath, highlightThreadId, commentsPanelOpen, setCommentsPanelOpen, handleAddComment, handleResolveThread, handleJumpToField, handleJumpToEntry, handleJumpToBranch, } = useCommentSystem({
         branchName: branchNameState,
@@ -304,11 +343,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         currentUser: commentUserId,
         canResolveComments: canResolveAnyComment,
         setSelectedPath,
-        setBranchManagerOpen: (open) => {
-            if (open)
-                branchOpenerRef.current = rememberOpener();
-            setBranchManagerOpen(open);
-        },
+        setBranchManagerOpen: (open) => open ? openBranchesDrawer(false) : setBranchManagerOpen(false),
         onCommentsChange: setCommentsForBranchSummaries,
         onRevealForm: revealForm,
     });
@@ -885,8 +920,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                 setDeletingEntryReferencedBy(result.referencedBy);
                 return;
             }
-            if (result.ok && selectedPath === deletingEntryPath)
-                closeEntry();
+            if (result.ok)
+                closeEntry(deletingEntryPath, branchNameState);
             closeDeleteEntryModal();
         }
         finally {
@@ -1005,6 +1040,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                 title: entry.title,
                 slug: entry.slug,
                 status: entryStatusLabel(activeCollections, entry),
+                route: buildPreviewRoute(entry, { previewBaseByCollection, contentRoot }),
                 missing: entry.status === 'missing' || undefined,
                 noPage: !entry.previewSrc || undefined,
                 contentId: entry.contentId,
@@ -1057,16 +1093,29 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         onCreateEntry,
         handleCreateEntry,
         contentRoot,
+        previewBaseByCollection,
         currentBranch,
         schemaUnavailableKeys,
         userIsAdmin,
     ]);
-    const quickOpenShortcut = modKeyLabel() === '⌘' ? '⌘P' : 'Ctrl+P';
-    const quickOpenKeys = modKeyLabel() === '⌘' ? 'Meta+P' : 'Control+P';
+    const findShortcut = modKeyLabel() === '⌘' ? { label: '⌘P', keys: 'Meta+P' } : { label: 'Ctrl+P', keys: 'Control+P' };
+    // Mod+P opens a closed docked panel only until Enter, Escape from inside it or focus leaves it;
+    // the stored preference stays closed. A row menu, the Content button or any other ask opens it
+    // for good.
+    const [contentPanelTransient, setContentPanelTransient] = useState(false);
+    if (contentPanelTransient && !contentPanelDocked)
+        setContentPanelTransient(false);
     // Docked, the content panel's open state is the stored preference; as an overlay it is
     // `navigatorOpen`, which starts open when the URL asks for no entry.
-    const contentPanelShown = contentPanelDocked ? contentPanelOpen : navigatorOpen;
-    const setContentPanelShown = (open) => contentPanelDocked ? setContentPanelOpen(open) : setNavigatorOpen(open);
+    const contentPanelShown = contentPanelDocked
+        ? contentPanelOpen || contentPanelTransient
+        : navigatorOpen;
+    const setContentPanelShown = (open) => {
+        if (!contentPanelDocked)
+            return setNavigatorOpen(open);
+        setContentPanelOpen(open);
+        setContentPanelTransient(false);
+    };
     // The overlay lives in the form pane, under a maximized preview.
     const contentOverlayShown = !contentPanelDocked && contentPanelShown;
     useEffect(() => {
@@ -1075,30 +1124,78 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     }, [contentOverlayShown]);
     // Bumped on every ask for the panel, so one already open still takes focus.
     const [contentPanelFocusRequest, setContentPanelFocusRequest] = useState(0);
-    const openNavigator = () => {
-        navigatorOpenerRef.current = rememberOpener();
+    const openNavigator = ({ transient = false } = {}) => {
+        // Focus already in the panel isn't an opener: the panel's own close would hand focus back to it.
+        // Nor is the page, once the panel is shown: focus dropped there from where it came.
+        const opener = rememberOpener();
+        if (!document.getElementById(CONTENT_PANEL_ID)?.contains(document.activeElement) &&
+            (opener || !contentPanelShown)) {
+            navigatorOpenerRef.current = opener;
+        }
         // 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);
+        // A pending Enter focus nulls the panel's return of focus, and only Enter's close may lose it.
+        setFormFocusPath(null);
+        if (transient && contentPanelDocked && !contentPanelOpen)
+            setContentPanelTransient(true);
+        else
+            setContentPanelShown(true);
         setContentPanelFocusRequest((request) => request + 1);
     };
-    // A collection crumb opens the panel as the rail's Content button does, then its collection's row
-    // takes focus.
-    const [collectionReveal, setCollectionReveal] = useState();
+    const keepContentPanelOpen = () => {
+        if (contentPanelTransient)
+            setContentPanelShown(true);
+    };
+    const [formFocusPath, setFormFocusPath] = useState(null);
+    const formFocusRestoredRef = useRef(false);
+    // `[]` (tagsToIgnore) and `true` (contenteditable) let it fire from fields and the MDX editor.
+    useHotkeys([
+        [
+            'mod+P',
+            (event) => {
+                // Mantine's `mod` is Ctrl or ⌘ everywhere; on macOS Ctrl+P moves the caret up a line.
+                if (modKeyLabel() === '⌘' && !event.metaKey)
+                    return;
+                // Keeps the browser's print dialog shut, even when the panel can't open.
+                event.preventDefault();
+                // Opened under a modal or drawer, it would take the keyboard from the one in use.
+                if (document.querySelector('[role="dialog"][aria-modal="true"]'))
+                    return;
+                setChangedOnly(false);
+                const field = entryFilterRef.current;
+                if (field && document.activeElement === field)
+                    field.select();
+                else
+                    openNavigator({ transient: true });
+            },
+            { preventDefault: false },
+        ],
+    ], [], true);
+    // A collection crumb, or the entry menu's "Show in content panel", opens the panel as the rail's
+    // Content button does, then the row takes focus.
+    const [contentReveal, setContentReveal] = useState();
     // Only ever rises: the navigator serves each seq once, and the request is cleared once served.
     const revealSeqRef = useRef(0);
-    const revealCollection = (path) => {
+    const revealInContentPanel = (reveal) => {
         openNavigator();
         revealSeqRef.current += 1;
-        setCollectionReveal({ path, seq: revealSeqRef.current });
+        setContentReveal({ ...reveal, seq: revealSeqRef.current });
     };
     // An ask the panel closed on before serving it must not fire when the panel next opens.
     useEffect(() => {
         if (!contentPanelShown)
-            setCollectionReveal(undefined);
+            setContentReveal(undefined);
     }, [contentPanelShown]);
+    // The content panel's All / Changed filter. It stays as chosen, emptied by a save or not, except
+    // that Mod+P finds among all entries and another branch has its own unsaved set: both reset it.
+    const [changedOnly, setChangedOnly] = useState(false);
+    useEffect(() => setChangedOnly(false), [branchNameState]);
+    const showUnsaved = () => {
+        setChangedOnly(true);
+        revealInContentPanel({ kind: 'changed' });
+    };
     const runSaveAll = () => {
         void handleSaveAll()
             .then((result) => {
@@ -1123,18 +1220,12 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const navigatorReturnTarget = () => returnTarget(navigatorOpenerRef.current, () => navigatorToggleRef.current);
     const branchReturnTarget = () => returnTarget(branchOpenerRef.current, () => branchToggleRef.current);
     const settingsReturnTarget = () => settingsToggleRef.current;
-    // The palette replaces the overlay panel; a docked one stays. Opened from inside the overlay,
-    // whose tree then unmounts, it returns focus to the panel's opener.
-    const openQuickOpen = () => {
-        if (!quickOpenOpen) {
-            const panel = document.getElementById(CONTENT_PANEL_ID);
-            setQuickOpenFromOverlay(!contentPanelDocked && navigatorOpen && !!panel?.contains(document.activeElement));
-        }
-        if (!contentPanelDocked)
-            setNavigatorOpen(false);
-        setQuickOpenOpen(true);
-    };
-    const dirtyPaths = useMemo(() => new Set(editedFiles.map((file) => file.path)), [editedFiles]);
+    // Keyed by its members, so the same set keeps its identity as drafts change on every keystroke.
+    const dirtyKey = editedFiles
+        .map((file) => file.path)
+        .sort()
+        .join('\n');
+    const dirtyPaths = useMemo(() => new Set(dirtyKey ? dirtyKey.split('\n') : []), [dirtyKey]);
     // Slugs of the entries beside the one being renamed, for the duplicate check.
     const renameExistingSlugs = useMemo(() => new Set(entriesState
         .filter((e) => e.collectionPath === renamingEntry?.collectionPath &&
@@ -1183,17 +1274,6 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             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',
@@ -1219,6 +1299,54 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         if (!previewCanMaximize)
             setPreviewMaximized(false);
     }, [previewCanMaximize]);
+    // Enter in the transient panel focuses the opened entry's first field once it renders, else the
+    // form pane; focus the user moved by then stays. A tree click, preview link or Back moves none.
+    useEffect(() => {
+        if (!formFocusPath)
+            return;
+        if (selectedPath !== formFocusPath)
+            return setFormFocusPath(null);
+        if (currentEntry?.path !== formFocusPath)
+            return;
+        const formShown = schema.length > 0 && !!displayValue;
+        const fieldless = currentEntryUnavailable ||
+            currentEntry.canEdit === false ||
+            schema.length === 0 ||
+            loadFailedKey === `${branchNameState}:${currentEntry.contentId}`;
+        if (!formShown && !fieldless)
+            return;
+        // Restoring the preview hands focus to its Maximize button; that isn't the user moving on.
+        const focusedByRestore = formFocusRestoredRef.current ? document.activeElement : null;
+        formFocusRestoredRef.current = false;
+        const frame = requestAnimationFrame(() => {
+            if (!focusIsIdle() && document.activeElement !== focusedByRestore) {
+                return setFormFocusPath(null);
+            }
+            // The form is in view first; the next run focuses it.
+            if (previewShownMaximized) {
+                formFocusRestoredRef.current = true;
+                return setPreviewMaximized(false);
+            }
+            setFormFocusPath(null);
+            const pane = document.getElementById(FORM_PANE_ID);
+            const field = formShown ? pane?.querySelector('[data-canopy-field]') : null;
+            if (field)
+                focusFieldTarget(field);
+            else
+                pane?.focus({ preventScroll: true });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [
+        formFocusPath,
+        selectedPath,
+        currentEntry,
+        currentEntryUnavailable,
+        schema.length,
+        displayValue,
+        loadFailedKey,
+        branchNameState,
+        previewShownMaximized,
+    ]);
     const [paneResizing, setPaneResizing] = useState(false);
     const previewErrorField = previewError?.fieldPath
         ? fieldBreadcrumb(schema, displayValue, previewError.fieldPath).join(' › ')
@@ -1240,13 +1368,13 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-        }, children: _jsx(Text, { size: "sm", c: "dimmed", children: !branchNameState && busy
+        }, children: !currentEntry && branchShowsNotAvailable ? (_jsx(BranchNotAvailableNotice, { align: "center", "data-testid": "preview-branch-not-available" })) : (_jsx(Text, { size: "sm", c: "dimmed", children: !branchNameState && busy
                 ? 'Setting up your branch workspace…'
                 : entriesInitializing
                     ? 'Loading content…'
                     : currentEntry && !currentEntry.previewSrc
                         ? 'No preview for this entry.'
-                        : 'Select an item to start editing.' }) }));
+                        : 'Select an item to start editing.' })) }));
     const breadcrumbSegments = useMemo(() => buildBreadcrumbSegments(currentEntry, collectionLabels), [collectionLabels, currentEntry]);
     // The browser tab names the open entry and the site.
     const tabTitle = currentEntry
@@ -1266,9 +1394,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         document.title = tabTitle;
         writtenTitleRef.current = tabTitle;
     }, [tabTitle]);
-    const openBranchManager = () => {
-        branchOpenerRef.current = rememberOpener();
-        setBranchManagerOpen(true);
+    const openBranchManager = (options) => {
+        openBranchesDrawer(options?.create === true);
         // Always retry, not only when branchless. Opening the manager is
         // the one in-app retry for a failed branches fetch, and the fetch
         // is terminal on its own: SWRProvider sets shouldRetryOnError and
@@ -1276,12 +1403,19 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         // is 0 without data. Reloading is idempotent.
         loadBranches().catch(console.error);
     };
-    const contentPanel = (_jsx(SidePanelHost, { id: CONTENT_PANEL_ID, title: "Content", mode: contentPanelDocked ? 'docked' : 'overlay', opened: contentPanelShown, width: contentPanelWidth, minWidth: CONTENT_PANEL_WIDTH_MIN, maxWidth: CONTENT_PANEL_WIDTH_MAX, onWidthChange: setContentPanelWidth, onClose: () => setContentPanelShown(false), focusRequest: contentPanelFocusRequest, 
-        // Quick open takes focus as it replaces the overlay.
-        returnFocusTo: () => (quickOpenOpen ? null : navigatorReturnTarget()), "data-testid": "content-panel", actions: _jsxs(_Fragment, { children: [navCollections &&
+    const contentPanel = (_jsx(SidePanelHost, { id: CONTENT_PANEL_ID, title: "Content", mode: contentPanelDocked ? 'docked' : 'overlay', opened: contentPanelShown, width: contentPanelWidth, minWidth: CONTENT_PANEL_WIDTH_MIN, maxWidth: CONTENT_PANEL_WIDTH_MAX, onWidthChange: setContentPanelWidth, onClose: () => setContentPanelShown(false), focusRequest: contentPanelFocusRequest, closeOnEscape: contentPanelTransient, 
+        // An entry opened by Enter takes focus in its form instead.
+        returnFocusTo: () => (formFocusPath ? null : navigatorReturnTarget()), onFocusLeave: contentPanelTransient
+            ? (target) => {
+                if (!contentToggleRef.current?.contains(target))
+                    setContentPanelTransient(false);
+            }
+            : undefined, "data-testid": "content-panel", actions: _jsxs(_Fragment, { children: [navCollections &&
                     navCollections.length > 0 &&
                     !branchContentLocked &&
-                    (navCollections[0].onAdd || navCollections[0].onAddSubCollection) && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", children: [_jsx(Tooltip, { label: "Content actions", withinPortal: true, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": "Content actions", children: _jsx(IconDots, { size: 16 }) }) }) }), _jsxs(Menu.Dropdown, { children: [navCollections[0].onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: () => navCollections[0].onAdd?.(), children: "Add entry\u2026" })), navCollections[0].onAddSubCollection && (_jsxs(_Fragment, { children: [navCollections[0].onAdd && _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Admin" }), _jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: () => navCollections[0].onAddSubCollection?.(), children: "Add collection\u2026" })] }))] })] })), _jsx(Tooltip, { label: `${EDITOR_ACTIONS.openEntry} (${quickOpenShortcut})`, withinPortal: true, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: openQuickOpen, "aria-label": EDITOR_ACTIONS.openEntry, "aria-keyshortcuts": quickOpenKeys, "data-testid": "quick-open-button", children: _jsx(IconSearch, { size: 16 }) }) }), _jsx(Tooltip, { label: "Collapse all folders", withinPortal: true, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: handleCollapseAll, "aria-label": "Collapse all folders", children: _jsx(IconChevronUp, { size: 16 }) }) }), _jsx(Tooltip, { label: "Expand all folders", withinPortal: true, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: handleExpandAll, "aria-label": "Expand all folders", children: _jsx(IconChevronDown, { size: 16 }) }) })] }), children: _jsx(Box, { px: "md", children: _jsx(EntryNavigator, { collections: navCollections, items: navCollections
+                    (navCollections[0].onAdd || navCollections[0].onAddSubCollection) && (_jsxs(Menu, { shadow: "md", width: 200, withinPortal: true, position: "bottom-end", 
+                    // Its items open dialogs outside the panel, which would close a transient one.
+                    onOpen: keepContentPanelOpen, children: [_jsx(Tooltip, { label: "Content actions", withinPortal: true, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { variant: "subtle", color: "gray", "aria-label": "Content actions", children: _jsx(IconDots, { size: 16 }) }) }) }), _jsxs(Menu.Dropdown, { children: [navCollections[0].onAdd && (_jsx(Menu.Item, { leftSection: _jsx(IconPlus, { size: 14 }), onClick: () => navCollections[0].onAdd?.(), children: "Add entry\u2026" })), navCollections[0].onAddSubCollection && (_jsxs(_Fragment, { children: [navCollections[0].onAdd && _jsx(Menu.Divider, {}), _jsx(Menu.Label, { children: "Admin" }), _jsx(Menu.Item, { leftSection: _jsx(IconFolderPlus, { size: 14 }), onClick: () => navCollections[0].onAddSubCollection?.(), children: "Add collection\u2026" })] }))] })] })), _jsx(Tooltip, { label: "Collapse all folders", withinPortal: true, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: handleCollapseAll, "aria-label": "Collapse all folders", children: _jsx(IconChevronUp, { size: 16 }) }) }), _jsx(Tooltip, { label: "Expand all folders", withinPortal: true, children: _jsx(ActionIcon, { variant: "subtle", color: "gray", onClick: handleExpandAll, "aria-label": "Expand all folders", children: _jsx(IconChevronDown, { size: 16 }) }) })] }), children: _jsx(Box, { px: "md", children: _jsx(EntryNavigator, { collections: navCollections, items: navCollections
                     ? undefined
                     : entriesState.map((e) => ({
                         path: e.path,
@@ -1289,85 +1423,97 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                         title: e.title,
                         slug: e.slug,
                         status: entryStatusLabel(activeCollections, e),
+                        route: buildPreviewRoute(e, { previewBaseByCollection, contentRoot }),
                         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, readOnlyReason: branchRowsPending
+                    })), selectedPath: selectedPath, onSelect: openEntry, onTreeControllerReady: handleTreeControllerReady, expandedStateRef: treeExpandedStateRef, onExpandedStateChange: handleExpandedStateChange, onDeleteEntry: handleDeleteEntry, onRenameEntry: handleRenameEntry, onReorderEntry: userIsAdmin ? handleReorderEntry : undefined, hiddenRootPath: hiddenRootPath, loading: entriesInitializing, readOnly: branchContentLocked, readOnlyReason: branchPending
                     ? undefined
                     : describeBranchLock({
                         branchStatus: currentBranch?.status,
                         branchReadOnly: currentBranch?.readOnly,
                         branchWriteBlocked: 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, 
-                    // A draft kept for an unavailable entry stays in storage but cannot be saved.
-                    hasUnsavedChanges: !currentEntryUnavailable && !contentReadOnly && isSelectedDirty(), entryHasDraft: isSelectedDirty(), entryReadOnly: currentEntry?.canEdit === false, draftStorageFailed: draftStorageFailed, userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchAccess: currentBranch?.access, 
+                        branchMissing,
+                    }), dirtyPaths: dirtyPaths, reveal: contentReveal, onRevealed: () => setContentReveal(undefined), changedOnly: changedOnly, onChangedOnlyChange: setChangedOnly, unsavedCount: modifiedCount, unsavedEntries: editedFiles, entryListFailed: entriesLoadFailed && entriesState.length === 0, branchNotAvailable: branchShowsNotAvailable, onSwitchBranch: () => openBranchManager(), filterRef: entryFilterRef, filterShortcut: findShortcut, onFilterEnter: contentPanelTransient
+                    ? (path) => {
+                        openEntry(path);
+                        setContentPanelTransient(false);
+                        setFormFocusPath(path);
+                    }
+                    : undefined, onFilterEscape: contentPanelTransient ? () => setContentPanelTransient(false) : undefined, onRowMenuOpen: keepContentPanelOpen }) }) }));
+    return (_jsx(CanopyCMSProvider, { ...(themeOptions ?? {}), children: _jsx(AssetContextProvider, { basePath: basePath, children: _jsx(EditorShell, { topBar: _jsx(EditorHeader, { branchName: branchNameState, branchStatus: currentBranch?.status, busy: busy, modifiedCount: modifiedCount, onShowUnsaved: showUnsaved, draftStorageFailed: draftStorageFailed, userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchAccess: currentBranch?.access, 
                     // Fail-closed for the same reason branchContentLocked above is:
-                    // isProtected/writeBlocked gate real actions in EditorHeader (hiding
-                    // Submit, disabling Save), so a missing wire value must read as
+                    // isProtected/writeBlocked gate real actions in EditorHeader and EntryHeader
+                    // (hiding Submit, disabling Save and Save all), so a missing wire value must read as
                     // "protected"/"blocked", not "unprotected"/"unblocked".
                     // branchWriteBlocked reuses branchContentLocked itself rather than
                     // re-deriving `?? true` a second time here, so there is exactly one
                     // 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: branchLoading, 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: () => {
+                    branchIsProtected: currentBranch?.isProtected ?? true, branchServerProtected: currentBranch?.isProtected, branchReadOnly: currentBranch?.readOnly, branchWriteBlocked: branchContentLocked, branchLoading: branchLoading, branchPending: branchPending, branchMissing: branchMissing, branchToggleRef: branchToggleRef, 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 &&
-                        lastSaved.contentId === currentEntry?.contentId, 
+                    }, onBranchDiscardDrafts: () => handleDiscardDrafts(() => branchToggleRef.current), onBranchManagerOpen: openBranchManager, onNewBranch: () => openBranchManager({ create: true }), onSaveAll: runSaveAll, saveAllProgress: saveAllProgress, 
+                    // On any entry: EntryHeader's `saving` is the open entry's alone.
+                    singleSaving: singleSaving !== null, 
                     // Save all finds each draft's entry in the list, so with none listed it would save nothing.
-                    entryListFailed: entriesLoadFailed && entriesState.length === 0, onSubmit: () => {
+                    entryListFailed: entriesLoadFailed && entriesState.length === 0, onSubmit: (returnFocusTo) => {
                         if (branchNameState && !isSaveAllRunning()) {
-                            handleSubmit(branchNameState).catch(console.error);
+                            handleSubmit(branchNameState, returnFocusTo).catch(console.error);
                         }
-                    }, onWithdraw: () => {
+                    }, onWithdraw: (returnFocusTo) => {
                         if (branchNameState && !isSaveAllRunning()) {
-                            handleWithdraw(branchNameState).catch(console.error);
+                            handleWithdraw(branchNameState, returnFocusTo).catch(console.error);
                         }
-                    } }), 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() &&
+                    } }), rail: _jsx(EditorRail, { contentPanelOpen: contentPanelShown, contentPanelId: CONTENT_PANEL_ID, onContentToggle: () => contentPanelTransient
+                        ? keepContentPanelOpen()
+                        : contentPanelShown
+                            ? setContentPanelShown(false)
+                            : openNavigator(), contentToggleRef: contentToggleRef, contentShortcut: findShortcut, unsavedCount: modifiedCount, 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 && 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);
-                            if (dragging)
-                                setPreviewWidth('fit');
-                        }, arrangement: layout, sideSplitPercent: sideSplitPercent, stackedSplitPercent: stackedSplitPercent, onSplitPercentChange: (arrangement, percent) => {
-                            setSplitPercent(arrangement, percent);
-                            setPreviewWidth('fit');
-                        }, preview: renderPreview && currentEntry && !currentEntryUnavailable
-                            ? renderPreview(currentEntry, displayValue)
-                            : defaultPreview, form: !currentEntry ? (_jsx(CenteredMessage, { children: !branchNameState && busy
-                                ? 'Setting up your branch workspace…'
-                                : entriesInitializing
-                                    ? 'Loading content…'
-                                    : 'Select an item to start editing.' })) : currentEntryUnavailable ? (_jsx(UnavailableEntryNotice, { schemaRefs: currentEntry.unavailable ? [currentEntry.unavailable.schemaRef] : [] })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryLabel: currentEntry.label })) : schema.length > 0 && displayValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(SiteMdxAllowContext.Provider, { value: mdxAllow, children: _jsx(FormRenderer, { notice: hiddenDraftNotice && (_jsx(ReadOnlyDraftNotice, { permanentlyReadOnly: (currentBranch?.isProtected ?? true) ||
-                                            currentBranch?.status === 'archived', 
-                                        // 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, savedValue: loadedValue, commentBlockedReason: commentBlockedReason, removedItemFieldLabel: commentFieldLabel, onGetUserMetadata: getCommentUserMetadata, header: {
-                                        title: currentEntry.label,
-                                        typeLabel: entryTypeLabel(activeCollections, currentEntry),
-                                    }, 
-                                    // The one writer of drafts. Read-only content gets none, whatever a
-                                    // field emits (MDXEditor's mount-time normalisation included).
-                                    onChange: (next) => {
-                                        const contentId = currentEntry?.contentId;
-                                        if (contentId && !contentReadOnlyRef.current) {
-                                            // Every list item keeps a key, whatever field made it.
-                                            const keyed = withItemKeys(schema, next, 'random');
-                                            setDrafts((prev) => ({ ...prev, [contentId]: keyed }));
-                                        }
-                                    }, customRenderers: customRenderers, branch: branchNameState, comments: displayComments, currentEntryPath: selectedPath, currentUserId: commentUserId, canResolve: canResolveAnyComment, focusedFieldPath: focusedFieldPath, highlightThreadId: highlightThreadId, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, fieldErrors: fieldErrors, format: currentEntry.format, conflictNotice: !!(currentEntry?.contentId &&
-                                        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: 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) => {
+                        : 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: _jsxs(Box, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, children: [_jsx(EntryHeader, { currentEntry: currentEntry, 
+                            // True exactly while the form below shows "Setting up…" or "Loading content…".
+                            entryLoading: !currentEntry && ((!branchNameState && busy) || entriesInitializing), branchName: branchNameState, busy: busy, breadcrumbSegments: breadcrumbSegments, 
+                            // A draft kept for an unavailable entry stays in storage but cannot be saved.
+                            hasUnsavedChanges: !currentEntryUnavailable && !contentReadOnly && isSelectedDirty(), entryHasDraft: isSelectedDirty(), entryReadOnly: currentEntry?.canEdit === false, entryUnavailable: currentEntryUnavailable, draftStorageFailed: draftStorageFailed, branchStatus: currentBranch?.status, branchReadOnly: currentBranch?.readOnly, branchWriteBlocked: branchContentLocked, branchLoading: branchLoading, branchPending: branchPending, branchMissing: branchMissing, onCollectionOpen: (path) => revealInContentPanel({ kind: 'collection', path }), onEntryReveal: () => currentEntry && revealInContentPanel({ kind: 'entry', path: currentEntry.path }), navigatorToggleRef: navigatorToggleRef, onFileReload: () => handleReload(() => navigatorToggleRef.current), onFileDiscardDraft: () => handleDiscardFileDraft(() => navigatorToggleRef.current), onEntryRename: () => currentEntry && handleRenameEntry(currentEntry.path, true), onEntryDelete: () => currentEntry && handleDeleteEntry(currentEntry.path, true), onSave: currentEntryUnavailable ? noop : handleSave, saveAllRunning: !!saveAllProgress, saving: singleSaving?.branch === branchNameState &&
+                                singleSaving.contentId === currentEntry?.contentId, savedSignal: lastSaved?.seq, savedHere: lastSaved?.branch === branchNameState &&
+                                lastSaved.contentId === currentEntry?.contentId }), _jsx(Box, { style: { flex: '1 1 0%', minHeight: 0 }, 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);
+                                    if (dragging)
+                                        setPreviewWidth('fit');
+                                }, arrangement: layout, sideSplitPercent: sideSplitPercent, stackedSplitPercent: stackedSplitPercent, onSplitPercentChange: (arrangement, percent) => {
+                                    setSplitPercent(arrangement, percent);
+                                    setPreviewWidth('fit');
+                                }, preview: renderPreview && currentEntry && !currentEntryUnavailable
+                                    ? renderPreview(currentEntry, displayValue)
+                                    : defaultPreview, form: !currentEntry && branchShowsNotAvailable ? (_jsx(Center, { h: "100%", children: _jsx(BranchNotAvailableNotice, { align: "center", onSwitchBranch: () => openBranchManager(), "data-testid": "form-branch-not-available" }) })) : !currentEntry ? (_jsx(CenteredMessage, { children: !branchNameState && busy
+                                        ? 'Setting up your branch workspace…'
+                                        : entriesInitializing
+                                            ? 'Loading content…'
+                                            : 'Select an item to start editing.' })) : currentEntryUnavailable ? (_jsx(UnavailableEntryNotice, { schemaRefs: currentEntry.unavailable ? [currentEntry.unavailable.schemaRef] : [] })) : currentEntry.canEdit === false ? (_jsx(NoEditPermissionNotice, { entryLabel: currentEntry.label })) : schema.length > 0 && displayValue ? (_jsx(EntryLinkContext.Provider, { value: entryLinkContextValue, children: _jsx(SiteMdxAllowContext.Provider, { value: mdxAllow, children: _jsx(FormRenderer, { notice: hiddenDraftNotice && (_jsx(ReadOnlyDraftNotice, { permanentlyReadOnly: (currentBranch?.isProtected ?? true) ||
+                                                    currentBranch?.status === 'archived', 
+                                                // 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, savedValue: loadedValue, commentBlockedReason: commentBlockedReason, removedItemFieldLabel: commentFieldLabel, onGetUserMetadata: getCommentUserMetadata, header: {
+                                                title: currentEntry.label,
+                                                typeLabel: entryTypeLabel(activeCollections, currentEntry),
+                                            }, 
+                                            // The one writer of drafts. Read-only content gets none, whatever a
+                                            // field emits (MDXEditor's mount-time normalisation included).
+                                            onChange: (next) => {
+                                                const contentId = currentEntry?.contentId;
+                                                if (contentId && !contentReadOnlyRef.current) {
+                                                    // Every list item keeps a key, whatever field made it.
+                                                    const keyed = withItemKeys(schema, next, 'random');
+                                                    setDrafts((prev) => ({ ...prev, [contentId]: keyed }));
+                                                }
+                                            }, customRenderers: customRenderers, branch: branchNameState, comments: displayComments, currentEntryPath: selectedPath, currentUserId: commentUserId, canResolve: canResolveAnyComment, focusedFieldPath: focusedFieldPath, highlightThreadId: highlightThreadId, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, fieldErrors: fieldErrors, format: currentEntry.format, conflictNotice: !!(currentEntry?.contentId &&
+                                                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(BranchesDrawer, { opened: branchManagerOpen, onClose: () => setBranchManagerOpen(false), confirmOpen: branchConfirmOpen, returnFocusTo: branchReturnTarget, children: _jsx(BranchManager, { startCreating: branchManagerOpening.create, branches: branchSummaries, mode: operatingMode, user: userContext, currentBranchName: currentBranch?.name ?? branchNameState, currentWorkflowBlockedReason: saveAllProgress ? 'Wait for Save all to finish.' : undefined, onSelect: async (name) => {
                                     try {
                                         await handleBranchChange(name);
                                         setBranchManagerOpen(false);
@@ -1390,7 +1536,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                     handleRequestChanges(name).catch((err) => console.error(err));
                                 }, onDelete: (name) => {
                                     handleDelete(name).catch((err) => console.error(err));
-                                }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: commentUserId, canResolve: canResolveAnyComment, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, onGetOwnerMetadata: getCommentUserMetadata, onGetCommentUserMetadata: getCommentUserMetadata }) }), branchNameState && (_jsx(CommentsPanel, { opened: commentsPanelOpen, branchName: branchNameState, comments: displayComments, canResolve: canResolveAnyComment, currentUserId: commentUserId, entryLabel: commentEntryLabel, fieldLabel: commentFieldLabel, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, onClose: () => setCommentsPanelOpen(false), onJumpToField: jumpToThreadField, onGetUserMetadata: getCommentUserMetadata, onJumpToEntry: handleJumpToEntry, onJumpToBranch: handleJumpToBranch }, branchNameState)), userIsAdmin && (_jsx(GroupManager, { opened: groupManagerOpen, onClose: () => setGroupManagerOpen(false), returnFocusTo: settingsReturnTarget, internalGroups: groupsData, loading: groupsLoading, canEdit: userIsAdmin, onSave: handleSaveGroups, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onSearchExternalGroups: handleSearchExternalGroups })), userIsAdmin && (_jsx(PermissionManager, { opened: permissionManagerOpen, onClose: () => setPermissionManagerOpen(false), returnFocusTo: settingsReturnTarget, collections: activeCollections, contentRoot: contentRoot, permissions: permissionsData, loading: permissionsLoading, canEdit: userIsAdmin, onSave: handleSavePermissions, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onListGroups: handleListGroups })), userIsAdmin && (_jsx(SystemHealthPanel, { opened: systemHealthOpen, onClose: () => setSystemHealthOpen(false), returnFocusTo: settingsReturnTarget })), _jsx(MediaLibrary, { opened: mediaLibraryOpen, onClose: () => setMediaLibraryOpen(false), mode: "manage", returnFocusTo: () => mediaButtonRef.current }), userIsAdmin && (_jsx(CollectionEditor, { isOpen: collectionEditorOpen, editingCollection: editingCollection, parentPath: collectionEditorParentPath, availableSchemas: availableSchemas, onSave: handleCollectionSave, onAddEntryType: editingCollection
+                                }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: commentUserId, canResolve: canResolveAnyComment, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, onGetOwnerMetadata: getCommentUserMetadata, onGetCommentUserMetadata: getCommentUserMetadata }, branchManagerOpening.seq) }), branchNameState && (_jsx(CommentsPanel, { opened: commentsPanelOpen, branchName: branchNameState, comments: displayComments, canResolve: canResolveAnyComment, currentUserId: commentUserId, entryLabel: commentEntryLabel, fieldLabel: commentFieldLabel, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, onClose: () => setCommentsPanelOpen(false), onJumpToField: jumpToThreadField, onGetUserMetadata: getCommentUserMetadata, onJumpToEntry: handleJumpToEntry, onJumpToBranch: handleJumpToBranch }, branchNameState)), userIsAdmin && (_jsx(GroupManager, { opened: groupManagerOpen, onClose: () => setGroupManagerOpen(false), returnFocusTo: settingsReturnTarget, internalGroups: groupsData, loading: groupsLoading, canEdit: userIsAdmin, onSave: handleSaveGroups, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onSearchExternalGroups: handleSearchExternalGroups })), userIsAdmin && (_jsx(PermissionManager, { opened: permissionManagerOpen, onClose: () => setPermissionManagerOpen(false), returnFocusTo: settingsReturnTarget, collections: activeCollections, contentRoot: contentRoot, permissions: permissionsData, loading: permissionsLoading, canEdit: userIsAdmin, onSave: handleSavePermissions, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onListGroups: handleListGroups })), userIsAdmin && (_jsx(SystemHealthPanel, { opened: systemHealthOpen, onClose: () => setSystemHealthOpen(false), returnFocusTo: settingsReturnTarget })), _jsx(MediaLibrary, { opened: mediaLibraryOpen, onClose: () => setMediaLibraryOpen(false), mode: "manage", returnFocusTo: () => mediaButtonRef.current }), userIsAdmin && (_jsx(CollectionEditor, { isOpen: collectionEditorOpen, editingCollection: editingCollection, parentPath: collectionEditorParentPath, availableSchemas: availableSchemas, onSave: handleCollectionSave, onAddEntryType: editingCollection
                                 ? (path, entryType) => addEntryType(path, entryType)
                                 : undefined, onUpdateEntryType: editingCollection
                                 ? (path, name, updates) => updateEntryType(path, name, updates)