@xiwebdesign/xicms-core 7.30.0 → 8.15.0

package/dist/components/PageView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PageView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useSiteConfig } from \"../config\";\n\n/**\n * Registreert één pageview voor de huidige site/pad — max. één keer per browsersessie per pad\n * (sessionStorage). Privacy-vriendelijk en goedkoop. No-op zonder Firebase. Plaats dit in de\n * publieke layout van een klantsite (binnen <XiCMSProvider>).\n */\nexport function PageView({ path }: { path: string }) {\n  const { siteId } = useSiteConfig();\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const key = `xicms_view:${siteId}:${path}`;\n    try {\n      if (sessionStorage.getItem(key)) return;\n      sessionStorage.setItem(key, \"1\");\n    } catch {\n      /* private mode e.d. — ga gewoon door */\n    }\n    // Firebase pas laden wanneer er écht getracked wordt: statisch importeren zette de hele SDK\n    // in de bundel van elke publieke pagina, voor één fire-and-forget-call.\n    void (async () => {\n      const [{ getFirebaseApp }, { callable }] = await Promise.all([\n        import(\"../firebase/client\"),\n        import(\"../firebase/functionsClient\"),\n      ]);\n      const app = getFirebaseApp();\n      if (!app) return;\n      // 7.24: alleen de HOST van de verwijzer (nooit pad/query — daar kan een zoekterm of\n      // sessie-id in staan) en een grove apparaatklasse. Beide zonder cookies of fingerprint.\n      let ref: string | undefined;\n      try {\n        ref = document.referrer ? new URL(document.referrer).hostname : undefined;\n      } catch {\n        ref = undefined;\n      }\n      const w = window.innerWidth;\n      const device = w < 720 ? \"mobiel\" : w < 1100 ? \"tablet\" : \"desktop\";\n      await callable(app, \"trackView\")({ siteId, path, ...(ref ? { ref } : {}), device });\n    })().catch(() => {\n      /* stats mogen nooit de site breken */\n    });\n  }, [siteId, path]);\n\n  return null;\n}\n\n/**\n * Telt een gebeurtenis (7.24): \"formulier\" verstuurd, \"uitgaand\" geklikt, enz. Zelfde teller,\n * zelfde privacy-regels; fire-and-forget en nooit een fout naar de bezoeker.\n */\nexport function trackEvent(siteId: string, event: \"formulier\" | \"bestelling\" | \"uitgaand\" | \"telefoon\" | \"mail\" | \"whatsapp\", path?: string): void {\n  if (typeof window === \"undefined\") return;\n  void (async () => {\n    const [{ getFirebaseApp }, { callable }] = await Promise.all([\n      import(\"../firebase/client\"),\n      import(\"../firebase/functionsClient\"),\n    ]);\n    const app = getFirebaseApp();\n    if (!app) return;\n    await callable(app, \"trackView\")({ siteId, path: path ?? window.location.pathname ?? \"/\", event });\n  })().catch(() => {\n    /* stats mogen nooit de site breken */\n  });\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,SAAS,SAAS,EAAE,KAAK,GAAqB;AACnD,QAAM,EAAE,OAAO,IAAI,cAAc;AAEjC,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,MAAM,cAAc,MAAM,IAAI,IAAI;AACxC,QAAI;AACF,UAAI,eAAe,QAAQ,GAAG,EAAG;AACjC,qBAAe,QAAQ,KAAK,GAAG;AAAA,IACjC,QAAQ;AAAA,IAER;AAGA,UAAM,YAAY;AAChB,YAAM,CAAC,EAAE,eAAe,GAAG,EAAE,SAAS,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,QAC3D,OAAO,oBAAoB;AAAA,QAC3B,OAAO,6BAA6B;AAAA,MACtC,CAAC;AACD,YAAM,MAAM,eAAe;AAC3B,UAAI,CAAC,IAAK;AAGV,UAAI;AACJ,UAAI;AACF,cAAM,SAAS,WAAW,IAAI,IAAI,SAAS,QAAQ,EAAE,WAAW;AAAA,MAClE,QAAQ;AACN,cAAM;AAAA,MACR;AACA,YAAM,IAAI,OAAO;AACjB,YAAM,SAAS,IAAI,MAAM,WAAW,IAAI,OAAO,WAAW;AAC1D,YAAM,SAAS,KAAK,WAAW,EAAE,EAAE,QAAQ,MAAM,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC,GAAI,OAAO,CAAC;AAAA,IACpF,GAAG,EAAE,MAAM,MAAM;AAAA,IAEjB,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AACT;AAMO,SAAS,WAAW,QAAgB,OAAmF,MAAqB;AACjJ,MAAI,OAAO,WAAW,YAAa;AACnC,QAAM,YAAY;AAChB,UAAM,CAAC,EAAE,eAAe,GAAG,EAAE,SAAS,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,MAC3D,OAAO,oBAAoB;AAAA,MAC3B,OAAO,6BAA6B;AAAA,IACtC,CAAC;AACD,UAAM,MAAM,eAAe;AAC3B,QAAI,CAAC,IAAK;AACV,UAAM,SAAS,KAAK,WAAW,EAAE,EAAE,QAAQ,MAAM,QAAQ,OAAO,SAAS,YAAY,KAAK,MAAM,CAAC;AAAA,EACnG,GAAG,EAAE,MAAM,MAAM;AAAA,EAEjB,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../src/components/PageView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\nimport { useSiteConfig } from \"../config\";\n\n/**\n * Registreert één pageview voor de huidige site/pad — max. één keer per browsersessie per pad\n * (sessionStorage). Privacy-vriendelijk en goedkoop. No-op zonder Firebase. Plaats dit in de\n * publieke layout van een klantsite (binnen <XiCMSProvider>).\n */\nexport function PageView({ path }: { path: string }) {\n  const { siteId } = useSiteConfig();\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    // 8.3: geautomatiseerde browsers (Lighthouse, testtools) tellen niet als bezoek; de server\n    // filtert daarnaast op user-agent.\n    if (navigator.webdriver) return;\n    const key = `xicms_view:${siteId}:${path}`;\n    try {\n      if (sessionStorage.getItem(key)) return;\n      sessionStorage.setItem(key, \"1\");\n    } catch {\n      /* private mode e.d. — ga gewoon door */\n    }\n    // Firebase pas laden wanneer er écht getracked wordt: statisch importeren zette de hele SDK\n    // in de bundel van elke publieke pagina, voor één fire-and-forget-call.\n    void (async () => {\n      const [{ getFirebaseApp }, { callable }] = await Promise.all([\n        import(\"../firebase/client\"),\n        import(\"../firebase/functionsClient\"),\n      ]);\n      const app = getFirebaseApp();\n      if (!app) return;\n      // 7.24: alleen de HOST van de verwijzer (nooit pad/query — daar kan een zoekterm of\n      // sessie-id in staan) en een grove apparaatklasse. Beide zonder cookies of fingerprint.\n      let ref: string | undefined;\n      try {\n        ref = document.referrer ? new URL(document.referrer).hostname : undefined;\n      } catch {\n        ref = undefined;\n      }\n      const w = window.innerWidth;\n      const device = w < 720 ? \"mobiel\" : w < 1100 ? \"tablet\" : \"desktop\";\n      await callable(app, \"trackView\")({ siteId, path, ...(ref ? { ref } : {}), device });\n    })().catch(() => {\n      /* stats mogen nooit de site breken */\n    });\n  }, [siteId, path]);\n\n  return null;\n}\n\n/**\n * Telt een gebeurtenis (7.24): \"formulier\" verstuurd, \"uitgaand\" geklikt, enz. Zelfde teller,\n * zelfde privacy-regels; fire-and-forget en nooit een fout naar de bezoeker.\n */\nexport function trackEvent(siteId: string, event: \"formulier\" | \"bestelling\" | \"uitgaand\" | \"telefoon\" | \"mail\" | \"whatsapp\" | \"niet-gevonden\", path?: string): void {\n  if (typeof window === \"undefined\") return;\n  void (async () => {\n    const [{ getFirebaseApp }, { callable }] = await Promise.all([\n      import(\"../firebase/client\"),\n      import(\"../firebase/functionsClient\"),\n    ]);\n    const app = getFirebaseApp();\n    if (!app) return;\n    await callable(app, \"trackView\")({ siteId, path: path ?? window.location.pathname ?? \"/\", event });\n  })().catch(() => {\n    /* stats mogen nooit de site breken */\n  });\n}\n\n/**\n * 404-monitor (8.4): zet dit op de niet-gevonden-pagina van de site. Meldt het pad één keer per\n * sessie; in /beheer → Statistieken verschijnen de vaakst gemiste adressen met een knop om er een\n * doorverwijzing van te maken. Geen cookies, alleen het pad.\n */\nexport function NietGevondenMelder() {\n  const { siteId } = useSiteConfig();\n  useEffect(() => {\n    if (typeof window === \"undefined\" || navigator.webdriver) return;\n    const pad = window.location.pathname;\n    const key = `xicms_404:${siteId}:${pad}`;\n    try {\n      if (sessionStorage.getItem(key)) return;\n      sessionStorage.setItem(key, \"1\");\n    } catch {\n      /* private mode — gewoon melden */\n    }\n    trackEvent(siteId, \"niet-gevonden\", pad);\n  }, [siteId]);\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAOvB,SAAS,SAAS,EAAE,KAAK,GAAqB;AACnD,QAAM,EAAE,OAAO,IAAI,cAAc;AAEjC,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAGnC,QAAI,UAAU,UAAW;AACzB,UAAM,MAAM,cAAc,MAAM,IAAI,IAAI;AACxC,QAAI;AACF,UAAI,eAAe,QAAQ,GAAG,EAAG;AACjC,qBAAe,QAAQ,KAAK,GAAG;AAAA,IACjC,QAAQ;AAAA,IAER;AAGA,UAAM,YAAY;AAChB,YAAM,CAAC,EAAE,eAAe,GAAG,EAAE,SAAS,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,QAC3D,OAAO,oBAAoB;AAAA,QAC3B,OAAO,6BAA6B;AAAA,MACtC,CAAC;AACD,YAAM,MAAM,eAAe;AAC3B,UAAI,CAAC,IAAK;AAGV,UAAI;AACJ,UAAI;AACF,cAAM,SAAS,WAAW,IAAI,IAAI,SAAS,QAAQ,EAAE,WAAW;AAAA,MAClE,QAAQ;AACN,cAAM;AAAA,MACR;AACA,YAAM,IAAI,OAAO;AACjB,YAAM,SAAS,IAAI,MAAM,WAAW,IAAI,OAAO,WAAW;AAC1D,YAAM,SAAS,KAAK,WAAW,EAAE,EAAE,QAAQ,MAAM,GAAI,MAAM,EAAE,IAAI,IAAI,CAAC,GAAI,OAAO,CAAC;AAAA,IACpF,GAAG,EAAE,MAAM,MAAM;AAAA,IAEjB,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AACT;AAMO,SAAS,WAAW,QAAgB,OAAqG,MAAqB;AACnK,MAAI,OAAO,WAAW,YAAa;AACnC,QAAM,YAAY;AAChB,UAAM,CAAC,EAAE,eAAe,GAAG,EAAE,SAAS,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,MAC3D,OAAO,oBAAoB;AAAA,MAC3B,OAAO,6BAA6B;AAAA,IACtC,CAAC;AACD,UAAM,MAAM,eAAe;AAC3B,QAAI,CAAC,IAAK;AACV,UAAM,SAAS,KAAK,WAAW,EAAE,EAAE,QAAQ,MAAM,QAAQ,OAAO,SAAS,YAAY,KAAK,MAAM,CAAC;AAAA,EACnG,GAAG,EAAE,MAAM,MAAM;AAAA,EAEjB,CAAC;AACH;AAOO,SAAS,qBAAqB;AACnC,QAAM,EAAE,OAAO,IAAI,cAAc;AACjC,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,UAAU,UAAW;AAC1D,UAAM,MAAM,OAAO,SAAS;AAC5B,UAAM,MAAM,aAAa,MAAM,IAAI,GAAG;AACtC,QAAI;AACF,UAAI,eAAe,QAAQ,GAAG,EAAG;AACjC,qBAAe,QAAQ,KAAK,GAAG;AAAA,IACjC,QAAQ;AAAA,IAER;AACA,eAAW,QAAQ,iBAAiB,GAAG;AAAA,EACzC,GAAG,CAAC,MAAM,CAAC;AACX,SAAO;AACT;","names":[]}

