canopycms 0.11.0 → 0.12.0

package/dist/content-store.js

@@ -56,6 +56,10 @@ export class ContentStoreError extends Error {
         this.code = code;
     }
 }
+/** Why a restore refuses: another entry took the slug after this one was deleted. */
+export const RESTORE_SLUG_TAKEN_MESSAGE = "Another entry now has this entry's URL. Change that entry's URL, then restore this one.";
+/** Why a restore refuses: the entry, by its content ID, is on the branch already. */
+export const RESTORE_ID_TAKEN_MESSAGE = 'This entry is already on the branch, so there is nothing to restore. Refresh to see where it is.';
 /**
  * Thrown when `expectedVersion` on a write doesn't match the file's current mtime.
  * Indicates a cross-process concurrent write — the caller should reload and retry.
@@ -1283,6 +1287,75 @@ export class ContentStore {
             throw new ContentConflictError();
         });
     }
+    /**
+     * Puts back an entry deleted on this branch: `raw`, its file as the base holds it, verbatim,
+     * under its old slug, entry type and content ID, so references and comment threads find it
+     * again and the branch no longer differs from the base there.
+     *
+     * A create under write()'s locks and create-only guards that never replaces or relocates
+     * anything. It refuses with `ContentConflictError` while a file holds the slug, or the index
+     * or the target directory holds the ID: unlike write(), it has no index repair, so an ID
+     * found elsewhere is a moved entry, not a deleted one, and is left alone. The index is
+     * warmed outside the lock, as write() warms it, and rescanned under the lock only when the
+     * generation marker says another host changed the tree.
+     */
+    async restore(collectionPath, slug, entry, options = {}) {
+        await this.idIndex();
+        const collection = this.assertCollection(collectionPath);
+        if (!collection.entries?.some((e) => e.name === entry.entryTypeName)) {
+            throw new ContentStoreError(`Entry type '${entry.entryTypeName}' not found in collection`, 'NO_SCHEMA_ITEM');
+        }
+        this.assertEntryTypeAvailable(collection, entry.entryTypeName);
+        return this.withContentWriteExclusion(async () => {
+            await options.beforeWrite?.();
+            // Every content write and every git or sync change to the tree bumps the marker
+            // (content-index-generation.ts), so a marker that still matches the index's means the
+            // index is current. Read here unthrottled, unlike idIndex()'s own probe; a rescan holds no
+            // entry lock, which it must not.
+            if ((await readContentIndexGeneration(this.root)) !== this.loadedDiskGeneration) {
+                this.invalidateIndex();
+            }
+            await this.idIndex();
+            return withLock(this.createLockKey(collection, slug), async () => {
+                // The ID first: an entry already back at its own slug is this one, not another.
+                const target = await this.buildPaths(collection, slug, {
+                    existingId: entry.id,
+                    entryTypeName: entry.entryTypeName,
+                });
+                const dir = path.dirname(target.absolutePath);
+                const liveIndex = this._idIndex;
+                if (liveIndex.findById(entry.id) ||
+                    liveIndex.getDuplicateFor(entry.id) ||
+                    (await this.findEntryPathsById(dir, entry.id)).length > 0) {
+                    throw new ContentConflictError(RESTORE_ID_TAKEN_MESSAGE);
+                }
+                if ((await this.buildPaths(collection, slug)).existed) {
+                    throw new ContentConflictError(RESTORE_SLUG_TAKEN_MESSAGE);
+                }
+                // [SLUG] and [URL], as write() checks a create.
+                const routable = parseSlug(target.slug);
+                if (!routable.ok) {
+                    throw new ContentStoreError(`Cannot restore entry "${target.slug}": ${routable.error}.`, 'VALIDATION');
+                }
+                await this.assertUrlPathAvailable(dir, target.slug);
+                await fs.mkdir(dir, { recursive: true });
+                await atomicWriteFile(target.absolutePath, entry.raw);
+                // The live index, looked up and changed with no await between: a rebuild since the check
+                // above may have swapped in one that already scanned the restored file.
+                const index = this._idIndex;
+                if (!index.findById(entry.id)) {
+                    index.add({
+                        type: 'entry',
+                        relativePath: target.relativePath,
+                        collection: collectionPath,
+                        slug,
+                    });
+                }
+                await this.recordOwnMutation(index);
+                return { relativePath: target.relativePath };
+            });
+        });
+    }
     /**
      * Rename an entry by changing its slug (middle segment of filename).
      * Entry filename pattern: {entryTypeName}.{slug}.{id}.{ext}

package/dist/editor/Editor.js

@@ -38,6 +38,7 @@ import { useEntryLinkResolution } from './hooks/useEntryLinkResolution.js';
 import { useReferenceResolution } from './hooks/useReferenceResolution.js';
 import { usePreviewMarks } from './hooks/usePreviewMarks.js';
 import { branchBarStatus, describeBranchLock } from './branch-lock.js';
+import { NO_EDIT_ACCESS_REASON } from './copy.js';
 import { EditorHeader, EditorRail, EntryHeader } from './components/index.js';
 import { showSaveAllResult } from './components/SaveAllResult.js';
 import { RenameEntryModal } from './components/RenameEntryModal.js';
@@ -67,7 +68,20 @@ import { findFieldTarget, focusFieldTarget } from './field-target.js';
 import { PreviewFollowContext, usePreviewFollow } from './hooks/usePreviewFollow.js';
 import { UndoToastMessage } from './components/UndoToastMessage.js';
 import { getNotificationDuration } from './utils/env.js';
-import { MayHaveLandedError } from './unanswered.js';
+import { MayHaveLandedError, isGatewayFailure, isUnanswered } from './unanswered.js';
+/** The collection at `path` in a collection tree. */
+const findCollection = (cols, path) => {
+    if (!cols)
+        return undefined;
+    for (const col of cols) {
+        if (col.path === path)
+            return col;
+        const found = findCollection(col.children, path);
+        if (found)
+            return found;
+    }
+    return undefined;
+};
 // Stable fallbacks, so reference resolution's memo and effect don't re-run on every render
 // while no entry is open.
 const EMPTY_SCHEMA = [];
