canopycms 0.12.1 → 0.13.0

package/dist/editor/components/ConflictsGroup.js

@@ -90,33 +90,52 @@ export function conflictHeading(card) {
     }
     return `${where}${part} was changed by you and by someone else`;
 }
+const KEPT_YOURS = 'Conflict cleared. Your version of the entry stays.';
+/** @internal Exported for tests: how long a settled entry card waits for the reload to take it. */
+export const SETTLED_HOLD_MS = 10_000;
 /** What an entry-level conflict is, and the choices that settle it, in order. */
 const ENTRY_KINDS = {
     'deleted-on-base': {
         heading: 'This entry was deleted in the latest version, but you changed it',
         choices: [
-            { choice: 'keep', label: EDITOR_ACTIONS.keepIt },
+            { choice: 'keep', label: EDITOR_ACTIONS.keepIt, done: KEPT_YOURS },
             { choice: 'delete', label: EDITOR_ACTIONS.deleteEntry, danger: true },
         ],
     },
     'deleted-on-branch': {
         heading: 'You deleted this entry, but it was changed in the latest version',
         choices: [
-            { choice: 'restore', label: EDITOR_ACTIONS.restoreEntry },
-            { choice: 'keep', label: EDITOR_ACTIONS.keepItDeleted },
+            {
+                choice: 'restore',
+                label: EDITOR_ACTIONS.restoreEntry,
+                done: 'Entry restored as the latest version has it.',
+            },
+            {
+                choice: 'keep',
+                label: EDITOR_ACTIONS.keepItDeleted,
+                entryGone: true,
+                done: 'Conflict cleared. The entry stays deleted.',
+            },
         ],
     },
     // Keeping it deleted clears the record: `keep` resolves a `fields` record whole (api/merge-conflicts.ts).
     'fields-on-deleted': {
         heading: 'You deleted this entry, but fields in it were changed by you and by someone else',
         body: `Keeping it deleted drops the latest version's changes to it. You can still use "${EDITOR_ACTIONS.restoreEntry}" afterwards, to bring it back as the latest version has it.`,
-        choices: [{ choice: 'keep', label: EDITOR_ACTIONS.keepItDeleted }],
+        choices: [
+            {
+                choice: 'keep',
+                label: EDITOR_ACTIONS.keepItDeleted,
+                entryGone: true,
+                done: 'Conflicts cleared. The entry stays deleted.',
+            },
+        ],
     },
     unreadable: {
         heading: "This entry was changed by you and by someone else in a way that can't be compared field by field",
         choices: [
             { choice: 'use-latest', label: EDITOR_ACTIONS.useLatestVersion },
-            { choice: 'keep', label: EDITOR_ACTIONS.keepYourVersion },
+            { choice: 'keep', label: EDITOR_ACTIONS.keepYourVersion, done: KEPT_YOURS },
         ],
     },
 };
