@glw907/cairn-cms 0.58.0 → 0.59.0

package/dist/components/CairnMediaLibrary.svelte

@@ -4,8 +4,16 @@ The admin Media Library screen, a peer of Posts and Pages. It browses every comm
 shows where each one is used, edits its name and default alt, and deletes it safely. The resting
 surface is a visual contact-sheet grid (a roving-tabindex listbox of tiles), with a list-density
 toggle that flips to an enriched sortable table. One toolbar row carries search, a pick-one triage
-radiogroup (All, Needs alt, Unused), and the density toggle. Filtering, sorting, and a growing
-client window all run over the full loaded set in component state.
+radiogroup (All, Needs alt, No references found), and the density toggle. Filtering, sorting, and a
+growing client window all run over the full loaded set in component state.
+
+Multi-select rides a Set of selected hashes, decoupled from the slide-over's single asset and from
+roving focus. The grid is an APG multiselectable listbox (aria-multiselectable, real cell focus):
+Space toggles the focused tile, Shift+Arrow extends a range, Ctrl/Cmd+A selects every visible asset,
+and Escape clears. The list density is a plain selectable table whose leading native-checkbox column
+is the selection signal (no grid role, since it has no grid keyboard model). A sticky action bar
+appears on the first selection with a live count, the scope, Select all in view, Clear, and the
+reversible bulk Delete.
 
 Activating a tile or row opens a NON-MODAL detail slide-over from the right (the established
 details-slide-over recipe): no scrim, the library stays live and in the a11y tree behind it, Escape
@@ -26,6 +34,7 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
 <script lang="ts">
   import { flushSync, getContext, tick } from 'svelte';
   import { deserialize } from '$app/forms';
+  import { invalidateAll } from '$app/navigation';
   import type { MediaLibraryEntry } from '../media/library-entry.js';
   import type {
     MediaLibraryData,
@@ -35,7 +44,12 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     MediaReplacePreviewEntry,
     MediaAltPreviewPlan,
     MediaAltPropagateFailure,
+    MediaBulkDeleteResult,
+    MediaOrphanPurgeResult,
+    MediaBulkFailure,
   } from '../sveltekit/content-routes.js';
+  import type { OrphanScan } from '../media/orphan-scan.js';
+  import type { BulkDeleteSkip } from '../media/bulk-delete-plan.js';
   import type { AltPlacement } from '../content/media-rewrite.js';
   import type { UsageEntry } from '../media/usage.js';
   import type { MediaEntry } from '../media/manifest.js';
@@ -73,6 +87,7 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     GitBranchIcon,
     ArrowRightIcon,
     MegaphoneIcon,
+    DatabaseIcon,
   } from './admin-icons.js';
 
   interface Props {
@@ -94,6 +109,8 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     updated: 'Changes saved.',
     replaced: 'Asset replaced.',
     altPropagated: 'Alt text applied.',
+    bulkDeleted: 'Assets deleted.',
+    orphansPurged: 'Orphans purged.',
   } as const;
   const flashMessage = $derived(data.flash ? FLASH_MESSAGE[data.flash] : '');
 
@@ -114,7 +131,9 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
   const triageCounts = $derived({
     all: data.assets.length,
     needsAlt: data.assets.filter((a) => needsAlt(a)).length,
-    // Unused: no usage entry, or a count of zero.
+    // No references found: no usage entry, or a count of zero. The internal enum stays `unused`; the
+    // visible label reads "No references found" because absence of a found reference is not proof of
+    // disuse (cairn cannot see a raw-HTML image or a URL hardcoded into a template).
     unused: data.assets.filter((a) => usageCount(a.hash) === 0).length,
   });
 
@@ -139,7 +158,7 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
   const segments: { value: Triage; label: string; count: () => number }[] = [
     { value: 'all', label: 'All', count: () => triageCounts.all },
     { value: 'needs-alt', label: 'Needs alt', count: () => triageCounts.needsAlt },
-    { value: 'unused', label: 'Unused', count: () => triageCounts.unused },
+    { value: 'unused', label: 'No references found', count: () => triageCounts.unused },
   ];
 
   // The triage radiogroup's roving tabindex and ARIA radio keyboard pattern: the selected radio is
@@ -249,17 +268,24 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
   // Escape is also the native clear gesture for the toolbar's type="search" input, so the close
   // fires only when focus is inside the panel: an Escape in the search box clears it and leaves the
   // panel exactly as the user left it, while an Escape with focus in the panel still closes it.
+  // Escape precedence (no overlap): an open dialog claims Escape natively (its showModal owns it, so
+  // this handler stands down while any dialog is open); else an open slide-over with focus inside it
+  // closes (today's behavior); else a non-empty selection is cleared. The search box keeps its own
+  // native Escape-to-clear: the selection clear fires only when focus is NOT in the search input.
   function onWindowKeydown(e: KeyboardEvent) {
-    if (
-      e.key === 'Escape' &&
-      selected &&
-      !deleteDialog?.open &&
-      !replaceDialog?.open &&
-      !altDialog?.open &&
-      panelEl?.contains(document.activeElement)
-    ) {
+    if (e.key !== 'Escape') return;
+    if (deleteDialog?.open || replaceDialog?.open || altDialog?.open || bulkDialog?.open || orphanDialog?.open) return;
+    if (selected && panelEl?.contains(document.activeElement)) {
       e.preventDefault();
       closePanel();
+      return;
+    }
+    if (selectedCount > 0) {
+      const active = document.activeElement as HTMLElement | null;
+      const inSearch = active instanceof HTMLInputElement && active.type === 'search';
+      if (inSearch) return;
+      e.preventDefault();
+      clearSelection();
     }
   }
 
@@ -786,20 +812,435 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     activeIndex = i;
     tileEls[i]?.focus();
   }
