@xiwebdesign/xicms-core 7.13.0 → 7.14.0

package/dist/admin/lib/mediaUsage.d.ts

@@ -8,3 +8,20 @@ export declare function findMediaUsage(siteId: string, item: {
     id: string;
     url?: string;
 }): Promise<string[]>;
+/**
+ * Bulk-variant voor het opruim-paneel (7.14): één content-read voor de HELE bibliotheek in
+ * plaats van (zoals `findMediaUsage`) alle content per afbeelding opnieuw te lezen — bij
+ * 60 foto's scheelt dat ~59 volledige site-reads. Kijkt in meer bronnen dan de losse check:
+ * ook symbolen en producten kunnen naar een foto verwijzen.
+ *
+ * "Ongebruikt" is bewust voorzichtig: een item dat nog verwerkt wordt (status "processing")
+ * of jonger is dan een uur telt níét mee — een net geüploade foto die de klant nog in een
+ * blok gaat zetten, hoort niet in een opruimlijst.
+ */
+export declare function findUnusedMedia(siteId: string, items: Array<{
+    id: string;
+    url?: string;
+    status?: string;
+    createdAt?: unknown;
+    size?: number;
+}>): Promise<string[]>;

package/dist/admin/lib/mediaUsage.js

@@ -30,7 +30,38 @@ async function findMediaUsage(siteId, item) {
     return hits;
   }
 }
+async function findUnusedMedia(siteId, items) {
+  const db = getDb();
+  if (!db) return [];
+  const blobs = [];
+  const [pages, drafts, news, symbols, products, settings] = await Promise.all([
+    getDocs(collection(db, "sites", siteId, "pages")),
+    getDocs(collection(db, "sites", siteId, "drafts")).catch(() => null),
+    getDocs(collection(db, "sites", siteId, "news")).catch(() => null),
+    getDocs(collection(db, "sites", siteId, "symbols")).catch(() => null),
+    getDocs(collection(db, "sites", siteId, "products")).catch(() => null),
+    getDoc(doc(db, "sites", siteId, "settings", "public")).catch(() => null)
+  ]);
+  for (const snap of [pages, drafts, news, symbols, products]) {
+    for (const d of snap?.docs ?? []) blobs.push(JSON.stringify(d.data()));
+  }
+  if (settings?.exists()) blobs.push(JSON.stringify(settings.data()));
+  const corpus = blobs.join("\n");
+  const uurGeleden = Date.now() - 60 * 60 * 1e3;
+  const millis = (v) => {
+    const t = v;
+    return typeof t?.toMillis === "function" ? t.toMillis() : 0;
+  };
+  return items.filter((it) => {
+    if (it.status === "processing") return false;
+    if (millis(it.createdAt) > uurGeleden) return false;
+    if (it.url && corpus.includes(it.url)) return false;
+    if (corpus.includes(it.id)) return false;
+    return true;
+  }).map((it) => it.id);
+}
 export {
-  findMediaUsage
+  findMediaUsage,
+  findUnusedMedia
 };
 //# sourceMappingURL=mediaUsage.js.map

