@xiwebdesign/xicms-core 4.17.1

package/dist/blocks/builtins/PdfBlock.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { PdfBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { VStack, HStack, Heading, Text } from "../ui";
+function PdfRender({ block, mode }) {
+  const docs = (block.documents ?? []).filter((d) => d.url);
+  const [active, setActive] = useState(0);
+  if (docs.length === 0 && !block.heading) return null;
+  const current = docs[Math.min(active, docs.length - 1)];
+  return /* @__PURE__ */ jsxs(VStack, { gap: 3, as: "section", children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    docs.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: 1, style: { flexWrap: "wrap" }, role: "tablist", children: docs.map((d, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": i === active,
+        onClick: () => setActive(i),
+        style: {
+          padding: "0.4rem 0.9rem",
+          borderRadius: "var(--radius-full, 999px)",
+          border: "1px solid var(--color-border)",
+          cursor: "pointer",
+          fontWeight: 600,
+          fontSize: "0.9rem",
+          background: i === active ? "var(--color-accent)" : "transparent",
+          color: i === active ? "var(--color-on-accent)" : "var(--color-text-primary)"
+        },
+        children: d.label || `Document ${i + 1}`
+      },
+      i
+    )) }),
+    current ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          borderRadius: "var(--radius-container)",
+          overflow: "hidden",
+          border: "1px solid var(--color-border)",
+          background: "var(--color-background-muted, rgba(0,0,0,0.03))"
+        },
+        children: mode === "preview" ? /* @__PURE__ */ jsx("div", { className: "xicms-embed-consent xicms-embed-preview", role: "note", style: { height: Math.min(block.height, 360) }, children: /* @__PURE__ */ jsxs("p", { children: [
+          "\u{1F4C4} PDF \u201C",
+          current.label || "document",
+          "\u201D \u2014 wordt op de live site geladen (niet in de editor)."
+        ] }) }) : (
+          // <object> i.p.v. <iframe>: browsers zonder inline PDF-viewer (veel mobiel) tonen
+          // dan de fallback-inhoud met een open/download-knop i.p.v. een leeg vlak.
+          /* @__PURE__ */ jsx(
+            "object",
+            {
+              data: `${current.url}#view=FitH`,
+              type: "application/pdf",
+              "aria-label": current.label || block.heading || "PDF",
+              style: { border: 0, width: "100%", height: block.height, display: "block" },
+              children: /* @__PURE__ */ jsxs("div", { style: { display: "grid", placeItems: "center", gap: "0.6rem", padding: "2.5rem 1rem", textAlign: "center" }, children: [
+                /* @__PURE__ */ jsx(Text, { color: "secondary", children: "Je browser kan deze PDF niet inline tonen." }),
+                /* @__PURE__ */ jsxs("a", { className: "xicms-btn", href: current.url, target: "_blank", rel: "noopener noreferrer", children: [
+                  "\u{1F4C4} Open \u201C",
+                  current.label || "PDF",
+                  "\u201D"
+                ] })
+              ] })
+            }
+          )
+        )
+      }
+    ) : /* @__PURE__ */ jsx(Text, { color: "secondary", children: "Voeg een PDF toe in de editor." }),
+    block.showDownload && current && /* @__PURE__ */ jsx("a", { href: current.url, target: "_blank", rel: "noopener noreferrer", style: { color: "var(--color-accent)" }, children: /* @__PURE__ */ jsxs(Text, { type: "label", children: [
+      "\u2197 Open \u201C",
+      current.label || "PDF",
+      "\u201D in een nieuw tabblad"
+    ] }) })
+  ] });
+}
+const pdfBlock = defineBlock({
+  type: "pdf",
+  schema: PdfBlockSchema,
+  Render: PdfRender,
+  label: "PDF-lezer (menu/document)",
+  icon: "\u{1F4C4}",
+  defaults: () => ({
+    heading: "Onze kaart",
+    documents: [
+      { label: "Lunchkaart", url: "" },
+      { label: "Dinerkaart", url: "" }
+    ],
+    height: 820,
+    showDownload: true
+  })
+});
+export {
+  pdfBlock
+};
+//# sourceMappingURL=PdfBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/PdfBlock.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { z } from \"zod\";\nimport { PdfBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Heading, Text } from \"../ui\";\n\ntype Pdf = z.infer<typeof PdfBlockSchema>;\n\n/**\n * Inline PDF-lezer voor bv. menukaarten. Eén of meer PDF's; bij meerdere verschijnen tabs\n * (lunchkaart/dinerkaart/wijnkaart…). De klant vervangt de PDF's zelf in de editor (URL of\n * media-upload). In de editor (mode=\"preview\") tonen we een lichte placeholder i.p.v. de iframe.\n */\nfunction PdfRender({ block, mode }: BlockRenderProps<Pdf>) {\n  const docs = (block.documents ?? []).filter((d) => d.url);\n  const [active, setActive] = useState(0);\n  if (docs.length === 0 && !block.heading) return null;\n  const current = docs[Math.min(active, docs.length - 1)];\n\n  return (\n    <VStack gap={3} as=\"section\">\n      {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n\n      {docs.length > 1 && (\n        <HStack gap={1} style={{ flexWrap: \"wrap\" }} role=\"tablist\">\n          {docs.map((d, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={i === active}\n              onClick={() => setActive(i)}\n              style={{\n                padding: \"0.4rem 0.9rem\",\n                borderRadius: \"var(--radius-full, 999px)\",\n                border: \"1px solid var(--color-border)\",\n                cursor: \"pointer\",\n                fontWeight: 600,\n                fontSize: \"0.9rem\",\n                background: i === active ? \"var(--color-accent)\" : \"transparent\",\n                color: i === active ? \"var(--color-on-accent)\" : \"var(--color-text-primary)\",\n              }}\n            >\n              {d.label || `Document ${i + 1}`}\n            </button>\n          ))}\n        </HStack>\n      )}\n\n      {current ? (\n        <div\n          style={{\n            borderRadius: \"var(--radius-container)\",\n            overflow: \"hidden\",\n            border: \"1px solid var(--color-border)\",\n            background: \"var(--color-background-muted, rgba(0,0,0,0.03))\",\n          }}\n        >\n          {mode === \"preview\" ? (\n            <div className=\"xicms-embed-consent xicms-embed-preview\" role=\"note\" style={{ height: Math.min(block.height, 360) }}>\n              <p>📄 PDF “{current.label || \"document\"}” — wordt op de live site geladen (niet in de editor).</p>\n            </div>\n          ) : (\n            // <object> i.p.v. <iframe>: browsers zonder inline PDF-viewer (veel mobiel) tonen\n            // dan de fallback-inhoud met een open/download-knop i.p.v. een leeg vlak.\n            <object\n              data={`${current.url}#view=FitH`}\n              type=\"application/pdf\"\n              aria-label={current.label || block.heading || \"PDF\"}\n              style={{ border: 0, width: \"100%\", height: block.height, display: \"block\" }}\n            >\n              <div style={{ display: \"grid\", placeItems: \"center\", gap: \"0.6rem\", padding: \"2.5rem 1rem\", textAlign: \"center\" }}>\n                <Text color=\"secondary\">Je browser kan deze PDF niet inline tonen.</Text>\n                <a className=\"xicms-btn\" href={current.url} target=\"_blank\" rel=\"noopener noreferrer\">\n                  📄 Open “{current.label || \"PDF\"}”\n                </a>\n              </div>\n            </object>\n          )}\n        </div>\n      ) : (\n        <Text color=\"secondary\">Voeg een PDF toe in de editor.</Text>\n      )}\n\n      {block.showDownload && current && (\n        <a href={current.url} target=\"_blank\" rel=\"noopener noreferrer\" style={{ color: \"var(--color-accent)\" }}>\n          <Text type=\"label\">↗ Open “{current.label || \"PDF\"}” in een nieuw tabblad</Text>\n        </a>\n      )}\n    </VStack>\n  );\n}\n\nexport const pdfBlock = defineBlock({\n  type: \"pdf\",\n  schema: PdfBlockSchema,\n  Render: PdfRender,\n  label: \"PDF-lezer (menu/document)\",\n  icon: \"📄\",\n  defaults: () => ({\n    heading: \"Onze kaart\",\n    documents: [\n      { label: \"Lunchkaart\", url: \"\" },\n      { label: \"Dinerkaart\", url: \"\" },\n    ],\n    height: 820,\n    showDownload: true,\n  }),\n});\n"],"mappings":"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","names":[]}

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

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

