@xiwebdesign/xicms-core 7.14.0 → 7.16.0

package/dist/blocks/builtins/Gallery.js

@@ -1,175 +1,13 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import dynamic from "next/dynamic";
 import { defineBlock } from "../registry.js";
-import { useModuleSettings } from "../../modules/context.js";
-import { Grid } from "../ui/index.js";
-import { Img } from "../../media/ImageContext.js";
-function LightboxOverlay({
-  items,
-  index,
-  onIndex,
-  onClose
-}) {
-  const it = items[index];
-  const total = items.length;
-  const overlayRef = useRef(null);
-  const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);
-  const next = useCallback(() => onIndex((index + 1) % total), [index, total, onIndex]);
-  const swipeStart = useRef(null);
-  const onPointerDown = (e) => {
-    swipeStart.current = e.clientX;
-  };
-  const onPointerUp = (e) => {
-    if (swipeStart.current === null || total < 2) return;
-    const dx = e.clientX - swipeStart.current;
-    swipeStart.current = null;
-    if (dx > 40) prev();
-    else if (dx < -40) next();
-  };
-  useEffect(() => {
-    const onKey = (e) => {
-      if (e.key === "Escape") onClose();
-      else if (e.key === "ArrowLeft") prev();
-      else if (e.key === "ArrowRight") next();
-      else if (e.key === "Tab") {
-        const el = overlayRef.current;
-        const focusables = el ? [...el.querySelectorAll("button, a[href]")] : [];
-        if (focusables.length === 0) return;
-        const first = focusables[0];
-        const last = focusables[focusables.length - 1];
-        const active = document.activeElement;
-        if (e.shiftKey && (active === first || !el?.contains(active))) {
-          e.preventDefault();
-          last.focus();
-        } else if (!e.shiftKey && (active === last || !el?.contains(active))) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    overlayRef.current?.querySelector(".xicms-lightbox__close")?.focus({ preventScroll: true });
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prevOverflow;
-    };
-  }, [onClose, prev, next]);
-  if (typeof document === "undefined") return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: overlayRef,
-        className: "xicms-lightbox",
-        role: "dialog",
-        "aria-modal": "true",
-        "aria-label": it.alt || it.caption || "Foto",
-        onClick: onClose,
-        children: [
-          /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-lightbox__close", "aria-label": "Sluiten", onClick: onClose, children: "\u2715" }),
-          total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-lightbox__nav xicms-lightbox__nav--prev", "aria-label": "Vorige", onClick: (e) => {
-              e.stopPropagation();
-              prev();
-            }, children: "\u2039" }),
-            /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-lightbox__nav xicms-lightbox__nav--next", "aria-label": "Volgende", onClick: (e) => {
-              e.stopPropagation();
-              next();
-            }, children: "\u203A" }),
-            /* @__PURE__ */ jsxs("span", { className: "xicms-lightbox__counter", children: [
-              index + 1,
-              " / ",
-              total
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "figure",
-            {
-              className: "xicms-lightbox__figure",
-              onClick: (e) => e.stopPropagation(),
-              onPointerDown,
-              onPointerUp,
-              style: { touchAction: "pan-y" },
-              children: [
-                /* @__PURE__ */ jsx("img", { src: it.url, alt: it.alt ?? "" }),
-                it.caption && /* @__PURE__ */ jsx("figcaption", { children: it.caption })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    document.body
-  );
-}
-function GalleryRender({ block }) {
-  const settings = useModuleSettings("gallery");
-  const allItems = (block.items ?? []).map((it, _i) => ({ ...it, _i })).filter((i) => i.url);
-  const [open, setOpen] = useState(false);
-  const [index, setIndex] = useState(0);
-  const [activeTag, setActiveTag] = useState(null);
-  const triggerRef = useRef(null);
-  const tags = block.showFilter ? [...new Set(allItems.map((i) => i.tag).filter((t) => Boolean(t)))] : [];
-  const items = activeTag ? allItems.filter((i) => i.tag === activeTag) : allItems;
-  if (allItems.length === 0) return null;
-  const cols = block.columns && block.columns > 0 ? block.columns : settings.columns ?? 3;
-  const lightbox = block.lightbox === "on" ? true : block.lightbox === "off" ? false : settings.lightbox ?? true;
-  const ar = block.aspectRatio ?? "1/1";
-  const imgStyle = {
-    width: "100%",
-    aspectRatio: ar === "auto" ? void 0 : ar.replace("/", " / "),
-    objectFit: "cover",
-    borderRadius: "var(--radius-element)",
-    display: "block"
-  };
-  const close = () => {
-    setOpen(false);
-    triggerRef.current?.focus({ preventScroll: true });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "xicms-gallery", children: [
-    tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "xicms-gallery__filter", role: "group", "aria-label": "Filter op categorie", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-gallery__filterbtn", "aria-pressed": activeTag === null, "data-active": activeTag === null ? "1" : "0", onClick: () => {
-        setActiveTag(null);
-        setIndex(0);
-      }, children: "Alles" }),
-      tags.map((t) => /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-gallery__filterbtn", "aria-pressed": activeTag === t, "data-active": activeTag === t ? "1" : "0", onClick: () => {
-        setActiveTag(t);
-        setIndex(0);
-      }, children: t }, t))
-    ] }),
-    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 160, max: Math.min(cols, 6) }, gap: 2, children: items.map((i, idx) => /* @__PURE__ */ jsxs("figure", { style: { margin: 0 }, className: "xicms-gallery__item", children: [
-      lightbox ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: (e) => {
-            triggerRef.current = e.currentTarget;
-            setIndex(idx);
-            setOpen(true);
-          },
-          "aria-label": i.alt || i.caption || `Foto ${idx + 1} vergroten`,
-          style: { display: "block", width: "100%", padding: 0, border: 0, background: "none", cursor: "zoom-in" },
-          children: /* @__PURE__ */ jsx(Img, { src: i.url, alt: i.alt ?? "", width: 600, height: 600, sizes: "(max-width: 640px) 50vw, 280px", style: imgStyle })
-        }
-      ) : /* @__PURE__ */ jsx(Img, { src: i.url, alt: i.alt ?? "", width: 600, height: 600, sizes: "(max-width: 640px) 50vw, 280px", style: imgStyle }),
-      i.caption && /* @__PURE__ */ jsx("figcaption", { className: "xicms-gallery__caption", "data-xicms-edit": `items.${i._i}.caption`, style: { marginTop: "0.4rem", fontSize: "0.85rem", color: "var(--color-text-secondary)" }, children: i.caption })
-    ] }, idx)) }),
-    lightbox && open && /* @__PURE__ */ jsx(LightboxOverlay, { items, index, onIndex: setIndex, onClose: close })
-  ] });
-}
 const galleryBlock = defineBlock({
   type: "gallery",
-  Render: GalleryRender,
+  Render: dynamic(() => import("./GalleryRender.js").then((m) => m.GalleryRender)),
   label: "Galerij",
   icon: "\u{1F5BC}",
   defaults: () => ({ items: [], columns: 0, lightbox: "inherit", aspectRatio: "1/1" })
 });
 export {
-  LightboxOverlay,
   galleryBlock
 };
 //# sourceMappingURL=Gallery.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Gallery.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { z } from \"zod\";\nimport type { GalleryBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useModuleSettings } from \"../../modules/context\";\nimport { Grid } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Gallery = z.infer<typeof GalleryBlockSchema>;\ntype Item = Gallery[\"items\"][number];\n\n/** Per-site instelbaar via `modules.gallery.config` (door de agent of in /beheer). */\nexport interface GallerySettings {\n  columns?: number;\n  lightbox?: boolean;\n}\n\n/**\n * Eigen lightbox-overlay: rendert via een portal naar `document.body` (zo raakt geen enkele\n * ancestor-transform — bv. de scroll-reveal — de full-screen positionering). Sluit op klik náást\n * de foto én op Escape; vorige/volgende met teller; herstelt focus zónder de pagina te laten\n * verspringen (`preventScroll`) en zet de body-scroll vast zolang hij open is.\n */\nexport function LightboxOverlay({\n  items,\n  index,\n  onIndex,\n  onClose,\n}: {\n  items: Item[];\n  index: number;\n  onIndex: (i: number) => void;\n  onClose: () => void;\n}) {\n  const it = items[index];\n  const total = items.length;\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);\n  const next = useCallback(() => onIndex((index + 1) % total), [index, total, onIndex]);\n  // Swipe (pointer events, werkt voor touch én muis-sleep): horizontaal > 40px = vorige/volgende.\n  const swipeStart = useRef<number | null>(null);\n  const onPointerDown = (e: React.PointerEvent) => {\n    swipeStart.current = e.clientX;\n  };\n  const onPointerUp = (e: React.PointerEvent) => {\n    if (swipeStart.current === null || total < 2) return;\n    const dx = e.clientX - swipeStart.current;\n    swipeStart.current = null;\n    if (dx > 40) prev();\n    else if (dx < -40) next();\n  };\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n      else if (e.key === \"ArrowLeft\") prev();\n      else if (e.key === \"ArrowRight\") next();\n      else if (e.key === \"Tab\") {\n        // Focus-trap (aria-modal): Tab cirkelt binnen de dialog i.p.v. naar de pagina eronder.\n        const el = overlayRef.current;\n        const focusables = el ? [...el.querySelectorAll<HTMLElement>(\"button, a[href]\")] : [];\n        if (focusables.length === 0) return;\n        const first = focusables[0];\n        const last = focusables[focusables.length - 1];\n        const active = document.activeElement;\n        if (e.shiftKey && (active === first || !el?.contains(active))) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && (active === last || !el?.contains(active))) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\"; // scroll-lock terwijl open\n    // Initiële focus in de dialog (dialog-conventie; toetsenbord/screenreader landt niet \"achter\" de overlay).\n    overlayRef.current?.querySelector<HTMLElement>(\".xicms-lightbox__close\")?.focus({ preventScroll: true });\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = prevOverflow;\n    };\n  }, [onClose, prev, next]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={overlayRef}\n      className=\"xicms-lightbox\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={it.alt || it.caption || \"Foto\"}\n      onClick={onClose}\n    >\n      <button type=\"button\" className=\"xicms-lightbox__close\" aria-label=\"Sluiten\" onClick={onClose}>✕</button>\n      {total > 1 && (\n        <>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--prev\" aria-label=\"Vorige\" onClick={(e) => { e.stopPropagation(); prev(); }}>‹</button>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--next\" aria-label=\"Volgende\" onClick={(e) => { e.stopPropagation(); next(); }}>›</button>\n          <span className=\"xicms-lightbox__counter\">{index + 1} / {total}</span>\n        </>\n      )}\n      {/* Klik op de foto/onderschrift sluit NIET (stopPropagation); klik op de rand wel.\n          touchAction pan-y: verticaal scrollen blijft van de browser, horizontaal is swipen. */}\n      <figure\n        className=\"xicms-lightbox__figure\"\n        onClick={(e) => e.stopPropagation()}\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        style={{ touchAction: \"pan-y\" }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img src={it.url} alt={it.alt ?? \"\"} />\n        {it.caption && <figcaption>{it.caption}</figcaption>}\n      </figure>\n    </div>,\n    document.body,\n  );\n}\n\n/** Galerij — responsive grid met instelbare beeldverhouding en optionele lightbox. */\nfunction GalleryRender({ block }: BlockRenderProps<Gallery>) {\n  const settings = useModuleSettings<GallerySettings>(\"gallery\");\n  // `_i` = de index in block.items (vóór url-/tagfilters): het inline-edit-pad\n  // (`items.<_i>.caption`) moet naar het ORIGINELE array-item wijzen, niet naar de filterpositie.\n  const allItems = (block.items ?? []).map((it, _i) => ({ ...it, _i })).filter((i) => i.url);\n  const [open, setOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n  const [activeTag, setActiveTag] = useState<string | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  // Filterbalk op item-tags (opt-in): lightbox-navigatie volgt de gefilterde lijst.\n  const tags = block.showFilter ? [...new Set(allItems.map((i) => i.tag).filter((t): t is string => Boolean(t)))] : [];\n  const items = activeTag ? allItems.filter((i) => i.tag === activeTag) : allItems;\n\n  if (allItems.length === 0) return null;\n\n  const cols = block.columns && block.columns > 0 ? block.columns : settings.columns ?? 3;\n  const lightbox =\n    block.lightbox === \"on\" ? true : block.lightbox === \"off\" ? false : settings.lightbox ?? true;\n  const ar = block.aspectRatio ?? \"1/1\";\n\n  const imgStyle = {\n    width: \"100%\",\n    aspectRatio: ar === \"auto\" ? undefined : ar.replace(\"/\", \" / \"),\n    objectFit: \"cover\" as const,\n    borderRadius: \"var(--radius-element)\",\n    display: \"block\",\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus({ preventScroll: true }); // geen page-jump bij sluiten\n  };\n\n  return (\n    <div className=\"xicms-gallery\">\n      {tags.length > 0 && (\n        <div className=\"xicms-gallery__filter\" role=\"group\" aria-label=\"Filter op categorie\">\n          <button type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === null} data-active={activeTag === null ? \"1\" : \"0\"} onClick={() => { setActiveTag(null); setIndex(0); }}>\n            Alles\n          </button>\n          {tags.map((t) => (\n            <button key={t} type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === t} data-active={activeTag === t ? \"1\" : \"0\"} onClick={() => { setActiveTag(t); setIndex(0); }}>\n              {t}\n            </button>\n          ))}\n        </div>\n      )}\n      <Grid columns={{ minWidth: 160, max: Math.min(cols, 6) }} gap={2}>\n        {items.map((i, idx) => (\n          <figure key={idx} style={{ margin: 0 }} className=\"xicms-gallery__item\">\n            {lightbox ? (\n              <button\n                type=\"button\"\n                onClick={(e) => { triggerRef.current = e.currentTarget; setIndex(idx); setOpen(true); }}\n                aria-label={i.alt || i.caption || `Foto ${idx + 1} vergroten`}\n                style={{ display: \"block\", width: \"100%\", padding: 0, border: 0, background: \"none\", cursor: \"zoom-in\" }}\n              >\n                <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n              </button>\n            ) : (\n              <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n            )}\n            {i.caption && (\n              <figcaption className=\"xicms-gallery__caption\" data-xicms-edit={`items.${i._i}.caption`} style={{ marginTop: \"0.4rem\", fontSize: \"0.85rem\", color: \"var(--color-text-secondary)\" }}>\n                {i.caption}\n              </figcaption>\n            )}\n          </figure>\n        ))}\n      </Grid>\n\n      {lightbox && open && (\n        <LightboxOverlay items={items} index={index} onIndex={setIndex} onClose={close} />\n      )}\n    </div>\n  );\n}\n\nexport const galleryBlock = defineBlock({\n  type: \"gallery\",\n  Render: GalleryRender,\n  label: \"Galerij\",\n  icon: \"🖼\",\n  defaults: () => ({ items: [], columns: 0, lightbox: \"inherit\", aspectRatio: \"1/1\" }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Gallery.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const galleryBlock = defineBlock({\n  type: \"gallery\",\n  Render: dynamic(() => import(\"./GalleryRender\").then((m) => m.GalleryRender)),\n  label: \"Galerij\",\n  icon: \"🖼\",\n  defaults: () => ({ items: [], columns: 0, lightbox: \"inherit\", aspectRatio: \"1/1\" }),\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,OAAO,CAAC,GAAG,SAAS,GAAG,UAAU,WAAW,aAAa,MAAM;AACpF,CAAC;","names":[]}

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

