@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/XiCMSProvider.js

@@ -13,14 +13,19 @@ import { ModulesProvider } from "./modules/context.js";
 import { applyBlockOverrides } from "./modules/overrides.js";
 import { builtinModules } from "./modules/builtins.js";
 import { EditorProvider } from "./editor/EditorProvider.js";
-import { isDarkColor } from "./theme/color.js";
+import { isDarkColor, tekstOpKleur } from "./theme/color.js";
 import { SiteSettingsProvider, useSiteSettings, useSiteSettingsLiveSync } from "./settings/useSiteSettings.js";
 import { mergeThemeTokens } from "./schema/settings.js";
 import { initAppCheck } from "./firebase/appcheck.js";
 import { setDemoActive } from "./demo/demoStore.js";
+import { fontStylesheet, isGoogleFontUrl } from "./theme/fonts.js";
+import { fallbackFontFaces, metFallback } from "./theme/fontFallback.js";
+import { preconnect } from "react-dom";
 import { Theme } from "@astryxdesign/core/theme";
 import { neutralTheme } from "@astryxdesign/theme-neutral/built";
 import { LinkProvider } from "@astryxdesign/core/Link";
+import { InternationalizationProvider } from "@astryxdesign/core/i18n";
+import nlNL from "@astryxdesign/core/locales/nl-NL.generated.js";
 import { ImageProvider } from "./media/ImageContext.js";
 import { validateSiteConfig } from "./schema/siteConfig.js";
 import { validateModuleContract } from "./modules/contract.js";
@@ -35,6 +40,7 @@ function warnOnce(message) {
 function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, customBlocksData, settingsData, children }) {
   useEffect(() => {
     if (!process.env.NEXT_PUBLIC_FIREBASE_APPCHECK_KEY) return;
+    if (!/^\/(beheer|login)(\/|$)/.test(window.location.pathname)) return;
     void initAppCheck();
   }, []);
   useEffect(() => {
@@ -85,7 +91,7 @@ function themeCssVars(theme) {
     "--xicms-bg": ld(theme.background ?? "#ffffff", theme.dark?.background ?? "#0f172a"),
     "--xicms-fg": ld(theme.foreground ?? "#0f172a", theme.dark?.foreground ?? "#e2e8f0")
   };
-  if (theme.fontFamily) cssVars["--xicms-font"] = theme.fontFamily;
+  if (theme.fontFamily) cssVars["--xicms-font"] = metFallback(theme.fontFamily);
   for (const [k, v] of Object.entries(theme.spacing ?? {})) if (v) cssVars[`--xicms-spacing-${k}`] = v;
   if (theme.radius?.sm) cssVars["--xicms-radius-sm"] = theme.radius.sm;
   if (theme.radius?.md) cssVars["--xicms-radius"] = theme.radius.md;
@@ -96,7 +102,7 @@ function themeCssVars(theme) {
   if (theme.dark?.foreground) cssVars["--xicms-fg-dark"] = theme.dark.foreground;
   if (theme.dark?.primary) cssVars["--xicms-primary-dark"] = theme.dark.primary;
   cssVars["--color-accent"] = "var(--xicms-primary)";
-  const onAccent = isDarkColor(theme.primary) ? "#ffffff" : "#0f172a";
+  const onAccent = tekstOpKleur(theme.primary) ?? "#0f172a";
   cssVars["--color-on-accent"] = onAccent;
   cssVars["--xicms-on-primary"] = onAccent;
   cssVars["--color-text-accent"] = "var(--xicms-primary)";
@@ -120,7 +126,7 @@ function themeCssVars(theme) {
     cssVars["--xicms-border"] = "color-mix(in srgb, var(--xicms-fg) 12%, transparent)";
     cssVars["--xicms-border-strong"] = "color-mix(in srgb, var(--xicms-fg) 22%, transparent)";
   }
-  if (theme.headingFont) cssVars["--xicms-font-heading"] = theme.headingFont;
+  if (theme.headingFont) cssVars["--xicms-font-heading"] = metFallback(theme.headingFont);
   if (theme.fontFamily) {
     cssVars["--font-family-body"] = "var(--xicms-font)";
     cssVars["--font-family-heading"] = theme.headingFont ? "var(--xicms-font-heading)" : "var(--xicms-font)";
@@ -143,6 +149,10 @@ function ModuleLayer({
   const { settings } = useSiteSettings();
   const theme = useMemo(() => mergeThemeTokens(config.theme, settings.theme), [config.theme, settings.theme]);
   const cssVars = useMemo(() => themeCssVars(theme), [theme]);
+  const fontFallbackCss = useMemo(() => fallbackFontFaces([theme.fontFamily, theme.headingFont]), [theme.fontFamily, theme.headingFont]);
+  if (theme.fontUrl && !config.selfHostFonts && isGoogleFontUrl(theme.fontUrl)) {
+    preconnect("https://fonts.gstatic.com", { crossOrigin: "anonymous" });
+  }
   useEffect(() => {
     setDemoActive(Boolean(config.demoEditing));
   }, [config.demoEditing]);
@@ -164,8 +174,10 @@ function ModuleLayer({
     /* @__PURE__ */ jsx(CustomBlocksSync, { siteId: config.siteId, onData: setCustomBlocks }),
     /* @__PURE__ */ jsx(SiteSettingsSync, { siteId: config.siteId }),
     /* @__PURE__ */ jsx(ThemeVarsCtx.Provider, { value: { vars: cssVars, darkAuto: themeDarkMode(theme) === "auto" }, children: /* @__PURE__ */ jsxs(EditorProvider, { children: [
-      theme.fontUrl && /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: theme.fontUrl }),
-      /* @__PURE__ */ jsx(Theme, { theme: astryxTheme ?? neutralTheme, mode: themeDarkMode(theme) === "auto" ? "system" : themeDarkMode(theme) === "dark" || isDarkColor(theme.background) ? "dark" : "light", children: /* @__PURE__ */ jsx(LinkProvider, { component: linkComponent ?? "a", children: /* @__PURE__ */ jsx(ImageProvider, { component: imageComponent, children: /* @__PURE__ */ jsx(
+      theme.fontUrl && /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: fontStylesheet(theme.fontUrl, config.selfHostFonts) }),
+      fontFallbackCss && /* @__PURE__ */ jsx("style", { href: "xicms-font-fallback", precedence: "xicms", children: fontFallbackCss }),
+      config.paginaOvergang && /* @__PURE__ */ jsx("style", { href: "xicms-paginaovergang", precedence: "xicms", children: "@view-transition{navigation:auto}" }),
+      /* @__PURE__ */ jsx(Theme, { theme: astryxTheme ?? neutralTheme, mode: themeDarkMode(theme) === "auto" ? "system" : themeDarkMode(theme) === "dark" || isDarkColor(theme.background) ? "dark" : "light", children: /* @__PURE__ */ jsx(InternationalizationProvider, { ...astryxLocale(config.lang), children: /* @__PURE__ */ jsx(LinkProvider, { component: linkComponent ?? "a", children: /* @__PURE__ */ jsx(ImageProvider, { component: imageComponent, children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "xicms-root",
@@ -173,7 +185,7 @@ function ModuleLayer({
           style: cssVars,
           children
         }
-      ) }) }) })
+      ) }) }) }) })
     ] }) })
   ] }) }) });
 }
@@ -231,6 +243,10 @@ function CustomBlocksSync({ siteId, onData }) {
   }, [editing, siteId, onData]);
   return null;
 }