package/dist/blocks/builtins/Portfolio.js

@@ -0,0 +1,94 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { PortfolioBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { VStack, Grid, Heading, Text } from "../ui";
+import { Img } from "../../media/ImageContext";
+import { LightboxOverlay } from "./Gallery";
+function PortfolioRender({ block }) {
+  const allItems = (block.items ?? []).filter((i) => i.imageUrl);
+  const [activeCat, setActiveCat] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+  const triggerRef = useRef(null);
+  const cats = block.showFilter ? [...new Set(allItems.map((i) => i.category).filter((c) => Boolean(c)))] : [];
+  const items = activeCat ? allItems.filter((i) => i.category === activeCat) : allItems;
+  if (allItems.length === 0) return null;
+  const lightboxItems = items.map((i) => ({ url: i.imageUrl, alt: i.title, caption: i.description ? `${i.title} \u2014 ${i.description}` : i.title }));
+  const close = () => {
+    setOpen(false);
+    triggerRef.current?.focus({ preventScroll: true });
+  };
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-portfolio", children: [
+    (block.heading || block.intro) && /* @__PURE__ */ jsxs(VStack, { gap: 1, hAlign: "center", style: { textAlign: "center" }, children: [
+      block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+      block.intro && /* @__PURE__ */ jsx(Text, { type: "large", color: "secondary", "data-xicms-edit": "intro", children: block.intro })
+    ] }),
+    cats.length > 0 && /* @__PURE__ */ jsxs("div", { className: "xicms-gallery__filter", role: "group", "aria-label": "Filter op categorie", style: { justifyContent: "center", marginBottom: 0 }, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-gallery__filterbtn", "data-active": activeCat === null ? "1" : "0", onClick: () => setActiveCat(null), children: "Alles" }),
+      cats.map((c) => /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-gallery__filterbtn", "data-active": activeCat === c ? "1" : "0", onClick: () => setActiveCat(c), children: c }, c))
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { columns: { minWidth: 240, max: block.columns }, gap: 3, children: items.map((it, idx) => {
+      const media = /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: it.imageUrl,
+          alt: it.title,
+          width: 720,
+          height: 540,
+          sizes: "(max-width: 720px) 100vw, 33vw",
+          style: { width: "100%", aspectRatio: "4 / 3", objectFit: "cover", display: "block" }
+        }
+      );
+      const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+        media,
+        /* @__PURE__ */ jsxs("div", { className: "xicms-portfolio__body", children: [
+          it.category && /* @__PURE__ */ jsx("span", { className: "xicms-portfolio__cat", children: it.category }),
+          /* @__PURE__ */ jsx("strong", { className: "xicms-portfolio__title", children: it.title }),
+          it.description && /* @__PURE__ */ jsx("span", { className: "xicms-portfolio__desc", children: it.description })
+        ] })
+      ] });
+      if (it.href) {
+        return /* @__PURE__ */ jsx("a", { className: "xicms-portfolio__item", href: it.href, children: body }, idx);
+      }
+      if (block.lightbox) {
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "xicms-portfolio__item",
+            onClick: (e) => {
+              triggerRef.current = e.currentTarget;
+              setIndex(idx);
+              setOpen(true);
+            },
+            "aria-label": `${it.title} vergroten`,
+            children: body
+          },
+          idx
+        );
+      }
+      return /* @__PURE__ */ jsx("div", { className: "xicms-portfolio__item", children: body }, idx);
+    }) }),
+    block.lightbox && open && /* @__PURE__ */ jsx(LightboxOverlay, { items: lightboxItems, index, onIndex: setIndex, onClose: close })
+  ] });
+}
+const portfolioBlock = defineBlock({
+  type: "portfolio",
+  schema: PortfolioBlockSchema,
+  Render: PortfolioRender,
+  label: "Portfolio / projecten",
+  icon: "\u{1F5C2}\uFE0F",
+  defaults: () => ({
+    heading: "Ons werk",
+    columns: 3,
+    items: [{ imageUrl: "", title: "Project", category: "" }],
+    showFilter: true,
+    lightbox: true
+  })
+});
+export {
+  portfolioBlock
+};
+//# sourceMappingURL=Portfolio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Portfolio.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { PortfolioBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Heading, Text } from \"../ui\";\nimport { Img } from \"../../media/ImageContext\";\nimport { LightboxOverlay } from \"./Gallery\";\n\ntype Portfolio = z.infer<typeof PortfolioBlockSchema>;\n\n/** Projecten/cases-grid met categorie-filter en lightbox (hergebruikt de galerij-lightbox). */\nfunction PortfolioRender({ block }: BlockRenderProps<Portfolio>) {\n  const allItems = (block.items ?? []).filter((i) => i.imageUrl);\n  const [activeCat, setActiveCat] = useState<string | null>(null);\n  const [open, setOpen] = useState(false);\n  const [index, setIndex] = useState(0);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n\n  const cats = block.showFilter ? [...new Set(allItems.map((i) => i.category).filter((c): c is string => Boolean(c)))] : [];\n  const items = activeCat ? allItems.filter((i) => i.category === activeCat) : allItems;\n  if (allItems.length === 0) return null;\n\n  const lightboxItems = items.map((i) => ({ url: i.imageUrl, alt: i.title, caption: i.description ? `${i.title} — ${i.description}` : i.title }));\n  const close = () => {\n    setOpen(false);\n    triggerRef.current?.focus({ preventScroll: true });\n  };\n\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-portfolio\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n        </VStack>\n      )}\n      {cats.length > 0 && (\n        <div className=\"xicms-gallery__filter\" role=\"group\" aria-label=\"Filter op categorie\" style={{ justifyContent: \"center\", marginBottom: 0 }}>\n          <button type=\"button\" className=\"xicms-gallery__filterbtn\" data-active={activeCat === null ? \"1\" : \"0\"} onClick={() => setActiveCat(null)}>\n            Alles\n          </button>\n          {cats.map((c) => (\n            <button key={c} type=\"button\" className=\"xicms-gallery__filterbtn\" data-active={activeCat === c ? \"1\" : \"0\"} onClick={() => setActiveCat(c)}>\n              {c}\n            </button>\n          ))}\n        </div>\n      )}\n      <Grid columns={{ minWidth: 240, max: block.columns }} gap={3}>\n        {items.map((it, idx) => {\n          const media = (\n            <Img\n              src={it.imageUrl}\n              alt={it.title}\n              width={720}\n              height={540}\n              sizes=\"(max-width: 720px) 100vw, 33vw\"\n              style={{ width: \"100%\", aspectRatio: \"4 / 3\", objectFit: \"cover\", display: \"block\" }}\n            />\n          );\n          const body = (\n            <>\n              {media}\n              <div className=\"xicms-portfolio__body\">\n                {it.category && <span className=\"xicms-portfolio__cat\">{it.category}</span>}\n                <strong className=\"xicms-portfolio__title\">{it.title}</strong>\n                {it.description && <span className=\"xicms-portfolio__desc\">{it.description}</span>}\n              </div>\n            </>\n          );\n          if (it.href) {\n            return (\n              <a key={idx} className=\"xicms-portfolio__item\" href={it.href}>\n                {body}\n              </a>\n            );\n          }\n          if (block.lightbox) {\n            return (\n              <button\n                key={idx}\n                type=\"button\"\n                className=\"xicms-portfolio__item\"\n                onClick={(e) => { triggerRef.current = e.currentTarget; setIndex(idx); setOpen(true); }}\n                aria-label={`${it.title} vergroten`}\n              >\n                {body}\n              </button>\n            );\n          }\n          return (\n            <div key={idx} className=\"xicms-portfolio__item\">\n              {body}\n            </div>\n          );\n        })}\n      </Grid>\n      {block.lightbox && open && (\n        <LightboxOverlay items={lightboxItems} index={index} onIndex={setIndex} onClose={close} />\n      )}\n    </VStack>\n  );\n}\n\nexport const portfolioBlock = defineBlock({\n  type: \"portfolio\",\n  schema: PortfolioBlockSchema,\n  Render: PortfolioRender,\n  label: \"Portfolio / projecten\",\n  icon: \"🗂️\",\n  defaults: () => ({\n    heading: \"Ons werk\",\n    columns: 3,\n    items: [{ imageUrl: \"\", title: \"Project\", category: \"\" }],\n    showFilter: true,\n    lightbox: true,\n  }),\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,6 @@
+import type { z } from "zod";
+import { PricingBlockSchema } from "../../schema/blocks";
+type Pricing = z.infer<typeof PricingBlockSchema>;
+export declare function pricingJsonLd(items: Pricing["items"], currency?: string): Record<string, unknown>;
+export declare const pricingBlock: import("..").BlockDefinition<z.ZodTypeAny>;
+export {};

