canopycms 0.7.0 → 0.8.0

package/dist/editor/BranchManager.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ActionIcon, Badge, Button, Group, Menu, Paper, ScrollArea, Stack, Text, TextInput, Textarea, Collapse, Tooltip, } from '@mantine/core';
 import { IconDots, IconExternalLink } from '@tabler/icons-react';
 import { BranchComments } from './comments/BranchComments.js';
@@ -9,10 +9,12 @@ import { BranchAccessList } from './components/BranchAccessList.js';
 // Import directly from helpers to avoid server-only code in authorization barrel
 import { isAdmin, isLockedOutOfBranch, isReviewer } from '../authorization/helpers.js';
 import { clientOperatingStrategy } from '../operating-mode/client.js';
+import { parseCreatedBranchName } from '../paths/validation.js';
 import { DestructiveMenuItem } from './components/DestructiveMenuItem.js';
 import { ReasonedMenuItem } from './components/ReasonedMenuItem.js';
 import { RelativeTime } from './components/RelativeTime.js';
 import { branchStatusPresentation } from './branch-status.js';
+import { branchAddress, displayBranchName } from './branch-names.js';
 import { CLOSED_PULL_REQUEST_REASON, EDITOR_ACTIONS } from './copy.js';
 import { isReviewerOfOthersReview } from '../authorization/review-role.js';
 import { SYSTEM_USER_ID } from '../system-users.js';
