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

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

@@ -0,0 +1,150 @@
+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,
+  type FieldSlotArgs,
+} from "../components/ContentBrowser";
+import type { MediaApi, MediaAsset, MediaResolution } from "../media";
+
+// 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 hero: MediaAsset = {
+  id: "m1",
+  set: "uploads",
+  repoPath: "public/uploads/hero.png",
+  publicPath: "/uploads/hero.png",
+  cdnPath: "https://cdn.example.com/uploads/hero.png",
+  mimeType: "image/png",
+  extension: "png",
+  kind: "image",
+  size: 2048,
+  width: 800,
+  height: 600,
+  pending: false,
+  url: "https://store.example.com/signed/hero.png",
+};
+
+function makeApi(over: Partial<MediaApi> = {}): MediaApi {
+  return {
+    sets: [{ name: "uploads", path: "public/uploads/**/*", mimeTypes: [], count: 1 }],
+    resolve: jest.fn(async (paths: string[]): Promise<MediaResolution[]> =>
+      paths.map((p) => ({ input: p, media: hero, aliasKind: "public", ambiguous: false, candidates: [] })),
+    ),
+    byId: jest.fn(async () => hero),
+    list: jest.fn(async () => [hero]),
+    ...over,
+  };
+}
+
+const sections: CmsNavSection[] = [
+  { title: "Content", items: [{ key: "posts", label: "Posts", icon: "newspaper" }] },
+];
+
+const bodyField: EntryField = {
+  name: "body",
+  label: "Body",
+  type: "string",
+  component: "body",
+  source: "body",
+  format: "markdown",
+  value: "",
+};
+
+function renderWith(entry: CmsEntry, api: MediaApi | undefined, renderField: (a: FieldSlotArgs) => React.ReactNode) {
+  render(
+    <ThemeProvider>
+      <ContentBrowser
+        workspace={{ name: "acme/site", initials: "AC", branch: "main", changed: 0 }}
+        sections={sections}
+        activeNavKey="posts"
+        onSelectNav={() => {}}
+        entries={[entry]}
+        userInitials="ED"
+        media={api}
+        renderField={renderField}
+      />
+    </ThemeProvider>,
+  );
+}
+
+// A slot control that exposes what it received: a button to open the picker
+// and a place to show what the pick settled with.
+function makeSlot() {
+  const seen: { media?: FieldSlotArgs["media"] } = {};
+  const renderField = (args: FieldSlotArgs) => {
+    if (args.field.component !== "body") return undefined;
+    seen.media = args.media;
+    return <button data-testid="slot-control">custom body</button>;
+  };
+  return { seen, renderField };
+}
+
+test("a slot-rendered field receives media access that opens the picker and resolves paths", async () => {
+  const api = makeApi();
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "", fields: [bodyField] };
+  renderWith(entry, api, renderField);
+
+  await screen.findByTestId("slot-control");
+  expect(seen.media).toBeDefined();
+
+  // Resolution is bound to the open document, like a media field's.
+  const resolved = await seen.media!.resolve(["/uploads/hero.png"]);
+  expect(resolved[0].media).toEqual(hero);
+  expect(api.resolve).toHaveBeenCalledWith(["/uploads/hero.png"], "content/posts/a.md");
+
+  // pick() opens the picker; choosing a row settles it with the asset and the
+  // path in the field's store_as form (public by default).
+  let pending: Promise<{ asset: MediaAsset; path: string } | null>;
+  act(() => {
+    pending = seen.media!.pick({ kinds: ["image", "svg"] });
+  });
+  const row = await screen.findByTestId(`media-row-${hero.id}`);
+  expect(api.list).toHaveBeenCalledWith(expect.objectContaining({ set: "uploads", kinds: ["image", "svg"] }));
+  fireEvent.click(row);
+  await expect(pending!).resolves.toEqual({ asset: hero, path: "/uploads/hero.png" });
+});
+
+test("dismissing the picker settles pick() with null", async () => {
+  const api = makeApi();
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "", fields: [bodyField] };
+  renderWith(entry, api, renderField);
+  await screen.findByTestId("slot-control");
+
+  let pending: Promise<unknown>;
+  act(() => {
+    pending = seen.media!.pick();
+  });
+  await screen.findByTestId(`media-row-${hero.id}`);
+  fireEvent.click(screen.getByLabelText("Close"));
+  await expect(pending!).resolves.toBeNull();
+});
+
+test("the schema-less body gets media access bound to its document", async () => {
+  const api = makeApi();
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "hello" };
+  renderWith(entry, api, renderField);
+  await screen.findByTestId("slot-control");
+
+  expect(seen.media).toBeDefined();
+  await seen.media!.resolve(["./hero.png"]);
+  expect(api.resolve).toHaveBeenCalledWith(["./hero.png"], "content/posts/a.md");
+});
+
+test("without a media api the slot receives no media handle", async () => {
+  const { seen, renderField } = makeSlot();
+  const entry: CmsEntry = { id: "a", path: "content/posts/a.md", title: "Alpha", body: "", fields: [bodyField] };
+  renderWith(entry, undefined, renderField);
+  await screen.findByTestId("slot-control");
+  expect(seen.media).toBeUndefined();
+});