+
+  // --- the multi-select model (the APG multiselectable listbox, shared by the grid and the table) ---
+  // The selection is a Set of asset hashes, distinct from `selected` (the single asset the slide-over
+  // renders). Focus and selection are decoupled: roving the active tile never selects, Space/checkbox
+  // toggles, Shift+Arrow extends a range, Ctrl/Cmd+A selects every visible asset, Escape clears. The
+  // Set is never mutated in place (no reactivity on Set mutation here); every change reassigns, the
+  // same pattern markBroken uses below.
+  let selectedHashes = $state(new Set<string>());
+  const selectedCount = $derived(selectedHashes.size);
+  // The anchor index for a Shift+Arrow range, set on a plain toggle (Space or a checkbox/click). Null
+  // until the first plain selection in the current run.
+  let selectAnchor = $state<number | null>(null);
+
+  /** Toggle one hash, set the range anchor to its visible index, and reassign the Set. */
+  function toggleSelect(hash: string) {
+    const next = new Set(selectedHashes);
+    if (next.has(hash)) next.delete(hash);
+    else next.add(hash);
+    selectedHashes = next;
+    selectAnchor = visible.findIndex((a) => a.hash === hash);
+  }
+  /** Select every hash between the anchor and `to` (inclusive) over the visible set, additively. */
+  function selectRange(to: number) {
+    if (selectAnchor === null) selectAnchor = to;
+    const lo = Math.min(selectAnchor, to);
+    const hi = Math.max(selectAnchor, to);
+    const next = new Set(selectedHashes);
+    for (let j = lo; j <= hi; j++) {
+      const a = visible[j];
+      if (a) next.add(a.hash);
+    }
+    selectedHashes = next;
+  }
+  /** Select every currently-visible asset (Ctrl/Cmd+A and the bar's Select all). */
+  function selectAllVisible() {
+    const next = new Set(selectedHashes);
+    for (const a of visible) next.add(a.hash);
+    selectedHashes = next;
+    selectAnchor = 0;
+  }
+  /** Empty the selection (the bar's Clear and the Escape clear gesture). */
+  function clearSelection() {
+    if (selectedHashes.size === 0) return;
+    selectedHashes = new Set<string>();
+    selectAnchor = null;
+  }
+  // Drop any selected hash that has filtered out of the visible set so the count and the bar's scope
+  // never count an asset the user can no longer see. Reassign only when the set actually shrinks.
+  $effect(() => {
+    const live = new Set(visible.map((a) => a.hash));
+    let changed = false;
+    for (const h of selectedHashes) {
+      if (!live.has(h)) {
+        changed = true;
+        break;
+      }
+    }
+    if (!changed) return;
+    const next = new Set<string>();
+    for (const h of selectedHashes) if (live.has(h)) next.add(h);
+    selectedHashes = next;
+  });
+
+  // The bar's scope line: how many of the selection are in this view, split by usage so the confirm's
+  // skip-and-report path is foreshadowed (Task 8 reads the same split).
+  const selectionScope = $derived.by(() => {
+    let noRefs = 0;
+    let used = 0;
+    for (const a of visible) {
+      if (!selectedHashes.has(a.hash)) continue;
+      if (usageCount(a.hash) === 0) noRefs++;
+      else used++;
+    }
+    return { noRefs, used };
+  });
+
+  // --- the bulk-delete alertdialog: the skip-and-report dry-run, the reversible register, the
+  // announced progress, and the itemized summary (the rev.2 mockup, panels 3 and 4) ---
+  // The whole selection is reversible (a git-tracked removal of manifest rows), so the dialog is the
+  // danger-OUTLINE register with a plain confirm and no typed gate. The display split below is
+  // advisory: every selected hash is sent and the server re-checks each one strictly, so an asset that
+  // looks deletable here but turns up in use at delete time is skipped authoritatively, not removed.
+  type BulkPhase = 'review' | 'deleting' | 'done' | 'error';
+  let bulkDialog = $state<HTMLDialogElement | null>(null);
+  // The entry-point (the bar's Delete button), so focus restores to it on close.
+  let bulkOrigin: HTMLElement | null = null;
+  // The Cancel control, the destructive-confirm initial focus.
+  let bulkCancelButton = $state<HTMLButtonElement | null>(null);
+  // The summary title, focused when the result lands so a screen reader is carried to the outcome.
+  let bulkSummaryTitle = $state<HTMLElement | null>(null);
+  let bulkPhase = $state<BulkPhase>('review');
+  let bulkResult = $state<MediaBulkDeleteResult | null>(null);
+  let bulkError = $state<string | null>(null);
+  // The hashes the dialog acts on, pinned at open so a background re-render never shifts the dry-run.
+  let bulkHashes = $state<string[]>([]);
+
+  // The dry-run split over the DISPLAY index: the no-reference selection is what will be deleted, the
+  // still-referenced selection is what the server will skip. Both keep the asset row for the screen.
+  // The selected assets in pick order, dropping any hash absent from the loaded set (the type
+  // predicate keeps the element type non-nullable so the markup reads asset.slug without a guard).
+  const bulkSelectedAssets = $derived(
+    bulkHashes
+      .map((h) => data.assets.find((a) => a.hash === h))
+      .filter((a): a is MediaLibraryEntry => a != null),
+  );
+  const bulkWillDelete = $derived(bulkSelectedAssets.filter((a) => usageCount(a.hash) === 0));
+  const bulkWillSkip = $derived(bulkSelectedAssets.filter((a) => usageCount(a.hash) > 0));
+  // The apply button names the outcome from the split: "Delete N" with no skips, else "Delete N, skip M".
+  const bulkApplyLabel = $derived(
+    bulkWillSkip.length === 0
+      ? `Delete ${bulkWillDelete.length}`
+      : `Delete ${bulkWillDelete.length}, skip ${bulkWillSkip.length}`,
+  );
+
+  // The skipped summary row reads its display name from the loaded assets; a hash absent from the load
+  // (deleted out from under the index) falls back to the bare hash so the row is never blank.
+  function bulkAssetName(hash: string): string {
+    return data.assets.find((a) => a.hash === hash)?.displayName ?? hash;
+  }
+  // The skip reason line: a still-referenced skip names its fresh where-used count; an uncommitted skip
+  // says it was not committed (the timing-honest reason the recheck turned up).
+  function bulkSkipReason(skip: BulkDeleteSkip): string {
+    if (skip.reason === 'still-referenced') {
+      const n = skip.usage.length;
+      return `now found in ${n} ${n === 1 ? 'entry' : 'entries'} on the recheck`;
+    }
+    return 'was not committed';
+  }
+
+  const BULK_DELETE_URL = '?/mediaBulkDelete';
+
+  function openBulkDialog(origin?: HTMLElement | null) {
+    if (selectedCount === 0) return;
+    bulkOrigin = origin ?? (document.activeElement as HTMLElement | null) ?? null;
+    bulkHashes = [...selectedHashes];
+    bulkPhase = 'review';
+    bulkResult = null;
+    bulkError = null;
+    void tick().then(() => {
+      bulkDialog?.showModal();
+      bulkCancelButton?.focus();
+    });
+  }
+  function closeBulkDialog() {
+    bulkDialog?.close();
+    bulkPhase = 'review';
+    bulkResult = null;
+    bulkError = null;
+    bulkHashes = [];
+    bulkOrigin?.focus();
+    bulkOrigin = null;
+  }
+  // Escape (the dialog's cancel event) must not abandon an in-flight delete: while the request is
+  // running the close is suppressed; in every other phase Escape closes normally.
+  function onBulkCancel(e: Event) {
+    if (bulkPhase === 'deleting') {
+      e.preventDefault();
+      return;
+    }
+    closeBulkDialog();
+  }
+  // The Done action after a summary: re-read the load so the deleted rows leave the list, clear the
+  // selection, then close and reset. invalidateAll re-runs the media load behind the dialog.
+  async function finishBulkDelete() {
+    await invalidateAll();
+    clearSelection();
+    closeBulkDialog();
+  }
+
+  // Apply: send every SELECTED hash (repeated `hash` fields) so the server is the gate; it re-checks
+  // each one strictly and skips the in-use ones authoritatively. The CSRF token rides the X-Cairn-CSRF
+  // header (the guard accepts it for any unsafe POST), and the ActionResult envelope is read through
+  // deserialize. A success carries the MediaBulkDeleteResult; a fail-closed 503 or a network throw
+  // routes to the error phase and a role="alert".
+  async function applyBulkDelete() {
+    bulkPhase = 'deleting';
+    bulkError = null;
+    const formData = new FormData();
+    for (const h of bulkHashes) formData.append('hash', h);
+    let result: { type: string; data?: unknown };
+    try {
+      const res = await fetch(BULK_DELETE_URL, {
+        method: 'POST',
+        headers: { 'X-Cairn-CSRF': csrf?.() ?? '' },
+        body: formData,
+      });
+      result = deserialize(await res.text()) as { type: string; data?: unknown };
+    } catch {
+      bulkError = 'The delete could not be completed. Please try again.';
+      bulkPhase = 'error';
+      return;
+    }
+    if (result.type === 'success' && result.data) {
+      bulkResult = result.data as MediaBulkDeleteResult;
+      bulkPhase = 'done';
+      void tick().then(() => bulkSummaryTitle?.focus());
+    } else {
+      const failure = result.data as { error?: string } | undefined;
+      bulkError = failure?.error ?? 'The delete could not be completed. Please try again.';
+      bulkPhase = 'error';
+    }
+  }
+
+  // --- the on-demand orphan scan surface: the entry point, the loading/blocked phases, the
+  // two-section result, and the IRREVERSIBLE byte purge (the rev.2 mockup, panels 6, 7, and 8-right) ---
+  // Raw R2 bytes have no git history, so this is the one irreversible media action and it is kept
+  // structurally apart from the reversible bulk delete above: a separate dialog, a separate selection
+  // Set of R2 KEYS (never the asset-hash Set), a solid-danger Purge (not the danger-OUTLINE bulk
+  // apply), and a typed-count confirm reserved for this path. The scan fails CLOSED at detection: a
+  // 503 routes to the blocked surface (no dry-run, no collect action), because under-reporting orphans
+  // could feed an unrecoverable purge.
+  type OrphanPhase = 'idle' | 'scanning' | 'result' | 'blocked';
+  const ORPHAN_SCAN_URL = '?/mediaOrphanScan';
+  const ORPHAN_PURGE_URL = '?/mediaPurge';
+
+  let orphanDialog = $state<HTMLDialogElement | null>(null);
+  // The "Find orphaned files" entry control, so focus restores to it on close.
+  let orphanFindButton = $state<HTMLButtonElement | null>(null);
+  // The dialog title, focused on open so a screen reader is carried to the surface.
+  let orphanTitle = $state<HTMLElement | null>(null);
+  let orphanPhase = $state<OrphanPhase>('idle');
+  // The scan result (the result phase) or the fail-closed error message (the blocked phase).
+  let orphanScan = $state<OrphanScan | null>(null);
+  let orphanBlockedError = $state('');
+  // The orphaned-byte selection: a Set of R2 KEYS, distinct from the asset-hash Set above. Never
+  // mutated in place; every change reassigns (the reactive-Set rule the rest of the screen follows).
+  let orphanKeys = $state(new Set<string>());
+  // The section-level select-all checkbox, set to indeterminate in an effect when some-but-not-all rows
+  // are selected (a property, not an attribute, so it is driven imperatively).
+  let orphanSelectAll = $state<HTMLInputElement | null>(null);
+  // The purge confirm: a nested phase inside the result surface, gated by typing the selected count.
+  let orphanPurging = $state(false);
+  let orphanConfirmInput = $state('');
+  // The purge outcome (the summary) or, on a post-action failure, the error for a role="alert".
+  let orphanPurgeResult = $state<MediaOrphanPurgeResult | null>(null);
+  let orphanPurgeError = $state('');
+  let orphanPurgeBusy = $state(false);
+
+  const orphanBytes = $derived(orphanScan?.orphanedBytes ?? []);
+  const orphanBroken = $derived(orphanScan?.brokenRefs ?? []);
+  const orphanSelectedCount = $derived(orphanKeys.size);
+  // The typed-count gate: the submit is enabled only when the typed value equals the selected count and
+  // at least one byte is selected. The one legitimate disable, a visible typed destructive confirm.
+  const orphanConfirmMatches = $derived(orphanSelectedCount > 0 && orphanConfirmInput === String(orphanSelectedCount));
+  // The select-all is checked when every byte is selected, indeterminate on a strict subset. Driven
+  // imperatively because `indeterminate` is a DOM property with no HTML attribute.
+  $effect(() => {
+    if (!orphanSelectAll) return;
+    const n = orphanSelectedCount;
+    const total = orphanBytes.length;
+    orphanSelectAll.checked = total > 0 && n === total;
+    orphanSelectAll.indeterminate = n > 0 && n < total;
+  });
+
+  function openOrphanScan() {
+    orphanPhase = 'scanning';
+    orphanScan = null;
+    orphanBlockedError = '';
+    orphanKeys = new Set<string>();
+    orphanPurging = false;
+    orphanConfirmInput = '';
+    orphanPurgeResult = null;
+    orphanPurgeError = '';
+    orphanPurgeBusy = false;
+    void tick().then(() => {
+      orphanDialog?.showModal();
+      orphanTitle?.focus();
+    });
+    void runOrphanScan();
+  }
+  function closeOrphanScan() {
+    orphanDialog?.close();
+    orphanPhase = 'idle';
+    orphanScan = null;
+    orphanKeys = new Set<string>();
+    orphanPurging = false;
+    orphanConfirmInput = '';
+    orphanPurgeResult = null;
+    orphanPurgeError = '';
+    orphanFindButton?.focus();
+  }
+  // Escape (the dialog's cancel event) must not abandon an in-flight purge: while the irreversible
+  // delete is running the close is suppressed; in every other phase Escape closes normally.
+  function onOrphanCancel(e: Event) {
+    if (orphanPurgeBusy) {
+      e.preventDefault();
+      return;
+    }
+    closeOrphanScan();
+  }
+  // The Done action after a purge: the bytes are gone, so re-read the load (the broken-refs readout is
+  // untouched), then close. invalidateAll re-runs the media load behind the dialog.
+  async function finishOrphanPurge() {
+    await invalidateAll();
+    closeOrphanScan();
+  }
+
+  // Run the scan: POST ?/mediaOrphanScan, parse the ActionResult envelope, and route to the result
+  // phase (an OrphanScan) or the fail-closed blocked phase (a 503 MediaBulkFailure or a network
+  // throw). The action reads no fields, but a SvelteKit form action rejects a body-less POST with a
+  // 415, so send an empty FormData to carry the form content-type. The CSRF token rides the header.
+  // Nothing is pre-selected: this feeds an irreversible purge, so the operator picks each byte (or the
+  // select-all) deliberately.
+  async function runOrphanScan() {
+    orphanPhase = 'scanning';
+    orphanBlockedError = '';
+    let result: { type: string; data?: unknown };
+    try {
+      const res = await fetch(ORPHAN_SCAN_URL, {
+        method: 'POST',
+        headers: { 'X-Cairn-CSRF': csrf?.() ?? '' },
+        body: new FormData(),
+      });
+      result = deserialize(await res.text()) as { type: string; data?: unknown };
+    } catch {
+      // A network throw blocks the scan with the generic blocked surface; orphanBlockedError stays
+      // empty (set above), so the surface shows its own framing without a server message.
+      orphanPhase = 'blocked';
+      return;
+    }
+    if (result.type === 'success' && result.data) {
+      orphanScan = result.data as OrphanScan;
+      orphanKeys = new Set<string>();
+      orphanPhase = 'result';
+    } else {
+      const failure = result.data as MediaBulkFailure | undefined;
+      orphanBlockedError = failure?.error ?? '';
+      orphanPhase = 'blocked';
+    }
+  }
+
+  /** Toggle one orphaned-byte key in the selection (reassign-only). */
+  function toggleOrphanKey(key: string) {
+    const next = new Set(orphanKeys);
+    if (next.has(key)) next.delete(key);
+    else next.add(key);
+    orphanKeys = next;
+  }
+  /** Select all or clear all orphaned bytes from the section header checkbox. */
+  function toggleOrphanAll() {
+    orphanKeys = orphanKeys.size === orphanBytes.length ? new Set<string>() : new Set(orphanBytes.map((b) => b.key));
+  }
+  function clearOrphanSelection() {
+    orphanKeys = new Set<string>();
+  }
+
+  // Open the typed-count purge confirm over the current selection.
+  function openOrphanPurge() {
+    if (orphanSelectedCount === 0) return;
+    orphanConfirmInput = '';
+    orphanPurgeError = '';
+    orphanPurging = true;
+  }
+  function cancelOrphanPurge() {
+    orphanPurging = false;
+    orphanConfirmInput = '';
+    orphanPurgeError = '';
+  }
+
+  // The purge: POST ?/mediaPurge with each selected key as a repeated `key` field plus `confirm` set to
+  // the typed count. The server re-derives fresh and skips any key claimed since the scan, so the
+  // selection here is advisory. The CSRF token rides the X-Cairn-CSRF header; the ActionResult envelope
+  // is read through deserialize. A success carries the MediaOrphanPurgeResult; a fail or a network throw
+  // surfaces a role="alert".
+  async function applyOrphanPurge() {
+    if (!orphanConfirmMatches) return;
+    orphanPurgeBusy = true;
+    orphanPurgeError = '';
+    const formData = new FormData();
+    for (const key of orphanKeys) formData.append('key', key);
+    formData.append('confirm', orphanConfirmInput);
+    let result: { type: string; data?: unknown };
+    try {
+      const res = await fetch(ORPHAN_PURGE_URL, {
+        method: 'POST',
+        headers: { 'X-Cairn-CSRF': csrf?.() ?? '' },
+        body: formData,
+      });
+      result = deserialize(await res.text()) as { type: string; data?: unknown };
+    } catch {
+      orphanPurgeBusy = false;
+      orphanPurgeError = 'The purge could not be completed. Please try again.';
+      return;
+    }
+    orphanPurgeBusy = false;
+    if (result.type === 'success' && result.data) {
+      orphanPurgeResult = result.data as MediaOrphanPurgeResult;
+      orphanPurging = false;
+    } else {
+      const failure = result.data as MediaBulkFailure | undefined;
+      orphanPurgeError = failure?.error ?? 'The purge could not be completed. Please try again.';
+    }
+  }
+
+  // The where-used line for one broken-reference row: a plain "used in N entries" count.
+  function brokenWhereUsed(count: number): string {
+    if (count === 0) return 'no references found';
+    return `used in ${count} ${count === 1 ? 'entry' : 'entries'}`;
+  }
+
   function onGridKeydown(e: KeyboardEvent, i: number) {
+    // Ctrl/Cmd+A selects every visible asset (the listbox owns the shortcut here).
+    if ((e.ctrlKey || e.metaKey) && (e.key === 'a' || e.key === 'A')) {
+      e.preventDefault();
+      selectAllVisible();
+      return;
+    }
     if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
       e.preventDefault();
-      focusTile(Math.min(i + 1, visible.length - 1));
+      const to = Math.min(i + 1, visible.length - 1);
+      if (e.shiftKey) selectRange(to);
+      focusTile(to);
     } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
       e.preventDefault();
