@xiwebdesign/xicms-core 6.3.0 → 6.4.1

package/dist/XiCMSProvider.js

@@ -5,6 +5,7 @@ import { ConfigProvider } from "./config";
 import { AuthProvider, useAuth } from "./auth/AuthProvider";
 import { canEdit } from "./auth/roles";
 import { EditBar } from "./components/EditBar";
+import { FeedbackWidget } from "./components/FeedbackWidget";
 import { DemoLock } from "./lock/DemoLock";
 import { RegistryProvider } from "./blocks/context";
 import { getDb } from "./firebase/client";
@@ -164,6 +165,7 @@ function ModuleLayer({
             /* @__PURE__ */ jsx(DemoStudio, {}),
             children,
             /* @__PURE__ */ jsx(EditBar, {}),
+            /* @__PURE__ */ jsx(FeedbackWidget, { siteId: config.siteId }),
             /* @__PURE__ */ jsx(DemoLock, {}),
             resolved.activeIds.has("consent") && /* @__PURE__ */ jsx(ConsentBanner, { settings: resolved.settings.consent })
           ]

package/dist/XiCMSProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/XiCMSProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { ConfigProvider } from \"./config\";\nimport { AuthProvider, useAuth } from \"./auth/AuthProvider\";\nimport { canEdit } from \"./auth/roles\";\nimport { EditBar } from \"./components/EditBar\";\nimport { DemoLock } from \"./lock/DemoLock\";\nimport { RegistryProvider } from \"./blocks/context\";\nimport { getDb } from \"./firebase/client\";\nimport { collection, onSnapshot } from \"firebase/firestore\";\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 { ConsentBanner, type ConsentSettings } from \"./modules/consent/ConsentBanner\";\nimport { EditorProvider } from \"./editor/EditorProvider\";\nimport { SiteSettingsProvider, useSiteSettings, useSiteSettingsLiveSync } from \"./settings/useSiteSettings\";\nimport { mergeThemeTokens, type ThemeTokens, type PublicSiteSettings } 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` 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) en de EditBar/DemoLock.\n */\nexport function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, customBlocksData, settingsData, 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} 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 * 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  // 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 * 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  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            <CustomBlocksSync siteId={config.siteId} onData={setCustomBlocks} />\n            <SiteSettingsSync siteId={config.siteId} />\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        </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 */\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    if (!editing) return;\n    const db = getDb();\n    if (!db) return;\n    return 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  }, [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 { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { ConfigProvider } from \"./config\";\nimport { AuthProvider, useAuth } from \"./auth/AuthProvider\";\nimport { canEdit } from \"./auth/roles\";\nimport { EditBar } from \"./components/EditBar\";\nimport { FeedbackWidget } from \"./components/FeedbackWidget\";\nimport { DemoLock } from \"./lock/DemoLock\";\nimport { RegistryProvider } from \"./blocks/context\";\nimport { getDb } from \"./firebase/client\";\nimport { collection, onSnapshot } from \"firebase/firestore\";\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 { ConsentBanner, type ConsentSettings } from \"./modules/consent/ConsentBanner\";\nimport { EditorProvider } from \"./editor/EditorProvider\";\nimport { SiteSettingsProvider, useSiteSettings, useSiteSettingsLiveSync } from \"./settings/useSiteSettings\";\nimport { mergeThemeTokens, type ThemeTokens, type PublicSiteSettings } 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` 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) en de EditBar/DemoLock.\n */\nexport function XiCMSProvider({ config, blocks = NO_BLOCKS, modules = NO_MODULES, overrides, astryxTheme, linkComponent, imageComponent, customBlocksData, settingsData, 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} 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 * 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  // 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 * 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  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            <CustomBlocksSync siteId={config.siteId} onData={setCustomBlocks} />\n            <SiteSettingsSync siteId={config.siteId} />\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                    <FeedbackWidget siteId={config.siteId} />\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        </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 */\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    if (!editing) return;\n    const db = getDb();\n    if (!db) return;\n    return 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  }, [editing, siteId, onData]);\n  return null;\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/BlockRenderer.js

@@ -15,7 +15,18 @@ function BlockRenderer({
     const Render = def.Render;
     const attrs = blockStyleAttrs(b._style);
     const rendered = /* @__PURE__ */ jsx(Render, { block: b, siteId, mode });
-    return /* @__PURE__ */ jsx(BlockErrorBoundary, { mode, type: b._type, blockKey: b._key, children: attrs ? /* @__PURE__ */ jsx("div", { id: attrs.id, className: attrs.className, style: attrs.style, "data-xicms-animate": attrs.dataAnimate, children: rendered }) : rendered }, b._key);
+    return /* @__PURE__ */ jsx(BlockErrorBoundary, { mode, type: b._type, blockKey: b._key, children: attrs ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: attrs.id,
+        className: attrs.className,
+        style: attrs.style,
+        "data-xicms-animate": attrs.dataAnimate,
+        "data-xicms-block": b._key,
+        "data-xicms-block-type": b._type,
+        children: rendered
+      }
+    ) : /* @__PURE__ */ jsx("div", { style: { display: "contents" }, "data-xicms-block": b._key, "data-xicms-block-type": b._type, children: rendered }) }, b._key);
   }) });
 }
 export {

package/dist/blocks/BlockRenderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/blocks/BlockRenderer.tsx"],"sourcesContent":["import { validateBlocks, type BlockRegistry } from \"./registry\";\nimport { BlockErrorBoundary } from \"./BlockErrorBoundary\";\nimport { blockStyleAttrs } from \"./blockStyle\";\nimport type { BlockStyle } from \"../schema/blocks\";\n\n/**\n * Rendert een blocks-array via de registry. Server-safe (geen \"use client\"): bruikbaar in\n * React Server Components én client. Geef de registry expliciet mee (zo werkt server-rendering);\n * client-componenten kunnen `useRegistry()` gebruiken om hem te verkrijgen.\n *\n * Elk block wordt in een `BlockErrorBoundary` gewikkeld zodat één kapot block nooit de hele\n * pagina sloopt (foolproof).\n */\nexport function BlockRenderer({\n  blocks,\n  registry,\n  siteId,\n  mode = \"view\",\n}: {\n  blocks: unknown[] | undefined;\n  registry: BlockRegistry;\n  siteId: string;\n  mode?: \"view\" | \"preview\";\n}) {\n  const valid = validateBlocks(blocks, registry);\n  return (\n    <>\n      {valid.map((b) => {\n        const def = registry.get(b._type);\n        if (!def) return null;\n        const Render = def.Render;\n        // Gedeelde blokstijl (ruimte/achtergrond/breedte/uitlijning/anker) centraal toepassen.\n        const attrs = blockStyleAttrs((b as { _style?: BlockStyle })._style);\n        const rendered = <Render block={b} siteId={siteId} mode={mode} />;\n        return (\n          <BlockErrorBoundary key={b._key} mode={mode} type={b._type} blockKey={b._key}>\n            {attrs ? (\n              <div id={attrs.id} className={attrs.className} style={attrs.style} data-xicms-animate={attrs.dataAnimate}>\n                {rendered}\n              </div>\n            ) : (\n              rendered\n            )}\n          </BlockErrorBoundary>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":"AA0BI,mBAOqB,WAPrB;AA1BJ,SAAS,sBAA0C;AACnD,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAWzB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAKG;AACD,QAAM,QAAQ,eAAe,QAAQ,QAAQ;AAC7C,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM;AAChB,UAAM,MAAM,SAAS,IAAI,EAAE,KAAK;AAChC,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,SAAS,IAAI;AAEnB,UAAM,QAAQ,gBAAiB,EAA8B,MAAM;AACnE,UAAM,WAAW,oBAAC,UAAO,OAAO,GAAG,QAAgB,MAAY;AAC/D,WACE,oBAAC,sBAAgC,MAAY,MAAM,EAAE,OAAO,UAAU,EAAE,MACrE,kBACC,oBAAC,SAAI,IAAI,MAAM,IAAI,WAAW,MAAM,WAAW,OAAO,MAAM,OAAO,sBAAoB,MAAM,aAC1F,oBACH,IAEA,YANqB,EAAE,IAQ3B;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/blocks/BlockRenderer.tsx"],"sourcesContent":["import { validateBlocks, type BlockRegistry } from \"./registry\";\nimport { BlockErrorBoundary } from \"./BlockErrorBoundary\";\nimport { blockStyleAttrs } from \"./blockStyle\";\nimport type { BlockStyle } from \"../schema/blocks\";\n\n/**\n * Rendert een blocks-array via de registry. Server-safe (geen \"use client\"): bruikbaar in\n * React Server Components én client. Geef de registry expliciet mee (zo werkt server-rendering);\n * client-componenten kunnen `useRegistry()` gebruiken om hem te verkrijgen.\n *\n * Elk block wordt in een `BlockErrorBoundary` gewikkeld zodat één kapot block nooit de hele\n * pagina sloopt (foolproof).\n */\nexport function BlockRenderer({\n  blocks,\n  registry,\n  siteId,\n  mode = \"view\",\n}: {\n  blocks: unknown[] | undefined;\n  registry: BlockRegistry;\n  siteId: string;\n  mode?: \"view\" | \"preview\";\n}) {\n  const valid = validateBlocks(blocks, registry);\n  return (\n    <>\n      {valid.map((b) => {\n        const def = registry.get(b._type);\n        if (!def) return null;\n        const Render = def.Render;\n        // Gedeelde blokstijl (ruimte/achtergrond/breedte/uitlijning/anker) centraal toepassen.\n        const attrs = blockStyleAttrs((b as { _style?: BlockStyle })._style);\n        const rendered = <Render block={b} siteId={siteId} mode={mode} />;\n        // Altijd een DOM-wrapper met een stabiele block-identifier, zodat het feedback-widget\n        // (en andere tooling) een onderdeel op de pagina kan aanwijzen via\n        // `closest('[data-xicms-block]')`. Zonder eigen blokstijl gebruiken we `display:contents`\n        // zodat de wrapper layout-neutraal is (hij traverseert wél mee in `closest()`).\n        return (\n          <BlockErrorBoundary key={b._key} mode={mode} type={b._type} blockKey={b._key}>\n            {attrs ? (\n              <div\n                id={attrs.id}\n                className={attrs.className}\n                style={attrs.style}\n                data-xicms-animate={attrs.dataAnimate}\n                data-xicms-block={b._key}\n                data-xicms-block-type={b._type}\n              >\n                {rendered}\n              </div>\n            ) : (\n              <div style={{ display: \"contents\" }} data-xicms-block={b._key} data-xicms-block-type={b._type}>\n                {rendered}\n              </div>\n            )}\n          </BlockErrorBoundary>\n        );\n      })}\n    </>\n  );\n}\n"],"mappings":"AA0BI,mBAOqB,WAPrB;AA1BJ,SAAS,sBAA0C;AACnD,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAWzB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAKG;AACD,QAAM,QAAQ,eAAe,QAAQ,QAAQ;AAC7C,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM;AAChB,UAAM,MAAM,SAAS,IAAI,EAAE,KAAK;AAChC,QAAI,CAAC,IAAK,QAAO;AACjB,UAAM,SAAS,IAAI;AAEnB,UAAM,QAAQ,gBAAiB,EAA8B,MAAM;AACnE,UAAM,WAAW,oBAAC,UAAO,OAAO,GAAG,QAAgB,MAAY;AAK/D,WACE,oBAAC,sBAAgC,MAAY,MAAM,EAAE,OAAO,UAAU,EAAE,MACrE,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,WAAW,MAAM;AAAA,QACjB,OAAO,MAAM;AAAA,QACb,sBAAoB,MAAM;AAAA,QAC1B,oBAAkB,EAAE;AAAA,QACpB,yBAAuB,EAAE;AAAA,QAExB;AAAA;AAAA,IACH,IAEA,oBAAC,SAAI,OAAO,EAAE,SAAS,WAAW,GAAG,oBAAkB,EAAE,MAAM,yBAAuB,EAAE,OACrF,oBACH,KAfqB,EAAE,IAiB3B;AAAA,EAEJ,CAAC,GACH;AAEJ;","names":[]}

