@xiwebdesign/xicms-core 4.17.1

package/dist/XiCMSProvider.d.ts

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { type BlockDefinition } from "./blocks/registry";
+import { type BlockOverrides } from "./modules/overrides";
+import type { ModuleDefinition } from "./modules/types";
+import { type DefinedTheme } from "@astryxdesign/core/theme";
+import { type LinkComponentType } from "@astryxdesign/core/Link";
+import { type ImageComponentType } from "./media/ImageContext";
+import { type SiteConfig } from "./schema/siteConfig";
+interface ProviderProps {
+    config: SiteConfig;
+    /** Losse klant-blokken (via `defineBlock`) buiten een module om. Altijd actief. */
+    blocks?: BlockDefinition[];
+    /**
+     * Klant-modules (via `defineModule`) bovenop de ingebouwde. Worden gemerged op `id` (klant wint)
+     * en respecteren `config.modules`/`config.features` voor activatie.
+     */
+    modules?: ModuleDefinition[];
+    /**
+     * Per-site presentatie-overrides per block-type (`{ gallery: { Render: MijnGalerij } }`). Vervangt
+     * alleen het uiterlijk; schema/editor/logica blijven van core. De krachtigste maatwerk-naad.
+     */
+    overrides?: BlockOverrides;
+    /**
+     * Astryx-basistheme voor de hele site (radius-/spacing-/neutralen-karakter). Standaard `neutral`.
+     * Een site kan een ander pakket kiezen (`@astryxdesign/theme-butter`, `-stone`, …) of een eigen
+     * `defineTheme(...)` doorgeven voor component-overrides — zónder core te forken.
+     */
+    astryxTheme?: DefinedTheme;
+    /**
+     * Framework-link-component (bv. Next `Link`) voor soepele client-navigatie + prefetch. Astryx-
+     * componenten met een `href` (knoppen/links/tabs) gebruiken 'm dan i.p.v. een rauwe `<a>` (= volledige
+     * page-reload). Core importeert `next/link` niet zelf (optionele peer) — geef 'm hier door vanuit de site.
+     */
+    linkComponent?: LinkComponentType;
+    /**
+     * Framework-beeldcomponent (bv. Next `Image`) voor automatische beeldoptimalisatie (responsive
+     * srcset, AVIF/WebP, geen layout-shift). Core importeert `next/image` niet zelf — geef 'm hier door.
+     */
+    imageComponent?: ImageComponentType;
+    children: ReactNode;
+}
+/**
+ * Wikkel de hele site in deze provider (in `app/layout.tsx`). Hij zet:
+ * - de SiteConfig-context (siteId, theme, mode) + live publieke settings (footer/nav/modules);
+ * - auth + content (Firebase, env-gedreven; werkt ook zonder Firebase);
+ * - de block-registry (ingebouwde + klant-blokken) voor de page-renderer;
+ * - de themavariabelen als CSS custom properties;
+ * - App Check (alleen als geconfigureerd) en de EditBar/DemoLock.
+ */
+export declare function XiCMSProvider({ config, blocks, modules, overrides, astryxTheme, linkComponent, imageComponent, children }: ProviderProps): import("react").JSX.Element;
+/**
+ * Is deze (hex-)kleur donker? Bepaalt de Astryx-thememodus voor sites met een vaste donkere
+ * achtergrond (bv. presets donker-modern/luxe-donker, `dark.auto: false`): zonder deze afleiding
+ * bleef Astryx op "light" staan en tekenden zijn componenten lichte kaarten op een donkere pagina.
+ * Puur en exporteerbaar voor tests; niet-hex waarden gelden als licht (veilige default).
+ */
+export declare function isDarkColor(color?: string): boolean;
+export {};