package/dist/components/ResponsiveImage.js

@@ -1,4 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { bronSet } from "../media/srcset.js";
 function ResponsiveImage({
   media,
   url,
@@ -15,25 +16,22 @@ function ResponsiveImage({
   const webp = media?.variants?.webp;
   const focal = media?.focal;
   const stijl = focal && !(style && style.objectPosition) ? { ...style, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` } : style;
-  const srcSet = ladder.length ? ladder.map((v) => `${v.url} ${v.width}w`).join(", ") : void 0;
-  return /* @__PURE__ */ jsxs("picture", { children: [
-    webp && /* @__PURE__ */ jsx("source", { type: "image/webp", srcSet: `${webp.url} ${webp.width}w`, sizes }),
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src,
-        srcSet,
-        sizes: srcSet ? sizes : void 0,
-        alt: altText,
-        width: media?.width,
-        height: media?.height,
-        loading: priority ? "eager" : "lazy",
-        fetchPriority: priority ? "high" : void 0,
-        className,
-        style: stijl
-      }
-    )
-  ] });
+  const srcSet = ladder.length ? bronSet(ladder, webp) : void 0;
+  return /* @__PURE__ */ jsx("picture", { children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      srcSet,
+      sizes: srcSet ? sizes : void 0,
+      alt: altText,
+      width: media?.width,
+      height: media?.height,
+      loading: priority ? "eager" : "lazy",
+      fetchPriority: priority ? "high" : void 0,
+      className,
+      style: stijl
+    }
+  ) });
 }
 export {
   ResponsiveImage

package/dist/components/ResponsiveImage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ResponsiveImage.tsx"],"sourcesContent":["import type { CSSProperties } from \"react\";\nimport type { MediaItem } from \"../content/types\";\n\n/**\n * Rendert een afbeelding met srcset/webp uit de door de pipeline gegenereerde varianten.\n * Server-safe. Valt terug op de originele `url` als er nog geen varianten zijn.\n */\nexport function ResponsiveImage({\n  media,\n  url,\n  alt,\n  className,\n  style,\n  sizes = \"100vw\",\n  priority = false,\n}: {\n  media?: Pick<MediaItem, \"url\" | \"alt\" | \"width\" | \"height\" | \"variants\" | \"focal\">;\n  url?: string;\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n  sizes?: string;\n  /** Zet dit op een above-the-fold beeld (bv. hero): eager laden + hoge fetch-prioriteit voor LCP. */\n  priority?: boolean;\n}) {\n  const src = media?.url ?? url;\n  if (!src) return null;\n  const altText = alt ?? media?.alt ?? \"\";\n  const ladder = media?.variants?.sizes ?? [];\n  const webp = media?.variants?.webp;\n  // Focuspunt (7.24): bijsnijden rond het gekozen punt i.p.v. het midden (zie MediaItem.focal).\n  const focal = media?.focal;\n  const stijl = focal && !(style && style.objectPosition)\n    ? { ...style, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` }\n    : style;\n\n  const srcSet = ladder.length\n    ? ladder.map((v) => `${v.url} ${v.width}w`).join(\", \")\n    : undefined;\n\n  return (\n    <picture>\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={srcSet}\n        sizes={srcSet ? sizes : undefined}\n        alt={altText}\n        width={media?.width}\n        height={media?.height}\n        loading={priority ? \"eager\" : \"lazy\"}\n        fetchPriority={priority ? \"high\" : undefined}\n        className={className}\n        style={stijl}\n      />\n    </picture>\n  );\n}\n"],"mappings":"AAyCI,SACW,KADX;AAlCG,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AACb,GASG;AACD,QAAM,MAAM,OAAO,OAAO;AAC1B,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,UAAU,OAAO,OAAO,OAAO;AACrC,QAAM,SAAS,OAAO,UAAU,SAAS,CAAC;AAC1C,QAAM,OAAO,OAAO,UAAU;AAE9B,QAAM,QAAQ,OAAO;AACrB,QAAM,QAAQ,SAAS,EAAE,SAAS,MAAM,kBACpC,EAAE,GAAG,OAAO,gBAAgB,GAAG,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC,IAAI,IAC1F;AAEJ,QAAM,SAAS,OAAO,SAClB,OAAO,IAAI,CAAC,MAAM,GAAG,EAAE,GAAG,IAAI,EAAE,KAAK,GAAG,EAAE,KAAK,IAAI,IACnD;AAEJ,SACE,qBAAC,aACE;AAAA,YAAQ,oBAAC,YAAO,MAAK,cAAa,QAAQ,GAAG,KAAK,GAAG,IAAI,KAAK,KAAK,KAAK,OAAc;AAAA,IAEvF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO,SAAS,QAAQ;AAAA,QACxB,KAAK;AAAA,QACL,OAAO,OAAO;AAAA,QACd,QAAQ,OAAO;AAAA,QACf,SAAS,WAAW,UAAU;AAAA,QAC9B,eAAe,WAAW,SAAS;AAAA,QACnC;AAAA,QACA,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/ResponsiveImage.tsx"],"sourcesContent":["import { bronSet } from \"../media/srcset\";\nimport type { CSSProperties } from \"react\";\nimport type { MediaItem } from \"../content/types\";\n\n/**\n * Rendert een afbeelding met srcset/webp uit de door de pipeline gegenereerde varianten.\n * Server-safe. Valt terug op de originele `url` als er nog geen varianten zijn.\n */\nexport function ResponsiveImage({\n  media,\n  url,\n  alt,\n  className,\n  style,\n  sizes = \"100vw\",\n  priority = false,\n}: {\n  media?: Pick<MediaItem, \"url\" | \"alt\" | \"width\" | \"height\" | \"variants\" | \"focal\">;\n  url?: string;\n  alt?: string;\n  className?: string;\n  style?: CSSProperties;\n  sizes?: string;\n  /** Zet dit op een above-the-fold beeld (bv. hero): eager laden + hoge fetch-prioriteit voor LCP. */\n  priority?: boolean;\n}) {\n  const src = media?.url ?? url;\n  if (!src) return null;\n  const altText = alt ?? media?.alt ?? \"\";\n  const ladder = media?.variants?.sizes ?? [];\n  const webp = media?.variants?.webp;\n  // Focuspunt (7.24): bijsnijden rond het gekozen punt i.p.v. het midden (zie MediaItem.focal).\n  const focal = media?.focal;\n  const stijl = focal && !(style && style.objectPosition)\n    ? { ...style, objectPosition: `${Math.round(focal.x * 100)}% ${Math.round(focal.y * 100)}%` }\n    : style;\n\n  // Eén srcset met ladder + volle WebP (8.3; de losse <source> overstemde de ladder altijd).\n  const srcSet = ladder.length ? bronSet(ladder, webp) : undefined;\n\n  return (\n    <picture>\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={altText}\n        width={media?.width}\n        height={media?.height}\n        loading={priority ? \"eager\" : \"lazy\"}\n        fetchPriority={priority ? \"high\" : undefined}\n        className={className}\n        style={stijl}\n      />\n    </picture>\n  );\n}\n"],"mappings":"AA2CM;AA3CN,SAAS,eAAe;AAQjB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,WAAW;AACb,GASG;AACD,QAAM,MAAM,OAAO,OAAO;AAC1B,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,UAAU,OAAO,OAAO,OAAO;AACrC,QAAM,SAAS,OAAO,UAAU,SAAS,CAAC;AAC1C,QAAM,OAAO,OAAO,UAAU;AAE9B,QAAM,QAAQ,OAAO;AACrB,QAAM,QAAQ,SAAS,EAAE,SAAS,MAAM,kBACpC,EAAE,GAAG,OAAO,gBAAgB,GAAG,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC,KAAK,KAAK,MAAM,MAAM,IAAI,GAAG,CAAC,IAAI,IAC1F;AAGJ,QAAM,SAAS,OAAO,SAAS,QAAQ,QAAQ,IAAI,IAAI;AAEvD,SACE,oBAAC,aAEC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,SAAS,QAAQ;AAAA,MACxB,KAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,SAAS,WAAW,UAAU;AAAA,MAC9B,eAAe,WAAW,SAAS;AAAA,MACnC;AAAA,MACA,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}

package/dist/components/site/SiteFooter.d.ts

@@ -5,8 +5,13 @@ import type { FooterSettings } from "../../schema/settings.js";
  * `xicms-footer*`-classNames + thema-CSS-variabelen, zodat een site hem volledig kan herstijlen
  * (of vervangen door een eigen footer). De inhoud komt live uit `settings/public.footer`.
  */
-export declare function SiteFooter({ className, renderColumn, }: {
+export declare function SiteFooter({ className, renderColumn, bedrijf, }: {
     className?: string;
+    /**
+     * 8.13: een eerste kolom met adres, telefoon, e-mail en openingstijden uit het bedrijfsprofiel
+     * (Instellingen → Bedrijf). Uit voor bestaande sites; de template zet hem aan.
+     */
+    bedrijf?: boolean;
     /** Override de opmaak van één kolom zonder de logica te forken. */
     renderColumn?: (column: NonNullable<FooterSettings["columns"]>[number], index: number) => ReactNode;
 }): import("react").JSX.Element;

package/dist/components/site/SiteFooter.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useSiteSettings } from "../../settings/useSiteSettings.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMergedSiteConfig, useSiteSettings } from "../../settings/useSiteSettings.js";
+import { adresRegels, heeftProfiel, telLink } from "../../bedrijf/bedrijf.js";
 import { useSiteConfig } from "../../config.js";
 function SiteFooter({
   className,
-  renderColumn
+  renderColumn,
+  bedrijf = false
 }) {
   const { settings } = useSiteSettings();
   const config = useSiteConfig();
@@ -14,17 +16,67 @@ function SiteFooter({
   const social = footer.social ?? [];
   const showAdminLink = footer.showAdminLink !== false;
   const year = (/* @__PURE__ */ new Date()).getFullYear();
+  const profiel = useMergedSiteConfig().business;
+  const toonProfiel = bedrijf && heeftProfiel(profiel);
   return /* @__PURE__ */ jsxs("footer", { className: className ?? "xicms-footer", children: [
-    columns.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-footer__columns", children: columns.map(
-      (col, i) => renderColumn ? /* @__PURE__ */ jsx("div", { children: renderColumn(col, i) }, i) : /* @__PURE__ */ jsxs("div", { className: "xicms-footer__column", children: [
-        col.heading && /* @__PURE__ */ jsx("h3", { className: "xicms-footer__heading", children: col.heading }),
-        /* @__PURE__ */ jsx("ul", { className: "xicms-footer__links", children: (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: l.href, children: l.label }) }, j)) })
-      ] }, i)
-    ) }),
+    (columns.length > 0 || toonProfiel) && /* @__PURE__ */ jsxs("div", { className: "xicms-footer__columns", children: [
+      toonProfiel && profiel && /* @__PURE__ */ jsxs("div", { className: "xicms-footer__column xicms-footer__column--bedrijf", children: [
+        /* @__PURE__ */ jsx("h3", { className: "xicms-footer__heading", children: "Contact" }),
+        /* @__PURE__ */ jsxs("ul", { className: "xicms-footer__links", children: [
+          adresRegels(profiel).map((r) => /* @__PURE__ */ jsx("li", { children: r }, r)),
+          profiel.phone && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: telLink(profiel.phone), children: profiel.phone }) }),
+          profiel.email && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${profiel.email}`, children: profiel.email }) })
+        ] }),
+        (profiel.hours?.length ?? 0) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("h3", { className: "xicms-footer__heading", children: "Openingstijden" }),
+          /* @__PURE__ */ jsx("ul", { className: "xicms-footer__links", children: profiel.hours.map((r, i) => /* @__PURE__ */ jsxs("li", { children: [
+            r.day,
+            " \u2014 ",
+            r.hours
+          ] }, i)) })
+        ] })
+      ] }),
+      columns.map(
+        (col, i) => renderColumn ? /* @__PURE__ */ jsx("div", { children: renderColumn(col, i) }, i) : /* @__PURE__ */ jsxs("div", { className: "xicms-footer__column", children: [
+          col.heading && /* @__PURE__ */ jsx("h3", { className: "xicms-footer__heading", children: col.heading }),
+          /* @__PURE__ */ jsx("ul", { className: "xicms-footer__links", children: (col.links ?? []).map((l, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: l.href, children: l.label }) }, j)) })
+        ] }, i)
+      )
+    ] }),
     social.length > 0 && /* @__PURE__ */ jsx("ul", { className: "xicms-footer__social", children: social.map((s, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: s.href, "aria-label": s.platform, rel: "noopener noreferrer", target: "_blank", children: s.platform }) }, i)) }),
     /* @__PURE__ */ jsxs("div", { className: "xicms-footer__bottom", children: [
       /* @__PURE__ */ jsx("span", { children: footer.copyright ?? `\xA9 ${year} ${name}` }),
       showAdminLink && /* @__PURE__ */ jsx("a", { href: "/beheer", children: "Beheer" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "xicms-footer__credit", children: [
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          className: "xicms-footer__credit-merk",
+          href: "https://www.xiwebdesign.nl",
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 64 64", "aria-hidden": "true", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx("rect", { x: "6", y: "10", width: "52", height: "11", rx: "3" }),
+              /* @__PURE__ */ jsx("rect", { x: "16", y: "27", width: "32", height: "11", rx: "3", opacity: "0.7" }),
+              /* @__PURE__ */ jsx("rect", { x: "6", y: "44", width: "52", height: "11", rx: "3" })
+            ] }),
+            "Website gemaakt door Xi Webdesign"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "xicms-footer__credit-cta",
+          href: "https://www.xiwebdesign.nl/#contact",
+          rel: "noopener noreferrer",
+          target: "_blank",
+          children: "Ook zo'n mooie website? Neem contact op \u2192"
+        }
+      )
     ] })
   ] });
 }

package/dist/components/site/SiteFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/site/SiteFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { useSiteSettings } from \"../../settings/useSiteSettings\";\nimport { useSiteConfig } from \"../../config\";\nimport type { FooterSettings } from \"../../schema/settings\";\n\n/**\n * Door de klant in /beheer bewerkbare footer. Unstyled-by-default: alle opmaak hangt aan\n * `xicms-footer*`-classNames + thema-CSS-variabelen, zodat een site hem volledig kan herstijlen\n * (of vervangen door een eigen footer). De inhoud komt live uit `settings/public.footer`.\n */\nexport function SiteFooter({\n  className,\n  renderColumn,\n}: {\n  className?: string;\n  /** Override de opmaak van één kolom zonder de logica te forken. */\n  renderColumn?: (column: NonNullable<FooterSettings[\"columns\"]>[number], index: number) => ReactNode;\n}) {\n  const { settings } = useSiteSettings();\n  const config = useSiteConfig();\n  const footer = settings.footer ?? {};\n  const name = settings.name ?? config.name;\n  const columns = footer.columns ?? [];\n  const social = footer.social ?? [];\n  const showAdminLink = footer.showAdminLink !== false;\n  const year = new Date().getFullYear();\n\n  return (\n    <footer className={className ?? \"xicms-footer\"}>\n      {columns.length > 0 && (\n        <div className=\"xicms-footer__columns\">\n          {columns.map((col, i) =>\n            renderColumn ? (\n              <div key={i}>{renderColumn(col, i)}</div>\n            ) : (\n              <div key={i} className=\"xicms-footer__column\">\n                {col.heading && <h3 className=\"xicms-footer__heading\">{col.heading}</h3>}\n                <ul className=\"xicms-footer__links\">\n                  {(col.links ?? []).map((l, j) => (\n                    <li key={j}>\n                      <a href={l.href}>{l.label}</a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ),\n          )}\n        </div>\n      )}\n\n      {social.length > 0 && (\n        <ul className=\"xicms-footer__social\">\n          {social.map((s, i) => (\n            <li key={i}>\n              <a href={s.href} aria-label={s.platform} rel=\"noopener noreferrer\" target=\"_blank\">\n                {s.platform}\n              </a>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div className=\"xicms-footer__bottom\">\n        <span>{footer.copyright ?? `© ${year} ${name}`}</span>\n        {showAdminLink && <a href=\"/beheer\">Beheer</a>}\n      </div>\n    </footer>\n  );\n}\n"],"mappings":";AAmCc,cAEA,YAFA;AAhCd,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAQvB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,SAAS,IAAI,gBAAgB;AACrC,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,SAAS,UAAU,CAAC;AACnC,QAAM,OAAO,SAAS,QAAQ,OAAO;AACrC,QAAM,UAAU,OAAO,WAAW,CAAC;AACnC,QAAM,SAAS,OAAO,UAAU,CAAC;AACjC,QAAM,gBAAgB,OAAO,kBAAkB;AAC/C,QAAM,QAAO,oBAAI,KAAK,GAAE,YAAY;AAEpC,SACE,qBAAC,YAAO,WAAW,aAAa,gBAC7B;AAAA,YAAQ,SAAS,KAChB,oBAAC,SAAI,WAAU,yBACZ,kBAAQ;AAAA,MAAI,CAAC,KAAK,MACjB,eACE,oBAAC,SAAa,uBAAa,KAAK,CAAC,KAAvB,CAAyB,IAEnC,qBAAC,SAAY,WAAU,wBACpB;AAAA,YAAI,WAAW,oBAAC,QAAG,WAAU,yBAAyB,cAAI,SAAQ;AAAA,QACnE,oBAAC,QAAG,WAAU,uBACV,eAAI,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,MACzB,oBAAC,QACC,8BAAC,OAAE,MAAM,EAAE,MAAO,YAAE,OAAM,KADnB,CAET,CACD,GACH;AAAA,WARQ,CASV;AAAA,IAEJ,GACF;AAAA,IAGD,OAAO,SAAS,KACf,oBAAC,QAAG,WAAU,wBACX,iBAAO,IAAI,CAAC,GAAG,MACd,oBAAC,QACC,8BAAC,OAAE,MAAM,EAAE,MAAM,cAAY,EAAE,UAAU,KAAI,uBAAsB,QAAO,UACvE,YAAE,UACL,KAHO,CAIT,CACD,GACH;AAAA,IAGF,qBAAC,SAAI,WAAU,wBACb;AAAA,0BAAC,UAAM,iBAAO,aAAa,QAAK,IAAI,IAAI,IAAI,IAAG;AAAA,MAC9C,iBAAiB,oBAAC,OAAE,MAAK,WAAU,oBAAM;AAAA,OAC5C;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/site/SiteFooter.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { useMergedSiteConfig, useSiteSettings } from \"../../settings/useSiteSettings\";\nimport { adresRegels, heeftProfiel, telLink } from \"../../bedrijf/bedrijf\";\nimport { useSiteConfig } from \"../../config\";\nimport type { FooterSettings } from \"../../schema/settings\";\n\n/**\n * Door de klant in /beheer bewerkbare footer. Unstyled-by-default: alle opmaak hangt aan\n * `xicms-footer*`-classNames + thema-CSS-variabelen, zodat een site hem volledig kan herstijlen\n * (of vervangen door een eigen footer). De inhoud komt live uit `settings/public.footer`.\n */\nexport function SiteFooter({\n  className,\n  renderColumn,\n  bedrijf = false,\n}: {\n  className?: string;\n  /**\n   * 8.13: een eerste kolom met adres, telefoon, e-mail en openingstijden uit het bedrijfsprofiel\n   * (Instellingen → Bedrijf). Uit voor bestaande sites; de template zet hem aan.\n   */\n  bedrijf?: boolean;\n  /** Override de opmaak van één kolom zonder de logica te forken. */\n  renderColumn?: (column: NonNullable<FooterSettings[\"columns\"]>[number], index: number) => ReactNode;\n}) {\n  const { settings } = useSiteSettings();\n  const config = useSiteConfig();\n  const footer = settings.footer ?? {};\n  const name = settings.name ?? config.name;\n  const columns = footer.columns ?? [];\n  const social = footer.social ?? [];\n  const showAdminLink = footer.showAdminLink !== false;\n  const year = new Date().getFullYear();\n  const profiel = useMergedSiteConfig().business;\n  const toonProfiel = bedrijf && heeftProfiel(profiel);\n\n  return (\n    <footer className={className ?? \"xicms-footer\"}>\n      {(columns.length > 0 || toonProfiel) && (\n        <div className=\"xicms-footer__columns\">\n          {toonProfiel && profiel && (\n            <div className=\"xicms-footer__column xicms-footer__column--bedrijf\">\n              <h3 className=\"xicms-footer__heading\">Contact</h3>\n              <ul className=\"xicms-footer__links\">\n                {adresRegels(profiel).map((r) => <li key={r}>{r}</li>)}\n                {profiel.phone && <li><a href={telLink(profiel.phone)}>{profiel.phone}</a></li>}\n                {profiel.email && <li><a href={`mailto:${profiel.email}`}>{profiel.email}</a></li>}\n              </ul>\n              {(profiel.hours?.length ?? 0) > 0 && (\n                <>\n                  <h3 className=\"xicms-footer__heading\">Openingstijden</h3>\n                  <ul className=\"xicms-footer__links\">\n                    {profiel.hours!.map((r, i) => <li key={i}>{r.day} — {r.hours}</li>)}\n                  </ul>\n                </>\n              )}\n            </div>\n          )}\n          {columns.map((col, i) =>\n            renderColumn ? (\n              <div key={i}>{renderColumn(col, i)}</div>\n            ) : (\n              <div key={i} className=\"xicms-footer__column\">\n                {col.heading && <h3 className=\"xicms-footer__heading\">{col.heading}</h3>}\n                <ul className=\"xicms-footer__links\">\n                  {(col.links ?? []).map((l, j) => (\n                    <li key={j}>\n                      <a href={l.href}>{l.label}</a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ),\n          )}\n        </div>\n      )}\n\n      {social.length > 0 && (\n        <ul className=\"xicms-footer__social\">\n          {social.map((s, i) => (\n            <li key={i}>\n              <a href={s.href} aria-label={s.platform} rel=\"noopener noreferrer\" target=\"_blank\">\n                {s.platform}\n              </a>\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div className=\"xicms-footer__bottom\">\n        <span>{footer.copyright ?? `© ${year} ${name}`}</span>\n        {showAdminLink && <a href=\"/beheer\">Beheer</a>}\n      </div>\n\n      <div className=\"xicms-footer__credit\">\n        <a\n          className=\"xicms-footer__credit-merk\"\n          href=\"https://www.xiwebdesign.nl\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\" fill=\"currentColor\">\n            <rect x=\"6\" y=\"10\" width=\"52\" height=\"11\" rx=\"3\" />\n            <rect x=\"16\" y=\"27\" width=\"32\" height=\"11\" rx=\"3\" opacity=\"0.7\" />\n            <rect x=\"6\" y=\"44\" width=\"52\" height=\"11\" rx=\"3\" />\n          </svg>\n          Website gemaakt door Xi Webdesign\n        </a>\n        <span aria-hidden>·</span>\n        <a\n          className=\"xicms-footer__credit-cta\"\n          href=\"https://www.xiwebdesign.nl/#contact\"\n          rel=\"noopener noreferrer\"\n          target=\"_blank\"\n        >\n          Ook zo&apos;n mooie website? Neem contact op →\n        </a>\n      </div>\n    </footer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/site/SiteHeader.d.ts

@@ -0,0 +1,15 @@
+/**
+ * De kop van de site (8.13): logo, het beheerde menu, één actieknop — en op een telefoon een
+ * hamburgermenu en (optioneel) een vaste balk onderaan met "Bel" en de actieknop.
+ *
+ * Alle drie de klantsites bouwden dit zelf (Header.tsx van 100+ regels, StickyCta.tsx), en de
+ * template had alleen `<strong>naam</strong>` plus het menu, zonder mobiel menu. Nu kan een
+ * nieuwe site starten met een kop die op elk scherm werkt, en past de klant logo en knop zelf aan
+ * in /beheer → Instellingen → Kop. Sites met een eigen header gebruiken dit gewoon niet.
+ *
+ * Unstyled-by-default zoals SiteNav en SiteFooter: alle opmaak hangt aan `.xicms-header*` en de
+ * thema-variabelen (styles.css), te overschrijven per site.
+ */
+export declare function SiteHeader({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/site/SiteHeader.js

@@ -0,0 +1,70 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { useLinkComponent } from "@astryxdesign/core/Link";
+import { useMergedSiteConfig } from "../../settings/useSiteSettings.js";
+import { telLink } from "../../bedrijf/bedrijf.js";
+import { SiteNav } from "./SiteNav.js";
+function SiteHeader({ className }) {
+  const cfg = useMergedSiteConfig();
+  const Link = useLinkComponent();
+  const header = cfg.header ?? {};
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const sluit = () => setOpen(false);
+    const opToets = (e) => e.key === "Escape" && sluit();
+    window.addEventListener("popstate", sluit);
+    window.addEventListener("keydown", opToets);
+    const vorige = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    return () => {
+      window.removeEventListener("popstate", sluit);
+      window.removeEventListener("keydown", opToets);
+      document.documentElement.style.overflow = vorige;
+    };
+  }, [open]);
+  const cta = header.cta?.label?.trim() && header.cta.href ? header.cta : null;
+  const bel = telLink(cfg.business?.phone);
+  const LinkEl = Link;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: ["xicms-header", header.sticky === false ? "" : "is-sticky", open ? "is-open" : "", className].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxs("div", { className: "xicms-header__binnen", children: [
+          /* @__PURE__ */ jsx(LinkEl, { href: "/", className: "xicms-header__merk", children: header.logo ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx("img", { src: header.logo, alt: cfg.name, style: { height: header.logoHoogte ?? 40 } })
+          ) : /* @__PURE__ */ jsx("span", { children: cfg.name }) }),
+          /* @__PURE__ */ jsxs("div", { className: "xicms-header__nav", id: menuId, children: [
+            /* @__PURE__ */ jsx("div", { onClick: (e) => e.target.closest("a") && setOpen(false), children: /* @__PURE__ */ jsx(SiteNav, { className: "xicms-nav xicms-header__menu" }) }),
+            cta && /* @__PURE__ */ jsx(LinkEl, { href: cta.href, className: "xicms-header__cta xicms-header__cta--in-menu", onClick: () => setOpen(false), children: cta.label })
+          ] }),
+          cta && /* @__PURE__ */ jsx(LinkEl, { href: cta.href, className: "xicms-header__cta", children: cta.label }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-header__knop",
+              "aria-expanded": open,
+              "aria-controls": menuId,
+              "aria-label": open ? "Menu sluiten" : "Menu openen",
+              onClick: () => setOpen((v) => !v),
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "xicms-header__streepjes" })
+            }
+          )
+        ] })
+      }
+    ),
+    header.mobielBalk && (bel || cta) && /* @__PURE__ */ jsxs("div", { className: "xicms-mobielbalk", role: "region", "aria-label": "Snel contact", children: [
+      bel && /* @__PURE__ */ jsx("a", { href: bel, className: "xicms-mobielbalk__bel", children: "Bel ons" }),
+      cta && /* @__PURE__ */ jsx(LinkEl, { href: cta.href, className: "xicms-mobielbalk__cta", children: cta.label })
+    ] })
+  ] });
+}
+export {
+  SiteHeader
+};
+//# sourceMappingURL=SiteHeader.js.map

package/dist/components/site/SiteHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/site/SiteHeader.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useState } from \"react\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { useMergedSiteConfig } from \"../../settings/useSiteSettings\";\nimport { telLink } from \"../../bedrijf/bedrijf\";\nimport { SiteNav } from \"./SiteNav\";\n\n/**\n * De kop van de site (8.13): logo, het beheerde menu, één actieknop — en op een telefoon een\n * hamburgermenu en (optioneel) een vaste balk onderaan met \"Bel\" en de actieknop.\n *\n * Alle drie de klantsites bouwden dit zelf (Header.tsx van 100+ regels, StickyCta.tsx), en de\n * template had alleen `<strong>naam</strong>` plus het menu, zonder mobiel menu. Nu kan een\n * nieuwe site starten met een kop die op elk scherm werkt, en past de klant logo en knop zelf aan\n * in /beheer → Instellingen → Kop. Sites met een eigen header gebruiken dit gewoon niet.\n *\n * Unstyled-by-default zoals SiteNav en SiteFooter: alle opmaak hangt aan `.xicms-header*` en de\n * thema-variabelen (styles.css), te overschrijven per site.\n */\nexport function SiteHeader({ className }: { className?: string }) {\n  const cfg = useMergedSiteConfig();\n  const Link = useLinkComponent();\n  const header = cfg.header ?? {};\n  const [open, setOpen] = useState(false);\n  const menuId = useId();\n\n  // Menu dicht bij navigeren (Terug/Vooruit) en met Escape; scrollen blokkeren terwijl het open is.\n  useEffect(() => {\n    if (!open) return;\n    const sluit = () => setOpen(false);\n    const opToets = (e: KeyboardEvent) => e.key === \"Escape\" && sluit();\n    window.addEventListener(\"popstate\", sluit);\n    window.addEventListener(\"keydown\", opToets);\n    const vorige = document.documentElement.style.overflow;\n    document.documentElement.style.overflow = \"hidden\";\n    return () => {\n      window.removeEventListener(\"popstate\", sluit);\n      window.removeEventListener(\"keydown\", opToets);\n      document.documentElement.style.overflow = vorige;\n    };\n  }, [open]);\n\n  const cta = header.cta?.label?.trim() && header.cta.href ? header.cta : null;\n  const bel = telLink(cfg.business?.phone);\n  const LinkEl = Link as unknown as React.ComponentType<{ href: string; className?: string; children: React.ReactNode; onClick?: () => void }>;\n\n  return (\n    <>\n      <header\n        className={[\"xicms-header\", header.sticky === false ? \"\" : \"is-sticky\", open ? \"is-open\" : \"\", className].filter(Boolean).join(\" \")}\n      >\n        <div className=\"xicms-header__binnen\">\n          <LinkEl href=\"/\" className=\"xicms-header__merk\">\n            {header.logo ? (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img src={header.logo} alt={cfg.name} style={{ height: header.logoHoogte ?? 40 }} />\n            ) : (\n              <span>{cfg.name}</span>\n            )}\n          </LinkEl>\n          <div className=\"xicms-header__nav\" id={menuId}>\n            {/* Een klik op een link in het (mobiele) menu sluit het; de nav zelf is SiteNav. */}\n            <div onClick={(e) => (e.target as HTMLElement).closest(\"a\") && setOpen(false)}>\n              <SiteNav className=\"xicms-nav xicms-header__menu\" />\n            </div>\n            {cta && (\n              <LinkEl href={cta.href} className=\"xicms-header__cta xicms-header__cta--in-menu\" onClick={() => setOpen(false)}>\n                {cta.label}\n              </LinkEl>\n            )}\n          </div>\n          {cta && (\n            <LinkEl href={cta.href} className=\"xicms-header__cta\">\n              {cta.label}\n            </LinkEl>\n          )}\n          <button\n            type=\"button\"\n            className=\"xicms-header__knop\"\n            aria-expanded={open}\n            aria-controls={menuId}\n            aria-label={open ? \"Menu sluiten\" : \"Menu openen\"}\n            onClick={() => setOpen((v) => !v)}\n          >\n            <span aria-hidden className=\"xicms-header__streepjes\" />\n          </button>\n        </div>\n      </header>\n      {header.mobielBalk && (bel || cta) && (\n        <div className=\"xicms-mobielbalk\" role=\"region\" aria-label=\"Snel contact\">\n          {bel && (\n            <a href={bel} className=\"xicms-mobielbalk__bel\">\n              Bel ons\n            </a>\n          )}\n          {cta && (\n            <LinkEl href={cta.href} className=\"xicms-mobielbalk__cta\">\n              {cta.label}\n            </LinkEl>\n          )}\n        </div>\n      )}\n    </>\n  );\n}\n"],"mappings":";AAgDI,mBAQU,KAKJ,YAbN;AA9CJ,SAAS,WAAW,OAAO,gBAAgB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,eAAe;AACxB,SAAS,eAAe;AAcjB,SAAS,WAAW,EAAE,UAAU,GAA2B;AAChE,QAAM,MAAM,oBAAoB;AAChC,QAAM,OAAO,iBAAiB;AAC9B,QAAM,SAAS,IAAI,UAAU,CAAC;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,SAAS,MAAM;AAGrB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,MAAM,QAAQ,KAAK;AACjC,UAAM,UAAU,CAAC,MAAqB,EAAE,QAAQ,YAAY,MAAM;AAClE,WAAO,iBAAiB,YAAY,KAAK;AACzC,WAAO,iBAAiB,WAAW,OAAO;AAC1C,UAAM,SAAS,SAAS,gBAAgB,MAAM;AAC9C,aAAS,gBAAgB,MAAM,WAAW;AAC1C,WAAO,MAAM;AACX,aAAO,oBAAoB,YAAY,KAAK;AAC5C,aAAO,oBAAoB,WAAW,OAAO;AAC7C,eAAS,gBAAgB,MAAM,WAAW;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,MAAM,OAAO,KAAK,OAAO,KAAK,KAAK,OAAO,IAAI,OAAO,OAAO,MAAM;AACxE,QAAM,MAAM,QAAQ,IAAI,UAAU,KAAK;AACvC,QAAM,SAAS;AAEf,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,gBAAgB,OAAO,WAAW,QAAQ,KAAK,aAAa,OAAO,YAAY,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QAElI,+BAAC,SAAI,WAAU,wBACb;AAAA,8BAAC,UAAO,MAAK,KAAI,WAAU,sBACxB,iBAAO;AAAA;AAAA,YAEN,oBAAC,SAAI,KAAK,OAAO,MAAM,KAAK,IAAI,MAAM,OAAO,EAAE,QAAQ,OAAO,cAAc,GAAG,GAAG;AAAA,cAElF,oBAAC,UAAM,cAAI,MAAK,GAEpB;AAAA,UACA,qBAAC,SAAI,WAAU,qBAAoB,IAAI,QAErC;AAAA,gCAAC,SAAI,SAAS,CAAC,MAAO,EAAE,OAAuB,QAAQ,GAAG,KAAK,QAAQ,KAAK,GAC1E,8BAAC,WAAQ,WAAU,gCAA+B,GACpD;AAAA,YACC,OACC,oBAAC,UAAO,MAAM,IAAI,MAAM,WAAU,gDAA+C,SAAS,MAAM,QAAQ,KAAK,GAC1G,cAAI,OACP;AAAA,aAEJ;AAAA,UACC,OACC,oBAAC,UAAO,MAAM,IAAI,MAAM,WAAU,qBAC/B,cAAI,OACP;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,iBAAe;AAAA,cACf,iBAAe;AAAA,cACf,cAAY,OAAO,iBAAiB;AAAA,cACpC,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,cAEhC,8BAAC,UAAK,eAAW,MAAC,WAAU,2BAA0B;AAAA;AAAA,UACxD;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACC,OAAO,eAAe,OAAO,QAC5B,qBAAC,SAAI,WAAU,oBAAmB,MAAK,UAAS,cAAW,gBACxD;AAAA,aACC,oBAAC,OAAE,MAAM,KAAK,WAAU,yBAAwB,qBAEhD;AAAA,MAED,OACC,oBAAC,UAAO,MAAM,IAAI,MAAM,WAAU,yBAC/B,cAAI,OACP;AAAA,OAEJ;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/site/SiteNav.d.ts

@@ -27,3 +27,5 @@ export declare function SiteNav({ className, ariaLabel, items, }: {
     /** Overschrijft de items (bv. voor een footer-menu); standaard de beheerde hoofdnavigatie. */
     items?: NavItem[];
 }): import("react").JSX.Element | null;
+/** Is dit menu-item de huidige pagina (of, voor een item met submenu, een van zijn kinderen)? */
+export declare function isHuidig(href: string, pad: string | null): boolean;

package/dist/components/site/SiteNav.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { useLinkComponent } from "@astryxdesign/core/Link";
 import { useMergedSiteConfig } from "../../settings/useSiteSettings.js";
 import { isExterneLink, navHref } from "../../schema/settings.js";
@@ -14,7 +14,26 @@ function SiteNav({
   if (lijst.length === 0) return null;
   return /* @__PURE__ */ jsx("nav", { className: className ?? "xicms-nav", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ul", { className: "xicms-nav__list", children: lijst.map((item, i) => /* @__PURE__ */ jsx(NavEntry, { item }, `${item.href}-${i}`)) }) });
 }
+function abonneerOpPad(cb) {
+  window.addEventListener("popstate", cb);
+  const nav = window.navigation;
+  nav?.addEventListener("navigatesuccess", cb);
+  return () => {
+    window.removeEventListener("popstate", cb);
+    nav?.removeEventListener("navigatesuccess", cb);
+  };
+}
+function useHuidigPad() {
+  return useSyncExternalStore(abonneerOpPad, () => window.location.pathname, () => null);
+}
+function isHuidig(href, pad) {
+  if (!pad || isExterneLink(href)) return false;
+  const schoon = (p) => p.length > 1 ? p.replace(/\/+$/, "") : p;
+  return schoon(href.split(/[?#]/)[0]) === schoon(pad);
+}
 function NavEntry({ item }) {
+  const pad = useHuidigPad();
+  const toggleRef = useRef(null);
   const LinkC = useLinkComponent();
   const kinderen = item.children ?? [];
   const [open, setOpen] = useState(false);
@@ -26,7 +45,9 @@ function NavEntry({ item }) {
       if (!ref.current?.contains(e.target)) setOpen(false);
     };
     const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      if (ref.current?.contains(document.activeElement)) toggleRef.current?.focus();
     };
     document.addEventListener("pointerdown", onDown);
     document.addEventListener("keydown", onKey);
@@ -42,14 +63,15 @@ function NavEntry({ item }) {
     rel: extern && item.target === "_blank" ? "noopener noreferrer" : void 0
   };
   if (kinderen.length === 0) {
-    return /* @__PURE__ */ jsx("li", { className: "xicms-nav__item", children: /* @__PURE__ */ jsx(LinkC, { className: "xicms-nav__link", ...linkProps, children: item.label }) });
+    return /* @__PURE__ */ jsx("li", { className: "xicms-nav__item", children: /* @__PURE__ */ jsx(LinkC, { className: "xicms-nav__link", ...linkProps, "aria-current": isHuidig(item.href, pad) ? "page" : void 0, children: item.label }) });
   }
   return /* @__PURE__ */ jsxs("li", { ref, className: `xicms-nav__item xicms-nav__item--sub${open ? " is-open" : ""}`, children: [
     /* @__PURE__ */ jsxs("span", { className: "xicms-nav__pair", children: [
-      /* @__PURE__ */ jsx(LinkC, { className: "xicms-nav__link", ...linkProps, children: item.label }),
+      /* @__PURE__ */ jsx(LinkC, { className: "xicms-nav__link", ...linkProps, "aria-current": isHuidig(item.href, pad) ? "page" : void 0, children: item.label }),
       /* @__PURE__ */ jsx(
         "button",
         {
+          ref: toggleRef,
           type: "button",
           className: "xicms-nav__toggle",
           "aria-expanded": open,
@@ -70,6 +92,7 @@ function NavEntry({ item }) {
           target: kind.target === "_blank" ? "_blank" : void 0,
           rel: kExtern && kind.target === "_blank" ? "noopener noreferrer" : void 0,
           onClick: () => setOpen(false),
+          "aria-current": isHuidig(kind.href, pad) ? "page" : void 0,
           children: kind.label
         }
       ) }, `${kind.href}-${j}`);
@@ -77,6 +100,7 @@ function NavEntry({ item }) {
   ] });
 }
 export {
-  SiteNav
+  SiteNav,
+  isHuidig
 };
 //# sourceMappingURL=SiteNav.js.map

package/dist/components/site/SiteNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/site/SiteNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { useMergedSiteConfig } from \"../../settings/useSiteSettings\";\nimport { isExterneLink, navHref, type NavItem } from \"../../schema/settings\";\n\n/**\n * De hoofdnavigatie zoals de klant hem in /beheer → Menu beheert (7.24).\n *\n * Tot 7.24 schreef het Menu-paneel netjes naar `settings.nav`, meldde \"De navigatie is\n * bijgewerkt\" — en las geen enkele header dat veld. De template en de klantsites renderden\n * `siteConfig.nav` rechtstreeks uit Git, dus wat de klant in het beheer deed kwam nooit op de\n * site. Deze component is de ontbrekende consument: hij leest de samengevoegde config\n * (Firestore wint, Git is de terugval) en is daarmee de énige plek die een menu hoort te tekenen.\n *\n * SSR-veilig: de settings zitten in de server-seed (`settingsData` op XiCMSProvider), dus het menu\n * staat al in de HTML en er is geen flits van het oude menu.\n *\n * Unstyled-by-default, net als `SiteFooter`: alle opmaak hangt aan `xicms-nav*`-klassen en de\n * thema-variabelen, zodat elke site hem kan herstijlen zonder de logica te forken. De klassen die\n * de template gebruikte (`.site-header nav a`) blijven werken doordat dit een gewone `<nav>` met\n * `<a>`'s blijft.\n *\n * Submenu's (één niveau): een item mét kinderen is zélf een link naar zijn overzichtspagina, met\n * ernaast een knop die het submenu openklapt (`aria-expanded`). Zo werkt het menu zonder\n * JavaScript (alle links staan in de HTML), met het toetsenbord (knop = Enter/Spatie, Escape\n * sluit) en op touch (geen hover nodig).\n */\nexport function SiteNav({\n  className,\n  ariaLabel = \"Hoofdnavigatie\",\n  items,\n}: {\n  className?: string;\n  ariaLabel?: string;\n  /** Overschrijft de items (bv. voor een footer-menu); standaard de beheerde hoofdnavigatie. */\n  items?: NavItem[];\n}) {\n  const cfg = useMergedSiteConfig();\n  const lijst = items ?? cfg.nav ?? [];\n  if (lijst.length === 0) return null;\n  return (\n    <nav className={className ?? \"xicms-nav\"} aria-label={ariaLabel}>\n      <ul className=\"xicms-nav__list\">\n        {lijst.map((item, i) => (\n          <NavEntry key={`${item.href}-${i}`} item={item} />\n        ))}\n      </ul>\n    </nav>\n  );\n}\n\nfunction NavEntry({ item }: { item: NavItem }) {\n  const LinkC = useLinkComponent();\n  const kinderen = item.children ?? [];\n  const [open, setOpen] = useState(false);\n  const id = useId();\n  const ref = useRef<HTMLLIElement>(null);\n\n  // Buiten klikken of Escape sluit het submenu — anders blijft het hangen tot je een ander opent.\n  useEffect(() => {\n    if (!open) return;\n    const onDown = (e: PointerEvent) => {\n      if (!ref.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onDown);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onDown);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, [open]);\n\n  const extern = isExterneLink(item.href);\n  const linkProps = {\n    href: navHref(item),\n    target: item.target === \"_blank\" ? \"_blank\" : undefined,\n    rel: extern && item.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\n  };\n\n  if (kinderen.length === 0) {\n    return (\n      <li className=\"xicms-nav__item\">\n        <LinkC className=\"xicms-nav__link\" {...linkProps}>{item.label}</LinkC>\n      </li>\n    );\n  }\n\n  return (\n    <li ref={ref} className={`xicms-nav__item xicms-nav__item--sub${open ? \" is-open\" : \"\"}`}>\n      <span className=\"xicms-nav__pair\">\n        <LinkC className=\"xicms-nav__link\" {...linkProps}>{item.label}</LinkC>\n        <button\n          type=\"button\"\n          className=\"xicms-nav__toggle\"\n          aria-expanded={open}\n          aria-controls={id}\n          aria-label={`Submenu van ${item.label} ${open ? \"sluiten\" : \"openen\"}`}\n          onClick={() => setOpen((v) => !v)}\n        >\n          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </button>\n      </span>\n      <ul id={id} className=\"xicms-nav__sub\" hidden={!open}>\n        {kinderen.map((kind, j) => {\n          const kExtern = isExterneLink(kind.href);\n          return (\n            <li key={`${kind.href}-${j}`} className=\"xicms-nav__subitem\">\n              <LinkC\n                className=\"xicms-nav__sublink\"\n                href={navHref(kind)}\n                target={kind.target === \"_blank\" ? \"_blank\" : undefined}\n                rel={kExtern && kind.target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n                onClick={() => setOpen(false)}\n              >\n                {kind.label}\n              </LinkC>\n            </li>\n          );\n        })}\n      </ul>\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/site/SiteNav.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useId, useRef, useState, useSyncExternalStore } from \"react\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { useMergedSiteConfig } from \"../../settings/useSiteSettings\";\nimport { isExterneLink, navHref, type NavItem } from \"../../schema/settings\";\n\n/**\n * De hoofdnavigatie zoals de klant hem in /beheer → Menu beheert (7.24).\n *\n * Tot 7.24 schreef het Menu-paneel netjes naar `settings.nav`, meldde \"De navigatie is\n * bijgewerkt\" — en las geen enkele header dat veld. De template en de klantsites renderden\n * `siteConfig.nav` rechtstreeks uit Git, dus wat de klant in het beheer deed kwam nooit op de\n * site. Deze component is de ontbrekende consument: hij leest de samengevoegde config\n * (Firestore wint, Git is de terugval) en is daarmee de énige plek die een menu hoort te tekenen.\n *\n * SSR-veilig: de settings zitten in de server-seed (`settingsData` op XiCMSProvider), dus het menu\n * staat al in de HTML en er is geen flits van het oude menu.\n *\n * Unstyled-by-default, net als `SiteFooter`: alle opmaak hangt aan `xicms-nav*`-klassen en de\n * thema-variabelen, zodat elke site hem kan herstijlen zonder de logica te forken. De klassen die\n * de template gebruikte (`.site-header nav a`) blijven werken doordat dit een gewone `<nav>` met\n * `<a>`'s blijft.\n *\n * Submenu's (één niveau): een item mét kinderen is zélf een link naar zijn overzichtspagina, met\n * ernaast een knop die het submenu openklapt (`aria-expanded`). Zo werkt het menu zonder\n * JavaScript (alle links staan in de HTML), met het toetsenbord (knop = Enter/Spatie, Escape\n * sluit) en op touch (geen hover nodig).\n */\nexport function SiteNav({\n  className,\n  ariaLabel = \"Hoofdnavigatie\",\n  items,\n}: {\n  className?: string;\n  ariaLabel?: string;\n  /** Overschrijft de items (bv. voor een footer-menu); standaard de beheerde hoofdnavigatie. */\n  items?: NavItem[];\n}) {\n  const cfg = useMergedSiteConfig();\n  const lijst = items ?? cfg.nav ?? [];\n  if (lijst.length === 0) return null;\n  return (\n    <nav className={className ?? \"xicms-nav\"} aria-label={ariaLabel}>\n      <ul className=\"xicms-nav__list\">\n        {lijst.map((item, i) => (\n          <NavEntry key={`${item.href}-${i}`} item={item} />\n        ))}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * Het huidige pad, hydratie-veilig (8.3): op de server en tijdens de hydratie `null`, daarna het\n * echte pad. Luistert naar Terug/Vooruit en — waar de browser hem heeft — de Navigation API, zodat\n * ook een client-side navigatie de markering verplaatst.\n */\nfunction abonneerOpPad(cb: () => void): () => void {\n  window.addEventListener(\"popstate\", cb);\n  const nav = (window as unknown as { navigation?: EventTarget }).navigation;\n  nav?.addEventListener(\"navigatesuccess\", cb);\n  return () => {\n    window.removeEventListener(\"popstate\", cb);\n    nav?.removeEventListener(\"navigatesuccess\", cb);\n  };\n}\nfunction useHuidigPad(): string | null {\n  return useSyncExternalStore(abonneerOpPad, () => window.location.pathname, () => null);\n}\n\n/** Is dit menu-item de huidige pagina (of, voor een item met submenu, een van zijn kinderen)? */\nexport function isHuidig(href: string, pad: string | null): boolean {\n  if (!pad || isExterneLink(href)) return false;\n  const schoon = (p: string) => (p.length > 1 ? p.replace(/\\/+$/, \"\") : p);\n  return schoon(href.split(/[?#]/)[0]) === schoon(pad);\n}\n\nfunction NavEntry({ item }: { item: NavItem }) {\n  const pad = useHuidigPad();\n  const toggleRef = useRef<HTMLButtonElement>(null);\n  const LinkC = useLinkComponent();\n  const kinderen = item.children ?? [];\n  const [open, setOpen] = useState(false);\n  const id = useId();\n  const ref = useRef<HTMLLIElement>(null);\n\n  // Buiten klikken of Escape sluit het submenu — anders blijft het hangen tot je een ander opent.\n  useEffect(() => {\n    if (!open) return;\n    const onDown = (e: PointerEvent) => {\n      if (!ref.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      setOpen(false);\n      // 8.3: focus terug naar de knop — anders stond de toetsenbordgebruiker nergens meer.\n      if (ref.current?.contains(document.activeElement)) toggleRef.current?.focus();\n    };\n    document.addEventListener(\"pointerdown\", onDown);\n    document.addEventListener(\"keydown\", onKey);\n    return () => {\n      document.removeEventListener(\"pointerdown\", onDown);\n      document.removeEventListener(\"keydown\", onKey);\n    };\n  }, [open]);\n\n  const extern = isExterneLink(item.href);\n  const linkProps = {\n    href: navHref(item),\n    target: item.target === \"_blank\" ? \"_blank\" : undefined,\n    rel: extern && item.target === \"_blank\" ? \"noopener noreferrer\" : undefined,\n  };\n\n  if (kinderen.length === 0) {\n    return (\n      <li className=\"xicms-nav__item\">\n        <LinkC className=\"xicms-nav__link\" {...linkProps} aria-current={isHuidig(item.href, pad) ? \"page\" : undefined}>{item.label}</LinkC>\n      </li>\n    );\n  }\n\n  return (\n    <li ref={ref} className={`xicms-nav__item xicms-nav__item--sub${open ? \" is-open\" : \"\"}`}>\n      <span className=\"xicms-nav__pair\">\n        <LinkC className=\"xicms-nav__link\" {...linkProps} aria-current={isHuidig(item.href, pad) ? \"page\" : undefined}>{item.label}</LinkC>\n        <button\n          ref={toggleRef}\n          type=\"button\"\n          className=\"xicms-nav__toggle\"\n          aria-expanded={open}\n          aria-controls={id}\n          aria-label={`Submenu van ${item.label} ${open ? \"sluiten\" : \"openen\"}`}\n          onClick={() => setOpen((v) => !v)}\n        >\n          <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </button>\n      </span>\n      <ul id={id} className=\"xicms-nav__sub\" hidden={!open}>\n        {kinderen.map((kind, j) => {\n          const kExtern = isExterneLink(kind.href);\n          return (\n            <li key={`${kind.href}-${j}`} className=\"xicms-nav__subitem\">\n              <LinkC\n                className=\"xicms-nav__sublink\"\n                href={navHref(kind)}\n                target={kind.target === \"_blank\" ? \"_blank\" : undefined}\n                rel={kExtern && kind.target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n                onClick={() => setOpen(false)}\n                aria-current={isHuidig(kind.href, pad) ? \"page\" : undefined}\n              >\n                {kind.label}\n              </LinkC>\n            </li>\n          );\n        })}\n      </ul>\n    </li>\n  );\n}\n"],"mappings":";AA8CU,cA8EJ,YA9EI;AA5CV,SAAS,WAAW,OAAO,QAAQ,UAAU,4BAA4B;AACzE,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,eAAe,eAA6B;AAwB9C,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAKG;AACD,QAAM,MAAM,oBAAoB;AAChC,QAAM,QAAQ,SAAS,IAAI,OAAO,CAAC;AACnC,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,oBAAC,SAAI,WAAW,aAAa,aAAa,cAAY,WACpD,8BAAC,QAAG,WAAU,mBACX,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,YAAmC,QAArB,GAAG,KAAK,IAAI,IAAI,CAAC,EAAgB,CACjD,GACH,GACF;AAEJ;AAOA,SAAS,cAAc,IAA4B;AACjD,SAAO,iBAAiB,YAAY,EAAE;AACtC,QAAM,MAAO,OAAmD;AAChE,OAAK,iBAAiB,mBAAmB,EAAE;AAC3C,SAAO,MAAM;AACX,WAAO,oBAAoB,YAAY,EAAE;AACzC,SAAK,oBAAoB,mBAAmB,EAAE;AAAA,EAChD;AACF;AACA,SAAS,eAA8B;AACrC,SAAO,qBAAqB,eAAe,MAAM,OAAO,SAAS,UAAU,MAAM,IAAI;AACvF;AAGO,SAAS,SAAS,MAAc,KAA6B;AAClE,MAAI,CAAC,OAAO,cAAc,IAAI,EAAG,QAAO;AACxC,QAAM,SAAS,CAAC,MAAe,EAAE,SAAS,IAAI,EAAE,QAAQ,QAAQ,EAAE,IAAI;AACtE,SAAO,OAAO,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,MAAM,OAAO,GAAG;AACrD;AAEA,SAAS,SAAS,EAAE,KAAK,GAAsB;AAC7C,QAAM,MAAM,aAAa;AACzB,QAAM,YAAY,OAA0B,IAAI;AAChD,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,WAAW,KAAK,YAAY,CAAC;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,KAAK,MAAM;AACjB,QAAM,MAAM,OAAsB,IAAI;AAGtC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,CAAC,MAAoB;AAClC,UAAI,CAAC,IAAI,SAAS,SAAS,EAAE,MAAc,EAAG,SAAQ,KAAK;AAAA,IAC7D;AACA,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU;AACxB,cAAQ,KAAK;AAEb,UAAI,IAAI,SAAS,SAAS,SAAS,aAAa,EAAG,WAAU,SAAS,MAAM;AAAA,IAC9E;AACA,aAAS,iBAAiB,eAAe,MAAM;AAC/C,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM;AACX,eAAS,oBAAoB,eAAe,MAAM;AAClD,eAAS,oBAAoB,WAAW,KAAK;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAS,cAAc,KAAK,IAAI;AACtC,QAAM,YAAY;AAAA,IAChB,MAAM,QAAQ,IAAI;AAAA,IAClB,QAAQ,KAAK,WAAW,WAAW,WAAW;AAAA,IAC9C,KAAK,UAAU,KAAK,WAAW,WAAW,wBAAwB;AAAA,EACpE;AAEA,MAAI,SAAS,WAAW,GAAG;AACzB,WACE,oBAAC,QAAG,WAAU,mBACZ,8BAAC,SAAM,WAAU,mBAAmB,GAAG,WAAW,gBAAc,SAAS,KAAK,MAAM,GAAG,IAAI,SAAS,QAAY,eAAK,OAAM,GAC7H;AAAA,EAEJ;AAEA,SACE,qBAAC,QAAG,KAAU,WAAW,uCAAuC,OAAO,aAAa,EAAE,IACpF;AAAA,yBAAC,UAAK,WAAU,mBACd;AAAA,0BAAC,SAAM,WAAU,mBAAmB,GAAG,WAAW,gBAAc,SAAS,KAAK,MAAM,GAAG,IAAI,SAAS,QAAY,eAAK,OAAM;AAAA,MAC3H;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,WAAU;AAAA,UACV,iBAAe;AAAA,UACf,iBAAe;AAAA,UACf,cAAY,eAAe,KAAK,KAAK,IAAI,OAAO,YAAY,QAAQ;AAAA,UACpE,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAEhC,8BAAC,SAAI,SAAQ,aAAY,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACzJ,8BAAC,UAAK,GAAE,gBAAe,GACzB;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACA,oBAAC,QAAG,IAAQ,WAAU,kBAAiB,QAAQ,CAAC,MAC7C,mBAAS,IAAI,CAAC,MAAM,MAAM;AACzB,YAAM,UAAU,cAAc,KAAK,IAAI;AACvC,aACE,oBAAC,QAA6B,WAAU,sBACtC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAM,QAAQ,IAAI;AAAA,UAClB,QAAQ,KAAK,WAAW,WAAW,WAAW;AAAA,UAC9C,KAAK,WAAW,KAAK,WAAW,WAAW,wBAAwB;AAAA,UACnE,SAAS,MAAM,QAAQ,KAAK;AAAA,UAC5B,gBAAc,SAAS,KAAK,MAAM,GAAG,IAAI,SAAS;AAAA,UAEjD,eAAK;AAAA;AAAA,MACR,KAVO,GAAG,KAAK,IAAI,IAAI,CAAC,EAW1B;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/demo/DemoStudio.js

@@ -28,8 +28,8 @@ function DemoStudio() {
     /* @__PURE__ */ jsxs("span", { className: "xicms-demostudio__msg", children: [
       "\u270F\uFE0F ",
       /* @__PURE__ */ jsx("strong", { children: "Demo-bewerkmodus." }),
-      " Klik onderaan op ",
-      /* @__PURE__ */ jsx("strong", { children: "\u201CPagina bewerken\u201D" }),
+      " Kies onderaan ",
+      /* @__PURE__ */ jsx("strong", { children: "\u201CBewerken\u201D" }),
       " om blokken aan te passen. Let op: ",
       /* @__PURE__ */ jsx("strong", { children: "wijzigingen worden niet opgeslagen" }),
       " \u2014 ze staan alleen lokaal in jouw browser."

package/dist/demo/DemoStudio.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/demo/DemoStudio.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { useSiteConfig } from \"../config\";\nimport { DEMO_EVENT, isDemoLoggedIn, resetDemo } from \"./demoStore\";\n\n/**\n * Bovenbalk voor de DEMO-bewerkmodus (`config.demoEditing`). Biedt een pseudo-login waarmee\n * bezoekers het beheer (teksten + blokken) kunnen uitproberen, en maakt heel duidelijk dat\n * wijzigingen NIET worden opgeslagen — ze blijven alleen lokaal in de browser en zijn met één\n * klik te resetten. De echte bewerkacties (\"Pagina bewerken\", \"Uitloggen\") staan in de EditBar.\n */\nexport function DemoStudio() {\n  const { demo, demoSignIn } = useAuth();\n  const { siteId } = useSiteConfig();\n  const [loggedIn, setLoggedIn] = useState(false);\n\n  useEffect(() => {\n    if (!demo) return;\n    const sync = () => setLoggedIn(isDemoLoggedIn());\n    sync();\n    window.addEventListener(DEMO_EVENT, sync);\n    return () => window.removeEventListener(DEMO_EVENT, sync);\n  }, [demo]);\n\n  if (!demo) return null;\n\n  return (\n    <div className=\"xicms-demostudio\" role=\"region\" aria-label=\"Demo-bewerkmodus\">\n      {!loggedIn ? (\n        <>\n          <span className=\"xicms-demostudio__msg\">\n            <strong>Probeer het zelf:</strong> log in als demo-beheerder en bewerk teksten, foto&apos;s en\n            blokken — <strong>niets wordt opgeslagen</strong>, je wijzigingen blijven alleen in jouw browser.\n          </span>\n          <button type=\"button\" className=\"xicms-btn\" onClick={demoSignIn}>\n            Probeer het beheer (demo-login)\n          </button>\n        </>\n      ) : (\n        <>\n          <span className=\"xicms-demostudio__msg\">\n            ✏️ <strong>Demo-bewerkmodus.</strong> Klik onderaan op <strong>“Pagina bewerken”</strong> om\n            blokken aan te passen. Let op: <strong>wijzigingen worden niet opgeslagen</strong> — ze staan\n            alleen lokaal in jouw browser.\n          </span>\n          <button\n            type=\"button\"\n            className=\"xicms-btn xicms-btn--ghost\"\n            onClick={() => {\n              resetDemo(siteId);\n              // Herlaad zodat de pagina terugvalt op de oorspronkelijke (seed-)inhoud.\n              if (typeof window !== \"undefined\") window.location.reload();\n            }}\n          >\n            Reset demo\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+BQ,mBAEI,KADF,YADF;AA7BR,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,gBAAgB,iBAAiB;AAQ/C,SAAS,aAAa;AAC3B,QAAM,EAAE,MAAM,WAAW,IAAI,QAAQ;AACrC,QAAM,EAAE,OAAO,IAAI,cAAc;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,MAAM,YAAY,eAAe,CAAC;AAC/C,SAAK;AACL,WAAO,iBAAiB,YAAY,IAAI;AACxC,WAAO,MAAM,OAAO,oBAAoB,YAAY,IAAI;AAAA,EAC1D,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,SACE,oBAAC,SAAI,WAAU,oBAAmB,MAAK,UAAS,cAAW,oBACxD,WAAC,WACA,iCACE;AAAA,yBAAC,UAAK,WAAU,yBACd;AAAA,0BAAC,YAAO,+BAAiB;AAAA,MAAS;AAAA,MACxB,oBAAC,YAAO,oCAAsB;AAAA,MAAS;AAAA,OACnD;AAAA,IACA,oBAAC,YAAO,MAAK,UAAS,WAAU,aAAY,SAAS,YAAY,6CAEjE;AAAA,KACF,IAEA,iCACE;AAAA,yBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,MACnC,oBAAC,YAAO,+BAAiB;AAAA,MAAS;AAAA,MAAkB,oBAAC,YAAO,yCAAiB;AAAA,MAAS;AAAA,MAC1D,oBAAC,YAAO,gDAAkC;AAAA,MAAS;AAAA,OAEpF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,oBAAU,MAAM;AAEhB,cAAI,OAAO,WAAW,YAAa,QAAO,SAAS,OAAO;AAAA,QAC5D;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF,GAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/demo/DemoStudio.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { useSiteConfig } from \"../config\";\nimport { DEMO_EVENT, isDemoLoggedIn, resetDemo } from \"./demoStore\";\n\n/**\n * Bovenbalk voor de DEMO-bewerkmodus (`config.demoEditing`). Biedt een pseudo-login waarmee\n * bezoekers het beheer (teksten + blokken) kunnen uitproberen, en maakt heel duidelijk dat\n * wijzigingen NIET worden opgeslagen — ze blijven alleen lokaal in de browser en zijn met één\n * klik te resetten. De echte bewerkacties (\"Pagina bewerken\", \"Uitloggen\") staan in de EditBar.\n */\nexport function DemoStudio() {\n  const { demo, demoSignIn } = useAuth();\n  const { siteId } = useSiteConfig();\n  const [loggedIn, setLoggedIn] = useState(false);\n\n  useEffect(() => {\n    if (!demo) return;\n    const sync = () => setLoggedIn(isDemoLoggedIn());\n    sync();\n    window.addEventListener(DEMO_EVENT, sync);\n    return () => window.removeEventListener(DEMO_EVENT, sync);\n  }, [demo]);\n\n  if (!demo) return null;\n\n  return (\n    <div className=\"xicms-demostudio\" role=\"region\" aria-label=\"Demo-bewerkmodus\">\n      {!loggedIn ? (\n        <>\n          <span className=\"xicms-demostudio__msg\">\n            <strong>Probeer het zelf:</strong> log in als demo-beheerder en bewerk teksten, foto&apos;s en\n            blokken — <strong>niets wordt opgeslagen</strong>, je wijzigingen blijven alleen in jouw browser.\n          </span>\n          <button type=\"button\" className=\"xicms-btn\" onClick={demoSignIn}>\n            Probeer het beheer (demo-login)\n          </button>\n        </>\n      ) : (\n        <>\n          <span className=\"xicms-demostudio__msg\">\n            ✏️ <strong>Demo-bewerkmodus.</strong> Kies onderaan <strong>“Bewerken”</strong> om\n            blokken aan te passen. Let op: <strong>wijzigingen worden niet opgeslagen</strong> — ze staan\n            alleen lokaal in jouw browser.\n          </span>\n          <button\n            type=\"button\"\n            className=\"xicms-btn xicms-btn--ghost\"\n            onClick={() => {\n              resetDemo(siteId);\n              // Herlaad zodat de pagina terugvalt op de oorspronkelijke (seed-)inhoud.\n              if (typeof window !== \"undefined\") window.location.reload();\n            }}\n          >\n            Reset demo\n          </button>\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+BQ,mBAEI,KADF,YADF;AA7BR,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,YAAY,gBAAgB,iBAAiB;AAQ/C,SAAS,aAAa;AAC3B,QAAM,EAAE,MAAM,WAAW,IAAI,QAAQ;AACrC,QAAM,EAAE,OAAO,IAAI,cAAc;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,MAAM,YAAY,eAAe,CAAC;AAC/C,SAAK;AACL,WAAO,iBAAiB,YAAY,IAAI;AACxC,WAAO,MAAM,OAAO,oBAAoB,YAAY,IAAI;AAAA,EAC1D,GAAG,CAAC,IAAI,CAAC;AAET,MAAI,CAAC,KAAM,QAAO;AAElB,SACE,oBAAC,SAAI,WAAU,oBAAmB,MAAK,UAAS,cAAW,oBACxD,WAAC,WACA,iCACE;AAAA,yBAAC,UAAK,WAAU,yBACd;AAAA,0BAAC,YAAO,+BAAiB;AAAA,MAAS;AAAA,MACxB,oBAAC,YAAO,oCAAsB;AAAA,MAAS;AAAA,OACnD;AAAA,IACA,oBAAC,YAAO,MAAK,UAAS,WAAU,aAAY,SAAS,YAAY,6CAEjE;AAAA,KACF,IAEA,iCACE;AAAA,yBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,MACnC,oBAAC,YAAO,+BAAiB;AAAA,MAAS;AAAA,MAAe,oBAAC,YAAO,kCAAU;AAAA,MAAS;AAAA,MAChD,oBAAC,YAAO,gDAAkC;AAAA,MAAS;AAAA,OAEpF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM;AACb,oBAAU,MAAM;AAEhB,cAAI,OAAO,WAAW,YAAa,QAAO,SAAS,OAAO;AAAA,QAC5D;AAAA,QACD;AAAA;AAAA,IAED;AAAA,KACF,GAEJ;AAEJ;","names":[]}

package/dist/demo/demoStore.d.ts

@@ -33,10 +33,23 @@ export declare function addDemoMedia(siteId: string, item: {
     url: string;
     name: string;
 }): MediaItem;
+/**
+ * Verwijderen in demo-modus (8.5): lokale uploads echt weg; een geseed item wordt alleen voor
+ * deze sessie verborgen (de seed komt bij herladen terug, zoals de rest van de demo).
+ */
+export declare function removeDemoMedia(siteId: string, id: string): void;
 /** Inclusief geheugen-only items (opslag-vol-vangnet) — gebruikt door de kiezer. */
 export declare function listDemoMediaAll(siteId: string): MediaItem[];
 export declare function loadDemoDraft(siteId: string, id: string): Partial<Page> | null;
 export declare function saveDemoDraft(siteId: string, id: string, patch: Partial<Page>): void;
+/**
+ * Alle pagina's die de demo kent (8.6): geseede pagina's plus lokaal aangemaakte/bewerkte, met de
+ * lokale bewerking eroverheen. Voor het paginaoverzicht in het beheer — dat wachtte eerst op een
+ * rechtenfout van de echte database en toonde dan niets.
+ */
+export declare function listDemoPages(siteId: string): Array<Page & {
+    id: string;
+}>;
 /** Verwijdert alle lokale demo-bewerkingen + login voor deze site (de "Reset"-knop). */
 export declare function resetDemo(siteId: string): void;
 /**

package/dist/demo/demoStore.js

@@ -98,6 +98,18 @@ function addDemoMedia(siteId, item) {
   emit();
   return media;
 }
+function removeDemoMedia(siteId, id) {
+  const lokaal = loadLocalDemoMedia(siteId);
+  if (lokaal.some((m) => m.id === id)) {
+    try {
+      window.localStorage.setItem(mediaKey(siteId), JSON.stringify(lokaal.filter((m) => m.id !== id)));
+    } catch {
+    }
+  }
+  memoryOnlyMedia.set(siteId, (memoryOnlyMedia.get(siteId) ?? []).filter((m) => m.id !== id));
+  mediaSeeds.set(siteId, (mediaSeeds.get(siteId) ?? []).filter((m) => m.id !== id));
+  emit();
+}
 function listDemoMediaAll(siteId) {
   return [...memoryOnlyMedia.get(siteId) ?? [], ...listDemoMedia(siteId)];
 }
@@ -122,6 +134,28 @@ function saveDemoDraft(siteId, id, patch) {
   }
   emit();
 }
+function listDemoPages(siteId) {
+  const paden = /* @__PURE__ */ new Set();
+  for (const k of seeds.keys()) if (k.startsWith(`${siteId}::`)) paden.add(k.slice(siteId.length + 2));
+  if (typeof window !== "undefined") {
+    try {
+      const prefix = `${DRAFT_PREFIX}:${siteId}:`;
+      for (let i = 0; i < window.localStorage.length; i++) {
+        const k = window.localStorage.key(i);
+        const pad = k?.startsWith(prefix) ? demoPathForId(k.slice(prefix.length)) : null;
+        if (pad) paden.add(pad);
+      }
+    } catch {
+    }
+  }
+  const lijst = [];
+  for (const pad of paden) {
+    const id = demoIdForPath(pad);
+    const page = resolveDemoPage(siteId, pad) ?? loadDemoDraft(siteId, id);
+    if (page) lijst.push({ ...page, path: page.path ?? pad, id });
+  }
+  return lijst.sort((a, b) => a.path === "/" ? -1 : b.path === "/" ? 1 : (a.order ?? 0) - (b.order ?? 0));
+}
 function resetDemo(siteId) {
   if (typeof window === "undefined") return;
   try {
@@ -156,11 +190,13 @@ export {
   isDemoLoggedIn,
   listDemoMedia,
   listDemoMediaAll,
+  listDemoPages,
   loadDemoDraft,
   registerDemoForm,
   registerDemoMedia,
   registerDemoNews,
   registerSeed,
+  removeDemoMedia,
   resetDemo,
   resolveDemoPage,
   saveDemoDraft,