package/dist/admin/lib/mediaUsage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/lib/mediaUsage.ts"],"sourcesContent":["\"use client\";\n\nimport { collection, doc, getDoc, getDocs } from \"firebase/firestore\";\nimport { getDb } from \"../../firebase/client\";\n\n/**\n * Zoekt (goedkoop) of een media-item ergens in gebruik is, zodat we kunnen waarschuwen vóór\n * verwijderen (anders breekt een live pagina met een dode afbeelding). Gescand worden:\n * gepubliceerde pagina's, concepten (drafts), nieuwsartikelen (covers/inline beelden) en de\n * site-instellingen (og-beeld e.d.). Sites zijn klein → een JSON-substring-scan is ruim voldoende.\n */\nexport async function findMediaUsage(\n  siteId: string,\n  item: { id: string; url?: string },\n): Promise<string[]> {\n  const db = getDb();\n  if (!db) return [];\n  const matches = (blob: string) => (item.url && blob.includes(item.url)) || blob.includes(item.id);\n  const hits: string[] = [];\n  try {\n    const [pages, drafts, news, settings] = await Promise.all([\n      getDocs(collection(db, \"sites\", siteId, \"pages\")),\n      getDocs(collection(db, \"sites\", siteId, \"drafts\")).catch(() => null),\n      getDocs(collection(db, \"sites\", siteId, \"news\")).catch(() => null),\n      getDoc(doc(db, \"sites\", siteId, \"settings\", \"public\")).catch(() => null),\n    ]);\n    for (const d of pages.docs) {\n      const data = d.data() as Record<string, unknown>;\n      if (matches(JSON.stringify(data.blocks ?? []))) hits.push(String(data.path ?? data.title ?? d.id));\n    }\n    for (const d of drafts?.docs ?? []) {\n      const data = d.data() as Record<string, unknown>;\n      if (matches(JSON.stringify(data.blocks ?? []))) hits.push(`${String(data.path ?? d.id)} (concept)`);\n    }\n    for (const d of news?.docs ?? []) {\n      if (matches(JSON.stringify(d.data()))) hits.push(`nieuws: ${String((d.data() as { title?: string }).title ?? d.id)}`);\n    }\n    if (settings?.exists() && matches(JSON.stringify(settings.data()))) hits.push(\"site-instellingen\");\n    return [...new Set(hits)];\n  } catch {\n    return hits;\n  }\n}\n"],"mappings":";AAEA,SAAS,YAAY,KAAK,QAAQ,eAAe;AACjD,SAAS,aAAa;AAQtB,eAAsB,eACpB,QACA,MACmB;AACnB,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,GAAI,QAAO,CAAC;AACjB,QAAM,UAAU,CAAC,SAAkB,KAAK,OAAO,KAAK,SAAS,KAAK,GAAG,KAAM,KAAK,SAAS,KAAK,EAAE;AAChG,QAAM,OAAiB,CAAC;AACxB,MAAI;AACF,UAAM,CAAC,OAAO,QAAQ,MAAM,QAAQ,IAAI,MAAM,QAAQ,IAAI;AAAA,MACxD,QAAQ,WAAW,IAAI,SAAS,QAAQ,OAAO,CAAC;AAAA,MAChD,QAAQ,WAAW,IAAI,SAAS,QAAQ,QAAQ,CAAC,EAAE,MAAM,MAAM,IAAI;AAAA,MACnE,QAAQ,WAAW,IAAI,SAAS,QAAQ,MAAM,CAAC,EAAE,MAAM,MAAM,IAAI;AAAA,MACjE,OAAO,IAAI,IAAI,SAAS,QAAQ,YAAY,QAAQ,CAAC,EAAE,MAAM,MAAM,IAAI;AAAA,IACzE,CAAC;AACD,eAAW,KAAK,MAAM,MAAM;AAC1B,YAAM,OAAO,EAAE,KAAK;AACpB,UAAI,QAAQ,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,EAAG,MAAK,KAAK,OAAO,KAAK,QAAQ,KAAK,SAAS,EAAE,EAAE,CAAC;AAAA,IACnG;AACA,eAAW,KAAK,QAAQ,QAAQ,CAAC,GAAG;AAClC,YAAM,OAAO,EAAE,KAAK;AACpB,UAAI,QAAQ,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC,CAAC,EAAG,MAAK,KAAK,GAAG,OAAO,KAAK,QAAQ,EAAE,EAAE,CAAC,YAAY;AAAA,IACpG;AACA,eAAW,KAAK,MAAM,QAAQ,CAAC,GAAG;AAChC,UAAI,QAAQ,KAAK,UAAU,EAAE,KAAK,CAAC,CAAC,EAAG,MAAK,KAAK,WAAW,OAAQ,EAAE,KAAK,EAAyB,SAAS,EAAE,EAAE,CAAC,EAAE;AAAA,IACtH;AACA,QAAI,UAAU,OAAO,KAAK,QAAQ,KAAK,UAAU,SAAS,KAAK,CAAC,CAAC,EAAG,MAAK,KAAK,mBAAmB;AACjG,WAAO,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC;AAAA,EAC1B,QAAQ;AACN,WAAO;AAAA,EACT;AACF;","names":[]}
+{"version":3,"sources":["../../../src/admin/lib/mediaUsage.ts"],"sourcesContent":["\"use client\";\n\nimport { collection, doc, getDoc, getDocs } from \"firebase/firestore\";\nimport { getDb } from \"../../firebase/client\";\n\n/**\n * Zoekt (goedkoop) of een media-item ergens in gebruik is, zodat we kunnen waarschuwen vóór\n * verwijderen (anders breekt een live pagina met een dode afbeelding). Gescand worden:\n * gepubliceerde pagina's, concepten (drafts), nieuwsartikelen (covers/inline beelden) en de\n * site-instellingen (og-beeld e.d.). Sites zijn klein → een JSON-substring-scan is ruim voldoende.\n */\nexport async function findMediaUsage(\n  siteId: string,\n  item: { id: string; url?: string },\n): Promise<string[]> {\n  const db = getDb();\n  if (!db) return [];\n  const matches = (blob: string) => (item.url && blob.includes(item.url)) || blob.includes(item.id);\n  const hits: string[] = [];\n  try {\n    const [pages, drafts, news, settings] = await Promise.all([\n      getDocs(collection(db, \"sites\", siteId, \"pages\")),\n      getDocs(collection(db, \"sites\", siteId, \"drafts\")).catch(() => null),\n      getDocs(collection(db, \"sites\", siteId, \"news\")).catch(() => null),\n      getDoc(doc(db, \"sites\", siteId, \"settings\", \"public\")).catch(() => null),\n    ]);\n    for (const d of pages.docs) {\n      const data = d.data() as Record<string, unknown>;\n      if (matches(JSON.stringify(data.blocks ?? []))) hits.push(String(data.path ?? data.title ?? d.id));\n    }\n    for (const d of drafts?.docs ?? []) {\n      const data = d.data() as Record<string, unknown>;\n      if (matches(JSON.stringify(data.blocks ?? []))) hits.push(`${String(data.path ?? d.id)} (concept)`);\n    }\n    for (const d of news?.docs ?? []) {\n      if (matches(JSON.stringify(d.data()))) hits.push(`nieuws: ${String((d.data() as { title?: string }).title ?? d.id)}`);\n    }\n    if (settings?.exists() && matches(JSON.stringify(settings.data()))) hits.push(\"site-instellingen\");\n    return [...new Set(hits)];\n  } catch {\n    return hits;\n  }\n}\n\n/**\n * Bulk-variant voor het opruim-paneel (7.14): één content-read voor de HELE bibliotheek in\n * plaats van (zoals `findMediaUsage`) alle content per afbeelding opnieuw te lezen — bij\n * 60 foto's scheelt dat ~59 volledige site-reads. Kijkt in meer bronnen dan de losse check:\n * ook symbolen en producten kunnen naar een foto verwijzen.\n *\n * \"Ongebruikt\" is bewust voorzichtig: een item dat nog verwerkt wordt (status \"processing\")\n * of jonger is dan een uur telt níét mee — een net geüploade foto die de klant nog in een\n * blok gaat zetten, hoort niet in een opruimlijst.\n */\nexport async function findUnusedMedia(\n  siteId: string,\n  items: Array<{ id: string; url?: string; status?: string; createdAt?: unknown; size?: number }>,\n): Promise<string[]> {\n  const db = getDb();\n  if (!db) return [];\n  const blobs: string[] = [];\n  const [pages, drafts, news, symbols, products, settings] = await Promise.all([\n    getDocs(collection(db, \"sites\", siteId, \"pages\")),\n    getDocs(collection(db, \"sites\", siteId, \"drafts\")).catch(() => null),\n    getDocs(collection(db, \"sites\", siteId, \"news\")).catch(() => null),\n    getDocs(collection(db, \"sites\", siteId, \"symbols\")).catch(() => null),\n    getDocs(collection(db, \"sites\", siteId, \"products\")).catch(() => null),\n    getDoc(doc(db, \"sites\", siteId, \"settings\", \"public\")).catch(() => null),\n  ]);\n  for (const snap of [pages, drafts, news, symbols, products]) {\n    for (const d of snap?.docs ?? []) blobs.push(JSON.stringify(d.data()));\n  }\n  if (settings?.exists()) blobs.push(JSON.stringify(settings.data()));\n  const corpus = blobs.join(\"\\n\");\n\n  const uurGeleden = Date.now() - 60 * 60 * 1000;\n  const millis = (v: unknown): number => {\n    const t = v as { toMillis?: () => number } | null;\n    return typeof t?.toMillis === \"function\" ? t.toMillis() : 0;\n  };\n  return items\n    .filter((it) => {\n      if (it.status === \"processing\") return false;\n      if (millis(it.createdAt) > uurGeleden) return false;\n      if (it.url && corpus.includes(it.url)) return false;\n      if (corpus.includes(it.id)) return false;\n      return true;\n    })\n    .map((it) => it.id);\n}\n"],"mappings":"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","names":[]}

