@xiwebdesign/xicms-core 7.13.0 → 7.15.0

package/dist/blocks/builtins/FormBlockRender.js

@@ -0,0 +1,225 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useBlockData } from "../context.js";
+import { submitFormValues } from "./lib/submitForm.js";
+import { isDemoActive, getDemoForm } from "../../demo/demoStore.js";
+import { useSiteConfig } from "../../config.js";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { TextArea } from "@astryxdesign/core/TextArea";
+import { Selector } from "@astryxdesign/core/Selector";
+import { CheckboxInput } from "@astryxdesign/core/CheckboxInput";
+import { Spinner } from "@astryxdesign/core/Spinner";
+import { Button } from "@astryxdesign/core/Button";
+import { VStack, Card, Heading, Text } from "../ui/index.js";
+const DEMO_FALLBACK_FORM = {
+  name: "Contact",
+  submitLabel: "Versturen",
+  successMessage: "Bedankt! Dit is een demo \u2014 je bericht is niet echt verstuurd.",
+  fields: [
+    { name: "naam", label: "Naam", type: "text", required: true },
+    { name: "email", label: "E-mail", type: "email", required: true },
+    { name: "bericht", label: "Bericht", type: "textarea", required: false, placeholder: "Waarmee kunnen we je helpen?" }
+  ]
+};
+function FormRender({ block, siteId, mode }) {
+  const siteMode = useSiteConfig().mode;
+  const serverForms = useBlockData("forms");
+  const serverDef = serverForms?.[block.formId] ?? null;
+  const [def, setDef] = useState(serverDef);
+  const [unavailable, setUnavailable] = useState(false);
+  const [values, setValues] = useState({});
+  const [hp, setHp] = useState("");
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const demo = isDemoActive();
+  const [localOnly, setLocalOnly] = useState(demo);
+  useEffect(() => {
+    if (demo) {
+      setDef(getDemoForm(siteId, block.formId) ?? DEMO_FALLBACK_FORM);
+      setLocalOnly(true);
+      return;
+    }
+    if (serverDef) return;
+    void (async () => {
+      const [{ getDb }, { doc, getDoc }] = await Promise.all([
+        import("../../firebase/client.js"),
+        import("firebase/firestore")
+      ]);
+      const db = getDb();
+      if (!db) {
+        const reg = getDemoForm(siteId, block.formId) ?? (siteMode === "demo" ? DEMO_FALLBACK_FORM : null);
+        if (reg) {
+          setDef(reg);
+          setLocalOnly(true);
+        } else {
+          setUnavailable(true);
+        }
+        return;
+      }
+      try {
+        const snap = await getDoc(doc(db, "sites", siteId, "forms", block.formId));
+        if (snap.exists()) setDef(snap.data());
+        else setUnavailable(true);
+      } catch {
+        setUnavailable(true);
+      }
+    })();
+  }, [demo, siteId, block.formId, siteMode, serverDef]);
+  if (unavailable) {
+    return /* @__PURE__ */ jsx(Card, { padding: 4, variant: "muted", children: /* @__PURE__ */ jsxs(Text, { children: [
+      block.heading ? `${block.heading}: ` : "",
+      "neem contact met ons op \u2014 we reageren snel."
+    ] }) });
+  }
+  if (!def) {
+    return /* @__PURE__ */ jsx("div", { style: { display: "grid", placeItems: "center", minHeight: 120 }, children: /* @__PURE__ */ jsx(Spinner, { label: "Formulier laden\u2026" }) });
+  }
+  async function submit(e) {
+    e.preventDefault();
+    if (mode === "preview") return;
+    if (localOnly) {
+      setStatus("ok");
+      setValues({});
+      return;
+    }
+    setStatus("busy");
+    setError(null);
+    try {
+      await submitFormValues(siteId, block.formId, values, hp);
+      if (def?.successRedirect) {
+        window.location.assign(def.successRedirect);
+        return;
+      }
+      setStatus("ok");
+      setValues({});
+    } catch {
+      setStatus("error");
+      setError("Versturen mislukt. Probeer het later opnieuw.");
+    }
+  }
+  if (status === "ok") {
+    return (
+      // role="status": screenreaders melden de succesboodschap wanneer het formulier verdwijnt.
+      /* @__PURE__ */ jsx(Card, { padding: 4, variant: "muted", role: "status", children: /* @__PURE__ */ jsx(Text, { children: def.successMessage }) })
+    );
+  }
+  const setVal = (name, v) => setValues((prev) => ({ ...prev, [name]: v }));
+  return /* @__PURE__ */ jsx("form", { className: "xicms-form", onSubmit: submit, children: /* @__PURE__ */ jsxs(VStack, { gap: 3, children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    def.fields.map((f) => {
+      const sv = values[f.name] ?? "";
+      if (f.type === "textarea") {
+        return /* @__PURE__ */ jsx(
+          TextArea,
+          {
+            label: f.label,
+            isRequired: f.required,
+            placeholder: f.placeholder,
+            rows: 4,
+            value: sv,
+            onChange: (v) => setVal(f.name, v)
+          },
+          f.name
+        );
+      }
+      if (f.type === "select") {
+        return /* @__PURE__ */ jsx(
+          Selector,
+          {
+            label: f.label,
+            isRequired: f.required,
+            placeholder: "Kies\u2026",
+            options: f.options ?? [],
+            value: sv,
+            onChange: (v) => setVal(f.name, v ?? "")
+          },
+          f.name
+        );
+      }
+      if (f.type === "checkbox") {
+        return /* @__PURE__ */ jsx(
+          CheckboxInput,
+          {
+            label: f.label,
+            isRequired: f.required,
+            value: Boolean(values[f.name]),
+            onChange: (checked) => setVal(f.name, checked)
+          },
+          f.name
+        );
+      }
+      if (f.type === "radio") {
+        return /* @__PURE__ */ jsxs("fieldset", { className: "xicms-form__radios", children: [
+          /* @__PURE__ */ jsxs("legend", { children: [
+            f.label,
+            f.required && " *"
+          ] }),
+          (f.options ?? []).map((opt) => /* @__PURE__ */ jsxs("label", { className: "xicms-form__radio", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "radio",
+                name: f.name,
+                value: opt,
+                required: f.required,
+                checked: sv === opt,
+                onChange: () => setVal(f.name, opt)
+              }
+            ),
+            opt
+          ] }, opt))
+        ] }, f.name);
+      }
+      if (f.type === "date" || f.type === "number") {
+        return /* @__PURE__ */ jsxs("label", { className: "xicms-form__native", children: [
+          /* @__PURE__ */ jsxs("span", { className: "xicms-form__native-label", children: [
+            f.label,
+            f.required && " *"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "xicms-input",
+              type: f.type,
+              required: f.required,
+              placeholder: f.placeholder,
+              value: sv,
+              onChange: (e) => setVal(f.name, e.target.value)
+            }
+          )
+        ] }, f.name);
+      }
+      return /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          label: f.label,
+          type: f.type === "email" ? "email" : "text",
+          isRequired: f.required,
+          placeholder: f.placeholder,
+          value: sv,
+          onChange: (v) => setVal(f.name, v)
+        },
+        f.name
+      );
+    }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        tabIndex: -1,
+        autoComplete: "off",
+        value: hp,
+        onChange: (e) => setHp(e.target.value),
+        style: { position: "absolute", left: "-9999px", width: 1, height: 1 },
+        "aria-hidden": true
+      }
+    ),
+    error && /* @__PURE__ */ jsx(Text, { role: "alert", style: { color: "var(--color-error, #c0392b)" }, children: error }),
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { label: status === "busy" ? "Versturen\u2026" : def.submitLabel, variant: "primary", size: "lg", type: "submit", isLoading: status === "busy" }) })
+  ] }) });
+}
+export {
+  FormRender
+};
+//# sourceMappingURL=FormBlockRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/FormBlockRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport type { FormBlockSchema } from \"../../schema/blocks\";\nimport type { FormDefinition } from \"../../schema/forms\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { useBlockData } from \"../context\";\nimport { submitFormValues } from \"./lib/submitForm\";\nimport { isDemoActive, getDemoForm } from \"../../demo/demoStore\";\nimport { useSiteConfig } from \"../../config\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { CheckboxInput } from \"@astryxdesign/core/CheckboxInput\";\nimport { Spinner } from \"@astryxdesign/core/Spinner\";\nimport { Button } from \"@astryxdesign/core/Button\";\nimport { VStack, Card, Heading, Text } from \"../ui\";\n\ntype FormBlk = z.infer<typeof FormBlockSchema>;\n\n/** Voorbeeldformulier voor de demo wanneer er geen specifieke definitie is geregistreerd. */\nconst DEMO_FALLBACK_FORM: FormDefinition = {\n  name: \"Contact\",\n  submitLabel: \"Versturen\",\n  successMessage: \"Bedankt! Dit is een demo — je bericht is niet echt verstuurd.\",\n  fields: [\n    { name: \"naam\", label: \"Naam\", type: \"text\", required: true },\n    { name: \"email\", label: \"E-mail\", type: \"email\", required: true },\n    { name: \"bericht\", label: \"Bericht\", type: \"textarea\", required: false, placeholder: \"Waarmee kunnen we je helpen?\" },\n  ],\n};\n\nexport function FormRender({ block, siteId, mode }: BlockRenderProps<FormBlk>) {\n  const siteMode = useSiteConfig().mode;\n  // Server-seed (7.12): de route leest formulierdefinities server-side (getPageBlockData) en\n  // geeft ze mee als blockData. Het formulier staat dan al in de SSR-HTML en de per-bezoeker\n  // `getDoc` hieronder vervalt. Zonder seed (oudere site, admin-preview) werkt het oude pad.\n  const serverForms = useBlockData<Record<string, FormDefinition>>(\"forms\");\n  const serverDef = serverForms?.[block.formId] ?? null;\n  const [def, setDef] = useState<FormDefinition | null>(serverDef);\n  const [unavailable, setUnavailable] = useState(false);\n  const [values, setValues] = useState<Record<string, string | boolean>>({});\n  const [hp, setHp] = useState(\"\");\n  const [status, setStatus] = useState<\"idle\" | \"busy\" | \"ok\" | \"error\">(\"idle\");\n  const [error, setError] = useState<string | null>(null);\n\n  const demo = isDemoActive();\n  // \"Lokaal\" inzenden (geen Firebase-call) bij demo OF wanneer er geen Firebase is maar wél een\n  // geregistreerd voorbeeldformulier — zo werkt een statische referentiesite z'n formulier ook.\n  const [localOnly, setLocalOnly] = useState(demo);\n\n  useEffect(() => {\n    if (demo) {\n      setDef(getDemoForm(siteId, block.formId) ?? DEMO_FALLBACK_FORM);\n      setLocalOnly(true);\n      return;\n    }\n    if (serverDef) return; // definitie kwam al server-side mee\n    // Firestore dynamisch: alleen een pagina die écht een formulier toont haalt de SDK binnen.\n    void (async () => {\n      const [{ getDb }, { doc, getDoc }] = await Promise.all([\n        import(\"../../firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db) {\n        // Geen Firebase: val terug op een geregistreerd formulier, of (op een mode:\"demo\"-site) op\n        // het ingebouwde voorbeeld; beide zenden lokaal in. Anders een nette \"niet beschikbaar\".\n        const reg = getDemoForm(siteId, block.formId) ?? (siteMode === \"demo\" ? DEMO_FALLBACK_FORM : null);\n        if (reg) { setDef(reg); setLocalOnly(true); } else { setUnavailable(true); }\n        return;\n      }\n      try {\n        const snap = await getDoc(doc(db, \"sites\", siteId, \"forms\", block.formId));\n        if (snap.exists()) setDef(snap.data() as FormDefinition);\n        else setUnavailable(true);\n      } catch {\n        setUnavailable(true);\n      }\n    })();\n  }, [demo, siteId, block.formId, siteMode, serverDef]);\n\n  if (unavailable) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>{block.heading ? `${block.heading}: ` : \"\"}neem contact met ons op — we reageren snel.</Text>\n      </Card>\n    );\n  }\n  if (!def) {\n    return (\n      <div style={{ display: \"grid\", placeItems: \"center\", minHeight: 120 }}>\n        <Spinner label=\"Formulier laden…\" />\n      </div>\n    );\n  }\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\") return;\n    if (localOnly) {\n      // Lokaal (demo / geen backend): niets versturen, alleen de successtaat tonen.\n      setStatus(\"ok\");\n      setValues({});\n      return;\n    }\n    setStatus(\"busy\");\n    setError(null);\n    try {\n      await submitFormValues(siteId, block.formId, values, hp);\n      // Optioneel doorsturen naar een bedankt-pagina (conversiemeting/advertenties).\n      if (def?.successRedirect) {\n        window.location.assign(def.successRedirect);\n        return;\n      }\n      setStatus(\"ok\");\n      setValues({});\n    } catch {\n      setStatus(\"error\");\n      setError(\"Versturen mislukt. Probeer het later opnieuw.\");\n    }\n  }\n\n  if (status === \"ok\") {\n    return (\n      // role=\"status\": screenreaders melden de succesboodschap wanneer het formulier verdwijnt.\n      <Card padding={4} variant=\"muted\" role=\"status\">\n        <Text>{def.successMessage}</Text>\n      </Card>\n    );\n  }\n\n  const setVal = (name: string, v: string | boolean) => setValues((prev) => ({ ...prev, [name]: v }));\n\n  return (\n    <form className=\"xicms-form\" onSubmit={submit}>\n      <VStack gap={3}>\n        {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {def.fields.map((f) => {\n          const sv = (values[f.name] as string) ?? \"\";\n          if (f.type === \"textarea\") {\n            return (\n              <TextArea key={f.name} label={f.label} isRequired={f.required} placeholder={f.placeholder} rows={4}\n                value={sv} onChange={(v) => setVal(f.name, v)} />\n            );\n          }\n          if (f.type === \"select\") {\n            return (\n              <Selector key={f.name} label={f.label} isRequired={f.required} placeholder=\"Kies…\"\n                options={f.options ?? []} value={sv} onChange={(v) => setVal(f.name, (v as string) ?? \"\")} />\n            );\n          }\n          if (f.type === \"checkbox\") {\n            return (\n              <CheckboxInput key={f.name} label={f.label} isRequired={f.required}\n                value={Boolean(values[f.name])} onChange={(checked) => setVal(f.name, checked)} />\n            );\n          }\n          if (f.type === \"radio\") {\n            return (\n              <fieldset key={f.name} className=\"xicms-form__radios\">\n                <legend>{f.label}{f.required && \" *\"}</legend>\n                {(f.options ?? []).map((opt) => (\n                  <label key={opt} className=\"xicms-form__radio\">\n                    <input\n                      type=\"radio\"\n                      name={f.name}\n                      value={opt}\n                      required={f.required}\n                      checked={sv === opt}\n                      onChange={() => setVal(f.name, opt)}\n                    />\n                    {opt}\n                  </label>\n                ))}\n              </fieldset>\n            );\n          }\n          if (f.type === \"date\" || f.type === \"number\") {\n            // Astryx TextInput kent geen date/number → native input in dezelfde stijl.\n            return (\n              <label key={f.name} className=\"xicms-form__native\">\n                <span className=\"xicms-form__native-label\">{f.label}{f.required && \" *\"}</span>\n                <input\n                  className=\"xicms-input\"\n                  type={f.type}\n                  required={f.required}\n                  placeholder={f.placeholder}\n                  value={sv}\n                  onChange={(e) => setVal(f.name, e.target.value)}\n                />\n              </label>\n            );\n          }\n          return (\n            <TextInput key={f.name} label={f.label} type={f.type === \"email\" ? \"email\" : \"text\"}\n              isRequired={f.required} placeholder={f.placeholder}\n              value={sv} onChange={(v) => setVal(f.name, v)} />\n          );\n        })}\n        {/* Honeypot — verborgen voor mensen, bots vullen 'm vaak wel in. */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n        <div>\n          <Button label={status === \"busy\" ? \"Versturen…\" : def.submitLabel} variant=\"primary\" size=\"lg\" type=\"submit\" isLoading={status === \"busy\"} />\n        </div>\n      </VStack>\n    </form>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,23 +1 @@
-import type { z } from "zod";
-import type { GalleryBlockSchema } from "../../schema/blocks.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;
-export declare const galleryBlock: import("../index.js").BlockDefinition<z.core.$ZodType<unknown, unknown, z.core.$ZodTypeInternals<unknown, unknown>>>;
-export {};
+export declare const galleryBlock: import("../index.js").BlockDefinition<import("zod/v4/core").$ZodType<unknown, unknown, import("zod/v4/core").$ZodTypeInternals<unknown, unknown>>>;

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 {};