package/dist/XiCMSProvider.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { ConfigProvider } from "./config";
+import { AuthProvider } from "./auth/AuthProvider";
+import { ContentProvider } from "./content/ContentProvider";
+import { EditBar } from "./components/EditBar";
+import { DemoLock } from "./lock/DemoLock";
+import { RegistryProvider } from "./blocks/context";
+import { createRegistry, mergeRegistry } from "./blocks/registry";
+import { resolveModules } from "./modules/registry";
+import { ModulesProvider } from "./modules/context";
+import { applyBlockOverrides } from "./modules/overrides";
+import { builtinModules } from "./modules/builtins";
+import { ConsentBanner } from "./modules/consent/ConsentBanner";
+import { EditorProvider } from "./editor/EditorProvider";
+import { SiteSettingsProvider, useSiteSettings } from "./settings/useSiteSettings";
+import { mergeThemeTokens } from "./schema/settings";
+import { initAppCheck } from "./firebase/appcheck";
+import { DemoStudio } from "./demo/DemoStudio";
+import { setDemoActive } from "./demo/demoStore";
+import { Theme } from "@astryxdesign/core/theme";
+import { neutralTheme } from "@astryxdesign/theme-neutral/built";
+import { LinkProvider } from "@astryxdesign/core/Link";
+import { ImageProvider } from "./media/ImageContext";
+import { validateSiteConfig } from "./schema/siteConfig";
+import { validateModuleContract } from "./modules/contract";
+const NO_BLOCKS = [];
+const NO_MODULES = [];
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(message) {
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(message);
+}
+function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, children }) {
+  useEffect(() => {
+    initAppCheck();
+  }, []);
+  useEffect(() => {
+    if (process.env.NODE_ENV === "production") return;
+    const configIssues = validateSiteConfig(config);
+    if (configIssues.length > 0) {
+      warnOnce(`[xicms] site.config.ts bevat problemen:
+- ${configIssues.join("\n- ")}`);
+    }
+    if (modules.length > 0) {
+      const contractIssues = validateModuleContract(modules);
+      if (contractIssues.length > 0) {
+        warnOnce(`[xicms] klant-modules voldoen niet aan het module-contract:
+- ${contractIssues.join("\n- ")}`);
+      }
+    }
+  }, [config, modules]);
+  return /* @__PURE__ */ jsx(ConfigProvider, { config, children: /* @__PURE__ */ jsx(SiteSettingsProvider, { siteId: config.siteId, children: /* @__PURE__ */ jsx(ModuleLayer, { config, blocks, modules, overrides, astryxTheme, linkComponent, imageComponent, children }) }) });
+}
+function themeCssVars(theme) {
+  const auto = Boolean(theme.dark?.auto);
+  const ld = (light, dark) => auto ? `light-dark(${light}, ${dark})` : light;
+  const cssVars = {
+    "--xicms-primary": theme.dark?.primary ? ld(theme.primary, theme.dark.primary) : theme.primary,
+    "--xicms-accent": theme.accent ?? theme.primary,
+    "--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;
+  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;
+  if (theme.radius?.lg) cssVars["--xicms-radius-lg"] = theme.radius.lg;
+  if (theme.container?.maxWidth) cssVars["--xicms-container-max"] = theme.container.maxWidth;
+  if (theme.container?.padding) cssVars["--xicms-container-pad"] = theme.container.padding;
+  if (theme.dark?.background) cssVars["--xicms-bg-dark"] = theme.dark.background;
+  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)";
+  cssVars["--color-on-accent"] = "#ffffff";
+  cssVars["--color-text-accent"] = "var(--xicms-primary)";
+  cssVars["--radius-element"] = "var(--xicms-radius-sm, 8px)";
+  cssVars["--radius-container"] = "var(--xicms-radius, 14px)";
+  cssVars["--radius-page"] = "var(--xicms-radius-lg, 24px)";
+  if (theme.background) {
+    cssVars["--color-background-body"] = "var(--xicms-bg)";
+    cssVars["--color-background-surface"] = "color-mix(in srgb, var(--xicms-fg) 4%, var(--xicms-bg))";
+    cssVars["--color-background-card"] = "color-mix(in srgb, var(--xicms-fg) 3%, var(--xicms-bg))";
+    cssVars["--color-background-popover"] = "var(--xicms-bg)";
+    cssVars["--color-background-muted"] = "color-mix(in srgb, var(--xicms-fg) 6%, var(--xicms-bg))";
+    cssVars["--xicms-surface"] = "color-mix(in srgb, var(--xicms-fg) 3%, var(--xicms-bg))";
+    cssVars["--xicms-muted"] = "color-mix(in srgb, var(--xicms-fg) 5%, var(--xicms-bg))";
+  }
+  if (theme.foreground) {
+    cssVars["--color-text-primary"] = "var(--xicms-fg)";
+    cssVars["--color-text-secondary"] = "color-mix(in srgb, var(--xicms-fg) 65%, transparent)";
+    cssVars["--color-neutral"] = "var(--xicms-fg)";
+    cssVars["--color-border"] = "color-mix(in srgb, var(--xicms-fg) 14%, transparent)";
+    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.fontFamily) {
+    cssVars["--font-family-body"] = "var(--xicms-font)";
+    cssVars["--font-family-heading"] = theme.headingFont ? "var(--xicms-font-heading)" : "var(--xicms-font)";
+  } else if (theme.headingFont) {
+    cssVars["--font-family-heading"] = "var(--xicms-font-heading)";
+  }
+  return cssVars;
+}
+function isDarkColor(color) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color?.trim() ?? "");
+  if (!m) return false;
+  let hex = m[1];
+  if (hex.length === 3) hex = hex.replace(/./g, (c) => c + c);
+  const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.45;
+}
+function ModuleLayer({
+  config,
+  blocks = NO_BLOCKS,
+  modules = NO_MODULES,
+  overrides,
+  astryxTheme,
+  linkComponent,
+  imageComponent,
+  children
+}) {
+  const { settings } = useSiteSettings();
+  const theme = useMemo(() => mergeThemeTokens(config.theme, settings.theme), [config.theme, settings.theme]);
+  const cssVars = useMemo(() => themeCssVars(theme), [theme]);
+  setDemoActive(Boolean(config.demoEditing));
+  const resolved = useMemo(
+    () => resolveModules([...builtinModules, ...modules], {
+      modules: config.modules,
+      features: config.features,
+      firestoreModules: settings.modules
+    }),
+    [config.modules, config.features, modules, settings.modules]
+  );
+  const registry = useMemo(
+    () => applyBlockOverrides(mergeRegistry(createRegistry(resolved.blocks), blocks), overrides),
+    [resolved.blocks, blocks, overrides]
+  );
+  return /* @__PURE__ */ jsx(ModulesProvider, { value: resolved, children: /* @__PURE__ */ jsx(RegistryProvider, { registry, children: /* @__PURE__ */ jsx(AuthProvider, { siteId: config.siteId, demo: Boolean(config.demoEditing), children: /* @__PURE__ */ jsx(ContentProvider, { siteId: config.siteId, defaults: config.defaults, children: /* @__PURE__ */ jsxs(EditorProvider, { children: [
+    theme.fontUrl && /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: theme.fontUrl }),
+    /* @__PURE__ */ jsx(Theme, { theme: astryxTheme ?? neutralTheme, mode: theme.dark?.auto ? "system" : isDarkColor(theme.background) ? "dark" : "light", children: /* @__PURE__ */ jsx(LinkProvider, { component: linkComponent ?? "a", children: /* @__PURE__ */ jsx(ImageProvider, { component: imageComponent, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "xicms-root",
+        "data-dark": theme.dark?.auto ? "auto" : void 0,
+        style: cssVars,
+        children: [
+          /* @__PURE__ */ jsx(DemoStudio, {}),
+          children,
+          /* @__PURE__ */ jsx(EditBar, {}),
+          /* @__PURE__ */ jsx(DemoLock, {}),
+          resolved.activeIds.has("consent") && /* @__PURE__ */ jsx(ConsentBanner, { settings: resolved.settings.consent })
+        ]
+      }
+    ) }) }) })
+  ] }) }) }) }) });
+}
+export {
+  XiCMSProvider,
+  isDarkColor
+};
+//# sourceMappingURL=XiCMSProvider.js.map

