@xiwebdesign/xicms-core 7.30.0 → 8.15.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Contact.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const contactBlock = defineBlock({\n  type: \"contact\",\n  Render: dynamic(() => import(\"./ContactRender\").then((m) => m.ContactRender)),\n  label: \"Contactgegevens\",\n  icon: \"📇\",\n  defaults: () => ({ heading: \"Contact\", jsonLd: true }),\n});\n\nexport const socialBlock = defineBlock({\n  type: \"social\",\n  Render: dynamic(() => import(\"./ContactRender\").then((m) => m.SocialRender)),\n  label: \"Social-links\",\n  icon: \"🔗\",\n  defaults: () => ({ items: [{ platform: \"Instagram\", href: \"\" }] }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AAAA,EAC5E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,SAAS,WAAW,QAAQ,KAAK;AACtD,CAAC;AAEM,MAAM,cAAc,YAAY;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC;AAAA,EAC3E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,CAAC,EAAE,UAAU,aAAa,MAAM,GAAG,CAAC,EAAE;AAClE,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Contact.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const contactBlock = defineBlock({\n  type: \"contact\",\n  Render: dynamic(() => import(\"./ContactRender\").then((m) => m.ContactRender)),\n  label: \"Contactgegevens\",\n  icon: \"📇\",\n  defaults: () => ({ heading: \"Contact\", jsonLd: true }),\n});\n\nexport const socialBlock = defineBlock({\n  type: \"social\",\n  Render: dynamic(() => import(\"./ContactRender\").then((m) => m.SocialRender)),\n  label: \"Sociale media\",\n  icon: \"🔗\",\n  defaults: () => ({ items: [{ platform: \"Instagram\", href: \"\" }] }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AAAA,EAC5E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,SAAS,WAAW,QAAQ,KAAK;AACtD,CAAC;AAEM,MAAM,cAAc,YAAY;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,iBAAiB,EAAE,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC;AAAA,EAC3E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,CAAC,EAAE,UAAU,aAAa,MAAM,GAAG,CAAC,EAAE;AAClE,CAAC;","names":[]}

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

@@ -3,7 +3,7 @@ import type { ContactBlockSchema, SocialBlockSchema } from "../../schema/blocks.
 import type { BlockRenderProps } from "../registry.js";
 type Contact = z.infer<typeof ContactBlockSchema>;
 export declare function contactJsonLd(b: Contact): Record<string, unknown>;
-export declare function ContactRender({ block }: BlockRenderProps<Contact>): import("react").JSX.Element;
+export declare function ContactRender({ block, mode }: BlockRenderProps<Contact>): import("react").JSX.Element | null;
 type Social = z.infer<typeof SocialBlockSchema>;
 export declare function SocialRender({ block }: BlockRenderProps<Social>): import("react").JSX.Element | null;
 export {};

package/dist/blocks/builtins/ContactRender.js

@@ -1,6 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { jsonLdHtml } from "./jsonld.js";
 import { Heading } from "../ui/index.js";
+import { useMergedSiteConfig } from "../../settings/useSiteSettings.js";
+import { adresRegels, routeLink, telLink } from "../../bedrijf/bedrijf.js";
 function contactJsonLd(b) {
   return {
     "@context": "https://schema.org",
@@ -16,21 +19,39 @@ function contactJsonLd(b) {
     ...b.geo ? { geo: { "@type": "GeoCoordinates", latitude: b.geo.lat, longitude: b.geo.lng } } : {}
   };
 }
-function ContactRender({ block }) {
+function ContactRender({ block, mode }) {
+  const b = useMergedSiteConfig().business;
+  const adres = block.address || adresRegels(b).join(", ");
+  const telefoon = block.phone || b?.phone;
+  const email = block.email || b?.email;
+  const route = !block.address ? routeLink(b) : void 0;
+  if (!adres && !telefoon && !email && !block.hours && !block.heading) {
+    return mode === "preview" ? /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Contact: vul je gegevens \xE9\xE9n keer in bij Instellingen \u2192 Bedrijf, of geef dit blok eigen gegevens." }) : null;
+  }
   return /* @__PURE__ */ jsxs("section", { className: "xicms-contact", children: [
     block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
     /* @__PURE__ */ jsxs("dl", { className: "xicms-contact__list", children: [
-      block.address && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
+      adres && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
         /* @__PURE__ */ jsx("dt", { children: "Adres" }),
-        /* @__PURE__ */ jsx("dd", { "data-xicms-edit": "address", children: block.address })
+        /* @__PURE__ */ jsxs("dd", { children: [
+          /* @__PURE__ */ jsx("span", { "data-xicms-edit": block.address ? "address" : void 0, children: adres }),
+          route && /* @__PURE__ */ jsxs(Fragment, { children: [
+            " \xB7 ",
+            /* @__PURE__ */ jsx("a", { href: route, target: "_blank", rel: "noopener noreferrer", children: "Route plannen" })
+          ] })
+        ] })
       ] }),
-      block.phone && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
+      telefoon && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
         /* @__PURE__ */ jsx("dt", { children: "Telefoon" }),
-        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `tel:${block.phone.replace(/\s+/g, "")}`, "data-xicms-edit": "phone", children: block.phone }) })
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: telLink(telefoon), "data-xicms-edit": block.phone ? "phone" : void 0, children: telefoon }) })
       ] }),