+function astryxLocale(lang) {
+  const l = (lang ?? "nl").toLowerCase();
+  return l === "nl" || l.startsWith("nl-") ? { locale: "nl-NL", messages: { "nl-NL": nlNL } } : { locale: "en" };
+}
 export {
   XiCMSProvider,
   isDarkColor,

package/dist/XiCMSProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/XiCMSProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { ConfigProvider } from \"./config\";\nimport { AuthProvider, useAuth } from \"./auth/AuthProvider\";\nimport { canEdit } from \"./auth/roles\";\nimport { RegistryProvider } from \"./blocks/context\";\nimport { createRegistry, mergeRegistry, type BlockDefinition } from \"./blocks/registry\";\nimport { CustomBlockSchema, type CustomBlock as CustomBlockData } from \"./schema/customBlocks\";\nimport { customBlockToDefinition } from \"./blocks/customTemplate/definition\";\nimport { resolveModules } from \"./modules/registry\";\nimport { ModulesProvider } from \"./modules/context\";\nimport { applyBlockOverrides, type BlockOverrides } from \"./modules/overrides\";\nimport { builtinModules } from \"./modules/builtins\";\nimport type { ModuleDefinition, ModulesSiteConfig } from \"./modules/types\";\nimport { EditorProvider } from \"./editor/EditorProvider\";\n// Puur en dependency-vrij; hier alleen nog geherexporteerd zodat de publieke API gelijk blijft.\nimport { isDarkColor } from \"./theme/color\";\nexport { isDarkColor };\nimport { SiteSettingsProvider, useSiteSettings, useSiteSettingsLiveSync } from \"./settings/useSiteSettings\";\nimport { mergeThemeTokens, type ThemeTokens, type PublicSiteSettings } from \"./schema/settings\";\nimport { initAppCheck } from \"./firebase/appcheck\";\nimport { setDemoActive } from \"./demo/demoStore\";\nimport { Theme, type DefinedTheme } from \"@astryxdesign/core/theme\";\nimport { neutralTheme } from \"@astryxdesign/theme-neutral/built\";\nimport { LinkProvider, type LinkComponentType } from \"@astryxdesign/core/Link\";\nimport { ImageProvider, type ImageComponentType } from \"./media/ImageContext\";\nimport { validateSiteConfig, type SiteConfig } from \"./schema/siteConfig\";\nimport { validateModuleContract } from \"./modules/contract\";\n\ninterface ProviderProps {\n  config: SiteConfig;\n  /** Losse klant-blokken (via `defineBlock`) buiten een module om. Altijd actief. */\n  blocks?: BlockDefinition[];\n  /**\n   * Klant-modules (via `defineModule`) bovenop de ingebouwde. Worden gemerged op `id` (klant wint)\n   * en respecteren `config.modules` voor activatie.\n   */\n  modules?: ModuleDefinition[];\n  /**\n   * Per-site presentatie-overrides per block-type (`{ gallery: { Render: MijnGalerij } }`). Vervangt\n   * alleen het uiterlijk; schema/editor/logica blijven van core. De krachtigste maatwerk-naad.\n   */\n  overrides?: BlockOverrides;\n  /**\n   * SSR-startset van custom blocks (5.0): geef het resultaat van `getSiteCustomBlocks(siteId)`\n   * (server) door zodat runtime-gedefinieerde blokken al in de server-HTML zitten. Zonder deze\n   * prop laadt de provider ze alsnog client-side (werkend, maar pas na hydratie zichtbaar).\n   */\n  customBlocksData?: CustomBlockData[];\n  /**\n   * SSR-startset van de publieke site-instellingen: geef het resultaat van\n   * `getPublicSiteSettings(siteId)` (server) door zodat klant-thema/nav/footer al in de\n   * server-HTML zitten (geen theme-flits bij eerste paint) én publiek geen client-read meer\n   * doet — de ISR-gecachte layout ververst de settings per revalidate. Zonder deze prop laadt\n   * de provider ze alsnog client-side (werkend, maar met mogelijke flits + 1 read per bezoeker).\n   */\n  settingsData?: PublicSiteSettings;\n  /**\n   * Astryx-basistheme voor de hele site (radius-/spacing-/neutralen-karakter). Standaard `neutral`.\n   * Een site kan een ander pakket kiezen (`@astryxdesign/theme-butter`, `-stone`, …) of een eigen\n   * `defineTheme(...)` doorgeven voor component-overrides — zónder core te forken.\n   */\n  astryxTheme?: DefinedTheme;\n  /**\n   * Framework-link-component (bv. Next `Link`) voor soepele client-navigatie + prefetch. Astryx-\n   * componenten met een `href` (knoppen/links/tabs) gebruiken 'm dan i.p.v. een rauwe `<a>` (= volledige\n   * page-reload). Core importeert `next/link` niet zelf (optionele peer) — geef 'm hier door vanuit de site.\n   */\n  linkComponent?: LinkComponentType;\n  /**\n   * Framework-beeldcomponent (bv. Next `Image`) voor automatische beeldoptimalisatie (responsive\n   * srcset, AVIF/WebP, geen layout-shift). Core importeert `next/image` niet zelf — geef 'm hier door.\n   */\n  imageComponent?: ImageComponentType;\n  children: ReactNode;\n}\n\n// Stabiele lege defaults: een `= []`-defaultparameter maakt bij ELKE render een nieuwe\n// array-referentie en laat memo's/effects met `modules`/`blocks` in de deps onnodig hervuren.\nconst NO_BLOCKS: BlockDefinition[] = [];\nconst NO_MODULES: ModuleDefinition[] = [];\n\n// Dev-waarschuwingen één keer per boodschap (React strict-mode dubbelt effects; zonder dedupe\n// verschijnt dezelfde config-waarschuwing telkens opnieuw in de console).\nconst warned = new Set<string>();\nfunction warnOnce(message: string) {\n  if (warned.has(message)) return;\n  warned.add(message);\n  console.warn(message);\n}\n\n/**\n * Wikkel de hele site in deze provider (in `app/layout.tsx`). Hij zet:\n * - de SiteConfig-context (siteId, theme, mode) + live publieke settings (footer/nav/modules);\n * - auth + content (Firebase, env-gedreven; werkt ook zonder Firebase);\n * - de block-registry (ingebouwde + klant-blokken) voor de page-renderer;\n * - de themavariabelen als CSS custom properties;\n * - App Check (alleen als geconfigureerd).\n *\n * De ZICHTBARE site-chrome (bewerkbalk, cookiebanner, demo) staat in `<SiteChrome />` en hoort in\n * de layout van je publieke routes — niet hier, anders verschijnt hij ook over /beheer.\n */\nexport function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, customBlocksData, settingsData, children }: ProviderProps) {\n  useEffect(() => {\n    // App Check hoort bij het praten mét Firebase; een bezoeker doet dat niet. Alleen aanroepen\n    // als er een sleutel is, en de module zelf laadt zijn SDK dynamisch.\n    if (!process.env.NEXT_PUBLIC_FIREBASE_APPCHECK_KEY) return;\n    void initAppCheck();\n  }, []);\n\n  // Dev-vangnet: ontbrekende SSR-seeds. Zonder `settingsData` haalt élke bezoeker de publieke\n  // settings zelf uit Firestore — één read per bezoeker, én het downloaden van de Firebase-SDK\n  // (~680 KB) die anders nooit nodig is. Dat faalt volkomen stil: de site ziet er goed uit.\n  // De referentiesite groenhof liep hier maandenlang op, dus: melden zodra het misgaat.\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    if (!process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID) return; // geen Firebase → geen client-read\n    if (settingsData === undefined) {\n      warnOnce(\n        \"[xicms] `settingsData` ontbreekt op XiCMSProvider. Elke bezoeker doet daardoor zélf een \" +\n          \"Firestore-read voor de site-instellingen en downloadt de Firebase-SDK. Lees ze server-side \" +\n          \"in je layout met `getPublicSiteSettings(siteId)` en geef ze door — zie template/app/layout.tsx.\",\n      );\n    }\n    if (customBlocksData === undefined) {\n      warnOnce(\n        \"[xicms] `customBlocksData` ontbreekt op XiCMSProvider. Custom blocks worden dan pas na \" +\n          \"hydratie zichtbaar (SEO-gat + flits). Lees ze server-side met `getSiteCustomBlocks(siteId)`.\",\n      );\n    }\n  }, [settingsData, customBlocksData]);\n\n  // Dev-vangnet voor (agent-)geschreven configs: meld config- en module-contractfouten meteen in\n  // de console i.p.v. een subtiel kapotte site. In productie geen werk — en er wordt nooit gegooid.\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    const configIssues = validateSiteConfig(config);\n    if (configIssues.length > 0) {\n      warnOnce(`[xicms] site.config.ts bevat problemen:\\n- ${configIssues.join(\"\\n- \")}`);\n    }\n    if (modules.length > 0) {\n      const contractIssues = validateModuleContract(modules);\n      if (contractIssues.length > 0) {\n        warnOnce(`[xicms] klant-modules voldoen niet aan het module-contract:\\n- ${contractIssues.join(\"\\n- \")}`);\n      }\n    }\n  }, [config, modules]);\n\n  return (\n    <ConfigProvider config={config}>\n      <SiteSettingsProvider siteId={config.siteId} initial={settingsData}>\n        <ModuleLayer config={config} blocks={blocks} modules={modules} overrides={overrides} astryxTheme={astryxTheme} linkComponent={linkComponent} imageComponent={imageComponent} customBlocksData={customBlocksData}>\n          {children}\n        </ModuleLayer>\n      </SiteSettingsProvider>\n    </ConfigProvider>\n  );\n}\n\n/**\n * De berekende theme-tokens, beschikbaar BUITEN `.xicms-root`.\n *\n * De visuele editor rendert als overlay naast die div (EditorProvider staat erboven in de boom),\n * dus zijn canvas erfde de merk-tokens niet: een groene primaire kleur werd daar de globale\n * indigo-fallback, en knoptekst kon zelfs samenvallen met de knopachtergrond. Door dezelfde\n * `cssVars` via context te delen toont het canvas exact wat de bezoeker straks ziet — zonder de\n * mapping te dupliceren of de overlay-structuur te verbouwen.\n */\nconst ThemeVarsCtx = createContext<{ vars: Record<string, string>; darkAuto: boolean }>({ vars: {}, darkAuto: false });\n\n/** Theme-tokens van de live site — voor UI die buiten `.xicms-root` rendert (de editor). */\nexport function useThemeVars() {\n  return useContext(ThemeVarsCtx);\n}\n\n/**\n * Theme-tokens → CSS custom properties. Puur; wordt in `ModuleLayer` op het LIVE-gemergde thema\n * toegepast (SiteConfig + `settings/public.theme`), zodat huisstijl-wijzigingen uit /beheer direct\n * op de site verschijnen — net als module-instellingen.\n */\n/**\n * De donkere modus in één plek bepaald, zodat de tokenwaarden en de `data-dark`/`color-scheme` op\n * `.xicms-root` nooit uit elkaar kunnen lopen. `mode` wint; zonder `mode` valt hij terug op de\n * oude boolean, zodat bestaande site-configs (auto: true/false) ongewijzigd blijven werken.\n */\nfunction themeDarkMode(theme: ThemeTokens): \"light\" | \"dark\" | \"auto\" {\n  return theme.dark?.mode ?? (theme.dark?.auto ? \"auto\" : \"light\");\n}\n\nfunction themeCssVars(theme: ThemeTokens): Record<string, string> {\n  // Dark-auto via light-dark(): deze variabelen staan INLINE op `.xicms-root`, en inline wint\n  // altijd van het `@media (prefers-color-scheme: dark)`-blok in styles.css. Alleen dat blok kan\n  // een inline lichte waarde dus nooit overrulen — de tokenwaarde zelf moet meeschakelen.\n  // (styles.css zet `color-scheme: light dark` op `[data-dark=\"auto\"]`, vereist voor light-dark().)\n  // Driestand. `mode` wint; zonder `mode` valt hij terug op de oude boolean, zodat bestaande\n  // site-configs (auto: true/false) ongewijzigd blijven werken.\n  const donkerModus = themeDarkMode(theme);\n  const auto = donkerModus === \"auto\";\n  // Bij \"auto\" schakelt de tokenwaarde zélf mee via light-dark(); bij een vaste stand kiezen we hier\n  // al. Dat moet op tokenniveau en niet via een @media-blok, want deze variabelen staan INLINE op\n  // `.xicms-root` en inline wint altijd van een media-query in styles.css.\n  const ld = (light: string, dark: string) =>\n    donkerModus === \"auto\" ? `light-dark(${light}, ${dark})` : donkerModus === \"dark\" ? dark : light;\n  const cssVars: Record<string, string> = {\n    \"--xicms-primary\": theme.dark?.primary ? ld(theme.primary, theme.dark.primary) : theme.primary,\n    \"--xicms-accent\": theme.accent ?? theme.primary,\n    \"--xicms-bg\": ld(theme.background ?? \"#ffffff\", theme.dark?.background ?? \"#0f172a\"),\n    \"--xicms-fg\": ld(theme.foreground ?? \"#0f172a\", theme.dark?.foreground ?? \"#e2e8f0\"),\n  };\n  if (theme.fontFamily) cssVars[\"--xicms-font\"] = theme.fontFamily;\n  // Optionele schalen → CSS-variabelen (alleen gezet als opgegeven; styles.css heeft defaults).\n  for (const [k, v] of Object.entries(theme.spacing ?? {})) if (v) cssVars[`--xicms-spacing-${k}`] = v;\n  if (theme.radius?.sm) cssVars[\"--xicms-radius-sm\"] = theme.radius.sm;\n  if (theme.radius?.md) cssVars[\"--xicms-radius\"] = theme.radius.md;\n  if (theme.radius?.lg) cssVars[\"--xicms-radius-lg\"] = theme.radius.lg;\n  if (theme.container?.maxWidth) cssVars[\"--xicms-container-max\"] = theme.container.maxWidth;\n  if (theme.container?.padding) cssVars[\"--xicms-container-pad\"] = theme.container.padding;\n  if (theme.dark?.background) cssVars[\"--xicms-bg-dark\"] = theme.dark.background;\n  if (theme.dark?.foreground) cssVars[\"--xicms-fg-dark\"] = theme.dark.foreground;\n  if (theme.dark?.primary) cssVars[\"--xicms-primary-dark\"] = theme.dark.primary;\n\n  // Astryx-tokens op XiCMS-waarden mappen, zodat de Astryx-componenten elke site z'n eigen merk\n  // (kleur/typografie/radius) volgen. Inline op `.xicms-root` → wint over de theme.css-defaults.\n  cssVars[\"--color-accent\"] = \"var(--xicms-primary)\";\n  // Tekst óp de accentkleur: wit op een donkere merkkleur, donker op een lichte (geel/pastel) —\n  // hardcoded wit maakte knop- en bannertekst onleesbaar op lichte primaire kleuren.\n  const onAccent = isDarkColor(theme.primary) ? \"#ffffff\" : \"#0f172a\";\n  cssVars[\"--color-on-accent\"] = onAccent;\n  cssVars[\"--xicms-on-primary\"] = onAccent;\n  cssVars[\"--color-text-accent\"] = \"var(--xicms-primary)\";\n  cssVars[\"--radius-element\"] = \"var(--xicms-radius-sm, 8px)\";\n  cssVars[\"--radius-container\"] = \"var(--xicms-radius, 14px)\";\n  cssVars[\"--radius-page\"] = \"var(--xicms-radius-lg, 24px)\";\n  // Volledige paletmapping — ALLEEN als de site een eigen achtergrond/tekst kiest. Zo verschilt niet\n  // enkel het accent maar de hele sfeer (kaarten, borders, secundaire tekst) per site; een minimale\n  // config blijft op de gepolijste neutrale basis (incl. automatische dark-mode via light-dark()).\n  if (theme.background) {\n    cssVars[\"--color-background-body\"] = \"var(--xicms-bg)\";\n    cssVars[\"--color-background-surface\"] = \"color-mix(in srgb, var(--xicms-fg) 4%, var(--xicms-bg))\";\n    cssVars[\"--color-background-card\"] = \"color-mix(in srgb, var(--xicms-fg) 3%, var(--xicms-bg))\";\n    cssVars[\"--color-background-popover\"] = \"var(--xicms-bg)\";\n    cssVars[\"--color-background-muted\"] = \"color-mix(in srgb, var(--xicms-fg) 6%, var(--xicms-bg))\";\n    // Ook de XiCMS-oppervlaktetokens meeschakelen: hun defaults in styles.css zijn licht (#fff/zwart-\n    // rgba) en het dark-blok vuurt alleen bij `data-dark=\"auto\"`. Zonder deze mapping tonen presets\n    // met een vaste donkere achtergrond (donker-modern, luxe-donker) witte kaarten en zwarte borders.\n    cssVars[\"--xicms-surface\"] = \"color-mix(in srgb, var(--xicms-fg) 3%, var(--xicms-bg))\";\n    cssVars[\"--xicms-muted\"] = \"color-mix(in srgb, var(--xicms-fg) 5%, var(--xicms-bg))\";\n  }\n  if (theme.foreground) {\n    cssVars[\"--color-text-primary\"] = \"var(--xicms-fg)\";\n    cssVars[\"--color-text-secondary\"] = \"color-mix(in srgb, var(--xicms-fg) 65%, transparent)\";\n    cssVars[\"--color-neutral\"] = \"var(--xicms-fg)\";\n    cssVars[\"--color-border\"] = \"color-mix(in srgb, var(--xicms-fg) 14%, transparent)\";\n    cssVars[\"--xicms-border\"] = \"color-mix(in srgb, var(--xicms-fg) 12%, transparent)\";\n    cssVars[\"--xicms-border-strong\"] = \"color-mix(in srgb, var(--xicms-fg) 22%, transparent)\";\n  }\n  if (theme.headingFont) cssVars[\"--xicms-font-heading\"] = theme.headingFont;\n  if (theme.fontFamily) {\n    cssVars[\"--font-family-body\"] = \"var(--xicms-font)\";\n    // Koppen volgen een apart display/serif-font als dat is opgegeven, anders het body-font.\n    cssVars[\"--font-family-heading\"] = theme.headingFont ? \"var(--xicms-font-heading)\" : \"var(--xicms-font)\";\n  } else if (theme.headingFont) {\n    cssVars[\"--font-family-heading\"] = \"var(--xicms-font-heading)\";\n  }\n\n  return cssVars;\n}\n\n/**\n * Binnenlaag: leest de live publieke settings en resolvet daarmee de modules (settings/public.modules\n * legt zich over SiteConfig.modules) én het thema (settings/public.theme over SiteConfig.theme).\n * Zo werken module-aan/uit, -instellingen én huisstijl die de klant in /beheer zet direct door.\n */\nfunction ModuleLayer({\n  config,\n  blocks = NO_BLOCKS,\n  modules = NO_MODULES,\n  overrides,\n  customBlocksData,\n  astryxTheme,\n  linkComponent,\n  imageComponent,\n  children,\n}: ProviderProps) {\n  const { settings } = useSiteSettings();\n\n  // LIVE thema: wijzigingen uit /beheer (settings/public.theme) winnen per token van SiteConfig.\n  const theme = useMemo(() => mergeThemeTokens(config.theme, settings.theme), [config.theme, settings.theme]);\n  const cssVars = useMemo(() => themeCssVars(theme), [theme]);\n\n  // Demo-bewerkmodus globaal markeren zodat de (Firebase-)dataclients lokaal-only werken.\n  // In een effect (niet tijdens render): render-pure + veilig onder concurrent rendering. De\n  // demoStore-default is `false`, dus vóór het effect gedraagt alles zich als niet-demo.\n  useEffect(() => {\n    setDemoActive(Boolean(config.demoEditing));\n  }, [config.demoEditing]);\n\n  const resolved = useMemo(\n    () =>\n      resolveModules([...builtinModules, ...modules], {\n        modules: config.modules,\n        firestoreModules: settings.modules as ModulesSiteConfig | undefined,\n      }),\n    [config.modules, modules, settings.modules],\n  );\n\n  // Custom blocks (5.0): runtime-gedefinieerde bloktypes uit sites/{siteId}/customBlocks.\n  // Publieke bezoekers krijgen UITSLUITEND de SSR-startset (customBlocksData, server-side gelezen) —\n  // géén Firestore-listener per bezoeker (kosten/verbinding). Alleen ingelogde editors krijgen een\n  // live sync (CustomBlocksSync, binnen AuthProvider) zodat een nieuw blok uit /beheer of een\n  // agent-push zonder redeploy in het toevoeg-menu en op de pagina verschijnt.\n  const [customBlocks, setCustomBlocks] = useState<CustomBlockData[]>(customBlocksData ?? []);\n  const customDefs = useMemo(() => customBlocks.map(customBlockToDefinition), [customBlocks]);\n\n  const registry = useMemo(\n    () => applyBlockOverrides(mergeRegistry(mergeRegistry(createRegistry(resolved.blocks), customDefs), blocks), overrides),\n    [resolved.blocks, customDefs, blocks, overrides],\n  );\n\n  return (\n    <ModulesProvider value={resolved}>\n      <RegistryProvider registry={registry}>\n        <AuthProvider siteId={config.siteId} demo={Boolean(config.demoEditing)}>\n            <PreviewDraftSync />\n            <CustomBlocksSync siteId={config.siteId} onData={setCustomBlocks} />\n            <SiteSettingsSync siteId={config.siteId} />\n            <ThemeVarsCtx.Provider value={{ vars: cssVars, darkAuto: themeDarkMode(theme) === \"auto\" }}>\n            <EditorProvider>\n              {/* React 19 hijst <link rel=\"stylesheet\"> automatisch naar <head> → lettertype laadt. */}\n              {theme.fontUrl && <link rel=\"stylesheet\" href={theme.fontUrl} />}\n              {/* Astryx-thema (Neutral basis) — de XiCMS-token-mapping op `.xicms-root` legt elke\n                  site z'n eigen merk eroverheen. */}\n              <Theme theme={astryxTheme ?? neutralTheme} mode={themeDarkMode(theme) === \"auto\" ? \"system\" : themeDarkMode(theme) === \"dark\" || isDarkColor(theme.background) ? \"dark\" : \"light\"}>\n                {/* Framework-router voor Astryx-links/knoppen (soepele client-nav + prefetch);\n                    zonder `linkComponent` valt het terug op een gewone `<a>` (huidig gedrag). */}\n                <LinkProvider component={linkComponent ?? \"a\"}>\n                  <ImageProvider component={imageComponent}>\n                  <div\n                    className=\"xicms-root\"\n                    // Stuurt `color-scheme` (styles.css): \"auto\" = light dark, \"dark\" = dark.\n                    data-dark={themeDarkMode(theme) === \"light\" ? undefined : themeDarkMode(theme)}\n                    style={cssVars as React.CSSProperties}\n                  >\n                    {/* De zichtbare site-chrome (demo-balk, bewerkbalk, feedback, cookiebanner) is\n                        BEWUST geen onderdeel meer van de provider: die hoort bij het site-oppervlak\n                        en werd zo ook over /beheer heen gerenderd — een cookiebanner en een\n                        \"Zet live\"-balk bovenop het CMS. Sites renderen nu `<SiteChrome />` in hun\n                        eigen (site)-layout; zie ./SiteChrome.tsx. */}\n                    {children}\n                  </div>\n                  </ImageProvider>\n                </LinkProvider>\n              </Theme>\n            </EditorProvider>\n            </ThemeVarsCtx.Provider>\n        </AuthProvider>\n      </RegistryProvider>\n    </ModulesProvider>\n  );\n}\n\n/**\n * Live sync van custom blocks — ALLEEN voor ingelogde editors. Publieke bezoekers krijgen de\n * SSR-startset (customBlocksData) en géén Firestore-listener: dat scheelt een collection-read +\n * open verbinding per bezoeker, conform het getDoc-voor-publiek-patroon van useSiteSettings/News.\n */\n/**\n * Live sync van de publieke site-instellingen — ALLEEN voor ingelogde editors (zelfde patroon als\n * CustomBlocksSync). Zo ziet een editor een /beheer-wijziging (footer/nav/thema) meteen op de site,\n * terwijl publiek op de SSR-seed (settingsData) of de eenmalige getDoc blijft draaien.\n */\n/**\n * Zet Next's Draft Mode aan zodra een editor is ingelogd, zodat de pagina-route de gecommitte\n * content-bundel + de ISR-cache overslaat (server/pages.ts, `opts.skipBundle`) en deze browser\n * altijd de nieuwste GEPUBLICEERDE stand ziet — een publicatie in /beheer komt anders pas via het\n * ISR-vangnet mee.\n *\n * WAAROM EEN FETCH EN GEEN `document.cookie` ZOALS HIERVOOR: de vorige opzet zette zelf een\n * `xicms-preview`-cookie, die een proxy vertaalde naar `?preview=1`. Dat werkte niet: een route\n * die `searchParams` in zijn signatuur heeft merkt Next áltijd als dynamisch — ongeacht of de\n * proxy ooit herschrijft. Gemeten op groenhof: `ƒ (Dynamic)` met\n * `Cache-Control: private, no-cache, no-store` voor élke bezoeker. De cache was dus voor iedereen\n * stuk om een knop te bedienen die alleen de beheerder gebruikt.\n *\n * Draft Mode lost precies dát op: het zet de ondertekende `__prerender_bypass`-cookie die Next\n * VÓÓR de cache controleert, buiten de route om. Gemeten met dezelfde opzet: publiek houdt\n * `● (SSG)` met `s-maxage=300`, terwijl het request mét cookie `private, no-cache, no-store`\n * krijgt en vers rendert.\n *\n * Draagt geen rechten — net als de oude cookie. Er wordt nooit meer getoond dan de al-publieke,\n * gepubliceerde content, dus zelf `/api/draft` aanroepen levert hoogstens een verse blik op iets\n * dat toch al openbaar is. Wat het wél kost is een ongecachte render per request; wil je dat\n * dichttimmeren, laat de route dan een Firebase-ID-token verifiëren voor hij `enable()` doet.\n *\n * Faalt stil en onschadelijk als de site `/api/draft` niet heeft (zie template/): dan blijft de\n * beheerder gewoon op de gecachte stand, precies zoals een site zonder preview.\n */\nfunction PreviewDraftSync() {\n  const { role } = useAuth();\n  useEffect(() => {\n    const gewenst = canEdit(role);\n    // Alleen aanroepen als de stand écht moet veranderen. Zonder deze vergelijking zou élke\n    // publieke bezoeker bij élke paginaweergave een POST doen om preview \"uit\" te zetten die al\n    // uit stond — een serverless-aanroep per bezoeker, precies de kosten die deze hele omzetting\n    // moet vermijden.\n    //\n    // De marker is een SESSIE-cookie, net als Next's `__prerender_bypass`: die laatste is httpOnly\n    // en dus onleesbaar voor deze code, dus we houden er zelf een spiegel van bij. Omdat beide\n    // met het browservenster verdwijnen lopen ze niet uit de pas — een marker die de cookie\n    // overleeft zou preview stilletjes uitgeschakeld laten.\n    const gemarkeerd = document.cookie.includes(\"xicms-draft=1\");\n    if (gewenst === gemarkeerd) return;\n    void fetch(`/api/draft?aan=${gewenst ? \"1\" : \"0\"}`, { method: \"POST\" })\n      .then((r) => {\n        if (!r.ok) return; // site zonder /api/draft: laat de marker met rust, dan blijft dit stil.\n        document.cookie = gewenst ? \"xicms-draft=1; path=/; samesite=lax\" : \"xicms-draft=; path=/; max-age=0\";\n      })\n      .catch(() => {});\n  }, [role]);\n  return null;\n}\n\nfunction SiteSettingsSync({ siteId }: { siteId: string }) {\n  const { role } = useAuth();\n  useSiteSettingsLiveSync(siteId, canEdit(role));\n  return null;\n}\n\nfunction CustomBlocksSync({ siteId, onData }: { siteId: string; onData: (defs: CustomBlockData[]) => void }) {\n  const { role } = useAuth();\n  const editing = canEdit(role);\n  useEffect(() => {\n    // Alleen editors luisteren mee (kosten + verbinding), en de SDK laadt pas dán.\n    if (!editing) return;\n    let unsub: (() => void) | undefined;\n    let afgebroken = false;\n    void (async () => {\n      const [{ getDb }, { collection, onSnapshot }] = await Promise.all([\n        import(\"./firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db || afgebroken) return;\n      unsub = onSnapshot(\n      collection(db, \"sites\", siteId, \"customBlocks\"),\n      (snap) => {\n        const defs: CustomBlockData[] = [];\n        snap.forEach((d) => {\n          const res = CustomBlockSchema.safeParse({ ...(d.data() as Record<string, unknown>), type: (d.data() as { type?: string }).type ?? d.id });\n          if (res.success) defs.push(res.data);\n        });\n        onData(defs);\n      },\n      () => undefined, // leesfout → SSR-set blijft staan\n      );\n    })();\n    return () => {\n      afgebroken = true;\n      unsub?.();\n    };\n  }, [editing, siteId, onData]);\n  return null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/XiCMSProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { ConfigProvider } from \"./config\";\nimport { AuthProvider, useAuth } from \"./auth/AuthProvider\";\nimport { canEdit } from \"./auth/roles\";\nimport { RegistryProvider } from \"./blocks/context\";\nimport { createRegistry, mergeRegistry, type BlockDefinition } from \"./blocks/registry\";\nimport { CustomBlockSchema, type CustomBlock as CustomBlockData } from \"./schema/customBlocks\";\nimport { customBlockToDefinition } from \"./blocks/customTemplate/definition\";\nimport { resolveModules } from \"./modules/registry\";\nimport { ModulesProvider } from \"./modules/context\";\nimport { applyBlockOverrides, type BlockOverrides } from \"./modules/overrides\";\nimport { builtinModules } from \"./modules/builtins\";\nimport type { ModuleDefinition, ModulesSiteConfig } from \"./modules/types\";\nimport { EditorProvider } from \"./editor/EditorProvider\";\n// Puur en dependency-vrij; hier alleen nog geherexporteerd zodat de publieke API gelijk blijft.\nimport { isDarkColor, tekstOpKleur } from \"./theme/color\";\nexport { isDarkColor };\nimport { SiteSettingsProvider, useSiteSettings, useSiteSettingsLiveSync } from \"./settings/useSiteSettings\";\nimport { mergeThemeTokens, type ThemeTokens, type PublicSiteSettings } from \"./schema/settings\";\nimport { initAppCheck } from \"./firebase/appcheck\";\nimport { setDemoActive } from \"./demo/demoStore\";\nimport { fontStylesheet, isGoogleFontUrl } from \"./theme/fonts\";\nimport { fallbackFontFaces, metFallback } from \"./theme/fontFallback\";\nimport { preconnect } from \"react-dom\";\nimport { Theme, type DefinedTheme } from \"@astryxdesign/core/theme\";\nimport { neutralTheme } from \"@astryxdesign/theme-neutral/built\";\nimport { LinkProvider, type LinkComponentType } from \"@astryxdesign/core/Link\";\nimport { InternationalizationProvider } from \"@astryxdesign/core/i18n\";\nimport nlNL from \"@astryxdesign/core/locales/nl-NL.generated.js\";\nimport { ImageProvider, type ImageComponentType } from \"./media/ImageContext\";\nimport { validateSiteConfig, type SiteConfig } from \"./schema/siteConfig\";\nimport { validateModuleContract } from \"./modules/contract\";\n\ninterface ProviderProps {\n  config: SiteConfig;\n  /** Losse klant-blokken (via `defineBlock`) buiten een module om. Altijd actief. */\n  blocks?: BlockDefinition[];\n  /**\n   * Klant-modules (via `defineModule`) bovenop de ingebouwde. Worden gemerged op `id` (klant wint)\n   * en respecteren `config.modules` voor activatie.\n   */\n  modules?: ModuleDefinition[];\n  /**\n   * Per-site presentatie-overrides per block-type (`{ gallery: { Render: MijnGalerij } }`). Vervangt\n   * alleen het uiterlijk; schema/editor/logica blijven van core. De krachtigste maatwerk-naad.\n   */\n  overrides?: BlockOverrides;\n  /**\n   * SSR-startset van custom blocks (5.0): geef het resultaat van `getSiteCustomBlocks(siteId)`\n   * (server) door zodat runtime-gedefinieerde blokken al in de server-HTML zitten. Zonder deze\n   * prop laadt de provider ze alsnog client-side (werkend, maar pas na hydratie zichtbaar).\n   */\n  customBlocksData?: CustomBlockData[];\n  /**\n   * SSR-startset van de publieke site-instellingen: geef het resultaat van\n   * `getPublicSiteSettings(siteId)` (server) door zodat klant-thema/nav/footer al in de\n   * server-HTML zitten (geen theme-flits bij eerste paint) én publiek geen client-read meer\n   * doet — de ISR-gecachte layout ververst de settings per revalidate. Zonder deze prop laadt\n   * de provider ze alsnog client-side (werkend, maar met mogelijke flits + 1 read per bezoeker).\n   */\n  settingsData?: PublicSiteSettings;\n  /**\n   * Astryx-basistheme voor de hele site (radius-/spacing-/neutralen-karakter). Standaard `neutral`.\n   * Een site kan een ander pakket kiezen (`@astryxdesign/theme-butter`, `-stone`, …) of een eigen\n   * `defineTheme(...)` doorgeven voor component-overrides — zónder core te forken.\n   */\n  astryxTheme?: DefinedTheme;\n  /**\n   * Framework-link-component (bv. Next `Link`) voor soepele client-navigatie + prefetch. Astryx-\n   * componenten met een `href` (knoppen/links/tabs) gebruiken 'm dan i.p.v. een rauwe `<a>` (= volledige\n   * page-reload). Core importeert `next/link` niet zelf (optionele peer) — geef 'm hier door vanuit de site.\n   */\n  linkComponent?: LinkComponentType;\n  /**\n   * Framework-beeldcomponent (bv. Next `Image`) voor automatische beeldoptimalisatie (responsive\n   * srcset, AVIF/WebP, geen layout-shift). Core importeert `next/image` niet zelf — geef 'm hier door.\n   */\n  imageComponent?: ImageComponentType;\n  children: ReactNode;\n}\n\n// Stabiele lege defaults: een `= []`-defaultparameter maakt bij ELKE render een nieuwe\n// array-referentie en laat memo's/effects met `modules`/`blocks` in de deps onnodig hervuren.\nconst NO_BLOCKS: BlockDefinition[] = [];\nconst NO_MODULES: ModuleDefinition[] = [];\n\n// Dev-waarschuwingen één keer per boodschap (React strict-mode dubbelt effects; zonder dedupe\n// verschijnt dezelfde config-waarschuwing telkens opnieuw in de console).\nconst warned = new Set<string>();\nfunction warnOnce(message: string) {\n  if (warned.has(message)) return;\n  warned.add(message);\n  console.warn(message);\n}\n\n/**\n * Wikkel de hele site in deze provider (in `app/layout.tsx`). Hij zet:\n * - de SiteConfig-context (siteId, theme, mode) + live publieke settings (footer/nav/modules);\n * - auth + content (Firebase, env-gedreven; werkt ook zonder Firebase);\n * - de block-registry (ingebouwde + klant-blokken) voor de page-renderer;\n * - de themavariabelen als CSS custom properties;\n * - App Check (alleen als geconfigureerd).\n *\n * De ZICHTBARE site-chrome (bewerkbalk, cookiebanner, demo) staat in `<SiteChrome />` en hoort in\n * de layout van je publieke routes — niet hier, anders verschijnt hij ook over /beheer.\n */\nexport function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, customBlocksData, settingsData, children }: ProviderProps) {\n  useEffect(() => {\n    // App Check hoort bij het praten mét Firebase; een bezoeker doet dat niet. 8.16: op de\n    // publieke pagina's nu helemaal niet meer vooraf — reCAPTCHA laadde scripts van Google bij\n    // ELKE bezoeker, ook zonder formulier of bestelling. `callable()` start het nu pas vlak vóór\n    // een formulier/bestelling, en de AuthProvider zodra iemand inlogt. Alleen het beheer\n    // (inlogscherm) start het meteen.\n    if (!process.env.NEXT_PUBLIC_FIREBASE_APPCHECK_KEY) return;\n    if (!/^\\/(beheer|login)(\\/|$)/.test(window.location.pathname)) return;\n    void initAppCheck();\n  }, []);\n\n  // Dev-vangnet: ontbrekende SSR-seeds. Zonder `settingsData` haalt élke bezoeker de publieke\n  // settings zelf uit Firestore — één read per bezoeker, én het downloaden van de Firebase-SDK\n  // (~680 KB) die anders nooit nodig is. Dat faalt volkomen stil: de site ziet er goed uit.\n  // De referentiesite groenhof liep hier maandenlang op, dus: melden zodra het misgaat.\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    if (!process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID) return; // geen Firebase → geen client-read\n    if (settingsData === undefined) {\n      warnOnce(\n        \"[xicms] `settingsData` ontbreekt op XiCMSProvider. Elke bezoeker doet daardoor zélf een \" +\n          \"Firestore-read voor de site-instellingen en downloadt de Firebase-SDK. Lees ze server-side \" +\n          \"in je layout met `getPublicSiteSettings(siteId)` en geef ze door — zie template/app/layout.tsx.\",\n      );\n    }\n    if (customBlocksData === undefined) {\n      warnOnce(\n        \"[xicms] `customBlocksData` ontbreekt op XiCMSProvider. Custom blocks worden dan pas na \" +\n          \"hydratie zichtbaar (SEO-gat + flits). Lees ze server-side met `getSiteCustomBlocks(siteId)`.\",\n      );\n    }\n  }, [settingsData, customBlocksData]);\n\n  // Dev-vangnet voor (agent-)geschreven configs: meld config- en module-contractfouten meteen in\n  // de console i.p.v. een subtiel kapotte site. In productie geen werk — en er wordt nooit gegooid.\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    const configIssues = validateSiteConfig(config);\n    if (configIssues.length > 0) {\n      warnOnce(`[xicms] site.config.ts bevat problemen:\\n- ${configIssues.join(\"\\n- \")}`);\n    }\n    if (modules.length > 0) {\n      const contractIssues = validateModuleContract(modules);\n      if (contractIssues.length > 0) {\n        warnOnce(`[xicms] klant-modules voldoen niet aan het module-contract:\\n- ${contractIssues.join(\"\\n- \")}`);\n      }\n    }\n  }, [config, modules]);\n\n  return (\n    <ConfigProvider config={config}>\n      <SiteSettingsProvider siteId={config.siteId} initial={settingsData}>\n        <ModuleLayer config={config} blocks={blocks} modules={modules} overrides={overrides} astryxTheme={astryxTheme} linkComponent={linkComponent} imageComponent={imageComponent} customBlocksData={customBlocksData}>\n          {children}\n        </ModuleLayer>\n      </SiteSettingsProvider>\n    </ConfigProvider>\n  );\n}\n\n/**\n * De berekende theme-tokens, beschikbaar BUITEN `.xicms-root`.\n *\n * De visuele editor rendert als overlay naast die div (EditorProvider staat erboven in de boom),\n * dus zijn canvas erfde de merk-tokens niet: een groene primaire kleur werd daar de globale\n * indigo-fallback, en knoptekst kon zelfs samenvallen met de knopachtergrond. Door dezelfde\n * `cssVars` via context te delen toont het canvas exact wat de bezoeker straks ziet — zonder de\n * mapping te dupliceren of de overlay-structuur te verbouwen.\n */\nconst ThemeVarsCtx = createContext<{ vars: Record<string, string>; darkAuto: boolean }>({ vars: {}, darkAuto: false });\n\n/** Theme-tokens van de live site — voor UI die buiten `.xicms-root` rendert (de editor). */\nexport function useThemeVars() {\n  return useContext(ThemeVarsCtx);\n}\n\n/**\n * Theme-tokens → CSS custom properties. Puur; wordt in `ModuleLayer` op het LIVE-gemergde thema\n * toegepast (SiteConfig + `settings/public.theme`), zodat huisstijl-wijzigingen uit /beheer direct\n * op de site verschijnen — net als module-instellingen.\n */\n/**\n * De donkere modus in één plek bepaald, zodat de tokenwaarden en de `data-dark`/`color-scheme` op\n * `.xicms-root` nooit uit elkaar kunnen lopen. `mode` wint; zonder `mode` valt hij terug op de\n * oude boolean, zodat bestaande site-configs (auto: true/false) ongewijzigd blijven werken.\n */\nfunction themeDarkMode(theme: ThemeTokens): \"light\" | \"dark\" | \"auto\" {\n  return theme.dark?.mode ?? (theme.dark?.auto ? \"auto\" : \"light\");\n}\n\nfunction themeCssVars(theme: ThemeTokens): Record<string, string> {\n  // Dark-auto via light-dark(): deze variabelen staan INLINE op `.xicms-root`, en inline wint\n  // altijd van het `@media (prefers-color-scheme: dark)`-blok in styles.css. Alleen dat blok kan\n  // een inline lichte waarde dus nooit overrulen — de tokenwaarde zelf moet meeschakelen.\n  // (styles.css zet `color-scheme: light dark` op `[data-dark=\"auto\"]`, vereist voor light-dark().)\n  // Driestand. `mode` wint; zonder `mode` valt hij terug op de oude boolean, zodat bestaande\n  // site-configs (auto: true/false) ongewijzigd blijven werken.\n  const donkerModus = themeDarkMode(theme);\n  const auto = donkerModus === \"auto\";\n  // Bij \"auto\" schakelt de tokenwaarde zélf mee via light-dark(); bij een vaste stand kiezen we hier\n  // al. Dat moet op tokenniveau en niet via een @media-blok, want deze variabelen staan INLINE op\n  // `.xicms-root` en inline wint altijd van een media-query in styles.css.\n  const ld = (light: string, dark: string) =>\n    donkerModus === \"auto\" ? `light-dark(${light}, ${dark})` : donkerModus === \"dark\" ? dark : light;\n  const cssVars: Record<string, string> = {\n    \"--xicms-primary\": theme.dark?.primary ? ld(theme.primary, theme.dark.primary) : theme.primary,\n    \"--xicms-accent\": theme.accent ?? theme.primary,\n    \"--xicms-bg\": ld(theme.background ?? \"#ffffff\", theme.dark?.background ?? \"#0f172a\"),\n    \"--xicms-fg\": ld(theme.foreground ?? \"#0f172a\", theme.dark?.foreground ?? \"#e2e8f0\"),\n  };\n  // 8.8: met een reserve-lettertype op maat erachter (geen verspringende tekst bij het laden).\n  if (theme.fontFamily) cssVars[\"--xicms-font\"] = metFallback(theme.fontFamily)!;\n  // Optionele schalen → CSS-variabelen (alleen gezet als opgegeven; styles.css heeft defaults).\n  for (const [k, v] of Object.entries(theme.spacing ?? {})) if (v) cssVars[`--xicms-spacing-${k}`] = v;\n  if (theme.radius?.sm) cssVars[\"--xicms-radius-sm\"] = theme.radius.sm;\n  if (theme.radius?.md) cssVars[\"--xicms-radius\"] = theme.radius.md;\n  if (theme.radius?.lg) cssVars[\"--xicms-radius-lg\"] = theme.radius.lg;\n  if (theme.container?.maxWidth) cssVars[\"--xicms-container-max\"] = theme.container.maxWidth;\n  if (theme.container?.padding) cssVars[\"--xicms-container-pad\"] = theme.container.padding;\n  if (theme.dark?.background) cssVars[\"--xicms-bg-dark\"] = theme.dark.background;\n  if (theme.dark?.foreground) cssVars[\"--xicms-fg-dark\"] = theme.dark.foreground;\n  if (theme.dark?.primary) cssVars[\"--xicms-primary-dark\"] = theme.dark.primary;\n\n  // Astryx-tokens op XiCMS-waarden mappen, zodat de Astryx-componenten elke site z'n eigen merk\n  // (kleur/typografie/radius) volgen. Inline op `.xicms-root` → wint over de theme.css-defaults.\n  cssVars[\"--color-accent\"] = \"var(--xicms-primary)\";\n  // Tekst óp de accentkleur: wit op een donkere merkkleur, donker op een lichte (geel/pastel) —\n  // hardcoded wit maakte knop- en bannertekst onleesbaar op lichte primaire kleuren.\n  const onAccent = tekstOpKleur(theme.primary) ?? \"#0f172a\";\n  cssVars[\"--color-on-accent\"] = onAccent;\n  cssVars[\"--xicms-on-primary\"] = onAccent;\n  cssVars[\"--color-text-accent\"] = \"var(--xicms-primary)\";\n  cssVars[\"--radius-element\"] = \"var(--xicms-radius-sm, 8px)\";\n  cssVars[\"--radius-container\"] = \"var(--xicms-radius, 14px)\";\n  cssVars[\"--radius-page\"] = \"var(--xicms-radius-lg, 24px)\";\n  // Volledige paletmapping — ALLEEN als de site een eigen achtergrond/tekst kiest. Zo verschilt niet\n  // enkel het accent maar de hele sfeer (kaarten, borders, secundaire tekst) per site; een minimale\n  // config blijft op de gepolijste neutrale basis (incl. automatische dark-mode via light-dark()).\n  if (theme.background) {\n    cssVars[\"--color-background-body\"] = \"var(--xicms-bg)\";\n    cssVars[\"--color-background-surface\"] = \"color-mix(in srgb, var(--xicms-fg) 4%, var(--xicms-bg))\";\n    cssVars[\"--color-background-card\"] = \"color-mix(in srgb, var(--xicms-fg) 3%, var(--xicms-bg))\";\n    cssVars[\"--color-background-popover\"] = \"var(--xicms-bg)\";\n    cssVars[\"--color-background-muted\"] = \"color-mix(in srgb, var(--xicms-fg) 6%, var(--xicms-bg))\";\n    // Ook de XiCMS-oppervlaktetokens meeschakelen: hun defaults in styles.css zijn licht (#fff/zwart-\n    // rgba) en het dark-blok vuurt alleen bij `data-dark=\"auto\"`. Zonder deze mapping tonen presets\n    // met een vaste donkere achtergrond (donker-modern, luxe-donker) witte kaarten en zwarte borders.\n    cssVars[\"--xicms-surface\"] = \"color-mix(in srgb, var(--xicms-fg) 3%, var(--xicms-bg))\";\n    cssVars[\"--xicms-muted\"] = \"color-mix(in srgb, var(--xicms-fg) 5%, var(--xicms-bg))\";\n  }\n  if (theme.foreground) {\n    cssVars[\"--color-text-primary\"] = \"var(--xicms-fg)\";\n    cssVars[\"--color-text-secondary\"] = \"color-mix(in srgb, var(--xicms-fg) 65%, transparent)\";\n    cssVars[\"--color-neutral\"] = \"var(--xicms-fg)\";\n    cssVars[\"--color-border\"] = \"color-mix(in srgb, var(--xicms-fg) 14%, transparent)\";\n    cssVars[\"--xicms-border\"] = \"color-mix(in srgb, var(--xicms-fg) 12%, transparent)\";\n    cssVars[\"--xicms-border-strong\"] = \"color-mix(in srgb, var(--xicms-fg) 22%, transparent)\";\n  }\n  if (theme.headingFont) cssVars[\"--xicms-font-heading\"] = metFallback(theme.headingFont)!;\n  if (theme.fontFamily) {\n    cssVars[\"--font-family-body\"] = \"var(--xicms-font)\";\n    // Koppen volgen een apart display/serif-font als dat is opgegeven, anders het body-font.\n    cssVars[\"--font-family-heading\"] = theme.headingFont ? \"var(--xicms-font-heading)\" : \"var(--xicms-font)\";\n  } else if (theme.headingFont) {\n    cssVars[\"--font-family-heading\"] = \"var(--xicms-font-heading)\";\n  }\n\n  return cssVars;\n}\n\n/**\n * Binnenlaag: leest de live publieke settings en resolvet daarmee de modules (settings/public.modules\n * legt zich over SiteConfig.modules) én het thema (settings/public.theme over SiteConfig.theme).\n * Zo werken module-aan/uit, -instellingen én huisstijl die de klant in /beheer zet direct door.\n */\nfunction ModuleLayer({\n  config,\n  blocks = NO_BLOCKS,\n  modules = NO_MODULES,\n  overrides,\n  customBlocksData,\n  astryxTheme,\n  linkComponent,\n  imageComponent,\n  children,\n}: ProviderProps) {\n  const { settings } = useSiteSettings();\n\n  // LIVE thema: wijzigingen uit /beheer (settings/public.theme) winnen per token van SiteConfig.\n  const theme = useMemo(() => mergeThemeTokens(config.theme, settings.theme), [config.theme, settings.theme]);\n  const cssVars = useMemo(() => themeCssVars(theme), [theme]);\n  const fontFallbackCss = useMemo(() => fallbackFontFaces([theme.fontFamily, theme.headingFont]), [theme.fontFamily, theme.headingFont]);\n  // 8.8: laadt de site Google Fonts rechtstreeks, open dan alvast de verbinding naar de bestanden.\n  if (theme.fontUrl && !config.selfHostFonts && isGoogleFontUrl(theme.fontUrl)) {\n    preconnect(\"https://fonts.gstatic.com\", { crossOrigin: \"anonymous\" });\n  }\n\n  // Demo-bewerkmodus globaal markeren zodat de (Firebase-)dataclients lokaal-only werken.\n  // In een effect (niet tijdens render): render-pure + veilig onder concurrent rendering. De\n  // demoStore-default is `false`, dus vóór het effect gedraagt alles zich als niet-demo.\n  useEffect(() => {\n    setDemoActive(Boolean(config.demoEditing));\n  }, [config.demoEditing]);\n\n  const resolved = useMemo(\n    () =>\n      resolveModules([...builtinModules, ...modules], {\n        modules: config.modules,\n        firestoreModules: settings.modules as ModulesSiteConfig | undefined,\n      }),\n    [config.modules, modules, settings.modules],\n  );\n\n  // Custom blocks (5.0): runtime-gedefinieerde bloktypes uit sites/{siteId}/customBlocks.\n  // Publieke bezoekers krijgen UITSLUITEND de SSR-startset (customBlocksData, server-side gelezen) —\n  // géén Firestore-listener per bezoeker (kosten/verbinding). Alleen ingelogde editors krijgen een\n  // live sync (CustomBlocksSync, binnen AuthProvider) zodat een nieuw blok uit /beheer of een\n  // agent-push zonder redeploy in het toevoeg-menu en op de pagina verschijnt.\n  const [customBlocks, setCustomBlocks] = useState<CustomBlockData[]>(customBlocksData ?? []);\n  const customDefs = useMemo(() => customBlocks.map(customBlockToDefinition), [customBlocks]);\n\n  const registry = useMemo(\n    () => applyBlockOverrides(mergeRegistry(mergeRegistry(createRegistry(resolved.blocks), customDefs), blocks), overrides),\n    [resolved.blocks, customDefs, blocks, overrides],\n  );\n\n  return (\n    <ModulesProvider value={resolved}>\n      <RegistryProvider registry={registry}>\n        <AuthProvider siteId={config.siteId} demo={Boolean(config.demoEditing)}>\n            <PreviewDraftSync />\n            <CustomBlocksSync siteId={config.siteId} onData={setCustomBlocks} />\n            <SiteSettingsSync siteId={config.siteId} />\n            <ThemeVarsCtx.Provider value={{ vars: cssVars, darkAuto: themeDarkMode(theme) === \"auto\" }}>\n            <EditorProvider>\n              {/* React 19 hijst <link rel=\"stylesheet\"> automatisch naar <head> → lettertype laadt. */}\n              {theme.fontUrl && <link rel=\"stylesheet\" href={fontStylesheet(theme.fontUrl, config.selfHostFonts)} />}\n              {/* 8.8: reserve-lettertypen op maat (zie theme/fontFallback.ts); React hijst ze naar <head>. */}\n              {fontFallbackCss && (\n                <style href=\"xicms-font-fallback\" precedence=\"xicms\">\n                  {fontFallbackCss}\n                </style>\n              )}\n              {/* 8.8: ook bij een volledige paginaload (gewone <a>, andere tab) een rustige overgang. */}\n              {config.paginaOvergang && (\n                <style href=\"xicms-paginaovergang\" precedence=\"xicms\">\n                  {\"@view-transition{navigation:auto}\"}\n                </style>\n              )}\n              {/* Astryx-thema (Neutral basis) — de XiCMS-token-mapping op `.xicms-root` legt elke\n                  site z'n eigen merk eroverheen. */}\n              <Theme theme={astryxTheme ?? neutralTheme} mode={themeDarkMode(theme) === \"auto\" ? \"system\" : themeDarkMode(theme) === \"dark\" || isDarkColor(theme.background) ? \"dark\" : \"light\"}>\n                {/* Framework-router voor Astryx-links/knoppen (soepele client-nav + prefetch);\n                    zonder `linkComponent` valt het terug op een gewone `<a>` (huidig gedrag). */}\n                {/* 8.0: Astryx-teksten (o.a. \"Verplicht\"/\"Optioneel\" bij velden, schermlezer-meldingen)\n                    in de taal van de site. Zonder provider sprak Astryx overal Engels. */}\n                <InternationalizationProvider {...astryxLocale(config.lang)}>\n                <LinkProvider component={linkComponent ?? \"a\"}>\n                  <ImageProvider component={imageComponent}>\n                  <div\n                    className=\"xicms-root\"\n                    // Stuurt `color-scheme` (styles.css): \"auto\" = light dark, \"dark\" = dark.\n                    data-dark={themeDarkMode(theme) === \"light\" ? undefined : themeDarkMode(theme)}\n                    style={cssVars as React.CSSProperties}\n                  >\n                    {/* De zichtbare site-chrome (demo-balk, bewerkbalk, feedback, cookiebanner) is\n                        BEWUST geen onderdeel meer van de provider: die hoort bij het site-oppervlak\n                        en werd zo ook over /beheer heen gerenderd — een cookiebanner en een\n                        \"Zet live\"-balk bovenop het CMS. Sites renderen nu `<SiteChrome />` in hun\n                        eigen (site)-layout; zie ./SiteChrome.tsx. */}\n                    {children}\n                  </div>\n                  </ImageProvider>\n                </LinkProvider>\n                </InternationalizationProvider>\n              </Theme>\n            </EditorProvider>\n            </ThemeVarsCtx.Provider>\n        </AuthProvider>\n      </RegistryProvider>\n    </ModulesProvider>\n  );\n}\n\n/**\n * Live sync van custom blocks — ALLEEN voor ingelogde editors. Publieke bezoekers krijgen de\n * SSR-startset (customBlocksData) en géén Firestore-listener: dat scheelt een collection-read +\n * open verbinding per bezoeker, conform het getDoc-voor-publiek-patroon van useSiteSettings/News.\n */\n/**\n * Live sync van de publieke site-instellingen — ALLEEN voor ingelogde editors (zelfde patroon als\n * CustomBlocksSync). Zo ziet een editor een /beheer-wijziging (footer/nav/thema) meteen op de site,\n * terwijl publiek op de SSR-seed (settingsData) of de eenmalige getDoc blijft draaien.\n */\n/**\n * Zet Next's Draft Mode aan zodra een editor is ingelogd, zodat de pagina-route de gecommitte\n * content-bundel + de ISR-cache overslaat (server/pages.ts, `opts.skipBundle`) en deze browser\n * altijd de nieuwste GEPUBLICEERDE stand ziet — een publicatie in /beheer komt anders pas via het\n * ISR-vangnet mee.\n *\n * WAAROM EEN FETCH EN GEEN `document.cookie` ZOALS HIERVOOR: de vorige opzet zette zelf een\n * `xicms-preview`-cookie, die een proxy vertaalde naar `?preview=1`. Dat werkte niet: een route\n * die `searchParams` in zijn signatuur heeft merkt Next áltijd als dynamisch — ongeacht of de\n * proxy ooit herschrijft. Gemeten op groenhof: `ƒ (Dynamic)` met\n * `Cache-Control: private, no-cache, no-store` voor élke bezoeker. De cache was dus voor iedereen\n * stuk om een knop te bedienen die alleen de beheerder gebruikt.\n *\n * Draft Mode lost precies dát op: het zet de ondertekende `__prerender_bypass`-cookie die Next\n * VÓÓR de cache controleert, buiten de route om. Gemeten met dezelfde opzet: publiek houdt\n * `● (SSG)` met `s-maxage=300`, terwijl het request mét cookie `private, no-cache, no-store`\n * krijgt en vers rendert.\n *\n * Draagt geen rechten — net als de oude cookie. Er wordt nooit meer getoond dan de al-publieke,\n * gepubliceerde content, dus zelf `/api/draft` aanroepen levert hoogstens een verse blik op iets\n * dat toch al openbaar is. Wat het wél kost is een ongecachte render per request; wil je dat\n * dichttimmeren, laat de route dan een Firebase-ID-token verifiëren voor hij `enable()` doet.\n *\n * Faalt stil en onschadelijk als de site `/api/draft` niet heeft (zie template/): dan blijft de\n * beheerder gewoon op de gecachte stand, precies zoals een site zonder preview.\n */\nfunction PreviewDraftSync() {\n  const { role } = useAuth();\n  useEffect(() => {\n    const gewenst = canEdit(role);\n    // Alleen aanroepen als de stand écht moet veranderen. Zonder deze vergelijking zou élke\n    // publieke bezoeker bij élke paginaweergave een POST doen om preview \"uit\" te zetten die al\n    // uit stond — een serverless-aanroep per bezoeker, precies de kosten die deze hele omzetting\n    // moet vermijden.\n    //\n    // De marker is een SESSIE-cookie, net als Next's `__prerender_bypass`: die laatste is httpOnly\n    // en dus onleesbaar voor deze code, dus we houden er zelf een spiegel van bij. Omdat beide\n    // met het browservenster verdwijnen lopen ze niet uit de pas — een marker die de cookie\n    // overleeft zou preview stilletjes uitgeschakeld laten.\n    const gemarkeerd = document.cookie.includes(\"xicms-draft=1\");\n    if (gewenst === gemarkeerd) return;\n    void fetch(`/api/draft?aan=${gewenst ? \"1\" : \"0\"}`, { method: \"POST\" })\n      .then((r) => {\n        if (!r.ok) return; // site zonder /api/draft: laat de marker met rust, dan blijft dit stil.\n        document.cookie = gewenst ? \"xicms-draft=1; path=/; samesite=lax\" : \"xicms-draft=; path=/; max-age=0\";\n      })\n      .catch(() => {});\n  }, [role]);\n  return null;\n}\n\nfunction SiteSettingsSync({ siteId }: { siteId: string }) {\n  const { role } = useAuth();\n  useSiteSettingsLiveSync(siteId, canEdit(role));\n  return null;\n}\n\nfunction CustomBlocksSync({ siteId, onData }: { siteId: string; onData: (defs: CustomBlockData[]) => void }) {\n  const { role } = useAuth();\n  const editing = canEdit(role);\n  useEffect(() => {\n    // Alleen editors luisteren mee (kosten + verbinding), en de SDK laadt pas dán.\n    if (!editing) return;\n    let unsub: (() => void) | undefined;\n    let afgebroken = false;\n    void (async () => {\n      const [{ getDb }, { collection, onSnapshot }] = await Promise.all([\n        import(\"./firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db || afgebroken) return;\n      unsub = onSnapshot(\n      collection(db, \"sites\", siteId, \"customBlocks\"),\n      (snap) => {\n        const defs: CustomBlockData[] = [];\n        snap.forEach((d) => {\n          const res = CustomBlockSchema.safeParse({ ...(d.data() as Record<string, unknown>), type: (d.data() as { type?: string }).type ?? d.id });\n          if (res.success) defs.push(res.data);\n        });\n        onData(defs);\n      },\n      () => undefined, // leesfout → SSR-set blijft staan\n      );\n    })();\n    return () => {\n      afgebroken = true;\n      unsub?.();\n    };\n  }, [editing, siteId, onData]);\n  return null;\n}\n\n/** Astryx-locale bij `SiteConfig.lang`. Alleen Nederlands wordt meegebundeld (~5 KB gzip); andere talen vallen terug op het ingebouwde Engels. */\nfunction astryxLocale(lang: string | undefined): { locale: string; messages?: { \"nl-NL\": typeof nlNL } } {\n  const l = (lang ?? \"nl\").toLowerCase();\n  return l === \"nl\" || l.startsWith(\"nl-\") ? { locale: \"nl-NL\", messages: { \"nl-NL\": nlNL } } : { locale: \"en\" };\n}\n"],"mappings":";AAiKQ,cAsLI,YAtLJ;AA/JR,SAAS,eAAe,YAAY,WAAW,SAAS,gBAAgC;AACxF,SAAS,sBAAsB;AAC/B,SAAS,cAAc,eAAe;AACtC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,gBAAgB,qBAA2C;AACpE,SAAS,yBAA8D;AACvE,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,2BAAgD;AACzD,SAAS,sBAAsB;AAE/B,SAAS,sBAAsB;AAE/B,SAAS,aAAa,oBAAoB;AAE1C,SAAS,sBAAsB,iBAAiB,+BAA+B;AAC/E,SAAS,wBAAmE;AAC5E,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,mBAAmB,mBAAmB;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,aAAgC;AACzC,SAAS,oBAAoB;AAC7B,SAAS,oBAA4C;AACrD,SAAS,oCAAoC;AAC7C,OAAO,UAAU;AACjB,SAAS,qBAA8C;AACvD,SAAS,0BAA2C;AACpD,SAAS,8BAA8B;AAoDvC,MAAM,YAA+B,CAAC;AACtC,MAAM,aAAiC,CAAC;AAIxC,MAAM,SAAS,oBAAI,IAAY;AAC/B,SAAS,SAAS,SAAiB;AACjC,MAAI,OAAO,IAAI,OAAO,EAAG;AACzB,SAAO,IAAI,OAAO;AAClB,UAAQ,KAAK,OAAO;AACtB;AAaO,SAAS,cAAc,EAAE,QAAQ,SAAS,WAAW,UAAU,YAAY,WAAW,aAAa,eAAe,gBAAgB,kBAAkB,cAAc,SAAS,GAAkB;AAClM,YAAU,MAAM;AAMd,QAAI,CAAC,QAAQ,IAAI,kCAAmC;AACpD,QAAI,CAAC,0BAA0B,KAAK,OAAO,SAAS,QAAQ,EAAG;AAC/D,SAAK,aAAa;AAAA,EACpB,GAAG,CAAC,CAAC;AAML,YAAU,MAAM;AACd,QAAI,QAAQ,IAAI,aAAa,aAAc;AAC3C,QAAI,CAAC,QAAQ,IAAI,gCAAiC;AAClD,QAAI,iBAAiB,QAAW;AAC9B;AAAA,QACE;AAAA,MAGF;AAAA,IACF;AACA,QAAI,qBAAqB,QAAW;AAClC;AAAA,QACE;AAAA,MAEF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,cAAc,gBAAgB,CAAC;AAInC,YAAU,MAAM;AACd,QAAI,QAAQ,IAAI,aAAa,aAAc;AAC3C,UAAM,eAAe,mBAAmB,MAAM;AAC9C,QAAI,aAAa,SAAS,GAAG;AAC3B,eAAS;AAAA,IAA8C,aAAa,KAAK,MAAM,CAAC,EAAE;AAAA,IACpF;AACA,QAAI,QAAQ,SAAS,GAAG;AACtB,YAAM,iBAAiB,uBAAuB,OAAO;AACrD,UAAI,eAAe,SAAS,GAAG;AAC7B,iBAAS;AAAA,IAAkE,eAAe,KAAK,MAAM,CAAC,EAAE;AAAA,MAC1G;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SACE,oBAAC,kBAAe,QACd,8BAAC,wBAAqB,QAAQ,OAAO,QAAQ,SAAS,cACpD,8BAAC,eAAY,QAAgB,QAAgB,SAAkB,WAAsB,aAA0B,eAA8B,gBAAgC,kBAC1K,UACH,GACF,GACF;AAEJ;AAWA,MAAM,eAAe,cAAmE,EAAE,MAAM,CAAC,GAAG,UAAU,MAAM,CAAC;AAG9G,SAAS,eAAe;AAC7B,SAAO,WAAW,YAAY;AAChC;AAYA,SAAS,cAAc,OAA+C;AACpE,SAAO,MAAM,MAAM,SAAS,MAAM,MAAM,OAAO,SAAS;AAC1D;AAEA,SAAS,aAAa,OAA4C;AAOhE,QAAM,cAAc,cAAc,KAAK;AACvC,QAAM,OAAO,gBAAgB;AAI7B,QAAM,KAAK,CAAC,OAAe,SACzB,gBAAgB,SAAS,cAAc,KAAK,KAAK,IAAI,MAAM,gBAAgB,SAAS,OAAO;AAC7F,QAAM,UAAkC;AAAA,IACtC,mBAAmB,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,MAAM,KAAK,OAAO,IAAI,MAAM;AAAA,IACvF,kBAAkB,MAAM,UAAU,MAAM;AAAA,IACxC,cAAc,GAAG,MAAM,cAAc,WAAW,MAAM,MAAM,cAAc,SAAS;AAAA,IACnF,cAAc,GAAG,MAAM,cAAc,WAAW,MAAM,MAAM,cAAc,SAAS;AAAA,EACrF;AAEA,MAAI,MAAM,WAAY,SAAQ,cAAc,IAAI,YAAY,MAAM,UAAU;AAE5E,aAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,MAAM,WAAW,CAAC,CAAC,EAAG,KAAI,EAAG,SAAQ,mBAAmB,CAAC,EAAE,IAAI;AACnG,MAAI,MAAM,QAAQ,GAAI,SAAQ,mBAAmB,IAAI,MAAM,OAAO;AAClE,MAAI,MAAM,QAAQ,GAAI,SAAQ,gBAAgB,IAAI,MAAM,OAAO;AAC/D,MAAI,MAAM,QAAQ,GAAI,SAAQ,mBAAmB,IAAI,MAAM,OAAO;AAClE,MAAI,MAAM,WAAW,SAAU,SAAQ,uBAAuB,IAAI,MAAM,UAAU;AAClF,MAAI,MAAM,WAAW,QAAS,SAAQ,uBAAuB,IAAI,MAAM,UAAU;AACjF,MAAI,MAAM,MAAM,WAAY,SAAQ,iBAAiB,IAAI,MAAM,KAAK;AACpE,MAAI,MAAM,MAAM,WAAY,SAAQ,iBAAiB,IAAI,MAAM,KAAK;AACpE,MAAI,MAAM,MAAM,QAAS,SAAQ,sBAAsB,IAAI,MAAM,KAAK;AAItE,UAAQ,gBAAgB,IAAI;AAG5B,QAAM,WAAW,aAAa,MAAM,OAAO,KAAK;AAChD,UAAQ,mBAAmB,IAAI;AAC/B,UAAQ,oBAAoB,IAAI;AAChC,UAAQ,qBAAqB,IAAI;AACjC,UAAQ,kBAAkB,IAAI;AAC9B,UAAQ,oBAAoB,IAAI;AAChC,UAAQ,eAAe,IAAI;AAI3B,MAAI,MAAM,YAAY;AACpB,YAAQ,yBAAyB,IAAI;AACrC,YAAQ,4BAA4B,IAAI;AACxC,YAAQ,yBAAyB,IAAI;AACrC,YAAQ,4BAA4B,IAAI;AACxC,YAAQ,0BAA0B,IAAI;AAItC,YAAQ,iBAAiB,IAAI;AAC7B,YAAQ,eAAe,IAAI;AAAA,EAC7B;AACA,MAAI,MAAM,YAAY;AACpB,YAAQ,sBAAsB,IAAI;AAClC,YAAQ,wBAAwB,IAAI;AACpC,YAAQ,iBAAiB,IAAI;AAC7B,YAAQ,gBAAgB,IAAI;AAC5B,YAAQ,gBAAgB,IAAI;AAC5B,YAAQ,uBAAuB,IAAI;AAAA,EACrC;AACA,MAAI,MAAM,YAAa,SAAQ,sBAAsB,IAAI,YAAY,MAAM,WAAW;AACtF,MAAI,MAAM,YAAY;AACpB,YAAQ,oBAAoB,IAAI;AAEhC,YAAQ,uBAAuB,IAAI,MAAM,cAAc,8BAA8B;AAAA,EACvF,WAAW,MAAM,aAAa;AAC5B,YAAQ,uBAAuB,IAAI;AAAA,EACrC;AAEA,SAAO;AACT;AAOA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,EAAE,SAAS,IAAI,gBAAgB;AAGrC,QAAM,QAAQ,QAAQ,MAAM,iBAAiB,OAAO,OAAO,SAAS,KAAK,GAAG,CAAC,OAAO,OAAO,SAAS,KAAK,CAAC;AAC1G,QAAM,UAAU,QAAQ,MAAM,aAAa,KAAK,GAAG,CAAC,KAAK,CAAC;AAC1D,QAAM,kBAAkB,QAAQ,MAAM,kBAAkB,CAAC,MAAM,YAAY,MAAM,WAAW,CAAC,GAAG,CAAC,MAAM,YAAY,MAAM,WAAW,CAAC;AAErI,MAAI,MAAM,WAAW,CAAC,OAAO,iBAAiB,gBAAgB,MAAM,OAAO,GAAG;AAC5E,eAAW,6BAA6B,EAAE,aAAa,YAAY,CAAC;AAAA,EACtE;AAKA,YAAU,MAAM;AACd,kBAAc,QAAQ,OAAO,WAAW,CAAC;AAAA,EAC3C,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,QAAM,WAAW;AAAA,IACf,MACE,eAAe,CAAC,GAAG,gBAAgB,GAAG,OAAO,GAAG;AAAA,MAC9C,SAAS,OAAO;AAAA,MAChB,kBAAkB,SAAS;AAAA,IAC7B,CAAC;AAAA,IACH,CAAC,OAAO,SAAS,SAAS,SAAS,OAAO;AAAA,EAC5C;AAOA,QAAM,CAAC,cAAc,eAAe,IAAI,SAA4B,oBAAoB,CAAC,CAAC;AAC1F,QAAM,aAAa,QAAQ,MAAM,aAAa,IAAI,uBAAuB,GAAG,CAAC,YAAY,CAAC;AAE1F,QAAM,WAAW;AAAA,IACf,MAAM,oBAAoB,cAAc,cAAc,eAAe,SAAS,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS;AAAA,IACtH,CAAC,SAAS,QAAQ,YAAY,QAAQ,SAAS;AAAA,EACjD;AAEA,SACE,oBAAC,mBAAgB,OAAO,UACtB,8BAAC,oBAAiB,UAChB,+BAAC,gBAAa,QAAQ,OAAO,QAAQ,MAAM,QAAQ,OAAO,WAAW,GACjE;AAAA,wBAAC,oBAAiB;AAAA,IAClB,oBAAC,oBAAiB,QAAQ,OAAO,QAAQ,QAAQ,iBAAiB;AAAA,IAClE,oBAAC,oBAAiB,QAAQ,OAAO,QAAQ;AAAA,IACzC,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,UAAU,cAAc,KAAK,MAAM,OAAO,GACzF,+BAAC,kBAEE;AAAA,YAAM,WAAW,oBAAC,UAAK,KAAI,cAAa,MAAM,eAAe,MAAM,SAAS,OAAO,aAAa,GAAG;AAAA,MAEnG,mBACC,oBAAC,WAAM,MAAK,uBAAsB,YAAW,SAC1C,2BACH;AAAA,MAGD,OAAO,kBACN,oBAAC,WAAM,MAAK,wBAAuB,YAAW,SAC3C,+CACH;AAAA,MAIF,oBAAC,SAAM,OAAO,eAAe,cAAc,MAAM,cAAc,KAAK,MAAM,SAAS,WAAW,cAAc,KAAK,MAAM,UAAU,YAAY,MAAM,UAAU,IAAI,SAAS,SAKxK,8BAAC,gCAA8B,GAAG,aAAa,OAAO,IAAI,GAC1D,8BAAC,gBAAa,WAAW,iBAAiB,KACxC,8BAAC,iBAAc,WAAW,gBAC1B;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAEV,aAAW,cAAc,KAAK,MAAM,UAAU,SAAY,cAAc,KAAK;AAAA,UAC7E,OAAO;AAAA,UAON;AAAA;AAAA,MACH,GACA,GACF,GACA,GACF;AAAA,OACF,GACA;AAAA,KACJ,GACF,GACF;AAEJ;AAsCA,SAAS,mBAAmB;AAC1B,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,YAAU,MAAM;AACd,UAAM,UAAU,QAAQ,IAAI;AAU5B,UAAM,aAAa,SAAS,OAAO,SAAS,eAAe;AAC3D,QAAI,YAAY,WAAY;AAC5B,SAAK,MAAM,kBAAkB,UAAU,MAAM,GAAG,IAAI,EAAE,QAAQ,OAAO,CAAC,EACnE,KAAK,CAAC,MAAM;AACX,UAAI,CAAC,EAAE,GAAI;AACX,eAAS,SAAS,UAAU,wCAAwC;AAAA,IACtE,CAAC,EACA,MAAM,MAAM;AAAA,IAAC,CAAC;AAAA,EACnB,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AACT;AAEA,SAAS,iBAAiB,EAAE,OAAO,GAAuB;AACxD,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,0BAAwB,QAAQ,QAAQ,IAAI,CAAC;AAC7C,SAAO;AACT;AAEA,SAAS,iBAAiB,EAAE,QAAQ,OAAO,GAAkE;AAC3G,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,UAAU,QAAQ,IAAI;AAC5B,YAAU,MAAM;AAEd,QAAI,CAAC,QAAS;AACd,QAAI;AACJ,QAAI,aAAa;AACjB,UAAM,YAAY;AAChB,YAAM,CAAC,EAAE,MAAM,GAAG,EAAE,YAAY,WAAW,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,QAChE,OAAO,mBAAmB;AAAA,QAC1B,OAAO,oBAAoB;AAAA,MAC7B,CAAC;AACD,YAAM,KAAK,MAAM;AACjB,UAAI,CAAC,MAAM,WAAY;AACvB,cAAQ;AAAA,QACR,WAAW,IAAI,SAAS,QAAQ,cAAc;AAAA,QAC9C,CAAC,SAAS;AACR,gBAAM,OAA0B,CAAC;AACjC,eAAK,QAAQ,CAAC,MAAM;AAClB,kBAAM,MAAM,kBAAkB,UAAU,EAAE,GAAI,EAAE,KAAK,GAA+B,MAAO,EAAE,KAAK,EAAwB,QAAQ,EAAE,GAAG,CAAC;AACxI,gBAAI,IAAI,QAAS,MAAK,KAAK,IAAI,IAAI;AAAA,UACrC,CAAC;AACD,iBAAO,IAAI;AAAA,QACb;AAAA,QACA,MAAM;AAAA;AAAA,MACN;AAAA,IACF,GAAG;AACH,WAAO,MAAM;AACX,mBAAa;AACb,cAAQ;AAAA,IACV;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,MAAM,CAAC;AAC5B,SAAO;AACT;AAGA,SAAS,aAAa,MAAmF;AACvG,QAAM,KAAK,QAAQ,MAAM,YAAY;AACrC,SAAO,MAAM,QAAQ,EAAE,WAAW,KAAK,IAAI,EAAE,QAAQ,SAAS,UAAU,EAAE,SAAS,KAAK,EAAE,IAAI,EAAE,QAAQ,KAAK;AAC/G;","names":[]}

