canopycms 0.11.1 → 0.12.1

package/dist/editor/components/EntryChangesDrawer.js

@@ -6,16 +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, 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 { computeEntryDiff, } from '../entry-diff.js';
-import { editorImageSrc } from '../media/editor-image-src.js';
-import { formatRelativeTime } from '../relative-time.js';
+import { IconAlertCircle, IconAlertTriangle, IconExternalLink, IconArrowsMove, 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';
+import { findBodyFieldName } from '../../utils/body-field.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 } from './ConflictsGroup.js';
 import { LoadingCards, LoadingSummary } from './EntryChangesSkeleton.js';
 const KIND_BADGES = {
     added: { label: 'Added', icon: _jsx(IconPlus, { size: 10, "aria-hidden": true }) },
@@ -23,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 = {
@@ -212,77 +123,28 @@ 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 } }))] }));
 };
+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
+// neither acts on a change the form has edited since: the edit would be lost.
+const UNSAVED_EDIT_REASON = 'This change has unsaved edits. Save them, or choose "Discard changes" in the entry\'s menu, on its name, first.';
+const UNSAVED_EDITS_REASON = 'Some of these changes have unsaved edits. Save them, or choose "Discard changes" in the entry\'s menu, on its name, first.';
+/** Beside the undo controls, where an undo makes the entry unsaved, in place of a new notice. */
+const UNSAVED_IN_FORM = 'Unsaved edits, undos included, apply when you save.';
+const NOT_IN_FORM_REASON = 'The form no longer has the item this change is in, so it can’t be undone here.';
 /** One change: its labelled breadcrumb, its kind in a word, and the values on each side. */