package/dist/XiCMSProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/XiCMSProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, type ReactNode } from \"react\";\nimport { ConfigProvider } from \"./config\";\nimport { AuthProvider } from \"./auth/AuthProvider\";\nimport { ContentProvider } from \"./content/ContentProvider\";\nimport { EditBar } from \"./components/EditBar\";\nimport { DemoLock } from \"./lock/DemoLock\";\nimport { RegistryProvider } from \"./blocks/context\";\nimport { createRegistry, mergeRegistry, type BlockDefinition } from \"./blocks/registry\";\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 { ConsentBanner, type ConsentSettings } from \"./modules/consent/ConsentBanner\";\nimport { EditorProvider } from \"./editor/EditorProvider\";\nimport { SiteSettingsProvider, useSiteSettings } from \"./settings/useSiteSettings\";\nimport { mergeThemeTokens, type ThemeTokens } from \"./schema/settings\";\nimport { initAppCheck } from \"./firebase/appcheck\";\nimport { DemoStudio } from \"./demo/DemoStudio\";\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`/`config.features` 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   * 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) en de EditBar/DemoLock.\n */\nexport function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, children }: ProviderProps) {\n  useEffect(() => {\n    initAppCheck();\n  }, []);\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}>\n        <ModuleLayer config={config} blocks={blocks} modules={modules} overrides={overrides} astryxTheme={astryxTheme} linkComponent={linkComponent} imageComponent={imageComponent}>\n          {children}\n        </ModuleLayer>\n      </SiteSettingsProvider>\n    </ConfigProvider>\n  );\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 */\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  const auto = Boolean(theme.dark?.auto);\n  const ld = (light: string, dark: string) => (auto ? `light-dark(${light}, ${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  cssVars[\"--color-on-accent\"] = \"#ffffff\";\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 * Is deze (hex-)kleur donker? Bepaalt de Astryx-thememodus voor sites met een vaste donkere\n * achtergrond (bv. presets donker-modern/luxe-donker, `dark.auto: false`): zonder deze afleiding\n * bleef Astryx op \"light\" staan en tekenden zijn componenten lichte kaarten op een donkere pagina.\n * Puur en exporteerbaar voor tests; niet-hex waarden gelden als licht (veilige default).\n */\nexport function isDarkColor(color?: string): boolean {\n  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(color?.trim() ?? \"\");\n  if (!m) return false;\n  let hex = m[1];\n  if (hex.length === 3) hex = hex.replace(/./g, (c) => c + c);\n  const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 0.45;\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  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  setDemoActive(Boolean(config.demoEditing));\n\n  const resolved = useMemo(\n    () =>\n      resolveModules([...builtinModules, ...modules], {\n        modules: config.modules,\n        features: config.features,\n        firestoreModules: settings.modules as ModulesSiteConfig | undefined,\n      }),\n    [config.modules, config.features, modules, settings.modules],\n  );\n\n  const registry = useMemo(\n    () => applyBlockOverrides(mergeRegistry(createRegistry(resolved.blocks), blocks), overrides),\n    [resolved.blocks, blocks, overrides],\n  );\n\n  return (\n    <ModulesProvider value={resolved}>\n      <RegistryProvider registry={registry}>\n        <AuthProvider siteId={config.siteId} demo={Boolean(config.demoEditing)}>\n          <ContentProvider siteId={config.siteId} defaults={config.defaults}>\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={theme.dark?.auto ? \"system\" : 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                    data-dark={theme.dark?.auto ? \"auto\" : undefined}\n                    style={cssVars as React.CSSProperties}\n                  >\n                    <DemoStudio />\n                    {children}\n                    <EditBar />\n                    <DemoLock />\n                    {resolved.activeIds.has(\"consent\") && (\n                      <ConsentBanner settings={resolved.settings.consent as ConsentSettings} />\n                    )}\n                  </div>\n                  </ImageProvider>\n                </LinkProvider>\n              </Theme>\n            </EditorProvider>\n          </ContentProvider>\n        </AuthProvider>\n      </RegistryProvider>\n    </ModulesProvider>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/AdminApp.d.ts