package/dist/blocks/builtins/Pricing.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PricingBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { VStack, Grid, Card, Heading, Text, Btn } from "../ui";
+function pricingJsonLd(items, currency = "EUR") {
+  return {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    itemListElement: items.filter((it) => it.label).map((it, i) => ({
+      "@type": "ListItem",
+      position: i + 1,
+      item: {
+        "@type": "Product",
+        name: it.label,
+        ...it.detail ? { description: it.detail } : {},
+        offers: { "@type": "Offer", price: it.price, priceCurrency: currency }
+      }
+    }))
+  };
+}
+function PricingRender({ block }) {
+  const items = block.items ?? [];
+  return /* @__PURE__ */ jsxs(VStack, { gap: 4, as: "section", className: "xicms-pricing", 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: 240, max: 4 }, gap: 4, children: items.map((it, i) => /* @__PURE__ */ jsx(
+      Card,
+      {
+        padding: 5,
+        height: "100%",
+        className: `xicms-pricing__card${it.highlighted ? " xicms-pricing__card--highlighted" : ""}`,
+        style: it.highlighted ? { outline: "2px solid var(--color-accent)", outlineOffset: -2 } : void 0,
+        children: /* @__PURE__ */ jsxs(VStack, { gap: 2, style: { height: "100%" }, children: [
+          /* @__PURE__ */ jsx(Text, { type: "label", color: "secondary", className: "xicms-pricing__label", "data-xicms-edit": `items.${i}.label`, style: { textTransform: "uppercase", letterSpacing: "0.05em" }, children: it.label }),
+          /* @__PURE__ */ jsxs(VStack, { gap: 0, children: [
+            /* @__PURE__ */ jsx(Heading, { level: 3, className: "xicms-pricing__price", "data-xicms-edit": `items.${i}.price`, style: { fontSize: "clamp(1.75rem, 4vw, 2.25rem)", lineHeight: 1.1, fontWeight: 700 }, children: it.price }),
+            it.billingPeriod && /* @__PURE__ */ jsx(Text, { type: "supporting", color: "secondary", children: it.billingPeriod })
+          ] }),
+          it.detail && /* @__PURE__ */ jsx(Text, { color: "secondary", children: it.detail }),
+          it.features && it.features.length > 0 && /* @__PURE__ */ jsx(VStack, { gap: 1, as: "ul", style: { listStyle: "none", margin: 0, padding: 0, flex: 1 }, children: it.features.map((f, j) => (
+            // Echte <li> binnen de <ul> (geldige HTML; screenreaders kondigen de lijst aan).
+            /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Text, { display: "block", children: [
+              "\u2713 ",
+              f
+            ] }) }, j)
+          )) }),
+          it.ctaLabel && /* @__PURE__ */ jsx(Btn, { label: it.ctaLabel, href: it.ctaHref ?? "#", variant: it.highlighted ? "primary" : "outline" })
+        ] })
+      },
+      i
+    )) }),
+    block.note && /* @__PURE__ */ jsx(Text, { color: "secondary", justify: "center", style: { textAlign: "center" }, children: block.note }),
+    block.jsonLd && /* @__PURE__ */ jsx(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(pricingJsonLd(items, block.currency)) }
+      }
+    )
+  ] });
+}
+const pricingBlock = defineBlock({
+  type: "pricing",
+  schema: PricingBlockSchema,
+  Render: PricingRender,
+  label: "Prijzen",
+  icon: "\u{1F4B6}",
+  defaults: () => ({
+    heading: "Prijzen",
+    items: [{ label: "Pakket", price: "\u20AC 00", billingPeriod: "/maand", features: [], highlighted: false }]
+  })
+});
+export {
+  pricingBlock,
+  pricingJsonLd
+};
+//# sourceMappingURL=Pricing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Pricing.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { PricingBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Pricing = z.infer<typeof PricingBlockSchema>;\n\nexport function pricingJsonLd(items: Pricing[\"items\"], currency = \"EUR\"): Record<string, unknown> {\n  return {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"ItemList\",\n    itemListElement: items\n      .filter((it) => it.label)\n      .map((it, i) => ({\n        \"@type\": \"ListItem\",\n        position: i + 1,\n        item: {\n          \"@type\": \"Product\",\n          name: it.label,\n          ...(it.detail ? { description: it.detail } : {}),\n          offers: { \"@type\": \"Offer\", price: it.price, priceCurrency: currency },\n        },\n      })),\n  };\n}\n\n/** Prijzen als kaarten met optionele features, uitgelichte tier en per-tier knop (Astryx). */\nfunction PricingRender({ block }: BlockRenderProps<Pricing>) {\n  const items = block.items ?? [];\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-pricing\">\n      {block.heading && (\n        <Heading level={2} justify=\"center\" data-xicms-edit=\"heading\" style={{ textAlign: \"center\" }}>{block.heading}</Heading>\n      )}\n      <Grid columns={{ minWidth: 240, max: 4 }} gap={4}>\n        {items.map((it, i) => (\n          <Card\n            key={i}\n            padding={5}\n            height=\"100%\"\n            className={`xicms-pricing__card${it.highlighted ? \" xicms-pricing__card--highlighted\" : \"\"}`}\n            style={it.highlighted ? { outline: \"2px solid var(--color-accent)\", outlineOffset: -2 } : undefined}\n          >\n            <VStack gap={2} style={{ height: \"100%\" }}>\n              <Text type=\"label\" color=\"secondary\" className=\"xicms-pricing__label\" data-xicms-edit={`items.${i}.label`} style={{ textTransform: \"uppercase\", letterSpacing: \"0.05em\" }}>\n                {it.label}\n              </Text>\n              <VStack gap={0}>\n                <Heading level={3} className=\"xicms-pricing__price\" data-xicms-edit={`items.${i}.price`} style={{ fontSize: \"clamp(1.75rem, 4vw, 2.25rem)\", lineHeight: 1.1, fontWeight: 700 }}>\n                  {it.price}\n                </Heading>\n                {it.billingPeriod && <Text type=\"supporting\" color=\"secondary\">{it.billingPeriod}</Text>}\n              </VStack>\n              {it.detail && <Text color=\"secondary\">{it.detail}</Text>}\n              {it.features && it.features.length > 0 && (\n                <VStack gap={1} as=\"ul\" style={{ listStyle: \"none\", margin: 0, padding: 0, flex: 1 }}>\n                  {it.features.map((f, j) => (\n                    // Echte <li> binnen de <ul> (geldige HTML; screenreaders kondigen de lijst aan).\n                    <li key={j}>\n                      <Text display=\"block\">✓ {f}</Text>\n                    </li>\n                  ))}\n                </VStack>\n              )}\n              {it.ctaLabel && (\n                <Btn label={it.ctaLabel} href={it.ctaHref ?? \"#\"} variant={it.highlighted ? \"primary\" : \"outline\"} />\n              )}\n            </VStack>\n          </Card>\n        ))}\n      </Grid>\n      {block.note && <Text color=\"secondary\" justify=\"center\" style={{ textAlign: \"center\" }}>{block.note}</Text>}\n      {block.jsonLd && (\n        <script\n          type=\"application/ld+json\"\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{ __html: JSON.stringify(pricingJsonLd(items, block.currency)) }}\n        />\n      )}\n    </VStack>\n  );\n}\n\nexport const pricingBlock = defineBlock({\n  type: \"pricing\",\n  schema: PricingBlockSchema,\n  Render: PricingRender,\n  label: \"Prijzen\",\n  icon: \"💶\",\n  defaults: () => ({\n    heading: \"Prijzen\",\n    items: [{ label: \"Pakket\", price: \"€ 00\", billingPeriod: \"/maand\", features: [], highlighted: false }],\n  }),\n});\n"],"mappings":"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","names":[]}

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

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

