@gogitcms/editor 0.26.0 → 0.28.0

package/app/vendor/design-system/src/components/ContentBrowser.tsx

@@ -6,7 +6,7 @@ import { Text } from "./Text";
 import { Icon } from "./Icon";
 import { Button, IconButton } from "./Button";
 import { Input } from "./Input";
-import { Avatar, Badge, DiffStat, Divider, SectionLabel } from "./primitives";
+import { Avatar, Badge, CheckBox, DiffStat, Divider, SectionLabel } from "./primitives";
 import { NavRow } from "./NavRow";
 import { AppShell, MobileScreen, Pane, TopBar, ThemeToggle } from "./layout";
 import { Segment, type SegmentItem } from "./Segment";
@@ -15,6 +15,7 @@ import { BranchMenu, type BranchRef } from "./BranchMenu";
 import { ProjectMenu, type ProjectRef } from "./ProjectMenu";
 import { ChangeDetail, type DocumentChange, type FieldConflict, type ConflictChoice } from "./ChangeDetail";
 import { ApplyChangesModal, type MergeProgress } from "./ApplyChangesModal";
+import { ProtectedBranchModal } from "./ProtectedBranchModal";
 import { NotificationBell, type NotificationItem } from "./Notifications";
 import {
   CollabInput,
@@ -22,6 +23,7 @@ import {
   PresenceField,
   PresenceAvatars,
   useCollabRegister,
+  writeCollabValue,
   useCollabMirror,
   useCollabSynced,
   useCollabValue,
@@ -31,6 +33,10 @@ import {
 import { clamp, reorder, slotAtX } from "./reorder";
 import { MediaField, MediaProvider, DocumentPathProvider } from "./MediaField";
 import { MediaBrowser } from "./MediaBrowser";
+import { FormsBrowser } from "./FormsBrowser";
+import { FORMS_NAV_KEY, formsNavKey, isFormsNavKey, parseFormsNavKey, type FormsApi } from "../forms";
+import { type HistoryApi } from "../history";
+import { DocumentHistory } from "./DocumentHistory";
 import {
   MEDIA_NAV_KEY,
   mediaNavKey,
@@ -109,6 +115,12 @@ export type FieldSlotArgs = {
   // CRDT and publish presence.
   collab?: CollabApi;
   path?: string;
+  // Bumped when the host replaces this field's value outright rather than the
+  // user editing it — restoring it from a past version. A controlled control
+  // needs nothing from this (it already re-renders with the new value), but the
+  // body editor does: in a live session it ignores `value` and mirrors the
+  // shared fragment, so "the value changed" is not a thing it can observe.
+  resetNonce?: number;
 };
 export type RenderField = (args: FieldSlotArgs) => React.ReactNode;
 
@@ -334,6 +346,22 @@ export type ContentBrowserProps = {
   // store gets.
   media?: MediaApi;
 
+  // Forms data seam, the same split (docs/forms.md §10.2). Omitted → the Forms
+  // surface never renders, which is what a config declaring no forms looks like.
+  forms?: FormsApi;
+
+  // Document-history data seam, the same split again: the DS owns the version
+  // browser and its ephemeral state, the host owns fetching. Provided → an open
+  // document's header gains a history button, and pressing it gives that
+  // column's body over to the version browser. Omitted → no affordance at all,
+  // which is what a deployment with no provider (local mode, desktop) gets: a
+  // feature the user never sees beats one that errors when clicked.
+  history?: HistoryApi;
+  // The selected submission's id, and the reporter for taps — bound to the URL
+  // by the host exactly as document selection is.
+  selectedSubmissionId?: string | null;
+  onSelectSubmission?: (id: string | null) => void;
+
   // When provided, field/body edits autosave 1s after the last keystroke and an
   // autosave indicator appears in the detail header. Omitted → edits stay local
   // (the demo/read-only behavior).
@@ -468,6 +496,19 @@ export type ContentBrowserProps = {
   changeRequestOpen?: boolean;
   changeRequestUrl?: string;
   creatingChangeRequest?: boolean;
+
+  // Protected-branch save prompt. The server refuses a save to a branch the
+  // provider protects; the host catches that, sets protectedBranch to the branch
+  // name, and this modal offers the one thing that resolves it — a branch to put
+  // the edit on. onCreateBranchAndSave receives the name; the host creates the
+  // branch and applies the pending edit to it in one server call.
+  protectedBranch?: string;
+  protectedBranchDocument?: string;
+  protectedBranchSuggestedName?: string;
+  creatingProtectedBranch?: boolean;
+  protectedBranchError?: string | null;
+  onCreateBranchAndSave?: (name: string) => void;
+  onCancelProtectedSave?: () => void;
   onCreateChangeRequest?: (explanation: string) => void;
   onViewChangeRequest?: () => void;
 
@@ -733,6 +774,11 @@ type FieldControlProps = {
   // When this number changes, the field programmatically focuses itself (used to
   // jump to a peer's field from its presence avatar).
   focusSignal?: number;
+  // Bumped when this field's value was replaced by the host rather than typed —
+  // restored from a past version. Only the host-supplied body editor needs it
+  // (see FieldSlotArgs.resetNonce); every built-in control is controlled and
+  // re-renders from `value` on its own.
+  resetNonce?: number;
 };
 
 // The scalar type an array's `of` maps to when rendering item controls.
@@ -746,7 +792,7 @@ function ofToType(of?: string): string {
 }
 
 function FieldControl(props: FieldControlProps) {
-  const { field, value, onChange, renderField, readOnly = false, error, hideLabel, onOpenGroup, collab, path, focusSignal } = props;
+  const { field, value, onChange, renderField, readOnly = false, error, hideLabel, onOpenGroup, collab, path, focusSignal, resetNonce } = props;
   const t = useTheme();
   const label = hideLabel ? "" : field.label || field.name;
   // A text field participates in live collaboration when the document has a
@@ -759,7 +805,7 @@ function FieldControl(props: FieldControlProps) {
 
   // Host-supplied control (e.g. the markdown editor) takes precedence.
   if (renderField) {
-    const custom = renderField({ field, value, onChange, readOnly, collab: collabText, path });
+    const custom = renderField({ field, value, onChange, readOnly, collab: collabText, path, resetNonce });
     if (custom != null && custom !== false) {
       return (
         <View style={{ gap: t.space(2) }}>
@@ -2557,6 +2603,7 @@ function EntryDetail({
   onMove,
   collectionPath,
   folderOptions,
+  history,
   active,
   onActivate,
   onCollapse,
@@ -2579,6 +2626,10 @@ function EntryDetail({
   collectionPath?: string;
   // Existing folders (relative to the glob base) offered by the move autocomplete.
   folderOptions?: string[];
+  // The document-history seam. Provided → a history button appears in this
+  // document's header and its column can show the version browser. Omitted →
+  // the header renders exactly as it did before history existed.
+  history?: HistoryApi;
   // Desktop columns: `active` marks the focused column (accent + header press
   // activates it via onActivate); onCollapse/onClose add the header rail/close
   // controls. All omitted on mobile → unchanged single-detail behavior.
@@ -2599,6 +2650,23 @@ function EntryDetail({
   const canRename = !readOnly && !!onRename;
   const canMove = !readOnly && !!onMove && glob.hierarchical;
   const [prompt, setPrompt] = useState<"rename" | "move" | null>(null);
+  // Per-field "your value was replaced" counters, bumped by a restore. Only the
+  // host-supplied body editor reads them (see FieldSlotArgs.resetNonce); every
+  // built-in control is controlled and needs no telling.
+  const [resetNonces, setResetNonces] = useState<Record<string, number>>({});
+
+  // Whether this column is showing the version browser instead of the form.
+  // Deliberately per-column and ephemeral: history is something you open, read
+  // and close, so it lives and dies with the column rather than in the URL.
+  const [showHistory, setShowHistory] = useState(false);
+  // A column reused for another document (the "preview tab" behavior) must not
+  // carry the previous document's history view onto it — you asked to see that
+  // document, not this one's past.
+  const historyFor = useRef(entry.id);
+  if (historyFor.current !== entry.id) {
+    historyFor.current = entry.id;
+    if (showHistory) setShowHistory(false);
+  }
 
   // Both branches share one value map. The title+body branch is modeled as a
   // single body-source field so autosave logic is uniform.
@@ -2781,6 +2849,112 @@ function EntryDetail({
     [commit],
   );
 
+  // Publish a value map the form did NOT arrive at by typing — a restore from a
+  // past version, or a discard back to the saved document.
+  //
+  // Both used to write local state and stop there, which is only half the job in
+  // a live session. The shared document is the source of truth there: every
+  // collab control prefers its binding to the value handed to it, so a replaced
+  // value was displayed for one frame and then overwritten by the room's
+  // unchanged one, and no peer ever saw it. Anything that replaces values
+  // wholesale has to come through here.
+  //
+  // `names` are the fields whose values were replaced; unchanged ones are left
+  // alone so a replacement never churns the room (or nudges a peer's cursor)
+  // over a value that did not move.
+  const publishReplacement = useCallback(
+    (previous: Record<string, unknown>, next: Record<string, unknown>, names: string[]) => {
+      const moved = names.filter((name) => !sameValue(previous[name], next[name]));
+      if (moved.length === 0) return;
+
+      if (entry.collab) {
+        for (const name of moved) {
+          // A body is a ProseMirror fragment rather than a field binding, so it
+          // is not written here — its editor is told instead, by the nonce below.
+          if (editFields.find((f) => f.name === name)?.source === "body") continue;
+          writeCollabValue(entry.collab, name, previous[name], next[name]);
+        }
+      }
+
+      // Tell the replaced fields their value came from outside. Keyed per field
+      // rather than one counter for the document: the body editor acts on this,
+      // and replacing some unrelated field must not make it rebuild a body a
+      // peer may be mid-sentence in.
+      setResetNonces((prev) => {
+        const bumped = { ...prev };
+        for (const name of moved) bumped[name] = (bumped[name] ?? 0) + 1;
+        return bumped;
+      });
+    },
+    // editFields is derived from entry, captured by id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [entry.id, entry.collab],
+  );
+
+  // Values taken from a past version and put back into the form.
+  //
+  // It is an edit like any other: the restored fields land in `values`, the
+  // document goes unsaved, and the author saves it (or discards it) themselves.
+  // Nothing is written to git here — history is a place you read, and rewriting
+  // the document from it should still pass through the same review a typed edit
+  // does.
+  const restoreValues = useCallback(
+    (restored: { fields: Record<string, unknown>; body?: string | null }) => {
+      const previous = valuesRef.current;
+      const next = { ...previous, ...restored.fields };
+      // The body is a field in the form like any other; which one it is comes
+      // from the schema (`source: "body"`), the same mapping buildChange uses in
+      // the other direction. A document whose model has no body field simply
+      // has no body to restore.
+      const bodyField = "body" in restored ? editFields.find((f) => f.source === "body") : undefined;
+      if (bodyField) next[bodyField.name] = restored.body ?? "";
+
+      const replaced = Object.keys(restored.fields);
+      if (bodyField) replaced.push(bodyField.name);
+
+      // Touched under the first restored name so a restore that leaves a
+      // required field empty shows its error immediately, rather than looking
+      // saveable until Save is pressed.
+      //
+      // Committed BEFORE publishing: a collab control observing the room echoes
+      // what it sees back through onChange, and that echo builds its next map by
+      // spreading the current one. Publishing first would have it spread the
+      // pre-restore map.
+      commit(next, replaced[0] ?? SYNTHETIC_BODY);
+      publishReplacement(previous, next, replaced);
+      // Drilled-into groups address the pre-restore shape; a restored group
+      // object can have different children entirely.
+      setGroupPath([]);
+    },
+    // editFields is derived from entry, which commit already captures by id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [commit, entry.id, publishReplacement],
+  );
+
+  // Throw away everything unsaved and go back to the document as stored.
+  //
+  // In a live session that is a change to the ROOM, not just to this screen: the
+  // unsaved work is the collective state every client is looking at, and a
+  // discard that only reverted the local form would leave the document it just
+  // claimed to restore sitting in the CRDT, ready to come straight back.
+  const discardEdits = useCallback(() => {
+    const previous = valuesRef.current;
+    const restored = seed();
+    valuesRef.current = restored;
+    setValues(restored);
+    setTouched({});
+    // The preview is rendering the draft being thrown away, and nothing else
+    // will tell it otherwise: it is fed from edits, and a discard is the one
+    // change to a document that produces no edit. Without this the preview
+    // keeps showing work the author just deleted, until they type again.
+    emitDraft(buildChange(entry.id, editFields, restored), entry);
+    discard();
+    publishReplacement(previous, restored, editFields.map((f) => f.name));
+    setGroupPath([]);
+    // seed/editFields derive from entry, captured by id.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [entry.id, discard, emitDraft, publishReplacement]);
+
   // A field edit within the active group-drill frame: write the value at the
   // frame's nested path, then commit the whole map (buildChange serializes it).
   const changeInFrame = useCallback(
@@ -2844,19 +3018,7 @@ function EntryDetail({
         {saveHandler && dirty ? (
           <Pressable
             testID="discard-changes"
-            onPress={() => {
-              const restored = seed();
-              valuesRef.current = restored;
-              setValues(restored);
-              setTouched({});
-              // The preview is rendering the draft that is being thrown away,
-              // and nothing else will tell it otherwise: it is fed from edits,
-              // and a discard is the one change to a document that produces no
-              // edit. Without this the preview keeps showing work the author
-              // just deleted, until they type again.
-              emitDraft(buildChange(entry.id, editFields, restored), entry);
-              discard();
-            }}
+            onPress={discardEdits}
             style={{ paddingHorizontal: t.space(2), paddingVertical: t.space(1) }}
           >
             <Text variant="monoSm" color="tertiary">Discard</Text>
@@ -2884,6 +3046,20 @@ function EntryDetail({
             document's own actions, while the menu holds the destructive and
             path-changing ones that should stay one level down. */}
         {documentActions?.(entry)}
+        {/* History is a read of this document, not a change to it, so it sits
+            out here with the other non-destructive actions rather than in the
+            menu beside Delete. It toggles: pressing it again returns the column
+            to the form. */}
+        {history ? (
+          <IconButton
+            name="history"
+            size="sm"
+            active={showHistory}
+            label={showHistory ? "Close history" : "Document history"}
+            onPress={() => setShowHistory((v) => !v)}
+            testID="document-history-toggle"
+          />
+        ) : null}
         {canRename || canMove || (canDelete && onDeleteEntry) ? (
           <DetailMenu
             onRename={canRename ? () => setPrompt("rename") : undefined}
@@ -2899,10 +3075,35 @@ function EntryDetail({
         ) : null}
       </View>
 
-      {/* Keyed by entry.id so controls (incl. the markdown editor) remount with
+      {/* History takes over the column's body, keeping its header: the header
+          is what says which document you are looking at, and it carries the
+          control that got you here and gets you back. */}
+      {showHistory && history ? (
+        <DocumentHistory
+          documentId={entry.id}
+          documentPath={entry.path}
+          history={history}
+          onClose={() => setShowHistory(false)}
+          // Restoring needs somewhere for the values to go: a document that is
+          // read-only, or that this host never wired a save for, gets the
+          // history with no selection boxes at all rather than a form it can
+          // dirty and never save. (saveHandler is already undefined when
+          // readOnly, so this covers both.)
+          onRestore={
+            !saveHandler
+              ? undefined
+              : (restored) => {
+                  restoreValues(restored);
+                  // Back to the form, which is where the restored values now
+                  // are and where the decision to keep them is made.
+                  setShowHistory(false);
+                }
+          }
+        />
+      ) : /* Keyed by entry.id so controls (incl. the markdown editor) remount with
           fresh initial values (and the scroll resets to top) when the selected
-          document changes. The header above stays put; only the body scrolls. */}
-      {hasFields ? (
+          document changes. The header above stays put; only the body scrolls. */
+      hasFields ? (
         // The document's path reaches media fields at any nesting depth through
         // context: a picker inside a group or a list item needs it to interpret
         // relative references, and drilling it through every level would touch
@@ -2940,6 +3141,7 @@ function EntryDetail({
               collab={entry.collab}
               path={[...groupPath, f.name].join(".")}
               focusSignal={focusTarget && focusTarget.name === f.name ? focusTarget.nonce : undefined}
+              resetNonce={resetNonces[f.name]}
             />
           ))}
         </ScrollView>
@@ -3019,27 +3221,6 @@ function useMultiSelect(resetKey: string) {
   return { checked, toggle, clear, checkedIds, checkedFolders, toggleFolder, checkedFolderKeys };
 }
 
-// CheckBox is the row-selection control for multi-select.
-function CheckBox({ value, onToggle }: { value: boolean; onToggle: () => void }) {
-  const t = useTheme();
-  return (
-    <Pressable
-      // Stop the press from bubbling to the row's open handler (the checkbox
-      // sits inside the row Pressable) so toggling never also opens the entry.
-      onPress={(e?: { stopPropagation?: () => void }) => { e?.stopPropagation?.(); onToggle(); }}
-      testID="entry-checkbox"
-      style={{
-        width: 18, height: 18, borderRadius: t.radius.sm, borderWidth: 1,
-        borderColor: value ? t.color.borderStrong : t.color.borderDefault,
-        backgroundColor: value ? t.color.surfaceInverted : t.color.surfaceRaised,
-        alignItems: "center", justifyContent: "center",
-      }}
-    >
-      {value ? <Icon name="check" size={12} color={t.color.textInverted} /> : null}
-    </Pressable>
-  );
-}
-
 // SelectionBar appears above the entry list when rows are checked; it offers a
 // bulk move and/or delete plus a clear action (each shown only when wired).
 function SelectionBar({ count, onMove, onDelete, onClear }: { count: number; onMove?: () => void; onDelete?: () => void; onClear: () => void }) {
@@ -3182,7 +3363,7 @@ function EntriesList({
             <View style={{ flexDirection: "row", alignItems: "center" }}>
               {showChecks ? (
                 <View style={{ paddingLeft: t.space(4) }}>
-                  <CheckBox value={!!checked?.[e.id]} onToggle={() => onToggleEntry?.(e.id)} />
+                  <CheckBox value={!!checked?.[e.id]} onToggle={() => onToggleEntry?.(e.id)} testID="entry-checkbox" />
                 </View>
               ) : null}
               <View style={{ flex: 1 }}>
@@ -3557,9 +3738,28 @@ function ReadOnlyBanner({ notice, actionLabel, onAction }: { notice?: string; ac
   );
 }
 
-// ApplyModalOverlay renders the apply-changes / change-request modal as a
-// full-screen overlay. Shared by both layouts so the modal (and its "learn more"
-// change-request link) is reachable on mobile too.
+// ModalOverlays renders the browser's full-screen modals — apply changes /
+// change request, and the protected-branch save prompt. Shared by both layouts
+// so every modal is reachable on mobile too.
+function ModalOverlays(props: ContentBrowserProps) {
+  return (
+    <>
+      <ApplyModalOverlay {...props} />
+      {props.protectedBranch ? (
+        <ProtectedBranchModal
+          branch={props.protectedBranch}
+          documentLabel={props.protectedBranchDocument}
+          suggestedName={props.protectedBranchSuggestedName}
+          busy={props.creatingProtectedBranch}
+          error={props.protectedBranchError}
+          onCreate={props.onCreateBranchAndSave ?? (() => {})}
+          onCancel={props.onCancelProtectedSave ?? (() => {})}
+        />
+      ) : null}
+    </>
+  );
+}
+
 function ApplyModalOverlay(props: ContentBrowserProps) {
   if (!props.applyOpen) return null;
   return (
@@ -3599,6 +3799,10 @@ function DesktopBrowser(props: ContentBrowserProps) {
   const mediaShowing = isMediaNavKey(activeNavKey);
   const mediaSet = parseMediaNavKey(activeNavKey);
   const mediaSets = props.media?.sets ?? [];
+  // Forms occupy their own prefixed nav-key space, mirroring media's — a
+  // collection name cannot contain a colon, so neither can collide.
+  const formsShowing = isFormsNavKey(activeNavKey);
+  const activeForm = parseFormsNavKey(activeNavKey);
   // "Browsing" mode (collection-driven): nothing auto-selected, empty states shown.
   const browsing = entriesEmpty !== undefined;
   // Controlled selection: when the host wired onSelectEntry, selection lives in
@@ -3923,6 +4127,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
         <EntryDetail
           entry={col.entry}
           documentActions={props.documentActions}
+          history={props.history}
           onEntryDraft={props.onEntryDraft}
           renderField={renderField}
           onSaveEntry={props.onSaveEntry}
@@ -4052,7 +4257,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
   const readOnlyBanner = (
     <ReadOnlyBanner notice={props.readOnlyNotice} actionLabel={props.readOnlyNoticeActionLabel} onAction={props.onReadOnlyNoticeAction} />
   );
-  const applyModal = <ApplyModalOverlay {...props} />;
+  const modalOverlays = <ModalOverlays {...props} />;
 
   // The changes surface reuses the same three-pane model as Edit, so switching
   // between them doesn't relayout the screen — only what each pane contains
@@ -4105,7 +4310,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           conflicts={props.selectedConflicts}
           onResolveConflict={props.onResolveConflict}
         />
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4120,7 +4325,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
         <Pane flex={1} testID="pane-plugin" scroll={false}>
           {props.contentSlot}
         </Pane>
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4129,6 +4334,60 @@ function DesktopBrowser(props: ContentBrowserProps) {
   // lists the media sets exactly where a collection's documents would be, and the
   // details pane holds the browser for whichever set is selected. Selecting a set
   // goes through onSelectNav, so it lands in the URL like any other selection.
+  // Forms enter through the same content column every other surface uses: the
+  // list of forms sits exactly where a collection's documents would, at the
+  // list width, with the empty state beside it. A list of half a dozen rows
+  // stretched across everything after the sidebar reads as a different kind of
+  // screen than Edit, Changes and Media, when it is the same kind of screen.
+  //
+  // Opening a form is where forms stop fitting the three-pane model, and so it
+  // is where they leave it: that surface is two more levels deep (submissions →
+  // one submission), and threading those through panes meant for collection →
+  // document → editor would give a pane whose meaning changes with the level.
+  // FormsBrowser owns its own split from there.
+  if (formsShowing && props.forms) {
+    if (!activeForm) {
+      return (
+        <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
+          {navPane}
+          <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
+
+          <Pane width={listW} testID="pane-forms" scroll={false} header={<PaneTitle title="Forms" />}>
+            <FormsBrowser
+              api={props.forms}
+              form={null}
+              onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
+              variant="desktop"
+            />
+          </Pane>
+          <ResizeHandle width={listW} min={260} max={640} onChange={setListW} testID="resize-forms" />
+
+          <View style={{ flex: 1, alignItems: "center", justifyContent: "center", padding: t.space(6) }}>
+            <Text variant="body" color="tertiary" testID="forms-empty">Select a form</Text>
+          </View>
+          {modalOverlays}
+        </AppShell>
+      );
+    }
+    return (
+      <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
+        {navPane}
+        <ResizeHandle width={navW} min={180} max={420} onChange={setNavW} testID="resize-nav" />
+        <Pane flex={1} testID="pane-forms" scroll={false}>
+          <FormsBrowser
+            api={props.forms}
+            form={activeForm}
+            onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
+            selectedId={props.selectedSubmissionId ?? null}
+            onSelectSubmission={props.onSelectSubmission}
+            variant="desktop"
+          />
+        </Pane>
+        {modalOverlays}
+      </AppShell>
+    );
+  }
+
   if (mediaShowing) {
     return (
       <AppShell testID="desktop-shell" topBar={topBar} banner={readOnlyBanner}>
@@ -4151,7 +4410,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
             <Text variant="body" color="tertiary" testID="media-sets-empty">Select a media collection</Text>
           </View>
         )}
-        {applyModal}
+        {modalOverlays}
       </AppShell>
     );
   }
@@ -4352,7 +4611,7 @@ function DesktopBrowser(props: ContentBrowserProps) {
           onClose={() => setMovePrompt(false)}
         />
       ) : null}
-      {applyModal}
+      {modalOverlays}
     </AppShell>
   );
 }
@@ -4428,7 +4687,7 @@ function MobileBrowser(props: ContentBrowserProps) {
   const readOnlyBanner = (
     <ReadOnlyBanner notice={props.readOnlyNotice} actionLabel={props.readOnlyNoticeActionLabel} onAction={props.onReadOnlyNoticeAction} />
   );
-  const applyModal = <ApplyModalOverlay {...props} />;
+  const modalOverlays = <ModalOverlays {...props} />;
 
   // Media drills the same way a collection does — nav → list → detail — so the
   // back arrow means the same thing at every level. Pressing Media lists the
@@ -4436,6 +4695,8 @@ function MobileBrowser(props: ContentBrowserProps) {
   const mediaShowing = isMediaNavKey(activeNavKey);
   const mediaSet = parseMediaNavKey(activeNavKey);
   const mediaSets = props.media?.sets ?? [];
+  const formsShowing = isFormsNavKey(activeNavKey);
+  const activeForm = parseFormsNavKey(activeNavKey);
   // A plugin screen renders as its own drilled-in screen; Back returns to the
   // nav list like any other selection.
   if (props.contentSlot != null) {
@@ -4455,6 +4716,40 @@ function MobileBrowser(props: ContentBrowserProps) {
       </MobileScreen>
     );
   }
+  if (formsShowing && props.forms) {
+    return (
+      <MobileScreen
+        testID="mobile-forms"
+        header={
+          <>
+            {/* Back steps up one level, not out to the nav — the same rule the
+                media and collection screens follow. */}
+            <IconButton
+              name="chevronLeft"
+              onPress={() => (activeForm ? onSelectNav(FORMS_NAV_KEY) : backToNav())}
+              size="md"
+              label="Back"
+            />
+            <Text variant="body" weight="semibold" style={{ flex: 1 }}>
+              {activeForm
+                ? props.forms.forms.find((f) => f.name === activeForm)?.label || activeForm
+                : "Forms"}
+            </Text>
+          </>
+        }
+      >
+        <FormsBrowser
+          api={props.forms}
+          form={activeForm}
+          onSelectForm={(name) => onSelectNav(name ? formsNavKey(name) : FORMS_NAV_KEY)}
+          selectedId={props.selectedSubmissionId ?? null}
+          onSelectSubmission={props.onSelectSubmission}
+          variant="mobile"
+        />
+      </MobileScreen>
+    );
+  }
+
   if (mediaShowing) {
     if (!mediaSet) {
       return (
@@ -4518,7 +4813,7 @@ function MobileBrowser(props: ContentBrowserProps) {
         testID="mobile-shell"
         header={header}
         title={props.surface === "changes" ? "Changes" : "Content"}
-        overlay={applyModal}
+        overlay={modalOverlays}
       >
         {/* Edit / Changes surface toggle (fits its content) with the Apply button
             to its right on the changes surface. The read-only notice sits below. */}
@@ -4553,8 +4848,11 @@ function MobileBrowser(props: ContentBrowserProps) {
           </View>
         ) : null}
         {readOnlyBanner}
-        {sections.map((section) => (
-          <View key={section.title}>
+        {sections.map((section, i) => (
+          // Keyed with the index as a fallback: an untitled section renders its
+          // button without a heading, and there is more than one of those now
+          // (Media, Forms), so the title alone is not unique.
+          <View key={section.title || `section-${i}`}>
             <SectionLabel>{section.title}</SectionLabel>
             {section.items.map((item, i) => (
               <NavRow
@@ -4596,7 +4894,7 @@ function MobileBrowser(props: ContentBrowserProps) {
         testID="mobile-entries"
         scroll={false}
         banner={readOnlyBanner}
-        overlay={applyModal}
+        overlay={modalOverlays}
         header={
           search.open ? (
             <SearchHeaderBar search={search} showFilter={facetFields.length > 0} />
@@ -4677,7 +4975,7 @@ function MobileBrowser(props: ContentBrowserProps) {
     <MobileScreen
       testID="mobile-entry"
       banner={readOnlyBanner}
-      overlay={applyModal}
+      overlay={modalOverlays}
       header={
         <>
           <IconButton name="chevronLeft" onPress={backToEntries} size="md" label="Back" />
@@ -4705,6 +5003,7 @@ function MobileBrowser(props: ContentBrowserProps) {
         <EntryDetail
           entry={entry}
           documentActions={props.documentActions}
+          history={props.history}
           onEntryDraft={props.onEntryDraft}
           renderField={renderField}
           onSaveEntry={props.onSaveEntry}
@@ -4975,14 +5274,20 @@ function mediaSetLabel(sets: MediaSetInfo[], name: string): string {
   return set ? titleCaseWord(set.name) : titleCaseWord(name);
 }
 
-// PaneTitle is the content pane's heading, matching the entry list's header
-// height so the panes line up when switching between content and media.
+// PaneTitle is the content pane's heading for the surfaces with no controls
+// beside it — Changes, Media, Forms.
+//
+// Deliberately the same Text the collection header uses (`listHeader`), and
+// nothing else. Pane's header row already supplies the height, the horizontal
+// padding and the rule beneath, so the padded wrapper this used to add sat
+// inside that padding and pushed the title a step right of every collection's —
+// at `body` rather than `h3`, so it read a size smaller too. Switching between
+// Posts and Media moved the heading twice over.
 function PaneTitle({ title }: { title: string }) {
-  const t = useTheme();
   return (
-    <View style={{ paddingHorizontal: t.space(4), paddingVertical: t.space(3) }}>
-      <Text variant="body" weight="semibold">{title}</Text>
-    </View>
+    <Text variant="h3" weight="semibold" style={{ flex: 1 }}>
+      {title}
+    </Text>
   );
 }