@@ -0,0 +1,4 @@
+import { type PanelDefinition } from "./panelRegistry";
+export declare function AdminApp({ extraPanels }: {
+    extraPanels?: PanelDefinition[];
+}): import("react").JSX.Element;

package/dist/admin/AdminApp.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAuth } from "../auth/AuthProvider";
+import { LoginForm } from "../auth/LoginForm";
+import { useSiteConfig } from "../config";
+import { useModules } from "../modules/context";
+import { canEdit, canManageSite } from "../auth/roles";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./ui/tabs";
+import { ToastProvider } from "./ui/toast";
+import { ConfirmHost } from "./ui/ConfirmDialog";
+import { Button } from "./ui/primitives";
+import { builtinPanels } from "./panelRegistry";
+import { AdminHelp } from "./AdminHelp";
+function roleAllows(role, min) {
+  return min === "siteadmin" ? canManageSite(role) : canEdit(role);
+}
+function AdminApp({ extraPanels = [] }) {
+  const { user, role, loading, configured, signOut } = useAuth();
+  const { name, siteId } = useSiteConfig();
+  const { activeIds } = useModules();
+  const panels = [...builtinPanels, ...extraPanels].filter((p) => activeIds.has(p.moduleId) && roleAllows(role, p.minRole)).sort((a, b) => a.order - b.order);
+  const firstTab = panels[0]?.moduleId;
+  return /* @__PURE__ */ jsx("div", { className: "xicms-admin", children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ConfirmHost, { children: !configured ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-slate-200 bg-white p-6 text-sm", 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("p", { className: "text-sm text-slate-500", children: "Laden\u2026" }) : !user ? /* @__PURE__ */ jsx(LoginForm, {}) : !canEdit(role) ? /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-slate-200 bg-white p-6 text-sm", 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" }) })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "grid gap-6", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("h1", { className: "text-xl font-bold", children: [
+          "Beheer \xB7 ",
+          name
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-500", children: [
+          "Ingelogd als ",
+          user.email,
+          " (",
+          role,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx("a", { className: "inline-flex h-9 items-center rounded-lg border border-slate-200 px-3 text-sm hover:bg-slate-50", href: "/", children: "Bekijk site" }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => void signOut(), children: "Uitloggen" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(AdminHelp, {}),
+    panels.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Geen actieve beheer-modules voor deze site." }) : /* @__PURE__ */ jsxs(Tabs, { defaultValue: firstTab, children: [
+      /* @__PURE__ */ jsx(TabsList, { children: panels.map((p) => /* @__PURE__ */ jsx(TabsTrigger, { value: p.moduleId, children: p.label }, p.moduleId)) }),
+      panels.map((p) => /* @__PURE__ */ jsx(TabsContent, { value: p.moduleId, children: /* @__PURE__ */ jsx(p.Panel, { siteId }) }, p.moduleId))
+    ] })
+  ] }) }) }) });
+}
+export {
+  AdminApp
+};
+//# sourceMappingURL=AdminApp.js.map