package/dist/admin/AdminApp.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { registerBuiltinSchemas } from "../blocks/builtinSchemas.js";
 registerBuiltinSchemas();
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useAuth } from "../auth/AuthProvider.js";
 import { LoginForm } from "../auth/LoginForm.js";
 import { useSiteConfig } from "../config.js";
@@ -11,16 +11,21 @@ import { canEdit, canManageSite } from "../auth/roles.js";
 import { Tabs, TabsContent } from "./ui/tabs.js";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { ToastProvider } from "./ui/toast.js";
-import { ConfirmHost } from "./ui/ConfirmDialog.js";
+import { ConfirmHost, useConfirm } from "./ui/ConfirmDialog.js";
+import { heeftOnopgeslagen, ONOPGESLAGEN_VRAAG, vergeetOnopgeslagen } from "./lib/onopgeslagen.js";
 import { Button } from "./ui/primitives.js";
+import { Icon } from "./ui/Icon.js";
 import { PanelIcon } from "./ui/PanelIcon.js";
 import { builtinPanels } from "./panelRegistry.js";
 import { AdminNavContext } from "./navContext.js";
 import { AdminHelp } from "./AdminHelp.js";
+import { ZoekPalet } from "./ZoekPalet.js";
 import { CoreVersion, WatIsNieuw } from "./CoreVersion.js";
 function roleAllows(role, min) {
+  if (min === "superadmin") return role === "superadmin";
   return min === "siteadmin" ? canManageSite(role) : canEdit(role);
 }
