@xiwebdesign/xicms-core 7.14.0 → 7.15.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/BeforeAfter.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { z } from \"zod\";\nimport type { BeforeAfterBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\n\ntype BeforeAfter = z.infer<typeof BeforeAfterBlockSchema>;\n\n/**\n * Voor/na-vergelijker: het \"na\"-beeld wordt geclipt op de sleppositie. De greep is een échte\n * range-input (over de hele breedte, transparant) — slepen, klikken én pijltjestoetsen werken\n * daarmee gratis en toegankelijk (aria-label + waarde in %).\n */\nfunction BeforeAfterRender({ block }: BlockRenderProps<BeforeAfter>) {\n  const [pos, setPos] = useState(50);\n  if (!block.beforeUrl || !block.afterUrl) return null;\n  return (\n    <figure className=\"xicms-beforeafter\" style={{ aspectRatio: block.aspectRatio.replace(\"/\", \" / \") }}>\n      {block.heading && <figcaption className=\"xicms-beforeafter__heading\" data-xicms-edit=\"heading\">{block.heading}</figcaption>}\n      <div className=\"xicms-beforeafter__stage\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img className=\"xicms-beforeafter__img\" src={block.beforeUrl} alt={block.alt || block.beforeLabel} loading=\"lazy\" />\n        <div className=\"xicms-beforeafter__clip\" style={{ clipPath: `inset(0 0 0 ${pos}%)` }} aria-hidden>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img className=\"xicms-beforeafter__img\" src={block.afterUrl} alt=\"\" loading=\"lazy\" />\n        </div>\n        <div className=\"xicms-beforeafter__divider\" style={{ left: `${pos}%` }} aria-hidden>\n          <span className=\"xicms-beforeafter__handle\">⟨⟩</span>\n        </div>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--before\" data-xicms-edit=\"beforeLabel\">{block.beforeLabel}</span>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--after\" data-xicms-edit=\"afterLabel\">{block.afterLabel}</span>\n        <input\n          className=\"xicms-beforeafter__range\"\n          type=\"range\"\n          min={0}\n          max={100}\n          value={pos}\n          onChange={(e) => setPos(Number(e.target.value))}\n          aria-label={`Vergelijk ${block.beforeLabel} en ${block.afterLabel}`}\n          aria-valuetext={`${pos}% ${block.afterLabel}`}\n        />\n      </div>\n    </figure>\n  );\n}\n\nexport const beforeAfterBlock = defineBlock({\n  type: \"beforeAfter\",\n  fields: { beforeUrl: { type: \"image\" }, afterUrl: { type: \"image\" } },\n  Render: BeforeAfterRender,\n  label: \"Voor / na\",\n  icon: \"🔀\",\n  defaults: () => ({ beforeUrl: \"\", afterUrl: \"\", beforeLabel: \"Voor\", afterLabel: \"Na\", aspectRatio: \"4/3\" }),\n});\n"],"mappings":";AAmBwB,cAClB,YADkB;AAjBxB,SAAS,gBAAgB;AAGzB,SAAS,mBAA0C;AASnD,SAAS,kBAAkB,EAAE,MAAM,GAAkC;AACnE,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,MAAI,CAAC,MAAM,aAAa,CAAC,MAAM,SAAU,QAAO;AAChD,SACE,qBAAC,YAAO,WAAU,qBAAoB,OAAO,EAAE,aAAa,MAAM,YAAY,QAAQ,KAAK,KAAK,EAAE,GAC/F;AAAA,UAAM,WAAW,oBAAC,gBAAW,WAAU,8BAA6B,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9G,qBAAC,SAAI,WAAU,4BAEb;AAAA,0BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,WAAW,KAAK,MAAM,OAAO,MAAM,aAAa,SAAQ,QAAO;AAAA,MAClH,oBAAC,SAAI,WAAU,2BAA0B,OAAO,EAAE,UAAU,eAAe,GAAG,KAAK,GAAG,eAAW,MAE/F,8BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,UAAU,KAAI,IAAG,SAAQ,QAAO,GACrF;AAAA,MACA,oBAAC,SAAI,WAAU,8BAA6B,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,GAAG,eAAW,MACjF,8BAAC,UAAK,WAAU,6BAA4B,0BAAE,GAChD;AAAA,MACA,oBAAC,UAAK,WAAU,6DAA4D,mBAAgB,eAAe,gBAAM,aAAY;AAAA,MAC7H,oBAAC,UAAK,WAAU,4DAA2D,mBAAgB,cAAc,gBAAM,YAAW;AAAA,MAC1H;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,OAAO,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UAC9C,cAAY,aAAa,MAAM,WAAW,OAAO,MAAM,UAAU;AAAA,UACjE,kBAAgB,GAAG,GAAG,KAAK,MAAM,UAAU;AAAA;AAAA,MAC7C;AAAA,OACF;AAAA,KACF;AAEJ;AAEO,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,GAAG,UAAU,EAAE,MAAM,QAAQ,EAAE;AAAA,EACpE,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,WAAW,IAAI,UAAU,IAAI,aAAa,QAAQ,YAAY,MAAM,aAAa,MAAM;AAC5G,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/BeforeAfter.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const beforeAfterBlock = defineBlock({\n  type: \"beforeAfter\",\n  fields: { beforeUrl: { type: \"image\" }, afterUrl: { type: \"image\" } },\n  Render: dynamic(() => import(\"./BeforeAfterRender\").then((m) => m.BeforeAfterRender)),\n  label: \"Voor / na\",\n  icon: \"🔀\",\n  defaults: () => ({ beforeUrl: \"\", afterUrl: \"\", beforeLabel: \"Voor\", afterLabel: \"Na\", aspectRatio: \"4/3\" }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,GAAG,UAAU,EAAE,MAAM,QAAQ,EAAE;AAAA,EACpE,QAAQ,QAAQ,MAAM,OAAO,qBAAqB,EAAE,KAAK,CAAC,MAAM,EAAE,iBAAiB,CAAC;AAAA,EACpF,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,WAAW,IAAI,UAAU,IAAI,aAAa,QAAQ,YAAY,MAAM,aAAa,MAAM;AAC5G,CAAC;","names":[]}

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