@@ -1012,18 +1026,6 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         }
     };
     const handleReorderEntry = async (collectionPath, contentId, direction) => {
-        const findCollection = (cols, path) => {
-            if (!cols)
-                return undefined;
-            for (const col of cols) {
-                if (col.path === path)
-                    return col;
-                const found = findCollection(col.children, path);
-                if (found)
-                    return found;
-            }
-            return undefined;
-        };
         // Resolve against `collectionsFromApi`, NOT `activeCollections`: the latter
         // falls back to the build-time `collections` prop whenever the fetch is
         // still empty -- exactly the state mid-branch-switch. A write resolved
@@ -1284,7 +1286,11 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         standIn: () => null,
     });
     const showChangesRef = useRef(null);
+    // A confirm never opens over the drawer, nor while it closes: its focus return would take
+    // focus out of the confirm. So "Delete entry" closes the drawer, and its exit opens the confirm.
+    const deleteAfterChangesRef = useRef();
     useEffect(() => {
+        deleteAfterChangesRef.current = undefined;
         setChangesOpen(false);
         setChangesShown(false);
     }, [branchNameState]);
@@ -1321,6 +1327,7 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
         const fields = entriesState.find((e) => e.path === entry.logicalPath)?.schema ??
             entriesState.find((e) => e.collectionPath === entry.collectionPath && e.entryType === entry.entryType)?.schema ??
             EMPTY_SCHEMA;