package/dist/admin/media/MediaManager.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import {
   collection,
@@ -18,13 +18,15 @@ import { Button, Card, Badge, Input } from "../ui/primitives.js";
 import { useToast } from "../ui/toast.js";
 import { useConfirm } from "../ui/ConfirmDialog.js";
 import { uploadImage } from "../lib/upload.js";
-import { findMediaUsage } from "../lib/mediaUsage.js";
+import { findMediaUsage, findUnusedMedia } from "../lib/mediaUsage.js";
 const PAGE_SIZE = 48;
 function MediaManager({ siteId }) {
   const { toast } = useToast();
   const confirm = useConfirm();
   const [items, setItems] = useState([]);
   const [busy, setBusy] = useState(false);
+  const [ongebruikt, setOngebruikt] = useState(null);
+  const [scant, setScant] = useState(false);
   const [pageCount, setPageCount] = useState(1);
   const [hasMore, setHasMore] = useState(false);
   const inputRef = useRef(null);
@@ -89,28 +91,83 @@ function MediaManager({ siteId }) {
     });
     if (!ok) return;
     try {
-      await deleteDoc(doc(db, "sites", siteId, "media", item.id));
-      if (bucket) {
-        const paths = [
-          item.path,
-          item.variants?.webp?.path,
-          ...(item.variants?.sizes ?? []).map((v) => v.path)
-        ].filter((p) => Boolean(p));
-        await Promise.all(
-          paths.map((p) => deleteObject(storageRef(bucket, p)).catch(
-            () => void 0
-            /* al weg */
-          ))
-        );
-      }
+      await verwijderItem(item);
       toast({ title: "Verwijderd" });
     } catch (e) {
       toast({ title: "Verwijderen mislukt", description: e.message, tone: "error" });
     }
   }
