@drawnagency/primitives 0.1.113 → 0.1.115

package/src/components/shell/EditorShell.tsx

@@ -1,4 +1,4 @@
-import { Fragment, Suspense, lazy, useState, useCallback, useEffect, useRef, useMemo, type ReactNode } from "react";
+import { Fragment, Suspense, lazy, useContext, 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";
@@ -23,7 +23,7 @@ import { SiteConfigSchema } from "../../schemas/site-config";
 import { ensureSanitizer } from "../../lib/sanitize";
 import { resolveChatbotName } from "../../lib/chatbot";
 import { EditorProvider, useEditorContext, type HistoryState } from "./EditorContext";
-import { makeBlockMoveDispatch } from "./blockMoveDispatch";
+import { makeBlockMoveDispatch } from "./block-move-dispatch";
 import { ROOT_CONTAINER_ID, resolveDropIndex } from "../../lib/block-dnd";
 import type { BlockMove } from "../../lib/block-move";
 import { EditorModalProvider, useEditorModal } from "./EditorModalContext";
@@ -36,7 +36,7 @@ import { ProcessingIndicator } from "./ProcessingIndicator";
 import { SectionSkeleton } from "./SectionSkeleton";
 import { SectionTypePicker } from "./SectionTypePicker";
 import { ensureSectionsRegistered } from "../sections/register";
-import { getSection, getAllSections, getSchema } from "../../lib/registry";
+import { getSection, getAllSections, getSchema, type SiteTagging } from "../../lib/registry";
 import { cornerRadiusValue } from "../../lib/corner-radius";
 import { primaryVarValue, accentVarValue, onPrimaryVarValue } from "../../lib/theme-vars";
 import { rebaseMediaManifest } from "../../lib/media-folders";
@@ -87,10 +87,14 @@ import { useContentLifecycle } from "../../hooks/useContentLifecycle";
 import { useBuildStatus } from "../../hooks/useBuildStatus";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
-import { generateSiteNav } from "../../lib/nav";
+import { generateSiteNav, summaryNavAnchors, pageReferenceCopies } from "../../lib/nav";
+import { expandReferences, type ReferenceContent } from "../../lib/references";
+import { REFERENCE_TYPE } from "../../lib/reference-type";
+import { referenceShowsInPreview } from "../sections/Reference/ReferenceList";
 import { deriveSiteDocuments, type SiteDocument } from "../../lib/documents";
 import { setSiteDocuments, closeDocFile } from "../docfile/doc-file-state";
-import { pagesInNavOrder, moveNavEntry, addGroup, renameGroup, setGroupStartCollapsed, deleteGroup, type NavLocation } from "../../lib/nav-tree";
+import { pagesInNavOrder, moveNavEntry, describeNavMove, addGroup, renameGroup, setGroupStartCollapsed, deleteGroup, type NavLocation } from "../../lib/nav-tree";
+import { siteTags, addTag, renameTag, deleteTag, setSectionTagged, findTagByLabel } from "../../lib/tags";
 import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent, audienceDetailsEvent } from "../../lib/events";
 import { AudienceDetailsPanel, type AudienceDetail } from "./AudienceDetailsPanel";
 import { buildAudienceOverview, type SectionDisplay } from "../../lib/audience-overview";
@@ -103,18 +107,28 @@ import {
   moveSection as moveSectionReducer,
 } from "../../lib/pages";
 import { PagesContext } from "../shared/PagesContext";
+import { ReferenceSourcesContext, type ReferenceSources } from "../shared/ReferenceSourcesContext";
+import { publishedReferenceSources } from "./reference-sources";
+import { BrandSwatchesContext } from "../shared/BrandSwatchesContext";
+import { collectBrandSwatches } from "../../lib/brand-swatches";
+import { SummaryAnchorsContext } from "../shared/SummaryAnchorsContext";
 import { PagesModal } from "../editor/PagesModal";
 import { cn } from "../../lib/cn";
-import { UploadRejectionAlert, formatRejections } from "../shared/UploadRejectionAlert";
+import { InlineAlert, formatRejections } from "../shared/InlineAlert";
+import { Notice } from "../shared/Notice";
+import { ConfirmDialog } from "../shared/ConfirmDialog";
+import type { NoticeState } from "../../hooks/useNotice";
+import { useNotice } from "../../hooks/useNotice";
 import { Button } from "../shared/Button";
 import { SplitButton } from "../shared/SplitButton";
+import { ToolbarFrame } from "../shared/ToolbarFrame";
 import { IconButton } from "../shared/IconButton";
 import Fab from "../shared/Fab";
+import { FabStack } from "../shared/FabStack";
 import { Tooltip } from "../shared/Tooltip";
 import { SegmentedControl } from "../shared/SegmentedControl";
 import { computeDisplaySections } from "./view-branch";
-import { SettingsIcon } from "../shared/icons";
-import { ImageIcon, ListOrderedIcon, FilesIcon, JoystickIcon, X } from "lucide-react";
+import { ImageIcon, ListOrderedIcon, FilesIcon, JoystickIcon, Settings, X, FileText, Presentation, Eye, Pencil } from "lucide-react";
 import { ErrorBoundary } from "../shared/ErrorBoundary";
 import { HistoryToolbar } from "./HistoryToolbar";
 import { RestoreModal } from "./RestoreModal";
