canopycms 0.7.1 → 0.8.0

package/dist/editor/components/BranchPill.js

@@ -10,8 +10,8 @@ import { ReasonedMenuItem } from './ReasonedMenuItem.js';
 import { useMenuItemFocusReturn } from '../utils/focus-return.js';
 const plural = (count, one, many) => `${count} ${count === 1 ? one : many}`;
 /**
- * The branch's name. Its menu, headed by the full name, holds the branch actions. Below `sm` the
- * name truncates shorter, so the actions don't clip.
+ * The branch's name. Its menu, headed by the name untruncated, holds the branch actions. Below
+ * `sm` the name truncates shorter, so the actions don't clip.
  */
 export function BranchPill({ branchName, loading, unsavedCount: unsaved, onSwitchBranch, onRefreshBranch, onDiscardAll, pillRef, }) {
     const trigger = useRef(null);

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

@@ -3,6 +3,8 @@ import type { BranchStatus, PullRequestState } from '../../types.js';
 import type { SaveAllProgress } from '../hooks/save-all.js';
 export interface EditorHeaderProps {
     branchName: string;
+    /** What the pill shows for the branch, when it is not `branchName`. */
+    branchLabel?: string;
     /** Whether operations are currently in progress. */
     busy: boolean;
     /** Entries with unsaved changes on the branch. */
@@ -72,4 +74,4 @@ export interface EditorHeaderProps {
  * 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, 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, 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, branchWriteBlocked, branchLoading, branchPending, branchMissing, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EditorHeader.js

@@ -19,7 +19,7 @@ import { useFocusHandOff, useMenuItemFocusReturn } from '../utils/focus-return.j
  * 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, 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, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
+export function EditorHeader({ branchName, branchLabel, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, onApprove = noopAction, onRequestChanges = noopAction, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
     const reviewRole = reviewRoleOf({
         status: branchStatus,
         createdBy: branchCreatedBy,
@@ -81,7 +81,7 @@ export function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, b
         returnFocusTo: () => focusTarget(2),
     };
     const caretOnWay = narrow && !!barAction && !!workflow;
-    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef }), _jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), (!narrow || editable) && (_jsx(SaveAllButton
+    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchLabel ?? branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef }), _jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), (!narrow || editable) && (_jsx(SaveAllButton
                 // Its reserved width follows this branch's counts, not the session's largest.
                 , { onSaveAll: onSaveAll, unsavedCount: modifiedCount, blockedReason: branchLockReason ??
                         (!branchName

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

@@ -0,0 +1,51 @@
+/**
+ * The "Changes to <title>" drawer: one card per changed field of an entry, its value at the
+ * base beside its saved value on the branch. LazyEntryChangesDrawer loads it, so the diff model
+ * and jsdiff stay out of the editor's first chunk.
+ */
+import React from 'react';
+import type { BranchChangeEntry } from '../../api/branch-changes.js';
+import type { FieldConfig } from '../../config/index.js';
+import type { EntryChangeState } from '../hooks/useBranchChangesData.js';
+/** The entry a drawer compares, as the editor knows it. */
+export interface EntryChangesSubject {
+    logicalPath: string;
+    /** A moved entry's path at the base. */
+    from?: string;
+    /** The entry's content id, which both sides must carry. */
+    contentId?: string;
+    status: BranchChangeEntry['status'];
+    title: string;
+    /** The entry type's fields; empty when the editor has none for it. */
+    fields: readonly FieldConfig[];
+    /** A moved entry's path at the base, in human labels. */
+    movedFromLabel?: string;
+    /** The open entry has edits not yet saved, which the comparison leaves out. */
+    unsavedEdits?: boolean;
+}
+export interface EntryChangesDrawerProps {
+    opened: boolean;
+    onClose: () => void;
+    /** The close transition has finished. */
+    onExited?: () => void;
+    /** Names the element that takes focus after the drawer closes. */
+    returnFocusTo?: () => HTMLElement | null;
+    /** The base branch's name, for the copy. */
+    base: string;
+    subject: EntryChangesSubject;
+    /** The comparison, loaded while the drawer is open (`useEntryChangeData`). */
+    state: Pick<EntryChangeState, 'data' | 'error' | 'isValidating' | 'reload'>;
+    /** A referenced entry's title, from the entries the editor has listed. */
+    referenceTitle?: (id: string) => string | undefined;
+    /** Closes the drawer and opens the entry; given only when the entry exists on the branch. */
+    onOpenEntry?: () => void;
+    /** The branch's pull request, offered where this drawer can't compare. */
+    pullRequestUrl?: string;
+}
+/** The drawer's body: its states, then the summary and one card per change. */
+export declare const EntryChangesView: React.FC<Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>>;
+/**
+ * A modal right-hand drawer, as the Branches, Comments and Media drawers are: it traps focus,
+ * and the form and preview wait behind its backdrop.
+ */
+export declare const EntryChangesDrawer: React.FC<EntryChangesDrawerProps>;

package/dist/editor/components/EntryChangesDrawer.js

@@ -0,0 +1,363 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The "Changes to <title>" drawer: one card per changed field of an entry, its value at the
+ * base beside its saved value on the branch. LazyEntryChangesDrawer loads it, so the diff model
+ * 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 { 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 { OverlayDrawer } from '../shell/OverlayHeader.js';
+import { focusReturnProps } from '../utils/focus-return.js';
+import { LoadingCards, LoadingSummary } from './EntryChangesSkeleton.js';
+const KIND_BADGES = {
+    added: { label: 'Added', icon: _jsx(IconPlus, { size: 10, "aria-hidden": true }) },
+    removed: { label: 'Removed', icon: _jsx(IconMinus, { size: 10, "aria-hidden": true }) },
+    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 = {
+    display: 'grid',
+    gridTemplateColumns: '1rem minmax(0, 1fr) 1rem minmax(0, 1fr)',
+    columnGap: 'var(--mantine-spacing-xs)',
+};
+/** Consecutive changed rows of one kind past this many show only RUN_SHOWN of them until asked. */
+const LONG_RUN = 50;
+const RUN_SHOWN = 20;
+/** `rows` split into runs: each long run of lines added, removed or changed is its own segment. */
+const rowSegments = (rows) => {
+    const kindOf = (row) => row.kind !== 'change' ? undefined : !row.before ? 'added' : !row.after ? 'removed' : 'changed';
+    const segments = [];
+    let plain = [];
+    for (let i = 0; i < rows.length;) {
+        const side = kindOf(rows[i]);
+        let end = i + 1;
+        while (side && end < rows.length && kindOf(rows[end]) === side)
+            end++;
+        if (side && end - i > LONG_RUN) {
+            if (plain.length > 0)
+                segments.push({ rows: plain });
+            plain = [];
+            segments.push({ rows: rows.slice(i, end), long: side });
+        }
+        else {
+            plain.push(...rows.slice(i, end));
+        }
+        i = end;
+    }
+    if (plain.length > 0)
+        segments.push({ rows: plain });
+    return segments;
+};
+/** A long run's first rows, then the button that shows the rest and moves focus to them. */
+const LongRun = ({ rows, side, renderRows }) => {
+    const [expanded, setExpanded] = useState(false);
+    const firstNew = useRef(null);
+    useEffect(() => {
+        if (expanded)
+            firstNew.current?.focus();
+    }, [expanded]);
+    if (expanded) {
+        return (_jsxs(_Fragment, { children: [renderRows(rows.slice(0, RUN_SHOWN)), renderRows(rows.slice(RUN_SHOWN), firstNew)] }));
+    }
+    return (_jsxs(_Fragment, { children: [renderRows(rows.slice(0, RUN_SHOWN)), _jsx(Box, { style: { gridColumn: '1 / -1' }, children: _jsxs(Button, { size: "compact-sm", variant: "subtle", onClick: () => setExpanded(true), children: ["Show all ", rows.length, " ", side, " lines"] }) })] }));
+};
+/** The props that make a row's first text cell a focus target, when `i` is the first row's. */
+const focusTarget = (i, focusRef) => i === 0 && focusRef ? { ref: focusRef, tabIndex: -1 } : {};
+/** Two columns from `md`: an unchanged line is read once, from Before. */
+const twoColumnRows = (rows, focusRef) => rows.map((row, i) => {
+    if (row.kind === 'skipped') {
+        return _jsx(Skipped, { count: row.count, style: { gridColumn: '1 / -1' } }, i);
+    }
+    if (row.kind === 'same') {
+        const text = row.text || '\u00a0';
+        return (_jsxs(React.Fragment, { children: [_jsx(Gutter, {}), _jsx(Text, { size: "sm", style: TEXT_STYLE, ...focusTarget(i, focusRef), children: text }), _jsx(Gutter, {}), _jsx(Text, { size: "sm", style: TEXT_STYLE, "aria-hidden": true, children: text })] }, i));
+    }
+    return (_jsxs(React.Fragment, { children: [_jsx(Gutter, { sign: row.before ? '−' : undefined }), _jsx(Text, { size: "sm", style: TEXT_STYLE, ...focusTarget(row.before ? i : -1, focusRef), children: row.before ? _jsx(MarkedText, { parts: row.before, side: "before", unit: "line" }) : null }), _jsx(Gutter, { sign: row.after ? '+' : undefined }), _jsx(Text, { size: "sm", style: TEXT_STYLE, ...focusTarget(row.before ? -1 : i, focusRef), children: row.after ? _jsx(MarkedText, { parts: row.after, side: "after", unit: "line" }) : null })] }, i));
+});
+/** One column below `md`, with − and + gutters. */
+const oneColumnRows = (rows, focusRef) => rows.flatMap((row, i) => {
+    if (row.kind === 'skipped') {
+        return [_jsx(Skipped, { count: row.count, style: { gridColumn: '1 / -1' } }, i)];
+    }
+    if (row.kind === 'same') {
+        return [
+            _jsx(Gutter, {}, `${i}g`),
+            _jsx(Text, { size: "sm", style: TEXT_STYLE, ...focusTarget(i, focusRef), children: row.text || '\u00a0' }, i),
+        ];
+    }
+    return ['before', 'after'].flatMap((side) => {
+        const parts = row[side];
+        if (!parts)
+            return [];
+        return [
+            _jsx(Gutter, { sign: side === 'before' ? '−' : '+' }, `${i}${side}g`),
+            _jsx(Text, { size: "sm", style: TEXT_STYLE, ...focusTarget(side === 'before' || !row.before ? i : -1, focusRef), children: _jsx(MarkedText, { parts: parts, side: side, unit: "line" }) }, `${i}${side}`),
+        ];
+    });
+});
+/**
+ * A line diff as aligned rows, so Before and After stay level however many lines one side adds:
+ * from `md`, two columns with an empty cell opposite a line the other side lacks; below it, one
+ * column with − and + gutters. One layout renders, chosen by the theme's `md` breakpoint.
+ */
+const LineRows = ({ rows }) => {
+    const theme = useMantineTheme();
+    const narrow = useMediaQuery(`(max-width: ${em(getBreakpointValue('md', theme.breakpoints) - 0.1)})`, false, {
+        getInitialValueInEffect: false,
+    }) === true;
+    const renderRows = narrow ? oneColumnRows : twoColumnRows;
+    const segments = rowSegments(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.
+ */
+const DateValue = ({ value, text }) => (_jsxs(Stack, { gap: 0, children: [_jsx(Text, { size: "sm", style: TEXT_STYLE, children: text ?? value.text }), _jsx(Text, { size: "xs", c: "dimmed", children: formatRelativeTime(value.dateOnly ? `${value.iso}T00:00:00` : 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 } }))] }));
+};
+/** One change: its labelled breadcrumb, its kind in a word, and the values on each side. */
+const ChangeCard = ({ change, wholeEntry, }) => {
+    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." }))] }));
+};
+/**
+ * The summary's place, a status region from the first render on, so a screen reader hears
+ * "Loading changes…" and then the summary that replaces it, each once.
+ */
+const StatusRegion = ({ children }) => (_jsx(Stack, { gap: 2, role: "status", "data-testid": "entry-changes-status", children: children }));
+const REFUSALS = {
+    tooLarge: 'This entry is too large to compare here.',
+    // A path the user can't read answers 404 too, so this never says the entry doesn't exist.
+    notFound: 'This entry can’t be compared here.',
+    unreadable: 'This entry couldn’t be read on one side, so it can’t be compared.',
+};
+/**
+ * "3 fields changed since main"; whole list items are counted apart from fields:
+ * "6 fields changed, 2 items added, 1 item moved since main".
+ */
+const changeSummary = (changes, base) => {
+    const items = (kind) => changes.filter((c) => c.item && c.kind === kind).length;
+    const fields = changes.filter((c) => !c.item).length;
+    const parts = [
+        ...(fields > 0 ? [`${plural(fields, 'field', 'fields')} changed`] : []),
+        ...['added', 'removed', 'moved'].flatMap((kind) => {
+            const count = items(kind);
+            return count > 0 ? [`${plural(count, 'item', 'items')} ${kind}`] : [];
+        }),
+    ];
+    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 }) => {
+    const { data, error } = state;
+    const diff = useMemo(() => data &&
+        computeEntryDiff({
+            fields: subject.fields,
+            before: data.before,
+            after: data.after,
+            referenceTitle,
+        }), [data, subject.fields, referenceTitle]);
+    // 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
+        : undefined;
+    if (refusal) {
+        return (_jsxs(Stack, { gap: "xs", align: "flex-start", "data-testid": `entry-changes-${refusal}`, children: [_jsx(Text, { size: "sm", children: REFUSALS[refusal] }), _jsxs(Group, { gap: "md", children: [onOpenEntry && refusal !== 'notFound' && (_jsx(Button, { size: "compact-sm", variant: "subtle", px: 0, onClick: onOpenEntry, children: "Open the entry" })), pullRequestUrl && (_jsxs(Button, { component: "a", href: pullRequestUrl, target: "_blank", rel: "noopener noreferrer", size: "compact-sm", variant: "subtle", px: 0, rightSection: _jsx(IconExternalLink, { size: 14, "aria-hidden": true }), children: ["Compare on the pull request", _jsx(VisuallyHidden, { component: "span", children: " (opens in a new tab)" })] }))] })] }));
+    }
+    const errorNotice = error && (_jsx(Alert, { variant: "light", color: error.kind === 'syncing' ? 'yellow' : 'red', icon: error.kind === 'syncing' ? _jsx(IconAlertTriangle, { size: 16 }) : _jsx(IconAlertCircle, { size: 16 }), "data-testid": `entry-changes-${error.kind}`, children: _jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", children: error.kind === 'syncing'
+                        ? `${error.message ?? `This branch is being synced with ${base}. Try again in a moment.`}${data ? ' The changes below may be out of date.' : ''}`
+                        : data
+                            ? 'Couldn’t refresh this entry’s changes. They may be out of date.'
+                            : 'Couldn’t load this entry’s changes.' }), _jsx(Button, { size: "compact-sm", variant: "subtle", loading: state.isValidating, onClick: () => void state.reload(), children: "Retry" })] }) }));
+    if (!data || !diff) {
+        return (_jsxs(Stack, { gap: "sm", children: [_jsx(StatusRegion, { children: !errorNotice && _jsx(LoadingSummary, {}) }), errorNotice || _jsx(LoadingCards, {})] }));
+    }
+    const wholeEntry = !data.before ? 'after' : !data.after ? 'before' : undefined;
+    const count = diff.changes.length;
+    const movedFrom = data.before && data.after ? subject.movedFromLabel : undefined;
+    // A move that changed no value is said by its "Moved from" line alone.
+    const summary = !data.before
+        ? 'New entry'
+        : !data.after
+            ? 'Deleted entry'
+            : count > 0
+                ? changeSummary(diff.changes, base)
+                : 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))) }))] }));
+};
+/**
+ * A modal right-hand drawer, as the Branches, Comments and Media drawers are: it traps focus,
+ * and the form and preview wait behind its backdrop.
+ */
+export const EntryChangesDrawer = ({ opened, onClose, onExited, returnFocusTo, ...view }) => {
+    const focusReturn = focusReturnProps(returnFocusTo);
+    return (_jsx(OverlayDrawer, { opened: opened, onClose: onClose, position: "right", size: 720, title: `Changes to ${view.subject.title}`, "data-testid": "entry-changes-drawer", ...focusReturn, onExitTransitionEnd: () => {
+            focusReturn.onExitTransitionEnd?.();
+            onExited?.();
+        }, children: _jsx(EntryChangesView, { ...view }) }));
+};

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

