canopycms 0.12.0 → 0.12.1

package/dist/editor/components/ConflictsGroup.js

@@ -0,0 +1,364 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The "Conflicts" group at the top of "Show changes": one card per place both you and someone else
+ * changed since you started the branch, showing how it read before, in the latest version and in
+ * yours, and the choices that settle it. A field's choice is an unsaved edit that the entry's next
+ * save resolves (conflict-choices.ts); an entry-level choice acts at once, through the API.
+ * Authors never see a branch name here; an admin's Tooltip names the branch the latest version
+ * comes from.
+ */
+import { useEffect, useId, useState } from 'react';
+import { Alert, Box, Button, CopyButton, Group, Paper, SimpleGrid, Stack, Text, Tooltip, UnstyledButton, VisuallyHidden, } from '@mantine/core';
+import { IconAlertCircle, IconAlertTriangle, IconInfoCircle } from '@tabler/icons-react';
+import { holdsChoice, isDecided, withLatest, withRegions, withYours, } from '../conflict-choices.js';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { MarkedText, ReasonedButton, TEXT_STYLE, Value, plural } from './change-parts.js';
+import { UnsavedMark } from './UnsavedMark.js';
+/**
+ * The three versions a card shows, each label with the Tooltip that says what it is.
+ * @internal Exported for tests.
+ */
+export const VERSION_LABELS = {
+    before: {
+        label: 'Before',
+        tooltip: 'How this field read when you started this branch.',
+    },
+    latest: {
+        label: 'Latest version',
+        tooltip: "How it reads now on the site's shared copy, changed since you started (by another person's approved changes or a developer).",
+    },
+    yours: {
+        label: 'Your version',
+        tooltip: 'Your change on this branch.',
+    },
+};
+/**
+ * The latest version's Tooltip; an admin also learns which branch it comes from.
+ * @internal Exported for tests.
+ */
+export const latestTooltip = (adminBaseBranch) => adminBaseBranch
+    ? `${VERSION_LABELS.latest.tooltip} It comes from ${adminBaseBranch}.`
+    : VERSION_LABELS.latest.tooltip;
+const CHOICE_NOTES = {
+    latest: 'Using the latest version. Save to keep this choice.',
+    yours: 'Keeping your version. Save to keep this choice.',
+    edited: 'Marked resolved. Save to keep this choice.',
+    regions: 'Chosen. Save to keep this choice.',
+    remove: 'Removing it. Save to keep this choice.',
+    keep: 'Keeping it. Save to keep this choice.',
+};
+const REGION_NOTES = {
+    latest: 'Using the latest version here.',
+    yours: 'Keeping your version here.',
+    both: 'Using both here: the latest version, then yours.',
+};
+/**
+ * Why a choice can't replace what the form holds: an edit made since, which it would lose.
+ * @internal Exported for tests.
+ */
+export const EDITED_IN_FORM_REASON = 'You\'ve edited this in the form. Choose "Mark resolved" to keep your edit.';
+const EDITED_IN_FORM = 'Edited in the form.';
+/**
+ * Why an entry-level choice that rewrites the entry waits: it would replace unsaved edits.
+ * @internal Exported for tests.
+ */
+export const SAVE_FIRST_REASON = "Save or discard this entry's unsaved changes first.";
+const OPEN_TO_CHOOSE = 'Open this entry to choose.';
+/**
+ * Why a choice that takes the latest version can't: the latest version couldn't be read, its list
+ * items on the way to the place can't be matched to the ones the merge named, or the form no longer
+ * has the place. "Mark resolved" shows once the form is edited at the place.
+ * @internal Exported for tests.
+ */
+export const LATEST_UNPLACEABLE_REASON = 'The latest version of this can\'t be placed here. Change it in the form by hand, then choose "Mark resolved".';
+const LATEST_UNAVAILABLE = "Can't be shown here";
+/**
+ * A card's heading: where, and what happened there, in plain words.
+ * @internal Exported for tests.
+ */
+export function conflictHeading(card) {
+    if (card.type === 'location')
+        return "This entry's URL was changed by you and by someone else";
+    const where = card.path.join(' › ');
+    const part = card.type === 'region' && card.count > 1 ? ` (part ${card.index + 1} of ${card.count})` : '';
+    if (card.type === 'value' && card.conflict === 'removed-on-base') {
+        return `${where} was removed from the latest version, but you changed it`;
+    }
+    if (card.type === 'value' && card.conflict === 'removed-by-you') {
+        return `You removed ${where}, but it was changed in the latest version`;
+    }
+    return `${where}${part} was changed by you and by someone else`;
+}
+/** 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: '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 },
+        ],
+    },
+    // 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 }],
+    },
+    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 },
+        ],
+    },
+};
+/** The text a value can be copied as; undefined for one with no plain text, such as an image. */
+const copyTextOf = (value) => {
+    switch (value.kind) {
+        case 'text':
+        case 'raw':
+            return value.text;
+        case 'date':
+            return value.text;
+        case 'number':
+            return String(value.value);
+        case 'select':
+            return value.label;
+        default:
+            return undefined;
+    }
+};
+/** A version's label, its Tooltip opening on hover, focus and touch, and said to a screen reader. */
+const VersionLabel = ({ label, tooltip }) => {
+    const id = useId();
+    return (_jsxs(Group, { gap: 4, wrap: "nowrap", children: [_jsx(Tooltip, { label: tooltip, multiline: true, maw: 280, events: { hover: true, focus: true, touch: true }, children: _jsxs(UnstyledButton, { "aria-describedby": id, style: { display: 'inline-flex', alignItems: 'center', gap: 4 }, "data-testid": "conflict-version-label", children: [_jsx(Text, { size: "xs", c: "dimmed", span: true, children: label }), _jsx(IconInfoCircle, { size: 12, "aria-hidden": true, style: { color: 'var(--mantine-color-dimmed)' } })] }) }), _jsx(VisuallyHidden, { id: id, children: tooltip })] }));
+};
+/** One side of a line diff: its lines, the changed runs marked. */
+const SideLines = ({ text }) => (_jsx(Stack, { gap: 0, children: text.rows.map((row, i) => {
+        if (row.kind === 'skipped') {
+            return (_jsx(Text, { size: "xs", c: "dimmed", children: plural(row.count, 'unchanged line', 'unchanged lines') }, i));
+        }
+        if (row.kind === 'same') {
+            return (_jsx(Text, { size: "sm", style: TEXT_STYLE, children: row.text || ' ' }, i));
+        }
+        if (!row.after)
+            return null;
+        return (_jsx(Text, { size: "sm", style: TEXT_STYLE, children: _jsx(MarkedText, { parts: row.after, side: "after", unit: "line" }) }, i));
+    }) }));
+/** A version's value, marked against Before where it changed text. */
+const VersionValue = ({ value, marks, unavailable }) => {
+    if (unavailable) {
+        return (_jsx(Text, { size: "sm", c: "dimmed", "data-testid": "conflict-latest-unavailable", children: LATEST_UNAVAILABLE }));
+    }
+    if (marks?.mode === 'words') {
+        return (_jsx(Text, { size: "sm", style: TEXT_STYLE, children: _jsx(MarkedText, { parts: marks.parts, side: "after", unit: "text" }) }));
+    }
+    if (marks?.mode === 'lines')
+        return _jsx(SideLines, { text: marks });
+    if (typeof value === 'string') {
+        return value === '' ? (_jsx(Text, { size: "sm", c: "dimmed", children: "No lines" })) : (_jsx(Text, { size: "sm", style: TEXT_STYLE, children: value }));
+    }
+    return _jsx(Value, { value: value });
+};
+const Versions = ({ card, adminBaseBranch }) => (_jsxs(SimpleGrid, { cols: { base: 1, md: 3 }, spacing: "sm", children: [_jsxs(Stack, { gap: 4, miw: 0, "data-testid": "conflict-before", children: [_jsx(VersionLabel, { ...VERSION_LABELS.before }), _jsx(VersionValue, { value: card.before })] }), _jsxs(Stack, { gap: 4, miw: 0, "data-testid": "conflict-latest", children: [_jsx(VersionLabel, { label: VERSION_LABELS.latest.label, tooltip: latestTooltip(adminBaseBranch) }), _jsx(VersionValue, { value: card.latest, marks: card.latestText, unavailable: card.type === 'value' && card.latestUnavailable })] }), _jsxs(Stack, { gap: 4, miw: 0, "data-testid": "conflict-yours", children: [_jsx(VersionLabel, { ...VERSION_LABELS.yours }), _jsx(VersionValue, { value: card.yours, marks: card.yoursText })] })] }));
+const ChoiceNote = ({ text }) => (_jsxs(Group, { gap: 6, wrap: "nowrap", "data-testid": "conflict-choice-note", children: [_jsx(UnsavedMark, { "aria-hidden": "true" }), _jsx(Text, { size: "xs", children: text })] }));
+/** Latest, then yours, as "Use both" would place them, shown before it is applied. */
+const UseBothPreview = ({ latest, yours }) => {
+    const [shown, setShown] = useState(false);
+    const id = useId();
+    return (_jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Button, { size: "compact-xs", variant: "subtle", "aria-expanded": shown, "aria-controls": shown ? id : undefined, onClick: () => setShown((s) => !s), children: shown ? 'Hide "Use both" preview' : 'Preview "Use both"' }), shown && (_jsxs(Box, { id: id, "data-testid": "conflict-use-both-preview", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Use both: latest, then yours" }), _jsx(Text, { size: "sm", style: TEXT_STYLE, children: [latest, yours].filter((t) => t !== '').join('\n') })] }))] }));
+};
+const FieldCardActions = ({ card, actions, label, }) => {
+    const { reason, latestReason, choice, held } = actions;
+    const named = (verb) => `${verb}: ${label}`;
+    const btn = (verb, onClick, testId, why = reason) => (_jsx(ReasonedButton, { reason: why, onClick: onClick, "aria-label": named(verb), "data-testid": testId, children: verb }, testId));
+    const editedReason = reason ?? (held ? undefined : EDITED_IN_FORM_REASON);
+    // A choice taking the latest version waits for both: nothing to lose, and something to take.
+    const latestTakes = reason ?? latestReason ?? editedReason;
+    if (card.type === 'region') {
+        const chosen = choice?.how === 'regions' ? choice.regions[card.index] : undefined;
+        const fieldChosen = choice && choice.how !== 'regions';
+        if (chosen || fieldChosen) {
+            return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [_jsx(ChoiceNote, { text: chosen
+                            ? `${REGION_NOTES[chosen]} Save to keep this choice.`
+                            : CHOICE_NOTES[choice?.how ?? 'edited'] }), btn(EDITOR_ACTIONS.chooseAgain, () => (chosen ? actions.clearRegion(card.index) : actions.choose(undefined)), 'conflict-choose-again')] }));
+        }
+        return (_jsxs(Stack, { gap: 4, children: [_jsx(UseBothPreview, { latest: card.latest, yours: card.yours }), _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [btn(EDITOR_ACTIONS.useLatestVersion, () => actions.chooseRegion(card.index, 'latest'), 'conflict-use-latest', latestTakes), held
+                            ? btn(EDITOR_ACTIONS.keepYourVersion, () => actions.chooseRegion(card.index, 'yours'), 'conflict-keep-yours')
+                            : btn(EDITOR_ACTIONS.markResolved, () => actions.choose({ how: 'edited' }), 'conflict-mark-resolved'), btn(EDITOR_ACTIONS.useBoth, () => actions.chooseRegion(card.index, 'both'), 'conflict-use-both', latestTakes), btn('Edit', actions.edit, 'conflict-edit'), !held && !reason && _jsx(Text, { size: "xs", children: EDITED_IN_FORM })] })] }));
+    }
+    if (card.type === 'location') {
+        if (choice) {
+            return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [_jsx(ChoiceNote, { text: CHOICE_NOTES.yours }), btn(EDITOR_ACTIONS.chooseAgain, () => actions.choose(undefined), 'conflict-choose-again')] }));
+        }
+        return (_jsx(Group, { gap: "xs", wrap: "wrap", align: "center", children: btn(EDITOR_ACTIONS.keepYourVersion, () => actions.choose({ how: 'yours' }), 'conflict-keep-yours') }));
+    }
+    const removed = card.conflict !== 'changed';
+    if (choice) {
+        // "Remove it" and "Keep it" name what happens to the value, not whose version it is.
+        const note = !removed
+            ? CHOICE_NOTES[choice.how]
+            : (choice.how === 'latest') === (card.conflict === 'removed-on-base')
+                ? CHOICE_NOTES.remove
+                : CHOICE_NOTES.keep;
+        return (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [_jsx(ChoiceNote, { text: note }), btn(EDITOR_ACTIONS.chooseAgain, () => actions.choose(undefined), 'conflict-choose-again')] }));
+    }
+    if (removed) {
+        const removeIs = card.conflict === 'removed-on-base' ? 'latest' : 'yours';
+        const keepIs = removeIs === 'latest' ? 'yours' : 'latest';
+        const pick = (how) => () => actions.choose(how === 'latest' ? { how: 'latest' } : { how: 'yours' });
+        const copy = copyTextOf(card.yours);
+        // Your side is what the form holds, so once it was edited by hand the edit is what's kept.
+        const side = (verb, how, testId) => how === 'latest'
+            ? btn(verb, pick(how), testId, latestTakes)
+            : 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 &&
+                    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
+                ? btn(EDITOR_ACTIONS.keepYourVersion, () => actions.choose({ how: 'yours' }), 'conflict-keep-yours')
+                : btn(EDITOR_ACTIONS.markResolved, () => actions.choose({ how: 'edited' }), 'conflict-mark-resolved'), !card.item && btn('Edit', actions.edit, 'conflict-edit'), !held && !reason && _jsx(Text, { size: "xs", children: EDITED_IN_FORM })] }));
+};
+/**
+ * A conflict card's yellow mark (a 409 conflict is yellow: nothing is lost yet) beside its warning
+ * icon and heading, never colour alone. The card keeps the drawer's surface, which the text and
+ * change marks are measured on.
+ */
+const CARD_ACCENT = {
+    borderInlineStart: '4px solid var(--mantine-color-yellow-filled)',
+};
+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 [working, setWorking] = useState();
+    const [refusal, setRefusal] = useState();
+    const { heading, body, choices } = ENTRY_KINDS[kind];
+    const resolve = async (choice) => {
+        if (!onResolve || working)
+            return;
+        setWorking(choice);
+        setRefusal(undefined);
+        try {
+            const refused = await onResolve(choice);
+            setRefusal(refused && { ...refused, choice });
+        }
+        finally {
+            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" }))] }) }))] }) }));
+};
+/** 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, }) => {
+    const headingId = useId();
+    const editable = !noEditReason;
+    const entryKind = data.kind === 'fields' ? undefined : data.kind;
+    // Field conflicts on an entry the branch deleted: one card settles them, the fields shown below it.
+    const deletedFields = !entryKind && !!entryDeleted;
+    // A stored choice stands while the form still holds what it chose. One the form was edited away
+    // from since stands for the edit: a decided choice becomes "Mark resolved", which the save
+    // resolves as it would the choice, open drawer or not; an undecided region choice, or one on text
+    // that now shows whole, is dropped. A locked form shows the saved value over the draft it keeps,
+    // so while locked every choice stands as made.
+    const standing = new Map();
+    const stale = [];
+    if (form) {
+        for (const field of conflicts.fields) {
+            const chosen = choices[field.key];
+            if (!chosen || chosen.mergeSha !== field.mergeSha)
+                continue;
+            const placed = chosen.choice.how !== 'regions' || !!field.text;
+            const held = !!lockedReason ||
+                chosen.choice.how === 'edited' ||
+                holdsChoice(form.value, form.saved, field, chosen.choice, form.bodyField);
+            if (placed && held) {
+                standing.set(field.key, chosen.choice);
+            }
+            else if (placed && isDecided(field, chosen.choice)) {
+                standing.set(field.key, { how: 'edited' });
+                stale.push({ field, next: { how: 'edited' } });
+            }
+            else {
+                stale.push({ field, next: undefined });
+            }
+        }
+    }
+    const staleKeys = stale.map(({ field, next }) => `${field.key}:${next?.how ?? ''}`).join(',');
+    const open = entryKind || deletedFields
+        ? 1
+        : conflicts.fields.filter((f) => !isDecided(f, form ? standing.get(f.key) : choices[f.key]?.choice)).length;
+    useEffect(() => {
+        for (const { field, next } of stale)
+            onChoose?.(field, next, !!next);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- `stale` is this render's, keyed by `staleKeys`
+    }, [staleKeys]);
+    const actionsFor = (field) => {
+        if (!form || !editable || !onChoose)
+            return undefined;
+        const choice = standing.get(field.key);
+        const held = holdsChoice(form.value, form.saved, field, choice, form.bodyField);
+        const record = (next) => onChoose(field, next, isDecided(field, next));
+        const latestReason = withLatest(form.value, field, form.bodyField) !== undefined
+            ? undefined
+            : LATEST_UNPLACEABLE_REASON;
+        return {
+            reason: lockedReason,
+            latestReason,
+            choice,
+            held,
+            choose: (next) => {
+                if (next?.how === 'latest') {
+                    form.update((v) => withLatest(v, field, form.bodyField) ?? v);
+                }
+                else if (next === undefined &&
+                    held &&
+                    (choice?.how === 'latest' || choice?.how === 'regions')) {
+                    // Choosing again takes back what a choice wrote, unless the form was edited since; an
+                    // edit marked resolved stays.
+                    form.update((v) => withYours(v, form.saved, field, form.bodyField) ?? v);
+                }
+                record(next);
+            },
+            chooseRegion: (region, regionChoice) => {
+                const regions = {
+                    ...(choice?.how === 'regions' ? choice.regions : {}),
+                    [region]: regionChoice,
+                };
+                form.update((v) => withRegions(v, field, regions, form.bodyField) ?? v);
+                record({ how: 'regions', regions });
+                // A join almost always needs tidying, so it opens for editing.
+                if (regionChoice === 'both')
+                    onEdit?.(field);
+            },
+            clearRegion: (region) => {
+                if (choice?.how !== 'regions')
+                    return;
+                const { [region]: _cleared, ...regions } = choice.regions;
+                if (held)
+                    form.update((v) => withRegions(v, field, regions, form.bodyField) ?? v);
+                record(Object.keys(regions).length > 0 ? { how: 'regions', regions } : undefined);
+            },
+            edit: () => onEdit?.(field),
+        };
+    };
+    return (_jsxs(Stack, { component: "section", gap: "xs", "aria-labelledby": headingId, "data-testid": "conflicts-group", children: [_jsx(Text, { component: "h3", id: headingId, size: "sm", fw: 600, m: 0, children: "Conflicts" }), _jsx(Text, { size: "sm", "data-testid": "conflicts-summary", children: entryKind || deletedFields
+                    ? '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) => {
+                            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

@@ -1,6 +1,8 @@
 import { type Ref } from 'react';
 import type { BranchHold, BranchStatus, PullRequestState } from '../../types.js';
 import type { SaveAllProgress } from '../hooks/save-all.js';
+import { type ReleaseOutcome } from './ReleaseHoldButton.js';
+import { type BaseUpdateControl, type BaseUpdateWait } from '../base-update-wait.js';
 export interface EditorHeaderProps {
     branchName: string;
     /** What the pill shows for the branch, when it is not `branchName`. */
@@ -72,10 +74,23 @@ export interface EditorHeaderProps {
     branchPending?: boolean;
     /** The branch list answered without this branch. */
     branchMissing?: boolean;
+    /** "Get latest changes", when this user may ask on the open branch (hooks/useBaseUpdate.tsx). */
+    baseUpdate?: BaseUpdateControl;
+    /** Choices a merge's conflicts leave open on the branch, which hold Submit for review. */
+    openConflicts?: number;
+    /**
+     * The branch is held as its record of conflicts was set aside; `onRelease`, an admin's way out,
+     * releases it.
+     */
+    conflictRecordHeld?: {
+        onRelease?: () => Promise<ReleaseOutcome>;
+    };
+    /** The open branch's wait for the latest changes, whoever asked: every viewer who sees it waits. */
+    latestWait?: BaseUpdateWait;
 }
 /**
  * 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, }: 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, openConflicts, conflictRecordHeld, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;