@xiwebdesign/xicms-core 7.13.0 → 7.15.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport type { SearchBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { rankResults, highlightParts } from \"./lib/searchRank\";\nimport { useBlockData } from \"../context\";\nimport { blocksToText, type SearchEntry } from \"../searchText\";\n\ntype SearchBlock = z.infer<typeof SearchBlockSchema>;\n\ntype Entry = SearchEntry;\n\n// De tekst-vlakkers (collectStrings/blocksToText) zijn gedeeld met de server-zoekindex:\n// zie ../searchText.ts — client en server moeten exact dezelfde tekst zien.\n\n/** Site-zoek — leest gepubliceerde pagina's (en optioneel nieuws) en filtert client-side. */\nfunction SearchRender({ block, siteId }: BlockRenderProps<SearchBlock>) {\n  // Server-seed (7.12): de route levert de complete zoekindex als blockData mee. Dan is zoeken\n  // instant én gratis — de client-fetch hieronder las anders de HELE pagina-collectie per\n  // bezoeker, veruit de duurste read van het hele systeem.\n  const serverIndex = useBlockData<Entry[]>(\"searchIndex\");\n  const [entries, setEntries] = useState<Entry[]>(serverIndex ?? []);\n  const [q, setQ] = useState(\"\");\n\n  useEffect(() => {\n    if (serverIndex) return;\n    let cancelled = false;\n    (async () => {\n      // Firestore dynamisch: de zoekindex wordt pas opgebouwd wanneer het zoekblok in beeld is,\n      // dus een gewone pagina downloadt de SDK niet.\n      const [{ getDb }, { collection, getDocs, query, where }] = await Promise.all([\n        import(\"../../firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db || cancelled) return;\n      const out: Entry[] = [];\n      try {\n        const pagesSnap = await getDocs(\n          query(collection(db, `sites/${siteId}/pages`), where(\"status\", \"==\", \"published\")),\n        );\n        pagesSnap.forEach((d) => {\n          const data = d.data() as Record<string, unknown>;\n          out.push({\n            title: String(data.title ?? \"\"),\n            path: String(data.path ?? \"/\"),\n            text: blocksToText(data.blocks),\n          });\n        });\n        if (block.includeNews) {\n          const newsSnap = await getDocs(\n            query(collection(db, `sites/${siteId}/news`), where(\"published\", \"==\", true)),\n          );\n          newsSnap.forEach((d) => {\n            const data = d.data() as Record<string, unknown>;\n            out.push({\n              title: String(data.title ?? \"\"),\n              path: `/nieuws/${String(data.slug ?? d.id)}`,\n              text: String(data.excerpt ?? \"\") + \" \" + String(data.body ?? \"\").replace(/<[^>]*>/g, \" \"),\n            });\n          });\n        }\n      } catch {\n        /* stil: zonder leesrechten/Firebase blijft het zoekveld leeg */\n      }\n      if (!cancelled) setEntries(out);\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [siteId, block.includeNews, serverIndex]);\n\n  // Debounce (250ms): niet bij elke toetsaanslag opnieuw ranken/renderen.\n  const [debouncedQ, setDebouncedQ] = useState(\"\");\n  useEffect(() => {\n    const t = setTimeout(() => setDebouncedQ(q), 250);\n    return () => clearTimeout(t);\n  }, [q]);\n\n  const results = useMemo(() => rankResults(debouncedQ, entries), [entries, debouncedQ]);\n\n  const mark = (text: string) =>\n    highlightParts(text, debouncedQ).map((p, i) => (p.hit ? <mark key={i}>{p.text}</mark> : <span key={i}>{p.text}</span>));\n\n  return (\n    <div className=\"xicms-search\">\n      <TextInput\n        label={block.placeholder}\n        isLabelHidden\n        placeholder={block.placeholder}\n        value={q}\n        onChange={setQ}\n      />\n      {debouncedQ.trim() && (\n        <ul className=\"xicms-search__results\">\n          {results.length === 0 ? (\n            <li className=\"xicms-search__empty\">Niets gevonden.</li>\n          ) : (\n            results.map((r, i) => (\n              <li key={i} className=\"xicms-search__result\">\n                <a href={r.path}>{mark(r.title || r.path)}</a>\n                {r.snippet && <p className=\"xicms-search__snippet\">{mark(r.snippet)}</p>}\n              </li>\n            ))\n          )}\n        </ul>\n      )}\n    </div>\n  );\n}\n\nexport const searchBlock = defineBlock({\n  type: \"search\",\n  Render: SearchRender,\n  label: \"Zoeken\",\n  icon: \"🔍\",\n  defaults: () => ({ placeholder: \"Zoeken…\", includeNews: true }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Search.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const searchBlock = defineBlock({\n  type: \"search\",\n  Render: dynamic(() => import(\"./SearchRender\").then((m) => m.SearchRender)),\n  label: \"Zoeken\",\n  icon: \"🔍\",\n  defaults: () => ({ placeholder: \"Zoeken…\", includeNews: true }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,cAAc,YAAY;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,gBAAgB,EAAE,KAAK,CAAC,MAAM,EAAE,YAAY,CAAC;AAAA,EAC1E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,aAAa,gBAAW,aAAa,KAAK;AAC/D,CAAC;","names":[]}

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