-      focusTile(Math.max(i - 1, 0));
+      const to = Math.max(i - 1, 0);
+      if (e.shiftKey) selectRange(to);
+      focusTile(to);
     } else if (e.key === 'Home') {
       e.preventDefault();
       focusTile(0);
     } else if (e.key === 'End') {
       e.preventDefault();
       focusTile(visible.length - 1);
-    } else if (e.key === 'Enter' || e.key === ' ') {
+    } else if (e.key === ' ') {
+      // Space toggles selection of the focused tile; it never activates the slide-over.
+      e.preventDefault();
+      toggleSelect(visible[i].hash);
+    } else if (e.key === 'Enter') {
+      // Enter activates: it opens the detail slide-over (selection is Space and the checkbox).
       e.preventDefault();
       openAsset(visible[i], tileEls[i]);
     }
@@ -942,6 +1383,19 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
 
     <span class="flex-1"></span>
 
+    <!-- The on-demand orphan scan entry: a quiet bordered office control, NEVER the danger family (it
+         opens a scan, not a purge). The mockup places it beside Upload; the Library has no Upload
+         button in the toolbar, so it sits in the toolbar row near the density toggle. -->
+    <button
+      bind:this={orphanFindButton}
+      type="button"
+      class="btn btn-sm border-[var(--cairn-card-border)] bg-base-100 font-normal text-[var(--color-muted)] hover:bg-base-content/[0.06]"
+      aria-haspopup="dialog"
+      onclick={openOrphanScan}
+    >
+      <DatabaseIcon class="h-4 w-4" aria-hidden="true" /> Find orphaned files
+    </button>
+
     <div role="group" aria-label="Layout density" class="bg-base-100 inline-flex items-center gap-1 rounded-lg border border-[var(--cairn-card-border)] p-0.5">
       <button type="button" aria-label="Grid view" aria-pressed={density === 'grid'} class={densityButtonClass(density === 'grid')} onclick={() => (density = 'grid')}>
         <LayoutGridIcon class="h-4 w-4" />
@@ -952,6 +1406,21 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     </div>
   </div>
 