package/dist/admin/AdminApp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/AdminApp.tsx"],"sourcesContent":["\"use client\";\n\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { LoginForm } from \"../auth/LoginForm\";\nimport { useSiteConfig } from \"../config\";\nimport { useModules } from \"../modules/context\";\nimport { canEdit, canManageSite, type Role } from \"../auth/roles\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"./ui/tabs\";\nimport { ToastProvider } from \"./ui/toast\";\nimport { ConfirmHost } from \"./ui/ConfirmDialog\";\nimport { Button } from \"./ui/primitives\";\nimport { builtinPanels, type PanelDefinition } from \"./panelRegistry\";\nimport { AdminHelp } from \"./AdminHelp\";\n\n/**\n * Rol-bewaakt beheerdashboard (XiCMS 3.0). De tabs komen uit de paneel-registry, gefilterd op de\n * actieve modules (`SiteConfig.modules`/`features`) en de rol van de gebruiker. Een module met een\n * eigen paneel (ook klant-modules via `extraPanels`) verschijnt automatisch.\n *\n * Wikkel in `.xicms-admin` zodat de Tailwind-stijlen uit `@xiwebdesign/xicms-core/admin.css` scoped\n * blijven en niet naar de site lekken. Importeer die CSS alleen op de /beheer-route.\n */\nfunction roleAllows(role: Role | null, min: PanelDefinition[\"minRole\"]): boolean {\n  return min === \"siteadmin\" ? canManageSite(role) : canEdit(role);\n}\n\nexport function AdminApp({ extraPanels = [] }: { extraPanels?: PanelDefinition[] }) {\n  const { user, role, loading, configured, signOut } = useAuth();\n  const { name, siteId } = useSiteConfig();\n  const { activeIds } = useModules();\n\n  // Panelen van actieve modules waar de rol toegang toe heeft, gesorteerd op volgorde.\n  const panels = [...builtinPanels, ...extraPanels]\n    .filter((p) => activeIds.has(p.moduleId) && roleAllows(role, p.minRole))\n    .sort((a, b) => a.order - b.order);\n  const firstTab = panels[0]?.moduleId;\n\n  return (\n    <div className=\"xicms-admin\">\n      <ToastProvider>\n       <ConfirmHost>\n        {!configured ? (\n          <div className=\"rounded-xl border border-slate-200 bg-white p-6 text-sm\">\n            Firebase is nog niet geconfigureerd. Vul de <code>NEXT_PUBLIC_FIREBASE_*</code>-variabelen in\n            om het beheer aan te zetten.\n          </div>\n        ) : loading ? (\n          <p className=\"text-sm text-slate-500\">Laden…</p>\n        ) : !user ? (\n          <LoginForm />\n        ) : !canEdit(role) ? (\n          <div className=\"rounded-xl border border-slate-200 bg-white p-6 text-sm\">\n            Je bent ingelogd als <strong>{user.email}</strong>, maar hebt geen beheerrechten voor deze site.\n            <div className=\"mt-3\">\n              <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>Uitloggen</Button>\n            </div>\n          </div>\n        ) : (\n          <div className=\"grid gap-6\">\n            <header className=\"flex flex-wrap items-center justify-between gap-3\">\n              <div>\n                <h1 className=\"text-xl font-bold\">Beheer · {name}</h1>\n                <p className=\"text-sm text-slate-500\">Ingelogd als {user.email} ({role})</p>\n              </div>\n              <div className=\"flex gap-2\">\n                <a className=\"inline-flex h-9 items-center rounded-lg border border-slate-200 px-3 text-sm hover:bg-slate-50\" href=\"/\">Bekijk site</a>\n                <Button variant=\"secondary\" size=\"sm\" onClick={() => void signOut()}>Uitloggen</Button>\n              </div>\n            </header>\n\n            <AdminHelp />\n\n            {panels.length === 0 ? (\n              <p className=\"text-sm text-slate-500\">Geen actieve beheer-modules voor deze site.</p>\n            ) : (\n              <Tabs defaultValue={firstTab}>\n                <TabsList>\n                  {panels.map((p) => (\n                    <TabsTrigger key={p.moduleId} value={p.moduleId}>\n                      {p.label}\n                    </TabsTrigger>\n                  ))}\n                </TabsList>\n\n                {panels.map((p) => (\n                  <TabsContent key={p.moduleId} value={p.moduleId}>\n                    <p.Panel siteId={siteId} />\n                  </TabsContent>\n                ))}\n              </Tabs>\n            )}\n          </div>\n        )}\n       </ConfirmHost>\n      </ToastProvider>\n    </div>\n  );\n}\n"],"mappings":";AA0CU,SAC8C,KAD9C;AAxCV,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,SAAS,qBAAgC;AAClD,SAAS,MAAM,UAAU,aAAa,mBAAmB;AACzD,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,qBAA2C;AACpD,SAAS,iBAAiB;AAU1B,SAAS,WAAW,MAAmB,KAA0C;AAC/E,SAAO,QAAQ,cAAc,cAAc,IAAI,IAAI,QAAQ,IAAI;AACjE;AAEO,SAAS,SAAS,EAAE,cAAc,CAAC,EAAE,GAAwC;AAClF,QAAM,EAAE,MAAM,MAAM,SAAS,YAAY,QAAQ,IAAI,QAAQ;AAC7D,QAAM,EAAE,MAAM,OAAO,IAAI,cAAc;AACvC,QAAM,EAAE,UAAU,IAAI,WAAW;AAGjC,QAAM,SAAS,CAAC,GAAG,eAAe,GAAG,WAAW,EAC7C,OAAO,CAAC,MAAM,UAAU,IAAI,EAAE,QAAQ,KAAK,WAAW,MAAM,EAAE,OAAO,CAAC,EACtE,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AACnC,QAAM,WAAW,OAAO,CAAC,GAAG;AAE5B,SACE,oBAAC,SAAI,WAAU,eACb,8BAAC,iBACA,8BAAC,eACC,WAAC,aACA,qBAAC,SAAI,WAAU,2DAA0D;AAAA;AAAA,IAC3B,oBAAC,UAAK,oCAAsB;AAAA,IAAO;AAAA,KAEjF,IACE,UACF,oBAAC,OAAE,WAAU,0BAAyB,yBAAM,IAC1C,CAAC,OACH,oBAAC,aAAU,IACT,CAAC,QAAQ,IAAI,IACf,qBAAC,SAAI,WAAU,2DAA0D;AAAA;AAAA,IAClD,oBAAC,YAAQ,eAAK,OAAM;AAAA,IAAS;AAAA,IAClD,oBAAC,SAAI,WAAU,QACb,8BAAC,UAAO,SAAQ,aAAY,MAAK,MAAK,SAAS,MAAM,KAAK,QAAQ,GAAG,uBAAS,GAChF;AAAA,KACF,IAEA,qBAAC,SAAI,WAAU,cACb;AAAA,yBAAC,YAAO,WAAU,qDAChB;AAAA,2BAAC,SACC;AAAA,6BAAC,QAAG,WAAU,qBAAoB;AAAA;AAAA,UAAU;AAAA,WAAK;AAAA,QACjD,qBAAC,OAAE,WAAU,0BAAyB;AAAA;AAAA,UAAc,KAAK;AAAA,UAAM;AAAA,UAAG;AAAA,UAAK;AAAA,WAAC;AAAA,SAC1E;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA,4BAAC,OAAE,WAAU,kGAAiG,MAAK,KAAI,yBAAW;AAAA,QAClI,oBAAC,UAAO,SAAQ,aAAY,MAAK,MAAK,SAAS,MAAM,KAAK,QAAQ,GAAG,uBAAS;AAAA,SAChF;AAAA,OACF;AAAA,IAEA,oBAAC,aAAU;AAAA,IAEV,OAAO,WAAW,IACjB,oBAAC,OAAE,WAAU,0BAAyB,yDAA2C,IAEjF,qBAAC,QAAK,cAAc,UAClB;AAAA,0BAAC,YACE,iBAAO,IAAI,CAAC,MACX,oBAAC,eAA6B,OAAO,EAAE,UACpC,YAAE,SADa,EAAE,QAEpB,CACD,GACH;AAAA,MAEC,OAAO,IAAI,CAAC,MACX,oBAAC,eAA6B,OAAO,EAAE,UACrC,8BAAC,EAAE,OAAF,EAAQ,QAAgB,KADT,EAAE,QAEpB,CACD;AAAA,OACH;AAAA,KAEJ,GAEH,GACD,GACF;AAEJ;","names":[]}

