@drawnagency/primitives 0.1.79 → 0.1.81

package/src/components/shell/EditorShell.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from "react";
+import { Fragment, Suspense, lazy, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from "react";
 
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -10,9 +10,13 @@ import type { SiteIndex, SiteConfig, Page } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
 import type { MediaManifest } from "../../media/types";
 import type { QueueItem } from "../../media/queue";
+// Sanctioned outside->inside import: document/ is a sealed subtree, but the
+// Document mode toggle wiring needs the patch shape it edits (mirrors the same
+// sanctioned import in schemas/site-config.ts and lib/pages.ts).
+import type { DocumentOptions } from "../../document/engine/settings";
 import { SiteConfigSchema, IndexSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
-import { EditorProvider, useEditorContext } from "./EditorContext";
+import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
 import { makeBlockMoveDispatch } from "./blockMoveDispatch";
 import { ROOT_CONTAINER_ID, resolveDropIndex } from "../../lib/block-dnd";
 import type { BlockMove } from "../../lib/block-move";
@@ -34,6 +38,17 @@ import { buildInsertMenuOptions, resolveInsertedContent } from "../../lib/insert
 
 ensureSectionsRegistered();
 import { BugReportFAB } from "./BugReportFAB";
+// Lazy boundary: the document editor/presentation overlays (and the whole
+// document engine they pull in) must not weigh /edit on sites that never use
+// document mode — they load only when a document-enabled page opens the overlay.
+// Named exports → adapt to the default-export shape React.lazy expects (mirrors
+// the ChatPanel lazy import convention in ChatWidget).
+const DocumentEditorOverlay = lazy(() =>
+  import("./DocumentEditorOverlay").then((m) => ({ default: m.DocumentEditorOverlay })),
+);
+const DocumentPresentOverlay = lazy(() =>
+  import("./DocumentPresentOverlay").then((m) => ({ default: m.DocumentPresentOverlay })),
+);
 import { SectionWrapper } from "../editor/SectionWrapper";
 import { SectionOrderingModal } from "../editor/SectionOrderingModal";
 import { MoveSectionModal } from "../editor/MoveSectionModal";
@@ -72,7 +87,7 @@ import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
   reorderSectionInPage,
-  setHomePage, setPageArchived, setPageFields, setPageAudience, deletePage, addPage, reorderPages,
+  setHomePage, setPageArchived, setPageFields, setPageAudience, setPageDocument, deletePage, addPage, reorderPages,
   moveSection as moveSectionReducer,
 } from "../../lib/pages";
 import { PagesContext } from "../shared/PagesContext";
@@ -187,6 +202,7 @@ export default function EditorShell({
   const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [showPagesModal, setShowPagesModal] = useState(false);
   const [showChatbotConfig, setShowChatbotConfig] = useState(false);
+  const [showDocumentEditor, setShowDocumentEditor] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
   // Surfaces useMediaPipeline's onUploadError (oversized/disallowed files,
@@ -208,6 +224,13 @@ export default function EditorShell({
   // takeover confirmation is pending for.
   const [remoteNotice, setRemoteNotice] = useState<string | null>(null);
   const [pendingTakeoverId, setPendingTakeoverId] = useState<string | null>(null);
+  // Lifted from EditorContext.historyState by HistoryWatcher (mirrors
+  // ViewBranchWatcher's setViewSections lift) — the shell body renders the
+  // EditorProvider, so it can't read historyState via useEditorContext directly.
+  // Drives the Document FAB gate below: history is presentation only, never
+  // editing (branch-preview already routes to DocumentPresentOverlay; this
+  // covers the separate historySelectEvent commit view).
+  const [historyActive, setHistoryActive] = useState(false);
 
   const siteIndexRef = useRef<SiteIndex>({ siteId, pages: [], sections: {} });
   // Ids of sections that exist on the remote (loaded from server, or persisted by
@@ -285,6 +308,26 @@ export default function EditorShell({
     return audiences.filter((a) => resolvedActivePage.access.includes(a.name));
   }, [resolvedActivePage, audiences]);
 
+  // The sections shown on the canvas when previewing the published ("live")
+  // branch — the SAME list computeDisplaySections renders for viewBranch "live".
+  // Only meaningful while viewSections !== null (branch view); the read-only
+  // document presentation overlay renders exactly these so it mirrors the canvas.
+  // (viewSections is set only for the live branch, so its non-null-ness IS the
+  // "branch view" signal at this level.)
+  const branchDisplaySections = useMemo(
+    () =>
+      viewSections && resolvedActivePage
+        ? computeDisplaySections({
+            isEditMode: false,
+            viewBranch: "live",
+            sections,
+            viewSections,
+            activePageSectionIds: resolvedActivePage.order,
+          })
+        : [],
+    [viewSections, resolvedActivePage, sections],
+  );
+
   const getPageHeadings = useCallback(
     (pageId: string) => {
       const page = pageById(siteIndex, pageId);
@@ -1218,6 +1261,11 @@ export default function EditorShell({
     persistence.markIndexDirty(); setLocalChangesExist(true);
   }, [persistence]);
 
+  const handleSetPageDocument = useCallback((id: string, patch: Partial<DocumentOptions>) => {
+    setSiteIndex((prev) => setPageDocument(prev, id, patch));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
   const handleSetPageAudience = useCallback((id: string, access: string[]) => {
     const { index: next, resetSectionIds } = setPageAudience(siteIndexRef.current, id, access);
     setSiteIndex(next);
@@ -1363,7 +1411,7 @@ export default function EditorShell({
       <ViewBranchWatcher
         setViewSections={setViewSections}
       />
-      <HistoryWatcher />
+      <HistoryWatcher onHistoryActiveChange={setHistoryActive} />
       <EditorModalProvider>
         <MediaLibraryContext.Provider value={{
           ...mediaPipeline.contextValue,
@@ -1408,6 +1456,59 @@ export default function EditorShell({
               the button would always 401 — hide it there. */}
           {!capabilities.passwordOnly && <BugReportFAB />}
 
+          {/* Document editor: opens the full-screen editing surface for the
+              active page when its document mode is enabled. Mirrors the viewer
+              document FAB's icon; sits above BugReportFAB (bottom-40 clears the
+              bottom-28 bug button + gap) so the two never collide.
+              !historyActive: history is presentation only, never editing — while
+              viewing a specific historical commit (historySelectEvent →
+              EditorContext.historyState, lifted here by HistoryWatcher since this
+              scope renders the provider and can't read the context directly),
+              hide the FAB so it can't open the draft editor over a history view. */}
+          {resolvedActivePage?.document?.enabled && !historyActive && (
+            <button
+              type="button"
+              onClick={() => setShowDocumentEditor(true)}
+              aria-label="Edit as document"
+              className="cursor-pointer fixed bottom-40 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+                <rect x="3" y="4" width="18" height="14" rx="2" />
+                <path d="M8 21h8" />
+              </svg>
+            </button>
+          )}
+          {showDocumentEditor && resolvedActivePage?.document?.enabled && (
+            <Suspense fallback={<DocumentOverlayFallback />}>
+              {/* Branch/history view (viewSections !== null → previewing the
+                  published branch): presentation only, never the editor. Drew's
+                  product decision — old versions are the record, and we have no
+                  way to edit them, so opening the editor over one would be a lie.
+                  The draft view (viewSections === null) still opens the real
+                  editor. NOTE: viewSections drives the "Published" branch preview
+                  only; the separate historySelectEvent commit view
+                  (EditorContext.historyState) is the OTHER read-only case — the
+                  historyActive-gated FAB above is what keeps this overlay from
+                  ever being opened onto it in the first place. */}
+              {viewSections !== null ? (
+                <DocumentPresentOverlay
+                  page={resolvedActivePage}
+                  sections={branchDisplaySections}
+                  manifest={mediaManifest}
+                  onClose={() => setShowDocumentEditor(false)}
+                />
+              ) : (
+                <DocumentEditorOverlay
+                  page={resolvedActivePage}
+                  sections={activeSections}
+                  manifest={mediaManifest}
+                  onUpdateDocument={(patch) => handleSetPageDocument(resolvedActivePage.id, patch)}
+                  onClose={() => setShowDocumentEditor(false)}
+                />
+              )}
+            </Suspense>
+          )}
+
           {/* Editor chat FAB: chat while editing, against the DRAFT chatbot
               config (tasks + prompt reflect unsaved changes; grounding is
               published content). Gated only on the platform switch — editors
@@ -1454,6 +1555,7 @@ export default function EditorShell({
               onSectionChange={onSectionChange}
               onAddSection={onAddSection}
               onDeleteSection={setPendingDeleteSectionId}
+              onDeleteSectionImmediate={performDeleteSection}
               onReorderSections={onReorderSections}
               onBlockMove={onBlockMove}
               onMoveSection={siteIndex.pages.length > 1 ? setMovingSectionId : undefined}
@@ -1588,6 +1690,7 @@ export default function EditorShell({
               onSetArchived={handleSetArchived}
               onSetFields={handleSetPageFields}
               onSetAudience={handleSetPageAudience}
+              onSetDocument={handleSetPageDocument}
               onConfirmDelete={handleDeletePage}
             />
           </EditorModal>
@@ -1664,8 +1767,16 @@ function ViewBranchWatcher({
   return null;
 }
 
-function HistoryWatcher() {
-  const { setHistoryState } = useEditorContext();
+function HistoryWatcher({
+  onHistoryActiveChange,
+}: {
+  // Lifts historyState's active/inactive status to the shell body (mirrors
+  // ViewBranchWatcher's setViewSections lift) — the body renders the
+  // EditorProvider this component reads from, so it can't call
+  // useEditorContext() itself to get at historyState.
+  onHistoryActiveChange?: (active: boolean) => void;
+}) {
+  const { historyState, setHistoryState } = useEditorContext();
 
   useEffect(() => {
     const unlisten = historySelectEvent.listen(async ({ sha, date }) => {
@@ -1690,9 +1801,25 @@ function HistoryWatcher() {
     return unlisten;
   }, [setHistoryState]);
 
+  useEffect(() => {
+    onHistoryActiveChange?.(historyState !== null);
+  }, [historyState, onHistoryActiveChange]);
+
   return null;
 }
 
+/** Resolve which historical page to show: explicit selection → the page the
+ *  editor is currently on (if it existed at that version) → home → first. */
+export function resolveHistoryPage(
+  historyState: NonNullable<HistoryState>,
+  historyPageId: string | null,
+  preferredPageId: string | null,
+) {
+  const pages = historyState.index.pages;
+  const byId = (id: string | null) => (id ? pages.find((p) => p.id === id) : undefined);
+  return byId(historyPageId) ?? byId(preferredPageId) ?? pages.find((p) => p.isHome) ?? pages[0];
+}
+
 function HistoryOrEditorContent({
   children,
   index,
@@ -1704,9 +1831,11 @@ function HistoryOrEditorContent({
   activeSections: LoadedSection[];
   activePageId: string | null;
 }) {
-  const { historyState } = useEditorContext();
+  const { historyState, historyPageId, setHistoryPageId } = useEditorContext();
   const wasInHistory = useRef(false);
 
+  const historyPage = historyState ? resolveHistoryPage(historyState, historyPageId, activePageId) : null;
+
   useEffect(() => {
     if (historyState) {
       wasInHistory.current = true;
@@ -1720,8 +1849,22 @@ function HistoryOrEditorContent({
     }
   }, [historyState, index, activeSections, activePageId]);
 
-  if (historyState) {
-    return <ViewRenderer sections={historyState.sections} />;
+  // Pin the auto-resolved page into context so the toolbar selector agrees,
+  // and keep the nav highlighting in sync with the page being viewed.
+  useEffect(() => {
+    if (!historyState || !historyPage) return;
+    if (!historyPageId) setHistoryPageId(historyPage.id);
+    siteNavChangeEvent.dispatch(
+      generateSiteNav({ index: historyState.index, activeSections: [], activePageId: historyPage.id, mode: "editor", audience: null }),
+    );
+  }, [historyState, historyPage?.id]);
+
+  if (historyState && historyPage) {
+    const position = new Map(historyPage.order.map((id, i) => [id, i]));
+    const pageSections = historyState.sections
+      .filter((s) => position.has(s.section.id))
+      .sort((a, b) => (position.get(a.section.id) ?? 0) - (position.get(b.section.id) ?? 0));
+    return <ViewRenderer sections={pageSections} />;
   }
   return <>{children}</>;
 }
@@ -1764,6 +1907,7 @@ function EditorContent({
   onSectionChange,
   onAddSection,
   onDeleteSection,
+  onDeleteSectionImmediate,
   onReorderSections,
   onBlockMove,
   onMoveSection,
@@ -1784,6 +1928,7 @@ function EditorContent({
   onSectionChange: (sectionId: string, content: SectionContent) => void;
   onAddSection: (insertIndex: number, selection: string) => void;
   onDeleteSection: (sectionId: string) => void;
+  onDeleteSectionImmediate: (sectionId: string) => void;
   onReorderSections: (fromIndex: number, toIndex: number) => void;
   onBlockMove: (move: BlockMove) => void;
   onMoveSection?: (sectionId: string) => void;
@@ -1978,6 +2123,9 @@ function EditorContent({
                     onChange={editingEnabled ? (newContent) => onSectionChange(section.id, newContent as SectionContent) : undefined}
                     isEditMode={isEditMode}
                     openModal={editingEnabled ? openModal : undefined}
+                    // Immediate (no confirm modal): used when a colors section's
+                    // last swatch is dragged out, auto-removing the empty section.
+                    onDelete={editingEnabled ? () => onDeleteSectionImmediate(section.id) : undefined}
                   />
                 </SectionWrapper>
               </SectionLayout>
@@ -2005,6 +2153,15 @@ function EditorContent({
   );
 }
 
+// Suspense fallback while the lazy document overlay chunk loads.
+function DocumentOverlayFallback() {
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-base" role="status" aria-live="polite">
+      <span className="text-sm text-base-contrast-light">Loading document editor…</span>
+    </div>
+  );
+}
+
 function GlobalModal() {
   const { modalState, closeModal } = useEditorModal();
 
@@ -2150,12 +2307,16 @@ function EditorToolbar({
   collabSelfId: string | null;
   collabStatus: CollabStatus;
 }) {
-  const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState } = useEditorContext();
+  const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState, historyPageId, setHistoryPageId } = useEditorContext();
 
   if (historyState) {
+    const page = resolveHistoryPage(historyState, historyPageId, null);
     return (
       <HistoryToolbar
         date={historyState.date}
+        pages={historyState.index.pages.map((p) => ({ id: p.id, title: p.title }))}
+        activePageId={page?.id ?? ""}
+        onPageChange={setHistoryPageId}
         onBackToCurrent={() => setHistoryState(null)}
         onRestore={onRestoreClick}
       />

package/src/components/shell/HistoryToolbar.tsx

@@ -1,13 +1,21 @@
 import { formatDateTime } from "../../lib/timestamp";
 import { Button } from "../shared/Button";
 
+interface HistoryPageOption {
+  id: string;
+  title: string;
+}
+
 interface HistoryToolbarProps {
   date: string;
+  pages: HistoryPageOption[];
+  activePageId: string;
+  onPageChange: (pageId: string) => void;
   onBackToCurrent: () => void;
   onRestore: () => void;
 }
 
-export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryToolbarProps) {
+export function HistoryToolbar({ date, pages, activePageId, onPageChange, onBackToCurrent, onRestore }: HistoryToolbarProps) {
   return (
     <div className="fixed top-0 right-0 left-0 z-50 border-b border-base-200 bg-base">
       <div className="mx-auto max-w-screen-xl grid grid-cols-3 items-center px-4 py-2">
@@ -16,10 +24,24 @@ export function HistoryToolbar({ date, onBackToCurrent, onRestore }: HistoryTool
             Back to current
           </Button>
         </div>
-        <div className="flex items-center justify-center">
+        <div className="flex items-center justify-center gap-2">
           <span className="text-xs font-medium text-base-contrast-light">
             Viewing {formatDateTime(date)}
           </span>
+          {pages.length > 1 && (
+            <select
+              value={activePageId}
+              onChange={(e) => onPageChange(e.target.value)}
+              className="rounded border border-base-200 bg-base px-1.5 py-0.5 text-xs font-medium text-base-contrast"
+              aria-label="Page at this version"
+            >
+              {pages.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.title}
+                </option>
+              ))}
+            </select>
+          )}
         </div>
         <div className="flex items-center justify-end">
           <Button variant="primary" size="sm" onClick={onRestore}>

package/src/document/components/DocCoverPage.tsx

@@ -0,0 +1,45 @@
+import type { DocCover } from "../engine/settings";
+import type { DocImage, DocMeta } from "../engine/types";
+import { DocPage } from "./DocPage";
+import type { DocHost } from "./DocSectionPage";
+import { Wordmark } from "./Wordmark";
+
+// Absorbs the harness's TitleCardLayout inline instead of wrapping it: the
+// portal-native cover has no client-logo slot (the harness only ever passed
+// null) and cover text is edited in the inspector, never on-canvas, so there
+// is no EditableText/deck-context machinery here — this always renders the
+// harness's non-editable, null-logo branch.
+export function DocCoverPage({
+  cover,
+  meta,
+  image,
+  host,
+}: {
+  cover: DocCover;
+  meta: DocMeta;
+  /** Resolved from source.images[cover.imageId] by the caller; null/undefined = solid cover. */
+  image?: DocImage | null;
+  host?: DocHost;
+}) {
+  return (
+    <DocPage meta={meta} bleed chrome={false}>
+      <div className="layout-titlecard" style={{ background: cover.bgColor }}>
+        <header className="layout-titlecard__masthead">
+          <Wordmark className="layout-titlecard__wordmark" />
+          <span className="layout-titlecard__rule" />
+        </header>
+        {image && host ? (
+          <div className="layout-titlecard__image">
+            <img src={host.imageSrc(image, host.variant)} alt={image.alt} />
+          </div>
+        ) : null}
+        <div className="layout-titlecard__lockup" style={{ color: cover.accentColor }}>
+          <h1 className="layout-titlecard__title">{cover.title}</h1>
+          <span className="layout-titlecard__titlerule" style={{ background: cover.accentColor }} />
+          <p className="layout-titlecard__label">{cover.label}</p>
+          <p className="layout-titlecard__date">{cover.date || meta.dateLabel}</p>
+        </div>
+      </div>
+    </DocPage>
+  );
+}

package/src/document/components/DocPage.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from "react";
+import type { DocMeta } from "../engine/types";
+import { Wordmark } from "./Wordmark";
+
+// Re-exported so index.ts's `export { DocPage, type DocMeta } from
+// "./components/DocPage"` has a local name — the single definition still
+// lives in engine/types.ts.
+export type { DocMeta };
+
+export function DocPage({
+  meta,
+  bleed = false,
+  chrome = true,
+  children,
+}: {
+  meta: DocMeta;
+  bleed?: boolean;
+  chrome?: boolean;
+  children: ReactNode;
+}) {
+  const crumb = [meta.client, meta.project, meta.dateLabel]
+    .map((s) => s.trim().toUpperCase())
+    .filter(Boolean)
+    .join(" :: ");
+
+  return (
+    <section className="deck-page">
+      {bleed ? <div className="deck-bleed">{children}</div> : null}
+      {chrome ? (
+        <header className="deck-chrome">
+          <span className="deck-crumb">{crumb}</span>
+          <div className="deck-wordmark-clip">
+            <Wordmark className="deck-wordmark" />
+          </div>
+        </header>
+      ) : null}
+      {!bleed ? <div className="deck-body">{children}</div> : null}
+    </section>
+  );
+}

package/src/document/components/DocRail.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import type { DerivedPage } from "../engine/paginate";
+import type { DocCover } from "../engine/settings";
+import type { DocImage, DocMeta } from "../engine/types";
+import { DocCoverPage } from "./DocCoverPage";
+import { DocSectionPage, type DocHost } from "./DocSectionPage";
+
+// 17in @96dpi = 1632px wide; thumbnails render the real page scaled to fill the
+// rail width at a locked 17:11 aspect ratio (mirrors the harness PageRail).
+const PAGE_W = 1632;
+const PAGE_H = 1056;
+
+export type RailEntry =
+  | { kind: "cover" }
+  | { kind: "page"; page: DerivedPage }
+  | { kind: "ghost"; chunkId: string; title: string; reason: "excluded" | "empty" };
+
+export function entryId(entry: RailEntry): string {
+  if (entry.kind === "cover") return "cover";
+  if (entry.kind === "page") return entry.page.id;
+  return `ghost:${entry.chunkId}`;
+}
+
+function ThumbButton({
+  id,
+  selectedId,
+  scale,
+  label,
+  indent,
+  onSelect,
+  children,
+}: {
+  id: string;
+  selectedId: string;
+  scale: number;
+  label: string;
+  indent?: boolean;
+  onSelect: (id: string) => void;
+  children: ReactNode;
+}) {
+  return (
+    <li className={indent ? "pl-4" : undefined}>
+      <button
+        type="button"
+        onClick={() => onSelect(id)}
+        className={`relative block w-full rounded border-2 bg-white ${
+          id === selectedId ? "border-teal-600" : "border-neutral-200 hover:border-neutral-300"
+        }`}
+      >
+        <span className="pointer-events-none block w-full overflow-hidden aspect-[17/11]">
+          <span
+            className="block origin-top-left"
+            style={{ transform: `scale(${scale})`, width: PAGE_W, height: PAGE_H }}
+          >
+            {children}
+          </span>
+        </span>
+        <span className="absolute bottom-0.5 left-1 max-w-[90%] truncate text-[10px] text-neutral-400">
+          {label}
+        </span>
+      </button>
+    </li>
+  );
+}
+
+export function DocRail({
+  entries,
+  selectedId,
+  meta,
+  cover,
+  coverImage,
+  host,
+  onSelect,
+  onCollapse,
+}: {
+  entries: RailEntry[];
+  selectedId: string;
+  meta: DocMeta;
+  cover: DocCover;
+  coverImage?: DocImage | null;
+  host: DocHost;
+  onSelect: (id: string) => void;
+  onCollapse: () => void;
+}) {
+  const listRef = useRef<HTMLOListElement>(null);
+  const [scale, setScale] = useState(0.11);
+  useEffect(() => {
+    const el = listRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const obs = new ResizeObserver(() => {
+      // content width = list width minus the button's 2px border on each side
+      const w = el.clientWidth - 4;
+      if (w > 0) setScale(w / PAGE_W);
+    });
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+
+  return (
+    <nav
+      data-testid="doc-rail"
+      className="flex w-52 shrink-0 flex-col overflow-y-auto border-r border-neutral-200 bg-neutral-50 p-3"
+    >
+      <button
+        type="button"
+        aria-label="Collapse page rail"
+        onClick={onCollapse}
+        className="mb-2 flex w-full items-center justify-between rounded px-2 py-1.5 text-sm font-medium text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
+      >
+        <span>Pages</span>
+        <span aria-hidden="true" className="text-lg leading-none">‹</span>
+      </button>
+      <ol ref={listRef} className="flex flex-col gap-2">
+        {entries.map((entry) => {
+          const id = entryId(entry);
+          if (entry.kind === "cover") {
+            return (
+              <ThumbButton key={id} id={id} selectedId={selectedId} scale={scale} label="Cover" onSelect={onSelect}>
+                <DocCoverPage cover={cover} meta={meta} image={coverImage} host={host} />
+              </ThumbButton>
+            );
+          }
+          if (entry.kind === "page") {
+            return (
+              <ThumbButton
+                key={id}
+                id={id}
+                selectedId={selectedId}
+                scale={scale}
+                label={entry.page.title}
+                indent={entry.page.cont}
+                onSelect={onSelect}
+              >
+                <DocSectionPage page={entry.page} meta={meta} host={host} />
+              </ThumbButton>
+            );
+          }
+          return (
+            <li key={id}>
+              <button
+                type="button"
+                onClick={() => onSelect(id)}
+                className={`flex w-full items-center justify-between gap-2 rounded border px-2 py-2 text-left text-xs ${
+                  id === selectedId
+                    ? "border-teal-600 bg-white"
+                    : "border-dashed border-neutral-300 bg-neutral-50 hover:border-neutral-400"
+                }`}
+              >
+                <span className="truncate text-neutral-400">{entry.title}</span>
+                <span className="shrink-0 rounded bg-neutral-200 px-1 text-[10px] uppercase tracking-wide text-neutral-500">
+                  {entry.reason}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}