-      block.email && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
+      email && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
         /* @__PURE__ */ jsx("dt", { children: "E-mail" }),
-        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${block.email}`, "data-xicms-edit": "email", children: block.email }) })
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `mailto:${email}`, "data-xicms-edit": block.email ? "email" : void 0, children: email }) })
+      ] }),
+      !block.phone && b?.whatsapp && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
+        /* @__PURE__ */ jsx("dt", { children: "WhatsApp" }),
+        /* @__PURE__ */ jsx("dd", { children: /* @__PURE__ */ jsx("a", { href: `https://wa.me/${b.whatsapp.replace(/[^\d]/g, "")}`, target: "_blank", rel: "noopener noreferrer", children: b.whatsapp }) })
       ] }),
       block.hours && /* @__PURE__ */ jsxs("div", { className: "xicms-contact__row", children: [
         /* @__PURE__ */ jsx("dt", { children: "Openingstijden" }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/ContactRender.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { jsonLdHtml } from \"./jsonld\";\nimport type { ContactBlockSchema, SocialBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\n\n/* ── Contact ─────────────────────────────────────────────────────────────── */\ntype Contact = z.infer<typeof ContactBlockSchema>;\nexport function contactJsonLd(b: Contact): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"LocalBusiness\",\n    // Gedeeld relatief @id: contact-, openingstijden- en layout-JSON-LD beschrijven hetzelfde\n    // bedrijf; zonder @id ziet Google drie conflicterende LocalBusiness-entiteiten per pagina.\n    \"@id\": \"#business\",\n    // Bewust géén `name: heading` — de blokkop is meestal \"Contact\" en zou als bedrijfsnaam in de\n    // samengevoegde #business-entiteit belanden; de naam komt uit de layout-brede businessJsonLd.\n    ...(b.address ? { address: b.address } : {}),\n    ...(b.phone ? { telephone: b.phone } : {}),\n    ...(b.email ? { email: b.email } : {}),\n    ...(b.geo ? { geo: { \"@type\": \"GeoCoordinates\", latitude: b.geo.lat, longitude: b.geo.lng } } : {}),\n  };\n}\nexport function ContactRender({ block }: BlockRenderProps<Contact>) {\n  return (\n    <section className=\"xicms-contact\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <dl className=\"xicms-contact__list\">\n        {block.address && (\n          <div className=\"xicms-contact__row\">\n            <dt>Adres</dt>\n            <dd data-xicms-edit=\"address\">{block.address}</dd>\n          </div>\n        )}\n        {block.phone && (\n          <div className=\"xicms-contact__row\">\n            <dt>Telefoon</dt>\n            <dd><a href={`tel:${block.phone.replace(/\\s+/g, \"\")}`} data-xicms-edit=\"phone\">{block.phone}</a></dd>\n          </div>\n        )}\n        {block.email && (\n          <div className=\"xicms-contact__row\">\n            <dt>E-mail</dt>\n            <dd><a href={`mailto:${block.email}`} data-xicms-edit=\"email\">{block.email}</a></dd>\n          </div>\n        )}\n        {block.hours && (\n          <div className=\"xicms-contact__row\">\n            <dt>Openingstijden</dt>\n            <dd data-xicms-edit=\"hours\">{block.hours}</dd>\n          </div>\n        )}\n      </dl>\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: jsonLdHtml(contactJsonLd(block)) }}\n        />\n      )}\n    </section>\n  );\n}\n/* ── Social ──────────────────────────────────────────────────────────────── */\ntype Social = z.infer<typeof SocialBlockSchema>;\n\n/**\n * Minimalistische, monochrome merk-iconen (currentColor) — geen icon-dependency nodig.\n * Onbekende platformen vallen terug op de tekstweergave, dus niets breekt.\n */\nfunction SocialIcon({ platform }: { platform: string }) {\n  const p = platform.toLowerCase();\n  const common = { width: 22, height: 22, viewBox: \"0 0 24 24\", \"aria-hidden\": true } as const;\n  if (p.includes(\"instagram\")) {\n    return (\n      <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n        <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3.6\" />\n        <circle cx=\"16.7\" cy=\"7.3\" r=\"1.1\" fill=\"currentColor\" stroke=\"none\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"facebook\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <path d=\"M13.5 20v-6.2h2.1l.4-2.6h-2.5V9.6c0-.8.3-1.3 1.3-1.3h1.3V6c-.3 0-1-.1-1.9-.1-2 0-3.3 1.2-3.3 3.4v1.9H8.7v2.6h2.2V20h2.6z\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"linkedin\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <circle cx=\"6\" cy=\"6.4\" r=\"1.8\" />\n        <rect x=\"4.6\" y=\"9.6\" width=\"2.8\" height=\"9.9\" />\n        <path d=\"M10.4 9.6h2.7v1.4c.5-.9 1.6-1.7 3.1-1.7 2.4 0 3.7 1.5 3.7 4.3v5.9h-2.8v-5.4c0-1.5-.6-2.3-1.7-2.3-1.2 0-2.2.8-2.2 2.4v5.3h-2.8V9.6z\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"twitter\") || p === \"x\" || p.startsWith(\"x \") || p.includes(\"(x)\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <path d=\"M4.5 4.5h3.6l4.1 5.6 4.7-5.6h2.6l-6.1 7.2 6.4 8.4h-3.6l-4.4-6-5 6H4.2l6.5-7.7-6.2-7.9z\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"youtube\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <rect x=\"3.2\" y=\"6.2\" width=\"17.6\" height=\"11.6\" rx=\"3.2\" />\n        <path d=\"M10.4 9.4v5.2l4.8-2.6z\" fill=\"var(--xicms-surface, #fff)\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"whatsapp\")) {\n    return (\n      <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n        <path d=\"M12 4.2a7.8 7.8 0 0 0-6.7 11.8L4.4 19.6l3.7-.9A7.8 7.8 0 1 0 12 4.2z\" />\n        <path d=\"M9.3 8.9c.7 2.4 2.6 4.4 5 5l1-1.2 2 1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"tiktok\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <path d=\"M14.5 4h2.6c.2 1.7 1.3 3 3 3.3v2.6a6.6 6.6 0 0 1-3.2-1v5.7a5.4 5.4 0 1 1-5.4-5.4c.2 0 .5 0 .7.1v2.8a2.6 2.6 0 1 0 2.3 2.6V4z\" />\n      </svg>\n    );\n  }\n  return null;\n}\n\nexport function SocialRender({ block }: BlockRenderProps<Social>) {\n  const items = (block.items ?? []).filter((i) => i.href && i.platform);\n  if (items.length === 0) return null;\n  return (\n    <section className=\"xicms-social\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <ul className=\"xicms-social__list\">\n        {items.map((it, i) => {\n          // Als functie aangeroepen (geen hooks) zodat `null` echt null is — een JSX-element\n          // zou altijd truthy zijn en de tekst-fallback nooit tonen.\n          const icon = SocialIcon({ platform: it.platform });\n          return (\n            <li key={i}>\n              <a href={it.href} rel=\"noopener noreferrer\" target=\"_blank\" aria-label={it.platform} title={it.platform} className={icon ? \"xicms-social__iconlink\" : undefined}>\n                {icon ?? <span data-xicms-edit={`items.${i}.platform`}>{it.platform}</span>}\n              </a>\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/ContactRender.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { jsonLdHtml } from \"./jsonld\";\nimport type { ContactBlockSchema, SocialBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\nimport { useMergedSiteConfig } from \"../../settings/useSiteSettings\";\nimport { adresRegels, routeLink, telLink } from \"../../bedrijf/bedrijf\";\n\n/* ── Contact ─────────────────────────────────────────────────────────────── */\ntype Contact = z.infer<typeof ContactBlockSchema>;\nexport function contactJsonLd(b: Contact): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"LocalBusiness\",\n    // Gedeeld relatief @id: contact-, openingstijden- en layout-JSON-LD beschrijven hetzelfde\n    // bedrijf; zonder @id ziet Google drie conflicterende LocalBusiness-entiteiten per pagina.\n    \"@id\": \"#business\",\n    // Bewust géén `name: heading` — de blokkop is meestal \"Contact\" en zou als bedrijfsnaam in de\n    // samengevoegde #business-entiteit belanden; de naam komt uit de layout-brede businessJsonLd.\n    ...(b.address ? { address: b.address } : {}),\n    ...(b.phone ? { telephone: b.phone } : {}),\n    ...(b.email ? { email: b.email } : {}),\n    ...(b.geo ? { geo: { \"@type\": \"GeoCoordinates\", latitude: b.geo.lat, longitude: b.geo.lng } } : {}),\n  };\n}\nexport function ContactRender({ block, mode }: BlockRenderProps<Contact>) {\n  /**\n   * 8.13: een leeg veld valt terug op het bedrijfsprofiel (Instellingen → Bedrijf). Een eigen\n   * waarde in het blok wint en blijft op de pagina bewerkbaar; een waarde uit het profiel niet\n   * (dan zou je hier iets wijzigen dat elders blijft staan).\n   */\n  const b = useMergedSiteConfig().business;\n  const adres = block.address || adresRegels(b).join(\", \");\n  const telefoon = block.phone || b?.phone;\n  const email = block.email || b?.email;\n  const route = !block.address ? routeLink(b) : undefined;\n  if (!adres && !telefoon && !email && !block.hours && !block.heading) {\n    return mode === \"preview\" ? <p className=\"xicms-ve__hint\">Contact: vul je gegevens één keer in bij Instellingen → Bedrijf, of geef dit blok eigen gegevens.</p> : null;\n  }\n  return (\n    <section className=\"xicms-contact\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <dl className=\"xicms-contact__list\">\n        {adres && (\n          <div className=\"xicms-contact__row\">\n            <dt>Adres</dt>\n            <dd>\n              <span data-xicms-edit={block.address ? \"address\" : undefined}>{adres}</span>\n              {route && (\n                <>\n                  {\" · \"}\n                  <a href={route} target=\"_blank\" rel=\"noopener noreferrer\">Route plannen</a>\n                </>\n              )}\n            </dd>\n          </div>\n        )}\n        {telefoon && (\n          <div className=\"xicms-contact__row\">\n            <dt>Telefoon</dt>\n            <dd><a href={telLink(telefoon)} data-xicms-edit={block.phone ? \"phone\" : undefined}>{telefoon}</a></dd>\n          </div>\n        )}\n        {email && (\n          <div className=\"xicms-contact__row\">\n            <dt>E-mail</dt>\n            <dd><a href={`mailto:${email}`} data-xicms-edit={block.email ? \"email\" : undefined}>{email}</a></dd>\n          </div>\n        )}\n        {!block.phone && b?.whatsapp && (\n          <div className=\"xicms-contact__row\">\n            <dt>WhatsApp</dt>\n            <dd><a href={`https://wa.me/${b.whatsapp.replace(/[^\\d]/g, \"\")}`} target=\"_blank\" rel=\"noopener noreferrer\">{b.whatsapp}</a></dd>\n          </div>\n        )}\n        {block.hours && (\n          <div className=\"xicms-contact__row\">\n            <dt>Openingstijden</dt>\n            <dd data-xicms-edit=\"hours\">{block.hours}</dd>\n          </div>\n        )}\n      </dl>\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: jsonLdHtml(contactJsonLd(block)) }}\n        />\n      )}\n    </section>\n  );\n}\n/* ── Social ──────────────────────────────────────────────────────────────── */\ntype Social = z.infer<typeof SocialBlockSchema>;\n\n/**\n * Minimalistische, monochrome merk-iconen (currentColor) — geen icon-dependency nodig.\n * Onbekende platformen vallen terug op de tekstweergave, dus niets breekt.\n */\nfunction SocialIcon({ platform }: { platform: string }) {\n  const p = platform.toLowerCase();\n  const common = { width: 22, height: 22, viewBox: \"0 0 24 24\", \"aria-hidden\": true } as const;\n  if (p.includes(\"instagram\")) {\n    return (\n      <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n        <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"4.5\" />\n        <circle cx=\"12\" cy=\"12\" r=\"3.6\" />\n        <circle cx=\"16.7\" cy=\"7.3\" r=\"1.1\" fill=\"currentColor\" stroke=\"none\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"facebook\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <path d=\"M13.5 20v-6.2h2.1l.4-2.6h-2.5V9.6c0-.8.3-1.3 1.3-1.3h1.3V6c-.3 0-1-.1-1.9-.1-2 0-3.3 1.2-3.3 3.4v1.9H8.7v2.6h2.2V20h2.6z\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"linkedin\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <circle cx=\"6\" cy=\"6.4\" r=\"1.8\" />\n        <rect x=\"4.6\" y=\"9.6\" width=\"2.8\" height=\"9.9\" />\n        <path d=\"M10.4 9.6h2.7v1.4c.5-.9 1.6-1.7 3.1-1.7 2.4 0 3.7 1.5 3.7 4.3v5.9h-2.8v-5.4c0-1.5-.6-2.3-1.7-2.3-1.2 0-2.2.8-2.2 2.4v5.3h-2.8V9.6z\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"twitter\") || p === \"x\" || p.startsWith(\"x \") || p.includes(\"(x)\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <path d=\"M4.5 4.5h3.6l4.1 5.6 4.7-5.6h2.6l-6.1 7.2 6.4 8.4h-3.6l-4.4-6-5 6H4.2l6.5-7.7-6.2-7.9z\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"youtube\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <rect x=\"3.2\" y=\"6.2\" width=\"17.6\" height=\"11.6\" rx=\"3.2\" />\n        <path d=\"M10.4 9.4v5.2l4.8-2.6z\" fill=\"var(--xicms-surface, #fff)\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"whatsapp\")) {\n    return (\n      <svg {...common} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.8\">\n        <path d=\"M12 4.2a7.8 7.8 0 0 0-6.7 11.8L4.4 19.6l3.7-.9A7.8 7.8 0 1 0 12 4.2z\" />\n        <path d=\"M9.3 8.9c.7 2.4 2.6 4.4 5 5l1-1.2 2 1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      </svg>\n    );\n  }\n  if (p.includes(\"tiktok\")) {\n    return (\n      <svg {...common} fill=\"currentColor\">\n        <path d=\"M14.5 4h2.6c.2 1.7 1.3 3 3 3.3v2.6a6.6 6.6 0 0 1-3.2-1v5.7a5.4 5.4 0 1 1-5.4-5.4c.2 0 .5 0 .7.1v2.8a2.6 2.6 0 1 0 2.3 2.6V4z\" />\n      </svg>\n    );\n  }\n  return null;\n}\n\nexport function SocialRender({ block }: BlockRenderProps<Social>) {\n  const items = (block.items ?? []).filter((i) => i.href && i.platform);\n  if (items.length === 0) return null;\n  return (\n    <section className=\"xicms-social\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <ul className=\"xicms-social__list\">\n        {items.map((it, i) => {\n          // Als functie aangeroepen (geen hooks) zodat `null` echt null is — een JSX-element\n          // zou altijd truthy zijn en de tekst-fallback nooit tonen.\n          const icon = SocialIcon({ platform: it.platform });\n          return (\n            <li key={i}>\n              <a href={it.href} rel=\"noopener noreferrer\" target=\"_blank\" aria-label={it.platform} title={it.platform} className={icon ? \"xicms-social__iconlink\" : undefined}>\n                {icon ?? <span data-xicms-edit={`items.${i}.platform`}>{it.platform}</span>}\n              </a>\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/builtins/Cta.js

@@ -4,7 +4,7 @@ const ctaBlock = defineBlock({
   type: "cta",
   fields: { buttonVariant: { type: "select", options: [{ value: "primary", label: "Primair" }, { value: "secondary", label: "Secundair" }, { value: "outline", label: "Outline" }] } },
   Render: dynamic(() => import("./CtaRender.js").then((m) => m.CtaRender)),
-  label: "Call-to-action",
+  label: "Oproep met knop",
   icon: "\u{1F4E3}",
   defaults: () => ({ title: "Klaar om te starten?", buttonLabel: "Neem contact op", buttonHref: "#contact", buttonVariant: "primary" })
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Cta.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const ctaBlock = defineBlock({\n  type: \"cta\",\n  fields: { buttonVariant: { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n  Render: dynamic(() => import(\"./CtaRender\").then((m) => m.CtaRender)),\n  label: \"Call-to-action\",\n  icon: \"📣\",\n  defaults: () => ({ title: \"Klaar om te starten?\", buttonLabel: \"Neem contact op\", buttonHref: \"#contact\", buttonVariant: \"primary\" }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,WAAW,YAAY;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,WAAW,OAAO,UAAU,GAAG,EAAE,OAAO,aAAa,OAAO,YAAY,GAAG,EAAE,OAAO,WAAW,OAAO,UAAU,CAAC,EAAE,EAAE;AAAA,EACnL,QAAQ,QAAQ,MAAM,OAAO,aAAa,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,EACpE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,wBAAwB,aAAa,mBAAmB,YAAY,YAAY,eAAe,UAAU;AACrI,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Cta.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const ctaBlock = defineBlock({\n  type: \"cta\",\n  fields: { buttonVariant: { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n  Render: dynamic(() => import(\"./CtaRender\").then((m) => m.CtaRender)),\n  label: \"Oproep met knop\",\n  icon: \"📣\",\n  defaults: () => ({ title: \"Klaar om te starten?\", buttonLabel: \"Neem contact op\", buttonHref: \"#contact\", buttonVariant: \"primary\" }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,WAAW,YAAY;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,WAAW,OAAO,UAAU,GAAG,EAAE,OAAO,aAAa,OAAO,YAAY,GAAG,EAAE,OAAO,WAAW,OAAO,UAAU,CAAC,EAAE,EAAE;AAAA,EACnL,QAAQ,QAAQ,MAAM,OAAO,aAAa,EAAE,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,EACpE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,wBAAwB,aAAa,mBAAmB,YAAY,YAAY,eAAe,UAAU;AACrI,CAAC;","names":[]}

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

@@ -2,5 +2,5 @@ import type { z } from "zod";
 import type { CtaBlockSchema } from "../../schema/blocks.js";
 import type { BlockRenderProps } from "../registry.js";
 type Cta = z.infer<typeof CtaBlockSchema>;
-export declare function CtaRender({ block }: BlockRenderProps<Cta>): import("react").JSX.Element;
+export declare function CtaRender({ block, mode }: BlockRenderProps<Cta>): import("react").JSX.Element;
 export {};

package/dist/blocks/builtins/CtaRender.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { VStack, HStack, Card, Heading, Text, Btn } from "../ui/index.js";
-function CtaRender({ block }) {
+function CtaRender({ block, mode }) {
+  const toon = (label) => Boolean(label?.trim()) || mode === "preview";
   if (block.sticky) {
     return /* @__PURE__ */ jsxs(
       HStack,
@@ -14,7 +15,7 @@ function CtaRender({ block }) {
         style: { position: "sticky", bottom: 0, zIndex: 30, padding: "0.75rem 1rem", background: "var(--color-background-card)", borderTop: "1px solid var(--color-border)", flexWrap: "wrap" },
         children: [
           /* @__PURE__ */ jsx(Text, { weight: "bold", children: block.title || block.text }),
-          /* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, size: "md", editField: "buttonLabel" })
+          toon(block.buttonLabel) && /* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, size: "md", editField: "buttonLabel" })
         ]
       }
     );
@@ -29,8 +30,8 @@ function CtaRender({ block }) {
         block.title && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "title", children: block.title }),
         block.text && /* @__PURE__ */ jsx(Text, { type: "large", color: "secondary", "data-xicms-edit": "text", children: block.text }),
         /* @__PURE__ */ jsxs(HStack, { gap: 2, hAlign: "center", style: { flexWrap: "wrap" }, children: [
-          /* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, editField: "buttonLabel" }),
-          block.button2Label && /* @__PURE__ */ jsx(Btn, { label: block.button2Label, href: block.button2Href ?? "#", variant: "outline", editField: "button2Label" })
+          toon(block.buttonLabel) && /* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref, variant: block.buttonVariant, editField: "buttonLabel" }),
+          block.button2Label?.trim() && /* @__PURE__ */ jsx(Btn, { label: block.button2Label, href: block.button2Href ?? "#", variant: "outline", editField: "button2Label" })
         ] })
       ] })
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/CtaRender.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport type { CtaBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Cta = z.infer<typeof CtaBlockSchema>;\n\nexport function CtaRender({ block }: BlockRenderProps<Cta>) {\n  if (block.sticky) {\n    return (\n      <HStack\n        gap={3}\n        vAlign=\"center\"\n        hAlign=\"between\"\n        role=\"region\"\n        aria-label={block.title || \"Call-to-action\"}\n        style={{ position: \"sticky\", bottom: 0, zIndex: 30, padding: \"0.75rem 1rem\", background: \"var(--color-background-card)\", borderTop: \"1px solid var(--color-border)\", flexWrap: \"wrap\" }}\n      >\n        <Text weight=\"bold\">{block.title || block.text}</Text>\n        <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} size=\"md\" editField=\"buttonLabel\" />\n      </HStack>\n    );\n  }\n  return (\n    <Card\n      padding={6}\n      variant={block.backgroundColor ? \"default\" : \"muted\"}\n      style={block.backgroundColor ? { background: block.backgroundColor } : undefined}\n    >\n      <VStack gap={3} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n        {block.title && <Heading level={2} data-xicms-edit=\"title\">{block.title}</Heading>}\n        {block.text && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"text\">{block.text}</Text>}\n        <HStack gap={2} hAlign=\"center\" style={{ flexWrap: \"wrap\" }}>\n          <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} editField=\"buttonLabel\" />\n          {block.button2Label && (\n            <Btn label={block.button2Label} href={block.button2Href ?? \"#\"} variant=\"outline\" editField=\"button2Label\" />\n          )}\n        </HStack>\n      </VStack>\n    </Card>\n  );\n}\n"],"mappings":";AAYM,SAQE,KARF;AAPN,SAAS,QAAQ,QAAQ,MAAM,SAAS,MAAM,WAAW;AAIlD,SAAS,UAAU,EAAE,MAAM,GAA0B;AAC1D,MAAI,MAAM,QAAQ;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,QAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAY,MAAM,SAAS;AAAA,QAC3B,OAAO,EAAE,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,SAAS,gBAAgB,YAAY,gCAAgC,WAAW,iCAAiC,UAAU,OAAO;AAAA,QAEtL;AAAA,8BAAC,QAAK,QAAO,QAAQ,gBAAM,SAAS,MAAM,MAAK;AAAA,UAC/C,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,MAAK,MAAK,WAAU,eAAc;AAAA;AAAA;AAAA,IACzH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,SAAS,MAAM,kBAAkB,YAAY;AAAA,MAC7C,OAAO,MAAM,kBAAkB,EAAE,YAAY,MAAM,gBAAgB,IAAI;AAAA,MAEvE,+BAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,cAAM,SAAS,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,SAAS,gBAAM,OAAM;AAAA,QACvE,MAAM,QAAQ,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,QACvF,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,UAAU,OAAO,GACxD;AAAA,8BAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,WAAU,eAAc;AAAA,UAC5G,MAAM,gBACL,oBAAC,OAAI,OAAO,MAAM,cAAc,MAAM,MAAM,eAAe,KAAK,SAAQ,WAAU,WAAU,gBAAe;AAAA,WAE/G;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/CtaRender.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport type { CtaBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Cta = z.infer<typeof CtaBlockSchema>;\n\nexport function CtaRender({ block, mode }: BlockRenderProps<Cta>) {\n  // 8.10: een knop zonder tekst is voor bezoekers een leeg vlakje. In de editor blijft hij staan,\n  // anders kun je hem op de pagina niet meer invullen.\n  const toon = (label?: string) => Boolean(label?.trim()) || mode === \"preview\";\n  if (block.sticky) {\n    return (\n      <HStack\n        gap={3}\n        vAlign=\"center\"\n        hAlign=\"between\"\n        role=\"region\"\n        aria-label={block.title || \"Call-to-action\"}\n        style={{ position: \"sticky\", bottom: 0, zIndex: 30, padding: \"0.75rem 1rem\", background: \"var(--color-background-card)\", borderTop: \"1px solid var(--color-border)\", flexWrap: \"wrap\" }}\n      >\n        <Text weight=\"bold\">{block.title || block.text}</Text>\n        {toon(block.buttonLabel) && <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} size=\"md\" editField=\"buttonLabel\" />}\n      </HStack>\n    );\n  }\n  return (\n    <Card\n      padding={6}\n      variant={block.backgroundColor ? \"default\" : \"muted\"}\n      style={block.backgroundColor ? { background: block.backgroundColor } : undefined}\n    >\n      <VStack gap={3} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n        {block.title && <Heading level={2} data-xicms-edit=\"title\">{block.title}</Heading>}\n        {block.text && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"text\">{block.text}</Text>}\n        <HStack gap={2} hAlign=\"center\" style={{ flexWrap: \"wrap\" }}>\n          {toon(block.buttonLabel) && <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} editField=\"buttonLabel\" />}\n          {block.button2Label?.trim() && (\n            <Btn label={block.button2Label} href={block.button2Href ?? \"#\"} variant=\"outline\" editField=\"button2Label\" />\n          )}\n        </HStack>\n      </VStack>\n    </Card>\n  );\n}\n"],"mappings":";AAeM,SAQE,KARF;AAVN,SAAS,QAAQ,QAAQ,MAAM,SAAS,MAAM,WAAW;AAIlD,SAAS,UAAU,EAAE,OAAO,KAAK,GAA0B;AAGhE,QAAM,OAAO,CAAC,UAAmB,QAAQ,OAAO,KAAK,CAAC,KAAK,SAAS;AACpE,MAAI,MAAM,QAAQ;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,QAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAY,MAAM,SAAS;AAAA,QAC3B,OAAO,EAAE,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,SAAS,gBAAgB,YAAY,gCAAgC,WAAW,iCAAiC,UAAU,OAAO;AAAA,QAEtL;AAAA,8BAAC,QAAK,QAAO,QAAQ,gBAAM,SAAS,MAAM,MAAK;AAAA,UAC9C,KAAK,MAAM,WAAW,KAAK,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,MAAK,MAAK,WAAU,eAAc;AAAA;AAAA;AAAA,IACrJ;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,SAAS,MAAM,kBAAkB,YAAY;AAAA,MAC7C,OAAO,MAAM,kBAAkB,EAAE,YAAY,MAAM,gBAAgB,IAAI;AAAA,MAEvE,+BAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,cAAM,SAAS,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,SAAS,gBAAM,OAAM;AAAA,QACvE,MAAM,QAAQ,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,QACvF,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,UAAU,OAAO,GACvD;AAAA,eAAK,MAAM,WAAW,KAAK,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,WAAU,eAAc;AAAA,UACxI,MAAM,cAAc,KAAK,KACxB,oBAAC,OAAI,OAAO,MAAM,cAAc,MAAM,MAAM,eAAe,KAAK,SAAQ,WAAU,WAAU,gBAAe;AAAA,WAE/G;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/blocks/builtins/Embed.js

@@ -3,7 +3,7 @@ import { defineBlock } from "../registry.js";
 const embedBlock = defineBlock({
   type: "embed",
   Render: dynamic(() => import("./EmbedRender.js").then((m) => m.EmbedRender)),
-  label: "Embed (iframe)",
+  label: "Externe inhoud (insluiten)",
   icon: "\u{1F9E9}",
   defaults: () => ({ url: "", height: 420, consentGated: true })
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Embed.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const embedBlock = defineBlock({\n  type: \"embed\",\n  Render: dynamic(() => import(\"./EmbedRender\").then((m) => m.EmbedRender)),\n  label: \"Embed (iframe)\",\n  icon: \"🧩\",\n  defaults: () => ({ url: \"\", height: 420, consentGated: true }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,eAAe,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC;AAAA,EACxE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,KAAK,IAAI,QAAQ,KAAK,cAAc,KAAK;AAC9D,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Embed.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const embedBlock = defineBlock({\n  type: \"embed\",\n  Render: dynamic(() => import(\"./EmbedRender\").then((m) => m.EmbedRender)),\n  label: \"Externe inhoud (insluiten)\",\n  icon: \"🧩\",\n  defaults: () => ({ url: \"\", height: 420, consentGated: true }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,eAAe,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC;AAAA,EACxE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,KAAK,IAAI,QAAQ,KAAK,cAAc,KAAK;AAC9D,CAAC;","names":[]}

package/dist/blocks/builtins/FormBlock.js

@@ -5,6 +5,7 @@ const formBlock = defineBlock({
   Render: dynamic(() => import("./FormBlockRender.js").then((m) => m.FormRender)),
   label: "Formulier",
   icon: "\u2709\uFE0F",
+  essentieel: "Bezoekers kunnen dit formulier dan niet meer invullen; je ontvangt geen berichten meer via deze pagina.",
   defaults: () => ({ formId: "" })
 });
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/FormBlock.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const formBlock = defineBlock({\n  type: \"form\",\n  Render: dynamic(() => import(\"./FormBlockRender\").then((m) => m.FormRender)),\n  label: \"Formulier\",\n  icon: \"✉️\",\n  defaults: () => ({ formId: \"\" }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,YAAY,YAAY;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,mBAAmB,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC;AAAA,EAC3E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,QAAQ,GAAG;AAChC,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/FormBlock.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const formBlock = defineBlock({\n  type: \"form\",\n  Render: dynamic(() => import(\"./FormBlockRender\").then((m) => m.FormRender)),\n  label: \"Formulier\",\n  icon: \"✉️\",\n  essentieel: \"Bezoekers kunnen dit formulier dan niet meer invullen; je ontvangt geen berichten meer via deze pagina.\",\n  defaults: () => ({ formId: \"\" }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,YAAY,YAAY;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,mBAAmB,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC;AAAA,EAC3E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,UAAU,OAAO,EAAE,QAAQ,GAAG;AAChC,CAAC;","names":[]}

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

@@ -2,5 +2,11 @@ import type { z } from "zod";
 import type { FormBlockSchema } from "../../schema/blocks.js";
 import type { BlockRenderProps } from "../registry.js";
 type FormBlk = z.infer<typeof FormBlockSchema>;
+/** Voorbeeldformulier voor de demo wanneer er geen specifieke definitie is geregistreerd. */
+/**
+ * Een begrijpelijke melding per oorzaak (8.1). Eerst kreeg de bezoeker bij élke fout "Versturen
+ * mislukt", ook als hij alleen een verplicht veld vergat of te vaak verstuurde.
+ */
+export declare function foutmeldingVoor(err: unknown): string;
 export declare function FormRender({ block, siteId, mode }: BlockRenderProps<FormBlk>): import("react").JSX.Element;
 export {};

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":";AA2FM,cACE,YADF;AAzFN,SAAS,WAAW,UAA2B,cAAa;AAK5D,SAAS,oBAAoB;AAC7B,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,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,QAAQ,MAAM,SAAS,YAAY;AAK5C,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,aAA6C,OAAO;AACxE,QAAM,YAAY,cAAc,MAAM,MAAM,KAAK;AACjD,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;AAEf,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,SAAS,CAAC;AAEpD,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;AAE9B,UAAI,KAAK,iBAAiB;AACxB,eAAO,SAAS,OAAO,IAAI,eAAe;AAC1C;AAAA,MACF;AACA,gBAAU,IAAI;AACd,gBAAU,CAAC,CAAC;AAAA,IACd,QAAQ;AACN,gBAAU,OAAO;AACjB,eAAS,+CAA+C;AAAA,IAC1D;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;AAElG,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,OAAO;AAAA,YAAI,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,CAAC;AAAA;AAAA,UAD/B,EAAE;AAAA,QACgC;AAAA,MAErD;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;AACtB,eACE,qBAAC,cAAsB,WAAU,sBAC/B;AAAA,+BAAC,YAAQ;AAAA,cAAE;AAAA,YAAO,EAAE,YAAY;AAAA,aAAK;AAAA,WACnC,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC,QACtB,qBAAC,WAAgB,WAAU,qBACzB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAM,EAAE;AAAA,gBACR,OAAO;AAAA,gBACP,UAAU,EAAE;AAAA,gBACZ,SAAS,OAAO;AAAA,gBAChB,UAAU,MAAM,OAAO,EAAE,MAAM,GAAG;AAAA;AAAA,YACpC;AAAA,YACC;AAAA,eATS,GAUZ,CACD;AAAA,aAdY,EAAE,IAejB;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,aAAa,EAAE;AAAA,cACf,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK;AAAA;AAAA,UAChD;AAAA,aATU,EAAE,IAUd;AAAA,MAEJ;AACA,aACE;AAAA,QAAC;AAAA;AAAA,UAAuB,OAAO,EAAE;AAAA,UAAO,MAAM,EAAE,SAAS,UAAU,UAAU;AAAA,UAC3E,YAAY,EAAE;AAAA,UAAU,aAAa,EAAE;AAAA,UACvC,OAAO;AAAA,UAAI,UAAU,CAAC,MAAM,OAAO,EAAE,MAAM,CAAC;AAAA;AAAA,QAF9B,EAAE;AAAA,MAE+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":[]}
+{"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":"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","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 })
               ]
             }