@gogitcms/design-system 0.16.0-next.1 → 0.16.0-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gogitcms/design-system",
-  "version": "0.16.0-next.1",
+  "version": "0.16.0-next.11",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "// exports": "The root entry is the react-native source the SPAs, desktop app and mobile app consume. ./web is the plain-DOM build for server-rendered surfaces (the Astro docs site) that don't run react-native-web, and ./css ships the tokens as custom properties. The trailing wildcard keeps deep paths resolvable — plugin bundling and the Vite aliases reach into src/ directly.",

package/src/__tests__/ApplyChangesModal.test.tsx

@@ -146,3 +146,51 @@ test("failure surfaces the error and a dismiss button", () => {
   expect(screen.getByTestId("merge-error")).toHaveTextContent("main moved while merging");
   expect(screen.getByTestId("apply-dismiss")).toBeInTheDocument();
 });
+
+test("with a review reason the confirmation step promises a review, not a merge commit", () => {
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        reviewReason="main is protected, so this opens a change request for review."
+        onConfirm={() => {}}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const confirm = screen.getByTestId("apply-confirm");
+  // The run will stop before the push, so the copy must not describe one.
+  expect(confirm).not.toHaveTextContent("pushes a merge commit");
+  expect(confirm).not.toHaveTextContent("is then deleted");
+  expect(screen.getByTestId("apply-confirm-review")).toHaveTextContent("opens a pull request for review");
+  expect(confirm).toHaveTextContent("Nothing is pushed to origin/main until it is approved");
+  expect(confirm).toHaveTextContent("main is protected");
+});
+
+test("needs_review without code conflicts explains the review instead of listing files", () => {
+  const onCreateChangeRequest = jest.fn();
+  render(
+    wrap(
+      <ApplyChangesModal
+        {...branches}
+        reviewReason="main is protected, so this opens a change request for review."
+        progress={{ ...base, status: "needs_review", step: "merging", escalationFiles: [] }}
+        onCreateChangeRequest={onCreateChangeRequest}
+        onClose={() => {}}
+      />,
+    ),
+  );
+
+  const panel = screen.getByTestId("merge-needs-review");
+  // No conflict: it is not called one, and no empty file list is drawn.
+  expect(panel).not.toHaveTextContent("Code conflicts need a developer");
+  expect(panel).toHaveTextContent("This merge needs a review");
+  expect(screen.getByTestId("merge-needs-review-reason")).toHaveTextContent("nothing was pushed to main");
+  expect(screen.getByTestId("merge-needs-review-reason")).toHaveTextContent("main is protected");
+
+  // The same escalation flow: an explanation, then a change request.
+  fireEvent.change(screen.getByTestId("change-request-explanation"), { target: { value: "Spring copy" } });
+  fireEvent.click(screen.getByTestId("create-change-request-submit"));
+  expect(onCreateChangeRequest).toHaveBeenCalledWith("Spring copy");
+});

package/src/__tests__/BranchDeletedModal.test.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { BranchDeletedModal } from "../components/BranchDeletedModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const others = [
+  { id: "b-main", name: "main" },
+  { id: "b-draft", name: "draft/spring" },
+];
+
+test("names the deleted branch and switches to the one picked", () => {
+  const onSwitch = jest.fn();
+  render(wrap(
+    <BranchDeletedModal branch="feat/pricing" repository="acme/site" branches={others} onSwitch={onSwitch} />,
+  ));
+
+  expect(screen.getByTestId("branch-deleted-title")).toHaveTextContent("feat/pricing was deleted");
+  expect(screen.getByText(/removed with it/)).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("branch-deleted-switch-b-draft"));
+  expect(onSwitch).toHaveBeenCalledWith(others[1]);
+  // The repository exit is not offered unless the host provides it.
+  expect(screen.queryByTestId("branch-deleted-choose-repository")).toBeNull();
+});
+
+test("a stale link (no branch name) still explains and offers the others", () => {
+  render(wrap(<BranchDeletedModal branches={others} onSwitch={() => {}} />));
+  expect(screen.getByTestId("branch-deleted-title")).toHaveTextContent("This branch no longer exists");
+  expect(screen.getByTestId("branch-deleted-switch-b-main")).toBeInTheDocument();
+});
+
+test("with nothing to switch to, the repository picker is the exit", () => {
+  const onChoose = jest.fn();
+  render(wrap(
+    <BranchDeletedModal branch="main" repository="acme/site" branches={[]} onSwitch={() => {}} onChooseRepository={onChoose} />,
+  ));
+  expect(screen.getByTestId("branch-deleted-none")).toHaveTextContent("No other branch of acme/site");
+  fireEvent.click(screen.getByTestId("branch-deleted-choose-repository"));
+  expect(onChoose).toHaveBeenCalled();
+});

