@xiwebdesign/xicms-core 7.30.0 → 8.15.0

package/dist/demo/demoStore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/demo/demoStore.ts"],"sourcesContent":["\"use client\";\n\nimport type { Page } from \"../schema/pages\";\nimport type { MediaItem, NewsArticle } from \"../content/types\";\nimport type { FormDefinition } from \"../schema/forms\";\n\n/**\n * Lokale opslag voor de DEMO-bewerkmodus (`config.demoEditing`). Alle \"bewerkingen\" van een\n * bezoeker (teksten, blokken, publiceren) blijven UITSLUITEND in de browser van die bezoeker\n * (localStorage) — er gaat niets naar Firebase. Zo kunnen eindgebruikers het beheer veilig\n * uitproberen zonder dat er echt iets verandert. Een \"Reset\" wist alles weer.\n *\n * Bewust GEEN onderdeel van de echte (Firebase-)opslag: pagesClient en AuthProvider takken hier\n * alleen naartoe als de demo-modus actief is, en die staat alleen aan op een demo-site.\n */\n\nconst DRAFT_PREFIX = \"xicms-demo-draft\";\nconst MEDIA_PREFIX = \"xicms-demo-media\";\nconst SESSION_KEY = \"xicms-demo-session\";\nexport const DEMO_EVENT = \"xicms:demo\";\n\nlet active = false;\nconst seeds = new Map<string, Page>();\nconst newsSeeds = new Map<string, NewsArticle[]>();\nconst formSeeds = new Map<string, FormDefinition>();\nconst mediaSeeds = new Map<string, MediaItem[]>();\n\n/** Zet de demo-bewerkmodus aan/uit (door de provider, op basis van config.demoEditing). */\nexport function setDemoActive(on: boolean) {\n  active = on;\n}\nexport function isDemoActive(): boolean {\n  return active;\n}\n\n/** Stabiel, deterministisch draft-id per pad, zodat pagina + editor naar dezelfde opslag wijzen. */\nexport function demoIdForPath(path: string): string {\n  return `demo:${path || \"/\"}`;\n}\n\n/** De omkering: uit een demo-draft-id het pad terug. `null` voor een niet-demo-id. */\nexport function demoPathForId(id: string): string | null {\n  return id.startsWith(\"demo:\") ? id.slice(\"demo:\".length) : null;\n}\n\nfunction emit() {\n  if (typeof window !== \"undefined\") window.dispatchEvent(new Event(DEMO_EVENT));\n}\n\n// ── Pseudo-login (sessie) ──────────────────────────────────────────────────\n// In sessionStorage: verdwijnt als het tabblad sluit — benadrukt het tijdelijke karakter.\nexport function isDemoLoggedIn(): boolean {\n  if (typeof window === \"undefined\") return false;\n  try {\n    return window.sessionStorage.getItem(SESSION_KEY) === \"1\";\n  } catch {\n    return false;\n  }\n}\nexport function setDemoLoggedIn(on: boolean) {\n  if (typeof window === \"undefined\") return;\n  try {\n    if (on) window.sessionStorage.setItem(SESSION_KEY, \"1\");\n    else window.sessionStorage.removeItem(SESSION_KEY);\n  } catch {\n    /* opslag geweigerd — login geldt dan alleen voor deze render */\n  }\n  emit();\n}\n\n// ── Seed-pagina's (de oorspronkelijke inhoud waar een bezoeker op verder bewerkt) ──\n/**\n * De EERSTE registratie wint. Een seed is per definitie het origineel, en het origineel verandert\n * niet tijdens een sessie. Zonder deze regel vervuilde de seed zichzelf: een demo-route registreert\n * bij module-load de zuivere pagina, maar `PublishedPage` registreert in een effect de pagina die\n * hij TOONT — en dat is in de demo seed+draft. De bewerkte tekst werd zo het \"origineel\", waarmee\n * de wijzigingen-teller schoon leek en \"blok verwerpen\" terugzette naar precies de tekst die je\n * wilde verwerpen. (De seeds leven in het geheugen van één pageload, dus \"eerste\" is per bezoek.)\n */\nexport function registerSeed(siteId: string, path: string, page: Page) {\n  const key = `${siteId}::${path}`;\n  if (!seeds.has(key)) seeds.set(key, page);\n}\nexport function getSeed(siteId: string, path: string): Page | null {\n  return seeds.get(`${siteId}::${path}`) ?? null;\n}\n\n// ── Demo-nieuws (zodat nieuws-blokken/widgets ook in de demo gevuld zijn, zonder Firebase) ──\nexport function registerDemoNews(siteId: string, articles: NewsArticle[]) {\n  newsSeeds.set(siteId, articles);\n}\nexport function getDemoNews(siteId: string): NewsArticle[] {\n  return newsSeeds.get(siteId) ?? [];\n}\n\n// ── Demo-formulieren (zodat het form-blok werkt zonder Firebase; inzenden doet lokaal niets) ──\nexport function registerDemoForm(siteId: string, formId: string, def: FormDefinition) {\n  formSeeds.set(`${siteId}::${formId}`, def);\n}\nexport function getDemoForm(siteId: string, formId: string): FormDefinition | null {\n  return formSeeds.get(`${siteId}::${formId}`) ?? null;\n}\n\n// ── Demo-media (bibliotheek + upload zonder Firebase) ─────────────────────\n// Geseede items (bv. de foto's van de demo-site zelf) + lokale \"uploads\" als data-URL in\n// localStorage. Zo werken kiezen, uploaden en vervangen in de demo écht — alles blijft lokaal.\n\n/** Seed de mediabibliotheek van de demo (curated set; alt = zoektekst in de kiezer). */\nexport function registerDemoMedia(siteId: string, items: Array<Pick<MediaItem, \"url\" | \"name\" | \"alt\">>) {\n  mediaSeeds.set(\n    siteId,\n    items.map((m, i) => ({ id: `demo-seed-${i}`, url: m.url, path: \"demo\", name: m.name, alt: m.alt ?? \"\" })),\n  );\n}\n\nfunction mediaKey(siteId: string) {\n  return `${MEDIA_PREFIX}:${siteId}`;\n}\n\nfunction loadLocalDemoMedia(siteId: string): MediaItem[] {\n  if (typeof window === \"undefined\") return [];\n  try {\n    const raw = window.localStorage.getItem(mediaKey(siteId));\n    return raw ? (JSON.parse(raw) as MediaItem[]) : [];\n  } catch {\n    return [];\n  }\n}\n\n/** Bibliotheek in demo-modus: lokale uploads (nieuwste eerst) + de geseede set. */\nexport function listDemoMedia(siteId: string): MediaItem[] {\n  return [...loadLocalDemoMedia(siteId), ...(mediaSeeds.get(siteId) ?? [])];\n}\n\n/**\n * \"Upload\" in demo-modus: bewaar de (gecomprimeerde) afbeelding als data-URL in localStorage.\n * localStorage is beperkt (~5 MB) — we houden maximaal 10 lokale uploads aan en laten bij een\n * volle opslag het item alleen voor deze sessie in het geheugen bestaan (zelfde vangnet als drafts).\n */\nconst memoryOnlyMedia = new Map<string, MediaItem[]>();\nexport function addDemoMedia(siteId: string, item: { url: string; name: string }): MediaItem {\n  const media: MediaItem = {\n    id: `demo-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,\n    url: item.url,\n    path: \"demo\",\n    name: item.name,\n    alt: \"\",\n  };\n  const next = [media, ...loadLocalDemoMedia(siteId)].slice(0, 10);\n  try {\n    window.localStorage.setItem(mediaKey(siteId), JSON.stringify(next));\n  } catch {\n    memoryOnlyMedia.set(siteId, [media, ...(memoryOnlyMedia.get(siteId) ?? [])]);\n  }\n  emit();\n  return media;\n}\n\n/** Inclusief geheugen-only items (opslag-vol-vangnet) — gebruikt door de kiezer. */\nexport function listDemoMediaAll(siteId: string): MediaItem[] {\n  return [...(memoryOnlyMedia.get(siteId) ?? []), ...listDemoMedia(siteId)];\n}\n\n// ── Lokale drafts (de bewerkingen) ─────────────────────────────────────────\nfunction draftKey(siteId: string, id: string) {\n  return `${DRAFT_PREFIX}:${siteId}:${id}`;\n}\n\nexport function loadDemoDraft(siteId: string, id: string): Partial<Page> | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = window.localStorage.getItem(draftKey(siteId, id));\n    return raw ? (JSON.parse(raw) as Partial<Page>) : null;\n  } catch {\n    return null;\n  }\n}\n\nexport function saveDemoDraft(siteId: string, id: string, patch: Partial<Page>) {\n  if (typeof window === \"undefined\") return;\n  try {\n    const current = loadDemoDraft(siteId, id) ?? {};\n    window.localStorage.setItem(draftKey(siteId, id), JSON.stringify({ ...current, ...patch }));\n  } catch {\n    /* opslag vol/geweigerd — bewerking geldt dan alleen voor deze sessie in het geheugen */\n  }\n  emit();\n}\n\n/** Verwijdert alle lokale demo-bewerkingen + login voor deze site (de \"Reset\"-knop). */\nexport function resetDemo(siteId: string) {\n  if (typeof window === \"undefined\") return;\n  try {\n    const toRemove: string[] = [];\n    for (let i = 0; i < window.localStorage.length; i++) {\n      const k = window.localStorage.key(i);\n      if (k && k.startsWith(`${DRAFT_PREFIX}:${siteId}:`)) toRemove.push(k);\n    }\n    toRemove.forEach((k) => window.localStorage.removeItem(k));\n    window.localStorage.removeItem(mediaKey(siteId));\n    memoryOnlyMedia.delete(siteId);\n    window.sessionStorage.removeItem(SESSION_KEY);\n  } catch {\n    /* negeren */\n  }\n  emit();\n}\n\n/**\n * De effectieve demo-pagina = seed met lokale bewerkingen eroverheen. Gebruikt door de demo-pagina\n * om de wijzigingen van de bezoeker direct te tonen (ook na sluiten van de editor).\n */\nexport function resolveDemoPage(siteId: string, path: string): Page | null {\n  const seed = getSeed(siteId, path);\n  if (!seed) return null;\n  const draft = loadDemoDraft(siteId, demoIdForPath(path));\n  return draft ? ({ ...seed, ...draft } as Page) : seed;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/demo/demoStore.ts"],"sourcesContent":["\"use client\";\n\nimport type { Page } from \"../schema/pages\";\nimport type { MediaItem, NewsArticle } from \"../content/types\";\nimport type { FormDefinition } from \"../schema/forms\";\n\n/**\n * Lokale opslag voor de DEMO-bewerkmodus (`config.demoEditing`). Alle \"bewerkingen\" van een\n * bezoeker (teksten, blokken, publiceren) blijven UITSLUITEND in de browser van die bezoeker\n * (localStorage) — er gaat niets naar Firebase. Zo kunnen eindgebruikers het beheer veilig\n * uitproberen zonder dat er echt iets verandert. Een \"Reset\" wist alles weer.\n *\n * Bewust GEEN onderdeel van de echte (Firebase-)opslag: pagesClient en AuthProvider takken hier\n * alleen naartoe als de demo-modus actief is, en die staat alleen aan op een demo-site.\n */\n\nconst DRAFT_PREFIX = \"xicms-demo-draft\";\nconst MEDIA_PREFIX = \"xicms-demo-media\";\nconst SESSION_KEY = \"xicms-demo-session\";\nexport const DEMO_EVENT = \"xicms:demo\";\n\nlet active = false;\nconst seeds = new Map<string, Page>();\nconst newsSeeds = new Map<string, NewsArticle[]>();\nconst formSeeds = new Map<string, FormDefinition>();\nconst mediaSeeds = new Map<string, MediaItem[]>();\n\n/** Zet de demo-bewerkmodus aan/uit (door de provider, op basis van config.demoEditing). */\nexport function setDemoActive(on: boolean) {\n  active = on;\n}\nexport function isDemoActive(): boolean {\n  return active;\n}\n\n/** Stabiel, deterministisch draft-id per pad, zodat pagina + editor naar dezelfde opslag wijzen. */\nexport function demoIdForPath(path: string): string {\n  return `demo:${path || \"/\"}`;\n}\n\n/** De omkering: uit een demo-draft-id het pad terug. `null` voor een niet-demo-id. */\nexport function demoPathForId(id: string): string | null {\n  return id.startsWith(\"demo:\") ? id.slice(\"demo:\".length) : null;\n}\n\nfunction emit() {\n  if (typeof window !== \"undefined\") window.dispatchEvent(new Event(DEMO_EVENT));\n}\n\n// ── Pseudo-login (sessie) ──────────────────────────────────────────────────\n// In sessionStorage: verdwijnt als het tabblad sluit — benadrukt het tijdelijke karakter.\nexport function isDemoLoggedIn(): boolean {\n  if (typeof window === \"undefined\") return false;\n  try {\n    return window.sessionStorage.getItem(SESSION_KEY) === \"1\";\n  } catch {\n    return false;\n  }\n}\nexport function setDemoLoggedIn(on: boolean) {\n  if (typeof window === \"undefined\") return;\n  try {\n    if (on) window.sessionStorage.setItem(SESSION_KEY, \"1\");\n    else window.sessionStorage.removeItem(SESSION_KEY);\n  } catch {\n    /* opslag geweigerd — login geldt dan alleen voor deze render */\n  }\n  emit();\n}\n\n// ── Seed-pagina's (de oorspronkelijke inhoud waar een bezoeker op verder bewerkt) ──\n/**\n * De EERSTE registratie wint. Een seed is per definitie het origineel, en het origineel verandert\n * niet tijdens een sessie. Zonder deze regel vervuilde de seed zichzelf: een demo-route registreert\n * bij module-load de zuivere pagina, maar `PublishedPage` registreert in een effect de pagina die\n * hij TOONT — en dat is in de demo seed+draft. De bewerkte tekst werd zo het \"origineel\", waarmee\n * de wijzigingen-teller schoon leek en \"blok verwerpen\" terugzette naar precies de tekst die je\n * wilde verwerpen. (De seeds leven in het geheugen van één pageload, dus \"eerste\" is per bezoek.)\n */\nexport function registerSeed(siteId: string, path: string, page: Page) {\n  const key = `${siteId}::${path}`;\n  if (!seeds.has(key)) seeds.set(key, page);\n}\nexport function getSeed(siteId: string, path: string): Page | null {\n  return seeds.get(`${siteId}::${path}`) ?? null;\n}\n\n// ── Demo-nieuws (zodat nieuws-blokken/widgets ook in de demo gevuld zijn, zonder Firebase) ──\nexport function registerDemoNews(siteId: string, articles: NewsArticle[]) {\n  newsSeeds.set(siteId, articles);\n}\nexport function getDemoNews(siteId: string): NewsArticle[] {\n  return newsSeeds.get(siteId) ?? [];\n}\n\n// ── Demo-formulieren (zodat het form-blok werkt zonder Firebase; inzenden doet lokaal niets) ──\nexport function registerDemoForm(siteId: string, formId: string, def: FormDefinition) {\n  formSeeds.set(`${siteId}::${formId}`, def);\n}\nexport function getDemoForm(siteId: string, formId: string): FormDefinition | null {\n  return formSeeds.get(`${siteId}::${formId}`) ?? null;\n}\n\n// ── Demo-media (bibliotheek + upload zonder Firebase) ─────────────────────\n// Geseede items (bv. de foto's van de demo-site zelf) + lokale \"uploads\" als data-URL in\n// localStorage. Zo werken kiezen, uploaden en vervangen in de demo écht — alles blijft lokaal.\n\n/** Seed de mediabibliotheek van de demo (curated set; alt = zoektekst in de kiezer). */\nexport function registerDemoMedia(siteId: string, items: Array<Pick<MediaItem, \"url\" | \"name\" | \"alt\">>) {\n  mediaSeeds.set(\n    siteId,\n    items.map((m, i) => ({ id: `demo-seed-${i}`, url: m.url, path: \"demo\", name: m.name, alt: m.alt ?? \"\" })),\n  );\n}\n\nfunction mediaKey(siteId: string) {\n  return `${MEDIA_PREFIX}:${siteId}`;\n}\n\nfunction loadLocalDemoMedia(siteId: string): MediaItem[] {\n  if (typeof window === \"undefined\") return [];\n  try {\n    const raw = window.localStorage.getItem(mediaKey(siteId));\n    return raw ? (JSON.parse(raw) as MediaItem[]) : [];\n  } catch {\n    return [];\n  }\n}\n\n/** Bibliotheek in demo-modus: lokale uploads (nieuwste eerst) + de geseede set. */\nexport function listDemoMedia(siteId: string): MediaItem[] {\n  return [...loadLocalDemoMedia(siteId), ...(mediaSeeds.get(siteId) ?? [])];\n}\n\n/**\n * \"Upload\" in demo-modus: bewaar de (gecomprimeerde) afbeelding als data-URL in localStorage.\n * localStorage is beperkt (~5 MB) — we houden maximaal 10 lokale uploads aan en laten bij een\n * volle opslag het item alleen voor deze sessie in het geheugen bestaan (zelfde vangnet als drafts).\n */\nconst memoryOnlyMedia = new Map<string, MediaItem[]>();\nexport function addDemoMedia(siteId: string, item: { url: string; name: string }): MediaItem {\n  const media: MediaItem = {\n    id: `demo-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,\n    url: item.url,\n    path: \"demo\",\n    name: item.name,\n    alt: \"\",\n  };\n  const next = [media, ...loadLocalDemoMedia(siteId)].slice(0, 10);\n  try {\n    window.localStorage.setItem(mediaKey(siteId), JSON.stringify(next));\n  } catch {\n    memoryOnlyMedia.set(siteId, [media, ...(memoryOnlyMedia.get(siteId) ?? [])]);\n  }\n  emit();\n  return media;\n}\n\n/**\n * Verwijderen in demo-modus (8.5): lokale uploads echt weg; een geseed item wordt alleen voor\n * deze sessie verborgen (de seed komt bij herladen terug, zoals de rest van de demo).\n */\nexport function removeDemoMedia(siteId: string, id: string) {\n  const lokaal = loadLocalDemoMedia(siteId);\n  if (lokaal.some((m) => m.id === id)) {\n    try {\n      window.localStorage.setItem(mediaKey(siteId), JSON.stringify(lokaal.filter((m) => m.id !== id)));\n    } catch {\n      /* opslag niet beschikbaar */\n    }\n  }\n  memoryOnlyMedia.set(siteId, (memoryOnlyMedia.get(siteId) ?? []).filter((m) => m.id !== id));\n  mediaSeeds.set(siteId, (mediaSeeds.get(siteId) ?? []).filter((m) => m.id !== id));\n  emit();\n}\n\n/** Inclusief geheugen-only items (opslag-vol-vangnet) — gebruikt door de kiezer. */\nexport function listDemoMediaAll(siteId: string): MediaItem[] {\n  return [...(memoryOnlyMedia.get(siteId) ?? []), ...listDemoMedia(siteId)];\n}\n\n// ── Lokale drafts (de bewerkingen) ─────────────────────────────────────────\nfunction draftKey(siteId: string, id: string) {\n  return `${DRAFT_PREFIX}:${siteId}:${id}`;\n}\n\nexport function loadDemoDraft(siteId: string, id: string): Partial<Page> | null {\n  if (typeof window === \"undefined\") return null;\n  try {\n    const raw = window.localStorage.getItem(draftKey(siteId, id));\n    return raw ? (JSON.parse(raw) as Partial<Page>) : null;\n  } catch {\n    return null;\n  }\n}\n\nexport function saveDemoDraft(siteId: string, id: string, patch: Partial<Page>) {\n  if (typeof window === \"undefined\") return;\n  try {\n    const current = loadDemoDraft(siteId, id) ?? {};\n    window.localStorage.setItem(draftKey(siteId, id), JSON.stringify({ ...current, ...patch }));\n  } catch {\n    /* opslag vol/geweigerd — bewerking geldt dan alleen voor deze sessie in het geheugen */\n  }\n  emit();\n}\n\n/**\n * Alle pagina's die de demo kent (8.6): geseede pagina's plus lokaal aangemaakte/bewerkte, met de\n * lokale bewerking eroverheen. Voor het paginaoverzicht in het beheer — dat wachtte eerst op een\n * rechtenfout van de echte database en toonde dan niets.\n */\nexport function listDemoPages(siteId: string): Array<Page & { id: string }> {\n  const paden = new Set<string>();\n  for (const k of seeds.keys()) if (k.startsWith(`${siteId}::`)) paden.add(k.slice(siteId.length + 2));\n  if (typeof window !== \"undefined\") {\n    try {\n      const prefix = `${DRAFT_PREFIX}:${siteId}:`;\n      for (let i = 0; i < window.localStorage.length; i++) {\n        const k = window.localStorage.key(i);\n        const pad = k?.startsWith(prefix) ? demoPathForId(k.slice(prefix.length)) : null;\n        if (pad) paden.add(pad);\n      }\n    } catch {\n      /* opslag geweigerd */\n    }\n  }\n  const lijst: Array<Page & { id: string }> = [];\n  for (const pad of paden) {\n    const id = demoIdForPath(pad);\n    const page = (resolveDemoPage(siteId, pad) ?? loadDemoDraft(siteId, id)) as Page | null;\n    if (page) lijst.push({ ...page, path: page.path ?? pad, id });\n  }\n  return lijst.sort((a, b) => (a.path === \"/\" ? -1 : b.path === \"/\" ? 1 : (a.order ?? 0) - (b.order ?? 0)));\n}\n\n/** Verwijdert alle lokale demo-bewerkingen + login voor deze site (de \"Reset\"-knop). */\nexport function resetDemo(siteId: string) {\n  if (typeof window === \"undefined\") return;\n  try {\n    const toRemove: string[] = [];\n    for (let i = 0; i < window.localStorage.length; i++) {\n      const k = window.localStorage.key(i);\n      if (k && k.startsWith(`${DRAFT_PREFIX}:${siteId}:`)) toRemove.push(k);\n    }\n    toRemove.forEach((k) => window.localStorage.removeItem(k));\n    window.localStorage.removeItem(mediaKey(siteId));\n    memoryOnlyMedia.delete(siteId);\n    window.sessionStorage.removeItem(SESSION_KEY);\n  } catch {\n    /* negeren */\n  }\n  emit();\n}\n\n/**\n * De effectieve demo-pagina = seed met lokale bewerkingen eroverheen. Gebruikt door de demo-pagina\n * om de wijzigingen van de bezoeker direct te tonen (ook na sluiten van de editor).\n */\nexport function resolveDemoPage(siteId: string, path: string): Page | null {\n  const seed = getSeed(siteId, path);\n  if (!seed) return null;\n  const draft = loadDemoDraft(siteId, demoIdForPath(path));\n  return draft ? ({ ...seed, ...draft } as Page) : seed;\n}\n"],"mappings":"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","names":[]}

