@drawnagency/primitives 0.1.80 → 0.1.82

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,6 +10,10 @@ 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, type HistoryState } from "./EditorContext";
@@ -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
@@ -1589,6 +1690,7 @@ export default function EditorShell({
               onSetArchived={handleSetArchived}
               onSetFields={handleSetPageFields}
               onSetAudience={handleSetPageAudience}
+              onSetDocument={handleSetPageDocument}
               onConfirmDelete={handleDeletePage}
             />
           </EditorModal>
@@ -1665,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 }) => {
@@ -1691,6 +1801,10 @@ function HistoryWatcher() {
     return unlisten;
   }, [setHistoryState]);
 
+  useEffect(() => {
+    onHistoryActiveChange?.(historyState !== null);
+  }, [historyState, onHistoryActiveChange]);
+
   return null;
 }
 
@@ -2039,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();
 

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,164 @@
+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"; depth?: 1 };
+
+export function entryId(entry: RailEntry): string {
+  if (entry.kind === "cover") return "cover";
+  if (entry.kind === "page") return entry.page.id;
+  return `ghost:${entry.chunkId}`;
+}
+
+// Rail nesting: sub-pages sit one step in per depth, continuations one more.
+const INDENT = ["", "pl-4", "pl-8"];
+const indentClass = (level: number) => INDENT[Math.min(level, INDENT.length - 1)] || undefined;
+
+function ThumbButton({
+  id,
+  selectedId,
+  scale,
+  label,
+  indentLevel,
+  onSelect,
+  children,
+}: {
+  id: string;
+  selectedId: string;
+  scale: number;
+  label: string;
+  indentLevel?: number;
+  onSelect: (id: string) => void;
+  children: ReactNode;
+}) {
+  return (
+    <li className={indentClass(indentLevel ?? 0)}>
+      <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}
+                indentLevel={(entry.page.depth ?? 0) + (entry.page.cont ? 1 : 0)}
+                onSelect={onSelect}
+              >
+                <DocSectionPage page={entry.page} meta={meta} host={host} />
+              </ThumbButton>
+            );
+          }
+          return (
+            <li key={id} className={indentClass(entry.depth ?? 0)}>
+              <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>
+  );
+}

package/src/document/components/DocSectionPage.tsx

@@ -0,0 +1,48 @@
+import type { DocImage, DocMeta } from "../engine/types";
+import type { DerivedPage } from "../engine/paginate";
+import { DocPage } from "./DocPage";
+
+export interface DocHost {
+  imageSrc: (image: DocImage, variant: "preview" | "print") => string;
+  variant: "preview" | "print";
+}
+
+const inch = (v: number) => `${v}in`;
+
+export function DocSectionPage({ page, meta, host }: { page: DerivedPage; meta: DocMeta; host: DocHost }) {
+  return (
+    <DocPage meta={meta}>
+      <h2 className="pdoc-title">
+        {page.kicker ? <span className="pdoc-kicker" aria-hidden="true">{page.kicker}</span> : null}
+        {page.title}
+      </h2>
+      {page.textRegion ? (
+        <div
+          className="pdoc-text"
+          style={{ left: inch(page.textRegion.xIn), top: inch(page.textRegion.yIn), width: inch(page.textRegion.wIn) }}
+        >
+          {page.textBlocks.map((b, i) => {
+            const spacing = i > 0 ? { marginTop: inch(0.15) } : undefined;
+            if (b.kind === "heading") {
+              return b.level === 2 ? (
+                <h3 key={i} className="pdoc-h2" style={spacing}>{b.text}</h3>
+              ) : (
+                <h4 key={i} className="pdoc-h3" style={spacing}>{b.text}</h4>
+              );
+            }
+            return <div key={i} className="pdoc-prose" style={spacing} dangerouslySetInnerHTML={{ __html: b.html }} />;
+          })}
+        </div>
+      ) : null}
+      {page.imageBoxes.map((box, i) => (
+        <div
+          key={`${box.image.imageId}-${i}`}
+          className="pdoc-img"
+          style={{ left: inch(box.xIn), top: inch(box.yIn), width: inch(box.wIn), height: inch(box.hIn) }}
+        >
+          <img src={host.imageSrc(box.image, host.variant)} alt={box.image.alt} style={{ objectFit: box.fit }} />
+        </div>
+      ))}
+    </DocPage>
+  );
+}