canopycms 0.12.0 → 0.13.0

package/dist/editor/components/EditorHeader.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Badge, Box, Button, Group, Menu, Text, Tooltip, VisuallyHidden, em, getBreakpointValue, useMantineTheme, } from '@mantine/core';
+import { useLayoutEffect, useRef } from 'react';
+import { Badge, Box, Button, Group, Loader, Menu, Text, Tooltip, VisuallyHidden, em, getBreakpointValue, useMantineTheme, } from '@mantine/core';
 import { useMediaQuery, useMergedRef } from '@mantine/hooks';
-import { IconChevronDown, IconLock } from '@tabler/icons-react';
+import { IconChevronDown, IconLock, IconRefresh } from '@tabler/icons-react';
 import { isAdmin, isLockedOutOfBranch, isReviewer } from '../../authorization/helpers.js';
 import { branchBarStatus, describeBranchLock } from '../branch-lock.js';
 import { HOLD_BADGE, branchHoldMessage } from '../branch-status.js';
+import { conflictRecordHeldAdminMessage, conflictRecordHeldMessage, conflictsHoldMessage, conflictsSubmitReason, } from '../conflict-notice.js';
+import { ReleaseHoldButton } from './ReleaseHoldButton.js';
 import { EDITOR_ACTIONS, UNFINISHED_SUBMIT_APPROVE_REASON, rewrittenSubmitReason } from '../copy.js';
 import { reviewRoleOf } from '../../authorization/review-role.js';
 import { SYSTEM_USER_ID } from '../../system-users.js';
@@ -15,13 +17,15 @@ import { TooltipDetail } from './TooltipDetail.js';
 import { ReasonedMenuItem } from './ReasonedMenuItem.js';
 import { UnsavedMark } from './UnsavedMark.js';
 import { DraftStorageWarning, HIDDEN_STYLE, SaveAllButton } from './SaveAllButton.js';
+import { GetLatestChangesButton } from './GetLatestChangesButton.js';
+import { GETTING_LATEST_CHANGES, LATEST_CHANGES_WAITING, latestChangesWaitingDetail, WAITING_NOTICE, WAITING_SUBMIT_REASON, } from '../base-update-wait.js';
 import { useFocusHandOff, useMenuItemFocusReturn } from '../utils/focus-return.js';
 /**
  * The branch bar: the pill, the branch's status and its unsaved count, then the draft-storage
  * warning, Save all, the way forward and Submit or Withdraw, or to a reviewer of someone else's
  * submission Approve and Request changes. The open entry's own controls are in `EntryHeader`.
  */