-const ChangeCard = ({ change, wholeEntry, }) => {
+const ChangeCard = ({ change, wholeEntry, undo }) => {
     const moved = change.kind === 'moved' &&
         change.before?.kind === 'position' &&
         change.after?.kind === 'position'
         ? { from: change.before.position, to: change.after.position, of: change.after.of }
         : undefined;
-    return (_jsxs(Paper, { withBorder: true, p: "sm", radius: "sm", component: "li", "data-testid": "entry-change-card", children: [_jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", mb: "xs", align: "flex-start", children: [_jsx(Text, { component: "h3", size: "sm", fw: 500, m: 0, miw: 0, style: { overflowWrap: 'anywhere' }, children: change.path.join(' › ') }), _jsx(Badge, { size: "xs", variant: "light", color: "gray", leftSection: KIND_BADGES[change.kind].icon, style: { flexShrink: 0 }, children: KIND_BADGES[change.kind].label })] }), moved ? (_jsxs(Text, { size: "sm", children: ["Moved from ", ordinal(moved.from), " to ", ordinal(moved.to), " of ", moved.of] })) : wholeEntry ? (_jsx(Value, { value: change[wholeEntry] ?? { kind: 'empty' } })) : change.text?.mode === 'lines' ? (_jsx(LineRows, { rows: change.text.rows })) : change.text?.mode === 'endLineBreak' ? (_jsx(Text, { size: "sm", children: change.text.added ? 'Line break added at the end' : 'Line break removed at the end' })) : (_jsxs(SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "sm", children: [_jsx(SideColumn, { label: "Before", change: change, side: "before" }), _jsx(SideColumn, { label: "After", change: change, side: "after" })] })), change.tooLargeToMark && (_jsx(Text, { size: "xs", c: "dimmed", mt: "xs", "data-testid": "entry-change-unmarked", children: "Too many changes to highlight." }))] }));
+    return (_jsxs(Paper, { withBorder: true, p: "sm", radius: "sm", component: "li", "data-testid": "entry-change-card", children: [_jsxs(Group, { gap: "xs", justify: "space-between", wrap: "nowrap", mb: "xs", align: "flex-start", children: [_jsx(Text, { component: "h3", size: "sm", fw: 500, m: 0, miw: 0, style: { overflowWrap: 'anywhere' }, children: change.path.join(' › ') }), _jsx(Badge, { size: "xs", variant: "light", color: "gray", leftSection: KIND_BADGES[change.kind].icon, style: { flexShrink: 0 }, children: KIND_BADGES[change.kind].label })] }), moved ? (_jsxs(Text, { size: "sm", children: ["Moved from ", ordinal(moved.from), " to ", ordinal(moved.to), " of ", moved.of] })) : wholeEntry ? (_jsx(Value, { value: change[wholeEntry] ?? { kind: 'empty' } })) : change.text?.mode === 'lines' ? (_jsx(LineRows, { rows: change.text.rows })) : change.text?.mode === 'endLineBreak' ? (_jsx(Text, { size: "sm", children: change.text.added ? 'Line break added at the end' : 'Line break removed at the end' })) : (_jsxs(SimpleGrid, { cols: { base: 1, md: 2 }, spacing: "sm", children: [_jsx(SideColumn, { label: "Before", change: change, side: "before" }), _jsx(SideColumn, { label: "After", change: change, side: "after" })] })), change.tooLargeToMark && (_jsx(Text, { size: "xs", c: "dimmed", mt: "xs", "data-testid": "entry-change-unmarked", children: "Too many changes to highlight." })), undo && (_jsxs(Group, { gap: "xs", mt: "xs", wrap: "wrap", align: "center", children: [_jsx(ReasonedButton, { reason: undo.reason, onClick: undo.onToggle, "aria-label": `${undo.undone ? EDITOR_ACTIONS.redoChange : EDITOR_ACTIONS.undoChange} to ${change.path.join(' › ')}`, "data-testid": "entry-change-undo", children: undo.undone ? EDITOR_ACTIONS.redoChange : EDITOR_ACTIONS.undoChange }), _jsx(Text, { size: "xs", "data-testid": "entry-change-undone", children: undo.undone ? [UNDONE_IN_FORM, undo.note].filter(Boolean).join(' ') : '' })] }))] }));
 };
 /**
  * The summary's place, a status region from the first render on, so a screen reader hears
@@ -311,8 +173,33 @@ 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 }) => {
+/** The conflicts' place: loading, their failure with Retry, or the group; nothing for none. */
+const ConflictsSection = ({ conflicts, subject, referenceTitle, undo, noEditReason, lockedReason }) => {
+    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, noEditReason: noEditReason, lockedReason: lockedReason, unsavedEdits: conflicts.unsavedEdits ?? subject.unsavedEdits, entryDeleted: subject.status === 'deleted' }));
+};
+/** 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;
     const diff = useMemo(() => data &&
         computeEntryDiff({
@@ -321,6 +208,33 @@ export const EntryChangesView = ({ base, subject, state, referenceTitle, onOpenE
             after: data.after,
             referenceTitle,
         }), [data, subject.fields, referenceTitle]);
+    // The changes the form still holds: the base against the form's value. A saved change missing
+    // from them is undone in the form, so the drawer keeps no undo state of its own.
+    const formValue = noEditReason ? undefined : undo?.value;
+    const heldKeys = useMemo(() => {
+        if (!formValue || !data?.before || !data.after)
+            return undefined;
+        const held = computeEntryDiff({
+            fields: subject.fields,
+            before: data.before,
+            after: sideOfFormValue(formValue, data.after),
+            marks: false,
+        });
+        return new Set(held.changes.map((change) => change.key));
+    }, [formValue, data, subject.fields]);
+    // What taking out an item did to its threads, said beside its undo until it is redone.
+    const [notes, setNotes] = useState({});
+    // What the last undo or redo did, said once here rather than by every card it touched. `id`
+    // re-keys the text, so a second action with the same words is announced too.
+    const [announcement, setAnnouncement] = useState();
+    const announce = (text) => setAnnouncement((last) => ({ id: (last?.id ?? 0) + 1, text }));
+    const [restoring, setRestoring] = useState(false);
+    const [restoreRefusal, setRestoreRefusal] = useState();
+    useEffect(() => {
+        setNotes({});
+        setAnnouncement(undefined);
+        setRestoreRefusal(undefined);
+    }, [subject.logicalPath, undo?.saved]);
     // A refusal no retry passes: its reason, and the ways the entry can still be looked at.
     const refusal = error?.kind === 'tooLarge' || error?.kind === 'notFound' || error?.kind === 'unreadable'
         ? error.kind
@@ -349,7 +263,95 @@ export const EntryChangesView = ({ base, subject, state, referenceTitle, onOpenE
                 : movedFrom
                     ? undefined
                     : 'Only formatting changed; no field values differ.';
-    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(StatusRegion, { children: [movedFrom && (_jsxs(Text, { size: "sm", style: { overflowWrap: 'anywhere' }, "data-testid": "entry-changes-moved", children: ["Moved from ", movedFrom] })), summary && (_jsx(Text, { size: "sm", "data-testid": "entry-changes-summary", children: summary }))] }), errorNotice, subject.unsavedEdits && (_jsx(Alert, { variant: "light", color: "blue", icon: _jsx(IconInfoCircle, { size: 16 }), "data-testid": "entry-changes-unsaved", children: _jsx(Text, { size: "sm", children: "Unsaved edits aren\u2019t included. Save to include them." }) })), count > 0 && (_jsx(Stack, { component: "ul", gap: "sm", p: 0, m: 0, style: { listStyle: 'none' }, children: diff.changes.map((change) => (_jsx(ChangeCard, { change: change, wholeEntry: wholeEntry }, change.key))) }))] }));
+    // Undo sets an edited entry's values back; an entry type change has no field to set back.
+    const typeChanged = diff.changes.some((change) => !canSetBack(change));
+    const undoable = !!undo && !!heldKeys && !!data.before && !!data.after && count > 0 && !typeChanged;
+    // The field the diff keys an md/mdx body under, as `computeEntryDiff` picks it.
+    const bodySide = data.after ?? data.before;
+    const bodyField = bodySide?.body === undefined
+        ? undefined
+        : (bodySide.bodyFieldName ?? findBodyFieldName(subject.fields));
+    const baseValue = data.before && formValueOfSide(data.before);
+    const savedValue = data.after && (undo?.saved ?? formValueOfSide(data.after));
+    const isUndone = (change) => !!heldKeys && !heldKeys.has(change.key);
+    const allUndone = undoable && diff.changes.every(isUndone);
+    // The form holds `change` as neither the side it was last set to has it, the saved value
+    // or, once undone, the base's: an edit made since, which an undo or redo would replace.
+    const editedSince = (change) => !!undo &&
+        !!savedValue &&
+        !!baseValue &&
+        !holdsAs(undo.value, isUndone(change) ? baseValue : savedValue, change, bodyField);
+    const cardUndo = (change) => {
+        if (!undoable || !undo || !baseValue || !savedValue)
+            return undefined;
+        const held = isUndone(change);
+        const source = held ? savedValue : baseValue;
+        const placeable = !!setChangeBack(undo.value, source, change, bodyField);
+        // A change the form can't take back, such as one inside an item it no longer has, isn't
+        // offered as undone.
+        const undone = held && placeable;
+        return {
+            undone,
+            reason: lockedReason ??
+                (!placeable ? NOT_IN_FORM_REASON : editedSince(change) ? UNSAVED_EDIT_REASON : undefined),
+            note: undone ? notes[change.key] : undefined,
+            onToggle: () => {
+                // Taking out an item the branch added moves its threads to the entry, as a Remove does.
+                const path = !undone && change.item && change.kind === 'added'
+                    ? canopyPathOf(undo.value, change, bodyField)
+                    : undefined;
+                const note = path && undo.threadsWithin && movedThreadsNote(undo.threadsWithin(path));
+                setNotes(({ [change.key]: _dropped, ...rest }) => note ? { ...rest, [change.key]: note } : rest);
+                const where = change.path.join(' › ');
+                announce(undone
+                    ? `Redone: ${where}.`
+                    : [`Undone: ${where}. Save to keep it.`, note].filter(Boolean).join(' '));
+                undo.update((value) => setChangeBack(value, source, change, bodyField) ?? value);
+            },
+        };
+    };
+    const sameCollection = !!subject.from &&
+        subject.from.slice(0, subject.from.lastIndexOf('/')) ===
+            subject.logicalPath.slice(0, subject.logicalPath.lastIndexOf('/'));
+    const editable = !noEditReason;
+    const restorable = !!data.before && !data.after && !!onRestoreEntry;
+    // With one change, its card's "Undo change" is the whole of "Undo all changes".
+    const undoAll = undoable && count > 1;
+    const entryControls = editable && (undoAll || (!data.before && onDeleteEntry) || restorable);
+    const restore = async () => {
+        if (!onRestoreEntry || restoring)
+            return;
+        setRestoring(true);
+        setRestoreRefusal(undefined);
+        try {
+            setRestoreRefusal(await onRestoreEntry());
+        }
+        finally {
+            setRestoring(false);
+        }
+    };
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(StatusRegion, { children: [movedFrom && (_jsxs(Text, { size: "sm", style: { overflowWrap: 'anywhere' }, "data-testid": "entry-changes-moved", children: ["Moved from ", movedFrom] })), summary && (_jsx(Text, { size: "sm", "data-testid": "entry-changes-summary", children: summary }))] }), errorNotice, undoable && (_jsx(VisuallyHidden, { role: "status", "data-testid": "entry-changes-announcement", children: announcement && _jsx("span", { children: announcement.text }, announcement.id) })), subject.unsavedEdits && !undoable && (_jsx(Alert, { variant: "light", color: "blue", icon: _jsx(IconInfoCircle, { size: 16 }), "data-testid": "entry-changes-unsaved", children: _jsx(Text, { size: "sm", children: "Unsaved edits aren\u2019t included. Save to include them." }) })), noEditReason && (_jsx(Text, { size: "sm", "data-testid": "entry-changes-no-edit", children: noEditReason })), editable && undo && typeChanged && (_jsx(Text, { size: "sm", "data-testid": "entry-changes-type-changed", children: "This entry\u2019s type changed on this branch, so its changes can\u2019t be undone here." })), editable && undo && movedFrom && (_jsxs(Text, { size: "sm", "data-testid": "entry-changes-move-hint", children: ["Undoing changes doesn\u2019t move the entry back.", sameCollection && ` To move it back, use "${EDITOR_ACTIONS.changeUrl}…".`] })), editable && lockedReason && (undoable || entryControls) && (_jsx(Text, { size: "sm", "data-testid": "entry-changes-locked", children: lockedReason })), entryControls && (_jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", children: [undoAll && undo && baseValue && savedValue && (_jsx(ReasonedButton, { reason: lockedReason ?? (diff.changes.some(editedSince) ? UNSAVED_EDITS_REASON : undefined), onClick: () => {
+                            if (allUndone) {
+                                setNotes({});
+                                announce('All changes redone in the form.');
+                                undo.update((value) => setAllBack(value, savedValue, diff.changes, bodyField));
+                                return;
+                            }
+                            // Taking out the items the branch added moves their threads, as a Remove does.
+                            const moved = diff.changes.flatMap((change) => {
+                                if (isUndone(change) || !change.item || change.kind !== 'added')
+                                    return [];
+                                const path = canopyPathOf(undo.value, change, bodyField);
+                                const count = path && undo.threadsWithin ? undo.threadsWithin(path) : 0;
+                                return count > 0 ? [{ key: change.key, count }] : [];
+                            });
+                            setNotes(Object.fromEntries(moved.map(({ key, count }) => [key, movedThreadsNote(count) ?? ''])));
+                            const total = moved.reduce((sum, { count }) => sum + count, 0);
+                            announce([ALL_UNDONE_IN_FORM, movedThreadsNote(total)].filter(Boolean).join(' '));
+                            undo.update((value) => setAllBack(value, baseValue, diff.changes, bodyField));
+                        }, "data-testid": "entry-changes-undo-all", children: allUndone ? EDITOR_ACTIONS.redoAllChanges : EDITOR_ACTIONS.undoAllChanges })), !data.before && onDeleteEntry && (_jsx(ReasonedButton, { reason: lockedReason, onClick: onDeleteEntry, danger: true, "data-testid": "entry-changes-delete", children: EDITOR_ACTIONS.deleteEntry })), restorable && (_jsx(ReasonedButton, { reason: lockedReason, onClick: () => void restore(), loading: restoring, "data-testid": "entry-changes-restore", children: EDITOR_ACTIONS.restoreEntry }))] })), undoable && (
+            // Its own line, held from the start, so the text arriving with an undo shifts nothing.
+            _jsx(Text, { size: "xs", mih: 20, "data-testid": "entry-changes-all-undone", children: allUndone ? ALL_UNDONE_IN_FORM : subject.unsavedEdits ? UNSAVED_IN_FORM : '' })), editable && restoreRefusal && (_jsx(Alert, { variant: "light", color: restoreRefusal.tone === 'warning' ? 'yellow' : 'red', icon: restoreRefusal.tone === 'warning' ? (_jsx(IconAlertTriangle, { size: 16 })) : (_jsx(IconAlertCircle, { size: 16 })), "data-testid": "entry-changes-restore-refused", children: _jsx(Text, { size: "sm", children: restoreRefusal.message }) })), count > 0 && (_jsx(Stack, { component: "ul", gap: "sm", p: 0, m: 0, style: { listStyle: 'none' }, children: diff.changes.map((change) => (_jsx(ChangeCard, { change: change, wholeEntry: wholeEntry, undo: editable ? cardUndo(change) : undefined }, change.key))) }))] }));
 };
 /**
  * A modal right-hand drawer, as the Branches, Comments and Media drawers are: it traps focus,

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

@@ -5,7 +5,7 @@ import { useMediaQuery } from '@mantine/hooks';
 import { IconArrowsDiff } from '@tabler/icons-react';
 import { SHELL_HEADER_HEIGHT, SHELL_REGION_BORDER } from '../shell/EditorShell.js';
 import { describeBranchLock } from '../branch-lock.js';
-import { EDITOR_ACTIONS } from '../copy.js';
+import { EDITOR_ACTIONS, NO_EDIT_ACCESS_REASON } from '../copy.js';
 import { EntryBreadcrumb } from './EntryBreadcrumb.js';
 import { EntrySaveButton } from './EntrySaveButton.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,10 +38,8 @@ export function EntryHeader({ currentEntry, entryLoading = false, branchName, bu
         reviewing: branchReviewing,
         pullRequestClosed: branchPullRequestClosed,
         approveBlocked: branchApproveBlocked,
-    });
-    const entryLockReason = entryReadOnly
-        ? "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it."
-        : undefined;
+    }) ?? writesWaitReason;
+    const entryLockReason = entryReadOnly ? NO_EDIT_ACCESS_REASON : undefined;
     // The Tooltip hides it while the editor is busy.
     const saveBlockedReason = branchLockReason ??
         (!branchName

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;

package/dist/editor/components/GetLatestChangesButton.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Loader, Tooltip } from '@mantine/core';
+import { IconRefresh } from '@tabler/icons-react';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { GETTING_LATEST_CHANGES, SLOW_NOTICE, WAITING_NOTICE, } from '../base-update-wait.js';
+const TOOLTIP_EVENTS = { hover: true, focus: true, touch: true };
+/** The Tooltip's text: why it waits, why it can't act, or what it does. */
+export function getLatestChangesReason(control) {
+    if (control.requesting || control.wait !== 'none') {
+        return control.wait === 'slow' ? SLOW_NOTICE : WAITING_NOTICE;
+    }
+    return control.blockedReason ?? control.tooltip;
+}
+/**
+ * "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 function GetLatestChangesButton({ control, buttonRef, testId = 'get-latest-changes-button', }) {
+    const working = control.requesting || control.wait !== 'none';
+    const blocked = working || !!control.blockedReason;
+    const tooltip = getLatestChangesReason(control);
+    return (_jsx(Tooltip, { label: tooltip, events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { ref: buttonRef, size: "sm", variant: "default", style: { flexShrink: 0 }, leftSection: working ? (_jsx(Loader, { size: 14, "aria-hidden": "true" })) : (_jsx(IconRefresh, { size: 14, "aria-hidden": "true" })), onClick: () => {
+                if (!blocked)
+                    control.onRequest();
+            }, "data-disabled": blocked && !working ? true : undefined, "aria-disabled": blocked ? true : undefined, "data-working": working || undefined, "data-testid": testId, children: _jsxs("span", { style: { display: 'inline-grid' }, children: [_jsx("span", { style: { gridArea: '1 / 1', visibility: working ? 'hidden' : undefined }, children: EDITOR_ACTIONS.getLatestChanges }), _jsx("span", { style: { gridArea: '1 / 1', visibility: working ? undefined : 'hidden' }, children: GETTING_LATEST_CHANGES })] }) }) }));
+}

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

@@ -0,0 +1,20 @@
+/**
+ * What a release came to: released (or already gone), or refused with a message and its tone,
+ * `warning` where nothing is lost yet or the outcome is unknown.
+ */
+export type ReleaseOutcome = {
+    released: true;
+} | {
+    error: string;
+    tone: 'warning' | 'error';
+};
+/**
+ * An admin's way out of a branch held because its conflict record was set aside
+ * (api/merge-conflicts.ts `releaseHold`), behind a confirm that says what is lost. A refusal shows
+ * in the confirm, which stays open; a release closes it.
+ */
+export declare function ReleaseHoldButton({ branchLabel, onRelease, }: {
+    /** The branch as the bar names it, which the confirm names. */
+    branchLabel?: string;
+    onRelease: () => Promise<ReleaseOutcome>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ReleaseHoldButton.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Text } from '@mantine/core';
+import { EDITOR_ACTIONS } from '../copy.js';
+import { releaseHoldConsequences } from '../conflict-notice.js';
+import { ConfirmDeleteModal } from './ConfirmDeleteModal.js';
+/**
+ * An admin's way out of a branch held because its conflict record was set aside
+ * (api/merge-conflicts.ts `releaseHold`), behind a confirm that says what is lost. A refusal shows
+ * in the confirm, which stays open; a release closes it.
+ */
+export function ReleaseHoldButton({ branchLabel, onRelease, }) {
+    const [open, setOpen] = useState(false);
+    const [releasing, setReleasing] = useState(false);
+    const [refusal, setRefusal] = useState();
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { size: "compact-sm", variant: "default", style: { flexShrink: 0 }, onClick: () => {
+                    setRefusal(undefined);
+                    setOpen(true);
+                }, "data-testid": "release-hold", children: EDITOR_ACTIONS.releaseHold }), _jsx(ConfirmDeleteModal, { isOpen: open, title: branchLabel ? `Release the hold on "${branchLabel}"?` : "Release this branch's hold?", message: releaseHoldConsequences, confirmLabel: EDITOR_ACTIONS.releaseHold, loading: releasing, onClose: () => setOpen(false), onConfirm: async () => {
+                    setReleasing(true);
+                    setRefusal(undefined);
+                    try {
+                        const outcome = await onRelease();
+                        if ('released' in outcome)
+                            setOpen(false);
+                        else
+                            setRefusal(outcome);
+                    }
+                    finally {
+                        setReleasing(false);
+                    }
+                }, children: refusal && (_jsx(Text, { size: "sm", role: "alert", c: refusal.tone === 'warning'
+                        ? 'var(--mantine-color-yellow-text)'
+                        : 'var(--mantine-color-red-text)', "data-testid": "release-hold-refusal", children: refusal.error })) })] }));
+}