package/dist/components/FeedbackWidget.d.ts

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

package/dist/components/FeedbackWidget.js

@@ -0,0 +1,275 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAuth } from "../auth/AuthProvider";
+import { canEdit } from "../auth/roles";
+import { useEditor } from "../editor/EditorProvider";
+import { addFeedback, uploadFeedbackShot } from "../firebase/feedback";
+const ACCENT = "#4f46e5";
+function FeedbackWidget({ siteId }) {
+  const { user, role } = useAuth();
+  const { open } = useEditor();
+  const [mode, setMode] = useState("idle");
+  const [picked, setPicked] = useState(null);
+  const [rect, setRect] = useState(null);
+  const [message, setMessage] = useState("");
+  const [withShot, setWithShot] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const pickedRef = useRef(null);
+  const active = Boolean(user) && canEdit(role) || open;
+  const reset = useCallback(() => {
+    setMode("idle");
+    setPicked(null);
+    pickedRef.current = null;
+    setRect(null);
+    setMessage("");
+    setError(null);
+  }, []);
+  useEffect(() => {
+    if (mode !== "picking") return;
+    const blockAt = (x, y) => {
+      const el = document.elementFromPoint(x, y);
+      if (!el || el.closest("[data-xicms-feedback-ignore]")) return null;
+      return el.closest("[data-xicms-block]");
+    };
+    const onMove = (e) => {
+      const block = blockAt(e.clientX, e.clientY);
+      if (!block) {
+        setRect(null);
+        return;
+      }
+      const r = block.getBoundingClientRect();
+      setRect({ top: r.top, left: r.left, width: r.width, height: r.height });
+    };
+    const onClick = (e) => {
+      const block = blockAt(e.clientX, e.clientY);
+      if (!block) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const p = {
+        key: block.dataset.xicmsBlock ?? "",
+        type: block.dataset.xicmsBlockType ?? "",
+        el: block
+      };
+      pickedRef.current = p;
+      setPicked(p);
+      setMode("form");
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") reset();
+    };
+    document.addEventListener("pointermove", onMove, true);
+    document.addEventListener("click", onClick, true);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("pointermove", onMove, true);
+      document.removeEventListener("click", onClick, true);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [mode, reset]);
+  async function captureShot(el) {
+    try {
+      const mod = await import("html2canvas-pro");
+      const html2canvas = mod.default;
+      const canvas = await html2canvas(el, {
+        useCORS: true,
+        backgroundColor: null,
+        scale: Math.min(1.5, window.devicePixelRatio || 1),
+        logging: false,
+        ignoreElements: (node) => node.hasAttribute?.("data-xicms-feedback-ignore")
+      });
+      return await new Promise((res) => canvas.toBlob((b) => res(b), "image/png"));
+    } catch {
+      return null;
+    }
+  }
+  async function submit() {
+    if (!picked || !message.trim()) return;
+    setBusy(true);
+    setError(null);
+    try {
+      let screenshotPath;
+      if (withShot) {
+        const blob = await captureShot(picked.el);
+        if (blob) screenshotPath = await uploadFeedbackShot(siteId, blob).catch(() => void 0);
+      }
+      await addFeedback(siteId, {
+        message: message.trim(),
+        blockKey: picked.key,
+        blockType: picked.type || void 0,
+        pageRoute: typeof window !== "undefined" ? window.location.pathname : void 0,
+        authorUid: user?.uid,
+        authorEmail: user?.email ?? void 0,
+        screenshotPath
+      });
+      setMode("sent");
+      setTimeout(reset, 2200);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Versturen mislukt.");
+    } finally {
+      setBusy(false);
+    }
+  }
+  if (!active) return null;
+  return /* @__PURE__ */ jsxs("div", { "data-xicms-feedback-ignore": "", children: [
+    mode === "picking" && rect && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-xicms-feedback-ignore": "",
+        style: {
+          position: "fixed",
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height,
+          border: `2px solid ${ACCENT}`,
+          background: "rgba(79,70,229,0.08)",
+          borderRadius: 6,
+          zIndex: 2147483e3,
+          pointerEvents: "none",
+          boxShadow: "0 0 0 9999px rgba(15,15,25,0.04)",
+          transition: "all 60ms ease-out"
+        }
+      }
+    ),
+    mode === "picking" && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-xicms-feedback-ignore": "",
+        style: { ...bannerStyle, pointerEvents: "none" },
+        children: [
+          "Klik op een onderdeel om er feedback op te geven \xB7 ",
+          /* @__PURE__ */ jsx("b", { children: "Esc" }),
+          " om te annuleren"
+        ]
+      }
+    ),
+    mode === "idle" && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "data-xicms-feedback-ignore": "",
+        onClick: () => setMode("picking"),
+        style: fabStyle,
+        title: "Feedback geven op een onderdeel",
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 15 }, children: "\u{1F4AC}" }),
+          " Feedback"
+        ]
+      }
+    ),
+    mode === "form" && picked && /* @__PURE__ */ jsxs("div", { "data-xicms-feedback-ignore": "", style: cardStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx("strong", { style: { fontSize: 13 }, children: "Feedback op dit onderdeel" }),
+        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "#8a8f98", fontFamily: "monospace" }, children: picked.type || "block" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          autoFocus: true,
+          value: message,
+          onChange: (e) => setMessage(e.target.value),
+          placeholder: "Wat moet er anders aan dit onderdeel?",
+          rows: 4,
+          style: textareaStyle
+        }
+      ),
+      /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: 12, color: "#4b5563", margin: "8px 0" }, children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: withShot, onChange: (e) => setWithShot(e.target.checked) }),
+        "Screenshot van dit onderdeel meesturen"
+      ] }),
+      error && /* @__PURE__ */ jsx("p", { style: { color: "#dc2626", fontSize: 12, margin: "0 0 8px" }, children: error }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, disabled: busy, style: ghostBtn, children: "Annuleren" }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: submit, disabled: busy || !message.trim(), style: primaryBtn, children: busy ? "Versturen\u2026" : "Versturen" })
+      ] })
+    ] }),
+    mode === "sent" && /* @__PURE__ */ jsxs("div", { "data-xicms-feedback-ignore": "", style: { ...cardStyle, textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { fontSize: 22 }, children: "\u2713" }),
+      /* @__PURE__ */ jsx("p", { style: { fontSize: 13, margin: "4px 0 0", color: "#111827" }, children: "Bedankt! Je feedback is opgeslagen." })
+    ] })
+  ] });
+}
+const fabStyle = {
+  position: "fixed",
+  left: 20,
+  bottom: 20,
+  zIndex: 2147483e3,
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 7,
+  padding: "9px 14px",
+  border: "none",
+  borderRadius: 999,
+  background: ACCENT,
+  color: "#fff",
+  fontSize: 13,
+  fontWeight: 600,
+  fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
+  cursor: "pointer",
+  boxShadow: "0 4px 14px rgba(79,70,229,0.4)"
+};
+const cardStyle = {
+  position: "fixed",
+  left: 20,
+  bottom: 20,
+  zIndex: 2147483e3,
+  width: 320,
+  maxWidth: "calc(100vw - 40px)",
+  padding: 16,
+  background: "#fff",
+  borderRadius: 14,
+  boxShadow: "0 12px 40px rgba(15,15,25,0.22)",
+  border: "1px solid #eceef2",
+  fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
+  color: "#111827"
+};
+const bannerStyle = {
+  position: "fixed",
+  top: 16,
+  left: "50%",
+  transform: "translateX(-50%)",
+  zIndex: 2147483e3,
+  padding: "8px 16px",
+  background: "#111827",
+  color: "#fff",
+  borderRadius: 999,
+  fontSize: 13,
+  fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
+  boxShadow: "0 6px 20px rgba(0,0,0,0.3)"
+};
+const textareaStyle = {
+  width: "100%",
+  boxSizing: "border-box",
+  padding: "8px 10px",
+  border: "1px solid #d7dae0",
+  borderRadius: 8,
+  fontSize: 13,
+  fontFamily: "inherit",
+  resize: "vertical",
+  color: "#111827"
+};
+const primaryBtn = {
+  padding: "7px 14px",
+  border: "none",
+  borderRadius: 8,
+  background: ACCENT,
+  color: "#fff",
+  fontSize: 13,
+  fontWeight: 600,
+  cursor: "pointer"
+};
+const ghostBtn = {
+  padding: "7px 12px",
+  border: "1px solid #d7dae0",
+  borderRadius: 8,
+  background: "#fff",
+  color: "#4b5563",
+  fontSize: 13,
+  cursor: "pointer"
+};
+export {
+  FeedbackWidget
+};
+//# sourceMappingURL=FeedbackWidget.js.map

