@drawnagency/primitives 0.1.109 → 0.1.111

package/src/components/shell/BugReportFAB.tsx

@@ -6,6 +6,8 @@ import Fab from "../shared/Fab";
 
 type Category = "Visual" | "Unexpected Behavior" | "Media / Media Library" | "Save / Publish" | "Feature Request" | "Other";
 
+const MAX_IMAGES = 5;
+
 const CATEGORIES: Category[] = [
   "Visual",
   "Unexpected Behavior",
@@ -38,8 +40,11 @@ export function BugReportFAB() {
   const [isDragOver, setIsDragOver] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
+  const [imageNotice, setImageNotice] = useState<string | null>(null);
   const [descriptionError, setDescriptionError] = useState<string | null>(null);
   const [toast, setToast] = useState<string | null>(null);
+  const toastTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => () => { if (toastTimerRef.current) clearTimeout(toastTimerRef.current); }, []);
   const capturedContextRef = useRef<CapturedContext | null>(null);
   const dropZoneRef = useRef<HTMLDivElement>(null);
 
@@ -87,11 +92,22 @@ export function BugReportFAB() {
         name: file.name,
       })),
     );
-    setImages((prev) => [...prev, ...newPreviews].slice(0, 5));
+    setImages((prev) => {
+      const next = [...prev, ...newPreviews];
+      // The cap keeps the FIRST five, so a sixth drop silently threw away the
+      // shot the reporter had just taken. Say what happened instead.
+      if (next.length > MAX_IMAGES) {
+        setImageNotice(`Only ${MAX_IMAGES} screenshots can be attached — ${next.length - MAX_IMAGES} were not added.`);
+        return next.slice(0, MAX_IMAGES);
+      }
+      setImageNotice(null);
+      return next;
+    });
   }, [fileToDataUri]);
 
   const handleRemoveImage = useCallback((index: number) => {
     setImages((prev) => prev.filter((_, i) => i !== index));
+    setImageNotice(null);
   }, []);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