package/dist/admin/AdminHelp.d.ts

@@ -0,0 +1,2 @@
+/** Korte, vriendelijke uitleg voor (a-technische) gebruikers die voor het eerst inloggen. */
+export declare function AdminHelp(): import("react").JSX.Element | null;

package/dist/admin/AdminHelp.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+const KEY = "xicms-help-dismissed";
+function AdminHelp() {
+  const [hidden, setHidden] = useState(true);
+  useEffect(() => {
+    try {
+      setHidden(localStorage.getItem(KEY) === "1");
+    } catch {
+      setHidden(false);
+    }
+  }, []);
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-brand-200 bg-brand-50 p-4 text-sm text-slate-700", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("strong", { children: "Welkom in het beheer \u{1F44B}" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-xs text-slate-500 hover:underline",
+          onClick: () => {
+            try {
+              localStorage.setItem(KEY, "1");
+            } catch {
+            }
+            setHidden(true);
+          },
+          children: "Verbergen"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { className: "grid list-disc gap-1 pl-5", children: [
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Pagina's" }),
+        ": pas teksten en secties aan. Je wijzigingen gaan pas live als je op",
+        /* @__PURE__ */ jsx("strong", { children: " Publiceren" }),
+        " klikt \u2014 experimenteren kan dus veilig."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        "Liever direct op de site typen? Klik op de website zelf op ",
+        /* @__PURE__ */ jsx("strong", { children: "\u201CPagina bewerken\u201D" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { children: "Nieuws" }),
+        ": plaats artikelen. ",
+        /* @__PURE__ */ jsx("strong", { children: "Media" }),
+        ": upload foto's \u2014 die worden automatisch verkleind om je site snel te houden."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        "Maak af en toe een ",
+        /* @__PURE__ */ jsx("strong", { children: "back-up" }),
+        " onder ",
+        /* @__PURE__ */ jsx("strong", { children: "Instellingen" }),
+        "; terugzetten kan altijd."
+      ] })
+    ] })
+  ] });
+}
+export {
+  AdminHelp
+};
+//# sourceMappingURL=AdminHelp.js.map