package/dist/editor/components/RetryToastMessage.js

@@ -6,5 +6,5 @@ import { Anchor, Button, Code, Group, Stack, Text } from '@mantine/core';
 export function RetryToastMessage({ message, onRetry, actionLabel = 'Retry', details, }) {
     const [detailsOpen, setDetailsOpen] = useState(false);
     const detailsId = useId();
-    return (_jsxs(Stack, { gap: 4, children: [_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", children: [_jsx(Text, { size: "sm", miw: 0, children: message }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onRetry, children: actionLabel })] }), details && (_jsxs(_Fragment, { children: [_jsx(Anchor, { component: "button", type: "button", size: "xs", style: { alignSelf: 'flex-start' }, "aria-expanded": detailsOpen, "aria-controls": detailsOpen ? detailsId : undefined, onClick: () => setDetailsOpen((open) => !open), children: "Details" }), detailsOpen && (_jsx(Code, { id: detailsId, block: true, style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: details }))] }))] }));
+    return (_jsxs(Stack, { gap: 4, children: [_jsxs(Group, { justify: "space-between", align: "center", gap: "sm", wrap: "nowrap", children: [_jsx(Text, { size: "sm", miw: 0, children: message }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: onRetry, style: { flexShrink: 0 }, children: actionLabel })] }), details && (_jsxs(_Fragment, { children: [_jsx(Anchor, { component: "button", type: "button", size: "xs", style: { alignSelf: 'flex-start' }, "aria-expanded": detailsOpen, "aria-controls": detailsOpen ? detailsId : undefined, onClick: () => setDetailsOpen((open) => !open), children: "Details" }), detailsOpen && (_jsx(Code, { id: detailsId, block: true, style: { whiteSpace: 'pre-wrap', wordBreak: 'break-word' }, children: details }))] }))] }));
 }

package/dist/editor/components/change-parts.d.ts

@@ -0,0 +1,51 @@
+/**
+ * How the "Show changes" drawer shows a value and a text change, shared by its change cards and its
+ * conflict cards: marked text, values as the form would show them, and the drawer's reasoned button.
+ */
+import React from 'react';
+import type { DiffPart, DisplayValue, TextDiff } from '../entry-diff.js';
+export declare const TEXT_STYLE: React.CSSProperties;
+export declare const plural: (count: number, one: string, many: string) => string;
+export declare const ordinal: (n: number) => string;
+export type Side = 'before' | 'after';
+/**
+ * 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.
+ */
+export declare const MarkedText: React.FC<{
+    parts: readonly DiffPart[];
+    side: Side;
+    unit: 'line' | 'text';
+}>;
+/** A value as the form would show it: titles for references, file names for images. */
+export declare const Value: React.FC<{
+    value: DisplayValue;
+    alt?: {
+        text: TextDiff;
+        side: Side;
+    };
+}>;
+/**
+ * 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.
+ */
+export declare const DateValue: React.FC<{
+    value: Extract<DisplayValue, {
+        kind: 'date';
+    }>;
+    text?: React.ReactNode;
+}>;
+/**
+ * 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).
+ */
+export declare const ReasonedButton: React.FC<{
+    reason?: string;
+    onClick: () => void;
+    children: React.ReactNode;
+    danger?: boolean;
+    loading?: boolean;
+    'aria-label'?: string;
+    'data-testid'?: string;
+}>;