+        deleteAfterChangesRef.current = undefined;
         setChangesSubject({
             logicalPath: entry.logicalPath,
             contentId: entry.contentId,
@@ -1350,6 +1357,108 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
     const changesPullRequestUrl = isReviewer(userContext?.groups)
         ? currentBranch?.pullRequestUrl
         : undefined;
+    // The drawer's undo, delete and restore follow the form's rules: hidden without edit access,
+    // disabled with the branch lock's reason while the branch takes no writes. Undo writes the open
+    // entry's draft, through the functional update the remove-Undo uses, so it is an unsaved edit.
+    const changesSubjectOpen = !!changesSubject &&
+        !!currentEntry &&
+        changesSubject.status !== 'deleted' &&
+        changesSubject.logicalPath === currentEntry.path &&
+        (changesSubject.contentId === undefined || changesSubject.contentId === currentEntry.contentId);
+    const changesLockReason = branchContentLocked
+        ? describeBranchLock({
+            branchStatus: currentBranch?.status,
+            branchReadOnly: currentBranch?.readOnly,
+            branchWriteBlocked: true,
+            branchPending,
+            branchMissing,
+            reviewing: branchReviewing,
+            pullRequestClosed: branchPullRequestClosed,
+            approveBlocked: currentBranch?.approveBlocked,
+        })
+        : undefined;
+    const changesUndo = changesSubjectOpen && currentEntry && displayValue
+        ? {
+            // What the form shows: a draft hidden behind a lock isn't what the cards compare.
+            value: displayValue,
+            saved: loadedValues[currentEntry.contentId],
+            update: (update) => {
+                if (contentReadOnlyRef.current)
+                    return;
+                const contentId = currentEntry.contentId;
+                setDrafts((prev) => {
+                    const value = prev[contentId] ?? loadedValuesRef.current[contentId];
+                    if (!value)
+                        return prev;
+                    const next = update(value);
+                    return next === value ? prev : { ...prev, [contentId]: next };
+                });
+            },
+            threadsWithin: (path) => openThreadsWithin(displayComments, currentEntry.path, path),
+        }
+        : undefined;
+    // An entry the branch deleted has no row to carry `canEdit`; its collection's `canAddEntry`
+    // stands in, and the server judges the entry's own path.
+    const deletedSubjectCollection = changesSubject?.status === 'deleted'
+        ? changesSubject.logicalPath.slice(0, changesSubject.logicalPath.lastIndexOf('/'))
+        : undefined;
+    const restoreRefusedByPath = deletedSubjectCollection !== undefined &&
+        findCollection(collectionsFromApi, deletedSubjectCollection)?.canAddEntry === false;
+    const changesRestoreEntry = changesSubject?.status === 'deleted' && changesSubject.contentId
+        ? async () => {
+            const { logicalPath, contentId, title } = changesSubject;
+            const branch = branchNameState;
+            let answer;
+            try {
+                answer = await apiClient.changes.restore({ branch, entryPath: logicalPath }, { id: contentId });
+            }
+            catch (err) {
+                if (!isUnanswered(err)) {
+                    return { tone: 'error', message: 'Couldn’t restore this entry. Try again.' };
+                }
+            }
+            // A 409 whose write may have run is as unanswered as a timeout.
+            const outcomeUnknown = !!answer &&
+                !answer.ok &&
+                (isGatewayFailure(answer) || answer.code === 'WRITE_OUTCOME_UNKNOWN');
+            if (answer && !answer.ok && !outcomeUnknown) {
+                return {
+                    tone: answer.status === 409 ? 'warning' : 'error',
+                    message: answer.error ?? 'Couldn’t restore this entry. Try again.',
+                };
+            }
+            const entries = await refreshEntries(branch).catch(() => undefined);
+            void branchChanges.reload();
+            if (answer?.ok && answer.data?.warning) {
+                notifications.show({ message: answer.data.warning, color: 'yellow' });
+            }
+            if (answer?.ok && !entries) {
+                notifications.show({
+                    message: `"${title}" is restored. Refresh the page to see it in the "Content" panel.`,
+                    color: 'yellow',
+                });
+                setChangesOpen(false);
+                return undefined;
+            }
+            // Unanswered, the entry list settles it: this entry, by id, listed again.
+            if (!answer?.ok &&
+                !entries?.some((e) => e.path === logicalPath && e.contentId === contentId)) {
+                return {
+                    tone: 'warning',
+                    message: `Restoring "${title}" may have gone through, but the server couldn’t confirm it. Check the "Content" panel for it before trying again.`,
+                };
+            }
+            setChangesOpen(false);
+            openEntry(logicalPath);
+            return undefined;
+        }
+        : undefined;
+    const changesDeleteEntry = changesSubjectOpen && changesSubject?.status === 'added'
+        ? () => {
+            deleteAfterChangesRef.current = changesSubject.logicalPath;
+            setChangesOpen(false);
+        }
+        : undefined;
     const runSaveAll = () => {
         void handleSaveAll()
             .then((result) => {
@@ -1729,10 +1838,20 @@ const EditorContent = ({ entries, title, siteTitle = title, branchName = '', col
                                     if (namesBranch(name, branchNameState) && isSaveAllRunning())
                                         return;
                                     handleArchive(name).catch((err) => console.error(err));
-                                }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: commentUserId, canResolve: canResolveAnyComment, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, onGetOwnerMetadata: getCommentUserMetadata, onGetCommentUserMetadata: getCommentUserMetadata }, branchManagerOpening.seq) }), changesSubject && (_jsx(LazyEntryChangesDrawer, { opened: changesOpen, onClose: () => setChangesOpen(false), onExited: () => setChangesShown(false), returnFocusTo: changesReturnTarget, base: branchChanges.data?.base ?? currentBranch?.baseBranch ?? 'the base branch', subject: {
+                                }, onClose: () => setBranchManagerOpen(false), comments: comments, currentUserId: commentUserId, canResolve: canResolveAnyComment, onAddComment: handleAddComment, onResolveThread: handleResolveThread, highlightThreadId: highlightThreadId, onGetUserMetadata: canResolveUserNames ? handleGetUserMetadata : undefined, onGetOwnerMetadata: getCommentUserMetadata, onGetCommentUserMetadata: getCommentUserMetadata }, branchManagerOpening.seq) }), changesSubject && (_jsx(LazyEntryChangesDrawer, { opened: changesOpen, onClose: () => setChangesOpen(false), onExited: () => {
+                                setChangesShown(false);
+                                const deleting = deleteAfterChangesRef.current;
+                                deleteAfterChangesRef.current = undefined;
+                                // Opened as from the entry menu, whose trigger stands in for the gone button.
+                                if (deleting && deleting === changesSubject.logicalPath) {
+                                    handleDeleteEntry(deleting, true);
+                                }
+                            }, returnFocusTo: changesReturnTarget, base: branchChanges.data?.base ?? currentBranch?.baseBranch ?? 'the base branch', subject: {
                                 ...changesSubject,
                                 unsavedEdits: changesSubject.logicalPath === currentEntry?.path && isSelectedDirty(),
-                            }, state: entryChange, referenceTitle: referenceTitle, onOpenEntry: changesOpenEntry, pullRequestUrl: changesPullRequestUrl })), branchNameState && (_jsx(CommentsPanel, { opened: commentsPanelOpen, branchName: branchLabel, comments: displayComments, canResolve: canResolveAnyComment, currentUserId: commentUserId, entryLabel: commentEntryLabel, fieldLabel: commentFieldLabel, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, onClose: () => setCommentsPanelOpen(false), onJumpToField: jumpToThreadField, onGetUserMetadata: getCommentUserMetadata, onJumpToEntry: handleJumpToEntry, onJumpToBranch: handleJumpToBranch }, branchNameState)), userIsAdmin && (_jsx(GroupManager, { opened: groupManagerOpen, onClose: () => setGroupManagerOpen(false), returnFocusTo: settingsReturnTarget, internalGroups: groupsData, loading: groupsLoading, canEdit: userIsAdmin, onSave: handleSaveGroups, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onSearchExternalGroups: handleSearchExternalGroups })), userIsAdmin && (_jsx(PermissionManager, { opened: permissionManagerOpen, onClose: () => setPermissionManagerOpen(false), returnFocusTo: settingsReturnTarget, collections: activeCollections, contentRoot: contentRoot, permissions: permissionsData, loading: permissionsLoading, canEdit: userIsAdmin, onSave: handleSavePermissions, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onListGroups: handleListGroups })), userIsAdmin && (_jsx(SystemHealthPanel, { opened: systemHealthOpen, onClose: () => setSystemHealthOpen(false), returnFocusTo: settingsReturnTarget })), _jsx(MediaLibrary, { opened: mediaLibraryOpen, onClose: () => setMediaLibraryOpen(false), mode: "manage", returnFocusTo: () => mediaButtonRef.current }), userIsAdmin && (_jsx(CollectionEditor, { isOpen: collectionEditorOpen, editingCollection: editingCollection, parentPath: collectionEditorParentPath, availableSchemas: availableSchemas, onSave: handleCollectionSave, onAddEntryType: editingCollection
+                            }, state: entryChange, referenceTitle: referenceTitle, onOpenEntry: changesOpenEntry, pullRequestUrl: changesPullRequestUrl, undo: changesUndo, noEditReason: (changesSubjectOpen && currentEntry?.canEdit === false) || restoreRefusedByPath
+                                ? NO_EDIT_ACCESS_REASON
+                                : undefined, lockedReason: changesLockReason, onDeleteEntry: changesDeleteEntry, onRestoreEntry: changesRestoreEntry })), branchNameState && (_jsx(CommentsPanel, { opened: commentsPanelOpen, branchName: branchLabel, comments: displayComments, canResolve: canResolveAnyComment, currentUserId: commentUserId, entryLabel: commentEntryLabel, fieldLabel: commentFieldLabel, onAddComment: handleAddDisplayedComment, onResolveThread: handleResolveThread, onClose: () => setCommentsPanelOpen(false), onJumpToField: jumpToThreadField, onGetUserMetadata: getCommentUserMetadata, onJumpToEntry: handleJumpToEntry, onJumpToBranch: handleJumpToBranch }, branchNameState)), userIsAdmin && (_jsx(GroupManager, { opened: groupManagerOpen, onClose: () => setGroupManagerOpen(false), returnFocusTo: settingsReturnTarget, internalGroups: groupsData, loading: groupsLoading, canEdit: userIsAdmin, onSave: handleSaveGroups, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onSearchExternalGroups: handleSearchExternalGroups })), userIsAdmin && (_jsx(PermissionManager, { opened: permissionManagerOpen, onClose: () => setPermissionManagerOpen(false), returnFocusTo: settingsReturnTarget, collections: activeCollections, contentRoot: contentRoot, permissions: permissionsData, loading: permissionsLoading, canEdit: userIsAdmin, onSave: handleSavePermissions, onSearchUsers: handleSearchUsers, onGetUserMetadata: handleGetUserMetadata, onListGroups: handleListGroups })), userIsAdmin && (_jsx(SystemHealthPanel, { opened: systemHealthOpen, onClose: () => setSystemHealthOpen(false), returnFocusTo: settingsReturnTarget })), _jsx(MediaLibrary, { opened: mediaLibraryOpen, onClose: () => setMediaLibraryOpen(false), mode: "manage", returnFocusTo: () => mediaButtonRef.current }), userIsAdmin && (_jsx(CollectionEditor, { isOpen: collectionEditorOpen, editingCollection: editingCollection, parentPath: collectionEditorParentPath, availableSchemas: availableSchemas, onSave: handleCollectionSave, onAddEntryType: editingCollection
                                 ? (path, entryType) => addEntryType(path, entryType)
                                 : undefined, onUpdateEntryType: editingCollection
                                 ? (path, name, updates) => updateEntryType(path, name, updates)

package/dist/editor/comments/ThreadReplyControls.js

@@ -1,9 +1,10 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Button, Group, Stack, Textarea } from '@mantine/core';
+import { Button, Group, Stack, Textarea, Tooltip } from '@mantine/core';
 import { moveFocusIfUnmoved } from './move-focus-if-unmoved.js';
 import { CommentWriteAlert, toCommentWriteFailure, } from './CommentWriteAlert.js';
+const RESOLVE_BLOCKED_REASON = "Only the person who started this thread or a reviewer can resolve it. Reply to let them know it's done.";
 /** Refocuses `box` when a submit settles: the busy button disabled itself and dropped focus. */
 export const useRefocusAfterSubmit = (submitting, box) => {
     const wasSubmitting = useRef(false);
@@ -90,6 +91,8 @@ export const ThreadReplyControls = ({ thread, onAddReply, onResolve, focusAfterR
         }
     };
     const mayResolve = canResolve || thread.authorId === currentUserId;
-    const resolveButton = mayResolve && (_jsx(Button, { variant: "light", color: "green", onClick: handleResolve, loading: resolving, disabled: replying, "data-testid": "resolve-thread-button", children: hasDraft ? 'Reply and resolve' : 'Resolve' }));
+    // Shown disabled with its reason rather than hidden: the same user may resolve threads they start.
+    // `data-disabled` without native `disabled` keeps it focusable, so the Tooltip can open on focus.
+    const resolveButton = mayResolve ? (_jsx(Button, { variant: "light", color: "green", onClick: handleResolve, loading: resolving, disabled: replying, "data-testid": "resolve-thread-button", children: hasDraft ? 'Reply and resolve' : 'Resolve' })) : (_jsx(Tooltip, { label: RESOLVE_BLOCKED_REASON, multiline: true, maw: 280, events: { hover: true, focus: true, touch: true }, children: _jsx(Button, { variant: "light", color: "green", "data-disabled": true, "aria-disabled": true, onClick: (e) => e.preventDefault(), "data-testid": "resolve-thread-button", children: "Resolve" }) }));
     return (_jsxs(Stack, { gap: "xs", children: [error && _jsx(CommentWriteAlert, { failure: error, onClose: () => setError(null) }), expanded ? (_jsxs(_Fragment, { children: [_jsx(Textarea, { ref: boxRef, placeholder: "Write a reply\u2026", "aria-label": "Reply to this thread", value: replyText, onChange: (e) => setReplyText(e.target.value), minRows: 2, disabled: replying || resolving }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { onClick: handleReply, loading: replying, disabled: !replyText.trim() || resolving, "data-testid": "submit-reply-button", children: "Reply" }), _jsx(Button, { variant: "subtle", color: "gray", onClick: collapse, disabled: replying, children: "Cancel" }), resolveButton] })] })) : (_jsxs(Group, { gap: "xs", children: [_jsx(Button, { ref: replyButtonRef, variant: "light", onClick: expand, disabled: resolving, "data-testid": "reply-thread-button", children: "Reply\u2026" }), resolveButton] }))] }));
 };

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