package/dist/components/FeedbackWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/FeedbackWidget.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useAuth } from \"../auth/AuthProvider\";\nimport { canEdit } from \"../auth/roles\";\nimport { useEditor } from \"../editor/EditorProvider\";\nimport { addFeedback, uploadFeedbackShot } from \"../firebase/feedback\";\n\n/**\n * Feedback per onderdeel — zichtbaar voor ingelogde editors/siteadmins (vaak de klant zelf) én\n * wanneer de editor open staat (preview). Zelfde zichtbaarheidslogica als de EditBar. De gebruiker\n * kiest een onderdeel op de pagina (hover-highlight + klik → het dichtstbijzijnde block met\n * `data-xicms-block`), schrijft feedback en stuurt optioneel een screenshot van dat onderdeel mee.\n * Alles landt in `sites/{siteId}/feedback` en wordt verzameld in het agency-dashboard.\n *\n * Losstaand: inline styles (geen afhankelijkheid van de huisstijl van de site), alle eigen nodes\n * dragen `data-xicms-feedback-ignore` zodat ze buiten screenshots blijven.\n */\ntype Mode = \"idle\" | \"picking\" | \"form\" | \"sent\";\ntype Picked = { key: string; type: string; el: HTMLElement };\ntype Rect = { top: number; left: number; width: number; height: number };\n\nconst ACCENT = \"#4f46e5\";\n\nexport function FeedbackWidget({ siteId }: { siteId: string }) {\n  const { user, role } = useAuth();\n  const { open } = useEditor();\n\n  const [mode, setMode] = useState<Mode>(\"idle\");\n  const [picked, setPicked] = useState<Picked | null>(null);\n  const [rect, setRect] = useState<Rect | null>(null);\n  const [message, setMessage] = useState(\"\");\n  const [withShot, setWithShot] = useState(true);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const pickedRef = useRef<Picked | null>(null);\n\n  const active = (Boolean(user) && canEdit(role)) || open;\n\n  const reset = useCallback(() => {\n    setMode(\"idle\");\n    setPicked(null);\n    pickedRef.current = null;\n    setRect(null);\n    setMessage(\"\");\n    setError(null);\n  }, []);\n\n  // Pick-modus: volg de muis, teken een highlight om het dichtstbijzijnde block, en leg bij klik\n  // het doelblock vast. Widget-eigen elementen (data-xicms-feedback-ignore) negeren we.\n  useEffect(() => {\n    if (mode !== \"picking\") return;\n\n    const blockAt = (x: number, y: number): HTMLElement | null => {\n      const el = document.elementFromPoint(x, y) as HTMLElement | null;\n      if (!el || el.closest(\"[data-xicms-feedback-ignore]\")) return null;\n      return el.closest<HTMLElement>(\"[data-xicms-block]\");\n    };\n\n    const onMove = (e: PointerEvent) => {\n      const block = blockAt(e.clientX, e.clientY);\n      if (!block) {\n        setRect(null);\n        return;\n      }\n      const r = block.getBoundingClientRect();\n      setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n    };\n\n    const onClick = (e: MouseEvent) => {\n      const block = blockAt(e.clientX, e.clientY);\n      if (!block) return;\n      e.preventDefault();\n      e.stopPropagation();\n      const p: Picked = {\n        key: block.dataset.xicmsBlock ?? \"\",\n        type: block.dataset.xicmsBlockType ?? \"\",\n        el: block,\n      };\n      pickedRef.current = p;\n      setPicked(p);\n      setMode(\"form\");\n    };\n\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") reset();\n    };\n\n    document.addEventListener(\"pointermove\", onMove, true);\n    document.addEventListener(\"click\", onClick, true);\n    document.addEventListener(\"keydown\", onKey, true);\n    return () => {\n      document.removeEventListener(\"pointermove\", onMove, true);\n      document.removeEventListener(\"click\", onClick, true);\n      document.removeEventListener(\"keydown\", onKey, true);\n    };\n  }, [mode, reset]);\n\n  async function captureShot(el: HTMLElement): Promise<Blob | null> {\n    try {\n      const mod = await import(\"html2canvas-pro\");\n      const html2canvas = mod.default;\n      const canvas = await html2canvas(el, {\n        useCORS: true,\n        backgroundColor: null,\n        scale: Math.min(1.5, window.devicePixelRatio || 1),\n        logging: false,\n        ignoreElements: (node) => node.hasAttribute?.(\"data-xicms-feedback-ignore\"),\n      });\n      return await new Promise<Blob | null>((res) => canvas.toBlob((b) => res(b), \"image/png\"));\n    } catch {\n      return null; // screenshot is best-effort; feedback gaat alsnog door\n    }\n  }\n\n  async function submit() {\n    if (!picked || !message.trim()) return;\n    setBusy(true);\n    setError(null);\n    try {\n      let screenshotPath: string | undefined;\n      if (withShot) {\n        const blob = await captureShot(picked.el);\n        if (blob) screenshotPath = await uploadFeedbackShot(siteId, blob).catch(() => undefined);\n      }\n      await addFeedback(siteId, {\n        message: message.trim(),\n        blockKey: picked.key,\n        blockType: picked.type || undefined,\n        pageRoute: typeof window !== \"undefined\" ? window.location.pathname : undefined,\n        authorUid: user?.uid,\n        authorEmail: user?.email ?? undefined,\n        screenshotPath,\n      });\n      setMode(\"sent\");\n      setTimeout(reset, 2200);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : \"Versturen mislukt.\");\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  if (!active) return null;\n\n  return (\n    <div data-xicms-feedback-ignore=\"\">\n      {/* Highlight-overlay tijdens het kiezen (pointer-events uit zodat klikken doorgaat). */}\n      {mode === \"picking\" && rect && (\n        <div\n          data-xicms-feedback-ignore=\"\"\n          style={{\n            position: \"fixed\",\n            top: rect.top,\n            left: rect.left,\n            width: rect.width,\n            height: rect.height,\n            border: `2px solid ${ACCENT}`,\n            background: \"rgba(79,70,229,0.08)\",\n            borderRadius: 6,\n            zIndex: 2147483000,\n            pointerEvents: \"none\",\n            boxShadow: \"0 0 0 9999px rgba(15,15,25,0.04)\",\n            transition: \"all 60ms ease-out\",\n          }}\n        />\n      )}\n\n      {/* Instructiebalk tijdens het kiezen. */}\n      {mode === \"picking\" && (\n        <div\n          data-xicms-feedback-ignore=\"\"\n          style={{ ...bannerStyle, pointerEvents: \"none\" }}\n        >\n          Klik op een onderdeel om er feedback op te geven · <b>Esc</b> om te annuleren\n        </div>\n      )}\n\n      {/* Zwevende knop (linksonder — EditBar zit rechtsonder). */}\n      {mode === \"idle\" && (\n        <button\n          type=\"button\"\n          data-xicms-feedback-ignore=\"\"\n          onClick={() => setMode(\"picking\")}\n          style={fabStyle}\n          title=\"Feedback geven op een onderdeel\"\n        >\n          <span style={{ fontSize: 15 }}>💬</span> Feedback\n        </button>\n      )}\n\n      {/* Formulier na het kiezen van een onderdeel. */}\n      {mode === \"form\" && picked && (\n        <div data-xicms-feedback-ignore=\"\" style={cardStyle}>\n          <div style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", marginBottom: 8 }}>\n            <strong style={{ fontSize: 13 }}>Feedback op dit onderdeel</strong>\n            <span style={{ fontSize: 11, color: \"#8a8f98\", fontFamily: \"monospace\" }}>{picked.type || \"block\"}</span>\n          </div>\n          <textarea\n            autoFocus\n            value={message}\n            onChange={(e) => setMessage(e.target.value)}\n            placeholder=\"Wat moet er anders aan dit onderdeel?\"\n            rows={4}\n            style={textareaStyle}\n          />\n          <label style={{ display: \"flex\", alignItems: \"center\", gap: 6, fontSize: 12, color: \"#4b5563\", margin: \"8px 0\" }}>\n            <input type=\"checkbox\" checked={withShot} onChange={(e) => setWithShot(e.target.checked)} />\n            Screenshot van dit onderdeel meesturen\n          </label>\n          {error && <p style={{ color: \"#dc2626\", fontSize: 12, margin: \"0 0 8px\" }}>{error}</p>}\n          <div style={{ display: \"flex\", gap: 8, justifyContent: \"flex-end\" }}>\n            <button type=\"button\" onClick={reset} disabled={busy} style={ghostBtn}>Annuleren</button>\n            <button type=\"button\" onClick={submit} disabled={busy || !message.trim()} style={primaryBtn}>\n              {busy ? \"Versturen…\" : \"Versturen\"}\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Bevestiging. */}\n      {mode === \"sent\" && (\n        <div data-xicms-feedback-ignore=\"\" style={{ ...cardStyle, textAlign: \"center\" }}>\n          <div style={{ fontSize: 22 }}>✓</div>\n          <p style={{ fontSize: 13, margin: \"4px 0 0\", color: \"#111827\" }}>Bedankt! Je feedback is opgeslagen.</p>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ── Inline styles (los van de huisstijl van de site) ──────────────────────── */\nconst fabStyle: React.CSSProperties = {\n  position: \"fixed\",\n  left: 20,\n  bottom: 20,\n  zIndex: 2147483000,\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  gap: 7,\n  padding: \"9px 14px\",\n  border: \"none\",\n  borderRadius: 999,\n  background: ACCENT,\n  color: \"#fff\",\n  fontSize: 13,\n  fontWeight: 600,\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  cursor: \"pointer\",\n  boxShadow: \"0 4px 14px rgba(79,70,229,0.4)\",\n};\nconst cardStyle: React.CSSProperties = {\n  position: \"fixed\",\n  left: 20,\n  bottom: 20,\n  zIndex: 2147483000,\n  width: 320,\n  maxWidth: \"calc(100vw - 40px)\",\n  padding: 16,\n  background: \"#fff\",\n  borderRadius: 14,\n  boxShadow: \"0 12px 40px rgba(15,15,25,0.22)\",\n  border: \"1px solid #eceef2\",\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  color: \"#111827\",\n};\nconst bannerStyle: React.CSSProperties = {\n  position: \"fixed\",\n  top: 16,\n  left: \"50%\",\n  transform: \"translateX(-50%)\",\n  zIndex: 2147483000,\n  padding: \"8px 16px\",\n  background: \"#111827\",\n  color: \"#fff\",\n  borderRadius: 999,\n  fontSize: 13,\n  fontFamily: \"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif\",\n  boxShadow: \"0 6px 20px rgba(0,0,0,0.3)\",\n};\nconst textareaStyle: React.CSSProperties = {\n  width: \"100%\",\n  boxSizing: \"border-box\",\n  padding: \"8px 10px\",\n  border: \"1px solid #d7dae0\",\n  borderRadius: 8,\n  fontSize: 13,\n  fontFamily: \"inherit\",\n  resize: \"vertical\",\n  color: \"#111827\",\n};\nconst primaryBtn: React.CSSProperties = {\n  padding: \"7px 14px\",\n  border: \"none\",\n  borderRadius: 8,\n  background: ACCENT,\n  color: \"#fff\",\n  fontSize: 13,\n  fontWeight: 600,\n  cursor: \"pointer\",\n};\nconst ghostBtn: React.CSSProperties = {\n  padding: \"7px 12px\",\n  border: \"1px solid #d7dae0\",\n  borderRadius: 8,\n  background: \"#fff\",\n  color: \"#4b5563\",\n  fontSize: 13,\n  cursor: \"pointer\",\n};\n"],"mappings":"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","names":[]}

