@xiwebdesign/xicms-core 4.17.1

package/dist/blocks/builtins/Sections.js

@@ -0,0 +1,183 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import {
+  FeatureBlockSchema,
+  CountersBlockSchema,
+  LogosBlockSchema,
+  TimelineBlockSchema
+} from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { VStack, HStack, Grid, Heading, Text, Btn } from "../ui";
+import { Img } from "../../media/ImageContext";
+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" }) })
+  ] });
+  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",
+  schema: FeatureBlockSchema,
+  Render: 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 ?? []).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, i) => /* @__PURE__ */ jsxs(VStack, { gap: 0.5, hAlign: "center", style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsxs(Heading, { level: 2, className: "xicms-counters__value", children: [
+        it.prefix,
+        /* @__PURE__ */ jsx(CountUpValue, { value: it.value, animate: block.animate !== false && mode !== "preview" }),
+        it.suffix
+      ] }),
+      /* @__PURE__ */ jsx(Text, { color: "secondary", children: it.label })
+    ] }, i)) })
+  ] });
+}
+const countersBlock = defineBlock({
+  type: "counters",
+  schema: CountersBlockSchema,
+  Render: CountersRender,
+  label: "Tellers",
+  icon: "\u{1F522}",
+  defaults: () => ({ items: [{ value: "100", label: "Tevreden klanten", suffix: "+" }] })
+});
+function LogosRender({ block }) {
+  const items = (block.items ?? []).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, 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",
+  schema: LogosBlockSchema,
+  Render: LogosRender,
+  label: "Logo's",
+  icon: "\u{1F3F7}\uFE0F",
+  defaults: () => ({ items: [], grayscale: true })
+});
+function TimelineRender({ block }) {
+  const items = (block.items ?? []).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)" }, children: it.date }),
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: it.title }),
+        it.text && /* @__PURE__ */ jsx(Text, { color: "secondary", children: it.text })
+      ] })
+    ] }, i)) })
+  ] });
+}
+const timelineBlock = defineBlock({
+  type: "timeline",
+  schema: TimelineBlockSchema,
+  Render: TimelineRender,
+  label: "Tijdlijn",
+  icon: "\u{1F4CD}",
+  defaults: () => ({ items: [{ title: "Stap 1", text: "" }] })
+});
+export {
+  countersBlock,
+  featureBlock,
+  logosBlock,
+  timelineBlock
+};
+//# sourceMappingURL=Sections.js.map

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

@@ -0,0 +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 {\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\" /></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  schema: FeatureBlockSchema,\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  const items = (block.items ?? []).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, i) => (\n          <VStack key={i} gap={0.5} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n            <Heading level={2} className=\"xicms-counters__value\">\n              {it.prefix}\n              {/* In de editor-preview geen animatie (mode-contract: licht en voorspelbaar). */}\n              <CountUpValue value={it.value} animate={block.animate !== false && mode !== \"preview\"} />\n              {it.suffix}\n            </Heading>\n            <Text color=\"secondary\">{it.label}</Text>\n          </VStack>\n        ))}\n      </Grid>\n    </VStack>\n  );\n}\nexport const countersBlock = defineBlock({\n  type: \"counters\",\n  schema: CountersBlockSchema,\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  const items = (block.items ?? []).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, 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  schema: LogosBlockSchema,\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  const items = (block.items ?? []).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)\" }}>{it.date}</Text>\n              )}\n              <Heading level={3}>{it.title}</Heading>\n              {it.text && <Text color=\"secondary\">{it.text}</Text>}\n            </VStack>\n          </li>\n        ))}\n      </ol>\n    </VStack>\n  );\n}\nexport const timelineBlock = defineBlock({\n  type: \"timeline\",\n  schema: TimelineBlockSchema,\n  Render: TimelineRender,\n  label: \"Tijdlijn\",\n  icon: \"📍\",\n  defaults: () => ({ items: [{ title: \"Stap 1\", text: \"\" }] }),\n});\n"],"mappings":"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","names":[]}

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

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

package/dist/blocks/builtins/Slider.js