package/src/__tests__/MediaField.test.tsx

@@ -183,3 +183,21 @@ describe("pathForStoreAs", () => {
     expect(pathForStoreAs(manual, "public")).toBe("files/manual.pdf");
   });
 });
+
+// The gap this closes: the picker row asked the preview for its compact form,
+// and compact rendered the file chip for every kind — so an image showed as a
+// filename squeezed into a 48px square instead of a thumbnail.
+test("the picker shows a thumbnail for images and an icon for other kinds", async () => {
+  const api = makeApi();
+  renderField(<MediaField shape="string" value="" onChange={jest.fn()} set="uploads" />, api);
+
+  fireEvent.click(screen.getByTestId("media-choose"));
+  await screen.findByTestId(`media-row-${hero.id}`);
+
+  const thumb = screen.getByTestId(`media-thumb-${hero.id}`);
+  expect(thumb.tagName).toBe("IMG");
+  expect(thumb).toHaveAttribute("src", hero.url);
+  // The PDF row has no thumbnail: it gets the kind icon instead.
+  expect(screen.queryByTestId(`media-thumb-${manual.id}`)).not.toBeInTheDocument();
+  expect(screen.getByTestId(`media-row-${manual.id}`)).toBeInTheDocument();
+});

package/src/__tests__/ProtectedBranchModal.test.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ThemeProvider } from "../ThemeProvider";
+import { ProtectedBranchModal } from "../components/ProtectedBranchModal";
+
+const wrap = (ui: React.ReactElement) => <ThemeProvider>{ui}</ThemeProvider>;
+
+const base = { branch: "main", onCreate: () => {}, onCancel: () => {} };
+
+test("it names the branch, the document, and offers the one remedy", () => {
+  render(wrap(<ProtectedBranchModal {...base} documentLabel="Hello world" />));
+
+  const modal = screen.getByTestId("protected-branch-modal");
+  expect(modal).toHaveTextContent("This branch is protected");
+  expect(modal).toHaveTextContent("main");
+  expect(modal).toHaveTextContent("Hello world");
+  expect(modal).toHaveTextContent("Branched from main");
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Create branch and save");
+});
+
+test("the suggested name prefills the field and submits", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("edit/hello");
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).toHaveBeenCalledWith("edit/hello");
+});
+
+// The author's own name wins: a suggestion arriving late (the host resolves the
+// document a render after the modal opens) must not overwrite what they typed.
+test("a late suggestion does not overwrite a typed name", () => {
+  const { rerender } = render(wrap(<ProtectedBranchModal {...base} />));
+  fireEvent.change(screen.getByTestId("protected-branch-name"), { target: { value: "mine" } });
+  rerender(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" />));
+  expect(screen.getByTestId("protected-branch-name")).toHaveValue("mine");
+});
+
+test("an empty name cannot be submitted", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCreate={onCreate} />));
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+// While the branch is being created there is no way out but forward: cancelling
+// mid-flight would abandon a save whose branch may already exist.
+test("busy disables both actions and hides the close control", () => {
+  const onCreate = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} suggestedName="edit/hello" busy onCreate={onCreate} />));
+
+  expect(screen.getByTestId("protected-branch-submit")).toHaveTextContent("Creating…");
+  expect(screen.queryByTestId("protected-branch-close")).not.toBeInTheDocument();
+  fireEvent.click(screen.getByTestId("protected-branch-submit"));
+  expect(onCreate).not.toHaveBeenCalled();
+});
+
+test("the server's message is shown so a rejected name can be corrected", () => {
+  render(wrap(<ProtectedBranchModal {...base} error={`branch "edit/hello" already exists`} />));
+  expect(screen.getByTestId("protected-branch-error")).toHaveTextContent("already exists");
+});
+
+test("cancel dismisses", () => {
+  const onCancel = jest.fn();
+  render(wrap(<ProtectedBranchModal {...base} onCancel={onCancel} />));
+  fireEvent.click(screen.getByTestId("protected-branch-cancel"));
+  expect(onCancel).toHaveBeenCalledTimes(1);
+});