package/dist/firebase/feedback.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Feedback per onderdeel (review door een ingelogde editor/siteadmin). Opslag per site in
+ * `sites/{siteId}/feedback/{id}` (multi-tenant), screenshots in de privé-Storage
+ * `sites/{siteId}/feedback/{uuid}.png`. Editor-gated door de firestore/storage-rules. Wordt
+ * verzameld in het agency-dashboard via de listSiteFeedback-callable.
+ */
+export interface FeedbackPayload {
+    message: string;
+    blockKey: string;
+    blockType?: string;
+    pageRoute?: string;
+    authorUid?: string;
+    authorEmail?: string;
+    screenshotPath?: string;
+}
+/** Uploadt een screenshot-blob en geeft het Storage-pad terug (of undefined als Storage ontbreekt). */
+export declare function uploadFeedbackShot(siteId: string, blob: Blob): Promise<string | undefined>;
+/** Schrijft een feedback-item. `status` start op "open"; het dashboard zet later "verwerkt". */
+export declare function addFeedback(siteId: string, payload: FeedbackPayload): Promise<void>;

package/dist/firebase/feedback.js

@@ -0,0 +1,23 @@
+"use client";
+import { addDoc, collection, serverTimestamp } from "firebase/firestore";
+import { ref, uploadBytes } from "firebase/storage";
+import { getDb, getBucket } from "./client";
+async function uploadFeedbackShot(siteId, blob) {
+  const bucket = getBucket();
+  if (!bucket) return void 0;
+  const path = `sites/${siteId}/feedback/${crypto.randomUUID()}.png`;
+  await uploadBytes(ref(bucket, path), blob, { contentType: "image/png" });
+  return path;
+}
+async function addFeedback(siteId, payload) {
+  const db = getDb();
+  if (!db) throw new Error("Firebase niet beschikbaar.");
+  const clean = { status: "open", createdAt: serverTimestamp() };
+  for (const [k, v] of Object.entries(payload)) if (v !== void 0 && v !== "") clean[k] = v;
+  await addDoc(collection(db, "sites", siteId, "feedback"), clean);
+}
+export {
+  addFeedback,
+  uploadFeedbackShot
+};
+//# sourceMappingURL=feedback.js.map