package/dist/admin/AdminHelp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/AdminHelp.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\nconst KEY = \"xicms-help-dismissed\";\n\n/** Korte, vriendelijke uitleg voor (a-technische) gebruikers die voor het eerst inloggen. */\nexport function AdminHelp() {\n  const [hidden, setHidden] = useState(true);\n  useEffect(() => {\n    try {\n      setHidden(localStorage.getItem(KEY) === \"1\");\n    } catch {\n      setHidden(false);\n    }\n  }, []);\n  if (hidden) return null;\n  return (\n    <div className=\"rounded-xl border border-brand-200 bg-brand-50 p-4 text-sm text-slate-700\">\n      <div className=\"mb-2 flex items-center justify-between\">\n        <strong>Welkom in het beheer 👋</strong>\n        <button\n          type=\"button\"\n          className=\"text-xs text-slate-500 hover:underline\"\n          onClick={() => {\n            try {\n              localStorage.setItem(KEY, \"1\");\n            } catch {\n              /* opslag geweigerd */\n            }\n            setHidden(true);\n          }}\n        >\n          Verbergen\n        </button>\n      </div>\n      <ul className=\"grid list-disc gap-1 pl-5\">\n        <li>\n          <strong>Pagina&apos;s</strong>: pas teksten en secties aan. Je wijzigingen gaan pas live als je op\n          <strong> Publiceren</strong> klikt — experimenteren kan dus veilig.\n        </li>\n        <li>\n          Liever direct op de site typen? Klik op de website zelf op <strong>“Pagina bewerken”</strong>.\n        </li>\n        <li>\n          <strong>Nieuws</strong>: plaats artikelen. <strong>Media</strong>: upload foto&apos;s — die worden\n          automatisch verkleind om je site snel te houden.\n        </li>\n        <li>\n          Maak af en toe een <strong>back-up</strong> onder <strong>Instellingen</strong>; terugzetten kan altijd.\n        </li>\n      </ul>\n    </div>\n  );\n}\n"],"mappings":";AAmBM,SACE,KADF;AAjBN,SAAS,WAAW,gBAAgB;AAEpC,MAAM,MAAM;AAGL,SAAS,YAAY;AAC1B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,YAAU,MAAM;AACd,QAAI;AACF,gBAAU,aAAa,QAAQ,GAAG,MAAM,GAAG;AAAA,IAC7C,QAAQ;AACN,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,CAAC;AACL,MAAI,OAAQ,QAAO;AACnB,SACE,qBAAC,SAAI,WAAU,6EACb;AAAA,yBAAC,SAAI,WAAU,0CACb;AAAA,0BAAC,YAAO,4CAAuB;AAAA,MAC/B;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM;AACb,gBAAI;AACF,2BAAa,QAAQ,KAAK,GAAG;AAAA,YAC/B,QAAQ;AAAA,YAER;AACA,sBAAU,IAAI;AAAA,UAChB;AAAA,UACD;AAAA;AAAA,MAED;AAAA,OACF;AAAA,IACA,qBAAC,QAAG,WAAU,6BACZ;AAAA,2BAAC,QACC;AAAA,4BAAC,YAAO,sBAAa;AAAA,QAAS;AAAA,QAC9B,oBAAC,YAAO,yBAAW;AAAA,QAAS;AAAA,SAC9B;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QACyD,oBAAC,YAAO,yCAAiB;AAAA,QAAS;AAAA,SAC/F;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,oBAAM;AAAA,QAAS;AAAA,QAAoB,oBAAC,YAAO,mBAAK;AAAA,QAAS;AAAA,SAEnE;AAAA,MACA,qBAAC,QAAG;AAAA;AAAA,QACiB,oBAAC,YAAO,qBAAO;AAAA,QAAS;AAAA,QAAO,oBAAC,YAAO,0BAAY;AAAA,QAAS;AAAA,SACjF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/admin/NewsEditor.d.ts

@@ -0,0 +1,2 @@
+/** Beheer van nieuwsartikelen — zelfde look & feel als de rest van /beheer. */
+export declare function NewsEditor(): import("react").JSX.Element;

package/dist/admin/NewsEditor.js