@@ -149,6 +163,9 @@ interface SavedContent {
    *  Their bodies are absent from `sections` while their index slots survive —
    *  the editor must surface them, not silently render around them. */
   unparseableSectionIds: string[];
+  /** tags.json held entries this version couldn't represent: tags are
+   *  read-only this session (the loader's tagsDegraded contract). */
+  tagsDegraded: boolean;
 }
 
 interface Props {
@@ -241,6 +258,14 @@ export default function EditorShell({
   const deletedSectionsRef = useRef<Set<string>>(deletedSections);
   useEffect(() => { deletedSectionsRef.current = deletedSections; }, [deletedSections]);
   const [pendingDeleteSectionId, setPendingDeleteSectionId] = useState<string | null>(null);
+  // One shared aria-live region for every reorder — sections (via
+  // onReorderSections, the dispatch point shared by SectionOrderingModal's
+  // drag and SectionWrapper's Move up/down) and pages/groups (via
+  // handleMoveNavEntry, shared the same way by PagesModal/NavGroupRow's drag
+  // and their own Move up/down). The section canvas's own per-block drag
+  // (onBlockMove) is a separate, unlisted reorder surface and does not
+  // announce here.
+  const [reorderAnnouncement, setReorderAnnouncement] = useState("");
   const [savedSha, setSavedSha] = useState<string | null>(null);
   const [mainSha, setMainSha] = useState<string | null>(null);
   // Mirror savedSha into a ref so the save handler reads the latest draft
@@ -259,6 +284,13 @@ export default function EditorShell({
   const mainIndexRef = useRef<SiteIndex | null>(null);
   useEffect(() => { mainIndexRef.current = mainIndex; }, [mainIndex]);
   const [viewSections, setViewSections] = useState<LoadedSection[] | null>(null);
+  // The fetched main index that goes with viewSections — References resolve
+  // against it in the Published preview, exactly as the viewer does.
+  const [viewIndex, setViewIndex] = useState<SiteIndex | null>(null);
+  const setView = useCallback((view: { sections: LoadedSection[]; index: SiteIndex | null } | null) => {
+    setViewSections(view?.sections ?? null);
+    setViewIndex(view?.index ?? null);
+  }, []);
   const [showRestoreModal, setShowRestoreModal] = useState(false);
   const [showOrderingModal, setShowOrderingModal] = useState(false);
   const [showPagesModal, setShowPagesModal] = useState(false);
@@ -278,6 +310,7 @@ export default function EditorShell({
   // — surfaced as a persistent banner so a "missing" section isn't mistaken for
   // a deleted one and repaired by data loss.
   const [unparseableSectionIds, setUnparseableSectionIds] = useState<string[]>([]);
+  const [tagsDegraded, setTagsDegraded] = useState(false);
   // Non-fatal warnings from the last successful save (e.g. nav.json replacement
   // declined by the degraded-nav guard) — without a surface, the save reads as
   // fully landed when part of it was refused.
@@ -299,15 +332,8 @@ export default function EditorShell({
   >(null);
   // Collaboration: transient toast ("Drew took over Hero …") and the section a
   // takeover confirmation is pending for.
-  const [remoteNotice, setRemoteNotice] = useState<string | null>(null);
+  const { notice: remoteNotice, show: showCollabNotice } = useNotice();
   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
@@ -352,8 +378,6 @@ export default function EditorShell({
   // Mirror of the live collab session, read by handlers/callbacks defined before
   // useCollabSession is instantiated (breaks the definition-order cycle).
   const collabRef = useRef<UseCollabSessionResult | null>(null);
-  const noticeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => () => { if (noticeTimerRef.current) clearTimeout(noticeTimerRef.current); }, []);
   // Per-section memoized onEditIntent closures — SectionWrapper re-binds its
   // focus listeners whenever onEditIntent's identity changes, so each section
   // must get a STABLE function instance across renders.
@@ -363,12 +387,14 @@ export default function EditorShell({
   // one's lock is released if it carries no unsaved work.
   const focusedSectionIdRef = useRef<string | null>(null);
 
-  // Transient collaboration toast (single slot, 8s auto-dismiss).
-  const showRemoteNotice = useCallback((text: string) => {
-    setRemoteNotice(text);
-    if (noticeTimerRef.current) clearTimeout(noticeTimerRef.current);
-    noticeTimerRef.current = setTimeout(() => setRemoteNotice(null), 8000);
-  }, []);
+  // Transient collaboration toast (single slot, 8s auto-dismiss unless
+  // `tone` is "error", which useNotice leaves sticky — a load failure needs a
+  // deliberate dismiss, not an 8s countdown). Its own useNotice instance —
+  // must stay independent of toolbar publishFeedback, which can be visible at
+  // the same time.
+  const showRemoteNotice = useCallback((text: string, tone: NoticeState["tone"] = "info") => {
+    showCollabNotice(tone, text, tone === "error" ? undefined : { ttlMs: 8000 });
+  }, [showCollabNotice]);
 
   // Broadcast piggyback: after a debounced flush, forward held-lock section
   // edits + index changes to peers. Only sections THIS editor holds are
@@ -401,6 +427,19 @@ export default function EditorShell({
     return resolvedActivePage.order.map((id) => sectionsById[id]).filter((s): s is LoadedSection => !!s);
   }, [resolvedActivePage, sectionsById]);
 
+  // The page as its nav sees it: each Reference replaced by the copies it
+  // would publish, so their headings join the sidebar as on the viewer. The
+  // canvas renders those copies from referenceCopies, stamped over the same
+  // list, so every sidebar link lands on a rendered id.
+  const navSections = useMemo(
+    () => expandReferences(activeSections, { index: siteIndex, allSections: sections, audience: null }),
+    [activeSections, siteIndex, sections],
+  );
+  const referenceCopies = useMemo(
+    () => pageReferenceCopies(activeSections, { index: siteIndex, allSections: sections }),
+    [activeSections, siteIndex, sections],
+  );
+
   // Same model the /audiences route builds server-side, from the shell's own
   // live state — so an editor sees their SAVED draft's access, not the published
   // snapshot the route would show.
@@ -487,6 +526,8 @@ export default function EditorShell({
     [siteIndex.pages, getPageHeadings],
   );
 
+  const brandSwatches = useMemo(() => collectBrandSwatches(sections.map((s) => s.section)), [sections]);
+
   const mediaPipeline = useMediaPipeline({
     siteConfig,
     mediaManifest,
@@ -513,7 +554,7 @@ export default function EditorShell({
   // draft head the same way.
   const fetchSavedContent = useCallback(async (): Promise<SavedContent> => {
     const response = await fetch("/api/content?branch=saved");
-    if (!response.ok) throw new Error(`Failed to load content: ${response.status}`);
+    if (!response.ok) throw new Error(`Couldn't load content: ${response.status}`);
     const data = await response.json();
     return {
       sha: data.sha,
@@ -526,6 +567,7 @@ export default function EditorShell({
       mediaManifest: data.mediaManifest as MediaManifest | undefined,
       documentManifest: data.documentManifest as DocumentManifest | undefined,
       unparseableSectionIds: (data.unparseableSectionIds ?? []) as string[],
+      tagsDegraded: data.tagsDegraded === true,
     };
   }, []);
 
@@ -539,6 +581,7 @@ export default function EditorShell({
     try {
       const remote = await fetchSavedContent();
       setUnparseableSectionIds(remote.unparseableSectionIds);
+      setTagsDegraded(remote.tagsDegraded);
       const dirtyRows = await getDirtySectionRows();
       const dirtyIds = new Set(dirtyRows.map((r) => r.sectionId));
 
@@ -646,6 +689,7 @@ export default function EditorShell({
           media: remote.mediaManifest ?? mediaManifestRef.current,
           documents: remote.documentManifest ?? documentManifestRef.current ?? {},
         },
+        remote.tagsDegraded,
         {
           savedBranchSha: remote.savedBranchSha,
           changedSectionIds: remote.changedSectionIds,
@@ -732,6 +776,7 @@ export default function EditorShell({
       }
       setSections(result.sections);
       setSiteIndex(result.index);
+      setTagsDegraded(remote.tagsDegraded);
       setSavedSha(remote.savedBranchSha);
       setChangedSectionIds(new Set(remote.changedSectionIds));
       setMainIndex(remote.mainIndex);
@@ -757,6 +802,7 @@ export default function EditorShell({
           media: remote.mediaManifest ?? mediaManifestRef.current,
           documents: remote.documentManifest ?? documentManifestRef.current ?? {},
         },
+        remote.tagsDegraded,
         {
           savedBranchSha: remote.savedBranchSha,
           changedSectionIds: remote.changedSectionIds,
@@ -914,6 +960,7 @@ export default function EditorShell({
     clearConfigDirty: persistence.clearConfigDirty,
     siteIndexRef,
     siteConfig,
+    tagsDegraded,
     sections,
     deletedSectionIds: Array.from(deletedSections),
     onSaveWarnings: setSaveWarnings,
@@ -1026,6 +1073,7 @@ export default function EditorShell({
         // onMediaPublished / onDocumentsPublished callbacks only refresh through a
         // state effect and can still lag by a render at this point.
         { media: committedManifest, documents: committedDocumentManifest },
+        tagsDegraded,
         {
           savedBranchSha: sha,
           changedSectionIds: [...changed],
@@ -1085,7 +1133,7 @@ export default function EditorShell({
   useEffect(() => {
     if (!resolvedActivePage) return;
     const nav = generateSiteNav({
-      index: siteIndex, activeSections,
+      index: siteIndex, activeSections: navSections,
       // The Audience Details surface is not a page: clearing the active id drops
       // the previous page's highlight (and its heading tree), so the sidebar
       // never shows you in two places at once.
@@ -1094,7 +1142,7 @@ export default function EditorShell({
       documents: siteDocuments ?? [],
     });
     siteNavChangeEvent.dispatch(nav);
-  }, [siteIndex, activeSections, resolvedActivePage, siteDocuments, showAudienceDetails]);
+  }, [siteIndex, navSections, resolvedActivePage, siteDocuments, showAudienceDetails]);
 
   const goToPage = useCallback((pageId: string) => {
     const page = pageById(siteIndexRef.current, pageId);
@@ -1112,6 +1160,30 @@ export default function EditorShell({
 
   // Nav island → shell page selection.
   useEffect(() => pageSelectEvent.listen((id) => { setShowAudienceDetails(false); goToPage(id); }), [goToPage]);
+
+  // A Reference's "Edit source": open the source's page, then scroll to it once
+  // that page's sections have rendered.
+  const [scrollToSectionId, setScrollToSectionId] = useState<string | null>(null);
+  const jumpToSection = useCallback((sectionId: string) => {
+    const page = siteIndexRef.current.pages.find((p) => p.order.includes(sectionId));
+    if (!page) return;
+    pageSelectEvent.dispatch(page.id);
+    setScrollToSectionId(sectionId);
+  }, []);
+  // One attempt, cleared either way: a section the canvas isn't showing (a
+  // draft in the published preview) must not leave a scroll armed for later.
+  useEffect(() => {
+    if (!scrollToSectionId) return;
+    document.querySelector(`[data-section-id="${CSS.escape(scrollToSectionId)}"]`)
+      ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    setScrollToSectionId(null);
+  }, [scrollToSectionId, activeSections]);
+
+  const referenceSources = useMemo<ReferenceSources>(() => publishedReferenceSources({
+    viewSections, viewIndex, mainIndex, activePageId: resolvedActivePage?.id ?? null, audiences, mediaManifest, jumpToSection,
+  }) ?? { index: siteIndex, sections, audiences, mediaManifest, copies: referenceCopies, jumpToSection },
+  [viewSections, viewIndex, mainIndex, resolvedActivePage, siteIndex, sections, audiences, mediaManifest, referenceCopies, jumpToSection]);
+
   useEffect(() => audienceDetailsEvent.listen(() => setShowAudienceDetails(true)), []);
 
   // Fetched on open rather than at mount: most editing sessions never look at
@@ -1254,6 +1326,7 @@ export default function EditorShell({
         await cacheContent(
           data.sha, data.sections, data.index, data.siteConfig,
           { media: loadedManifest, documents: data.documentManifest ?? {} },
+          data.tagsDegraded,
           {
             savedBranchSha: data.savedBranchSha,
             changedSectionIds: data.changedSectionIds,
@@ -1269,6 +1342,7 @@ export default function EditorShell({
         setChangedSectionIds(new Set(data.changedSectionIds));
         setMainIndex(data.mainIndex);
         setUnparseableSectionIds(data.unparseableSectionIds);
+        setTagsDegraded(data.tagsDegraded);
       }
 
       if (cancelled) return;
@@ -1321,7 +1395,7 @@ export default function EditorShell({
 
     loadContent().catch((err) => {
       console.error("Failed to load editor content:", err);
-      setShellState({ phase: "error", message: err instanceof Error ? err.message : "Failed to load content" });
+      setShellState({ phase: "error", message: err instanceof Error ? err.message : "Couldn't load content" });
     });
     return () => { cancelled = true; };
   }, [headSha, draftHeadSha, siteId, applySiteConfigPreview, fetchSavedContent]);
@@ -1354,7 +1428,12 @@ export default function EditorShell({
           return null;
         }).filter((s): s is LoadedSection => s !== null),
       );
-      setSiteIndex(restoredIndex);
+      // A row written before tags shipped carries none, and that build could
+      // not have edited them — keep the freshly fetched registry rather than
+      // installing an index that reads as "tags never loaded".
+      setSiteIndex(restoredIndex.tags === undefined && siteIndexRef.current.tags !== undefined
+        ? { ...restoredIndex, tags: siteIndexRef.current.tags }
+        : restoredIndex);
       // Pending deletions come from the snapshot's own persisted intent, and are
       // intersected with what the branch still has so an already-applied deletion
       // can't be replayed.
@@ -1470,6 +1549,11 @@ export default function EditorShell({
   );
 
   const handleDiscard = useCallback(async () => {
+    // Drop Site Settings' debounced config write too, or its trailing edge
+    // would write the discarded config back into Dexie.
+    if (configFlushTimerRef.current) { clearTimeout(configFlushTimerRef.current); configFlushTimerRef.current = null; }
+    pendingConfigRef.current = null;
+    await persistence.discardPending();
     await discardLocalChanges();
     setLocalChangesExist(false);
     setDirtySectionIds(new Set());
@@ -1614,6 +1698,9 @@ export default function EditorShell({
       setSiteIndex((prev) => reorderVisibleSectionInPage(prev, resolvedActivePage.id, visibleIds, fromIndex, toIndex));
       persistence.markIndexDirty();
       setLocalChangesExist(true);
+      const movedType = activeSections[fromIndex]?.section.type;
+      const label = (movedType && getSection(movedType)?.label) || "Section";
+      setReorderAnnouncement(`Moved ${label} to position ${toIndex + 1} of ${visibleIds.length}`);
     },
     [persistence, resolvedActivePage, activeSections],
   );
@@ -1655,8 +1742,16 @@ export default function EditorShell({
   }, [persistence]);
 
   const handleMoveNavEntry = useCallback((from: NavLocation, to: NavLocation) => {
-    setSiteIndex((prev) => moveNavEntry(prev, from, to));
+    // Read the pre-move index from the ref (mirrors onBlockMove's getState
+    // pattern) rather than the updater's `prev`, so describeNavMove can
+    // resolve `from`'s label/kind against the SAME snapshot moveNavEntry acts
+    // on, and the two calls can't observe different states.
+    const prevIndex = siteIndexRef.current;
+    const nextIndex = moveNavEntry(prevIndex, from, to);
+    setSiteIndex(() => nextIndex);
     persistence.markIndexDirty(); setLocalChangesExist(true);
+    const message = describeNavMove(prevIndex, nextIndex, from);
+    if (message) setReorderAnnouncement(message);
   }, [persistence]);
 
   const handleAddGroup = useCallback(() => {
@@ -1682,6 +1777,48 @@ export default function EditorShell({
     persistence.markIndexDirty(); setLocalChangesExist(true);
   }, [persistence]);
 
+  // Section tags: the same index-state edit + markIndexDirty as the nav group
+  // handlers above. Every save then carries the runtime `tags`, which
+  // content-ops writes to the tags.json sidecar.
+  const handleCreateTag = useCallback((label: string, sectionId?: string) => {
+    const id = typeof crypto !== "undefined" && crypto.randomUUID ? `tag_${crypto.randomUUID()}` : `tag_${Date.now()}`;
+    setSiteIndex((prev) => {
+      // Typing an existing tag's name reuses it rather than minting a twin.
+      const existing = findTagByLabel(siteTags(prev), label);
+      if (existing) return sectionId ? setSectionTagged(prev, sectionId, existing.id, true) : prev;
+      return addTag(prev, id, label, sectionId);
+    });
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleRenameTag = useCallback((tagId: string, label: string) => {
+    setSiteIndex((prev) => renameTag(prev, tagId, label));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleDeleteTag = useCallback((tagId: string) => {
+    setSiteIndex((prev) => deleteTag(prev, tagId));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const handleSectionTagToggle = useCallback((sectionId: string, tagId: string, tagged: boolean) => {
+    setSiteIndex((prev) => setSectionTagged(prev, sectionId, tagId, tagged));
+    persistence.markIndexDirty(); setLocalChangesExist(true);
+  }, [persistence]);
+
+  const tags = useMemo(() => siteTags(siteIndex), [siteIndex]);
+  // Absent `tags` means the registry was never loaded (a Dexie row or cache
+  // entry from a build that predates tags) — NOT an empty registry. Editing it
+  // would post `tags: [new]` and wholesale-replace the real tags.json, so
+  // every tag edit is off until a load that read the sidecar. A degraded read
+  // (tags.json held entries this version couldn't parse) is the same hazard:
+  // saving would drop the entries it skipped.
+  const tagsEditable = siteIndex.tags !== undefined && !tagsDegraded;
+  const tagging = useMemo<SiteTagging>(() => ({
+    tags, editable: tagsEditable,
+    onCreate: handleCreateTag, onRename: handleRenameTag, onDelete: handleDeleteTag, onToggle: handleSectionTagToggle,
+  }), [tags, tagsEditable, handleCreateTag, handleRenameTag, handleDeleteTag, handleSectionTagToggle]);
+
   const handleSetHome = useCallback((id: string) => {
     setSiteIndex((prev) => setHomePage(prev, id));
     persistence.markIndexDirty(); setLocalChangesExist(true);
@@ -1902,7 +2039,7 @@ export default function EditorShell({
     return historyRestoreEvent.listen(async ({ sha }) => {
       try {
         const res = await fetch(`/api/content/history?sha=${sha}`);
-        if (!res.ok) throw new Error(`Failed to load version: ${res.status}`);
+        if (!res.ok) throw new Error(`Couldn't load version: ${res.status}`);
         const data = await res.json();
         const ok = await handleHistoryRestore({
           sections: data.sections,
@@ -1933,7 +2070,7 @@ export default function EditorShell({
     return (
       <div className="flex min-h-[50vh] items-center justify-center">
         <div className="text-center">
-          <p className="text-sm text-red-600">{shellState.message}</p>
+          <p className="text-sm text-danger">{shellState.message}</p>
           <Button variant="secondary" size="md" className="mt-3" onClick={() => window.location.reload()}>
             Retry
           </Button>
@@ -1963,15 +2100,21 @@ export default function EditorShell({
 
   return (
     <PagesContext.Provider value={pagesContextValue}>
+    <ReferenceSourcesContext.Provider value={referenceSources}>
+    <BrandSwatchesContext.Provider value={brandSwatches}>
     <EditorProvider>
       <ViewBranchWatcher
-        setViewSections={setViewSections}
-        onError={setRemoteNotice}
+        setView={setView}
+        onError={showRemoteNotice}
       />
-      <HistoryWatcher onHistoryActiveChange={setHistoryActive} />
+      <HistoryWatcher />
       <EditorModalProvider>
         <MediaLibraryContext.Provider value={mediaLibraryValue}>
         <div className="editor-shell relative">
+          {/* Announces every section/page/group reorder — from drag or the
+              Move up/down buttons — since neither leaves a visible confirmation
+              a screen reader user would otherwise get. */}
+          <p aria-live="polite" className="sr-only">{reorderAnnouncement}</p>
           <EditorToolbar
             buttonState={buttonState}
             localChangesExist={localChangesExist}
@@ -2000,42 +2143,22 @@ export default function EditorShell({
             audiences={audiences}
             authoringDefaults={authoringDefaults}
             onAuthoringDefaultsChange={onAuthoringDefaultsChange}
+            docEditEnabled={Boolean(resolvedActivePage?.document?.enabled)}
+            onDocEditClick={() => setShowDocumentEditor(true)}
+            // Bug reports persist via Supabase. On the password-only
+            // (zero-Supabase) path there's no backend and the editor session
+            // has userId: null, so the button would always 401 — hide it there.
+            showBugReport={!capabilities.passwordOnly}
           />
 
-          {/* Bug reports persist via Supabase. On the password-only (zero-Supabase)
-              path there's no backend and the editor session has userId: null, so
-              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 && (
-            <Fab label="Edit as document" column="editor" className="bottom-40" onClick={() => setShowDocumentEditor(true)}>
-              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
-                <rect x="3" y="5" width="18" height="14" rx="1" />
-                <path d="M7 10h10" />
-                <path d="M7 14h7" />
-              </svg>
-            </Fab>
-          )}
           {/* Deck Builder (#34). Editors are super-admins over decks and are
               never gated by deckBuilder.audiences, so this is unconditional.
               An <a>, not a click handler: builder mode is its own route.
-              bottom-52 clears the bottom-40 document FAB + gap. Taking over the
+              Standalone (not in EditorToolbar's FabStack): bottom-60 clears
+              the stack's three members with room to spare. Taking over the
               editor top bar in place is #38 — this just goes there. */}
-          <Fab href="/decks?next=%2Fedit" label="Build a deck" column="editor" className="bottom-52">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
-              <rect x="3" y="4" width="18" height="12" rx="1" />
-              <path d="M12 16v4" />
-              <path d="M9 20h6" />
-            </svg>
+          <Fab href="/decks?next=%2Fedit" label="Build a deck" column="editor" className="bottom-60">
+            <Presentation size={20} aria-hidden="true" />
           </Fab>
           {showDocumentEditor && resolvedActivePage?.document?.enabled && (
             <Suspense fallback={<DocumentOverlayFallback />}>
@@ -2047,8 +2170,9 @@ export default function EditorShell({
                   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. */}
+                  document FAB in EditorToolbar is gated on !historyState, which
+                  keeps this overlay from ever being opened onto it in the
+                  first place. */}
               {viewSections !== null ? (
                 <DocumentPresentOverlay
                   page={resolvedActivePage}
@@ -2086,7 +2210,7 @@ export default function EditorShell({
 
           {rejectedUploads.length > 0 && (
             <div className="sticky top-2 z-30 mx-auto w-full max-w-3xl px-4">
-              <UploadRejectionAlert
+              <InlineAlert
                 message={formatRejections(rejectedUploads, siteConfig?.media.maxFileSize)}
                 onDismiss={() => setRejectedUploads([])}
               />
@@ -2100,7 +2224,7 @@ export default function EditorShell({
               never show the same message twice. */}
           {uploadErrorMessage && !showMediaLibrary && (
             <div className="sticky top-2 z-30 mx-auto w-full max-w-3xl px-4">
-              <UploadRejectionAlert
+              <InlineAlert
                 message={uploadErrorMessage}
                 onDismiss={() => setUploadErrorMessage(null)}
               />
@@ -2109,29 +2233,34 @@ export default function EditorShell({
 
           {unparseableSectionIds.length > 0 && (
             <div className="sticky top-2 z-30 mx-auto w-full max-w-3xl px-4">
-              <UploadRejectionAlert
+              <InlineAlert
                 message={`${unparseableSectionIds.length} section file${unparseableSectionIds.length === 1 ? "" : "s"} on this site cannot be read (${unparseableSectionIds.join(", ")}). Damaged sections keep their place on the page and are not deleted by saving — repair the file to restore them.`}
                 onDismiss={() => setUnparseableSectionIds([])}
               />
             </div>
           )}
 
-          {saveWarnings.length > 0 && (
-            <div className="sticky top-2 z-30 mx-auto w-full max-w-3xl px-4">
-              <UploadRejectionAlert
-                message={saveWarnings.join(" ")}
-                onDismiss={() => setSaveWarnings([])}
-              />
+          {/* One sticky container so the two banners stack instead of overlapping. */}
+          {(persistence.persistenceError || saveWarnings.length > 0) && (
+            <div className="sticky top-2 z-30 mx-auto flex w-full max-w-3xl flex-col gap-2 px-4">
+              {persistence.persistenceError && (
+                <Notice tone="error" placement="inline">
+                  {persistence.persistenceError}
+                </Notice>
+              )}
+              {saveWarnings.length > 0 && (
+                <InlineAlert
+                  message={saveWarnings.join(" ")}
+                  onDismiss={() => setSaveWarnings([])}
+                />
+              )}
             </div>
           )}
 
           {remoteNotice && (
-            <div
-              role="status"
-              className="fixed left-1/2 top-14 z-50 -translate-x-1/2 rounded-md border border-base-200 bg-base px-4 py-2 text-xs font-medium text-base-content shadow-lg"
-            >
-              {remoteNotice}
-            </div>
+            <Notice tone={remoteNotice.tone} placement="toast">
+              {remoteNotice.message}
+            </Notice>
           )}
 
           {/* bp-band-shift: rides the chat dock's FLIP glide (base.css). On
@@ -2164,7 +2293,7 @@ export default function EditorShell({
           ) : (
           <HistoryOrEditorContent
             index={siteIndex}
-            activeSections={activeSections}
+            activeSections={navSections}
             activePageId={resolvedActivePage?.id ?? null}
           >
             <EditorContent
@@ -2181,6 +2310,7 @@ export default function EditorShell({
               onBlockMove={onBlockMove}
               onMoveSection={siteIndex.pages.length > 1 ? setMovingSectionId : undefined}
               onAccessChange={onAccessChange}
+              tagging={tagging}
               onStatusChange={onStatusChange}
               mainIndex={mainIndex}
               changedSectionIds={changedSectionIds}
@@ -2203,41 +2333,34 @@ export default function EditorShell({
             chatbotPlatformEnabled={chatbotPlatformEnabled}
             capabilities={capabilities}
             currentUser={currentUser}
+            tagging={tagging}
           />
-          <EditorModal
+          <ConfirmDialog
             isOpen={pendingDeleteSectionId !== null}
-            onClose={() => setPendingDeleteSectionId(null)}
             title="Delete Section"
-          >
-            <p className="mb-4 text-sm text-base-contrast-light">
-              Delete this section? It will be removed from the page now and deleted permanently when you save or publish.
-            </p>
-            <div className="flex justify-end gap-3">
-              <Button variant="secondary" size="md" onClick={() => setPendingDeleteSectionId(null)}>
-                Cancel
-              </Button>
-              <Button variant="destructive" size="md" onClick={confirmDeleteSection}>
-                Delete
-              </Button>
-            </div>
-          </EditorModal>
-          <EditorModal
+            body={
+              <p className="text-sm text-base-contrast-light">
+                Delete this section? It will be removed from the page now and deleted permanently when you save or publish.
+              </p>
+            }
+            confirmLabel="Delete"
+            tone="destructive"
+            onConfirm={confirmDeleteSection}
+            onCancel={() => setPendingDeleteSectionId(null)}
+          />
+          <ConfirmDialog
             isOpen={showDiscardConfirm}
-            onClose={() => setShowDiscardConfirm(false)}
             title="Discard Changes"
-          >
-            <p className="mb-4 text-sm text-base-contrast-light">
-              Discard all unsaved changes? This will reload with the last published content.
-            </p>
-            <div className="flex justify-end gap-3">
-              <Button variant="secondary" size="md" onClick={() => setShowDiscardConfirm(false)}>
-                Cancel
-              </Button>
-              <Button variant="destructive" size="md" onClick={handleToolbarDiscard}>
-                Discard
-              </Button>
-            </div>
-          </EditorModal>
+            body={
+              <p className="text-sm text-base-contrast-light">
+                Discard all unsaved changes? This will reload with the last published content.
+              </p>
+            }
+            confirmLabel="Discard"
+            tone="destructive"
+            onConfirm={handleToolbarDiscard}
+            onCancel={() => setShowDiscardConfirm(false)}
+          />
           <EditorModal
             isOpen={showMediaLibrary}
             onClose={() => {
@@ -2357,16 +2480,18 @@ export default function EditorShell({
         </MediaLibraryContext.Provider>
       </EditorModalProvider>
     </EditorProvider>
+    </BrandSwatchesContext.Provider>
+    </ReferenceSourcesContext.Provider>
     </PagesContext.Provider>
   );
 }
 
 function ViewBranchWatcher({
-  setViewSections,
+  setView,
   onError,
 }: {
-  setViewSections: (sections: LoadedSection[] | null) => void;
-  onError: (message: string) => void;
+  setView: (view: { sections: LoadedSection[]; index: SiteIndex | null } | null) => void;
+  onError: (message: string, tone?: NoticeState["tone"]) => void;
 }) {
   const { isEditMode, viewBranch } = useEditorContext();
 
@@ -2376,7 +2501,7 @@ function ViewBranchWatcher({
     // fetch (fetching `saved` would 404 after a publish and fall back to main,
     // clobbering unsaved edits). Null viewSections routes to the in-memory path.
     if (isEditMode || viewBranch !== "live") {
-      setViewSections(null);
+      setView(null);
       return;
     }
 
@@ -2387,42 +2512,34 @@ function ViewBranchWatcher({
       .then((res) => {
         // A non-JSON 5xx used to parse to `undefined` and render an empty
         // "Published" view with nothing explaining it.
-        if (!res.ok) throw new Error(`Failed to load the published view: ${res.status}`);
+        if (!res.ok) throw new Error(`Couldn't load the published view: ${res.status}`);
         return res.json();
       })
       .then((data) => {
         if (!Array.isArray(data?.sections)) throw new Error("Malformed published-view response");
-        setViewSections(data.sections);
+        setView({ sections: data.sections, index: data.index ?? null });
       })
       .catch((err) => {
         if (err?.name === "AbortError") return;
         console.error(err);
         // Fall back to the in-memory path rather than showing an empty page.
-        setViewSections(null);
-        onError("Couldn't load the published view — showing your current edits.");
+        setView(null);
+        onError("Couldn't load the published view — showing your current edits.", "error");
       });
     return () => controller.abort();
-  }, [viewBranch, isEditMode, setViewSections, onError]);
+  }, [viewBranch, isEditMode, setView, onError]);
 
   return null;
 }
 
-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();
+function HistoryWatcher() {
+  const { setHistoryState } = useEditorContext();
 
   useEffect(() => {
     const unlisten = historySelectEvent.listen(async ({ sha, date }) => {
       try {
         const res = await fetch(`/api/content/history?sha=${sha}`);
-        if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
+        if (!res.ok) throw new Error(`Couldn't load history: ${res.status}`);
         const data = await res.json();
         setHistoryState({
           sha,
@@ -2442,10 +2559,6 @@ function HistoryWatcher({
     return unlisten;
   }, [setHistoryState]);
 
-  useEffect(() => {
-    onHistoryActiveChange?.(historyState !== null);
-  }, [historyState, onHistoryActiveChange]);
-
   return null;
 }
 
@@ -2556,6 +2669,7 @@ function EditorContent({
   onBlockMove,
   onMoveSection,
   onAccessChange,
+  tagging,
   onStatusChange,
   mainIndex,
   changedSectionIds,
@@ -2577,6 +2691,7 @@ function EditorContent({
   onBlockMove: (move: BlockMove) => void;
   onMoveSection?: (sectionId: string) => void;
   onAccessChange: (sectionId: string, access: string[]) => void;
+  tagging: SiteTagging;
   onStatusChange: (sectionId: string, status: "draft" | "live" | "archived") => void;
   mainIndex: SiteIndex | null;
   changedSectionIds: Set<string>;
@@ -2589,6 +2704,7 @@ function EditorContent({
 }) {
   const { isEditMode, viewBranch, previewAudience } = useEditorContext();
   const { openModal, closeModal } = useEditorModal();
+  const referenceSources = useContext(ReferenceSourcesContext);
   const [pendingInsertIndex, setPendingInsertIndex] = useState<number | null>(null);
   const dismissPendingInsert = useCallback(() => setPendingInsertIndex(null), []);
 
@@ -2606,6 +2722,10 @@ function EditorContent({
     viewSections,
     activePageSectionIds,
   });
+  // TL;DR / Summary plates render their nav anchor from this. Derived from the
+  // same list the sidebar nav is built from (not displaySections, which preview
+  // modes filter), so a plate's id always matches the href its nav entry links to.
+  const summaryAnchors = useMemo(() => summaryNavAnchors(sections), [sections]);
 
   useEffect(() => {
     return combine(
@@ -2651,157 +2771,174 @@ function EditorContent({
     // `.section-wrapper:first-child` zeroes the 2.25rem that every other section
     // reserves above itself for its hover chrome, so the first section's controls
     // would sit under the fixed toolbar. Re-reserve it on the list instead.
-    <div className="pt-9">
-      {displaySections.map(({ section, meta }, index) => {
-        const definition = getSection(section.type);
-        if (!definition) {
+    <SummaryAnchorsContext.Provider value={summaryAnchors}>
+      <div className="pt-9">
+        {displaySections.map(({ section, meta }, index) => {
+          const definition = getSection(section.type);
+          if (!definition) {
+            return (
+              <div
+                key={section.id}
+                className="border border-warning bg-warning-bg px-4 py-3 text-sm text-warning"
+                role="alert"
+              >
+                Unknown section type: <code className="font-mono font-semibold">{section.type}</code>
+              </div>
+            );
+          }
+          const Component = definition.component;
+          // The viewer renders no wrapper for a Reference with nothing to show,
+          // so neither does the preview — its spacing would otherwise remain.
+          if (
+            !isEditMode && section.type === REFERENCE_TYPE && referenceSources &&
+            !referenceShowsInPreview(referenceSources, section.id, section.content as unknown as ReferenceContent, viewBranch)
+          ) {
+            return null;
+          }
+
           return (
-            <div
-              key={section.id}
-              className="border border-amber-400 bg-amber-50 px-4 py-3 text-sm text-amber-800 dark:border-amber-600 dark:bg-amber-900/30 dark:text-amber-300"
-              role="alert"
-            >
-              Unknown section type: <code className="font-mono font-semibold">{section.type}</code>
-            </div>
-          );
-        }
-        const Component = definition.component;
-
-        return (
-          <Fragment key={section.id}>
-            {editingEnabled && pendingInsertIndex === index && (
-              <SectionSkeleton
-                types={typeOptions}
-                onSelect={(type) => {
-                  onAddSection(index, type);
-                  setPendingInsertIndex(null);
-                }}
-                onDismiss={dismissPendingInsert}
-              />
-            )}
+            <Fragment key={section.id}>
+              {editingEnabled && pendingInsertIndex === index && (
+                <SectionSkeleton
+                  types={typeOptions}
+                  onSelect={(type) => {
+                    onAddSection(index, type);
+                    setPendingInsertIndex(null);
+                  }}
+                  onDismiss={dismissPendingInsert}
+                />
+              )}
 
-            <ErrorBoundary label={`${definition.label} (${section.type})`}>
-              <SectionLayout
-                type={section.type}
-                status={meta.status}
-                dimNonPublished={!isEditMode}
-                dimmed={previewAudience !== null && !audiencePasses(meta.access, previewAudience)}
-              >
-                <SectionWrapper
-                  sectionId={section.id}
-                  sectionType={section.type}
+              <ErrorBoundary label={`${definition.label} (${section.type})`}>
+                <SectionLayout
+                  type={section.type}
                   status={meta.status}
-                  dirty={dirtySectionIds.has(section.id)}
-                  index={index}
-                  isLast={index === displaySections.length - 1}
-                  containerId={ROOT_CONTAINER_ID}
-                  isContainerBlock={section.type === "container"}
-                  definition={definition}
-                  mainStatus={mainIndex?.sections[section.id]?.status ?? null}
-                  contentDiffersFromMain={changedSectionIds.has(section.id) || dirtySectionIds.has(section.id)}
-                  isLocalOnly={dirtySectionIds.has(section.id) && !changedSectionIds.has(section.id)}
-                  lockedBy={locks.get(section.id) ? { email: locks.get(section.id)!.email } : null}
-                  onTakeover={() => onTakeover(section.id)}
-                  onEditIntent={getEditIntent(section.id)}
-                  options={{
-                    ...(section.content as Record<string, unknown>),
-                    ...("options" in section ? (section.options as Record<string, unknown>) : {}),
-                  }}
-                  audiences={audiences}
-                  access={meta.access}
-                  onAccessChange={editingEnabled ? (a) => onAccessChange(section.id, a) : undefined}
-                  onStatusChange={editingEnabled ? (s) => onStatusChange(section.id, s) : undefined}
-                  onSectionChange={editingEnabled ? (settingsResult) => {
-                    const result = settingsResult as Record<string, unknown>;
-                    if (result && typeof result === "object" && "content" in result && "options" in result) {
-                      const contentPatch = result.content as Record<string, unknown>;
-                      const optionsPatch = result.options as Record<string, unknown>;
-                      onSectionChange(section.id, {
-                        ...section,
-                        content: { ...section.content, ...contentPatch },
-                        options: { ...("options" in section ? section.options : {}), ...optionsPatch },
-                      } as SectionContent);
-                    } else {
-                      onSectionChange(section.id, {
-                        ...section,
-                        ...result,
-                      } as SectionContent);
-                    }
-                  } : undefined}
-                  onReorder={editingEnabled ? onReorderSections : undefined}
-                  onMoveSection={editingEnabled && onMoveSection ? () => onMoveSection(section.id) : undefined}
-                  onRequestInsert={editingEnabled ? (i) => setPendingInsertIndex(i) : undefined}
-                  onDelete={editingEnabled ? () => onDeleteSection(section.id) : undefined}
-                  onAddChild={
-                    editingEnabled && section.type === "container"
-                      ? () => {
-                          openModal(
-                            "Add block",
-                            <SectionTypePicker
-                              types={childInsertableTypes()}
-                              onClose={closeModal}
-                              onSelect={(type) => {
-                                const def = getSection(type);
-                                if (def) {
-                                  const id =
-                                    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-                                      ? crypto.randomUUID()
-                                      : `child-${Date.now()}`;
-                                  const child = { id, ...(def.defaults() as object) } as Section;
-                                  const containerSection: Section = {
-                                    id: section.id,
-                                    type: "container",
-                                    content: section.content as Record<string, unknown>,
-                                  };
-                                  const childCount =
-                                    (section.content as { children?: unknown[] }).children?.length ?? 0;
-                                  const next = insertChildAt(containerSection, child, childCount);
-                                  onSectionChange(section.id, {
-                                    ...section,
-                                    content: next.content,
-                                  } as SectionContent);
-                                }
-                                closeModal();
-                              }}
-                            />,
-                          );
-                        }
-                      : undefined
-                  }
+                  dimNonPublished={!isEditMode}
+                  dimmed={previewAudience !== null && !audiencePasses(meta.access, previewAudience)}
                 >
-                  <Component
-                    content={section}
-                    options={"options" in section ? (section.options as Record<string, unknown>) : undefined}
-                    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>
-            </ErrorBoundary>
-          </Fragment>
-        );
-      })}
-
-      {/* Trailing selector: shown when an insert was requested after the last
-          section, or always on an empty page — an empty page has no section
-          chrome to insert from, so the selector IS its default state (not
-          dismissible; there is nothing behind it). */}
-      {editingEnabled && (displaySections.length === 0 || pendingInsertIndex === displaySections.length) && (
-        <SectionSkeleton
-          types={typeOptions}
-          onSelect={(type) => {
-            onAddSection(displaySections.length, type);
-            setPendingInsertIndex(null);
-          }}
-          onDismiss={dismissPendingInsert}
-        />
-      )}
+                  <SectionWrapper
+                    sectionId={section.id}
+                    sectionType={section.type}
+                    status={meta.status}
+                    dirty={dirtySectionIds.has(section.id)}
+                    index={index}
+                    isLast={index === displaySections.length - 1}
+                    sectionCount={displaySections.length}
+                    containerId={ROOT_CONTAINER_ID}
+                    isContainerBlock={section.type === "container"}
+                    definition={definition}
+                    mainStatus={mainIndex?.sections[section.id]?.status ?? null}
+                    contentDiffersFromMain={changedSectionIds.has(section.id) || dirtySectionIds.has(section.id)}
+                    isLocalOnly={dirtySectionIds.has(section.id) && !changedSectionIds.has(section.id)}
+                    lockedBy={locks.get(section.id) ? { email: locks.get(section.id)!.email } : null}
+                    onTakeover={() => onTakeover(section.id)}
+                    onEditIntent={getEditIntent(section.id)}
+                    options={{
+                      ...(section.content as Record<string, unknown>),
+                      ...("options" in section ? (section.options as Record<string, unknown>) : {}),
+                    }}
+                    audiences={audiences}
+                    access={meta.access}
+                    onAccessChange={editingEnabled ? (a) => onAccessChange(section.id, a) : undefined}
+                    tagging={{
+                      tags: tagging.tags,
+                      assignedIds: tagging.tags.filter((t) => t.sectionIds.includes(section.id)).map((t) => t.id),
+                      onToggle: editingEnabled && tagging.editable ? (tagId, tagged) => tagging.onToggle(section.id, tagId, tagged) : undefined,
+                      onCreate: editingEnabled && tagging.editable ? (label) => tagging.onCreate(label, section.id) : undefined,
+                    }}
+                    onStatusChange={editingEnabled ? (s) => onStatusChange(section.id, s) : undefined}
+                    onSectionChange={editingEnabled ? (settingsResult) => {
+                      const result = settingsResult as Record<string, unknown>;
+                      if (result && typeof result === "object" && "content" in result && "options" in result) {
+                        const contentPatch = result.content as Record<string, unknown>;
+                        const optionsPatch = result.options as Record<string, unknown>;
+                        onSectionChange(section.id, {
+                          ...section,
+                          content: { ...section.content, ...contentPatch },
+                          options: { ...("options" in section ? section.options : {}), ...optionsPatch },
+                        } as SectionContent);
+                      } else {
+                        onSectionChange(section.id, {
+                          ...section,
+                          ...result,
+                        } as SectionContent);
+                      }
+                    } : undefined}
+                    onReorder={editingEnabled ? onReorderSections : undefined}
+                    onMoveSection={editingEnabled && onMoveSection ? () => onMoveSection(section.id) : undefined}
+                    onRequestInsert={editingEnabled ? (i) => setPendingInsertIndex(i) : undefined}
+                    onDelete={editingEnabled ? () => onDeleteSection(section.id) : undefined}
+                    onAddChild={
+                      editingEnabled && section.type === "container"
+                        ? () => {
+                            openModal(
+                              "Add block",
+                              <SectionTypePicker
+                                types={childInsertableTypes()}
+                                onClose={closeModal}
+                                onSelect={(type) => {
+                                  const def = getSection(type);
+                                  if (def) {
+                                    const id =
+                                      typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+                                        ? crypto.randomUUID()
+                                        : `child-${Date.now()}`;
+                                    const child = { id, ...(def.defaults() as object) } as Section;
+                                    const containerSection: Section = {
+                                      id: section.id,
+                                      type: "container",
+                                      content: section.content as Record<string, unknown>,
+                                    };
+                                    const childCount =
+                                      (section.content as { children?: unknown[] }).children?.length ?? 0;
+                                    const next = insertChildAt(containerSection, child, childCount);
+                                    onSectionChange(section.id, {
+                                      ...section,
+                                      content: next.content,
+                                    } as SectionContent);
+                                  }
+                                  closeModal();
+                                }}
+                              />,
+                            );
+                          }
+                        : undefined
+                    }
+                  >
+                    <Component
+                      content={section}
+                      options={"options" in section ? (section.options as Record<string, unknown>) : undefined}
+                      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>
+              </ErrorBoundary>
+            </Fragment>
+          );
+        })}
+
+        {/* Trailing selector: shown when an insert was requested after the last
+            section, or always on an empty page — an empty page has no section
+            chrome to insert from, so the selector IS its default state (not
+            dismissible; there is nothing behind it). */}
+        {editingEnabled && (displaySections.length === 0 || pendingInsertIndex === displaySections.length) && (
+          <SectionSkeleton
+            types={typeOptions}
+            onSelect={(type) => {
+              onAddSection(displaySections.length, type);
+              setPendingInsertIndex(null);
+            }}
+            onDismiss={dismissPendingInsert}
+          />
+        )}
 
-    </div>
+      </div>
+    </SummaryAnchorsContext.Provider>
   );
 }
 
@@ -2847,7 +2984,7 @@ function formatElapsed(seconds: number): string {
 function DismissButton({ onClick }: { onClick: () => void }) {
   return (
     <button type="button" onClick={onClick} className="cursor-pointer" aria-label="Dismiss">
-      <X size={12} className="text-base-content/30 hover:text-base-content/60" />
+      <X size={12} className="text-base-contrast/30 hover:text-base-contrast/60" />
     </button>
   );
 }
@@ -2861,7 +2998,7 @@ function StatusText({
   onDismiss,
 }: {
   publishAction: "idle" | "saving" | "publishing";
-  publishFeedback: string | null;
+  publishFeedback: NoticeState | null;
   saveProgress: string | null;
   buildState: "idle" | "building" | "ready" | "error" | "fading";
   buildElapsed: number;
@@ -2869,14 +3006,14 @@ function StatusText({
 }) {
   if (publishAction === "saving") {
     return (
-      <span className="relative text-xs font-medium text-base-content/60">
+      <span className="relative text-xs font-medium text-base-contrast/60">
         {saveProgress ?? <>Saving changes<LoadingEllipsis /></>}
       </span>
     );
   }
   if (publishAction === "publishing" || buildState === "building") {
     return (
-      <span className="text-xs font-medium text-orange-600">
+      <span className="text-xs font-medium text-warning">
         Publishing ({formatElapsed(buildElapsed)})
       </span>
     );
@@ -2884,7 +3021,7 @@ function StatusText({
   if (buildState === "ready" || buildState === "fading") {
     return (
       <span className={cn(
-        "inline-flex items-center gap-1.5 text-xs font-medium text-green-600 transition-opacity duration-1000",
+        "inline-flex items-center gap-1.5 text-xs font-medium text-success transition-opacity duration-1000",
         buildState === "fading" ? "opacity-0" : "opacity-100",
       )}>
         Published in {formatElapsed(buildElapsed)}
@@ -2894,19 +3031,22 @@ function StatusText({
   }
   if (buildState === "error") {
     return (
-      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-red-600">
+      <span className="inline-flex items-center gap-1.5 text-xs font-medium text-danger">
         Publish failed
         <DismissButton onClick={onDismiss} />
       </span>
     );
   }
   if (publishFeedback) {
+    const toneClass: Record<NoticeState["tone"], string> = {
+      success: "text-success",
+      info: "text-base-contrast",
+      warning: "text-warning",
+      error: "text-danger",
+    };
     return (
-      <span className={cn(
-        "text-xs font-medium",
-        publishFeedback === "Saved" ? "text-green-600" : "text-red-600",
-      )}>
-        {publishFeedback}
+      <span className={cn("text-xs font-medium", toneClass[publishFeedback.tone])}>
+        {publishFeedback.message}
       </span>
     );
   }
@@ -2938,11 +3078,14 @@ function EditorToolbar({
   audiences,
   authoringDefaults,
   onAuthoringDefaultsChange,
+  docEditEnabled,
+  onDocEditClick,
+  showBugReport,
 }: {
   buttonState: "synced" | "publish" | "saveAndPublish";
   localChangesExist: boolean;
   publishAction: "idle" | "saving" | "publishing";
-  publishFeedback: string | null;
+  publishFeedback: NoticeState | null;
   saveProgress: string | null;
   onSave: () => void;
   onPublish: () => void;
@@ -2963,6 +3106,14 @@ function EditorToolbar({
   audiences: Audience[];
   authoringDefaults: AuthoringDefaults;
   onAuthoringDefaultsChange: (next: AuthoringDefaults) => void;
+  /** Whether the active page has document mode on — gates the "Edit as
+   *  document" FAB this toolbar stacks alongside its own mode-toggle FAB.
+   *  Owned by EditorShell (resolvedActivePage lives above the Provider). */
+  docEditEnabled: boolean;
+  onDocEditClick: () => void;
+  /** Whether to render BugReportFAB in this toolbar's FabStack — false on
+   *  the password-only (zero-Supabase) path, which has no backend for it. */
+  showBugReport: boolean;
 }) {
   const { isEditMode, viewBranch, setViewBranch, toggleEditMode, historyState, setHistoryState, historyPageId, setHistoryPageId } = useEditorContext();
 
@@ -2983,13 +3134,13 @@ function EditorToolbar({
   return (
     <>
       {isEditMode && (
-        // Full-width and static on purpose: the docked chat sidebar slides in
-        // BELOW this bar (ChatPanel docks at top-16 on /edit), so the toolbar
-        // never moves during the chat open/close transition. h-16 matches the
-        // panel's top offset (and the body's pt-16) exactly.
-        <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 h-16 grid-cols-3 items-center px-4">
-            <div className="flex items-center gap-2">
+        // The docked chat sidebar slides in BELOW this bar (ChatPanel docks
+        // at top-16 on /edit), so the toolbar never moves during the chat
+        // open/close transition — ToolbarFrame's h-16 matches the panel's
+        // top offset (and the body's pt-16) exactly.
+        <ToolbarFrame
+          left={
+            <>
               {buttonState === "saveAndPublish" && (
                 <SplitButton
                   label="Save & Publish"
@@ -3024,18 +3175,20 @@ function EditorToolbar({
                 </Button>
               )}
               <PresenceAvatars peers={collabPeers} selfUserId={collabSelfId} status={collabStatus} />
-            </div>
-            <div className="flex items-center justify-center">
-              <StatusText
-                publishAction={publishAction}
-                publishFeedback={publishFeedback}
-                saveProgress={saveProgress}
-                buildState={buildState}
-                buildElapsed={buildElapsed}
-                onDismiss={onBuildDismiss}
-              />
-            </div>
-            <div className="flex items-center justify-end gap-2">
+            </>
+          }
+          center={
+            <StatusText
+              publishAction={publishAction}
+              publishFeedback={publishFeedback}
+              saveProgress={saveProgress}
+              buildState={buildState}
+              buildElapsed={buildElapsed}
+              onDismiss={onBuildDismiss}
+            />
+          }
+          right={
+            <>
               <ProcessingIndicator items={processingItems} />
               <Tooltip side="bottom" content="Authoring defaults">
                 <AuthoringDefaultsMenu defaults={authoringDefaults} audiences={audiences} onChange={onAuthoringDefaultsChange} />
@@ -3057,15 +3210,15 @@ function EditorToolbar({
                 <ShowAllChromeToggle />
               </Tooltip>
               <Tooltip side="bottom-clamp" content="Site settings">
-                <IconButton icon={<SettingsIcon size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
+                <IconButton icon={<Settings size={16} />} label="Site settings" size="md" onClick={onSettingsClick} className="border border-base-200 bg-base-accent" />
               </Tooltip>
-            </div>
-          </div>
-        </div>
+            </>
+          }
+        />
       )}
       {!isEditMode && (
-        <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 flex h-16 items-center justify-center px-4">
+        <ToolbarFrame
+          center={
             <SegmentedControl
               options={[
                 { value: "live", label: "Published" },
@@ -3074,27 +3227,37 @@ function EditorToolbar({
               value={viewBranch}
               onChange={(v) => setViewBranch(v as "saved" | "live")}
             />
-          </div>
-        </div>
+          }
+        />
       )}
       {!historyState && (
-        <Fab
-          label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
-          column="editor"
-          className="bottom-16"
-          onClick={toggleEditMode}
-        >
-          {isEditMode ? (
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-              <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
-            </svg>
-          ) : (
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-            </svg>
+        <FabStack>
+          {/* Bug reports persist via Supabase; hidden on the password-only
+              path (showBugReport, threaded from EditorShell's capabilities).
+              History is presentation only, never editing (branch-preview
+              already routes to DocumentPresentOverlay; !historyState covers
+              the separate historySelectEvent commit view) — FabStack
+              unmounts with the rest of this block whenever history is
+              active, which hides all three FABs together. */}
+          {showBugReport && <BugReportFAB stacked />}
+          {docEditEnabled && (
+            <Fab stacked label="Edit as document" column="editor" onClick={onDocEditClick}>
+              <FileText size={20} aria-hidden="true" />
+            </Fab>
           )}
-        </Fab>
+          <Fab
+            stacked
+            label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
+            column="editor"
+            onClick={toggleEditMode}
+          >
+            {isEditMode ? (
+              <Eye className="h-5 w-5" aria-hidden="true" />
+            ) : (
+              <Pencil className="h-5 w-5" aria-hidden="true" />
+            )}
+          </Fab>
+        </FabStack>
       )}
     </>
   );