package/dist/editor/EditorProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 let visualEditorModule = null;
 const OPSLAGSLEUTEL = "xicms-bewerkmodus";
@@ -26,6 +26,8 @@ const Ctx = createContext({
 function EditorProvider({ children }) {
   const [modus, setModusState] = useState("live");
   const [VisualEditor, setVisualEditor] = useState(() => visualEditorModule);
+  const [laadFout, setLaadFout] = useState(false);
+  const [laadPoging, setLaadPoging] = useState(0);
   const [draft, setDraft] = useState(null);
   const [publishedOverride, setPublishedOverride] = useState(null);
   const [fotoVervanger, setFotoVervanger] = useState(null);
@@ -41,14 +43,18 @@ function EditorProvider({ children }) {
   useEffect(() => {
     if (modus !== "bewerken" || VisualEditor) return;
     let losgekoppeld = false;
-    void import("../admin/visual/VisualEditor.js").then((m) => {
+    setLaadFout(false);
+    import("../admin/visual/VisualEditor.js").then((m) => {
       visualEditorModule = m.default;
       if (!losgekoppeld) setVisualEditor(() => m.default);
+    }).catch((e) => {
+      console.error("[xicms] editor laden mislukt:", e);
+      if (!losgekoppeld) setLaadFout(true);
     });
     return () => {
       losgekoppeld = true;
     };
-  }, [modus, VisualEditor]);
+  }, [modus, VisualEditor, laadPoging]);
   const zetModus = useCallback((next) => {
     setModusState(next);
     try {
@@ -80,7 +86,12 @@ function EditorProvider({ children }) {
   }), [modus, draft, zetModus, publishDraft, publishedOverride, bevestigPublicatie, fotoVervanger, zetFotoVervanger]);
   return /* @__PURE__ */ jsxs(Ctx.Provider, { value, children: [
     children,
-    modus === "bewerken" && VisualEditor && /* @__PURE__ */ jsx(VisualEditor, { onClose: () => zetModus("live") })
+    modus === "bewerken" && VisualEditor && /* @__PURE__ */ jsx(VisualEditor, { onClose: () => zetModus("live") }),
+    modus === "bewerken" && !VisualEditor && /* @__PURE__ */ jsx("div", { className: "xicms-editor-laden", role: laadFout ? "alert" : "status", "aria-live": "polite", "data-xicms-tooling": "", children: laadFout ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { children: "De editor kon niet geladen worden." }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setLaadPoging((n) => n + 1), children: "Opnieuw proberen" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => zetModus("live"), children: "Sluiten" })
+    ] }) : /* @__PURE__ */ jsx("span", { children: "Editor laden\u2026" }) })
   ] });
 }
 function useEditor() {

package/dist/editor/EditorProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/editor/EditorProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState, type ComponentType, type ReactNode } from \"react\";\n// Het bloktype van de PAGINA zelf, zodat wat hier langskomt per definitie past in wat\n// `PublishedPage` rendert. Een eigen definitie zou hier stil uit de pas kunnen lopen.\nimport type { Page } from \"../schema/pages\";\n\ntype PaginaBlokken = Page[\"blocks\"];\n\n/**\n * Lichte runtime-context voor het inline (visuele) bewerken op de live pagina. De echte editor\n * (TipTap/Radix, zwaar) wordt PAS geladen als een editor hem opent — publieke bezoekers downloaden\n * hem nooit. De editor leeft in de admin-entry; we laden 'm via een dynamische import (eigen chunk).\n *\n * ── WAAROM DE BLOKKEN HIER LANGSKOMEN ─────────────────────────────────────────────────────\n *\n * De editor tekende de pagina vroeger zélf, in een eigen canvas binnen een schermvullende overlay.\n * Je klikte \"Pagina bewerken\" en je site verdween achter een donker paneel met een nabootsing erin.\n * Dat voelde niet als je site bewerken maar als een ander programma openen.\n *\n * Nu blijft de PAGINA de pagina en wordt alleen de DATA vervangen: de editor laadt de werkversie en\n * zet die hier neer, waarna `PublishedPage` de werkversie rendert in plaats van de gepubliceerde\n * blokken. Dezelfde componenten, dezelfde huisstijl, dezelfde layout — alleen andere inhoud.\n *\n * Die omweg via de data is wezenlijk, geen implementatiedetail. Alleen potloodjes over de live\n * pagina leggen zou betekenen dat je de WERKVERSIE bewerkt terwijl je de GEPUBLICEERDE tekst ziet.\n * Zodra je iets wijzigt en nog niet publiceert, lopen die twee uit elkaar en bewerk je iets anders\n * dan er staat. Wat je ziet moet zijn wat je bewerkt.\n *\n * `editPath` hoort erbij: een site kan meerdere gerenderde pagina's in beeld hebben (een\n * ingekaderde pagina, een preview). Alleen het pad dat de editor open heeft mag zijn blokken\n * verwisselen.\n *\n * ── WAAROM DE MODUS EEN REFRESH MOET OVERLEVEN (7.8) ──────────────────────────────────────\n *\n * Bewerken was een toestand die alleen in het geheugen van één render-boom bestond. Een per ongeluk\n * ingedrukte F5 — of een klik op een link in je eigen site, want dat is een volledige navigatie —\n * zette je terug op de live site. Je wijzigingen waren niet weg (die staan in de werkversie in\n * Firestore), maar je zág ze niet meer, en dat is niet te onderscheiden van kwijt zijn.\n *\n * Daarom staat de modus in `sessionStorage`: hij overleeft een refresh en het navigeren door de\n * site, en verdwijnt vanzelf zodra het tabblad dichtgaat. Bewust niet `localStorage` — dan zit je\n * morgen in een nieuw venster nog steeds in de bewerkmodus zonder dat je erom vroeg.\n */\n/**\n * BEWUST GEEN `lazy()` + `<Suspense>`. De chunk-splitsing is dezelfde (de dynamische import\n * hieronder maakt zijn eigen chunk), maar Suspense heeft een gedraging die ons hier de kop kostte:\n * als de boom suspendt, koppelt React de al-gemonteerde children tijdelijk los en weer vast\n * (disconnect/reconnect van de passive effects). In dat her-aansluitpad draaide Astryx'\n * `useScrollLock`-effect dubbel zonder tussenliggende cleanup, waardoor zijn module-brede teller\n * nooit meer op nul kwam — en een teller boven nul betekent: `body { position: fixed }`. De hele\n * site stond stil: niet meer scrollen, dus ook geen bewerkknoppen bij blokken onder de vouw.\n * Zelf laden in een effect en pas renderen als de module er is, heeft dat Suspense-pad niet.\n */\ntype VisualEditorComponent = ComponentType<{ onClose: () => void }>;\nlet visualEditorModule: VisualEditorComponent | null = null;\n\n/** \"live\" = precies wat een bezoeker ziet. \"bewerken\" = dezelfde pagina, met werkversie en gereedschap. */\nexport type Bewerkmodus = \"live\" | \"bewerken\";\n\nconst OPSLAGSLEUTEL = \"xicms-bewerkmodus\";\n\ninterface EditorCtx {\n  modus: Bewerkmodus;\n  /** Blijft bestaan naast `modus` omdat het door de hele codebase heen gelezen wordt. */\n  open: boolean;\n  zetModus: (modus: Bewerkmodus) => void;\n  openEditor: () => void;\n  closeEditor: () => void;\n  /** De blokken van de werkversie die de pagina moet tonen; `null` = toon gewoon het gepubliceerde. */\n  draftBlocks: PaginaBlokken | null;\n  /** Het pad waarvoor `draftBlocks` geldt. */\n  editPath: string | null;\n  /** Door de editor aangeroepen zodra de werkversie laadt of wijzigt. */\n  publishDraft: (path: string, blocks: PaginaBlokken | null) => void;\n  /**\n   * Net gepubliceerde blokken voor `path` — `PublishedPage` gebruikt dit als het TERUGVALT op de\n   * `page`-prop (bewerkmodus dicht/nog niet aan), zodat \"Live site\" bekijken vlak na publiceren\n   * niet de VEROUDERDE server-props laat zien (die zijn maar één keer geladen, bij het openen van\n   * de pagina, en publiceren ververst ze niet). Zie `bevestigPublicatie`.\n   */\n  publishedOverride: { path: string; blocks: PaginaBlokken } | null;\n  /** Door de editor aangeroepen direct na een geslaagde `publishPage`-call. */\n  bevestigPublicatie: (path: string, blocks: PaginaBlokken) => void;\n  /**\n   * \"Vervang de foto in veld X van blok Y\" — gezet door de VisualEditor zolang hij open is.\n   *\n   * De 📷-knopjes op de foto's zitten in de RENDER van de pagina (Img), de mediakiezer zit in de\n   * EDITOR. Die twee delen geen boom meer sinds het canvas weg is; dit is de brug. `null` buiten\n   * de bewerkmodus, en dan tekent Img geen knopjes.\n   */\n  fotoVervanger: ((field: string, blockKey?: string) => void) | null;\n  zetFotoVervanger: (fn: ((field: string, blockKey?: string) => void) | null) => void;\n}\n\nconst Ctx = createContext<EditorCtx>({\n  modus: \"live\",\n  open: false,\n  zetModus: () => {},\n  openEditor: () => {},\n  closeEditor: () => {},\n  draftBlocks: null,\n  editPath: null,\n  publishDraft: () => {},\n  publishedOverride: null,\n  bevestigPublicatie: () => {},\n  fotoVervanger: null,\n  zetFotoVervanger: () => {},\n});\n\nexport function EditorProvider({ children }: { children: ReactNode }) {\n  /**\n   * Start altijd op \"live\", ook als de opslag iets anders zegt.\n   *\n   * De server rendert deze boom zonder toegang tot `sessionStorage`. Zou de eerste client-render\n   * meteen \"bewerken\" teruggeven, dan wijkt hij af van de HTML die er al staat en gooit React de\n   * boom weg (hydration mismatch). Vandaar: eerst hetzelfde als de server, daarna in een effect\n   * bijstellen. Eén frame \"live\" is niet zichtbaar; een kapotte hydration wel.\n   */\n  const [modus, setModusState] = useState<Bewerkmodus>(\"live\");\n  // De editor-component zodra zijn chunk binnen is; module-cache zodat een tweede keer openen\n  // (of een andere pagina in dezelfde sessie) niet opnieuw op het netwerk wacht.\n  const [VisualEditor, setVisualEditor] = useState<VisualEditorComponent | null>(() => visualEditorModule);\n  const [draft, setDraft] = useState<{ path: string; blocks: PaginaBlokken } | null>(null);\n  const [publishedOverride, setPublishedOverride] = useState<{ path: string; blocks: PaginaBlokken } | null>(null);\n  const [fotoVervanger, setFotoVervanger] = useState<((field: string, blockKey?: string) => void) | null>(null);\n  // In state gewikkeld: een functie rechtstreeks aan een setState geven zou hem AANROEPEN\n  // (functionele updater) in plaats van opslaan.\n  const zetFotoVervanger = useCallback((fn: ((field: string, blockKey?: string) => void) | null) => {\n    setFotoVervanger(() => fn);\n  }, []);\n\n  useEffect(() => {\n    try {\n      if (sessionStorage.getItem(OPSLAGSLEUTEL) === \"bewerken\") setModusState(\"bewerken\");\n    } catch {\n      /* privémodus of geblokkeerde opslag: dan gewoon op de live site beginnen */\n    }\n  }, []);\n\n  // De editor-chunk laden zodra de bewerkmodus aangaat (zie het commentaar bij\n  // `visualEditorModule` waarom dit met de hand gebeurt en niet via lazy/Suspense).\n  useEffect(() => {\n    if (modus !== \"bewerken\" || VisualEditor) return;\n    let losgekoppeld = false;\n    void import(\"../admin/visual/VisualEditor\").then((m) => {\n      visualEditorModule = m.default;\n      if (!losgekoppeld) setVisualEditor(() => m.default);\n    });\n    return () => {\n      losgekoppeld = true;\n    };\n  }, [modus, VisualEditor]);\n\n  const zetModus = useCallback((next: Bewerkmodus) => {\n    setModusState(next);\n    try {\n      if (next === \"bewerken\") sessionStorage.setItem(OPSLAGSLEUTEL, \"bewerken\");\n      else sessionStorage.removeItem(OPSLAGSLEUTEL);\n    } catch {\n      /* de modus werkt ook zonder opslag; alleen een refresh valt dan terug op live */\n    }\n    // De werkversie hoort bij de bewerkmodus. Blijft hij staan na het sluiten, dan ziet de bezoeker\n    // ongepubliceerde tekst terwijl het gereedschap weg is — een pagina die iets toont wat niet\n    // live is. De werkversie zelf blijft in Firestore staan; alleen deze weergave stopt.\n    if (next === \"live\") setDraft(null);\n  }, []);\n\n  const publishDraft = useCallback((path: string, blocks: PaginaBlokken | null) => {\n    setDraft(blocks ? { path, blocks } : null);\n  }, []);\n\n  const bevestigPublicatie = useCallback((path: string, blocks: PaginaBlokken) => {\n    setPublishedOverride({ path, blocks });\n  }, []);\n\n  const value = useMemo<EditorCtx>(() => ({\n    modus,\n    open: modus === \"bewerken\",\n    zetModus,\n    openEditor: () => zetModus(\"bewerken\"),\n    closeEditor: () => zetModus(\"live\"),\n    draftBlocks: draft?.blocks ?? null,\n    editPath: draft?.path ?? null,\n    publishDraft,\n    publishedOverride,\n    bevestigPublicatie,\n    fotoVervanger,\n    zetFotoVervanger,\n  }), [modus, draft, zetModus, publishDraft, publishedOverride, bevestigPublicatie, fotoVervanger, zetFotoVervanger]);\n\n  return (\n    <Ctx.Provider value={value}>\n      {children}\n      {modus === \"bewerken\" && VisualEditor && <VisualEditor onClose={() => zetModus(\"live\")} />}\n    </Ctx.Provider>\n  );\n}\n\n/** Open/sluit de visuele pagina-editor. */\nexport function useEditor(): EditorCtx {\n  return useContext(Ctx);\n}\n"],"mappings":";AAgMI,SAE2C,KAF3C;AA9LJ,SAAS,eAAe,aAAa,YAAY,WAAW,SAAS,gBAAoD;AAqDzH,IAAI,qBAAmD;AAKvD,MAAM,gBAAgB;AAmCtB,MAAM,MAAM,cAAyB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,mBAAmB;AAAA,EACnB,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,eAAe;AAAA,EACf,kBAAkB,MAAM;AAAA,EAAC;AAC3B,CAAC;AAEM,SAAS,eAAe,EAAE,SAAS,GAA4B;AASpE,QAAM,CAAC,OAAO,aAAa,IAAI,SAAsB,MAAM;AAG3D,QAAM,CAAC,cAAc,eAAe,IAAI,SAAuC,MAAM,kBAAkB;AACvG,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyD,IAAI;AACvF,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAyD,IAAI;AAC/G,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAA8D,IAAI;AAG5G,QAAM,mBAAmB,YAAY,CAAC,OAA4D;AAChG,qBAAiB,MAAM,EAAE;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI;AACF,UAAI,eAAe,QAAQ,aAAa,MAAM,WAAY,eAAc,UAAU;AAAA,IACpF,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,CAAC;AAIL,YAAU,MAAM;AACd,QAAI,UAAU,cAAc,aAAc;AAC1C,QAAI,eAAe;AACnB,SAAK,OAAO,8BAA8B,EAAE,KAAK,CAAC,MAAM;AACtD,2BAAqB,EAAE;AACvB,UAAI,CAAC,aAAc,iBAAgB,MAAM,EAAE,OAAO;AAAA,IACpD,CAAC;AACD,WAAO,MAAM;AACX,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,OAAO,YAAY,CAAC;AAExB,QAAM,WAAW,YAAY,CAAC,SAAsB;AAClD,kBAAc,IAAI;AAClB,QAAI;AACF,UAAI,SAAS,WAAY,gBAAe,QAAQ,eAAe,UAAU;AAAA,UACpE,gBAAe,WAAW,aAAa;AAAA,IAC9C,QAAQ;AAAA,IAER;AAIA,QAAI,SAAS,OAAQ,UAAS,IAAI;AAAA,EACpC,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,CAAC,MAAc,WAAiC;AAC/E,aAAS,SAAS,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,CAAC,MAAc,WAA0B;AAC9E,yBAAqB,EAAE,MAAM,OAAO,CAAC;AAAA,EACvC,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,QAAmB,OAAO;AAAA,IACtC;AAAA,IACA,MAAM,UAAU;AAAA,IAChB;AAAA,IACA,YAAY,MAAM,SAAS,UAAU;AAAA,IACrC,aAAa,MAAM,SAAS,MAAM;AAAA,IAClC,aAAa,OAAO,UAAU;AAAA,IAC9B,UAAU,OAAO,QAAQ;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,CAAC,OAAO,OAAO,UAAU,cAAc,mBAAmB,oBAAoB,eAAe,gBAAgB,CAAC;AAElH,SACE,qBAAC,IAAI,UAAJ,EAAa,OACX;AAAA;AAAA,IACA,UAAU,cAAc,gBAAgB,oBAAC,gBAAa,SAAS,MAAM,SAAS,MAAM,GAAG;AAAA,KAC1F;AAEJ;AAGO,SAAS,YAAuB;AACrC,SAAO,WAAW,GAAG;AACvB;","names":[]}
+{"version":3,"sources":["../../src/editor/EditorProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState, type ComponentType, type ReactNode } from \"react\";\n// Het bloktype van de PAGINA zelf, zodat wat hier langskomt per definitie past in wat\n// `PublishedPage` rendert. Een eigen definitie zou hier stil uit de pas kunnen lopen.\nimport type { Page } from \"../schema/pages\";\n\ntype PaginaBlokken = Page[\"blocks\"];\n\n/**\n * Lichte runtime-context voor het inline (visuele) bewerken op de live pagina. De echte editor\n * (TipTap/Radix, zwaar) wordt PAS geladen als een editor hem opent — publieke bezoekers downloaden\n * hem nooit. De editor leeft in de admin-entry; we laden 'm via een dynamische import (eigen chunk).\n *\n * ── WAAROM DE BLOKKEN HIER LANGSKOMEN ─────────────────────────────────────────────────────\n *\n * De editor tekende de pagina vroeger zélf, in een eigen canvas binnen een schermvullende overlay.\n * Je klikte \"Pagina bewerken\" en je site verdween achter een donker paneel met een nabootsing erin.\n * Dat voelde niet als je site bewerken maar als een ander programma openen.\n *\n * Nu blijft de PAGINA de pagina en wordt alleen de DATA vervangen: de editor laadt de werkversie en\n * zet die hier neer, waarna `PublishedPage` de werkversie rendert in plaats van de gepubliceerde\n * blokken. Dezelfde componenten, dezelfde huisstijl, dezelfde layout — alleen andere inhoud.\n *\n * Die omweg via de data is wezenlijk, geen implementatiedetail. Alleen potloodjes over de live\n * pagina leggen zou betekenen dat je de WERKVERSIE bewerkt terwijl je de GEPUBLICEERDE tekst ziet.\n * Zodra je iets wijzigt en nog niet publiceert, lopen die twee uit elkaar en bewerk je iets anders\n * dan er staat. Wat je ziet moet zijn wat je bewerkt.\n *\n * `editPath` hoort erbij: een site kan meerdere gerenderde pagina's in beeld hebben (een\n * ingekaderde pagina, een preview). Alleen het pad dat de editor open heeft mag zijn blokken\n * verwisselen.\n *\n * ── WAAROM DE MODUS EEN REFRESH MOET OVERLEVEN (7.8) ──────────────────────────────────────\n *\n * Bewerken was een toestand die alleen in het geheugen van één render-boom bestond. Een per ongeluk\n * ingedrukte F5 — of een klik op een link in je eigen site, want dat is een volledige navigatie —\n * zette je terug op de live site. Je wijzigingen waren niet weg (die staan in de werkversie in\n * Firestore), maar je zág ze niet meer, en dat is niet te onderscheiden van kwijt zijn.\n *\n * Daarom staat de modus in `sessionStorage`: hij overleeft een refresh en het navigeren door de\n * site, en verdwijnt vanzelf zodra het tabblad dichtgaat. Bewust niet `localStorage` — dan zit je\n * morgen in een nieuw venster nog steeds in de bewerkmodus zonder dat je erom vroeg.\n */\n/**\n * BEWUST GEEN `lazy()` + `<Suspense>`. De chunk-splitsing is dezelfde (de dynamische import\n * hieronder maakt zijn eigen chunk), maar Suspense heeft een gedraging die ons hier de kop kostte:\n * als de boom suspendt, koppelt React de al-gemonteerde children tijdelijk los en weer vast\n * (disconnect/reconnect van de passive effects). In dat her-aansluitpad draaide Astryx'\n * `useScrollLock`-effect dubbel zonder tussenliggende cleanup, waardoor zijn module-brede teller\n * nooit meer op nul kwam — en een teller boven nul betekent: `body { position: fixed }`. De hele\n * site stond stil: niet meer scrollen, dus ook geen bewerkknoppen bij blokken onder de vouw.\n * Zelf laden in een effect en pas renderen als de module er is, heeft dat Suspense-pad niet.\n */\ntype VisualEditorComponent = ComponentType<{ onClose: () => void }>;\nlet visualEditorModule: VisualEditorComponent | null = null;\n\n/** \"live\" = precies wat een bezoeker ziet. \"bewerken\" = dezelfde pagina, met werkversie en gereedschap. */\nexport type Bewerkmodus = \"live\" | \"bewerken\";\n\nconst OPSLAGSLEUTEL = \"xicms-bewerkmodus\";\n\ninterface EditorCtx {\n  modus: Bewerkmodus;\n  /** Blijft bestaan naast `modus` omdat het door de hele codebase heen gelezen wordt. */\n  open: boolean;\n  zetModus: (modus: Bewerkmodus) => void;\n  openEditor: () => void;\n  closeEditor: () => void;\n  /** De blokken van de werkversie die de pagina moet tonen; `null` = toon gewoon het gepubliceerde. */\n  draftBlocks: PaginaBlokken | null;\n  /** Het pad waarvoor `draftBlocks` geldt. */\n  editPath: string | null;\n  /** Door de editor aangeroepen zodra de werkversie laadt of wijzigt. */\n  publishDraft: (path: string, blocks: PaginaBlokken | null) => void;\n  /**\n   * Net gepubliceerde blokken voor `path` — `PublishedPage` gebruikt dit als het TERUGVALT op de\n   * `page`-prop (bewerkmodus dicht/nog niet aan), zodat \"Live site\" bekijken vlak na publiceren\n   * niet de VEROUDERDE server-props laat zien (die zijn maar één keer geladen, bij het openen van\n   * de pagina, en publiceren ververst ze niet). Zie `bevestigPublicatie`.\n   */\n  publishedOverride: { path: string; blocks: PaginaBlokken } | null;\n  /** Door de editor aangeroepen direct na een geslaagde `publishPage`-call. */\n  bevestigPublicatie: (path: string, blocks: PaginaBlokken) => void;\n  /**\n   * \"Vervang de foto in veld X van blok Y\" — gezet door de VisualEditor zolang hij open is.\n   *\n   * De 📷-knopjes op de foto's zitten in de RENDER van de pagina (Img), de mediakiezer zit in de\n   * EDITOR. Die twee delen geen boom meer sinds het canvas weg is; dit is de brug. `null` buiten\n   * de bewerkmodus, en dan tekent Img geen knopjes.\n   */\n  fotoVervanger: ((field: string, blockKey?: string) => void) | null;\n  zetFotoVervanger: (fn: ((field: string, blockKey?: string) => void) | null) => void;\n}\n\nconst Ctx = createContext<EditorCtx>({\n  modus: \"live\",\n  open: false,\n  zetModus: () => {},\n  openEditor: () => {},\n  closeEditor: () => {},\n  draftBlocks: null,\n  editPath: null,\n  publishDraft: () => {},\n  publishedOverride: null,\n  bevestigPublicatie: () => {},\n  fotoVervanger: null,\n  zetFotoVervanger: () => {},\n});\n\nexport function EditorProvider({ children }: { children: ReactNode }) {\n  /**\n   * Start altijd op \"live\", ook als de opslag iets anders zegt.\n   *\n   * De server rendert deze boom zonder toegang tot `sessionStorage`. Zou de eerste client-render\n   * meteen \"bewerken\" teruggeven, dan wijkt hij af van de HTML die er al staat en gooit React de\n   * boom weg (hydration mismatch). Vandaar: eerst hetzelfde als de server, daarna in een effect\n   * bijstellen. Eén frame \"live\" is niet zichtbaar; een kapotte hydration wel.\n   */\n  const [modus, setModusState] = useState<Bewerkmodus>(\"live\");\n  // De editor-component zodra zijn chunk binnen is; module-cache zodat een tweede keer openen\n  // (of een andere pagina in dezelfde sessie) niet opnieuw op het netwerk wacht.\n  const [VisualEditor, setVisualEditor] = useState<VisualEditorComponent | null>(() => visualEditorModule);\n  /** 8.2: mislukt het laden van de editor-chunk (slechte verbinding, nieuwe deploy), zeg dat dan. */\n  const [laadFout, setLaadFout] = useState(false);\n  const [laadPoging, setLaadPoging] = useState(0);\n  const [draft, setDraft] = useState<{ path: string; blocks: PaginaBlokken } | null>(null);\n  const [publishedOverride, setPublishedOverride] = useState<{ path: string; blocks: PaginaBlokken } | null>(null);\n  const [fotoVervanger, setFotoVervanger] = useState<((field: string, blockKey?: string) => void) | null>(null);\n  // In state gewikkeld: een functie rechtstreeks aan een setState geven zou hem AANROEPEN\n  // (functionele updater) in plaats van opslaan.\n  const zetFotoVervanger = useCallback((fn: ((field: string, blockKey?: string) => void) | null) => {\n    setFotoVervanger(() => fn);\n  }, []);\n\n  useEffect(() => {\n    try {\n      if (sessionStorage.getItem(OPSLAGSLEUTEL) === \"bewerken\") setModusState(\"bewerken\");\n    } catch {\n      /* privémodus of geblokkeerde opslag: dan gewoon op de live site beginnen */\n    }\n  }, []);\n\n  // De editor-chunk laden zodra de bewerkmodus aangaat (zie het commentaar bij\n  // `visualEditorModule` waarom dit met de hand gebeurt en niet via lazy/Suspense).\n  useEffect(() => {\n    if (modus !== \"bewerken\" || VisualEditor) return;\n    let losgekoppeld = false;\n    setLaadFout(false);\n    import(\"../admin/visual/VisualEditor\")\n      .then((m) => {\n        visualEditorModule = m.default;\n        if (!losgekoppeld) setVisualEditor(() => m.default);\n      })\n      .catch((e) => {\n        console.error(\"[xicms] editor laden mislukt:\", e);\n        if (!losgekoppeld) setLaadFout(true);\n      });\n    return () => {\n      losgekoppeld = true;\n    };\n  }, [modus, VisualEditor, laadPoging]);\n\n  const zetModus = useCallback((next: Bewerkmodus) => {\n    setModusState(next);\n    try {\n      if (next === \"bewerken\") sessionStorage.setItem(OPSLAGSLEUTEL, \"bewerken\");\n      else sessionStorage.removeItem(OPSLAGSLEUTEL);\n    } catch {\n      /* de modus werkt ook zonder opslag; alleen een refresh valt dan terug op live */\n    }\n    // De werkversie hoort bij de bewerkmodus. Blijft hij staan na het sluiten, dan ziet de bezoeker\n    // ongepubliceerde tekst terwijl het gereedschap weg is — een pagina die iets toont wat niet\n    // live is. De werkversie zelf blijft in Firestore staan; alleen deze weergave stopt.\n    if (next === \"live\") setDraft(null);\n  }, []);\n\n  const publishDraft = useCallback((path: string, blocks: PaginaBlokken | null) => {\n    setDraft(blocks ? { path, blocks } : null);\n  }, []);\n\n  const bevestigPublicatie = useCallback((path: string, blocks: PaginaBlokken) => {\n    setPublishedOverride({ path, blocks });\n  }, []);\n\n  const value = useMemo<EditorCtx>(() => ({\n    modus,\n    open: modus === \"bewerken\",\n    zetModus,\n    openEditor: () => zetModus(\"bewerken\"),\n    closeEditor: () => zetModus(\"live\"),\n    draftBlocks: draft?.blocks ?? null,\n    editPath: draft?.path ?? null,\n    publishDraft,\n    publishedOverride,\n    bevestigPublicatie,\n    fotoVervanger,\n    zetFotoVervanger,\n  }), [modus, draft, zetModus, publishDraft, publishedOverride, bevestigPublicatie, fotoVervanger, zetFotoVervanger]);\n\n  return (\n    <Ctx.Provider value={value}>\n      {children}\n      {modus === \"bewerken\" && VisualEditor && <VisualEditor onClose={() => zetModus(\"live\")} />}\n      {modus === \"bewerken\" && !VisualEditor && (\n        <div className=\"xicms-editor-laden\" role={laadFout ? \"alert\" : \"status\"} aria-live=\"polite\" data-xicms-tooling=\"\">\n          {laadFout ? (\n            <>\n              <span>De editor kon niet geladen worden.</span>\n              <button type=\"button\" onClick={() => setLaadPoging((n) => n + 1)}>Opnieuw proberen</button>\n              <button type=\"button\" onClick={() => zetModus(\"live\")}>Sluiten</button>\n            </>\n          ) : (\n            <span>Editor laden…</span>\n          )}\n        </div>\n      )}\n    </Ctx.Provider>\n  );\n}\n\n/** Open/sluit de visuele pagina-editor. */\nexport function useEditor(): EditorCtx {\n  return useContext(Ctx);\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from "./blocks/ui/index.js";
 export { SiteSettingsProvider, useSiteSettings, useMergedSiteConfig, } from "./settings/useSiteSettings.js";
 export { SiteFooter } from "./components/site/SiteFooter.js";
 export { SiteNav } from "./components/site/SiteNav.js";
+export { SiteHeader } from "./components/site/SiteHeader.js";
 export { EditorProvider, useEditor } from "./editor/EditorProvider.js";
 export { definePattern, instantiatePattern, collectPatternTypes, builtinPatterns, type Pattern, type PatternBlock, } from "./patterns/index.js";
 export { builtinThemePresets, type ThemePreset } from "./theme/presets.js";
@@ -34,6 +35,8 @@ export type { Translations, LocaleConfig } from "./i18n/overlay.js";
 export type { ThemeTokens, NavItem, NavLeaf, Redirect, SiteSettings, PublicSiteSettings, FormsSender } from "./schema/settings.js";
 export { zoekRedirect, normaliseerPad, navHref, isExterneLink } from "./schema/settings.js";
 export type { Seo } from "./schema/seo.js";
+export { BusinessSchema, BEDRIJFSTYPES, type Business, type BusinessException } from "./schema/business.js";
+export { adresRegels, telLink, routeLink, afwijkingOp, komendeAfwijkingen, afwijkingDatumTekst, isOpenNuMetAfwijkingen, heeftProfiel } from "./bedrijf/bedrijf.js";
 export type { Page, PageStatus } from "./schema/pages.js";
 export type { FormDefinition, FormField } from "./schema/forms.js";
 export { AuthProvider, useAuth } from "./auth/AuthProvider.js";
@@ -43,7 +46,7 @@ export type { NewsArticle, MediaItem, MediaVariant } from "./content/types.js";
 export { EditBar } from "./components/EditBar.js";
 export { ExternEmbed } from "./components/ExternEmbed.js";
 export { ResponsiveImage } from "./components/ResponsiveImage.js";
-export { PageView } from "./components/PageView.js";
+export { PageView, NietGevondenMelder } from "./components/PageView.js";
 export { NewsList, NewsArticleView, useNews } from "./components/News.js";
 export { defineBlock, createRegistry, mergeRegistry, validateBlocks, buildBlockAddOptions, type BlockDefinition, type BlockRegistry, type BlockRenderProps, type BlockEditorProps, type BlockCategory, } from "./blocks/registry.js";
 export { BlockRenderer } from "./blocks/BlockRenderer.js";

package/dist/index.js

@@ -11,6 +11,7 @@ import {
 } from "./settings/useSiteSettings.js";
 import { SiteFooter } from "./components/site/SiteFooter.js";
 import { SiteNav } from "./components/site/SiteNav.js";
+import { SiteHeader } from "./components/site/SiteHeader.js";
 import { EditorProvider, useEditor } from "./editor/EditorProvider.js";
 import {
   definePattern,
@@ -35,6 +36,8 @@ import {
   TranslationsSchema
 } from "./i18n/overlay.js";
 import { zoekRedirect, normaliseerPad, navHref, isExterneLink } from "./schema/settings.js";
+import { BusinessSchema, BEDRIJFSTYPES } from "./schema/business.js";
+import { adresRegels, telLink, routeLink, afwijkingOp, komendeAfwijkingen, afwijkingDatumTekst, isOpenNuMetAfwijkingen, heeftProfiel } from "./bedrijf/bedrijf.js";
 import { AuthProvider, useAuth } from "./auth/AuthProvider.js";
 import { LoginForm } from "./auth/LoginForm.js";
 import {
@@ -46,7 +49,7 @@ import {
 import { EditBar } from "./components/EditBar.js";
 import { ExternEmbed } from "./components/ExternEmbed.js";
 import { ResponsiveImage } from "./components/ResponsiveImage.js";
-import { PageView } from "./components/PageView.js";
+import { PageView, NietGevondenMelder } from "./components/PageView.js";
 import { NewsList, NewsArticleView, useNews } from "./components/News.js";
 import {
   defineBlock,
@@ -91,8 +94,10 @@ import { SiteChrome } from "./SiteChrome.js";
 import { CORE_VERSION, CORE_PACKAGE, isNieuwer } from "./version.js";
 export {
   AuthProvider,
+  BEDRIJFSTYPES,
   BlockDataProvider,
   BlockRenderer,
+  BusinessSchema,
   CORE_PACKAGE,
   CORE_VERSION,
   ConsentBanner,
@@ -114,6 +119,7 @@ export {
   ModulesProvider,
   NewsArticleView,
   NewsList,
+  NietGevondenMelder,
   PageRenderer,
   PageView,
   PublishedPage,
@@ -121,11 +127,15 @@ export {
   ResponsiveImage,
   SiteChrome,
   SiteFooter,
+  SiteHeader,
   SiteNav,
   SiteSettingsProvider,
   SymbolSchema,
   TranslationsSchema,
   XiCMSProvider,
+  adresRegels,
+  afwijkingDatumTekst,
+  afwijkingOp,
   applyBlockOverrides,
   assertModuleContract,
   buildBlockAddOptions,
@@ -149,6 +159,7 @@ export {
   getDb,
   getFirebaseApp,
   getFirebaseAuth,
+  heeftProfiel,
   initAppCheck,
   instantiatePattern,
   interpretTemplate,
@@ -157,8 +168,10 @@ export {
   isFirebaseConfigured,
   isModuleActive,
   isNieuwer,
+  isOpenNuMetAfwijkingen,
   isRichTextKey,
   isSuperadmin,
+  komendeAfwijkingen,
   localizeBlocks,
   localizePage,
   localizedPath,
@@ -170,8 +183,10 @@ export {
   pruneTranslations,
   resolveModules,
   roleForSite,
+  routeLink,
   scopeCss,
   siteLocales,
+  telLink,
   useAuth,
   useBlockData,
   useConsent,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Publieke runtime-API van @xiwebdesign/xicms-core (lichte client/runtime laag).\n * - Admin (TipTap/Radix) zit in \"@xiwebdesign/xicms-core/admin\".\n * - Server-only code (firebase-admin, sanitize, SEO) zit in \"@xiwebdesign/xicms-core/server\".\n * - Pure schema's in \"@xiwebdesign/xicms-core/schema\".\n */\n\n// Provider & config\nexport { XiCMSProvider } from \"./XiCMSProvider\";\nexport { useSiteConfig } from \"./config\";\n\n// Theming & design-primitieven (maatwerk zonder core te forken).\n// - `defineTheme` maakt een eigen Astryx-thema (tokens + component-overrides) → geef door als\n//   XiCMSProvider `astryxTheme`-prop.\n// - De `ui`-primitieven (Card/Stack/Grid/Heading/Text/Btn…) zijn de bouwstenen waarop de ingebouwde\n//   blokken draaien; gebruik ze in eigen blokken voor een consistent maar te herstijlen uiterlijk.\nexport { defineTheme, useTheme } from \"@astryxdesign/core/theme\";\nexport type { DefinedTheme } from \"@astryxdesign/core/theme\";\n// Framework-router-integratie: geef `next/link` door als XiCMSProvider `linkComponent`-prop\n// (soepele client-nav + prefetch op alle Astryx-knoppen/links). `useLinkComponent` voor eigen blokken.\nexport { LinkProvider, useLinkComponent } from \"@astryxdesign/core/Link\";\nexport type { LinkComponentType } from \"@astryxdesign/core/Link\";\n// Beeldoptimalisatie: geef `next/image` door als XiCMSProvider `imageComponent`-prop. `Img` is de\n// wrapper die de blokken gebruiken; `useImageComponent` voor eigen blokken.\nexport { Img, ImageProvider, useImageComponent, InlineImageEditProvider } from \"./media/ImageContext\";\nexport type { ImageComponentType, ImgProps } from \"./media/ImageContext\";\nexport * from \"./blocks/ui\";\nexport {\n  SiteSettingsProvider,\n  useSiteSettings,\n  useMergedSiteConfig,\n} from \"./settings/useSiteSettings\";\nexport { SiteFooter } from \"./components/site/SiteFooter\";\n// 7.24: de beheerde hoofdnavigatie — de enige plek die `settings.nav` leest. Zie SiteNav.tsx.\nexport { SiteNav } from \"./components/site/SiteNav\";\nexport { EditorProvider, useEditor } from \"./editor/EditorProvider\";\nexport {\n  definePattern,\n  instantiatePattern,\n  collectPatternTypes,\n  builtinPatterns,\n  type Pattern,\n  type PatternBlock,\n} from \"./patterns\";\nexport { builtinThemePresets, type ThemePreset } from \"./theme/presets\";\nexport { defineSiteConfig } from \"./schema/siteConfig\";\nexport type { SiteConfig, SiteMode } from \"./schema/siteConfig\";\n// 5.0: Field-IR (primo-port), symbolen en custom blocks.\nexport { FieldSchema, FieldsSchema, fieldsToZod, fieldsDefaults, isFieldVisible, isRichTextKey } from \"./schema/fields\";\nexport type { Field, FieldHints, ShowIf } from \"./schema/fields\";\nexport { SymbolSchema } from \"./schema/symbols\";\nexport type { SymbolDefinition, StoredSymbol } from \"./schema/symbols\";\nexport { CustomBlockSchema } from \"./schema/customBlocks\";\nexport type { CustomBlock, CustomBlock as CustomBlockData } from \"./schema/customBlocks\";\nexport { customBlockToDefinition } from \"./blocks/customTemplate/definition\";\nexport { interpretTemplate, scopeCss } from \"./blocks/customTemplate/interpret\";\n// 5.0: localisatie — overlay-model (primo's locale-per-waarde, additief vertaald).\nexport {\n  siteLocales,\n  parseLocaleSlugs,\n  localizedPath,\n  localizePage,\n  localizeBlocks,\n  pruneTranslations,\n  TranslationsSchema,\n} from \"./i18n/overlay\";\nexport type { Translations, LocaleConfig } from \"./i18n/overlay\";\nexport type { ThemeTokens, NavItem, NavLeaf, Redirect, SiteSettings, PublicSiteSettings, FormsSender } from \"./schema/settings\";\nexport { zoekRedirect, normaliseerPad, navHref, isExterneLink } from \"./schema/settings\";\nexport type { Seo } from \"./schema/seo\";\nexport type { Page, PageStatus } from \"./schema/pages\";\nexport type { FormDefinition, FormField } from \"./schema/forms\";\n\n// Auth\nexport { AuthProvider, useAuth } from \"./auth/AuthProvider\";\nexport { LoginForm } from \"./auth/LoginForm\";\nexport {\n  roleForSite,\n  canEdit,\n  canManageSite,\n  isSuperadmin,\n  type Role,\n  type XiClaims,\n} from \"./auth/roles\";\n\n// De legacy inline-laag (ContentProvider/useContent + EditableText/EditableRichText/EditableImage,\n// het v1 platte `cms/content`-model) is in 5.0 VERWIJDERD, zoals bij de deprecatie aangekondigd.\n// Inline bewerken loopt via het block-model: markeer tekstvelden met `data-xicms-edit` in de Render.\nexport type { NewsArticle, MediaItem, MediaVariant } from \"./content/types\";\n\nexport { EditBar } from \"./components/EditBar\";\nexport { ExternEmbed } from \"./components/ExternEmbed\";\nexport { ResponsiveImage } from \"./components/ResponsiveImage\";\nexport { PageView } from \"./components/PageView\";\nexport { NewsList, NewsArticleView, useNews } from \"./components/News\";\n\n// Block-systeem (runtime: registry + renderer; editors zitten in /admin)\nexport {\n  defineBlock,\n  createRegistry,\n  mergeRegistry,\n  validateBlocks,\n  buildBlockAddOptions,\n  type BlockDefinition,\n  type BlockRegistry,\n  type BlockRenderProps,\n  type BlockEditorProps,\n  type BlockCategory,\n} from \"./blocks/registry\";\nexport { BlockRenderer } from \"./blocks/BlockRenderer\";\nexport { RegistryProvider, useRegistry, BlockDataProvider, useBlockData } from \"./blocks/context\";\nexport { builtinBlocks, ConsentEmbed } from \"./blocks/builtins\";\nexport { PageRenderer } from \"./render/PageRenderer\";\nexport { PublishedPage } from \"./render/PublishedPage\";\n\n// Module-systeem (XiCMS 3.0): modules bundelen blocks + instellingen; per site aan/uit + te stylen.\nexport {\n  defineModule,\n  resolveModules,\n  isModuleActive,\n  ModulesProvider,\n  useModules,\n  useModuleActive,\n  useModuleSettings,\n  applyBlockOverrides,\n  moduleIdForBlockType,\n  builtinModules,\n  validateModuleContract,\n  assertModuleContract,\n  useConsent,\n  ConsentBanner,\n  ConsentGate,\n  ConsentReopenLink,\n  type ConsentState,\n  type ConsentSettings,\n  type ConsentCategory,\n  type ModuleDefinition,\n  type ModuleSiteSetting,\n  type ModulesSiteConfig,\n  type Capability,\n  type ResolvedModules,\n  type BlockOverride,\n  type BlockOverrides,\n} from \"./modules\";\n\n// Demo-lock\nexport { DemoLock } from \"./lock/DemoLock\";\n\n// Demo-bewerkmodus (lokaal-only) leeft op het subpad `@xiwebdesign/xicms-core/demo` — dit zijn\n// demo-store-internals die niet in de publieke runtime-API thuishoren (klantsites gebruiken ze nooit;\n// alleen de XiCMS.nl-showcase). DemoStudio wordt intern door XiCMSProvider gerenderd.\n\n// Firebase (client)\nexport {\n  getFirebaseApp,\n  getFirebaseAuth,\n  getDb,\n  getBucket,\n  isFirebaseConfigured,\n} from \"./firebase/client\";\nexport { initAppCheck } from \"./firebase/appcheck\";\nexport { SiteChrome } from \"./SiteChrome\";\nexport { CORE_VERSION, CORE_PACKAGE, isNieuwer } from \"./version\";\n"],"mappings":"AAQA,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAO9B,SAAS,aAAa,gBAAgB;AAItC,SAAS,cAAc,wBAAwB;AAI/C,SAAS,KAAK,eAAe,mBAAmB,+BAA+B;AAE/E,cAAc;AACd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAE3B,SAAS,eAAe;AACxB,SAAS,gBAAgB,iBAAiB;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,2BAA6C;AACtD,SAAS,wBAAwB;AAGjC,SAAS,aAAa,cAAc,aAAa,gBAAgB,gBAAgB,qBAAqB;AAEtG,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,+BAA+B;AACxC,SAAS,mBAAmB,gBAAgB;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,cAAc,gBAAgB,SAAS,qBAAqB;AAMrE,SAAS,cAAc,eAAe;AACtC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAOP,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,UAAU,iBAAiB,eAAe;AAGnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AACP,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,aAAa,mBAAmB,oBAAoB;AAC/E,SAAS,eAAe,oBAAoB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAG9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAWK;AAGP,SAAS,gBAAgB;AAOzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc,cAAc,iBAAiB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Publieke runtime-API van @xiwebdesign/xicms-core (lichte client/runtime laag).\n * - Admin (TipTap/Radix) zit in \"@xiwebdesign/xicms-core/admin\".\n * - Server-only code (firebase-admin, sanitize, SEO) zit in \"@xiwebdesign/xicms-core/server\".\n * - Pure schema's in \"@xiwebdesign/xicms-core/schema\".\n */\n\n// Provider & config\nexport { XiCMSProvider } from \"./XiCMSProvider\";\nexport { useSiteConfig } from \"./config\";\n\n// Theming & design-primitieven (maatwerk zonder core te forken).\n// - `defineTheme` maakt een eigen Astryx-thema (tokens + component-overrides) → geef door als\n//   XiCMSProvider `astryxTheme`-prop.\n// - De `ui`-primitieven (Card/Stack/Grid/Heading/Text/Btn…) zijn de bouwstenen waarop de ingebouwde\n//   blokken draaien; gebruik ze in eigen blokken voor een consistent maar te herstijlen uiterlijk.\nexport { defineTheme, useTheme } from \"@astryxdesign/core/theme\";\nexport type { DefinedTheme } from \"@astryxdesign/core/theme\";\n// Framework-router-integratie: geef `next/link` door als XiCMSProvider `linkComponent`-prop\n// (soepele client-nav + prefetch op alle Astryx-knoppen/links). `useLinkComponent` voor eigen blokken.\nexport { LinkProvider, useLinkComponent } from \"@astryxdesign/core/Link\";\nexport type { LinkComponentType } from \"@astryxdesign/core/Link\";\n// Beeldoptimalisatie: geef `next/image` door als XiCMSProvider `imageComponent`-prop. `Img` is de\n// wrapper die de blokken gebruiken; `useImageComponent` voor eigen blokken.\nexport { Img, ImageProvider, useImageComponent, InlineImageEditProvider } from \"./media/ImageContext\";\nexport type { ImageComponentType, ImgProps } from \"./media/ImageContext\";\nexport * from \"./blocks/ui\";\nexport {\n  SiteSettingsProvider,\n  useSiteSettings,\n  useMergedSiteConfig,\n} from \"./settings/useSiteSettings\";\nexport { SiteFooter } from \"./components/site/SiteFooter\";\n// 7.24: de beheerde hoofdnavigatie — de enige plek die `settings.nav` leest. Zie SiteNav.tsx.\nexport { SiteNav } from \"./components/site/SiteNav\";\n// 8.13: kop met logo, menu, actieknop, hamburgermenu en mobiele belbalk. Zie SiteHeader.tsx.\nexport { SiteHeader } from \"./components/site/SiteHeader\";\nexport { EditorProvider, useEditor } from \"./editor/EditorProvider\";\nexport {\n  definePattern,\n  instantiatePattern,\n  collectPatternTypes,\n  builtinPatterns,\n  type Pattern,\n  type PatternBlock,\n} from \"./patterns\";\nexport { builtinThemePresets, type ThemePreset } from \"./theme/presets\";\nexport { defineSiteConfig } from \"./schema/siteConfig\";\nexport type { SiteConfig, SiteMode } from \"./schema/siteConfig\";\n// 5.0: Field-IR (primo-port), symbolen en custom blocks.\nexport { FieldSchema, FieldsSchema, fieldsToZod, fieldsDefaults, isFieldVisible, isRichTextKey } from \"./schema/fields\";\nexport type { Field, FieldHints, ShowIf } from \"./schema/fields\";\nexport { SymbolSchema } from \"./schema/symbols\";\nexport type { SymbolDefinition, StoredSymbol } from \"./schema/symbols\";\nexport { CustomBlockSchema } from \"./schema/customBlocks\";\nexport type { CustomBlock, CustomBlock as CustomBlockData } from \"./schema/customBlocks\";\nexport { customBlockToDefinition } from \"./blocks/customTemplate/definition\";\nexport { interpretTemplate, scopeCss } from \"./blocks/customTemplate/interpret\";\n// 5.0: localisatie — overlay-model (primo's locale-per-waarde, additief vertaald).\nexport {\n  siteLocales,\n  parseLocaleSlugs,\n  localizedPath,\n  localizePage,\n  localizeBlocks,\n  pruneTranslations,\n  TranslationsSchema,\n} from \"./i18n/overlay\";\nexport type { Translations, LocaleConfig } from \"./i18n/overlay\";\nexport type { ThemeTokens, NavItem, NavLeaf, Redirect, SiteSettings, PublicSiteSettings, FormsSender } from \"./schema/settings\";\nexport { zoekRedirect, normaliseerPad, navHref, isExterneLink } from \"./schema/settings\";\nexport type { Seo } from \"./schema/seo\";\n// 8.13: bedrijfsprofiel (adres, telefoon, openingstijden) + hulpjes voor eigen headers/footers.\nexport { BusinessSchema, BEDRIJFSTYPES, type Business, type BusinessException } from \"./schema/business\";\nexport { adresRegels, telLink, routeLink, afwijkingOp, komendeAfwijkingen, afwijkingDatumTekst, isOpenNuMetAfwijkingen, heeftProfiel } from \"./bedrijf/bedrijf\";\nexport type { Page, PageStatus } from \"./schema/pages\";\nexport type { FormDefinition, FormField } from \"./schema/forms\";\n\n// Auth\nexport { AuthProvider, useAuth } from \"./auth/AuthProvider\";\nexport { LoginForm } from \"./auth/LoginForm\";\nexport {\n  roleForSite,\n  canEdit,\n  canManageSite,\n  isSuperadmin,\n  type Role,\n  type XiClaims,\n} from \"./auth/roles\";\n\n// De legacy inline-laag (ContentProvider/useContent + EditableText/EditableRichText/EditableImage,\n// het v1 platte `cms/content`-model) is in 5.0 VERWIJDERD, zoals bij de deprecatie aangekondigd.\n// Inline bewerken loopt via het block-model: markeer tekstvelden met `data-xicms-edit` in de Render.\nexport type { NewsArticle, MediaItem, MediaVariant } from \"./content/types\";\n\nexport { EditBar } from \"./components/EditBar\";\nexport { ExternEmbed } from \"./components/ExternEmbed\";\nexport { ResponsiveImage } from \"./components/ResponsiveImage\";\nexport { PageView, NietGevondenMelder } from \"./components/PageView\";\nexport { NewsList, NewsArticleView, useNews } from \"./components/News\";\n\n// Block-systeem (runtime: registry + renderer; editors zitten in /admin)\nexport {\n  defineBlock,\n  createRegistry,\n  mergeRegistry,\n  validateBlocks,\n  buildBlockAddOptions,\n  type BlockDefinition,\n  type BlockRegistry,\n  type BlockRenderProps,\n  type BlockEditorProps,\n  type BlockCategory,\n} from \"./blocks/registry\";\nexport { BlockRenderer } from \"./blocks/BlockRenderer\";\nexport { RegistryProvider, useRegistry, BlockDataProvider, useBlockData } from \"./blocks/context\";\nexport { builtinBlocks, ConsentEmbed } from \"./blocks/builtins\";\nexport { PageRenderer } from \"./render/PageRenderer\";\nexport { PublishedPage } from \"./render/PublishedPage\";\n\n// Module-systeem (XiCMS 3.0): modules bundelen blocks + instellingen; per site aan/uit + te stylen.\nexport {\n  defineModule,\n  resolveModules,\n  isModuleActive,\n  ModulesProvider,\n  useModules,\n  useModuleActive,\n  useModuleSettings,\n  applyBlockOverrides,\n  moduleIdForBlockType,\n  builtinModules,\n  validateModuleContract,\n  assertModuleContract,\n  useConsent,\n  ConsentBanner,\n  ConsentGate,\n  ConsentReopenLink,\n  type ConsentState,\n  type ConsentSettings,\n  type ConsentCategory,\n  type ModuleDefinition,\n  type ModuleSiteSetting,\n  type ModulesSiteConfig,\n  type Capability,\n  type ResolvedModules,\n  type BlockOverride,\n  type BlockOverrides,\n} from \"./modules\";\n\n// Demo-lock\nexport { DemoLock } from \"./lock/DemoLock\";\n\n// Demo-bewerkmodus (lokaal-only) leeft op het subpad `@xiwebdesign/xicms-core/demo` — dit zijn\n// demo-store-internals die niet in de publieke runtime-API thuishoren (klantsites gebruiken ze nooit;\n// alleen de XiCMS.nl-showcase). DemoStudio wordt intern door XiCMSProvider gerenderd.\n\n// Firebase (client)\nexport {\n  getFirebaseApp,\n  getFirebaseAuth,\n  getDb,\n  getBucket,\n  isFirebaseConfigured,\n} from \"./firebase/client\";\nexport { initAppCheck } from \"./firebase/appcheck\";\nexport { SiteChrome } from \"./SiteChrome\";\nexport { CORE_VERSION, CORE_PACKAGE, isNieuwer } from \"./version\";\n"],"mappings":"AAQA,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAO9B,SAAS,aAAa,gBAAgB;AAItC,SAAS,cAAc,wBAAwB;AAI/C,SAAS,KAAK,eAAe,mBAAmB,+BAA+B;AAE/E,cAAc;AACd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAE3B,SAAS,eAAe;AAExB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,iBAAiB;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,2BAA6C;AACtD,SAAS,wBAAwB;AAGjC,SAAS,aAAa,cAAc,aAAa,gBAAgB,gBAAgB,qBAAqB;AAEtG,SAAS,oBAAoB;AAE7B,SAAS,yBAAyB;AAElC,SAAS,+BAA+B;AACxC,SAAS,mBAAmB,gBAAgB;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,cAAc,gBAAgB,SAAS,qBAAqB;AAGrE,SAAS,gBAAgB,qBAA4D;AACrF,SAAS,aAAa,SAAS,WAAW,aAAa,oBAAoB,qBAAqB,wBAAwB,oBAAoB;AAK5I,SAAS,cAAc,eAAe;AACtC,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAOP,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,UAAU,0BAA0B;AAC7C,SAAS,UAAU,iBAAiB,eAAe;AAGnD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AACP,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,aAAa,mBAAmB,oBAAoB;AAC/E,SAAS,eAAe,oBAAoB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAG9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAWK;AAGP,SAAS,gBAAgB;AAOzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc,cAAc,iBAAiB;","names":[]}

package/dist/media/ImageContext.d.ts

@@ -34,3 +34,20 @@ export interface ImgProps {
     editFill?: boolean;
 }
 export declare function Img({ src, alt, width, height, sizes, priority, className, style: styleProp, editField, editFill }: ImgProps): import("react").JSX.Element;
+/**
+ * Lichte beeldtag voor plekken waar `Img` te veel is (productkaarten, winkelwagen, voor/na,
+ * lightbox) — 8.3. Gebruikt de ladder uit de media-seed als die er is, en is anders precies de
+ * kale `<img>` die er al stond: géén next/image-terugval, dus geen betaalde transformaties.
+ */
+export declare function SeedImg({ src, alt, sizes, className, style, priority, }: {
+    src: string;
+    alt: string;
+    sizes?: string;
+    className?: string;
+    style?: CSSProperties;
+    priority?: boolean;
+}): import("react").JSX.Element;
+/** De kleinste variant die minstens `minBreedte` breed is (bv. een avatar van 96px op 2x). */
+export declare function useVariantVoor(src: string | undefined, minBreedte: number): string | undefined;
+/** De grootste beschikbare versie (lightbox): volle WebP, anders de hoogste trede, anders het origineel. */
+export declare function useGrootsteVariant(src: string): string;

package/dist/media/ImageContext.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { bronSet } from "./srcset.js";
 import { createContext, useContext } from "react";
 import { useBlockData } from "../blocks/context.js";
 const ImageContext = createContext(null);
@@ -24,30 +25,28 @@ function Img({ src, alt, width, height, sizes, priority, className, style: style
   const onReplace = useContext(InlineImageEditContext);
   const mediaSeed = useBlockData("media");
   const eigenLadder = mediaSeed?.[src];
+  alt = alt || eigenLadder?.alt || "";
   const ladder = eigenLadder?.variants?.sizes ?? [];
   const webp = eigenLadder?.variants?.webp;
   const focal = eigenLadder?.focal;
   const style = focal && !style_heeftPositie(styleProp) ? { ...styleProp, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` } : styleProp;
   const editHook = editField ? { "data-xicms-edit": editField } : void 0;
-  const imageEl = ladder.length > 0 ? /* @__PURE__ */ jsxs("picture", { ...editHook, children: [
-    webp && /* @__PURE__ */ jsx("source", { type: "image/webp", srcSet: `${webp.url} ${webp.width}w`, sizes }),
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src,
-        srcSet: ladder.map((v) => `${v.url} ${v.width}w`).join(", "),
-        sizes,
-        alt,
-        width: eigenLadder?.width ?? width,
-        height: eigenLadder?.height ?? height,
-        loading: priority ? "eager" : "lazy",
-        fetchPriority: priority ? "high" : void 0,
-        decoding: "async",
-        className,
-        style
-      }
-    )
-  ] }) : ImageComponent ? /* @__PURE__ */ jsx(
+  const imageEl = ladder.length > 0 ? /* @__PURE__ */ jsx("picture", { ...editHook, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      srcSet: bronSet(ladder, webp),
+      sizes,
+      alt,
+      width: eigenLadder?.width ?? width,
+      height: eigenLadder?.height ?? height,
+      loading: priority ? "eager" : "lazy",
+      fetchPriority: priority ? "high" : void 0,
+      decoding: "async",
+      className,
+      style
+    }
+  ) }) : ImageComponent ? /* @__PURE__ */ jsx(
     ImageComponent,
     {
       src,
@@ -98,10 +97,56 @@ function Img({ src, alt, width, height, sizes, priority, className, style: style
   }
   return imageEl;
 }
+function SeedImg({
+  src,
+  alt,
+  sizes,
+  className,
+  style,
+  priority
+}) {
+  const seed = useBlockData("media")?.[src];
+  const srcSet = seed ? bronSet(seed.variants?.sizes, seed.variants?.webp) : void 0;
+  const focal = seed?.focal;
+  const stijl = focal && !style_heeftPositie(style) ? { ...style, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` } : style;
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        srcSet,
+        sizes: srcSet ? sizes : void 0,
+        alt: alt || seed?.alt || "",
+        width: seed?.width,
+        height: seed?.height,
+        loading: priority ? "eager" : "lazy",
+        decoding: "async",
+        className,
+        style: stijl
+      }
+    )
+  );
+}
+function useVariantVoor(src, minBreedte) {
+  const seed = useBlockData("media");
+  if (!src) return src;
+  const ladder = [...seed?.[src]?.variants?.sizes ?? []].sort((a, b) => a.width - b.width);
+  return ladder.find((v) => v.width >= minBreedte)?.url ?? src;
+}
+function useGrootsteVariant(src) {
+  const v = useBlockData("media")?.[src]?.variants;
+  if (v?.webp?.url) return v.webp.url;
+  const ladder = [...v?.sizes ?? []].sort((a, b) => b.width - a.width);
+  return ladder[0]?.url ?? src;
+}
 export {
   ImageProvider,
   Img,
   InlineImageEditProvider,
-  useImageComponent
+  SeedImg,
+  useGrootsteVariant,
+  useImageComponent,
+  useVariantVoor
 };
 //# sourceMappingURL=ImageContext.js.map

package/dist/media/ImageContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/media/ImageContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type CSSProperties, type ElementType, type ReactNode } from \"react\";\nimport { useBlockData } from \"../blocks/context\";\nimport type { MediaItem } from \"../content/types\";\n\n/**\n * Optionele framework-beeldcomponent (bv. Next `Image`) voor automatische optimalisatie: responsive\n * `srcset`, moderne formaten (AVIF/WebP), correcte `width/height` (geen layout-shift), lazy-loading.\n * Core importeert `next/image` niet zelf (optionele peer) — de site injecteert 'm via de\n * `imageComponent`-prop op `XiCMSProvider`, net als `linkComponent`. Zonder injectie valt alles terug\n * op een gewone `<img>` (huidig gedrag, werkt overal).\n */\nexport type ImageComponentType = ElementType;\n\nconst ImageContext = createContext<ImageComponentType | null>(null);\n\nexport function ImageProvider({ component, children }: { component?: ImageComponentType; children: ReactNode }) {\n  return <ImageContext.Provider value={component ?? null}>{children}</ImageContext.Provider>;\n}\n\nexport function useImageComponent(): ImageComponentType | null {\n  return useContext(ImageContext);\n}\n\n/**\n * Inline beeld-bewerken: de visuele editor levert via deze context een `onReplace(field)`-callback\n * voor het GESELECTEERDE blok. Is die actief én geeft een `<Img>` een `editField` mee, dan toont het\n * beeld een vervang-icoontje. Buiten de editor (context = null) rendert `<Img>` exact als voorheen.\n */\n/**\n * `blockKey` komt sinds 7.9 uit de DOM, niet uit een per-blok provider.\n *\n * Tot 7.4 wikkelde de editor élk blok in zijn canvas apart in deze provider, met de blok-key in de\n * closure. Dat canvas is weg — de pagina van de klant ís de editor — en één provider om de hele\n * pagina weet niet meer bij welk blok een foto hoort. De knop lost dat op het moment van klikken\n * op: elk blok draagt al `data-xicms-block` (BlockRenderer), dus `closest()` vanaf de knop is\n * betrouwbaar en kost niets zolang er niemand klikt.\n */\nconst InlineImageEditContext = createContext<((field: string, blockKey?: string) => void) | null>(null);\n\nexport function InlineImageEditProvider({\n  onReplace,\n  children,\n}: {\n  onReplace: ((field: string, blockKey?: string) => void) | null;\n  children: ReactNode;\n}) {\n  return <InlineImageEditContext.Provider value={onReplace}>{children}</InlineImageEditContext.Provider>;\n}\n\nexport interface ImgProps {\n  src: string;\n  alt: string;\n  /** Intrinsieke breedte/hoogte (verhouding) → nodig voor next/image én tegen CLS. */\n  width: number;\n  height: number;\n  /** Hint voor responsive selectie, bv. \"(max-width: 720px) 100vw, 33vw\". */\n  sizes?: string;\n  /** Above-the-fold (hero): eager + hoge prioriteit voor LCP. */\n  priority?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /** Blokveld (pad) met de URL — schakelt inline vervangen in de visuele editor in (bv. \"imageUrl\"). */\n  editField?: string;\n  /** Beeld vult absoluut z'n parent (bv. hero-achtergrond): geen wrapper-box, knop absoluut t.o.v. het blok. */\n  editFill?: boolean;\n}\n\n/**\n * Eén beeld-wrapper voor alle blokken. Gebruikt de geïnjecteerde `imageComponent` (next/image) als\n * die er is, anders een gewone `<img>`. De display-grootte regel je met CSS (`style`/`className`,\n * bv. `width:100%;height:100%;object-fit:cover`); `width`/`height` zijn de verhouding.\n */\nfunction style_heeftPositie(style?: CSSProperties): boolean {\n  return Boolean(style && \"objectPosition\" in style && style.objectPosition);\n}\n\nexport function Img({ src, alt, width, height, sizes, priority, className, style: styleProp, editField, editFill }: ImgProps) {\n  const ImageComponent = useImageComponent();\n  const onReplace = useContext(InlineImageEditContext);\n  /**\n   * Eigen srcset-ladder vóór next/image (7.13). De upload-pipeline (onMediaUpload, sharp) maakt\n   * bij élke upload al webp + een maten-ladder; next/image liet dat werk links liggen en\n   * transformeerde dezelfde beelden nóg een keer bij Vercel — betaalde image-transformations,\n   * plus transformatie-latency op de eerste hit. De route levert daarom per pagina een\n   * `media`-seed (url → varianten, zie server/blockData.ts); staat de URL van dit beeld daarin,\n   * dan renderen we een kale <picture> met de eigen ladder en blijft Vercel er helemaal buiten.\n   * Geen seed (editor, oudere site, extern beeld zoals Unsplash) → het bestaande pad.\n   */\n  const mediaSeed = useBlockData<Record<string, Pick<MediaItem, \"variants\" | \"width\" | \"height\" | \"focal\">>>(\"media\");\n  const eigenLadder = mediaSeed?.[src];\n  const ladder = eigenLadder?.variants?.sizes ?? [];\n  const webp = eigenLadder?.variants?.webp;\n  // Focuspunt (7.24): staat er in het beheer een focuspunt op deze foto, dan snijdt `object-fit:\n  // cover` rond dát punt bij in plaats van rond het midden. Alleen als het blok zelf geen\n  // object-position zet — een blok dat bewust \"top\" wil, wint.\n  const focal = eigenLadder?.focal;\n  const style = focal && !style_heeftPositie(styleProp)\n    ? { ...styleProp, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` }\n    : styleProp;\n  // De rode wijzigings-highlight (visuele editor) zoekt op `data-xicms-edit=\"<veld>\"` binnen het\n  // geselecteerde blok — voor foto's stond dat hook er nergens op (alleen tekstvelden hadden 'm),\n  // dus een vervangen foto bleef onopgemerkt tussen de andere, wél gemarkeerde wijzigingen. Eén\n  // plek hier lost het voor elk blok met een `<Img editField=…>` tegelijk op.\n  const editHook = editField ? { \"data-xicms-edit\": editField } : undefined;\n  const imageEl = ladder.length > 0 ? (\n    <picture {...editHook}>\n      {webp && <source type=\"image/webp\" srcSet={`${webp.url} ${webp.width}w`} sizes={sizes} />}\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        src={src}\n        srcSet={ladder.map((v) => `${v.url} ${v.width}w`).join(\", \")}\n        sizes={sizes}\n        alt={alt}\n        width={eigenLadder?.width ?? width}\n        height={eigenLadder?.height ?? height}\n        loading={priority ? \"eager\" : \"lazy\"}\n        fetchPriority={priority ? \"high\" : undefined}\n        decoding=\"async\"\n        className={className}\n        style={style}\n      />\n    </picture>\n  ) : ImageComponent ? (\n    <ImageComponent\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      sizes={sizes}\n      priority={priority || undefined}\n      className={className}\n      style={style}\n      {...editHook}\n    />\n  ) : (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      sizes={sizes}\n      loading={priority ? \"eager\" : \"lazy\"}\n      fetchPriority={priority ? \"high\" : undefined}\n      className={className}\n      style={style}\n      {...editHook}\n    />\n  );\n\n  // In de visuele editor (geselecteerd blok): toon een vervang-icoontje over het beeld. We wijzigen\n  // alleen de URL → de grootte/stijl blijft (die komt uit het blok), dus blok én beeld behouden hun maat.\n  if (onReplace && editField) {\n    const replace = (e: { preventDefault: () => void; stopPropagation: () => void; currentTarget?: unknown }) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const el = e.currentTarget as HTMLElement | undefined;\n      const key = el?.closest?.(\"[data-xicms-block]\")?.getAttribute(\"data-xicms-block\") ?? undefined;\n      onReplace(editField, key);\n    };\n    const btn = (\n      <button type=\"button\" className={`xicms-ve-img__btn${editFill ? \" xicms-ve-img__btn--fill\" : \"\"}`} title=\"Klik om de foto te wijzigen\" onClick={replace}>\n        📷 Foto wijzigen\n      </button>\n    );\n    // Vullend (hero-achtergrond): geen wrapper-box (zou het absoluut gepositioneerde beeld breken);\n    // de knop is absoluut t.o.v. het blok-element zelf (dat is `position:relative`).\n    if (editFill) return (<>{imageEl}{btn}</>);\n    // In-flow beeld: hele beeld klikbaar (duidelijke affordance) + knop rechtsboven.\n    return (\n      <span className=\"xicms-ve-img\" style={{ position: \"relative\", display: \"block\" }} title=\"Klik om de foto te wijzigen\" onClick={replace}>\n        {imageEl}\n        {btn}\n      </span>\n    );\n  }\n  return imageEl;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/media/ImageContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { bronSet } from \"./srcset\";\nimport { createContext, useContext, type CSSProperties, type ElementType, type ReactNode } from \"react\";\nimport { useBlockData } from \"../blocks/context\";\nimport type { MediaItem } from \"../content/types\";\n\n/**\n * Optionele framework-beeldcomponent (bv. Next `Image`) voor automatische optimalisatie: responsive\n * `srcset`, moderne formaten (AVIF/WebP), correcte `width/height` (geen layout-shift), lazy-loading.\n * Core importeert `next/image` niet zelf (optionele peer) — de site injecteert 'm via de\n * `imageComponent`-prop op `XiCMSProvider`, net als `linkComponent`. Zonder injectie valt alles terug\n * op een gewone `<img>` (huidig gedrag, werkt overal).\n */\nexport type ImageComponentType = ElementType;\n\nconst ImageContext = createContext<ImageComponentType | null>(null);\n\nexport function ImageProvider({ component, children }: { component?: ImageComponentType; children: ReactNode }) {\n  return <ImageContext.Provider value={component ?? null}>{children}</ImageContext.Provider>;\n}\n\nexport function useImageComponent(): ImageComponentType | null {\n  return useContext(ImageContext);\n}\n\n/**\n * Inline beeld-bewerken: de visuele editor levert via deze context een `onReplace(field)`-callback\n * voor het GESELECTEERDE blok. Is die actief én geeft een `<Img>` een `editField` mee, dan toont het\n * beeld een vervang-icoontje. Buiten de editor (context = null) rendert `<Img>` exact als voorheen.\n */\n/**\n * `blockKey` komt sinds 7.9 uit de DOM, niet uit een per-blok provider.\n *\n * Tot 7.4 wikkelde de editor élk blok in zijn canvas apart in deze provider, met de blok-key in de\n * closure. Dat canvas is weg — de pagina van de klant ís de editor — en één provider om de hele\n * pagina weet niet meer bij welk blok een foto hoort. De knop lost dat op het moment van klikken\n * op: elk blok draagt al `data-xicms-block` (BlockRenderer), dus `closest()` vanaf de knop is\n * betrouwbaar en kost niets zolang er niemand klikt.\n */\nconst InlineImageEditContext = createContext<((field: string, blockKey?: string) => void) | null>(null);\n\nexport function InlineImageEditProvider({\n  onReplace,\n  children,\n}: {\n  onReplace: ((field: string, blockKey?: string) => void) | null;\n  children: ReactNode;\n}) {\n  return <InlineImageEditContext.Provider value={onReplace}>{children}</InlineImageEditContext.Provider>;\n}\n\nexport interface ImgProps {\n  src: string;\n  alt: string;\n  /** Intrinsieke breedte/hoogte (verhouding) → nodig voor next/image én tegen CLS. */\n  width: number;\n  height: number;\n  /** Hint voor responsive selectie, bv. \"(max-width: 720px) 100vw, 33vw\". */\n  sizes?: string;\n  /** Above-the-fold (hero): eager + hoge prioriteit voor LCP. */\n  priority?: boolean;\n  className?: string;\n  style?: CSSProperties;\n  /** Blokveld (pad) met de URL — schakelt inline vervangen in de visuele editor in (bv. \"imageUrl\"). */\n  editField?: string;\n  /** Beeld vult absoluut z'n parent (bv. hero-achtergrond): geen wrapper-box, knop absoluut t.o.v. het blok. */\n  editFill?: boolean;\n}\n\n/**\n * Eén beeld-wrapper voor alle blokken. Gebruikt de geïnjecteerde `imageComponent` (next/image) als\n * die er is, anders een gewone `<img>`. De display-grootte regel je met CSS (`style`/`className`,\n * bv. `width:100%;height:100%;object-fit:cover`); `width`/`height` zijn de verhouding.\n */\nfunction style_heeftPositie(style?: CSSProperties): boolean {\n  return Boolean(style && \"objectPosition\" in style && style.objectPosition);\n}\n\nexport function Img({ src, alt, width, height, sizes, priority, className, style: styleProp, editField, editFill }: ImgProps) {\n  const ImageComponent = useImageComponent();\n  const onReplace = useContext(InlineImageEditContext);\n  /**\n   * Eigen srcset-ladder vóór next/image (7.13). De upload-pipeline (onMediaUpload, sharp) maakt\n   * bij élke upload al webp + een maten-ladder; next/image liet dat werk links liggen en\n   * transformeerde dezelfde beelden nóg een keer bij Vercel — betaalde image-transformations,\n   * plus transformatie-latency op de eerste hit. De route levert daarom per pagina een\n   * `media`-seed (url → varianten, zie server/blockData.ts); staat de URL van dit beeld daarin,\n   * dan renderen we een kale <picture> met de eigen ladder en blijft Vercel er helemaal buiten.\n   * Geen seed (editor, oudere site, extern beeld zoals Unsplash) → het bestaande pad.\n   */\n  const mediaSeed = useBlockData<Record<string, Pick<MediaItem, \"variants\" | \"width\" | \"height\" | \"focal\" | \"alt\">>>(\"media\");\n  const eigenLadder = mediaSeed?.[src];\n  // 8.4: geen alt in het blok? Dan de beschrijving uit de mediabibliotheek (als die er is).\n  alt = alt || eigenLadder?.alt || \"\";\n  const ladder = eigenLadder?.variants?.sizes ?? [];\n  const webp = eigenLadder?.variants?.webp;\n  // Focuspunt (7.24): staat er in het beheer een focuspunt op deze foto, dan snijdt `object-fit:\n  // cover` rond dát punt bij in plaats van rond het midden. Alleen als het blok zelf geen\n  // object-position zet — een blok dat bewust \"top\" wil, wint.\n  const focal = eigenLadder?.focal;\n  const style = focal && !style_heeftPositie(styleProp)\n    ? { ...styleProp, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` }\n    : styleProp;\n  // De rode wijzigings-highlight (visuele editor) zoekt op `data-xicms-edit=\"<veld>\"` binnen het\n  // geselecteerde blok — voor foto's stond dat hook er nergens op (alleen tekstvelden hadden 'm),\n  // dus een vervangen foto bleef onopgemerkt tussen de andere, wél gemarkeerde wijzigingen. Eén\n  // plek hier lost het voor elk blok met een `<Img editField=…>` tegelijk op.\n  const editHook = editField ? { \"data-xicms-edit\": editField } : undefined;\n  const imageEl = ladder.length > 0 ? (\n    <picture {...editHook}>\n      {/* 8.3: geen losse <source> meer — die liet de browser altijd de volle WebP kiezen. */}\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        src={src}\n        srcSet={bronSet(ladder, webp)}\n        sizes={sizes}\n        alt={alt}\n        width={eigenLadder?.width ?? width}\n        height={eigenLadder?.height ?? height}\n        loading={priority ? \"eager\" : \"lazy\"}\n        fetchPriority={priority ? \"high\" : undefined}\n        decoding=\"async\"\n        className={className}\n        style={style}\n      />\n    </picture>\n  ) : ImageComponent ? (\n    <ImageComponent\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      sizes={sizes}\n      priority={priority || undefined}\n      className={className}\n      style={style}\n      {...editHook}\n    />\n  ) : (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      sizes={sizes}\n      loading={priority ? \"eager\" : \"lazy\"}\n      fetchPriority={priority ? \"high\" : undefined}\n      className={className}\n      style={style}\n      {...editHook}\n    />\n  );\n\n  // In de visuele editor (geselecteerd blok): toon een vervang-icoontje over het beeld. We wijzigen\n  // alleen de URL → de grootte/stijl blijft (die komt uit het blok), dus blok én beeld behouden hun maat.\n  if (onReplace && editField) {\n    const replace = (e: { preventDefault: () => void; stopPropagation: () => void; currentTarget?: unknown }) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const el = e.currentTarget as HTMLElement | undefined;\n      const key = el?.closest?.(\"[data-xicms-block]\")?.getAttribute(\"data-xicms-block\") ?? undefined;\n      onReplace(editField, key);\n    };\n    const btn = (\n      <button type=\"button\" className={`xicms-ve-img__btn${editFill ? \" xicms-ve-img__btn--fill\" : \"\"}`} title=\"Klik om de foto te wijzigen\" onClick={replace}>\n        📷 Foto wijzigen\n      </button>\n    );\n    // Vullend (hero-achtergrond): geen wrapper-box (zou het absoluut gepositioneerde beeld breken);\n    // de knop is absoluut t.o.v. het blok-element zelf (dat is `position:relative`).\n    if (editFill) return (<>{imageEl}{btn}</>);\n    // In-flow beeld: hele beeld klikbaar (duidelijke affordance) + knop rechtsboven.\n    return (\n      <span className=\"xicms-ve-img\" style={{ position: \"relative\", display: \"block\" }} title=\"Klik om de foto te wijzigen\" onClick={replace}>\n        {imageEl}\n        {btn}\n      </span>\n    );\n  }\n  return imageEl;\n}\n\ntype MediaSeed = Record<string, Pick<MediaItem, \"variants\" | \"width\" | \"height\" | \"focal\" | \"alt\">>;\n\n/**\n * Lichte beeldtag voor plekken waar `Img` te veel is (productkaarten, winkelwagen, voor/na,\n * lightbox) — 8.3. Gebruikt de ladder uit de media-seed als die er is, en is anders precies de\n * kale `<img>` die er al stond: géén next/image-terugval, dus geen betaalde transformaties.\n */\nexport function SeedImg({\n  src,\n  alt,\n  sizes,\n  className,\n  style,\n  priority,\n}: {\n  src: string;\n  alt: string;\n  sizes?: string;\n  className?: string;\n  style?: CSSProperties;\n  priority?: boolean;\n}) {\n  const seed = useBlockData<MediaSeed>(\"media\")?.[src];\n  const srcSet = seed ? bronSet(seed.variants?.sizes, seed.variants?.webp) : undefined;\n  const focal = seed?.focal;\n  const stijl = focal && !style_heeftPositie(style)\n    ? { ...style, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` }\n    : style;\n  return (\n    // eslint-disable-next-line @next/next/no-img-element\n    <img\n      src={src}\n      srcSet={srcSet}\n      sizes={srcSet ? sizes : undefined}\n      alt={alt || seed?.alt || \"\"}\n      width={seed?.width}\n      height={seed?.height}\n      loading={priority ? \"eager\" : \"lazy\"}\n      decoding=\"async\"\n      className={className}\n      style={stijl}\n    />\n  );\n}\n\n/** De kleinste variant die minstens `minBreedte` breed is (bv. een avatar van 96px op 2x). */\nexport function useVariantVoor(src: string | undefined, minBreedte: number): string | undefined {\n  const seed = useBlockData<MediaSeed>(\"media\");\n  if (!src) return src;\n  const ladder = [...(seed?.[src]?.variants?.sizes ?? [])].sort((a, b) => a.width - b.width);\n  return ladder.find((v) => v.width >= minBreedte)?.url ?? src;\n}\n\n/** De grootste beschikbare versie (lightbox): volle WebP, anders de hoogste trede, anders het origineel. */\nexport function useGrootsteVariant(src: string): string {\n  const v = useBlockData<MediaSeed>(\"media\")?.[src]?.variants;\n  if (v?.webp?.url) return v.webp.url;\n  const ladder = [...(v?.sizes ?? [])].sort((a, b) => b.width - a.width);\n  return ladder[0]?.url ?? src;\n}\n"],"mappings":"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","names":[]}

package/dist/media/altInHtml.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Alt-tekst uit de mediabibliotheek invullen in rich text (8.10).
+ *
+ * Een foto die je in een tekstblok plakt of sleept krijgt `alt=""` in de HTML, en de melding zei
+ * "geef hem in Media een beschrijving". Dat hielp niet: de beschrijving in Media kwam nooit in die
+ * HTML terecht. Nu wel, bij het tonen: een `<img>` zonder alt krijgt de beschrijving uit de
+ * bibliotheek (dezelfde media-seed die blokken al gebruiken). Een eigen alt wint altijd.
+ */
+export declare function vulAltIn(html: string, altVoor: (src: string) => string | undefined): string;

package/dist/media/altInHtml.js

@@ -0,0 +1,17 @@
+function vulAltIn(html, altVoor) {
+  if (!html || !html.includes("<img")) return html;
+  return html.replace(/<img\b[^>]*>/gi, (tag) => {
+    const src = /\ssrc\s*=\s*"([^"]*)"/i.exec(tag)?.[1];
+    if (!src) return tag;
+    const huidig = /\salt\s*=\s*"([^"]*)"/i.exec(tag);
+    if (huidig && huidig[1].trim()) return tag;
+    const alt = altVoor(src.replace(/&amp;/g, "&"));
+    if (!alt) return tag;
+    const veilig = alt.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    return huidig ? tag.replace(huidig[0], ` alt="${veilig}"`) : tag.replace(/<img\b/i, `<img alt="${veilig}"`);
+  });
+}
+export {
+  vulAltIn
+};
+//# sourceMappingURL=altInHtml.js.map