@@ -6,6 +6,7 @@
 import React from 'react';
 import type { BranchChangeEntry } from '../../api/branch-changes.js';
 import type { FieldConfig } from '../../config/index.js';
+import type { CanopyPathSegment } from '../canopy-path.js';
 import type { EntryChangeState } from '../hooks/useBranchChangesData.js';
 /** The entry a drawer compares, as the editor knows it. */
 export interface EntryChangesSubject {
@@ -41,6 +42,41 @@ export interface EntryChangesDrawerProps {
     onOpenEntry?: () => void;
     /** The branch's pull request, offered where this drawer can't compare. */
     pullRequestUrl?: string;
+    /** Undoing the entry's changes in its form; given only for the open entry. */
+    undo?: EntryChangesUndo;
+    /**
+     * Why this user can't change the entry at all, such as a path rule: its undo, delete and
+     * restore controls are hidden and this one line says why.
+     */
+    noEditReason?: string;
+    /**
+     * Why those controls can't act now, such as a locked branch: they stay, disabled, saying so,
+     * as the form's do.
+     */
+    lockedReason?: string;
+    /** Opens the confirm that deletes an entry added on the branch, closing the drawer first. */
+    onDeleteEntry?: () => void;
+    /** Puts back an entry deleted on the branch; resolves with why it couldn't, when it couldn't. */
+    onRestoreEntry?: () => Promise<RestoreRefusal | undefined>;
+}
+/** Why "Restore entry" didn't: `warning` where nothing is lost, or the outcome is unknown. */
+export interface RestoreRefusal {
+    message: string;
+    tone: 'warning' | 'error';
+}
+/** The open entry's form value, and the way to change its draft; see `undo-change.ts`. */
+export interface EntryChangesUndo {
+    /** The entry's value as its form holds it, unsaved edits included. */
+    value: Record<string, unknown>;
+    /**
+     * Its saved value as the form loaded it, which a redo puts back: references resolved, so a
+     * redone entry matches its saved state and isn't left unsaved. Else the comparison's saved side.
+     */
+    saved?: Record<string, unknown>;
+    /** Sets the entry's draft to what `update` makes of its value at that moment. */
+    update: (update: (value: Record<string, unknown>) => Record<string, unknown>) => void;
+    /** Open field threads inside a canopy path, which taking out an item there moves to the entry. */
+    threadsWithin?: (path: CanopyPathSegment[]) => number;
 }
 /** The drawer's body: its states, then the summary and one card per change. */
 export declare const EntryChangesView: React.FC<Omit<EntryChangesDrawerProps, 'opened' | 'onClose' | 'onExited' | 'returnFocusTo'>>;

package/dist/editor/components/EntryChangesDrawer.js

@@ -6,15 +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, List, Paper, SimpleGrid, Stack, Text, Tooltip, 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 { EDITOR_ACTIONS } from '../copy.js';
 import { computeEntryDiff, } from '../entry-diff.js';
 import { editorImageSrc } from '../media/editor-image-src.js';
+import { findBodyFieldName } from '../../utils/body-field.js';
 import { formatRelativeTime } from '../relative-time.js';
 import { OverlayDrawer } from '../shell/OverlayHeader.js';
+import { movedThreadsNote } from '../undo-removal.js';
+import { canSetBack, canopyPathOf, formValueOfSide, holdsAs, setAllBack, setChangeBack, sideOfFormValue, } from '../undo-change.js';
 import { focusReturnProps } from '../utils/focus-return.js';
 import { LoadingCards, LoadingSummary } from './EntryChangesSkeleton.js';
 const KIND_BADGES = {
@@ -275,14 +279,31 @@ const SideColumn = ({ label, change, side, }) => {
     const words = change.text?.mode === 'words' ? change.text : undefined;
     return (_jsxs(Stack, { gap: 4, miw: 0, children: [_jsx(Text, { size: "xs", c: "dimmed", children: label }), value.kind === 'date' && words ? (_jsx(DateValue, { value: value, text: _jsx(MarkedText, { parts: words.parts, side: side, unit: "text" }) })) : words ? (_jsx(WordsChange, { text: words, side: side })) : (_jsx(Value, { value: value, alt: change.altText && { text: change.altText, side } }))] }));
 };
+/**
+ * A drawer control that, given a `reason`, stays focusable but doesn't act, its Tooltip saying
+ * why (`data-disabled` keeps the Tooltip working on focus and touch).
+ */
+const ReasonedButton = ({ reason, onClick, danger, ...props }) => (_jsx(Tooltip, { label: reason, disabled: !reason, multiline: true, maw: 280, position: "bottom-start", children: _jsx(Button, { size: "compact-sm", variant: "subtle", ...(danger && { color: 'red', c: 'var(--canopy-danger-text)' }), ...props, onClick: () => {
+            if (!reason)
+                onClick();
+        }, "data-disabled": reason ? true : undefined, "aria-disabled": reason ? true : undefined }) }));
+const UNDONE_IN_FORM = 'Undone in the form. Save to keep it.';
+const ALL_UNDONE_IN_FORM = 'All changes undone in the form. Save to keep them.';
+// Undo and redo replace what the form holds at a change with the base's or the saved value, so
+// 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
@@ -312,7 +333,7 @@ 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 }) => {
+export const EntryChangesView = ({ base, subject, state, referenceTitle, onOpenEntry, pullRequestUrl, undo, noEditReason, lockedReason, onDeleteEntry, onRestoreEntry, }) => {
     const { data, error } = state;
     const diff = useMemo(() => data &&
         computeEntryDiff({
@@ -321,6 +342,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 +397,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.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';
 /**
@@ -39,9 +39,7 @@ export function EntryHeader({ currentEntry, entryLoading = false, branchName, bu
         pullRequestClosed: branchPullRequestClosed,
         approveBlocked: branchApproveBlocked,
     });
-    const entryLockReason = entryReadOnly
-        ? "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it."
-        : undefined;
+    const entryLockReason = entryReadOnly ? NO_EDIT_ACCESS_REASON : undefined;
     // The Tooltip hides it while the editor is busy.
     const saveBlockedReason = branchLockReason ??
         (!branchName

package/dist/editor/copy.d.ts

@@ -22,6 +22,12 @@ export declare const EDITOR_ACTIONS: {
     readonly changeUrl: "Change URL";
     readonly changeSlug: "Change slug";
     readonly showChanges: "Show changes";
+    readonly undoChange: "Undo change";
+    readonly redoChange: "Redo change";
+    readonly undoAllChanges: "Undo all changes";
+    readonly redoAllChanges: "Redo all changes";
+    readonly restoreEntry: "Restore entry";
+    readonly deleteEntry: "Delete entry";
 };
 /**
  * Why a list at its `maxItems` adds nothing more, as a disabled Add's Tooltip or an input's hint.
@@ -35,6 +41,8 @@ export declare const rewrittenSubmitReason: (isAdmin: boolean) => string;
  * says how to finish the submit, where it can be retried at all.
  */
 export declare const UNFINISHED_SUBMIT_APPROVE_REASON = "The last submit didn't finish, so this branch can't be approved yet. Use \"Request changes\" to send it back to its editor.";
+/** Why an entry's form, and every control that would change the entry, can't act for this user. */
+export declare const NO_EDIT_ACCESS_REASON = "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it.";
 /** Why only an admin may delete a branch that may hold commits nothing else has. */
 export declare const DELETE_NEEDS_ADMIN_REASON = "This branch may hold changes that are missing from GitHub. Ask an admin to check it before deleting it.";
 /** Why Approve and Request changes can't act: the pull request they act on is gone. */