@bygghammar/cms-platform 0.16.0 → 0.18.0

package/src/backoffice/MediaLibraryView.tsx

@@ -0,0 +1,1090 @@
+import { useRef, useState, type ComponentType, type ReactNode } from "react";
+import {
+  Upload,
+  Trash2,
+  Copy,
+  Search,
+  Loader2,
+  Zap,
+  Link2,
+  X,
+  Download,
+  Crosshair,
+  RotateCcw,
+  Tags,
+  Replace,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import { optimizeForUpload } from "../media/optimize";
+import { pickVideoPoster } from "../media/pick-video-poster";
+import { cleanFileName, splitExt, uniqueFileName } from "../media/filename";
+import { hasMediaMeta, lookupMediaMeta, type MediaMetaMap } from "../media/media-meta";
+import type { MediaUsage, MediaUsageReport, MediaImportResult } from "../media/usage-types";
+import type { MediaLibraryItem, MediaTrashItem } from "../media/library-types";
+import { ConfirmDialog } from "./media/ConfirmDialog";
+
+/** Everything the host site injects into the shared Media Library screen. */
+export type MediaLibraryDeps = {
+  /** Library items, newest first, already loaded by the host. */
+  items: MediaLibraryItem[];
+  isLoading: boolean;
+  trash: MediaTrashItem[];
+  trashLoading: boolean;
+  usage: MediaUsageReport | undefined;
+  /** Whether the signed-in user may permanently delete / run maintenance. */
+  isSuperadmin: boolean;
+  metaMap: MediaMetaMap | undefined;
+
+  /* Host server calls */
+  deleteMedia: (input: { data: { path: string } }) => Promise<unknown>;
+  restoreMedia: (input: { data: { id: string } }) => Promise<unknown>;
+  purgeMedia: (input: { data: { id: string } }) => Promise<unknown>;
+  emptyTrash: () => Promise<{ purged: number }>;
+  uploadMediaBundle: (input: {
+    data: { files: { name: string; contentType: string; bytes: number[] }[] };
+  }) => Promise<unknown>;
+  importUrlToMedia: (input: { data: { url: string } }) => Promise<MediaImportResult>;
+  /** Invalidate library / trash / usage queries after a mutation. */
+  refreshAll: () => Promise<void>;
+  invalidateLibrary: () => Promise<void>;
+
+  /* Host components */
+  FocalImageComponent: ComponentType<{
+    src: string;
+    alt: string;
+    className?: string;
+    responsive?: boolean;
+  }>;
+  MediaMetaDialogComponent: ComponentType<{
+    src: string;
+    title?: string;
+    onClose: () => void;
+  }>;
+  FocusPickerComponent: ComponentType<{
+    src: string;
+    title?: string;
+    modal?: boolean;
+    onClose: () => void;
+  }>;
+  MediaReplaceDialogComponent: ComponentType<{
+    source: MediaLibraryItem;
+    items: MediaLibraryItem[];
+    usageCount: number;
+    onClose: () => void;
+    onDone: () => Promise<void> | void;
+  }>;
+  /** Superadmin maintenance tools, rendered next to the Upload button. */
+  maintenanceTools?: (args: { onDone: () => Promise<void> }) => ReactNode;
+  /** Router link used by the usage lists. */
+  LinkComponent: ComponentType<{
+    to: string;
+    className?: string;
+    onClick?: () => void;
+    children: ReactNode;
+  }>;
+};
+
+function humanBytes(n: number) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/** Upload date of a library item, whichever record we have. */
+function itemDate(item: MediaLibraryItem): Date | null {
+  const raw = item.uploadedAt ?? item.updatedAt;
+  if (!raw) return null;
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+
+/** `YYYY-MM` bucket used by the month/year filter. */
+function monthKey(item: MediaLibraryItem): string | null {
+  const d = itemDate(item);
+  if (!d) return null;
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
+}
+
+/** `YEAR-MONTH-DATE` shown on the card. */
+function isoDate(item: MediaLibraryItem): string | null {
+  const d = itemDate(item);
+  if (!d) return null;
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
+    d.getDate(),
+  ).padStart(2, "0")}`;
+}
+
+const MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function monthLabel(key: string) {
+  const [y, m] = key.split("-");
+  return `${MONTH_NAMES[Number(m) - 1] ?? m} ${y}`;
+}
+
+const PAGE_SIZE = 50;
+
+/**
+ * Keep the uploaded filename (SEO-relevant) — slugified, extension stripped so
+ * the optimizer appends the final one. Collisions get `-2`, `-3`, … never a timestamp.
+ */
+function uploadBaseName(fileName: string, taken: Set<string>) {
+  const { base } = splitExt(cleanFileName(fileName));
+  return uniqueFileName(base, taken);
+}
+
+/**
+ * Host-agnostic Media Library: upload with client-side optimization, month
+ * filter, search, multi-select bulk actions, usage inspection, bin/restore and
+ * external-media import. All data access is injected by the host site.
+ * Backoffice copy is English by project rule.
+ */
+export function MediaLibraryView({ deps }: { deps: MediaLibraryDeps }) {
+  const {
+    items,
+    isLoading,
+    trash,
+    trashLoading,
+    usage,
+    isSuperadmin: isSuper,
+    metaMap,
+    deleteMedia: del,
+    restoreMedia: restore,
+    purgeMedia: purge,
+    emptyTrash: empty,
+    uploadMediaBundle: uploadBundle,
+    importUrlToMedia: runImport,
+    refreshAll,
+    invalidateLibrary,
+    FocalImageComponent: FocalImage,
+    MediaMetaDialogComponent: MediaMetaDialog,
+    FocusPickerComponent: FocusPicker,
+    MediaReplaceDialogComponent: MediaReplaceDialog,
+    maintenanceTools,
+    LinkComponent: Link,
+  } = deps;
+
+  const fileInput = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState<string | null>(null);
+  const [percent, setPercent] = useState(0);
+  const [filter, setFilter] = useState("");
+  const [month, setMonth] = useState("all");
+  const [visible, setVisible] = useState(PAGE_SIZE);
+
+  const [usageFor, setUsageFor] = useState<{ title: string; usages: MediaUsage[] } | null>(null);
+  const [importingUrl, setImportingUrl] = useState<string | null>(null);
+  const [focusFor, setFocusFor] = useState<string | null>(null);
+  const [metaFor, setMetaFor] = useState<string | null>(null);
+  const [view, setView] = useState<"library" | "bin">("library");
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [bulkBusy, setBulkBusy] = useState(false);
+  const [confirmBulk, setConfirmBulk] = useState<null | "delete">(null);
+  const [confirmOne, setConfirmOne] = useState<MediaLibraryItem | null>(null);
+  const [replaceFor, setReplaceFor] = useState<MediaLibraryItem | null>(null);
+
+  // Bumped after a bulk overwrite so the grid shows the new files instead of
+  // the CDN-cached old ones. Stored URLs in content stay clean.
+  const [bust, setBust] = useState(0);
+  const bustUrl = (url: string) => (bust ? `${url}${url.includes("?") ? "&" : "?"}v=${bust}` : url);
+
+  const onRestore = async (item: MediaTrashItem) => {
+    setBusyId(item.id);
+    try {
+      await restore({ data: { id: item.id } });
+      toast.success("Restored");
+      await refreshAll();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Restore failed");
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const onPurge = async (item: MediaTrashItem) => {
+    if (!confirm(`Permanently delete "${item.originalPath}"? This cannot be undone.`)) return;
+    setBusyId(item.id);
+    try {
+      await purge({ data: { id: item.id } });
+      toast.success("Permanently deleted");
+      await refreshAll();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const onEmptyBin = async () => {
+    if (
+      !confirm(`Permanently delete all ${trash.length} item(s) in the bin? This cannot be undone.`)
+    )
+      return;
+    setBusyId("all");
+    try {
+      const res = await empty();
+      toast.success(`Bin emptied (${res.purged} item(s))`);
+      await refreshAll();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Empty bin failed");
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  // Month/year buckets (WordPress-style), newest first, with per-month counts.
+  const monthCounts = new Map<string, number>();
+  for (const i of items) {
+    const key = monthKey(i);
+    if (key) monthCounts.set(key, (monthCounts.get(key) ?? 0) + 1);
+  }
+  const months = [...monthCounts.keys()].sort((a, b) => b.localeCompare(a));
+  const undatedCount = items.length - [...monthCounts.values()].reduce((a, b) => a + b, 0);
+
+  const filtered = items.filter((i) => {
+    if (!i.name.toLowerCase().includes(filter.toLowerCase())) return false;
+    if (month === "all") return true;
+    if (month === "unknown") return monthKey(i) === null;
+    return monthKey(i) === month;
+  });
+  const imageCount = filtered.filter((i) => (i.contentType ?? "").startsWith("image/")).length;
+  const videoCount = filtered.filter((i) => (i.contentType ?? "").startsWith("video/")).length;
+  const otherCount = filtered.length - imageCount - videoCount;
+  const shown = filtered.slice(0, visible);
+
+  const usageMap = usage?.byPath ?? {};
+  const externals = usage?.external ?? [];
+
+  const onUpload = async (files: FileList | null) => {
+    if (!files?.length) return;
+    setUploading(true);
+    try {
+      let totalSaved = 0;
+      const arr = Array.from(files);
+      // Names already in the library (plus the ones taken during this batch).
+      const taken = new Set<string>(
+        items.flatMap((i) => {
+          const { base } = splitExt(i.name);
+          return [i.name, base, base.replace(/-(?:480|768|1200|1920)$/, "")];
+        }),
+      );
+      const stepPct = (idx: number, frac: number) =>
+        setPercent(Math.round(((idx + frac) / arr.length) * 100));
+      for (let idx = 0; idx < arr.length; idx++) {
+        const file = arr[idx];
+        // Videos: let the editor choose which frame becomes the poster.
+        const posterTime = file.type.startsWith("video/") ? await pickVideoPoster(file) : null;
+        setProgress(`Optimizing ${idx + 1}/${arr.length}: ${file.name}`);
+        stepPct(idx, 0.05);
+        const baseSlug = uploadBaseName(file.name, taken);
+        taken.add(baseSlug);
+        const bundle = await optimizeForUpload(file, baseSlug, {
+          posterTime: posterTime ?? undefined,
+        });
+
+        setProgress(`Uploading ${idx + 1}/${arr.length}: ${file.name}`);
+        stepPct(idx, 0.4);
+        const all = [bundle.primary, ...bundle.extras];
+        const payload = await Promise.all(
+          all.map(async (part) => ({
+            name: part.name,
+            contentType: part.contentType,
+            bytes: Array.from(new Uint8Array(await part.blob.arrayBuffer())),
+          })),
+        );
+        await uploadBundle({ data: { files: payload } });
+        totalSaved += Math.max(0, file.size - bundle.primary.blob.size);
+        const extraTotal = bundle.extras.length || 1;
+        let extraDone = 0;
+        for (const _ of bundle.extras) {
+          extraDone += 1;
+          stepPct(idx, 0.4 + (0.6 * extraDone) / (extraTotal + 1));
+        }
+        stepPct(idx, 1);
+      }
+      const savedTxt = totalSaved > 1024 ? ` (saved ${humanBytes(totalSaved)})` : "";
+      toast.success(`Uploaded ${arr.length} file${arr.length > 1 ? "s" : ""}${savedTxt}`);
+      await invalidateLibrary();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Upload failed");
+    } finally {
+      setUploading(false);
+      setProgress(null);
+      setPercent(0);
+      if (fileInput.current) fileInput.current.value = "";
+    }
+  };
+
+  const doDelete = async (item: MediaLibraryItem) => {
+    try {
+      await del({ data: { path: item.path } });
+      toast.success("Moved to bin");
+      setSelected((s) => s.filter((p) => p !== item.path));
+      await refreshAll();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Delete failed");
+    }
+  };
+
+  /* ---------------- Multi-select ---------------- */
+
+  const selectedItems = items.filter((i) => selected.includes(i.path));
+  const selectedUses = selectedItems.reduce((n, i) => n + (usageMap[i.path]?.length ?? 0), 0);
+  const allShownSelected = shown.length > 0 && shown.every((i) => selected.includes(i.path));
+
+  const toggleOne = (path: string) =>
+    setSelected((s) => (s.includes(path) ? s.filter((p) => p !== path) : [...s, path]));
+
+  const toggleAllShown = () =>
+    setSelected((s) =>
+      allShownSelected
+        ? s.filter((p) => !shown.some((i) => i.path === p))
+        : [...new Set([...s, ...shown.map((i) => i.path)])],
+    );
+
+  const bulkDelete = async () => {
+    setBulkBusy(true);
+    let ok = 0;
+    const failed: string[] = [];
+    try {
+      for (const item of selectedItems) {
+        try {
+          await del({ data: { path: item.path } });
+          ok += 1;
+        } catch {
+          failed.push(item.name);
+        }
+      }
+      await refreshAll();
+      if (ok) toast.success(`Moved ${ok} file${ok > 1 ? "s" : ""} to the bin`);
+      if (failed.length) toast.error(`Failed: ${failed.join(", ")}`);
+      setSelected([]);
+    } finally {
+      setBulkBusy(false);
+      setConfirmBulk(null);
+    }
+  };
+
+  const bulkCopyUrls = async () => {
+    try {
+      await navigator.clipboard.writeText(selectedItems.map((i) => i.url).join("\n"));
+      toast.success(`Copied ${selectedItems.length} URL(s)`);
+    } catch {
+      toast.error("Copy failed");
+    }
+  };
+
+  const bulkDownload = () => {
+    for (const item of selectedItems) {
+      const a = document.createElement("a");
+      a.href = item.url;
+      a.download = item.name;
+      a.target = "_blank";
+      a.rel = "noopener";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    }
+  };
+
+  const onCopy = async (url: string) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      toast.success("URL copied");
+    } catch {
+      toast.error("Copy failed");
+    }
+  };
+
+  const onMaintenanceDone = async () => {
+    setBust(Date.now());
+    await refreshAll();
+  };
+
+  const importAndRefresh = async (url: string, announce: boolean) => {
+    const result = await runImport({ data: { url } });
+    if (result.skipped) toast.error(result.error);
+    else if (announce) toast.success("Imported");
+    return result;
+  };
+
+  return (
+    <div className="space-y-6">
+      <header className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-serif tracking-tight text-ink">Media Library</h1>
+          <p className="text-sm text-ink/60 mt-1">
+            Upload and manage images, videos and files. Signed URLs are used for delivery.
+          </p>
+        </div>
+        <div className="flex items-start gap-2">
+          <select
+            value={month}
+            onChange={(e) => {
+              setMonth(e.target.value);
+              setVisible(PAGE_SIZE);
+            }}
+            className="border border-ink/15 px-2 py-1.5 text-sm bg-white text-ink focus:outline-none focus:border-sea"
+            title="Filter by upload month"
+          >
+            <option value="all">All dates ({items.length})</option>
+            {months.map((m) => (
+              <option key={m} value={m}>
+                {monthLabel(m)} ({monthCounts.get(m)})
+              </option>
+            ))}
+            {undatedCount > 0 ? (
+              <option value="unknown">Unknown date ({undatedCount})</option>
+            ) : null}
+          </select>
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-4 text-ink/40" />
+            <input
+              type="text"
+              value={filter}
+              placeholder="Search…"
+              onChange={(e) => {
+                setFilter(e.target.value);
+                setVisible(PAGE_SIZE);
+              }}
+              className="border border-ink/15 pl-8 pr-3 py-1.5 text-sm bg-white focus:outline-none focus:border-sea"
+            />
+          </div>
+          <input
+            ref={fileInput}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={(e) => onUpload(e.target.files)}
+          />
+          <button
+            onClick={() => fileInput.current?.click()}
+            disabled={uploading}
+            className="inline-flex items-center gap-2 bg-ink text-paper px-4 py-2 text-sm hover:bg-sea disabled:opacity-50"
+          >
+            {uploading ? (
+              <Loader2 className="size-4 animate-spin" />
+            ) : (
+              <Upload className="size-4" />
+            )}
+            Upload
+          </button>
+          {isSuper ? maintenanceTools?.({ onDone: onMaintenanceDone }) : null}
+        </div>
+      </header>
+
+      <div className="flex items-center gap-1 border-b border-ink/10">
+        {(["library", "bin"] as const).map((v) => (
+          <button
+            key={v}
+            type="button"
+            onClick={() => setView(v)}
+            className={[
+              "-mb-px border-b-2 px-3 py-2 text-[0.7rem] uppercase tracking-[0.22em]",
+              view === v ? "border-sea text-ink" : "border-transparent text-ink/50 hover:text-ink",
+            ].join(" ")}
+          >
+            {v === "library" ? "Library" : `Bin${trash.length ? ` (${trash.length})` : ""}`}
+          </button>
+        ))}
+      </div>
+
+      {view === "bin" ? (
+        <section className="space-y-4">
+          <div className="flex flex-wrap items-center justify-between gap-3 border border-ink/10 bg-ice/40 px-3 py-2 text-[0.72rem] text-ink/70">
+            <span>
+              Deleted files are kept here. Restore puts them back at their original filename. Only a
+              superadmin can delete permanently.
+            </span>
+            {isSuper && trash.length > 0 ? (
+              <button
+                type="button"
+                onClick={onEmptyBin}
+                disabled={busyId !== null}
+                className="inline-flex items-center gap-1.5 border border-red-500 px-2.5 py-1 text-[0.65rem] uppercase tracking-widest text-red-600 hover:bg-red-500 hover:text-white disabled:opacity-50"
+              >
+                {busyId === "all" ? (
+                  <Loader2 className="size-3 animate-spin" />
+                ) : (
+                  <Trash2 className="size-3" />
+                )}
+                Empty bin
+              </button>
+            ) : null}
+          </div>
+
+          {trashLoading ? (
+            <div className="text-sm text-ink/60">Loading…</div>
+          ) : trash.length === 0 ? (
+            <div className="border border-dashed border-ink/20 p-16 text-center">
+              <p className="text-sm text-ink/60">The bin is empty.</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+              {trash.map((item) => {
+                const isImage = (item.contentType ?? "").startsWith("image/");
+                const isVideo = (item.contentType ?? "").startsWith("video/");
+                return (
+                  <div key={item.id} className="border border-ink/10 bg-white flex flex-col">
+                    <div className="aspect-square bg-ink/5 overflow-hidden flex items-center justify-center">
+                      {isImage ? (
+                        <img
+                          src={item.url}
+                          alt={item.originalPath}
+                          className="w-full h-full object-cover opacity-70"
+                        />
+                      ) : isVideo ? (
+                        <video
+                          src={item.url}
+                          className="w-full h-full object-cover opacity-70"
+                          muted
+                        />
+                      ) : (
+                        <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">
+                          {item.contentType?.split("/")[1] ?? "file"}
+                        </span>
+                      )}
+                    </div>
+                    <div className="p-2.5 flex-1 flex flex-col gap-1.5">
+                      <div className="text-xs text-ink truncate" title={item.originalPath}>
+                        {item.originalPath}
+                      </div>
+                      <div className="text-[0.65rem] uppercase tracking-widest text-ink/45">
+                        {humanBytes(item.size)} · {new Date(item.deletedAt).toLocaleDateString()}
+                      </div>
+                      <div
+                        className="text-[0.65rem] text-ink/45 truncate"
+                        title={item.deletedByEmail ?? ""}
+                      >
+                        {item.deletedByEmail ?? "Unknown user"}
+                      </div>
+                      <div className="mt-auto flex items-center gap-1.5 pt-2">
+                        <button
+                          onClick={() => onRestore(item)}
+                          disabled={busyId !== null}
+                          className="flex-1 inline-flex items-center justify-center gap-1 border border-ink/15 px-2 py-1 text-[0.7rem] hover:border-sea disabled:opacity-50"
+                          title="Restore to library"
+                        >
+                          {busyId === item.id ? (
+                            <Loader2 className="size-3 animate-spin" />
+                          ) : (
+                            <RotateCcw className="size-3" />
+                          )}
+                          Restore
+                        </button>
+                        {isSuper ? (
+                          <button
+                            onClick={() => onPurge(item)}
+                            disabled={busyId !== null}
+                            className="inline-flex items-center justify-center border border-ink/15 p-1 text-red-600 hover:border-red-400 disabled:opacity-50"
+                            title="Delete permanently"
+                          >
+                            <Trash2 className="size-3.5" />
+                          </button>
+                        ) : null}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </section>
+      ) : (
+        <>
+          <div className="flex items-center gap-2 border border-ink/10 bg-ice/40 px-3 py-2 text-[0.72rem] text-ink/70">
+            <Zap className="size-3.5 text-sea" />
+            <span>
+              Auto-optimization: images become WebP at max 1920px width (~60–80% smaller). Videos
+              upload as-is with a poster frame extracted automatically.
+            </span>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 border border-ink/10 bg-white px-3 py-2 text-[0.72rem] text-ink/70">
+            <span className="uppercase tracking-[0.18em] text-ink/45">
+              {month === "all"
+                ? "Whole library"
+                : month === "unknown"
+                  ? "Unknown date"
+                  : monthLabel(month)}
+            </span>
+            <span>
+              <strong className="text-ink">{imageCount}</strong> image{imageCount === 1 ? "" : "s"}
+            </span>
+            <span>
+              <strong className="text-ink">{videoCount}</strong> video{videoCount === 1 ? "" : "s"}
+            </span>
+            {otherCount > 0 ? (
+              <span>
+                <strong className="text-ink">{otherCount}</strong> other file
+                {otherCount === 1 ? "" : "s"}
+              </span>
+            ) : null}
+            <span className="ml-auto text-ink/50">
+              Showing {Math.min(shown.length, filtered.length)} of {filtered.length}
+            </span>
+          </div>
+
+          {uploading ? (
+            <div className="space-y-1.5 border border-ink/10 bg-white px-3 py-2">
+              <div className="flex items-center gap-1.5 text-[0.72rem] text-ink/70">
+                <Loader2 className="size-3 animate-spin" />
+                <span>{progress ?? "Preparing…"}</span>
+                <span className="ml-auto tabular-nums text-ink/50">{percent}%</span>
+              </div>
+              <div className="h-1.5 w-full overflow-hidden bg-ink/10">
+                <div
+                  className="h-full bg-sea transition-[width] duration-200"
+                  style={{ width: `${percent}%` }}
+                />
+              </div>
+            </div>
+          ) : null}
+
+          {!isLoading && filtered.length > 0 ? (
+            <div className="sticky top-0 z-30 flex flex-wrap items-center gap-2 border border-ink/10 bg-white px-3 py-2">
+              <label className="inline-flex cursor-pointer items-center gap-2 text-xs text-ink">
+                <input
+                  type="checkbox"
+                  checked={allShownSelected}
+                  onChange={toggleAllShown}
+                  className="size-4 accent-[color:var(--color-sea,#2ac4ea)]"
+                />
+                Select all shown ({shown.length})
+              </label>
+              {selected.length > 0 ? (
+                <>
+                  <span className="text-xs text-ink/60">
+                    {selected.length} selected
+                    {selectedUses > 0 ? ` · ${selectedUses} use(s) on the site` : ""}
+                  </span>
+                  <div className="ml-auto flex flex-wrap items-center gap-1.5">
+                    <button
+                      type="button"
+                      onClick={bulkCopyUrls}
+                      className="inline-flex items-center gap-1.5 border border-ink/20 px-2.5 py-1 text-[0.7rem] uppercase tracking-[0.18em] text-ink hover:border-sea"
+                    >
+                      <Copy className="size-3" /> Copy URLs
+                    </button>
+                    <button
+                      type="button"
+                      onClick={bulkDownload}
+                      className="inline-flex items-center gap-1.5 border border-ink/20 px-2.5 py-1 text-[0.7rem] uppercase tracking-[0.18em] text-ink hover:border-sea"
+                    >
+                      <Download className="size-3" /> Download
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setConfirmBulk("delete")}
+                      className="inline-flex items-center gap-1.5 border border-red-300 px-2.5 py-1 text-[0.7rem] uppercase tracking-[0.18em] text-red-600 hover:border-red-500"
+                    >
+                      <Trash2 className="size-3" /> Move to bin
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setSelected([])}
+                      className="inline-flex items-center gap-1 border border-ink/15 px-2 py-1 text-[0.7rem] uppercase tracking-[0.18em] text-ink/60 hover:border-ink"
+                    >
+                      <X className="size-3" /> Clear
+                    </button>
+                  </div>
+                </>
+              ) : (
+                <span className="ml-auto text-[0.7rem] text-ink/45">
+                  Tick files to delete, download or copy several at once.
+                </span>
+              )}
+            </div>
+          ) : null}
+
+          {isLoading ? (
+            <div className="text-sm text-ink/60">Loading…</div>
+          ) : filtered.length === 0 ? (
+            <div className="border border-dashed border-ink/20 p-16 text-center">
+              <p className="text-sm text-ink/60">
+                {items.length === 0 ? "No files yet. Upload your first asset." : "No matches."}
+              </p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+              {shown.map((item) => {
+                const isImage = (item.contentType ?? "").startsWith("image/");
+                const isVideo = (item.contentType ?? "").startsWith("video/");
+                const usages = usageMap[item.path] ?? [];
+                const inUse = usages.length > 0;
+                const isSelected = selected.includes(item.path);
+                return (
+                  <div
+                    key={item.path}
+                    className={[
+                      "group border bg-white flex flex-col relative",
+                      isSelected ? "border-sea ring-2 ring-sea/40" : "border-ink/10",
+                    ].join(" ")}
+                  >
+                    <label
+                      className="absolute top-1.5 right-1.5 z-10 inline-flex cursor-pointer items-center justify-center border border-ink/15 bg-white/90 p-1"
+                      title="Select this file"
+                    >
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={() => toggleOne(item.path)}
+                        className="size-3.5 accent-[color:var(--color-sea,#2ac4ea)]"
+                      />
+                    </label>
+
+                    <div className="aspect-square bg-ink/5 overflow-hidden flex items-center justify-center">
+                      {isImage ? (
+                        <FocalImage
+                          src={bustUrl(item.url)}
+                          responsive={false}
+                          alt={item.name}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : isVideo ? (
+                        <video
+                          src={bustUrl(item.url)}
+                          className="w-full h-full object-cover"
+                          muted
+                        />
+                      ) : (
+                        <span className="text-[0.7rem] uppercase tracking-widest text-ink/50">
+                          {item.contentType?.split("/")[1] ?? "file"}
+                        </span>
+                      )}
+                      <button
+                        type="button"
+                        onClick={() => inUse && setUsageFor({ title: item.name, usages })}
+                        disabled={!inUse}
+                        title={
+                          inUse
+                            ? `In use in ${usages.length} place${usages.length > 1 ? "s" : ""} — click for details`
+                            : "Not referenced anywhere"
+                        }
+                        className={[
+                          "absolute top-1.5 left-1.5 inline-flex items-center gap-1 px-1.5 py-0.5 text-[0.6rem] uppercase tracking-widest border",
+                          inUse
+                            ? "bg-sea text-white border-sea cursor-pointer hover:bg-ink hover:border-ink"
+                            : "bg-white/80 text-ink/40 border-ink/15 cursor-default",
+                        ].join(" ")}
+                      >
+                        <Link2 className="size-3" />
+                        {inUse ? `${usages.length} use${usages.length > 1 ? "s" : ""}` : "Unused"}
+                      </button>
+                    </div>
+                    <div className="p-2.5 flex-1 flex flex-col gap-1.5">
+                      <div className="text-xs text-ink truncate" title={item.name}>
+                        {item.name}
+                      </div>
+                      <div className="text-[0.65rem] uppercase tracking-widest text-ink/45">
+                        {humanBytes(item.size)} · {isoDate(item) ?? "Unknown date"}
+                      </div>
+                      <div
+                        className="text-[0.65rem] text-ink/45 truncate"
+                        title={item.uploadedBy ?? "Uploader unknown"}
+                      >
+                        {item.uploadedBy ?? "Uploader unknown"}
+                      </div>
+
+                      <div className="mt-auto flex items-center gap-1.5 pt-2">
+                        <button
+                          onClick={() => onCopy(item.url)}
+                          className="flex-1 inline-flex items-center justify-center gap-1 border border-ink/15 px-2 py-1 text-[0.7rem] hover:border-sea"
+                          title="Copy signed URL"
+                        >
+                          <Copy className="size-3" /> URL
+                        </button>
+                        {isImage ? (
+                          <button
+                            onClick={() => setMetaFor(item.url)}
+                            className={[
+                              "inline-flex items-center justify-center border p-1 hover:border-sea",
+                              hasMediaMeta(lookupMediaMeta(metaMap, item.url))
+                                ? "border-sea text-sea"
+                                : "border-ink/15 text-ink/70",
+                            ].join(" ")}
+                            title="Edit SEO metadata (alt, OG title/description)"
+                          >
+                            <Tags className="size-3.5" />
+                          </button>
+                        ) : null}
+                        {isImage ? (
+                          <button
+                            onClick={() => setFocusFor(item.url)}
+                            className="inline-flex items-center justify-center border border-ink/15 p-1 text-ink/70 hover:border-sea"
+                            title="Set focus point (crop)"
+                          >
+                            <Crosshair className="size-3.5" />
+                          </button>
+                        ) : null}
+                        <button
+                          onClick={() => setReplaceFor(item)}
+                          className="inline-flex items-center justify-center border border-ink/15 p-1 text-ink/70 hover:border-sea"
+                          title="Replace this file everywhere it is used on the site"
+                        >
+                          <Replace className="size-3.5" />
+                        </button>
+                        <button
+                          onClick={() => setConfirmOne(item)}
+                          className="inline-flex items-center justify-center border border-ink/15 p-1 text-red-600 hover:border-red-400"
+                          title="Delete"
+                        >
+                          <Trash2 className="size-3.5" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {filtered.length > shown.length ? (
+            <div className="flex justify-center">
+              <button
+                type="button"
+                onClick={() => setVisible((n) => n + PAGE_SIZE)}
+                className="border border-ink px-5 py-2 text-xs uppercase tracking-[0.22em] text-ink hover:bg-ink hover:text-white"
+              >
+                Load more ({filtered.length - shown.length} left)
+              </button>
+            </div>
+          ) : null}
+
+          {/* External references section — media used on the site but not in the library. */}
+          {externals.length > 0 && (
+            <section className="border border-ink/10 bg-white">
+              <header className="px-4 py-3 border-b border-ink/10 flex items-center justify-between">
+                <div>
+                  <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                    External media
+                  </div>
+                  <div className="text-sm text-ink/70 mt-0.5">
+                    {externals.length} URL{externals.length > 1 ? "s" : ""} referenced by pages but
+                    not in the library.
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  disabled={importingUrl !== null}
+                  onClick={async () => {
+                    for (const ext of externals) {
+                      setImportingUrl(ext.url);
+                      try {
+                        await importAndRefresh(ext.url, false);
+                      } catch (e) {
+                        toast.error(
+                          `Failed: ${ext.url}: ${e instanceof Error ? e.message : String(e)}`,
+                        );
+                      }
+                    }
+                    setImportingUrl(null);
+                    toast.success("Finished importing external media");
+                    await refreshAll();
+                  }}
+                  className="inline-flex items-center gap-2 border border-ink px-3 py-1.5 text-xs uppercase tracking-[0.22em] hover:bg-ink hover:text-white disabled:opacity-50"
+                >
+                  {importingUrl ? (
+                    <Loader2 className="size-3.5 animate-spin" />
+                  ) : (
+                    <Download className="size-3.5" />
+                  )}
+                  Import all to library
+                </button>
+              </header>
+              <ul className="divide-y divide-ink/10">
+                {externals.slice(0, 100).map((ext) => (
+                  <li key={ext.url} className="px-4 py-3 flex items-center gap-4">
+                    <div className="min-w-0 flex-1">
+                      <div className="text-xs text-ink truncate" title={ext.url}>
+                        {ext.url}
+                      </div>
+                      <div className="mt-1 flex flex-wrap gap-1">
+                        {ext.usages.slice(0, 6).map((u, i) => (
+                          <Link
+                            key={i}
+                            to={u.editPath}
+                            className="text-[0.6rem] uppercase tracking-widest border border-ink/15 px-1.5 py-0.5 text-ink/70 hover:border-sea hover:text-ink"
+                          >
+                            {u.label}
+                          </Link>
+                        ))}
+                        {ext.usages.length > 6 && (
+                          <span className="text-[0.6rem] text-ink/50">
+                            +{ext.usages.length - 6} more
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                    <button
+                      type="button"
+                      disabled={importingUrl === ext.url}
+                      onClick={async () => {
+                        setImportingUrl(ext.url);
+                        try {
+                          await importAndRefresh(ext.url, true);
+                          await refreshAll();
+                        } catch (e) {
+                          toast.error(e instanceof Error ? e.message : "Import failed");
+                        } finally {
+                          setImportingUrl(null);
+                        }
+                      }}
+                      className="inline-flex items-center gap-1 border border-ink/20 px-2 py-1 text-[0.7rem] hover:border-sea disabled:opacity-50"
+                    >
+                      {importingUrl === ext.url ? (
+                        <Loader2 className="size-3 animate-spin" />
+                      ) : (
+                        <Download className="size-3" />
+                      )}
+                      Import
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+        </>
+      )}
+
+      {metaFor && (
+        <MediaMetaDialog
+          src={metaFor}
+          title={decodeURIComponent(metaFor.split("/").pop() ?? "")}
+          onClose={() => setMetaFor(null)}
+        />
+      )}
+
+      {focusFor && (
+        <FocusPicker
+          src={focusFor}
+          modal
+          title={decodeURIComponent(focusFor.split("/").pop() ?? "")}
+          onClose={() => setFocusFor(null)}
+        />
+      )}
+
+      {confirmOne ? (
+        <ConfirmDialog
+          title="Move file to the bin?"
+          description={
+            (usageMap[confirmOne.path]?.length ?? 0) > 0
+              ? `"${confirmOne.name}" is still used in ${usageMap[confirmOne.path]!.length} place(s) — it will disappear from the site. You can restore it from the bin.`
+              : `"${confirmOne.name}" will be moved to the bin. You can restore it later.`
+          }
+          confirmLabel="Move to bin"
+          danger
+          onCancel={() => setConfirmOne(null)}
+          onConfirm={async () => {
+            const item = confirmOne;
+            setConfirmOne(null);
+            await doDelete(item);
+          }}
+        />
+      ) : null}
+
+      {replaceFor ? (
+        <MediaReplaceDialog
+          source={replaceFor}
+          items={items}
+          usageCount={usageMap[replaceFor.path]?.length ?? 0}
+          onClose={() => setReplaceFor(null)}
+          onDone={refreshAll}
+        />
+      ) : null}
+
+      {confirmBulk === "delete" ? (
+        <ConfirmDialog
+          title={`Move ${selected.length} file(s) to the bin?`}
+          description={
+            selectedUses > 0
+              ? `These files are used in ${selectedUses} place(s) on the site and will disappear there. You can restore them from the bin.`
+              : "The selected files will be moved to the bin. You can restore them later."
+          }
+          details={selectedItems.map((i) => i.name)}
+          confirmLabel="Move to bin"
+          danger
+          busy={bulkBusy}
+          onCancel={() => setConfirmBulk(null)}
+          onConfirm={bulkDelete}
+        />
+      ) : null}
+
+      {/* Usage details dialog */}
+      {usageFor && (
+        <div
+          className="fixed inset-0 z-50 bg-ink/60 grid place-items-center p-6"
+          onClick={() => setUsageFor(null)}
+        >
+          <div
+            onClick={(e) => e.stopPropagation()}
+            className="bg-white max-w-lg w-full max-h-[80vh] overflow-auto"
+          >
+            <header className="px-5 py-4 border-b border-ink/10 flex items-center justify-between">
+              <div>
+                <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                  Used in {usageFor.usages.length} place{usageFor.usages.length > 1 ? "s" : ""}
+                </div>
+                <div className="mt-0.5 text-sm text-ink truncate max-w-md" title={usageFor.title}>
+                  {usageFor.title}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setUsageFor(null)}
+                className="p-1 text-ink/60 hover:text-ink"
+              >
+                <X className="size-4" />
+              </button>
+            </header>
+            <ul className="divide-y divide-ink/10">
+              {usageFor.usages.map((u, i) => (
+                <li key={i} className="px-5 py-3 flex items-center gap-3">
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm text-ink">{u.label}</div>
+                    <div className="mt-0.5 text-[0.7rem] text-ink/55 font-mono truncate">
+                      {u.jsonPath}
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    {u.publicPath && (
+                      <a
+                        href={u.publicPath}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-[0.65rem] uppercase tracking-widest border border-ink/15 px-2 py-1 hover:border-sea"
+                      >
+                        View
+                      </a>
+                    )}
+                    <Link
+                      to={u.editPath}
+                      onClick={() => setUsageFor(null)}
+                      className="text-[0.65rem] uppercase tracking-widest border border-ink px-2 py-1 hover:bg-ink hover:text-white"
+                    >
+                      Edit
+                    </Link>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}