@@ -0,0 +1,7 @@
+import type { z } from "zod";
+import type { SearchBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type SearchBlock = z.infer<typeof SearchBlockSchema>;
+/** Site-zoek — leest gepubliceerde pagina's (en optioneel nieuws) en filtert client-side. */
+export declare function SearchRender({ block, siteId }: BlockRenderProps<SearchBlock>): import("react").JSX.Element;
+export {};

package/dist/blocks/builtins/SearchRender.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { rankResults, highlightParts } from "./lib/searchRank.js";
+import { useBlockData } from "../context.js";
+import { blocksToText } from "../searchText.js";
+function SearchRender({ block, siteId }) {
+  const serverIndex = useBlockData("searchIndex");
+  const [entries, setEntries] = useState(serverIndex ?? []);
+  const [q, setQ] = useState("");
+  useEffect(() => {
+    if (serverIndex) return;
+    let cancelled = false;
+    (async () => {
+      const [{ getDb }, { collection, getDocs, query, where }] = await Promise.all([
+        import("../../firebase/client.js"),
+        import("firebase/firestore")
+      ]);
+      const db = getDb();
+      if (!db || cancelled) return;
+      const out = [];
+      try {
+        const pagesSnap = await getDocs(
+          query(collection(db, `sites/${siteId}/pages`), where("status", "==", "published"))
+        );
+        pagesSnap.forEach((d) => {
+          const data = d.data();
+          out.push({
+            title: String(data.title ?? ""),
+            path: String(data.path ?? "/"),
+            text: blocksToText(data.blocks)
+          });
+        });
+        if (block.includeNews) {
+          const newsSnap = await getDocs(
+            query(collection(db, `sites/${siteId}/news`), where("published", "==", true))
+          );
+          newsSnap.forEach((d) => {
+            const data = d.data();
+            out.push({
+              title: String(data.title ?? ""),
+              path: `/nieuws/${String(data.slug ?? d.id)}`,
+              text: String(data.excerpt ?? "") + " " + String(data.body ?? "").replace(/<[^>]*>/g, " ")
+            });
+          });
+        }
+      } catch {
+      }
+      if (!cancelled) setEntries(out);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [siteId, block.includeNews, serverIndex]);
+  const [debouncedQ, setDebouncedQ] = useState("");
+  useEffect(() => {
+    const t = setTimeout(() => setDebouncedQ(q), 250);
+    return () => clearTimeout(t);
+  }, [q]);
+  const results = useMemo(() => rankResults(debouncedQ, entries), [entries, debouncedQ]);
+  const mark = (text) => highlightParts(text, debouncedQ).map((p, i) => p.hit ? /* @__PURE__ */ jsx("mark", { children: p.text }, i) : /* @__PURE__ */ jsx("span", { children: p.text }, i));
+  return /* @__PURE__ */ jsxs("div", { className: "xicms-search", children: [
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: block.placeholder,
+        isLabelHidden: true,
+        placeholder: block.placeholder,
+        value: q,
+        onChange: setQ
+      }
+    ),
+    debouncedQ.trim() && /* @__PURE__ */ jsx("ul", { className: "xicms-search__results", children: results.length === 0 ? /* @__PURE__ */ jsx("li", { className: "xicms-search__empty", children: "Niets gevonden." }) : results.map((r, i) => /* @__PURE__ */ jsxs("li", { className: "xicms-search__result", children: [
+      /* @__PURE__ */ jsx("a", { href: r.path, children: mark(r.title || r.path) }),
+      r.snippet && /* @__PURE__ */ jsx("p", { className: "xicms-search__snippet", children: mark(r.snippet) })
+    ] }, i)) })
+  ] });
+}
+export {
+  SearchRender
+};
+//# sourceMappingURL=SearchRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/SearchRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport type { SearchBlockSchema } from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { rankResults, highlightParts } from \"./lib/searchRank\";\nimport { useBlockData } from \"../context\";\nimport { blocksToText, type SearchEntry } from \"../searchText\";\n\ntype SearchBlock = z.infer<typeof SearchBlockSchema>;\n\ntype Entry = SearchEntry;\n\n// De tekst-vlakkers (collectStrings/blocksToText) zijn gedeeld met de server-zoekindex:\n// zie ../searchText.ts — client en server moeten exact dezelfde tekst zien.\n\n/** Site-zoek — leest gepubliceerde pagina's (en optioneel nieuws) en filtert client-side. */\nexport function SearchRender({ block, siteId }: BlockRenderProps<SearchBlock>) {\n  // Server-seed (7.12): de route levert de complete zoekindex als blockData mee. Dan is zoeken\n  // instant én gratis — de client-fetch hieronder las anders de HELE pagina-collectie per\n  // bezoeker, veruit de duurste read van het hele systeem.\n  const serverIndex = useBlockData<Entry[]>(\"searchIndex\");\n  const [entries, setEntries] = useState<Entry[]>(serverIndex ?? []);\n  const [q, setQ] = useState(\"\");\n\n  useEffect(() => {\n    if (serverIndex) return;\n    let cancelled = false;\n    (async () => {\n      // Firestore dynamisch: de zoekindex wordt pas opgebouwd wanneer het zoekblok in beeld is,\n      // dus een gewone pagina downloadt de SDK niet.\n      const [{ getDb }, { collection, getDocs, query, where }] = await Promise.all([\n        import(\"../../firebase/client\"),\n        import(\"firebase/firestore\"),\n      ]);\n      const db = getDb();\n      if (!db || cancelled) return;\n      const out: Entry[] = [];\n      try {\n        const pagesSnap = await getDocs(\n          query(collection(db, `sites/${siteId}/pages`), where(\"status\", \"==\", \"published\")),\n        );\n        pagesSnap.forEach((d) => {\n          const data = d.data() as Record<string, unknown>;\n          out.push({\n            title: String(data.title ?? \"\"),\n            path: String(data.path ?? \"/\"),\n            text: blocksToText(data.blocks),\n          });\n        });\n        if (block.includeNews) {\n          const newsSnap = await getDocs(\n            query(collection(db, `sites/${siteId}/news`), where(\"published\", \"==\", true)),\n          );\n          newsSnap.forEach((d) => {\n            const data = d.data() as Record<string, unknown>;\n            out.push({\n              title: String(data.title ?? \"\"),\n              path: `/nieuws/${String(data.slug ?? d.id)}`,\n              text: String(data.excerpt ?? \"\") + \" \" + String(data.body ?? \"\").replace(/<[^>]*>/g, \" \"),\n            });\n          });\n        }\n      } catch {\n        /* stil: zonder leesrechten/Firebase blijft het zoekveld leeg */\n      }\n      if (!cancelled) setEntries(out);\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [siteId, block.includeNews, serverIndex]);\n\n  // Debounce (250ms): niet bij elke toetsaanslag opnieuw ranken/renderen.\n  const [debouncedQ, setDebouncedQ] = useState(\"\");\n  useEffect(() => {\n    const t = setTimeout(() => setDebouncedQ(q), 250);\n    return () => clearTimeout(t);\n  }, [q]);\n\n  const results = useMemo(() => rankResults(debouncedQ, entries), [entries, debouncedQ]);\n\n  const mark = (text: string) =>\n    highlightParts(text, debouncedQ).map((p, i) => (p.hit ? <mark key={i}>{p.text}</mark> : <span key={i}>{p.text}</span>));\n\n  return (\n    <div className=\"xicms-search\">\n      <TextInput\n        label={block.placeholder}\n        isLabelHidden\n        placeholder={block.placeholder}\n        value={q}\n        onChange={setQ}\n      />\n      {debouncedQ.trim() && (\n        <ul className=\"xicms-search__results\">\n          {results.length === 0 ? (\n            <li className=\"xicms-search__empty\">Niets gevonden.</li>\n          ) : (\n            results.map((r, i) => (\n              <li key={i} className=\"xicms-search__result\">\n                <a href={r.path}>{mark(r.title || r.path)}</a>\n                {r.snippet && <p className=\"xicms-search__snippet\">{mark(r.snippet)}</p>}\n              </li>\n            ))\n          )}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAqF4D,cAiB9C,YAjB8C;AAnF5D,SAAS,WAAW,SAAS,gBAAgB;AAI7C,SAAS,iBAAiB;AAC1B,SAAS,aAAa,sBAAsB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,oBAAsC;AAUxC,SAAS,aAAa,EAAE,OAAO,OAAO,GAAkC;AAI7E,QAAM,cAAc,aAAsB,aAAa;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAkB,eAAe,CAAC,CAAC;AACjE,QAAM,CAAC,GAAG,IAAI,IAAI,SAAS,EAAE;AAE7B,YAAU,MAAM;AACd,QAAI,YAAa;AACjB,QAAI,YAAY;AAChB,KAAC,YAAY;AAGX,YAAM,CAAC,EAAE,MAAM,GAAG,EAAE,YAAY,SAAS,OAAO,MAAM,CAAC,IAAI,MAAM,QAAQ,IAAI;AAAA,QAC3E,OAAO,uBAAuB;AAAA,QAC9B,OAAO,oBAAoB;AAAA,MAC7B,CAAC;AACD,YAAM,KAAK,MAAM;AACjB,UAAI,CAAC,MAAM,UAAW;AACtB,YAAM,MAAe,CAAC;AACtB,UAAI;AACF,cAAM,YAAY,MAAM;AAAA,UACtB,MAAM,WAAW,IAAI,SAAS,MAAM,QAAQ,GAAG,MAAM,UAAU,MAAM,WAAW,CAAC;AAAA,QACnF;AACA,kBAAU,QAAQ,CAAC,MAAM;AACvB,gBAAM,OAAO,EAAE,KAAK;AACpB,cAAI,KAAK;AAAA,YACP,OAAO,OAAO,KAAK,SAAS,EAAE;AAAA,YAC9B,MAAM,OAAO,KAAK,QAAQ,GAAG;AAAA,YAC7B,MAAM,aAAa,KAAK,MAAM;AAAA,UAChC,CAAC;AAAA,QACH,CAAC;AACD,YAAI,MAAM,aAAa;AACrB,gBAAM,WAAW,MAAM;AAAA,YACrB,MAAM,WAAW,IAAI,SAAS,MAAM,OAAO,GAAG,MAAM,aAAa,MAAM,IAAI,CAAC;AAAA,UAC9E;AACA,mBAAS,QAAQ,CAAC,MAAM;AACtB,kBAAM,OAAO,EAAE,KAAK;AACpB,gBAAI,KAAK;AAAA,cACP,OAAO,OAAO,KAAK,SAAS,EAAE;AAAA,cAC9B,MAAM,WAAW,OAAO,KAAK,QAAQ,EAAE,EAAE,CAAC;AAAA,cAC1C,MAAM,OAAO,KAAK,WAAW,EAAE,IAAI,MAAM,OAAO,KAAK,QAAQ,EAAE,EAAE,QAAQ,YAAY,GAAG;AAAA,YAC1F,CAAC;AAAA,UACH,CAAC;AAAA,QACH;AAAA,MACF,QAAQ;AAAA,MAER;AACA,UAAI,CAAC,UAAW,YAAW,GAAG;AAAA,IAChC,GAAG;AACH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,QAAQ,MAAM,aAAa,WAAW,CAAC;AAG3C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,YAAU,MAAM;AACd,UAAM,IAAI,WAAW,MAAM,cAAc,CAAC,GAAG,GAAG;AAChD,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,CAAC,CAAC;AAEN,QAAM,UAAU,QAAQ,MAAM,YAAY,YAAY,OAAO,GAAG,CAAC,SAAS,UAAU,CAAC;AAErF,QAAM,OAAO,CAAC,SACZ,eAAe,MAAM,UAAU,EAAE,IAAI,CAAC,GAAG,MAAO,EAAE,MAAM,oBAAC,UAAc,YAAE,QAAN,CAAW,IAAU,oBAAC,UAAc,YAAE,QAAN,CAAW,CAAQ;AAExH,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,MAAM;AAAA,QACb,eAAa;AAAA,QACb,aAAa,MAAM;AAAA,QACnB,OAAO;AAAA,QACP,UAAU;AAAA;AAAA,IACZ;AAAA,IACC,WAAW,KAAK,KACf,oBAAC,QAAG,WAAU,yBACX,kBAAQ,WAAW,IAClB,oBAAC,QAAG,WAAU,uBAAsB,6BAAe,IAEnD,QAAQ,IAAI,CAAC,GAAG,MACd,qBAAC,QAAW,WAAU,wBACpB;AAAA,0BAAC,OAAE,MAAM,EAAE,MAAO,eAAK,EAAE,SAAS,EAAE,IAAI,GAAE;AAAA,MACzC,EAAE,WAAW,oBAAC,OAAE,WAAU,yBAAyB,eAAK,EAAE,OAAO,GAAE;AAAA,SAF7D,CAGT,CACD,GAEL;AAAA,KAEJ;AAEJ;","names":[]}

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

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

package/dist/blocks/builtins/Sections.js

@@ -1,167 +1,30 @@
-"use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import { defineBlock } from "../registry.js";
-import { VStack, HStack, Grid, Heading, Text, Btn } from "../ui/index.js";
-import { Img } from "../../media/ImageContext.js";
-function FeatureRender({ block }) {
-  const media = block.imageUrl ? /* @__PURE__ */ jsx(
-    Img,
-    {
-      src: block.imageUrl,
-      alt: "",
-      width: 900,
-      height: 700,
-      sizes: "(max-width: 720px) 100vw, 50vw",
-      editField: "imageUrl",
-      style: { width: "100%", height: "100%", maxHeight: 460, objectFit: "cover", borderRadius: "var(--radius-container)" }
-    }
-  ) : null;
-  const body = /* @__PURE__ */ jsxs(VStack, { gap: 3, vAlign: "center", children: [
-    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
-    block.html && // eslint-disable-next-line react/no-danger
-    /* @__PURE__ */ jsx("div", { className: "xicms-richtext", dangerouslySetInnerHTML: { __html: block.html } }),
-    block.buttonLabel && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref ?? "#", variant: "primary", editField: "buttonLabel" }) })
-  ] });
-  return /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 320, max: 2 }, gap: 5, className: "xicms-feature", children: block.imagePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    media,
-    body
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    body,
-    media
-  ] }) });
-}
 const featureBlock = defineBlock({
   type: "feature",
-  Render: FeatureRender,
+  Render: dynamic(() => import("./SectionsRender.js").then((m) => m.FeatureRender)),
   label: "Beeld + tekst",
   icon: "\u{1F9F1}",
   defaults: () => ({ heading: "Kop", html: "<p>Tekst\u2026</p>", imagePosition: "left" })
 });