@@ -0,0 +1,25 @@
+import type { z } from "zod";
+import type { GalleryBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type Gallery = z.infer<typeof GalleryBlockSchema>;
+type Item = Gallery["items"][number];
+/** Per-site instelbaar via `modules.gallery.config` (door de agent of in /beheer). */
+export interface GallerySettings {
+    columns?: number;
+    lightbox?: boolean;
+}
+/**
+ * Eigen lightbox-overlay: rendert via een portal naar `document.body` (zo raakt geen enkele
+ * ancestor-transform — bv. de scroll-reveal — de full-screen positionering). Sluit op klik náást
+ * de foto én op Escape; vorige/volgende met teller; herstelt focus zónder de pagina te laten
+ * verspringen (`preventScroll`) en zet de body-scroll vast zolang hij open is.
+ */
+export declare function LightboxOverlay({ items, index, onIndex, onClose, }: {
+    items: Item[];
+    index: number;
+    onIndex: (i: number) => void;
+    onClose: () => void;
+}): import("react").ReactPortal | null;
+/** Galerij — responsive grid met instelbare beeldverhouding en optionele lightbox. */
+export declare function GalleryRender({ block }: BlockRenderProps<Gallery>): import("react").JSX.Element | null;
+export {};

package/dist/blocks/builtins/GalleryRender.js

@@ -0,0 +1,167 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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";
+function LightboxOverlay({
+  items,
+  index,
+  onIndex,
+  onClose
+}) {
+  const it = items[index];
+  const total = items.length;
+  const overlayRef = useRef(null);
+  const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);
+  const next = useCallback(() => onIndex((index + 1) % total), [index, total, onIndex]);
+  const swipeStart = useRef(null);
+  const onPointerDown = (e) => {
+    swipeStart.current = e.clientX;
+  };
+  const onPointerUp = (e) => {
+    if (swipeStart.current === null || total < 2) return;
+    const dx = e.clientX - swipeStart.current;
+    swipeStart.current = null;
+    if (dx > 40) prev();
+    else if (dx < -40) next();
+  };
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "ArrowLeft") prev();
+      else if (e.key === "ArrowRight") next();
+      else if (e.key === "Tab") {
+        const el = overlayRef.current;
+        const focusables = el ? [...el.querySelectorAll("button, a[href]")] : [];
+        if (focusables.length === 0) return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        if (e.shiftKey && (active === first || !el?.contains(active))) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && (active === last || !el?.contains(active))) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    overlayRef.current?.querySelector(".xicms-lightbox__close")?.focus({ preventScroll: true });
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [onClose, prev, next]);
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: overlayRef,
+        className: "xicms-lightbox",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": it.alt || it.caption || "Foto",
+        onClick: onClose,
+        children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-lightbox__close", "aria-label": "Sluiten", onClick: onClose, children: "\u2715" }),
+          total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-lightbox__nav xicms-lightbox__nav--prev", "aria-label": "Vorige", onClick: (e) => {
+              e.stopPropagation();
+              prev();
+            }, children: "\u2039" }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-lightbox__nav xicms-lightbox__nav--next", "aria-label": "Volgende", onClick: (e) => {
+              e.stopPropagation();
+              next();
+            }, children: "\u203A" }),
+            /* @__PURE__ */ jsxs("span", { className: "xicms-lightbox__counter", children: [
+              index + 1,
+              " / ",
+              total
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "figure",
+            {
+              className: "xicms-lightbox__figure",
+              onClick: (e) => e.stopPropagation(),
+              onPointerDown,
+              onPointerUp,
+              style: { touchAction: "pan-y" },
+              children: [
+                /* @__PURE__ */ jsx("img", { src: it.url, alt: it.alt ?? "" }),
+                it.caption && /* @__PURE__ */ jsx("figcaption", { children: it.caption })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function GalleryRender({ block }) {
+  const settings = useModuleSettings("gallery");
+  const allItems = (block.items ?? []).map((it, _i) => ({ ...it, _i })).filter((i) => i.url);
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+  const [activeTag, setActiveTag] = useState(null);
+  const triggerRef = useRef(null);
+  const tags = block.showFilter ? [...new Set(allItems.map((i) => i.tag).filter((t) => Boolean(t)))] : [];
+  const items = activeTag ? allItems.filter((i) => i.tag === activeTag) : allItems;
+  if (allItems.length === 0) return null;
+  const cols = block.columns && block.columns > 0 ? block.columns : settings.columns ?? 3;
+  const lightbox = block.lightbox === "on" ? true : block.lightbox === "off" ? false : settings.lightbox ?? true;
+  const ar = block.aspectRatio ?? "1/1";
+  const imgStyle = {
+    width: "100%",
+    aspectRatio: ar === "auto" ? void 0 : ar.replace("/", " / "),
+    objectFit: "cover",
+    borderRadius: "var(--radius-element)",
+    display: "block"
+  };
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "xicms-gallery", children: [
+    tags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "xicms-gallery__filter", role: "group", "aria-label": "Filter op categorie", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-gallery__filterbtn", "aria-pressed": activeTag === null, "data-active": activeTag === null ? "1" : "0", onClick: () => {
+        setActiveTag(null);
+        setIndex(0);
+      }, children: "Alles" }),
+      tags.map((t) => /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-gallery__filterbtn", "aria-pressed": activeTag === t, "data-active": activeTag === t ? "1" : "0", onClick: () => {
+        setActiveTag(t);
+        setIndex(0);
+      }, children: t }, t))
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 160, max: Math.min(cols, 6) }, gap: 2, children: items.map((i, idx) => /* @__PURE__ */ jsxs("figure", { style: { margin: 0 }, className: "xicms-gallery__item", children: [
+      lightbox ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            triggerRef.current = e.currentTarget;
+            setIndex(idx);
+            setOpen(true);
+          },
+          "aria-label": i.alt || i.caption || `Foto ${idx + 1} vergroten`,
+          style: { display: "block", width: "100%", padding: 0, border: 0, background: "none", cursor: "zoom-in" },
+          children: /* @__PURE__ */ jsx(Img, { src: i.url, alt: i.alt ?? "", width: 600, height: 600, sizes: "(max-width: 640px) 50vw, 280px", style: imgStyle })
+        }
+      ) : /* @__PURE__ */ jsx(Img, { src: i.url, alt: i.alt ?? "", width: 600, height: 600, sizes: "(max-width: 640px) 50vw, 280px", style: imgStyle }),
+      i.caption && /* @__PURE__ */ jsx("figcaption", { className: "xicms-gallery__caption", "data-xicms-edit": `items.${i._i}.caption`, style: { marginTop: "0.4rem", fontSize: "0.85rem", color: "var(--color-text-secondary)" }, children: i.caption })
+    ] }, idx)) }),
+    lightbox && open && /* @__PURE__ */ jsx(LightboxOverlay, { items, index, onIndex: setIndex, onClose: close })
+  ] });
+}
+export {
+  GalleryRender,
+  LightboxOverlay
+};
+//# sourceMappingURL=GalleryRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/GalleryRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { z } from \"zod\";\nimport type { GalleryBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useModuleSettings } from \"../../modules/context\";\nimport { Grid } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Gallery = z.infer<typeof GalleryBlockSchema>;\ntype Item = Gallery[\"items\"][number];\n\n/** Per-site instelbaar via `modules.gallery.config` (door de agent of in /beheer). */\nexport interface GallerySettings {\n  columns?: number;\n  lightbox?: boolean;\n}\n\n/**\n * Eigen lightbox-overlay: rendert via een portal naar `document.body` (zo raakt geen enkele\n * ancestor-transform — bv. de scroll-reveal — de full-screen positionering). Sluit op klik náást\n * de foto én op Escape; vorige/volgende met teller; herstelt focus zónder de pagina te laten\n * verspringen (`preventScroll`) en zet de body-scroll vast zolang hij open is.\n */\nexport function LightboxOverlay({\n  items,\n  index,\n  onIndex,\n  onClose,\n}: {\n  items: Item[];\n  index: number;\n  onIndex: (i: number) => void;\n  onClose: () => void;\n}) {\n  const it = items[index];\n  const total = items.length;\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const prev = useCallback(() => onIndex((index - 1 + total) % total), [index, total, onIndex]);\n  const next = useCallback(() => onIndex((index + 1) % total), [index, total, onIndex]);\n  // Swipe (pointer events, werkt voor touch én muis-sleep): horizontaal > 40px = vorige/volgende.\n  const swipeStart = useRef<number | null>(null);\n  const onPointerDown = (e: React.PointerEvent) => {\n    swipeStart.current = e.clientX;\n  };\n  const onPointerUp = (e: React.PointerEvent) => {\n    if (swipeStart.current === null || total < 2) return;\n    const dx = e.clientX - swipeStart.current;\n    swipeStart.current = null;\n    if (dx > 40) prev();\n    else if (dx < -40) next();\n  };\n\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") onClose();\n      else if (e.key === \"ArrowLeft\") prev();\n      else if (e.key === \"ArrowRight\") next();\n      else if (e.key === \"Tab\") {\n        // Focus-trap (aria-modal): Tab cirkelt binnen de dialog i.p.v. naar de pagina eronder.\n        const el = overlayRef.current;\n        const focusables = el ? [...el.querySelectorAll<HTMLElement>(\"button, a[href]\")] : [];\n        if (focusables.length === 0) return;\n        const first = focusables[0];\n        const last = focusables[focusables.length - 1];\n        const active = document.activeElement;\n        if (e.shiftKey && (active === first || !el?.contains(active))) {\n          e.preventDefault();\n          last.focus();\n        } else if (!e.shiftKey && (active === last || !el?.contains(active))) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    const prevOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\"; // scroll-lock terwijl open\n    // Initiële focus in de dialog (dialog-conventie; toetsenbord/screenreader landt niet \"achter\" de overlay).\n    overlayRef.current?.querySelector<HTMLElement>(\".xicms-lightbox__close\")?.focus({ preventScroll: true });\n    return () => {\n      document.removeEventListener(\"keydown\", onKey);\n      document.body.style.overflow = prevOverflow;\n    };\n  }, [onClose, prev, next]);\n\n  if (typeof document === \"undefined\") return null;\n  return createPortal(\n    <div\n      ref={overlayRef}\n      className=\"xicms-lightbox\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label={it.alt || it.caption || \"Foto\"}\n      onClick={onClose}\n    >\n      <button type=\"button\" className=\"xicms-lightbox__close\" aria-label=\"Sluiten\" onClick={onClose}>✕</button>\n      {total > 1 && (\n        <>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--prev\" aria-label=\"Vorige\" onClick={(e) => { e.stopPropagation(); prev(); }}>‹</button>\n          <button type=\"button\" className=\"xicms-lightbox__nav xicms-lightbox__nav--next\" aria-label=\"Volgende\" onClick={(e) => { e.stopPropagation(); next(); }}>›</button>\n          <span className=\"xicms-lightbox__counter\">{index + 1} / {total}</span>\n        </>\n      )}\n      {/* Klik op de foto/onderschrift sluit NIET (stopPropagation); klik op de rand wel.\n          touchAction pan-y: verticaal scrollen blijft van de browser, horizontaal is swipen. */}\n      <figure\n        className=\"xicms-lightbox__figure\"\n        onClick={(e) => e.stopPropagation()}\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        style={{ touchAction: \"pan-y\" }}\n      >\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img src={it.url} alt={it.alt ?? \"\"} />\n        {it.caption && <figcaption>{it.caption}</figcaption>}\n      </figure>\n    </div>,\n    document.body,\n  );\n}\n\n/** Galerij — responsive grid met instelbare beeldverhouding en optionele lightbox. */\nexport function GalleryRender({ block }: BlockRenderProps<Gallery>) {\n  const settings = useModuleSettings<GallerySettings>(\"gallery\");\n  // `_i` = de index in block.items (vóór url-/tagfilters): het inline-edit-pad\n  // (`items.<_i>.caption`) moet naar het ORIGINELE array-item wijzen, niet naar de filterpositie.\n  const allItems = (block.items ?? []).map((it, _i) => ({ ...it, _i })).filter((i) => i.url);\n  const [open, setOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n  const [activeTag, setActiveTag] = useState<string | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  // Filterbalk op item-tags (opt-in): lightbox-navigatie volgt de gefilterde lijst.\n  const tags = block.showFilter ? [...new Set(allItems.map((i) => i.tag).filter((t): t is string => Boolean(t)))] : [];\n  const items = activeTag ? allItems.filter((i) => i.tag === activeTag) : allItems;\n\n  if (allItems.length === 0) return null;\n\n  const cols = block.columns && block.columns > 0 ? block.columns : settings.columns ?? 3;\n  const lightbox =\n    block.lightbox === \"on\" ? true : block.lightbox === \"off\" ? false : settings.lightbox ?? true;\n  const ar = block.aspectRatio ?? \"1/1\";\n\n  const imgStyle = {\n    width: \"100%\",\n    aspectRatio: ar === \"auto\" ? undefined : ar.replace(\"/\", \" / \"),\n    objectFit: \"cover\" as const,\n    borderRadius: \"var(--radius-element)\",\n    display: \"block\",\n  };\n\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus({ preventScroll: true }); // geen page-jump bij sluiten\n  };\n\n  return (\n    <div className=\"xicms-gallery\">\n      {tags.length > 0 && (\n        <div className=\"xicms-gallery__filter\" role=\"group\" aria-label=\"Filter op categorie\">\n          <button type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === null} data-active={activeTag === null ? \"1\" : \"0\"} onClick={() => { setActiveTag(null); setIndex(0); }}>\n            Alles\n          </button>\n          {tags.map((t) => (\n            <button key={t} type=\"button\" className=\"xicms-gallery__filterbtn\" aria-pressed={activeTag === t} data-active={activeTag === t ? \"1\" : \"0\"} onClick={() => { setActiveTag(t); setIndex(0); }}>\n              {t}\n            </button>\n          ))}\n        </div>\n      )}\n      <Grid columns={{ minWidth: 160, max: Math.min(cols, 6) }} gap={2}>\n        {items.map((i, idx) => (\n          <figure key={idx} style={{ margin: 0 }} className=\"xicms-gallery__item\">\n            {lightbox ? (\n              <button\n                type=\"button\"\n                onClick={(e) => { triggerRef.current = e.currentTarget; setIndex(idx); setOpen(true); }}\n                aria-label={i.alt || i.caption || `Foto ${idx + 1} vergroten`}\n                style={{ display: \"block\", width: \"100%\", padding: 0, border: 0, background: \"none\", cursor: \"zoom-in\" }}\n              >\n                <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n              </button>\n            ) : (\n              <Img src={i.url as string} alt={i.alt ?? \"\"} width={600} height={600} sizes=\"(max-width: 640px) 50vw, 280px\" style={imgStyle} />\n            )}\n            {i.caption && (\n              <figcaption className=\"xicms-gallery__caption\" data-xicms-edit={`items.${i._i}.caption`} style={{ marginTop: \"0.4rem\", fontSize: \"0.85rem\", color: \"var(--color-text-secondary)\" }}>\n                {i.caption}\n              </figcaption>\n            )}\n          </figure>\n        ))}\n      </Grid>\n\n      {lightbox && open && (\n        <LightboxOverlay items={items} index={index} onIndex={setIndex} onClose={close} />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

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

