@xiwebdesign/xicms-core 4.17.1

package/dist/blocks/builtins/Embed.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { EmbedBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { ConsentEmbed } from "./consentEmbed";
+function EmbedRender({ block, mode }) {
+  if (!block.url) return null;
+  const sizing = block.aspectRatio && block.aspectRatio !== "fixed" ? { aspectRatio: block.aspectRatio.replace("/", " / ") } : { height: `${block.height}px` };
+  return /* @__PURE__ */ jsx("div", { className: "xicms-embed", style: sizing, children: /* @__PURE__ */ jsx(ConsentEmbed, { gated: block.consentGated, preview: mode === "preview", label: block.title ?? "Embed", children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: block.url,
+      title: block.title ?? "Embed",
+      loading: "lazy",
+      style: { border: 0, width: "100%", height: "100%" }
+    }
+  ) }) });
+}
+const embedBlock = defineBlock({
+  type: "embed",
+  schema: EmbedBlockSchema,
+  Render: EmbedRender,
+  label: "Embed (iframe)",
+  icon: "\u{1F9E9}",
+  defaults: () => ({ url: "", height: 420, consentGated: true })
+});
+export {
+  embedBlock
+};
+//# sourceMappingURL=Embed.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Embed.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { EmbedBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { ConsentEmbed } from \"./consentEmbed\";\n\ntype Embed = z.infer<typeof EmbedBlockSchema>;\n\n/** Generieke responsive iframe-embed (consent-gated by default) — voor wat dan ook met een URL. */\nfunction EmbedRender({ block, mode }: BlockRenderProps<Embed>) {\n  if (!block.url) return null;\n  // \"fixed\" = vaste hoogte (bestaand gedrag); anders schaalt de embed mee met de beeldverhouding.\n  const sizing =\n    block.aspectRatio && block.aspectRatio !== \"fixed\"\n      ? { aspectRatio: block.aspectRatio.replace(\"/\", \" / \") }\n      : { height: `${block.height}px` };\n  return (\n    <div className=\"xicms-embed\" style={sizing}>\n      <ConsentEmbed gated={block.consentGated} preview={mode === \"preview\"} label={block.title ?? \"Embed\"}>\n        <iframe\n          src={block.url}\n          title={block.title ?? \"Embed\"}\n          loading=\"lazy\"\n          style={{ border: 0, width: \"100%\", height: \"100%\" }}\n        />\n      </ConsentEmbed>\n    </div>\n  );\n}\n\nexport const embedBlock = defineBlock({\n  type: \"embed\",\n  schema: EmbedBlockSchema,\n  Render: EmbedRender,\n  label: \"Embed (iframe)\",\n  icon: \"🧩\",\n  defaults: () => ({ url: \"\", height: 420, consentGated: true }),\n});\n"],"mappings":";AAoBQ;AAjBR,SAAS,wBAAwB;AACjC,SAAS,mBAA0C;AACnD,SAAS,oBAAoB;AAK7B,SAAS,YAAY,EAAE,OAAO,KAAK,GAA4B;AAC7D,MAAI,CAAC,MAAM,IAAK,QAAO;AAEvB,QAAM,SACJ,MAAM,eAAe,MAAM,gBAAgB,UACvC,EAAE,aAAa,MAAM,YAAY,QAAQ,KAAK,KAAK,EAAE,IACrD,EAAE,QAAQ,GAAG,MAAM,MAAM,KAAK;AACpC,SACE,oBAAC,SAAI,WAAU,eAAc,OAAO,QAClC,8BAAC,gBAAa,OAAO,MAAM,cAAc,SAAS,SAAS,WAAW,OAAO,MAAM,SAAS,SAC1F;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,MAAM;AAAA,MACX,OAAO,MAAM,SAAS;AAAA,MACtB,SAAQ;AAAA,MACR,OAAO,EAAE,QAAQ,GAAG,OAAO,QAAQ,QAAQ,OAAO;AAAA;AAAA,EACpD,GACF,GACF;AAEJ;AAEO,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,KAAK,IAAI,QAAQ,KAAK,cAAc,KAAK;AAC9D,CAAC;","names":[]}

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