-function CountUpValue({ value, animate }) {
-  const target = Number(value.replace(",", "."));
-  const decimals = /[.,](\d+)/.exec(value)?.[1].length ?? 0;
-  const [display, setDisplay] = useState(value);
-  const ref = useRef(null);
-  const started = useRef(false);
-  useEffect(() => {
-    const canAnimate = animate && Number.isFinite(target) && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-    if (!canAnimate || !ref.current) {
-      setDisplay(value);
-      return;
-    }
-    const el = ref.current;
-    let raf = 0;
-    const obs = new IntersectionObserver((entries) => {
-      if (!entries.some((e) => e.isIntersecting) || started.current) return;
-      started.current = true;
-      obs.disconnect();
-      const t0 = performance.now();
-      const duration = 1200;
-      const tick = (t) => {
-        const p = Math.min(1, (t - t0) / duration);
-        const eased = 1 - Math.pow(1 - p, 3);
-        setDisplay(p < 1 ? (target * eased).toFixed(decimals).replace(".", ",") : value);
-        if (p < 1) raf = requestAnimationFrame(tick);
-      };
-      raf = requestAnimationFrame(tick);
-    });
-    obs.observe(el);
-    return () => {
-      obs.disconnect();
-      cancelAnimationFrame(raf);
-    };
-  }, [animate, target, decimals, value]);
-  return /* @__PURE__ */ jsx("span", { ref, children: display });
-}
-function CountersRender({ block, mode }) {
-  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.value || i.label);
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-counters", children: [
-    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, justify: "center", "data-xicms-edit": "heading", style: { textAlign: "center" }, children: block.heading }),
-    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 150 }, gap: 4, children: items.map((it) => /* @__PURE__ */ jsxs(VStack, { gap: 0.5, hAlign: "center", style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsxs(Heading, { level: 2, className: "xicms-counters__value", children: [
-        /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${it._i}.prefix`, children: it.prefix }),
-        /* @__PURE__ */ jsx(CountUpValue, { value: it.value, animate: block.animate !== false && mode !== "preview" }),
-        /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${it._i}.suffix`, children: it.suffix })
-      ] }),
-      /* @__PURE__ */ jsx(Text, { color: "secondary", "data-xicms-edit": `items.${it._i}.label`, children: it.label })
-    ] }, it._i)) })
-  ] });
-}
 const countersBlock = defineBlock({
   type: "counters",
-  Render: CountersRender,
+  Render: dynamic(() => import("./SectionsRender.js").then((m) => m.CountersRender)),
   label: "Tellers",
   icon: "\u{1F522}",
   defaults: () => ({ items: [{ value: "100", label: "Tevreden klanten", suffix: "+" }] })
 });