@@ -0,0 +1,9 @@
+/**
+ * The "Show changes" drawer's loading state, shared by the drawer and by the fallback that
+ * LazyEntryChangesDrawer shows while the drawer's own chunk loads.
+ */
+import React from 'react';
+/** The summary line's placeholder, with the words a screen reader hears in its status region. */
+export declare const LoadingSummary: React.FC;
+/** Cards' placeholders. */
+export declare const LoadingCards: React.FC;

package/dist/editor/components/EntryChangesSkeleton.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, Stack, VisuallyHidden } from '@mantine/core';
+/** The summary line's placeholder, with the words a screen reader hears in its status region. */
+export const LoadingSummary = () => (_jsxs(_Fragment, { children: [_jsx(VisuallyHidden, { children: "Loading changes\u2026" }), _jsx(Skeleton, { height: 22, width: "45%" })] }));
+/** Cards' placeholders. */
+export const LoadingCards = () => (_jsx(Stack, { gap: "sm", "data-testid": "entry-changes-loading", "aria-busy": "true", children: [0, 1, 2].map((i) => (_jsx(Skeleton, { height: 96, radius: "sm" }, i))) }));

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

@@ -17,6 +17,14 @@ export interface EntryHeaderProps {
     onEntryReveal?: () => void;
     /** The entry menu's trigger. */
     navigatorToggleRef?: Ref<HTMLButtonElement>;
+    /** Opens the open entry's changes against the base; offered only while it has some. */
+    onShowChanges?: () => void;
+    /**
+     * Hold the Show changes slot, unseen, when there is no `onShowChanges`: while the changes list
+     * loads, or for an entry with no changes, so the header never shifts between them.
+     */
+    showChangesPending?: boolean;
+    showChangesRef?: Ref<HTMLButtonElement>;
     /** Replaces the open entry with the server's copy. */
     onFileReload: () => void;
     onFileDiscardDraft: () => void;
@@ -61,4 +69,4 @@ export interface EntryHeaderProps {
     branchPullRequestClosed?: boolean;
 }
 /** 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, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving, savedSignal, savedHere, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, branchReviewing, branchPullRequestClosed, }: 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, }: EntryHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EntryHeader.js

@@ -1,12 +1,34 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Group } from '@mantine/core';
+import { ActionIcon, Box, Button, em, getBreakpointValue, Group, Tooltip, useMantineTheme, } from '@mantine/core';
+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 { EntryBreadcrumb } from './EntryBreadcrumb.js';
 import { EntrySaveButton } from './EntrySaveButton.js';
+/**
+ * "Show changes": a subtle text button, icon-only below `sm`. Without `onClick` it holds its
+ * place unseen while the changes list loads, so nothing beside it moves when it appears.
+ */
+const ShowChangesButton = ({ onClick, buttonRef, }) => {
+    const theme = useMantineTheme();
+    const narrow = useMediaQuery(`(max-width: ${em(getBreakpointValue('sm', theme.breakpoints) - 0.1)})`, false, {
+        getInitialValueInEffect: false,
+    }) === true;
+    const placeholder = !onClick;
+    const hold = placeholder
+        ? { 'aria-hidden': true, tabIndex: -1, style: { visibility: 'hidden', flexShrink: 0 } }
+        : { style: { flexShrink: 0 } };
+    const icon = _jsx(IconArrowsDiff, { size: 14, "aria-hidden": true });
+    if (narrow) {
+        return (_jsx(Tooltip, { label: EDITOR_ACTIONS.showChanges, position: "bottom", events: { hover: true, focus: true, touch: false }, disabled: placeholder, children: _jsx(ActionIcon, { ref: placeholder ? undefined : buttonRef, size: "md", variant: "subtle", "aria-label": EDITOR_ACTIONS.showChanges, onClick: onClick, "data-testid": placeholder ? 'entry-show-changes-pending' : 'entry-show-changes', ...hold, children: icon }) }));
+    }
+    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, 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, }) {
+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, }) {
     const branchLockReason = describeBranchLock({
         branchStatus,
         branchReadOnly,
@@ -40,7 +62,7 @@ export function EntryHeader({ currentEntry, entryLoading = false, branchName, bu
                     entryNoPage: !!currentEntry && !currentEntry.previewSrc, onDelete: entryReadOnly ? undefined : onEntryDelete, refreshBlockedReason: branchName ? undefined : 'Open a branch first.', discardBlockedReason: entryHasDraft ? undefined : 'This entry has no unsaved changes.', changeBlockedReason: branchLockReason ??
                         (entryUnavailable
                             ? "This entry's content type isn't known to this editor version yet. Reload in a few minutes."
-                            : undefined), entryMenuRef: navigatorToggleRef }) }), _jsx(EntrySaveButton, { onSave: onSave, saveBlockedReason: saveBlockedReason, 
+                            : undefined), entryMenuRef: navigatorToggleRef }) }), (onShowChanges || showChangesPending) && (_jsx(ShowChangesButton, { onClick: onShowChanges, buttonRef: showChangesRef })), _jsx(EntrySaveButton, { onSave: onSave, saveBlockedReason: saveBlockedReason, 
                 // Loading, "Open an entry to save it." would claim an empty state too soon.
                 busy: busy || entryLoading, saveAllRunning: saveAllRunning, saving: saving, savedSignal: savedSignal, savedHere: savedHere, entryDirty: hasUnsavedChanges, draftStorageFailed: draftStorageFailed })] }));
 }

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