@@ -0,0 +1,11 @@
+import type { z } from "zod";
+import type { BeforeAfterBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type BeforeAfter = z.infer<typeof BeforeAfterBlockSchema>;
+/**
+ * Voor/na-vergelijker: het "na"-beeld wordt geclipt op de sleppositie. De greep is een échte
+ * range-input (over de hele breedte, transparant) — slepen, klikken én pijltjestoetsen werken
+ * daarmee gratis en toegankelijk (aria-label + waarde in %).
+ */
+export declare function BeforeAfterRender({ block }: BlockRenderProps<BeforeAfter>): import("react").JSX.Element | null;
+export {};

package/dist/blocks/builtins/BeforeAfterRender.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+function BeforeAfterRender({ block }) {
+  const [pos, setPos] = useState(50);
+  if (!block.beforeUrl || !block.afterUrl) return null;
+  return /* @__PURE__ */ jsxs("figure", { className: "xicms-beforeafter", style: { aspectRatio: block.aspectRatio.replace("/", " / ") }, children: [
+    block.heading && /* @__PURE__ */ jsx("figcaption", { className: "xicms-beforeafter__heading", "data-xicms-edit": "heading", children: block.heading }),
+    /* @__PURE__ */ jsxs("div", { className: "xicms-beforeafter__stage", children: [
+      /* @__PURE__ */ jsx("img", { className: "xicms-beforeafter__img", src: block.beforeUrl, alt: block.alt || block.beforeLabel, loading: "lazy" }),
+      /* @__PURE__ */ jsx("div", { className: "xicms-beforeafter__clip", style: { clipPath: `inset(0 0 0 ${pos}%)` }, "aria-hidden": true, children: /* @__PURE__ */ jsx("img", { className: "xicms-beforeafter__img", src: block.afterUrl, alt: "", loading: "lazy" }) }),
+      /* @__PURE__ */ jsx("div", { className: "xicms-beforeafter__divider", style: { left: `${pos}%` }, "aria-hidden": true, children: /* @__PURE__ */ jsx("span", { className: "xicms-beforeafter__handle", children: "\u27E8\u27E9" }) }),
+      /* @__PURE__ */ jsx("span", { className: "xicms-beforeafter__badge xicms-beforeafter__badge--before", "data-xicms-edit": "beforeLabel", children: block.beforeLabel }),
+      /* @__PURE__ */ jsx("span", { className: "xicms-beforeafter__badge xicms-beforeafter__badge--after", "data-xicms-edit": "afterLabel", children: block.afterLabel }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "xicms-beforeafter__range",
+          type: "range",
+          min: 0,
+          max: 100,
+          value: pos,
+          onChange: (e) => setPos(Number(e.target.value)),
+          "aria-label": `Vergelijk ${block.beforeLabel} en ${block.afterLabel}`,
+          "aria-valuetext": `${pos}% ${block.afterLabel}`
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  BeforeAfterRender
+};
+//# sourceMappingURL=BeforeAfterRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/BeforeAfterRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { z } from \"zod\";\nimport type { BeforeAfterBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\n\ntype BeforeAfter = z.infer<typeof BeforeAfterBlockSchema>;\n\n/**\n * Voor/na-vergelijker: het \"na\"-beeld wordt geclipt op de sleppositie. De greep is een échte\n * range-input (over de hele breedte, transparant) — slepen, klikken én pijltjestoetsen werken\n * daarmee gratis en toegankelijk (aria-label + waarde in %).\n */\nexport function BeforeAfterRender({ block }: BlockRenderProps<BeforeAfter>) {\n  const [pos, setPos] = useState(50);\n  if (!block.beforeUrl || !block.afterUrl) return null;\n  return (\n    <figure className=\"xicms-beforeafter\" style={{ aspectRatio: block.aspectRatio.replace(\"/\", \" / \") }}>\n      {block.heading && <figcaption className=\"xicms-beforeafter__heading\" data-xicms-edit=\"heading\">{block.heading}</figcaption>}\n      <div className=\"xicms-beforeafter__stage\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img className=\"xicms-beforeafter__img\" src={block.beforeUrl} alt={block.alt || block.beforeLabel} loading=\"lazy\" />\n        <div className=\"xicms-beforeafter__clip\" style={{ clipPath: `inset(0 0 0 ${pos}%)` }} aria-hidden>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img className=\"xicms-beforeafter__img\" src={block.afterUrl} alt=\"\" loading=\"lazy\" />\n        </div>\n        <div className=\"xicms-beforeafter__divider\" style={{ left: `${pos}%` }} aria-hidden>\n          <span className=\"xicms-beforeafter__handle\">⟨⟩</span>\n        </div>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--before\" data-xicms-edit=\"beforeLabel\">{block.beforeLabel}</span>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--after\" data-xicms-edit=\"afterLabel\">{block.afterLabel}</span>\n        <input\n          className=\"xicms-beforeafter__range\"\n          type=\"range\"\n          min={0}\n          max={100}\n          value={pos}\n          onChange={(e) => setPos(Number(e.target.value))}\n          aria-label={`Vergelijk ${block.beforeLabel} en ${block.afterLabel}`}\n          aria-valuetext={`${pos}% ${block.afterLabel}`}\n        />\n      </div>\n    </figure>\n  );\n}\n"],"mappings":";AAmBwB,cAClB,YADkB;AAjBxB,SAAS,gBAAgB;AAYlB,SAAS,kBAAkB,EAAE,MAAM,GAAkC;AAC1E,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,MAAI,CAAC,MAAM,aAAa,CAAC,MAAM,SAAU,QAAO;AAChD,SACE,qBAAC,YAAO,WAAU,qBAAoB,OAAO,EAAE,aAAa,MAAM,YAAY,QAAQ,KAAK,KAAK,EAAE,GAC/F;AAAA,UAAM,WAAW,oBAAC,gBAAW,WAAU,8BAA6B,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9G,qBAAC,SAAI,WAAU,4BAEb;AAAA,0BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,WAAW,KAAK,MAAM,OAAO,MAAM,aAAa,SAAQ,QAAO;AAAA,MAClH,oBAAC,SAAI,WAAU,2BAA0B,OAAO,EAAE,UAAU,eAAe,GAAG,KAAK,GAAG,eAAW,MAE/F,8BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,UAAU,KAAI,IAAG,SAAQ,QAAO,GACrF;AAAA,MACA,oBAAC,SAAI,WAAU,8BAA6B,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,GAAG,eAAW,MACjF,8BAAC,UAAK,WAAU,6BAA4B,0BAAE,GAChD;AAAA,MACA,oBAAC,UAAK,WAAU,6DAA4D,mBAAgB,eAAe,gBAAM,aAAY;AAAA,MAC7H,oBAAC,UAAK,WAAU,4DAA2D,mBAAgB,cAAc,gBAAM,YAAW;AAAA,MAC1H;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,OAAO,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UAC9C,cAAY,aAAa,MAAM,WAAW,OAAO,MAAM,UAAU;AAAA,UACjE,kBAAgB,GAAG,GAAG,KAAK,MAAM,UAAU;AAAA;AAAA,MAC7C;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1,2 +1 @@
-import type { z } from "zod";
-export declare const bookingBlock: import("../index.js").BlockDefinition<z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
+export declare const bookingBlock: import("../index.js").BlockDefinition<import("zod/v4/core").$ZodType<unknown, unknown, import("zod/v4/core").$ZodTypeInternals<unknown, unknown>>>;

package/dist/blocks/builtins/Booking.js

@@ -1,20 +1,8 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
 import { defineBlock } from "../registry.js";
-import { Heading } from "../ui/index.js";
-import { ConsentEmbed } from "./consentEmbed.js";
-import { buildBookingUrl } from "./lib/bookingUrl.js";
-function BookingRender({ block, mode }) {
-  const src = buildBookingUrl(block.provider ?? "custom", block.embedUrl);
-  if (!src) return null;
-  return /* @__PURE__ */ jsxs("section", { className: "xicms-booking", children: [
-    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
-    /* @__PURE__ */ jsx("div", { className: "xicms-booking__frame", style: { height: `${block.height}px` }, children: /* @__PURE__ */ jsx(ConsentEmbed, { gated: block.consentGated, preview: mode === "preview", label: "Afspraak/booking", children: /* @__PURE__ */ jsx("iframe", { src, title: block.heading ?? "Afspraak maken", loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", style: { border: 0, width: "100%", height: "100%" } }) }) })
-  ] });
-}
 const bookingBlock = defineBlock({
   type: "booking",
-  Render: BookingRender,
+  Render: dynamic(() => import("./BookingRender.js").then((m) => m.BookingRender)),
   label: "Afspraak/booking",
   icon: "\u{1F4C6}",
   defaults: () => ({ embedUrl: "", height: 630, consentGated: true })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Booking.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport type { BookingBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\nimport { ConsentEmbed } from \"./consentEmbed\";\nimport { buildBookingUrl, type BookingProvider } from \"./lib/bookingUrl\";\n\ntype Booking = z.infer<typeof BookingBlockSchema>;\n\n/** Boekings-/afspraak-embed (bv. Calendly). Consent-gated by default. De provider-keuze bouwt de\n *  volledige embed-URL uit een geplakte link óf een kale slug/id (buildBookingUrl). */\nfunction BookingRender({ block, mode }: BlockRenderProps<Booking>) {\n  const src = buildBookingUrl((block.provider ?? \"custom\") as BookingProvider, block.embedUrl);\n  if (!src) return null;\n  return (\n    <section className=\"xicms-booking\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <div className=\"xicms-booking__frame\" style={{ height: `${block.height}px` }}>\n        <ConsentEmbed gated={block.consentGated} preview={mode === \"preview\"} label=\"Afspraak/booking\">\n          <iframe src={src} title={block.heading ?? \"Afspraak maken\"} loading=\"lazy\" referrerPolicy=\"no-referrer-when-downgrade\" sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\" style={{ border: 0, width: \"100%\", height: \"100%\" }} />\n        </ConsentEmbed>\n      </div>\n    </section>\n  );\n}\n\nexport const bookingBlock = defineBlock({\n  type: \"booking\",\n  Render: BookingRender,\n  label: \"Afspraak/booking\",\n  icon: \"📆\",\n  defaults: () => ({ embedUrl: \"\", height: 630, consentGated: true }),\n});\n"],"mappings":";AAiBI,SACoB,KADpB;AAbJ,SAAS,mBAA0C;AACnD,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,uBAA6C;AAMtD,SAAS,cAAc,EAAE,OAAO,KAAK,GAA8B;AACjE,QAAM,MAAM,gBAAiB,MAAM,YAAY,UAA8B,MAAM,QAAQ;AAC3F,MAAI,CAAC,IAAK,QAAO;AACjB,SACE,qBAAC,aAAQ,WAAU,iBAChB;AAAA,UAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9E,oBAAC,SAAI,WAAU,wBAAuB,OAAO,EAAE,QAAQ,GAAG,MAAM,MAAM,KAAK,GACzE,8BAAC,gBAAa,OAAO,MAAM,cAAc,SAAS,SAAS,WAAW,OAAM,oBAC1E,8BAAC,YAAO,KAAU,OAAO,MAAM,WAAW,kBAAkB,SAAQ,QAAO,gBAAe,8BAA6B,SAAQ,4DAA2D,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,QAAQ,OAAO,GAAG,GACjP,GACF;AAAA,KACF;AAEJ;AAEO,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,UAAU,IAAI,QAAQ,KAAK,cAAc,KAAK;AACnE,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Booking.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const bookingBlock = defineBlock({\n  type: \"booking\",\n  Render: dynamic(() => import(\"./BookingRender\").then((m) => m.BookingRender)),\n  label: \"Afspraak/booking\",\n  icon: \"📆\",\n  defaults: () => ({ embedUrl: \"\", height: 630, consentGated: true }),\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,UAAU,IAAI,QAAQ,KAAK,cAAc,KAAK;AACnE,CAAC;","names":[]}

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

@@ -0,0 +1,8 @@
+import type { z } from "zod";
+import type { BookingBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type Booking = z.infer<typeof BookingBlockSchema>;
+/** Boekings-/afspraak-embed (bv. Calendly). Consent-gated by default. De provider-keuze bouwt de
+ *  volledige embed-URL uit een geplakte link óf een kale slug/id (buildBookingUrl). */
+export declare function BookingRender({ block, mode }: BlockRenderProps<Booking>): import("react").JSX.Element | null;
+export {};

package/dist/blocks/builtins/BookingRender.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Heading } from "../ui/index.js";
+import { ConsentEmbed } from "./consentEmbed.js";
+import { buildBookingUrl } from "./lib/bookingUrl.js";
+function BookingRender({ block, mode }) {
+  const src = buildBookingUrl(block.provider ?? "custom", block.embedUrl);
+  if (!src) return null;
+  return /* @__PURE__ */ jsxs("section", { className: "xicms-booking", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    /* @__PURE__ */ jsx("div", { className: "xicms-booking__frame", style: { height: `${block.height}px` }, children: /* @__PURE__ */ jsx(ConsentEmbed, { gated: block.consentGated, preview: mode === "preview", label: "Afspraak/booking", children: /* @__PURE__ */ jsx("iframe", { src, title: block.heading ?? "Afspraak maken", loading: "lazy", referrerPolicy: "no-referrer-when-downgrade", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups", style: { border: 0, width: "100%", height: "100%" } }) }) })
+  ] });
+}
+export {
+  BookingRender
+};
+//# sourceMappingURL=BookingRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/BookingRender.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport type { BookingBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { Heading } from \"../ui\";\nimport { ConsentEmbed } from \"./consentEmbed\";\nimport { buildBookingUrl, type BookingProvider } from \"./lib/bookingUrl\";\n\ntype Booking = z.infer<typeof BookingBlockSchema>;\n\n/** Boekings-/afspraak-embed (bv. Calendly). Consent-gated by default. De provider-keuze bouwt de\n *  volledige embed-URL uit een geplakte link óf een kale slug/id (buildBookingUrl). */\nexport function BookingRender({ block, mode }: BlockRenderProps<Booking>) {\n  const src = buildBookingUrl((block.provider ?? \"custom\") as BookingProvider, block.embedUrl);\n  if (!src) return null;\n  return (\n    <section className=\"xicms-booking\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <div className=\"xicms-booking__frame\" style={{ height: `${block.height}px` }}>\n        <ConsentEmbed gated={block.consentGated} preview={mode === \"preview\"} label=\"Afspraak/booking\">\n          <iframe src={src} title={block.heading ?? \"Afspraak maken\"} loading=\"lazy\" referrerPolicy=\"no-referrer-when-downgrade\" sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\" style={{ border: 0, width: \"100%\", height: \"100%\" }} />\n        </ConsentEmbed>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAiBI,SACoB,KADpB;AAZJ,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,uBAA6C;AAM/C,SAAS,cAAc,EAAE,OAAO,KAAK,GAA8B;AACxE,QAAM,MAAM,gBAAiB,MAAM,YAAY,UAA8B,MAAM,QAAQ;AAC3F,MAAI,CAAC,IAAK,QAAO;AACjB,SACE,qBAAC,aAAQ,WAAU,iBAChB;AAAA,UAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9E,oBAAC,SAAI,WAAU,wBAAuB,OAAO,EAAE,QAAQ,GAAG,MAAM,MAAM,KAAK,GACzE,8BAAC,gBAAa,OAAO,MAAM,cAAc,SAAS,SAAS,WAAW,OAAM,oBAC1E,8BAAC,YAAO,KAAU,OAAO,MAAM,WAAW,kBAAkB,SAAQ,QAAO,gBAAe,8BAA6B,SAAQ,4DAA2D,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,QAAQ,OAAO,GAAG,GACjP,GACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1,10 +1 @@
-import type { z } from "zod";
-export interface Crumb {
-    label: string;
-    href: string;
-}
-/** Kruimels uit een pad: "/diensten/tuinaanleg" → Home / Diensten / Tuinaanleg. Puur en getest. */
-export declare function crumbsFromPath(path: string, homeLabel?: string): Crumb[];
-/** BreadcrumbList-JSON-LD. Puur en getest. */
-export declare function breadcrumbsJsonLd(crumbs: Crumb[]): Record<string, unknown>;
-export declare const breadcrumbsBlock: import("../index.js").BlockDefinition<z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
+export declare const breadcrumbsBlock: import("../index.js").BlockDefinition<import("zod/v4/core").$ZodType<unknown, unknown, import("zod/v4/core").$ZodTypeInternals<unknown, unknown>>>;

package/dist/blocks/builtins/Breadcrumbs.js

@@ -1,79 +1,13 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
 import { defineBlock } from "../registry.js";
-import { useLinkComponent } from "@astryxdesign/core/Link";
-import { jsonLdHtml } from "./jsonld.js";
-function crumbsFromPath(path, homeLabel = "Home") {
-  const segments = path.split("/").filter(Boolean);
-  const crumbs = [{ label: homeLabel, href: "/" }];
-  let href = "";
-  for (const seg of segments) {
-    href += `/${seg}`;
-    let decoded = seg;
-    try {
-      decoded = decodeURIComponent(seg);
-    } catch {
-    }
-    const label = decoded.replace(/[-_]+/g, " ").replace(/^./, (c) => c.toUpperCase());
-    crumbs.push({ label, href });
-  }
-  return crumbs;
-}
-function breadcrumbsJsonLd(crumbs) {
-  return {
-    "@context": "https://schema.org",
-    "@type": "BreadcrumbList",
-    itemListElement: crumbs.map((c, i) => ({
-      "@type": "ListItem",
-      position: i + 1,
-      name: c.label,
-      item: c.href
-    }))
-  };
-}
-function BreadcrumbsRender({ block, mode }) {
-  const LinkC = useLinkComponent();
-  const [path, setPath] = useState(null);
-  useEffect(() => {
-    setPath(window.location.pathname);
-  }, []);
-  if (mode === "preview" && (path === null || path === "/")) {
-    return /* @__PURE__ */ jsxs("nav", { className: "xicms-breadcrumbs", "aria-label": "Kruimelpad", children: [
-      /* @__PURE__ */ jsx("span", { "data-xicms-edit": "homeLabel", children: block.homeLabel }),
-      " / Voorbeeldpagina"
-    ] });
-  }
-  if (path === null || path === "/") return null;
-  const crumbs = crumbsFromPath(path, block.homeLabel);
-  return /* @__PURE__ */ jsxs("nav", { className: "xicms-breadcrumbs", "aria-label": "Kruimelpad", children: [
-    /* @__PURE__ */ jsx("ol", { className: "xicms-breadcrumbs__list", children: crumbs.map((c, i) => /* @__PURE__ */ jsx("li", { className: "xicms-breadcrumbs__item", children: i < crumbs.length - 1 ? (
-      // De eerste kruimel ís `homeLabel`; de rest komt uit het pad en is dus geen blokveld.
-      /* @__PURE__ */ jsx(LinkC, { href: c.href, children: i === 0 ? /* @__PURE__ */ jsx("span", { "data-xicms-edit": "homeLabel", children: c.label }) : c.label })
-    ) : /* @__PURE__ */ jsx("span", { "aria-current": "page", children: c.label }) }, c.href)) }),
-    block.jsonLd && /* @__PURE__ */ jsx(
-      "script",
-      {
-        type: "application/ld+json",
-        dangerouslySetInnerHTML: {
-          __html: jsonLdHtml(
-            breadcrumbsJsonLd(crumbs.map((c) => ({ ...c, href: `${window.location.origin}${c.href}` })))
-          )
-        }
-      }
-    )
-  ] });
-}
 const breadcrumbsBlock = defineBlock({
   type: "breadcrumbs",
-  Render: BreadcrumbsRender,
+  Render: dynamic(() => import("./BreadcrumbsRender.js").then((m) => m.BreadcrumbsRender)),
   label: "Kruimelpad",
   icon: "\u{1F9ED}",
   defaults: () => ({ homeLabel: "Home", jsonLd: true })
 });
 export {
-  breadcrumbsBlock,
-  breadcrumbsJsonLd,
-  crumbsFromPath
+  breadcrumbsBlock
 };
 //# sourceMappingURL=Breadcrumbs.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Breadcrumbs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { z } from \"zod\";\nimport type { BreadcrumbsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { jsonLdHtml } from \"./jsonld\";\n\ntype Breadcrumbs = z.infer<typeof BreadcrumbsBlockSchema>;\n\nexport interface Crumb {\n  label: string;\n  href: string;\n}\n\n/** Kruimels uit een pad: \"/diensten/tuinaanleg\" → Home / Diensten / Tuinaanleg. Puur en getest. */\nexport function crumbsFromPath(path: string, homeLabel = \"Home\"): Crumb[] {\n  const segments = path.split(\"/\").filter(Boolean);\n  const crumbs: Crumb[] = [{ label: homeLabel, href: \"/\" }];\n  let href = \"\";\n  for (const seg of segments) {\n    href += `/${seg}`;\n    // decodeURIComponent gooit op misvormde percent-encoding (\"%E0%A4%A\") — dan het rauwe segment.\n    let decoded = seg;\n    try {\n      decoded = decodeURIComponent(seg);\n    } catch {\n      /* rauw segment als label */\n    }\n    const label = decoded.replace(/[-_]+/g, \" \").replace(/^./, (c) => c.toUpperCase());\n    crumbs.push({ label, href });\n  }\n  return crumbs;\n}\n\n/** BreadcrumbList-JSON-LD. Puur en getest. */\nexport function breadcrumbsJsonLd(crumbs: Crumb[]): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"BreadcrumbList\",\n    itemListElement: crumbs.map((c, i) => ({\n      \"@type\": \"ListItem\",\n      position: i + 1,\n      name: c.label,\n      item: c.href,\n    })),\n  };\n}\n\n/**\n * Kruimelpad, afgeleid van de URL (client, ná mount — hydration-veilig). Op de homepage\n * (alleen \"Home\") wordt niets getoond.\n */\nfunction BreadcrumbsRender({ block, mode }: BlockRenderProps<Breadcrumbs>) {\n  const LinkC = useLinkComponent();\n  const [path, setPath] = useState<string | null>(null);\n  useEffect(() => {\n    setPath(window.location.pathname);\n  }, []);\n\n  if (mode === \"preview\" && (path === null || path === \"/\")) {\n    return <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\"><span data-xicms-edit=\"homeLabel\">{block.homeLabel}</span> / Voorbeeldpagina</nav>;\n  }\n  if (path === null || path === \"/\") return null;\n  const crumbs = crumbsFromPath(path, block.homeLabel);\n\n  return (\n    <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\">\n      <ol className=\"xicms-breadcrumbs__list\">\n        {crumbs.map((c, i) => (\n          <li key={c.href} className=\"xicms-breadcrumbs__item\">\n            {i < crumbs.length - 1 ? (\n              // De eerste kruimel ís `homeLabel`; de rest komt uit het pad en is dus geen blokveld.\n              <LinkC href={c.href}>{i === 0 ? <span data-xicms-edit=\"homeLabel\">{c.label}</span> : c.label}</LinkC>\n            ) : (\n              <span aria-current=\"page\">{c.label}</span>\n            )}\n          </li>\n        ))}\n      </ol>\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          // Absolute URL's: Google wil volledige item-URL's in BreadcrumbList (dit rendert\n          // client-side ná mount, dus window.location.origin is beschikbaar).\n          dangerouslySetInnerHTML={{\n            __html: jsonLdHtml(\n              breadcrumbsJsonLd(crumbs.map((c) => ({ ...c, href: `${window.location.origin}${c.href}` }))),\n            ),\n          }}\n        />\n      )}\n    </nav>\n  );\n}\n\nexport const breadcrumbsBlock = defineBlock({\n  type: \"breadcrumbs\",\n  Render: BreadcrumbsRender,\n  label: \"Kruimelpad\",\n  icon: \"🧭\",\n  defaults: () => ({ homeLabel: \"Home\", jsonLd: true }),\n});\n"],"mappings":";AA8DW,SAA2D,KAA3D;AA5DX,SAAS,WAAW,gBAAgB;AAGpC,SAAS,mBAA0C;AACnD,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAUpB,SAAS,eAAe,MAAc,YAAY,QAAiB;AACxE,QAAM,WAAW,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAC/C,QAAM,SAAkB,CAAC,EAAE,OAAO,WAAW,MAAM,IAAI,CAAC;AACxD,MAAI,OAAO;AACX,aAAW,OAAO,UAAU;AAC1B,YAAQ,IAAI,GAAG;AAEf,QAAI,UAAU;AACd,QAAI;AACF,gBAAU,mBAAmB,GAAG;AAAA,IAClC,QAAQ;AAAA,IAER;AACA,UAAM,QAAQ,QAAQ,QAAQ,UAAU,GAAG,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;AACjF,WAAO,KAAK,EAAE,OAAO,KAAK,CAAC;AAAA,EAC7B;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,QAA0C;AAC1E,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MACrC,SAAS;AAAA,MACT,UAAU,IAAI;AAAA,MACd,MAAM,EAAE;AAAA,MACR,MAAM,EAAE;AAAA,IACV,EAAE;AAAA,EACJ;AACF;AAMA,SAAS,kBAAkB,EAAE,OAAO,KAAK,GAAkC;AACzE,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,YAAU,MAAM;AACd,YAAQ,OAAO,SAAS,QAAQ;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,cAAc,SAAS,QAAQ,SAAS,MAAM;AACzD,WAAO,qBAAC,SAAI,WAAU,qBAAoB,cAAW,cAAa;AAAA,0BAAC,UAAK,mBAAgB,aAAa,gBAAM,WAAU;AAAA,MAAO;AAAA,OAAkB;AAAA,EAChJ;AACA,MAAI,SAAS,QAAQ,SAAS,IAAK,QAAO;AAC1C,QAAM,SAAS,eAAe,MAAM,MAAM,SAAS;AAEnD,SACE,qBAAC,SAAI,WAAU,qBAAoB,cAAW,cAC5C;AAAA,wBAAC,QAAG,WAAU,2BACX,iBAAO,IAAI,CAAC,GAAG,MACd,oBAAC,QAAgB,WAAU,2BACxB,cAAI,OAAO,SAAS;AAAA;AAAA,MAEnB,oBAAC,SAAM,MAAM,EAAE,MAAO,gBAAM,IAAI,oBAAC,UAAK,mBAAgB,aAAa,YAAE,OAAM,IAAU,EAAE,OAAM;AAAA,QAE7F,oBAAC,UAAK,gBAAa,QAAQ,YAAE,OAAM,KAL9B,EAAE,IAOX,CACD,GACH;AAAA,IACC,MAAM,UACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QAIL,yBAAyB;AAAA,UACvB,QAAQ;AAAA,YACN,kBAAkB,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC;AAAA,UAC7F;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAEO,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,WAAW,QAAQ,QAAQ,KAAK;AACrD,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Breadcrumbs.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const breadcrumbsBlock = defineBlock({\n  type: \"breadcrumbs\",\n  Render: dynamic(() => import(\"./BreadcrumbsRender\").then((m) => m.BreadcrumbsRender)),\n  label: \"Kruimelpad\",\n  icon: \"🧭\",\n  defaults: () => ({ homeLabel: \"Home\", jsonLd: true }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,qBAAqB,EAAE,KAAK,CAAC,MAAM,EAAE,iBAAiB,CAAC;AAAA,EACpF,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,WAAW,QAAQ,QAAQ,KAAK;AACrD,CAAC;","names":[]}

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

@@ -0,0 +1,18 @@
+import type { z } from "zod";
+import type { BreadcrumbsBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type Breadcrumbs = z.infer<typeof BreadcrumbsBlockSchema>;
+export interface Crumb {
+    label: string;
+    href: string;
+}
+/** Kruimels uit een pad: "/diensten/tuinaanleg" → Home / Diensten / Tuinaanleg. Puur en getest. */
+export declare function crumbsFromPath(path: string, homeLabel?: string): Crumb[];
+/** BreadcrumbList-JSON-LD. Puur en getest. */
+export declare function breadcrumbsJsonLd(crumbs: Crumb[]): Record<string, unknown>;
+/**
+ * Kruimelpad, afgeleid van de URL (client, ná mount — hydration-veilig). Op de homepage
+ * (alleen "Home") wordt niets getoond.
+ */
+export declare function BreadcrumbsRender({ block, mode }: BlockRenderProps<Breadcrumbs>): import("react").JSX.Element | null;
+export {};

package/dist/blocks/builtins/BreadcrumbsRender.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useLinkComponent } from "@astryxdesign/core/Link";
+import { jsonLdHtml } from "./jsonld.js";
+function crumbsFromPath(path, homeLabel = "Home") {
+  const segments = path.split("/").filter(Boolean);
+  const crumbs = [{ label: homeLabel, href: "/" }];
+  let href = "";
+  for (const seg of segments) {
+    href += `/${seg}`;
+    let decoded = seg;
+    try {
+      decoded = decodeURIComponent(seg);
+    } catch {
+    }
+    const label = decoded.replace(/[-_]+/g, " ").replace(/^./, (c) => c.toUpperCase());
+    crumbs.push({ label, href });
+  }
+  return crumbs;
+}
+function breadcrumbsJsonLd(crumbs) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: crumbs.map((c, i) => ({
+      "@type": "ListItem",
+      position: i + 1,
+      name: c.label,
+      item: c.href
+    }))
+  };
+}
+function BreadcrumbsRender({ block, mode }) {
+  const LinkC = useLinkComponent();
+  const [path, setPath] = useState(null);
+  useEffect(() => {
+    setPath(window.location.pathname);
+  }, []);
+  if (mode === "preview" && (path === null || path === "/")) {
+    return /* @__PURE__ */ jsxs("nav", { className: "xicms-breadcrumbs", "aria-label": "Kruimelpad", children: [
+      /* @__PURE__ */ jsx("span", { "data-xicms-edit": "homeLabel", children: block.homeLabel }),
+      " / Voorbeeldpagina"
+    ] });
+  }
+  if (path === null || path === "/") return null;
+  const crumbs = crumbsFromPath(path, block.homeLabel);
+  return /* @__PURE__ */ jsxs("nav", { className: "xicms-breadcrumbs", "aria-label": "Kruimelpad", children: [
+    /* @__PURE__ */ jsx("ol", { className: "xicms-breadcrumbs__list", children: crumbs.map((c, i) => /* @__PURE__ */ jsx("li", { className: "xicms-breadcrumbs__item", children: i < crumbs.length - 1 ? (
+      // De eerste kruimel ís `homeLabel`; de rest komt uit het pad en is dus geen blokveld.
+      /* @__PURE__ */ jsx(LinkC, { href: c.href, children: i === 0 ? /* @__PURE__ */ jsx("span", { "data-xicms-edit": "homeLabel", children: c.label }) : c.label })
+    ) : /* @__PURE__ */ jsx("span", { "aria-current": "page", children: c.label }) }, c.href)) }),
+    block.jsonLd && /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: {
+          __html: jsonLdHtml(
+            breadcrumbsJsonLd(crumbs.map((c) => ({ ...c, href: `${window.location.origin}${c.href}` })))
+          )
+        }
+      }
+    )
+  ] });
+}
+export {
+  BreadcrumbsRender,
+  breadcrumbsJsonLd,
+  crumbsFromPath
+};
+//# sourceMappingURL=BreadcrumbsRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/BreadcrumbsRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { z } from \"zod\";\nimport type { BreadcrumbsBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { jsonLdHtml } from \"./jsonld\";\n\ntype Breadcrumbs = z.infer<typeof BreadcrumbsBlockSchema>;\n\nexport interface Crumb {\n  label: string;\n  href: string;\n}\n\n/** Kruimels uit een pad: \"/diensten/tuinaanleg\" → Home / Diensten / Tuinaanleg. Puur en getest. */\nexport function crumbsFromPath(path: string, homeLabel = \"Home\"): Crumb[] {\n  const segments = path.split(\"/\").filter(Boolean);\n  const crumbs: Crumb[] = [{ label: homeLabel, href: \"/\" }];\n  let href = \"\";\n  for (const seg of segments) {\n    href += `/${seg}`;\n    // decodeURIComponent gooit op misvormde percent-encoding (\"%E0%A4%A\") — dan het rauwe segment.\n    let decoded = seg;\n    try {\n      decoded = decodeURIComponent(seg);\n    } catch {\n      /* rauw segment als label */\n    }\n    const label = decoded.replace(/[-_]+/g, \" \").replace(/^./, (c) => c.toUpperCase());\n    crumbs.push({ label, href });\n  }\n  return crumbs;\n}\n\n/** BreadcrumbList-JSON-LD. Puur en getest. */\nexport function breadcrumbsJsonLd(crumbs: Crumb[]): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"BreadcrumbList\",\n    itemListElement: crumbs.map((c, i) => ({\n      \"@type\": \"ListItem\",\n      position: i + 1,\n      name: c.label,\n      item: c.href,\n    })),\n  };\n}\n\n/**\n * Kruimelpad, afgeleid van de URL (client, ná mount — hydration-veilig). Op de homepage\n * (alleen \"Home\") wordt niets getoond.\n */\nexport function BreadcrumbsRender({ block, mode }: BlockRenderProps<Breadcrumbs>) {\n  const LinkC = useLinkComponent();\n  const [path, setPath] = useState<string | null>(null);\n  useEffect(() => {\n    setPath(window.location.pathname);\n  }, []);\n\n  if (mode === \"preview\" && (path === null || path === \"/\")) {\n    return <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\"><span data-xicms-edit=\"homeLabel\">{block.homeLabel}</span> / Voorbeeldpagina</nav>;\n  }\n  if (path === null || path === \"/\") return null;\n  const crumbs = crumbsFromPath(path, block.homeLabel);\n\n  return (\n    <nav className=\"xicms-breadcrumbs\" aria-label=\"Kruimelpad\">\n      <ol className=\"xicms-breadcrumbs__list\">\n        {crumbs.map((c, i) => (\n          <li key={c.href} className=\"xicms-breadcrumbs__item\">\n            {i < crumbs.length - 1 ? (\n              // De eerste kruimel ís `homeLabel`; de rest komt uit het pad en is dus geen blokveld.\n              <LinkC href={c.href}>{i === 0 ? <span data-xicms-edit=\"homeLabel\">{c.label}</span> : c.label}</LinkC>\n            ) : (\n              <span aria-current=\"page\">{c.label}</span>\n            )}\n          </li>\n        ))}\n      </ol>\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          // Absolute URL's: Google wil volledige item-URL's in BreadcrumbList (dit rendert\n          // client-side ná mount, dus window.location.origin is beschikbaar).\n          dangerouslySetInnerHTML={{\n            __html: jsonLdHtml(\n              breadcrumbsJsonLd(crumbs.map((c) => ({ ...c, href: `${window.location.origin}${c.href}` }))),\n            ),\n          }}\n        />\n      )}\n    </nav>\n  );\n}\n"],"mappings":";AA8DW,SAA2D,KAA3D;AA5DX,SAAS,WAAW,gBAAgB;AAIpC,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAUpB,SAAS,eAAe,MAAc,YAAY,QAAiB;AACxE,QAAM,WAAW,KAAK,MAAM,GAAG,EAAE,OAAO,OAAO;AAC/C,QAAM,SAAkB,CAAC,EAAE,OAAO,WAAW,MAAM,IAAI,CAAC;AACxD,MAAI,OAAO;AACX,aAAW,OAAO,UAAU;AAC1B,YAAQ,IAAI,GAAG;AAEf,QAAI,UAAU;AACd,QAAI;AACF,gBAAU,mBAAmB,GAAG;AAAA,IAClC,QAAQ;AAAA,IAER;AACA,UAAM,QAAQ,QAAQ,QAAQ,UAAU,GAAG,EAAE,QAAQ,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC;AACjF,WAAO,KAAK,EAAE,OAAO,KAAK,CAAC;AAAA,EAC7B;AACA,SAAO;AACT;AAGO,SAAS,kBAAkB,QAA0C;AAC1E,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB,OAAO,IAAI,CAAC,GAAG,OAAO;AAAA,MACrC,SAAS;AAAA,MACT,UAAU,IAAI;AAAA,MACd,MAAM,EAAE;AAAA,MACR,MAAM,EAAE;AAAA,IACV,EAAE;AAAA,EACJ;AACF;AAMO,SAAS,kBAAkB,EAAE,OAAO,KAAK,GAAkC;AAChF,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,YAAU,MAAM;AACd,YAAQ,OAAO,SAAS,QAAQ;AAAA,EAClC,GAAG,CAAC,CAAC;AAEL,MAAI,SAAS,cAAc,SAAS,QAAQ,SAAS,MAAM;AACzD,WAAO,qBAAC,SAAI,WAAU,qBAAoB,cAAW,cAAa;AAAA,0BAAC,UAAK,mBAAgB,aAAa,gBAAM,WAAU;AAAA,MAAO;AAAA,OAAkB;AAAA,EAChJ;AACA,MAAI,SAAS,QAAQ,SAAS,IAAK,QAAO;AAC1C,QAAM,SAAS,eAAe,MAAM,MAAM,SAAS;AAEnD,SACE,qBAAC,SAAI,WAAU,qBAAoB,cAAW,cAC5C;AAAA,wBAAC,QAAG,WAAU,2BACX,iBAAO,IAAI,CAAC,GAAG,MACd,oBAAC,QAAgB,WAAU,2BACxB,cAAI,OAAO,SAAS;AAAA;AAAA,MAEnB,oBAAC,SAAM,MAAM,EAAE,MAAO,gBAAM,IAAI,oBAAC,UAAK,mBAAgB,aAAa,YAAE,OAAM,IAAU,EAAE,OAAM;AAAA,QAE7F,oBAAC,UAAK,gBAAa,QAAQ,YAAE,OAAM,KAL9B,EAAE,IAOX,CACD,GACH;AAAA,IACC,MAAM,UACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QAIL,yBAAyB;AAAA,UACvB,QAAQ;AAAA,YACN,kBAAkB,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,IAAI,GAAG,EAAE,CAAC;AAAA,UAC7F;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -1,2 +1 @@
-import type { z } from "zod";
-export declare const cardsBlock: import("../index.js").BlockDefinition<z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
+export declare const cardsBlock: import("../index.js").BlockDefinition<import("zod/v4/core").$ZodType<unknown, unknown, import("zod/v4/core").$ZodTypeInternals<unknown, unknown>>>;

package/dist/blocks/builtins/Cards.js

@@ -1,81 +1,9 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import dynamic from "next/dynamic";
 import { defineBlock } from "../registry.js";
-import { VStack, Grid, Card, Heading, Text } from "../ui/index.js";
-import { useLinkComponent } from "@astryxdesign/core/Link";
-import { Img } from "../../media/ImageContext.js";
-function CardsRender({ block }) {
-  const LinkC = useLinkComponent();
-  const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);
-  if (items.length === 0 && !block.heading) return null;
-  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-cards", children: [
-    (block.heading || block.intro) && /* @__PURE__ */ jsxs(VStack, { gap: 1, hAlign: "center", style: { textAlign: "center" }, children: [
-      block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
-      block.intro && /* @__PURE__ */ jsx(Text, { type: "large", color: "secondary", "data-xicms-edit": "intro", children: block.intro })
-    ] }),
-    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 240, max: block.columns }, gap: 4, children: items.map((c) => {
-      const i = c._i;
-      const cover = block.imageStyle === "cover" && Boolean(c.imageUrl);
-      const body = /* @__PURE__ */ jsxs(VStack, { gap: 2, style: cover ? { padding: "1.1rem 1.25rem 1.25rem" } : void 0, children: [
-        c.title && /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-cards__title", "data-xicms-edit": `items.${i}.title`, children: c.title }),
-        c.text && /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-cards__text", "data-xicms-edit": `items.${i}.text`, children: c.text }),
-        c.href && c.linkLabel && /* @__PURE__ */ jsxs(Text, { type: "label", style: { color: "var(--color-accent)" }, children: [
-          /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.linkLabel`, children: c.linkLabel }),
-          " \u2192"
-        ] })
-      ] });
-      const inner = cover ? /* @__PURE__ */ jsxs(VStack, { gap: 0, style: { height: "100%" }, children: [
-        /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: c.imageUrl,
-            alt: c.title ?? "",
-            width: 600,
-            height: 360,
-            sizes: "(max-width: 720px) 100vw, 33vw",
-            editField: `items.${i}.imageUrl`,
-            style: { width: "100%", aspectRatio: "16 / 10", objectFit: "cover", display: "block" }
-          }
-        ),
-        body
-      ] }) : /* @__PURE__ */ jsxs(VStack, { gap: 2, children: [
-        c.imageUrl ? /* @__PURE__ */ jsx(
-          Img,
-          {
-            src: c.imageUrl,
-            alt: c.title ?? "",
-            width: 480,
-            height: 300,
-            sizes: "(max-width: 720px) 100vw, 33vw",
-            editField: `items.${i}.imageUrl`,
-            style: { width: "100%", height: 160, objectFit: "cover", borderRadius: "var(--radius-element)" }
-          }
-        ) : c.icon ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "2rem", lineHeight: 1 }, children: c.icon }) : null,
-        c.title && /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-cards__title", "data-xicms-edit": `items.${i}.title`, children: c.title }),
-        c.text && /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-cards__text", "data-xicms-edit": `items.${i}.text`, children: c.text }),
-        c.href && c.linkLabel && /* @__PURE__ */ jsxs(Text, { type: "label", style: { color: "var(--color-accent)" }, children: [
-          /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.linkLabel`, children: c.linkLabel }),
-          " \u2192"
-        ] })
-      ] });
-      const card = /* @__PURE__ */ jsx(
-        Card,
-        {
-          padding: cover ? 0 : 4,
-          height: "100%",
-          className: `xicms-cards__card${c.featured ? " xicms-cards__card--featured" : ""}`,
-          style: cover ? { overflow: "hidden" } : void 0,
-          children: inner
-        }
-      );
-      return c.href ? /* @__PURE__ */ jsx(LinkC, { href: c.href, style: { textDecoration: "none", color: "inherit", display: "block" }, children: card }, i) : /* @__PURE__ */ jsx("div", { children: card }, i);
-    }) })
-  ] });
-}
 const cardsBlock = defineBlock({
   type: "cards",
   fields: { "items.icon": { type: "icon" } },
-  Render: CardsRender,
+  Render: dynamic(() => import("./CardsRender.js").then((m) => m.CardsRender)),
   label: "Diensten / kaarten",
   icon: "\u{1F9E9}",
   defaults: () => ({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport type { CardsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Cards = z.infer<typeof CardsBlockSchema>;\n\n/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */\nfunction CardsRender({ block }: BlockRenderProps<Cards>) {\n  const LinkC = useLinkComponent();\n  // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n  // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n  const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);\n  if (items.length === 0 && !block.heading) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-cards\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n        </VStack>\n      )}\n      <Grid columns={{ minWidth: 240, max: block.columns }} gap={4}>\n        {items.map((c) => {\n          const i = c._i;\n          const cover = block.imageStyle === \"cover\" && Boolean(c.imageUrl);\n          const body = (\n            <VStack gap={2} style={cover ? { padding: \"1.1rem 1.25rem 1.25rem\" } : undefined}>\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}><span data-xicms-edit={`items.${i}.linkLabel`}>{c.linkLabel}</span> →</Text>\n              )}\n            </VStack>\n          );\n          const inner = cover ? (\n            <VStack gap={0} style={{ height: \"100%\" }}>\n              {/* Beeld edge-to-edge bovenaan (postkaart-stijl); tekst hieronder gepad. */}\n              <Img src={c.imageUrl as string} alt={c.title ?? \"\"} width={600} height={360}\n                sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                style={{ width: \"100%\", aspectRatio: \"16 / 10\", objectFit: \"cover\", display: \"block\" }} />\n              {body}\n            </VStack>\n          ) : (\n            <VStack gap={2}>\n              {c.imageUrl ? (\n                <Img src={c.imageUrl} alt={c.title ?? \"\"} width={480} height={300}\n                  sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                  style={{ width: \"100%\", height: 160, objectFit: \"cover\", borderRadius: \"var(--radius-element)\" }} />\n              ) : c.icon ? (\n                <div aria-hidden=\"true\" style={{ fontSize: \"2rem\", lineHeight: 1 }}>{c.icon}</div>\n              ) : null}\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}><span data-xicms-edit={`items.${i}.linkLabel`}>{c.linkLabel}</span> →</Text>\n              )}\n            </VStack>\n          );\n          const card = (\n            <Card\n              padding={cover ? 0 : 4}\n              height=\"100%\"\n              className={`xicms-cards__card${c.featured ? \" xicms-cards__card--featured\" : \"\"}`}\n              style={cover ? { overflow: \"hidden\" } : undefined}\n            >\n              {inner}\n            </Card>\n          );\n          return c.href ? (\n            <LinkC key={i} href={c.href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n              {card}\n            </LinkC>\n          ) : (\n            <div key={i}>{card}</div>\n          );\n        })}\n      </Grid>\n    </VStack>\n  );\n}\n\nexport const cardsBlock = defineBlock({\n  type: \"cards\",\n  fields: { \"items.icon\": { type: \"icon\" } },\n  Render: CardsRender,\n  label: \"Diensten / kaarten\",\n  icon: \"🧩\",\n  defaults: () => ({\n    heading: \"Onze diensten\",\n    columns: 3,\n    items: [\n      { icon: \"⭐\", title: \"Dienst één\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"⚡\", title: \"Dienst twee\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"💬\", title: \"Dienst drie\", text: \"Korte omschrijving van wat je biedt.\" },\n    ],\n  }),\n});\n"],"mappings":";AAqBQ,SACoB,KADpB;AAjBR,SAAS,mBAA0C;AACnD,SAAS,QAAQ,MAAM,MAAM,SAAS,YAAY;AAClD,SAAS,wBAAwB;AACjC,SAAS,WAAW;AAKpB,SAAS,YAAY,EAAE,MAAM,GAA4B;AACvD,QAAM,QAAQ,iBAAiB;AAG/B,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ;AAChH,MAAI,MAAM,WAAW,KAAK,CAAC,MAAM,QAAS,QAAO;AACjD,SACE,qBAAC,UAAO,KAAK,GAAG,IAAG,WAAU,WAAU,eACnC;AAAA,WAAM,WAAW,MAAM,UACvB,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,YAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,MAC7E,MAAM,SAAS,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,SAAS,gBAAM,OAAM;AAAA,OAC5F;AAAA,IAEF,oBAAC,QAAK,SAAS,EAAE,UAAU,KAAK,KAAK,MAAM,QAAQ,GAAG,KAAK,GACxD,gBAAM,IAAI,CAAC,MAAM;AAChB,YAAM,IAAI,EAAE;AACZ,YAAM,QAAQ,MAAM,eAAe,WAAW,QAAQ,EAAE,QAAQ;AAChE,YAAM,OACJ,qBAAC,UAAO,KAAK,GAAG,OAAO,QAAQ,EAAE,SAAS,yBAAyB,IAAI,QACpE;AAAA,UAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,GAAG;AAAA,8BAAC,UAAK,mBAAiB,SAAS,CAAC,cAAe,YAAE,WAAU;AAAA,UAAO;AAAA,WAAE;AAAA,SAErI;AAEF,YAAM,QAAQ,QACZ,qBAAC,UAAO,KAAK,GAAG,OAAO,EAAE,QAAQ,OAAO,GAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK,EAAE;AAAA,YAAoB,KAAK,EAAE,SAAS;AAAA,YAAI,OAAO;AAAA,YAAK,QAAQ;AAAA,YACtE,OAAM;AAAA,YAAiC,WAAW,SAAS,CAAC;AAAA,YAC5D,OAAO,EAAE,OAAO,QAAQ,aAAa,WAAW,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,QAAG;AAAA,QACzF;AAAA,SACH,IAEA,qBAAC,UAAO,KAAK,GACV;AAAA,UAAE,WACD;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK,EAAE;AAAA,YAAU,KAAK,EAAE,SAAS;AAAA,YAAI,OAAO;AAAA,YAAK,QAAQ;AAAA,YAC5D,OAAM;AAAA,YAAiC,WAAW,SAAS,CAAC;AAAA,YAC5D,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,WAAW,SAAS,cAAc,wBAAwB;AAAA;AAAA,QAAG,IAClG,EAAE,OACJ,oBAAC,SAAI,eAAY,QAAO,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAAI,YAAE,MAAK,IAC1E;AAAA,QACH,EAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,GAAG;AAAA,8BAAC,UAAK,mBAAiB,SAAS,CAAC,cAAe,YAAE,WAAU;AAAA,UAAO;AAAA,WAAE;AAAA,SAErI;AAEF,YAAM,OACJ;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,QAAQ,IAAI;AAAA,UACrB,QAAO;AAAA,UACP,WAAW,oBAAoB,EAAE,WAAW,iCAAiC,EAAE;AAAA,UAC/E,OAAO,QAAQ,EAAE,UAAU,SAAS,IAAI;AAAA,UAEvC;AAAA;AAAA,MACH;AAEF,aAAO,EAAE,OACP,oBAAC,SAAc,MAAM,EAAE,MAAM,OAAO,EAAE,gBAAgB,QAAQ,OAAO,WAAW,SAAS,QAAQ,GAC9F,kBADS,CAEZ,IAEA,oBAAC,SAAa,kBAAJ,CAAS;AAAA,IAEvB,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,EAAE;AAAA,EACzC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,MAAM,UAAK,OAAO,oBAAc,MAAM,uCAAuC;AAAA,MAC/E,EAAE,MAAM,UAAK,OAAO,eAAe,MAAM,uCAAuC;AAAA,MAChF,EAAE,MAAM,aAAM,OAAO,eAAe,MAAM,uCAAuC;AAAA,IACnF;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Cards.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const cardsBlock = defineBlock({\n  type: \"cards\",\n  fields: { \"items.icon\": { type: \"icon\" } },\n  Render: dynamic(() => import(\"./CardsRender\").then((m) => m.CardsRender)),\n  label: \"Diensten / kaarten\",\n  icon: \"🧩\",\n  defaults: () => ({\n    heading: \"Onze diensten\",\n    columns: 3,\n    items: [\n      { icon: \"⭐\", title: \"Dienst één\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"⚡\", title: \"Dienst twee\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"💬\", title: \"Dienst drie\", text: \"Korte omschrijving van wat je biedt.\" },\n    ],\n  }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,EAAE;AAAA,EACzC,QAAQ,QAAQ,MAAM,OAAO,eAAe,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC;AAAA,EACxE,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,MAAM,UAAK,OAAO,oBAAc,MAAM,uCAAuC;AAAA,MAC/E,EAAE,MAAM,UAAK,OAAO,eAAe,MAAM,uCAAuC;AAAA,MAChF,EAAE,MAAM,aAAM,OAAO,eAAe,MAAM,uCAAuC;AAAA,IACnF;AAAA,EACF;AACF,CAAC;","names":[]}

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

@@ -0,0 +1,7 @@
+import type { z } from "zod";
+import type { CardsBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type Cards = z.infer<typeof CardsBlockSchema>;
+/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */
+export declare function CardsRender({ block }: BlockRenderProps<Cards>): import("react").JSX.Element | null;
+export {};

package/dist/blocks/builtins/CardsRender.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VStack, Grid, Card, Heading, Text } from "../ui/index.js";
+import { useLinkComponent } from "@astryxdesign/core/Link";
+import { Img } from "../../media/ImageContext.js";
+function CardsRender({ block }) {
+  const LinkC = useLinkComponent();
+  const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);
+  if (items.length === 0 && !block.heading) return null;
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-cards", children: [
+    (block.heading || block.intro) && /* @__PURE__ */ jsxs(VStack, { gap: 1, hAlign: "center", style: { textAlign: "center" }, children: [
+      block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+      block.intro && /* @__PURE__ */ jsx(Text, { type: "large", color: "secondary", "data-xicms-edit": "intro", children: block.intro })
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 240, max: block.columns }, gap: 4, children: items.map((c) => {
+      const i = c._i;
+      const cover = block.imageStyle === "cover" && Boolean(c.imageUrl);
+      const body = /* @__PURE__ */ jsxs(VStack, { gap: 2, style: cover ? { padding: "1.1rem 1.25rem 1.25rem" } : void 0, children: [
+        c.title && /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-cards__title", "data-xicms-edit": `items.${i}.title`, children: c.title }),
+        c.text && /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-cards__text", "data-xicms-edit": `items.${i}.text`, children: c.text }),
+        c.href && c.linkLabel && /* @__PURE__ */ jsxs(Text, { type: "label", style: { color: "var(--color-accent)" }, children: [
+          /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.linkLabel`, children: c.linkLabel }),
+          " \u2192"
+        ] })
+      ] });
+      const inner = cover ? /* @__PURE__ */ jsxs(VStack, { gap: 0, style: { height: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: c.imageUrl,
+            alt: c.title ?? "",
+            width: 600,
+            height: 360,
+            sizes: "(max-width: 720px) 100vw, 33vw",
+            editField: `items.${i}.imageUrl`,
+            style: { width: "100%", aspectRatio: "16 / 10", objectFit: "cover", display: "block" }
+          }
+        ),
+        body
+      ] }) : /* @__PURE__ */ jsxs(VStack, { gap: 2, children: [
+        c.imageUrl ? /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: c.imageUrl,
+            alt: c.title ?? "",
+            width: 480,
+            height: 300,
+            sizes: "(max-width: 720px) 100vw, 33vw",
+            editField: `items.${i}.imageUrl`,
+            style: { width: "100%", height: 160, objectFit: "cover", borderRadius: "var(--radius-element)" }
+          }
+        ) : c.icon ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { fontSize: "2rem", lineHeight: 1 }, children: c.icon }) : null,
+        c.title && /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-cards__title", "data-xicms-edit": `items.${i}.title`, children: c.title }),
+        c.text && /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-cards__text", "data-xicms-edit": `items.${i}.text`, children: c.text }),
+        c.href && c.linkLabel && /* @__PURE__ */ jsxs(Text, { type: "label", style: { color: "var(--color-accent)" }, children: [
+          /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.linkLabel`, children: c.linkLabel }),
+          " \u2192"
+        ] })
+      ] });
+      const card = /* @__PURE__ */ jsx(
+        Card,
+        {
+          padding: cover ? 0 : 4,
+          height: "100%",
+          className: `xicms-cards__card${c.featured ? " xicms-cards__card--featured" : ""}`,
+          style: cover ? { overflow: "hidden" } : void 0,
+          children: inner
+        }
+      );
+      return c.href ? /* @__PURE__ */ jsx(LinkC, { href: c.href, style: { textDecoration: "none", color: "inherit", display: "block" }, children: card }, i) : /* @__PURE__ */ jsx("div", { children: card }, i);
+    }) })
+  ] });
+}
+export {
+  CardsRender
+};
+//# sourceMappingURL=CardsRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/CardsRender.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport type { CardsBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Cards = z.infer<typeof CardsBlockSchema>;\n\n/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */\nexport function CardsRender({ block }: BlockRenderProps<Cards>) {\n  const LinkC = useLinkComponent();\n  // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n  // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n  const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);\n  if (items.length === 0 && !block.heading) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-cards\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n        </VStack>\n      )}\n      <Grid columns={{ minWidth: 240, max: block.columns }} gap={4}>\n        {items.map((c) => {\n          const i = c._i;\n          const cover = block.imageStyle === \"cover\" && Boolean(c.imageUrl);\n          const body = (\n            <VStack gap={2} style={cover ? { padding: \"1.1rem 1.25rem 1.25rem\" } : undefined}>\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}><span data-xicms-edit={`items.${i}.linkLabel`}>{c.linkLabel}</span> →</Text>\n              )}\n            </VStack>\n          );\n          const inner = cover ? (\n            <VStack gap={0} style={{ height: \"100%\" }}>\n              {/* Beeld edge-to-edge bovenaan (postkaart-stijl); tekst hieronder gepad. */}\n              <Img src={c.imageUrl as string} alt={c.title ?? \"\"} width={600} height={360}\n                sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                style={{ width: \"100%\", aspectRatio: \"16 / 10\", objectFit: \"cover\", display: \"block\" }} />\n              {body}\n            </VStack>\n          ) : (\n            <VStack gap={2}>\n              {c.imageUrl ? (\n                <Img src={c.imageUrl} alt={c.title ?? \"\"} width={480} height={300}\n                  sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                  style={{ width: \"100%\", height: 160, objectFit: \"cover\", borderRadius: \"var(--radius-element)\" }} />\n              ) : c.icon ? (\n                <div aria-hidden=\"true\" style={{ fontSize: \"2rem\", lineHeight: 1 }}>{c.icon}</div>\n              ) : null}\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}><span data-xicms-edit={`items.${i}.linkLabel`}>{c.linkLabel}</span> →</Text>\n              )}\n            </VStack>\n          );\n          const card = (\n            <Card\n              padding={cover ? 0 : 4}\n              height=\"100%\"\n              className={`xicms-cards__card${c.featured ? \" xicms-cards__card--featured\" : \"\"}`}\n              style={cover ? { overflow: \"hidden\" } : undefined}\n            >\n              {inner}\n            </Card>\n          );\n          return c.href ? (\n            <LinkC key={i} href={c.href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n              {card}\n            </LinkC>\n          ) : (\n            <div key={i}>{card}</div>\n          );\n        })}\n      </Grid>\n    </VStack>\n  );\n}\n"],"mappings":"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","names":[]}