@@ -171,7 +187,8 @@ export function BugReportFAB() {
 
       handleClose();
       setToast("Bug report submitted");
-      setTimeout(() => setToast(null), 3000);
+      if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+      toastTimerRef.current = setTimeout(() => setToast(null), 3000);
     } catch (err) {
       setSubmitError(err instanceof Error ? err.message : "Submission failed");
     } finally {
@@ -287,6 +304,7 @@ export function BugReportFAB() {
                 Drop images here or paste from clipboard
               </p>
             </div>
+            {imageNotice && <p className="mt-1 text-xs text-red-600">{imageNotice}</p>}
 
             {/* Thumbnail previews */}
             {images.length > 0 && (

package/src/components/shell/EditorShell.tsx

@@ -31,7 +31,7 @@ import { EditorModal } from "./EditorModal";
 import { SiteSettingsModal } from "./SiteSettingsModal";
 import ChatWidget from "../chat/ChatWidget";
 import { MediaLibraryModal } from "./MediaLibraryModal";
-import { MediaLibraryContext, type LibraryKind } from "./MediaLibraryContext";
+import { MediaLibraryContext, type LibraryKind, type MediaLibraryContextValue } from "./MediaLibraryContext";
 import { ProcessingIndicator } from "./ProcessingIndicator";
 import { SectionSkeleton } from "./SectionSkeleton";
 import { SectionTypePicker } from "./SectionTypePicker";
@@ -179,6 +179,12 @@ interface Props {
   collabBootstrap?: CollabBootstrap | null;
 }
 
+/** Stable empty map for the closed-modal case, so the memos below don't churn. */
+const EMPTY_COUNTS: Record<string, number> = {};
+
+/** Short enough that a colour-picker drag still reads as live. */
+const CONFIG_PREVIEW_DEBOUNCE_MS = 120;
+
 export default function EditorShell({
   headSha,
   draftHeadSha,
@@ -208,6 +214,18 @@ export default function EditorShell({
   // documents): U6's registry publish skips null so document rows keep the
   // overlay island's SSR seed instead of flashing "File missing" on mount.
   const [documentManifest, setDocumentManifest] = useState<DocumentManifest | null>(null);
+  // Read by the post-await cacheContent calls below. Every one of them re-primes
+  // the cache at a NEW sha, so omitting the manifest doesn't just skip a field —
+  // it writes null, and the next reload takes the cache hit and reports every
+  // document missing until the cache is invalidated. The collab handlers read it
+  // too: reading the state directly there would either capture a stale closure
+  // copy or force documentManifest into their dep arrays, churning the callback
+  // identity the collab wiring subscribes with.
+  //
+  // Assigned synchronously on render, NOT in an effect — the readers above run
+  // after an await in the same tick, which an effect-updated ref serves stale.
+  const documentManifestRef = useRef<DocumentManifest | null>(documentManifest);
+  documentManifestRef.current = documentManifest;
   const [showMediaLibrary, setShowMediaLibrary] = useState(false);
   const [mediaModalMode, setMediaModalMode] = useState<"select" | "manage">("manage");
   const [mediaSelectCallback, setMediaSelectCallback] = useState<((id: string) => void) | null>(null);
@@ -309,13 +327,11 @@ 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]);
+  // The manifest our working copy diverged from — the last one we fetched, and
+  // the only way rebaseMediaManifest can tell "we deleted this folder" from
+  // "they created it". Advanced on every load and every rebase, never on a local
+  // folder edit.
+  const baseMediaManifestRef = useRef<MediaManifest | null>(null);
   // 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.
@@ -548,6 +564,7 @@ export default function EditorShell({
         dirtySectionIds: dirtyIds,
         locallyAddedIds,
         locallyDeletedIds: deletedSections,
+        baselineIndex: cached?.index,
         remoteSections: remote.sections,
         remoteIndex: remote.index,
         // rebaseContent self-detects remote deletions of dirty sections, so we
@@ -584,9 +601,14 @@ export default function EditorShell({
       }
 
       const rebasedManifest = remote.mediaManifest
-        ? rebaseMediaManifest(mediaManifestRef.current, remote.mediaManifest)
+        ? rebaseMediaManifest(
+            mediaManifestRef.current,
+            remote.mediaManifest,
+            baseMediaManifestRef.current ?? undefined,
+          )
         : null;
       if (rebasedManifest) setMediaManifest(rebasedManifest);
+      if (remote.mediaManifest) baseMediaManifestRef.current = remote.mediaManifest;
 
       setSections(mergedSections);
       setSiteIndex(mergedIndex);
@@ -603,7 +625,12 @@ export default function EditorShell({
       siteIndexRef.current = mergedIndex;
       changedSectionIdsRef.current = new Set(remote.changedSectionIds);
       mainIndexRef.current = remote.mainIndex;
-      remoteSectionIdsRef.current = new Set(mergedIndex.pages.flatMap((p) => p.order));
+      // From the FETCHED remote index, not `mergedIndex` — the rebase
+      // deliberately preserves locallyAddedIds, and a never-saved local section
+      // is by definition not on the remote. Taking it from the merge would let a
+      // later delete of that section enqueue a file deletion for a path that was
+      // never committed.
+      remoteSectionIdsRef.current = new Set(remote.index.pages.flatMap((p) => p.order));
       // C2: the cache is the CLEAN baseline — always the fetched remote
       // snapshot, never the rebased result. Caching the rebase (local dirty
       // overlays folded in) would poison the next recovery's diff: dirty
@@ -686,6 +713,7 @@ export default function EditorShell({
         dirtySectionIds: dirtyIds,
         locallyAddedIds,
         locallyDeletedIds: deletedSections,
+        baselineIndex: cached?.index,
         remoteSections: remote.sections,
         remoteIndex: remote.index,
         remoteChangedIds,
@@ -693,9 +721,14 @@ export default function EditorShell({
 
       // The rebased result goes into React state (live view)...
       if (remote.mediaManifest) {
-        const rebasedManifest = rebaseMediaManifest(mediaManifestRef.current, remote.mediaManifest);
+        const rebasedManifest = rebaseMediaManifest(
+          mediaManifestRef.current,
+          remote.mediaManifest,
+          baseMediaManifestRef.current ?? undefined,
+        );
         setMediaManifest(rebasedManifest);
         mediaManifestRef.current = rebasedManifest;
+        baseMediaManifestRef.current = remote.mediaManifest;
       }
       setSections(result.sections);
       setSiteIndex(result.index);
@@ -707,7 +740,9 @@ export default function EditorShell({
       savedShaRef.current = remote.savedBranchSha;
       changedSectionIdsRef.current = new Set(remote.changedSectionIds);
       mainIndexRef.current = remote.mainIndex;
-      remoteSectionIdsRef.current = new Set(result.index.pages.flatMap((p) => p.order));
+      // Fetched remote, not the rebased `result` — see the identical note in
+      // recoverConflict.
+      remoteSectionIdsRef.current = new Set(remote.index.pages.flatMap((p) => p.order));
 
       // ...but the CLEAN fetched remote snapshot is what gets cached as the
       // baseline (amendment 1: caching the rebased result would poison the next
@@ -808,6 +843,16 @@ export default function EditorShell({
   });
   useEffect(() => { collabRef.current = collab; }, [collab]);
 
+  // Cached closures for sections that no longer exist are dead weight for the
+  // rest of the session — a long editing run of adds and deletes accumulates one
+  // per id ever seen.
+  useEffect(() => {
+    const live = new Set(sections.map((l) => l.section.id));
+    for (const id of editIntentByIdRef.current.keys()) {
+      if (!live.has(id)) editIntentByIdRef.current.delete(id);
+    }
+  }, [sections]);
+
   // Stable per-section onEditIntent: focus + lock request. The cached closure
   // always calls the LIVE session via collabRef, so it needn't change identity.
   const getEditIntent = useCallback((id: string): (() => Promise<boolean>) => {
@@ -1191,6 +1236,10 @@ export default function EditorShell({
         setMainSha(headSha);
         setChangedSectionIds(new Set(cached.changedSectionIds ?? []));
         setMainIndex(cached.mainIndex ?? loadedIndex);
+        // Cached alongside the content: without it a cache-hit load showed no
+        // damaged-section banner at all, so a broken section file stayed
+        // invisible until the next fresh fetch.
+        setUnparseableSectionIds(cached.unparseableSectionIds ?? []);
         // 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". The row's copy
@@ -1209,6 +1258,9 @@ export default function EditorShell({
             savedBranchSha: data.savedBranchSha,
             changedSectionIds: data.changedSectionIds,
             mainIndex: data.mainIndex,
+            // Rides the same row as the content it describes — a cache-hit load
+            // showed no damaged-section banner at all until this came along.
+            unparseableSectionIds: data.unparseableSectionIds,
           },
         )
         setDocumentManifest(data.documentManifest ?? {});
@@ -1237,6 +1289,7 @@ export default function EditorShell({
       remoteSectionIdsRef.current = new Set(loadedIndex.pages.flatMap((p) => p.order));
       setSiteConfig(loadedConfig);
       setMediaManifest(loadedManifest);
+      baseMediaManifestRef.current = loadedManifest;
       siteIndexRef.current = loadedIndex;
       applySiteConfigPreview(loadedConfig);
 
@@ -1353,6 +1406,69 @@ export default function EditorShell({
     setShellState({ phase: "ready" });
   }, [sections, applySiteConfigPreview, persistence]);
 
+  // Usage counts are only read by the media modal, and computing them walks every
+  // section (plus the whole siteConfig for images). Gate them on the modal being
+  // open so a keystroke doesn't pay for two deep structural passes.
+  const referenceCountMap = useMemo(
+    () => (showMediaLibrary ? mediaPipeline.computeReferenceCountMap() : EMPTY_COUNTS),
+    [showMediaLibrary, mediaPipeline.computeReferenceCountMap],
+  );
+  const documentReferenceCountMap = useMemo(
+    () => (showMediaLibrary ? mediaPipeline.computeDocumentReferenceCountMap() : EMPTY_COUNTS),
+    [showMediaLibrary, mediaPipeline.computeDocumentReferenceCountMap],
+  );
+
+  // Memoized: rebuilt inline, these two arrays changed identity on every shell
+  // render, so a keystroke in the modal's alt-text field (which is controlled off
+  // mediaManifest) re-rendered the entire media grid.
+  const mediaLibraryItems = useMemo(
+    () => [
+      ...Object.values(mediaManifest.images),
+      ...mediaPipeline.pendingMediaItems,
+    ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id) && !item.hidden),
+    [mediaManifest.images, mediaPipeline.pendingMediaItems, mediaPipeline.pendingDeletions],
+  );
+
+  const mediaLibraryDocuments = useMemo(
+    () =>
+      Object.entries({
+        ...documentManifest,
+        ...Object.fromEntries(mediaPipeline.pendingDocuments.map((d) => [d.id, d.entry])),
+      })
+        // Deleted-but-unsaved documents stay in the manifest until the save
+        // commits them; the library must not offer them again.
+        .filter(([id]) => !mediaPipeline.pendingDocumentDeletions.includes(id))
+        .map(([id, entry]) => ({
+          id,
+          filename: entry.filename,
+          size: entry.size,
+          kind: entry.kind,
+        })),
+    [documentManifest, mediaPipeline.pendingDocuments, mediaPipeline.pendingDocumentDeletions],
+  );
+
+  // The two overrides EditorShell layers onto the pipeline's context, hoisted so
+  // they have stable identities.
+  const openSelectModal = useCallback<MediaLibraryContextValue["openSelectModal"]>((onSelect, opts) => {
+    setMediaModalMode("select");
+    setMediaSelectCallback(() => onSelect);
+    setMediaSelectKinds(opts?.kinds ?? null);
+    setShowMediaLibrary(true);
+  }, []);
+
+  const reportRejectedUploads = useCallback<MediaLibraryContextValue["reportRejectedUploads"]>((files) => {
+    setRejectedUploads(files);
+  }, []);
+
+  // Memoized: an inline object literal with two inline arrows defeated
+  // useMediaPipeline's own memoised contextValue entirely. useResolvedMedia and
+  // useResolvedDocument memoise on [id, ctx], so a fresh context per render made
+  // EVERY image on the page re-run provider.resolve() on every keystroke.
+  const mediaLibraryValue = useMemo(
+    () => ({ ...mediaPipeline.contextValue, openSelectModal, reportRejectedUploads }),
+    [mediaPipeline.contextValue, openSelectModal, reportRejectedUploads],
+  );
+
   const handleDiscard = useCallback(async () => {
     await discardLocalChanges();
     setLocalChangesExist(false);
@@ -1365,6 +1481,12 @@ export default function EditorShell({
     mediaPipeline.setPendingMediaItems([]);
     mediaPipeline.setPendingLocalUrls({});
     mediaPipeline.setPendingDeletions([]);
+    // Documents are a separate pipeline with its own two pending states, and
+    // both outlive discard unless cleared here: a doomed committed document
+    // would still be sent as `deletedDocumentIds` by the next save, and a
+    // staged upload would still be committed by it.
+    mediaPipeline.setPendingDocumentDeletions([]);
+    await mediaPipeline.unstageAllDocuments();
     const cached = await getCachedContent();
     if (cached) {
       setSections(cached.sections);
@@ -1378,7 +1500,12 @@ export default function EditorShell({
       }
       // 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.mediaManifest) {
+        setMediaManifest(cached.mediaManifest);
+        // Discard re-seeds the working copy from this row, so it is also the new
+        // divergence base for rebaseMediaManifest.
+        baseMediaManifestRef.current = cached.mediaManifest;
+      }
       if (cached.documentManifest) setDocumentManifest(cached.documentManifest);
     }
     persistence.clearConfigDirty();
@@ -1638,12 +1765,37 @@ export default function EditorShell({
     [persistence],
   );
 
+  // Debounced side effects for Site Settings edits. `setSiteConfig` stays
+  // immediate (the form is controlled off it), but the preview writes nine CSS
+  // custom properties, four synchronous localStorage.setItem calls and two event
+  // dispatches, and persistConfig is a Dexie write — all of which ran on every
+  // keystroke in the site-name field.
+  const configFlushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingConfigRef = useRef<SiteConfig | null>(null);
+
+  const flushSiteConfigSideEffects = useCallback(() => {
+    if (configFlushTimerRef.current) {
+      clearTimeout(configFlushTimerRef.current);
+      configFlushTimerRef.current = null;
+    }
+    const config = pendingConfigRef.current;
+    if (!config) return;
+    pendingConfigRef.current = null;
+    applySiteConfigPreview(config);
+    void persistence.persistConfig(config);
+  }, [applySiteConfigPreview, persistence]);
+
+  // Trailing edge always fires, and unmount flushes — so the last keystroke
+  // before closing Site Settings is never the one that gets dropped.
+  useEffect(() => flushSiteConfigSideEffects, [flushSiteConfigSideEffects]);
+
   const handleSiteConfigChange = useCallback((config: SiteConfig) => {
     setSiteConfig(config);
-    applySiteConfigPreview(config);
-    persistence.persistConfig(config);
     setLocalChangesExist(true);
-  }, [applySiteConfigPreview, persistence]);
+    pendingConfigRef.current = config;
+    if (configFlushTimerRef.current) clearTimeout(configFlushTimerRef.current);
+    configFlushTimerRef.current = setTimeout(flushSiteConfigSideEffects, CONFIG_PREVIEW_DEBOUNCE_MS);
+  }, [flushSiteConfigSideEffects]);
 
   // Recompose the social-preview raster (siteConfig.previewImage) when brand
   // inputs change. Debounced so text edits don't compose per keystroke. The
@@ -1680,7 +1832,10 @@ export default function EditorShell({
           const blob = await composePreviewImage(inputs);
           const file = new File([blob], "site-preview.webp", { type: "image/webp" });
           const { width, height } = servedPreviewSize(siteConfigRef.current!.media.sizes);
-          mediaPipeline.contextValue.uploadFileWithCallback(file, (imageId) => {
+          // enqueueFile, not uploadFileWithCallback: the latter mints a blob URL
+          // for an immediate local preview, and this call site discards it — so
+          // it was only ever revoked if the upload happened to succeed.
+          mediaPipeline.enqueueFile(file, (imageId) => {
             // Ignore a stale upload: a newer compose has superseded this one.
             if (gen !== previewGenRef.current) return;
             handleSiteConfigChange({
@@ -1811,19 +1966,11 @@ export default function EditorShell({
     <EditorProvider>
       <ViewBranchWatcher
         setViewSections={setViewSections}
+        onError={setRemoteNotice}
       />
       <HistoryWatcher onHistoryActiveChange={setHistoryActive} />
       <EditorModalProvider>
-        <MediaLibraryContext.Provider value={{
-          ...mediaPipeline.contextValue,
-          openSelectModal: (onSelect, opts) => {
-            setMediaModalMode("select");
-            setMediaSelectCallback(() => onSelect);
-            setMediaSelectKinds(opts?.kinds ?? null);
-            setShowMediaLibrary(true);
-          },
-          reportRejectedUploads: (files) => setRejectedUploads(files),
-        }}>
+        <MediaLibraryContext.Provider value={mediaLibraryValue}>
         <div className="editor-shell relative">
           <EditorToolbar
             buttonState={buttonState}
@@ -2094,23 +2241,8 @@ export default function EditorShell({
           >
             <MediaLibraryModal
               mode={mediaModalMode}
-              items={[
-                ...Object.values(mediaManifest.images),
-                ...mediaPipeline.pendingMediaItems,
-              ].filter((item) => !mediaPipeline.pendingDeletions.includes(item.id) && !item.hidden)}
-              documents={Object.entries({
-                ...documentManifest,
-                ...Object.fromEntries(mediaPipeline.pendingDocuments.map((d) => [d.id, d.entry])),
-              })
-                // Deleted-but-unsaved documents stay in the manifest until the
-                // save commits them; the library must not offer them again.
-                .filter(([id]) => !mediaPipeline.pendingDocumentDeletions.includes(id))
-                .map(([id, entry]) => ({
-                  id,
-                  filename: entry.filename,
-                  size: entry.size,
-                  kind: entry.kind,
-                }))}
+              items={mediaLibraryItems}
+              documents={mediaLibraryDocuments}
               kinds={mediaModalMode === "manage" ? undefined : (mediaSelectKinds ?? undefined)}
               onSelect={(id) => {
                 if (mediaSelectCallback) {
@@ -2124,8 +2256,8 @@ export default function EditorShell({
               onDelete={mediaPipeline.handleMediaDelete}
               onDeleteDocuments={(ids) => { void mediaPipeline.handleDocumentDelete(ids); }}
               onAltChange={mediaPipeline.handleMediaAltChange}
-              referenceCountMap={mediaPipeline.referenceCountMap}
-              documentReferenceCountMap={mediaPipeline.documentReferenceCountMap}
+              referenceCountMap={referenceCountMap}
+              documentReferenceCountMap={documentReferenceCountMap}
               localUrlMap={mediaPipeline.pendingLocalUrls}
               maxFileSize={siteConfig?.media.maxFileSize}
               uploadProgress={mediaPipeline.uploadProgress}
@@ -2219,8 +2351,10 @@ export default function EditorShell({
 
 function ViewBranchWatcher({
   setViewSections,
+  onError,
 }: {
   setViewSections: (sections: LoadedSection[] | null) => void;
+  onError: (message: string) => void;
 }) {
   const { isEditMode, viewBranch } = useEditorContext();
 
@@ -2234,13 +2368,29 @@ function ViewBranchWatcher({
       return;
     }
 
-    fetch(`/api/content?branch=main`)
-      .then((res) => res.json())
+    // Cancelled on switch-away: without this a late resolve re-entered
+    // branch-preview over the draft canvas after the user had already left it.
+    const controller = new AbortController();
+    fetch(`/api/content?branch=main`, { signal: controller.signal })
+      .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}`);
+        return res.json();
+      })
       .then((data) => {
+        if (!Array.isArray(data?.sections)) throw new Error("Malformed published-view response");
         setViewSections(data.sections);
       })
-      .catch(console.error);
-  }, [viewBranch, isEditMode]);
+      .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.");
+      });
+    return () => controller.abort();
+  }, [viewBranch, isEditMode, setViewSections, onError]);
 
   return null;
 }

package/src/components/shell/MediaLibraryModal.tsx

@@ -260,6 +260,50 @@ function UploadZone({ onUpload, onFolderUpload }: {
   );
 }
 
+// A local draft, committed on blur. Bound straight to the manifest it fired a
+// manifest write per keystroke, and every one of those re-rendered the whole
+// editor shell — visible typing lag on a large library.
+function AltTextField({ id, alt, onAltChange }: {
+  id: string;
+  alt: string;
+  onAltChange?: (id: string, alt: string) => void;
+}) {
+  const [draft, setDraft] = useState(alt);
+  const committedRef = useRef(alt);
+
+  // Adopt an external change (a peer's save, a manifest reload); our own commit
+  // comes back through this prop too, hence the comparison against `committed`.
+  useEffect(() => {
+    if (alt !== committedRef.current) {
+      committedRef.current = alt;
+      setDraft(alt);
+    }
+  }, [alt]);
+
+  const commit = () => {
+    if (draft === committedRef.current) return;
+    committedRef.current = draft;
+    onAltChange?.(id, draft);
+  };
+  // Closing the modal unmounts the field without a blur; without this the last
+  // edit would be silently dropped.
+  const commitRef = useRef(commit);
+  commitRef.current = commit;
+  useEffect(() => () => commitRef.current(), []);
+
+  return (
+    <textarea
+      value={draft}
+      placeholder="Describe this image for accessibility"
+      rows={2}
+      onClick={(e) => e.stopPropagation()}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={commit}
+      className="w-full resize-none border-0 bg-transparent p-0 text-xs leading-snug text-base-contrast placeholder:text-base-contrast-light/40 focus:outline-none focus:ring-0"
+    />
+  );
+}
+
 function MediaCard({ item, manage, isSelected, dragIds, onClick, children }: {
   item: MediaItem; manage: boolean; isSelected: boolean;
   dragIds: string[]; onClick: (e: React.MouseEvent) => void; children: React.ReactNode;
@@ -528,7 +572,10 @@ export function MediaLibraryModal({
   }
 
   function handleBatchDelete() {
-    if (totalUsage > 0) {
+    // Confirm for anything in use, and for any multi-selection: an unused
+    // multi-delete went straight through, so one mis-aimed click could take out
+    // a whole rubber-banded range with nothing to stop it.
+    if (totalUsage > 0 || selectedIds.length > 1) {
       setConfirmDelete(true);
       setFolderToDelete(null); // the two delete confirmations are mutually exclusive
       return;
@@ -723,7 +770,9 @@ export function MediaLibraryModal({
           {confirmDelete && (
             <div className="flex flex-col items-center rounded-lg border border-red-200 bg-red-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-red-900/50 dark:bg-red-950/30">
               <p className="mb-2 text-center text-sm text-red-800 lg:mb-0 lg:text-left dark:text-red-200">
-                Some of these {usedNoun} are being used. Deleting them will remove them from the sections that use them.
+                {totalUsage > 0
+                  ? `Some of these ${usedNoun} are being used. Deleting them will remove them from the sections that use them.`
+                  : `Delete ${selectedIds.length} ${usedNoun}? No section uses them.`}
               </p>
               <div className="flex shrink-0 items-center gap-2">
                 <Button variant="secondary" size="sm" onClick={() => setConfirmDelete(false)}>
@@ -982,14 +1031,7 @@ export function MediaLibraryModal({
                     <label className="text-[10px] font-medium uppercase leading-none tracking-wide text-base-contrast-light/50">
                       Alt text
                     </label>
-                    <textarea
-                      value={item.alt}
-                      placeholder="Describe this image for accessibility"
-                      rows={2}
-                      onClick={(e) => e.stopPropagation()}
-                      onChange={(e) => onAltChange?.(item.id, e.target.value)}
-                      className="w-full resize-none border-0 bg-transparent p-0 text-xs leading-snug text-base-contrast placeholder:text-base-contrast-light/40 focus:outline-none focus:ring-0"
-                    />
+                    <AltTextField id={item.id} alt={item.alt} onAltChange={onAltChange} />
                   </div>
                 </MediaCard>
               );

package/src/components/shell/SiteSettingsUsers.tsx

@@ -32,6 +32,9 @@ export function SiteSettingsUsers({ currentUser }: Props) {
       }
       const data = await res.json();
       setUsers(data.users);
+      // A successful reload has to clear the previous failure, or a transient
+      // network blip leaves its message on screen for the rest of the session.
+      setError(null);
     } catch {
       setError("Network error while loading users");
       setUsers([]);