@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/blocks/builtins/FormBlockRender.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useRef } from "react";
+import { isVeiligPad } from "../../schema/forms.js";
 import { useBlockData } from "../context.js";
 import { submitFormValues } from "./lib/submitForm.js";
+import { autoCompleteVoor } from "./lib/autoComplete.js";
 import { trackEvent } from "../../components/PageView.js";
 import { isDemoActive, getDemoForm } from "../../demo/demoStore.js";
 import { useSiteConfig } from "../../config.js";
@@ -10,9 +12,20 @@ import { TextInput } from "@astryxdesign/core/TextInput";
 import { TextArea } from "@astryxdesign/core/TextArea";
 import { Selector } from "@astryxdesign/core/Selector";
 import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+import { RadioList, RadioListItem } from "@astryxdesign/core/RadioList";
 import { Spinner } from "@astryxdesign/core/Spinner";
 import { Button } from "@astryxdesign/core/Button";
 import { VStack, Card, Heading, Text } from "../ui/index.js";
+function foutmeldingVoor(err) {
+  const code = String(err?.code ?? "");
+  const message = String(err?.message ?? "");
+  if (code.endsWith("invalid-argument") && message && !/^ongeldige invoer/i.test(message)) return message;
+  if (code.endsWith("resource-exhausted")) return "Je hebt het formulier net al een paar keer verstuurd. Probeer het over een minuut opnieuw.";
+  if (code.endsWith("unavailable") || typeof navigator !== "undefined" && navigator.onLine === false) {
+    return "Geen verbinding. Controleer je internet en probeer het opnieuw.";
+  }
+  return "Versturen mislukt. Probeer het later opnieuw.";
+}
 const DEMO_FALLBACK_FORM = {
   name: "Contact",
   submitLabel: "Versturen",
@@ -27,6 +40,7 @@ function FormRender({ block, siteId, mode }) {
   const siteMode = useSiteConfig().mode;
   const serverForms = useBlockData("forms");
   const serverDef = serverForms?.[block.formId] ?? null;
+  const serverZegtOntbreekt = serverForms !== void 0 && serverForms !== null && block.formId in serverForms && serverForms[block.formId] === null;
   const [def, setDef] = useState(serverDef);
   const [unavailable, setUnavailable] = useState(false);
   const [values, setValues] = useState({});
@@ -46,6 +60,16 @@ function FormRender({ block, siteId, mode }) {
       return;
     }
     if (serverDef) return;
+    if (serverZegtOntbreekt) {
+      const reg = getDemoForm(siteId, block.formId) ?? (siteMode === "demo" ? DEMO_FALLBACK_FORM : null);
+      if (reg) {
+        setDef(reg);
+        setLocalOnly(true);
+      } else {
+        setUnavailable(true);
+      }
+      return;
+    }
     void (async () => {
       const [{ getDb }, { doc, getDoc }] = await Promise.all([
         import("../../firebase/client.js"),
@@ -70,7 +94,7 @@ function FormRender({ block, siteId, mode }) {
         setUnavailable(true);
       }
     })();
-  }, [demo, siteId, block.formId, siteMode, serverDef]);
+  }, [demo, siteId, block.formId, siteMode, serverDef, serverZegtOntbreekt]);
   if (unavailable) {
     return /* @__PURE__ */ jsx(Card, { padding: 4, variant: "muted", children: /* @__PURE__ */ jsxs(Text, { children: [
       block.heading ? `${block.heading}: ` : "",
@@ -93,15 +117,15 @@ function FormRender({ block, siteId, mode }) {
     try {
       await submitFormValues(siteId, block.formId, values, hp, geopend.current || void 0);
       trackEvent(siteId, "formulier");
-      if (def?.successRedirect) {
+      if (isVeiligPad(def?.successRedirect)) {
         window.location.assign(def.successRedirect);
         return;
       }
       setStatus("ok");
       setValues({});
-    } catch {
+    } catch (err) {
       setStatus("error");
-      setError("Versturen mislukt. Probeer het later opnieuw.");
+      setError(foutmeldingVoor(err));
     }
   }
   if (status === "ok") {
@@ -111,6 +135,19 @@ function FormRender({ block, siteId, mode }) {
     );
   }
   const setVal = (name, v) => setValues((prev) => ({ ...prev, [name]: v }));
+  useEffect(() => {
+    if (!def) return;
+    const q = new URLSearchParams(window.location.search);
+    setValues((prev) => {
+      const next = { ...prev };
+      for (const f of def.fields) {
+        const uitLink = q.get(f.name);
+        if (uitLink !== null && next[f.name] === void 0) next[f.name] = uitLink.slice(0, 500);
+        else if (f.type === "hidden" && next[f.name] === void 0 && f.placeholder) next[f.name] = f.placeholder;
+      }
+      return next;
+    });
+  }, [def]);
   return /* @__PURE__ */ jsx("form", { className: "xicms-form", onSubmit: submit, children: /* @__PURE__ */ jsxs(VStack, { gap: 3, children: [
     block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
     def.fields.map((f) => {
@@ -123,6 +160,7 @@ function FormRender({ block, siteId, mode }) {
             isRequired: f.required,
             placeholder: f.placeholder,
             rows: 4,
+            autoComplete: autoCompleteVoor(f),
             value: sv,
             onChange: (v) => setVal(f.name, v)
           },
@@ -156,25 +194,55 @@ function FormRender({ block, siteId, mode }) {
         );
       }
       if (f.type === "radio") {
-        return /* @__PURE__ */ jsxs("fieldset", { className: "xicms-form__radios", children: [
-          /* @__PURE__ */ jsxs("legend", { children: [
+        return /* @__PURE__ */ jsx(
+          RadioList,
+          {
+            label: f.label,
+            isRequired: f.required,
+            htmlName: f.name,
+            containerClassName: "xicms-form__radios",
+            value: sv,
+            onChange: (v) => setVal(f.name, v),
+            children: (f.options ?? []).map((opt) => /* @__PURE__ */ jsx(RadioListItem, { label: opt, value: opt }, opt))
+          },
+          f.name
+        );
+      }
+      if (f.type === "hidden") return null;
+      if (f.type === "dateRange") {
+        const [van = "", tot = ""] = sv.split("/");
+        return /* @__PURE__ */ jsxs("fieldset", { className: "xicms-form__periode", children: [
+          /* @__PURE__ */ jsxs("legend", { className: "xicms-form__native-label", children: [
             f.label,
             f.required && " *"
           ] }),
-          (f.options ?? []).map((opt) => /* @__PURE__ */ jsxs("label", { className: "xicms-form__radio", children: [
+          /* @__PURE__ */ jsxs("label", { className: "xicms-form__native", children: [
+            /* @__PURE__ */ jsx("span", { children: "Van" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "xicms-input",
+                type: "date",
+                required: f.required,
+                value: van,
+                onChange: (e) => setVal(f.name, `${e.target.value}/${tot && tot < e.target.value ? "" : tot}`)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "xicms-form__native", children: [
+            /* @__PURE__ */ jsx("span", { children: "Tot" }),
             /* @__PURE__ */ jsx(
               "input",
               {
-                type: "radio",
-                name: f.name,
-                value: opt,
+                className: "xicms-input",
+                type: "date",
                 required: f.required,
-                checked: sv === opt,
-                onChange: () => setVal(f.name, opt)
+                min: van || void 0,
+                value: tot,
+                onChange: (e) => setVal(f.name, `${van}/${e.target.value}`)
               }
-            ),
-            opt
-          ] }, opt))
+            )
+          ] })
         ] }, f.name);
       }
       if (f.type === "date" || f.type === "number") {
@@ -189,6 +257,7 @@ function FormRender({ block, siteId, mode }) {
               className: "xicms-input",
               type: f.type,
               required: f.required,
+              autoComplete: autoCompleteVoor(f),
               placeholder: f.placeholder,
               value: sv,
               onChange: (e) => setVal(f.name, e.target.value)
@@ -201,8 +270,10 @@ function FormRender({ block, siteId, mode }) {
         {
           label: f.label,
           type: f.type === "email" ? "email" : "text",
+          ref: f.type === "tel" ? (el) => el?.setAttribute("inputmode", "tel") : void 0,
           isRequired: f.required,
           placeholder: f.placeholder,
+          autoComplete: autoCompleteVoor(f),
           value: sv,
           onChange: (v) => setVal(f.name, v)
         },
@@ -226,6 +297,7 @@ function FormRender({ block, siteId, mode }) {
   ] }) });
 }
 export {
-  FormRender
+  FormRender,
+  foutmeldingVoor
 };
 //# sourceMappingURL=FormBlockRender.js.map

package/dist/blocks/builtins/FormBlockRender.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/FormBlockRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type FormEvent , useRef} from \"react\";\nimport type { z } from \"zod\";\nimport type { FormBlockSchema } from \"../../schema/blocks\";\nimport type { FormDefinition } from \"../../schema/forms\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useBlockData } from \"../context\";\nimport { submitFormValues } from \"./lib/submitForm\";\nimport { trackEvent } from \"../../components/PageView\";\nimport { isDemoActive, getDemoForm } from \"../../demo/demoStore\";\nimport { useSiteConfig } from \"../../config\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { CheckboxInput } from \"@astryxdesign/core/CheckboxInput\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { VStack, Card, Heading, Text } from \"../ui\";\n\ntype FormBlk = z.infer<typeof FormBlockSchema>;\n\n/** Voorbeeldformulier voor de demo wanneer er geen specifieke definitie is geregistreerd. */\nconst DEMO_FALLBACK_FORM: FormDefinition = {\n  name: \"Contact\",\n  submitLabel: \"Versturen\",\n  successMessage: \"Bedankt! Dit is een demo — je bericht is niet echt verstuurd.\",\n  fields: [\n    { name: \"naam\", label: \"Naam\", type: \"text\", required: true },\n    { name: \"email\", label: \"E-mail\", type: \"email\", required: true },\n    { name: \"bericht\", label: \"Bericht\", type: \"textarea\", required: false, placeholder: \"Waarmee kunnen we je helpen?\" },\n  ],\n};\n\nexport function FormRender({ block, siteId, mode }: BlockRenderProps<FormBlk>) {\n  const siteMode = useSiteConfig().mode;\n  // Server-seed (7.12): de route leest formulierdefinities server-side (getPageBlockData) en\n  // geeft ze mee als blockData. Het formulier staat dan al in de SSR-HTML en de per-bezoeker\n  // `getDoc` hieronder vervalt. Zonder seed (oudere site, admin-preview) werkt het oude pad.\n  const serverForms = useBlockData<Record<string, FormDefinition>>(\"forms\");\n  const serverDef = serverForms?.[block.formId] ?? null;\n  const [def, setDef] = useState<FormDefinition | null>(serverDef);\n  const [unavailable, setUnavailable] = useState(false);\n  const [values, setValues] = useState<Record<string, string | boolean>>({});\n  const [hp, setHp] = useState(\"\");\n  // Tijdsval (7.24): wanneer kwam het formulier in beeld? Bots posten binnen een seconde.\n  const geopend = useRef<number>(0);\n  useEffect(() => {\n    geopend.current = Date.now();\n  }, []);\n  const [status, setStatus] = useState<\"idle\" | \"busy\" | \"ok\" | \"error\">(\"idle\");\n  const [error, setError] = useState<string | null>(null);\n\n  const demo = isDemoActive();\n  // \"Lokaal\" inzenden (geen Firebase-call) bij demo OF wanneer er geen Firebase is maar wél een\n  // geregistreerd voorbeeldformulier — zo werkt een statische referentiesite z'n formulier ook.\n  const [localOnly, setLocalOnly] = useState(demo);\n\n  useEffect(() => {\n    if (demo) {\n      setDef(getDemoForm(siteId, block.formId) ?? DEMO_FALLBACK_FORM);\n      setLocalOnly(true);\n      return;\n    }\n    if (serverDef) return; // definitie kwam al server-side mee\n    // Firestore dynamisch: alleen een pagina die écht een formulier toont haalt de SDK binnen.\n    void (async () => {\n      const [{ getDb }, { doc, getDoc }] = await Promise.all([\n        import(\"../../firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db) {\n        // Geen Firebase: val terug op een geregistreerd formulier, of (op een mode:\"demo\"-site) op\n        // het ingebouwde voorbeeld; beide zenden lokaal in. Anders een nette \"niet beschikbaar\".\n        const reg = getDemoForm(siteId, block.formId) ?? (siteMode === \"demo\" ? DEMO_FALLBACK_FORM : null);\n        if (reg) { setDef(reg); setLocalOnly(true); } else { setUnavailable(true); }\n        return;\n      }\n      try {\n        const snap = await getDoc(doc(db, \"sites\", siteId, \"forms\", block.formId));\n        if (snap.exists()) setDef(snap.data() as FormDefinition);\n        else setUnavailable(true);\n      } catch {\n        setUnavailable(true);\n      }\n    })();\n  }, [demo, siteId, block.formId, siteMode, serverDef]);\n\n  if (unavailable) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>{block.heading ? `${block.heading}: ` : \"\"}neem contact met ons op — we reageren snel.</Text>\n      </Card>\n    );\n  }\n  if (!def) {\n    return (\n      <div style={{ display: \"grid\", placeItems: \"center\", minHeight: 120 }}>\n        <Spinner label=\"Formulier laden…\" />\n      </div>\n    );\n  }\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\") return;\n    if (localOnly) {\n      // Lokaal (demo / geen backend): niets versturen, alleen de successtaat tonen.\n      setStatus(\"ok\");\n      setValues({});\n      return;\n    }\n    setStatus(\"busy\");\n    setError(null);\n    try {\n      await submitFormValues(siteId, block.formId, values, hp, geopend.current || undefined);\n      trackEvent(siteId, \"formulier\");\n      // Optioneel doorsturen naar een bedankt-pagina (conversiemeting/advertenties).\n      if (def?.successRedirect) {\n        window.location.assign(def.successRedirect);\n        return;\n      }\n      setStatus(\"ok\");\n      setValues({});\n    } catch {\n      setStatus(\"error\");\n      setError(\"Versturen mislukt. Probeer het later opnieuw.\");\n    }\n  }\n\n  if (status === \"ok\") {\n    return (\n      // role=\"status\": screenreaders melden de succesboodschap wanneer het formulier verdwijnt.\n      <Card padding={4} variant=\"muted\" role=\"status\">\n        <Text>{def.successMessage}</Text>\n      </Card>\n    );\n  }\n\n  const setVal = (name: string, v: string | boolean) => setValues((prev) => ({ ...prev, [name]: v }));\n\n  return (\n    <form className=\"xicms-form\" onSubmit={submit}>\n      <VStack gap={3}>\n        {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {def.fields.map((f) => {\n          const sv = (values[f.name] as string) ?? \"\";\n          if (f.type === \"textarea\") {\n            return (\n              <TextArea key={f.name} label={f.label} isRequired={f.required} placeholder={f.placeholder} rows={4}\n                value={sv} onChange={(v) => setVal(f.name, v)} />\n            );\n          }\n          if (f.type === \"select\") {\n            return (\n              <Selector key={f.name} label={f.label} isRequired={f.required} placeholder=\"Kies…\"\n                options={f.options ?? []} value={sv} onChange={(v) => setVal(f.name, (v as string) ?? \"\")} />\n            );\n          }\n          if (f.type === \"checkbox\") {\n            return (\n              <CheckboxInput key={f.name} label={f.label} isRequired={f.required}\n                value={Boolean(values[f.name])} onChange={(checked) => setVal(f.name, checked)} />\n            );\n          }\n          if (f.type === \"radio\") {\n            return (\n              <fieldset key={f.name} className=\"xicms-form__radios\">\n                <legend>{f.label}{f.required && \" *\"}</legend>\n                {(f.options ?? []).map((opt) => (\n                  <label key={opt} className=\"xicms-form__radio\">\n                    <input\n                      type=\"radio\"\n                      name={f.name}\n                      value={opt}\n                      required={f.required}\n                      checked={sv === opt}\n                      onChange={() => setVal(f.name, opt)}\n                    />\n                    {opt}\n                  </label>\n                ))}\n              </fieldset>\n            );\n          }\n          if (f.type === \"date\" || f.type === \"number\") {\n            // Astryx TextInput kent geen date/number → native input in dezelfde stijl.\n            return (\n              <label key={f.name} className=\"xicms-form__native\">\n                <span className=\"xicms-form__native-label\">{f.label}{f.required && \" *\"}</span>\n                <input\n                  className=\"xicms-input\"\n                  type={f.type}\n                  required={f.required}\n                  placeholder={f.placeholder}\n                  value={sv}\n                  onChange={(e) => setVal(f.name, e.target.value)}\n                />\n              </label>\n            );\n          }\n          return (\n            <TextInput key={f.name} label={f.label} type={f.type === \"email\" ? \"email\" : \"text\"}\n              isRequired={f.required} placeholder={f.placeholder}\n              value={sv} onChange={(v) => setVal(f.name, v)} />\n          );\n        })}\n        {/* Honeypot — verborgen voor mensen, bots vullen 'm vaak wel in. */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n        <div>\n          <Button label={status === \"busy\" ? \"Versturen…\" : def.submitLabel} variant=\"primary\" size=\"lg\" type=\"submit\" isLoading={status === \"busy\"} />\n        </div>\n      </VStack>\n    </form>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/FormBlockRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type FormEvent , useRef} from \"react\";\nimport type { z } from \"zod\";\nimport type { FormBlockSchema } from \"../../schema/blocks\";\nimport { isVeiligPad, type FormDefinition } from \"../../schema/forms\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useBlockData } from \"../context\";\nimport { submitFormValues } from \"./lib/submitForm\";\nimport { autoCompleteVoor } from \"./lib/autoComplete\";\nimport { trackEvent } from \"../../components/PageView\";\nimport { isDemoActive, getDemoForm } from \"../../demo/demoStore\";\nimport { useSiteConfig } from \"../../config\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { CheckboxInput } from \"@astryxdesign/core/CheckboxInput\";\nimport { RadioList, RadioListItem } from \"@astryxdesign/core/RadioList\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { VStack, Card, Heading, Text } from \"../ui\";\n\ntype FormBlk = z.infer<typeof FormBlockSchema>;\n\n/** Voorbeeldformulier voor de demo wanneer er geen specifieke definitie is geregistreerd. */\n/**\n * Een begrijpelijke melding per oorzaak (8.1). Eerst kreeg de bezoeker bij élke fout \"Versturen\n * mislukt\", ook als hij alleen een verplicht veld vergat of te vaak verstuurde.\n */\nexport function foutmeldingVoor(err: unknown): string {\n  const code = String((err as { code?: string })?.code ?? \"\");\n  const message = String((err as { message?: string })?.message ?? \"\");\n  if (code.endsWith(\"invalid-argument\") && message && !/^ongeldige invoer/i.test(message)) return message;\n  if (code.endsWith(\"resource-exhausted\")) return \"Je hebt het formulier net al een paar keer verstuurd. Probeer het over een minuut opnieuw.\";\n  if (code.endsWith(\"unavailable\") || (typeof navigator !== \"undefined\" && navigator.onLine === false)) {\n    return \"Geen verbinding. Controleer je internet en probeer het opnieuw.\";\n  }\n  return \"Versturen mislukt. Probeer het later opnieuw.\";\n}\n\nconst DEMO_FALLBACK_FORM: FormDefinition = {\n  name: \"Contact\",\n  submitLabel: \"Versturen\",\n  successMessage: \"Bedankt! Dit is een demo — je bericht is niet echt verstuurd.\",\n  fields: [\n    { name: \"naam\", label: \"Naam\", type: \"text\", required: true },\n    { name: \"email\", label: \"E-mail\", type: \"email\", required: true },\n    { name: \"bericht\", label: \"Bericht\", type: \"textarea\", required: false, placeholder: \"Waarmee kunnen we je helpen?\" },\n  ],\n};\n\nexport function FormRender({ block, siteId, mode }: BlockRenderProps<FormBlk>) {\n  const siteMode = useSiteConfig().mode;\n  // Server-seed (7.12): de route leest formulierdefinities server-side (getPageBlockData) en\n  // geeft ze mee als blockData. Het formulier staat dan al in de SSR-HTML en de per-bezoeker\n  // `getDoc` hieronder vervalt. Zonder seed (oudere site, admin-preview) werkt het oude pad.\n  const serverForms = useBlockData<Record<string, FormDefinition | null>>(\"forms\");\n  const serverDef = serverForms?.[block.formId] ?? null;\n  // 8.9: de server heeft gekeken en het formulier bestaat niet (`null`): niets meer ophalen.\n  const serverZegtOntbreekt = serverForms !== undefined && serverForms !== null && block.formId in serverForms && serverForms[block.formId] === null;\n  const [def, setDef] = useState<FormDefinition | null>(serverDef);\n  const [unavailable, setUnavailable] = useState(false);\n  const [values, setValues] = useState<Record<string, string | boolean>>({});\n  const [hp, setHp] = useState(\"\");\n  // Tijdsval (7.24): wanneer kwam het formulier in beeld? Bots posten binnen een seconde.\n  const geopend = useRef<number>(0);\n  useEffect(() => {\n    geopend.current = Date.now();\n  }, []);\n  const [status, setStatus] = useState<\"idle\" | \"busy\" | \"ok\" | \"error\">(\"idle\");\n  const [error, setError] = useState<string | null>(null);\n\n  const demo = isDemoActive();\n  // \"Lokaal\" inzenden (geen Firebase-call) bij demo OF wanneer er geen Firebase is maar wél een\n  // geregistreerd voorbeeldformulier — zo werkt een statische referentiesite z'n formulier ook.\n  const [localOnly, setLocalOnly] = useState(demo);\n\n  useEffect(() => {\n    if (demo) {\n      setDef(getDemoForm(siteId, block.formId) ?? DEMO_FALLBACK_FORM);\n      setLocalOnly(true);\n      return;\n    }\n    if (serverDef) return; // definitie kwam al server-side mee\n    if (serverZegtOntbreekt) {\n      // Zelfde terugval als zonder Firebase hieronder, maar zonder de SDK te downloaden.\n      const reg = getDemoForm(siteId, block.formId) ?? (siteMode === \"demo\" ? DEMO_FALLBACK_FORM : null);\n      if (reg) { setDef(reg); setLocalOnly(true); } else { setUnavailable(true); }\n      return;\n    }\n    // Firestore dynamisch: alleen een pagina die écht een formulier toont haalt de SDK binnen.\n    void (async () => {\n      const [{ getDb }, { doc, getDoc }] = await Promise.all([\n        import(\"../../firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db) {\n        // Geen Firebase: val terug op een geregistreerd formulier, of (op een mode:\"demo\"-site) op\n        // het ingebouwde voorbeeld; beide zenden lokaal in. Anders een nette \"niet beschikbaar\".\n        const reg = getDemoForm(siteId, block.formId) ?? (siteMode === \"demo\" ? DEMO_FALLBACK_FORM : null);\n        if (reg) { setDef(reg); setLocalOnly(true); } else { setUnavailable(true); }\n        return;\n      }\n      try {\n        const snap = await getDoc(doc(db, \"sites\", siteId, \"forms\", block.formId));\n        if (snap.exists()) setDef(snap.data() as FormDefinition);\n        else setUnavailable(true);\n      } catch {\n        setUnavailable(true);\n      }\n    })();\n  }, [demo, siteId, block.formId, siteMode, serverDef, serverZegtOntbreekt]);\n\n  if (unavailable) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>{block.heading ? `${block.heading}: ` : \"\"}neem contact met ons op — we reageren snel.</Text>\n      </Card>\n    );\n  }\n  if (!def) {\n    return (\n      <div style={{ display: \"grid\", placeItems: \"center\", minHeight: 120 }}>\n        <Spinner label=\"Formulier laden…\" />\n      </div>\n    );\n  }\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\") return;\n    if (localOnly) {\n      // Lokaal (demo / geen backend): niets versturen, alleen de successtaat tonen.\n      setStatus(\"ok\");\n      setValues({});\n      return;\n    }\n    setStatus(\"busy\");\n    setError(null);\n    try {\n      await submitFormValues(siteId, block.formId, values, hp, geopend.current || undefined);\n      trackEvent(siteId, \"formulier\");\n      // Optioneel doorsturen naar een bedankt-pagina (conversiemeting/advertenties).\n      // Alleen een pad op de eigen site — nooit een extern adres of `javascript:` (8.1).\n      if (isVeiligPad(def?.successRedirect)) {\n        window.location.assign(def.successRedirect);\n        return;\n      }\n      setStatus(\"ok\");\n      setValues({});\n    } catch (err) {\n      setStatus(\"error\");\n      setError(foutmeldingVoor(err));\n    }\n  }\n\n  if (status === \"ok\") {\n    return (\n      // role=\"status\": screenreaders melden de succesboodschap wanneer het formulier verdwijnt.\n      <Card padding={4} variant=\"muted\" role=\"status\">\n        <Text>{def.successMessage}</Text>\n      </Card>\n    );\n  }\n\n  const setVal = (name: string, v: string | boolean) => setValues((prev) => ({ ...prev, [name]: v }));\n\n  /**\n   * 8.14: vooraf invullen vanuit het webadres. Een knop \"Boek Huisje A\" kan naar\n   * /contact?huisje=Huisje%20A wijzen; een veld met de naam `huisje` staat dan al ingevuld. Een\n   * verborgen veld zonder waarde in de link houdt zijn vaste waarde (de placeholder).\n   */\n  useEffect(() => {\n    if (!def) return;\n    const q = new URLSearchParams(window.location.search);\n    setValues((prev) => {\n      const next = { ...prev };\n      for (const f of def.fields) {\n        const uitLink = q.get(f.name);\n        if (uitLink !== null && next[f.name] === undefined) next[f.name] = uitLink.slice(0, 500);\n        else if (f.type === \"hidden\" && next[f.name] === undefined && f.placeholder) next[f.name] = f.placeholder;\n      }\n      return next;\n    });\n  }, [def]);\n\n  return (\n    <form className=\"xicms-form\" onSubmit={submit}>\n      <VStack gap={3}>\n        {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {def.fields.map((f) => {\n          const sv = (values[f.name] as string) ?? \"\";\n          if (f.type === \"textarea\") {\n            return (\n              <TextArea key={f.name} label={f.label} isRequired={f.required} placeholder={f.placeholder} rows={4}\n                autoComplete={autoCompleteVoor(f)} value={sv} onChange={(v) => setVal(f.name, v)} />\n            );\n          }\n          if (f.type === \"select\") {\n            return (\n              <Selector key={f.name} label={f.label} isRequired={f.required} placeholder=\"Kies…\"\n                options={f.options ?? []} value={sv} onChange={(v) => setVal(f.name, (v as string) ?? \"\")} />\n            );\n          }\n          if (f.type === \"checkbox\") {\n            return (\n              <CheckboxInput key={f.name} label={f.label} isRequired={f.required}\n                value={Boolean(values[f.name])} onChange={(checked) => setVal(f.name, checked)} />\n            );\n          }\n          if (f.type === \"radio\") {\n            // 8.0: Astryx RadioList i.p.v. losse native radio's — één groep met toegankelijke naam,\n            // pijltjestoetsen en dezelfde focusstijl als de andere velden.\n            return (\n              <RadioList key={f.name} label={f.label} isRequired={f.required} htmlName={f.name}\n                containerClassName=\"xicms-form__radios\" value={sv} onChange={(v) => setVal(f.name, v)}>\n                {(f.options ?? []).map((opt) => (\n                  <RadioListItem key={opt} label={opt} value={opt} />\n                ))}\n              </RadioList>\n            );\n          }\n          if (f.type === \"hidden\") return null;\n          if (f.type === \"dateRange\") {\n            const [van = \"\", tot = \"\"] = sv.split(\"/\");\n            return (\n              <fieldset key={f.name} className=\"xicms-form__periode\">\n                <legend className=\"xicms-form__native-label\">{f.label}{f.required && \" *\"}</legend>\n                <label className=\"xicms-form__native\">\n                  <span>Van</span>\n                  <input className=\"xicms-input\" type=\"date\" required={f.required} value={van}\n                    onChange={(e) => setVal(f.name, `${e.target.value}/${tot && tot < e.target.value ? \"\" : tot}`)} />\n                </label>\n                <label className=\"xicms-form__native\">\n                  <span>Tot</span>\n                  <input className=\"xicms-input\" type=\"date\" required={f.required} min={van || undefined} value={tot}\n                    onChange={(e) => setVal(f.name, `${van}/${e.target.value}`)} />\n                </label>\n              </fieldset>\n            );\n          }\n          if (f.type === \"date\" || f.type === \"number\") {\n            // Astryx TextInput kent geen date/number → native input in dezelfde stijl.\n            return (\n              <label key={f.name} className=\"xicms-form__native\">\n                <span className=\"xicms-form__native-label\">{f.label}{f.required && \" *\"}</span>\n                <input\n                  className=\"xicms-input\"\n                  type={f.type}\n                  required={f.required}\n                  autoComplete={autoCompleteVoor(f)}\n                  placeholder={f.placeholder}\n                  value={sv}\n                  onChange={(e) => setVal(f.name, e.target.value)}\n                />\n              </label>\n            );\n          }\n          return (\n            <TextInput key={f.name} label={f.label} type={f.type === \"email\" ? \"email\" : \"text\"}\n              // Telefoon (8.4): wél het Astryx-veld (zelfde uiterlijk als de rest — de native variant\n              // uit 8.0 stak op klantsites af), met `inputmode` voor het cijfertoetsenbord.\n              ref={f.type === \"tel\" ? (el: HTMLInputElement | null) => el?.setAttribute(\"inputmode\", \"tel\") : undefined}\n              isRequired={f.required} placeholder={f.placeholder} autoComplete={autoCompleteVoor(f)}\n              value={sv} onChange={(v) => setVal(f.name, v)} />\n          );\n        })}\n        {/* Honeypot — verborgen voor mensen, bots vullen 'm vaak wel in. */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n        <div>\n          <Button label={status === \"busy\" ? \"Versturen…\" : def.submitLabel} variant=\"primary\" size=\"lg\" type=\"submit\" isLoading={status === \"busy\"} />\n        </div>\n      </VStack>\n    </form>\n  );\n}\n"],"mappings":";AAoHM,cACE,YADF;AAlHN,SAAS,WAAW,UAA2B,cAAa;AAG5D,SAAS,mBAAwC;AAEjD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,WAAW,qBAAqB;AACzC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,QAAQ,MAAM,SAAS,YAAY;AASrC,SAAS,gBAAgB,KAAsB;AACpD,QAAM,OAAO,OAAQ,KAA2B,QAAQ,EAAE;AAC1D,QAAM,UAAU,OAAQ,KAA8B,WAAW,EAAE;AACnE,MAAI,KAAK,SAAS,kBAAkB,KAAK,WAAW,CAAC,qBAAqB,KAAK,OAAO,EAAG,QAAO;AAChG,MAAI,KAAK,SAAS,oBAAoB,EAAG,QAAO;AAChD,MAAI,KAAK,SAAS,aAAa,KAAM,OAAO,cAAc,eAAe,UAAU,WAAW,OAAQ;AACpG,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,qBAAqC;AAAA,EACzC,MAAM;AAAA,EACN,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,QAAQ;AAAA,IACN,EAAE,MAAM,QAAQ,OAAO,QAAQ,MAAM,QAAQ,UAAU,KAAK;AAAA,IAC5D,EAAE,MAAM,SAAS,OAAO,UAAU,MAAM,SAAS,UAAU,KAAK;AAAA,IAChE,EAAE,MAAM,WAAW,OAAO,WAAW,MAAM,YAAY,UAAU,OAAO,aAAa,+BAA+B;AAAA,EACtH;AACF;AAEO,SAAS,WAAW,EAAE,OAAO,QAAQ,KAAK,GAA8B;AAC7E,QAAM,WAAW,cAAc,EAAE;AAIjC,QAAM,cAAc,aAAoD,OAAO;AAC/E,QAAM,YAAY,cAAc,MAAM,MAAM,KAAK;AAEjD,QAAM,sBAAsB,gBAAgB,UAAa,gBAAgB,QAAQ,MAAM,UAAU,eAAe,YAAY,MAAM,MAAM,MAAM;AAC9I,QAAM,CAAC,KAAK,MAAM,IAAI,SAAgC,SAAS;AAC/D,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA2C,CAAC,CAAC;AACzE,QAAM,CAAC,IAAI,KAAK,IAAI,SAAS,EAAE;AAE/B,QAAM,UAAU,OAAe,CAAC;AAChC,YAAU,MAAM;AACd,YAAQ,UAAU,KAAK,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AACL,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA2C,MAAM;AAC7E,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,OAAO,aAAa;AAG1B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAE/C,YAAU,MAAM;AACd,QAAI,MAAM;AACR,aAAO,YAAY,QAAQ,MAAM,MAAM,KAAK,kBAAkB;AAC9D,mBAAa,IAAI;AACjB;AAAA,IACF;AACA,QAAI,UAAW;AACf,QAAI,qBAAqB;AAEvB,YAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,MAAM,aAAa,SAAS,qBAAqB;AAC7F,UAAI,KAAK;AAAE,eAAO,GAAG;AAAG,qBAAa,IAAI;AAAA,MAAG,OAAO;AAAE,uBAAe,IAAI;AAAA,MAAG;AAC3E;AAAA,IACF;AAEA,UAAM,YAAY;AAChB,YAAM,CAAC,EAAE,MAAM,GAAG,EAAE,KAAK,OAAO,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,QACrD,OAAO,uBAAuB;AAAA,QAC9B,OAAO,oBAAoB;AAAA,MAC7B,CAAC;AACD,YAAM,KAAK,MAAM;AACjB,UAAI,CAAC,IAAI;AAGP,cAAM,MAAM,YAAY,QAAQ,MAAM,MAAM,MAAM,aAAa,SAAS,qBAAqB;AAC7F,YAAI,KAAK;AAAE,iBAAO,GAAG;AAAG,uBAAa,IAAI;AAAA,QAAG,OAAO;AAAE,yBAAe,IAAI;AAAA,QAAG;AAC3E;AAAA,MACF;AACA,UAAI;AACF,cAAM,OAAO,MAAM,OAAO,IAAI,IAAI,SAAS,QAAQ,SAAS,MAAM,MAAM,CAAC;AACzE,YAAI,KAAK,OAAO,EAAG,QAAO,KAAK,KAAK,CAAmB;AAAA,YAClD,gBAAe,IAAI;AAAA,MAC1B,QAAQ;AACN,uBAAe,IAAI;AAAA,MACrB;AAAA,IACF,GAAG;AAAA,EACL,GAAG,CAAC,MAAM,QAAQ,MAAM,QAAQ,UAAU,WAAW,mBAAmB,CAAC;AAEzE,MAAI,aAAa;AACf,WACE,oBAAC,QAAK,SAAS,GAAG,SAAQ,SACxB,+BAAC,QAAM;AAAA,YAAM,UAAU,GAAG,MAAM,OAAO,OAAO;AAAA,MAAG;AAAA,OAA2C,GAC9F;AAAA,EAEJ;AACA,MAAI,CAAC,KAAK;AACR,WACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,WAAW,IAAI,GAClE,8BAAC,WAAQ,OAAM,yBAAmB,GACpC;AAAA,EAEJ;AAEA,iBAAe,OAAO,GAAc;AAClC,MAAE,eAAe;AACjB,QAAI,SAAS,UAAW;AACxB,QAAI,WAAW;AAEb,gBAAU,IAAI;AACd,gBAAU,CAAC,CAAC;AACZ;AAAA,IACF;AACA,cAAU,MAAM;AAChB,aAAS,IAAI;AACb,QAAI;AACF,YAAM,iBAAiB,QAAQ,MAAM,QAAQ,QAAQ,IAAI,QAAQ,WAAW,MAAS;AACrF,iBAAW,QAAQ,WAAW;AAG9B,UAAI,YAAY,KAAK,eAAe,GAAG;AACrC,eAAO,SAAS,OAAO,IAAI,eAAe;AAC1C;AAAA,MACF;AACA,gBAAU,IAAI;AACd,gBAAU,CAAC,CAAC;AAAA,IACd,SAAS,KAAK;AACZ,gBAAU,OAAO;AACjB,eAAS,gBAAgB,GAAG,CAAC;AAAA,IAC/B;AAAA,EACF;AAEA,MAAI,WAAW,MAAM;AACnB;AAAA;AAAA,MAEE,oBAAC,QAAK,SAAS,GAAG,SAAQ,SAAQ,MAAK,UACrC,8BAAC,QAAM,cAAI,gBAAe,GAC5B;AAAA;AAAA,EAEJ;AAEA,QAAM,SAAS,CAAC,MAAc,MAAwB,UAAU,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,EAAE,EAAE;AAOlG,YAAU,MAAM;AACd,QAAI,CAAC,IAAK;AACV,UAAM,IAAI,IAAI,gBAAgB,OAAO,SAAS,MAAM;AACpD,cAAU,CAAC,SAAS;AAClB,YAAM,OAAO,EAAE,GAAG,KAAK;AACvB,iBAAW,KAAK,IAAI,QAAQ;AAC1B,cAAM,UAAU,EAAE,IAAI,EAAE,IAAI;AAC5B,YAAI,YAAY,QAAQ,KAAK,EAAE,IAAI,MAAM,OAAW,MAAK,EAAE,IAAI,IAAI,QAAQ,MAAM,GAAG,GAAG;AAAA,iBAC9E,EAAE,SAAS,YAAY,KAAK,EAAE,IAAI,MAAM,UAAa,EAAE,YAAa,MAAK,EAAE,IAAI,IAAI,EAAE;AAAA,MAChG;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,GAAG,CAAC;AAER,SACE,oBAAC,UAAK,WAAU,cAAa,UAAU,QACrC,+BAAC,UAAO,KAAK,GACV;AAAA,UAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC7E,IAAI,OAAO,IAAI,CAAC,MAAM;AACrB,YAAM,KAAM,OAAO,EAAE,IAAI,KAAgB;AACzC,UAAI,EAAE,SAAS,YAAY;AACzB,eACE;AAAA,UAAC;AAAA;AAAA,YAAsB,OAAO,EAAE;AAAA,YAAO,YAAY,EAAE;AAAA,YAAU,aAAa,EAAE;AAAA,YAAa,MAAM;AAAA,YAC/F,cAAc,iBAAiB,CAAC;AAAA,YAAG,OAAO;AAAA,YAAI,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,CAAC;AAAA;AAAA,UADlE,EAAE;AAAA,QACmE;AAAA,MAExF;AACA,UAAI,EAAE,SAAS,UAAU;AACvB,eACE;AAAA,UAAC;AAAA;AAAA,YAAsB,OAAO,EAAE;AAAA,YAAO,YAAY,EAAE;AAAA,YAAU,aAAY;AAAA,YACzE,SAAS,EAAE,WAAW,CAAC;AAAA,YAAG,OAAO;AAAA,YAAI,UAAU,CAAC,MAAM,OAAO,EAAE,MAAO,KAAgB,EAAE;AAAA;AAAA,UAD3E,EAAE;AAAA,QAC4E;AAAA,MAEjG;AACA,UAAI,EAAE,SAAS,YAAY;AACzB,eACE;AAAA,UAAC;AAAA;AAAA,YAA2B,OAAO,EAAE;AAAA,YAAO,YAAY,EAAE;AAAA,YACxD,OAAO,QAAQ,OAAO,EAAE,IAAI,CAAC;AAAA,YAAG,UAAU,CAAC,YAAY,OAAO,EAAE,MAAM,OAAO;AAAA;AAAA,UAD3D,EAAE;AAAA,QAC4D;AAAA,MAEtF;AACA,UAAI,EAAE,SAAS,SAAS;AAGtB,eACE;AAAA,UAAC;AAAA;AAAA,YAAuB,OAAO,EAAE;AAAA,YAAO,YAAY,EAAE;AAAA,YAAU,UAAU,EAAE;AAAA,YAC1E,oBAAmB;AAAA,YAAqB,OAAO;AAAA,YAAI,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,CAAC;AAAA,YAClF,aAAE,WAAW,CAAC,GAAG,IAAI,CAAC,QACtB,oBAAC,iBAAwB,OAAO,KAAK,OAAO,OAAxB,GAA6B,CAClD;AAAA;AAAA,UAJa,EAAE;AAAA,QAKlB;AAAA,MAEJ;AACA,UAAI,EAAE,SAAS,SAAU,QAAO;AAChC,UAAI,EAAE,SAAS,aAAa;AAC1B,cAAM,CAAC,MAAM,IAAI,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG;AACzC,eACE,qBAAC,cAAsB,WAAU,uBAC/B;AAAA,+BAAC,YAAO,WAAU,4BAA4B;AAAA,cAAE;AAAA,YAAO,EAAE,YAAY;AAAA,aAAK;AAAA,UAC1E,qBAAC,WAAM,WAAU,sBACf;AAAA,gCAAC,UAAK,iBAAG;AAAA,YACT;AAAA,cAAC;AAAA;AAAA,gBAAM,WAAU;AAAA,gBAAc,MAAK;AAAA,gBAAO,UAAU,EAAE;AAAA,gBAAU,OAAO;AAAA,gBACtE,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,GAAG,EAAE,OAAO,KAAK,IAAI,OAAO,MAAM,EAAE,OAAO,QAAQ,KAAK,GAAG,EAAE;AAAA;AAAA,YAAG;AAAA,aACpG;AAAA,UACA,qBAAC,WAAM,WAAU,sBACf;AAAA,gCAAC,UAAK,iBAAG;AAAA,YACT;AAAA,cAAC;AAAA;AAAA,gBAAM,WAAU;AAAA,gBAAc,MAAK;AAAA,gBAAO,UAAU,EAAE;AAAA,gBAAU,KAAK,OAAO;AAAA,gBAAW,OAAO;AAAA,gBAC7F,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,EAAE,OAAO,KAAK,EAAE;AAAA;AAAA,YAAG;AAAA,aACjE;AAAA,aAXa,EAAE,IAYjB;AAAA,MAEJ;AACA,UAAI,EAAE,SAAS,UAAU,EAAE,SAAS,UAAU;AAE5C,eACE,qBAAC,WAAmB,WAAU,sBAC5B;AAAA,+BAAC,UAAK,WAAU,4BAA4B;AAAA,cAAE;AAAA,YAAO,EAAE,YAAY;AAAA,aAAK;AAAA,UACxE;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAM,EAAE;AAAA,cACR,UAAU,EAAE;AAAA,cACZ,cAAc,iBAAiB,CAAC;AAAA,cAChC,aAAa,EAAE;AAAA,cACf,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK;AAAA;AAAA,UAChD;AAAA,aAVU,EAAE,IAWd;AAAA,MAEJ;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAAuB,OAAO,EAAE;AAAA,UAAO,MAAM,EAAE,SAAS,UAAU,UAAU;AAAA,UAG3E,KAAK,EAAE,SAAS,QAAQ,CAAC,OAAgC,IAAI,aAAa,aAAa,KAAK,IAAI;AAAA,UAChG,YAAY,EAAE;AAAA,UAAU,aAAa,EAAE;AAAA,UAAa,cAAc,iBAAiB,CAAC;AAAA,UACpF,OAAO;AAAA,UAAI,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,CAAC;AAAA;AAAA,QAL9B,EAAE;AAAA,MAK+B;AAAA,IAErD,CAAC;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAa;AAAA,QACb,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,MAAM,EAAE,OAAO,KAAK;AAAA,QACrC,OAAO,EAAE,UAAU,YAAY,MAAM,WAAW,OAAO,GAAG,QAAQ,EAAE;AAAA,QACpE,eAAW;AAAA;AAAA,IACb;AAAA,IACC,SAAS,oBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,8BAA8B,GAAI,iBAAM;AAAA,IACrF,oBAAC,SACC,8BAAC,UAAO,OAAO,WAAW,SAAS,oBAAe,IAAI,aAAa,SAAQ,WAAU,MAAK,MAAK,MAAK,UAAS,WAAW,WAAW,QAAQ,GAC7I;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/blocks/builtins/GalleryRender.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useModuleSettings } from "../../modules/context.js";
 import { Grid } from "../ui/index.js";
-import { Img } from "../../media/ImageContext.js";
+import { Img, useGrootsteVariant } from "../../media/ImageContext.js";
 function LightboxOverlay({
   items,
   index,
@@ -12,6 +12,7 @@ function LightboxOverlay({
   onClose
 }) {
   const it = items[index];
+  const groot = useGrootsteVariant(it?.url ?? "");
   const total = items.length;
   const overlayRef = useRef(null);
   const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);
@@ -94,7 +95,7 @@ function LightboxOverlay({
               onPointerUp,
               style: { touchAction: "pan-y" },
               children: [
-                /* @__PURE__ */ jsx("img", { src: it.url, alt: it.alt ?? "" }),
+                /* @__PURE__ */ jsx("img", { src: groot, alt: it.alt ?? "" }),
                 it.caption && /* @__PURE__ */ jsx("figcaption", { children: it.caption })
               ]
             }

package/dist/blocks/builtins/GalleryRender.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/GalleryRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { z } from \"zod\";\nimport type { GalleryBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useModuleSettings } from \"../../modules/context\";\nimport { Grid } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Gallery = z.infer<typeof GalleryBlockSchema>;\ntype Item = Gallery[\"items\"][number];\n\n/** Per-site instelbaar via `modules.gallery.config` (door de agent of in /beheer). */\nexport interface GallerySettings {\n  columns?: number;\n  lightbox?: boolean;\n}\n\n/**\n * Eigen lightbox-overlay: rendert via een portal naar `document.body` (zo raakt geen enkele\n * ancestor-transform — bv. de scroll-reveal — de full-screen positionering). Sluit op klik náást\n * de foto én op Escape; vorige/volgende met teller; herstelt focus zónder de pagina te laten\n * verspringen (`preventScroll`) en zet de body-scroll vast zolang hij open is.\n */\nexport function LightboxOverlay({\n  items,\n  index,\n  onIndex,\n  onClose,\n}: {\n  items: Item[];\n  index: number;\n  onIndex: (i: number) => void;\n  onClose: () => void;\n}) {\n  const it = items[index];\n  const total = items.length;\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);\n  const next = useCallback(() => onIndex((index + 1) % total), [index, total, onIndex]);\n  // Swipe (pointer events, werkt voor touch én muis-sleep): horizontaal > 40px = vorige/volgende.\n  const swipeStart = useRef<number | null>(null);\n  const onPointerDown = (e: React.PointerEvent) => {\n    swipeStart.current = e.clientX;\n  };\n  const onPointerUp = (e: React.PointerEvent) => {\n    if (swipeStart.current === null || total < 2) return;\n    const dx = e.clientX - swipeStart.current;\n    swipeStart.current = null;\n    if (dx > 40) prev();\n    else if (dx < -40) next();\n  };\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n      else if (e.key === \"ArrowLeft\") prev();\n      else if (e.key === \"ArrowRight\") next();\n      else if (e.key === \"Tab\") {\n        // Focus-trap (aria-modal): Tab cirkelt binnen de dialog i.p.v. naar de pagina eronder.\n        const el = overlayRef.current;\n        const focusables = el ? [...el.querySelectorAll<HTMLElement>(\"button, a[href]\")] : [];\n        if (focusables.length === 0) return;\n        const first = focusables[0];\n        const last = focusables[focusables.length - 1];\n        const active = document.activeElement;\n        if (e.shiftKey && (active === first || !el?.contains(active))) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && (active === last || !el?.contains(active))) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\"; // scroll-lock terwijl open\n    // Initiële focus in de dialog (dialog-conventie; toetsenbord/screenreader landt niet \"achter\" de overlay).\n    overlayRef.current?.querySelector<HTMLElement>(\".xicms-lightbox__close\")?.focus({ preventScroll: true });\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = prevOverflow;\n    };\n  }, [onClose, prev, next]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={overlayRef}\n      className=\"xicms-lightbox\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={it.alt || it.caption || \"Foto\"}\n      onClick={onClose}\n    >\n      <button type=\"button\" className=\"xicms-lightbox__close\" aria-label=\"Sluiten\" onClick={onClose}>✕</button>\n      {total > 1 && (\n        <>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--prev\" aria-label=\"Vorige\" onClick={(e) => { e.stopPropagation(); prev(); }}>‹</button>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--next\" aria-label=\"Volgende\" onClick={(e) => { e.stopPropagation(); next(); }}>›</button>\n          <span className=\"xicms-lightbox__counter\">{index + 1} / {total}</span>\n        </>\n      )}\n      {/* Klik op de foto/onderschrift sluit NIET (stopPropagation); klik op de rand wel.\n          touchAction pan-y: verticaal scrollen blijft van de browser, horizontaal is swipen. */}\n      <figure\n        className=\"xicms-lightbox__figure\"\n        onClick={(e) => e.stopPropagation()}\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        style={{ touchAction: \"pan-y\" }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img src={it.url} alt={it.alt ?? \"\"} />\n        {it.caption && <figcaption>{it.caption}</figcaption>}\n      </figure>\n    </div>,\n    document.body,\n  );\n}\n\n/** Galerij — responsive grid met instelbare beeldverhouding en optionele lightbox. */\nexport function GalleryRender({ block }: BlockRenderProps<Gallery>) {\n  const settings = useModuleSettings<GallerySettings>(\"gallery\");\n  // `_i` = de index in block.items (vóór url-/tagfilters): het inline-edit-pad\n  // (`items.<_i>.caption`) moet naar het ORIGINELE array-item wijzen, niet naar de filterpositie.\n  const allItems = (block.items ?? []).map((it, _i) => ({ ...it, _i })).filter((i) => i.url);\n  const [open, setOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n  const [activeTag, setActiveTag] = useState<string | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  // Filterbalk op item-tags (opt-in): lightbox-navigatie volgt de gefilterde lijst.\n  const tags = block.showFilter ? [...new Set(allItems.map((i) => i.tag).filter((t): t is string => Boolean(t)))] : [];\n  const items = activeTag ? allItems.filter((i) => i.tag === activeTag) : allItems;\n\n  if (allItems.length === 0) return null;\n\n  const cols = block.columns && block.columns > 0 ? block.columns : settings.columns ?? 3;\n  const lightbox =\n    block.lightbox === \"on\" ? true : block.lightbox === \"off\" ? false : settings.lightbox ?? true;\n  const ar = block.aspectRatio ?? \"1/1\";\n\n  const imgStyle = {\n    width: \"100%\",\n    aspectRatio: ar === \"auto\" ? undefined : ar.replace(\"/\", \" / \"),\n    objectFit: \"cover\" as const,\n    borderRadius: \"var(--radius-element)\",\n    display: \"block\",\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus({ preventScroll: true }); // geen page-jump bij sluiten\n  };\n\n  return (\n    <div className=\"xicms-gallery\">\n      {tags.length > 0 && (\n        <div className=\"xicms-gallery__filter\" role=\"group\" aria-label=\"Filter op categorie\">\n          <button type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === null} data-active={activeTag === null ? \"1\" : \"0\"} onClick={() => { setActiveTag(null); setIndex(0); }}>\n            Alles\n          </button>\n          {tags.map((t) => (\n            <button key={t} type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === t} data-active={activeTag === t ? \"1\" : \"0\"} onClick={() => { setActiveTag(t); setIndex(0); }}>\n              {t}\n            </button>\n          ))}\n        </div>\n      )}\n      <Grid columns={{ minWidth: 160, max: Math.min(cols, 6) }} gap={2}>\n        {items.map((i, idx) => (\n          <figure key={idx} style={{ margin: 0 }} className=\"xicms-gallery__item\">\n            {lightbox ? (\n              <button\n                type=\"button\"\n                onClick={(e) => { triggerRef.current = e.currentTarget; setIndex(idx); setOpen(true); }}\n                aria-label={i.alt || i.caption || `Foto ${idx + 1} vergroten`}\n                style={{ display: \"block\", width: \"100%\", padding: 0, border: 0, background: \"none\", cursor: \"zoom-in\" }}\n              >\n                <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n              </button>\n            ) : (\n              <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n            )}\n            {i.caption && (\n              <figcaption className=\"xicms-gallery__caption\" data-xicms-edit={`items.${i._i}.caption`} style={{ marginTop: \"0.4rem\", fontSize: \"0.85rem\", color: \"var(--color-text-secondary)\" }}>\n                {i.caption}\n              </figcaption>\n            )}\n          </figure>\n        ))}\n      </Grid>\n\n      {lightbox && open && (\n        <LightboxOverlay items={items} index={index} onIndex={setIndex} onClose={close} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/GalleryRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { z } from \"zod\";\nimport type { GalleryBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useModuleSettings } from \"../../modules/context\";\nimport { Grid } from \"../ui\";\nimport { Img, useGrootsteVariant } from \"../../media/ImageContext\";\n\ntype Gallery = z.infer<typeof GalleryBlockSchema>;\ntype Item = Gallery[\"items\"][number];\n\n/** Per-site instelbaar via `modules.gallery.config` (door de agent of in /beheer). */\nexport interface GallerySettings {\n  columns?: number;\n  lightbox?: boolean;\n}\n\n/**\n * Eigen lightbox-overlay: rendert via een portal naar `document.body` (zo raakt geen enkele\n * ancestor-transform — bv. de scroll-reveal — de full-screen positionering). Sluit op klik náást\n * de foto én op Escape; vorige/volgende met teller; herstelt focus zónder de pagina te laten\n * verspringen (`preventScroll`) en zet de body-scroll vast zolang hij open is.\n */\nexport function LightboxOverlay({\n  items,\n  index,\n  onIndex,\n  onClose,\n}: {\n  items: Item[];\n  index: number;\n  onIndex: (i: number) => void;\n  onClose: () => void;\n}) {\n  const it = items[index];\n  // 8.3: de grootste gegenereerde versie (volle WebP) i.p.v. het origineel van soms 8 MB.\n  const groot = useGrootsteVariant(it?.url ?? \"\");\n  const total = items.length;\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);\n  const next = useCallback(() => onIndex((index + 1) % total), [index, total, onIndex]);\n  // Swipe (pointer events, werkt voor touch én muis-sleep): horizontaal > 40px = vorige/volgende.\n  const swipeStart = useRef<number | null>(null);\n  const onPointerDown = (e: React.PointerEvent) => {\n    swipeStart.current = e.clientX;\n  };\n  const onPointerUp = (e: React.PointerEvent) => {\n    if (swipeStart.current === null || total < 2) return;\n    const dx = e.clientX - swipeStart.current;\n    swipeStart.current = null;\n    if (dx > 40) prev();\n    else if (dx < -40) next();\n  };\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n      else if (e.key === \"ArrowLeft\") prev();\n      else if (e.key === \"ArrowRight\") next();\n      else if (e.key === \"Tab\") {\n        // Focus-trap (aria-modal): Tab cirkelt binnen de dialog i.p.v. naar de pagina eronder.\n        const el = overlayRef.current;\n        const focusables = el ? [...el.querySelectorAll<HTMLElement>(\"button, a[href]\")] : [];\n        if (focusables.length === 0) return;\n        const first = focusables[0];\n        const last = focusables[focusables.length - 1];\n        const active = document.activeElement;\n        if (e.shiftKey && (active === first || !el?.contains(active))) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && (active === last || !el?.contains(active))) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\"; // scroll-lock terwijl open\n    // Initiële focus in de dialog (dialog-conventie; toetsenbord/screenreader landt niet \"achter\" de overlay).\n    overlayRef.current?.querySelector<HTMLElement>(\".xicms-lightbox__close\")?.focus({ preventScroll: true });\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = prevOverflow;\n    };\n  }, [onClose, prev, next]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={overlayRef}\n      className=\"xicms-lightbox\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={it.alt || it.caption || \"Foto\"}\n      onClick={onClose}\n    >\n      <button type=\"button\" className=\"xicms-lightbox__close\" aria-label=\"Sluiten\" onClick={onClose}>✕</button>\n      {total > 1 && (\n        <>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--prev\" aria-label=\"Vorige\" onClick={(e) => { e.stopPropagation(); prev(); }}>‹</button>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--next\" aria-label=\"Volgende\" onClick={(e) => { e.stopPropagation(); next(); }}>›</button>\n          <span className=\"xicms-lightbox__counter\">{index + 1} / {total}</span>\n        </>\n      )}\n      {/* Klik op de foto/onderschrift sluit NIET (stopPropagation); klik op de rand wel.\n          touchAction pan-y: verticaal scrollen blijft van de browser, horizontaal is swipen. */}\n      <figure\n        className=\"xicms-lightbox__figure\"\n        onClick={(e) => e.stopPropagation()}\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        style={{ touchAction: \"pan-y\" }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img src={groot} alt={it.alt ?? \"\"} />\n        {it.caption && <figcaption>{it.caption}</figcaption>}\n      </figure>\n    </div>,\n    document.body,\n  );\n}\n\n/** Galerij — responsive grid met instelbare beeldverhouding en optionele lightbox. */\nexport function GalleryRender({ block }: BlockRenderProps<Gallery>) {\n  const settings = useModuleSettings<GallerySettings>(\"gallery\");\n  // `_i` = de index in block.items (vóór url-/tagfilters): het inline-edit-pad\n  // (`items.<_i>.caption`) moet naar het ORIGINELE array-item wijzen, niet naar de filterpositie.\n  const allItems = (block.items ?? []).map((it, _i) => ({ ...it, _i })).filter((i) => i.url);\n  const [open, setOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n  const [activeTag, setActiveTag] = useState<string | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  // Filterbalk op item-tags (opt-in): lightbox-navigatie volgt de gefilterde lijst.\n  const tags = block.showFilter ? [...new Set(allItems.map((i) => i.tag).filter((t): t is string => Boolean(t)))] : [];\n  const items = activeTag ? allItems.filter((i) => i.tag === activeTag) : allItems;\n\n  if (allItems.length === 0) return null;\n\n  const cols = block.columns && block.columns > 0 ? block.columns : settings.columns ?? 3;\n  const lightbox =\n    block.lightbox === \"on\" ? true : block.lightbox === \"off\" ? false : settings.lightbox ?? true;\n  const ar = block.aspectRatio ?? \"1/1\";\n\n  const imgStyle = {\n    width: \"100%\",\n    aspectRatio: ar === \"auto\" ? undefined : ar.replace(\"/\", \" / \"),\n    objectFit: \"cover\" as const,\n    borderRadius: \"var(--radius-element)\",\n    display: \"block\",\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus({ preventScroll: true }); // geen page-jump bij sluiten\n  };\n\n  return (\n    <div className=\"xicms-gallery\">\n      {tags.length > 0 && (\n        <div className=\"xicms-gallery__filter\" role=\"group\" aria-label=\"Filter op categorie\">\n          <button type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === null} data-active={activeTag === null ? \"1\" : \"0\"} onClick={() => { setActiveTag(null); setIndex(0); }}>\n            Alles\n          </button>\n          {tags.map((t) => (\n            <button key={t} type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === t} data-active={activeTag === t ? \"1\" : \"0\"} onClick={() => { setActiveTag(t); setIndex(0); }}>\n              {t}\n            </button>\n          ))}\n        </div>\n      )}\n      <Grid columns={{ minWidth: 160, max: Math.min(cols, 6) }} gap={2}>\n        {items.map((i, idx) => (\n          <figure key={idx} style={{ margin: 0 }} className=\"xicms-gallery__item\">\n            {lightbox ? (\n              <button\n                type=\"button\"\n                onClick={(e) => { triggerRef.current = e.currentTarget; setIndex(idx); setOpen(true); }}\n                aria-label={i.alt || i.caption || `Foto ${idx + 1} vergroten`}\n                style={{ display: \"block\", width: \"100%\", padding: 0, border: 0, background: \"none\", cursor: \"zoom-in\" }}\n              >\n                <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n              </button>\n            ) : (\n              <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n            )}\n            {i.caption && (\n              <figcaption className=\"xicms-gallery__caption\" data-xicms-edit={`items.${i._i}.caption`} style={{ marginTop: \"0.4rem\", fontSize: \"0.85rem\", color: \"var(--color-text-secondary)\" }}>\n                {i.caption}\n              </figcaption>\n            )}\n          </figure>\n        ))}\n      </Grid>\n\n      {lightbox && open && (\n        <LightboxOverlay items={items} index={index} onIndex={setIndex} onClose={close} />\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoGM,SAEE,UAFF,KAKI,YALJ;AAlGN,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,SAAS,oBAAoB;AAI7B,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,KAAK,0BAA0B;AAiBjC,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,KAAK,MAAM,KAAK;AAEtB,QAAM,QAAQ,mBAAmB,IAAI,OAAO,EAAE;AAC9C,QAAM,QAAQ,MAAM;AACpB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,OAAO,YAAY,MAAM,SAAS,QAAQ,IAAI,SAAS,KAAK,GAAG,CAAC,OAAO,OAAO,OAAO,CAAC;AAC5F,QAAM,OAAO,YAAY,MAAM,SAAS,QAAQ,KAAK,KAAK,GAAG,CAAC,OAAO,OAAO,OAAO,CAAC;AAEpF,QAAM,aAAa,OAAsB,IAAI;AAC7C,QAAM,gBAAgB,CAAC,MAA0B;AAC/C,eAAW,UAAU,EAAE;AAAA,EACzB;AACA,QAAM,cAAc,CAAC,MAA0B;AAC7C,QAAI,WAAW,YAAY,QAAQ,QAAQ,EAAG;AAC9C,UAAM,KAAK,EAAE,UAAU,WAAW;AAClC,eAAW,UAAU;AACrB,QAAI,KAAK,GAAI,MAAK;AAAA,aACT,KAAK,IAAK,MAAK;AAAA,EAC1B;AAEA,YAAU,MAAM;AACd,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,SAAQ;AAAA,eACvB,EAAE,QAAQ,YAAa,MAAK;AAAA,eAC5B,EAAE,QAAQ,aAAc,MAAK;AAAA,eAC7B,EAAE,QAAQ,OAAO;AAExB,cAAM,KAAK,WAAW;AACtB,cAAM,aAAa,KAAK,CAAC,GAAG,GAAG,iBAA8B,iBAAiB,CAAC,IAAI,CAAC;AACpF,YAAI,WAAW,WAAW,EAAG;AAC7B,cAAM,QAAQ,WAAW,CAAC;AAC1B,cAAM,OAAO,WAAW,WAAW,SAAS,CAAC;AAC7C,cAAM,SAAS,SAAS;AACxB,YAAI,EAAE,aAAa,WAAW,SAAS,CAAC,IAAI,SAAS,MAAM,IAAI;AAC7D,YAAE,eAAe;AACjB,eAAK,MAAM;AAAA,QACb,WAAW,CAAC,EAAE,aAAa,WAAW,QAAQ,CAAC,IAAI,SAAS,MAAM,IAAI;AACpE,YAAE,eAAe;AACjB,gBAAM,MAAM;AAAA,QACd;AAAA,MACF;AAAA,IACF;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,UAAM,eAAe,SAAS,KAAK,MAAM;AACzC,aAAS,KAAK,MAAM,WAAW;AAE/B,eAAW,SAAS,cAA2B,wBAAwB,GAAG,MAAM,EAAE,eAAe,KAAK,CAAC;AACvG,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,KAAK;AAC7C,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,SAAS,MAAM,IAAI,CAAC;AAExB,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,GAAG,OAAO,GAAG,WAAW;AAAA,QACpC,SAAS;AAAA,QAET;AAAA,8BAAC,YAAO,MAAK,UAAS,WAAU,yBAAwB,cAAW,WAAU,SAAS,SAAS,oBAAC;AAAA,UAC/F,QAAQ,KACP,iCACE;AAAA,gCAAC,YAAO,MAAK,UAAS,WAAU,iDAAgD,cAAW,UAAS,SAAS,CAAC,MAAM;AAAE,gBAAE,gBAAgB;AAAG,mBAAK;AAAA,YAAG,GAAG,oBAAC;AAAA,YACvJ,oBAAC,YAAO,MAAK,UAAS,WAAU,iDAAgD,cAAW,YAAW,SAAS,CAAC,MAAM;AAAE,gBAAE,gBAAgB;AAAG,mBAAK;AAAA,YAAG,GAAG,oBAAC;AAAA,YACzJ,qBAAC,UAAK,WAAU,2BAA2B;AAAA,sBAAQ;AAAA,cAAE;AAAA,cAAI;AAAA,eAAM;AAAA,aACjE;AAAA,UAIF;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAClC;AAAA,cACA;AAAA,cACA,OAAO,EAAE,aAAa,QAAQ;AAAA,cAG9B;AAAA,oCAAC,SAAI,KAAK,OAAO,KAAK,GAAG,OAAO,IAAI;AAAA,gBACnC,GAAG,WAAW,oBAAC,gBAAY,aAAG,SAAQ;AAAA;AAAA;AAAA,UACzC;AAAA;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAGO,SAAS,cAAc,EAAE,MAAM,GAA8B;AAClE,QAAM,WAAW,kBAAmC,SAAS;AAG7D,QAAM,YAAY,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,IAAI,QAAQ,EAAE,GAAG,IAAI,GAAG,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG;AACzF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,aAAa,OAAiC,IAAI;AAGxD,QAAM,OAAO,MAAM,aAAa,CAAC,GAAG,IAAI,IAAI,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,MAAmB,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACnH,QAAM,QAAQ,YAAY,SAAS,OAAO,CAAC,MAAM,EAAE,QAAQ,SAAS,IAAI;AAExE,MAAI,SAAS,WAAW,EAAG,QAAO;AAElC,QAAM,OAAO,MAAM,WAAW,MAAM,UAAU,IAAI,MAAM,UAAU,SAAS,WAAW;AACtF,QAAM,WACJ,MAAM,aAAa,OAAO,OAAO,MAAM,aAAa,QAAQ,QAAQ,SAAS,YAAY;AAC3F,QAAM,KAAK,MAAM,eAAe;AAEhC,QAAM,WAAW;AAAA,IACf,OAAO;AAAA,IACP,aAAa,OAAO,SAAS,SAAY,GAAG,QAAQ,KAAK,KAAK;AAAA,IAC9D,WAAW;AAAA,IACX,cAAc;AAAA,IACd,SAAS;AAAA,EACX;AAEA,QAAM,QAAQ,MAAM;AAClB,YAAQ,KAAK;AACb,eAAW,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,EACnD;AAEA,SACE,qBAAC,SAAI,WAAU,iBACZ;AAAA,SAAK,SAAS,KACb,qBAAC,SAAI,WAAU,yBAAwB,MAAK,SAAQ,cAAW,uBAC7D;AAAA,0BAAC,YAAO,MAAK,UAAS,WAAU,4BAA2B,gBAAc,cAAc,MAAM,eAAa,cAAc,OAAO,MAAM,KAAK,SAAS,MAAM;AAAE,qBAAa,IAAI;AAAG,iBAAS,CAAC;AAAA,MAAG,GAAG,mBAE/L;AAAA,MACC,KAAK,IAAI,CAAC,MACT,oBAAC,YAAe,MAAK,UAAS,WAAU,4BAA2B,gBAAc,cAAc,GAAG,eAAa,cAAc,IAAI,MAAM,KAAK,SAAS,MAAM;AAAE,qBAAa,CAAC;AAAG,iBAAS,CAAC;AAAA,MAAG,GACxL,eADU,CAEb,CACD;AAAA,OACH;AAAA,IAEF,oBAAC,QAAK,SAAS,EAAE,UAAU,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC,EAAE,GAAG,KAAK,GAC5D,gBAAM,IAAI,CAAC,GAAG,QACb,qBAAC,YAAiB,OAAO,EAAE,QAAQ,EAAE,GAAG,WAAU,uBAC/C;AAAA,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,CAAC,MAAM;AAAE,uBAAW,UAAU,EAAE;AAAe,qBAAS,GAAG;AAAG,oBAAQ,IAAI;AAAA,UAAG;AAAA,UACtF,cAAY,EAAE,OAAO,EAAE,WAAW,QAAQ,MAAM,CAAC;AAAA,UACjD,OAAO,EAAE,SAAS,SAAS,OAAO,QAAQ,SAAS,GAAG,QAAQ,GAAG,YAAY,QAAQ,QAAQ,UAAU;AAAA,UAEvG,8BAAC,OAAI,KAAK,EAAE,KAAe,KAAK,EAAE,OAAO,IAAI,OAAO,KAAK,QAAQ,KAAK,OAAM,kCAAiC,OAAO,UAAU;AAAA;AAAA,MAChI,IAEA,oBAAC,OAAI,KAAK,EAAE,KAAe,KAAK,EAAE,OAAO,IAAI,OAAO,KAAK,QAAQ,KAAK,OAAM,kCAAiC,OAAO,UAAU;AAAA,MAE/H,EAAE,WACD,oBAAC,gBAAW,WAAU,0BAAyB,mBAAiB,SAAS,EAAE,EAAE,YAAY,OAAO,EAAE,WAAW,UAAU,UAAU,WAAW,OAAO,8BAA8B,GAC9K,YAAE,SACL;AAAA,SAhBS,GAkBb,CACD,GACH;AAAA,IAEC,YAAY,QACX,oBAAC,mBAAgB,OAAc,OAAc,SAAS,UAAU,SAAS,OAAO;AAAA,KAEpF;AAEJ;","names":[]}

package/dist/blocks/builtins/Hero.js

@@ -3,7 +3,7 @@ import { defineBlock } from "../registry.js";
 const heroBlock = defineBlock({
   type: "hero",
   Render: dynamic(() => import("./HeroRender.js").then((m) => m.HeroRender)),
-  label: "Hero",
+  label: "Openingsbeeld",
   icon: "\u2728",
   defaults: () => ({ title: "Welkom", subtitle: "", align: "left", vAlign: "center", minHeight: "auto", overlayOpacity: 0, buttons: [] })
 });

package/dist/blocks/builtins/Hero.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Hero.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const heroBlock = defineBlock({\n  type: \"hero\",\n  Render: dynamic(() => import(\"./HeroRender\").then((m) => m.HeroRender)),\n  label: \"Hero\",\n  icon: \"✨\",\n  defaults: () => ({ title: \"Welkom\", subtitle: \"\", align: \"left\", vAlign: \"center\", minHeight: \"auto\", overlayOpacity: 0, buttons: [] }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,YAAY,YAAY;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,cAAc,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC;AAAA,EACtE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,UAAU,UAAU,IAAI,OAAO,QAAQ,QAAQ,UAAU,WAAW,QAAQ,gBAAgB,GAAG,SAAS,CAAC,EAAE;AACvI,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Hero.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const heroBlock = defineBlock({\n  type: \"hero\",\n  Render: dynamic(() => import(\"./HeroRender\").then((m) => m.HeroRender)),\n  label: \"Openingsbeeld\",\n  icon: \"✨\",\n  defaults: () => ({ title: \"Welkom\", subtitle: \"\", align: \"left\", vAlign: \"center\", minHeight: \"auto\", overlayOpacity: 0, buttons: [] }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,YAAY,YAAY;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,cAAc,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC;AAAA,EACtE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,UAAU,UAAU,IAAI,OAAO,QAAQ,QAAQ,UAAU,WAAW,QAAQ,gBAAgB,GAAG,SAAS,CAAC,EAAE;AACvI,CAAC;","names":[]}

package/dist/blocks/builtins/HeroRender.js

@@ -22,7 +22,8 @@ function HeroRender({ block }) {
     }
   };
   const overlay = block.overlayOpacity > 0 ? { background: block.overlayColor ?? "#000000", opacity: block.overlayOpacity / 100 } : null;
-  const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== "auto";
+  const naast = block.layout === "naast" && Boolean(block.imageUrl) && !block.videoUrl;
+  const coverMedia = !naast && Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== "auto";
   const light = coverMedia ? { color: "#ffffff", textShadow: "0 2px 14px rgba(0,0,0,.45)" } : void 0;
   const buttons = block.buttons ?? [];
   return /* @__PURE__ */ jsxs(
@@ -33,6 +34,7 @@ function HeroRender({ block }) {
       "data-valign": block.vAlign,
       "data-height": block.minHeight,
       "data-media": coverMedia ? "cover" : void 0,
+      "data-layout": naast ? "naast" : void 0,
       children: [
         block.videoUrl ? /* @__PURE__ */ jsx(
           "video",
@@ -47,15 +49,17 @@ function HeroRender({ block }) {
             preload: "metadata",
             "aria-hidden": "true"
           }
-        ) : block.imageUrl ? /* @__PURE__ */ jsx(Img, { src: block.imageUrl, alt: "", className: "xicms-hero__media", width: 1600, height: 900, sizes: "100vw", priority: true, editField: "imageUrl", editFill: true }) : null,
+        ) : block.imageUrl && !naast ? /* @__PURE__ */ jsx(Img, { src: block.imageUrl, alt: "", className: "xicms-hero__media", width: 1600, height: 900, sizes: "100vw", priority: true, editField: "imageUrl", editFill: true }) : null,
         overlay && /* @__PURE__ */ jsx("div", { className: "xicms-hero__overlay", style: overlay, "aria-hidden": "true" }),
         block.overlayGradient && coverMedia && /* @__PURE__ */ jsx("div", { className: "xicms-hero__gradient", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { className: "xicms-hero__inner", children: [
           block.eyebrow && /* @__PURE__ */ jsx(Text, { type: "label", className: "xicms-hero__eyebrow", style: light, "data-xicms-edit": "eyebrow", children: block.eyebrow }),
           block.title && /* @__PURE__ */ jsx(Heading, { level: block.headingLevel === "2" ? 2 : 1, type: "display-1", className: "xicms-hero__title", style: light, "data-xicms-edit": "title", children: block.title }),
           block.subtitle && /* @__PURE__ */ jsx(Text, { type: "large", className: "xicms-hero__sub", style: light, "data-xicms-edit": "subtitle", children: block.subtitle }),
-          buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => /* @__PURE__ */ jsx(Btn, { label: b.label, href: b.href, variant: b.variant, size: "lg", editField: `buttons.${b._i}.label` }, b._i)) })
+          buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => /* @__PURE__ */ jsx(Btn, { label: b.label, href: b.href, variant: b.variant, size: "lg", editField: `buttons.${b._i}.label` }, b._i)) }),
+          (block.trust ?? []).some((t) => t.trim()) && /* @__PURE__ */ jsx("ul", { className: "xicms-hero__trust", style: light, children: (block.trust ?? []).map((t, i) => t.trim() ? /* @__PURE__ */ jsx("li", { "data-xicms-edit": `trust.${i}`, children: t }, i) : null) })
         ] }),
+        naast && block.imageUrl && /* @__PURE__ */ jsx("div", { className: "xicms-hero__beeld", children: /* @__PURE__ */ jsx(Img, { src: block.imageUrl, alt: "", width: 1200, height: 1e3, sizes: "(max-width: 900px) 100vw, 50vw", priority: true, editField: "imageUrl", editFill: true }) }),
         block.videoUrl && /* @__PURE__ */ jsx(
           "button",
           {

package/dist/blocks/builtins/HeroRender.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/HeroRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport type { z } from \"zod\";\nimport type { HeroBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { Btn, Heading, Text } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Hero = z.infer<typeof HeroBlockSchema>;\n\nexport function HeroRender({ block }: BlockRenderProps<Hero>) {\n  // Achtergrondvideo WCAG-proof (2.2.2): geen autoPlay-attribuut (hydration-veilig) — playback\n  // start in een effect, en alléén zonder reduced-motion-voorkeur. Altijd een pauzeknop, en\n  // imageUrl dient als poster (direct beeld i.p.v. zwart vlak → betere LCP).\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [playing, setPlaying] = useState(false);\n  useEffect(() => {\n    const v = videoRef.current;\n    if (!v) return;\n    if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) return;\n    v.play().then(() => setPlaying(true)).catch(() => undefined);\n  }, [block.videoUrl]);\n  const toggleVideo = () => {\n    const v = videoRef.current;\n    if (!v) return;\n    if (v.paused) v.play().then(() => setPlaying(true)).catch(() => undefined);\n    else {\n      v.pause();\n      setPlaying(false);\n    }\n  };\n  const overlay =\n    block.overlayOpacity > 0\n      ? { background: block.overlayColor ?? \"#000000\", opacity: block.overlayOpacity / 100 }\n      : null;\n  // Beeld/video als dekkende achtergrond (niet bij height \"auto\"): dan moet de tekst licht zijn.\n  const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== \"auto\";\n  const light: CSSProperties | undefined = coverMedia\n    ? { color: \"#ffffff\", textShadow: \"0 2px 14px rgba(0,0,0,.45)\" }\n    : undefined;\n  const buttons = block.buttons ?? [];\n\n  return (\n    <section\n      className=\"xicms-hero\"\n      data-align={block.align}\n      data-valign={block.vAlign}\n      data-height={block.minHeight}\n      data-media={coverMedia ? \"cover\" : undefined}\n    >\n      {block.videoUrl ? (\n        <video\n          ref={videoRef}\n          className=\"xicms-hero__media\"\n          src={block.videoUrl}\n          poster={block.imageUrl || undefined}\n          muted\n          loop\n          playsInline\n          preload=\"metadata\"\n          aria-hidden=\"true\"\n        />\n      ) : block.imageUrl ? (\n        <Img src={block.imageUrl} alt=\"\" className=\"xicms-hero__media\" width={1600} height={900} sizes=\"100vw\" priority editField=\"imageUrl\" editFill />\n      ) : null}\n      {overlay && <div className=\"xicms-hero__overlay\" style={overlay} aria-hidden=\"true\" />}\n      {/* Gradient (donker onderaan → transparant): leesbare tekst zonder de hele foto te dimmen. */}\n      {block.overlayGradient && coverMedia && <div className=\"xicms-hero__gradient\" aria-hidden=\"true\" />}\n      <div className=\"xicms-hero__inner\">\n        {block.eyebrow && (\n          <Text type=\"label\" className=\"xicms-hero__eyebrow\" style={light} data-xicms-edit=\"eyebrow\">\n            {block.eyebrow}\n          </Text>\n        )}\n        {block.title && (\n          <Heading level={block.headingLevel === \"2\" ? 2 : 1} type=\"display-1\" className=\"xicms-hero__title\" style={light} data-xicms-edit=\"title\">\n            {block.title}\n          </Heading>\n        )}\n        {block.subtitle && (\n          <Text type=\"large\" className=\"xicms-hero__sub\" style={light} data-xicms-edit=\"subtitle\">\n            {block.subtitle}\n          </Text>\n        )}\n        {buttons.length > 0 && (\n          <div className=\"xicms-hero__buttons\">\n            {/* Via Astryx Btn (zelfde systeem als Cta/Pricing/…): volgt de site-theming en de\n                outline→ghost-variantmapping — geen tweede, handmatig te onderhouden knop-CSS. */}\n            {buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => (\n              <Btn key={b._i} label={b.label} href={b.href} variant={b.variant} size=\"lg\" editField={`buttons.${b._i}.label`} />\n            ))}\n          </div>\n        )}\n      </div>\n      {block.videoUrl && (\n        <button\n          type=\"button\"\n          className=\"xicms-hero__videotoggle\"\n          onClick={toggleVideo}\n          aria-label={playing ? \"Achtergrondvideo pauzeren\" : \"Achtergrondvideo afspelen\"}\n        >\n          {playing ? \"⏸\" : \"▶\"}\n        </button>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/HeroRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport type { z } from \"zod\";\nimport type { HeroBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { Btn, Heading, Text } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Hero = z.infer<typeof HeroBlockSchema>;\n\nexport function HeroRender({ block }: BlockRenderProps<Hero>) {\n  // Achtergrondvideo WCAG-proof (2.2.2): geen autoPlay-attribuut (hydration-veilig) — playback\n  // start in een effect, en alléén zonder reduced-motion-voorkeur. Altijd een pauzeknop, en\n  // imageUrl dient als poster (direct beeld i.p.v. zwart vlak → betere LCP).\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [playing, setPlaying] = useState(false);\n  useEffect(() => {\n    const v = videoRef.current;\n    if (!v) return;\n    if (window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches) return;\n    v.play().then(() => setPlaying(true)).catch(() => undefined);\n  }, [block.videoUrl]);\n  const toggleVideo = () => {\n    const v = videoRef.current;\n    if (!v) return;\n    if (v.paused) v.play().then(() => setPlaying(true)).catch(() => undefined);\n    else {\n      v.pause();\n      setPlaying(false);\n    }\n  };\n  const overlay =\n    block.overlayOpacity > 0\n      ? { background: block.overlayColor ?? \"#000000\", opacity: block.overlayOpacity / 100 }\n      : null;\n  // 8.13: \"naast\" = foto rechts naast de tekst, nooit als achtergrond.\n  const naast = block.layout === \"naast\" && Boolean(block.imageUrl) && !block.videoUrl;\n  // Beeld/video als dekkende achtergrond (niet bij height \"auto\"): dan moet de tekst licht zijn.\n  const coverMedia = !naast && Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== \"auto\";\n  const light: CSSProperties | undefined = coverMedia\n    ? { color: \"#ffffff\", textShadow: \"0 2px 14px rgba(0,0,0,.45)\" }\n    : undefined;\n  const buttons = block.buttons ?? [];\n\n  return (\n    <section\n      className=\"xicms-hero\"\n      data-align={block.align}\n      data-valign={block.vAlign}\n      data-height={block.minHeight}\n      data-media={coverMedia ? \"cover\" : undefined}\n      data-layout={naast ? \"naast\" : undefined}\n    >\n      {block.videoUrl ? (\n        <video\n          ref={videoRef}\n          className=\"xicms-hero__media\"\n          src={block.videoUrl}\n          poster={block.imageUrl || undefined}\n          muted\n          loop\n          playsInline\n          preload=\"metadata\"\n          aria-hidden=\"true\"\n        />\n      ) : block.imageUrl && !naast ? (\n        <Img src={block.imageUrl} alt=\"\" className=\"xicms-hero__media\" width={1600} height={900} sizes=\"100vw\" priority editField=\"imageUrl\" editFill />\n      ) : null}\n      {overlay && <div className=\"xicms-hero__overlay\" style={overlay} aria-hidden=\"true\" />}\n      {/* Gradient (donker onderaan → transparant): leesbare tekst zonder de hele foto te dimmen. */}\n      {block.overlayGradient && coverMedia && <div className=\"xicms-hero__gradient\" aria-hidden=\"true\" />}\n      <div className=\"xicms-hero__inner\">\n        {block.eyebrow && (\n          <Text type=\"label\" className=\"xicms-hero__eyebrow\" style={light} data-xicms-edit=\"eyebrow\">\n            {block.eyebrow}\n          </Text>\n        )}\n        {block.title && (\n          <Heading level={block.headingLevel === \"2\" ? 2 : 1} type=\"display-1\" className=\"xicms-hero__title\" style={light} data-xicms-edit=\"title\">\n            {block.title}\n          </Heading>\n        )}\n        {block.subtitle && (\n          <Text type=\"large\" className=\"xicms-hero__sub\" style={light} data-xicms-edit=\"subtitle\">\n            {block.subtitle}\n          </Text>\n        )}\n        {buttons.length > 0 && (\n          <div className=\"xicms-hero__buttons\">\n            {/* Via Astryx Btn (zelfde systeem als Cta/Pricing/…): volgt de site-theming en de\n                outline→ghost-variantmapping — geen tweede, handmatig te onderhouden knop-CSS. */}\n            {buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => (\n              <Btn key={b._i} label={b.label} href={b.href} variant={b.variant} size=\"lg\" editField={`buttons.${b._i}.label`} />\n            ))}\n          </div>\n        )}\n        {(block.trust ?? []).some((t) => t.trim()) && (\n          <ul className=\"xicms-hero__trust\" style={light}>\n            {(block.trust ?? []).map((t, i) => (t.trim() ? <li key={i} data-xicms-edit={`trust.${i}`}>{t}</li> : null))}\n          </ul>\n        )}\n      </div>\n      {naast && block.imageUrl && (\n        <div className=\"xicms-hero__beeld\">\n          <Img src={block.imageUrl} alt=\"\" width={1200} height={1000} sizes=\"(max-width: 900px) 100vw, 50vw\" priority editField=\"imageUrl\" editFill />\n        </div>\n      )}\n      {block.videoUrl && (\n        <button\n          type=\"button\"\n          className=\"xicms-hero__videotoggle\"\n          onClick={toggleVideo}\n          aria-label={playing ? \"Achtergrondvideo pauzeren\" : \"Achtergrondvideo afspelen\"}\n        >\n          {playing ? \"⏸\" : \"▶\"}\n        </button>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/builtins/OpenNowBadge.d.ts

@@ -1,9 +1,11 @@
 import { type HoursRow } from "./lib/openingHours.js";
+import type { BusinessException } from "../../schema/business.js";
 /**
  * "Nu geopend / Nu gesloten"-badge bij openingstijden. Client-only en pas ná mount berekend
  * (hydration-veilig: de servertijd kan afwijken van de bezoekerstijd). Toont niets wanneer de
  * rijen niet betrouwbaar te parsen zijn — liever geen badge dan een foute.
  */
-export declare function OpenNowBadge({ rows }: {
-    rows: HoursRow[];
+export declare function OpenNowBadge({ rows, afwijkingen }: {
+    rows: HoursRow[]; /** 8.13: feestdagen/vakantie tellen mee. */
+    afwijkingen?: BusinessException[];
 }): import("react").JSX.Element | null;

package/dist/blocks/builtins/OpenNowBadge.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { StatusDot } from "@astryxdesign/core/StatusDot";
-import { isOpenNow } from "./lib/openingHours.js";
-function OpenNowBadge({ rows }) {
+import { isOpenNuMetAfwijkingen } from "../../bedrijf/bedrijf.js";
+function OpenNowBadge({ rows, afwijkingen }) {
   const [open, setOpen] = useState(null);
-  const rowsKey = JSON.stringify(rows);
+  const rowsKey = JSON.stringify([rows, afwijkingen ?? []]);
   useEffect(() => {
-    const parsed = JSON.parse(rowsKey);
-    setOpen(isOpenNow(parsed));
-    const id = setInterval(() => setOpen(isOpenNow(parsed)), 6e4);
+    const [parsed, uitz] = JSON.parse(rowsKey);
+    setOpen(isOpenNuMetAfwijkingen(parsed, uitz));
+    const id = setInterval(() => setOpen(isOpenNuMetAfwijkingen(parsed, uitz)), 6e4);
     return () => clearInterval(id);
   }, [rowsKey]);
   if (open === null) return null;

package/dist/blocks/builtins/OpenNowBadge.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/OpenNowBadge.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { StatusDot } from \"@astryxdesign/core/StatusDot\";\nimport { isOpenNow, type HoursRow } from \"./lib/openingHours\";\n\n/**\n * \"Nu geopend / Nu gesloten\"-badge bij openingstijden. Client-only en pas ná mount berekend\n * (hydration-veilig: de servertijd kan afwijken van de bezoekerstijd). Toont niets wanneer de\n * rijen niet betrouwbaar te parsen zijn — liever geen badge dan een foute.\n */\nexport function OpenNowBadge({ rows }: { rows: HoursRow[] }) {\n  const [open, setOpen] = useState<boolean | null>(null);\n  // Op inhoud deppen, niet op referentie: de parent bouwt `rows` elke render opnieuw en zou de\n  // minuut-interval anders bij elke render resetten (badge die nooit ververst + effect-churn).\n  const rowsKey = JSON.stringify(rows);\n  useEffect(() => {\n    const parsed = JSON.parse(rowsKey) as HoursRow[];\n    setOpen(isOpenNow(parsed));\n    const id = setInterval(() => setOpen(isOpenNow(parsed)), 60_000);\n    return () => clearInterval(id);\n  }, [rowsKey]);\n  if (open === null) return null;\n  const label = open ? \"Nu geopend\" : \"Nu gesloten\";\n  return (\n    <span className=\"xicms-hours__badge\" data-open={open ? \"1\" : \"0\"}>\n      {/* De stip was een `●`-TEKEN in de tekst. Schermlezers lazen dat voor als \"zwarte cirkel\",\n          hij volgde de tekstkleur niet los en schaalde mee met de letterhoogte i.p.v. met het\n          thema. Astryx' StatusDot is een echt element met een eigen variant; `aria-hidden` omdat\n          de status er direct naast al in woorden staat — anders klinkt hij dubbel. */}\n      <StatusDot variant={open ? \"success\" : \"error\"} label={label} aria-hidden />\n      {label}\n    </span>\n  );\n}\n"],"mappings":";AAyBI,SAKE,KALF;AAvBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAC1B,SAAS,iBAAgC;AAOlC,SAAS,aAAa,EAAE,KAAK,GAAyB;AAC3D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAyB,IAAI;AAGrD,QAAM,UAAU,KAAK,UAAU,IAAI;AACnC,YAAU,MAAM;AACd,UAAM,SAAS,KAAK,MAAM,OAAO;AACjC,YAAQ,UAAU,MAAM,CAAC;AACzB,UAAM,KAAK,YAAY,MAAM,QAAQ,UAAU,MAAM,CAAC,GAAG,GAAM;AAC/D,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,OAAO,CAAC;AACZ,MAAI,SAAS,KAAM,QAAO;AAC1B,QAAM,QAAQ,OAAO,eAAe;AACpC,SACE,qBAAC,UAAK,WAAU,sBAAqB,aAAW,OAAO,MAAM,KAK3D;AAAA,wBAAC,aAAU,SAAS,OAAO,YAAY,SAAS,OAAc,eAAW,MAAC;AAAA,IACzE;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/OpenNowBadge.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { StatusDot } from \"@astryxdesign/core/StatusDot\";\nimport { type HoursRow } from \"./lib/openingHours\";\nimport { isOpenNuMetAfwijkingen } from \"../../bedrijf/bedrijf\";\nimport type { BusinessException } from \"../../schema/business\";\n\n/**\n * \"Nu geopend / Nu gesloten\"-badge bij openingstijden. Client-only en pas ná mount berekend\n * (hydration-veilig: de servertijd kan afwijken van de bezoekerstijd). Toont niets wanneer de\n * rijen niet betrouwbaar te parsen zijn — liever geen badge dan een foute.\n */\nexport function OpenNowBadge({ rows, afwijkingen }: { rows: HoursRow[]; /** 8.13: feestdagen/vakantie tellen mee. */ afwijkingen?: BusinessException[] }) {\n  const [open, setOpen] = useState<boolean | null>(null);\n  // Op inhoud deppen, niet op referentie: de parent bouwt `rows` elke render opnieuw en zou de\n  // minuut-interval anders bij elke render resetten (badge die nooit ververst + effect-churn).\n  const rowsKey = JSON.stringify([rows, afwijkingen ?? []]);\n  useEffect(() => {\n    const [parsed, uitz] = JSON.parse(rowsKey) as [HoursRow[], BusinessException[]];\n    setOpen(isOpenNuMetAfwijkingen(parsed, uitz));\n    const id = setInterval(() => setOpen(isOpenNuMetAfwijkingen(parsed, uitz)), 60_000);\n    return () => clearInterval(id);\n  }, [rowsKey]);\n  if (open === null) return null;\n  const label = open ? \"Nu geopend\" : \"Nu gesloten\";\n  return (\n    <span className=\"xicms-hours__badge\" data-open={open ? \"1\" : \"0\"}>\n      {/* De stip was een `●`-TEKEN in de tekst. Schermlezers lazen dat voor als \"zwarte cirkel\",\n          hij volgde de tekstkleur niet los en schaalde mee met de letterhoogte i.p.v. met het\n          thema. Astryx' StatusDot is een echt element met een eigen variant; `aria-hidden` omdat\n          de status er direct naast al in woorden staat — anders klinkt hij dubbel. */}\n      <StatusDot variant={open ? \"success\" : \"error\"} label={label} aria-hidden />\n      {label}\n    </span>\n  );\n}\n"],"mappings":";AA2BI,SAKE,KALF;AAzBJ,SAAS,WAAW,gBAAgB;AACpC,SAAS,iBAAiB;AAE1B,SAAS,8BAA8B;AAQhC,SAAS,aAAa,EAAE,MAAM,YAAY,GAAyG;AACxJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAyB,IAAI;AAGrD,QAAM,UAAU,KAAK,UAAU,CAAC,MAAM,eAAe,CAAC,CAAC,CAAC;AACxD,YAAU,MAAM;AACd,UAAM,CAAC,QAAQ,IAAI,IAAI,KAAK,MAAM,OAAO;AACzC,YAAQ,uBAAuB,QAAQ,IAAI,CAAC;AAC5C,UAAM,KAAK,YAAY,MAAM,QAAQ,uBAAuB,QAAQ,IAAI,CAAC,GAAG,GAAM;AAClF,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,OAAO,CAAC;AACZ,MAAI,SAAS,KAAM,QAAO;AAC1B,QAAM,QAAQ,OAAO,eAAe;AACpC,SACE,qBAAC,UAAK,WAAU,sBAAqB,aAAW,OAAO,MAAM,KAK3D;AAAA,wBAAC,aAAU,SAAS,OAAO,YAAY,SAAS,OAAc,eAAW,MAAC;AAAA,IACzE;AAAA,KACH;AAEJ;","names":[]}

package/dist/blocks/builtins/OpeningHoursRender.d.ts

@@ -2,6 +2,12 @@ import type { z } from "zod";
 import type { OpeningHoursBlockSchema } from "../../schema/blocks.js";
 import type { BlockRenderProps } from "../registry.js";
 type OpeningHours = z.infer<typeof OpeningHoursBlockSchema>;
-/** Openingstijden-tabel. Server-safe; de optionele "Nu geopend"-badge is een client-eiland. */
-export declare function OpeningHoursRender({ block }: BlockRenderProps<OpeningHours>): import("react").JSX.Element;
+/**
+ * Openingstijden-tabel; de optionele "Nu geopend"-badge is een client-eiland.
+ *
+ * 8.13: zonder eigen regels toont het blok de tijden uit het bedrijfsprofiel (Instellingen →
+ * Bedrijf) — één keer invullen, overal hetzelfde. Afwijkende dagen uit het profiel (feestdagen,
+ * vakantie) die binnenkort vallen, staan eronder, en tellen mee voor "nu geopend".
+ */
+export declare function OpeningHoursRender({ block, mode }: BlockRenderProps<OpeningHours>): import("react").JSX.Element | null;
 export {};

package/dist/blocks/builtins/OpeningHoursRender.js

@@ -1,18 +1,39 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { jsonLdHtml } from "./jsonld.js";
 import { Heading } from "../ui/index.js";
 import { OpenNowBadge } from "./OpenNowBadge.js";
 import { openingHoursSpecJsonLd } from "./lib/openingHours.js";
-function OpeningHoursRender({ block }) {
-  const rows = block.rows ?? [];
-  const spec = block.jsonLd ? openingHoursSpecJsonLd(rows) : [];
+import { useMergedSiteConfig } from "../../settings/useSiteSettings.js";
+import { afwijkingDatumTekst, komendeAfwijkingen } from "../../bedrijf/bedrijf.js";
+function OpeningHoursRender({ block, mode }) {
+  const business = useMergedSiteConfig().business;
+  const eigen = (block.rows ?? []).filter((r) => r.day.trim() || r.hours.trim());
+  const uitProfiel = eigen.length === 0;
+  const rows = uitProfiel ? business?.hours ?? [] : block.rows ?? [];
+  const afwijkingen = komendeAfwijkingen(business?.exceptions);
+  const spec = block.jsonLd && !uitProfiel ? openingHoursSpecJsonLd(rows) : [];
+  if (rows.length === 0 && afwijkingen.length === 0) {
+    return mode === "preview" ? /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Openingstijden: vul ze \xE9\xE9n keer in bij Instellingen \u2192 Bedrijf, of geef dit blok eigen regels." }) : null;
+  }
   return /* @__PURE__ */ jsxs("section", { className: "xicms-hours", children: [
     block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
-    block.showStatus && /* @__PURE__ */ jsx(OpenNowBadge, { rows }),
+    block.showStatus && /* @__PURE__ */ jsx(OpenNowBadge, { rows, afwijkingen: business?.exceptions }),
     /* @__PURE__ */ jsx("table", { className: "xicms-hours-table", children: /* @__PURE__ */ jsx("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("th", { scope: "row", "data-xicms-edit": `rows.${i}.day`, children: r.day }),
-      /* @__PURE__ */ jsx("td", { "data-xicms-edit": `rows.${i}.hours`, children: r.hours })
+      /* @__PURE__ */ jsx("th", { scope: "row", "data-xicms-edit": uitProfiel ? void 0 : `rows.${i}.day`, children: r.day }),
+      /* @__PURE__ */ jsx("td", { "data-xicms-edit": uitProfiel ? void 0 : `rows.${i}.hours`, children: r.hours })
     ] }, i)) }) }),
+    uitProfiel && business?.hoursNote && /* @__PURE__ */ jsx("p", { className: "xicms-hours__noot", children: business.hoursNote }),
+    afwijkingen.length > 0 && /* @__PURE__ */ jsxs("div", { className: "xicms-hours__afwijkend", role: "note", children: [
+      /* @__PURE__ */ jsx("strong", { children: "Aangepaste openingstijden" }),
+      /* @__PURE__ */ jsx("ul", { children: afwijkingen.map((a, i) => /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          afwijkingDatumTekst(a),
+          a.label ? ` (${a.label})` : ""
+        ] }),
+        /* @__PURE__ */ jsx("span", { children: a.hours })
+      ] }, i)) })
+    ] }),
     spec.length > 0 && /* @__PURE__ */ jsx(
       "script",
       {