+  {#if triage === 'unused'}
+    <!-- The facet preamble: a calm dashed report-only aside above the "No references found" set,
+         naming WHY these are candidates and WHAT cairn cannot see, at the point of action. Never the
+         danger family: selecting is not destroying. -->
+    <div class="mb-3 flex items-start gap-2.5 rounded-box border border-dashed border-[var(--cairn-card-border)] bg-base-200 px-3.5 py-2.5">
+      <FileTextIcon class="mt-0.5 h-4 w-4 shrink-0 text-[var(--color-muted)]" aria-hidden="true" />
+      <p class="text-[0.8125rem] leading-relaxed text-base-content">
+        <b class="font-semibold">No reference found in any tracked branch.</b> Nothing on the site or in an open edit points to these.
+        <span class="mt-0.5 block text-xs text-[var(--color-muted)]">
+          "No references found" is not the same as unused. cairn cannot see a raw-HTML image or a URL hardcoded into a site template, so check anything you are unsure about before deleting it.
+        </span>
+      </p>
+    </div>
+  {/if}
+
   {#if sorted.length === 0}
     <!-- A filter or search narrowed the set to zero; the assets exist, none match. -->
     <div role="status" class="flex flex-col items-center gap-3 px-6 py-14 text-center">
@@ -959,30 +1428,46 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
       <p class="text-sm text-[var(--color-muted)]">No media match this filter.</p>
     </div>
   {:else if density === 'grid'}
-    <!-- The grid: a roving-tabindex listbox of tiles. One tabstop; arrows move the roving index;
-         Enter/Space open. Each tile names the asset, its alt status (a glyph plus a label, never hue
-         alone), and a compact usage marker. -->
-    <ul role="listbox" aria-label="Media library" class="grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 lg:grid-cols-4">
+    <!-- The grid: a roving-tabindex multiselectable listbox of tiles. One tabstop; arrows move the
+         roving index; Enter opens the detail; Space toggles selection (focus and selection are
+         decoupled). Each tile carries a native select checkbox, names the asset, its alt status (a
+         glyph plus a label, never hue alone), and a compact usage marker. -->
+    <ul role="listbox" aria-multiselectable="true" aria-label="Media library" class="grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 lg:grid-cols-4">
       {#each visible as asset, i (asset.hash)}
         {@const used = usageCount(asset.hash)}
         {@const missing = needsAlt(asset)}
+        {@const picked = selectedHashes.has(asset.hash)}
         <li role="presentation" class="contents">
           <div
             bind:this={tileEls[i]}
             role="option"
-            aria-selected={selected?.hash === asset.hash}
+            aria-selected={picked}
             tabindex={i === activeIndex ? 0 : -1}
             aria-label="{asset.displayName}. {missing ? 'Needs alt text' : 'Described'}. {used > 0 ? `Found in ${used} ${used === 1 ? 'entry' : 'entries'}` : 'No references found'}."
-            class="group flex cursor-pointer flex-col overflow-hidden rounded-box border border-[var(--cairn-card-border)] bg-base-100 outline-hidden transition-shadow focus-visible:ring-2 focus-visible:ring-primary/70 {selected?.hash === asset.hash ? 'ring-2 ring-primary/70' : ''}"
+            class="group relative flex cursor-pointer flex-col overflow-hidden rounded-box border border-[var(--cairn-card-border)] bg-base-100 outline-hidden transition-shadow focus-visible:ring-2 focus-visible:ring-primary/70 {picked ? 'ring-2 ring-primary/70' : selected?.hash === asset.hash ? 'ring-2 ring-primary/40' : ''}"
             onclick={(e) => openAsset(asset, e.currentTarget)}
             onkeydown={(e) => onGridKeydown(e, i)}
           >
+            <!-- The selection checkbox, top-left: a real native checkbox in a soft chip so it reads on
+                 any thumbnail. Clicking it toggles the selection only; it never opens the slide-over. -->
+            <span class="absolute left-2 top-2 z-10 inline-flex h-6 w-6 items-center justify-center rounded-md bg-base-100/90 shadow-sm">
+              <input
+                type="checkbox"
+                class="checkbox checkbox-sm"
+                checked={picked}
+                aria-label="Select {asset.displayName}"
+                onclick={(e) => e.stopPropagation()}
+                onchange={() => toggleSelect(asset.hash)}
+              />
+            </span>
             <div class="relative flex aspect-[4/3] items-center justify-center bg-base-200/60">
-              <!-- The usage marker, top-right: a used count, or the warning-ink Unused chip. -->
+              <!-- The usage marker, top-right: a used count, or the warning-ink "No refs" chip. The
+                   category reads "No references found" (renamed from "Unused"): a found reference is
+                   not proof of use, and absence of one is not proof of disuse. -->
               {#if used > 0}
                 <span class="absolute right-2 top-2 inline-flex items-center gap-1 rounded-full border border-[var(--cairn-card-border)] bg-base-100/90 px-2 py-0.5 text-[0.625rem] font-semibold text-[var(--color-muted)]">used {used}</span>
               {:else}
-                <span class="absolute right-2 top-2 inline-flex items-center gap-1 rounded-full border border-[var(--cairn-card-border)] bg-base-100/90 px-2 py-0.5 text-[0.625rem] font-semibold text-[var(--cairn-warning-ink)]">Unused</span>
+                <span class="absolute right-2 top-2 inline-flex items-center gap-1 rounded-full border border-[var(--cairn-card-border)] bg-base-100/90 px-2 py-0.5 text-[0.625rem] font-semibold text-[var(--cairn-warning-ink)]">No refs</span>
               {/if}
               {#if brokenHashes.has(asset.hash)}
                 <span data-cairn-broken class="flex flex-col items-center gap-1 text-[var(--color-subtle)]">
@@ -1017,13 +1502,17 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
       {/each}
     </ul>
   {:else}
-    <!-- The list density: a real table. Each row opens the detail (sets `selected`); the Added
-         column sorts through a real <th><button> with aria-sort; the per-row delete is always
-         visible and sets the pending-delete intent Task 7 reads. -->
+    <!-- The list density: a plain selectable table. Each row opens the detail (sets `selected`); the
+         Added column sorts through a real header button with aria-sort; the per-row delete is always
+         visible. Multi-select rides the leading native-checkbox column, which is the APG-correct
+         pattern for a selectable table. The earlier role="grid" + aria-multiselectable promised grid
+         keyboard navigation (arrow cell moves, roving tabindex) the table never implemented, so it
+         is dropped: a plain table with a checkbox column is honest and fully usable. -->
     <div class="rounded-box border border-[var(--cairn-card-border)] bg-base-100 overflow-x-auto shadow-[var(--cairn-shadow)]">
       <table class="table">
         <thead>
           <tr class="border-base-300">
+            <th class="w-10"><span class="sr-only">Select</span></th>
             <th class={headerLabel}>Asset</th>
             <th class="{headerLabel} w-32">Alt status</th>
             <th class="{headerLabel} w-40">Used</th>
@@ -1040,7 +1529,17 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
           {#each visible as asset (asset.hash)}
             {@const used = usageCount(asset.hash)}
             {@const missing = needsAlt(asset)}
-            <tr class="transition-colors hover:bg-base-200/60 {selected?.hash === asset.hash ? 'bg-primary/[0.06]' : ''}">
+            {@const picked = selectedHashes.has(asset.hash)}
+            <tr class="transition-colors hover:bg-base-200/60 {picked ? 'bg-primary/[0.06]' : selected?.hash === asset.hash ? 'bg-primary/[0.03]' : ''}">
+              <td class="w-10">
+                <input
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                  checked={picked}
+                  aria-label="Select {asset.displayName}"
+                  onchange={() => toggleSelect(asset.hash)}
+                />
+              </td>
               <td class="max-w-0">
                 <button type="button" class="flex w-full items-center gap-3 text-left" onclick={(e) => openAsset(asset, e.currentTarget)}>
                   <span class="relative flex h-10 w-14 flex-none items-center justify-center overflow-hidden rounded-box border border-[var(--cairn-card-border)] bg-base-200/60">
@@ -1089,6 +1588,45 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     </div>
   {/if}
 
+  <!-- The selection-count live region: a dedicated sr-only role=status node that mirrors "N selected"
+       on every toggle. It never shares a node with the flash, copy, or Showing regions, so the three
+       polite regions never collide (the announced count is its own surface). -->
+  <div class="sr-only" role="status" aria-live="polite">{selectedCount > 0 ? `${selectedCount} selected.` : ''}</div>
+
+  {#if selectedCount > 0}
+    <!-- THE STICKY SELECTION ACTION BAR (position: sticky, so it rides the bottom of the scrolling
+         content and never floats off it). It states the count, names the scope, offers Select all in
+         view and Clear, and carries the reversible bulk Delete (a git-tracked removal of manifest
+         rows, so the danger-OUTLINE register; the irreversible byte purge lives on a separate
+         surface and is never reachable from this bar). -->
+    <div
+      role="region"
+      aria-label="Selection actions"
+      class="sticky bottom-3.5 z-20 mx-auto mt-4 flex w-full max-w-[640px] items-center gap-3.5 rounded-2xl border border-[var(--cairn-card-border)] bg-base-100 px-4 py-3 shadow-[var(--cairn-shadow)]"
+    >
+      <span class="shrink-0 text-[0.9375rem] font-bold tabular-nums">{selectedCount}</span>
+      <span class="min-w-0 text-xs leading-snug text-[var(--color-muted)]">
+        <b class="font-semibold text-base-content">{selectedCount} selected</b> in this view<br />
+        {selectionScope.noRefs} with no references, {selectionScope.used} still used
+      </span>
+      <span class="flex-1"></span>
+      {#if selectedCount < visible.length}
+        <button type="button" class="whitespace-nowrap px-1 py-1.5 text-[0.8125rem] font-medium text-primary hover:underline" onclick={selectAllVisible}>
+          Select all {visible.length}
+        </button>
+      {/if}
+      <button type="button" class="whitespace-nowrap rounded-lg border border-base-300 px-2.5 py-2 text-[0.8125rem] font-medium text-[var(--color-subtle)]" onclick={clearSelection}>
+        Clear
+      </button>
+      <!-- The reversible bulk Delete: a git-tracked removal of manifest rows, so the danger-OUTLINE
+           register (the irreversible byte purge lives on a separate surface and keeps the solid fill).
+           It opens the skip-and-report alertdialog over the current selection. -->
+      <button type="button" aria-haspopup="dialog" onclick={(e) => openBulkDialog(e.currentTarget)} class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg border border-[var(--cairn-error-border)] bg-base-100 px-3.5 py-2.5 text-[0.8125rem] font-semibold text-[var(--cairn-error-ink)]">
+        <Trash2Icon class="h-3.5 w-3.5" aria-hidden="true" /> Delete {selectedCount}
+      </button>
+    </div>
+  {/if}
+
   {#if sorted.length > 0}
     <!-- The announced count plus the managed Load more (never infinite scroll). One persistent
          polite region carries "Showing N of M". -->
@@ -1310,6 +1848,7 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
   bind:this={deleteDialog}
   class="modal"
   role="alertdialog"
+  aria-modal="true"
   aria-labelledby="cairn-ml-delete-title"
   aria-describedby="cairn-ml-delete-desc"
   oncancel={closeDeleteDialog}
@@ -1917,3 +2456,538 @@ projection and pulls in no editor module (the editor-boundary test bars a @codem
     </div>
   {/if}
 </dialog>
+
+<!-- The bulk-delete alertdialog: a native modal <dialog> (native focus trap + Escape), NO light
+     dismiss. The confirm IS the dry-run (the skip-and-report split), so there is no separate preview
+     step. A git-tracked removal is reversible, so the register is danger-OUTLINE with a plain confirm
+     and no typed gate, carrying the git-revert reassurance. Apply posts every selected hash to
+     ?/mediaBulkDelete; the server re-checks each one strictly and the itemized summary reports the
+     outcome (succeeded / skipped-with-reason / failed-with-reason). The recheck runs at execution, so
+     there is no review-time tick implying the gate passed. -->
+<dialog
+  bind:this={bulkDialog}
+  data-testid="cairn-bulk-dialog"
+  class="modal"
+  role="alertdialog"
+  aria-modal="true"
+  aria-labelledby="cairn-ml-bulk-title"
+  aria-describedby="cairn-ml-bulk-desc"
+  oncancel={onBulkCancel}
+>
+  <div class="modal-box max-w-xl">
+    {#if bulkPhase === 'review'}
+      <!-- THE CENTRAL SAFETY SCREEN: the selection split into what will be deleted and what is held
+           back, careful about timing (the usage shown rode a quick read; each item is re-checked when
+           it deletes, not now). -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-[var(--cairn-error-tint)] text-[var(--cairn-error-ink)]" aria-hidden="true">
+          <Trash2Icon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 id="cairn-ml-bulk-title" class="text-lg font-bold tracking-tight font-[family-name:var(--font-display)]">Delete {bulkHashes.length} selected {bulkHashes.length === 1 ? 'image' : 'images'}?</h2>
+          <p id="cairn-ml-bulk-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">
+            {bulkWillDelete.length} {bulkWillDelete.length === 1 ? 'has' : 'have'} no references and will be deleted.
+            {#if bulkWillSkip.length > 0}{bulkWillSkip.length} {bulkWillSkip.length === 1 ? 'is' : 'are'} still used and will be skipped. {/if}Each one is checked again at delete time, so nothing in use is removed.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Cancel" onclick={closeBulkDialog}>
+          <XIcon class="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <!-- The scope strip: the explicit count plus the safety-floor disclosure, timed at execution. -->
+        <div class="flex flex-col gap-2 rounded-box border border-[var(--cairn-card-border)] bg-base-200/50 p-3 text-[0.8125rem] leading-relaxed">
+          <span class="inline-flex items-start gap-2">
+            <CheckIcon class="mt-0.5 h-4 w-4 flex-none text-[var(--color-muted)]" aria-hidden="true" />
+            <span><b class="font-semibold">{bulkHashes.length} {bulkHashes.length === 1 ? 'image' : 'images'} selected</b> in the current view.</span>
+          </span>
+          <span class="inline-flex items-start gap-2 text-[var(--color-muted)]">
+            <ClockIcon class="mt-0.5 h-4 w-4 flex-none" aria-hidden="true" />
+            <span>The usage shown here came from a quick read. cairn checks each image again the moment it deletes it, and skips any that turns out to be in use.</span>
+          </span>
+        </div>
+
+        {#if bulkWillDelete.length > 0}
+          <!-- WILL BE DELETED: the no-reference items, each with its slug and the "no references" tag. -->
+          <div>
+            <span class="mb-2 inline-flex items-center gap-2 text-[0.6875rem] font-semibold uppercase tracking-wide text-[var(--color-muted)]">
+              Will be deleted <span class="rounded-full bg-base-content/[0.07] px-1.5 py-0.5 tabular-nums">{bulkWillDelete.length}</span>
+            </span>
+            <ul class="flex max-h-44 list-none flex-col gap-1 overflow-y-auto rounded-box border border-[var(--cairn-card-border)] p-2">
+              {#each bulkWillDelete as asset (asset.hash)}
+                <li class="flex items-center gap-2.5 rounded px-1.5 py-1">
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate text-[0.8125rem] font-semibold">{asset.displayName}</div>
+                    <div class="truncate font-[family-name:var(--font-editor)] text-[0.6875rem] text-[var(--color-muted)]">{asset.slug}.{asset.hash}</div>
+                  </div>
+                  <span class="flex-none text-[0.6875rem] font-semibold text-[var(--color-muted)]">no references found</span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+
+        {#if bulkWillSkip.length > 0}
+          <!-- WILL BE SKIPPED: the still-used items, reported with their where-used. A bulk delete never
+               force-removes an in-use asset; it points to the single-item typed-confirm path. The
+               warning register on plain base-100 (a skip is not a failure), text-only. -->
+          <div class="overflow-hidden rounded-box border border-[var(--cairn-card-border)]">
+            <div class="flex items-start gap-2.5 bg-[color-mix(in_oklab,var(--cairn-warning-ink)_8%,var(--color-base-100))] p-3">
+              <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-none text-[var(--cairn-warning-ink)]" aria-hidden="true" />
+              <div class="text-[0.8125rem] leading-relaxed">
+                <b class="font-semibold text-[var(--cairn-warning-ink)]">{bulkWillSkip.length} will be skipped, still in use</b>
+                <span class="mt-0.5 block text-[0.75rem] text-[var(--color-muted)]">A bulk delete never removes an image that is still referenced. To delete one of these, open it and use Delete with the typed confirm, where you can see and confirm what breaks.</span>
+              </div>
+            </div>
+            <ul class="flex max-h-36 list-none flex-col overflow-y-auto">
+              {#each bulkWillSkip as asset (asset.hash)}
+                {@const where = usageCount(asset.hash)}
+                <li class="flex items-center gap-2.5 border-t border-[color-mix(in_oklab,var(--cairn-card-border)_70%,transparent)] px-3 py-2 first:border-t-0">
+                  <span class="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{asset.slug}</span>
+                  <span class="flex-none text-[0.6875rem] font-semibold text-[var(--cairn-warning-ink)]">found in {where} {where === 1 ? 'entry' : 'entries'}</span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+
+        <!-- The recoverability reassurance: a git-tracked removal is reversible. -->
+        <div class="flex items-start gap-2.5 rounded-box border border-[var(--cairn-card-border)] bg-base-200/50 p-3 text-[0.8125rem] leading-relaxed">
+          <ClockIcon class="mt-0.5 h-4 w-4 flex-none text-[var(--color-positive-ink)]" aria-hidden="true" />
+          <span><b class="font-semibold">Every removal is one revertible commit you can undo.</b> The deletes are one commit to <code class="rounded bg-[var(--cairn-code-chip)] px-1 py-0.5 font-[family-name:var(--font-editor)] text-[0.75rem]">main</code>, so a developer can revert it and the images come back.</span>
+        </div>
+
+        <div class="flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+          <span class="mr-auto inline-flex items-center gap-1.5 text-[0.75rem] text-[var(--color-muted)]">
+            <GitBranchIcon class="h-3.5 w-3.5" aria-hidden="true" /> One commit to main
+          </span>
+          <button bind:this={bulkCancelButton} type="button" class="btn btn-sm" onclick={closeBulkDialog}>Cancel</button>
+          <!-- The danger-OUTLINE apply (not the solid fill the irreversible purge reserves), naming the
+               outcome from the split. Disabled only when nothing in the selection is deletable. -->
+          <button type="button" class="btn btn-sm border-[var(--cairn-error-border)] bg-base-100 text-[var(--cairn-error-ink)] hover:bg-[var(--cairn-error-tint)]" disabled={bulkWillDelete.length === 0} onclick={applyBulkDelete}>
+            <Trash2Icon class="h-3.5 w-3.5" aria-hidden="true" /> {bulkApplyLabel}
+          </button>
+        </div>
+      </div>
+    {:else if bulkPhase === 'deleting'}
+      <!-- ANNOUNCED PROGRESS: the per-item recheck against the fresh strict index runs here. The live
+           region is role=status (role=alert is reserved for a post-action failure). No review-time tick. -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-[var(--cairn-error-tint)] text-[var(--cairn-error-ink)]" aria-hidden="true">
+          <Trash2Icon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 id="cairn-ml-bulk-title" class="text-lg font-bold tracking-tight font-[family-name:var(--font-display)]">Deleting images</h2>
+          <p id="cairn-ml-bulk-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">Checking each one against a fresh read and removing the ones with no references. This can take a moment across branches.</p>
+        </div>
+      </div>
+      <div class="flex flex-col items-center gap-3 py-4">
+        <RefreshCwIcon class="h-6 w-6 animate-spin text-[var(--color-muted)]" aria-hidden="true" />
+        <span class="text-[0.8125rem] text-[var(--color-muted)]">Checking and deleting {bulkWillDelete.length} {bulkWillDelete.length === 1 ? 'image' : 'images'}...</span>
+      </div>
+      <div class="mt-2 border-t border-[var(--cairn-card-border)] pt-3.5 text-[0.75rem] text-[var(--color-muted)]">Please keep this open until it finishes.</div>
+      <div class="sr-only" role="status" aria-live="polite">Deleting {bulkWillDelete.length} {bulkWillDelete.length === 1 ? 'asset' : 'assets'}...</div>
+    {:else if bulkPhase === 'done' && bulkResult}
+      {@const res = bulkResult}
+      <!-- THE ITEMIZED SUMMARY (the 207-Multi-Status shape): succeeded / skipped-with-reason /
+           failed-with-reason. The skipped reason is timing-honest (a reference turned up on the
+           recheck). The Done action re-reads the load behind the dialog. -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-[var(--color-positive-tint,var(--cairn-card-border))] text-[var(--color-positive-ink)]" aria-hidden="true">
+          <CheckIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 bind:this={bulkSummaryTitle} tabindex="-1" id="cairn-ml-bulk-title" class="text-lg font-bold tracking-tight outline-hidden font-[family-name:var(--font-display)]">Done. {res.deleted.length} deleted{res.skipped.length > 0 ? `, ${res.skipped.length} skipped` : ''}</h2>
+          <p id="cairn-ml-bulk-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">
+            The {res.deleted.length} {res.deleted.length === 1 ? 'delete is' : 'deletes are'} one commit to <code class="rounded bg-[var(--cairn-code-chip)] px-1 py-0.5 font-[family-name:var(--font-editor)] text-[0.75rem]">main</code>.{#if res.skipped.length > 0} The {res.skipped.length} skipped had a reference turn up on the recheck and {res.skipped.length === 1 ? 'was' : 'were'} left as {res.skipped.length === 1 ? 'it is' : 'they are'}.{/if}
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Close" onclick={() => void finishBulkDelete()}>
+          <XIcon class="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <div class="grid grid-cols-3 gap-2 text-center">
+          <div class="rounded-box border border-[var(--cairn-card-border)] p-2.5">
+            <div class="text-xl font-bold tabular-nums text-[var(--color-positive-ink)]">{res.deleted.length}</div>
+            <div class="text-[0.6875rem] uppercase tracking-wide text-[var(--color-muted)]">Deleted</div>
+          </div>
+          <div class="rounded-box border border-[var(--cairn-card-border)] p-2.5">
+            <div class="text-xl font-bold tabular-nums text-[var(--cairn-warning-ink)]">{res.skipped.length}</div>
+            <div class="text-[0.6875rem] uppercase tracking-wide text-[var(--color-muted)]">Skipped</div>
+          </div>
+          <div class="rounded-box border border-[var(--cairn-card-border)] p-2.5">
+            <div class="text-xl font-bold tabular-nums text-[var(--cairn-error-ink)]">{res.failed.length}</div>
+            <div class="text-[0.6875rem] uppercase tracking-wide text-[var(--color-muted)]">Failed</div>
+          </div>
+        </div>
+
+        {#if res.skipped.length > 0}
+          <div class="overflow-hidden rounded-box border border-[var(--cairn-card-border)]">
+            <div class="inline-flex w-full items-center gap-2 bg-[color-mix(in_oklab,var(--cairn-warning-ink)_8%,var(--color-base-100))] p-2.5 text-[0.75rem] font-semibold text-[var(--cairn-warning-ink)]">
+              <TriangleAlertIcon class="h-4 w-4 flex-none" aria-hidden="true" /> Skipped, a reference turned up on the recheck
+            </div>
+            <ul class="flex max-h-36 list-none flex-col overflow-y-auto">
+              {#each res.skipped as skip (skip.hash)}
+                <li class="flex items-center gap-2.5 border-t border-[color-mix(in_oklab,var(--cairn-card-border)_70%,transparent)] px-3 py-2 first:border-t-0">
+                  <span class="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{bulkAssetName(skip.hash)}</span>
+                  <span class="flex-none text-[0.6875rem] text-[var(--color-muted)]">{bulkSkipReason(skip)}</span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+
+        {#if res.failed.length > 0}
+          <div class="overflow-hidden rounded-box border border-[var(--cairn-error-border)]">
+            <div class="inline-flex w-full items-center gap-2 bg-[var(--cairn-error-tint)] p-2.5 text-[0.75rem] font-semibold text-[var(--cairn-error-ink)]">
+              <TriangleAlertIcon class="h-4 w-4 flex-none" aria-hidden="true" /> Failed
+            </div>
+            <ul class="flex max-h-36 list-none flex-col overflow-y-auto">
+              {#each res.failed as fail (fail.hash)}
+                <li class="flex items-center gap-2.5 border-t border-[color-mix(in_oklab,var(--cairn-error-border)_70%,transparent)] px-3 py-2 first:border-t-0">
+                  <span class="min-w-0 flex-1 truncate text-[0.8125rem] font-semibold">{bulkAssetName(fail.hash)}</span>
+                  <span class="flex-none text-[0.6875rem] text-[var(--cairn-error-ink)]">{fail.error}</span>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        {/if}
+
+        <div class="flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+          <span class="mr-auto inline-flex items-center gap-1.5 text-[0.75rem] text-[var(--color-muted)]">
+            <GitBranchIcon class="h-3.5 w-3.5" aria-hidden="true" /> One commit to main
+          </span>
+          <button type="button" class="btn btn-sm btn-primary" onclick={() => void finishBulkDelete()}>Done</button>
+        </div>
+      </div>
+      <div class="sr-only" role="status" aria-live="polite">Done. {res.deleted.length} deleted, {res.skipped.length} skipped, {res.failed.length} failed.</div>
+    {:else}
+      <!-- POST-ACTION FAILURE: the fail-closed 503 (the whole batch refused) or a network throw. This
+           is the one place role="alert" belongs (an action was attempted and failed). -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-[var(--cairn-error-tint)] text-[var(--cairn-error-ink)]" aria-hidden="true">
+          <TriangleAlertIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 id="cairn-ml-bulk-title" class="text-lg font-bold tracking-tight font-[family-name:var(--font-display)]">The delete did not run</h2>
+          <p id="cairn-ml-bulk-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">Nothing was deleted. You can close this and try again.</p>
+        </div>
+      </div>
+      <div role="alert" class="flex items-start gap-2.5 rounded-box border border-[var(--cairn-error-border)] bg-[var(--cairn-error-tint)] p-3 text-[0.8125rem] leading-relaxed text-[var(--cairn-error-ink)]">
+        <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-none" aria-hidden="true" />
+        <span>{bulkError}</span>
+      </div>
+      <div class="mt-4 flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+        <button type="button" class="btn btn-sm" onclick={closeBulkDialog}>Close</button>
+        <button type="button" class="btn btn-sm border-[var(--cairn-error-border)] bg-base-100 text-[var(--cairn-error-ink)]" onclick={() => (bulkPhase = 'review')}>Back to the selection</button>
+      </div>
+    {/if}
+  </div>
+</dialog>
+
+<!-- The on-demand orphan scan surface: a native modal <dialog> (native focus trap + Escape), NO light
+     dismiss. The result is the two-section dry-run, the loading state, and the detection-time blocked
+     surface. The irreversible byte purge lives inside this dialog only, kept structurally apart from
+     the reversible bulk delete: a separate selection Set of R2 keys, a solid-danger Purge, and a
+     typed-count confirm. role="dialog" (the everyday register): the scan itself changes nothing, and
+     the irreversible step is gated behind the typed confirm below. -->
+<!-- svelte-ignore a11y_no_redundant_roles -->
+<dialog
+  bind:this={orphanDialog}
+  data-testid="cairn-orphan-dialog"
+  class="modal"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="cairn-ml-orphan-title"
+  aria-describedby="cairn-ml-orphan-desc"
+  oncancel={onOrphanCancel}
+>
+  <div class="modal-box max-w-2xl">
+    {#if orphanPhase === 'scanning'}
+      <!-- LOADING: a polite live region announces the scan is running. The scan is far heavier than the
+           loaded index (an R2 list plus a cross-branch reconcile), so it is on demand, never instant. -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-base-200 text-[var(--color-muted)]" aria-hidden="true">
+          <DatabaseIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 bind:this={orphanTitle} tabindex="-1" id="cairn-ml-orphan-title" class="text-lg font-bold tracking-tight outline-hidden font-[family-name:var(--font-display)]">Scanning storage</h2>
+          <p id="cairn-ml-orphan-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">Listing every stored file and checking it against the library across the site and every open edit. This can take a moment.</p>
+        </div>
+      </div>
+      <div class="flex flex-col items-center gap-3 py-6">
+        <RefreshCwIcon class="h-6 w-6 animate-spin text-[var(--color-muted)]" aria-hidden="true" />
+        <span class="text-[0.8125rem] text-[var(--color-muted)]">Scanning storage for orphaned files...</span>
+      </div>
+      <div class="sr-only" role="status" aria-live="polite">Scanning storage for orphaned files...</div>
+    {:else if orphanPhase === 'blocked'}
+      <!-- DETECTION-TIME FAIL CLOSED: the scan did not run because an open edit branch could not be
+           read, so cairn cannot be sure which files are truly orphaned. There is NO collect or purge
+           action, not even disabled. The banner is role="status" (no action was attempted). The server
+           returns a generic message, so the framing names an unreadable open edit without naming the
+           specific branch (naming it is a known carry-forward). -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-base-200 text-[var(--color-muted)]" aria-hidden="true">
+          <DatabaseIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 bind:this={orphanTitle} tabindex="-1" id="cairn-ml-orphan-title" class="text-lg font-bold tracking-tight outline-hidden font-[family-name:var(--font-display)]">The scan could not finish</h2>
+          <p id="cairn-ml-orphan-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">cairn could not read one of your open edits, so it cannot tell which files are truly orphaned. No file was changed.</p>
+        </div>
+        <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Close" onclick={closeOrphanScan}>
+          <XIcon class="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      </div>
+      <div role="status" class="flex flex-col gap-3 rounded-box border border-[var(--cairn-card-border)] bg-base-200/50 p-3.5 text-[0.8125rem] leading-relaxed">
+        <span class="inline-flex items-center gap-2 font-semibold">
+          <TriangleAlertIcon class="h-4 w-4 flex-none text-[var(--cairn-warning-ink)]" aria-hidden="true" /> Could not read every branch
+        </span>
+        <p class="text-base-content">
+          A file looks orphaned only if no record on any branch points to it. One open edit would not load, so cairn cannot be sure. It will not show a list of files to purge that it might be wrong about.
+        </p>
+        {#if orphanBlockedError}
+          <p class="text-[var(--color-muted)]">{orphanBlockedError}</p>
+        {/if}
+      </div>
+      <div class="mt-4 flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+        <span class="mr-auto inline-flex items-center gap-1.5 text-[0.75rem] text-[var(--color-muted)]">No file was changed.</span>
+        <button type="button" class="btn btn-sm" onclick={closeOrphanScan}>Close</button>
+        <button type="button" class="btn btn-sm border-[var(--cairn-card-border)] bg-base-100" onclick={() => void runOrphanScan()}>
+          <RefreshCwIcon class="h-3.5 w-3.5" aria-hidden="true" /> Check again
+        </button>
+      </div>
+    {:else if orphanPhase === 'result' && orphanPurgeResult}
+      {@const res = orphanPurgeResult}
+      <!-- THE PURGE SUMMARY: the purged count, the keys skipped because their hash was claimed since the
+           scan, and any per-object failure. The Done action re-reads the load (the bytes are gone). -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-[var(--color-positive-tint,var(--cairn-card-border))] text-[var(--color-positive-ink)]" aria-hidden="true">
+          <CheckIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 bind:this={orphanTitle} tabindex="-1" id="cairn-ml-orphan-title" class="text-lg font-bold tracking-tight outline-hidden font-[family-name:var(--font-display)]">Done. {res.purged.length} purged{res.skippedClaimed.length > 0 ? `, ${res.skippedClaimed.length} kept` : ''}</h2>
+          <p id="cairn-ml-orphan-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">
+            The {res.purged.length} {res.purged.length === 1 ? 'file is' : 'files are'} gone for good.{#if res.skippedClaimed.length > 0} {res.skippedClaimed.length} {res.skippedClaimed.length === 1 ? 'was' : 'were'} kept because the file was claimed by a record since the scan.{/if}
+          </p>
+        </div>
+      </div>
+      {#if res.skippedClaimed.length > 0}
+        <div class="overflow-hidden rounded-box border border-[var(--cairn-card-border)]">
+          <div class="bg-base-200/60 p-2.5 text-[0.75rem] font-semibold text-[var(--color-muted)]">Kept, the file was claimed since the scan</div>
+          <ul class="flex max-h-36 list-none flex-col overflow-y-auto">
+            {#each res.skippedClaimed as key (key)}
+              <li class="border-t border-[color-mix(in_oklab,var(--cairn-card-border)_70%,transparent)] px-3 py-2 font-[family-name:var(--font-editor)] text-[0.75rem] first:border-t-0">{key}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+      {#if res.failed.length > 0}
+        <div class="mt-3 overflow-hidden rounded-box border border-[var(--cairn-error-border)]">
+          <div class="bg-[var(--cairn-error-tint)] p-2.5 text-[0.75rem] font-semibold text-[var(--cairn-error-ink)]">Failed</div>
+          <ul class="flex max-h-36 list-none flex-col overflow-y-auto">
+            {#each res.failed as fail (fail.key)}
+              <li class="flex items-center gap-2.5 border-t border-[color-mix(in_oklab,var(--cairn-error-border)_70%,transparent)] px-3 py-2 first:border-t-0">
+                <span class="min-w-0 flex-1 truncate font-[family-name:var(--font-editor)] text-[0.75rem]">{fail.key}</span>
+                <span class="flex-none text-[0.6875rem] text-[var(--cairn-error-ink)]">{fail.error}</span>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+      <div class="mt-4 flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+        <button type="button" class="btn btn-sm btn-primary" onclick={() => void finishOrphanPurge()}>Done</button>
+      </div>
+      <div class="sr-only" role="status" aria-live="polite">Done. {res.purged.length} purged, {res.skippedClaimed.length} kept, {res.failed.length} failed.</div>
+    {:else if orphanPhase === 'result' && orphanPurging}
+      <!-- THE IRREVERSIBLE PURGE CONFIRM: the typed-count gate, reserved for THIS path only. The badge
+           and the submit carry the SOLID danger fill (--color-error), the one fill the destructive
+           register owns. The verb is Purge, never Delete, and the callout states that there is no git
+           history for raw bytes. The submit is disabled until the typed value equals the selected
+           count. role="alert" is reserved for a post-action failure below. -->
+      <div class="mb-3 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-[var(--color-error)] text-[var(--color-error-content)]" aria-hidden="true">
+          <TriangleAlertIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 bind:this={orphanTitle} tabindex="-1" id="cairn-ml-orphan-title" class="text-lg font-bold tracking-tight outline-hidden font-[family-name:var(--font-display)]">Purge {orphanSelectedCount} orphaned {orphanSelectedCount === 1 ? 'file' : 'files'}?</h2>
+          <p id="cairn-ml-orphan-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">This removes the stored bytes for good. It is not a library delete, and it cannot be undone.</p>
+        </div>
+        <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Cancel" onclick={cancelOrphanPurge}>
+          <XIcon class="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      </div>
+      <div class="flex flex-col gap-3">
+        <!-- The dry-run: the keys to remove, each with a checkerboard mat (record-not-picture). -->
+        <ul class="flex max-h-40 list-none flex-col gap-1 overflow-y-auto rounded-box border border-[var(--cairn-card-border)] p-2">
+          {#each orphanBytes.filter((b) => orphanKeys.has(b.key)) as byte (byte.key)}
+            <li class="flex items-center gap-2.5 rounded px-1.5 py-1">
+              <span class="h-6 w-8 flex-none rounded border border-[var(--cairn-card-border)] bg-base-200 [background-image:linear-gradient(45deg,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_25%,transparent_25%,transparent_75%,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_75%),linear-gradient(45deg,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_25%,transparent_25%,transparent_75%,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_75%)] [background-position:0_0,4px_4px] [background-size:8px_8px]" aria-hidden="true"></span>
+              <span class="min-w-0 flex-1 truncate font-[family-name:var(--font-editor)] text-[0.75rem]">{byte.key}</span>
+            </li>
+          {/each}
+        </ul>
+        <!-- The IRREVERSIBLE callout, distinct from the bulk delete's git-revert reassurance. -->
+        <div class="flex items-start gap-2.5 rounded-box border border-[var(--cairn-error-border)] bg-[var(--cairn-error-tint)] p-3 text-[0.8125rem] leading-relaxed text-[var(--cairn-error-ink)]">
+          <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-none" aria-hidden="true" />
+          <span><b class="font-semibold">This cannot be undone.</b> A library delete lives in git history and a developer can bring it back. There is no git history for raw bytes, so once these are purged they are gone.</span>
+        </div>
+        <!-- The typed-count gate, reserved for the irreversible path. -->
+        <div class="flex flex-col gap-1.5">
+          <label class="text-[0.8125rem]" for="cairn-ml-purge-confirm">Type <code class="rounded bg-[var(--cairn-code-chip)] px-1 py-0.5 font-[family-name:var(--font-editor)] text-[0.75rem]">{orphanSelectedCount}</code> to purge these files for good.</label>
+          <input
+            id="cairn-ml-purge-confirm"
+            class="input input-sm"
+            type="text"
+            autocomplete="off"
+            placeholder="Type the number of files"
+            aria-label="Type the file count to confirm the purge"
+            bind:value={orphanConfirmInput}
+          />
+        </div>
+        {#if orphanPurgeError}
+          <div role="alert" class="flex items-start gap-2.5 rounded-box border border-[var(--cairn-error-border)] bg-[var(--cairn-error-tint)] p-3 text-[0.8125rem] leading-relaxed text-[var(--cairn-error-ink)]">
+            <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-none" aria-hidden="true" />
+            <span>{orphanPurgeError}</span>
+          </div>
+        {/if}
+        <div class="flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+          <button type="button" class="btn btn-sm" onclick={cancelOrphanPurge}>Cancel</button>
+          <button
+            type="button"
+            class="btn btn-sm border-0 bg-[var(--color-error)] text-[var(--color-error-content)] hover:bg-[var(--color-error)]/90"
+            disabled={!orphanConfirmMatches || orphanPurgeBusy}
+            onclick={() => void applyOrphanPurge()}
+          >
+            <Trash2Icon class="h-3.5 w-3.5" aria-hidden="true" /> Purge {orphanSelectedCount} {orphanSelectedCount === 1 ? 'file' : 'files'}
+          </button>
+        </div>
+      </div>
+      <div class="sr-only" aria-live="polite">Purge {orphanSelectedCount} orphaned {orphanSelectedCount === 1 ? 'file' : 'files'}. This cannot be undone.</div>
+    {:else if orphanPhase === 'result' && orphanScan}
+      <!-- THE TWO-SECTION RESULT: an "Orphaned files" purge surface and a read-only "Broken references"
+           data-integrity readout. -->
+      <div class="mb-4 flex items-start gap-3">
+        <span class="flex h-9 w-9 flex-none items-center justify-center rounded-box bg-base-200 text-[var(--color-muted)]" aria-hidden="true">
+          <DatabaseIcon class="h-5 w-5" />
+        </span>
+        <div class="flex-1">
+          <h2 bind:this={orphanTitle} tabindex="-1" id="cairn-ml-orphan-title" class="text-lg font-bold tracking-tight outline-hidden font-[family-name:var(--font-display)]">Orphaned files and broken references</h2>
+          <p id="cairn-ml-orphan-desc" class="mt-1 text-[0.8125rem] leading-relaxed text-[var(--color-muted)]">
+            A scan of stored files against the library across every tracked branch. It found {orphanBytes.length} stored {orphanBytes.length === 1 ? 'file' : 'files'} with no record, and {orphanBroken.length} {orphanBroken.length === 1 ? 'record whose file is' : 'records whose files are'} gone.
+          </p>
+        </div>
+        <button type="button" class="btn btn-ghost btn-xs btn-square" aria-label="Close" onclick={closeOrphanScan}>
+          <XIcon class="h-3.5 w-3.5" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="flex flex-col gap-5">
+        <!-- SECTION 1: orphaned BYTES, the irreversible purge surface. -->
+        <section>
+          <div class="mb-2 flex items-baseline justify-between gap-2">
+            <span class="inline-flex items-center gap-2 text-[0.8125rem] font-semibold">Orphaned files <span class="rounded-full bg-base-content/[0.07] px-1.5 py-0.5 text-[0.6875rem] tabular-nums">{orphanBytes.length}</span></span>
+          </div>
+          <p class="mb-2 text-[0.75rem] leading-relaxed text-[var(--color-muted)]">Stored files with no record in the library. No <code class="rounded bg-[var(--cairn-code-chip)] px-1 py-0.5 font-[family-name:var(--font-editor)] text-[0.6875rem]">media:</code> reference can point to these, so nothing on the site uses them through cairn.</p>
+          {#if orphanBytes.length === 0}
+            <!-- The calm empty state: a clean scan, no purge control. -->
+            <div class="flex items-center gap-2.5 rounded-box border border-[var(--cairn-card-border)] bg-base-200/50 p-3 text-[0.8125rem] text-[var(--color-muted)]">
+              <CheckIcon class="h-4 w-4 flex-none text-[var(--color-positive-ink)]" aria-hidden="true" /> No orphaned files found. Every stored file has a record.
+            </div>
+          {:else}
+            <!-- The residual-risk note, named at the point of action. -->
+            <div class="mb-2 flex items-start gap-2.5 rounded-box border border-[var(--cairn-error-border)] bg-[var(--cairn-error-tint)] p-3 text-[0.8125rem] leading-relaxed text-[var(--cairn-error-ink)]">
+              <TriangleAlertIcon class="mt-0.5 h-4 w-4 flex-none" aria-hidden="true" />
+              <span><b class="font-semibold">Purging a file removes the bytes for good.</b> There is no git history for raw storage, so this cannot be undone. The one thing cairn cannot check: a page that hardcodes a file's web address in raw HTML would still load these.</span>
+            </div>
+            <div class="overflow-hidden rounded-box border border-[var(--cairn-card-border)]">
+              <div class="flex items-center gap-2.5 border-b border-[var(--cairn-card-border)] bg-base-200/60 px-3 py-2">
+                <input
+                  bind:this={orphanSelectAll}
+                  type="checkbox"
+                  class="checkbox checkbox-sm border-[var(--cairn-error-border)]"
+                  aria-label="Select all orphaned files"
+                  onchange={toggleOrphanAll}
+                />
+                <span class="text-[0.75rem] font-semibold text-[var(--color-muted)]">{orphanBytes.length} {orphanBytes.length === 1 ? 'file' : 'files'} in storage with no record</span>
+              </div>
+              <!-- A plain list of labelled native checkboxes, NOT a listbox. The rows carry no roving
+                   tabindex or key handler, so the listbox role would have been decorative and would
+                   have fought the Tab-to-checkbox model. Each checkbox is the selection signal; the
+                   header select-all conveys group state. -->
+              <ul aria-label="Orphaned files" class="flex max-h-52 list-none flex-col overflow-y-auto p-0">
+                {#each orphanBytes as byte (byte.key)}
+                  {@const picked = orphanKeys.has(byte.key)}
+                  <li class="flex items-center gap-2.5 border-t border-[color-mix(in_oklab,var(--cairn-card-border)_70%,transparent)] px-3 py-2 first:border-t-0">
+                    <input
+                      type="checkbox"
+                      class="checkbox checkbox-sm border-[var(--cairn-error-border)]"
+                      checked={picked}
+                      aria-label={`Select ${byte.key}`}
+                      onchange={() => toggleOrphanKey(byte.key)}
+                    />
+                    <span class="h-6 w-8 flex-none rounded border border-[var(--cairn-card-border)] bg-base-200 [background-image:linear-gradient(45deg,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_25%,transparent_25%,transparent_75%,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_75%),linear-gradient(45deg,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_25%,transparent_25%,transparent_75%,color-mix(in_oklab,var(--color-base-content)_7%,transparent)_75%)] [background-position:0_0,4px_4px] [background-size:8px_8px]" aria-hidden="true"></span>
+                    <div class="min-w-0 flex-1">
+                      <div class="truncate font-[family-name:var(--font-editor)] text-[0.75rem]">{byte.key}</div>
+                      <div class="text-[0.6875rem] text-[var(--color-muted)]">No library record</div>
+                    </div>
+                  </li>
+                {/each}
+              </ul>
+            </div>
+            <!-- The per-section action: a selection note plus the SOLID-danger Purge (never a warning fill). -->
+            <div class="mt-3 flex items-center gap-2.5">
+              <span class="inline-flex items-center gap-1.5 text-[0.75rem] text-[var(--color-muted)]">
+                {orphanSelectedCount} of {orphanBytes.length} selected
+                {#if orphanSelectedCount > 0}<button type="button" class="link text-[var(--color-muted)]" onclick={clearOrphanSelection}>Clear</button>{/if}
+              </span>
+              <span class="flex-1"></span>
+              <button
+                type="button"
+                class="btn btn-sm border-0 bg-[var(--color-error)] text-[var(--color-error-content)] hover:bg-[var(--color-error)]/90"
+                aria-haspopup="dialog"
+                disabled={orphanSelectedCount === 0}
+                onclick={openOrphanPurge}
+              >
+                <Trash2Icon class="h-3.5 w-3.5" aria-hidden="true" /> Purge {orphanSelectedCount} {orphanSelectedCount === 1 ? 'file' : 'files'}
+              </button>
+            </div>
+          {/if}
+        </section>
+
+        <!-- SECTION 2: BROKEN references, a READ-ONLY data-integrity readout. No checkbox, no action. -->
+        {#if orphanBroken.length > 0}
+          <section data-testid="cairn-broken-refs">
+            <div class="mb-2 flex items-baseline justify-between gap-2">
+              <span class="inline-flex items-center gap-2 text-[0.8125rem] font-semibold">Broken references <span class="rounded-full bg-base-content/[0.07] px-1.5 py-0.5 text-[0.6875rem] tabular-nums">{orphanBroken.length}</span></span>
+            </div>
+            <p class="mb-2 text-[0.75rem] leading-relaxed text-[var(--color-muted)]">A record points at a file that is no longer in storage. This is not something to delete here. Re-upload or remove the reference from the entries below.</p>
+            <ul class="flex list-none flex-col overflow-hidden rounded-box border border-[var(--cairn-card-border)] p-0">
+              {#each orphanBroken as ref (ref.hash)}
+                <li class="flex items-center gap-2.5 border-t border-[color-mix(in_oklab,var(--cairn-card-border)_70%,transparent)] px-3 py-2 first:border-t-0">
+                  <span class="flex h-7 w-9 flex-none items-center justify-center rounded border border-[var(--cairn-card-border)] bg-base-200 text-[var(--color-muted)]" aria-hidden="true">
+                    <ImageOffIcon class="h-3.5 w-3.5" />
+                  </span>
+                  <div class="min-w-0 flex-1">
+                    <div class="truncate text-[0.8125rem] font-semibold">{ref.slug || ref.hash}</div>
+                    <div class="truncate font-[family-name:var(--font-editor)] text-[0.6875rem] text-[var(--color-muted)]">file missing in storage</div>
+                  </div>
+                  <span class="flex-none text-[0.6875rem] font-semibold text-[var(--color-muted)]">{brokenWhereUsed(ref.usage.length)}</span>
+                </li>
+              {/each}
+            </ul>
+          </section>
+        {/if}
+      </div>
+
+      <div class="mt-5 flex items-center justify-end gap-2.5 border-t border-[var(--cairn-card-border)] pt-3.5">
+        <span class="mr-auto inline-flex items-center gap-1.5 text-[0.75rem] text-[var(--color-muted)]">
+          <GitBranchIcon class="h-3.5 w-3.5" aria-hidden="true" /> Scanned across the site and every open edit
+        </span>
+        <button type="button" class="btn btn-sm" onclick={closeOrphanScan}>Close</button>
+      </div>
+    {/if}
+  </div>
+</dialog>