@glw907/cairn-cms 0.60.0 → 0.62.1

package/dist/components/CairnMediaLibrary.svelte

@@ -31,1265 +31,876 @@ orphan face is a calm confirm. Both post to `?/mediaDelete`. A `form` carrying a
 It is node-safe by construction: it types assets with MediaLibraryEntry from the shared node-safe
 projection and pulls in no editor module (the editor-boundary test bars a @codemirror leak).
 -->
-<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,
-    ContentFormFailure,
-    MediaReplacePreviewPlan,
-    MediaReplaceFailure,
-    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';
-  import { publicPath } from '../media/naming.js';
-  import { mediaToken } from '../media/reference.js';
-  import { CSRF_CONTEXT_KEY } from './csrf-context.js';
-  import {
-    ingestFile,
-    buildUploadRequest,
-    sendUpload,
-    ingestFailureKind,
-    failureCard,
-    type IngestFailureCard,
-  } from './client-ingest.js';
-  import { uploadOutcome, type UploadEnvelope } from './media-upload-outcome.js';
-  import CsrfField from './CsrfField.svelte';
-  import CairnLogo from './CairnLogo.svelte';
-  import {
-    SearchIcon,
-    UploadIcon,
-    LayoutGridIcon,
-    ListIcon,
-    CheckIcon,
-    TriangleAlertIcon,
-    ImageOffIcon,
-    Trash2Icon,
-    ChevronDownIcon,
-    ChevronRightIcon,
-    XIcon,
-    CopyIcon,
-    FileTextIcon,
-    ClockIcon,
-    Link2OffIcon,
-    RefreshCwIcon,
-    GitBranchIcon,
-    ArrowRightIcon,
-    MegaphoneIcon,
-    DatabaseIcon,
-  } from './admin-icons.js';
-
-  interface Props {
-    /** The media library load's data: the unioned assets, the per-hash usage overlay, and a
-     *  degraded-load error. */
-    data: MediaLibraryData;
-    /** The last media action's result. A `?/mediaDelete` refusal carries the fresh breaking list
-     *  the in-use face re-opens on; a `?/mediaUpdate` failure carries the error the slide-over
-     *  surfaces. The route exports one `form`, so this is the merged `ContentFormFailure`. */
-    form?: ContentFormFailure | null;
+<script lang="ts">import { flushSync, getContext, tick } from "svelte";
+import { deserialize } from "$app/forms";
+import { invalidateAll } from "$app/navigation";
+import { publicPath } from "../media/naming.js";
+import { mediaToken } from "../media/reference.js";
+import { CSRF_CONTEXT_KEY } from "./csrf-context.js";
+import {
+  ingestFile,
+  buildUploadRequest,
+  sendUpload,
+  ingestFailureKind,
+  failureCard
+} from "./client-ingest.js";
+import { uploadOutcome } from "./media-upload-outcome.js";
+import CsrfField from "./CsrfField.svelte";
+import CairnLogo from "./CairnLogo.svelte";
+import {
+  SearchIcon,
+  UploadIcon,
+  LayoutGridIcon,
+  ListIcon,
+  CheckIcon,
+  TriangleAlertIcon,
+  ImageOffIcon,
+  Trash2Icon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  XIcon,
+  CopyIcon,
+  FileTextIcon,
+  ClockIcon,
+  Link2OffIcon,
+  RefreshCwIcon,
+  GitBranchIcon,
+  ArrowRightIcon,
+  MegaphoneIcon,
+  DatabaseIcon
+} from "./admin-icons.js";
+let { data, form } = $props();
+const FLASH_MESSAGE = {
+  deleted: "Asset deleted.",
+  updated: "Changes saved.",
+  replaced: "Asset replaced.",
+  altPropagated: "Alt text applied.",
+  bulkDeleted: "Assets deleted.",
+  orphansPurged: "Orphans purged."
+};
+const flashMessage = $derived(data.flash ? FLASH_MESSAGE[data.flash] : "");
+function usageCount(hash) {
+  return data.usage[hash]?.count ?? 0;
+}
+function needsAlt(asset) {
+  return asset.alt.trim() === "";
+}
+const usedCount = $derived(data.assets.filter((a) => usageCount(a.hash) > 0).length);
+const triageCounts = $derived({
+  all: data.assets.length,
+  needsAlt: data.assets.filter((a) => needsAlt(a)).length,
+  // 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
+});
+const distinctTypes = $derived.by(() => {
+  const seen = /* @__PURE__ */ new Set();
+  for (const a of data.assets) seen.add(a.contentType.split("/")[0] ?? "");
+  return seen;
+});
+const showFacet = $derived(distinctTypes.size > 1);
+let query = $state("");
+let triage = $state("all");
+let density = $state("grid");
+const segments = [
+  { value: "all", label: "All", count: () => triageCounts.all },
+  { value: "needs-alt", label: "Needs alt", count: () => triageCounts.needsAlt },
+  { value: "unused", label: "No references found", count: () => triageCounts.unused }
+];
+let segEls = $state([]);
+function selectTriage(value) {
+  triage = value;
+}
+function onTriageKeydown(e, i) {
+  let next = i;
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (i + 1) % segments.length;
+  else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (i - 1 + segments.length) % segments.length;
+  else if (e.key === "Home") next = 0;
+  else if (e.key === "End") next = segments.length - 1;
+  else return;
+  e.preventDefault();
+  selectTriage(segments[next].value);
+  segEls[next]?.focus();
+}
+function matchesTriage(asset) {
+  switch (triage) {
+    case "needs-alt":
+      return needsAlt(asset);
+    case "unused":
+      return usageCount(asset.hash) === 0;
+    default:
+      return true;
   }
-
-  let { data, form }: Props = $props();
-
-  // The success flash a redirected action carried back: a safe-delete or a metadata edit. The
-  // conflict error (data.flashError) renders in the inline error treatment below instead.
-  const FLASH_MESSAGE = {
-    deleted: 'Asset deleted.',
-    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] : '');
-
-  // --- the per-hash usage facts the screen joins onto each asset ---
-  /** The distinct-entry usage count for an asset; zero when the asset has no usage key. */
-  function usageCount(hash: string): number {
-    return data.usage[hash]?.count ?? 0;
-  }
-  /** Empty alt is the needs-alt signal (the asset carries no caption field, so this is the only
-   *  per-asset alt fact). A non-image asset would read Not applicable, but the delivery route is
-   *  image-only today, so every committed asset here is an image. */
-  function needsAlt(asset: MediaLibraryEntry): boolean {
-    return asset.alt.trim() === '';
-  }
-
-  // --- the live count line and the triage counts, over the FULL loaded set ---
-  const usedCount = $derived(data.assets.filter((a) => usageCount(a.hash) > 0).length);
-  const triageCounts = $derived({
-    all: data.assets.length,
-    needsAlt: data.assets.filter((a) => needsAlt(a)).length,
-    // 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,
+}
+const filtered = $derived.by(() => {
+  const q = query.trim().toLowerCase();
+  return data.assets.filter((a) => {
+    if (!matchesTriage(a)) return false;
+    if (!q) return true;
+    return a.displayName.toLowerCase().includes(q) || a.alt.toLowerCase().includes(q);
   });
-
-  // The type facet (Images, Documents) is a designed-in seam: it stays hidden until the library
-  // holds more than one top-level content type. The delivery route is image-only today, so this is
-  // present without dead UI. (No selection state yet; the seam is the visibility computation.)
-  const distinctTypes = $derived.by(() => {
-    const seen = new Set<string>();
-    for (const a of data.assets) seen.add(a.contentType.split('/')[0] ?? '');
-    return seen;
+});
+let sortAsc = $state(false);
+const sorted = $derived.by(() => {
+  return [...filtered].sort((a, b) => {
+    const cmp = a.createdAt.localeCompare(b.createdAt);
+    return sortAsc ? cmp : -cmp;
   });
-  const showFacet = $derived(distinctTypes.size > 1);
-
-  // --- the toolbar state ---
-  type Triage = 'all' | 'needs-alt' | 'unused';
-  type Density = 'grid' | 'list';
-  let query = $state('');
-  let triage = $state<Triage>('all');
-  let density = $state<Density>('grid');
-
-  // The triage segments, in display order, each naming its value, label, and live count.
-  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: 'No references found', count: () => triageCounts.unused },
-  ];
-
-  // The triage radiogroup's roving tabindex and ARIA radio keyboard pattern: the selected radio is
-  // the only tab stop, and Arrow/Home/End move the selection and the focus, mirroring the grid's
-  // roving listbox. A declared radiogroup owes this keyboard model.
-  let segEls = $state<HTMLButtonElement[]>([]);
-  function selectTriage(value: Triage) {
-    triage = value;
-  }
-  function onTriageKeydown(e: KeyboardEvent, i: number) {
-    let next = i;
-    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') next = (i + 1) % segments.length;
-    else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') next = (i - 1 + segments.length) % segments.length;
-    else if (e.key === 'Home') next = 0;
-    else if (e.key === 'End') next = segments.length - 1;
-    else return;
+});
+function toggleSort() {
+  sortAsc = !sortAsc;
+}
+const addedSort = $derived(sortAsc ? "ascending" : "descending");
+const PAGE = 24;
+let shown = $state(PAGE);
+$effect(() => {
+  void sorted.length;
+  shown = PAGE;
+});
+const visible = $derived(sorted.slice(0, shown));
+const hasMore = $derived(shown < sorted.length);
+function loadMore() {
+  shown = Math.min(shown + PAGE, sorted.length);
+}
+let selected = $state(null);
+let deleteOnly = $state(false);
+let panelOrigin = null;
+let panelEl = $state(null);
+let closeButton = $state(null);
+let deleteDialog = $state(null);
+function openAsset(asset, origin) {
+  panelOrigin = origin ?? document.activeElement;
+  deleteOnly = false;
+  selected = asset;
+  flushSync();
+  closeButton?.focus();
+}
+function closePanel() {
+  selected = null;
+  deleteOnly = false;
+  panelOrigin?.focus();
+  panelOrigin = null;
+}
+function onWindowKeydown(e) {
+  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();
-    selectTriage(segments[next].value);
-    segEls[next]?.focus();
-  }
-
-  function matchesTriage(asset: MediaLibraryEntry): boolean {
-    switch (triage) {
-      case 'needs-alt':
-        return needsAlt(asset);
-      case 'unused':
-        return usageCount(asset.hash) === 0;
-      default:
-        return true;
-    }
-  }
-
-  // Search spans the display name and the alt over the FULL set. MediaLibraryEntry carries no
-  // caption field, so there is nothing further to search; the toolbar copy says "name or alt".
-  const filtered = $derived.by(() => {
-    const q = query.trim().toLowerCase();
-    return data.assets.filter((a) => {
-      if (!matchesTriage(a)) return false;
-      if (!q) return true;
-      return a.displayName.toLowerCase().includes(q) || a.alt.toLowerCase().includes(q);
-    });
-  });
-
-  // --- sorting (the list density's Added column) ---
-  let sortAsc = $state(false); // newest-first by default, the usual CMS convention
-  const sorted = $derived.by(() => {
-    // Lexical compare on the ISO createdAt is chronological; copy first so the source order holds.
-    return [...filtered].sort((a, b) => {
-      const cmp = a.createdAt.localeCompare(b.createdAt);
-      return sortAsc ? cmp : -cmp;
-    });
-  });
-  function toggleSort() {
-    sortAsc = !sortAsc;
+    closePanel();
+    return;
   }
-  const addedSort = $derived(sortAsc ? 'ascending' : 'descending');
-
-  // --- the client pagination window (a growing visible count, never infinite scroll) ---
-  const PAGE = 24;
-  let shown = $state(PAGE);
-  // Reset the window whenever the filtered set changes so a narrowing filter never strands the
-  // window past the result count. (Reading `sorted.length` ties this to filter/sort/search.)
-  $effect(() => {
-    void sorted.length;
-    shown = PAGE;
-  });
-  const visible = $derived(sorted.slice(0, shown));
-  const hasMore = $derived(shown < sorted.length);
-  function loadMore() {
-    shown = Math.min(shown + PAGE, sorted.length);
+  if (selectedCount > 0) {
+    const active = document.activeElement;
+    const inSearch = active instanceof HTMLInputElement && active.type === "search";
+    if (inSearch) return;
+    e.preventDefault();
+    clearSelection();
   }
-
-  // --- selection, the slide-over, and the safe-delete dialog ---
-  // `selected` is the asset the slide-over (and the alertdialog) render off. The table's per-row
-  // trash opens the alertdialog straight to the right face for that asset (requestDelete) without
-  // opening the slide-over; a tile or row activation opens the slide-over (openAsset).
-  let selected = $state<MediaLibraryEntry | null>(null);
-  // True while the dialog was opened straight from a row trash without the slide-over, so the
-  // {#if selected} slide-over stays closed for a delete-only intent.
-  let deleteOnly = $state(false);
-
-  // The element that opened the slide-over (a tile or a row trigger), so focus returns to it on
-  // close (the non-modal region recipe: focus moves in on open, back to the origin on close).
-  let panelOrigin: HTMLElement | null = null;
-  let panelEl = $state<HTMLElement | null>(null);
-  let closeButton = $state<HTMLButtonElement | null>(null);
-  let deleteDialog = $state<HTMLDialogElement | null>(null);
-
-  function openAsset(asset: MediaLibraryEntry, origin?: HTMLElement | null) {
-    panelOrigin = origin ?? (document.activeElement as HTMLElement | null);
+}
+function requestDelete(asset) {
+  deleteOnly = true;
+  selected = asset;
+  openDeleteDialog();
+}
+function openDeleteDialog() {
+  confirmSlugInput = "";
+  flushSync();
+  deleteDialog?.showModal();
+}
+function closeDeleteDialog() {
+  deleteDialog?.close();
+  confirmSlugInput = "";
+  if (deleteOnly) {
     deleteOnly = false;
-    selected = asset;
-    // flushSync mounts the panel synchronously so its close button exists before we move focus in.
-    flushSync();
-    closeButton?.focus();
-  }
-  /** Close the slide-over and return focus to the tile or row that opened it. */
-  function closePanel() {
     selected = null;
-    deleteOnly = false;
-    panelOrigin?.focus();
-    panelOrigin = null;
   }
-  // Escape closes the slide-over (the non-modal region recipe). A window listener carries it, the
-  // way EditPage's details panel does, so the non-interactive region needs no keyboard handler. The
-  // dialog (when open) claims Escape natively, so the panel handles it only when no dialog is up.
-  // 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') 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();
-    }
+}
+const csrf = getContext(CSRF_CONTEXT_KEY);
+let replaceDialog = $state(null);
+let replaceOrigin = null;
+let replaceCancelButton = $state(null);
+let replaceFileInput = $state(null);
+let replaceStep = $state("upload");
+let replaceUpload = $state({ kind: "idle" });
+let replaceRecord = $state(null);
+let replacePlan = $state(null);
+let replaceFailure = $state(null);
+let replaceConfirmInput = $state("");
+let replaceAsset = $state(null);
+const replaceConfirmMatches = $derived(replaceAsset !== null && replaceConfirmInput === replaceAsset.slug);
+function openReplaceDialog(origin) {
+  if (!selected) return;
+  replaceOrigin = origin ?? document.activeElement ?? null;
+  replaceAsset = selected;
+  replaceStep = "upload";
+  replaceUpload = { kind: "idle" };
+  replaceRecord = null;
+  replacePlan = null;
+  replaceFailure = null;
+  replaceConfirmInput = "";
+  void tick().then(() => {
+    replaceDialog?.showModal();
+    replaceCancelButton?.focus();
+  });
+}
+function closeReplaceDialog() {
+  replaceDialog?.close();
+  replaceAsset = null;
+  replaceRecord = null;
+  replacePlan = null;
+  replaceFailure = null;
+  replaceConfirmInput = "";
+  replaceUpload = { kind: "idle" };
+  replaceOrigin?.focus();
+  replaceOrigin = null;
+}
+function onReplaceFileChosen(e) {
+  const input = e.currentTarget;
+  const file = input.files?.[0];
+  if (file) void runReplaceUpload(file);
+}
+async function runReplaceUpload(file) {
+  if (!replaceAsset) return;
+  replaceUpload = { kind: "working" };
+  const genericFail = () => replaceUpload = {
+    kind: "failed",
+    card: { status: "failed", message: GENERIC_UPLOAD_MESSAGE },
+    retry: () => void runReplaceUpload(file)
+  };
+  let ingested;
+  try {
+    ingested = await ingestFile(file);
+  } catch (err) {
+    replaceUpload = { kind: "failed", card: failureCard(ingestFailureKind(err)), retry: () => void runReplaceUpload(file) };
+    return;
   }
-
-  // The per-row delete intent opens the alertdialog directly on the right face for that asset.
-  function requestDelete(asset: MediaLibraryEntry) {
-    deleteOnly = true;
-    selected = asset;
-    openDeleteDialog();
+  const built = buildUploadRequest({
+    conceptId: "",
+    id: "",
+    bytes: ingested.blob,
+    contentType: ingested.contentType,
+    csrf: csrf?.() ?? "",
+    filename: file.name,
+    width: ingested.width,
+    height: ingested.height
+  });
+  let res;
+  try {
+    res = await sendUpload(REPLACE_UPLOAD_URL, built.init);
+  } catch (err) {
+    replaceUpload = { kind: "failed", card: failureCard(ingestFailureKind(err)), retry: () => void runReplaceUpload(file) };
+    return;
   }
-  // The slide-over's Delete button opens the same dialog for the already-selected asset.
-  function openDeleteDialog() {
-    confirmSlugInput = '';
-    flushSync();
-    deleteDialog?.showModal();
+  if (res.type === "opaqueredirect" || res.status === 0) {
+    genericFail();
+    return;
   }
-  function closeDeleteDialog() {
-    deleteDialog?.close();
-    confirmSlugInput = '';
-    // A row-only delete leaves no slide-over to return to, so clear the selection on cancel.
-    if (deleteOnly) {
-      deleteOnly = false;
-      selected = null;
-    }
+  let outcome;
+  try {
+    outcome = uploadOutcome(deserialize(await res.text()));
+  } catch {
+    genericFail();
+    return;
   }
-
-  // --- the Replace flow: a two-step alertdialog (upload, then impact review) over the selected asset ---
-  // Replace uploads a new file for the selected asset; cairn is content-addressed, so the new file has a
-  // new hash and every published reference is repointed to it in one commit to main. The dialog opens on
-  // the quiet upload step, holds the server-owned record on a successful upload, fetches the preview
-  // (fail-closed), and renders the impact review behind a typed-slug gate. The CSRF token getter comes
-  // from the admin context, the same seam the insert popover reads.
-  const csrf = getContext<(() => string) | undefined>(CSRF_CONTEXT_KEY);
-
-  type ReplaceStep = 'upload' | 'review' | 'blocked';
-  // The transient upload status under the upload step: idle, an in-flight ingest/upload, or a typed
-  // ingest failure card with a retry. Mirrors the insert popover's failed-card grammar.
-  type ReplaceUpload =
-    | { kind: 'idle' }
-    | { kind: 'working' }
-    | { kind: 'failed'; card: IngestFailureCard | { status: 'failed'; message: string }; retry: () => void };
-
-  let replaceDialog = $state<HTMLDialogElement | null>(null);
-  // The entry-point button that opened the dialog, so focus restores to it on close (the alertdialog
-  // recipe, like the delete dialog's slide-over Delete button).
-  let replaceOrigin: HTMLElement | null = null;
-  // The Cancel control, the destructive-confirm initial focus.
-  let replaceCancelButton = $state<HTMLButtonElement | null>(null);
-  let replaceFileInput = $state<HTMLInputElement | null>(null);
-  let replaceStep = $state<ReplaceStep>('upload');
-  let replaceUpload = $state<ReplaceUpload>({ kind: 'idle' });
-  // The server-owned record the upload returned (the new asset), held for the preview and the apply.
-  let replaceRecord = $state<MediaEntry | null>(null);
-  // The resolved preview plan (the review step) or the fail-closed failure (the blocked step).
-  let replacePlan = $state<MediaReplacePreviewPlan | null>(null);
-  let replaceFailure = $state<MediaReplaceFailure | null>(null);
-  // The typed-slug confirm gate, echoing the delete dialog's type-to-confirm.
-  let replaceConfirmInput = $state('');
-  // The asset the Replace dialog acts on, pinned at open so a background re-render never swaps it.
-  let replaceAsset = $state<MediaLibraryEntry | null>(null);
-  const replaceConfirmMatches = $derived(replaceAsset !== null && replaceConfirmInput === replaceAsset.slug);
-
-  function openReplaceDialog(origin?: HTMLElement | null) {
-    if (!selected) return;
-    // The entry-point button passed from the click (focus restores here on close), falling back to the
-    // active element. A programmatic .click() does not focus its target, so the explicit origin is the
-    // reliable restore point.
-    replaceOrigin = origin ?? (document.activeElement as HTMLElement | null) ?? null;
-    replaceAsset = selected;
-    replaceStep = 'upload';
-    replaceUpload = { kind: 'idle' };
-    replaceRecord = null;
-    replacePlan = null;
-    replaceFailure = null;
-    replaceConfirmInput = '';
-    // Show the dialog after the step state flushes, then move focus to Cancel.
-    void tick().then(() => {
-      replaceDialog?.showModal();
-      replaceCancelButton?.focus();
-    });
+  if (outcome.kind !== "inserted") {
+    genericFail();
+    return;
   }
-  function closeReplaceDialog() {
-    replaceDialog?.close();
-    replaceAsset = null;
-    replaceRecord = null;
+  replaceRecord = outcome.record;
+  replaceUpload = { kind: "idle" };
+  await runReplacePreview();
+}
+let replacePreviewSeq = 0;
+async function runReplacePreview() {
+  if (!replaceAsset || !replaceRecord) return;
+  const hash = replaceAsset.hash;
+  const seq = ++replacePreviewSeq;
+  const blockClosed = (failure) => {
+    replaceFailure = failure ?? { error: "", hash, usage: [], foundIn: 0 };
     replacePlan = null;
-    replaceFailure = null;
-    replaceConfirmInput = '';
-    replaceUpload = { kind: 'idle' };
-    // Restore focus to the entry-point button (the alertdialog focus-restore recipe).
-    replaceOrigin?.focus();
-    replaceOrigin = null;
-  }
-
-  // The chosen-file handler: route the file through the ingest-and-upload loop, exactly as the insert
-  // popover does, then fetch the preview. A file is the only path (Pass B is upload-new-only).
-  function onReplaceFileChosen(e: Event) {
-    const input = e.currentTarget as HTMLInputElement;
-    const file = input.files?.[0];
-    if (file) void runReplaceUpload(file);
-  }
-
-  // The upload loop for the new file. It ingests (decode/transcode), uploads through the shared
-  // transport, and on the success envelope holds the new record and runs the preview. A typed ingest or
-  // upload failure surfaces a retry card on the upload step; an expired session reads as a generic card.
-  // The upload posts to the media-scoped ?/mediaUpload action: the Library is not entry-scoped, so it
-  // overrides buildUploadRequest's entry URL while reusing its header-and-body transport verbatim.
-  async function runReplaceUpload(file: File) {
-    if (!replaceAsset) return;
-    replaceUpload = { kind: 'working' };
-    const genericFail = () =>
-      (replaceUpload = {
-        kind: 'failed',
-        card: { status: 'failed', message: GENERIC_UPLOAD_MESSAGE },
-        retry: () => void runReplaceUpload(file),
-      });
-
-    let ingested: Awaited<ReturnType<typeof ingestFile>>;
-    try {
-      ingested = await ingestFile(file);
-    } catch (err) {
-      replaceUpload = { kind: 'failed', card: failureCard(ingestFailureKind(err)), retry: () => void runReplaceUpload(file) };
-      return;
-    }
-
-    const built = buildUploadRequest({
-      conceptId: '',
-      id: '',
-      bytes: ingested.blob,
-      contentType: ingested.contentType,
-      csrf: csrf?.() ?? '',
-      filename: file.name,
-      width: ingested.width,
-      height: ingested.height,
+    replaceStep = "blocked";
+  };
+  const body = JSON.stringify({ oldHash: hash, newHash: replaceRecord.hash, slug: replaceAsset.slug });
+  let result;
+  try {
+    const res = await fetch(REPLACE_PREVIEW_URL, {
+      method: "POST",
+      headers: { "Content-Type": "text/plain", "X-Cairn-CSRF": csrf?.() ?? "" },
+      body
     });
-    let res: Response;
-    try {
-      res = await sendUpload(REPLACE_UPLOAD_URL, built.init);
-    } catch (err) {
-      replaceUpload = { kind: 'failed', card: failureCard(ingestFailureKind(err)), retry: () => void runReplaceUpload(file) };
-      return;
-    }
-    // The guard's expired-session 303 under redirect:'manual' surfaces as an opaque, status-0 response.
-    if (res.type === 'opaqueredirect' || res.status === 0) {
-      genericFail();
-      return;
-    }
-    let outcome: ReturnType<typeof uploadOutcome>;
-    try {
-      outcome = uploadOutcome(deserialize(await res.text()) as UploadEnvelope);
-    } catch {
-      genericFail();
-      return;
-    }
-    if (outcome.kind !== 'inserted') {
-      genericFail();
-      return;
-    }
-    // Hold the server-owned record, then fetch the impact preview for (oldHash -> newHash).
-    replaceRecord = outcome.record;
-    replaceUpload = { kind: 'idle' };
-    await runReplacePreview();
-  }
-
-  // A per-call request token guards the preview fetch against a stale response landing on a closed or
-  // reopened dialog. Svelte reactivity does not track reads below the first `await`, so each call pins
-  // its own sequence at entry and bails after the await if a newer call (a reopen, or a "Check usage
-  // again" double-click) has since superseded it.
-  let replacePreviewSeq = 0;
-
-  // The preview fetch: POST the (oldHash, newHash, slug) tuple in the 2a transport (a text/plain
-  // body, the CSRF token in the X-Cairn-CSRF header), parse the SvelteKit ActionResult envelope, and
-  // route to the review step (a plan) or the fail-closed blocked step (a failure). Re-runnable from the
-  // blocked step's "Check usage again". The slug is the OLD asset's: a replace keeps the name and
-  // changes only the content hash, so the repointed token carries the existing slug, not the new file's.
-  async function runReplacePreview() {
-    if (!replaceAsset || !replaceRecord) return;
-    const hash = replaceAsset.hash;
-    const seq = ++replacePreviewSeq;
-    // The fail-closed landing: an unverifiable usage read, an unreachable preview, or an unparseable
-    // body all route to the blocked step. The passed failure carries the branch-naming error when the
-    // server returned one; a transport miss carries the empty error (the generic honest line stands in).
-    const blockClosed = (failure?: MediaReplaceFailure) => {
-      replaceFailure = failure ?? { error: '', hash, usage: [], foundIn: 0 };
-      replacePlan = null;
-      replaceStep = 'blocked';
-    };
-
-    const body = JSON.stringify({ oldHash: hash, newHash: replaceRecord.hash, slug: replaceAsset.slug });
-    let result: { type: string; data?: unknown };
-    try {
-      const res = await fetch(REPLACE_PREVIEW_URL, {
-        method: 'POST',
-        headers: { 'Content-Type': 'text/plain', 'X-Cairn-CSRF': csrf?.() ?? '' },
-        body,
-      });
-      result = deserialize(await res.text()) as { type: string; data?: unknown };
-    } catch {
-      // Drop a stale response that lost the race to a reopen or a re-run before surfacing the block.
-      if (seq !== replacePreviewSeq) return;
-      blockClosed();
-      return;
-    }
-    // The dialog was closed or reopened (for another asset, or via a re-run) while this fetch was in
-    // flight, so this response is stale: ignore it rather than clobber the live state.
+    result = deserialize(await res.text());
+  } catch {
     if (seq !== replacePreviewSeq) return;
-    if (result.type === 'success' && result.data) {
-      replacePlan = result.data as MediaReplacePreviewPlan;
-      replaceFailure = null;
-      replaceConfirmInput = '';
-      replaceStep = 'review';
-    } else {
-      blockClosed(result.data as MediaReplaceFailure | undefined);
-    }
+    blockClosed();
+    return;
   }
-
-  const GENERIC_UPLOAD_MESSAGE = 'The upload could not be completed. Please try again.';
-  // The media-scoped upload and preview action URLs, relative to /admin/media. The upload reuses the
-  // shared ingest transport but the Library has no entry, so it targets ?/mediaUpload rather than the
-  // entry-scoped ?/upload. The apply form below posts ?/mediaReplace.
-  const REPLACE_UPLOAD_URL = '?/mediaUpload';
-  const REPLACE_PREVIEW_URL = '?/mediaReplacePreview';
-
-  // The affected-entry well caps past this many rows; "Show all N" reveals the rest into the same
-  // scroll container (the a11y contract: aria-expanded + aria-controls).
-  const REPLACE_ROW_CAP = 8;
-  let replaceShowAll = $state(false);
-  // The affected-entry list element, so "Show all" can move focus to the first newly revealed row (the
-  // one just past the cap) instead of dropping to <body> when the expander button unmounts.
-  let replaceEntriesList = $state<HTMLElement | null>(null);
-  $effect(() => {
-    // Reset the reveal whenever a fresh plan arrives, so a second preview never opens pre-expanded.
-    void replacePlan;
-    replaceShowAll = false;
-  });
-  // Reveal the capped rows, then move focus to the first newly revealed row (the rev.2 contract). The
-  // expander unmounts on the flag flip, so without this focus falls to <body>.
-  function showAllReplaceEntries() {
-    replaceShowAll = true;
-    void tick().then(() => (replaceEntriesList?.children[REPLACE_ROW_CAP] as HTMLElement | undefined)?.focus());
+  if (seq !== replacePreviewSeq) return;
+  if (result.type === "success" && result.data) {
+    replacePlan = result.data;
+    replaceFailure = null;
+    replaceConfirmInput = "";
+    replaceStep = "review";
+  } else {
+    blockClosed(result.data);
   }
-  const replaceEntries = $derived(replacePlan?.entries ?? []);
-  const replaceVisibleEntries = $derived(
-    replaceShowAll ? replaceEntries : replaceEntries.slice(0, REPLACE_ROW_CAP),
-  );
-  const replaceHiddenCount = $derived(Math.max(0, replaceEntries.length - REPLACE_ROW_CAP));
-  // The server's distinct affected-entry count, read in several places across the review markup and
-  // the apply button. Coalesced once here so each read stays a plain number.
-  const replaceAffected = $derived(replacePlan?.affectedCount ?? 0);
-
-  // The where-used summary line for one affected entry, derived from its repointed placements: a hero
-  // count and a body count, folded into a plain phrase ("Hero and 2 in the body", "1 in the body").
-  function replaceWhereUsed(entry: MediaReplacePreviewEntry): string {
-    let hero = 0;
-    let body = 0;
-    for (const p of entry.placements) {
-      if (p.kind === 'hero') hero += 1;
-      else body += 1;
-    }
-    const parts: string[] = [];
-    if (hero > 0) parts.push(hero === 1 ? 'Hero' : `${hero} heroes`);
-    if (body > 0) parts.push(`${body} in the body`);
-    return parts.length > 0 ? parts.join(' and ') : 'Used in this entry';
+}
+const GENERIC_UPLOAD_MESSAGE = "The upload could not be completed. Please try again.";
+const REPLACE_UPLOAD_URL = "?/mediaUpload";
+const REPLACE_PREVIEW_URL = "?/mediaReplacePreview";
+const REPLACE_ROW_CAP = 8;
+let replaceShowAll = $state(false);
+let replaceEntriesList = $state(null);
+$effect(() => {
+  void replacePlan;
+  replaceShowAll = false;
+});
+function showAllReplaceEntries() {
+  replaceShowAll = true;
+  void tick().then(() => replaceEntriesList?.children[REPLACE_ROW_CAP]?.focus());
+}
+const replaceEntries = $derived(replacePlan?.entries ?? []);
+const replaceVisibleEntries = $derived(
+  replaceShowAll ? replaceEntries : replaceEntries.slice(0, REPLACE_ROW_CAP)
+);
+const replaceHiddenCount = $derived(Math.max(0, replaceEntries.length - REPLACE_ROW_CAP));
+const replaceAffected = $derived(replacePlan?.affectedCount ?? 0);
+function replaceWhereUsed(entry) {
+  let hero = 0;
+  let body = 0;
+  for (const p of entry.placements) {
+    if (p.kind === "hero") hero += 1;
+    else body += 1;
   }
-
-  // The specific unreadable branch named by a fail-closed failure, or null for the generic honest line.
-  // The current MediaReplaceFailure carries only an error string, so a cairn/* branch name is pulled
-  // from the message when the strict read named one; otherwise the generic variant stands in.
-  const replaceBlockedBranch = $derived.by(() => {
-    const match = replaceFailure?.error.match(/cairn\/[^\s.]+/);
-    return match ? match[0] : null;
+  const parts = [];
+  if (hero > 0) parts.push(hero === 1 ? "Hero" : `${hero} heroes`);
+  if (body > 0) parts.push(`${body} in the body`);
+  return parts.length > 0 ? parts.join(" and ") : "Used in this entry";
+}
+const replaceBlockedBranch = $derived.by(() => {
+  const match = replaceFailure?.error.match(/cairn\/[^\s.]+/);
+  return match ? match[0] : null;
+});
+const ALT_PREVIEW_URL = "?/mediaAltPreview";
+let altDialog = $state(null);
+let altOrigin = null;
+let altCancelButton = $state(null);
+let altStep = $state("review");
+let altPlan = $state(null);
+let altFailure = $state(null);
+let altOverwrite = $state(false);
+let altAsset = $state(null);
+function openAltDialog(origin) {
+  if (!selected) return;
+  altOrigin = origin ?? document.activeElement ?? null;
+  altAsset = selected;
+  altStep = "review";
+  altPlan = null;
+  altFailure = null;
+  altOverwrite = false;
+  void tick().then(() => {
+    altDialog?.showModal();
+    altCancelButton?.focus();
   });
-
-  // --- the Push-alt flow: a one-step review dialog (the everyday register) over the selected asset ---
-  // Alt propagation pushes the asset's default alt into published placements that lack it, with one
-  // bucket-level opt-in to also overwrite placements that carry a custom alt. It is reversible and
-  // frequent, so the dialog is role="dialog" (not alertdialog) with no typed-slug gate; apply is always
-  // enabled. The preview fetch reuses the 2a transport (a text/plain body, the CSRF token in the
-  // X-Cairn-CSRF header) and fails closed to a blocked surface when usage cannot be verified.
-  type AltStep = 'review' | 'blocked';
-  const ALT_PREVIEW_URL = '?/mediaAltPreview';
-
-  let altDialog = $state<HTMLDialogElement | null>(null);
-  // The entry-point button that opened the dialog, so focus restores to it on close.
-  let altOrigin: HTMLElement | null = null;
-  // The Cancel control, the initial focus on open.
-  let altCancelButton = $state<HTMLButtonElement | null>(null);
-  let altStep = $state<AltStep>('review');
-  // The resolved preview plan (the review step) or the fail-closed failure (the blocked step).
-  let altPlan = $state<MediaAltPreviewPlan | null>(null);
-  let altFailure = $state<MediaAltPropagateFailure | null>(null);
-  // The bucket-level opt-in to also overwrite customized alts. Bound to the one native checkbox.
-  let altOverwrite = $state(false);
-  // The asset the dialog acts on, pinned at open so a background re-render never swaps it. The alt it
-  // pushes is this asset's default alt.
-  let altAsset = $state<MediaLibraryEntry | null>(null);
-
-  function openAltDialog(origin?: HTMLElement | null) {
-    if (!selected) return;
-    altOrigin = origin ?? (document.activeElement as HTMLElement | null) ?? null;
-    altAsset = selected;
-    altStep = 'review';
+  void runAltPreview();
+}
+function closeAltDialog() {
+  altDialog?.close();
+  altAsset = null;
+  altPlan = null;
+  altFailure = null;
+  altOverwrite = false;
+  altOrigin?.focus();
+  altOrigin = null;
+}
+let altPreviewSeq = 0;
+async function runAltPreview() {
+  if (!altAsset) return;
+  const hash = altAsset.hash;
+  const seq = ++altPreviewSeq;
+  const blockClosed = (failure) => {
+    altFailure = failure ?? { error: "" };
     altPlan = null;
-    altFailure = null;
-    altOverwrite = false;
-    void tick().then(() => {
-      altDialog?.showModal();
-      altCancelButton?.focus();
+    altStep = "blocked";
+  };
+  let result;
+  try {
+    const res = await fetch(ALT_PREVIEW_URL, {
+      method: "POST",
+      headers: { "Content-Type": "text/plain", "X-Cairn-CSRF": csrf?.() ?? "" },
+      body: JSON.stringify({ hash })
     });
-    void runAltPreview();
-  }
-  function closeAltDialog() {
-    altDialog?.close();
-    altAsset = null;
-    altPlan = null;
-    altFailure = null;
-    altOverwrite = false;
-    altOrigin?.focus();
-    altOrigin = null;
-  }
-
-  // The per-call request token for the alt preview, mirroring the Replace guard: a stale response from
-  // a closed or reopened dialog (or a "Check usage again" double-click) is dropped after the await.
-  let altPreviewSeq = 0;
-
-  // The preview fetch: POST the hash in the 2a transport, parse the ActionResult envelope, and route to
-  // the review step (a plan) or the fail-closed blocked step (a failure). Re-runnable from the blocked
-  // step's "Check usage again".
-  async function runAltPreview() {
-    if (!altAsset) return;
-    const hash = altAsset.hash;
-    const seq = ++altPreviewSeq;
-    const blockClosed = (failure?: MediaAltPropagateFailure) => {
-      altFailure = failure ?? { error: '' };
-      altPlan = null;
-      altStep = 'blocked';
-    };
-    let result: { type: string; data?: unknown };
-    try {
-      const res = await fetch(ALT_PREVIEW_URL, {
-        method: 'POST',
-        headers: { 'Content-Type': 'text/plain', 'X-Cairn-CSRF': csrf?.() ?? '' },
-        body: JSON.stringify({ hash }),
-      });
-      result = deserialize(await res.text()) as { type: string; data?: unknown };
-    } catch {
-      if (seq !== altPreviewSeq) return;
-      blockClosed();
-      return;
-    }
-    // Stale-response guard: a reopen or a re-run superseded this fetch while it was in flight.
+    result = deserialize(await res.text());
+  } catch {
     if (seq !== altPreviewSeq) return;
-    if (result.type === 'success' && result.data) {
-      altPlan = result.data as MediaAltPreviewPlan;
-      altFailure = null;
-      altStep = 'review';
-    } else {
-      blockClosed(result.data as MediaAltPropagateFailure | undefined);
-    }
-  }
-
-  // The default alt the dialog propagates: the selected asset's stored alt. Empty is guarded by the
-  // entry point (an asset with no default alt cannot push one), but the dialog reads it defensively.
-  const altPushed = $derived(altAsset?.alt.trim() ?? '');
-
-  // The three buckets, flattened from the plan's entries: each row carries its entry title, the
-  // placement kind (the pill), and the placement's before/after. Grouping by bucket keeps each well
-  // self-contained, the way the mockup lays them out.
-  type AltRow = { title: string; kind: AltPlacement['kind']; before: string; after: string; key: string };
-  function altRows(bucket: AltPlacement['bucket']): AltRow[] {
-    const rows: AltRow[] = [];
-    for (const entry of altPlan?.entries ?? []) {
-      entry.placements.forEach((p, i) => {
-        if (p.bucket !== bucket) return;
-        rows.push({ title: entry.title, kind: p.kind, before: p.before, after: p.after, key: `${entry.concept}/${entry.id}/${i}` });
-      });
-    }
-    return rows;
+    blockClosed();
+    return;
   }
-  const altFillRows = $derived(altRows('will-fill'));
-  const altCustomRows = $derived(altRows('customized'));
-  const altSkipRows = $derived(altRows('decorative-skipped'));
-
-  // The committed total: the will-fill placements always, plus the customized placements only on the
-  // opt-in. The footer button and the live region read this; the count moves when the opt-in toggles.
-  const altCounts = $derived(altPlan?.counts ?? { willFill: 0, customized: 0, decorativeSkipped: 0 });
-  const altTotal = $derived(altCounts.willFill + (altOverwrite ? altCounts.customized : 0));
-
-  // The will-fill bucket caps past this many rows; "Show all N" reveals the rest (aria-expanded +
-  // aria-controls). The customized bucket lists in full (it is the consequential one).
-  const ALT_ROW_CAP = 8;
-  let altShowAll = $state(false);
-  // The will-fill list element, so "Show all" can move focus to its first newly revealed row.
-  let altFillList = $state<HTMLElement | null>(null);
-  $effect(() => {
-    void altPlan;
-    altShowAll = false;
-  });
-  const altFillVisible = $derived(altShowAll ? altFillRows : altFillRows.slice(0, ALT_ROW_CAP));
-  const altFillHidden = $derived(Math.max(0, altFillRows.length - ALT_ROW_CAP));
-  // Reveal the capped will-fill rows, then move focus to the first newly revealed row (the rev.2
-  // contract: the expander unmounts on the flag flip, so focus would otherwise fall to <body>).
-  function showAllAltFill() {
-    altShowAll = true;
-    void tick().then(() => (altFillList?.children[ALT_ROW_CAP] as HTMLElement | undefined)?.focus());
-  }
-
-  // --- the where-used overlay the slide-over and the dialog read, grouped published-then-branch ---
-  function usageEntries(hash: string): UsageEntry[] {
-    return data.usage[hash]?.entries ?? [];
-  }
-  /** Published rows first, then the edit-branch rows. */
-  function publishedRows(hash: string): UsageEntry[] {
-    return usageEntries(hash).filter((e) => e.origin.kind === 'published');
+  if (seq !== altPreviewSeq) return;
+  if (result.type === "success" && result.data) {
+    altPlan = result.data;
+    altFailure = null;
+    altStep = "review";
+  } else {
+    blockClosed(result.data);
   }
-  function branchRows(hash: string): UsageEntry[] {
-    return usageEntries(hash).filter((e) => e.origin.kind === 'branch');
+}
+const altPushed = $derived(altAsset?.alt.trim() ?? "");
+function altRows(bucket) {
+  const rows = [];
+  for (const entry of altPlan?.entries ?? []) {
+    entry.placements.forEach((p, i) => {
+      if (p.bucket !== bucket) return;
+      rows.push({ title: entry.title, kind: p.kind, before: p.before, after: p.after, key: `${entry.concept}/${entry.id}/${i}` });
+    });
   }
-  const branchNameOf = (e: UsageEntry): string => (e.origin.kind === 'branch' ? e.origin.branch : '');
-
-  // --- the safe-delete dialog's face and its type-to-confirm gate ---
-  // The breaking list the dialog shows: the FRESH list from a refusal when one is present for this
-  // asset, else the load-time overlay. The fresh server list supersedes a stale load-time count.
-  const refusalForSelected = $derived(
-    form && form.hash && selected && form.hash === selected.hash ? form : null,
-  );
-  // The slide-over's error alert covers two failures that leave no in-use dialog to re-open: a pure
-  // ?/mediaUpdate failure (only `error`, no `hash`) and a hash-bearing delete refusal that is NOT an
-  // in-use block (a 404 "not committed", with `hash` but no `usage`). An in-use refusal (usage rows)
-  // re-opens the dialog instead, so it is excluded here.
-  const hasUsage = $derived((form?.usage?.length ?? 0) > 0);
-  const updateError = $derived(form?.error && !hasUsage ? form.error : null);
-  const breakingRows = $derived.by((): UsageEntry[] => {
-    if (refusalForSelected?.usage) return refusalForSelected.usage;
-    return selected ? usageEntries(selected.hash) : [];
-  });
-  // The face is chosen by whether the asset is in use at open: in-use names what breaks and gates
-  // Delete on a typed slug; orphan is a calm confirm. A refusal's fresh list also forces in-use.
-  const deleteInUse = $derived(breakingRows.length > 0);
-  const deleteBreakingPublished = $derived(breakingRows.filter((e) => e.origin.kind === 'published'));
-  const deleteBreakingBranch = $derived(breakingRows.filter((e) => e.origin.kind === 'branch'));
-
-  // The type-to-confirm input. The Delete submit is gated until it equals the asset slug (the one
-  // legitimate disable: a visible, typed destructive confirmation, not a hidden requirement).
-  let confirmSlugInput = $state('');
-  const confirmMatches = $derived(selected !== null && confirmSlugInput === selected.slug);
-
-  // Forms post full-page (no use:enhance), so on a failure the screen remounts with no selection and
-  // the error would render nowhere. This effect re-surfaces the failure from the `form` prop. An
-  // in-use delete refusal (usage rows) re-opens the dialog on its fresh breaking list; any other
-  // hash-bearing failure (a 404 "not committed", an invalid-slug ?/mediaUpdate) re-selects the asset
-  // and opens the slide-over so its error alert renders. The action redirects on success, so a
-  // present `form` is always a failure to re-surface.
-  //
-  // The dialog is always mounted and its body reads breakingRows/deleteInUse reactively, so set the
-  // state then call showModal() directly. tick() (NOT flushSync, which Svelte's flush_sync_in_effect
-  // guard rejects inside an effect on a newer 5.x) flushes the new `selected` before showModal so the
-  // dialog body renders the fresh asset.
-  $effect(() => {
-    if (!form || !form.hash) return;
-    const target = data.assets.find((a) => a.hash === form!.hash);
-    if (!target) return;
-    if (form.usage && form.usage.length > 0) {
-      // The in-use face, re-opened on the server's fresh breaking list.
-      if (deleteDialog && !deleteDialog.open) {
-        deleteOnly = true;
-        selected = target;
-        confirmSlugInput = '';
-        void tick().then(() => deleteDialog?.showModal());
-      }
-    } else if (!selected) {
-      // A hash-bearing failure that is not an in-use block: re-select the asset and open the
-      // slide-over so updateError renders. Guarded on `!selected` so it runs once, not on every edit.
-      deleteOnly = false;
+  return rows;
+}
+const altFillRows = $derived(altRows("will-fill"));
+const altCustomRows = $derived(altRows("customized"));
+const altSkipRows = $derived(altRows("decorative-skipped"));
+const altCounts = $derived(altPlan?.counts ?? { willFill: 0, customized: 0, decorativeSkipped: 0 });
+const altTotal = $derived(altCounts.willFill + (altOverwrite ? altCounts.customized : 0));
+const ALT_ROW_CAP = 8;
+let altShowAll = $state(false);
+let altFillList = $state(null);
+$effect(() => {
+  void altPlan;
+  altShowAll = false;
+});
+const altFillVisible = $derived(altShowAll ? altFillRows : altFillRows.slice(0, ALT_ROW_CAP));
+const altFillHidden = $derived(Math.max(0, altFillRows.length - ALT_ROW_CAP));
+function showAllAltFill() {
+  altShowAll = true;
+  void tick().then(() => altFillList?.children[ALT_ROW_CAP]?.focus());
+}
+function usageEntries(hash) {
+  return data.usage[hash]?.entries ?? [];
+}
+function publishedRows(hash) {
+  return usageEntries(hash).filter((e) => e.origin.kind === "published");
+}
+function branchRows(hash) {
+  return usageEntries(hash).filter((e) => e.origin.kind === "branch");
+}
+const branchNameOf = (e) => e.origin.kind === "branch" ? e.origin.branch : "";
+const refusalForSelected = $derived(
+  form && form.hash && selected && form.hash === selected.hash ? form : null
+);
+const hasUsage = $derived((form?.usage?.length ?? 0) > 0);
+const updateError = $derived(form?.error && !hasUsage ? form.error : null);
+const breakingRows = $derived.by(() => {
+  if (refusalForSelected?.usage) return refusalForSelected.usage;
+  return selected ? usageEntries(selected.hash) : [];
+});
+const deleteInUse = $derived(breakingRows.length > 0);
+const deleteBreakingPublished = $derived(breakingRows.filter((e) => e.origin.kind === "published"));
+const deleteBreakingBranch = $derived(breakingRows.filter((e) => e.origin.kind === "branch"));
+let confirmSlugInput = $state("");
+const confirmMatches = $derived(selected !== null && confirmSlugInput === selected.slug);
+$effect(() => {
+  if (!form || !form.hash) return;
+  const target = data.assets.find((a) => a.hash === form.hash);
+  if (!target) return;
+  if (form.usage && form.usage.length > 0) {
+    if (deleteDialog && !deleteDialog.open) {
+      deleteOnly = true;
       selected = target;
+      confirmSlugInput = "";
+      void tick().then(() => deleteDialog?.showModal());
     }
-  });
-
-  // --- the copy-reference affordance, announced politely ---
-  let copyNotice = $state('');
-  function copyReference(token: string) {
-    void navigator.clipboard?.writeText(token).then(
-      () => {
-        copyNotice = 'Reference copied to the clipboard.';
-      },
-      () => {
-        copyNotice = 'Could not copy the reference.';
-      },
-    );
-  }
-
-  // --- the alt editor's describe/decorative model (the 2b capture-card model) ---
-  // Seeded from the selected asset each time the slide-over opens: a non-empty alt is "describe", an
-  // empty alt is "decorative" only when the author last chose it, else unset. The Library has no
-  // stored decorative flag, so an empty alt reads as unset (needs-alt), matching MediaCaptureCard.
-  let altMode = $state<'describe' | 'decorative' | null>(null);
-  let altText = $state('');
-  let nameInput = $state('');
-  let slugInput = $state('');
-  // Reseed the editable fields whenever the selected asset changes.
-  $effect(() => {
-    const a = selected;
-    if (!a) return;
-    altText = a.alt;
-    altMode = a.alt.trim() !== '' ? 'describe' : null;
-    nameInput = a.displayName;
-    slugInput = a.slug;
-  });
-  // The submitted alt: a described image carries its text, a decorative or left-blank submits empty
-  // (matching MediaCaptureCard's needs-alt-debt model).
-  const submittedAlt = $derived(altMode === 'describe' ? altText : '');
-
-  // --- the roving tabindex over the grid's visible tiles ---
-  // One tabstop for the listbox: the active index is the only option with tabindex 0; arrows,
-  // Home, and End move it; Enter/Space activate. The active index is clamped as filtering changes
-  // the visible set, so a focused option that filters out moves to a valid neighbor.
-  let activeIndex = $state(0);
-  $effect(() => {
-    const max = Math.max(0, visible.length - 1);
-    if (activeIndex > max) activeIndex = max;
-  });
-
-  let tileEls = $state<HTMLElement[]>([]);
-  function focusTile(i: number) {
-    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;
+  } else if (!selected) {
+    deleteOnly = false;
+    selected = target;
   }
-  // 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;
-      }
+});
+let copyNotice = $state("");
+function copyReference(token) {
+  void navigator.clipboard?.writeText(token).then(
+    () => {
+      copyNotice = "Reference copied to the clipboard.";
+    },
+    () => {
+      copyNotice = "Could not copy the reference.";
     }
-    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;
+}
+let altMode = $state(null);
+let altText = $state("");
+let nameInput = $state("");
+let slugInput = $state("");
+$effect(() => {
+  const a = selected;
+  if (!a) return;
+  altText = a.alt;
+  altMode = a.alt.trim() !== "" ? "describe" : null;
+  nameInput = a.displayName;
+  slugInput = a.slug;
+});
+const submittedAlt = $derived(altMode === "describe" ? altText : "");
+let activeIndex = $state(0);
+$effect(() => {
+  const max = Math.max(0, visible.length - 1);
+  if (activeIndex > max) activeIndex = max;
+});
+let tileEls = $state([]);
+function focusTile(i) {
+  activeIndex = i;
+  tileEls[i]?.focus();
+}
+let selectedHashes = $state(/* @__PURE__ */ new Set());
+const selectedCount = $derived(selectedHashes.size);
+let selectAnchor = $state(null);
+function toggleSelect(hash) {
+  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);
+}
+function selectRange(to) {
+  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);
   }
-  // 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`;
+  selectedHashes = next;
+}
+function selectAllVisible() {
+  const next = new Set(selectedHashes);
+  for (const a of visible) next.add(a.hash);
+  selectedHashes = next;
+  selectAnchor = 0;
+}
+function clearSelection() {
+  if (selectedHashes.size === 0) return;
+  selectedHashes = /* @__PURE__ */ new Set();
+  selectAnchor = null;
+}
+$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;
     }
-    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();
-    });
+  if (!changed) return;
+  const next = /* @__PURE__ */ new Set();
+  for (const h of selectedHashes) if (live.has(h)) next.add(h);
+  selectedHashes = next;
+});
+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++;
   }
-  function closeBulkDialog() {
-    bulkDialog?.close();
-    bulkPhase = 'review';
-    bulkResult = null;
-    bulkError = null;
-    bulkHashes = [];
-    bulkOrigin?.focus();
-    bulkOrigin = null;
+  return { noRefs, used };
+});
+let bulkDialog = $state(null);
+let bulkOrigin = null;
+let bulkCancelButton = $state(null);
+let bulkSummaryTitle = $state(null);
+let bulkPhase = $state("review");
+let bulkResult = $state(null);
+let bulkError = $state(null);
+let bulkHashes = $state([]);
+const bulkSelectedAssets = $derived(
+  bulkHashes.map((h) => data.assets.find((a) => a.hash === h)).filter((a) => a != null)
+);
+const bulkWillDelete = $derived(bulkSelectedAssets.filter((a) => usageCount(a.hash) === 0));
+const bulkWillSkip = $derived(bulkSelectedAssets.filter((a) => usageCount(a.hash) > 0));
+const bulkApplyLabel = $derived(
+  bulkWillSkip.length === 0 ? `Delete ${bulkWillDelete.length}` : `Delete ${bulkWillDelete.length}, skip ${bulkWillSkip.length}`
+);
+function bulkAssetName(hash) {
+  return data.assets.find((a) => a.hash === hash)?.displayName ?? hash;
+}
+function bulkSkipReason(skip) {
+  if (skip.reason === "still-referenced") {
+    const n = skip.usage.length;
+    return `now found in ${n} ${n === 1 ? "entry" : "entries"} on the recheck`;
   }
-  // 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;
+  return "was not committed";
+}
+const BULK_DELETE_URL = "?/mediaBulkDelete";
+function openBulkDialog(origin) {
+  if (selectedCount === 0) return;
+  bulkOrigin = origin ?? document.activeElement ?? null;
+  bulkHashes = [...selectedHashes];
+  bulkPhase = "review";
+  bulkResult = null;
+  bulkError = null;
+  void tick().then(() => {
+    bulkDialog?.showModal();
+    bulkCancelButton?.focus();
   });
-
-  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';
-    }
+}
+function closeBulkDialog() {
+  bulkDialog?.close();
+  bulkPhase = "review";
+  bulkResult = null;
+  bulkError = null;
+  bulkHashes = [];
+  bulkOrigin?.focus();
+  bulkOrigin = null;
+}
+function onBulkCancel(e) {
+  if (bulkPhase === "deleting") {
+    e.preventDefault();
+    return;
   }
-
-  /** 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;
+  closeBulkDialog();
+}
+async function finishBulkDelete() {
+  await invalidateAll();
+  clearSelection();
+  closeBulkDialog();
+}
+async function applyBulkDelete() {
+  bulkPhase = "deleting";
+  bulkError = null;
+  const formData = new FormData();
+  for (const h of bulkHashes) formData.append("hash", h);
+  let result;
+  try {
+    const res = await fetch(BULK_DELETE_URL, {
+      method: "POST",
+      headers: { "X-Cairn-CSRF": csrf?.() ?? "" },
+      body: formData
+    });
+    result = deserialize(await res.text());
+  } catch {
+    bulkError = "The delete could not be completed. Please try again.";
+    bulkPhase = "error";
+    return;
   }
-  /** 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));
+  if (result.type === "success" && result.data) {
+    bulkResult = result.data;
+    bulkPhase = "done";
+    void tick().then(() => bulkSummaryTitle?.focus());
+  } else {
+    const failure = result.data;
+    bulkError = failure?.error ?? "The delete could not be completed. Please try again.";
+    bulkPhase = "error";
   }
-  function clearOrphanSelection() {
-    orphanKeys = new Set<string>();
+}
+const ORPHAN_SCAN_URL = "?/mediaOrphanScan";
+const ORPHAN_PURGE_URL = "?/mediaPurge";
+let orphanDialog = $state(null);
+let orphanFindButton = $state(null);
+let orphanTitle = $state(null);
+let orphanPhase = $state("idle");
+let orphanScan = $state(null);
+let orphanBlockedError = $state("");
+let orphanKeys = $state(/* @__PURE__ */ new Set());
+let orphanSelectAll = $state(null);
+let orphanPurging = $state(false);
+let orphanConfirmInput = $state("");
+let orphanPurgeResult = $state(null);
+let orphanPurgeError = $state("");
+let orphanPurgeBusy = $state(false);
+const orphanBytes = $derived(orphanScan?.orphanedBytes ?? []);
+const orphanBroken = $derived(orphanScan?.brokenRefs ?? []);
+const orphanSelectedCount = $derived(orphanKeys.size);
+const orphanConfirmMatches = $derived(orphanSelectedCount > 0 && orphanConfirmInput === String(orphanSelectedCount));
+$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 = /* @__PURE__ */ new Set();
+  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 = /* @__PURE__ */ new Set();
+  orphanPurging = false;
+  orphanConfirmInput = "";
+  orphanPurgeResult = null;
+  orphanPurgeError = "";
+  orphanFindButton?.focus();
+}
+function onOrphanCancel(e) {
+  if (orphanPurgeBusy) {
+    e.preventDefault();
+    return;
   }
-
-  // Open the typed-count purge confirm over the current selection.
-  function openOrphanPurge() {
-    if (orphanSelectedCount === 0) return;
-    orphanConfirmInput = '';
-    orphanPurgeError = '';
-    orphanPurging = true;
+  closeOrphanScan();
+}
+async function finishOrphanPurge() {
+  await invalidateAll();
+  closeOrphanScan();
+}
+async function runOrphanScan() {
+  orphanPhase = "scanning";
+  orphanBlockedError = "";
+  let result;
+  try {
+    const res = await fetch(ORPHAN_SCAN_URL, {
+      method: "POST",
+      headers: { "X-Cairn-CSRF": csrf?.() ?? "" },
+      body: new FormData()
+    });
+    result = deserialize(await res.text());
+  } catch {
+    orphanPhase = "blocked";
+    return;
   }
-  function cancelOrphanPurge() {
-    orphanPurging = false;
-    orphanConfirmInput = '';
-    orphanPurgeError = '';
+  if (result.type === "success" && result.data) {
+    orphanScan = result.data;
+    orphanKeys = /* @__PURE__ */ new Set();
+    orphanPhase = "result";
+  } else {
+    const failure = result.data;
+    orphanBlockedError = failure?.error ?? "";
+    orphanPhase = "blocked";
   }
-
-  // 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;
-    }
+}
+function toggleOrphanKey(key) {
+  const next = new Set(orphanKeys);
+  if (next.has(key)) next.delete(key);
+  else next.add(key);
+  orphanKeys = next;
+}
+function toggleOrphanAll() {
+  orphanKeys = orphanKeys.size === orphanBytes.length ? /* @__PURE__ */ new Set() : new Set(orphanBytes.map((b) => b.key));
+}
+function clearOrphanSelection() {
+  orphanKeys = /* @__PURE__ */ new Set();
+}
+function openOrphanPurge() {
+  if (orphanSelectedCount === 0) return;
+  orphanConfirmInput = "";
+  orphanPurgeError = "";
+  orphanPurging = true;
+}
+function cancelOrphanPurge() {
+  orphanPurging = false;
+  orphanConfirmInput = "";
+  orphanPurgeError = "";
+}
+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;
+  try {
+    const res = await fetch(ORPHAN_PURGE_URL, {
+      method: "POST",
+      headers: { "X-Cairn-CSRF": csrf?.() ?? "" },
+      body: formData
+    });
+    result = deserialize(await res.text());
+  } catch {
     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();
-      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();
-      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 === ' ') {
-      // 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]);
-    }
-  }
-
-  // --- the broken-thumbnail affordance: a tile/row whose R2 object 404s still lists ---
-  // The set of hashes whose thumbnail failed to load, so the dead asset can be cleared.
-  let brokenHashes = $state(new Set<string>());
-  function markBroken(hash: string) {
-    if (brokenHashes.has(hash)) return;
-    const next = new Set(brokenHashes);
-    next.add(hash);
-    brokenHashes = next;
-  }
-
-  // --- display helpers ---
-  const dateFmt = new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' });
-  function formatAdded(iso: string): string {
-    const parsed = new Date(iso);
-    return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed);
-  }
-  function formatBytes(bytes: number): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-  /** The total stored bytes, for the count line. */
-  const totalBytes = $derived(data.assets.reduce((sum, a) => sum + a.bytes, 0));
-  /** Dimensions plus type for the list row metadata line. */
-  function dimensions(asset: MediaLibraryEntry): string {
-    return asset.width && asset.height ? `${asset.width}×${asset.height}` : '';
+    orphanPurgeError = "The purge could not be completed. Please try again.";
+    return;
   }
-  function typeLabel(asset: MediaLibraryEntry): string {
-    return asset.ext.toUpperCase();
-  }
-  function thumbSrc(asset: MediaLibraryEntry): string {
-    return publicPath(asset.slug, asset.hash, asset.ext, 'slug');
+  orphanPurgeBusy = false;
+  if (result.type === "success" && result.data) {
+    orphanPurgeResult = result.data;
+    orphanPurging = false;
+  } else {
+    const failure = result.data;
+    orphanPurgeError = failure?.error ?? "The purge could not be completed. Please try again.";
   }
-
-  // The selected-cue check glyph for the triage radiogroup (WCAG 1.4.1): hue never carries the
-  // chosen state alone, the same non-color cue the ConceptList triage uses.
-  function segButtonClass(on: boolean): string {
-    return `inline-flex items-center gap-1.5 px-3 py-1 text-[0.8125rem] font-normal ${on ? 'bg-primary/10 text-primary font-medium' : 'text-[var(--color-muted)]'}`;
+}
+function brokenWhereUsed(count) {
+  if (count === 0) return "no references found";
+  return `used in ${count} ${count === 1 ? "entry" : "entries"}`;
+}
+function onGridKeydown(e, i) {
+  if ((e.ctrlKey || e.metaKey) && (e.key === "a" || e.key === "A")) {
+    e.preventDefault();
+    selectAllVisible();
+    return;
   }
-  function densityButtonClass(on: boolean): string {
-    return `inline-flex items-center justify-center rounded-md p-1.5 ${on ? 'bg-primary/10 text-primary' : 'text-[var(--color-muted)] hover:bg-base-content/[0.06]'}`;
+  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+    e.preventDefault();
+    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();
+    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 === " ") {
+    e.preventDefault();
+    toggleSelect(visible[i].hash);
+  } else if (e.key === "Enter") {
+    e.preventDefault();
+    openAsset(visible[i], tileEls[i]);
   }
-
-  const headerLabel = 'text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]';
+}
+let brokenHashes = $state(/* @__PURE__ */ new Set());
+function markBroken(hash) {
+  if (brokenHashes.has(hash)) return;
+  const next = new Set(brokenHashes);
+  next.add(hash);
+  brokenHashes = next;
+}
+const dateFmt = new Intl.DateTimeFormat(void 0, { month: "short", day: "numeric" });
+function formatAdded(iso) {
+  const parsed = new Date(iso);
+  return Number.isNaN(parsed.getTime()) ? iso : dateFmt.format(parsed);
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+const totalBytes = $derived(data.assets.reduce((sum, a) => sum + a.bytes, 0));
+function dimensions(asset) {
+  return asset.width && asset.height ? `${asset.width}×${asset.height}` : "";
+}
+function typeLabel(asset) {
+  return asset.ext.toUpperCase();
+}
+function thumbSrc(asset) {
+  return publicPath(asset.slug, asset.hash, asset.ext, "slug");
+}
+function segButtonClass(on) {
+  return `inline-flex items-center gap-1.5 px-3 py-1 text-[0.8125rem] font-normal ${on ? "bg-primary/10 text-primary font-medium" : "text-[var(--color-muted)]"}`;
+}
+function densityButtonClass(on) {
+  return `inline-flex items-center justify-center rounded-md p-1.5 ${on ? "bg-primary/10 text-primary" : "text-[var(--color-muted)] hover:bg-base-content/[0.06]"}`;
+}
+const headerLabel = "text-[0.6875rem] font-semibold uppercase tracking-[0.08em] text-[var(--color-muted)]";
 </script>
 
 <svelte:window onkeydown={onWindowKeydown} />