package/dist/firebase/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/firebase/feedback.ts"],"sourcesContent":["\"use client\";\n\nimport { addDoc, collection, serverTimestamp } from \"firebase/firestore\";\nimport { ref, uploadBytes } from \"firebase/storage\";\nimport { getDb, getBucket } from \"./client\";\n\n/**\n * Feedback per onderdeel (review door een ingelogde editor/siteadmin). Opslag per site in\n * `sites/{siteId}/feedback/{id}` (multi-tenant), screenshots in de privé-Storage\n * `sites/{siteId}/feedback/{uuid}.png`. Editor-gated door de firestore/storage-rules. Wordt\n * verzameld in het agency-dashboard via de listSiteFeedback-callable.\n */\nexport interface FeedbackPayload {\n  message: string;\n  blockKey: string;\n  blockType?: string;\n  pageRoute?: string;\n  authorUid?: string;\n  authorEmail?: string;\n  screenshotPath?: string;\n}\n\n/** Uploadt een screenshot-blob en geeft het Storage-pad terug (of undefined als Storage ontbreekt). */\nexport async function uploadFeedbackShot(siteId: string, blob: Blob): Promise<string | undefined> {\n  const bucket = getBucket();\n  if (!bucket) return undefined;\n  const path = `sites/${siteId}/feedback/${crypto.randomUUID()}.png`;\n  await uploadBytes(ref(bucket, path), blob, { contentType: \"image/png\" });\n  return path;\n}\n\n/** Schrijft een feedback-item. `status` start op \"open\"; het dashboard zet later \"verwerkt\". */\nexport async function addFeedback(siteId: string, payload: FeedbackPayload): Promise<void> {\n  const db = getDb();\n  if (!db) throw new Error(\"Firebase niet beschikbaar.\");\n  // Undefined velden weglaten (Firestore accepteert geen undefined).\n  const clean: Record<string, unknown> = { status: \"open\", createdAt: serverTimestamp() };\n  for (const [k, v] of Object.entries(payload)) if (v !== undefined && v !== \"\") clean[k] = v;\n  await addDoc(collection(db, \"sites\", siteId, \"feedback\"), clean);\n}\n"],"mappings":";AAEA,SAAS,QAAQ,YAAY,uBAAuB;AACpD,SAAS,KAAK,mBAAmB;AACjC,SAAS,OAAO,iBAAiB;AAmBjC,eAAsB,mBAAmB,QAAgB,MAAyC;AAChG,QAAM,SAAS,UAAU;AACzB,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,OAAO,SAAS,MAAM,aAAa,OAAO,WAAW,CAAC;AAC5D,QAAM,YAAY,IAAI,QAAQ,IAAI,GAAG,MAAM,EAAE,aAAa,YAAY,CAAC;AACvE,SAAO;AACT;AAGA,eAAsB,YAAY,QAAgB,SAAyC;AACzF,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,GAAI,OAAM,IAAI,MAAM,4BAA4B;AAErD,QAAM,QAAiC,EAAE,QAAQ,QAAQ,WAAW,gBAAgB,EAAE;AACtF,aAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,OAAO,EAAG,KAAI,MAAM,UAAa,MAAM,GAAI,OAAM,CAAC,IAAI;AAC1F,QAAM,OAAO,WAAW,IAAI,SAAS,QAAQ,UAAU,GAAG,KAAK;AACjE;","names":[]}

package/dist/modules/shop/blocks/ProductGrid.d.ts

@@ -6,12 +6,14 @@ export declare function PriceLine({ product, currency }: {
     product: StoredProduct;
     currency: string;
 }): import("react").JSX.Element;