@@ -222,7 +241,7 @@ const FieldCardActions = ({ card, actions, label, }) => {
             : held
                 ? btn(verb, pick(how), testId)
                 : null;
-        return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [side(EDITOR_ACTIONS.removeIt, removeIs, 'conflict-remove-it'), side(EDITOR_ACTIONS.keepIt, keepIs, 'conflict-keep-it'), !held &&
+        return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [side(EDITOR_ACTIONS.removeIt, removeIs, 'conflict-remove-it'), side(EDITOR_ACTIONS.keepIt, keepIs, 'conflict-keep-it'), (!held || actions.markable) &&
                     btn(EDITOR_ACTIONS.markResolved, () => actions.choose({ how: 'edited' }), 'conflict-mark-resolved'), copy !== undefined && (_jsx(CopyButton, { value: copy, children: ({ copied, copy: doCopy }) => (_jsx(Button, { size: "compact-sm", variant: "subtle", onClick: doCopy, "aria-label": copied ? `Copied: ${label}` : `Copy your version: ${label}`, "data-testid": "conflict-copy", children: copied ? 'Copied' : 'Copy' })) }))] }));
     }
     return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [btn(EDITOR_ACTIONS.useLatestVersion, () => actions.choose({ how: 'latest' }), 'conflict-use-latest', latestTakes), held
@@ -241,27 +260,47 @@ const FieldCard = ({ card, adminBaseBranch, actions }) => {
     const heading = conflictHeading(card);
     return (_jsx(Paper, { withBorder: true, p: "sm", radius: "sm", component: "li", style: CARD_ACCENT, "data-testid": "conflict-card", "data-conflict-kind": card.type === 'value' ? (card.item ? 'item' : card.conflict) : card.type, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", align: "flex-start", children: [_jsx(IconAlertTriangle, { size: 16, "aria-hidden": true, style: { flexShrink: 0, marginTop: 2 } }), _jsx(Text, { component: "h4", size: "sm", fw: 500, m: 0, miw: 0, style: { overflowWrap: 'anywhere' }, children: heading })] }), card.type === 'location' ? (_jsxs(Text, { size: "sm", children: ["It keeps your URL. To use another, choose \"", EDITOR_ACTIONS.changeUrl, "\u2026\" in the entry's menu."] })) : (_jsx(Versions, { card: card, adminBaseBranch: adminBaseBranch })), actions && _jsx(FieldCardActions, { card: card, actions: actions, label: heading })] }) }));
 };