package/dist/media/altInHtml.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/altInHtml.ts"],"sourcesContent":["/**\n * Alt-tekst uit de mediabibliotheek invullen in rich text (8.10).\n *\n * Een foto die je in een tekstblok plakt of sleept krijgt `alt=\"\"` in de HTML, en de melding zei\n * \"geef hem in Media een beschrijving\". Dat hielp niet: de beschrijving in Media kwam nooit in die\n * HTML terecht. Nu wel, bij het tonen: een `<img>` zonder alt krijgt de beschrijving uit de\n * bibliotheek (dezelfde media-seed die blokken al gebruiken). Een eigen alt wint altijd.\n */\nexport function vulAltIn(html: string, altVoor: (src: string) => string | undefined): string {\n  if (!html || !html.includes(\"<img\")) return html;\n  return html.replace(/<img\\b[^>]*>/gi, (tag) => {\n    const src = /\\ssrc\\s*=\\s*\"([^\"]*)\"/i.exec(tag)?.[1];\n    if (!src) return tag;\n    const huidig = /\\salt\\s*=\\s*\"([^\"]*)\"/i.exec(tag);\n    if (huidig && huidig[1].trim()) return tag;\n    const alt = altVoor(src.replace(/&amp;/g, \"&\"));\n    if (!alt) return tag;\n    const veilig = alt.replace(/&/g, \"&amp;\").replace(/\"/g, \"&quot;\").replace(/</g, \"&lt;\").replace(/>/g, \"&gt;\");\n    return huidig ? tag.replace(huidig[0], ` alt=\"${veilig}\"`) : tag.replace(/<img\\b/i, `<img alt=\"${veilig}\"`);\n  });\n}\n"],"mappings":"AAQO,SAAS,SAAS,MAAc,SAAsD;AAC3F,MAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,MAAM,EAAG,QAAO;AAC5C,SAAO,KAAK,QAAQ,kBAAkB,CAAC,QAAQ;AAC7C,UAAM,MAAM,yBAAyB,KAAK,GAAG,IAAI,CAAC;AAClD,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,SAAS,yBAAyB,KAAK,GAAG;AAChD,QAAI,UAAU,OAAO,CAAC,EAAE,KAAK,EAAG,QAAO;AACvC,UAAM,MAAM,QAAQ,IAAI,QAAQ,UAAU,GAAG,CAAC;AAC9C,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,SAAS,IAAI,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,QAAQ,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM;AAC5G,WAAO,SAAS,IAAI,QAAQ,OAAO,CAAC,GAAG,SAAS,MAAM,GAAG,IAAI,IAAI,QAAQ,WAAW,aAAa,MAAM,GAAG;AAAA,EAC5G,CAAC;AACH;","names":[]}

package/dist/media/srcset.d.ts

@@ -0,0 +1,12 @@
+/**
+ * De srcset voor een geüpload beeld (8.3). De upload-pipeline maakt een WebP-ladder (320…1280) én
+ * een volle WebP (tot 2048). Tot 8.3 stond die volle WebP als enige kandidaat in een
+ * `<source type="image/webp">` — en elke moderne browser kiest de `<source>`, dus de ladder op de
+ * `<img>` werd nooit gebruikt: een telefoon downloadde het 2048-beeld voor een kaartje van 300px.
+ * Nu één srcset met de hele ladder plus de volle versie als grootste trede; de browser kiest zelf.
+ */
+export interface Variant {
+    url: string;
+    width: number;
+}
+export declare function bronSet(ladder: Variant[] | undefined, volle?: Variant | null): string | undefined;

package/dist/media/srcset.js

@@ -0,0 +1,13 @@
+function bronSet(ladder, volle) {
+  const treden = [...ladder ?? []].filter((v) => v.url && v.width > 0);
+  const grootste = treden.reduce((m, v) => Math.max(m, v.width), 0);
+  if (volle?.url && volle.width > grootste) treden.push(volle);
+  if (treden.length === 0) return void 0;
+  const uniek = /* @__PURE__ */ new Map();
+  for (const v of treden) if (!uniek.has(v.width)) uniek.set(v.width, v);
+  return [...uniek.values()].sort((a, b) => a.width - b.width).map((v) => `${v.url} ${v.width}w`).join(", ");
+}
+export {
+  bronSet
+};
+//# sourceMappingURL=srcset.js.map