-export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, onApprove = noopAction, onRequestChanges = noopAction, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchHold, branchApproveBlocked = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
+export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, onApprove = noopAction, onRequestChanges = noopAction, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchHold, branchApproveBlocked = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, baseUpdate, latestWait = 'none', latestChangesWaiting = false, openConflicts = 0, conflictRecordHeld, }) {
     const reviewRole = reviewRoleOf({
         status: branchStatus,
         createdBy: branchCreatedBy,
@@ -30,6 +34,12 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         isProtected: branchIsProtected,
         pullRequestState: branchPullRequestState,
     }, userContext);
+    const releaseHold = branchName ? conflictRecordHeld?.onRelease : undefined;
+    const heldMessage = !conflictRecordHeld
+        ? undefined
+        : releaseHold
+            ? conflictRecordHeldAdminMessage
+            : conflictRecordHeldMessage;
     const workflow = workflowAction({
         branchName,
         busy,
@@ -42,6 +52,9 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         savingAll: !!saveAllProgress,
         rewritten: branchHold?.kind === 'rewritten',
         approveBlocked: branchApproveBlocked,
+        waitingForLatest: latestWait === 'waiting',
+        openConflicts,
+        heldReason: heldMessage,
     });
     const lock = {
         branchStatus,
@@ -55,12 +68,19 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
     };
     const branchLockReason = describeBranchLock(lock);
     const status = branchBarStatus({ ...lock, isProtected: branchServerProtected });
+    // A hold of the pull request outranks open conflicts, which only hold the next submit.
+    const conflictsHeld = openConflicts > 0 && branchStatus === 'editing';
     const holdMessage = branchName && branchHold && status.value !== 'loading'
         ? branchHoldMessage(branchHold, {
             role: workflow?.kind === 'review' ? 'review' : workflow?.permitted ? 'withdraw' : 'none',
             isAdmin: isAdmin(userContext?.groups ?? []),
         })
-        : undefined;
+        : branchName && heldMessage && status.value !== 'loading'
+            ? heldMessage
+            : branchName && conflictsHeld && status.value !== 'loading'
+                ? conflictsHoldMessage(openConflicts)
+                : undefined;
+    const holdCount = !branchHold && !conflictRecordHeld && conflictsHeld ? openConflicts : undefined;
     const theme = useMantineTheme();
     // Mantine's own below-`md` query, the one `visibleFrom="md"` hides under.
     const belowMd = `(max-width: ${em(getBreakpointValue('md', theme.breakpoints) - 0.1)})`;
@@ -81,6 +101,20 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         : status.action;
     // Controls come and go as a submit or withdraw changes the lock, and focus follows them.
     const [[wayRef, saveAllRef, workflowRef, secondaryRef], focusTarget] = useFocusHandOff(4);
+    // A release unmounts its confirm with the button that opened it, which leaves focus nowhere: it
+    // goes to the workflow control, which the release has just freed.
+    const releasable = !!releaseHold;
+    const wasReleasable = useRef(releasable);
+    const releasedHere = useRef(false);
+    useLayoutEffect(() => {
+        const active = document.activeElement;
+        if (wasReleasable.current && !releasable && releasedHere.current) {
+            releasedHere.current = false;
+            if (!active || active === document.body)
+                focusTarget(2)?.focus({ preventScroll: true });
+        }
+        wasReleasable.current = releasable;
+    });
     const workflowControl = {
         onSubmit,
         onWithdraw,
@@ -92,14 +126,31 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
         returnFocusTo: () => focusTarget(2),
     };
     const caretOnWay = narrow && !!barAction && !!workflow;
-    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchLabel ?? branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef }), _jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason, holdMessage: holdMessage }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), (!narrow || editable) && (_jsx(SaveAllButton
+    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchLabel ?? branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef, 
+                    // Below `md` the bar has no room for it, so the branch's menu offers it.
+                    getLatest: narrow ? baseUpdate : undefined }), _jsxs(Group, { gap: "xs", wrap: "nowrap", style: { flexShrink: 0 }, children: [_jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason, holdMessage: holdMessage, holdCount: holdCount, working: latestWait !== 'none' ? GETTING_LATEST_CHANGES : undefined, 
+                            // A hold's way forward comes first.
+                            latestChangesWaiting: latestChangesWaiting && latestWait === 'none' && !holdMessage
+                                ? latestChangesWaitingDetail(narrow, !!baseUpdate?.blockedReason)
+                                : undefined, compact: narrow, 
+                            // The bar's button carries the spinner where it shows.
+                            workingSpinner: narrow || !baseUpdate }), releaseHold && (_jsx(ReleaseHoldButton, { branchLabel: branchLabel ?? branchName, onRelease: async () => {
+                                // Marked while in flight: the re-read that clears the hold can land first.
+                                releasedHere.current = true;
+                                const outcome = await releaseHold();
+                                if (!('released' in outcome))
+                                    releasedHere.current = false;
+                                return outcome;
+                            } }))] }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), !narrow && baseUpdate && _jsx(GetLatestChangesButton, { control: baseUpdate }), (!narrow || editable) && (_jsx(SaveAllButton
                 // Its reserved width follows this branch's counts, not the session's largest.
                 , { onSaveAll: onSaveAll, unsavedCount: modifiedCount, blockedReason: branchLockReason ??
                         (!branchName
                             ? 'Open a branch first.'
-                            : entryListFailed && modifiedCount > 0
-                                ? 'The list of entries couldn\'t be loaded, so these changes can\'t be saved yet. Choose "Refresh branch" in the branch menu to try again.'
-                                : undefined), saveAllProgress: saveAllProgress, singleSaving: singleSaving, busy: busy, buttonRef: saveAllRef, caret: split && workflow ? (_jsx(WorkflowCaret, { ...workflowControl, action: workflow })) : undefined }, branchName)), barAction && (_jsx(BranchWayButton, { action: barAction, buttonRef: wayRef, onClick: barAction === 'newBranch'
+                            : latestWait === 'waiting'
+                                ? WAITING_NOTICE
+                                : entryListFailed && modifiedCount > 0
+                                    ? 'The list of entries couldn\'t be loaded, so these changes can\'t be saved yet. Choose "Refresh branch" in the branch menu to try again.'
+                                    : undefined), saveAllProgress: saveAllProgress, singleSaving: singleSaving, busy: busy, buttonRef: saveAllRef, caret: split && workflow ? (_jsx(WorkflowCaret, { ...workflowControl, action: workflow })) : undefined }, branchName)), barAction && (_jsx(BranchWayButton, { action: barAction, buttonRef: wayRef, onClick: barAction === 'newBranch'
                         ? onNewBranch
                         : barAction === 'refreshBranch'
                             ? onBranchReloadData
@@ -131,13 +182,18 @@ function unsavedTooltip(status, count, mayWithdraw) {
  * The branch's state beside the pill, heard in words with its reason, but not while it loads. A
  * hold follows it whatever the lock, since a lock doesn't say that the branch is stuck.
  */
-function BranchStatusLabel({ status, reason, holdMessage, }) {
-    const spoken = status.label && status.value !== 'loading'
-        ? [status.label.replace(' · ', ', '), reason].filter(Boolean).join('. ')
-        : '';
-    return (
-    // Always mounted, so a lock that arrives is announced.
-    _jsxs(Box, { role: "status", style: status.label || holdMessage ? { flexShrink: 0 } : HIDDEN_STYLE, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", children: [status.label && (_jsxs(Group, { gap: 4, wrap: "nowrap", "aria-hidden": "true", "data-testid": "branch-status", "data-status": status.value, children: [status.readOnly && _jsx(IconLock, { size: 14 }), _jsx(Text, { span: true, size: "sm", children: status.label })] })), holdMessage && (_jsx(TooltipDetail, { detail: holdMessage, children: _jsx(Badge, { color: HOLD_BADGE.color, variant: "light", "data-testid": "branch-hold-status", children: HOLD_BADGE.label }) }))] }), _jsx(VisuallyHidden, { children: spoken })] }));
+function BranchStatusLabel({ status, reason, holdMessage, holdCount, working, workingSpinner = true, latestChangesWaiting, compact = false, }) {
+    const spoken = [
+        status.label && status.value !== 'loading'
+            ? [status.label.replace(' · ', ', '), reason].filter(Boolean).join('. ')
+            : '',
+        working,
+        // The badge sits outside this region, so a detail that follows the unsaved count stays quiet.
+        latestChangesWaiting && LATEST_CHANGES_WAITING,
+    ]
+        .filter(Boolean)
+        .join('. ');
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { role: "status", style: status.label || holdMessage || working ? { flexShrink: 0 } : HIDDEN_STYLE, children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", children: [working && (_jsxs(Group, { gap: 4, wrap: "nowrap", "aria-hidden": "true", "data-testid": "branch-working-status", children: [workingSpinner && _jsx(Loader, { size: 12 }), _jsx(Text, { span: true, size: "sm", children: working })] })), status.label && (_jsxs(Group, { gap: 4, wrap: "nowrap", "aria-hidden": "true", "data-testid": "branch-status", "data-status": status.value, children: [status.readOnly && _jsx(IconLock, { size: 14 }), _jsx(Text, { span: true, size: "sm", children: status.label })] })), holdMessage && (_jsx(TooltipDetail, { detail: holdMessage, children: _jsx(Badge, { color: HOLD_BADGE.color, variant: "light", "data-testid": "branch-hold-status", children: holdCount === undefined ? HOLD_BADGE.label : `${HOLD_BADGE.label} (${holdCount})` }) }))] }), _jsx(VisuallyHidden, { children: spoken })] }), latestChangesWaiting && (_jsx(TooltipDetail, { detail: latestChangesWaiting, name: compact ? LATEST_CHANGES_WAITING : undefined, children: _jsx(Badge, { color: "blue", variant: "light", circle: compact, "data-testid": "branch-latest-waiting", children: compact ? (_jsx(IconRefresh, { size: 12, style: { display: 'block' }, "aria-hidden": "true" })) : (LATEST_CHANGES_WAITING) }) }))] }));
 }
 const WAY_LABEL = {
     newBranch: `${EDITOR_ACTIONS.newBranch}…`,
@@ -154,7 +210,7 @@ function BranchWayButton({ action, onClick, caret, buttonRef, }) {
  * Submit for review, or Withdraw from review once submitted or approved, or Approve and Request
  * changes to a reviewer of someone else's submission; null when none shows.
  */
-function workflowAction({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, reviewRole, savingAll, rewritten, approveBlocked, }) {
+function workflowAction({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, reviewRole, savingAll, rewritten, approveBlocked, waitingForLatest, openConflicts, heldReason, }) {
     const isSubmitted = branchStatus === 'submitted';
     const isEditing = branchStatus === 'editing';
     // 'approved' withdraws too -- it is the author's way back from
@@ -176,7 +232,7 @@ function workflowAction({ branchName, busy, branchStatus, userContext, branchCre
             blocked: !branchName || busy || savingAll,
             permitted: true,
             reason: savingAll ? 'Wait for Save all to finish.' : busy ? BUSY_REASON : '',
-            approveReason: approveBlocked ? UNFINISHED_SUBMIT_APPROVE_REASON : undefined,
+            approveReason: approveBlocked ? UNFINISHED_SUBMIT_APPROVE_REASON : heldReason,
         };
     }
     // Who may submit/withdraw: creator, ACL access, the system branch, or an
@@ -201,24 +257,34 @@ function workflowAction({ branchName, busy, branchStatus, userContext, branchCre
     return {
         kind: isWithdrawable ? 'withdraw' : 'submit',
         // `busy` alone can't hold it: an entry load clears that shared flag mid-run.
-        blocked: !branchName || busy || savingAll || !canPerformAction || (rewritten && isEditing),
+        blocked: !branchName ||
+            busy ||
+            savingAll ||
+            !canPerformAction ||
+            (isEditing && (rewritten || waitingForLatest || openConflicts > 0 || !!heldReason)),
         permitted: canPerformAction,
         reason: savingAll
             ? 'Wait for Save all to finish.'
-            : rewritten && isEditing
-                ? rewrittenSubmitReason(isAdmin(userContext?.groups ?? []))
-                : // No branch data (`branchStatus === undefined`) must not be
-                    // interpolated raw into this label. Guarded explicitly here rather
-                    // than left to the early return above, which hides the action
-                    // today only as a side effect of `branchIsProtected`'s `?? true`
-                    // default -- not a guarantee this arm stays unreachable.
-                    branchStatus === undefined
-                        ? 'Branch details could not be loaded. Use "Refresh branch" to try again.'
-                        : !statusHasAction
-                            ? `This branch is ${branchStatus}, so it can't be submitted for review or withdrawn from review.`
-                            : !userHasPermission
-                                ? 'You do not have permission to submit this branch for review or withdraw it from review. Ask an admin for access.'
-                                : '',
+            : waitingForLatest && isEditing
+                ? WAITING_SUBMIT_REASON
+                : heldReason && isEditing
+                    ? heldReason
+                    : openConflicts > 0 && isEditing
+                        ? conflictsSubmitReason(openConflicts)
+                        : rewritten && isEditing
+                            ? rewrittenSubmitReason(isAdmin(userContext?.groups ?? []))
+                            : // No branch data (`branchStatus === undefined`) must not be
+                                // interpolated raw into this label. Guarded explicitly here rather
+                                // than left to the early return above, which hides the action
+                                // today only as a side effect of `branchIsProtected`'s `?? true`
+                                // default -- not a guarantee this arm stays unreachable.
+                                branchStatus === undefined
+                                    ? 'Branch details could not be loaded. Use "Refresh branch" to try again.'
+                                    : !statusHasAction
+                                        ? `This branch is ${branchStatus}, so it can't be submitted for review or withdrawn from review.`
+                                        : !userHasPermission
+                                            ? 'You do not have permission to submit this branch for review or withdraw it from review. Ask an admin for access.'
+                                            : '',
     };
 }
 function WorkflowButton({ narrow, ...props }) {

package/dist/editor/components/EntryChangesDrawer.d.ts

@@ -8,6 +8,9 @@ import type { BranchChangeEntry } from '../../api/branch-changes.js';
 import type { FieldConfig } from '../../config/index.js';
 import type { CanopyPathSegment } from '../canopy-path.js';
 import type { EntryChangeState } from '../hooks/useBranchChangesData.js';
+import type { ConflictsState } from '../hooks/useConflictsData.js';
+import type { EntryConflictData } from '../../api/merge-conflicts.js';
+import { type ConflictsGroupProps } from './ConflictsGroup.js';
 /** The entry a drawer compares, as the editor knows it. */
 export interface EntryChangesSubject {
     logicalPath: string;
@@ -58,6 +61,15 @@ export interface EntryChangesDrawerProps {
     onDeleteEntry?: () => void;
     /** Puts back an entry deleted on the branch; resolves with why it couldn't, when it couldn't. */
     onRestoreEntry?: () => Promise<RestoreRefusal | undefined>;
+    /** The entry's open conflicts, given while the branch lists any for it. */
+    conflicts?: EntryChangesConflicts;
+}
+/** What the "Conflicts" group needs beyond the drawer's own props (ConflictsGroup.tsx). */
+export interface EntryChangesConflicts extends Pick<ConflictsGroupProps, 'adminBaseBranch' | 'choices' | 'onChoose' | 'onEdit'> {
+    state: ConflictsState<EntryConflictData | null>;
+    onResolveEntry?: ConflictsGroupProps['onResolveEntry'];
+    /** The entry has a draft, open or not, which an entry-level choice would leave behind. */
+    unsavedEdits?: boolean;
 }
 /** Why "Restore entry" didn't: `warning` where nothing is lost, or the outcome is unknown. */
 export interface RestoreRefusal {
@@ -78,10 +90,12 @@ export interface EntryChangesUndo {
     /** Open field threads inside a canopy path, which taking out an item there moves to the entry. */
     threadsWithin?: (path: CanopyPathSegment[]) => number;
 }
-/** The drawer's body: its states, then the summary and one card per change. */
-export declare const EntryChangesView: React.FC<Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>>;
+type EntryChangesViewProps = Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>;
+/** Conflicts, what a choice settled, then the changes, which keep their place as conflicts go. */
+export declare const EntryChangesView: React.FC<EntryChangesViewProps>;
 /**
  * A modal right-hand drawer, as the Branches, Comments and Media drawers are: it traps focus,
  * and the form and preview wait behind its backdrop.
  */
 export declare const EntryChangesDrawer: React.FC<EntryChangesDrawerProps>;
+export {};

package/dist/editor/components/EntryChangesDrawer.js

@@ -6,20 +6,19 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * and jsdiff stay out of the editor's first chunk.
  */
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Alert, Badge, Box, Button, Group, List, Paper, SimpleGrid, Stack, Text, Tooltip, VisuallyHidden, em, getBreakpointValue, useMantineTheme, } from '@mantine/core';
+import { Alert, Badge, Box, Button, Group, Paper, SimpleGrid, Stack, Text, VisuallyHidden, em, getBreakpointValue, useMantineTheme, } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
-import { IconAlertCircle, IconAlertTriangle, IconExternalLink, IconArrowsMove, IconInfoCircle, IconMinus, IconPencil, IconPhotoOff, IconPlus, } from '@tabler/icons-react';
-import { EDITOR_THUMBNAIL_WIDTHS } from '../../assets/editor-thumbnail-widths.js';
-import { useAssetContext } from '../context/index.js';
+import { IconAlertCircle, IconAlertTriangle, IconExternalLink, IconArrowsMove, IconCircleCheck, IconInfoCircle, IconMinus, IconPencil, IconPlus, } from '@tabler/icons-react';
 import { EDITOR_ACTIONS } from '../copy.js';
-import { computeEntryDiff, } from '../entry-diff.js';
-import { editorImageSrc } from '../media/editor-image-src.js';
+import { computeEntryDiff } from '../entry-diff.js';
+import { buildEntryConflicts } from '../conflict-cards.js';
 import { findBodyFieldName } from '../../utils/body-field.js';
-import { formatRelativeTime } from '../relative-time.js';
 import { OverlayDrawer } from '../shell/OverlayHeader.js';
 import { movedThreadsNote } from '../undo-removal.js';
 import { canSetBack, canopyPathOf, formValueOfSide, holdsAs, setAllBack, setChangeBack, sideOfFormValue, } from '../undo-change.js';
 import { focusReturnProps } from '../utils/focus-return.js';
+import { DateValue, MarkedText, ReasonedButton, TEXT_STYLE, Value, ordinal, plural, } from './change-parts.js';
+import { ConflictsGroup, SETTLED_HOLD_MS, } from './ConflictsGroup.js';
 import { LoadingCards, LoadingSummary } from './EntryChangesSkeleton.js';
 const KIND_BADGES = {
     added: { label: 'Added', icon: _jsx(IconPlus, { size: 10, "aria-hidden": true }) },
@@ -27,98 +26,6 @@ const KIND_BADGES = {
     changed: { label: 'Changed', icon: _jsx(IconPencil, { size: 10, "aria-hidden": true }) },
     moved: { label: 'Moved', icon: _jsx(IconArrowsMove, { size: 10, "aria-hidden": true }) },
 };
-/**
- * Struck on a tint at least 1.3:1 from the card in either scheme, with text kept at 4.5:1 on it:
- * `red.2` in light, `red.6` at 30% over the dark card.
- */
-const REMOVED_STYLE = {
-    background: 'light-dark(var(--mantine-color-red-2), color-mix(in srgb, var(--mantine-color-red-6) 30%, transparent))',
-    color: 'inherit',
-    textDecoration: 'line-through',
-    textDecorationThickness: 2,
-};
-/** Underlined on a tint, measured as REMOVED_STYLE's: `green.3`, or `green.6` at 30%. */
-const ADDED_STYLE = {
-    background: 'light-dark(var(--mantine-color-green-3), color-mix(in srgb, var(--mantine-color-green-6) 30%, transparent))',
-    color: 'inherit',
-    textDecoration: 'underline',
-    textDecorationThickness: 2,
-};
-const TEXT_STYLE = { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' };
-/** Long text on one side only is cut to this many lines once it has more than LONG_TEXT_LINES. */
-const COLLAPSED_LINES = 50;
-const LONG_TEXT_LINES = 200;
-/** Above this share of a line's text changed, one prefix names the whole line instead of each run. */
-const WHOLE_LINE_SHARE = 0.6;
-const plural = (count, one, many) => `${count} ${count === 1 ? one : many}`;
-const ordinal = (n) => {
-    const tens = n % 100;
-    const suffix = tens >= 11 && tens <= 13 ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' }[n % 10] ?? 'th');
-    return `${n}${suffix}`;
-};
-/**
- * `side`'s runs of `parts`, a marked run joined to the next of its mark across whitespace alone,
- * so a screen reader hears one removal, not one per word.
- */
-const sideRuns = (parts, side) => {
-    const runs = [];
-    for (const part of parts) {
-        if (side === 'before' ? part.added : part.removed)
-            continue;
-        const mark = part.removed ? 'removed' : part.added ? 'added' : undefined;
-        const last = runs[runs.length - 1];
-        const gap = runs[runs.length - 2];
-        if (mark && last && last.mark === mark) {
-            last.value += part.value;
-        }
-        else if (mark && last && !last.mark && /^\s+$/.test(last.value) && gap?.mark === mark) {
-            runs.pop();
-            gap.value += last.value + part.value;
-        }
-        else {
-            runs.push({ value: part.value, ...(mark && { mark }) });
-        }
-    }
-    return runs;
-};
-const WHITESPACE_MARKS = {
-    ' ': { shown: '·', said: 'space' },
-    '\t': { shown: '→', said: 'tab' },
-    '\n': { shown: '⏎', said: 'line break' },
-};
-/** A run's text; whitespace alone shows a mark for each character, said in words. */
-const RunText = ({ value }) => {
-    if (value === '')
-        return _jsx("em", { children: "(blank line)" });
-    if (!/^\s+$/.test(value))
-        return _jsx(_Fragment, { children: value });
-    const chars = [...value];
-    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: chars.map((c) => WHITESPACE_MARKS[c]?.shown ?? c).join('') }), _jsx(VisuallyHidden, { component: "span", children: chars.map((c) => WHITESPACE_MARKS[c]?.said ?? 'space').join(', ') })] }));
-};
-const MARK_WORDS = {
-    removed: { start: 'Removed: ', end: ', end of removal', line: 'Removed line: ' },
-    added: { start: 'Added: ', end: ', end of addition', line: 'Added line: ' },
-};
-/**
- * One side's text with its runs marked by a strike or an underline and by words, never colour
- * alone. A line mostly changed says so once, up front, instead of run by run.
- */
-const MarkedText = ({ parts, side, unit, }) => {
-    const runs = sideRuns(parts, side);
-    const total = runs.reduce((n, run) => n + run.value.length, 0);
-    const marked = runs.reduce((n, run) => n + (run.mark ? run.value.length : 0), 0);
-    const mark = side === 'before' ? 'removed' : 'added';
-    const whole = runs.some((run) => run.mark) && (total === 0 || marked / total > WHOLE_LINE_SHARE);
-    return (_jsxs(_Fragment, { children: [whole && (_jsx(VisuallyHidden, { component: "span", children: unit === 'line' ? MARK_WORDS[mark].line : MARK_WORDS[mark].start })), runs.map((run, i) => {
-                if (!run.mark)
-                    return _jsx(React.Fragment, { children: run.value }, i);
-                const Tag = run.mark === 'removed' ? 'del' : 'ins';
-                const style = run.mark === 'removed' ? REMOVED_STYLE : ADDED_STYLE;
-                // Whitespace alone, or a blank line's label, has nothing for a line to cross.
-                const shown = /^\s*$/.test(run.value) ? { ...style, textDecoration: 'none' } : style;
-                return (_jsxs(Tag, { style: shown, children: [!whole && (_jsx(VisuallyHidden, { component: "span", children: MARK_WORDS[run.mark].start })), _jsx(RunText, { value: run.value }), !whole && _jsx(VisuallyHidden, { component: "span", children: MARK_WORDS[run.mark].end })] }, i));
-            })] }));
-};
 const Gutter = ({ sign }) => (_jsx(Text, { size: "sm", c: "dimmed", "aria-hidden": true, ta: "center", style: { userSelect: 'none' }, children: sign ?? '' }));
 const Skipped = ({ count, style }) => (_jsx(Text, { size: "xs", c: "dimmed", py: 2, style: style, children: plural(count, 'unchanged line', 'unchanged lines') }));
 const LINE_GRID = {
@@ -216,77 +123,11 @@ const LineRows = ({ rows }) => {
     return (_jsxs(Box, { style: narrow ? { ...LINE_GRID, gridTemplateColumns: '1rem minmax(0, 1fr)' } : LINE_GRID, "data-testid": narrow ? 'entry-change-line-list' : 'entry-change-line-grid', children: [!narrow && (_jsxs(_Fragment, { children: [_jsx(Text, { size: "xs", c: "dimmed", style: { gridColumn: '1 / span 2' }, children: "Before" }), _jsx(Text, { size: "xs", c: "dimmed", style: { gridColumn: '3 / span 2' }, children: "After" })] })), segments.map((segment, i) => segment.long ? (_jsx(LongRun, { rows: segment.rows, side: segment.long, renderRows: renderRows }, i)) : (_jsx(React.Fragment, { children: renderRows(segment.rows) }, i)))] }));
 };
 const WordsChange = ({ text, side, }) => (_jsx(Text, { size: "sm", style: TEXT_STYLE, children: _jsx(MarkedText, { parts: text.parts, side: side, unit: "text" }) }));
-const THUMBNAIL_SIZE = EDITOR_THUMBNAIL_WIDTHS.listRow / 2;
-/** An image's thumbnail beside its name, which says what it is; an icon if it won't load. */
-const Thumbnail = ({ src }) => {
-    const { baseUrl } = useAssetContext();
-    const [failed, setFailed] = useState(false);
-    if (failed) {
-        return (_jsx(IconPhotoOff, { size: THUMBNAIL_SIZE, stroke: 1.5, "aria-hidden": true, style: { flexShrink: 0, color: 'var(--mantine-color-dimmed)' } }));
-    }
-    return (_jsx("img", { src: editorImageSrc(src, baseUrl, { width: EDITOR_THUMBNAIL_WIDTHS.listRow }), alt: "", width: THUMBNAIL_SIZE, height: THUMBNAIL_SIZE, onError: () => setFailed(true), style: { objectFit: 'cover', borderRadius: 4, flexShrink: 0 } }));
-};
-/** Text on one side only; more than LONG_TEXT_LINES lines show COLLAPSED_LINES until asked. */
-const LongText = ({ text }) => {
-    const [expanded, setExpanded] = useState(false);
-    const firstNew = useRef(null);
-    useEffect(() => {
-        if (expanded)
-            firstNew.current?.focus();
-    }, [expanded]);
-    const lines = text.split('\n');
-    const long = lines.length > LONG_TEXT_LINES;
-    const collapsed = !expanded && long;
-    return (_jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", style: TEXT_STYLE, children: !long ? (text) : (_jsxs(_Fragment, { children: [lines.slice(0, COLLAPSED_LINES).join('\n'), expanded && (_jsxs(_Fragment, { children: ['\n', _jsx("span", { ref: firstNew, tabIndex: -1, children: lines.slice(COLLAPSED_LINES).join('\n') })] }))] })) }), collapsed && (_jsxs(Button, { size: "compact-sm", variant: "subtle", onClick: () => setExpanded(true), children: ["Show all ", lines.length, " lines"] }))] }));
-};
-/** A value as the form would show it: titles for references, file names for images. */
-const Value = ({ value, alt, }) => {
-    switch (value.kind) {
-        case 'empty':
-            return (_jsx(Text, { size: "sm", c: "dimmed", children: "Not set" }));
-        case 'text':
-            return _jsx(LongText, { text: value.text });
-        case 'number':
-            return _jsx(Text, { size: "sm", children: value.value.toLocaleString() });
-        case 'boolean':
-            return _jsx(Text, { size: "sm", children: value.value ? 'Yes' : 'No' });
-        case 'date':
-            return _jsx(DateValue, { value: value });
-        case 'select':
-            return _jsx(Text, { size: "sm", children: value.label });
-        case 'reference':
-            return value.title !== undefined ? (_jsx(Text, { size: "sm", children: value.title })) : (_jsx(Text, { size: "sm", c: "dimmed", children: "Entry unavailable" }));
-        case 'image':
-            return (_jsxs(Group, { gap: "xs", wrap: "nowrap", align: "flex-start", children: [_jsx(Thumbnail, { src: value.src }, value.src), _jsxs(Stack, { gap: 0, miw: 0, children: [_jsx(Text, { size: "sm", style: TEXT_STYLE, children: value.name }), value.alt && (_jsxs(Text, { size: "xs", style: TEXT_STYLE, children: [_jsxs(Text, { span: true, size: "xs", c: "dimmed", children: ["Alt text:", ' '] }), alt?.text.mode === 'words' ? (_jsx(MarkedText, { parts: alt.text.parts, side: alt.side, unit: "text" })) : (value.alt)] }))] })] }));
-        case 'position':
-            return (_jsxs(Text, { size: "sm", children: [ordinal(value.position), " of ", value.of] }));
-        case 'list':
-            return (_jsx(List, { size: "sm", spacing: 4, children: value.items.map((item, i) => (_jsx(List.Item, { children: _jsx(Value, { value: item }) }, i))) }));
-        case 'fields':
-            return (_jsx(Stack, { gap: 6, children: value.fields.map((field, i) => (_jsxs("div", { children: [_jsx(Text, { size: "xs", fw: 500, children: field.label }), _jsx(Value, { value: field.value })] }, i))) }));
-        case 'raw':
-            return (_jsx(Text, { size: "xs", ff: "monospace", style: TEXT_STYLE, children: value.text }));
-    }
-};
-/**
- * A date in full, in the viewer's time zone: a comparison needs the value, so this is the one
- * place the editor shows a date absolute first and relative after. A day has no relative form: it
- * may be a future event, and a past one is not hours ago.
- */
-const DateValue = ({ value, text }) => (_jsxs(Stack, { gap: 0, children: [_jsx(Text, { size: "sm", style: TEXT_STYLE, children: text ?? value.text }), !value.dateOnly && (_jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime(value.iso) }))] }));
 const SideColumn = ({ label, change, side, }) => {
     const value = change[side] ?? { kind: 'empty' };
     const words = change.text?.mode === 'words' ? change.text : undefined;
     return (_jsxs(Stack, { gap: 4, miw: 0, children: [_jsx(Text, { size: "xs", c: "dimmed", children: label }), value.kind === 'date' && words ? (_jsx(DateValue, { value: value, text: _jsx(MarkedText, { parts: words.parts, side: side, unit: "text" }) })) : words ? (_jsx(WordsChange, { text: words, side: side })) : (_jsx(Value, { value: value, alt: change.altText && { text: change.altText, side } }))] }));
 };
-/**
- * A drawer control that, given a `reason`, stays focusable but doesn't act, its Tooltip saying
- * why (`data-disabled` keeps the Tooltip working on focus and touch).
- */
-const ReasonedButton = ({ reason, onClick, danger, ...props }) => (_jsx(Tooltip, { label: reason, disabled: !reason, multiline: true, maw: 280, position: "bottom-start", children: _jsx(Button, { size: "compact-sm", variant: "subtle", ...(danger && { color: 'red', c: 'var(--canopy-danger-text)' }), ...props, onClick: () => {
-            if (!reason)
-                onClick();
-        }, "data-disabled": reason ? true : undefined, "aria-disabled": reason ? true : undefined }) }));
 const UNDONE_IN_FORM = 'Undone in the form. Save to keep it.';
 const ALL_UNDONE_IN_FORM = 'All changes undone in the form. Save to keep them.';
 // Undo and redo replace what the form holds at a change with the base's or the saved value, so
@@ -332,8 +173,85 @@ const changeSummary = (changes, base) => {
     ];
     return `${parts.join(', ')} since ${base}`;
 };
-/** The drawer's body: its states, then the summary and one card per change. */
-export const EntryChangesView = ({ base, subject, state, referenceTitle, onOpenEntry, pullRequestUrl, undo, noEditReason, lockedReason, onDeleteEntry, onRestoreEntry, }) => {
+/** The conflicts' place: loading, their failure with Retry, or the group; nothing for none. */
+const ConflictsSection = ({ conflicts, subject, referenceTitle, undo, noEditReason, lockedReason, onEntryDone }) => {
+    const { data, error, isValidating, reload } = conflicts.state;
+    const bodyField = useMemo(() => {
+        const side = data && Object.values(data.versions).find((v) => 'body' in v && v.body !== undefined);
+        return side && 'data' in side
+            ? (side.bodyFieldName ?? findBodyFieldName(subject.fields))
+            : undefined;
+    }, [data, subject.fields]);
+    // Regions apply only to the text your saved value holds, so the cards are built against it.
+    const saved = noEditReason ? undefined : undo?.saved;
+    const built = useMemo(() => data && buildEntryConflicts(data, subject.fields, bodyField, referenceTitle, saved), [data, subject.fields, bodyField, referenceTitle, saved]);
+    if (data === null)
+        return null;
+    if (error && !data) {
+        return (_jsx(Alert, { variant: "light", color: "red", icon: _jsx(IconAlertCircle, { size: 16 }), "data-testid": "conflicts-failed", children: _jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", children: "Couldn\u2019t load this entry\u2019s conflicts." }), _jsx(Button, { size: "compact-sm", variant: "subtle", loading: isValidating, onClick: () => void reload(), children: "Retry" })] }) }));
+    }
+    if (!data || !built)
+        return _jsx(LoadingCards, {});
+    return (_jsx(ConflictsGroup, { data: data, conflicts: built, adminBaseBranch: conflicts.adminBaseBranch, choices: conflicts.choices, form: !noEditReason && undo?.saved
+            ? { value: undo.value, saved: undo.saved, update: undo.update, bodyField }
+            : undefined, onChoose: conflicts.onChoose, onEdit: conflicts.onEdit, onResolveEntry: conflicts.onResolveEntry, onEntryDone: onEntryDone, noEditReason: noEditReason, lockedReason: lockedReason, unsavedEdits: conflicts.unsavedEdits ?? subject.unsavedEdits, entryDeleted: subject.status === 'deleted' }));
+};
+/** Focus once a choice's card is gone: "Restore entry" if it is offered, else the drawer's title. */
+const focusAfterEntryChoice = (root, entryGone) => {
+    const restore = entryGone
+        ? root?.querySelector('[data-testid="entry-changes-restore"]')
+        : null;
+    if (restore)
+        return restore.focus();
+    const titleId = root?.closest('[role="dialog"]')?.getAttribute('aria-labelledby');
+    const title = titleId ? document.getElementById(titleId) : null;
+    if (!title)
+        return;
+    title.tabIndex = -1;
+    title.focus();
+};
+/** Conflicts, what a choice settled, then the changes, which keep their place as conflicts go. */
+export const EntryChangesView = (props) => {
+    const rootRef = useRef(null);
+    const [said, setSaid] = useState();
+    const entryDone = said?.path === props.subject.logicalPath ? said : undefined;
+    // Focus waits for the card to go: only then may "Restore entry" be offered in its place.
+    const focusAfter = useRef();
+    const onEntryDone = (done) => {
+        setSaid((last) => ({
+            id: (last?.id ?? 0) + 1,
+            message: done.message,
+            path: props.subject.logicalPath,
+        }));
+        focusAfter.current = {
+            entryGone: done.entryGone,
+            path: props.subject.logicalPath,
+            at: Date.now(),
+        };
+    };
+    useEffect(() => {
+        const root = rootRef.current;
+        const pending = focusAfter.current;
+        if (!root || !pending)
+            return;
+        // No longer than the card holds its choice: a card gone later went for another reason.
+        if (pending.path !== props.subject.logicalPath || Date.now() - pending.at > SETTLED_HOLD_MS) {
+            focusAfter.current = undefined;
+        }
+        if (!focusAfter.current || root.querySelector('[data-entry-card]'))
+            return;
+        focusAfter.current = undefined;
+        // Focus anywhere but the page or the drawer itself was put there since, and stays.
+        const dialog = root.closest('[role="dialog"]');
+        const active = document.activeElement;
+        if (active && active !== document.body && active !== dialog)
+            return;
+        focusAfterEntryChoice(root, pending.entryGone);
+    });
+    return (_jsxs(Stack, { gap: "lg", ref: rootRef, children: [props.conflicts && (_jsx(ConflictsSection, { conflicts: props.conflicts, subject: props.subject, referenceTitle: props.referenceTitle, undo: props.undo, noEditReason: props.noEditReason, lockedReason: props.lockedReason, onEntryDone: onEntryDone })), _jsxs("div", { children: [(props.conflicts || entryDone) && (_jsx(Group, { gap: 6, wrap: "nowrap", role: "status", mb: entryDone ? 'md' : 0, "data-testid": "entry-choice-done", children: entryDone && (_jsxs(React.Fragment, { children: [_jsx(IconCircleCheck, { size: 16, color: "var(--mantine-color-green-filled)", "aria-hidden": true }), _jsx(Text, { size: "sm", children: entryDone.message })] }, entryDone.id)) })), _jsx(EntryChangesBody, { ...props })] })] }));
+};
+/** The changes: their states, then the summary and one card per change. */
+const EntryChangesBody = ({ base, subject, state, referenceTitle, onOpenEntry, pullRequestUrl, undo, noEditReason, lockedReason, onDeleteEntry, onRestoreEntry, }) => {
     const { data, error } = state;
     const diff = useMemo(() => data &&
         computeEntryDiff({

package/dist/editor/components/EntryHeader.d.ts

@@ -69,6 +69,8 @@ export interface EntryHeaderProps {
     branchPullRequestClosed?: boolean;
     /** The server refuses Approve on this branch (`describeBranchLock`). */
     branchApproveBlocked?: boolean;
+    /** Why content writes wait though the branch isn't locked: the latest changes coming in. */
+    writesWaitReason?: string;
 }
 /** The open entry's breadcrumb, menu, unsaved dot and "Read-only" chip, then Save, over the panes. */
-export declare function EntryHeader({ currentEntry, entryLoading, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onShowChanges, showChangesPending, showChangesRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving, savedSignal, savedHere, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, branchReviewing, branchPullRequestClosed, branchApproveBlocked, }: EntryHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntryHeader({ currentEntry, entryLoading, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onShowChanges, showChangesPending, showChangesRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving, savedSignal, savedHere, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, branchReviewing, branchPullRequestClosed, branchApproveBlocked, writesWaitReason, }: EntryHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EntryHeader.js

@@ -28,7 +28,7 @@ const ShowChangesButton = ({ onClick, buttonRef, }) => {
     return (_jsx(Button, { ref: placeholder ? undefined : buttonRef, size: "compact-sm", variant: "subtle", leftSection: icon, onClick: onClick, "data-testid": placeholder ? 'entry-show-changes-pending' : 'entry-show-changes', ...hold, children: EDITOR_ACTIONS.showChanges }));
 };
 /** The open entry's breadcrumb, menu, unsaved dot and "Read-only" chip, then Save, over the panes. */
-export function EntryHeader({ currentEntry, entryLoading = false, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onShowChanges, showChangesPending = false, showChangesRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving = false, savedSignal, savedHere = false, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, branchReviewing = false, branchPullRequestClosed = false, branchApproveBlocked = false, }) {
+export function EntryHeader({ currentEntry, entryLoading = false, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onShowChanges, showChangesPending = false, showChangesRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving = false, savedSignal, savedHere = false, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, branchReviewing = false, branchPullRequestClosed = false, branchApproveBlocked = false, writesWaitReason, }) {
     const branchLockReason = describeBranchLock({
         branchStatus,
         branchReadOnly,
@@ -38,7 +38,7 @@ export function EntryHeader({ currentEntry, entryLoading = false, branchName, bu
         reviewing: branchReviewing,
         pullRequestClosed: branchPullRequestClosed,
         approveBlocked: branchApproveBlocked,
-    });
+    }) ?? writesWaitReason;
     const entryLockReason = entryReadOnly ? NO_EDIT_ACCESS_REASON : undefined;
     // The Tooltip hides it while the editor is busy.
     const saveBlockedReason = branchLockReason ??

package/dist/editor/components/GetLatestChangesButton.d.ts

@@ -0,0 +1,15 @@
+import { type Ref } from 'react';
+import { type BaseUpdateControl } from '../base-update-wait.js';
+/** The Tooltip's text: why it waits, why it can't act, or what it does. */
+export declare function getLatestChangesReason(control: BaseUpdateControl): string;
+/**
+ * "Get latest changes", or "Getting latest changes…" with a spinner while the request stands. It
+ * takes the wider label's width either way, so the bar never shifts. It can't act while it works
+ * or while something blocks it, and stays focusable (`aria-disabled`) with its Tooltip saying why.
+ * Only a block dims it: the working label is progress, read at full contrast.
+ */
+export declare function GetLatestChangesButton({ control, buttonRef, testId, }: {
+    control: BaseUpdateControl;
+    buttonRef?: Ref<HTMLButtonElement>;
+    testId?: string;
+}): import("react/jsx-runtime").JSX.Element;