+  async function verwijderItem(item) {
+    const db = getDb();
+    const bucket = getBucket();
+    if (!db) throw new Error("Geen databaseverbinding.");
+    await deleteDoc(doc(db, "sites", siteId, "media", item.id));
+    if (bucket) {
+      const paths = [
+        item.path,
+        item.variants?.webp?.path,
+        ...(item.variants?.sizes ?? []).map((v) => v.path)
+      ].filter((p) => Boolean(p));
+      await Promise.all(
+        paths.map((p) => deleteObject(storageRef(bucket, p)).catch(
+          () => void 0
+          /* al weg */
+        ))
+      );
+    }
+  }
+  async function scanOngebruikt() {
+    setScant(true);
+    try {
+      const ids = await findUnusedMedia(siteId, items);
+      setOngebruikt(ids);
+      if (ids.length === 0) toast({ title: "Niets op te ruimen", description: "Elke afbeelding in de bibliotheek wordt ergens gebruikt.", tone: "success" });
+    } catch (e) {
+      toast({ title: "Scan mislukt", description: e.message, tone: "error" });
+    } finally {
+      setScant(false);
+    }
+  }
+  async function ruimOngebruiktOp() {
+    const doelen = items.filter((it) => ongebruikt?.includes(it.id));
+    if (doelen.length === 0) return;
+    const mb = (doelen.reduce((som, it) => som + (it.size ?? 0), 0) / (1024 * 1024)).toFixed(1);
+    const ok = await confirm({
+      title: `${doelen.length} ongebruikte afbeelding(en) verwijderen?`,
+      description: `Samen \xB1${mb} MB, inclusief alle automatisch gemaakte varianten. Dit kan niet ongedaan worden gemaakt.`,
+      confirmLabel: "Opruimen",
+      tone: "danger"
+    });
+    if (!ok) return;
+    setBusy(true);
+    let gelukt = 0;
+    const fouten = [];
+    for (const it of doelen) {
+      try {
+        await verwijderItem(it);
+        gelukt++;
+      } catch (e) {
+        fouten.push(`${it.name}: ${e.message}`);
+      }
+    }
+    setOngebruikt(null);
+    setBusy(false);
+    if (gelukt) toast({ title: `${gelukt} afbeelding(en) opgeruimd`, description: `\xB1${mb} MB opslag vrijgemaakt.`, tone: "success" });
+    if (fouten.length) toast({ title: "Niet alles kon weg", description: fouten.join(" \xB7 "), tone: "error" });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => inputRef.current?.click(), children: busy ? "Uploaden\u2026" : "Foto's uploaden" }),
+      " ",
+      !isDemoActive() && items.length > 0 && (ongebruikt === null ? /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: scant || busy, onClick: () => void scanOngebruikt(), children: scant ? "Zoeken\u2026" : "\u{1F9F9} Zoek ongebruikte foto's" }) : ongebruikt.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "secondary", disabled: busy, onClick: () => void ruimOngebruiktOp(), children: [
+          "\u{1F9F9} ",
+          ongebruikt.length,
+          " ongebruikte verwijderen"
+        ] }),
+        " ",
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: () => setOngebruikt(null), children: "Annuleren" })
+      ] }) : null),
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500", children: "Je kunt meerdere foto's tegelijk kiezen. Ze worden automatisch verkleind en geoptimaliseerd (webp) \u2014 dat houdt je site snel en bespaart opslag. Max. 15 MB per bestand." }),
       /* @__PURE__ */ jsx(
         "input",
@@ -140,7 +197,7 @@ function MediaManager({ siteId }) {
               m.height
             ] })
           ] }),