+const ROL_NAAM = { superadmin: "Xi Webdesign", siteadmin: "Beheerder", editor: "Redacteur" };
 function Melding({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "xicms-admin__midden grid place-items-center p-6", children: /* @__PURE__ */ jsx("div", { className: "w-full max-w-md rounded-xl border border-slate-200 bg-white p-6 text-sm shadow-sm", children }) });
 }
@@ -36,105 +41,182 @@ function AdminApp({
   const firstTab = panels[0] && sleutel(panels[0]);
   const [actief, setActief] = useState(firstTab);
   const actievePanel = panels.find((p) => sleutel(p) === (actief ?? firstTab));
-  return /* @__PURE__ */ jsx("div", { className: embedded ? "xicms-admin xicms-admin--ingebed" : "xicms-admin", children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ConfirmHost, { children: !configured ? /* @__PURE__ */ jsxs(Melding, { children: [
-    "Firebase is nog niet geconfigureerd. Vul de ",
-    /* @__PURE__ */ jsx("code", { children: "NEXT_PUBLIC_FIREBASE_*" }),
-    "-variabelen in om het beheer aan te zetten."
-  ] }) : loading ? /* @__PURE__ */ jsx(Melding, { children: /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: "Bezig met laden\u2026" }) }) : !user ? /* @__PURE__ */ jsx("div", { className: "xicms-admin__midden grid place-items-center p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm", children: [
-    /* @__PURE__ */ jsxs("p", { className: "mb-4 text-center text-sm text-slate-500", children: [
-      "Beheer \xB7 ",
-      name
-    ] }),
-    /* @__PURE__ */ jsx(LoginForm, { onSuccess: () => {
-      window.location.replace("/");
-    } })
-  ] }) }) : !canEdit(role) ? /* @__PURE__ */ jsxs(Melding, { children: [
-    "Je bent ingelogd als ",
-    /* @__PURE__ */ jsx("strong", { children: user.email }),
-    ", maar hebt geen beheerrechten voor deze site.",
-    /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => void signOut(), children: "Uitloggen" }) })
-  ] }) : panels.length === 0 ? /* @__PURE__ */ jsx(Melding, { children: "Geen actieve beheer-modules voor deze site." }) : /* @__PURE__ */ jsx(AdminNavContext.Provider, { value: setActief, children: /* @__PURE__ */ jsxs(
-    Tabs,
-    {
-      value: actief ?? firstTab,
-      onValueChange: setActief,
-      orientation: "vertical",
-      className: embedded ? "xicms-admin__raster" : "xicms-admin__raster md:grid md:grid-cols-[248px_1fr]",
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: embedded ? "xicms-admin__rail flex flex-row flex-wrap items-center gap-4 border-b border-slate-200 p-2" : "xicms-admin__rail flex flex-col gap-4 border-b border-slate-200 p-4 md:sticky md:top-0 md:h-screen md:border-r md:border-b-0",
-            style: { background: "var(--admin-sidebar)" },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "min-w-0 px-2 pt-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: name }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Beheer" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                TabsPrimitive.List,
-                {
-                  "aria-label": "Beheer-secties",
-                  className: embedded ? "xicms-admin__lijst -mx-1 flex flex-row gap-1 overflow-x-auto" : "xicms-admin__lijst -mx-1 flex gap-1 overflow-x-auto md:flex-col md:overflow-visible",
-                  children: panels.map((p) => /* @__PURE__ */ jsxs(
-                    TabsPrimitive.Trigger,
+  const geldig = (tab) => tab && panels.some((p) => sleutel(p) === tab) ? tab : void 0;
+  const panelSleutels = panels.map(sleutel).join(",");
+  useEffect(() => {
+    const uitHash = decodeURIComponent(window.location.hash.slice(1));
+    if (geldig(uitHash)) setActief(uitHash);
+  }, [panelSleutels]);
+  const bevestigRef = useRef(null);
+  const actiefRef = useRef(actief);
+  actiefRef.current = actief;
+  const gaNaar = useCallback(async (tab, opties = {}) => {
+    if (tab === actiefRef.current) return true;
+    if (heeftOnopgeslagen() && bevestigRef.current) {
+      if (!await bevestigRef.current(ONOPGESLAGEN_VRAAG)) return false;
+      vergeetOnopgeslagen();
+    }
+    setActief(tab);
+    if (opties.geschiedenis !== false) window.history.pushState(null, "", `#${encodeURIComponent(tab)}`);
+    return true;
+  }, []);
+  const [zoekOpen, setZoekOpen] = useState(false);
+  useEffect(() => {
+    const toets = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        setZoekOpen(true);
+      }
+    };
+    window.addEventListener("keydown", toets);
+    return () => window.removeEventListener("keydown", toets);
+  }, []);
+  const zoekPanelen = useMemo(
+    () => panels.map((p) => ({ tab: sleutel(p), label: p.label })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [panelSleutels]
+  );
+  useEffect(() => {
+    const terug = () => {
+      const tab = decodeURIComponent(window.location.hash.slice(1)) || firstTab;
+      if (!tab) return;
+      void gaNaar(tab, { geschiedenis: false }).then((ok) => {
+        if (!ok && actiefRef.current) window.history.pushState(null, "", `#${encodeURIComponent(actiefRef.current)}`);
+      });
+    };
+    window.addEventListener("popstate", terug);
+    return () => window.removeEventListener("popstate", terug);
+  }, [gaNaar, firstTab]);
+  return /* @__PURE__ */ jsx("div", { className: embedded ? "xicms-admin xicms-admin--ingebed" : "xicms-admin", children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsxs(ConfirmHost, { children: [
+    /* @__PURE__ */ jsx(ConfirmBrug, { zet: (c) => {
+      bevestigRef.current = c;
+    } }),
+    !configured ? /* @__PURE__ */ jsxs(Melding, { children: [
+      "Firebase is nog niet geconfigureerd. Vul de ",
+      /* @__PURE__ */ jsx("code", { children: "NEXT_PUBLIC_FIREBASE_*" }),
+      "-variabelen in om het beheer aan te zetten."
+    ] }) : loading ? /* @__PURE__ */ jsx(Melding, { children: /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: "Bezig met laden\u2026" }) }) : !user ? /* @__PURE__ */ jsx("div", { className: "xicms-admin__midden grid place-items-center p-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-sm", children: [
+      /* @__PURE__ */ jsxs("p", { className: "mb-4 text-center text-sm text-slate-500", children: [
+        "Beheer \xB7 ",
+        name
+      ] }),
+      /* @__PURE__ */ jsx(LoginForm, { onSuccess: () => {
+        window.location.replace("/");
+      } })
+    ] }) }) : !canEdit(role) ? /* @__PURE__ */ jsxs(Melding, { children: [
+      "Je bent ingelogd als ",
+      /* @__PURE__ */ jsx("strong", { children: user.email }),
+      ", maar hebt geen beheerrechten voor deze site.",
+      /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => void signOut(), children: "Uitloggen" }) })
+    ] }) : panels.length === 0 ? /* @__PURE__ */ jsx(Melding, { children: "Geen actieve beheer-modules voor deze site." }) : /* @__PURE__ */ jsxs(AdminNavContext.Provider, { value: (tab) => void gaNaar(tab), children: [
+      /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: actief ?? firstTab,
+          onValueChange: (tab) => void gaNaar(tab),
+          orientation: "vertical",
+          className: embedded ? "xicms-admin__raster" : "xicms-admin__raster md:grid md:grid-cols-[248px_1fr]",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: embedded ? "xicms-admin__rail flex flex-row flex-wrap items-center gap-4 border-b border-slate-200 p-2" : "xicms-admin__rail flex flex-col gap-4 border-b border-slate-200 p-4 md:sticky md:top-0 md:h-screen md:border-r md:border-b-0",
+                style: { background: "var(--admin-sidebar)" },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: embedded ? "flex w-full min-w-0 items-center gap-2 px-2 pt-1" : "flex min-w-0 items-start justify-between gap-2 px-2 pt-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: name }),
+                      /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Beheer" })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setZoekOpen(true),
+                        className: "xicms-admin-btn inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs text-slate-600 hover:bg-slate-100",
+                        "aria-label": "Zoeken in het beheer (Ctrl of Cmd + K)",
+                        title: "Zoeken (Ctrl/Cmd + K)",
+                        children: [
+                          /* @__PURE__ */ jsx(Icon, { naam: "zoek", grootte: 14 }),
+                          "Zoeken"
+                        ]
+                      }
+                    ),
+                    embedded && /* @__PURE__ */ jsxs("div", { className: "xicms-admin__voet ml-auto flex min-w-0 items-center gap-3", children: [
+                      /* @__PURE__ */ jsx("p", { className: "hidden min-w-0 truncate text-xs text-slate-600 sm:block", title: `${user.email ?? ""} \xB7 ${ROL_NAAM[role ?? "editor"] ?? role}`, children: user.email }),
+                      /* @__PURE__ */ jsx(CoreVersion, { compact: true }),
+                      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => void signOut(), children: "Uitloggen" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    TabsPrimitive.List,
                     {
-                      value: sleutel(p),
-                      className: "flex shrink-0 items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-200 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none data-[state=active]:bg-slate-100 data-[state=active]:text-slate-900 data-[state=active]:shadow-[inset_2px_0_0_0_var(--color-brand-500)]",
-                      children: [
-                        /* @__PURE__ */ jsx(PanelIcon, { id: sleutel(p) }),
-                        p.label
-                      ]
-                    },
-                    sleutel(p)
-                  ))
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: embedded ? "xicms-admin__voet ml-auto flex min-w-0 flex-row items-center gap-3 border-t-0 pt-0" : "xicms-admin__voet mt-auto hidden min-w-0 flex-col gap-3 border-t border-slate-200 pt-3 md:flex",
-                  children: [
+                      "aria-label": "Beheer-secties",
+                      className: embedded ? "xicms-admin__lijst -mx-1 flex flex-row gap-1 overflow-x-auto" : "xicms-admin__lijst -mx-1 flex gap-1 overflow-x-auto md:flex-col md:overflow-visible",
+                      children: panels.map((p) => /* @__PURE__ */ jsxs(
+                        TabsPrimitive.Trigger,
+                        {
+                          value: sleutel(p),
+                          className: "flex shrink-0 items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none data-[state=active]:bg-white data-[state=active]:text-slate-900 data-[state=active]:shadow-[inset_2px_0_0_0_var(--color-brand-500),0_1px_2px_rgba(27,26,23,0.08)]",
+                          children: [
+                            /* @__PURE__ */ jsx(PanelIcon, { id: sleutel(p) }),
+                            p.label
+                          ]
+                        },
+                        sleutel(p)
+                      ))
+                    }
+                  ),
+                  !embedded && /* @__PURE__ */ jsxs("div", { className: "xicms-admin__voet mt-auto flex min-w-0 flex-row flex-wrap items-center gap-3 border-t border-slate-200 pt-3 md:flex-col md:items-stretch", children: [
                     /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                       /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-slate-600", title: user.email ?? void 0, children: user.email }),
-                      /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400", children: role })
+                      /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: ROL_NAAM[role ?? "editor"] ?? role })
                     ] }),
                     /* @__PURE__ */ jsx(CoreVersion, {}),
                     /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => void signOut(), children: "Uitloggen" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs(
+                "header",
+                {
+                  className: embedded ? "xicms-admin__kop static z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8" : "xicms-admin__kop sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8",
+                  style: { background: "var(--admin-canvas)" },
+                  children: [
+                    /* @__PURE__ */ jsx("h1", { className: "truncate text-lg font-semibold tracking-tight", children: actievePanel?.label ?? "Beheer" }),
+                    /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        className: "inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 text-sm hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none",
+                        href: "/",
+                        children: [
+                          "Bekijk site",
+                          /* @__PURE__ */ jsx(Icon, { naam: "extern", grootte: 14 })
+                        ]
+                      }
+                    )
                   ]
                 }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxs(
-            "header",
-            {
-              className: embedded ? "xicms-admin__kop static z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8" : "xicms-admin__kop sticky top-0 z-10 flex items-center justify-between gap-4 border-b border-slate-200 px-4 py-3 md:px-8",
-              style: { background: "var(--admin-canvas)" },
-              children: [
-                /* @__PURE__ */ jsx("h1", { className: "truncate text-base font-semibold", children: actievePanel?.label ?? "Beheer" }),
-                /* @__PURE__ */ jsx(
-                  "a",
-                  {
-                    className: "inline-flex h-8 shrink-0 items-center rounded-lg border border-slate-200 px-3 text-sm hover:bg-slate-100 focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:outline-none",
-                    href: "/",
-                    children: "Bekijk site \u2197"
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "grid gap-6 p-4 md:p-8", children: [
-            /* @__PURE__ */ jsx(WatIsNieuw, {}),
-            panels.map((p) => /* @__PURE__ */ jsx(TabsContent, { value: sleutel(p), className: "pt-0", children: /* @__PURE__ */ jsx(p.Panel, { siteId }) }, sleutel(p))),
-            /* @__PURE__ */ jsx(AdminHelp, {})
-          ] })
-        ] })
-      ]
-    }
-  ) }) }) }) });
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)] gap-6 p-4 md:p-8", children: [
+                actievePanel?.id === "start" && /* @__PURE__ */ jsx(WatIsNieuw, {}),
+                panels.map((p) => /* @__PURE__ */ jsx(TabsContent, { value: sleutel(p), className: "pt-0", children: /* @__PURE__ */ jsx(p.Panel, { siteId }) }, sleutel(p))),
+                actievePanel?.id !== "start" && /* @__PURE__ */ jsx(AdminHelp, {})
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ZoekPalet, { siteId, panelen: zoekPanelen, gaNaar: (tab) => void gaNaar(tab), open: zoekOpen, onOpenChange: setZoekOpen })
+    ] })
+  ] }) }) });
+}
+function ConfirmBrug({ zet }) {
+  const confirm = useConfirm();
+  useEffect(() => zet(confirm), [confirm, zet]);
+  return null;
 }
 export {
   AdminApp