@@ -0,0 +1,171 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { addDoc, collection, deleteDoc, doc, serverTimestamp, updateDoc } from "firebase/firestore";
+import { getDb } from "../firebase/client";
+import { useSiteConfig } from "../config";
+import { useNews } from "../components/News";
+import { uploadImage } from "./lib/upload";
+import { slugify } from "./lib/slugify";
+import { useConfirm } from "./ui/ConfirmDialog";
+import { useToast } from "./ui/toast";
+import { Button, Card, Field, Input, Badge } from "./ui/primitives";
+import { RichTextEditor } from "./editors/RichTextEditor";
+const empty = { title: "", excerpt: "", body: "", bodyHtml: "", coverUrl: "", date: "", published: false };
+function NewsEditor() {
+  const { siteId } = useSiteConfig();
+  const { articles } = useNews({ onlyPublished: false });
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const [form, setForm] = useState(empty);
+  const [editingId, setEditingId] = useState(null);
+  const [busy, setBusy] = useState(false);
+  const [coverBusy, setCoverBusy] = useState(false);
+  const coverInputRef = useRef(null);
+  function reset() {
+    setForm(empty);
+    setEditingId(null);
+  }
+  function loadIntoForm(a) {
+    setEditingId(a.id);
+    setForm({
+      title: a.title,
+      excerpt: a.excerpt ?? "",
+      body: a.body,
+      bodyHtml: a.bodyHtml ?? "",
+      coverUrl: a.coverUrl ?? "",
+      date: a.date,
+      published: a.published
+    });
+  }
+  async function save() {
+    const db = getDb();
+    if (!db) return;
+    if (!form.title.trim()) {
+      toast({ title: "Titel ontbreekt", description: "Geef het artikel een titel.", tone: "error" });
+      return;
+    }
+    setBusy(true);
+    try {
+      const payload = {
+        title: form.title.trim(),
+        slug: slugify(form.title),
+        excerpt: form.excerpt.trim(),
+        body: form.body,
+        // Rich text (client-side al door DOMPurify gehaald in de editor; de weergave sanitized
+        // bovendien opnieuw bij het renderen — dubbele verdediging).
+        bodyHtml: form.bodyHtml,
+        coverUrl: form.coverUrl.trim(),
+        date: form.date || (/* @__PURE__ */ new Date()).toISOString().slice(0, 10),
+        published: form.published,
+        updatedAt: serverTimestamp()
+      };
+      if (editingId) {
+        await updateDoc(doc(db, "sites", siteId, "news", editingId), payload);
+      } else {
+        await addDoc(collection(db, "sites", siteId, "news"), { ...payload, createdAt: serverTimestamp() });
+      }
+      toast({ title: editingId ? "Artikel bijgewerkt" : "Artikel opgeslagen", tone: "success" });
+      reset();
+    } catch (e) {
+      toast({ title: "Opslaan mislukt", description: e.message, tone: "error" });
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function remove(id, title) {
+    const db = getDb();
+    if (!db) return;
+    const ok = await confirm({
+      title: "Artikel verwijderen?",
+      description: `\u201C${title}\u201D wordt definitief verwijderd.`,
+      confirmLabel: "Verwijderen",
+      tone: "danger"
+    });
+    if (!ok) return;
+    await deleteDoc(doc(db, "sites", siteId, "news", id));
+    if (editingId === id) reset();
+    toast({ title: "Artikel verwijderd", tone: "success" });
+  }
+  async function onCover(file) {
+    setCoverBusy(true);
+    try {
+      const { url } = await uploadImage(siteId, file);
+      setForm((prev) => ({ ...prev, coverUrl: url }));
+      toast({ title: "Foto toegevoegd", description: "Automatisch verkleind voor het web.", tone: "success" });
+    } catch (e) {
+      toast({ title: "Upload mislukt", description: e.message, tone: "error" });
+    } finally {
+      setCoverBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold", children: editingId ? "Artikel bewerken" : "Nieuw artikel" }),
+        editingId && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: reset, children: "+ Nieuw artikel" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+        /* @__PURE__ */ jsx(Field, { label: "Titel", children: /* @__PURE__ */ jsx(Input, { value: form.title, onChange: (e) => setForm({ ...form, title: e.target.value }), placeholder: "Kop van het artikel" }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Korte samenvatting", hint: "Verschijnt in de nieuwslijst.", children: /* @__PURE__ */ jsx(Input, { value: form.excerpt, onChange: (e) => setForm({ ...form, excerpt: e.target.value }) }) }),
+        /* @__PURE__ */ jsx(Field, { label: "Coverfoto", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Input, { value: form.coverUrl, onChange: (e) => setForm({ ...form, coverUrl: e.target.value }), placeholder: "URL of upload \u2192" }),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: coverBusy, onClick: () => coverInputRef.current?.click(), children: coverBusy ? "Uploaden\u2026" : "Upload" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: coverInputRef,
+              type: "file",
+              accept: "image/*",
+              hidden: true,
+              onChange: (e) => {
+                const f = e.target.files?.[0];
+                if (f) void onCover(f);
+                e.target.value = "";
+              }
+            }
+          )
+        ] }) }),
+        form.coverUrl && // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx("img", { src: form.coverUrl, alt: "", className: "h-32 w-full rounded-lg object-cover" }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Datum", children: /* @__PURE__ */ jsx(Input, { type: "date", value: form.date, onChange: (e) => setForm({ ...form, date: e.target.value }) }) }),
+          /* @__PURE__ */ jsx(Field, { label: "Zichtbaarheid", hint: "Aangevinkt = direct zichtbaar op de site; uit = concept.", children: /* @__PURE__ */ jsxs("label", { className: "flex h-9 items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx("input", { type: "checkbox", checked: form.published, onChange: (e) => setForm({ ...form, published: e.target.checked }) }),
+            "Gepubliceerd"
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(Field, { label: "Tekst", hint: "Met opmaak (koppen, lijsten, links, afbeeldingen). Bestaande artikelen zonder opmaak blijven gewoon werken.", children: /* @__PURE__ */ jsx(
+          RichTextEditor,
+          {
+            siteId,
+            value: form.bodyHtml || (form.body ? `<p>${form.body.split(/\n{2,}/).join("</p><p>")}</p>` : ""),
+            onChange: (html) => setForm((f) => ({ ...f, bodyHtml: html }))
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: () => void save(), children: busy ? "Opslaan\u2026" : editingId ? "Wijzigingen opslaan" : "Artikel opslaan" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-3 text-base font-semibold", children: "Artikelen" }),
+      articles.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500", children: "Nog geen artikelen. Maak hierboven je eerste nieuwsartikel." }) : /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: articles.map((a) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-lg border border-slate-200 p-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: a.title }),
+          /* @__PURE__ */ jsxs("span", { className: "text-slate-400", children: [
+            "\xB7 ",
+            a.date
+          ] }),
+          a.published ? /* @__PURE__ */ jsx(Badge, { tone: "green", children: "zichtbaar" }) : /* @__PURE__ */ jsx(Badge, { tone: "amber", children: "concept" })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => loadIntoForm(a), children: "Bewerk" }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => void remove(a.id, a.title), children: "Verwijder" })
+        ] })
+      ] }, a.id)) })
+    ] })
+  ] });
+}
+export {
+  NewsEditor
+};
+//# sourceMappingURL=NewsEditor.js.map