@@ -0,0 +1,131 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { SliderBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { Img } from "../../media/ImageContext";
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function SliderRender({ block }) {
+  const slides = (block.slides ?? []).filter((s) => s.imageUrl || s.caption);
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const swipeStart = useRef(null);
+  const count = slides.length;
+  useEffect(() => {
+    setIndex((i) => count === 0 ? 0 : Math.min(i, count - 1));
+  }, [count]);
+  useEffect(() => {
+    if (!block.autoplay || paused || count <= 1 || prefersReducedMotion()) return;
+    const id = setInterval(() => setIndex((i) => (i + 1) % count), block.interval * 1e3);
+    return () => clearInterval(id);
+  }, [block.autoplay, block.interval, paused, count]);
+  if (count === 0) return null;
+  const go = (i) => setIndex((i % count + count) % count);
+  const onPointerDown = (e) => {
+    swipeStart.current = e.clientX;
+  };
+  const onPointerUp = (e) => {
+    if (swipeStart.current === null || count < 2) return;
+    const dx = e.clientX - swipeStart.current;
+    swipeStart.current = null;
+    if (dx > 40) go(index - 1);
+    else if (dx < -40) go(index + 1);
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      go(index - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      go(index + 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: "xicms-slider",
+      style: { ["--xicms-slider-ratio"]: block.aspectRatio.replace("/", " / ") },
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      onKeyDown,
+      tabIndex: 0,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "Carrousel",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "xicms-slider__viewport",
+            onPointerDown,
+            onPointerUp,
+            style: { touchAction: "pan-y" },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "xicms-slider__track", style: { transform: `translateX(-${index * 100}%)` }, children: slides.map((s, i) => {
+                const img = s.imageUrl ? /* @__PURE__ */ jsx(Img, { className: "xicms-slider__image", src: s.imageUrl, alt: s.alt ?? "", width: 1800, height: 800, sizes: "100vw", priority: i === 0 }) : null;
+                return (
+                  /* inert haalt links in verborgen slides ook uit de tabvolgorde — aria-hidden
+                     mét bereikbare focusables is een WCAG-schending (4.1.2). */
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "xicms-slider__slide",
+                      role: "group",
+                      "aria-roledescription": "slide",
+                      "aria-label": `${i + 1} / ${count}`,
+                      "aria-hidden": i !== index,
+                      inert: i !== index || void 0,
+                      children: [
+                        s.href ? /* @__PURE__ */ jsx("a", { href: s.href, children: img }) : img,
+                        s.caption && /* @__PURE__ */ jsx("div", { className: "xicms-slider__caption", children: s.caption })
+                      ]
+                    },
+                    i
+                  )
+                );
+              }) }),
+              block.showArrows && count > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-slider__arrow xicms-slider__arrow--prev", "aria-label": "Vorige", onClick: () => go(index - 1), children: "\u2039" }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-slider__arrow xicms-slider__arrow--next", "aria-label": "Volgende", onClick: () => go(index + 1), children: "\u203A" })
+              ] })
+            ]
+          }
+        ),
+        block.showDots && count > 1 && /* @__PURE__ */ jsx("div", { className: "xicms-slider__dots", role: "group", "aria-label": "Kies slide", children: slides.map((_, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": i === index || void 0,
+            "aria-label": `Naar slide ${i + 1}`,
+            className: `xicms-slider__dot${i === index ? " xicms-slider__dot--active" : ""}`,
+            onClick: () => go(i)
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+const sliderBlock = defineBlock({
+  type: "slider",
+  schema: SliderBlockSchema,
+  Render: SliderRender,
+  label: "Carrousel / slider",
+  icon: "\u{1F3A0}",
+  defaults: () => ({
+    slides: [{ imageUrl: "", alt: "", caption: "" }],
+    autoplay: false,
+    interval: 5,
+    showDots: true,
+    showArrows: true,
+    aspectRatio: "16/9"
+  })
+});
+export {
+  sliderBlock
+};
+//# sourceMappingURL=Slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { SliderBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Slider = z.infer<typeof SliderBlockSchema>;\n\nfunction prefersReducedMotion(): boolean {\n  return typeof window !== \"undefined\" && window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** Beeld-/contentcarrousel. Client-side; autoplay respecteert reduced-motion en pauzeert bij hover. */\nfunction SliderRender({ block }: BlockRenderProps<Slider>) {\n  const slides = (block.slides ?? []).filter((s) => s.imageUrl || s.caption);\n  const [index, setIndex] = useState(0);\n  const [paused, setPaused] = useState(false);\n  const swipeStart = useRef<number | null>(null);\n  const count = slides.length;\n\n  // Clamp de index als het aantal slides krimpt (bv. tijdens bewerken in preview), anders blijft\n  // de carrousel op een lege positie hangen tot de bezoeker interacteert.\n  useEffect(() => {\n    setIndex((i) => (count === 0 ? 0 : Math.min(i, count - 1)));\n  }, [count]);\n\n  useEffect(() => {\n    if (!block.autoplay || paused || count <= 1 || prefersReducedMotion()) return;\n    const id = setInterval(() => setIndex((i) => (i + 1) % count), block.interval * 1000);\n    return () => clearInterval(id);\n  }, [block.autoplay, block.interval, paused, count]);\n\n  if (count === 0) return null;\n  const go = (i: number) => setIndex(((i % count) + count) % count);\n\n  // Swipe (pointer events: touch én muis-sleep) + pijltjestoetsen wanneer de carrousel focus heeft.\n  const onPointerDown = (e: React.PointerEvent) => {\n    swipeStart.current = e.clientX;\n  };\n  const onPointerUp = (e: React.PointerEvent) => {\n    if (swipeStart.current === null || count < 2) return;\n    const dx = e.clientX - swipeStart.current;\n    swipeStart.current = null;\n    if (dx > 40) go(index - 1);\n    else if (dx < -40) go(index + 1);\n  };\n  const onKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === \"ArrowLeft\") {\n      e.preventDefault();\n      go(index - 1);\n    } else if (e.key === \"ArrowRight\") {\n      e.preventDefault();\n      go(index + 1);\n    }\n  };\n\n  return (\n    <section\n      className=\"xicms-slider\"\n      style={{ [\"--xicms-slider-ratio\" as string]: block.aspectRatio.replace(\"/\", \" / \") }}\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={() => setPaused(false)}\n      onKeyDown={onKeyDown}\n      tabIndex={0}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      aria-label=\"Carrousel\"\n    >\n      <div\n        className=\"xicms-slider__viewport\"\n        onPointerDown={onPointerDown}\n        onPointerUp={onPointerUp}\n        style={{ touchAction: \"pan-y\" }}\n      >\n        <div className=\"xicms-slider__track\" style={{ transform: `translateX(-${index * 100}%)` }}>\n          {slides.map((s, i) => {\n            const img = s.imageUrl ? (\n              <Img className=\"xicms-slider__image\" src={s.imageUrl} alt={s.alt ?? \"\"} width={1800} height={800} sizes=\"100vw\" priority={i === 0} />\n            ) : null;\n            return (\n              /* inert haalt links in verborgen slides ook uit de tabvolgorde — aria-hidden\n                 mét bereikbare focusables is een WCAG-schending (4.1.2). */\n              <div\n                key={i}\n                className=\"xicms-slider__slide\"\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-label={`${i + 1} / ${count}`}\n                aria-hidden={i !== index}\n                inert={i !== index || undefined}\n              >\n                {s.href ? <a href={s.href}>{img}</a> : img}\n                {s.caption && <div className=\"xicms-slider__caption\">{s.caption}</div>}\n              </div>\n            );\n          })}\n        </div>\n\n        {block.showArrows && count > 1 && (\n          <>\n            <button type=\"button\" className=\"xicms-slider__arrow xicms-slider__arrow--prev\" aria-label=\"Vorige\" onClick={() => go(index - 1)}>‹</button>\n            <button type=\"button\" className=\"xicms-slider__arrow xicms-slider__arrow--next\" aria-label=\"Volgende\" onClick={() => go(index + 1)}>›</button>\n          </>\n        )}\n      </div>\n\n      {/* Dots als gewone knoppen (geen tablist: er zijn geen tabpanels om aan te koppelen). */}\n      {block.showDots && count > 1 && (\n        <div className=\"xicms-slider__dots\" role=\"group\" aria-label=\"Kies slide\">\n          {slides.map((_, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              aria-current={i === index || undefined}\n              aria-label={`Naar slide ${i + 1}`}\n              className={`xicms-slider__dot${i === index ? \" xicms-slider__dot--active\" : \"\"}`}\n              onClick={() => go(i)}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n\nexport const sliderBlock = defineBlock({\n  type: \"slider\",\n  schema: SliderBlockSchema,\n  Render: SliderRender,\n  label: \"Carrousel / slider\",\n  icon: \"🎠\",\n  defaults: () => ({\n    slides: [{ imageUrl: \"\", alt: \"\", caption: \"\" }],\n    autoplay: false,\n    interval: 5,\n    showDots: true,\n    showArrows: true,\n    aspectRatio: \"16/9\",\n  }),\n});\n"],"mappings":";AAiFc,SAsBJ,UAtBI,KAKA,YALA;AA/Ed,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,yBAAyB;AAClC,SAAS,mBAA0C;AACnD,SAAS,WAAW;AAIpB,SAAS,uBAAgC;AACvC,SAAO,OAAO,WAAW,eAAe,OAAO,aAAa,kCAAkC,EAAE;AAClG;AAGA,SAAS,aAAa,EAAE,MAAM,GAA6B;AACzD,QAAM,UAAU,MAAM,UAAU,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO;AACzE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,CAAC;AACpC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,aAAa,OAAsB,IAAI;AAC7C,QAAM,QAAQ,OAAO;AAIrB,YAAU,MAAM;AACd,aAAS,CAAC,MAAO,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAE;AAAA,EAC5D,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,YAAY,UAAU,SAAS,KAAK,qBAAqB,EAAG;AACvE,UAAM,KAAK,YAAY,MAAM,SAAS,CAAC,OAAO,IAAI,KAAK,KAAK,GAAG,MAAM,WAAW,GAAI;AACpF,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,MAAM,UAAU,MAAM,UAAU,QAAQ,KAAK,CAAC;AAElD,MAAI,UAAU,EAAG,QAAO;AACxB,QAAM,KAAK,CAAC,MAAc,UAAW,IAAI,QAAS,SAAS,KAAK;AAGhE,QAAM,gBAAgB,CAAC,MAA0B;AAC/C,eAAW,UAAU,EAAE;AAAA,EACzB;AACA,QAAM,cAAc,CAAC,MAA0B;AAC7C,QAAI,WAAW,YAAY,QAAQ,QAAQ,EAAG;AAC9C,UAAM,KAAK,EAAE,UAAU,WAAW;AAClC,eAAW,UAAU;AACrB,QAAI,KAAK,GAAI,IAAG,QAAQ,CAAC;AAAA,aAChB,KAAK,IAAK,IAAG,QAAQ,CAAC;AAAA,EACjC;AACA,QAAM,YAAY,CAAC,MAA2B;AAC5C,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAe;AACjB,SAAG,QAAQ,CAAC;AAAA,IACd,WAAW,EAAE,QAAQ,cAAc;AACjC,QAAE,eAAe;AACjB,SAAG,QAAQ,CAAC;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,CAAC,sBAAgC,GAAG,MAAM,YAAY,QAAQ,KAAK,KAAK,EAAE;AAAA,MACnF,cAAc,MAAM,UAAU,IAAI;AAAA,MAClC,cAAc,MAAM,UAAU,KAAK;AAAA,MACnC,SAAS,MAAM,UAAU,IAAI;AAAA,MAC7B,QAAQ,MAAM,UAAU,KAAK;AAAA,MAC7B;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL,wBAAqB;AAAA,MACrB,cAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA,OAAO,EAAE,aAAa,QAAQ;AAAA,YAE9B;AAAA,kCAAC,SAAI,WAAU,uBAAsB,OAAO,EAAE,WAAW,eAAe,QAAQ,GAAG,KAAK,GACrF,iBAAO,IAAI,CAAC,GAAG,MAAM;AACpB,sBAAM,MAAM,EAAE,WACZ,oBAAC,OAAI,WAAU,uBAAsB,KAAK,EAAE,UAAU,KAAK,EAAE,OAAO,IAAI,OAAO,MAAM,QAAQ,KAAK,OAAM,SAAQ,UAAU,MAAM,GAAG,IACjI;AACJ;AAAA;AAAA;AAAA,kBAGE;AAAA,oBAAC;AAAA;AAAA,sBAEC,WAAU;AAAA,sBACV,MAAK;AAAA,sBACL,wBAAqB;AAAA,sBACrB,cAAY,GAAG,IAAI,CAAC,MAAM,KAAK;AAAA,sBAC/B,eAAa,MAAM;AAAA,sBACnB,OAAO,MAAM,SAAS;AAAA,sBAErB;AAAA,0BAAE,OAAO,oBAAC,OAAE,MAAM,EAAE,MAAO,eAAI,IAAO;AAAA,wBACtC,EAAE,WAAW,oBAAC,SAAI,WAAU,yBAAyB,YAAE,SAAQ;AAAA;AAAA;AAAA,oBAT3D;AAAA,kBAUP;AAAA;AAAA,cAEJ,CAAC,GACH;AAAA,cAEC,MAAM,cAAc,QAAQ,KAC3B,iCACE;AAAA,oCAAC,YAAO,MAAK,UAAS,WAAU,iDAAgD,cAAW,UAAS,SAAS,MAAM,GAAG,QAAQ,CAAC,GAAG,oBAAC;AAAA,gBACnI,oBAAC,YAAO,MAAK,UAAS,WAAU,iDAAgD,cAAW,YAAW,SAAS,MAAM,GAAG,QAAQ,CAAC,GAAG,oBAAC;AAAA,iBACvI;AAAA;AAAA;AAAA,QAEJ;AAAA,QAGC,MAAM,YAAY,QAAQ,KACzB,oBAAC,SAAI,WAAU,sBAAqB,MAAK,SAAQ,cAAW,cACzD,iBAAO,IAAI,CAAC,GAAG,MACd;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,gBAAc,MAAM,SAAS;AAAA,YAC7B,cAAY,cAAc,IAAI,CAAC;AAAA,YAC/B,WAAW,oBAAoB,MAAM,QAAQ,+BAA+B,EAAE;AAAA,YAC9E,SAAS,MAAM,GAAG,CAAC;AAAA;AAAA,UALd;AAAA,QAMP,CACD,GACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEO,MAAM,cAAc,YAAY;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO;AAAA,IACf,QAAQ,CAAC,EAAE,UAAU,IAAI,KAAK,IAAI,SAAS,GAAG,CAAC;AAAA,IAC/C,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AACF,CAAC;","names":[]}

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

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

package/dist/blocks/builtins/Spacer.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { SpacerBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+const HEIGHTS = { sm: 16, md: 32, lg: 64, xl: 120 };
+function SpacerRender({ block }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, style: { height: HEIGHTS[block.size] } });
+}
+const spacerBlock = defineBlock({
+  type: "spacer",
+  schema: SpacerBlockSchema,
+  Render: SpacerRender,
+  label: "Witruimte",
+  icon: "\u2195",
+  defaults: () => ({ size: "md" })
+});
+export {
+  spacerBlock
+};
+//# sourceMappingURL=Spacer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Spacer.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { SpacerBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\n\ntype Spacer = z.infer<typeof SpacerBlockSchema>;\n\nconst HEIGHTS: Record<Spacer[\"size\"], number> = { sm: 16, md: 32, lg: 64, xl: 120 };\n\nfunction SpacerRender({ block }: BlockRenderProps<Spacer>) {\n  return <div aria-hidden style={{ height: HEIGHTS[block.size] }} />;\n}\n\nexport const spacerBlock = defineBlock({\n  type: \"spacer\",\n  schema: SpacerBlockSchema,\n  Render: SpacerRender,\n  label: \"Witruimte\",\n  icon: \"↕\",\n  defaults: () => ({ size: \"md\" }),\n});\n"],"mappings":"AASS;AART,SAAS,yBAAyB;AAClC,SAAS,mBAA0C;AAInD,MAAM,UAA0C,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AAElF,SAAS,aAAa,EAAE,MAAM,GAA6B;AACzD,SAAO,oBAAC,SAAI,eAAW,MAAC,OAAO,EAAE,QAAQ,QAAQ,MAAM,IAAI,EAAE,GAAG;AAClE;AAEO,MAAM,cAAc,YAAY;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,MAAM,KAAK;AAChC,CAAC;","names":[]}

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

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

package/dist/blocks/builtins/Team.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TeamBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { VStack, HStack, Grid, Card, Heading, Text, Avatar } from "../ui";
+function personJsonLd(members) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    itemListElement: members.filter((m) => m.name).map((m, i) => ({
+      "@type": "ListItem",
+      position: i + 1,
+      item: {
+        "@type": "Person",
+        name: m.name,
+        ...m.role ? { jobTitle: m.role } : {},
+        ...m.email ? { email: m.email } : {},
+        ...m.phone ? { telephone: m.phone } : {},
+        ...m.photoUrl ? { image: m.photoUrl } : {},
+        ...m.social?.length ? { sameAs: m.social.map((s) => s.href) } : {}
+      }
+    }))
+  };
+}
+function TeamRender({ block }) {
+  const members = (block.members ?? []).map((m, i) => ({ ...m, _i: i })).filter((m) => m.name);
+  if (members.length === 0) return null;
+  const groups = block.groupByDepartment ? [...new Set(members.map((m) => m.department ?? ""))].sort((a, b) => a === "" ? 1 : b === "" ? -1 : 0).map((dep) => ({ dep, members: members.filter((m) => (m.department ?? "") === dep) })) : [{ dep: "", members }];
+  const grid = (list) => /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 220, max: 4 }, gap: 4, children: list.map((m) => {
+    const i = m._i;
+    return /* @__PURE__ */ jsx(Card, { padding: 4, height: "100%", children: /* @__PURE__ */ jsxs(VStack, { gap: 1, hAlign: "center", style: { textAlign: "center", height: "100%" }, children: [
+      /* @__PURE__ */ jsx(Avatar, { src: m.photoUrl, name: m.name, size: 96 }),
+      /* @__PURE__ */ jsx(Heading, { level: 3, "data-xicms-edit": `members.${i}.name`, children: m.name }),
+      m.role && /* @__PURE__ */ jsx(Text, { type: "label", "data-xicms-edit": `members.${i}.role`, style: { color: "var(--color-accent)" }, children: m.role }),
+      m.bio && /* @__PURE__ */ jsx(Text, { color: "secondary", "data-xicms-edit": `members.${i}.bio`, children: m.bio }),
+      m.email && /* @__PURE__ */ jsx("a", { href: `mailto:${m.email}`, style: { color: "var(--color-accent)" }, children: /* @__PURE__ */ jsx(Text, { type: "supporting", children: m.email }) }),
+      m.phone && /* @__PURE__ */ jsx(Text, { type: "supporting", color: "secondary", children: m.phone }),
+      m.social && m.social.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: 2, hAlign: "center", as: "ul", style: { listStyle: "none", margin: 0, padding: 0, flexWrap: "wrap" }, children: m.social.map((s, j) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href: s.href, rel: "noopener noreferrer", target: "_blank", style: { color: "var(--color-accent)" }, children: /* @__PURE__ */ jsx(Text, { type: "supporting", children: s.platform }) }) }, j)) })
+    ] }) }, i);
+  }) });
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-team", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, justify: "center", "data-xicms-edit": "heading", style: { textAlign: "center" }, children: block.heading }),
+    groups.map(({ dep, members: list }) => /* @__PURE__ */ jsxs(VStack, { gap: 3, children: [
+      block.groupByDepartment && groups.length > 1 && /* @__PURE__ */ jsx(Heading, { level: 3, justify: "center", style: { textAlign: "center" }, children: dep || "Overig" }),
+      grid(list)
+    ] }, dep || "_overig")),
+    block.jsonLd && /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(personJsonLd(members)) }
+      }
+    )
+  ] });
+}
+const teamBlock = defineBlock({
+  type: "team",
+  schema: TeamBlockSchema,
+  Render: TeamRender,
+  label: "Team",
+  icon: "\u{1F465}",
+  defaults: () => ({
+    heading: "Ons team",
+    members: [{ name: "Naam Medewerker", role: "Functie" }]
+  })
+});
+export {
+  teamBlock
+};
+//# sourceMappingURL=Team.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Team.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { TeamBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Grid, Card, Heading, Text, Avatar } from \"../ui\";\n\ntype Team = z.infer<typeof TeamBlockSchema>;\n\nfunction personJsonLd(members: Team[\"members\"]): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"ItemList\",\n    itemListElement: members\n      .filter((m) => m.name)\n      .map((m, i) => ({\n        \"@type\": \"ListItem\",\n        position: i + 1,\n        item: {\n          \"@type\": \"Person\",\n          name: m.name,\n          ...(m.role ? { jobTitle: m.role } : {}),\n          ...(m.email ? { email: m.email } : {}),\n          ...(m.phone ? { telephone: m.phone } : {}),\n          ...(m.photoUrl ? { image: m.photoUrl } : {}),\n          ...(m.social?.length ? { sameAs: m.social.map((s) => s.href) } : {}),\n        },\n      })),\n  };\n}\n\n/** Team-/medewerkersoverzicht als kaarten (Astryx), optioneel gegroepeerd per afdeling. */\nfunction TeamRender({ block }: BlockRenderProps<Team>) {\n  // _i = index in de OORSPRONKELIJKE array — nodig voor de inline-edit-paden bij groepering.\n  const members = (block.members ?? []).map((m, i) => ({ ...m, _i: i })).filter((m) => m.name);\n  if (members.length === 0) return null;\n\n  // Groepen in volgorde van eerste voorkomen; leden zonder afdeling achteraan onder één kop.\n  const groups = block.groupByDepartment\n    ? [...new Set(members.map((m) => m.department ?? \"\"))]\n        .sort((a, b) => (a === \"\" ? 1 : b === \"\" ? -1 : 0))\n        .map((dep) => ({ dep, members: members.filter((m) => (m.department ?? \"\") === dep) }))\n    : [{ dep: \"\", members }];\n\n  const grid = (list: typeof members) => (\n    <Grid columns={{ minWidth: 220, max: 4 }} gap={4}>\n      {list.map((m) => {\n        const i = m._i;\n        return (\n          <Card key={i} padding={4} height=\"100%\">\n            <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\", height: \"100%\" }}>\n              <Avatar src={m.photoUrl} name={m.name} size={96} />\n              <Heading level={3} data-xicms-edit={`members.${i}.name`}>{m.name}</Heading>\n              {m.role && <Text type=\"label\" data-xicms-edit={`members.${i}.role`} style={{ color: \"var(--color-accent)\" }}>{m.role}</Text>}\n              {m.bio && <Text color=\"secondary\" data-xicms-edit={`members.${i}.bio`}>{m.bio}</Text>}\n              {m.email && (\n                <a href={`mailto:${m.email}`} style={{ color: \"var(--color-accent)\" }}>\n                  <Text type=\"supporting\">{m.email}</Text>\n                </a>\n              )}\n              {m.phone && <Text type=\"supporting\" color=\"secondary\">{m.phone}</Text>}\n              {m.social && m.social.length > 0 && (\n                <HStack gap={2} hAlign=\"center\" as=\"ul\" style={{ listStyle: \"none\", margin: 0, padding: 0, flexWrap: \"wrap\" }}>\n                  {m.social.map((s, j) => (\n                    <li key={j}>\n                      <a href={s.href} rel=\"noopener noreferrer\" target=\"_blank\" style={{ color: \"var(--color-accent)\" }}>\n                        <Text type=\"supporting\">{s.platform}</Text>\n                      </a>\n                    </li>\n                  ))}\n                </HStack>\n              )}\n            </VStack>\n          </Card>\n        );\n      })}\n    </Grid>\n  );\n\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-team\">\n      {block.heading && (\n        <Heading level={2} justify=\"center\" data-xicms-edit=\"heading\" style={{ textAlign: \"center\" }}>{block.heading}</Heading>\n      )}\n      {groups.map(({ dep, members: list }) => (\n        <VStack key={dep || \"_overig\"} gap={3}>\n          {block.groupByDepartment && groups.length > 1 && (\n            <Heading level={3} justify=\"center\" style={{ textAlign: \"center\" }}>\n              {dep || \"Overig\"}\n            </Heading>\n          )}\n          {grid(list)}\n        </VStack>\n      ))}\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(personJsonLd(members)) }}\n        />\n      )}\n    </VStack>\n  );\n}\n\nexport const teamBlock = defineBlock({\n  type: \"team\",\n  schema: TeamBlockSchema,\n  Render: TeamRender,\n  label: \"Team\",\n  icon: \"👥\",\n  defaults: () => ({\n    heading: \"Ons team\",\n    members: [{ name: \"Naam Medewerker\", role: \"Functie\" }],\n  }),\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,8 @@
+import type { z } from "zod";
+import { TestimonialsBlockSchema } from "../../schema/blocks";
+type Testimonials = z.infer<typeof TestimonialsBlockSchema>;
+/** Gemiddelde beoordeling over de items met een rating — voor de sterren-snippet in Google. */
+export declare function aggregateRatingJsonLd(items: Testimonials["items"]): Record<string, unknown> | null;
+export declare function reviewJsonLd(items: Testimonials["items"]): Record<string, unknown>;
+export declare const testimonialsBlock: import("..").BlockDefinition<z.ZodTypeAny>;
+export {};