@@ -183,9 +185,9 @@ const BranchCard = ({ branch: b, isCurrent, workflowBlockedReason, user, onSelec
     const showViewPullRequest = !!b.pullRequestUrl;
     const showDelete = !b.isProtected && (userIsAdmin || (!!user && b.createdBy === user.userId));
     const hasMenu = menuActions.length > 0 || showViewPullRequest || showDelete;
-    const menuLabel = `More actions for ${b.name}`;
+    const menuLabel = `More actions for ${displayBranchName(b)}`;
     const [menuOpen, setMenuOpen] = useState(false);
-    return (_jsxs(Paper, { withBorder: true, p: "md", shadow: "xs", "aria-current": isCurrent ? 'true' : undefined, "data-current": isCurrent || undefined, "data-testid": `branch-list-item-${b.name}`, children: [_jsxs(Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [_jsxs(Stack, { gap: 4, children: [_jsxs(Group, { gap: "xs", children: [_jsx(Text, { fw: 600, children: b.name }), isCurrent && (_jsx(Badge, { color: "brand", variant: "filled", "data-testid": `branch-current-badge-${b.name}`, children: "Current" })), statusBadge && (_jsx(Badge, { color: statusBadge.color, variant: statusBadge.variant, "data-testid": `branch-status-badge-${b.name}`, "data-status": b.status, "data-protected": b.isProtected || undefined, children: statusBadge.label })), b.status === 'archived' && b.mergedAt && (_jsx(Badge, { color: "teal", variant: "light", "data-testid": `branch-merged-badge-${b.name}`, children: "Merged" })), b.pullRequestNumber && (_jsxs(Badge, { color: b.pullRequestState === 'closed'
+    return (_jsxs(Paper, { withBorder: true, p: "md", shadow: "xs", "aria-current": isCurrent ? 'true' : undefined, "data-current": isCurrent || undefined, "data-testid": `branch-list-item-${b.name}`, children: [_jsxs(Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [_jsxs(Stack, { gap: 4, children: [_jsxs(Group, { gap: "xs", children: [_jsx(Text, { fw: 600, children: displayBranchName(b) }), isCurrent && (_jsx(Badge, { color: "brand", variant: "filled", "data-testid": `branch-current-badge-${b.name}`, children: "Current" })), statusBadge && (_jsx(Badge, { color: statusBadge.color, variant: statusBadge.variant, "data-testid": `branch-status-badge-${b.name}`, "data-status": b.status, "data-protected": b.isProtected || undefined, children: statusBadge.label })), b.status === 'archived' && b.mergedAt && (_jsx(Badge, { color: "teal", variant: "light", "data-testid": `branch-merged-badge-${b.name}`, children: "Merged" })), b.pullRequestNumber && (_jsxs(Badge, { color: b.pullRequestState === 'closed'
                                             ? 'red'
                                             : b.pullRequestState === 'merged'
                                                 ? 'violet'
@@ -206,10 +208,29 @@ export const BranchManager = ({ branches, mode, user, currentBranchName, current
     const [newBranchTitle, setNewBranchTitle] = useState('');
     const [newBranchDescription, setNewBranchDescription] = useState('');
     const [creating, setCreating] = useState(false);
+    // Why a create refused the name, shown while that name is still what is typed.
+    const [refused, setRefused] = useState(null);
+    const nameInputRef = useRef(null);
+    // Set by a refusal: the name field takes focus once it is enabled again, so its error is read.
+    const focusNameRef = useRef(false);
+    useEffect(() => {
+        if (creating || !focusNameRef.current)
+            return;
+        focusNameRef.current = false;
+        nameInputRef.current?.focus();
+    }, [creating, refused]);
     // Read synchronously: state would not yet show a first click to a second one in the same tick.
     const creatingRef = useRef(false);
+    // The server's own rules, so the field says what will be created, or why nothing can be.
+    const typedBranchName = newBranchName.trim();
+    const createdBranchName = typedBranchName ? parseCreatedBranchName(typedBranchName) : null;
+    const nameError = createdBranchName?.ok === false
+        ? createdBranchName.error
+        : refused?.typed === typedBranchName
+            ? refused.reason
+            : undefined;
     const handleCreate = async () => {
-        if (creatingRef.current || !newBranchName.trim())
+        if (creatingRef.current || !createdBranchName?.ok)
             return;
         creatingRef.current = true;
         try {
@@ -217,12 +238,18 @@ export const BranchManager = ({ branches, mode, user, currentBranchName, current
                 return;
             setCreating(true);
             const created = await onCreate?.({
-                name: newBranchName.trim(),
+                name: typedBranchName,
                 title: newBranchTitle.trim() || undefined,
                 description: newBranchDescription.trim() || undefined,
             });
             if (created === false)
                 return;
+            if (typeof created === 'object') {
+                focusNameRef.current = true;
+                setRefused({ typed: typedBranchName, reason: created.refusal });
+                return;
+            }
+            setRefused(null);
             setNewBranchName('');
             setNewBranchTitle('');
             setNewBranchDescription('');
@@ -240,5 +267,23 @@ export const BranchManager = ({ branches, mode, user, currentBranchName, current
         ]
         : branches;
     const hasBranchThreads = comments.some((t) => t.type === 'branch');
-    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "branch-manager", children: [currentUserId && onAddComment && onResolveThread && hasBranchThreads && (_jsx(Stack, { pt: "sm", children: _jsx(BranchComments, { comments: comments, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetCommentUserMetadata }) })), !!supportsBranching && (_jsxs(Stack, { gap: "sm", pt: "sm", children: [_jsx(Button, { variant: "light", size: "sm", fullWidth: true, onClick: () => setShowCreateForm(!showCreateForm), disabled: creating, "data-testid": "create-branch-button", children: showCreateForm ? 'Cancel' : `${EDITOR_ACTIONS.newBranch}…` }), _jsx(Collapse, { in: showCreateForm, children: _jsx(Paper, { withBorder: true, p: "md", children: _jsxs(Stack, { gap: "sm", children: [_jsx(TextInput, { label: "Branch name", placeholder: "feature/my-branch", value: newBranchName, onChange: (e) => setNewBranchName(e.target.value), required: true, disabled: creating, "data-autofocus": startCreating || undefined, "data-testid": "branch-name-input" }), _jsx(TextInput, { label: "Title", placeholder: "Brief description", value: newBranchTitle, onChange: (e) => setNewBranchTitle(e.target.value), disabled: creating, "data-testid": "branch-title-input" }), _jsx(Textarea, { label: "Description", placeholder: "Detailed description of the changes", value: newBranchDescription, onChange: (e) => setNewBranchDescription(e.target.value), minRows: 2, disabled: creating, "data-testid": "branch-description-textarea" }), _jsx(Button, { size: "sm", onClick: handleCreate, disabled: !newBranchName.trim(), loading: creating, fullWidth: true, "data-testid": "create-branch-submit", children: "Create branch" })] }) }) })] })), _jsx(ScrollArea, { style: { flex: 1 }, pb: "md", children: branches.length === 0 ? (_jsx(Text, { size: "sm", c: "dimmed", py: "md", children: !supportsBranching ? 'Branch management is not available.' : 'No branches available.' })) : (_jsx(Stack, { gap: "sm", children: orderedBranches.map((b) => (_jsx(BranchCard, { branch: b, isCurrent: b.name === currentBranchName, workflowBlockedReason: b.name === currentBranchName ? currentWorkflowBlockedReason : undefined, user: user, onSelect: onSelect, onSubmit: onSubmit, onWithdraw: onWithdraw, onApprove: onApprove, onRequestChanges: onRequestChanges, onDelete: onDelete, onGetUserMetadata: onGetUserMetadata, onGetOwnerMetadata: onGetOwnerMetadata }, b.name))) })) })] }));
+    return (_jsxs(Stack, { h: "100%", style: { display: 'flex', flexDirection: 'column' }, gap: 0, "data-testid": "branch-manager", children: [currentUserId && onAddComment && onResolveThread && hasBranchThreads && (_jsx(Stack, { pt: "sm", children: _jsx(BranchComments, { comments: comments, currentUserId: currentUserId, canResolve: canResolve, onAddComment: onAddComment, onResolveThread: onResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: onGetCommentUserMetadata }) })), !!supportsBranching && (_jsxs(Stack, { gap: "sm", pt: "sm", children: [_jsx(Button, { variant: "light", size: "sm", fullWidth: true, onClick: () => {
+                            if (showCreateForm)
+                                setRefused(null);
+                            setShowCreateForm(!showCreateForm);
+                        }, disabled: creating, "data-testid": "create-branch-button", children: showCreateForm ? 'Cancel' : `${EDITOR_ACTIONS.newBranch}…` }), _jsx(Collapse, { in: showCreateForm, children: _jsx(Paper, { withBorder: true, p: "md", children: _jsxs(Stack, { gap: "sm", children: [_jsx(TextInput, { label: "Branch name", placeholder: "spring-update", 
+                                        // Below the input, so a preview that wraps never moves the field being typed in.
+                                        inputWrapperOrder: ['label', 'input', 'description', 'error'], 
+                                        // Only when sanitizing changed what was typed, and never beside an error.
+                                        description: !nameError &&
+                                            createdBranchName?.ok &&
+                                            createdBranchName.shortName !== typedBranchName
+                                            ? `Will be named ${createdBranchName.shortName}`
+                                            : undefined, error: nameError, value: newBranchName, onChange: (e) => setNewBranchName(e.target.value), required: true, disabled: creating, ref: nameInputRef, "data-autofocus": startCreating || undefined, "data-testid": "branch-name-input" }), _jsx(TextInput, { label: "Title", placeholder: "Brief description", value: newBranchTitle, onChange: (e) => setNewBranchTitle(e.target.value), disabled: creating, "data-testid": "branch-title-input" }), _jsx(Textarea, { label: "Description", placeholder: "Detailed description of the changes", value: newBranchDescription, onChange: (e) => setNewBranchDescription(e.target.value), minRows: 2, disabled: creating, "data-testid": "branch-description-textarea" }), _jsx(Button, { size: "sm", onClick: handleCreate, disabled: !createdBranchName?.ok, loading: creating, fullWidth: true, "data-testid": "create-branch-submit", children: "Create branch" })] }) }) })] })), _jsx(ScrollArea, { style: { flex: 1 }, pb: "md", children: branches.length === 0 ? (_jsx(Text, { size: "sm", c: "dimmed", py: "md", children: !supportsBranching ? 'Branch management is not available.' : 'No branches available.' })) : (_jsx(Stack, { gap: "sm", children: orderedBranches.map((b) => {
+                        // The editor resolves a shadowed outside branch's full name to the namespace branch
+                        // whose short name it is, so a card's actions name its branch by `branchAddress`.
+                        const address = branchAddress(branches, b);
+                        const act = (run) => run && (() => run(address));
+                        return (_jsx(BranchCard, { branch: b, isCurrent: b.name === currentBranchName, workflowBlockedReason: b.name === currentBranchName ? currentWorkflowBlockedReason : undefined, user: user, onSelect: act(onSelect), onSubmit: act(onSubmit), onWithdraw: act(onWithdraw), onApprove: act(onApprove), onRequestChanges: act(onRequestChanges), onDelete: act(onDelete), onGetUserMetadata: onGetUserMetadata, onGetOwnerMetadata: onGetOwnerMetadata }, b.name));
+                    }) })) })] }));
 };

package/dist/editor/Editor.js

@@ -6,7 +6,7 @@ import { IconChevronDown, IconChevronUp, IconDots, IconFolderPlus, IconPlus, } f
 import { useHotkeys, useMediaQuery } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 const noop = () => { };
-import { EntryNavigator } from './EntryNavigator.js';
+import { EntryNavigator, } from './EntryNavigator.js';
 import { FormRenderer } from './FormRenderer.js';
 import { PreviewPane } from './PreviewPane.js';
 import { displayPreviewPath, previewPageKey } from './preview-path.js';
@@ -29,6 +29,9 @@ import { fieldBreadcrumb } from './field-breadcrumb.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 { branchAddress, displayBranchName } from './branch-names.js';
+import { useBranchChangesData, useEntryChangeData } from './hooks/useBranchChangesData.js';
+import { LazyEntryChangesDrawer } from './components/LazyEntryChangesDrawer.js';
 import { CONTENT_PANEL_WIDTH_MAX, CONTENT_PANEL_WIDTH_MIN, editorLayoutStorageKey, } from './hooks/useEditorLayout.js';
 import { EntrySchemaUnavailableError } from './hooks/useEntryManager.js';
 import { useEntryLinkResolution } from './hooks/useEntryLinkResolution.js';
@@ -64,7 +67,6 @@ 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 = [];
@@ -165,7 +167,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     // Reloads the open branch's comments after a request for changes, whose note is a comment; the
     // comment system is built further down.
     const reloadCommentsRef = useRef(() => { });
-    const { branchName: branchNameState, setBranchName, branchSummaries, currentBranch, branchesLoadFailed, branchesLoaded, addCreatedBranch, handleSubmit, handleWithdraw, handleApprove, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
+    const { branchName: branchNameState, setBranchName, branches, branchSummaries, currentBranch, currentAddress, listedBranch, namesBranch, urlBranchName, branchesLoadFailed, branchesLoaded, addCreatedBranch, handleSubmit, handleWithdraw, handleApprove, handleRequestChanges, handleDelete, handleReloadBranchData, loadBranches, } = useBranchManager({
         initialBranch: branchName,
         operatingMode,
         setBusy: setBranchesLoading,
@@ -187,6 +189,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     // of unlocked that invites a click the server rejects -- and the pane shows a
     // loading state during that window anyway.
     const branchContentLocked = currentBranch?.writeBlocked ?? true;
+    // What the page calls the open branch; everything keyed or sent per branch uses branchNameState.
+    const branchLabel = currentBranch ? displayBranchName(currentBranch) : branchNameState;
     const branchLoading = !currentBranch && (branchesLoading || branchSummaries.length === 0);
     // No lock reason is true yet while the list is unanswered; once it has failed, or answered
     // without this branch, the lock says which.
@@ -216,6 +220,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     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 () => { });
+    // Set once the changes read exists; it waits on the panel state, declared after the entries.
+    const reloadChangesRef = useRef(() => { });
     // 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,
@@ -223,7 +229,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         branchName: branchNameState,
         collections,
         resolvePreviewSrc: (entry) => buildPreviewSrc(entry, {
-            branchName: branchNameState,
+            branchName: urlBranchName(branchNameState),
             previewBaseByCollection,
             previewPrefix,
             contentRoot,
@@ -232,7 +238,11 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         resolvePreviewRoute: (entry) => buildPreviewRoute(entry, { previewBaseByCollection, contentRoot }),
         setBusy: setEntriesLoading,
         branchBarState,
-        switchBranch: (branch) => switchBranchRef.current(branch),
+        switchBranch: (branch, superseded) => switchBranchRef.current(branch, superseded),
+        // A short name in the URL is no switch to another branch.
+        sameBranch: namesBranch,
+        urlBranchName,
+        onContentRefresh: (branch) => reloadChangesRef.current(branch),
         // To the entry menu, which names the entry opened; a dialog keeps focus.
         onHistoryRestore: () => requestAnimationFrame(() => {
             if (!document.activeElement?.closest('[role="dialog"]')) {
@@ -337,22 +347,30 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     // 4. Branch actions (depends on resolveUnsaved, setBranchName)
     const { handleBranchChange, confirmCreate: confirmCreateBranch, handleCreateBranch, confirmOpen: branchConfirmOpen, } = useBranchActions({
         branchName: branchNameState,
+        branchLabel,
         setBranchName,
         getUnsaved: resolveUnsaved,
         onReloadBranches: () => loadBranches(),
         onBranchCreated: addCreatedBranch,
+        urlBranchName,
+        sameBranch: namesBranch,
         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',
-            });
+    // Only a Back or Forward calls this: it switches to the listed branch, by an address that opens
+    // it alone, replacing the entry it arrived at. With no listing, the name is unchecked and could
+    // be either form, so the move is refused.
+    switchBranchRef.current = async (branch, superseded) => {
+        const listed = listedBranch(branch);
+        if (!listed) {
+            if (branches.length > 0) {
+                notifications.show({
+                    message: `Branch “${branch}” no longer exists or you can no longer open it, so you're still on “${branchLabel}”.`,
+                    color: 'yellow',
+                });
+            }
             throw new Error(`Branch ${branch} is not listed`);
         }
-        await handleBranchChange(branch);
+        await handleBranchChange(branchAddress(branches, listed), { push: false, superseded });
     };
     // 5. Comment system (depends on branchNameState)
     const { comments, getCommentUser, focusedFieldPath, highlightThreadId, commentsPanelOpen, setCommentsPanelOpen, handleAddComment, handleResolveThread, handleJumpToField, handleJumpToEntry, handleJumpToBranch, loadComments, } = useCommentSystem({
@@ -367,8 +385,8 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         onRevealForm: revealForm,
     });
     reloadCommentsRef.current = (branch) => {
-        if (sanitizeBranchName(branch) === sanitizeBranchName(branchNameState))
-            void loadComments(branch);
+        if (branch === branchNameState)
+            void loadComments(branchNameState);
     };
     const { groupsData, groupsLoading, handleSaveGroups, handleSearchUsers, handleGetUserMetadata, handleSearchExternalGroups, } = useGroupManager({ isOpen: groupManagerOpen });
     // The comments and branches responses name their people, without email; a privileged lookup
@@ -1186,7 +1204,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                 // 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);
+                setEntryFilter('all');
                 const field = entryFilterRef.current;
                 if (field && document.activeElement === field)
                     field.select();
@@ -1211,14 +1229,115 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         if (!contentPanelShown)
             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]);
+    // The content panel's All / Unsaved / 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 sets: both reset it.
+    const [entryFilter, setEntryFilter] = useState('all');
+    useEffect(() => setEntryFilter('all'), [branchNameState]);
     const showUnsaved = () => {
-        setChangedOnly(true);
-        revealInContentPanel({ kind: 'changed' });
+        setEntryFilter('unsaved');
+        revealInContentPanel({ kind: 'unsaved' });
+    };
+    // What the branch changes against its base, read while the panel shows so Changed has its count,
+    // and while an entry is open so its header knows to offer "Show changes".
+    // The protected base has nothing to compare. Changed keeps its place while the branch list loads,
+    // so the control doesn't re-flow then, and reads once the branch is known not to be the base. A
+    // list that failed, or lacks the branch, offers none, so a branch just created can lack Changed
+    // until the list catches up.
+    const changesOffered = branchPending || currentBranch?.isProtected === false;
+    const changesAvailable = !!currentBranch && currentBranch.isProtected === false;
+    const changesRead = (contentPanelShown || !!currentEntry) && changesAvailable;
+    const branchChanges = useBranchChangesData(apiClient, branchNameState, changesRead);
+    reloadChangesRef.current = (branch) => {
+        if (branch === branchNameState)
+            void branchChanges.reload();
     };
+    // Submit, withdraw and a review move the branch's status, which no entries refresh follows.
+    const changesStatusRef = useRef({ branch: branchNameState, status: currentBranch?.status });
+    useEffect(() => {
+        const seen = changesStatusRef.current;
+        changesStatusRef.current = { branch: branchNameState, status: currentBranch?.status };
+        if (seen.branch === branchNameState && seen.status && seen.status !== currentBranch?.status) {
+            void branchChanges.reload();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `reload` is fresh each branch; only a status move matters
+    }, [branchNameState, currentBranch?.status]);
+    // "Show changes": the entry compared stays set after a close, so the closing drawer keeps it.
+    const [changesSubject, setChangesSubject] = useState();
+    const [changesOpen, setChangesOpen] = useState(false);
+    // Its comparison stays keyed until the close transition ends, so the closing drawer keeps it.
+    const [changesShown, setChangesShown] = useState(false);
+    // Who opened the drawer, and the control that stands in for it once it is gone.
+    const changesOpenerRef = useRef({
+        el: null,
+        standIn: () => null,
+    });
+    const showChangesRef = useRef(null);
+    useEffect(() => {
+        setChangesOpen(false);
+        setChangesShown(false);
+    }, [branchNameState]);
+    const entryChange = useEntryChangeData(apiClient, branchNameState, (changesOpen || changesShown) && changesSubject
+        ? {
+            logicalPath: changesSubject.logicalPath,
+            from: changesSubject.from,
+            id: changesSubject.contentId,
+        }
+        : undefined);
+    const openEntryChange = currentEntry &&
+        branchChanges.data?.entries.find((e) => e.status !== 'deleted' && e.logicalPath === currentEntry.path);
+    const referenceTitles = useMemo(() => new Map(entriesState.map((e) => [e.contentId, e.title ?? e.label])), [entriesState]);
+    const referenceTitle = useMemo(() => (id) => referenceTitles.get(id), [referenceTitles]);
+    /** A logical path in the labels the content tree shows: "Blog › hello". */
+    const humanEntryPath = (logicalPath) => {
+        const parts = logicalPath.split('/').filter(Boolean);
+        const collections = parts
+            .slice(1, -1)
+            .map((_, i) => collectionLabels.get(parts.slice(0, i + 2).join('/')))
+            .filter((label) => !!label);
+        return [...collections, parts[parts.length - 1]].join(' › ');
+    };
+    const showEntryChanges = (entry, title, from) => {
+        // The header's button gives way to the entry menu's trigger; a deleted entry's row, gone with
+        // its panel, to the rail's Content button, never to another entry's controls.
+        changesOpenerRef.current = {
+            el: rememberOpener(),
+            standIn: from === 'header'
+                ? () => showChangesRef.current ?? navigatorToggleRef.current ?? contentToggleRef.current
+                : () => contentToggleRef.current,
+        };
+        // A deleted entry has no row to read a schema from, so it borrows its type's from a sibling.
+        const fields = entriesState.find((e) => e.path === entry.logicalPath)?.schema ??
+            entriesState.find((e) => e.collectionPath === entry.collectionPath && e.entryType === entry.entryType)?.schema ??
+            EMPTY_SCHEMA;
+        setChangesSubject({
+            logicalPath: entry.logicalPath,
+            contentId: entry.contentId,
+            status: entry.status,
+            title,
+            fields,
+            ...(entry.previousLogicalPath && {
+                from: entry.previousLogicalPath,
+                movedFromLabel: humanEntryPath(entry.previousLogicalPath),
+            }),
+        });
+        setChangesOpen(true);
+        setChangesShown(true);
+    };
+    const changesReturnTarget = () => returnTarget(changesOpenerRef.current.el, changesOpenerRef.current.standIn);
+    // Where a refused comparison can still be looked at: the entry itself, if the branch has it and
+    // it isn't the one open, and the pull request, for those who review it.
+    const changesOpenEntry = changesSubject &&
+        changesSubject.status !== 'deleted' &&
+        changesSubject.logicalPath !== currentEntry?.path &&
+        entriesState.some((e) => e.path === changesSubject.logicalPath)
+        ? () => {
+            setChangesOpen(false);
+            openEntry(changesSubject.logicalPath);
+        }
+        : undefined;
+    const changesPullRequestUrl = isReviewer(userContext?.groups)
+        ? currentBranch?.pullRequestUrl
+        : undefined;
     const runSaveAll = () => {
         void handleSaveAll()
             .then((result) => {
@@ -1459,14 +1578,22 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                         branchMissing,
                         reviewing: branchReviewing,
                         pullRequestClosed: branchPullRequestClosed,
-                    }), 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
+                    }), dirtyPaths: dirtyPaths, reveal: contentReveal, onRevealed: () => setContentReveal(undefined), entryFilter: entryFilter === 'changed' && !changesOffered ? 'all' : entryFilter, onEntryFilterChange: setEntryFilter, onShowUnsaved: showUnsaved, onShowDeletedChanges: (entry, label) => showEntryChanges(entry, label, 'deleted row'), branchChanges: changesOffered
+                    ? {
+                        base: branchChanges.data?.base ?? currentBranch?.baseBranch ?? 'the base branch',
+                        data: branchChanges.data,
+                        error: branchChanges.error,
+                        onRetry: () => void branchChanges.reload(),
+                        retrying: branchChanges.isValidating,
+                    }
+                    : undefined, 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, branchPullRequestState: currentBranch?.pullRequestState, branchAccess: currentBranch?.access, 
+    return (_jsx(CanopyCMSProvider, { ...(themeOptions ?? {}), children: _jsx(AssetContextProvider, { basePath: basePath, children: _jsx(EditorShell, { topBar: _jsx(EditorHeader, { branchName: branchNameState, branchLabel: branchLabel, branchStatus: currentBranch?.status, busy: busy, modifiedCount: modifiedCount, onShowUnsaved: showUnsaved, draftStorageFailed: draftStorageFailed, userContext: userContext, branchCreatedBy: currentBranch?.createdBy, branchPullRequestState: currentBranch?.pullRequestState, branchAccess: currentBranch?.access, 
                     // Fail-closed for the same reason branchContentLocked above is:
                     // isProtected/writeBlocked gate real actions in EditorHeader and EntryHeader
                     // (hiding Submit, disabling Save and Save all), so a missing wire value must read as
@@ -1482,19 +1609,19 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                     // Save all finds each draft's entry in the list, so with none listed it would save nothing.
                     entryListFailed: entriesLoadFailed && entriesState.length === 0, onSubmit: (returnFocusTo) => {
                         if (branchNameState && !isSaveAllRunning()) {
-                            handleSubmit(branchNameState, returnFocusTo).catch(console.error);
+                            handleSubmit(currentAddress, returnFocusTo).catch(console.error);
                         }
                     }, onWithdraw: (returnFocusTo) => {
                         if (branchNameState && !isSaveAllRunning()) {
-                            handleWithdraw(branchNameState, returnFocusTo).catch(console.error);
+                            handleWithdraw(currentAddress, returnFocusTo).catch(console.error);
                         }
                     }, onApprove: (returnFocusTo) => {
                         if (branchNameState && !isSaveAllRunning()) {
-                            handleApprove(branchNameState, returnFocusTo).catch(console.error);
+                            handleApprove(currentAddress, returnFocusTo).catch(console.error);
                         }
                     }, onRequestChanges: (returnFocusTo) => {
                         if (branchNameState && !isSaveAllRunning()) {
-                            handleRequestChanges(branchNameState, returnFocusTo).catch(console.error);
+                            handleRequestChanges(currentAddress, returnFocusTo).catch(console.error);
                         }
                     } }), rail: _jsx(EditorRail, { contentPanelOpen: contentPanelShown, contentPanelId: CONTENT_PANEL_ID, onContentToggle: () => contentPanelTransient
                         ? keepContentPanelOpen()
@@ -1507,7 +1634,9 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                             // 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, branchReviewing: branchReviewing, branchPullRequestClosed: branchPullRequestClosed, 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 &&
+                            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, branchReviewing: branchReviewing, branchPullRequestClosed: branchPullRequestClosed, onCollectionOpen: (path) => revealInContentPanel({ kind: 'collection', path }), onEntryReveal: () => currentEntry && revealInContentPanel({ kind: 'entry', path: currentEntry.path }), navigatorToggleRef: navigatorToggleRef, onShowChanges: openEntryChange
+                                ? () => showEntryChanges(openEntryChange, currentEntry?.label ?? currentEntry?.slug ?? '', 'header')
+                                : undefined, showChangesPending: changesOffered && !!currentEntry, showChangesRef: showChangesRef, 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.
@@ -1558,24 +1687,27 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                 }, onBeforeCreate: confirmCreateBranch, onCreate: handleCreateBranch, 
                                 // A Save all mid-run on the open branch would be submitted partway through.
                                 onSubmit: (name) => {
-                                    if (name === branchNameState && isSaveAllRunning())
+                                    if (namesBranch(name, branchNameState) && isSaveAllRunning())
                                         return;
                                     handleSubmit(name).catch((err) => console.error(err));
                                 }, onWithdraw: (name) => {
-                                    if (name === branchNameState && isSaveAllRunning())
+                                    if (namesBranch(name, branchNameState) && isSaveAllRunning())
                                         return;
                                     handleWithdraw(name).catch((err) => console.error(err));
                                 }, onApprove: (name) => {
-                                    if (name === branchNameState && isSaveAllRunning())
+                                    if (namesBranch(name, branchNameState) && isSaveAllRunning())
                                         return;
                                     handleApprove(name).catch((err) => console.error(err));
                                 }, onRequestChanges: (name) => {
-                                    if (name === branchNameState && isSaveAllRunning())
+                                    if (namesBranch(name, branchNameState) && isSaveAllRunning())
                                         return;
                                     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 }, 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
+                                }, 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) }), changesSubject && (_jsx(LazyEntryChangesDrawer, { opened: changesOpen, onClose: () => setChangesOpen(false), onExited: () => setChangesShown(false), returnFocusTo: changesReturnTarget, base: branchChanges.data?.base ?? currentBranch?.baseBranch ?? 'the base branch', subject: {
+                                ...changesSubject,
+                                unsavedEdits: changesSubject.logicalPath === currentEntry?.path && isSelectedDirty(),
+                            }, state: entryChange, referenceTitle: referenceTitle, onOpenEntry: changesOpenEntry, pullRequestUrl: changesPullRequestUrl })), branchNameState && (_jsx(CommentsPanel, { opened: commentsPanelOpen, branchName: branchLabel, 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)

package/dist/editor/EntryNavigator.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { ContentId, LogicalPath } from '../paths/types.js';
 import { useTree } from '@mantine/core';
+import type { BranchChangesData, BranchChangeEntry } from '../api/branch-changes.js';
+import type { BranchChangesError } from './hooks/useBranchChangesData.js';
 type TreeController = ReturnType<typeof useTree>;
 export interface EntryNavItem {
     path: LogicalPath;
@@ -77,21 +79,30 @@ export interface EntryNavigatorProps {
     readOnlyReason?: string;
     /** Entry paths with unsaved changes; each shows a dot, and so does every collection holding one. */
     dirtyPaths?: ReadonlySet<string>;
-    /** A row to bring into view, or (`changed`) the unsaved entries; `onRevealed` once done. */
+    /** A row to bring into view, or (`unsaved`) the unsaved entries; `onRevealed` once done. */
     reveal?: ContentPanelReveal;
     /** The reveal is done, or its row is not in the tree. */
     onRevealed?: () => void;
-    /** The All / Changed control shows only with this; Changed lists the entries in `dirtyPaths`. */
-    onChangedOnlyChange?: (changedOnly: boolean) => void;
-    changedOnly?: boolean;
+    /**
+     * The All / Unsaved / Changed control shows only with this. Unsaved lists the entries in
+     * `dirtyPaths`; Changed, those in `branchChanges`.
+     */
+    onEntryFilterChange?: (filter: EntryFilter) => void;
+    entryFilter?: EntryFilter;
+    /** What the branch changes against its base. Without it the control offers no Changed. */
+    branchChanges?: BranchChangesView;
+    /** Lists the unsaved entries, as the top bar's count does; else Unsaved is chosen here. */
+    onShowUnsaved?: () => void;
+    /** Opens a deleted entry's changes, read-only; without it its row is plain text. */
+    onShowDeletedChanges?: (entry: BranchChangeEntry, label: string) => void;
     /** Entries with unsaved changes, counting drafts whose entries the tree doesn't list yet. */
     unsavedCount?: number;
-    /** The named unsaved entries; Changed offers any the tree has no row for beneath it. */
+    /** The named unsaved entries; Unsaved offers any the tree has no row for beneath it. */
     unsavedEntries?: ReadonlyArray<{
         path: string;
         label: string;
     }>;
-    /** The branch's entry list failed to load, so Changed can't name what is unsaved. */
+    /** The branch's entry list failed to load, so Unsaved can't name what is unsaved. */
     entryListFailed?: boolean;
     /** The bar's "Not available" row: an empty tree says so, with `onSwitchBranch`, not "No content". */
     branchNotAvailable?: boolean;
@@ -109,17 +120,30 @@ export interface EntryNavigatorProps {
     };
 }
 /**
- * A collection or entry reveal clears the query, switches Changed back to All, expands the row's
- * ancestors (and a collection itself) and focuses the row. A `changed` reveal clears the query
- * only, for Changed set alongside it. `seq` makes a repeat ask a new one.
+ * A collection or entry reveal clears the query, switches the filter back to All, expands the
+ * row's ancestors (and a collection itself) and focuses the row. An `unsaved` reveal clears the
+ * query only, for Unsaved set alongside it. `seq` makes a repeat ask a new one.
  */
 export type ContentPanelReveal = {
     kind: 'collection' | 'entry';
     path: string;
     seq: number;
 } | {
-    kind: 'changed';
+    kind: 'unsaved';
     seq: number;
 };
+/** Which entries the Content panel lists: all, those with unsaved edits, or those differing from the base. */
+export type EntryFilter = 'all' | 'unsaved' | 'changed';
+/** The branch's changes against its base, as the Changed filter shows them. */
+export interface BranchChangesView {
+    /** The base branch's name, for the copy. */
+    base: string;
+    /** The last answer, kept while a reload or its error shows. */
+    data?: BranchChangesData;
+    error?: BranchChangesError;
+    onRetry: () => void;
+    /** A reload is in flight, so Retry shows it is working. */
+    retrying?: boolean;
+}
 export declare const EntryNavigator: React.FC<EntryNavigatorProps>;
 export default EntryNavigator;