-          m.status === "processing" ? /* @__PURE__ */ jsx(Badge, { tone: "amber", children: "verwerken" }) : /* @__PURE__ */ jsx(Badge, { tone: "green", children: "klaar" })
+          m.status === "processing" ? /* @__PURE__ */ jsx(Badge, { tone: "amber", children: "verwerken" }) : ongebruikt?.includes(m.id) ? /* @__PURE__ */ jsx(Badge, { tone: "amber", children: "ongebruikt" }) : /* @__PURE__ */ jsx(Badge, { tone: "green", children: "klaar" })
         ] }),
         /* @__PURE__ */ jsx(AltInput, { item: m, onSave: saveAlt }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [

package/dist/admin/media/MediaManager.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/media/MediaManager.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n  collection,\n  deleteDoc,\n  doc,\n  limit,\n  onSnapshot,\n  orderBy,\n  query,\n  updateDoc,\n} from \"firebase/firestore\";\nimport { deleteObject, ref as storageRef } from \"firebase/storage\";\nimport { getBucket, getDb } from \"../../firebase/client\";\nimport { DEMO_EVENT, isDemoActive, listDemoMediaAll } from \"../../demo/demoStore\";\nimport type { MediaItem } from \"../../content/types\";\nimport { Button, Card, Badge, Input } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\nimport { uploadImage } from \"../lib/upload\";\nimport { findMediaUsage } from \"../lib/mediaUsage\";\n\n/** Paginagrootte van de bibliotheek: begrensd laden i.p.v. álles (kosten + geheugen bij 100+ foto's). */\nconst PAGE_SIZE = 48;\n\nexport function MediaManager({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [items, setItems] = useState<MediaItem[]>([]);\n  const [busy, setBusy] = useState(false);\n  const [pageCount, setPageCount] = useState(1);\n  const [hasMore, setHasMore] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    // Demo-modus: lokale bibliotheek (geseede foto's + eigen \"uploads\") i.p.v. Firestore.\n    if (isDemoActive()) {\n      const sync = () => setItems(listDemoMediaAll(siteId));\n      sync();\n      window.addEventListener(DEMO_EVENT, sync);\n      return () => window.removeEventListener(DEMO_EVENT, sync);\n    }\n    const db = getDb();\n    if (!db) return;\n    // limit + \"meer laden\" (pageCount groeit): geen volledige collectie-read per open.\n    const max = pageCount * PAGE_SIZE;\n    const q = query(collection(db, \"sites\", siteId, \"media\"), orderBy(\"createdAt\", \"desc\"), limit(max + 1));\n    return onSnapshot(\n      q,\n      (snap) => {\n        setHasMore(snap.docs.length > max);\n        setItems(snap.docs.slice(0, max).map((d) => ({ id: d.id, ...(d.data() as Omit<MediaItem, \"id\">) })));\n      },\n      // Leesfouten (rules/App Check) niet stil slikken — anders lijkt de bibliotheek leeg.\n      (err) => toast({ title: \"Kon mediabibliotheek niet laden\", description: err.message, tone: \"error\" }),\n    );\n  }, [siteId, toast, pageCount]);\n\n  async function onFiles(files: FileList) {\n    setBusy(true);\n    let ok = 0;\n    const errors: string[] = [];\n    for (const file of Array.from(files)) {\n      try {\n        await uploadImage(siteId, file);\n        ok++;\n      } catch (e) {\n        errors.push(`${file.name}: ${(e as Error).message}`);\n      }\n    }\n    if (ok > 0) toast({ title: `${ok} foto('s) geüpload`, description: \"Automatisch verkleind; varianten worden op de achtergrond gemaakt.\", tone: \"success\" });\n    if (errors.length) toast({ title: \"Sommige uploads mislukten\", description: errors.join(\" · \"), tone: \"error\" });\n    setBusy(false);\n  }\n\n  async function saveAlt(item: MediaItem, alt: string) {\n    const db = getDb();\n    if (!db) return;\n    if ((item.alt ?? \"\") === alt) return; // niets gewijzigd → geen write/toast\n    try {\n      await updateDoc(doc(db, \"sites\", siteId, \"media\", item.id), { alt });\n      toast({ title: \"Alt-tekst opgeslagen\", tone: \"success\" });\n    } catch (e) {\n      // Niet stil slikken: de klant dacht anders dat de alt-tekst opgeslagen was.\n      toast({ title: \"Alt-tekst opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  async function remove(item: MediaItem) {\n    const db = getDb();\n    const bucket = getBucket();\n    if (!db) return;\n    const usedOn = await findMediaUsage(siteId, item);\n    const ok = await confirm({\n      title: \"Afbeelding verwijderen?\",\n      description:\n        usedOn.length > 0\n          ? `Let op: deze afbeelding wordt gebruikt op ${usedOn.length} gepubliceerde pagina('s) (${usedOn.join(\", \")}). Daar verschijnt dan een gebroken afbeelding.`\n          : \"De afbeelding wordt definitief verwijderd.\",\n      confirmLabel: \"Verwijderen\",\n      tone: \"danger\",\n    });\n    if (!ok) return;\n    try {\n      await deleteDoc(doc(db, \"sites\", siteId, \"media\", item.id));\n      if (bucket) {\n        // Ook de srcset-varianten opruimen die de Cloud Function heeft gemaakt — anders blijven\n        // die (publieke) bestanden voor altijd in Storage staan.\n        const paths = [\n          item.path,\n          item.variants?.webp?.path,\n          ...(item.variants?.sizes ?? []).map((v) => v.path),\n        ].filter((p): p is string => Boolean(p));\n        await Promise.all(\n          paths.map((p) => deleteObject(storageRef(bucket, p)).catch(() => undefined /* al weg */)),\n        );\n      }\n      toast({ title: \"Verwijderd\" });\n    } catch (e) {\n      // Rules/offline-fout niet stil slikken — anders lijkt verwijderen \"niets te doen\".\n      toast({ title: \"Verwijderen mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  return (\n    <div className=\"grid gap-4\">\n      <div>\n        <Button disabled={busy} onClick={() => inputRef.current?.click()}>\n          {busy ? \"Uploaden…\" : \"Foto's uploaden\"}\n        </Button>\n        <p className=\"mt-1 text-xs text-slate-500\">\n          Je kunt meerdere foto&apos;s tegelijk kiezen. Ze worden automatisch verkleind en geoptimaliseerd\n          (webp) — dat houdt je site snel en bespaart opslag. Max. 15 MB per bestand.\n        </p>\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          multiple\n          hidden\n          onChange={(e) => {\n            if (e.target.files?.length) void onFiles(e.target.files);\n            e.target.value = \"\";\n          }}\n        />\n      </div>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4\">\n        {items.map((m) => (\n          <Card key={m.id} className=\"p-3\">\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img src={m.url} alt={m.alt ?? m.name} className=\"mb-2 h-28 w-full rounded-md object-cover\" />\n            <div className=\"mb-2 flex items-center justify-between gap-1\">\n              <span className=\"truncate text-xs text-slate-500\">\n                {m.name}\n                {(m as { width?: number; height?: number }).width && (\n                  <span className=\"text-slate-400\"> · {(m as { width?: number }).width}×{(m as { height?: number }).height}</span>\n                )}\n              </span>\n              {m.status === \"processing\" ? <Badge tone=\"amber\">verwerken</Badge> : <Badge tone=\"green\">klaar</Badge>}\n            </div>\n            <AltInput item={m} onSave={saveAlt} />\n            <div className=\"flex gap-1\">\n              <Button variant=\"ghost\" size=\"sm\" className=\"text-xs\" onClick={() => void navigator.clipboard?.writeText(m.url)}>\n                Kopieer URL\n              </Button>\n              <Button variant=\"ghost\" size=\"sm\" className=\"text-xs\" onClick={() => void remove(m)}>\n                Verwijder\n              </Button>\n            </div>\n          </Card>\n        ))}\n        {items.length === 0 && <p className=\"text-sm text-slate-500\">Nog geen media.</p>}\n      </div>\n      {hasMore && (\n        <div>\n          <Button variant=\"secondary\" size=\"sm\" onClick={() => setPageCount((c) => c + 1)}>\n            Meer laden…\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Controlled alt-veld: volgt externe updates (realtime snapshot) en slaat alleen échte wijzigingen op. */\nfunction AltInput({ item, onSave }: { item: MediaItem; onSave: (item: MediaItem, alt: string) => Promise<void> }) {\n  const [value, setValue] = useState(item.alt ?? \"\");\n  // Extern gewijzigd (andere tab/verwerking) → veld bijtrekken, behalve terwijl de klant zelf typt.\n  const [focused, setFocused] = useState(false);\n  useEffect(() => {\n    if (!focused) setValue(item.alt ?? \"\");\n  }, [item.alt, focused]);\n  return (\n    <Input\n      value={value}\n      placeholder=\"Alt-tekst\"\n      className=\"mb-2 h-8 text-xs\"\n      onChange={(e) => setValue(e.target.value)}\n      onFocus={() => setFocused(true)}\n      onBlur={() => {\n        setFocused(false);\n        void onSave(item, value);\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/admin/media/MediaManager.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport {\n  collection,\n  deleteDoc,\n  doc,\n  limit,\n  onSnapshot,\n  orderBy,\n  query,\n  updateDoc,\n} from \"firebase/firestore\";\nimport { deleteObject, ref as storageRef } from \"firebase/storage\";\nimport { getBucket, getDb } from \"../../firebase/client\";\nimport { DEMO_EVENT, isDemoActive, listDemoMediaAll } from \"../../demo/demoStore\";\nimport type { MediaItem } from \"../../content/types\";\nimport { Button, Card, Badge, Input } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\nimport { uploadImage } from \"../lib/upload\";\nimport { findMediaUsage, findUnusedMedia } from \"../lib/mediaUsage\";\n\n/** Paginagrootte van de bibliotheek: begrensd laden i.p.v. álles (kosten + geheugen bij 100+ foto's). */\nconst PAGE_SIZE = 48;\n\nexport function MediaManager({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [items, setItems] = useState<MediaItem[]>([]);\n  const [busy, setBusy] = useState(false);\n  /** Ids van aantoonbaar ongebruikte afbeeldingen (na een expliciete scan); null = nog niet gescand. */\n  const [ongebruikt, setOngebruikt] = useState<string[] | null>(null);\n  const [scant, setScant] = useState(false);\n  const [pageCount, setPageCount] = useState(1);\n  const [hasMore, setHasMore] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    // Demo-modus: lokale bibliotheek (geseede foto's + eigen \"uploads\") i.p.v. Firestore.\n    if (isDemoActive()) {\n      const sync = () => setItems(listDemoMediaAll(siteId));\n      sync();\n      window.addEventListener(DEMO_EVENT, sync);\n      return () => window.removeEventListener(DEMO_EVENT, sync);\n    }\n    const db = getDb();\n    if (!db) return;\n    // limit + \"meer laden\" (pageCount groeit): geen volledige collectie-read per open.\n    const max = pageCount * PAGE_SIZE;\n    const q = query(collection(db, \"sites\", siteId, \"media\"), orderBy(\"createdAt\", \"desc\"), limit(max + 1));\n    return onSnapshot(\n      q,\n      (snap) => {\n        setHasMore(snap.docs.length > max);\n        setItems(snap.docs.slice(0, max).map((d) => ({ id: d.id, ...(d.data() as Omit<MediaItem, \"id\">) })));\n      },\n      // Leesfouten (rules/App Check) niet stil slikken — anders lijkt de bibliotheek leeg.\n      (err) => toast({ title: \"Kon mediabibliotheek niet laden\", description: err.message, tone: \"error\" }),\n    );\n  }, [siteId, toast, pageCount]);\n\n  async function onFiles(files: FileList) {\n    setBusy(true);\n    let ok = 0;\n    const errors: string[] = [];\n    for (const file of Array.from(files)) {\n      try {\n        await uploadImage(siteId, file);\n        ok++;\n      } catch (e) {\n        errors.push(`${file.name}: ${(e as Error).message}`);\n      }\n    }\n    if (ok > 0) toast({ title: `${ok} foto('s) geüpload`, description: \"Automatisch verkleind; varianten worden op de achtergrond gemaakt.\", tone: \"success\" });\n    if (errors.length) toast({ title: \"Sommige uploads mislukten\", description: errors.join(\" · \"), tone: \"error\" });\n    setBusy(false);\n  }\n\n  async function saveAlt(item: MediaItem, alt: string) {\n    const db = getDb();\n    if (!db) return;\n    if ((item.alt ?? \"\") === alt) return; // niets gewijzigd → geen write/toast\n    try {\n      await updateDoc(doc(db, \"sites\", siteId, \"media\", item.id), { alt });\n      toast({ title: \"Alt-tekst opgeslagen\", tone: \"success\" });\n    } catch (e) {\n      // Niet stil slikken: de klant dacht anders dat de alt-tekst opgeslagen was.\n      toast({ title: \"Alt-tekst opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  async function remove(item: MediaItem) {\n    const db = getDb();\n    const bucket = getBucket();\n    if (!db) return;\n    const usedOn = await findMediaUsage(siteId, item);\n    const ok = await confirm({\n      title: \"Afbeelding verwijderen?\",\n      description:\n        usedOn.length > 0\n          ? `Let op: deze afbeelding wordt gebruikt op ${usedOn.length} gepubliceerde pagina('s) (${usedOn.join(\", \")}). Daar verschijnt dan een gebroken afbeelding.`\n          : \"De afbeelding wordt definitief verwijderd.\",\n      confirmLabel: \"Verwijderen\",\n      tone: \"danger\",\n    });\n    if (!ok) return;\n    try {\n      await verwijderItem(item);\n      toast({ title: \"Verwijderd\" });\n    } catch (e) {\n      // Rules/offline-fout niet stil slikken — anders lijkt verwijderen \"niets te doen\".\n      toast({ title: \"Verwijderen mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  /** Doc + origineel + alle varianten weg — gedeeld door los verwijderen en de opruimer. */\n  async function verwijderItem(item: MediaItem) {\n    const db = getDb();\n    const bucket = getBucket();\n    if (!db) throw new Error(\"Geen databaseverbinding.\");\n    await deleteDoc(doc(db, \"sites\", siteId, \"media\", item.id));\n    if (bucket) {\n      // Ook de srcset-varianten opruimen die de Cloud Function heeft gemaakt — anders blijven\n      // die (publieke) bestanden voor altijd in Storage staan.\n      const paths = [\n        item.path,\n        item.variants?.webp?.path,\n        ...(item.variants?.sizes ?? []).map((v) => v.path),\n      ].filter((p): p is string => Boolean(p));\n      await Promise.all(\n        paths.map((p) => deleteObject(storageRef(bucket, p)).catch(() => undefined /* al weg */)),\n      );\n    }\n  }\n\n  /**\n   * Opruimer (7.14): Storage groeide anders onbeperkt — elke ooit geüploade foto (plus zijn\n   * webp/srcset-varianten) bleef staan, ook als hij allang uit elk blok was gehaald. De scan is\n   * expliciet (één knop, één gecombineerde content-read via findUnusedMedia) en het verwijderen\n   * vraagt altijd eerst bevestiging met aantal en omvang.\n   */\n  async function scanOngebruikt() {\n    setScant(true);\n    try {\n      const ids = await findUnusedMedia(siteId, items);\n      setOngebruikt(ids);\n      if (ids.length === 0) toast({ title: \"Niets op te ruimen\", description: \"Elke afbeelding in de bibliotheek wordt ergens gebruikt.\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Scan mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setScant(false);\n    }\n  }\n\n  async function ruimOngebruiktOp() {\n    const doelen = items.filter((it) => ongebruikt?.includes(it.id));\n    if (doelen.length === 0) return;\n    const mb = (doelen.reduce((som, it) => som + (it.size ?? 0), 0) / (1024 * 1024)).toFixed(1);\n    const ok = await confirm({\n      title: `${doelen.length} ongebruikte afbeelding(en) verwijderen?`,\n      description: `Samen ±${mb} MB, inclusief alle automatisch gemaakte varianten. Dit kan niet ongedaan worden gemaakt.`,\n      confirmLabel: \"Opruimen\",\n      tone: \"danger\",\n    });\n    if (!ok) return;\n    setBusy(true);\n    let gelukt = 0;\n    const fouten: string[] = [];\n    for (const it of doelen) {\n      try { await verwijderItem(it); gelukt++; } catch (e) { fouten.push(`${it.name}: ${(e as Error).message}`); }\n    }\n    setOngebruikt(null);\n    setBusy(false);\n    if (gelukt) toast({ title: `${gelukt} afbeelding(en) opgeruimd`, description: `±${mb} MB opslag vrijgemaakt.`, tone: \"success\" });\n    if (fouten.length) toast({ title: \"Niet alles kon weg\", description: fouten.join(\" · \"), tone: \"error\" });\n  }\n\n  return (\n    <div className=\"grid gap-4\">\n      <div>\n        <Button disabled={busy} onClick={() => inputRef.current?.click()}>\n          {busy ? \"Uploaden…\" : \"Foto's uploaden\"}\n        </Button>{\" \"}\n        {!isDemoActive() && items.length > 0 && (\n          ongebruikt === null ? (\n            <Button variant=\"ghost\" disabled={scant || busy} onClick={() => void scanOngebruikt()}>\n              {scant ? \"Zoeken…\" : \"🧹 Zoek ongebruikte foto's\"}\n            </Button>\n          ) : ongebruikt.length > 0 ? (\n            <>\n              <Button variant=\"secondary\" disabled={busy} onClick={() => void ruimOngebruiktOp()}>\n                🧹 {ongebruikt.length} ongebruikte verwijderen\n              </Button>{\" \"}\n              <Button variant=\"ghost\" onClick={() => setOngebruikt(null)}>Annuleren</Button>\n            </>\n          ) : null\n        )}\n        <p className=\"mt-1 text-xs text-slate-500\">\n          Je kunt meerdere foto&apos;s tegelijk kiezen. Ze worden automatisch verkleind en geoptimaliseerd\n          (webp) — dat houdt je site snel en bespaart opslag. Max. 15 MB per bestand.\n        </p>\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          multiple\n          hidden\n          onChange={(e) => {\n            if (e.target.files?.length) void onFiles(e.target.files);\n            e.target.value = \"\";\n          }}\n        />\n      </div>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4\">\n        {items.map((m) => (\n          <Card key={m.id} className=\"p-3\">\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img src={m.url} alt={m.alt ?? m.name} className=\"mb-2 h-28 w-full rounded-md object-cover\" />\n            <div className=\"mb-2 flex items-center justify-between gap-1\">\n              <span className=\"truncate text-xs text-slate-500\">\n                {m.name}\n                {(m as { width?: number; height?: number }).width && (\n                  <span className=\"text-slate-400\"> · {(m as { width?: number }).width}×{(m as { height?: number }).height}</span>\n                )}\n              </span>\n              {m.status === \"processing\" ? (\n                <Badge tone=\"amber\">verwerken</Badge>\n              ) : ongebruikt?.includes(m.id) ? (\n                <Badge tone=\"amber\">ongebruikt</Badge>\n              ) : (\n                <Badge tone=\"green\">klaar</Badge>\n              )}\n            </div>\n            <AltInput item={m} onSave={saveAlt} />\n            <div className=\"flex gap-1\">\n              <Button variant=\"ghost\" size=\"sm\" className=\"text-xs\" onClick={() => void navigator.clipboard?.writeText(m.url)}>\n                Kopieer URL\n              </Button>\n              <Button variant=\"ghost\" size=\"sm\" className=\"text-xs\" onClick={() => void remove(m)}>\n                Verwijder\n              </Button>\n            </div>\n          </Card>\n        ))}\n        {items.length === 0 && <p className=\"text-sm text-slate-500\">Nog geen media.</p>}\n      </div>\n      {hasMore && (\n        <div>\n          <Button variant=\"secondary\" size=\"sm\" onClick={() => setPageCount((c) => c + 1)}>\n            Meer laden…\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** Controlled alt-veld: volgt externe updates (realtime snapshot) en slaat alleen échte wijzigingen op. */\nfunction AltInput({ item, onSave }: { item: MediaItem; onSave: (item: MediaItem, alt: string) => Promise<void> }) {\n  const [value, setValue] = useState(item.alt ?? \"\");\n  // Extern gewijzigd (andere tab/verwerking) → veld bijtrekken, behalve terwijl de klant zelf typt.\n  const [focused, setFocused] = useState(false);\n  useEffect(() => {\n    if (!focused) setValue(item.alt ?? \"\");\n  }, [item.alt, focused]);\n  return (\n    <Input\n      value={value}\n      placeholder=\"Alt-tekst\"\n      className=\"mb-2 h-8 text-xs\"\n      onChange={(e) => setValue(e.target.value)}\n      onFocus={() => setFocused(true)}\n      onBlur={() => {\n        setFocused(false);\n        void onSave(item, value);\n      }}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/visual/VisualEditor.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { registerBuiltinSchemas } from "../../blocks/builtinSchemas.js";
+import { useModules } from "../../modules/context.js";
 registerBuiltinSchemas();
 import "@xiwebdesign/xicms-core/admin.css";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -132,6 +133,27 @@ function VisualEditorInner({ onClose }) {
     draftRef.current = draft;
   }, [draft]);
   const historyRef = useRef({ past: [], future: [], lastPush: 0 });