-export declare function ProductCard({ product, siteId, currency, detailPath, cartPath, t, }: {
+export declare function ProductCard({ product, siteId, currency, detailPath, cartPath, t, filterColor, }: {
     product: StoredProduct;
     siteId: string;
     currency: string;
     detailPath: string;
     cartPath: string;
     t: ShopT;
+    /** Actief kleurfilter uit het overzicht — toont bij voorkeur de foto van die kleur. */
+    filterColor?: string | null;
 }): import("react").JSX.Element;
 export declare const productGridBlock: import("../../..").BlockDefinition<z.ZodTypeAny>;

package/dist/modules/shop/blocks/ProductGrid.js

@@ -57,14 +57,16 @@ function ProductCard({
   currency,
   detailPath,
   cartPath,
-  t
+  t,
+  filterColor
 }) {
   const [added, setAdded] = useState(false);
   const [hoverImage, setHoverImage] = useState(null);
   const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;
   const simple = (product.options ?? []).length === 0 && !(product.personalization ?? []).length;
   const soldOut = isSoldOut(product);
-  const image = hoverImage ?? product.images?.[0];
+  const filterImage = filterColor ? kleurOptie(product)?.images?.[filterColor] : void 0;
+  const image = hoverImage ?? filterImage ?? product.images?.[0];
   return (
     // Flex-kolom over de volle kaarthoogte: titel (vast 2 regels) → prijs → swatches →
     // knop onderaan. Zo lijnen prijs/swatches/knop over álle kaarten in de rij uit, ook
@@ -229,7 +231,8 @@ function ProductGridRender({ block, siteId }) {
             currency: settings.currency,
             detailPath: settings.detailPath,
             cartPath: settings.cartPath,
-            t
+            t,
+            filterColor
           },
           p.id
         ))

package/dist/modules/shop/blocks/ProductGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/shop/blocks/ProductGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { ProductGridBlockSchema, formatCents } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { cartAdd } from \"../cartStore\";\nimport { useShopStrings, type ShopT } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchShopCategories,\n  kleurNaarCss,\n  kleurOptie,\n  readQueryParam,\n  useShopSettings,\n  type StoredProduct,\n  type StoredShopCategory,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\n\ntype Blk = z.infer<typeof ProductGridBlockSchema>;\n\n/** Prijsregel met optionele doorgestreepte \"van\"-prijs en \"vanaf\" bij variant-prijzen. */\nexport function PriceLine({ product, currency }: { product: StoredProduct; currency: string }) {\n  const variantPrices = (product.variants ?? [])\n    .filter((v) => v.priceCents !== undefined)\n    .map((v) => v.priceCents as number);\n  const min = Math.min(product.priceCents, ...variantPrices);\n  const hasRange = variantPrices.some((p) => p !== product.priceCents);\n  return (\n    <span className=\"xicms-shop-price\">\n      {product.compareAtCents !== undefined && product.compareAtCents > min && (\n        <s style={{ opacity: 0.6, marginRight: 6 }}>{formatCents(product.compareAtCents, currency)}</s>\n      )}\n      {hasRange ? `vanaf ${formatCents(min, currency)}` : formatCents(min, currency)}\n    </span>\n  );\n}\n\n/** Uitverkocht (alleen betrouwbaar vast te stellen zonder opties: expliciete voorraad 0). */\nfunction isSoldOut(p: StoredProduct): boolean {\n  return p.trackStock === true && (p.options ?? []).length === 0 && p.stock !== undefined && p.stock <= 0;\n}\n\n/** Stof-stipjes; hover wisselt de kaartfoto naar de per-kleur-afbeelding (als die er is). */\nfunction ColorSwatches({ product, onHover }: { product: StoredProduct; onHover?: (url: string | null) => void }) {\n  const optie = kleurOptie(product);\n  if (!optie) return null;\n  const dots = optie.values\n    .map((v) => ({ v, css: kleurNaarCss(v), img: optie.images?.[v] }))\n    .filter((d): d is { v: string; css: string; img: string | undefined } => d.css !== null);\n  if (dots.length === 0) return null;\n  return (\n    <span className=\"xicms-shop-card__swatches\" aria-label={`Kleuren: ${optie.values.join(\", \")}`}>\n      {dots.map((d) => (\n        <span\n          key={d.v}\n          className=\"xicms-shop-card__swatch\"\n          title={d.v}\n          onMouseEnter={d.img && onHover ? () => onHover(d.img ?? null) : undefined}\n          onMouseLeave={d.img && onHover ? () => onHover(null) : undefined}\n          style={{\n            display: \"inline-block\",\n            width: 12,\n            height: 12,\n            borderRadius: 999,\n            background: d.css,\n            boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\",\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport function ProductCard({\n  product,\n  siteId,\n  currency,\n  detailPath,\n  cartPath,\n  t,\n}: {\n  product: StoredProduct;\n  siteId: string;\n  currency: string;\n  detailPath: string;\n  cartPath: string;\n  t: ShopT;\n}) {\n  const [added, setAdded] = useState(false);\n  const [hoverImage, setHoverImage] = useState<string | null>(null);\n  const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;\n  const simple = (product.options ?? []).length === 0 && !(product.personalization ?? []).length;\n  const soldOut = isSoldOut(product);\n  const image = hoverImage ?? product.images?.[0];\n\n  return (\n    // Flex-kolom over de volle kaarthoogte: titel (vast 2 regels) → prijs → swatches →\n    // knop onderaan. Zo lijnen prijs/swatches/knop over álle kaarten in de rij uit, ook\n    // als een productnaam één of twee regels beslaat. Alle opmaak in styles.css.\n    <Card padding={0} className=\"xicms-shop-card\">\n      <a className=\"xicms-shop-card__link\" href={href}>\n        <div className=\"xicms-shop-card__media\">\n          {image ? (\n            <img src={image} alt={product.name} loading=\"lazy\" className=\"xicms-shop-card__img\" />\n          ) : (\n            <div className=\"xicms-shop-card__placeholder\" aria-hidden=\"true\" />\n          )}\n          {soldOut && <span className=\"xicms-shop-card__soldout\">{t(\"soldOut\")}</span>}\n        </div>\n        <div className=\"xicms-shop-card__body\">\n          <span className=\"xicms-shop-card__name\">{product.name}</span>\n          <span className=\"xicms-shop-card__priceline\">\n            <PriceLine product={product} currency={currency} />\n          </span>\n          <span className=\"xicms-shop-card__swatchrow\">\n            <ColorSwatches product={product} onHover={setHoverImage} />\n          </span>\n        </div>\n      </a>\n      <div className=\"xicms-shop-card__actions\">\n        {simple ? (\n          added ? (\n            <a className=\"xicms-shop-card__added\" href={cartPath}>\n              {t(\"addedGoToCart\")}\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"xicms-btn xicms-btn--primary\"\n              disabled={soldOut}\n              style={{ cursor: soldOut ? \"not-allowed\" : \"pointer\" }}\n              onClick={() => {\n                cartAdd(siteId, {\n                  productId: product.id,\n                  slug: product.slug,\n                  name: product.name,\n                  unitPriceCents: product.priceCents,\n                  imageUrl: product.images?.[0],\n                });\n                setAdded(true);\n              }}\n            >\n              {t(\"addToCart\")}\n            </button>\n          )\n        ) : (\n          <a className=\"xicms-btn xicms-btn--secondary\" href={href}>\n            {t(\"view\")}\n          </a>\n        )}\n      </div>\n    </Card>\n  );\n}\n\nfunction ProductGridRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [products, setProducts] = useState<StoredProduct[] | null>(serverData?.products ?? null);\n  const [cats, setCats] = useState<StoredShopCategory[]>(serverData?.categories ?? []);\n  const [queryCat, setQueryCat] = useState<string | null>(null);\n  const [filterColor, setFilterColor] = useState<string | null>(null);\n  const [filterSize, setFilterSize] = useState<string | null>(null);\n  const [sort, setSort] = useState<Blk[\"sort\"]>(block.sort);\n\n  useEffect(() => {\n    // Server-data aanwezig (SSR/ISR)? Dan geen client-fetch — geen flits, minder reads.\n    if (!serverData?.products) {\n      void fetchActiveProducts(siteId).then(setProducts).catch((e) => {\n        console.warn(\"[xicms] producten laden mislukt:\", e);\n        setProducts([]);\n      });\n    }\n    if (!serverData?.categories) {\n      void fetchShopCategories(siteId).then(setCats).catch(() => setCats([]));\n    }\n    if (block.useQueryCategory && !block.categorySlug) setQueryCat(readQueryParam(\"cat\"));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [siteId, block.useQueryCategory, block.categorySlug]);\n\n  const activeSlug = block.categorySlug || queryCat || null;\n  const activeCat = activeSlug ? cats.find((c) => c.slug === activeSlug) ?? null : null;\n\n  /** Beschikbare filterwaarden uit de geladen set (client-side; geen extra reads). */\n  const filterValues = useMemo(() => {\n    if (!block.showFilters || !products) return { colors: [] as string[], sizes: [] as string[] };\n    const colors = new Set<string>();\n    const sizes = new Set<string>();\n    for (const p of products) {\n      for (const o of p.options ?? []) {\n        if (/^kleur|^colou?r/i.test(o.name)) o.values.forEach((v) => colors.add(v));\n        if (/^maat|^size/i.test(o.name)) o.values.forEach((v) => sizes.add(v));\n      }\n    }\n    return { colors: [...colors], sizes: [...sizes].sort((a, b) => Number(a) - Number(b) || a.localeCompare(b)) };\n  }, [products, block.showFilters]);\n\n  const visible = useMemo(() => {\n    if (!products) return [];\n    let list = products;\n    if (activeCat) list = list.filter((p) => (p.categoryIds ?? []).includes(activeCat.id));\n    if (block.featuredOnly) list = list.filter((p) => p.featured);\n    if (filterColor) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^kleur|^colou?r/i.test(o.name) && o.values.includes(filterColor)),\n      );\n    }\n    if (filterSize) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^maat|^size/i.test(o.name) && o.values.includes(filterSize)),\n      );\n    }\n    const sorted = [...list];\n    if (sort === \"name\") sorted.sort((a, b) => a.name.localeCompare(b.name, \"nl\"));\n    else if (sort === \"priceAsc\") sorted.sort((a, b) => a.priceCents - b.priceCents);\n    else if (sort === \"priceDesc\") sorted.sort((a, b) => b.priceCents - a.priceCents);\n    else sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, \"nl\"));\n    return sorted.slice(0, block.limit);\n  }, [products, activeCat, block.featuredOnly, block.limit, sort, filterColor, filterSize]);\n\n  if (products === null) return null;\n\n  const chip = (label: string, active: boolean, onClick: () => void, swatch?: string | null) => (\n    <button\n      key={label}\n      type=\"button\"\n      className={`xicms-shop-filterchip${active ? \" xicms-shop-filterchip--active\" : \"\"}`}\n      aria-pressed={active}\n      onClick={onClick}\n    >\n      {swatch && (\n        <span\n          aria-hidden\n          style={{ display: \"inline-block\", width: 10, height: 10, borderRadius: 999, background: swatch, boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\", marginRight: 5 }}\n        />\n      )}\n      {label}\n    </button>\n  );\n\n  return (\n    <div className=\"xicms-shop-grid\">\n      {(block.heading || activeCat) && (\n        <Heading level={2} data-xicms-edit=\"heading\">\n          {activeCat?.name ?? block.heading}\n        </Heading>\n      )}\n      {activeCat && (\n        <Text size=\"sm\" display=\"block\" style={{ marginTop: 4 }}>\n          <a href={settings.shopPath}>← {t(\"allCategories\")}</a>\n        </Text>\n      )}\n\n      {block.showFilters && (filterValues.colors.length > 0 || filterValues.sizes.length > 0) && (\n        <div className=\"xicms-shop-filters\">\n          {filterValues.colors.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Kleur\">\n              {chip(t(\"filterAll\"), filterColor === null, () => setFilterColor(null))}\n              {filterValues.colors.map((c) =>\n                chip(c, filterColor === c, () => setFilterColor(filterColor === c ? null : c), kleurNaarCss(c)),\n              )}\n            </div>\n          )}\n          {filterValues.sizes.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Maat\">\n              {chip(t(\"filterAll\"), filterSize === null, () => setFilterSize(null))}\n              {filterValues.sizes.map((s) => chip(s, filterSize === s, () => setFilterSize(filterSize === s ? null : s)))}\n            </div>\n          )}\n          <label className=\"xicms-shop-filters__sort\">\n            <span>{t(\"sortLabel\")}</span>\n            <select className=\"xicms-input\" value={sort} onChange={(e) => setSort(e.target.value as Blk[\"sort\"])}>\n              <option value=\"order\">{t(\"sortDefault\")}</option>\n              <option value=\"name\">{t(\"sortName\")}</option>\n              <option value=\"priceAsc\">{t(\"sortPriceAsc\")}</option>\n              <option value=\"priceDesc\">{t(\"sortPriceDesc\")}</option>\n            </select>\n          </label>\n        </div>\n      )}\n\n      {visible.length === 0 ? (\n        <Card padding={4} variant=\"muted\" style={{ marginTop: \"1rem\" }}>\n          <Text>{t(\"noProducts\")}</Text>\n        </Card>\n      ) : (\n        <div\n          className=\"xicms-shop-grid__items\"\n          data-columns={block.columns}\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: `repeat(auto-fill, minmax(min(240px, calc(100%/${block.columns} - 1rem)), 1fr))`,\n            gap: \"1.25rem\",\n            marginTop: \"1.25rem\",\n          }}\n        >\n          {visible.map((p) => (\n            <ProductCard\n              key={p.id}\n              product={p}\n              siteId={siteId}\n              currency={settings.currency}\n              detailPath={settings.detailPath}\n              cartPath={settings.cartPath}\n              t={t}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const productGridBlock = defineBlock({\n  type: \"productGrid\",\n  schema: ProductGridBlockSchema,\n  Render: ProductGridRender,\n  label: \"Producten-overzicht\",\n  icon: \"🛍️\",\n  defaults: () => ({ useQueryCategory: true, columns: 3, limit: 60, sort: \"order\" }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/modules/shop/blocks/ProductGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { ProductGridBlockSchema, formatCents } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { cartAdd } from \"../cartStore\";\nimport { useShopStrings, type ShopT } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchShopCategories,\n  kleurNaarCss,\n  kleurOptie,\n  readQueryParam,\n  useShopSettings,\n  type StoredProduct,\n  type StoredShopCategory,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\n\ntype Blk = z.infer<typeof ProductGridBlockSchema>;\n\n/** Prijsregel met optionele doorgestreepte \"van\"-prijs en \"vanaf\" bij variant-prijzen. */\nexport function PriceLine({ product, currency }: { product: StoredProduct; currency: string }) {\n  const variantPrices = (product.variants ?? [])\n    .filter((v) => v.priceCents !== undefined)\n    .map((v) => v.priceCents as number);\n  const min = Math.min(product.priceCents, ...variantPrices);\n  const hasRange = variantPrices.some((p) => p !== product.priceCents);\n  return (\n    <span className=\"xicms-shop-price\">\n      {product.compareAtCents !== undefined && product.compareAtCents > min && (\n        <s style={{ opacity: 0.6, marginRight: 6 }}>{formatCents(product.compareAtCents, currency)}</s>\n      )}\n      {hasRange ? `vanaf ${formatCents(min, currency)}` : formatCents(min, currency)}\n    </span>\n  );\n}\n\n/** Uitverkocht (alleen betrouwbaar vast te stellen zonder opties: expliciete voorraad 0). */\nfunction isSoldOut(p: StoredProduct): boolean {\n  return p.trackStock === true && (p.options ?? []).length === 0 && p.stock !== undefined && p.stock <= 0;\n}\n\n/** Stof-stipjes; hover wisselt de kaartfoto naar de per-kleur-afbeelding (als die er is). */\nfunction ColorSwatches({ product, onHover }: { product: StoredProduct; onHover?: (url: string | null) => void }) {\n  const optie = kleurOptie(product);\n  if (!optie) return null;\n  const dots = optie.values\n    .map((v) => ({ v, css: kleurNaarCss(v), img: optie.images?.[v] }))\n    .filter((d): d is { v: string; css: string; img: string | undefined } => d.css !== null);\n  if (dots.length === 0) return null;\n  return (\n    <span className=\"xicms-shop-card__swatches\" aria-label={`Kleuren: ${optie.values.join(\", \")}`}>\n      {dots.map((d) => (\n        <span\n          key={d.v}\n          className=\"xicms-shop-card__swatch\"\n          title={d.v}\n          onMouseEnter={d.img && onHover ? () => onHover(d.img ?? null) : undefined}\n          onMouseLeave={d.img && onHover ? () => onHover(null) : undefined}\n          style={{\n            display: \"inline-block\",\n            width: 12,\n            height: 12,\n            borderRadius: 999,\n            background: d.css,\n            boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\",\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport function ProductCard({\n  product,\n  siteId,\n  currency,\n  detailPath,\n  cartPath,\n  t,\n  filterColor,\n}: {\n  product: StoredProduct;\n  siteId: string;\n  currency: string;\n  detailPath: string;\n  cartPath: string;\n  t: ShopT;\n  /** Actief kleurfilter uit het overzicht — toont bij voorkeur de foto van die kleur. */\n  filterColor?: string | null;\n}) {\n  const [added, setAdded] = useState(false);\n  const [hoverImage, setHoverImage] = useState<string | null>(null);\n  const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;\n  const simple = (product.options ?? []).length === 0 && !(product.personalization ?? []).length;\n  const soldOut = isSoldOut(product);\n  const filterImage = filterColor ? kleurOptie(product)?.images?.[filterColor] : undefined;\n  const image = hoverImage ?? filterImage ?? product.images?.[0];\n\n  return (\n    // Flex-kolom over de volle kaarthoogte: titel (vast 2 regels) → prijs → swatches →\n    // knop onderaan. Zo lijnen prijs/swatches/knop over álle kaarten in de rij uit, ook\n    // als een productnaam één of twee regels beslaat. Alle opmaak in styles.css.\n    <Card padding={0} className=\"xicms-shop-card\">\n      <a className=\"xicms-shop-card__link\" href={href}>\n        <div className=\"xicms-shop-card__media\">\n          {image ? (\n            <img src={image} alt={product.name} loading=\"lazy\" className=\"xicms-shop-card__img\" />\n          ) : (\n            <div className=\"xicms-shop-card__placeholder\" aria-hidden=\"true\" />\n          )}\n          {soldOut && <span className=\"xicms-shop-card__soldout\">{t(\"soldOut\")}</span>}\n        </div>\n        <div className=\"xicms-shop-card__body\">\n          <span className=\"xicms-shop-card__name\">{product.name}</span>\n          <span className=\"xicms-shop-card__priceline\">\n            <PriceLine product={product} currency={currency} />\n          </span>\n          <span className=\"xicms-shop-card__swatchrow\">\n            <ColorSwatches product={product} onHover={setHoverImage} />\n          </span>\n        </div>\n      </a>\n      <div className=\"xicms-shop-card__actions\">\n        {simple ? (\n          added ? (\n            <a className=\"xicms-shop-card__added\" href={cartPath}>\n              {t(\"addedGoToCart\")}\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"xicms-btn xicms-btn--primary\"\n              disabled={soldOut}\n              style={{ cursor: soldOut ? \"not-allowed\" : \"pointer\" }}\n              onClick={() => {\n                cartAdd(siteId, {\n                  productId: product.id,\n                  slug: product.slug,\n                  name: product.name,\n                  unitPriceCents: product.priceCents,\n                  imageUrl: product.images?.[0],\n                });\n                setAdded(true);\n              }}\n            >\n              {t(\"addToCart\")}\n            </button>\n          )\n        ) : (\n          <a className=\"xicms-btn xicms-btn--secondary\" href={href}>\n            {t(\"view\")}\n          </a>\n        )}\n      </div>\n    </Card>\n  );\n}\n\nfunction ProductGridRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [products, setProducts] = useState<StoredProduct[] | null>(serverData?.products ?? null);\n  const [cats, setCats] = useState<StoredShopCategory[]>(serverData?.categories ?? []);\n  const [queryCat, setQueryCat] = useState<string | null>(null);\n  const [filterColor, setFilterColor] = useState<string | null>(null);\n  const [filterSize, setFilterSize] = useState<string | null>(null);\n  const [sort, setSort] = useState<Blk[\"sort\"]>(block.sort);\n\n  useEffect(() => {\n    // Server-data aanwezig (SSR/ISR)? Dan geen client-fetch — geen flits, minder reads.\n    if (!serverData?.products) {\n      void fetchActiveProducts(siteId).then(setProducts).catch((e) => {\n        console.warn(\"[xicms] producten laden mislukt:\", e);\n        setProducts([]);\n      });\n    }\n    if (!serverData?.categories) {\n      void fetchShopCategories(siteId).then(setCats).catch(() => setCats([]));\n    }\n    if (block.useQueryCategory && !block.categorySlug) setQueryCat(readQueryParam(\"cat\"));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [siteId, block.useQueryCategory, block.categorySlug]);\n\n  const activeSlug = block.categorySlug || queryCat || null;\n  const activeCat = activeSlug ? cats.find((c) => c.slug === activeSlug) ?? null : null;\n\n  /** Beschikbare filterwaarden uit de geladen set (client-side; geen extra reads). */\n  const filterValues = useMemo(() => {\n    if (!block.showFilters || !products) return { colors: [] as string[], sizes: [] as string[] };\n    const colors = new Set<string>();\n    const sizes = new Set<string>();\n    for (const p of products) {\n      for (const o of p.options ?? []) {\n        if (/^kleur|^colou?r/i.test(o.name)) o.values.forEach((v) => colors.add(v));\n        if (/^maat|^size/i.test(o.name)) o.values.forEach((v) => sizes.add(v));\n      }\n    }\n    return { colors: [...colors], sizes: [...sizes].sort((a, b) => Number(a) - Number(b) || a.localeCompare(b)) };\n  }, [products, block.showFilters]);\n\n  const visible = useMemo(() => {\n    if (!products) return [];\n    let list = products;\n    if (activeCat) list = list.filter((p) => (p.categoryIds ?? []).includes(activeCat.id));\n    if (block.featuredOnly) list = list.filter((p) => p.featured);\n    if (filterColor) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^kleur|^colou?r/i.test(o.name) && o.values.includes(filterColor)),\n      );\n    }\n    if (filterSize) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^maat|^size/i.test(o.name) && o.values.includes(filterSize)),\n      );\n    }\n    const sorted = [...list];\n    if (sort === \"name\") sorted.sort((a, b) => a.name.localeCompare(b.name, \"nl\"));\n    else if (sort === \"priceAsc\") sorted.sort((a, b) => a.priceCents - b.priceCents);\n    else if (sort === \"priceDesc\") sorted.sort((a, b) => b.priceCents - a.priceCents);\n    else sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, \"nl\"));\n    return sorted.slice(0, block.limit);\n  }, [products, activeCat, block.featuredOnly, block.limit, sort, filterColor, filterSize]);\n\n  if (products === null) return null;\n\n  const chip = (label: string, active: boolean, onClick: () => void, swatch?: string | null) => (\n    <button\n      key={label}\n      type=\"button\"\n      className={`xicms-shop-filterchip${active ? \" xicms-shop-filterchip--active\" : \"\"}`}\n      aria-pressed={active}\n      onClick={onClick}\n    >\n      {swatch && (\n        <span\n          aria-hidden\n          style={{ display: \"inline-block\", width: 10, height: 10, borderRadius: 999, background: swatch, boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\", marginRight: 5 }}\n        />\n      )}\n      {label}\n    </button>\n  );\n\n  return (\n    <div className=\"xicms-shop-grid\">\n      {(block.heading || activeCat) && (\n        <Heading level={2} data-xicms-edit=\"heading\">\n          {activeCat?.name ?? block.heading}\n        </Heading>\n      )}\n      {activeCat && (\n        <Text size=\"sm\" display=\"block\" style={{ marginTop: 4 }}>\n          <a href={settings.shopPath}>← {t(\"allCategories\")}</a>\n        </Text>\n      )}\n\n      {block.showFilters && (filterValues.colors.length > 0 || filterValues.sizes.length > 0) && (\n        <div className=\"xicms-shop-filters\">\n          {filterValues.colors.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Kleur\">\n              {chip(t(\"filterAll\"), filterColor === null, () => setFilterColor(null))}\n              {filterValues.colors.map((c) =>\n                chip(c, filterColor === c, () => setFilterColor(filterColor === c ? null : c), kleurNaarCss(c)),\n              )}\n            </div>\n          )}\n          {filterValues.sizes.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Maat\">\n              {chip(t(\"filterAll\"), filterSize === null, () => setFilterSize(null))}\n              {filterValues.sizes.map((s) => chip(s, filterSize === s, () => setFilterSize(filterSize === s ? null : s)))}\n            </div>\n          )}\n          <label className=\"xicms-shop-filters__sort\">\n            <span>{t(\"sortLabel\")}</span>\n            <select className=\"xicms-input\" value={sort} onChange={(e) => setSort(e.target.value as Blk[\"sort\"])}>\n              <option value=\"order\">{t(\"sortDefault\")}</option>\n              <option value=\"name\">{t(\"sortName\")}</option>\n              <option value=\"priceAsc\">{t(\"sortPriceAsc\")}</option>\n              <option value=\"priceDesc\">{t(\"sortPriceDesc\")}</option>\n            </select>\n          </label>\n        </div>\n      )}\n\n      {visible.length === 0 ? (\n        <Card padding={4} variant=\"muted\" style={{ marginTop: \"1rem\" }}>\n          <Text>{t(\"noProducts\")}</Text>\n        </Card>\n      ) : (\n        <div\n          className=\"xicms-shop-grid__items\"\n          data-columns={block.columns}\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: `repeat(auto-fill, minmax(min(240px, calc(100%/${block.columns} - 1rem)), 1fr))`,\n            gap: \"1.25rem\",\n            marginTop: \"1.25rem\",\n          }}\n        >\n          {visible.map((p) => (\n            <ProductCard\n              key={p.id}\n              product={p}\n              siteId={siteId}\n              currency={settings.currency}\n              detailPath={settings.detailPath}\n              cartPath={settings.cartPath}\n              t={t}\n              filterColor={filterColor}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const productGridBlock = defineBlock({\n  type: \"productGrid\",\n  schema: ProductGridBlockSchema,\n  Render: ProductGridRender,\n  label: \"Producten-overzicht\",\n  icon: \"🛍️\",\n  defaults: () => ({ useQueryCategory: true, columns: 3, limit: 60, sort: \"order\" }),\n});\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiwebdesign/xicms-core",
-  "version": "6.3.0",
+  "version": "6.4.1",
   "description": "XiCMS engine: gestructureerde content, pagina's, draft/publish, admin (TipTap+Radix), SEO en beveiliging voor klantsites.",
   "license": "UNLICENSED",
   "repository": {
@@ -113,7 +113,8 @@
     "firebase-admin": "^13.0.0",
     "sanitize-html": "^2.14.0",
     "tailwind-merge": "^2.6.0",
-    "zod": "^3.24.1"
+    "zod": "^3.24.1",
+    "html2canvas-pro": "^1.5.11"
   },
   "devDependencies": {
     "@astryxdesign/cli": "^0.1.1",