package/dist/blocks/builtins/RichTextBlock.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { RichTextBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+function RichTextRender({ block }) {
+  return /* @__PURE__ */ jsx("div", { className: "xicms-richtext", dangerouslySetInnerHTML: { __html: block.html } });
+}
+const richTextBlock = defineBlock({
+  type: "richText",
+  schema: RichTextBlockSchema,
+  Render: RichTextRender,
+  label: "Tekst",
+  icon: "\xB6",
+  defaults: () => ({ html: "<p></p>" })
+});
+export {
+  richTextBlock
+};
+//# sourceMappingURL=RichTextBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/RichTextBlock.tsx"],"sourcesContent":["import type { z } from \"zod\";\nimport { RichTextBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\n\ntype RichText = z.infer<typeof RichTextBlockSchema>;\n\nfunction RichTextRender({ block }: BlockRenderProps<RichText>) {\n  // `html` is bij opslaan server-side gesanitized (server/sanitize.ts), dus veilig te renderen.\n  return <div className=\"xicms-richtext\" dangerouslySetInnerHTML={{ __html: block.html }} />;\n}\n\nexport const richTextBlock = defineBlock({\n  type: \"richText\",\n  schema: RichTextBlockSchema,\n  Render: RichTextRender,\n  label: \"Tekst\",\n  icon: \"¶\",\n  defaults: () => ({ html: \"<p></p>\" }),\n});\n"],"mappings":"AAQS;AAPT,SAAS,2BAA2B;AACpC,SAAS,mBAA0C;AAInD,SAAS,eAAe,EAAE,MAAM,GAA+B;AAE7D,SAAO,oBAAC,SAAI,WAAU,kBAAiB,yBAAyB,EAAE,QAAQ,MAAM,KAAK,GAAG;AAC1F;AAEO,MAAM,gBAAgB,YAAY;AAAA,EACvC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,MAAM,UAAU;AACrC,CAAC;","names":[]}

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

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

package/dist/blocks/builtins/Search.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { collection, getDocs, query, where } from "firebase/firestore";
+import { SearchBlockSchema } from "../../schema/blocks";
+import { defineBlock } from "../registry";
+import { getDb } from "../../firebase/client";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { rankResults, highlightParts } from "./lib/searchRank";
+function blocksToText(blocks) {
+  if (!Array.isArray(blocks)) return "";
+  const parts = [];
+  for (const b of blocks) {
+    if (b && typeof b === "object") {
+      for (const v of Object.values(b)) {
+        if (typeof v === "string") parts.push(v);
+      }
+    }
+  }
+  return parts.join(" ").replace(/<[^>]*>/g, " ");
+}
+function SearchRender({ block, siteId }) {
+  const [entries, setEntries] = useState([]);
+  const [q, setQ] = useState("");
+  useEffect(() => {
+    const db = getDb();
+    if (!db) return;
+    let cancelled = false;
+    (async () => {
+      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]);
+  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)) })
+  ] });
+}
+const searchBlock = defineBlock({
+  type: "search",
+  schema: SearchBlockSchema,
+  Render: SearchRender,
+  label: "Zoeken",
+  icon: "\u{1F50D}",
+  defaults: () => ({ placeholder: "Zoeken\u2026", includeNews: true })
+});
+export {
+  searchBlock
+};
+//# sourceMappingURL=Search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/Search.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { collection, getDocs, query, where } from \"firebase/firestore\";\nimport type { z } from \"zod\";\nimport { SearchBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { getDb } from \"../../firebase/client\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { rankResults, highlightParts } from \"./lib/searchRank\";\n\ntype SearchBlock = z.infer<typeof SearchBlockSchema>;\n\ninterface Entry {\n  title: string;\n  path: string;\n  text: string;\n}\n\n/** Vlakt block-content uit tot doorzoekbare tekst (titels, rich text, faq-vragen, …). */\nfunction blocksToText(blocks: unknown): string {\n  if (!Array.isArray(blocks)) return \"\";\n  const parts: string[] = [];\n  for (const b of blocks) {\n    if (b && typeof b === \"object\") {\n      for (const v of Object.values(b as Record<string, unknown>)) {\n        if (typeof v === \"string\") parts.push(v);\n      }\n    }\n  }\n  return parts.join(\" \").replace(/<[^>]*>/g, \" \");\n}\n\n/** Site-zoek — leest gepubliceerde pagina's (en optioneel nieuws) en filtert client-side. */\nfunction SearchRender({ block, siteId }: BlockRenderProps<SearchBlock>) {\n  const [entries, setEntries] = useState<Entry[]>([]);\n  const [q, setQ] = useState(\"\");\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    let cancelled = false;\n    (async () => {\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]);\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  schema: SearchBlockSchema,\n  Render: SearchRender,\n  label: \"Zoeken\",\n  icon: \"🔍\",\n  defaults: () => ({ placeholder: \"Zoeken…\", includeNews: true }),\n});\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,5 @@
+import type { z } from "zod";
+export declare const featureBlock: import("..").BlockDefinition<z.ZodTypeAny>;
+export declare const countersBlock: import("..").BlockDefinition<z.ZodTypeAny>;
+export declare const logosBlock: import("..").BlockDefinition<z.ZodTypeAny>;
+export declare const timelineBlock: import("..").BlockDefinition<z.ZodTypeAny>;