@drawnagency/primitives 0.1.94 → 0.1.96

package/src/components/shared/Navigation.tsx

@@ -3,7 +3,7 @@ import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
 import type { SiteNav, NavItem } from "../../lib/nav";
-import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent } from "../../lib/events";
+import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, editorDirtyEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
@@ -35,21 +35,28 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
   const bp = BP_CLASSES[desktopBreakpoint];
   const [isOpen, setIsOpen] = useState(false);
   const [isEditMode, setIsEditMode] = useState(false);
+  // Published by EditorShell (a separate island) so the history navigator can
+  // warn that restoring discards unsaved drafts.
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
   const [currentSiteName, setCurrentSiteName] = useState(siteName);
   const [isDark, setIsDark] = useState(false);
   const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
   const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
-  const historyButtonRef = useRef<HTMLButtonElement>(null);
+  // Anchors the history panel to the "Last updated" block rather than the button
+  // inside it: the block's top edge is the divider the panel sits above, and its
+  // mx-4 matches the nav links' px-4, so the panel lines up with them.
+  const historyAnchorRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setIsEditMode(window.location.pathname.startsWith("/edit"));
     const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
+    const unlistenDirty = editorDirtyEvent.listen((d) => setHasUnsavedChanges(d.hasUnsavedChanges));
     const unlistenNav = siteNavChangeEvent.listen((n) => setSiteNav(n));
     const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
     const unlistenName = siteNameChangeEvent.listen((name) => setCurrentSiteName(name));