@@ -0,0 +1,6 @@
+import type { z } from "zod";
+/** Anker-id voor een vraag (deep-link: /faq#hoe-werkt-het). */
+export declare function questionSlug(q: string): string;
+/** Unieke anker-ids voor een vragenlijst: identieke vragen krijgen -2, -3, … (ids moeten uniek zijn). */
+export declare function questionSlugs(questions: string[]): string[];
+export declare const faqBlock: import("..").BlockDefinition<z.ZodTypeAny>;

package/dist/blocks/builtins/Faq.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { FaqBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { Collapsible } from "@astryxdesign/core/Collapsible";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { VStack, Heading, Text } from "../ui";
+function questionSlug(q) {
+  return q.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+}
+function questionSlugs(questions) {
+  const seen = /* @__PURE__ */ new Map();
+  return questions.map((q) => {
+    const base = questionSlug(q);
+    if (!base) return "";
+    const n = (seen.get(base) ?? 0) + 1;
+    seen.set(base, n);
+    return n === 1 ? base : `${base}-${n}`;
+  });
+}
+function faqJsonLd(items) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: items.filter((it) => it.q && (it.a || it.aHtml)).map((it) => ({
+      "@type": "Question",
+      name: it.q,
+      acceptedAnswer: { "@type": "Answer", text: it.aHtml ? it.aHtml.replace(/<[^>]*>/g, " ").trim() : it.a }
+    }))
+  };
+}
+function FaqRender({ block }) {
+  const items = block.items ?? [];
+  const [q, setQ] = useState("");
+  const withSlugs = useMemo(() => {
+    const slugs = questionSlugs(items.map((it) => it.q));
+    return items.map((it, i) => ({ it, slug: slugs[i] }));
+  }, [items]);
+  const [openSlug, setOpenSlug] = useState(null);
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (hash && withSlugs.some(({ slug }) => slug === hash)) {
+      setOpenSlug(hash);
+      document.getElementById(hash)?.scrollIntoView({ block: "start" });
+    }
+  }, []);
+  const filtered = useMemo(() => {
+    if (!block.searchable || !q.trim()) return withSlugs;
+    const needle = q.toLowerCase();
+    return withSlugs.filter(({ it }) => (it.q + " " + it.a + " " + (it.aHtml ?? "")).toLowerCase().includes(needle));
+  }, [withSlugs, q, block.searchable]);
+  return /* @__PURE__ */ jsxs(VStack, { gap: 3, as: "section", className: "xicms-faq", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    block.searchable && /* @__PURE__ */ jsx("div", { style: { maxWidth: 360 }, children: /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: "Zoek in veelgestelde vragen",
+        isLabelHidden: true,
+        placeholder: "Zoek in vragen\u2026",
+        value: q,
+        onChange: setQ
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(VStack, { gap: 1.5, children: [
+      filtered.map(({ it, slug }, i) => {
+        return /* @__PURE__ */ jsx("div", { id: slug || void 0, children: /* @__PURE__ */ jsx(
+          Collapsible,
+          {
+            trigger: /* @__PURE__ */ jsx(Text, { weight: "bold", className: "xicms-faq__question", children: it.q }),
+            defaultIsOpen: block.defaultOpen || slug !== "" && slug === openSlug,
+            children: it.aHtml ? (
+              // Server-side gesanitized bij publiceren (velden op *Html) — zie functions/lib/sanitize.
+              // eslint-disable-next-line react/no-danger
+              /* @__PURE__ */ jsx("div", { className: "xicms-richtext xicms-faq__answer", dangerouslySetInnerHTML: { __html: it.aHtml } })
+            ) : /* @__PURE__ */ jsx(Text, { color: "secondary", className: "xicms-faq__answer", children: it.a })
+          },
+          `${i}-${slug === openSlug ? "open" : "dicht"}`
+        ) }, i);
+      }),
+      filtered.length === 0 && /* @__PURE__ */ jsx(Text, { color: "secondary", children: "Geen vragen gevonden." })
+    ] }),
+    block.jsonLd && /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(faqJsonLd(items)) }
+      }
+    )
+  ] });
+}
+const faqBlock = defineBlock({
+  type: "faq",
+  schema: FaqBlockSchema,
+  Render: FaqRender,
+  label: "Veelgestelde vragen",
+  icon: "\u2753",
+  defaults: () => ({
+    heading: "Veelgestelde vragen",
+    items: [{ q: "Een vraag?", a: "Het antwoord." }],
+    searchable: false,
+    jsonLd: true
+  })
+});
+export {
+  faqBlock,
+  questionSlug,
+  questionSlugs
+};
+//# sourceMappingURL=Faq.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Faq.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { FaqBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Collapsible } from \"@astryxdesign/core/Collapsible\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { VStack, Heading, Text } from \"../ui\";\n\ntype Faq = z.infer<typeof FaqBlockSchema>;\n\n/** Anker-id voor een vraag (deep-link: /faq#hoe-werkt-het). */\nexport function questionSlug(q: string): string {\n  return q\n    .toLowerCase()\n    .normalize(\"NFD\")\n    .replace(/[̀-ͯ]/g, \"\")\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\")\n    .slice(0, 60);\n}\n\n/** Unieke anker-ids voor een vragenlijst: identieke vragen krijgen -2, -3, … (ids moeten uniek zijn). */\nexport function questionSlugs(questions: string[]): string[] {\n  const seen = new Map<string, number>();\n  return questions.map((q) => {\n    const base = questionSlug(q);\n    if (!base) return \"\";\n    const n = (seen.get(base) ?? 0) + 1;\n    seen.set(base, n);\n    return n === 1 ? base : `${base}-${n}`;\n  });\n}\n\nfunction faqJsonLd(items: { q: string; a: string; aHtml?: string }[]): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"FAQPage\",\n    mainEntity: items\n      .filter((it) => it.q && (it.a || it.aHtml))\n      .map((it) => ({\n        \"@type\": \"Question\",\n        name: it.q,\n        acceptedAnswer: { \"@type\": \"Answer\", text: it.aHtml ? it.aHtml.replace(/<[^>]*>/g, \" \").trim() : it.a },\n      })),\n  };\n}\n\nfunction FaqRender({ block }: BlockRenderProps<Faq>) {\n  const items = block.items ?? [];\n  const [q, setQ] = useState(\"\");\n  // Slug per item vooraf berekenen (met dedupe), zodat dubbele vragen geen dubbele ids opleveren\n  // en de hash-match precies één vraag opent.\n  const withSlugs = useMemo(() => {\n    const slugs = questionSlugs(items.map((it) => it.q));\n    return items.map((it, i) => ({ it, slug: slugs[i] }));\n  }, [items]);\n  // Deep-link: bij laden met #<vraag-slug> die vraag openen (en ernaartoe scrollen).\n  const [openSlug, setOpenSlug] = useState<string | null>(null);\n  useEffect(() => {\n    const hash = window.location.hash.slice(1);\n    if (hash && withSlugs.some(({ slug }) => slug === hash)) {\n      setOpenSlug(hash);\n      document.getElementById(hash)?.scrollIntoView({ block: \"start\" });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  const filtered = useMemo(() => {\n    if (!block.searchable || !q.trim()) return withSlugs;\n    const needle = q.toLowerCase();\n    return withSlugs.filter(({ it }) => (it.q + \" \" + it.a + \" \" + (it.aHtml ?? \"\")).toLowerCase().includes(needle));\n  }, [withSlugs, q, block.searchable]);\n\n  return (\n    <VStack gap={3} as=\"section\" className=\"xicms-faq\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      {block.searchable && (\n        <div style={{ maxWidth: 360 }}>\n          <TextInput\n            label=\"Zoek in veelgestelde vragen\"\n            isLabelHidden\n            placeholder=\"Zoek in vragen…\"\n            value={q}\n            onChange={setQ}\n          />\n        </div>\n      )}\n      <VStack gap={1.5}>\n        {filtered.map(({ it, slug }, i) => {\n          return (\n            <div key={i} id={slug || undefined}>\n              <Collapsible\n                // key wisselt zodra de hash-match binnenkomt (effect ná mount) → remount met open staat.\n                key={`${i}-${slug === openSlug ? \"open\" : \"dicht\"}`}\n                trigger={<Text weight=\"bold\" className=\"xicms-faq__question\">{it.q}</Text>}\n                defaultIsOpen={block.defaultOpen || (slug !== \"\" && slug === openSlug)}\n              >\n                {it.aHtml ? (\n                  // Server-side gesanitized bij publiceren (velden op *Html) — zie functions/lib/sanitize.\n                  // eslint-disable-next-line react/no-danger\n                  <div className=\"xicms-richtext xicms-faq__answer\" dangerouslySetInnerHTML={{ __html: it.aHtml }} />\n                ) : (\n                  <Text color=\"secondary\" className=\"xicms-faq__answer\">{it.a}</Text>\n                )}\n              </Collapsible>\n            </div>\n          );\n        })}\n        {filtered.length === 0 && <Text color=\"secondary\">Geen vragen gevonden.</Text>}\n      </VStack>\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd(items)) }}\n        />\n      )}\n    </VStack>\n  );\n}\n\nexport const faqBlock = defineBlock({\n  type: \"faq\",\n  schema: FaqBlockSchema,\n  Render: FaqRender,\n  label: \"Veelgestelde vragen\",\n  icon: \"❓\",\n  defaults: () => ({\n    heading: \"Veelgestelde vragen\",\n    items: [{ q: \"Een vraag?\", a: \"Het antwoord.\" }],\n    searchable: false,\n    jsonLd: true,\n  }),\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,2 @@
+import type { z } from "zod";
+export declare const formBlock: import("..").BlockDefinition<z.ZodTypeAny>;