-function LogosRender({ block }) {
-  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.src);
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs(VStack, { gap: 3, as: "section", hAlign: "center", className: "xicms-logos", children: [
-    block.heading && /* @__PURE__ */ jsx(Text, { type: "label", color: "secondary", style: { textTransform: "uppercase", letterSpacing: "0.06em" }, children: block.heading }),
-    (() => {
-      const row = (ariaHidden) => /* @__PURE__ */ jsx(
-        HStack,
-        {
-          gap: 6,
-          hAlign: "center",
-          vAlign: "center",
-          className: block.marquee ? "xicms-logos__row" : void 0,
-          style: block.marquee ? void 0 : { flexWrap: "wrap" },
-          "aria-hidden": ariaHidden || void 0,
-          children: items.map((it) => {
-            const i = it._i;
-            const img = /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: it.src,
-                alt: ariaHidden ? "" : it.alt,
-                width: 160,
-                height: 48,
-                editField: ariaHidden ? void 0 : `items.${i}.src`,
-                style: { height: 40, width: "auto", objectFit: "contain", filter: block.grayscale ? "grayscale(1)" : void 0, opacity: block.grayscale ? 0.7 : 1 }
-              }
-            );
-            return it.href && !ariaHidden ? /* @__PURE__ */ jsx("a", { href: it.href, rel: "noopener noreferrer", target: "_blank", children: img }, i) : /* @__PURE__ */ jsx("span", { children: img }, i);
-          })
-        }
-      );
-      if (!block.marquee) return row(false);
-      return /* @__PURE__ */ jsx("div", { className: "xicms-logos__marquee", children: /* @__PURE__ */ jsxs("div", { className: "xicms-logos__track", children: [
-        row(false),
-        row(true)
-      ] }) });
-    })()
-  ] });
-}
 const logosBlock = defineBlock({
   type: "logos",
   fields: { "items.src": { type: "image" } },
-  Render: LogosRender,
+  Render: dynamic(() => import("./SectionsRender.js").then((m) => m.LogosRender)),
   label: "Logo's",
   icon: "\u{1F3F7}\uFE0F",
   defaults: () => ({ items: [], grayscale: true })
 });
