@bygghammar/cms-platform 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bygghammar/cms-platform",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Shared CMS platform: blocks, block types, i18n core, UI primitives and design-token contract used by every Bygghammar/Voyara site.",
   "type": "module",
   "sideEffects": false,
@@ -76,7 +76,10 @@
     "./backoffice/ProgressBar": "./src/backoffice/ProgressBar.tsx",
     "./backoffice/PreviewLightbox": "./src/backoffice/PreviewLightbox.tsx",
     "./backoffice/RichTextEditor": "./src/backoffice/RichTextEditor.tsx",
-    "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx"
+    "./backoffice/media/ConfirmDialog": "./src/backoffice/media/ConfirmDialog.tsx",
+    "./backoffice/media/MediaCleanup": "./src/backoffice/media/MediaCleanup.tsx",
+    "./backoffice/media/MediaReplaceDialog": "./src/backoffice/media/MediaReplaceDialog.tsx",
+    "./backoffice/media/ReuploadOverwrite": "./src/backoffice/media/ReuploadOverwrite.tsx"
   },
   "dependencies": {
     "fflate": "^0.8.3"

package/src/backoffice/media/MediaCleanup.tsx

@@ -0,0 +1,186 @@
+import { useState } from "react";
+import { Loader2, Wand2 } from "lucide-react";
+import { toast } from "sonner";
+
+/** Plan returned by the host site's duplicate scan. */
+export type MediaCleanupPlan = {
+  scanned: number;
+  duplicateBytes: number;
+  duplicates: { hash: string; keep: string; remove: string[] }[];
+  renames: { from: string; to: string }[];
+};
+
+/** Result of applying a cleanup plan. */
+export type MediaCleanupResult = {
+  merged: number;
+  renamed: number;
+  rewritten: number;
+  freedBytes: number;
+  errors?: string[];
+};
+
+function bytes(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`;
+}
+
+/**
+ * Superadmin-only library maintenance: merge byte-identical duplicates and
+ * rename legacy timestamp-prefixed files. References on the site are repointed
+ * first; the extra copies go to the bin, never straight to deletion.
+ */
+export function MediaCleanup({
+  onDone,
+  scanDuplicates,
+  runCleanup,
+}: {
+  onDone: () => Promise<void> | void;
+  /** Host-provided duplicate scan. */
+  scanDuplicates: () => Promise<MediaCleanupPlan>;
+  /** Host-provided cleanup runner. */
+  runCleanup: (input: {
+    data: { duplicates: boolean; renames: boolean };
+  }) => Promise<MediaCleanupResult>;
+}) {
+  const scan = scanDuplicates;
+  const apply = runCleanup;
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [plan, setPlan] = useState<MediaCleanupPlan | null>(null);
+
+  const doScan = async () => {
+    setBusy(true);
+    try {
+      const result = (await scan()) as MediaCleanupPlan;
+      setPlan(result);
+      setOpen(true);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Scan failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const doApply = async (opts: { duplicates: boolean; renames: boolean }) => {
+    setBusy(true);
+    try {
+      const res = await apply({ data: opts });
+      toast.success(
+        `Merged ${res.merged} duplicate${res.merged === 1 ? "" : "s"}, renamed ${res.renamed}, updated ${res.rewritten} reference${res.rewritten === 1 ? "" : "s"} (${bytes(res.freedBytes)} freed).`,
+      );
+      if (res.errors?.length) toast.error(res.errors.slice(0, 3).join(" · "));
+      setPlan(null);
+      setOpen(false);
+      await onDone();
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Cleanup failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={doScan}
+        disabled={busy}
+        title="Find duplicate files and legacy timestamp filenames"
+        className="inline-flex items-center gap-2 border border-ink/15 px-4 py-2 text-sm hover:border-sea disabled:opacity-50"
+      >
+        {busy && !open ? <Loader2 className="size-4 animate-spin" /> : <Wand2 className="size-4" />}
+        Clean up
+      </button>
+
+      {open && plan ? (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/50 p-4">
+          <div className="w-full max-w-2xl max-h-[85vh] overflow-auto bg-white border border-ink/10">
+            <header className="px-5 py-4 border-b border-ink/10">
+              <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                Library cleanup
+              </div>
+              <div className="text-sm text-ink/70 mt-1">
+                {plan.scanned} files scanned ·{" "}
+                {plan.duplicates.reduce((n, g) => n + g.remove.length, 0)} duplicate cop
+                {plan.duplicates.reduce((n, g) => n + g.remove.length, 0) === 1 ? "y" : "ies"} (
+                {bytes(plan.duplicateBytes)}) · {plan.renames.length} timestamp name
+                {plan.renames.length === 1 ? "" : "s"}
+              </div>
+            </header>
+
+            <div className="p-5 space-y-5 text-sm">
+              {plan.duplicates.length > 0 ? (
+                <section className="space-y-2">
+                  <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                    Duplicates to merge
+                  </div>
+                  {plan.duplicates.map((g) => (
+                    <div key={g.hash} className="border border-ink/10 p-3">
+                      <div className="text-ink">Keep: {g.keep}</div>
+                      <ul className="mt-1 text-ink/60 text-xs list-disc pl-5">
+                        {g.remove.map((p) => (
+                          <li key={p}>{p}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </section>
+              ) : null}
+
+              {plan.renames.length > 0 ? (
+                <section className="space-y-2">
+                  <div className="text-[0.7rem] uppercase tracking-[0.22em] text-ink/55">
+                    Renames
+                  </div>
+                  <ul className="text-xs text-ink/70 space-y-1">
+                    {plan.renames.map((r) => (
+                      <li key={r.from}>
+                        {r.from} <span className="text-ink/40">→</span> {r.to}
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              ) : null}
+
+              {plan.duplicates.length === 0 && plan.renames.length === 0 ? (
+                <div className="text-ink/60">Nothing to clean up — the library is tidy.</div>
+              ) : null}
+            </div>
+
+            <footer className="px-5 py-4 border-t border-ink/10 flex flex-wrap items-center justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="border border-ink/15 px-4 py-2 text-sm hover:border-sea"
+              >
+                Close
+              </button>
+              {plan.renames.length > 0 ? (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => doApply({ duplicates: false, renames: true })}
+                  className="border border-ink/15 px-4 py-2 text-sm hover:border-sea disabled:opacity-50"
+                >
+                  Rename only
+                </button>
+              ) : null}
+              {plan.duplicates.length > 0 || plan.renames.length > 0 ? (
+                <button
+                  type="button"
+                  disabled={busy}
+                  onClick={() => doApply({ duplicates: true, renames: true })}
+                  className="inline-flex items-center gap-2 bg-ink text-paper px-4 py-2 text-sm hover:bg-sea disabled:opacity-50"
+                >
+                  {busy ? <Loader2 className="size-4 animate-spin" /> : null}
+                  Merge duplicates & rename
+                </button>
+              ) : null}
+            </footer>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}

package/src/backoffice/media/MediaReplaceDialog.tsx

@@ -0,0 +1,158 @@
+import { useMemo, useState } from "react";
+import { Loader2, Search } from "lucide-react";
+import { toast } from "sonner";
+
+/** Minimal library item shape this dialog needs. */
+export type MediaItem = {
+  path: string;
+  name: string;
+  contentType?: string | null;
+  url?: string;
+};
+
+/**
+ * Pick a replacement file for one library asset and swap it everywhere it is
+ * referenced on the public site. Backoffice UI is English.
+ */
+export function MediaReplaceDialog({
+  source,
+  items,
+  usageCount,
+  onClose,
+  onDone,
+  replaceMedia,
+}: {
+  source: MediaItem;
+  items: MediaItem[];
+  usageCount: number;
+  onClose: () => void;
+  onDone: () => Promise<void> | void;
+  /** Host-provided sitewide replace. */
+  replaceMedia: (input: {
+    data: { fromPath: string; toPath: string };
+  }) => Promise<{ rewritten: number }>;
+}) {
+  const replaceFn = replaceMedia;
+  const [q, setQ] = useState("");
+  const [target, setTarget] = useState<MediaItem | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const candidates = useMemo(() => {
+    const needle = q.trim().toLowerCase();
+    return items
+      .filter((i) => i.path !== source.path)
+      .filter((i) => (needle ? i.name.toLowerCase().includes(needle) : true))
+      .slice(0, 60);
+  }, [items, q, source.path]);
+
+  const run = async () => {
+    if (!target) return;
+    setBusy(true);
+    try {
+      const res = await replaceFn({ data: { fromPath: source.path, toPath: target.path } });
+      toast.success(
+        res.rewritten > 0
+          ? `Replaced in ${res.rewritten} reference(s) across the site`
+          : "No references needed changing",
+      );
+      await onDone();
+      onClose();
+    } catch (e: any) {
+      toast.error(e?.message ?? "Replace failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] grid place-items-center bg-black/50 p-4"
+      onClick={() => !busy && onClose()}
+    >
+      <div
+        className="flex max-h-[85vh] w-full max-w-2xl flex-col border border-ink/15 bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <header className="border-b border-ink/10 px-4 py-3">
+          <h2 className="text-sm font-medium text-ink">Replace file everywhere</h2>
+          <p className="mt-1 text-xs text-ink/60">
+            Every place using <span className="text-ink">{source.name}</span> ({usageCount} use
+            {usageCount === 1 ? "" : "s"}) will point at the file you pick. The original file stays
+            in the library.
+          </p>
+        </header>
+
+        <div className="border-b border-ink/10 px-4 py-2">
+          <div className="flex items-center gap-2 border border-ink/15 px-2 py-1.5">
+            <Search className="size-3.5 text-ink/40" />
+            <input
+              value={q}
+              onChange={(e) => setQ(e.target.value)}
+              placeholder="Search replacement file…"
+              className="w-full bg-transparent text-xs outline-none"
+            />
+          </div>
+        </div>
+
+        <div className="grid flex-1 grid-cols-3 gap-3 overflow-auto p-4 sm:grid-cols-4">
+          {candidates.map((item) => {
+            const isImage = (item.contentType ?? "").startsWith("image/");
+            const active = target?.path === item.path;
+            return (
+              <button
+                key={item.path}
+                type="button"
+                onClick={() => setTarget(item)}
+                className={[
+                  "border text-left",
+                  active ? "border-sea ring-2 ring-sea/40" : "border-ink/10 hover:border-ink/30",
+                ].join(" ")}
+              >
+                <div className="flex aspect-square items-center justify-center overflow-hidden bg-ink/5">
+                  {isImage ? (
+                    <img src={item.url} alt={item.name} className="h-full w-full object-cover" />
+                  ) : (
+                    <span className="text-[0.6rem] uppercase tracking-widest text-ink/50">
+                      {item.contentType?.split("/")[1] ?? "file"}
+                    </span>
+                  )}
+                </div>
+                <div className="truncate p-1.5 text-[0.68rem] text-ink" title={item.name}>
+                  {item.name}
+                </div>
+              </button>
+            );
+          })}
+          {candidates.length === 0 ? (
+            <p className="col-span-full text-xs text-ink/50">No matching files.</p>
+          ) : null}
+        </div>
+
+        <footer className="flex items-center justify-between gap-2 border-t border-ink/10 px-4 py-3">
+          <span className="truncate text-[0.7rem] text-ink/60">
+            {target ? `Replacement: ${target.name}` : "Select a replacement file"}
+          </span>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              disabled={busy}
+              onClick={onClose}
+              className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-ink hover:border-ink disabled:opacity-50"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              disabled={!target || busy}
+              onClick={run}
+              className="inline-flex items-center gap-1.5 bg-ink px-3 py-1.5 text-xs uppercase tracking-[0.18em] text-white hover:bg-sea disabled:opacity-50"
+            >
+              {busy ? <Loader2 className="size-3.5 animate-spin" /> : null}
+              Replace everywhere
+            </button>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}

package/src/backoffice/media/ReuploadOverwrite.tsx

@@ -0,0 +1,226 @@
+import { useRef, useState } from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { toast } from "sonner";
+
+import { optimizeForUpload } from "../../media/optimize";
+import { cleanFileName, splitExt } from "../../media/filename";
+
+type RunSummary = {
+  overwritten: string[];
+  skipped: string[];
+  failed: string[];
+};
+
+/**
+ * Superadmin-only bulk re-upload. Re-selects the original source files and
+ * regenerates every responsive variant at the current quality settings,
+ * writing over the existing storage paths so filenames — and therefore every
+ * reference on the site — stay exactly the same.
+ */
+export function ReuploadOverwrite({
+  onDone,
+  prepareOverwrite,
+  uploadBundle: uploadBundleFn,
+  logOverwrite,
+}: {
+  onDone: () => Promise<void> | void;
+  /** Host-provided lookup of which base names already exist in the library. */
+  prepareOverwrite: (input: {
+    data: { bases: string[] };
+  }) => Promise<Record<string, { exists: boolean } | undefined>>;
+  /** Host-provided upload of one optimized bundle. */
+  uploadBundle: (input: {
+    data: {
+      files: { name: string; contentType: string; bytes: number[] }[];
+      upsert: boolean;
+    };
+  }) => Promise<unknown>;
+  /** Host-provided audit logger for one overwrite run. */
+  logOverwrite: (input: {
+    data: { paths: string[]; skipped: string[]; failed: string[] };
+  }) => Promise<unknown>;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  const prepare = prepareOverwrite;
+  const logRun = logOverwrite;
+  const uploadBundle = uploadBundleFn;
+  const [busy, setBusy] = useState(false);
+  const [progress, setProgress] = useState<string | null>(null);
+  const [percent, setPercent] = useState(0);
+  const [addUnmatched, setAddUnmatched] = useState(false);
+  const [summary, setSummary] = useState<RunSummary | null>(null);
+
+  const run = async (files: FileList | null) => {
+    const arr = files ? Array.from(files) : [];
+    if (!arr.length) return;
+    if (
+      !confirm(
+        `Re-upload ${arr.length} file(s) and overwrite the matching files in the library?\n\n` +
+          `Filenames stay the same, so every page keeps working — the images are simply replaced with the new, higher quality versions.`,
+      )
+    )
+      return;
+
+    setBusy(true);
+    setSummary(null);
+    const overwritten: string[] = [];
+    const skipped: string[] = [];
+    const failed: string[] = [];
+
+    try {
+      const bases = arr.map((f) => splitExt(cleanFileName(f.name)).base);
+      setProgress("Checking library…");
+      const existing = await prepare({ data: { bases: Array.from(new Set(bases)) } });
+
+      for (let idx = 0; idx < arr.length; idx++) {
+        const file = arr[idx];
+        const base = bases[idx];
+        const match = existing[base];
+        if (!match?.exists && !addUnmatched) {
+          skipped.push(file.name);
+          setPercent(Math.round(((idx + 1) / arr.length) * 100));
+          continue;
+        }
+
+        try {
+          setProgress(`Optimizing ${idx + 1}/${arr.length}: ${file.name}`);
+          setPercent(Math.round(((idx + 0.1) / arr.length) * 100));
+          const bundle = await optimizeForUpload(file, base);
+
+          setProgress(`Overwriting ${idx + 1}/${arr.length}: ${file.name}`);
+          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, upsert: true } });
+          for (let f = 0; f < all.length; f++) {
+            overwritten.push(all[f].name);
+            setPercent(Math.round(((idx + 0.1 + (0.9 * (f + 1)) / all.length) / arr.length) * 100));
+          }
+        } catch (e: any) {
+          console.warn("overwrite failed", file.name, e);
+          failed.push(`${file.name} — ${e?.message ?? "upload failed"}`);
+        }
+      }
+
+      setSummary({ overwritten, skipped, failed });
+      try {
+        await logRun({ data: { paths: overwritten, skipped, failed } });
+      } catch (e) {
+        console.warn("audit log failed", e);
+      }
+
+      if (failed.length) {
+        toast.error(`${failed.length} file(s) failed — see the summary below.`);
+      } else {
+        toast.success(
+          `Overwrote ${overwritten.length} file(s)${skipped.length ? `, skipped ${skipped.length}` : ""}.`,
+        );
+      }
+      await onDone();
+    } catch (e: any) {
+      toast.error(e?.message ?? "Re-upload failed");
+    } finally {
+      setBusy(false);
+      setProgress(null);
+      setPercent(0);
+      if (input.current) input.current.value = "";
+    }
+  };
+
+  return (
+    <section className="border border-ink/10 bg-ice/40 px-3 py-3 space-y-3">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex-1 min-w-[16rem] text-[0.72rem] leading-relaxed text-ink/70">
+          <strong className="font-medium text-ink">Re-upload &amp; overwrite</strong> — pick the
+          original source files again. Matching library files are regenerated at the current quality
+          (480/768/1200/1920/2560, q0.90) and written over the same filenames, so nothing needs
+          re-linking. Transparent PNGs/WebPs keep alpha and regenerate their PNG fallback.
+          Superadmin only.
+        </div>
+        <label className="inline-flex items-center gap-2 text-[0.7rem] text-ink/70">
+          <input
+            type="checkbox"
+            checked={addUnmatched}
+            onChange={(e) => setAddUnmatched(e.target.checked)}
+            className="size-3.5 accent-current"
+          />
+          Also add unmatched files as new
+        </label>
+        <input
+          ref={input}
+          type="file"
+          multiple
+          accept="image/*"
+          className="hidden"
+          onChange={(e) => run(e.target.files)}
+        />
+        <button
+          type="button"
+          onClick={() => input.current?.click()}
+          disabled={busy}
+          className="inline-flex items-center gap-2 border border-ink px-3 py-1.5 text-[0.7rem] uppercase tracking-widest text-ink hover:bg-ink hover:text-paper disabled:opacity-50"
+        >
+          {busy ? (
+            <Loader2 className="size-3.5 animate-spin" />
+          ) : (
+            <RefreshCw className="size-3.5" />
+          )}
+          Re-upload &amp; overwrite
+        </button>
+      </div>
+
+      {busy ? (
+        <div className="space-y-1.5">
+          <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}
+
+      {summary ? (
+        <div className="space-y-1 border-t border-ink/10 pt-2 text-[0.7rem] text-ink/70">
+          <div>
+            Overwritten: <strong className="text-ink">{summary.overwritten.length}</strong> file(s)
+          </div>
+          {summary.skipped.length ? (
+            <details>
+              <summary className="cursor-pointer">
+                Skipped (no match in library): {summary.skipped.length}
+              </summary>
+              <ul className="mt-1 list-disc pl-5">
+                {summary.skipped.map((s) => (
+                  <li key={s}>{s}</li>
+                ))}
+              </ul>
+            </details>
+          ) : null}
+          {summary.failed.length ? (
+            <details open>
+              <summary className="cursor-pointer text-red-600">
+                Failed: {summary.failed.length}
+              </summary>
+              <ul className="mt-1 list-disc pl-5 text-red-600">
+                {summary.failed.map((s) => (
+                  <li key={s}>{s}</li>
+                ))}
+              </ul>
+            </details>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}