@xiwebdesign/xicms-core 4.17.1 → 5.0.0

package/dist/admin/customBlocks/CustomBlocksPanel.d.ts

@@ -0,0 +1,3 @@
+export declare function CustomBlocksPanel({ siteId }: {
+    siteId: string;
+}): import("react").JSX.Element;

package/dist/admin/customBlocks/CustomBlocksPanel.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { collection, onSnapshot } from "firebase/firestore";
+import { getFunctions, httpsCallable } from "firebase/functions";
+import { getDb, getFirebaseApp } from "../../firebase/client";
+import { functionsRegion } from "../../firebase/region";
+import { CustomBlockSchema } from "../../schema/customBlocks";
+import { FieldsSchema } from "../../schema/fields";
+import { Button, Field, Input, Textarea } from "../ui/primitives";
+import { useToast } from "../ui/toast";
+import { useConfirm } from "../ui/ConfirmDialog";
+const EMPTY = {
+  type: "custom-",
+  label: "",
+  icon: "\u{1F9E9}",
+  fields: [],
+  template: "",
+  css: "",
+  version: 1
+};
+const FIELDS_VOORBEELD = `[
+  { "key": "heading", "label": "Kop", "type": "text" },
+  { "key": "items", "label": "Items", "type": "repeater", "fields": [
+    { "key": "title", "label": "Titel", "type": "text" },
+    { "key": "bodyHtml", "label": "Tekst", "type": "richtext" }
+  ] }
+]`;
+function CustomBlocksPanel({ siteId }) {
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  const [blocks, setBlocks] = useState([]);
+  const [editing, setEditing] = useState(null);
+  const [fieldsText, setFieldsText] = useState("[]");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    const db = getDb();
+    if (!db) return;
+    return onSnapshot(collection(db, "sites", siteId, "customBlocks"), (snap) => {
+      const out = [];
+      snap.forEach((d) => {
+        const res = CustomBlockSchema.safeParse({ ...d.data(), type: d.id });
+        if (res.success) out.push(res.data);
+      });
+      setBlocks(out.sort((a, b) => a.label.localeCompare(b.label)));
+    });
+  }, [siteId]);
+  function open(def) {
+    setEditing(def);
+    setFieldsText(JSON.stringify(def.fields, null, 2));
+  }
+  async function save() {
+    if (!editing) return;
+    let fields;
+    try {
+      fields = JSON.parse(fieldsText);
+    } catch {
+      toast({ title: "Velden zijn geen geldige JSON", tone: "error" });
+      return;
+    }
+    const parsedFields = FieldsSchema.safeParse(fields);
+    if (!parsedFields.success) {
+      toast({ title: "Velden ongeldig", description: parsedFields.error.issues[0]?.message, tone: "error" });
+      return;
+    }
+    const candidate = CustomBlockSchema.safeParse({ ...editing, fields: parsedFields.data });
+    if (!candidate.success) {
+      toast({ title: "Bouwsteen ongeldig", description: candidate.error.issues[0]?.message, tone: "error" });
+      return;
+    }
+    const app = getFirebaseApp();
+    if (!app) return;
+    setBusy(true);
+    try {
+      const fn = httpsCallable(getFunctions(app, functionsRegion()), "saveCustomBlock");
+      const res = await fn({ siteId, ...candidate.data });
+      toast({ title: "Opgeslagen", description: res.data.message, tone: "success" });
+      setEditing(null);
+    } catch (e) {
+      toast({ title: "Opslaan mislukt", description: e.message, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function remove(type) {
+    const ok = await confirm({ title: "Bouwsteen verwijderen?", description: "Pagina's die dit blok gebruiken slaan het daarna over.", confirmLabel: "Verwijderen", tone: "danger" });
+    if (!ok) return;
+    const app = getFirebaseApp();
+    if (!app) return;
+    try {
+      await httpsCallable(getFunctions(app, functionsRegion()), "deleteCustomBlock")({ siteId, type });
+      toast({ title: "Verwijderd", tone: "success" });
+    } catch (e) {
+      toast({ title: "Verwijderen mislukt", description: e.message, tone: "error" });
+    }
+  }
+  if (editing) {
+    return /* @__PURE__ */ jsxs("div", { className: "grid max-w-3xl gap-3", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: editing.label || editing.type }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Bloktype", hint: 'begint met "custom-"; niet meer te wijzigen na aanmaken', children: /* @__PURE__ */ jsx(Input, { value: editing.type, onChange: (e) => setEditing({ ...editing, type: e.target.value }), disabled: blocks.some((b) => b.type === editing.type) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Naam in het menu", children: /* @__PURE__ */ jsx(Input, { value: editing.label, onChange: (e) => setEditing({ ...editing, label: e.target.value }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(Field, { label: "Icoon (emoji)", children: /* @__PURE__ */ jsx(Input, { value: editing.icon, maxLength: 16, onChange: (e) => setEditing({ ...editing, icon: e.target.value }), className: "w-24" }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Velden (Field-IR, JSON)", hint: `Veldtypes: text, textarea, richtext (sleutel eindigt op Html), number, switch, select, date, image, url, link, group, repeater. Voorbeeld:
+${FIELDS_VOORBEELD}`, children: /* @__PURE__ */ jsx(Textarea, { rows: 10, value: fieldsText, onChange: (e) => setFieldsText(e.target.value), spellCheck: false, className: "font-mono text-xs" }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Template", hint: "Mustache-subset: {{veld}}, {{{veldHtml}}}, {{#each items}}\u2026{{/each}}, {{#if veld}}\u2026{{else}}\u2026{{/if}}. Geen scripts \u2014 die worden bij opslaan gestript.", children: /* @__PURE__ */ jsx(Textarea, { rows: 10, value: editing.template, onChange: (e) => setEditing({ ...editing, template: e.target.value }), spellCheck: false, className: "font-mono text-xs" }) }),
+      /* @__PURE__ */ jsx(Field, { label: "CSS", hint: 'Automatisch gescoped op dit blok ([data-xicms-cb="\u2026"]).', children: /* @__PURE__ */ jsx(Textarea, { rows: 8, value: editing.css, onChange: (e) => setEditing({ ...editing, css: e.target.value }), spellCheck: false, className: "font-mono text-xs" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", disabled: busy, onClick: () => void save(), children: busy ? "Opslaan\u2026" : "Opslaan" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: () => setEditing(null), children: "Annuleren" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold", children: "Bouwstenen" }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => open(EMPTY), children: "+ Nieuwe bouwsteen" })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Eigen bloktypes voor deze site \u2014 zonder release. Definieer velden, een veilige template en CSS; het blok verschijnt direct in het toevoeg-menu van de pagina-editor." }),
+    blocks.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Nog geen bouwstenen." }),
+    /* @__PURE__ */ jsx("ul", { className: "grid gap-2", children: blocks.map((b) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between rounded-lg border border-slate-200 p-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "mr-2", children: b.icon }),
+        /* @__PURE__ */ jsx("strong", { children: b.label }),
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-slate-500", children: [
+          "(",
+          b.type,
+          " \xB7 v",
+          b.version,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => open(b), children: "Bewerken" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => void remove(b.type), children: "Verwijderen" })
+      ] })
+    ] }, b.type)) })
+  ] });
+}
+export {
+  CustomBlocksPanel
+};
+//# sourceMappingURL=CustomBlocksPanel.js.map

package/dist/admin/customBlocks/CustomBlocksPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/customBlocks/CustomBlocksPanel.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Beheer-paneel \"Bouwstenen\" (5.0): custom blocks — per site gedefinieerde bloktypes zonder\n * deploy (primo-concept, veilige template-variant). Voor de developer-/agent-rol: velden als\n * Field-IR (JSON, gevalideerd vóór opslaan), een veilige mustache-subset-template en scoped CSS.\n * Opslaan loopt via de saveCustomBlock-callable (sanitize + audit); het blok verschijnt direct\n * in het toevoeg-menu van de editor (live registry-sync in XiCMSProvider).\n */\nimport { useEffect, useState } from \"react\";\nimport { collection, onSnapshot } from \"firebase/firestore\";\nimport { getFunctions, httpsCallable } from \"firebase/functions\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { functionsRegion } from \"../../firebase/region\";\nimport { CustomBlockSchema, type CustomBlock } from \"../../schema/customBlocks\";\nimport { FieldsSchema } from \"../../schema/fields\";\nimport { Button, Field, Input, Textarea } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\n\nconst EMPTY: CustomBlock = {\n  type: \"custom-\",\n  label: \"\",\n  icon: \"🧩\",\n  fields: [],\n  template: \"\",\n  css: \"\",\n  version: 1,\n};\n\nconst FIELDS_VOORBEELD = `[\n  { \"key\": \"heading\", \"label\": \"Kop\", \"type\": \"text\" },\n  { \"key\": \"items\", \"label\": \"Items\", \"type\": \"repeater\", \"fields\": [\n    { \"key\": \"title\", \"label\": \"Titel\", \"type\": \"text\" },\n    { \"key\": \"bodyHtml\", \"label\": \"Tekst\", \"type\": \"richtext\" }\n  ] }\n]`;\n\nexport function CustomBlocksPanel({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [blocks, setBlocks] = useState<CustomBlock[]>([]);\n  const [editing, setEditing] = useState<CustomBlock | null>(null);\n  const [fieldsText, setFieldsText] = useState(\"[]\");\n  const [busy, setBusy] = useState(false);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    return onSnapshot(collection(db, \"sites\", siteId, \"customBlocks\"), (snap) => {\n      const out: CustomBlock[] = [];\n      snap.forEach((d) => {\n        const res = CustomBlockSchema.safeParse({ ...(d.data() as Record<string, unknown>), type: d.id });\n        if (res.success) out.push(res.data);\n      });\n      setBlocks(out.sort((a, b) => a.label.localeCompare(b.label)));\n    });\n  }, [siteId]);\n\n  function open(def: CustomBlock) {\n    setEditing(def);\n    setFieldsText(JSON.stringify(def.fields, null, 2));\n  }\n\n  async function save() {\n    if (!editing) return;\n    let fields: unknown;\n    try {\n      fields = JSON.parse(fieldsText);\n    } catch {\n      toast({ title: \"Velden zijn geen geldige JSON\", tone: \"error\" });\n      return;\n    }\n    const parsedFields = FieldsSchema.safeParse(fields);\n    if (!parsedFields.success) {\n      toast({ title: \"Velden ongeldig\", description: parsedFields.error.issues[0]?.message, tone: \"error\" });\n      return;\n    }\n    const candidate = CustomBlockSchema.safeParse({ ...editing, fields: parsedFields.data });\n    if (!candidate.success) {\n      toast({ title: \"Bouwsteen ongeldig\", description: candidate.error.issues[0]?.message, tone: \"error\" });\n      return;\n    }\n    const app = getFirebaseApp();\n    if (!app) return;\n    setBusy(true);\n    try {\n      const fn = httpsCallable(getFunctions(app, functionsRegion()), \"saveCustomBlock\");\n      const res = await fn({ siteId, ...candidate.data });\n      toast({ title: \"Opgeslagen\", description: (res.data as { message?: string }).message, tone: \"success\" });\n      setEditing(null);\n    } catch (e) {\n      toast({ title: \"Opslaan mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  async function remove(type: string) {\n    const ok = await confirm({ title: \"Bouwsteen verwijderen?\", description: \"Pagina's die dit blok gebruiken slaan het daarna over.\", confirmLabel: \"Verwijderen\", tone: \"danger\" });\n    if (!ok) return;\n    const app = getFirebaseApp();\n    if (!app) return;\n    try {\n      await httpsCallable(getFunctions(app, functionsRegion()), \"deleteCustomBlock\")({ siteId, type });\n      toast({ title: \"Verwijderd\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Verwijderen mislukt\", description: (e as Error).message, tone: \"error\" });\n    }\n  }\n\n  if (editing) {\n    return (\n      <div className=\"grid max-w-3xl gap-3\">\n        <h2 className=\"text-lg font-bold\">{editing.label || editing.type}</h2>\n        <div className=\"grid grid-cols-2 gap-2\">\n          <Field label=\"Bloktype\" hint='begint met \"custom-\"; niet meer te wijzigen na aanmaken'>\n            <Input value={editing.type} onChange={(e) => setEditing({ ...editing, type: e.target.value })} disabled={blocks.some((b) => b.type === editing.type)} />\n          </Field>\n          <Field label=\"Naam in het menu\">\n            <Input value={editing.label} onChange={(e) => setEditing({ ...editing, label: e.target.value })} />\n          </Field>\n        </div>\n        <Field label=\"Icoon (emoji)\">\n          <Input value={editing.icon} maxLength={16} onChange={(e) => setEditing({ ...editing, icon: e.target.value })} className=\"w-24\" />\n        </Field>\n        <Field label=\"Velden (Field-IR, JSON)\" hint={`Veldtypes: text, textarea, richtext (sleutel eindigt op Html), number, switch, select, date, image, url, link, group, repeater. Voorbeeld:\\n${FIELDS_VOORBEELD}`}>\n          <Textarea rows={10} value={fieldsText} onChange={(e) => setFieldsText(e.target.value)} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <Field label=\"Template\" hint=\"Mustache-subset: {{veld}}, {{{veldHtml}}}, {{#each items}}…{{/each}}, {{#if veld}}…{{else}}…{{/if}}. Geen scripts — die worden bij opslaan gestript.\">\n          <Textarea rows={10} value={editing.template} onChange={(e) => setEditing({ ...editing, template: e.target.value })} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <Field label=\"CSS\" hint='Automatisch gescoped op dit blok ([data-xicms-cb=\"…\"]).'>\n          <Textarea rows={8} value={editing.css} onChange={(e) => setEditing({ ...editing, css: e.target.value })} spellCheck={false} className=\"font-mono text-xs\" />\n        </Field>\n        <div className=\"flex gap-2\">\n          <Button type=\"button\" variant=\"primary\" disabled={busy} onClick={() => void save()}>{busy ? \"Opslaan…\" : \"Opslaan\"}</Button>\n          <Button type=\"button\" variant=\"ghost\" onClick={() => setEditing(null)}>Annuleren</Button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"grid gap-3\">\n      <div className=\"flex items-center justify-between\">\n        <h2 className=\"text-lg font-bold\">Bouwstenen</h2>\n        <Button type=\"button\" variant=\"secondary\" size=\"sm\" onClick={() => open(EMPTY)}>+ Nieuwe bouwsteen</Button>\n      </div>\n      <p className=\"text-sm text-slate-500\">\n        Eigen bloktypes voor deze site — zonder release. Definieer velden, een veilige template en CSS;\n        het blok verschijnt direct in het toevoeg-menu van de pagina-editor.\n      </p>\n      {blocks.length === 0 && <p className=\"text-sm text-slate-500\">Nog geen bouwstenen.</p>}\n      <ul className=\"grid gap-2\">\n        {blocks.map((b) => (\n          <li key={b.type} className=\"flex items-center justify-between rounded-lg border border-slate-200 p-3\">\n            <div>\n              <span className=\"mr-2\">{b.icon}</span>\n              <strong>{b.label}</strong> <span className=\"text-xs text-slate-500\">({b.type} · v{b.version})</span>\n            </div>\n            <div className=\"flex gap-2\">\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => open(b)}>Bewerken</Button>\n              <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={() => void remove(b.type)}>Verwijderen</Button>\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";AAkHQ,cACA,YADA;AAzGR,SAAS,WAAW,gBAAgB;AACpC,SAAS,YAAY,kBAAkB;AACvC,SAAS,cAAc,qBAAqB;AAC5C,SAAS,OAAO,sBAAsB;AACtC,SAAS,uBAAuB;AAChC,SAAS,yBAA2C;AACpD,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,OAAO,OAAO,gBAAgB;AAC/C,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAE3B,MAAM,QAAqB;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ,CAAC;AAAA,EACT,UAAU;AAAA,EACV,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlB,SAAS,kBAAkB,EAAE,OAAO,GAAuB;AAChE,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,CAAC,CAAC;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAA6B,IAAI;AAC/D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,IAAI;AACjD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,YAAU,MAAM;AACd,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,GAAI;AACT,WAAO,WAAW,WAAW,IAAI,SAAS,QAAQ,cAAc,GAAG,CAAC,SAAS;AAC3E,YAAM,MAAqB,CAAC;AAC5B,WAAK,QAAQ,CAAC,MAAM;AAClB,cAAM,MAAM,kBAAkB,UAAU,EAAE,GAAI,EAAE,KAAK,GAA+B,MAAM,EAAE,GAAG,CAAC;AAChG,YAAI,IAAI,QAAS,KAAI,KAAK,IAAI,IAAI;AAAA,MACpC,CAAC;AACD,gBAAU,IAAI,KAAK,CAAC,GAAG,MAAM,EAAE,MAAM,cAAc,EAAE,KAAK,CAAC,CAAC;AAAA,IAC9D,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,CAAC;AAEX,WAAS,KAAK,KAAkB;AAC9B,eAAW,GAAG;AACd,kBAAc,KAAK,UAAU,IAAI,QAAQ,MAAM,CAAC,CAAC;AAAA,EACnD;AAEA,iBAAe,OAAO;AACpB,QAAI,CAAC,QAAS;AACd,QAAI;AACJ,QAAI;AACF,eAAS,KAAK,MAAM,UAAU;AAAA,IAChC,QAAQ;AACN,YAAM,EAAE,OAAO,iCAAiC,MAAM,QAAQ,CAAC;AAC/D;AAAA,IACF;AACA,UAAM,eAAe,aAAa,UAAU,MAAM;AAClD,QAAI,CAAC,aAAa,SAAS;AACzB,YAAM,EAAE,OAAO,mBAAmB,aAAa,aAAa,MAAM,OAAO,CAAC,GAAG,SAAS,MAAM,QAAQ,CAAC;AACrG;AAAA,IACF;AACA,UAAM,YAAY,kBAAkB,UAAU,EAAE,GAAG,SAAS,QAAQ,aAAa,KAAK,CAAC;AACvF,QAAI,CAAC,UAAU,SAAS;AACtB,YAAM,EAAE,OAAO,sBAAsB,aAAa,UAAU,MAAM,OAAO,CAAC,GAAG,SAAS,MAAM,QAAQ,CAAC;AACrG;AAAA,IACF;AACA,UAAM,MAAM,eAAe;AAC3B,QAAI,CAAC,IAAK;AACV,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,KAAK,cAAc,aAAa,KAAK,gBAAgB,CAAC,GAAG,iBAAiB;AAChF,YAAM,MAAM,MAAM,GAAG,EAAE,QAAQ,GAAG,UAAU,KAAK,CAAC;AAClD,YAAM,EAAE,OAAO,cAAc,aAAc,IAAI,KAA8B,SAAS,MAAM,UAAU,CAAC;AACvG,iBAAW,IAAI;AAAA,IACjB,SAAS,GAAG;AACV,YAAM,EAAE,OAAO,mBAAmB,aAAc,EAAY,SAAS,MAAM,QAAQ,CAAC;AAAA,IACtF,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,iBAAe,OAAO,MAAc;AAClC,UAAM,KAAK,MAAM,QAAQ,EAAE,OAAO,0BAA0B,aAAa,0DAA0D,cAAc,eAAe,MAAM,SAAS,CAAC;AAChL,QAAI,CAAC,GAAI;AACT,UAAM,MAAM,eAAe;AAC3B,QAAI,CAAC,IAAK;AACV,QAAI;AACF,YAAM,cAAc,aAAa,KAAK,gBAAgB,CAAC,GAAG,mBAAmB,EAAE,EAAE,QAAQ,KAAK,CAAC;AAC/F,YAAM,EAAE,OAAO,cAAc,MAAM,UAAU,CAAC;AAAA,IAChD,SAAS,GAAG;AACV,YAAM,EAAE,OAAO,uBAAuB,aAAc,EAAY,SAAS,MAAM,QAAQ,CAAC;AAAA,IAC1F;AAAA,EACF;AAEA,MAAI,SAAS;AACX,WACE,qBAAC,SAAI,WAAU,wBACb;AAAA,0BAAC,QAAG,WAAU,qBAAqB,kBAAQ,SAAS,QAAQ,MAAK;AAAA,MACjE,qBAAC,SAAI,WAAU,0BACb;AAAA,4BAAC,SAAM,OAAM,YAAW,MAAK,2DAC3B,8BAAC,SAAM,OAAO,QAAQ,MAAM,UAAU,CAAC,MAAM,WAAW,EAAE,GAAG,SAAS,MAAM,EAAE,OAAO,MAAM,CAAC,GAAG,UAAU,OAAO,KAAK,CAAC,MAAM,EAAE,SAAS,QAAQ,IAAI,GAAG,GACxJ;AAAA,QACA,oBAAC,SAAM,OAAM,oBACX,8BAAC,SAAM,OAAO,QAAQ,OAAO,UAAU,CAAC,MAAM,WAAW,EAAE,GAAG,SAAS,OAAO,EAAE,OAAO,MAAM,CAAC,GAAG,GACnG;AAAA,SACF;AAAA,MACA,oBAAC,SAAM,OAAM,iBACX,8BAAC,SAAM,OAAO,QAAQ,MAAM,WAAW,IAAI,UAAU,CAAC,MAAM,WAAW,EAAE,GAAG,SAAS,MAAM,EAAE,OAAO,MAAM,CAAC,GAAG,WAAU,QAAO,GACjI;AAAA,MACA,oBAAC,SAAM,OAAM,2BAA0B,MAAM;AAAA,EAA+I,gBAAgB,IAC1M,8BAAC,YAAS,MAAM,IAAI,OAAO,YAAY,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK,GAAG,YAAY,OAAO,WAAU,qBAAoB,GAC1I;AAAA,MACA,oBAAC,SAAM,OAAM,YAAW,MAAK,4KAC3B,8BAAC,YAAS,MAAM,IAAI,OAAO,QAAQ,UAAU,UAAU,CAAC,MAAM,WAAW,EAAE,GAAG,SAAS,UAAU,EAAE,OAAO,MAAM,CAAC,GAAG,YAAY,OAAO,WAAU,qBAAoB,GACvK;AAAA,MACA,oBAAC,SAAM,OAAM,OAAM,MAAK,gEACtB,8BAAC,YAAS,MAAM,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,MAAM,WAAW,EAAE,GAAG,SAAS,KAAK,EAAE,OAAO,MAAM,CAAC,GAAG,YAAY,OAAO,WAAU,qBAAoB,GAC5J;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA,4BAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,UAAU,MAAM,SAAS,MAAM,KAAK,KAAK,GAAI,iBAAO,kBAAa,WAAU;AAAA,QACnH,oBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,SAAS,MAAM,WAAW,IAAI,GAAG,uBAAS;AAAA,SAClF;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAU,cACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,QAAG,WAAU,qBAAoB,wBAAU;AAAA,MAC5C,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,MAAK,MAAK,SAAS,MAAM,KAAK,KAAK,GAAG,gCAAkB;AAAA,OACpG;AAAA,IACA,oBAAC,OAAE,WAAU,0BAAyB,uLAGtC;AAAA,IACC,OAAO,WAAW,KAAK,oBAAC,OAAE,WAAU,0BAAyB,kCAAoB;AAAA,IAClF,oBAAC,QAAG,WAAU,cACX,iBAAO,IAAI,CAAC,MACX,qBAAC,QAAgB,WAAU,4EACzB;AAAA,2BAAC,SACC;AAAA,4BAAC,UAAK,WAAU,QAAQ,YAAE,MAAK;AAAA,QAC/B,oBAAC,YAAQ,YAAE,OAAM;AAAA,QAAS;AAAA,QAAC,qBAAC,UAAK,WAAU,0BAAyB;AAAA;AAAA,UAAE,EAAE;AAAA,UAAK;AAAA,UAAK,EAAE;AAAA,UAAQ;AAAA,WAAC;AAAA,SAC/F;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA,4BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,SAAS,MAAM,KAAK,CAAC,GAAG,sBAAQ;AAAA,QAChF,oBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,SAAS,MAAM,KAAK,OAAO,EAAE,IAAI,GAAG,yBAAW;AAAA,SACjG;AAAA,SARO,EAAE,IASX,CACD,GACH;AAAA,KACF;AAEJ;","names":[]}

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

@@ -3,8 +3,10 @@
  * zijde) en exporteert als webp. Dit bespaart fors op Storage-kosten (een 5MB-foto wordt ~200KB)
  * en houdt de opgeslagen URL stabiel (we uploaden meteen het kleine bestand).
  *
- * Vector/animatie (SVG/GIF) en al kleine bestanden worden ongemoeid gelaten. Bij elke fout valt
- * de functie terug op het originele bestand — uploaden mag nooit stuklopen op compressie.
+ * Vector/animatie (SVG/GIF) en al kleine bestanden worden ongemoeid gelaten. Bij een fout in de
+ * compressie-stap valt de functie terug op het origineel — MAAR een afbeelding die de browser
+ * überhaupt niet kan decoderen (HEIC van een iPhone bv.) wordt geweigerd met een duidelijke fout:
+ * stil doorsturen zou een bestand uploaden dat bij vrijwel geen enkele bezoeker rendert.
  */
 export declare function compressImage(file: File, opts?: {
     maxSize?: number;

package/dist/admin/lib/compressImage.js

@@ -5,8 +5,8 @@ async function compressImage(file, opts = {}) {
   if (typeof document === "undefined") return file;
   if (!file.type.startsWith("image/")) return file;
   if (file.type === "image/svg+xml" || file.type === "image/gif") return file;
+  const bitmap = await loadBitmap(file);
   try {
-    const bitmap = await loadBitmap(file);
     const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));
     const w = Math.max(1, Math.round(bitmap.width * scale));
     const h = Math.max(1, Math.round(bitmap.height * scale));
@@ -21,8 +21,10 @@ async function compressImage(file, opts = {}) {
       (resolve) => canvas.toBlob(resolve, "image/webp", quality)
     );
     if (!blob || blob.size >= file.size) return file;
-    const name = file.name.replace(/\.[^.]+$/, "") + ".webp";
-    return new File([blob], name, { type: "image/webp", lastModified: Date.now() });
+    const type = blob.type || "image/webp";
+    const ext = type === "image/webp" ? ".webp" : type === "image/png" ? ".png" : ".jpg";
+    const name = file.name.replace(/\.[^.]+$/, "") + ext;
+    return new File([blob], name, { type, lastModified: Date.now() });
   } catch {
     return file;
   }
@@ -30,7 +32,7 @@ async function compressImage(file, opts = {}) {
 async function loadBitmap(file) {
   if (typeof createImageBitmap === "function") {
     try {
-      return await createImageBitmap(file);
+      return await createImageBitmap(file, { imageOrientation: "from-image" });
     } catch {
     }
   }
@@ -39,7 +41,7 @@ async function loadBitmap(file) {
     const img = new Image();
     await new Promise((resolve, reject) => {
       img.onload = () => resolve();
-      img.onerror = () => reject(new Error("kon afbeelding niet laden"));
+      img.onerror = () => reject(new Error("Dit bestandsformaat kan de browser niet lezen (bv. HEIC) \u2014 sla de foto op als JPG of PNG en probeer opnieuw."));
       img.src = url;
     });
     return img;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/lib/compressImage.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Comprimeert een afbeelding in de browser vóór upload: schaalt naar max `maxSize` px (langste\n * zijde) en exporteert als webp. Dit bespaart fors op Storage-kosten (een 5MB-foto wordt ~200KB)\n * en houdt de opgeslagen URL stabiel (we uploaden meteen het kleine bestand).\n *\n * Vector/animatie (SVG/GIF) en al kleine bestanden worden ongemoeid gelaten. Bij elke fout valt\n * de functie terug op het originele bestand — uploaden mag nooit stuklopen op compressie.\n */\nexport async function compressImage(\n  file: File,\n  opts: { maxSize?: number; quality?: number } = {},\n): Promise<File> {\n  const maxSize = opts.maxSize ?? 2048;\n  const quality = opts.quality ?? 0.82;\n\n  if (typeof document === \"undefined\") return file; // alleen client\n  if (!file.type.startsWith(\"image/\")) return file;\n  if (file.type === \"image/svg+xml\" || file.type === \"image/gif\") return file;\n\n  try {\n    const bitmap = await loadBitmap(file);\n    const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));\n    const w = Math.max(1, Math.round(bitmap.width * scale));\n    const h = Math.max(1, Math.round(bitmap.height * scale));\n\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = w;\n    canvas.height = h;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return file;\n    ctx.drawImage(bitmap as CanvasImageSource, 0, 0, w, h);\n    if (\"close\" in bitmap && typeof bitmap.close === \"function\") bitmap.close();\n\n    const blob = await new Promise<Blob | null>((resolve) =>\n      canvas.toBlob(resolve, \"image/webp\", quality),\n    );\n    if (!blob || blob.size >= file.size) return file; // compressie hielp niet\n\n    const name = file.name.replace(/\\.[^.]+$/, \"\") + \".webp\";\n    return new File([blob], name, { type: \"image/webp\", lastModified: Date.now() });\n  } catch {\n    return file;\n  }\n}\n\nasync function loadBitmap(file: File): Promise<ImageBitmap | HTMLImageElement> {\n  if (typeof createImageBitmap === \"function\") {\n    try {\n      return await createImageBitmap(file);\n    } catch {\n      /* val terug op <img> */\n    }\n  }\n  const url = URL.createObjectURL(file);\n  try {\n    const img = new Image();\n    await new Promise<void>((resolve, reject) => {\n      img.onload = () => resolve();\n      img.onerror = () => reject(new Error(\"kon afbeelding niet laden\"));\n      img.src = url;\n    });\n    return img;\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n}\n"],"mappings":";AAUA,eAAsB,cACpB,MACA,OAA+C,CAAC,GACjC;AACf,QAAM,UAAU,KAAK,WAAW;AAChC,QAAM,UAAU,KAAK,WAAW;AAEhC,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,CAAC,KAAK,KAAK,WAAW,QAAQ,EAAG,QAAO;AAC5C,MAAI,KAAK,SAAS,mBAAmB,KAAK,SAAS,YAAa,QAAO;AAEvE,MAAI;AACF,UAAM,SAAS,MAAM,WAAW,IAAI;AACpC,UAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC;AACzE,UAAM,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,QAAQ,KAAK,CAAC;AACtD,UAAM,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,SAAS,KAAK,CAAC;AAEvD,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ;AACf,WAAO,SAAS;AAChB,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,QAAI,CAAC,IAAK,QAAO;AACjB,QAAI,UAAU,QAA6B,GAAG,GAAG,GAAG,CAAC;AACrD,QAAI,WAAW,UAAU,OAAO,OAAO,UAAU,WAAY,QAAO,MAAM;AAE1E,UAAM,OAAO,MAAM,IAAI;AAAA,MAAqB,CAAC,YAC3C,OAAO,OAAO,SAAS,cAAc,OAAO;AAAA,IAC9C;AACA,QAAI,CAAC,QAAQ,KAAK,QAAQ,KAAK,KAAM,QAAO;AAE5C,UAAM,OAAO,KAAK,KAAK,QAAQ,YAAY,EAAE,IAAI;AACjD,WAAO,IAAI,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,cAAc,cAAc,KAAK,IAAI,EAAE,CAAC;AAAA,EAChF,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,eAAe,WAAW,MAAqD;AAC7E,MAAI,OAAO,sBAAsB,YAAY;AAC3C,QAAI;AACF,aAAO,MAAM,kBAAkB,IAAI;AAAA,IACrC,QAAQ;AAAA,IAER;AAAA,EACF;AACA,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,MAAI;AACF,UAAM,MAAM,IAAI,MAAM;AACtB,UAAM,IAAI,QAAc,CAAC,SAAS,WAAW;AAC3C,UAAI,SAAS,MAAM,QAAQ;AAC3B,UAAI,UAAU,MAAM,OAAO,IAAI,MAAM,2BAA2B,CAAC;AACjE,UAAI,MAAM;AAAA,IACZ,CAAC;AACD,WAAO;AAAA,EACT,UAAE;AACA,QAAI,gBAAgB,GAAG;AAAA,EACzB;AACF;","names":[]}
+{"version":3,"sources":["../../../src/admin/lib/compressImage.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Comprimeert een afbeelding in de browser vóór upload: schaalt naar max `maxSize` px (langste\n * zijde) en exporteert als webp. Dit bespaart fors op Storage-kosten (een 5MB-foto wordt ~200KB)\n * en houdt de opgeslagen URL stabiel (we uploaden meteen het kleine bestand).\n *\n * Vector/animatie (SVG/GIF) en al kleine bestanden worden ongemoeid gelaten. Bij een fout in de\n * compressie-stap valt de functie terug op het origineel — MAAR een afbeelding die de browser\n * überhaupt niet kan decoderen (HEIC van een iPhone bv.) wordt geweigerd met een duidelijke fout:\n * stil doorsturen zou een bestand uploaden dat bij vrijwel geen enkele bezoeker rendert.\n */\nexport async function compressImage(\n  file: File,\n  opts: { maxSize?: number; quality?: number } = {},\n): Promise<File> {\n  const maxSize = opts.maxSize ?? 2048;\n  const quality = opts.quality ?? 0.82;\n\n  if (typeof document === \"undefined\") return file; // alleen client\n  if (!file.type.startsWith(\"image/\")) return file;\n  if (file.type === \"image/svg+xml\" || file.type === \"image/gif\") return file;\n\n  const bitmap = await loadBitmap(file); // gooit bij niet-decodeerbaar formaat (bv. HEIC)\n\n  try {\n    const scale = Math.min(1, maxSize / Math.max(bitmap.width, bitmap.height));\n    const w = Math.max(1, Math.round(bitmap.width * scale));\n    const h = Math.max(1, Math.round(bitmap.height * scale));\n\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = w;\n    canvas.height = h;\n    const ctx = canvas.getContext(\"2d\");\n    if (!ctx) return file;\n    ctx.drawImage(bitmap as CanvasImageSource, 0, 0, w, h);\n    if (\"close\" in bitmap && typeof bitmap.close === \"function\") bitmap.close();\n\n    const blob = await new Promise<Blob | null>((resolve) =>\n      canvas.toBlob(resolve, \"image/webp\", quality),\n    );\n    if (!blob || blob.size >= file.size) return file; // compressie hielp niet\n    // Safari kan stil een ander type teruggeven dan gevraagd — label het bestand dan eerlijk.\n    const type = blob.type || \"image/webp\";\n    const ext = type === \"image/webp\" ? \".webp\" : type === \"image/png\" ? \".png\" : \".jpg\";\n    const name = file.name.replace(/\\.[^.]+$/, \"\") + ext;\n    return new File([blob], name, { type, lastModified: Date.now() });\n  } catch {\n    return file; // compressie faalde, maar het beeld ís decodeerbaar → origineel is veilig\n  }\n}\n\nasync function loadBitmap(file: File): Promise<ImageBitmap | HTMLImageElement> {\n  if (typeof createImageBitmap === \"function\") {\n    try {\n      // EXIF-oriëntatie expliciet respecteren (default in moderne browsers; hardening voor oude).\n      return await createImageBitmap(file, { imageOrientation: \"from-image\" });\n    } catch {\n      /* val terug op <img> */\n    }\n  }\n  const url = URL.createObjectURL(file);\n  try {\n    const img = new Image();\n    await new Promise<void>((resolve, reject) => {\n      img.onload = () => resolve();\n      img.onerror = () =>\n        reject(new Error(\"Dit bestandsformaat kan de browser niet lezen (bv. HEIC) — sla de foto op als JPG of PNG en probeer opnieuw.\"));\n      img.src = url;\n    });\n    return img;\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n}\n"],"mappings":";AAYA,eAAsB,cACpB,MACA,OAA+C,CAAC,GACjC;AACf,QAAM,UAAU,KAAK,WAAW;AAChC,QAAM,UAAU,KAAK,WAAW;AAEhC,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,MAAI,CAAC,KAAK,KAAK,WAAW,QAAQ,EAAG,QAAO;AAC5C,MAAI,KAAK,SAAS,mBAAmB,KAAK,SAAS,YAAa,QAAO;AAEvE,QAAM,SAAS,MAAM,WAAW,IAAI;AAEpC,MAAI;AACF,UAAM,QAAQ,KAAK,IAAI,GAAG,UAAU,KAAK,IAAI,OAAO,OAAO,OAAO,MAAM,CAAC;AACzE,UAAM,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,QAAQ,KAAK,CAAC;AACtD,UAAM,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,OAAO,SAAS,KAAK,CAAC;AAEvD,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,QAAQ;AACf,WAAO,SAAS;AAChB,UAAM,MAAM,OAAO,WAAW,IAAI;AAClC,QAAI,CAAC,IAAK,QAAO;AACjB,QAAI,UAAU,QAA6B,GAAG,GAAG,GAAG,CAAC;AACrD,QAAI,WAAW,UAAU,OAAO,OAAO,UAAU,WAAY,QAAO,MAAM;AAE1E,UAAM,OAAO,MAAM,IAAI;AAAA,MAAqB,CAAC,YAC3C,OAAO,OAAO,SAAS,cAAc,OAAO;AAAA,IAC9C;AACA,QAAI,CAAC,QAAQ,KAAK,QAAQ,KAAK,KAAM,QAAO;AAE5C,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,MAAM,SAAS,eAAe,UAAU,SAAS,cAAc,SAAS;AAC9E,UAAM,OAAO,KAAK,KAAK,QAAQ,YAAY,EAAE,IAAI;AACjD,WAAO,IAAI,KAAK,CAAC,IAAI,GAAG,MAAM,EAAE,MAAM,cAAc,KAAK,IAAI,EAAE,CAAC;AAAA,EAClE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,eAAe,WAAW,MAAqD;AAC7E,MAAI,OAAO,sBAAsB,YAAY;AAC3C,QAAI;AAEF,aAAO,MAAM,kBAAkB,MAAM,EAAE,kBAAkB,aAAa,CAAC;AAAA,IACzE,QAAQ;AAAA,IAER;AAAA,EACF;AACA,QAAM,MAAM,IAAI,gBAAgB,IAAI;AACpC,MAAI;AACF,UAAM,MAAM,IAAI,MAAM;AACtB,UAAM,IAAI,QAAc,CAAC,SAAS,WAAW;AAC3C,UAAI,SAAS,MAAM,QAAQ;AAC3B,UAAI,UAAU,MACZ,OAAO,IAAI,MAAM,mHAA8G,CAAC;AAClI,UAAI,MAAM;AAAA,IACZ,CAAC;AACD,WAAO;AAAA,EACT,UAAE;AACA,QAAI,gBAAgB,GAAG;AAAA,EACzB;AACF;","names":[]}

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

@@ -1,7 +1,8 @@
 /**
- * Zoekt (goedkoop) of een media-item in gepubliceerde pagina's wordt gebruikt, zodat we kunnen
- * waarschuwen vóór verwijderen (anders breekt een live pagina met een dode afbeelding).
- * Sites hebben weinig pagina's → een JSON-substring-scan is ruim voldoende.
+ * Zoekt (goedkoop) of een media-item ergens in gebruik is, zodat we kunnen waarschuwen vóór
+ * verwijderen (anders breekt een live pagina met een dode afbeelding). Gescand worden:
+ * gepubliceerde pagina's, concepten (drafts), nieuwsartikelen (covers/inline beelden) en de
+ * site-instellingen (og-beeld e.d.). Sites zijn klein → een JSON-substring-scan is ruim voldoende.
  */
 export declare function findMediaUsage(siteId: string, item: {
     id: string;

package/dist/admin/lib/mediaUsage.js

@@ -1,22 +1,33 @@
 "use client";
-import { collection, getDocs } from "firebase/firestore";
+import { collection, doc, getDoc, getDocs } from "firebase/firestore";
 import { getDb } from "../../firebase/client";
 async function findMediaUsage(siteId, item) {
   const db = getDb();
   if (!db) return [];
+  const matches = (blob) => item.url && blob.includes(item.url) || blob.includes(item.id);
+  const hits = [];
   try {
-    const snap = await getDocs(collection(db, "sites", siteId, "pages"));
-    const hits = [];
-    for (const d of snap.docs) {
+    const [pages, drafts, news, 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),
+      getDoc(doc(db, "sites", siteId, "settings", "public")).catch(() => null)
+    ]);
+    for (const d of pages.docs) {
       const data = d.data();
-      const blob = JSON.stringify(data.blocks ?? []);
-      if (item.url && blob.includes(item.url) || blob.includes(item.id)) {
-        hits.push(String(data.path ?? data.title ?? d.id));
-      }
+      if (matches(JSON.stringify(data.blocks ?? []))) hits.push(String(data.path ?? data.title ?? d.id));
     }
-    return hits;
+    for (const d of drafts?.docs ?? []) {
+      const data = d.data();
+      if (matches(JSON.stringify(data.blocks ?? []))) hits.push(`${String(data.path ?? d.id)} (concept)`);
+    }
+    for (const d of news?.docs ?? []) {
+      if (matches(JSON.stringify(d.data()))) hits.push(`nieuws: ${String(d.data().title ?? d.id)}`);
+    }
+    if (settings?.exists() && matches(JSON.stringify(settings.data()))) hits.push("site-instellingen");
+    return [...new Set(hits)];
   } catch {
-    return [];
+    return hits;
   }
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/lib/mediaUsage.ts"],"sourcesContent":["\"use client\";\n\nimport { collection, getDocs } from \"firebase/firestore\";\nimport { getDb } from \"../../firebase/client\";\n\n/**\n * Zoekt (goedkoop) of een media-item in gepubliceerde pagina's wordt gebruikt, zodat we kunnen\n * waarschuwen vóór verwijderen (anders breekt een live pagina met een dode afbeelding).\n * Sites hebben weinig pagina's → 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  try {\n    const snap = await getDocs(collection(db, \"sites\", siteId, \"pages\"));\n    const hits: string[] = [];\n    for (const d of snap.docs) {\n      const data = d.data() as Record<string, unknown>;\n      const blob = JSON.stringify(data.blocks ?? []);\n      if ((item.url && blob.includes(item.url)) || blob.includes(item.id)) {\n        hits.push(String(data.path ?? data.title ?? d.id));\n      }\n    }\n    return hits;\n  } catch {\n    return [];\n  }\n}\n"],"mappings":";AAEA,SAAS,YAAY,eAAe;AACpC,SAAS,aAAa;AAOtB,eAAsB,eACpB,QACA,MACmB;AACnB,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,GAAI,QAAO,CAAC;AACjB,MAAI;AACF,UAAM,OAAO,MAAM,QAAQ,WAAW,IAAI,SAAS,QAAQ,OAAO,CAAC;AACnE,UAAM,OAAiB,CAAC;AACxB,eAAW,KAAK,KAAK,MAAM;AACzB,YAAM,OAAO,EAAE,KAAK;AACpB,YAAM,OAAO,KAAK,UAAU,KAAK,UAAU,CAAC,CAAC;AAC7C,UAAK,KAAK,OAAO,KAAK,SAAS,KAAK,GAAG,KAAM,KAAK,SAAS,KAAK,EAAE,GAAG;AACnE,aAAK,KAAK,OAAO,KAAK,QAAQ,KAAK,SAAS,EAAE,EAAE,CAAC;AAAA,MACnD;AAAA,IACF;AACA,WAAO;AAAA,EACT,QAAQ;AACN,WAAO,CAAC;AAAA,EACV;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"],"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":[]}

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

@@ -0,0 +1,13 @@
+import { type StoredSymbol } from "../../schema/symbols";
+export declare function subscribeSymbols(siteId: string, cb: (symbols: StoredSymbol[]) => void): () => void;
+export declare function getSymbolOnce(siteId: string, symbolId: string): Promise<StoredSymbol | null>;
+export declare function saveSymbol(input: {
+    siteId: string;
+    symbolId?: string;
+    name: string;
+    blocks: Record<string, unknown>[];
+}): Promise<{
+    id: string;
+    message?: string;
+}>;
+export declare function deleteSymbol(siteId: string, symbolId: string): Promise<void>;

package/dist/admin/lib/symbolsClient.js

@@ -0,0 +1,51 @@
+"use client";
+import { collection, doc, getDoc, onSnapshot } from "firebase/firestore";
+import { getFunctions, httpsCallable } from "firebase/functions";
+import { getDb, getFirebaseApp } from "../../firebase/client";
+import { functionsRegion } from "../../firebase/region";
+import { SymbolSchema } from "../../schema/symbols";
+function subscribeSymbols(siteId, cb) {
+  const db = getDb();
+  if (!db) {
+    cb([]);
+    return () => void 0;
+  }
+  return onSnapshot(
+    collection(db, "sites", siteId, "symbols"),
+    (snap) => {
+      const out = [];
+      snap.forEach((d) => {
+        const res = SymbolSchema.safeParse(d.data());
+        if (res.success) out.push({ id: d.id, ...res.data });
+      });
+      cb(out.sort((a, b) => a.name.localeCompare(b.name)));
+    },
+    () => cb([])
+  );
+}
+async function getSymbolOnce(siteId, symbolId) {
+  const db = getDb();
+  if (!db) return null;
+  const snap = await getDoc(doc(db, "sites", siteId, "symbols", symbolId));
+  if (!snap.exists()) return null;
+  const res = SymbolSchema.safeParse(snap.data());
+  return res.success ? { id: snap.id, ...res.data } : null;
+}
+async function saveSymbol(input) {
+  const app = getFirebaseApp();
+  if (!app) throw new Error("Firebase niet geconfigureerd.");
+  const fn = httpsCallable(getFunctions(app, functionsRegion()), "saveSymbol");
+  return (await fn(input)).data;
+}
+async function deleteSymbol(siteId, symbolId) {
+  const app = getFirebaseApp();
+  if (!app) throw new Error("Firebase niet geconfigureerd.");
+  await httpsCallable(getFunctions(app, functionsRegion()), "deleteSymbol")({ siteId, symbolId });
+}
+export {
+  deleteSymbol,
+  getSymbolOnce,
+  saveSymbol,
+  subscribeSymbols
+};
+//# sourceMappingURL=symbolsClient.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/lib/symbolsClient.ts"],"sourcesContent":["\"use client\";\n\n/** Dataclient voor symbolen (5.0): live lijst + opslaan/verwijderen via de callables. */\nimport { collection, doc, getDoc, onSnapshot } from \"firebase/firestore\";\nimport { getFunctions, httpsCallable } from \"firebase/functions\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { functionsRegion } from \"../../firebase/region\";\nimport { SymbolSchema, type StoredSymbol } from \"../../schema/symbols\";\n\nexport function subscribeSymbols(siteId: string, cb: (symbols: StoredSymbol[]) => void): () => void {\n  const db = getDb();\n  if (!db) {\n    cb([]);\n    return () => undefined;\n  }\n  return onSnapshot(\n    collection(db, \"sites\", siteId, \"symbols\"),\n    (snap) => {\n      const out: StoredSymbol[] = [];\n      snap.forEach((d) => {\n        const res = SymbolSchema.safeParse(d.data());\n        if (res.success) out.push({ id: d.id, ...res.data });\n      });\n      cb(out.sort((a, b) => a.name.localeCompare(b.name)));\n    },\n    () => cb([]),\n  );\n}\n\nexport async function getSymbolOnce(siteId: string, symbolId: string): Promise<StoredSymbol | null> {\n  const db = getDb();\n  if (!db) return null;\n  const snap = await getDoc(doc(db, \"sites\", siteId, \"symbols\", symbolId));\n  if (!snap.exists()) return null;\n  const res = SymbolSchema.safeParse(snap.data());\n  return res.success ? { id: snap.id, ...res.data } : null;\n}\n\nexport async function saveSymbol(input: {\n  siteId: string;\n  symbolId?: string;\n  name: string;\n  blocks: Record<string, unknown>[];\n}): Promise<{ id: string; message?: string }> {\n  const app = getFirebaseApp();\n  if (!app) throw new Error(\"Firebase niet geconfigureerd.\");\n  const fn = httpsCallable<typeof input, { id: string; message?: string }>(getFunctions(app, functionsRegion()), \"saveSymbol\");\n  return (await fn(input)).data;\n}\n\nexport async function deleteSymbol(siteId: string, symbolId: string): Promise<void> {\n  const app = getFirebaseApp();\n  if (!app) throw new Error(\"Firebase niet geconfigureerd.\");\n  await httpsCallable(getFunctions(app, functionsRegion()), \"deleteSymbol\")({ siteId, symbolId });\n}\n"],"mappings":";AAGA,SAAS,YAAY,KAAK,QAAQ,kBAAkB;AACpD,SAAS,cAAc,qBAAqB;AAC5C,SAAS,OAAO,sBAAsB;AACtC,SAAS,uBAAuB;AAChC,SAAS,oBAAuC;AAEzC,SAAS,iBAAiB,QAAgB,IAAmD;AAClG,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,IAAI;AACP,OAAG,CAAC,CAAC;AACL,WAAO,MAAM;AAAA,EACf;AACA,SAAO;AAAA,IACL,WAAW,IAAI,SAAS,QAAQ,SAAS;AAAA,IACzC,CAAC,SAAS;AACR,YAAM,MAAsB,CAAC;AAC7B,WAAK,QAAQ,CAAC,MAAM;AAClB,cAAM,MAAM,aAAa,UAAU,EAAE,KAAK,CAAC;AAC3C,YAAI,IAAI,QAAS,KAAI,KAAK,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,CAAC;AAAA,MACrD,CAAC;AACD,SAAG,IAAI,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,EAAE,IAAI,CAAC,CAAC;AAAA,IACrD;AAAA,IACA,MAAM,GAAG,CAAC,CAAC;AAAA,EACb;AACF;AAEA,eAAsB,cAAc,QAAgB,UAAgD;AAClG,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,OAAO,MAAM,OAAO,IAAI,IAAI,SAAS,QAAQ,WAAW,QAAQ,CAAC;AACvE,MAAI,CAAC,KAAK,OAAO,EAAG,QAAO;AAC3B,QAAM,MAAM,aAAa,UAAU,KAAK,KAAK,CAAC;AAC9C,SAAO,IAAI,UAAU,EAAE,IAAI,KAAK,IAAI,GAAG,IAAI,KAAK,IAAI;AACtD;AAEA,eAAsB,WAAW,OAKa;AAC5C,QAAM,MAAM,eAAe;AAC3B,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+BAA+B;AACzD,QAAM,KAAK,cAA8D,aAAa,KAAK,gBAAgB,CAAC,GAAG,YAAY;AAC3H,UAAQ,MAAM,GAAG,KAAK,GAAG;AAC3B;AAEA,eAAsB,aAAa,QAAgB,UAAiC;AAClF,QAAM,MAAM,eAAe;AAC3B,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+BAA+B;AACzD,QAAM,cAAc,aAAa,KAAK,gBAAgB,CAAC,GAAG,cAAc,EAAE,EAAE,QAAQ,SAAS,CAAC;AAChG;","names":[]}

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

@@ -1,5 +1,9 @@
 /** Maximale bestandsgrootte vóór compressie (foolproof: voorkomt vastlopen op enorme bestanden). */
 export declare const MAX_UPLOAD_BYTES: number;
+/** Harde grens die de Storage-rules afdwingen (storage.rules): het GECOMPRIMEERDE bestand moet
+ *  hieronder blijven. We checken dit client-side na compressie zodat een slecht comprimeerbaar
+ *  bestand een nette melding geeft i.p.v. een cryptische rules-weigering ("er gebeurt niets"). */
+export declare const MAX_STORED_BYTES: number;
 /**
  * Comprimeert een afbeelding (client-side, webp + resize) en uploadt 'm naar
  * `sites/{siteId}/media/...`. Registreert het media-doc (status "processing" — de sharp-Cloud-

package/dist/admin/lib/upload.js

@@ -1,26 +1,39 @@
 "use client";
 import { ref as storageRef, uploadBytes, getDownloadURL } from "firebase/storage";
-import { addDoc, collection, serverTimestamp } from "firebase/firestore";
+import { addDoc, collection, doc, serverTimestamp, updateDoc } from "firebase/firestore";
 import { getBucket, getDb } from "../../firebase/client";
+import { addDemoMedia, isDemoActive } from "../../demo/demoStore";
 import { compressImage } from "./compressImage";
 const MAX_UPLOAD_BYTES = 15 * 1024 * 1024;
+const MAX_STORED_BYTES = 10 * 1024 * 1024;
 async function uploadImage(siteId, file) {
   const bucket = getBucket();
   const db = getDb();
-  if (!bucket) throw new Error("Firebase Storage is niet geconfigureerd.");
   if (!file.type.startsWith("image/")) throw new Error("Alleen afbeeldingen zijn toegestaan.");
   if (file.size > MAX_UPLOAD_BYTES) {
     throw new Error(`Bestand te groot (max ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)} MB).`);
   }
+  if (isDemoActive()) {
+    const optimized2 = await compressImage(file);
+    const dataUrl = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(String(reader.result));
+      reader.onerror = () => reject(new Error("Bestand lezen mislukt."));
+      reader.readAsDataURL(optimized2);
+    });
+    const media = addDemoMedia(siteId, { url: dataUrl, name: optimized2.name });
+    return { url: media.url, mediaId: media.id, path: media.path };
+  }
+  if (!bucket) throw new Error("Firebase Storage is niet geconfigureerd.");
   const optimized = await compressImage(file);
+  if (optimized.size > MAX_STORED_BYTES) {
+    throw new Error(`Afbeelding blijft na verkleinen te groot (max ${Math.round(MAX_STORED_BYTES / 1024 / 1024)} MB). Kies een kleinere of minder gedetailleerde afbeelding.`);
+  }
   const path = `sites/${siteId}/media/${Date.now()}-${optimized.name.replace(/[^\w.-]+/g, "_")}`;
-  const sref = storageRef(bucket, path);
-  await uploadBytes(sref, optimized);
-  const url = await getDownloadURL(sref);
   let mediaId = "";
   if (db) {
     const docRef = await addDoc(collection(db, "sites", siteId, "media"), {
-      url,
+      url: "",
       path,
       name: optimized.name,
       contentType: optimized.type,
@@ -31,9 +44,16 @@ async function uploadImage(siteId, file) {
     });
     mediaId = docRef.id;
   }
+  const sref = storageRef(bucket, path);
+  await uploadBytes(sref, optimized);
+  const url = await getDownloadURL(sref);
+  if (db && mediaId) {
+    await updateDoc(doc(db, "sites", siteId, "media", mediaId), { url });
+  }
   return { url, mediaId, path };
 }
 export {
+  MAX_STORED_BYTES,
   MAX_UPLOAD_BYTES,
   uploadImage
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/lib/upload.ts"],"sourcesContent":["\"use client\";\n\nimport { ref as storageRef, uploadBytes, getDownloadURL } from \"firebase/storage\";\nimport { addDoc, collection, serverTimestamp } from \"firebase/firestore\";\nimport { getBucket, getDb } from \"../../firebase/client\";\nimport { compressImage } from \"./compressImage\";\n\n/** Maximale bestandsgrootte vóór compressie (foolproof: voorkomt vastlopen op enorme bestanden). */\nexport const MAX_UPLOAD_BYTES = 15 * 1024 * 1024; // 15 MB\n\n/**\n * Comprimeert een afbeelding (client-side, webp + resize) en uploadt 'm naar\n * `sites/{siteId}/media/...`. Registreert het media-doc (status \"processing\" — de sharp-Cloud-\n * Function vult srcset-varianten + zet \"ready\") en geeft de download-URL + media-id terug.\n * Door vóór upload te comprimeren bewaren we nooit het grote origineel → flinke storagebesparing.\n */\nexport async function uploadImage(\n  siteId: string,\n  file: File,\n): Promise<{ url: string; mediaId: string; path: string }> {\n  const bucket = getBucket();\n  const db = getDb();\n  if (!bucket) throw new Error(\"Firebase Storage is niet geconfigureerd.\");\n  if (!file.type.startsWith(\"image/\")) throw new Error(\"Alleen afbeeldingen zijn toegestaan.\");\n  if (file.size > MAX_UPLOAD_BYTES) {\n    throw new Error(`Bestand te groot (max ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)} MB).`);\n  }\n\n  const optimized = await compressImage(file);\n  const path = `sites/${siteId}/media/${Date.now()}-${optimized.name.replace(/[^\\w.-]+/g, \"_\")}`;\n  const sref = storageRef(bucket, path);\n  await uploadBytes(sref, optimized);\n  const url = await getDownloadURL(sref);\n  let mediaId = \"\";\n  if (db) {\n    const docRef = await addDoc(collection(db, \"sites\", siteId, \"media\"), {\n      url,\n      path,\n      name: optimized.name,\n      contentType: optimized.type,\n      size: optimized.size,\n      alt: \"\",\n      status: \"processing\",\n      createdAt: serverTimestamp(),\n    });\n    mediaId = docRef.id;\n  }\n  return { url, mediaId, path };\n}\n"],"mappings":";AAEA,SAAS,OAAO,YAAY,aAAa,sBAAsB;AAC/D,SAAS,QAAQ,YAAY,uBAAuB;AACpD,SAAS,WAAW,aAAa;AACjC,SAAS,qBAAqB;AAGvB,MAAM,mBAAmB,KAAK,OAAO;AAQ5C,eAAsB,YACpB,QACA,MACyD;AACzD,QAAM,SAAS,UAAU;AACzB,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,0CAA0C;AACvE,MAAI,CAAC,KAAK,KAAK,WAAW,QAAQ,EAAG,OAAM,IAAI,MAAM,sCAAsC;AAC3F,MAAI,KAAK,OAAO,kBAAkB;AAChC,UAAM,IAAI,MAAM,yBAAyB,KAAK,MAAM,mBAAmB,OAAO,IAAI,CAAC,OAAO;AAAA,EAC5F;AAEA,QAAM,YAAY,MAAM,cAAc,IAAI;AAC1C,QAAM,OAAO,SAAS,MAAM,UAAU,KAAK,IAAI,CAAC,IAAI,UAAU,KAAK,QAAQ,aAAa,GAAG,CAAC;AAC5F,QAAM,OAAO,WAAW,QAAQ,IAAI;AACpC,QAAM,YAAY,MAAM,SAAS;AACjC,QAAM,MAAM,MAAM,eAAe,IAAI;AACrC,MAAI,UAAU;AACd,MAAI,IAAI;AACN,UAAM,SAAS,MAAM,OAAO,WAAW,IAAI,SAAS,QAAQ,OAAO,GAAG;AAAA,MACpE;AAAA,MACA;AAAA,MACA,MAAM,UAAU;AAAA,MAChB,aAAa,UAAU;AAAA,MACvB,MAAM,UAAU;AAAA,MAChB,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,WAAW,gBAAgB;AAAA,IAC7B,CAAC;AACD,cAAU,OAAO;AAAA,EACnB;AACA,SAAO,EAAE,KAAK,SAAS,KAAK;AAC9B;","names":[]}
+{"version":3,"sources":["../../../src/admin/lib/upload.ts"],"sourcesContent":["\"use client\";\n\nimport { ref as storageRef, uploadBytes, getDownloadURL } from \"firebase/storage\";\nimport { addDoc, collection, doc, serverTimestamp, updateDoc } from \"firebase/firestore\";\nimport { getBucket, getDb } from \"../../firebase/client\";\nimport { addDemoMedia, isDemoActive } from \"../../demo/demoStore\";\nimport { compressImage } from \"./compressImage\";\n\n/** Maximale bestandsgrootte vóór compressie (foolproof: voorkomt vastlopen op enorme bestanden). */\nexport const MAX_UPLOAD_BYTES = 15 * 1024 * 1024; // 15 MB\n/** Harde grens die de Storage-rules afdwingen (storage.rules): het GECOMPRIMEERDE bestand moet\n *  hieronder blijven. We checken dit client-side na compressie zodat een slecht comprimeerbaar\n *  bestand een nette melding geeft i.p.v. een cryptische rules-weigering (\"er gebeurt niets\"). */\nexport const MAX_STORED_BYTES = 10 * 1024 * 1024; // 10 MB — moet gelijk zijn aan storage.rules\n\n/**\n * Comprimeert een afbeelding (client-side, webp + resize) en uploadt 'm naar\n * `sites/{siteId}/media/...`. Registreert het media-doc (status \"processing\" — de sharp-Cloud-\n * Function vult srcset-varianten + zet \"ready\") en geeft de download-URL + media-id terug.\n * Door vóór upload te comprimeren bewaren we nooit het grote origineel → flinke storagebesparing.\n */\nexport async function uploadImage(\n  siteId: string,\n  file: File,\n): Promise<{ url: string; mediaId: string; path: string }> {\n  const bucket = getBucket();\n  const db = getDb();\n  if (!file.type.startsWith(\"image/\")) throw new Error(\"Alleen afbeeldingen zijn toegestaan.\");\n  if (file.size > MAX_UPLOAD_BYTES) {\n    throw new Error(`Bestand te groot (max ${Math.round(MAX_UPLOAD_BYTES / 1024 / 1024)} MB).`);\n  }\n\n  // Demo-bewerkmodus: geen Firebase — de (gecomprimeerde) afbeelding wordt als data-URL in de\n  // lokale demo-bibliotheek bewaard. Alles blijft in de browser, net als de demo-drafts.\n  if (isDemoActive()) {\n    const optimized = await compressImage(file);\n    const dataUrl = await new Promise<string>((resolve, reject) => {\n      const reader = new FileReader();\n      reader.onload = () => resolve(String(reader.result));\n      reader.onerror = () => reject(new Error(\"Bestand lezen mislukt.\"));\n      reader.readAsDataURL(optimized);\n    });\n    const media = addDemoMedia(siteId, { url: dataUrl, name: optimized.name });\n    return { url: media.url, mediaId: media.id, path: media.path };\n  }\n\n  if (!bucket) throw new Error(\"Firebase Storage is niet geconfigureerd.\");\n  const optimized = await compressImage(file);\n  if (optimized.size > MAX_STORED_BYTES) {\n    throw new Error(`Afbeelding blijft na verkleinen te groot (max ${Math.round(MAX_STORED_BYTES / 1024 / 1024)} MB). Kies een kleinere of minder gedetailleerde afbeelding.`);\n  }\n  const path = `sites/${siteId}/media/${Date.now()}-${optimized.name.replace(/[^\\w.-]+/g, \"_\")}`;\n  // Media-doc VÓÓR de upload aanmaken: de variants-Cloud-Function zoekt het doc op `path` zodra\n  // het bestand binnenkomt — was het doc er dan nog niet, dan bleef het item eeuwig \"processing\".\n  let mediaId = \"\";\n  if (db) {\n    const docRef = await addDoc(collection(db, \"sites\", siteId, \"media\"), {\n      url: \"\",\n      path,\n      name: optimized.name,\n      contentType: optimized.type,\n      size: optimized.size,\n      alt: \"\",\n      status: \"processing\",\n      createdAt: serverTimestamp(),\n    });\n    mediaId = docRef.id;\n  }\n  const sref = storageRef(bucket, path);\n  await uploadBytes(sref, optimized);\n  const url = await getDownloadURL(sref);\n  if (db && mediaId) {\n    await updateDoc(doc(db, \"sites\", siteId, \"media\", mediaId), { url });\n  }\n  return { url, mediaId, path };\n}\n"],"mappings":";AAEA,SAAS,OAAO,YAAY,aAAa,sBAAsB;AAC/D,SAAS,QAAQ,YAAY,KAAK,iBAAiB,iBAAiB;AACpE,SAAS,WAAW,aAAa;AACjC,SAAS,cAAc,oBAAoB;AAC3C,SAAS,qBAAqB;AAGvB,MAAM,mBAAmB,KAAK,OAAO;AAIrC,MAAM,mBAAmB,KAAK,OAAO;AAQ5C,eAAsB,YACpB,QACA,MACyD;AACzD,QAAM,SAAS,UAAU;AACzB,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,KAAK,KAAK,WAAW,QAAQ,EAAG,OAAM,IAAI,MAAM,sCAAsC;AAC3F,MAAI,KAAK,OAAO,kBAAkB;AAChC,UAAM,IAAI,MAAM,yBAAyB,KAAK,MAAM,mBAAmB,OAAO,IAAI,CAAC,OAAO;AAAA,EAC5F;AAIA,MAAI,aAAa,GAAG;AAClB,UAAMA,aAAY,MAAM,cAAc,IAAI;AAC1C,UAAM,UAAU,MAAM,IAAI,QAAgB,CAAC,SAAS,WAAW;AAC7D,YAAM,SAAS,IAAI,WAAW;AAC9B,aAAO,SAAS,MAAM,QAAQ,OAAO,OAAO,MAAM,CAAC;AACnD,aAAO,UAAU,MAAM,OAAO,IAAI,MAAM,wBAAwB,CAAC;AACjE,aAAO,cAAcA,UAAS;AAAA,IAChC,CAAC;AACD,UAAM,QAAQ,aAAa,QAAQ,EAAE,KAAK,SAAS,MAAMA,WAAU,KAAK,CAAC;AACzE,WAAO,EAAE,KAAK,MAAM,KAAK,SAAS,MAAM,IAAI,MAAM,MAAM,KAAK;AAAA,EAC/D;AAEA,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,0CAA0C;AACvE,QAAM,YAAY,MAAM,cAAc,IAAI;AAC1C,MAAI,UAAU,OAAO,kBAAkB;AACrC,UAAM,IAAI,MAAM,iDAAiD,KAAK,MAAM,mBAAmB,OAAO,IAAI,CAAC,8DAA8D;AAAA,EAC3K;AACA,QAAM,OAAO,SAAS,MAAM,UAAU,KAAK,IAAI,CAAC,IAAI,UAAU,KAAK,QAAQ,aAAa,GAAG,CAAC;AAG5F,MAAI,UAAU;AACd,MAAI,IAAI;AACN,UAAM,SAAS,MAAM,OAAO,WAAW,IAAI,SAAS,QAAQ,OAAO,GAAG;AAAA,MACpE,KAAK;AAAA,MACL;AAAA,MACA,MAAM,UAAU;AAAA,MAChB,aAAa,UAAU;AAAA,MACvB,MAAM,UAAU;AAAA,MAChB,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,WAAW,gBAAgB;AAAA,IAC7B,CAAC;AACD,cAAU,OAAO;AAAA,EACnB;AACA,QAAM,OAAO,WAAW,QAAQ,IAAI;AACpC,QAAM,YAAY,MAAM,SAAS;AACjC,QAAM,MAAM,MAAM,eAAe,IAAI;AACrC,MAAI,MAAM,SAAS;AACjB,UAAM,UAAU,IAAI,IAAI,SAAS,QAAQ,SAAS,OAAO,GAAG,EAAE,IAAI,CAAC;AAAA,EACrE;AACA,SAAO,EAAE,KAAK,SAAS,KAAK;AAC9B;","names":["optimized"]}

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

@@ -3,10 +3,17 @@
  * - de `GenericEditor` (fallback-editor voor blokken zonder eigen `Editor`), en
  * - het `ModuleSettingsForm` (instellingen van een module in /beheer).
  *
+ * Twee lagen:
+ * - `introspectObjectSchema` (legacy, plat): simpele kinds — blijft bestaan voor module-settings.
+ * - `introspectToFields` (5.0): levert de rijke **Field-IR** (schema/fields.ts, primo-port) met
+ *   échte repeaters/groepen (recursief), richtext-/image-/link-detectie en optionele per-block
+ *   hints (`defineBlock({ fields })`). De GenericEditor 2.0 rendert deze IR.
+ *
  * Een veld krijgt zijn label uit `.describe("…")` op het schema; zonder beschrijving valt het
  * terug op de veldsleutel. Puur (geen React) — apart testbaar.
  */
 import type { ZodTypeAny } from "zod";
+import type { Field } from "../../schema/fields";
 export interface SchemaField {
     key: string;
     kind: "number" | "boolean" | "string" | "enum" | "json";
@@ -25,3 +32,14 @@ export interface SchemaField {
  * aanbieden; een aanroeper die alleen simpele velden wil, filtert op `kind !== "json"`.
  */
 export declare function introspectObjectSchema(schema: ZodTypeAny): SchemaField[];
+export type { FieldHints } from "../../schema/fields";
+import type { FieldHints } from "../../schema/fields";
+/**
+ * Leidt de rijke Field-IR af uit een Zod-objectschema (5.0). Verschillen met de platte laag:
+ * - `z.array(z.object)` → **repeater** met recursief geïntrospecteerde subvelden;
+ * - genest `z.object` → **group** (of **link** als de vorm exact `{label, href}` is);
+ * - stringvelden `html`/`*Html` → **richtext**, beeld-sleutels → **image**, URL-sleutels → **url**;
+ * - al het overige (records, scalar-arrays, unions) → **json** (laatste redmiddel).
+ * `hints` verfijnt per (dotted) sleutel: type-overrides (date/slider/…) en `showIf`.
+ */
+export declare function introspectToFields(schema: ZodTypeAny, hints?: FieldHints, prefix?: string): Field[];