-function TimelineRender({ block }) {
-  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.title);
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: `xicms-timeline${block.alternate ? " xicms-timeline--alternate" : ""}`, children: [
-    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
-    /* @__PURE__ */ jsx("ol", { className: "xicms-timeline__list", children: items.map((it, i) => /* @__PURE__ */ jsxs("li", { className: "xicms-timeline__item", children: [
-      /* @__PURE__ */ jsx("span", { className: "xicms-timeline__marker", "aria-hidden": true, children: it.icon || "\u25CF" }),
-      /* @__PURE__ */ jsxs(VStack, { gap: 0.5, className: "xicms-timeline__body", children: [
-        it.date && /* @__PURE__ */ jsx(Text, { type: "label", style: { color: "var(--color-accent)" }, "data-xicms-edit": `items.${it._i}.date`, children: it.date }),
-        /* @__PURE__ */ jsx(Heading, { level: 3, "data-xicms-edit": `items.${it._i}.title`, children: it.title }),
-        it.text && /* @__PURE__ */ jsx(Text, { color: "secondary", "data-xicms-edit": `items.${it._i}.text`, children: it.text })
-      ] })
-    ] }, i)) })
-  ] });
-}
 const timelineBlock = defineBlock({
   type: "timeline",
-  Render: TimelineRender,
+  Render: dynamic(() => import("./SectionsRender.js").then((m) => m.TimelineRender)),
   label: "Tijdlijn",
   icon: "\u{1F4CD}",
   defaults: () => ({ items: [{ title: "Stap 1", text: "" }] })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Sections.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { z } from \"zod\";\nimport type {\n  FeatureBlockSchema,\n  CountersBlockSchema,\n  LogosBlockSchema,\n  TimelineBlockSchema,\n} from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Grid, Heading, Text, Btn } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\n/* ── Feature (beeld + tekst) ─────────────────────────────────────────────── */\ntype Feature = z.infer<typeof FeatureBlockSchema>;\nfunction FeatureRender({ block }: BlockRenderProps<Feature>) {\n  const media = block.imageUrl ? (\n    <Img\n      src={block.imageUrl}\n      alt=\"\"\n      width={900}\n      height={700}\n      sizes=\"(max-width: 720px) 100vw, 50vw\"\n      editField=\"imageUrl\"\n      style={{ width: \"100%\", height: \"100%\", maxHeight: 460, objectFit: \"cover\", borderRadius: \"var(--radius-container)\" }}\n    />\n  ) : null;\n  const body = (\n    <VStack gap={3} vAlign=\"center\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      {block.html && (\n        // eslint-disable-next-line react/no-danger\n        <div className=\"xicms-richtext\" dangerouslySetInnerHTML={{ __html: block.html }} />\n      )}\n      {block.buttonLabel && (\n        <div><Btn label={block.buttonLabel} href={block.buttonHref ?? \"#\"} variant=\"primary\" editField=\"buttonLabel\" /></div>\n      )}\n    </VStack>\n  );\n  return (\n    <Grid columns={{ minWidth: 320, max: 2 }} gap={5} className=\"xicms-feature\">\n      {block.imagePosition === \"left\" ? (\n        <>\n          {media}\n          {body}\n        </>\n      ) : (\n        <>\n          {body}\n          {media}\n        </>\n      )}\n    </Grid>\n  );\n}\nexport const featureBlock = defineBlock({\n  type: \"feature\",\n  Render: FeatureRender,\n  label: \"Beeld + tekst\",\n  icon: \"🧱\",\n  defaults: () => ({ heading: \"Kop\", html: \"<p>Tekst…</p>\", imagePosition: \"left\" }),\n});\n\n/* ── Counters (tellers) ──────────────────────────────────────────────────── */\ntype Counters = z.infer<typeof CountersBlockSchema>;\n\n/**\n * Telt van 0 naar `value` (rAF, ease-out) zodra het element in beeld scrolt. Niet-numerieke\n * waarden en reduced-motion tonen direct de eindwaarde; decimalen volgen de invoer (\"4.9\" → 1 dec).\n *\n * HYDRATION-VEILIG: de starttekst is ALTIJD `value` (server en client identiek); pas in het\n * effect (client-only) springt hij naar \"0\" en start de animatie. De vorige opzet initialiseerde\n * client-side op \"0\" → server \"13\" ≠ client \"0\" ≠ hydration-mismatch op elke tellers-pagina.\n */\nfunction CountUpValue({ value, animate }: { value: string; animate: boolean }) {\n  const target = Number(value.replace(\",\", \".\"));\n  const decimals = /[.,](\\d+)/.exec(value)?.[1].length ?? 0;\n  const [display, setDisplay] = useState(value);\n  const ref = useRef<HTMLSpanElement>(null);\n  const started = useRef(false);\n\n  useEffect(() => {\n    const canAnimate =\n      animate && Number.isFinite(target) && !window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n    if (!canAnimate || !ref.current) {\n      // Volg latere waarde-wijzigingen (bv. bewerken in de editor-preview) ook zonder animatie.\n      setDisplay(value);\n      return;\n    }\n    const el = ref.current;\n    let raf = 0;\n    const obs = new IntersectionObserver((entries) => {\n      if (!entries.some((e) => e.isIntersecting) || started.current) return;\n      started.current = true;\n      obs.disconnect();\n      const t0 = performance.now();\n      const duration = 1200;\n      const tick = (t: number) => {\n        const p = Math.min(1, (t - t0) / duration);\n        const eased = 1 - Math.pow(1 - p, 3);\n        setDisplay(p < 1 ? (target * eased).toFixed(decimals).replace(\".\", \",\") : value);\n        if (p < 1) raf = requestAnimationFrame(tick);\n      };\n      raf = requestAnimationFrame(tick);\n    });\n    obs.observe(el);\n    return () => {\n      obs.disconnect();\n      cancelAnimationFrame(raf);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animate, target, decimals, value]);\n\n  return <span ref={ref}>{display}</span>;\n}\n\nfunction CountersRender({ block, mode }: BlockRenderProps<Counters>) {\n  // _i = index in de OORSPRONKELIJKE array — de lijst wordt gefilterd op value || label.\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.value || i.label);\n  if (items.length === 0) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-counters\">\n      {block.heading && (\n        <Heading level={2} justify=\"center\" data-xicms-edit=\"heading\" style={{ textAlign: \"center\" }}>{block.heading}</Heading>\n      )}\n      <Grid columns={{ minWidth: 150 }} gap={4}>\n        {items.map((it) => (\n          <VStack key={it._i} gap={0.5} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n            <Heading level={2} className=\"xicms-counters__value\">\n              <span data-xicms-edit={`items.${it._i}.prefix`}>{it.prefix}</span>\n              {/* In de editor-preview geen animatie (mode-contract: licht en voorspelbaar). */}\n              <CountUpValue value={it.value} animate={block.animate !== false && mode !== \"preview\"} />\n              <span data-xicms-edit={`items.${it._i}.suffix`}>{it.suffix}</span>\n            </Heading>\n            <Text color=\"secondary\" data-xicms-edit={`items.${it._i}.label`}>{it.label}</Text>\n          </VStack>\n        ))}\n      </Grid>\n    </VStack>\n  );\n}\nexport const countersBlock = defineBlock({\n  type: \"counters\",\n  Render: CountersRender,\n  label: \"Tellers\",\n  icon: \"🔢\",\n  defaults: () => ({ items: [{ value: \"100\", label: \"Tevreden klanten\", suffix: \"+\" }] }),\n});\n\n/* ── Logos (partner-/logostrip) ──────────────────────────────────────────── */\ntype Logos = z.infer<typeof LogosBlockSchema>;\nfunction LogosRender({ block }: BlockRenderProps<Logos>) {\n  // _i = index in de OORSPRONKELIJKE array — nodig voor het inline vervang-pad (items.N.src).\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.src);\n  if (items.length === 0) return null;\n  return (\n    <VStack gap={3} as=\"section\" hAlign=\"center\" className=\"xicms-logos\">\n      {block.heading && (\n        <Text type=\"label\" color=\"secondary\" style={{ textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>\n          {block.heading}\n        </Text>\n      )}\n      {(() => {\n        const row = (ariaHidden: boolean) => (\n          <HStack\n            gap={6}\n            hAlign=\"center\"\n            vAlign=\"center\"\n            className={block.marquee ? \"xicms-logos__row\" : undefined}\n            style={block.marquee ? undefined : { flexWrap: \"wrap\" }}\n            aria-hidden={ariaHidden || undefined}\n          >\n            {items.map((it) => {\n              const i = it._i;\n              const img = (\n                <Img\n                  src={it.src}\n                  alt={ariaHidden ? \"\" : it.alt}\n                  width={160}\n                  height={48}\n                  editField={ariaHidden ? undefined : `items.${i}.src`}\n                  style={{ height: 40, width: \"auto\", objectFit: \"contain\", filter: block.grayscale ? \"grayscale(1)\" : undefined, opacity: block.grayscale ? 0.7 : 1 }}\n                />\n              );\n              return it.href && !ariaHidden ? (\n                <a key={i} href={it.href} rel=\"noopener noreferrer\" target=\"_blank\">{img}</a>\n              ) : (\n                <span key={i}>{img}</span>\n              );\n            })}\n          </HStack>\n        );\n        if (!block.marquee) return row(false);\n        // Doorlopende band: de rij + een aria-hidden kopie schuiven samen 50% op (naadloze loop).\n        // CSS pauzeert bij hover en staat stil bij prefers-reduced-motion.\n        return (\n          <div className=\"xicms-logos__marquee\">\n            <div className=\"xicms-logos__track\">\n              {row(false)}\n              {row(true)}\n            </div>\n          </div>\n        );\n      })()}\n    </VStack>\n  );\n}\nexport const logosBlock = defineBlock({\n  type: \"logos\",\n  fields: { \"items.src\": { type: \"image\" } },\n  Render: LogosRender,\n  label: \"Logo's\",\n  icon: \"🏷️\",\n  defaults: () => ({ items: [], grayscale: true }),\n});\n\n/* ── Timeline (stappen) ──────────────────────────────────────────────────── */\ntype Timeline = z.infer<typeof TimelineBlockSchema>;\nfunction TimelineRender({ block }: BlockRenderProps<Timeline>) {\n  // `_i` = ORIGINELE index (items zijn gefilterd op titel): inline edits moeten naar het juiste\n  // item in de opgeslagen array schrijven — zelfde patroon als Team/Cards.\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.title);\n  if (items.length === 0) return null;\n  return (\n    <VStack gap={4} as=\"section\" className={`xicms-timeline${block.alternate ? \" xicms-timeline--alternate\" : \"\"}`}>\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <ol className=\"xicms-timeline__list\">\n        {items.map((it, i) => (\n          <li key={i} className=\"xicms-timeline__item\">\n            <span className=\"xicms-timeline__marker\" aria-hidden>{it.icon || \"●\"}</span>\n            <VStack gap={0.5} className=\"xicms-timeline__body\">\n              {it.date && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }} data-xicms-edit={`items.${it._i}.date`}>{it.date}</Text>\n              )}\n              <Heading level={3} data-xicms-edit={`items.${it._i}.title`}>{it.title}</Heading>\n              {it.text && <Text color=\"secondary\" data-xicms-edit={`items.${it._i}.text`}>{it.text}</Text>}\n            </VStack>\n          </li>\n        ))}\n      </ol>\n    </VStack>\n  );\n}\nexport const timelineBlock = defineBlock({\n  type: \"timeline\",\n  Render: TimelineRender,\n  label: \"Tijdlijn\",\n  icon: \"📍\",\n  defaults: () => ({ items: [{ title: \"Stap 1\", text: \"\" }] }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Sections.tsx"],"sourcesContent":["import dynamic from \"next/dynamic\";\nimport { defineBlock } from \"../registry\";\n\nexport const featureBlock = defineBlock({\n  type: \"feature\",\n  Render: dynamic(() => import(\"./SectionsRender\").then((m) => m.FeatureRender)),\n  label: \"Beeld + tekst\",\n  icon: \"🧱\",\n  defaults: () => ({ heading: \"Kop\", html: \"<p>Tekst…</p>\", imagePosition: \"left\" }),\n});\n\nexport const countersBlock = defineBlock({\n  type: \"counters\",\n  Render: dynamic(() => import(\"./SectionsRender\").then((m) => m.CountersRender)),\n  label: \"Tellers\",\n  icon: \"🔢\",\n  defaults: () => ({ items: [{ value: \"100\", label: \"Tevreden klanten\", suffix: \"+\" }] }),\n});\n\nexport const logosBlock = defineBlock({\n  type: \"logos\",\n  fields: { \"items.src\": { type: \"image\" } },\n  Render: dynamic(() => import(\"./SectionsRender\").then((m) => m.LogosRender)),\n  label: \"Logo's\",\n  icon: \"🏷️\",\n  defaults: () => ({ items: [], grayscale: true }),\n});\n\nexport const timelineBlock = defineBlock({\n  type: \"timeline\",\n  Render: dynamic(() => import(\"./SectionsRender\").then((m) => m.TimelineRender)),\n  label: \"Tijdlijn\",\n  icon: \"📍\",\n  defaults: () => ({ items: [{ title: \"Stap 1\", text: \"\" }] }),\n});\n"],"mappings":"AAAA,OAAO,aAAa;AACpB,SAAS,mBAAmB;AAErB,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,MAAM,EAAE,aAAa,CAAC;AAAA,EAC7E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,SAAS,OAAO,MAAM,sBAAiB,eAAe,OAAO;AAClF,CAAC;AAEM,MAAM,gBAAgB,YAAY;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,MAAM,EAAE,cAAc,CAAC;AAAA,EAC9E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,OAAO,OAAO,oBAAoB,QAAQ,IAAI,CAAC,EAAE;AACvF,CAAC;AAEM,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,EAAE,aAAa,EAAE,MAAM,QAAQ,EAAE;AAAA,EACzC,QAAQ,QAAQ,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,MAAM,EAAE,WAAW,CAAC;AAAA,EAC3E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,CAAC,GAAG,WAAW,KAAK;AAChD,CAAC;AAEM,MAAM,gBAAgB,YAAY;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ,QAAQ,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,MAAM,EAAE,cAAc,CAAC;AAAA,EAC9E,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,CAAC,EAAE,OAAO,UAAU,MAAM,GAAG,CAAC,EAAE;AAC5D,CAAC;","names":[]}

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

