@drawnagency/primitives 0.1.106 → 0.1.108

package/src/components/sections/IconList/IconList.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useState, useCallback, useId } from "react";
 import type { SectionContent } from "../../../schemas/sections";
 import { cn } from "../../../lib/cn";
 import { getIcon } from "../../../lib/icons";
@@ -200,7 +200,8 @@ function EditIconList({
   iconClassName: string;
   onItemsChange: (items: IconListItem[]) => void;
 }) {
-  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+  const listId = useId();
+  const { wrappedItems, onReorder, onAdd, onInsertItem, onRemove } = useEditableCollection({
     items,
     onChange: onItemsChange,
     createItem: () => ({ label: "", text: "" }),
@@ -211,6 +212,57 @@ function EditIconList({
     targetId: string | null;
   }>({ sourceId: null, targetId: null });
 
+  // The drop transaction lives here, not in the row/trailing drop targets,
+  // because this monitor is GLOBAL: every icon list on the page sees the same
+  // drop and acts on its own collection — the source removes, the destination
+  // inserts, and a same-list drop reorders. Rows only advertise where they are.
+  // Handlers are read through a ref so the monitor subscribes exactly once.
+  const cfgRef = useRef({ listId, onReorder, onRemove, onInsertItem });
+  cfgRef.current = { listId, onReorder, onRemove, onInsertItem };
+
+  useEffect(() => {
+    let cleanup: (() => void) | undefined;
+    let cancelled = false;
+
+    import("@atlaskit/pragmatic-drag-and-drop/element/adapter").then(({ monitorForElements }) => {
+      if (cancelled) return;
+      cleanup = monitorForElements({
+        onDrop: ({ source, location }) => {
+          if (source.data.dragType !== "icon-list-row") return;
+          // Every list clears its own indicator on any drop — this is what stops
+          // the destination's drop line sticking after a cross-list transfer.
+          setDragState({ sourceId: null, targetId: null });
+
+          const { listId: my, onReorder, onRemove, onInsertItem } = cfgRef.current;
+          const target = location.current.dropTargets[0];
+          if (!target) return;
+          const srcListId = source.data.listId as string;
+          const dstListId = target.data.listId as string;
+          const fromIndex = source.data.index as number;
+          const targetIndex = target.data.index as number;
+
+          if (srcListId === my && dstListId === my) {
+            // The trailing zone reports the post-list index; splicing the row out
+            // first shifts everything after it down one, hence the -1.
+            const toIndex = target.data.trailing ? targetIndex - 1 : targetIndex;
+            if (fromIndex !== toIndex) onReorder(fromIndex, toIndex);
+          } else if (srcListId === my) {
+            onRemove(source.data.id as string);
+          } else if (dstListId === my) {
+            // Nothing is spliced out of this list, so the target index is the
+            // insert position as-is (the trailing zone's index appends).
+            onInsertItem(targetIndex, source.data.item as IconListItem);
+          }
+        },
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, []);
+
   const updateItem = useCallback(
     (index: number, patch: Partial<IconListItem>) => {
       const updated = wrappedItems.map((w, i) =>
@@ -244,6 +296,7 @@ function EditIconList({
         <EditableRow
           key={wrapped.id}
           id={wrapped.id}
+          listId={listId}
           index={index}
           item={wrapped.data}
           defaultIcon={defaultIcon}
@@ -256,7 +309,6 @@ function EditIconList({
           iconClassName={iconClassName}
           dragState={dragState}
           setDragState={setDragState}
-          onReorder={onReorder}
           onRemove={onRemove}
           onUpdateItem={(patch) => updateItem(index, patch)}
           onDuplicate={() => duplicateItem(index)}
@@ -264,10 +316,10 @@ function EditIconList({
       ))}
 
       <TrailingDropZone
+        listId={listId}
         index={wrappedItems.length}
         dragState={dragState}
         setDragState={setDragState}
-        onReorder={onReorder}
       />
 
       {/* Add button — centered below list, visible on list hover */}
@@ -285,6 +337,7 @@ function EditIconList({
 
 function EditableRow({
   id,
+  listId,
   index,
   item,
   defaultIcon,
@@ -297,12 +350,12 @@ function EditableRow({
   iconClassName,
   dragState,
   setDragState,
-  onReorder,
   onRemove,
   onUpdateItem,
   onDuplicate,
 }: {
   id: string;
+  listId: string;
   index: number;
   item: IconListItem;
   defaultIcon: string | null | undefined;
@@ -315,13 +368,14 @@ function EditableRow({
   iconClassName: string;
   dragState: { sourceId: string | null; targetId: string | null };
   setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
-  onReorder: (from: number, to: number) => void;
   onRemove: (id: string) => void;
   onUpdateItem: (patch: Partial<IconListItem>) => void;
   onDuplicate: () => void;
 }) {
   const rowRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLButtonElement>(null);
+  const itemRef = useRef(item);
+  itemRef.current = item;
   const [iconHover, setIconHover] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
   const [dodontOpen, setDodontOpen] = useState(false);
@@ -344,24 +398,25 @@ function EditableRow({
 
       const cleanupDraggable = draggable({
         element: handle,
-        getInitialData: () => ({ dragType: "icon-list-row", id, index }),
+        // `item` rides along so a destination list can insert it verbatim —
+        // persisted icon-list items have no ids, only positions. Read from a ref
+        // so typing in the row doesn't re-register the drag mid-gesture.
+        getInitialData: () => ({ dragType: "icon-list-row", listId, id, index, item: itemRef.current }),
         onDragStart: () => setDragState({ sourceId: id, targetId: null }),
         onDrop: () => setDragState({ sourceId: null, targetId: null }),
       });
 
+      // Advertise only — EditIconList's monitor performs the move, so that one
+      // handler can see both sides of a cross-list transfer.
       const cleanupDropTarget = dropTargetForElements({
         element: row,
         canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-        getData: () => ({ id, index }),
+        getData: () => ({ listId, id, index }),
         onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
         onDragLeave: () =>
           setDragState((prev) =>
             prev.targetId === id ? { ...prev, targetId: null } : prev,
           ),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index as number;
-          if (fromIndex !== index) onReorder(fromIndex, index);
-        },
       });
 
       cleanup = () => {
@@ -374,7 +429,7 @@ function EditableRow({
       cancelled = true;
       cleanup?.();
     };
-  }, [id, index, onReorder, setDragState]);
+  }, [id, index, listId, setDragState]);
 
   const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
 
@@ -525,15 +580,15 @@ function EditableRow({
 }
 
 function TrailingDropZone({
+  listId,
   index,
   dragState,
   setDragState,
-  onReorder,
 }: {
+  listId: string;
   index: number;
   dragState: { sourceId: string | null; targetId: string | null };
   setDragState: React.Dispatch<React.SetStateAction<{ sourceId: string | null; targetId: string | null }>>;
-  onReorder: (fromIndex: number, toIndex: number) => void;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const trailingId = "__trailing__";
@@ -551,16 +606,12 @@ function TrailingDropZone({
       cleanup = dropTargetForElements({
         element: el,
         canDrop: ({ source }) => source.data.dragType === "icon-list-row",
-        getData: () => ({ id: trailingId, index }),
+        getData: () => ({ listId, id: trailingId, index, trailing: true }),
         onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
         onDragLeave: () =>
           setDragState((prev) =>
             prev.targetId === trailingId ? { ...prev, targetId: null } : prev,
           ),
-        onDrop: ({ source }) => {
-          const fromIndex = source.data.index as number;
-          if (fromIndex !== index - 1) onReorder(fromIndex, index - 1);
-        },
       });
     });
 
@@ -568,9 +619,11 @@ function TrailingDropZone({
       cancelled = true;
       cleanup?.();
     };
-  }, [index, onReorder, setDragState]);
+  }, [index, listId, setDragState]);
 
-  const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
+  // targetId is only ever set by an icon-list drag entering this zone, so its
+  // presence is the whole condition — a cross-list drag leaves sourceId null here.
+  const isDropTarget = dragState.targetId === trailingId;
 
   return (
     <div

package/src/components/shell/EditorShell.tsx

@@ -67,8 +67,6 @@ import {
   discardLocalChanges,
   getCachedContent,
   cacheContent,
-  persistMediaManifest,
-  getMediaManifest,
   getPendingMediaItems,
   getPendingMediaBlobs,
   getPendingMediaDeletions,
@@ -311,6 +309,13 @@ export default function EditorShell({
   // immediate 409 retry assembles the saved manifest against the rebased copy.
   const mediaManifestRef = useRef<MediaManifest>(mediaManifest);
   useEffect(() => { mediaManifestRef.current = mediaManifest; }, [mediaManifest]);
+  // Same reason, for the document sidecar: the collab handlers cache it against a
+  // remote sha, and reading the state directly there would either capture a stale
+  // closure copy (writing an outdated sidecar for that sha — "File missing" on the
+  // next cache hit) or force documentManifest into their dep arrays, churning the
+  // callback identity the collab wiring subscribes with.
+  const documentManifestRef = useRef<DocumentManifest | null>(documentManifest);
+  useEffect(() => { documentManifestRef.current = documentManifest; }, [documentManifest]);
   // 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.
@@ -603,13 +608,22 @@ export default function EditorShell({
       // snapshot, never the rebased result. Caching the rebase (local dirty
       // overlays folded in) would poison the next recovery's diff: dirty
       // sections would read as remote-unchanged (silent local-wins) and a
-      // locally-added section would read as "deleted remotely".
+      // locally-added section would read as "deleted remotely". The manifest
+      // follows the same rule: the remote one, not the rebased view.
       await cacheContent(
         remote.sha ?? remote.savedBranchSha ?? headSha,
         remote.sections,
         remote.index,
         remote.siteConfig,
-        { savedBranchSha: remote.savedBranchSha, changedSectionIds: remote.changedSectionIds, mainIndex: remote.mainIndex },
+        {
+          media: remote.mediaManifest ?? mediaManifestRef.current,
+          documents: remote.documentManifest ?? documentManifestRef.current ?? {},
+        },
+        {
+          savedBranchSha: remote.savedBranchSha,
+          changedSectionIds: remote.changedSectionIds,
+          mainIndex: remote.mainIndex,
+        },
       );
       return true;
     } catch (err) {
@@ -698,13 +712,21 @@ export default function EditorShell({
       // ...but the CLEAN fetched remote snapshot is what gets cached as the
       // baseline (amendment 1: caching the rebased result would poison the next
       // 409 recovery — dirty sections would read as remote-unchanged and a ghost
-      // race would never surface).
+      // race would never surface). Same for the manifest: remote, not rebased.
       await cacheContent(
         remote.sha ?? remote.savedBranchSha ?? headSha,
         remote.sections,
         remote.index,
         remote.siteConfig,
-        { savedBranchSha: remote.savedBranchSha, changedSectionIds: remote.changedSectionIds, mainIndex: remote.mainIndex },
+        {
+          media: remote.mediaManifest ?? mediaManifestRef.current,
+          documents: remote.documentManifest ?? documentManifestRef.current ?? {},
+        },
+        {
+          savedBranchSha: remote.savedBranchSha,
+          changedSectionIds: remote.changedSectionIds,
+          mainIndex: remote.mainIndex,
+        },
       );
     } catch (err) {
       console.error("Remote saved-event sync failed:", err);
@@ -947,17 +969,24 @@ export default function EditorShell({
     // just-saved sections now differ from main, so fold them into
     // changedSectionIds (state + ref + cache stay consistent, and a reload that
     // hits this cache shows the same badges the server would report).
-    onBaselineCommitted: async ({ sha, sections: baselineSections, index, savedIds }) => {
+    onBaselineCommitted: async ({ sha, sections: baselineSections, index, savedIds, mediaManifest: committedManifest, documentManifest: committedDocumentManifest }) => {
       const changed = new Set(
         [...changedSectionIdsRef.current, ...savedIds].filter((id) => id in index.sections),
       );
       changedSectionIdsRef.current = changed;
       setChangedSectionIds(changed);
-      await cacheContent(sha, baselineSections, index, (siteConfig ?? {}) as Record<string, unknown>, {
-        savedBranchSha: sha,
-        changedSectionIds: [...changed],
-        mainIndex: mainIndexRef.current,
-      });
+      await cacheContent(
+        sha, baselineSections, index, (siteConfig ?? {}) as Record<string, unknown>,
+        // What the save actually committed — NOT the refs/state, which the
+        // onMediaPublished / onDocumentsPublished callbacks only refresh through a
+        // state effect and can still lag by a render at this point.
+        { media: committedManifest, documents: committedDocumentManifest },
+        {
+          savedBranchSha: sha,
+          changedSectionIds: [...changed],
+          mainIndex: mainIndexRef.current,
+        },
+      );
     },
     savingRef: inFlightSaveRef,
     getEditGeneration: persistence.currentGeneration,
@@ -1148,36 +1177,40 @@ export default function EditorShell({
       // deliberately don't block every load on a freshness fetch to validate this.
       const cacheKeySha = draftHeadSha ?? headSha;
 
+      // A row missing either sidecar predates them moving onto it (v11); it is
+      // not a usable snapshot — serving it would render every image as "No Image"
+      // and every committed document as "File missing" — so treat it as a miss
+      // and re-fetch. An EMPTY manifest is a legitimate value, not an absence.
       const cached = await getCachedContent();
-      if (cached && cached.sha === cacheKeySha) {
+      if (cached && cached.sha === cacheKeySha && cached.mediaManifest && cached.documentManifest) {
         loadedSections = cached.sections;
         loadedIndex = cached.index;
         loadedConfig = SiteConfigSchema.parse(cached.siteConfig);
-        const savedManifest = await getMediaManifest();
-        if (savedManifest) loadedManifest = savedManifest;
+        loadedManifest = cached.mediaManifest;
         setSavedSha(cached.savedBranchSha ?? null);
         setMainSha(headSha);
         setChangedSectionIds(new Set(cached.changedSectionIds ?? []));
         setMainIndex(cached.mainIndex ?? loadedIndex);
         // Without this, a cache-hit load left documentManifest null forever —
         // the siteDocuments memo's null-guard then never lifted and every
-        // document row (committed or staged) read "File missing".
-        setDocumentManifest(cached.documentManifest ?? {});
+        // document row (committed or staged) read "File missing". The row's copy
+        // is authoritative: the hit gate above rejected a row without one.
+        setDocumentManifest(cached.documentManifest);
       } else {
         const data = await fetchSavedContent();
         loadedSections = data.sections;
         loadedIndex = data.index;
         loadedConfig = SiteConfigSchema.parse(data.siteConfig);
-        await cacheContent(data.sha, data.sections, data.index, data.siteConfig, {
-          savedBranchSha: data.savedBranchSha,
-          changedSectionIds: data.changedSectionIds,
-          mainIndex: data.mainIndex,
-          documentManifest: data.documentManifest ?? {},
-        });
-        if (data.mediaManifest) {
-          loadedManifest = data.mediaManifest;
-          await persistMediaManifest(loadedManifest);
-        }
+        if (data.mediaManifest) loadedManifest = data.mediaManifest;
+        await cacheContent(
+          data.sha, data.sections, data.index, data.siteConfig,
+          { media: loadedManifest, documents: data.documentManifest ?? {} },
+          {
+            savedBranchSha: data.savedBranchSha,
+            changedSectionIds: data.changedSectionIds,
+            mainIndex: data.mainIndex,
+          },
+        )
         setDocumentManifest(data.documentManifest ?? {});
         setSavedSha(data.savedBranchSha);
         setMainSha(headSha);
@@ -1343,9 +1376,11 @@ export default function EditorShell({
         setSiteConfig(parsed.data);
         applySiteConfigPreview(parsed.data);
       }
+      // Discard restores the cached snapshot, so the sidecars must come from that
+      // same row — anything else could disagree with the sections we just set.
+      if (cached.mediaManifest) setMediaManifest(cached.mediaManifest);
+      if (cached.documentManifest) setDocumentManifest(cached.documentManifest);
     }
-    const savedManifest = await getMediaManifest();
-    setMediaManifest(savedManifest ?? { images: {}, folders: {} });
     persistence.clearConfigDirty();
     // Discard wiped the Dexie siteIndex row — no unsaved structure remains.
     // Tokenless: discard is unconditional, unlike the save-success clear.
@@ -2451,7 +2486,10 @@ function EditorContent({
   }, [onBlockMove]);
 
   return (
-    <div>
+    // `.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) {

package/src/components/shell/MediaLibraryModal.tsx

@@ -94,7 +94,7 @@ function DocumentTile({ doc, manage, isSelected, refCount, showFolderChip, onCli
   isSelected: boolean;
   refCount: number;
   showFolderChip: boolean;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent) => void;
 }) {
   return (
     <button
@@ -262,7 +262,7 @@ function UploadZone({ onUpload, onFolderUpload }: {
 
 function MediaCard({ item, manage, isSelected, dragIds, onClick, children }: {
   item: MediaItem; manage: boolean; isSelected: boolean;
-  dragIds: string[]; onClick: () => void; children: React.ReactNode;
+  dragIds: string[]; onClick: (e: React.MouseEvent) => void; children: React.ReactNode;
 }) {
   const drag = useMediaDraggable<HTMLDivElement>({
     enabled: manage,
@@ -446,7 +446,18 @@ export function MediaLibraryModal({
       })
     : [];
 
+  // Visual order of the item grid: documents render before images, and a CSS
+  // grid lays both out in source order, so an index range here is exactly the
+  // range a shift-click spans on screen — rows included.
+  const orderedIds = [...filteredDocuments.map((doc) => doc.id), ...filtered.map((item) => item.id)];
+
+  // Anchor for shift-click range selection. Stored as an id, not an index:
+  // `filtered`/`filteredDocuments` are recomputed every render, so an index
+  // would go stale on search, filter, or folder navigation.
+  const rangeAnchorId = useRef<string | null>(null);
+
   function toggleSelect(id: string) {
+    rangeAnchorId.current = id;
     setSelected((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
@@ -458,6 +469,32 @@ export function MediaLibraryModal({
     });
   }
 
+  function selectRangeTo(id: string) {
+    const anchor = rangeAnchorId.current;
+    const from = anchor === null ? -1 : orderedIds.indexOf(anchor);
+    const to = orderedIds.indexOf(id);
+    // No usable anchor (never clicked, or it was filtered/deleted away) — fall
+    // back to a plain toggle so the click is never a no-op.
+    if (from === -1 || to === -1) {
+      toggleSelect(id);
+      return;
+    }
+    const range = orderedIds.slice(Math.min(from, to), Math.max(from, to) + 1);
+    // The anchor stays put so the range can be re-extended by shift-clicking
+    // again, and the range adds rather than toggles (matching file explorers).
+    setSelected((prev) => new Set([...prev, ...range]));
+  }
+
+  function handleItemClick(id: string, e: React.MouseEvent) {
+    if (e.shiftKey) {
+      // Shift-click otherwise drags a native text selection across the grid.
+      e.preventDefault();
+      selectRangeTo(id);
+    } else {
+      toggleSelect(id);
+    }
+  }
+
   const [confirmDelete, setConfirmDelete] = useState(false);
 
   // One selection, two kinds. Everything downstream — delete dispatch, usage
@@ -837,7 +874,7 @@ export function MediaLibraryModal({
                 isSelected={selected.has(doc.id)}
                 refCount={documentReferenceCountMap[doc.id] ?? 0}
                 showFolderChip={filtering && documentsFolderEnabled}
-                onClick={() => (manage ? toggleSelect(doc.id) : onSelect(doc.id))}
+                onClick={(e) => (manage ? handleItemClick(doc.id, e) : onSelect(doc.id))}
               />
             ))}
             {filtered.map((item) => {
@@ -853,11 +890,11 @@ export function MediaLibraryModal({
                   manage={manage}
                   isSelected={isSelected}
                   dragIds={dragIds}
-                  onClick={() => {
+                  onClick={(e) => {
                     if (mode === "select") {
                       onSelect(item.id);
                     } else {
-                      toggleSelect(item.id);
+                      handleItemClick(item.id, e);
                     }
                   }}
                 >

package/src/components/shell/SectionTypePicker.tsx

@@ -13,10 +13,19 @@ interface SectionTypePickerProps {
   containerRef?: RefObject<HTMLElement | null>;
 }
 
+const BUTTON_CLASS =
+  "cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast";
+
 export function SectionTypePicker({ types, onSelect, onClose, containerRef }: SectionTypePickerProps) {
   const panelRef = useRef<HTMLDivElement>(null);
   const dismissRef = containerRef ?? panelRef;
 
+  // Container is a layout choice rather than a content block, so it gets its own
+  // full-width row above a divider. It's absent from the container child picker
+  // (one level of nesting), in which case there's no lead row and no divider.
+  const lead = types.find((t) => t.type === "container");
+  const rest = types.filter((t) => t !== lead);
+
   useEffect(() => {
     function handleMouseDown(e: MouseEvent) {
       if (dismissRef.current && !dismissRef.current.contains(e.target as Node)) {
@@ -32,10 +41,27 @@ export function SectionTypePicker({ types, onSelect, onClose, containerRef }: Se
       ref={panelRef}
       className="z-50 mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3"
     >
-      {types.map(({ type, label, icon }) => (
+      {lead && (
+        <>
+          <button
+            key={lead.type}
+            className={`${BUTTON_CLASS} col-span-full`}
+            onClick={() => onSelect(lead.type)}
+          >
+            {lead.icon && (
+              <span className="flex h-5 w-5 shrink-0 items-center justify-center text-base-contrast-light/60">
+                {lead.icon}
+              </span>
+            )}
+            <span>{lead.label}</span>
+          </button>
+          <hr className="col-span-full border-base-200" />
+        </>
+      )}
+      {rest.map(({ type, label, icon }) => (
         <button
           key={type}
-          className="cursor-pointer flex items-center gap-3 rounded-lg border border-base-200 bg-base px-4 py-3 text-left text-sm text-base-contrast-light transition-colors hover:border-base-300 hover:bg-base-accent hover:text-base-contrast"
+          className={BUTTON_CLASS}
           onClick={() => onSelect(type)}
         >
           {icon && (

package/src/hooks/useEditorPublish.ts

@@ -98,7 +98,7 @@ interface PublishDeps {
    *  baseline that recoverConflict diffs against. Without this, the baseline
    *  dies at the first save (discardSavedChanges clears it) and later 409
    *  recoveries would silently merge local-wins. */
-  onBaselineCommitted?: (args: { sha: string; sections: LoadedSection[]; index: SiteIndex; savedIds: string[] }) => Promise<void>;
+  onBaselineCommitted?: (args: { sha: string; sections: LoadedSection[]; index: SiteIndex; savedIds: string[]; mediaManifest: MediaManifest; documentManifest: DocumentManifest }) => Promise<void>;
   /** Injected by EditorShell. Receives non-fatal server warnings from a
    *  successful save (e.g. the nav.json replacement was declined by the
    *  degraded-nav guard) so the shell can surface them instead of the save
@@ -291,6 +291,15 @@ export function useEditorPublish({
     uploadedItems: MediaItem[];
     // The index actually sent (deletions applied) — the committed index state.
     sentIndex: SiteIndex;
+    // The media manifest as committed by this save: the assembled manifest when
+    // media changed, otherwise the (unchanged) manifest we saved against. The
+    // content-cache re-prime writes it alongside the new sha, so the two can
+    // never drift.
+    committedManifest: MediaManifest;
+    // The document sidecar as committed by this save — the view we saved against,
+    // plus the entries this save committed, minus the ids it deleted. Same
+    // contract as committedManifest: it rides the cache write for this sha.
+    committedDocumentManifest: DocumentManifest;
     committedDocumentIds: string[];
     // The deleted ids the final request actually carried — empty when nothing
     // was staged, and never populated on a failure (see the catch below).
@@ -499,6 +508,10 @@ export function useEditorPublish({
         savedSections: dirty.map(({ sectionId, updatedAt, content }) => ({ sectionId, updatedAt, content })),
         uploadedItems: [...uploadedItems, ...finalUploads.map((u) => u.item)],
         sentIndex: siteIndex,
+        committedManifest: gathered.updatedManifest ?? args.mediaManifest,
+        // Read AFTER the final request: committedDocuments is complete and the
+        // deletions (which ride only that request) have landed.
+        committedDocumentManifest: documentManifestToSend(),
         committedDocumentIds,
         committedDocumentDeletions: args.pendingDocumentDeletions,
       };
@@ -659,7 +672,7 @@ export function useEditorPublish({
         return;
       }
 
-      const { sha, savedSections, uploadedItems, sentIndex, committedDocumentIds, committedDocumentDeletions } = await saveWithConflictRecovery();
+      const { sha, savedSections, uploadedItems, sentIndex, committedManifest, committedDocumentManifest, committedDocumentIds, committedDocumentDeletions } = await saveWithConflictRecovery();
       onShasUpdated(sha, null);
 
       try {
@@ -681,6 +694,8 @@ export function useEditorPublish({
             sections: baselineSections,
             index: sentIndex,
             savedIds: savedSections.map((s) => s.sectionId),
+            mediaManifest: committedManifest,
+            documentManifest: committedDocumentManifest,
           });
         }
         finishSave(uploadedItems, savedSections.map((s) => s.sectionId));
@@ -750,10 +765,12 @@ export function useEditorPublish({
       let savedSections: { sectionId: string; updatedAt: string; content: SectionContent }[] = [];
       let uploadedItems: MediaItem[] = [];
       let sentIndex: SiteIndex | null = null;
+      let committedManifest: MediaManifest | null = null;
+      let committedDocumentManifest: DocumentManifest | null = null;
       let committedDocumentIds: string[] = [];
       let committedDocumentDeletions: string[] = [];
       if (hasLocalEdits) {
-        ({ savedSections, uploadedItems, sentIndex, committedDocumentIds, committedDocumentDeletions } = await saveWithConflictRecovery());
+        ({ savedSections, uploadedItems, sentIndex, committedManifest, committedDocumentManifest, committedDocumentIds, committedDocumentDeletions } = await saveWithConflictRecovery());
       }
 
       setPublishAction("publishing");
@@ -789,7 +806,15 @@ export function useEditorPublish({
             savedRows: savedSections,
             sentIndex: sentIndex!,
           });
-          await cacheContent(sha, baselineSections, sentIndex!, siteConfig!);
+          // Both sidecars ride the same write as the sha they belong to: publish
+          // deleted the draft, so main's head IS this sha and the next load hits
+          // this row. Omitting them here is what blanked freshly uploaded images
+          // ("No Image", while the published site was correct) and freshly
+          // committed documents ("File missing").
+          await cacheContent(sha, baselineSections, sentIndex!, siteConfig!, {
+            media: committedManifest!,
+            documents: committedDocumentManifest!,
+          });
           finishSave(uploadedItems, savedSections.map((s) => s.sectionId));
           if (committedDocumentIds.length > 0) onDocumentsPublished?.(committedDocumentIds);
           if (committedDocumentDeletions.length > 0) onDocumentsDeleted?.(committedDocumentDeletions);

package/src/lib/container-ops.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import type { Section } from "../schemas/sections";
 import { getAllSections } from "./registry";
+import { sortInsertMenuOptions } from "./insert-menu";
 
 interface ContainerContent {
   columns: number;
@@ -40,9 +41,11 @@ export function reorderChild(container: Section, from: number, to: number): Sect
  * single, testable source of truth (the container toolbar's "+" picker uses it).
  */
 export function childInsertableTypes(): { type: string; label: string; icon: ReactNode }[] {
-  return getAllSections()
-    .filter((d) => d.type !== "container" && d.type !== "spacer")
-    .map((d) => ({ type: d.type, label: d.label, icon: d.icon }));
+  return sortInsertMenuOptions(
+    getAllSections()
+      .filter((d) => d.type !== "container" && d.type !== "spacer")
+      .map((d) => ({ type: d.type, label: d.label, icon: d.icon })),
+  );
 }
 
 export function insertChildAt(container: Section, child: Section, index: number): Section {