-const EntryCard = ({ kind, reason, unsavedEdits, onResolve }) => {
+const EntryCard = ({ kind, reason, unsavedEdits, onResolve, onDone }) => {
     const [working, setWorking] = useState();
+    const [settled, setSettled] = useState(false);
     const [refusal, setRefusal] = useState();
     const { heading, body, choices } = ENTRY_KINDS[kind];
+    // A choice settled in place keeps its button working until the reload takes the card away, or,
+    // should that reload fail, for SETTLED_HOLD_MS, after which the choices come back.
+    useEffect(() => {
+        if (!settled)
+            return;
+        const timer = setTimeout(() => {
+            setSettled(false);
+            setWorking(undefined);
+        }, SETTLED_HOLD_MS);
+        return () => clearTimeout(timer);
+    }, [settled]);
     const resolve = async (choice) => {
         if (!onResolve || working)
             return;
+        const made = choices.find((c) => c.choice === choice);
         setWorking(choice);
         setRefusal(undefined);
+        let done = false;
         try {
-            const refused = await onResolve(choice);
+            const refused = await onResolve(choice, made?.entryGone ? { entryGone: true } : {});
             setRefusal(refused && { ...refused, choice });
+            done = !refused && !!made?.done;
+            if (done)
+                onDone?.({ message: made.done, entryGone: !!made.entryGone });
         }
         finally {
-            setWorking(undefined);
+            if (done)
+                setSettled(true);
+            else
+                setWorking(undefined);
         }
     };
-    return (_jsx(Paper, { withBorder: true, p: "sm", radius: "sm", component: "li", style: CARD_ACCENT, "data-testid": "conflict-card", "data-conflict-kind": kind, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", align: "flex-start", children: [_jsx(IconAlertTriangle, { size: 16, "aria-hidden": true, style: { flexShrink: 0, marginTop: 2 } }), _jsx(Text, { component: "h4", size: "sm", fw: 500, m: 0, children: heading })] }), body && (_jsx(Text, { size: "sm", "data-testid": "conflict-entry-body", children: body })), onResolve && (_jsx(Group, { gap: "xs", wrap: "wrap", align: "center", children: choices.map(({ choice, label, danger }) => (_jsx(ReasonedButton, { reason: reason ?? (choice !== 'keep' && unsavedEdits ? SAVE_FIRST_REASON : undefined), onClick: () => void resolve(choice), loading: working === choice, danger: danger, "data-testid": `conflict-entry-${choice}`, children: label }, choice))) })), refusal && (_jsx(Alert, { variant: "light", color: refusal.tone === 'error' ? 'red' : 'yellow', icon: refusal.tone === 'error' ? (_jsx(IconAlertCircle, { size: 16 })) : (_jsx(IconAlertTriangle, { size: 16 })), "data-testid": "conflict-entry-refused", children: _jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", children: refusal.message }), refusal.tone === 'error' && (_jsx(Button, { size: "compact-sm", variant: "subtle", loading: working === refusal.choice, onClick: () => void resolve(refusal.choice), children: "Retry" }))] }) }))] }) }));
+    return (_jsx(Paper, { withBorder: true, p: "sm", radius: "sm", component: "li", style: CARD_ACCENT, "data-testid": "conflict-card", "data-conflict-kind": kind, "data-entry-card": true, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { gap: "xs", wrap: "nowrap", align: "flex-start", children: [_jsx(IconAlertTriangle, { size: 16, "aria-hidden": true, style: { flexShrink: 0, marginTop: 2 } }), _jsx(Text, { component: "h4", size: "sm", fw: 500, m: 0, children: heading })] }), body && (_jsx(Text, { size: "sm", "data-testid": "conflict-entry-body", children: body })), onResolve && (_jsx(Group, { gap: "xs", wrap: "wrap", align: "center", children: choices.map(({ choice, label, danger }) => (_jsx(ReasonedButton, { reason: reason ?? (choice !== 'keep' && unsavedEdits ? SAVE_FIRST_REASON : undefined), onClick: () => void resolve(choice), loading: working === choice, danger: danger, "data-testid": `conflict-entry-${choice}`, children: label }, choice))) })), refusal && (_jsx(Alert, { variant: "light", color: refusal.tone === 'error' ? 'red' : 'yellow', icon: refusal.tone === 'error' ? (_jsx(IconAlertCircle, { size: 16 })) : (_jsx(IconAlertTriangle, { size: 16 })), "data-testid": "conflict-entry-refused", children: _jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", children: refusal.message }), refusal.tone === 'error' && (_jsx(Button, { size: "compact-sm", variant: "subtle", loading: working === refusal.choice, onClick: () => void resolve(refusal.choice), children: "Retry" }))] }) }))] }) }));
 };
 /** The "Conflicts" group: a heading, a count heard as it changes, and the cards. */
-export const ConflictsGroup = ({ data, conflicts, adminBaseBranch, choices, form, onChoose, onEdit, onResolveEntry, noEditReason, lockedReason, unsavedEdits, entryDeleted, }) => {
+export const ConflictsGroup = ({ data, conflicts, adminBaseBranch, choices, form, onChoose, onEdit, onResolveEntry, onEntryDone, noEditReason, lockedReason, unsavedEdits, entryDeleted, }) => {
     const headingId = useId();
     const editable = !noEditReason;
     const entryKind = data.kind === 'fields' ? undefined : data.kind;
@@ -316,6 +355,7 @@ export const ConflictsGroup = ({ data, conflicts, adminBaseBranch, choices, form
         return {
             reason: lockedReason,
             latestReason,
+            markable: field.otherItemHere,
             choice,
             held,
             choose: (next) => {
@@ -357,7 +397,7 @@ export const ConflictsGroup = ({ data, conflicts, adminBaseBranch, choices, form
                     ? 'Changed by you and by someone else. Choose what to keep.'
                     : `${plural(conflicts.fields.length, 'field', 'fields')} changed by you and by someone else. Choose what to keep, then save.` }), _jsx(VisuallyHidden, { role: "status", "data-testid": "conflicts-left", children: open === 0
                     ? 'All chosen. Save to keep your choices.'
-                    : `${plural(open, 'field', 'fields')} left to choose.` }), conflicts.incomplete && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "conflicts-incomplete", children: "Some versions couldn't be read, so some values may not show." })), noEditReason && (_jsx(Text, { size: "sm", "data-testid": "conflicts-no-edit", children: noEditReason })), editable && !form && !entryKind && !deletedFields && (_jsx(Text, { size: "sm", "data-testid": "conflicts-open-to-choose", children: OPEN_TO_CHOOSE })), editable && lockedReason && (_jsx(Text, { size: "sm", "data-testid": "conflicts-locked", children: lockedReason })), _jsx(Stack, { component: "ul", gap: "sm", p: 0, m: 0, style: { listStyle: 'none' }, children: entryKind ? (_jsx(EntryCard, { kind: entryKind, reason: lockedReason, unsavedEdits: unsavedEdits, onResolve: editable ? onResolveEntry : undefined })) : (_jsxs(_Fragment, { children: [deletedFields && (_jsx(EntryCard, { kind: "fields-on-deleted", reason: lockedReason, onResolve: editable ? onResolveEntry : undefined })), conflicts.fields.flatMap((field) => {
+                    : `${plural(open, 'field', 'fields')} left to choose.` }), conflicts.incomplete && (_jsx(Text, { size: "xs", c: "dimmed", "data-testid": "conflicts-incomplete", children: "Some versions couldn't be read, so some values may not show." })), noEditReason && (_jsx(Text, { size: "sm", "data-testid": "conflicts-no-edit", children: noEditReason })), editable && !form && !entryKind && !deletedFields && (_jsx(Text, { size: "sm", "data-testid": "conflicts-open-to-choose", children: OPEN_TO_CHOOSE })), editable && lockedReason && (_jsx(Text, { size: "sm", "data-testid": "conflicts-locked", children: lockedReason })), _jsx(Stack, { component: "ul", gap: "sm", p: 0, m: 0, style: { listStyle: 'none' }, children: entryKind ? (_jsx(EntryCard, { kind: entryKind, reason: lockedReason, unsavedEdits: unsavedEdits, onResolve: editable ? onResolveEntry : undefined, onDone: onEntryDone })) : (_jsxs(_Fragment, { children: [deletedFields && (_jsx(EntryCard, { kind: "fields-on-deleted", reason: lockedReason, onResolve: editable ? onResolveEntry : undefined, onDone: onEntryDone })), conflicts.fields.flatMap((field) => {
                             const actions = actionsFor(field);
                             return field.cards.map((card) => (_jsx(FieldCard, { card: card, adminBaseBranch: adminBaseBranch, actions: actions }, card.id)));
                         })] })) })] }));

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

@@ -87,10 +87,12 @@ export interface EditorHeaderProps {
     };
     /** The open branch's wait for the latest changes, whoever asked: every viewer who sees it waits. */
     latestWait?: BaseUpdateWait;
+    /** The base has changes the open branch's saved work keeps the automatic sync from bringing in. */
+    latestChangesWaiting?: boolean;
 }
 /**
  * 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 declare function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch, onSaveAll, saveAllProgress, singleSaving, entryListFailed, onSubmit, onWithdraw, onApprove, onRequestChanges, draftStorageFailed, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected, branchServerProtected, branchReadOnly, branchHold, branchApproveBlocked, branchWriteBlocked, branchLoading, branchPending, branchMissing, baseUpdate, latestWait, openConflicts, conflictRecordHeld, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch, onSaveAll, saveAllProgress, singleSaving, entryListFailed, onSubmit, onWithdraw, onApprove, onRequestChanges, draftStorageFailed, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected, branchServerProtected, branchReadOnly, branchHold, branchApproveBlocked, branchWriteBlocked, branchLoading, branchPending, branchMissing, baseUpdate, latestWait, latestChangesWaiting, openConflicts, conflictRecordHeld, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EditorHeader.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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';
@@ -18,14 +18,14 @@ 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, WAITING_NOTICE, WAITING_SUBMIT_REASON, } from '../base-update-wait.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, baseUpdate, latestWait = 'none', openConflicts = 0, conflictRecordHeld, }) {
+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,
@@ -129,6 +129,10 @@ export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onS
     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.
@@ -178,18 +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, holdCount, working, workingSpinner = true, }) {
+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 (
-    // Always mounted, so a lock that arrives is announced.
-    _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 })] }));
+    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}…`,

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

@@ -91,7 +91,7 @@ export interface EntryChangesUndo {
     threadsWithin?: (path: CanopyPathSegment[]) => number;
 }
 type EntryChangesViewProps = Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>;
-/** The drawer's body: the entry's conflicts, if any, above its changes. */
+/** 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,

package/dist/editor/components/EntryChangesDrawer.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 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, IconPlus, } from '@tabler/icons-react';
+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 { buildEntryConflicts } from '../conflict-cards.js';
@@ -18,7 +18,7 @@ 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 } from './ConflictsGroup.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 }) },
@@ -174,7 +174,7 @@ const changeSummary = (changes, base) => {
     return `${parts.join(', ')} since ${base}`;
 };
 /** The conflicts' place: loading, their failure with Retry, or the group; nothing for none. */
-const ConflictsSection = ({ conflicts, subject, referenceTitle, undo, noEditReason, lockedReason }) => {
+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);
@@ -194,10 +194,62 @@ const ConflictsSection = ({ conflicts, subject, referenceTitle, undo, noEditReas
         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, noEditReason: noEditReason, lockedReason: lockedReason, unsavedEdits: conflicts.unsavedEdits ?? subject.unsavedEdits, entryDeleted: subject.status === 'deleted' }));
+            : 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 drawer's body: the entry's conflicts, if any, above its changes. */
-export const EntryChangesView = (props) => props.conflicts ? (_jsxs(Stack, { gap: "lg", children: [_jsx(ConflictsSection, { conflicts: props.conflicts, subject: props.subject, referenceTitle: props.referenceTitle, undo: props.undo, noEditReason: props.noEditReason, lockedReason: props.lockedReason }), _jsx(EntryChangesBody, { ...props })] })) : (_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;

package/dist/editor/conflict-cards.d.ts

@@ -65,9 +65,12 @@ export interface FieldConflict {
      * a removal on its side took out, so its value there can be found and placed. It is keyed as the
      * merge named the place along the base's own path ({@link alignedTo}), so this fails only where
      * the record gives no such path, one that runs another way, or one whose merged key another of
-     * its items holds.
+     * its items holds; and where your saved value holds another item at the key of one your version
+     * lacks.
      */
     latestPlaceable: boolean;
+    /** Your saved value holds another item at the key of the one your version lacks here. */
+    otherItemHere?: true;
     /**
      * Long text found again by region from its three versions: the text the merge left, and its
      * regions, each holding your lines there. Absent when the text is one whole value.

package/dist/editor/conflict-cards.js

@@ -149,17 +149,27 @@ export function buildEntryConflicts(data, fields, bodyField, referenceTitle, sav
         if (Object.values(versions).some((v) => v === undefined))
             incomplete = true;
         const latest = versions.latest ? formValueOfSide(versions.latest) : undefined;
-        const latestPlaceable = !!latest &&
+        // Your saved value where a save since the merge changed it, which is what keeping yours keeps:
+        // the branch's version is only how it read at the merge.
+        const savedHere = saved && valueAtChange(saved, { dataPath: field.dataPath }, bodyField);
+        const branchHere = versions.yours &&
+            valueAtChange(formValueOfSide(versions.yours), { dataPath: field.dataPath }, bodyField);
+        // A save can give a look-alike the key of an item your version lacks once it is gone: a choice
+        // here would land on that other item.
+        const otherItemHere = field.item && !!versions.yours && branchHere === undefined && savedHere !== undefined;
+        const latestFound = !!latest &&
             field.dataPath.every((segment, i) => !('item' in segment) ||
                 (field.item && field.kind === 'removed-on-base' && i === field.dataPath.length - 1) ||
                 valueAtChange(latest, { dataPath: field.dataPath.slice(0, i + 1) }, bodyField) !==
                     undefined);
+        const latestPlaceable = latestFound && !otherItemHere;
         const common = {
             key: field.key,
             mergeSha: field.mergeSha,
             dataPath: field.dataPath,
             item: !!field.item,
             latestPlaceable,
+            ...(otherItemHere && { otherItemHere: true }),
             ...(latest && { latest }),
         };
         const card = { key: field.key, mergeSha: field.mergeSha };
@@ -174,12 +184,7 @@ export function buildEntryConflicts(data, fields, bodyField, referenceTitle, sav
         const named = toLatest.get(field.drawerKey) ?? toYours.get(field.drawerKey);
         const along = fieldAlong(fields, field.dataPath);
         const path = named?.path ?? between.get(field.drawerKey)?.path ?? along.path;
-        // Your saved value where a save since the merge changed it, which is what keeping yours keeps:
-        // the branch's version is only how it read at the merge.
-        const savedHere = saved && valueAtChange(saved, { dataPath: field.dataPath }, bodyField);
-        const branchHere = versions.yours &&
-            valueAtChange(formValueOfSide(versions.yours), { dataPath: field.dataPath }, bodyField);
-        const savedYours = saved && !equal(savedHere, branchHere)
+        const savedYours = saved && !otherItemHere && !equal(savedHere, branchHere)
             ? displayWhole(along.field, savedHere, referenceTitle)
             : undefined;
         const savedMarks = (before) => savedYours && before.kind === 'text' && savedYours.kind === 'text'
@@ -245,7 +250,7 @@ export function buildEntryConflicts(data, fields, bodyField, referenceTitle, sav
                         path,
                         before,
                         latest: latestValue,
-                        ...(!latestPlaceable && { latestUnavailable: true }),
+                        ...(!latestFound && { latestUnavailable: true }),
                         yours: savedYours ?? yoursValue,
                         ...(latestText && { latestText }),
                         ...(yoursText && { yoursText }),
@@ -267,7 +272,7 @@ export function buildEntryConflicts(data, fields, bodyField, referenceTitle, sav
                     path,
                     before,
                     latest: fromLatest ? (fromLatest.after ?? EMPTY) : (across?.before ?? EMPTY),
-                    ...(!latestPlaceable && { latestUnavailable: true }),
+                    ...(!latestFound && { latestUnavailable: true }),
                     yours: savedYours ?? (fromYours ? (fromYours.after ?? EMPTY) : (across?.after ?? EMPTY)),
                     ...(fromLatest?.text && { latestText: fromLatest.text }),
                     ...(yoursText && { yoursText }),

package/dist/editor/hooks/useBaseUpdate.d.ts

@@ -25,6 +25,8 @@ export interface UseBaseUpdateReturn {
     blockedReason?: string;
     /** Asks for the open branch, unless unsaved changes hold it. */
     request: () => Promise<void>;
+    /** The base has changes the branch's saved work keeps the automatic sync from bringing in. */
+    latestChangesWaiting: boolean;
 }
 /**
  * "Get latest changes" for the open branch: asks, then re-reads the branch list while the branch

package/dist/editor/hooks/useBaseUpdate.js

@@ -33,8 +33,15 @@ function withAsked(branch, asked) {
 }
 /** The branch, carrying the answer this tab already reported when the listing hasn't caught up. */
 function withSettled(branch, settled) {
-    if (!branch || !sameBranch(branch, settled) || !isBaseUpdatePending(branch))
+    if (!branch || !sameBranch(branch, settled))
         return branch;
+    // Read before the answer, so what it says was waiting has come in.
+    const cameIn = settled.lastBaseUpdate.outcome !== 'failed' ? { latestChangesWaiting: undefined } : {};
+    if (!isBaseUpdatePending(branch)) {
+        return laterThan(settled.requestedAt, branch.baseUpdateRequestedAt)
+            ? { ...branch, ...cameIn }
+            : branch;
+    }
     return laterThan(branch.baseUpdateRequestedAt ?? '', settled.requestedAt) &&
         branch.baseUpdateRequestedAt !== undefined
         ? branch
@@ -42,6 +49,7 @@ function withSettled(branch, settled) {
             ...branch,
             baseUpdateRequestedAt: settled.requestedAt,
             lastBaseUpdate: settled.lastBaseUpdate,
+            ...cameIn,
         };
 }
 /**
@@ -228,7 +236,8 @@ export function useBaseUpdate(options) {
                     return;
                 const now = fresh?.branches.find((b) => b.name === target);
                 const canRetry = now === undefined || now.status === 'editing';
-                showResult('red', result.error ?? REQUEST_FAILED_MESSAGE, canRetry ? retry : undefined);
+                // A 409 is a conflict with the branch's state, which the guidelines colour yellow.
+                showResult(result.status === 409 ? 'yellow' : 'red', result.error ?? REQUEST_FAILED_MESSAGE, canRetry ? retry : undefined);
             }
             catch (err) {
                 if (!isUnanswered(err))
@@ -265,5 +274,6 @@ export function useBaseUpdate(options) {
         requesting: !!name && requestingFor === name,
         blockedReason: unsavedCount > 0 ? SAVE_FIRST_REASON : undefined,
         request,
+        latestChangesWaiting: available && !!branch?.latestChangesWaiting,
     };
 }

package/dist/editor/hooks/useBranchChangesData.d.ts

@@ -45,7 +45,13 @@ interface ChangesState<T, E> {
      */
     reload: () => Promise<void>;
 }
-export type BranchChangesState = ChangesState<BranchChangesData, BranchChangesError>;
+export type BranchChangesState = ChangesState<BranchChangesData, BranchChangesError> & {
+    /**
+     * Reads the list afresh, shown or not, rejecting when the read fails, and empties every entry
+     * change of the branch, so none shows a comparison read before this.
+     */
+    reread: () => Promise<void>;
+};
 /**
  * The branch's changes. `reload` also revalidates every entry change of the branch that is
  * shown, so one save refreshes the list and an open "Show changes" alike.

package/dist/editor/hooks/useBranchChangesData.js

@@ -98,12 +98,25 @@ export function useBranchChangesData(apiClient, branch, enabled) {
             mutateKeys((k) => typeof k === 'string' && k.startsWith(entryPrefix)),
         ]);
     }, [mutate, mutateKeys, branch]);
+    const reread = useCallback(async () => {
+        if (!branch)
+            return;
+        const entryPrefix = `${branchChangesKey(branch)}:`;
+        const [fresh] = await Promise.all([
+            fetchBranchChanges(apiClient, branch),
+            mutateKeys((k) => typeof k === 'string' && k.startsWith(entryPrefix), undefined, {
+                revalidate: true,
+            }),
+        ]);
+        await mutateKeys(branchChangesKey(branch), fresh, { revalidate: false });
+    }, [apiClient, mutateKeys, branch]);
     return {
         data: swr.data,
         error: key && swr.error !== undefined ? toError(swr.error) : undefined,
         isLoading: swr.isLoading,
         isValidating: swr.isValidating,
         reload,
+        reread,
     };
 }
 /** One entry's change on the branch, fetched while `target` is set (the drawer is open). */

package/dist/editor/hooks/useBranchManager.d.ts

@@ -92,6 +92,8 @@ export interface UseBranchManagerOptions {
     onStamped?: (stamped: StampedEntry[]) => void;
     /** A request for changes went through; the branch may now carry the reviewer's note as a comment. */
     onChangesRequested?: (branchName: string) => void;
+    /** A branch is being pinned for its reviews: read its content again if it is open, settling once read. */
+    onReviewPinned?: (branchName: string) => Promise<void> | void;
     /**
      * How to ask for the latest changes on `branchName` once it is withdrawn, or undefined where
      * that can't apply. With it, withdrawing a branch that conflicts with its base asks right after.