package/dist/blocks/builtins/Hero.js

@@ -1,79 +1,8 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import { defineBlock } from "../registry.js";
-import { Btn, Heading, Text } from "../ui/index.js";
-import { Img } from "../../media/ImageContext.js";
-function HeroRender({ block }) {
-  const videoRef = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  useEffect(() => {
-    const v = videoRef.current;
-    if (!v) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
-    v.play().then(() => setPlaying(true)).catch(() => void 0);
-  }, [block.videoUrl]);
-  const toggleVideo = () => {
-    const v = videoRef.current;
-    if (!v) return;
-    if (v.paused) v.play().then(() => setPlaying(true)).catch(() => void 0);
-    else {
-      v.pause();
-      setPlaying(false);
-    }
-  };
-  const overlay = block.overlayOpacity > 0 ? { background: block.overlayColor ?? "#000000", opacity: block.overlayOpacity / 100 } : null;
-  const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== "auto";
-  const light = coverMedia ? { color: "#ffffff", textShadow: "0 2px 14px rgba(0,0,0,.45)" } : void 0;
-  const buttons = block.buttons ?? [];
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      className: "xicms-hero",
-      "data-align": block.align,
-      "data-valign": block.vAlign,
-      "data-height": block.minHeight,
-      "data-media": coverMedia ? "cover" : void 0,
-      children: [
-        block.videoUrl ? /* @__PURE__ */ jsx(
-          "video",
-          {
-            ref: videoRef,
-            className: "xicms-hero__media",
-            src: block.videoUrl,
-            poster: block.imageUrl || void 0,
-            muted: true,
-            loop: true,
-            playsInline: true,
-            preload: "metadata",
-            "aria-hidden": "true"
-          }
-        ) : block.imageUrl ? /* @__PURE__ */ jsx(Img, { src: block.imageUrl, alt: "", className: "xicms-hero__media", width: 1600, height: 900, sizes: "100vw", priority: true, editField: "imageUrl", editFill: true }) : null,
-        overlay && /* @__PURE__ */ jsx("div", { className: "xicms-hero__overlay", style: overlay, "aria-hidden": "true" }),
-        block.overlayGradient && coverMedia && /* @__PURE__ */ jsx("div", { className: "xicms-hero__gradient", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs("div", { className: "xicms-hero__inner", children: [
-          block.eyebrow && /* @__PURE__ */ jsx(Text, { type: "label", className: "xicms-hero__eyebrow", style: light, "data-xicms-edit": "eyebrow", children: block.eyebrow }),
-          block.title && /* @__PURE__ */ jsx(Heading, { level: block.headingLevel === "2" ? 2 : 1, type: "display-1", className: "xicms-hero__title", style: light, "data-xicms-edit": "title", children: block.title }),
-          block.subtitle && /* @__PURE__ */ jsx(Text, { type: "large", className: "xicms-hero__sub", style: light, "data-xicms-edit": "subtitle", children: block.subtitle }),
-          buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => /* @__PURE__ */ jsx(Btn, { label: b.label, href: b.href, variant: b.variant, size: "lg", editField: `buttons.${b._i}.label` }, b._i)) })
-        ] }),
-        block.videoUrl && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "xicms-hero__videotoggle",
-            onClick: toggleVideo,
-            "aria-label": playing ? "Achtergrondvideo pauzeren" : "Achtergrondvideo afspelen",
-            children: playing ? "\u23F8" : "\u25B6"
-          }
-        )
-      ]
-    }
-  );
-}
 const heroBlock = defineBlock({
   type: "hero",
-  Render: HeroRender,
+  Render: dynamic(() => import("./HeroRender.js").then((m) => m.HeroRender)),
   label: "Hero",
   icon: "\u2728",
   defaults: () => ({ title: "Welkom", subtitle: "", align: "left", vAlign: "center", minHeight: "auto", overlayOpacity: 0, buttons: [] })

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

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

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

@@ -0,0 +1,6 @@
+import type { z } from "zod";
+import type { HeroBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type Hero = z.infer<typeof HeroBlockSchema>;
+export declare function HeroRender({ block }: BlockRenderProps<Hero>): import("react").JSX.Element;
+export {};

package/dist/blocks/builtins/HeroRender.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Btn, Heading, Text } from "../ui/index.js";
+import { Img } from "../../media/ImageContext.js";
+function HeroRender({ block }) {
+  const videoRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  useEffect(() => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    v.play().then(() => setPlaying(true)).catch(() => void 0);
+  }, [block.videoUrl]);
+  const toggleVideo = () => {
+    const v = videoRef.current;
+    if (!v) return;
+    if (v.paused) v.play().then(() => setPlaying(true)).catch(() => void 0);
+    else {
+      v.pause();
+      setPlaying(false);
+    }
+  };
+  const overlay = block.overlayOpacity > 0 ? { background: block.overlayColor ?? "#000000", opacity: block.overlayOpacity / 100 } : null;
+  const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== "auto";
+  const light = coverMedia ? { color: "#ffffff", textShadow: "0 2px 14px rgba(0,0,0,.45)" } : void 0;
+  const buttons = block.buttons ?? [];
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "xicms-hero",
+      "data-align": block.align,
+      "data-valign": block.vAlign,
+      "data-height": block.minHeight,
+      "data-media": coverMedia ? "cover" : void 0,
+      children: [
+        block.videoUrl ? /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: videoRef,
+            className: "xicms-hero__media",
+            src: block.videoUrl,
+            poster: block.imageUrl || void 0,
+            muted: true,
+            loop: true,
+            playsInline: true,
+            preload: "metadata",
+            "aria-hidden": "true"
+          }
+        ) : block.imageUrl ? /* @__PURE__ */ jsx(Img, { src: block.imageUrl, alt: "", className: "xicms-hero__media", width: 1600, height: 900, sizes: "100vw", priority: true, editField: "imageUrl", editFill: true }) : null,
+        overlay && /* @__PURE__ */ jsx("div", { className: "xicms-hero__overlay", style: overlay, "aria-hidden": "true" }),
+        block.overlayGradient && coverMedia && /* @__PURE__ */ jsx("div", { className: "xicms-hero__gradient", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { className: "xicms-hero__inner", children: [
+          block.eyebrow && /* @__PURE__ */ jsx(Text, { type: "label", className: "xicms-hero__eyebrow", style: light, "data-xicms-edit": "eyebrow", children: block.eyebrow }),
+          block.title && /* @__PURE__ */ jsx(Heading, { level: block.headingLevel === "2" ? 2 : 1, type: "display-1", className: "xicms-hero__title", style: light, "data-xicms-edit": "title", children: block.title }),
+          block.subtitle && /* @__PURE__ */ jsx(Text, { type: "large", className: "xicms-hero__sub", style: light, "data-xicms-edit": "subtitle", children: block.subtitle }),
+          buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.map((b, i) => ({ ...b, _i: i })).filter((b) => b.label).map((b) => /* @__PURE__ */ jsx(Btn, { label: b.label, href: b.href, variant: b.variant, size: "lg", editField: `buttons.${b._i}.label` }, b._i)) })
+        ] }),
+        block.videoUrl && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "xicms-hero__videotoggle",
+            onClick: toggleVideo,
+            "aria-label": playing ? "Achtergrondvideo pauzeren" : "Achtergrondvideo afspelen",
+            children: playing ? "\u23F8" : "\u25B6"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  HeroRender
+};
+//# sourceMappingURL=HeroRender.js.map