package/src/__tests__/ContentBrowser.fieldfocus.test.tsx

@@ -0,0 +1,109 @@
+// Which field the author is in, reported as a dotted path — what a preview
+// pane uses to ring the matching part of the page. Read off the DOM's focus
+// events and the `data-cms-field` attribute every control's wrapper carries,
+// so it works for every kind of control and for a lone author with no live
+// session.
+import React from "react";
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection, type EntryField } from "../components/ContentBrowser";
+
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "pages", label: "Pages", icon: "newspaper" }] },
+];
+
+const fields: EntryField[] = [
+  { name: "title", label: "Title", type: "string", value: "Home", required: true },
+  {
+    name: "blocks",
+    label: "Blocks",
+    type: "array",
+    component: "mixedList",
+    value: [{ _variant: "hero", heading: "Hi", stats: [{ label: "a", value: "1" }] }],
+    variants: [
+      {
+        name: "hero",
+        fields: [
+          { name: "heading", label: "Heading", type: "string", value: null },
+          {
+            name: "stats",
+            label: "Stats",
+            type: "array",
+            of: "object",
+            value: null,
+            fields: [
+              { name: "label", label: "Label", type: "string", value: null },
+              { name: "value", label: "Value", type: "string", value: null },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const entry: CmsEntry = { id: "doc-1", path: "content/pages/home.json", title: "Home", body: "", fields };
+
+function renderBrowser(onFieldFocus = jest.fn()) {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="pages"
+        onSelectNav={() => {}}
+        entries={[entry]}
+        userInitials="ED"
+        onSaveEntry={jest.fn()}
+        onFieldFocus={onFieldFocus}
+      />,
+    ),
+  );
+  return onFieldFocus;
+}
+
+// The blur report is deferred a tick so a move between fields never passes
+// through null; flush it.
+const settle = () => act(() => new Promise((r) => setTimeout(r, 5)));
+
+describe("onFieldFocus", () => {
+  it("reports a top-level field by name and null when it blurs", async () => {
+    const onFieldFocus = renderBrowser();
+    const title = screen.getByDisplayValue("Home");
+    fireEvent.focusIn(title);
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", "title");
+    fireEvent.focusOut(title);
+    await settle();
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", null);
+  });
+
+  it("composes the path of a field inside a mixed-list item and a nested list", async () => {
+    const onFieldFocus = renderBrowser();
+    const heading = screen.getByDisplayValue("Hi");
+    fireEvent.focusIn(heading);
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", "blocks.0.heading");
+
+    const statLabel = screen.getByDisplayValue("a");
+    // Straight from one field to the next: no null in between.
+    fireEvent.focusOut(heading);
+    fireEvent.focusIn(statLabel);
+    await settle();
+    expect(onFieldFocus).not.toHaveBeenCalledWith("doc-1", null);
+    expect(onFieldFocus).toHaveBeenLastCalledWith("doc-1", "blocks.0.stats.0.label");
+  });
+
+  it("annotates every control's wrapper with its path", () => {
+    renderBrowser();
+    const paths = Array.from(document.querySelectorAll("[data-cms-field]")).map((el) => el.getAttribute("data-cms-field"));
+    expect(paths).toEqual(
+      expect.arrayContaining(["title", "blocks", "blocks.0", "blocks.0.heading", "blocks.0.stats", "blocks.0.stats.0", "blocks.0.stats.0.label", "blocks.0.stats.0.value"]),
+    );
+  });
+});

package/src/__tests__/ContentBrowser.forms.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, within } from "@testing-library/react";
 import { ThemeProvider } from "../ThemeProvider";
 import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
 import { FORMS_NAV_KEY, formsNavKey, type FormInfo, type FormsApi } from "../forms";
@@ -109,3 +109,49 @@ test("an open form takes the whole content area", async () => {
   expect(screen.queryByTestId("forms-empty")).not.toBeInTheDocument();
   expect(screen.queryByTestId("resize-forms")).not.toBeInTheDocument();
 });
+
+// Media, Forms and Changes head their content pane with PaneTitle; a collection
+// heads the same pane with its own header. They have to be the same heading, or
+// the title moves and changes size as you switch between them.
+test("the forms heading matches a collection's, not a smaller indented one", () => {
+  const { unmount } = render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey={FORMS_NAV_KEY}
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+        forms={makeApi()}
+      />,
+    ),
+  );
+  // Scoped to the pane: "Forms" is also the nav item that got us here.
+  const formsHeading = within(screen.getByTestId("pane-forms")).getByText("Forms");
+  // The heading sits directly in Pane's header row — the row with the pane's
+  // height and the rule under it. A padded wrapper of its own in between is
+  // what used to push this title a step right of every collection's.
+  expect(formsHeading.parentElement).toHaveStyle({ height: "48px", paddingLeft: "16px" });
+  const formsStyle = window.getComputedStyle(formsHeading);
+  unmount();
+
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={entries}
+        userInitials="ED"
+      />,
+    ),
+  );
+  const collectionHeading = within(screen.getByTestId("pane-entries")).getByText("Posts");
+  const collectionStyle = window.getComputedStyle(collectionHeading);
+
+  expect(formsStyle.fontSize).toBe(collectionStyle.fontSize);
+  expect(formsStyle.fontWeight).toBe(collectionStyle.fontWeight);
+  expect(formsStyle.flexGrow).toBe(collectionStyle.flexGrow);
+});