package/src/components/ApplyChangesModal.tsx

@@ -35,6 +35,15 @@ export type ApplyChangesModalProps = {
   progress?: MergeProgress;
   /** A short summary of what will be merged, shown on the confirmation step. */
   summary?: string;
+  /**
+   * Why this apply cannot push to the target directly and opens a change
+   * request instead — the target is protected, or the caller cannot publish
+   * every project on the branch. When set, the confirmation step describes the
+   * review that will happen rather than a merge commit that will not, and the
+   * needs_review panel gives this reason when there are no code conflicts to
+   * list. Absent for an ordinary direct merge.
+   */
+  reviewReason?: string;
   /** Number of unresolved conflicts, shown on the conflicted state. */
   conflictCount?: number;
   /**
@@ -99,7 +108,7 @@ function StepRow({ label, state }: { label: string; state: "done" | "active" | "
  * (spinner → green check), then shows a success panel with the commit + stats,
  * or an error. Read-only: it reflects a run the host drives via a subscription.
  */
-export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summary, conflictCount, changeRequestOpen, changeRequestUrl, creatingChangeRequest, onConfirm, onReviewConflicts, onCreateChangeRequest, onViewChangeRequest, onClose, onDone }: ApplyChangesModalProps) {
+export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summary, reviewReason, conflictCount, changeRequestOpen, changeRequestUrl, creatingChangeRequest, onConfirm, onReviewConflicts, onCreateChangeRequest, onViewChangeRequest, onClose, onDone }: ApplyChangesModalProps) {
   const t = useTheme();
   const done = onDone ?? onClose;
   const [explanation, setExplanation] = useState("");
@@ -121,6 +130,13 @@ export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summar
   const status = progress?.status;
   const conflicted = status === "conflicted";
   const needsReview = status === "needs_review";
+  // A needs_review run either lists code files a developer must resolve, or
+  // lists nothing because the merge was clean and simply may not be pushed by
+  // this run (a protected target, or partial project access). The two need
+  // different words: the second is not a conflict and naming it one would send
+  // the editor looking for files that are not there.
+  const escalationFiles = progress?.escalationFiles ?? [];
+  const codeConflicts = escalationFiles.length > 0;
   const terminal = status === "succeeded" || status === "failed" || conflicted || needsReview;
   const current = progress ? stepOrder[progress.step] : 0;
 
@@ -201,30 +217,63 @@ export function ApplyChangesModal({ sourceBranch, targetBranch, progress, summar
           // Confirmation step: spell out the irreversible, outward-facing effects
           // before anything is pushed to the remote.
           <View testID="apply-confirm" style={{ gap: t.space(3) }}>
-            <Text variant="body" color="secondary">
-              {`This merges ${sourceBranch} into ${targetBranch}, commits the result, and pushes a merge commit to origin/${targetBranch}.`}
-            </Text>
-            <Text variant="body" color="secondary">
-              {`${sourceBranch} is then deleted. This can’t be undone.`}
-            </Text>
+            {reviewReason ? (
+              // The run will stop before the push, so promising a merge commit
+              // on origin here would be describing something that will not
+              // happen. Say what will: a review, and nothing on the target
+              // until it is approved.
+              <>
+                <Text variant="body" color="secondary" testID="apply-confirm-review">
+                  {`This merges ${sourceBranch} into ${targetBranch} in the CMS and opens a pull request for review. Nothing is pushed to origin/${targetBranch} until it is approved.`}
+                </Text>
+                <Text variant="body" color="secondary">{reviewReason}</Text>
+              </>
+            ) : (
+              <>
+                <Text variant="body" color="secondary">
+                  {`This merges ${sourceBranch} into ${targetBranch}, commits the result, and pushes a merge commit to origin/${targetBranch}.`}
+                </Text>
+                <Text variant="body" color="secondary">
+                  {`${sourceBranch} is then deleted. This can’t be undone.`}
+                </Text>
+              </>
+            )}
             {summary ? <Text variant="monoSm" color="tertiary">{summary}</Text> : null}
           </View>
         ) : needsReview ? (
-          // Content merged, but code/config files conflict. A content editor can't
-          // resolve these — collect an explanation and escalate to a developer.
+          // Content merged, but the run may not push it. Either code/config
+          // files conflict — a content editor can't resolve these — or the
+          // target can't take a direct push from this run. Both collect an
+          // explanation and escalate through a pull request.
           <View testID="merge-needs-review" style={{ gap: t.space(3) }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
-              <Icon name="gitPullRequest" size={16} color={t.color.diffDelFg} />
-              <Text variant="body" weight="medium">Code conflicts need a developer</Text>
-            </View>
-            <Text variant="body" color="secondary">
-              {`The content merged cleanly, but these files changed on both ${sourceBranch} and ${targetBranch} and need a developer to resolve:`}
-            </Text>
-            <View style={{ gap: 2, padding: t.space(2), borderRadius: t.radius.md, backgroundColor: t.color.diffDelBg }}>
-              {(progress?.escalationFiles ?? []).map((f) => (
-                <Text key={f} variant="monoSm" color={t.color.diffDelFg} testID={`escalation-file-${f}`}>{f}</Text>
-              ))}
-            </View>
+            {codeConflicts ? (
+              <>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                  <Icon name="gitPullRequest" size={16} color={t.color.diffDelFg} />
+                  <Text variant="body" weight="medium">Code conflicts need a developer</Text>
+                </View>
+                <Text variant="body" color="secondary">
+                  {`The content merged cleanly, but these files changed on both ${sourceBranch} and ${targetBranch} and need a developer to resolve:`}
+                </Text>
+                <View style={{ gap: 2, padding: t.space(2), borderRadius: t.radius.md, backgroundColor: t.color.diffDelBg }}>
+                  {escalationFiles.map((f) => (
+                    <Text key={f} variant="monoSm" color={t.color.diffDelFg} testID={`escalation-file-${f}`}>{f}</Text>
+                  ))}
+                </View>
+              </>
+            ) : (
+              <>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+                  <Icon name="gitPullRequest" size={16} color={t.color.textSecondary} />
+                  <Text variant="body" weight="medium">This merge needs a review</Text>
+                </View>
+                <Text variant="body" color="secondary" testID="merge-needs-review-reason">
+                  {`The content merged cleanly and nothing was pushed to ${targetBranch}. ` +
+                    (reviewReason ?? `Someone with the authority to publish it has to approve it.`) +
+                    ` Opening a change request creates a pull request for that review.`}
+                </Text>
+              </>
+            )}
             <Input
               value={explanation}
               onChangeText={setExplanation}

package/src/components/BranchDeletedModal.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { View, ScrollView } from "react-native";
+import { useTheme } from "../ThemeProvider";
+import { Text } from "./Text";
+import { Icon } from "./Icon";
+import { Button } from "./Button";
+import type { BranchRef } from "./BranchMenu";
+
+export type BranchDeletedModalProps = {
+  /**
+   * The branch that no longer exists. Omitted when only its id is known — a
+   * link into a branch that was deleted before the page loaded.
+   */
+  branch?: string;
+  /** "owner/name", when the host knows it. */
+  repository?: string;
+  /** The branches still connected, to switch to. The deleted one is not among them. */
+  branches: BranchRef[];
+  /** Open the editor on `branch` instead. */
+  onSwitch: (branch: BranchRef) => void;
+  /**
+   * Leave this repository for the picker. Offered as the way out when there is
+   * no other branch to switch to; omitted → the list is the only exit.
+   */
+  onChooseRepository?: () => void;
+  testID?: string;
+};
+
+/**
+ * Shown when the branch the editor is on stops existing — deleted on the
+ * provider, or disconnected from the CMS — while someone is looking at it.
+ *
+ * It is a modal rather than a redirect because the screen behind it may hold
+ * work in progress. Nothing on it can be saved to this branch any more, but
+ * bouncing the user to another branch without a word would make that content
+ * vanish mid-thought; the modal says what happened and leaves the page visible
+ * while they decide where to go. It cannot be dismissed into the dead branch,
+ * because there is nothing there to go back to: every exit is another branch.
+ */
+export function BranchDeletedModal({
+  branch, repository, branches, onSwitch, onChooseRepository, testID,
+}: BranchDeletedModalProps) {
+  const t = useTheme();
+  const title = branch ? `${branch} was deleted` : "This branch no longer exists";
+  const where = repository ? ` in ${repository}` : "";
+  const detail = branch
+    ? `The ${branch} branch${where} was deleted on the remote or disconnected from the CMS, and its content was removed with it. Nothing on this screen can be saved to it any more.`
+    : `The branch this link points to${where} was deleted on the remote or disconnected from the CMS, so there is nothing here to edit.`;
+  const hasOthers = branches.length > 0;
+
+  return (
+    <View
+      testID={testID ?? "branch-deleted-modal"}
+      style={{
+        position: "absolute", top: 0, left: 0, right: 0, bottom: 0, zIndex: 50,
+        alignItems: "center", justifyContent: "center", padding: t.space(4),
+        backgroundColor: "rgba(0,0,0,0.45)",
+      }}
+    >
+      <View
+        style={{
+          width: 460, maxWidth: "100%", maxHeight: "100%", gap: t.space(4), padding: t.space(5),
+          borderRadius: t.radius.lg, borderWidth: 1, borderColor: t.color.borderDefault,
+          backgroundColor: t.color.surfaceRaised,
+        }}
+      >
+        <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+          <Icon name="alert" size={16} color={t.color.diffDelFg} />
+          <Text variant="h3" weight="semibold" testID="branch-deleted-title">{title}</Text>
+        </View>
+
+        <Text variant="body" color="secondary">{detail}</Text>
+
+        {hasOthers ? (
+          <>
+            <Text variant="sm" weight="semibold">Switch to another branch to keep working</Text>
+            <ScrollView style={{ maxHeight: 280 }} contentContainerStyle={{ gap: t.space(2) }}>
+              {branches.map((b) => (
+                <Button
+                  key={b.id}
+                  title={b.name}
+                  fullWidth
+                  onPress={() => onSwitch(b)}
+                  testID={`branch-deleted-switch-${b.id}`}
+                />
+              ))}
+            </ScrollView>
+          </>
+        ) : (
+          <Text variant="sm" color="secondary" testID="branch-deleted-none">
+            {repository
+              ? `No other branch of ${repository} is connected to the CMS.`
+              : "No other branch of this repository is connected to the CMS."}
+          </Text>
+        )}
+
+        {onChooseRepository ? (
+          <View style={{ flexDirection: "row", justifyContent: "flex-end" }}>
+            <Button
+              title="Choose a repository"
+              variant={hasOthers ? "ghost" : "primary"}
+              size="md"
+              onPress={onChooseRepository}
+              testID="branch-deleted-choose-repository"
+            />
+          </View>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/components/ChangeDetail.tsx

@@ -5,7 +5,7 @@ import { Text } from "./Text";
 import { Icon } from "./Icon";
 import { Input } from "./Input";
 import { Button } from "./Button";
-import { Badge, DiffStat } from "./primitives";
+import { Badge, CheckBox, DiffStat } from "./primitives";
 
 /** How one field differs between the branch and its base. */
 export type FieldChangeKind = "added" | "removed" | "changed" | "unchanged";
@@ -38,7 +38,15 @@ export type DocumentChange = {
   path: string;
   /** The base branch's path, for a rename. */
   previousPath?: string;
-  status: "A" | "M" | "D" | "R";
+  /**
+   * A/M/D/R are git's letters, so a branch comparison renders them untranslated.
+   * "U" (unchanged) has no place in a diff of two branches — an unchanged
+   * document is not a change — but it is a real answer for a document version:
+   * the newest commit in a document's history is usually still what the document
+   * is, and saying "Unchanged" is more useful than an empty diff with no
+   * explanation.
+   */
+  status: "A" | "M" | "D" | "R" | "U";
   label: string;
   /** Ordered to match the content model's schema, so it reads like the editor. */
   fields: FieldChange[];
@@ -79,13 +87,35 @@ export type ChangeDetailProps = {
    */
   conflicts?: FieldConflict[];
   onResolveConflict?: (conflict: FieldConflict, choice: ConflictChoice, override?: unknown) => void;
+
+  /**
+   * Per-field selection, for a caller that does something with a subset of the
+   * diff — restoring fields from a past version, in the history pane.
+   *
+   * Only CHANGED fields get a box: an unchanged field's two sides are the same
+   * value, so selecting it could only ever be a no-op dressed up as a choice.
+   * The body is selectable under the name BODY_FIELD.
+   *
+   * Omitting onToggleField leaves the diff exactly as it was — a read-only
+   * comparison, which is what the changes surface wants.
+   */
+  selectedFields?: readonly string[];
+  onToggleField?: (name: string) => void;
 };
 
+/**
+ * The name the body answers to in `selectedFields` — the document body is a
+ * selectable "field" here but has no entry in `fields`, and a real frontmatter
+ * key could otherwise collide with whatever plain string we picked.
+ */
+export const BODY_FIELD = "\u0000body";
+
 const STATUS_LABEL: Record<DocumentChange["status"], string> = {
   A: "Added",
   M: "Modified",
   D: "Deleted",
   R: "Renamed",
+  U: "Unchanged",
 };
 
 /** Renders a field value the way the editor would show it, not as raw JSON. */
@@ -142,14 +172,29 @@ function ContextValue({ value }: { value: unknown }) {
   );
 }
 
-function FieldRow({ field }: { field: FieldChange }) {
+function FieldRow({
+  field,
+  selected,
+  onToggle,
+}: {
+  field: FieldChange;
+  // Both present or both absent: selection is offered only for a changed field
+  // whose caller wants it (see ChangeDetailProps.onToggleField).
+  selected?: boolean;
+  onToggle?: () => void;
+}) {
   const t = useTheme();
   const changed = field.kind !== "unchanged";
   return (
     <View testID={`change-field-${field.name}`} style={{ gap: t.space(2) }}>
-      <Text variant="label" color="tertiary">
-        {(field.label || field.name).toUpperCase()}
-      </Text>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        {onToggle ? (
+          <CheckBox value={!!selected} onToggle={onToggle} testID={`restore-field-${field.name}`} />
+        ) : null}
+        <Text variant="label" color="tertiary">
+          {(field.label || field.name).toUpperCase()}
+        </Text>
+      </View>
       {changed ? (
         <View
           style={{
@@ -285,7 +330,17 @@ function ConflictSide({ label, value, chosen }: { label: string; value: unknown;
  * stacked blocks rather than a single line — the whole before and the whole
  * after, each tinted, so a reviewer can read them.
  */
-function BodyDiff({ before, after }: { before?: string | null; after?: string | null }) {
+function BodyDiff({
+  before,
+  after,
+  selected,
+  onToggle,
+}: {
+  before?: string | null;
+  after?: string | null;
+  selected?: boolean;
+  onToggle?: () => void;
+}) {
   const t = useTheme();
   if ((before ?? "") === (after ?? "")) {
     if (!after) return null;
@@ -298,7 +353,12 @@ function BodyDiff({ before, after }: { before?: string | null; after?: string |
   }
   return (
     <View testID="change-body" style={{ gap: t.space(2) }}>
-      <Text variant="label" color="tertiary">BODY</Text>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: t.space(2) }}>
+        {onToggle ? (
+          <CheckBox value={!!selected} onToggle={onToggle} testID="restore-field-body" />
+        ) : null}
+        <Text variant="label" color="tertiary">BODY</Text>
+      </View>
       <View
         style={{
           borderRadius: t.radius.md,
@@ -374,8 +434,21 @@ function AssetPreview({ preview }: { preview: ChangePreview }) {
  * context. Strictly read-only — editing happens on the Edit surface, and this
  * view describes a comparison rather than a document you can save.
  */
-export function ChangeDetail({ change, loading, emptyMessage = "Select a change", conflicts, onResolveConflict }: ChangeDetailProps) {
+export function ChangeDetail({
+  change,
+  loading,
+  emptyMessage = "Select a change",
+  conflicts,
+  onResolveConflict,
+  selectedFields,
+  onToggleField,
+}: ChangeDetailProps) {
   const t = useTheme();
+  const chosen = new Set(selectedFields ?? []);
+  // A field offers a box only when the caller wants selection AND there is
+  // something to select — an unchanged field's two sides are the same value.
+  const toggleFor = (name: string, changed: boolean) =>
+    onToggleField && changed ? () => onToggleField(name) : undefined;
 
   // Conflicts keyed by field name (and a body flag), so each field can check for
   // one as it renders. The body conflict is looked up separately.
@@ -445,7 +518,12 @@ export function ChangeDetail({ change, loading, emptyMessage = "Select a change"
               onResolve={onResolveConflict ? (choice, override) => onResolveConflict(conflict, choice, override) : undefined}
             />
           ) : (
-            <FieldRow key={f.name} field={f} />
+            <FieldRow
+              key={f.name}
+              field={f}
+              selected={chosen.has(f.name)}
+              onToggle={toggleFor(f.name, f.kind !== "unchanged")}
+            />
           );
         })}
         {/* Conflicts on fields the schema-ordered diff didn't surface (rare). */}
@@ -464,7 +542,12 @@ export function ChangeDetail({ change, loading, emptyMessage = "Select a change"
             onResolve={onResolveConflict ? (choice, override) => onResolveConflict(bodyConflict!, choice, override) : undefined}
           />
         ) : (
-          <BodyDiff before={change.bodyBefore} after={change.bodyAfter} />
+          <BodyDiff
+            before={change.bodyBefore}
+            after={change.bodyAfter}
+            selected={chosen.has(BODY_FIELD)}
+            onToggle={toggleFor(BODY_FIELD, (change.bodyBefore ?? "") !== (change.bodyAfter ?? ""))}
+          />
         )}
       </ScrollView>
     </View>