@gogitcms/design-system 0.16.0-next.0 → 0.16.0-next.10

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>

package/src/components/CollabField.tsx

@@ -386,3 +386,74 @@ export function CollabTextarea({
     </PresenceField>
   );
 }
+
+// ---- writing a whole value into the shared document ------------------------
+
+/**
+ * Where one leaf of a document value lives in the shared doc.
+ *
+ * The split mirrors what the server seeds (collab.go's collectLeaves), because
+ * that is what decides which binding a control actually reads: a string is a
+ * Y.Text, and everything else — numbers, booleans, null, and whole lists — is a
+ * key in the "reg" map. Writing to the other one is not an error anyone sees;
+ * it is a value that silently lands where nothing is looking.
+ */
+type CollabLeaf = { kind: "text"; value: string } | { kind: "reg"; value: unknown };
+
+/**
+ * Flattens a value into the leaves the shared document holds it as, keyed by
+ * dotted path — `seo.title` for a group's child, exactly as the server does.
+ *
+ * `undefined` yields no leaves at all: it means the field is absent, which is
+ * expressed by clearing whatever was there rather than by writing something.
+ */
+function collabLeaves(path: string, value: unknown, into = new Map<string, CollabLeaf>()): Map<string, CollabLeaf> {
+  if (value === undefined) return into;
+  if (typeof value === "string") {
+    into.set(path, { kind: "text", value });
+    return into;
+  }
+  // A list is a whole-value register, matching CollabArrayField — its items are
+  // not addressable leaves, so it is written and cleared in one piece.
+  if (Array.isArray(value) || value === null || typeof value !== "object") {
+    into.set(path, { kind: "reg", value });
+    return into;
+  }
+  for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+    collabLeaves(path ? `${path}.${k}` : k, v, into);
+  }
+  return into;
+}
+
+/**
+ * Replaces a field's value in the shared document, so a value written by
+ * something other than typing — restoring a field from a past version — reaches
+ * the room instead of only the local form.
+ *
+ * In a live session the shared document is the source of truth: every collab
+ * control reads its binding in preference to the host's value, so a write that
+ * only touches local state is displayed for an instant and then overwritten by
+ * the CRDT's unchanged value. It has to be written here to be written at all.
+ *
+ * `previous` is what the field held, and is needed rather than inferable: the
+ * new value's leaves say what to write, but only the old value's leaves say
+ * what to CLEAR — a group that loses a child, or a field being cleared outright,
+ * would otherwise keep the shared value nobody can see any more.
+ */
+export function writeCollabValue(collab: CollabApi, path: string, previous: unknown, next: unknown): void {
+  const before = collabLeaves(path, previous);
+  const after = collabLeaves(path, next);
+
+  for (const [leafPath, leaf] of before) {
+    if (after.has(leafPath)) continue;
+    // Clearing is per shared type: a Y.Text empties, a register goes back to
+    // unset (which is what an absent key reads as, and what makes the control
+    // fall back to the document's own value).
+    if (leaf.kind === "text") collab.text(leafPath).set("");
+    else collab.register(leafPath).set(undefined);
+  }
+  for (const [leafPath, leaf] of after) {
+    if (leaf.kind === "text") collab.text(leafPath).set(leaf.value);
+    else collab.register(leafPath).set(leaf.value);
+  }
+}