+  const undoOpslagSleutel = useCallback((id) => `xicms-undo:${siteId}:${id}`, [siteId]);
+  const bewaarHistory = useCallback(() => {
+    try {
+      const id = draftRef.current?.id;
+      if (!id) return;
+      sessionStorage.setItem(undoOpslagSleutel(id), JSON.stringify(historyRef.current.past.slice(-25)));
+    } catch {
+    }
+  }, [undoOpslagSleutel]);
+  const herstelHistory = useCallback((id) => {
+    try {
+      const raw = sessionStorage.getItem(undoOpslagSleutel(id));
+      if (!raw || historyRef.current.past.length > 0) return;
+      const past = JSON.parse(raw);
+      if (Array.isArray(past) && past.length) {
+        historyRef.current.past = past;
+        setHistVersion((v) => v + 1);
+      }
+    } catch {
+    }
+  }, [undoOpslagSleutel]);
   const [, setHistVersion] = useState(0);
   const pushHistory = useCallback((prev, coalesce) => {
     const h = historyRef.current;
@@ -226,6 +248,7 @@ function VisualEditorInner({ onClose }) {
       if (d) {
         setDraft(d);
         lastSavedRef.current = stableStringify(draftPayload(d));
+        herstelHistory(d.id);
         setStatus("idle");
       } else {
         setStatus("none");
@@ -295,6 +318,13 @@ function VisualEditorInner({ onClose }) {
   );
   nietLiveRef.current = wijzigingen.iets;
   const { publishDraft, zetFotoVervanger } = useEditor();
+  const actieveModules = useModules();
+  useEffect(() => {
+    for (const m of actieveModules.defs) {
+      if (actieveModules.activeIds.has(m.id)) void m.loadSchemas?.().catch(() => {
+      });
+    }
+  }, [actieveModules]);
   useEffect(() => {
     zetFotoVervanger((field, blockKey) => {
       if (blockKey) setImgPicker({ key: blockKey, field });
@@ -727,10 +757,14 @@ function VisualEditorInner({ onClose }) {
         e.preventDefault();
         e.returnValue = "";
       }
+      bewaarHistory();
     };
     const onVisibility = () => {
-      if (document.visibilityState === "hidden") void flushSave().catch(() => {
-      });
+      if (document.visibilityState === "hidden") {
+        void flushSave().catch(() => {
+        });
+        bewaarHistory();
+      }
     };
     const onKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -765,7 +799,7 @@ function VisualEditorInner({ onClose }) {
         );
       }
     };
-  }, [siteId, handleClose, flushSave, undo, redo]);
+  }, [siteId, handleClose, flushSave, undo, redo, bewaarHistory]);
   function setBlocks(next, opts) {
     mutateDraft((d) => ({ ...d, blocks: next }), opts);
   }