@@ -0,0 +1,12 @@
+import type { z } from "zod";
+import type { FeatureBlockSchema, CountersBlockSchema, LogosBlockSchema, TimelineBlockSchema } from "../../schema/blocks.js";
+import type { BlockRenderProps } from "../registry.js";
+type Feature = z.infer<typeof FeatureBlockSchema>;
+export declare function FeatureRender({ block }: BlockRenderProps<Feature>): import("react").JSX.Element;
+type Counters = z.infer<typeof CountersBlockSchema>;
+export declare function CountersRender({ block, mode }: BlockRenderProps<Counters>): import("react").JSX.Element | null;
+type Logos = z.infer<typeof LogosBlockSchema>;
+export declare function LogosRender({ block }: BlockRenderProps<Logos>): import("react").JSX.Element | null;
+type Timeline = z.infer<typeof TimelineBlockSchema>;
+export declare function TimelineRender({ block }: BlockRenderProps<Timeline>): import("react").JSX.Element | null;
+export {};

package/dist/blocks/builtins/SectionsRender.js

@@ -0,0 +1,145 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { VStack, HStack, Grid, Heading, Text, Btn } from "../ui/index.js";
+import { Img } from "../../media/ImageContext.js";
+function FeatureRender({ block }) {
+  const media = block.imageUrl ? /* @__PURE__ */ jsx(
+    Img,
+    {
+      src: block.imageUrl,
+      alt: "",
+      width: 900,
+      height: 700,
+      sizes: "(max-width: 720px) 100vw, 50vw",
+      editField: "imageUrl",
+      style: { width: "100%", height: "100%", maxHeight: 460, objectFit: "cover", borderRadius: "var(--radius-container)" }
+    }
+  ) : null;
+  const body = /* @__PURE__ */ jsxs(VStack, { gap: 3, vAlign: "center", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    block.html && // eslint-disable-next-line react/no-danger
+    /* @__PURE__ */ jsx("div", { className: "xicms-richtext", dangerouslySetInnerHTML: { __html: block.html } }),
+    block.buttonLabel && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Btn, { label: block.buttonLabel, href: block.buttonHref ?? "#", variant: "primary", editField: "buttonLabel" }) })
+  ] });
+  return /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 320, max: 2 }, gap: 5, className: "xicms-feature", children: block.imagePosition === "left" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    media,
+    body
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    body,
+    media
+  ] }) });
+}
+function CountUpValue({ value, animate }) {
+  const target = Number(value.replace(",", "."));
+  const decimals = /[.,](\d+)/.exec(value)?.[1].length ?? 0;
+  const [display, setDisplay] = useState(value);
+  const ref = useRef(null);
+  const started = useRef(false);
+  useEffect(() => {
+    const canAnimate = animate && Number.isFinite(target) && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!canAnimate || !ref.current) {
+      setDisplay(value);
+      return;
+    }
+    const el = ref.current;
+    let raf = 0;
+    const obs = new IntersectionObserver((entries) => {
+      if (!entries.some((e) => e.isIntersecting) || started.current) return;
+      started.current = true;
+      obs.disconnect();
+      const t0 = performance.now();
+      const duration = 1200;
+      const tick = (t) => {
+        const p = Math.min(1, (t - t0) / duration);
+        const eased = 1 - Math.pow(1 - p, 3);
+        setDisplay(p < 1 ? (target * eased).toFixed(decimals).replace(".", ",") : value);
+        if (p < 1) raf = requestAnimationFrame(tick);
+      };
+      raf = requestAnimationFrame(tick);
+    });
+    obs.observe(el);
+    return () => {
+      obs.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [animate, target, decimals, value]);
+  return /* @__PURE__ */ jsx("span", { ref, children: display });
+}
+function CountersRender({ block, mode }) {
+  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.value || i.label);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-counters", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, justify: "center", "data-xicms-edit": "heading", style: { textAlign: "center" }, children: block.heading }),
+    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 150 }, gap: 4, children: items.map((it) => /* @__PURE__ */ jsxs(VStack, { gap: 0.5, hAlign: "center", style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxs(Heading, { level: 2, className: "xicms-counters__value", children: [
+        /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${it._i}.prefix`, children: it.prefix }),
+        /* @__PURE__ */ jsx(CountUpValue, { value: it.value, animate: block.animate !== false && mode !== "preview" }),
+        /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${it._i}.suffix`, children: it.suffix })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color: "secondary", "data-xicms-edit": `items.${it._i}.label`, children: it.label })
+    ] }, it._i)) })
+  ] });
+}
+function LogosRender({ block }) {
+  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.src);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(VStack, { gap: 3, as: "section", hAlign: "center", className: "xicms-logos", children: [
+    block.heading && /* @__PURE__ */ jsx(Text, { type: "label", color: "secondary", style: { textTransform: "uppercase", letterSpacing: "0.06em" }, children: block.heading }),
+    (() => {
+      const row = (ariaHidden) => /* @__PURE__ */ jsx(
+        HStack,
+        {
+          gap: 6,
+          hAlign: "center",
+          vAlign: "center",
+          className: block.marquee ? "xicms-logos__row" : void 0,
+          style: block.marquee ? void 0 : { flexWrap: "wrap" },
+          "aria-hidden": ariaHidden || void 0,
+          children: items.map((it) => {
+            const i = it._i;
+            const img = /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: it.src,
+                alt: ariaHidden ? "" : it.alt,
+                width: 160,
+                height: 48,
+                editField: ariaHidden ? void 0 : `items.${i}.src`,
+                style: { height: 40, width: "auto", objectFit: "contain", filter: block.grayscale ? "grayscale(1)" : void 0, opacity: block.grayscale ? 0.7 : 1 }
+              }
+            );
+            return it.href && !ariaHidden ? /* @__PURE__ */ jsx("a", { href: it.href, rel: "noopener noreferrer", target: "_blank", children: img }, i) : /* @__PURE__ */ jsx("span", { children: img }, i);
+          })
+        }
+      );
+      if (!block.marquee) return row(false);
+      return /* @__PURE__ */ jsx("div", { className: "xicms-logos__marquee", children: /* @__PURE__ */ jsxs("div", { className: "xicms-logos__track", children: [
+        row(false),
+        row(true)
+      ] }) });
+    })()
+  ] });
+}
+function TimelineRender({ block }) {
+  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.title);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: `xicms-timeline${block.alternate ? " xicms-timeline--alternate" : ""}`, children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    /* @__PURE__ */ jsx("ol", { className: "xicms-timeline__list", children: items.map((it, i) => /* @__PURE__ */ jsxs("li", { className: "xicms-timeline__item", children: [
+      /* @__PURE__ */ jsx("span", { className: "xicms-timeline__marker", "aria-hidden": true, children: it.icon || "\u25CF" }),
+      /* @__PURE__ */ jsxs(VStack, { gap: 0.5, className: "xicms-timeline__body", children: [
+        it.date && /* @__PURE__ */ jsx(Text, { type: "label", style: { color: "var(--color-accent)" }, "data-xicms-edit": `items.${it._i}.date`, children: it.date }),
+        /* @__PURE__ */ jsx(Heading, { level: 3, "data-xicms-edit": `items.${it._i}.title`, children: it.title }),
+        it.text && /* @__PURE__ */ jsx(Text, { color: "secondary", "data-xicms-edit": `items.${it._i}.text`, children: it.text })
+      ] })
+    ] }, i)) })
+  ] });
+}
+export {
+  CountersRender,
+  FeatureRender,
+  LogosRender,
+  TimelineRender
+};
+//# sourceMappingURL=SectionsRender.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/SectionsRender.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { z } from \"zod\";\nimport type {\n  FeatureBlockSchema,\n  CountersBlockSchema,\n  LogosBlockSchema,\n  TimelineBlockSchema,\n} from \"../../schema/blocks\";\nimport type { BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Grid, Heading, Text, Btn } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\n\n/* ── Feature (beeld + tekst) ─────────────────────────────────────────────── */\ntype Feature = z.infer<typeof FeatureBlockSchema>;\nexport function FeatureRender({ block }: BlockRenderProps<Feature>) {\n  const media = block.imageUrl ? (\n    <Img\n      src={block.imageUrl}\n      alt=\"\"\n      width={900}\n      height={700}\n      sizes=\"(max-width: 720px) 100vw, 50vw\"\n      editField=\"imageUrl\"\n      style={{ width: \"100%\", height: \"100%\", maxHeight: 460, objectFit: \"cover\", borderRadius: \"var(--radius-container)\" }}\n    />\n  ) : null;\n  const body = (\n    <VStack gap={3} vAlign=\"center\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      {block.html && (\n        // eslint-disable-next-line react/no-danger\n        <div className=\"xicms-richtext\" dangerouslySetInnerHTML={{ __html: block.html }} />\n      )}\n      {block.buttonLabel && (\n        <div><Btn label={block.buttonLabel} href={block.buttonHref ?? \"#\"} variant=\"primary\" editField=\"buttonLabel\" /></div>\n      )}\n    </VStack>\n  );\n  return (\n    <Grid columns={{ minWidth: 320, max: 2 }} gap={5} className=\"xicms-feature\">\n      {block.imagePosition === \"left\" ? (\n        <>\n          {media}\n          {body}\n        </>\n      ) : (\n        <>\n          {body}\n          {media}\n        </>\n      )}\n    </Grid>\n  );\n}\n/* ── Counters (tellers) ──────────────────────────────────────────────────── */\ntype Counters = z.infer<typeof CountersBlockSchema>;\n\n/**\n * Telt van 0 naar `value` (rAF, ease-out) zodra het element in beeld scrolt. Niet-numerieke\n * waarden en reduced-motion tonen direct de eindwaarde; decimalen volgen de invoer (\"4.9\" → 1 dec).\n *\n * HYDRATION-VEILIG: de starttekst is ALTIJD `value` (server en client identiek); pas in het\n * effect (client-only) springt hij naar \"0\" en start de animatie. De vorige opzet initialiseerde\n * client-side op \"0\" → server \"13\" ≠ client \"0\" ≠ hydration-mismatch op elke tellers-pagina.\n */\nfunction CountUpValue({ value, animate }: { value: string; animate: boolean }) {\n  const target = Number(value.replace(\",\", \".\"));\n  const decimals = /[.,](\\d+)/.exec(value)?.[1].length ?? 0;\n  const [display, setDisplay] = useState(value);\n  const ref = useRef<HTMLSpanElement>(null);\n  const started = useRef(false);\n\n  useEffect(() => {\n    const canAnimate =\n      animate && Number.isFinite(target) && !window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n    if (!canAnimate || !ref.current) {\n      // Volg latere waarde-wijzigingen (bv. bewerken in de editor-preview) ook zonder animatie.\n      setDisplay(value);\n      return;\n    }\n    const el = ref.current;\n    let raf = 0;\n    const obs = new IntersectionObserver((entries) => {\n      if (!entries.some((e) => e.isIntersecting) || started.current) return;\n      started.current = true;\n      obs.disconnect();\n      const t0 = performance.now();\n      const duration = 1200;\n      const tick = (t: number) => {\n        const p = Math.min(1, (t - t0) / duration);\n        const eased = 1 - Math.pow(1 - p, 3);\n        setDisplay(p < 1 ? (target * eased).toFixed(decimals).replace(\".\", \",\") : value);\n        if (p < 1) raf = requestAnimationFrame(tick);\n      };\n      raf = requestAnimationFrame(tick);\n    });\n    obs.observe(el);\n    return () => {\n      obs.disconnect();\n      cancelAnimationFrame(raf);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animate, target, decimals, value]);\n\n  return <span ref={ref}>{display}</span>;\n}\n\nexport function CountersRender({ block, mode }: BlockRenderProps<Counters>) {\n  // _i = index in de OORSPRONKELIJKE array — de lijst wordt gefilterd op value || label.\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.value || i.label);\n  if (items.length === 0) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-counters\">\n      {block.heading && (\n        <Heading level={2} justify=\"center\" data-xicms-edit=\"heading\" style={{ textAlign: \"center\" }}>{block.heading}</Heading>\n      )}\n      <Grid columns={{ minWidth: 150 }} gap={4}>\n        {items.map((it) => (\n          <VStack key={it._i} gap={0.5} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n            <Heading level={2} className=\"xicms-counters__value\">\n              <span data-xicms-edit={`items.${it._i}.prefix`}>{it.prefix}</span>\n              {/* In de editor-preview geen animatie (mode-contract: licht en voorspelbaar). */}\n              <CountUpValue value={it.value} animate={block.animate !== false && mode !== \"preview\"} />\n              <span data-xicms-edit={`items.${it._i}.suffix`}>{it.suffix}</span>\n            </Heading>\n            <Text color=\"secondary\" data-xicms-edit={`items.${it._i}.label`}>{it.label}</Text>\n          </VStack>\n        ))}\n      </Grid>\n    </VStack>\n  );\n}\n/* ── Logos (partner-/logostrip) ──────────────────────────────────────────── */\ntype Logos = z.infer<typeof LogosBlockSchema>;\nexport function LogosRender({ block }: BlockRenderProps<Logos>) {\n  // _i = index in de OORSPRONKELIJKE array — nodig voor het inline vervang-pad (items.N.src).\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.src);\n  if (items.length === 0) return null;\n  return (\n    <VStack gap={3} as=\"section\" hAlign=\"center\" className=\"xicms-logos\">\n      {block.heading && (\n        <Text type=\"label\" color=\"secondary\" style={{ textTransform: \"uppercase\", letterSpacing: \"0.06em\" }}>\n          {block.heading}\n        </Text>\n      )}\n      {(() => {\n        const row = (ariaHidden: boolean) => (\n          <HStack\n            gap={6}\n            hAlign=\"center\"\n            vAlign=\"center\"\n            className={block.marquee ? \"xicms-logos__row\" : undefined}\n            style={block.marquee ? undefined : { flexWrap: \"wrap\" }}\n            aria-hidden={ariaHidden || undefined}\n          >\n            {items.map((it) => {\n              const i = it._i;\n              const img = (\n                <Img\n                  src={it.src}\n                  alt={ariaHidden ? \"\" : it.alt}\n                  width={160}\n                  height={48}\n                  editField={ariaHidden ? undefined : `items.${i}.src`}\n                  style={{ height: 40, width: \"auto\", objectFit: \"contain\", filter: block.grayscale ? \"grayscale(1)\" : undefined, opacity: block.grayscale ? 0.7 : 1 }}\n                />\n              );\n              return it.href && !ariaHidden ? (\n                <a key={i} href={it.href} rel=\"noopener noreferrer\" target=\"_blank\">{img}</a>\n              ) : (\n                <span key={i}>{img}</span>\n              );\n            })}\n          </HStack>\n        );\n        if (!block.marquee) return row(false);\n        // Doorlopende band: de rij + een aria-hidden kopie schuiven samen 50% op (naadloze loop).\n        // CSS pauzeert bij hover en staat stil bij prefers-reduced-motion.\n        return (\n          <div className=\"xicms-logos__marquee\">\n            <div className=\"xicms-logos__track\">\n              {row(false)}\n              {row(true)}\n            </div>\n          </div>\n        );\n      })()}\n    </VStack>\n  );\n}\n/* ── Timeline (stappen) ──────────────────────────────────────────────────── */\ntype Timeline = z.infer<typeof TimelineBlockSchema>;\nexport function TimelineRender({ block }: BlockRenderProps<Timeline>) {\n  // `_i` = ORIGINELE index (items zijn gefilterd op titel): inline edits moeten naar het juiste\n  // item in de opgeslagen array schrijven — zelfde patroon als Team/Cards.\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((i) => i.title);\n  if (items.length === 0) return null;\n  return (\n    <VStack gap={4} as=\"section\" className={`xicms-timeline${block.alternate ? \" xicms-timeline--alternate\" : \"\"}`}>\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n      <ol className=\"xicms-timeline__list\">\n        {items.map((it, i) => (\n          <li key={i} className=\"xicms-timeline__item\">\n            <span className=\"xicms-timeline__marker\" aria-hidden>{it.icon || \"●\"}</span>\n            <VStack gap={0.5} className=\"xicms-timeline__body\">\n              {it.date && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }} data-xicms-edit={`items.${it._i}.date`}>{it.date}</Text>\n              )}\n              <Heading level={3} data-xicms-edit={`items.${it._i}.title`}>{it.title}</Heading>\n              {it.text && <Text color=\"secondary\" data-xicms-edit={`items.${it._i}.text`}>{it.text}</Text>}\n            </VStack>\n          </li>\n        ))}\n      </ol>\n    </VStack>\n  );\n}\n"],"mappings":"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","names":[]}

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

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