-    return () => { unlistenEdit(); unlistenNav(); unlistenDark(); unlistenName(); };
+    return () => { unlistenEdit(); unlistenDirty(); unlistenNav(); unlistenDark(); unlistenName(); };
   }, []);
 
   useEffect(() => {
@@ -261,16 +268,30 @@ export default function Navigation({ siteNav: initialNav, siteName, darkMode, la
             </div>
           )}
           {lastUpdated && (
-            <div className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
+            <div ref={historyAnchorRef} className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
               {isEditMode ? (
                 <div className="relative">
-                  <button ref={historyButtonRef} onClick={() => setShowHistory((p) => !p)}
-                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors" aria-label="View history">
+                  <button onClick={() => setShowHistory((p) => !p)}
+                    aria-label="View history" aria-expanded={showHistory}
+                    className="inline-flex cursor-pointer items-center gap-1 text-xs text-base-contrast-light transition-colors hover:text-primary">
                     Last updated {formatDate(lastUpdated)}
+                    {/* The panel opens upward, so the caret points up when closed
+                        and flips when open — the affordance that this is a toggle
+                        rather than a label. */}
+                    <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+                      strokeWidth="1.7" aria-hidden="true"
+                      className={cn("transition-transform", showHistory && "rotate-180")}>
+                      <path d="M1.5 6.5L5 3l3.5 3.5" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
                   </button>
-                  <Popover isOpen={showHistory} onClose={() => setShowHistory(false)} anchorRef={historyButtonRef}
-                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0">
-                    <HistoryPopover onSelectCommit={(sha, date) => { setShowHistory(false); historySelectEvent.dispatch({ sha, date }); }} />
+                  {/* Portalled: the sidebar sets overflow-y-auto, which computes
+                      overflow-x to auto, so a panel wider than the 16rem sidebar
+                      would be clipped. placement="top" opens it upward from the
+                      anchor block, landing it just above the divider. */}
+                  <Popover isOpen={showHistory} onClose={() => setShowHistory(false)} anchorRef={historyAnchorRef}
+                    portal placement="top"
+                    className="w-[22rem] h-[min(34rem,calc(100vh-7rem))] overflow-hidden">
+                    <HistoryPopover hasUnsavedChanges={hasUnsavedChanges} onSelectCommit={(sha, date) => { setShowHistory(false); historySelectEvent.dispatch({ sha, date }); }} />
                   </Popover>
                 </div>
               ) : (

package/src/components/shared/Popover.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from "react";
+import { createPortal } from "react-dom";
 import { useFocusTrap } from "../../hooks/useFocusTrap";
 import { cn } from "../../lib/cn";
 
@@ -9,6 +10,15 @@ interface PopoverProps {
   children: ReactNode;
   align?: "start" | "end" | "auto";
   className?: string;
+  /**
+   * Render into document.body with fixed positioning. Required when the anchor
+   * sits inside a scroll container: the nav sidebar sets `overflow-y-auto`,
+   * which per CSS computes `overflow-x` to `auto`, so an absolutely-positioned
+   * panel wider than the sidebar is clipped and adds a horizontal scrollbar.
+   */
+  portal?: boolean;
+  /** Which side of the anchor to open toward. Only used with `portal`. */
+  placement?: "bottom" | "top";
 }
 
 export function Popover({
@@ -18,13 +28,62 @@ export function Popover({
   children,
   align = "auto",
   className,
+  portal = false,
+  placement = "bottom",
 }: PopoverProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const [resolvedAlign, setResolvedAlign] = useState<"start" | "end">("start");
+  const [fixedPos, setFixedPos] = useState<{ left: number; top?: number; bottom?: number } | null>(null);
 
-  useFocusTrap(panelRef, isOpen);
+  // In portal mode the panel isn't rendered until it's been measured, so the
+  // trap must activate on that second commit — useFocusTrap bails on a null ref
+  // and only re-runs when `active` changes.
+  useFocusTrap(panelRef, isOpen && (!portal || fixedPos !== null));
 
+  // Track the anchor while portalled: the panel is out of normal flow, so it
+  // has to be repositioned on resize and on any ancestor's scroll.
   useLayoutEffect(() => {
+    if (!portal) return;
+    // Drop the stale position on close so the next open re-measures — the
+    // anchor can move while the popover is shut (resize, nav scroll), and a
+    // retained position would also mount the panel before it's been re-measured.
+    if (!isOpen) {
+      setFixedPos(null);
+      return;
+    }
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const update = () => {
+      const r = anchor.getBoundingClientRect();
+      const next = placement === "top"
+        ? { left: r.left, bottom: window.innerHeight - r.top + 4 }
+        : { left: r.left, top: r.bottom + 4 };
+      // The capture-phase scroll listener also fires for scrolling *inside* the
+      // panel, so bail when nothing moved rather than re-rendering the subtree.
+      setFixedPos((prev) =>
+        prev && prev.left === next.left && prev.top === next.top && prev.bottom === next.bottom
+          ? prev
+          : next,
+      );
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [isOpen, portal, placement, anchorRef]);
+
+  useLayoutEffect(() => {
+    // Alignment is only consulted by the non-portal return below. In portal
+    // mode this effect is not merely useless but harmful: it writes directly to
+    // panel.style.left to measure, and on a reopen (when the panel mounts on the
+    // first commit because fixedPos is still populated) that wipes the inline
+    // left React set. The follow-up measure computes the same value, so React's
+    // per-key style diff sees no change and never rewrites it — leaving the
+    // panel pinned to the viewport edge.
+    if (portal) return;
     if (!isOpen || align !== "auto") {
       if (!isOpen) setResolvedAlign("start");
       return;
@@ -46,12 +105,22 @@ export function Popover({
   useEffect(() => {
     if (!isOpen) return;
     function onKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape") return;
+      // A modal opened from inside this popover also closes on Escape. Without
+      // this the one keypress dismisses both, losing the navigator's zoom stack
+      // — inconsistent with the X button, and with the mousedown exemption
+      // below that exists for exactly this stacking.
+      if (document.querySelector("[data-modal-layer]")) return;
+      onClose();
     }
     function onMouseDown(e: MouseEvent) {
       const target = e.target as Node;
       if (panelRef.current?.contains(target)) return;
       if (anchorRef.current?.contains(target)) return;
+      // A modal opened from inside this popover portals to <body>, so it is
+      // "outside" by DOM containment. Closing on its mousedowns would unmount
+      // the modal along with the popover, and would break text selection in it.
+      if (target instanceof Element && target.closest("[data-modal-layer]")) return;
       onClose();
     }
     document.addEventListener("keydown", onKeyDown);
@@ -66,6 +135,30 @@ export function Popover({
 
   const effectiveAlign = align === "auto" ? resolvedAlign : align;
 
+  if (portal) {
+    // Render only once measured. The layout effect above runs after mutation
+    // but before paint, so this costs no visible delay — and it avoids painting
+    // the panel at the top-left corner for a frame before it's positioned.
+    if (!fixedPos) return null;
+    return createPortal(
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="false"
+        style={{
+          position: "fixed",
+          left: `${fixedPos.left}px`,
+          ...(fixedPos.top !== undefined ? { top: `${fixedPos.top}px` } : {}),
+          ...(fixedPos.bottom !== undefined ? { bottom: `${fixedPos.bottom}px` } : {}),
+        }}
+        className={cn("z-50 rounded-md border border-base-200 bg-base shadow-lg", className)}
+      >
+        {children}
+      </div>,
+      document.body,
+    );
+  }
+
   return (
     <div
       ref={panelRef}

package/src/components/shell/EditorModal.tsx

@@ -12,10 +12,15 @@ interface EditorModalProps {
   blocking?: boolean;
   size?: "standard" | "large" | "settings";
   noPadding?: boolean;
+  /**
+   * The content is a tab set: lock the panel to one height per size so switching
+   * tabs never resizes the dialog. Tab panels scroll internally instead.
+   */
+  tabbed?: boolean;
   children: ReactNode;
 }
 
-export function EditorModal({ isOpen, onClose, title, blocking = false, size = "standard", noPadding = false, children }: EditorModalProps) {
+export function EditorModal({ isOpen, onClose, title, blocking = false, size = "standard", noPadding = false, tabbed = false, children }: EditorModalProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const titleId = useId();
 
@@ -44,6 +49,12 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
   return createPortal(
     <div
       data-testid="modal-backdrop"
+      // Marks the whole modal layer (backdrop + panel) so surfaces underneath —
+      // notably Popover's outside-click handler — can tell "a dialog above me is
+      // being used" from "the user clicked away". Without it, any mousedown in a
+      // modal opened from a popover would dismiss the popover and take the modal
+      // with it, and text selection inside the modal would be impossible.
+      data-modal-layer=""
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onMouseDown={
         blocking
@@ -63,8 +74,16 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
           size === "large"
             ? "max-w-[1400px] max-h-[900px] h-[90vh]"
             : size === "settings"
-              ? "max-w-lg min-h-[min(32rem,calc(100vh-4rem))] max-h-[calc(100vh-4rem)]"
-              : "max-w-md max-h-[calc(100vh-4rem)]",
+              ? cn(
+                  "max-w-lg",
+                  tabbed
+                    ? "h-[min(48rem,calc(100vh-4rem))]"
+                    : "min-h-[min(32rem,calc(100vh-4rem))] max-h-[calc(100vh-4rem)]",
+                )
+              : cn(
+                  "max-w-md",
+                  tabbed ? "h-[min(32rem,calc(100vh-4rem))]" : "max-h-[calc(100vh-4rem)]",
+                ),
         )}
       >
         <div className="flex shrink-0 items-center justify-between border-b border-base-200 px-6 py-4">
@@ -81,7 +100,10 @@ export function EditorModal({ isOpen, onClose, title, blocking = false, size = "
         </div>
         <div className={cn(
           !noPadding && "px-6 py-4",
-          "flex-1 overflow-y-auto",
+          "flex-1",
+          // Tabbed: the body itself never scrolls, so the tab bar stays pinned
+          // and each panel scrolls within the locked height.
+          tabbed ? "flex min-h-0 flex-col overflow-hidden" : "overflow-y-auto",
           size === "settings" && "flex flex-col",
         )}>
           {children}

package/src/components/shell/EditorModalContext.tsx

@@ -1,13 +1,14 @@
 import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import type { ModalOptions, OpenModal } from "../../lib/registry";
 
-interface ModalState {
+interface ModalState extends ModalOptions {
   title: string;
   content: ReactNode;
 }
 
 interface EditorModalContextValue {
   modalState: ModalState | null;
-  openModal: (title: string, content: ReactNode) => void;
+  openModal: OpenModal;
   closeModal: () => void;
 }
 
@@ -16,8 +17,8 @@ const EditorModalContext = createContext<EditorModalContextValue | null>(null);
 export function EditorModalProvider({ children }: { children: ReactNode }) {
   const [modalState, setModalState] = useState<ModalState | null>(null);
 
-  const openModal = useCallback((title: string, content: ReactNode) => {
-    setModalState({ title, content });
+  const openModal = useCallback((title: string, content: ReactNode, options?: ModalOptions) => {
+    setModalState({ title, content, ...options });
   }, []);
 
   const closeModal = useCallback(() => {

package/src/components/shell/EditorShell.tsx

@@ -37,7 +37,8 @@ import { SectionTypePicker } from "./SectionTypePicker";
 import { ensureSectionsRegistered } from "../sections/register";
 import { getSection, getAllSections, getSchema } from "../../lib/registry";
 import { cornerRadiusValue } from "../../lib/corner-radius";
-import { primaryVarValue, accentVarValue } from "../../lib/theme-vars";
+import { primaryVarValue, accentVarValue, onPrimaryVarValue } from "../../lib/theme-vars";
+import { rebaseMediaManifest } from "../../lib/media-folders";
 import { childInsertableTypes, insertChildAt } from "../../lib/container-ops";
 import { buildInsertMenuOptions, resolveInsertedContent } from "../../lib/insert-menu";
 
@@ -88,7 +89,7 @@ import { useBuildStatus } from "../../hooks/useBuildStatus";
 import { useMediaPipeline } from "../../hooks/useMediaPipeline";
 import { formatTimestamp } from "../../lib/timestamp";
 import { generateSiteNav } from "../../lib/nav";
-import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent } from "../../lib/events";
+import { siteNavChangeEvent, pageSelectEvent, darkModeEvent, siteNameChangeEvent, historySelectEvent, historyRestoreEvent, historyRestoreFailedEvent, editorDirtyEvent } from "../../lib/events";
 import {
   homePage, pageById, pageBySlug, pageDisplayTitle, addSectionToPage, removeSectionFromPages,
   reorderSectionInPage, audiencePasses,
@@ -260,6 +261,10 @@ export default function EditorShell({
   // writes onto the latest config instead of a stale closure.
   const siteConfigRef = useRef<SiteConfig | null>(siteConfig);
   useEffect(() => { siteConfigRef.current = siteConfig; }, [siteConfig]);
+  // Mirrors mediaManifest so recoverConflict can rebase it synchronously and the
+  // immediate 409 retry assembles the saved manifest against the rebased copy.
+  const mediaManifestRef = useRef<MediaManifest>(mediaManifest);
+  useEffect(() => { mediaManifestRef.current = mediaManifest; }, [mediaManifest]);
   // Guards the debounced preview-image composition effect (below): skips
   // recomposing on the very first run when a preview already exists, and
   // dedupes concurrent runs against the same composition signature.
@@ -487,6 +492,11 @@ export default function EditorShell({
         if (applied.droppedDirtyIds.length > 0) await deleteSectionRows(applied.droppedDirtyIds);
       }
 
+      const rebasedManifest = remote.mediaManifest
+        ? rebaseMediaManifest(mediaManifestRef.current, remote.mediaManifest)
+        : null;
+      if (rebasedManifest) setMediaManifest(rebasedManifest);
+
       setSections(mergedSections);
       setSiteIndex(mergedIndex);
       setSavedSha(remote.savedBranchSha);
@@ -497,6 +507,7 @@ export default function EditorShell({
       // (and onBaselineCommitted reads the diff refs right after it), before
       // React flushes the setState calls above into their mirror effects.
       savedShaRef.current = remote.savedBranchSha;
+      if (rebasedManifest) mediaManifestRef.current = rebasedManifest;
       sectionsRef.current = mergedSections;
       siteIndexRef.current = mergedIndex;
       changedSectionIdsRef.current = new Set(remote.changedSectionIds);
@@ -581,6 +592,11 @@ export default function EditorShell({
       });
 
       // The rebased result goes into React state (live view)...
+      if (remote.mediaManifest) {
+        const rebasedManifest = rebaseMediaManifest(mediaManifestRef.current, remote.mediaManifest);
+        setMediaManifest(rebasedManifest);
+        mediaManifestRef.current = rebasedManifest;
+      }
       setSections(result.sections);
       setSiteIndex(result.index);
       setSavedSha(remote.savedBranchSha);
@@ -778,6 +794,7 @@ export default function EditorShell({
       focusedSectionIdRef.current = null;
     },
     mediaManifest,
+    mediaManifestRef,
     manifestDirty: mediaPipeline.manifestDirty,
     clearManifestDirty: () => mediaPipeline.setManifestDirty(false),
     pendingMediaItems: mediaPipeline.pendingMediaItems,
@@ -890,6 +907,7 @@ export default function EditorShell({
     const accentVar = accentVarValue(config);
     root.style.setProperty("--color-primary", primaryVar);
     root.style.setProperty("--color-primary-contrast", accentVar);
+    root.style.setProperty("--color-on-primary", onPrimaryVarValue(config));
     root.style.setProperty("--font-heading", `${config.headingFont}, system-ui, sans-serif`);
     root.style.setProperty("--font-body", `${config.bodyFont}, system-ui, sans-serif`);
     root.style.setProperty("--heading-text-transform", config.uppercaseHeadings ? "uppercase" : "none");
@@ -1456,12 +1474,42 @@ export default function EditorShell({
       if (!response.ok) throw new Error(`Restore failed: ${response.status}`);
       await discardLocalChanges();
       window.location.reload();
+      return true;
     } catch (err) {
       console.error("Failed to restore:", err);
       setIsRestoring(false);
+      return false;
     }
   }, []);
 
+  // Restore requested straight from the history navigator. The navigator has
+  // already confirmed with the user, so this loads the content at that sha and
+  // runs the same restore path the HistoryToolbar uses.
+  useEffect(() => {
+    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}`);
+        const data = await res.json();
+        const ok = await handleHistoryRestore({
+          sections: data.sections,
+          index: data.index,
+          siteConfig: data.siteConfig,
+        });
+        // On success the page reloads, so only a failure ever reaches here.
+        if (!ok) historyRestoreFailedEvent.dispatch({ message: "Couldn't publish the restore." });
+      } catch (err) {
+        console.error("Failed to restore from history:", err);
+        historyRestoreFailedEvent.dispatch({ message: "Couldn't load that version." });
+      }
+    });
+  }, [handleHistoryRestore]);
+
+  // Publish unsaved-draft state to the other islands (see editorDirtyEvent).
+  useEffect(() => {
+    editorDirtyEvent.dispatch({ hasUnsavedChanges: dirtySectionIds.size > 0 });
+  }, [dirtySectionIds]);
+
   // --- Render ---
 
   if (shellState.phase === "loading-content") {
@@ -2269,6 +2317,7 @@ function GlobalModal() {
       isOpen={modalState !== null}
       onClose={closeModal}
       title={modalState?.title ?? ""}
+      tabbed={modalState?.tabbed}
     >
       {modalState?.content}
     </EditorModal>

package/src/components/shell/SiteSettingsModal.tsx

@@ -106,7 +106,7 @@ export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigCha
   const tabItems = allTabs.filter((t) => t.show).map(({ id, label, content }) => ({ id, label, content }));
 
   return (
-    <EditorModal isOpen={isOpen} onClose={onClose} title="Site Settings" size="settings" noPadding>
+    <EditorModal isOpen={isOpen} onClose={onClose} title="Site Settings" size="settings" noPadding tabbed>
       <div className="flex flex-1 flex-col overflow-hidden">
         <Tabs tabs={tabItems} />
 

package/src/hooks/useEditorPublish.ts

@@ -70,6 +70,10 @@ interface PublishDeps {
    *    clears only those (a deletion scheduled mid-save must stay scheduled). */
   onSuccess: (savedSectionIds: string[], meta: { editToken: number; sentDeletedIds: string[] }) => void;
   mediaManifest: MediaManifest;
+  /** Optional ref mirror of `mediaManifest`, read at save time. recoverConflict
+   *  refreshes it synchronously, so the immediate 409 retry assembles against
+   *  the rebased manifest instead of this render's pre-conflict copy. */
+  mediaManifestRef?: React.RefObject<MediaManifest>;
   manifestDirty: boolean;
   clearManifestDirty: () => void;
   pendingMediaItems: MediaItem[];
@@ -126,6 +130,7 @@ export function useEditorPublish({
   deletedSectionIds,
   onSuccess,
   mediaManifest,
+  mediaManifestRef,
   manifestDirty,
   clearManifestDirty,
   pendingMediaItems,
@@ -201,11 +206,12 @@ export function useEditorPublish({
     if (hasMediaChanges) {
       // Preserves folders (and any future manifest keys) and heals dangling
       // folder refs — never rebuild the manifest as a bare { images }.
-      // KNOWN LIMITATION (deferred): the assembly starts from THIS editor's
-      // view of the manifest, so concurrent media changes by another editor
-      // are last-writer-wins — a manifest entry they added since our load is
-      // dropped from the write (their files remain; the entry orphans). Fixing
-      // this needs a merge against the remote manifest at save time.
+      // The assembly starts from THIS editor's view, so what we send can be
+      // missing entries another writer added since we loaded. That is no longer
+      // destructive: applyContentWrite folds this into the manifest already on
+      // the branch, so a save can only add, update, or explicitly delete. The
+      // client side of the same story is rebaseMediaManifest, which refreshes
+      // our view on 409 recovery and on a peer's saved-event.
       updatedManifest = assembleSavedManifest(
         manifest,
         mediaUploads.map((u) => u.item),
@@ -390,7 +396,10 @@ export function useEditorPublish({
     return performSave({
       siteConfig: siteConfig!,
       siteIndexRef, deletedSectionIds, isConfigDirty,
-      pendingMediaItems, pendingMediaDeletions, mediaManifest, manifestDirty,
+      pendingMediaItems, pendingMediaDeletions, manifestDirty,
+      // Read through the ref (when the shell supplies one) so the 409 retry
+      // below sees recoverConflict's rebased manifest, not this render's copy.
+      mediaManifest: mediaManifestRef?.current ?? mediaManifest,
       saveChunkBudget,
     });
   }

package/src/lib/events.ts

@@ -23,5 +23,16 @@ export const navChangeEvent = createEvent<NavItem[]>("sitenavchange");
 export const darkModeEvent = createEvent<string>("sitedarkmode");
 export const siteNameChangeEvent = createEvent<string>("sitenamechange");
 export const historySelectEvent = createEvent<{ sha: string; date: string }>("history-select");
+/** Restore straight from the history navigator, skipping the browse-then-restore
+ *  detour. The shell loads the content at `sha` and runs the same restore path
+ *  HistoryToolbar uses. Confirmation happens before this is dispatched. */
+export const historyRestoreEvent = createEvent<{ sha: string; date: string }>("history-restore");
+/** Restore failed. The navigator is a separate island from the shell that does
+ *  the writing, so without this the failure is invisible and the UI sits on
+ *  "Restoring…" forever. */
+export const historyRestoreFailedEvent = createEvent<{ message: string }>("history-restore-failed");
+/** Unsaved-draft state, published by the shell for other islands (the history
+ *  navigator warns before restoring, which discards drafts irrecoverably). */
+export const editorDirtyEvent = createEvent<{ hasUnsavedChanges: boolean }>("editor-dirty");
 export const siteNavChangeEvent = createEvent<SiteNav>("sitenavchange-v2");
 export const pageSelectEvent = createEvent<string>("pageselect");