package/dist/blocks/builtins/FormBlock.js

@@ -0,0 +1,221 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { doc, getDoc } from "firebase/firestore";
+import { FormBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { getDb } from "../../firebase/client";
+import { submitFormValues } from "./lib/submitForm";
+import { isDemoActive, getDemoForm } from "../../demo/demoStore";
+import { useSiteConfig } from "../../config";
+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";
+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 [def, setDef] = useState(null);
+  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;
+    }
+    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;
+    }
+    void getDoc(doc(db, "sites", siteId, "forms", block.formId)).then((s) => s.exists() ? setDef(s.data()) : setUnavailable(true)).catch(() => setUnavailable(true));
+  }, [demo, siteId, block.formId, siteMode]);
+  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" }) })
+  ] }) });
+}
+const formBlock = defineBlock({
+  type: "form",
+  schema: FormBlockSchema,
+  Render: FormRender,
+  label: "Formulier",
+  icon: "\u2709\uFE0F",
+  defaults: () => ({ formId: "" })
+});
+export {
+  formBlock
+};
+//# sourceMappingURL=FormBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/FormBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport { doc, getDoc } from \"firebase/firestore\";\nimport { FormBlockSchema } from \"../../schema/blocks\";\nimport type { FormDefinition } from \"../../schema/forms\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { getDb } from \"../../firebase/client\";\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\nfunction FormRender({ block, siteId, mode }: BlockRenderProps<FormBlk>) {\n  const siteMode = useSiteConfig().mode;\n  const [def, setDef] = useState<FormDefinition | null>(null);\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    const db = getDb();\n    if (!db) {\n      // Geen Firebase: val terug op een geregistreerd formulier, of (op een mode:\"demo\"-site) op het\n      // ingebouwde voorbeeldformulier; 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    void getDoc(doc(db, \"sites\", siteId, \"forms\", block.formId))\n      .then((s) => (s.exists() ? setDef(s.data() as FormDefinition) : setUnavailable(true)))\n      .catch(() => setUnavailable(true));\n  }, [demo, siteId, block.formId, siteMode]);\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\nexport const formBlock = defineBlock({\n  type: \"form\",\n  schema: FormBlockSchema,\n  Render: FormRender,\n  label: \"Formulier\",\n  icon: \"✉️\",\n  defaults: () => ({ formId: \"\" }),\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,23 @@
+import type { z } from "zod";
+import { GalleryBlockSchema } from "../../schema/blocks";
+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("..").BlockDefinition<z.ZodTypeAny>;
+export {};

package/dist/blocks/builtins/Gallery.js

@@ -0,0 +1,177 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { GalleryBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { useModuleSettings } from "../../modules/context";
+import { Grid } from "../ui";
+import { Img } from "../../media/ImageContext";
+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 ?? []).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", "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", "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", 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",
+  schema: GalleryBlockSchema,
+  Render: GalleryRender,
+  label: "Galerij",
+  icon: "\u{1F5BC}",
+  defaults: () => ({ items: [], columns: 0, lightbox: "inherit", aspectRatio: "1/1" })
+});
+export {
+  LightboxOverlay,
+  galleryBlock
+};
+//# sourceMappingURL=Gallery.js.map