package/src/__tests__/ContentBrowser.history.test.tsx

@@ -0,0 +1,385 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ContentBrowser, type CmsEntry, type CmsNavSection } from "../components/ContentBrowser";
+import type { DocumentVersion, HistoryApi } from "../history";
+import { refreshDrafts } from "../components/documentDrafts";
+import type { DocumentChange } from "../components/ChangeDetail";
+
+// Force the desktop layout (jsdom reports width 0 → mobile otherwise).
+jest.mock("../ThemeProvider", () => {
+  const actual = jest.requireActual("../ThemeProvider");
+  return { ...actual, useResponsive: () => ({ width: 1300, height: 900, isDesktop: true, isMobile: false }) };
+});
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+// A restore commits, and committing records a draft. Without clearing them each
+// test seeds its form from the PREVIOUS test's restore — which reads as a field
+// that was already rolled back and so has nothing left to write.
+beforeEach(() => {
+  localStorage.clear();
+  refreshDrafts();
+});
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const entry: CmsEntry = {
+  id: "doc-1",
+  path: "posts/hello.md",
+  title: "Hello",
+  body: "",
+  fields: [
+    { name: "title", type: "string", value: "Hello" },
+    { name: "status", type: "string", value: "published" },
+    { name: "body", type: "string", component: "body", source: "body", value: "Current body." },
+  ],
+};
+
+const published: DocumentVersion = {
+  sha: "9f2c1abcdef",
+  shortSha: "9f2c1ab",
+  message: "Publish the post\n\nA body the list has no room for.",
+  authorName: "Ada",
+  authoredAt: "2026-03-01T12:00:00Z",
+  url: "https://github.com/acme/site/commit/9f2c1ab",
+  filesChanged: 3,
+};
+
+const drafted: DocumentVersion = {
+  sha: "3b7de1098877",
+  shortSha: "3b7de10",
+  message: "Draft the post",
+  authorName: "Ada",
+  authoredAt: "2026-02-01T12:00:00Z",
+  url: "https://github.com/acme/site/commit/3b7de10",
+  filesChanged: 1,
+};
+
+const draftedDetail: DocumentChange = {
+  path: "posts/hello.md",
+  status: "M",
+  label: "Hello",
+  added: 1,
+  removed: 1,
+  fields: [
+    { name: "title", kind: "unchanged", before: "Hello", after: "Hello" },
+    { name: "status", kind: "changed", before: "draft", after: "published" },
+  ],
+  bodyBefore: "The earlier body.",
+  bodyAfter: "Current body.",
+};
+
+function makeApi(over: Partial<HistoryApi> = {}): HistoryApi {
+  return {
+    list: jest.fn(async () => [published, drafted]),
+    get: jest.fn(async () => draftedDetail),
+    ...over,
+  };
+}
+
+function renderBrowser(history?: HistoryApi, over: { readOnly?: boolean } = {}) {
+  const onSaveEntry = jest.fn(async () => {});
+  render(
+    wrap(
+      <ContentBrowser
+        onSaveEntry={onSaveEntry}
+        readOnly={over.readOnly}
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={jest.fn()}
+        entries={[entry]}
+        selectedEntryId={entry.id}
+        onSelectEntry={jest.fn()}
+        userInitials="ED"
+        history={history}
+      />,
+    ),
+  );
+  return onSaveEntry;
+}
+
+/**
+ * Opens history and waits for the newest version's diff to actually land — the
+ * pane mounts before its first fetch resolves, and everything to do with
+ * restoring is rendered from the fetched diff.
+ */
+async function openHistory(history?: HistoryApi, over: { readOnly?: boolean } = {}) {
+  const onSaveEntry = renderBrowser(history ?? makeApi(), over);
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+  await screen.findByTestId("document-history");
+  await screen.findByTestId("change-detail");
+  return onSaveEntry;
+}
+
+// The affordance only exists where history does. A deployment with no provider
+// should show no button at all rather than one that errors when pressed.
+test("no history seam means no history button", () => {
+  renderBrowser(undefined);
+  expect(screen.queryByTestId("document-history-toggle")).not.toBeInTheDocument();
+});
+
+test("the history button gives the document's column over to the version browser", async () => {
+  renderBrowser(makeApi());
+
+  // The editor form is what a column shows until history is asked for.
+  expect(screen.getByTestId("column-scroll")).toBeInTheDocument();
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByTestId("document-history")).toBeInTheDocument();
+  // The form is gone — history takes the column's body, not a slice of it.
+  expect(screen.queryByTestId("column-scroll")).not.toBeInTheDocument();
+});
+
+test("the version list shows each commit's subject, author, sha and file count", async () => {
+  renderBrowser(makeApi());
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByTestId("version-9f2c1ab")).toBeInTheDocument();
+  expect(screen.getByTestId("version-3b7de10")).toBeInTheDocument();
+
+  // The subject only — the message body would push every other row off screen.
+  expect(screen.getByText("Publish the post")).toBeInTheDocument();
+  expect(screen.queryByText(/A body the list has no room for/)).not.toBeInTheDocument();
+
+  expect(screen.getByText("3 files")).toBeInTheDocument();
+  // Singular, because "1 files" is the kind of thing people notice.
+  expect(screen.getByText("1 file")).toBeInTheDocument();
+});
+
+// An empty diff beside a full list is a second click for nothing.
+test("opening history selects the newest version and loads its diff", async () => {
+  const api = makeApi();
+  renderBrowser(api);
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  await waitFor(() => expect(api.get).toHaveBeenCalledWith({ documentId: "doc-1", sha: published.sha }));
+  expect(await screen.findByTestId("change-detail")).toBeInTheDocument();
+});
+
+test("selecting a version loads that version's document and diff", async () => {
+  const api = makeApi();
+  renderBrowser(api);
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  fireEvent.click(await screen.findByTestId("version-3b7de10"));
+
+  await waitFor(() => expect(api.get).toHaveBeenCalledWith({ documentId: "doc-1", sha: drafted.sha }));
+  // The version's value on the left of the diff, the current one on the right.
+  expect(await screen.findByText("draft")).toBeInTheDocument();
+  expect(screen.getByText("published")).toBeInTheDocument();
+});
+
+// A document with no commits is a real and common state — one created in the
+// CMS and not yet exported. It must not read as a failure.
+test("a document with no commits explains itself", async () => {
+  renderBrowser(makeApi({ list: jest.fn(async () => []) }));
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByTestId("history-empty")).toBeInTheDocument();
+  expect(screen.queryByTestId("history-error")).not.toBeInTheDocument();
+});
+
+test("a failed history says so rather than showing an empty list", async () => {
+  renderBrowser(makeApi({ list: jest.fn(async () => { throw new Error("GitHub is unreachable"); }) }));
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  expect(await screen.findByText("GitHub is unreachable")).toBeInTheDocument();
+  expect(screen.queryByTestId("history-empty")).not.toBeInTheDocument();
+});
+
+test("the button toggles back, returning the column to the editor", async () => {
+  renderBrowser(makeApi());
+  const toggle = screen.getByTestId("document-history-toggle");
+
+  fireEvent.click(toggle);
+  expect(await screen.findByTestId("document-history")).toBeInTheDocument();
+
+  fireEvent.click(toggle);
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+  expect(screen.getByTestId("column-scroll")).toBeInTheDocument();
+});
+
+test("the pane's own close control leaves history too", async () => {
+  renderBrowser(makeApi());
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+
+  fireEvent.click(await screen.findByTestId("history-close"));
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+});
+
+// ---- restoring fields from a past version ---------------------------------
+
+// A tick means "take this version's value". An unchanged field's two sides are
+// the same value, so a box on it could only ever be a no-op dressed up as a
+// choice.
+test("only changed fields offer a box", async () => {
+  await openHistory();
+
+  expect(screen.getByTestId("restore-field-status")).toBeInTheDocument();
+  expect(screen.getByTestId("restore-field-body")).toBeInTheDocument();
+  expect(screen.queryByTestId("restore-field-title")).not.toBeInTheDocument();
+});
+
+// The bar is mounted from the start rather than appearing on the first tick:
+// otherwise it shifts the diff under the hand that just ticked something, and
+// nothing tells you what the boxes are for until you have used one.
+test("the restore bar is present but inert until something is picked", async () => {
+  await openHistory();
+
+  expect(screen.getByTestId("restore-bar")).toBeInTheDocument();
+  expect(screen.getByTestId("restore-apply")).toBeDisabled();
+  expect(screen.getByText("Tick a field to take its earlier value")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  expect(screen.getByTestId("restore-apply")).not.toBeDisabled();
+  expect(screen.getByText("1 field selected")).toBeInTheDocument();
+});
+
+test("restoring a field puts its old value in the editor and closes history", async () => {
+  await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  // Back in the form, which is where the restored value now is.
+  expect(screen.queryByTestId("document-history")).not.toBeInTheDocument();
+  expect(screen.getByTestId("column-scroll")).toBeInTheDocument();
+
+  // The picked field took the version's value; the others are untouched.
+  expect(screen.getByDisplayValue("draft")).toBeInTheDocument();
+  expect(screen.getByDisplayValue("Hello")).toBeInTheDocument();
+});
+
+// The restore is an edit, not a write: it lands in the form and waits to be
+// saved like anything the author typed.
+test("a restore leaves the document unsaved rather than saving it", async () => {
+  const onSaveEntry = await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  expect(onSaveEntry).not.toHaveBeenCalled();
+  await waitFor(() => expect(screen.getByTestId("save-entry")).not.toBeDisabled());
+  // And it can be thrown away like any other edit.
+  expect(screen.getByTestId("discard-changes")).toBeInTheDocument();
+
+  fireEvent.click(screen.getByTestId("save-entry"));
+  await waitFor(() =>
+    expect(onSaveEntry).toHaveBeenCalledWith(
+      expect.objectContaining({ fields: expect.objectContaining({ status: "draft" }) }),
+    ),
+  );
+});
+
+// The body is a field in the form like any other; which one it is comes from
+// the schema's `source: "body"`.
+test("the body restores onto the model's body field", async () => {
+  const onSaveEntry = await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-body"));
+  fireEvent.click(screen.getByTestId("restore-apply"));
+
+  fireEvent.click(screen.getByTestId("save-entry"));
+  await waitFor(() =>
+    expect(onSaveEntry).toHaveBeenCalledWith(expect.objectContaining({ body: "The earlier body." })),
+  );
+});
+
+test("several fields restore together", async () => {
+  const onSaveEntry = await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-field-body"));
+  expect(screen.getByText("2 fields selected")).toBeInTheDocument();
+  expect(screen.getByTestId("restore-apply")).toHaveTextContent("Restore 2 fields");
+
+  fireEvent.click(screen.getByTestId("restore-apply"));
+  fireEvent.click(screen.getByTestId("save-entry"));
+  await waitFor(() =>
+    expect(onSaveEntry).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fields: expect.objectContaining({ status: "draft" }),
+        body: "The earlier body.",
+      }),
+    ),
+  );
+});
+
+test("unticking a field, and Clear, take it back out of the selection", async () => {
+  await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  expect(screen.getByTestId("restore-apply")).toBeDisabled();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  fireEvent.click(screen.getByTestId("restore-clear"));
+  expect(screen.getByTestId("restore-apply")).toBeDisabled();
+});
+
+// A tick names a VALUE, not a field. Carrying it to the next version would keep
+// the box ticked while silently repointing it at a different value.
+test("switching version clears what was picked", async () => {
+  await openHistory();
+
+  fireEvent.click(screen.getByTestId("restore-field-status"));
+  expect(screen.getByTestId("restore-apply")).not.toBeDisabled();
+
+  fireEvent.click(screen.getByTestId("version-3b7de10"));
+  await waitFor(() => expect(screen.getByTestId("restore-apply")).toBeDisabled());
+});
+
+// A read-only document can be read back through but not rewritten.
+test("a read-only document gets history with no restore at all", async () => {
+  await openHistory(makeApi(), { readOnly: true });
+
+  expect(screen.queryByTestId("restore-bar")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("restore-field-status")).not.toBeInTheDocument();
+});
+
+// A version identical to the current document has no field whose earlier value
+// is anything but the value already in the form.
+test("an unchanged version offers nothing to restore", async () => {
+  const unchanged: DocumentChange = {
+    path: "posts/hello.md",
+    status: "U",
+    label: "Hello",
+    added: 0,
+    removed: 0,
+    fields: [{ name: "status", kind: "unchanged", before: "published", after: "published" }],
+  };
+  await openHistory(makeApi({ get: jest.fn(async () => unchanged) }));
+
+  expect(screen.queryByTestId("restore-bar")).not.toBeInTheDocument();
+});
+
+// Restoring needs somewhere for the values to go. A host that wired no save
+// would otherwise offer a control that dirties a form nothing can persist.
+test("a document with no save handler gets history with no restore", async () => {
+  render(
+    wrap(
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={jest.fn()}
+        entries={[entry]}
+        selectedEntryId={entry.id}
+        onSelectEntry={jest.fn()}
+        userInitials="ED"
+        history={makeApi()}
+      />,
+    ),
+  );
+  fireEvent.click(screen.getByTestId("document-history-toggle"));
+  await screen.findByTestId("change-detail");
+
+  expect(screen.queryByTestId("restore-bar")).not.toBeInTheDocument();
+  expect(screen.queryByTestId("restore-field-status")).not.toBeInTheDocument();
+});