package/dist/blocks/builtins/Testimonials.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TestimonialsBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { VStack, HStack, Grid, Card, Heading, Text, Avatar } from "../ui";
+function aggregateRatingJsonLd(items) {
+  const rated = items.filter((it) => typeof it.rating === "number");
+  if (rated.length === 0) return null;
+  const avg = rated.reduce((sum, it) => sum + it.rating, 0) / rated.length;
+  return {
+    "@type": "AggregateRating",
+    ratingValue: Math.round(avg * 10) / 10,
+    reviewCount: rated.length,
+    bestRating: 5
+  };
+}
+function reviewJsonLd(items) {
+  const aggregate = aggregateRatingJsonLd(items);
+  return {
+    "@context": "https://schema.org",
+    "@type": "LocalBusiness",
+    "@id": "#business",
+    ...aggregate ? { aggregateRating: aggregate } : {},
+    review: items.filter((it) => it.quote && it.author).map((it) => ({
+      "@type": "Review",
+      reviewBody: it.quote,
+      author: { "@type": "Person", name: it.author },
+      ...it.rating ? { reviewRating: { "@type": "Rating", ratingValue: it.rating, bestRating: 5 } } : {}
+    }))
+  };
+}
+function TestimonialsRender({ block }) {
+  const items = (block.items ?? []).filter((i) => i.quote);
+  if (items.length === 0) return null;
+  const cols = block.layout === "list" ? { minWidth: 320, max: 1 } : { minWidth: 280, max: 3 };
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-testimonials", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, justify: "center", "data-xicms-edit": "heading", style: { textAlign: "center" }, children: block.heading }),
+    /* @__PURE__ */ jsx(Grid, { columns: cols, gap: 4, children: items.map((it, i) => /* @__PURE__ */ jsx(Card, { padding: 4, height: "100%", className: "xicms-testimonials__card", children: /* @__PURE__ */ jsxs(VStack, { gap: 2, style: { height: "100%" }, children: [
+      typeof it.rating === "number" && /* @__PURE__ */ jsxs(Text, { className: "xicms-testimonials__rating", style: { color: "var(--xicms-star, #f59e0b)", letterSpacing: "0.1em" }, "aria-label": `${it.rating} van 5 sterren`, children: [
+        "\u2605".repeat(it.rating),
+        /* @__PURE__ */ jsx("span", { style: { opacity: 0.25 }, children: "\u2605".repeat(5 - it.rating) })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { type: "large", className: "xicms-testimonials__quote", style: { flex: 1 }, children: [
+        "\u201C",
+        /* @__PURE__ */ jsx("span", { "data-xicms-edit": `items.${i}.quote`, children: it.quote }),
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsxs(HStack, { gap: 1.5, vAlign: "center", children: [
+        it.avatarUrl && /* @__PURE__ */ jsx(Avatar, { src: it.avatarUrl, name: it.author, size: 40 }),
+        /* @__PURE__ */ jsxs(VStack, { gap: 0, children: [
+          /* @__PURE__ */ jsx(Text, { weight: "bold", className: "xicms-testimonials__author", "data-xicms-edit": `items.${i}.author`, children: it.author }),
+          it.role && /* @__PURE__ */ jsx(Text, { type: "supporting", color: "secondary", className: "xicms-testimonials__role", "data-xicms-edit": `items.${i}.role`, children: it.role })
+        ] })
+      ] })
+    ] }) }, i)) }),
+    block.jsonLd && /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(reviewJsonLd(items)) }
+      }
+    )
+  ] });
+}
+const testimonialsBlock = defineBlock({
+  type: "testimonials",
+  schema: TestimonialsBlockSchema,
+  Render: TestimonialsRender,
+  label: "Reviews",
+  icon: "\u2B50",
+  defaults: () => ({
+    heading: "Wat klanten zeggen",
+    items: [{ quote: "Top geholpen!", author: "Tevreden klant", rating: 5 }],
+    jsonLd: true
+  })
+});
+export {
+  aggregateRatingJsonLd,
+  reviewJsonLd,
+  testimonialsBlock
+};
+//# sourceMappingURL=Testimonials.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Testimonials.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { TestimonialsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Grid, Card, Heading, Text, Avatar } from \"../ui\";\n\ntype Testimonials = z.infer<typeof TestimonialsBlockSchema>;\n\n/** Gemiddelde beoordeling over de items met een rating — voor de sterren-snippet in Google. */\nexport function aggregateRatingJsonLd(items: Testimonials[\"items\"]): Record<string, unknown> | null {\n  const rated = items.filter((it) => typeof it.rating === \"number\");\n  if (rated.length === 0) return null;\n  const avg = rated.reduce((sum, it) => sum + (it.rating as number), 0) / rated.length;\n  return {\n    \"@type\": \"AggregateRating\",\n    ratingValue: Math.round(avg * 10) / 10,\n    reviewCount: rated.length,\n    bestRating: 5,\n  };\n}\n\nexport function reviewJsonLd(items: Testimonials[\"items\"]): Record<string, unknown> {\n  const aggregate = aggregateRatingJsonLd(items);\n  // Reviews/AggregateRating zijn voor rich results alleen geldig aan een \"ding\" (bedrijf/product);\n  // een losse ItemList negeert Google. We hangen ze aan dezelfde #business-entiteit als de\n  // contact-/openingstijden-JSON-LD, zodat alles samenvloeit tot één LocalBusiness.\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"LocalBusiness\",\n    \"@id\": \"#business\",\n    ...(aggregate ? { aggregateRating: aggregate } : {}),\n    review: items\n      .filter((it) => it.quote && it.author)\n      .map((it) => ({\n        \"@type\": \"Review\",\n        reviewBody: it.quote,\n        author: { \"@type\": \"Person\", name: it.author },\n        ...(it.rating\n          ? { reviewRating: { \"@type\": \"Rating\", ratingValue: it.rating, bestRating: 5 } }\n          : {}),\n      })),\n  };\n}\n\n/** Klant­quotes / reviews als kaarten (Astryx). */\nfunction TestimonialsRender({ block }: BlockRenderProps<Testimonials>) {\n  const items = (block.items ?? []).filter((i) => i.quote);\n  if (items.length === 0) return null;\n  const cols = block.layout === \"list\" ? { minWidth: 320, max: 1 as const } : { minWidth: 280, max: 3 as const };\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-testimonials\">\n      {block.heading && (\n        <Heading level={2} justify=\"center\" data-xicms-edit=\"heading\" style={{ textAlign: \"center\" }}>{block.heading}</Heading>\n      )}\n      <Grid columns={cols} gap={4}>\n        {items.map((it, i) => (\n          <Card key={i} padding={4} height=\"100%\" className=\"xicms-testimonials__card\">\n            <VStack gap={2} style={{ height: \"100%\" }}>\n              {typeof it.rating === \"number\" && (\n                <Text className=\"xicms-testimonials__rating\" style={{ color: \"var(--xicms-star, #f59e0b)\", letterSpacing: \"0.1em\" }} aria-label={`${it.rating} van 5 sterren`}>\n                  {\"★\".repeat(it.rating)}\n                  <span style={{ opacity: 0.25 }}>{\"★\".repeat(5 - it.rating)}</span>\n                </Text>\n              )}\n              <Text type=\"large\" className=\"xicms-testimonials__quote\" style={{ flex: 1 }}>“<span data-xicms-edit={`items.${i}.quote`}>{it.quote}</span>”</Text>\n              <HStack gap={1.5} vAlign=\"center\">\n                {it.avatarUrl && <Avatar src={it.avatarUrl} name={it.author} size={40} />}\n                <VStack gap={0}>\n                  <Text weight=\"bold\" className=\"xicms-testimonials__author\" data-xicms-edit={`items.${i}.author`}>{it.author}</Text>\n                  {it.role && <Text type=\"supporting\" color=\"secondary\" className=\"xicms-testimonials__role\" data-xicms-edit={`items.${i}.role`}>{it.role}</Text>}\n                </VStack>\n              </HStack>\n            </VStack>\n          </Card>\n        ))}\n      </Grid>\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(reviewJsonLd(items)) }}\n        />\n      )}\n    </VStack>\n  );\n}\n\nexport const testimonialsBlock = defineBlock({\n  type: \"testimonials\",\n  schema: TestimonialsBlockSchema,\n  Render: TestimonialsRender,\n  label: \"Reviews\",\n  icon: \"⭐\",\n  defaults: () => ({\n    heading: \"Wat klanten zeggen\",\n    items: [{ quote: \"Top geholpen!\", author: \"Tevreden klant\", rating: 5 }],\n    jsonLd: true,\n  }),\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,9 @@
+import type { z } from "zod";
+import { VideoBlockSchema } from "../../schema/blocks";
+type Video = z.infer<typeof VideoBlockSchema>;
+/** Bouwt een embed-URL uit een id of volledige URL. */
+export declare function embedUrl(provider: Video["provider"], src: string, autoplay?: boolean): string;
+/** Thumbnail voor de click-to-play-facade: eigen poster of de YouTube-thumb. */
+export declare function facadeThumb(block: Pick<Video, "provider" | "src" | "posterUrl">): string | null;
+export declare const videoBlock: import("..").BlockDefinition<z.ZodTypeAny>;
+export {};