@@ -0,0 +1,16 @@
+/**
+ * The "Show changes" drawer as Editor.tsx mounts it: loaded on first open with `React.lazy`, so
+ * the diff model and jsdiff stay out of the editor's first chunk, and behind an error boundary,
+ * so a chunk that fails to load or a comparison that throws costs the drawer, not the editor.
+ */
+import React from 'react';
+import type { EntryChangesDrawerProps } from './EntryChangesDrawer.js';
+type DrawerModule = {
+    default: React.ComponentType<EntryChangesDrawerProps>;
+};
+export interface LazyEntryChangesDrawerProps extends EntryChangesDrawerProps {
+    /** @internal The chunk's loader, for tests. */
+    load?: () => Promise<DrawerModule>;
+}
+export declare const LazyEntryChangesDrawer: React.FC<LazyEntryChangesDrawerProps>;
+export {};

package/dist/editor/components/LazyEntryChangesDrawer.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The "Show changes" drawer as Editor.tsx mounts it: loaded on first open with `React.lazy`, so
+ * the diff model and jsdiff stay out of the editor's first chunk, and behind an error boundary,
+ * so a chunk that fails to load or a comparison that throws costs the drawer, not the editor.
+ */
+import React, { Suspense, useState } from 'react';
+import { Alert, Button, Stack, Text } from '@mantine/core';
+import { IconAlertCircle } from '@tabler/icons-react';
+import { OverlayDrawer } from '../shell/OverlayHeader.js';
+import { focusReturnProps } from '../utils/focus-return.js';
+import { EditorErrorBoundary } from './EditorErrorBoundary.js';
+import { LoadingCards, LoadingSummary } from './EntryChangesSkeleton.js';
+const loadDrawer = () => import('./EntryChangesDrawer.js').then((m) => ({ default: m.EntryChangesDrawer }));
+export const LazyEntryChangesDrawer = ({ load = loadDrawer, ...props }) => {
+    const [opening, setOpening] = useState(() => ({
+        opened: props.opened,
+        seq: props.opened ? 1 : 0,
+        failed: false,
+        Drawer: React.lazy(load),
+    }));
+    if (props.opened !== opening.opened) {
+        const reopened = props.opened && !opening.opened;
+        setOpening({
+            opened: props.opened,
+            seq: opening.seq + (reopened ? 1 : 0),
+            failed: reopened ? false : opening.failed,
+            Drawer: reopened && opening.failed ? React.lazy(load) : opening.Drawer,
+        });
+    }
+    const { Drawer } = opening;
+    const focusReturn = focusReturnProps(props.returnFocusTo);
+    if (opening.seq === 0)
+        return null;
+    return (_jsx(EditorErrorBoundary, { context: { boundary: 'changes' }, 
+        // Each opening, and each entry, starts clear of an earlier one's failure.
+        resetKey: `${props.subject.logicalPath}#${opening.seq}`, onCaught: () => setOpening((current) => ({ ...current, failed: true })), fallback: () => (_jsx(OverlayDrawer, { opened: props.opened, onClose: props.onClose, position: "right", size: 720, title: `Changes to ${props.subject.title}`, ...focusReturn, onExitTransitionEnd: () => {
+                focusReturn.onExitTransitionEnd?.();
+                props.onExited?.();
+            }, children: _jsx(Alert, { variant: "light", color: "red", icon: _jsx(IconAlertCircle, { size: 16 }), "data-testid": "entry-changes-crashed", children: _jsxs(Stack, { gap: 4, align: "flex-start", children: [_jsx(Text, { size: "sm", children: "Changes couldn\u2019t be shown. Close and reopen to try again, or reload the page." }), _jsx(Button, { size: "compact-sm", variant: "subtle", onClick: props.onClose, children: "Close" })] }) }) })), children: _jsx(Suspense, { fallback: _jsx(OverlayDrawer, { opened: props.opened, onClose: props.onClose, position: "right", size: 720, title: `Changes to ${props.subject.title}`, ...focusReturn, onExitTransitionEnd: () => {
+                    focusReturn.onExitTransitionEnd?.();
+                    props.onExited?.();
+                }, children: _jsxs(Stack, { gap: "sm", children: [_jsx(Stack, { gap: 2, role: "status", children: _jsx(LoadingSummary, {}) }), _jsx(LoadingCards, {})] }) }), children: _jsx(Drawer, { ...props }) }) }));
+};