@xiwebdesign/xicms-core 5.4.0 → 5.5.0

package/dist/modules/shop/blocks/Donation.js

@@ -0,0 +1,145 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DonationBlockSchema, formatCents } from "../../../schema/shop";
+import { defineBlock } from "../../../blocks/registry";
+import { Card, Heading, Text } from "../../../blocks/ui";
+import { TextInput } from "@astryxdesign/core/TextInput";
+import { createOrderCall, useShopSettings } from "../lib";
+function DonationRender({ block, siteId, mode }) {
+  const settings = useShopSettings();
+  const [amountCents, setAmountCents] = useState(block.amountsCents[0] ?? null);
+  const [customEuro, setCustomEuro] = useState("");
+  const [custom, setCustom] = useState(false);
+  const [v, setV] = useState({ name: "", email: "" });
+  const [hp, setHp] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const effectiveCents = custom ? Math.round((Number(customEuro.replace(",", ".")) || 0) * 100) : amountCents ?? 0;
+  const valid = effectiveCents >= (custom ? block.customMinCents : 50) && effectiveCents <= block.customMaxCents;
+  async function submit(e) {
+    e.preventDefault();
+    if (mode === "preview" || busy || !valid) return;
+    setBusy(true);
+    setError(null);
+    try {
+      const { url } = await createOrderCall({
+        siteId,
+        items: [{ qty: 1, donationCents: effectiveCents }],
+        customer: { email: v.email, name: v.name },
+        successPath: settings.successPath,
+        cancelPath: typeof window !== "undefined" ? window.location.pathname : "/",
+        _hp: hp || void 0
+      });
+      window.location.assign(url);
+    } catch (err) {
+      console.error("[xicms] donatie mislukt:", err);
+      setError("Doneren is niet gelukt. Probeer het later opnieuw.");
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsx(Card, { padding: 4, className: "xicms-shop-donation", children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, style: { display: "grid", gap: "1rem" }, children: [
+    block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
+    block.introText && /* @__PURE__ */ jsx(Text, { "data-xicms-edit": "introText", children: block.introText }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, role: "group", "aria-label": "Kies een bedrag", children: [
+      block.amountsCents.map((c) => {
+        const active = !custom && amountCents === c;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "xicms-btn",
+            "aria-pressed": active,
+            onClick: () => {
+              setCustom(false);
+              setAmountCents(c);
+            },
+            style: {
+              cursor: "pointer",
+              border: active ? "2px solid var(--xicms-primary, #333)" : "2px solid rgba(0,0,0,0.15)",
+              background: active ? "var(--xicms-primary, #333)" : "transparent",
+              color: active ? "var(--xicms-primary-contrast, #fff)" : "inherit",
+              borderRadius: 999,
+              padding: "0.5rem 1.1rem"
+            },
+            children: formatCents(c, settings.currency)
+          },
+          c
+        );
+      }),
+      block.allowCustom && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "xicms-btn",
+          "aria-pressed": custom,
+          onClick: () => setCustom(true),
+          style: {
+            cursor: "pointer",
+            border: custom ? "2px solid var(--xicms-primary, #333)" : "2px solid rgba(0,0,0,0.15)",
+            background: "transparent",
+            borderRadius: 999,
+            padding: "0.5rem 1.1rem"
+          },
+          children: "Ander bedrag"
+        }
+      )
+    ] }),
+    custom && /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        label: `Bedrag in euro's (min. ${formatCents(block.customMinCents, settings.currency)})`,
+        isRequired: true,
+        placeholder: "10,00",
+        value: customEuro,
+        onChange: setCustomEuro
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem", gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))" }, children: [
+      /* @__PURE__ */ jsx(TextInput, { label: "Naam", isRequired: true, value: v.name, onChange: (x) => setV((p) => ({ ...p, name: x })) }),
+      /* @__PURE__ */ jsx(TextInput, { label: "E-mail", type: "email", isRequired: true, value: v.email, onChange: (x) => setV((p) => ({ ...p, email: x })) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        tabIndex: -1,
+        autoComplete: "off",
+        value: hp,
+        onChange: (e) => setHp(e.target.value),
+        style: { position: "absolute", left: "-9999px", width: 1, height: 1 },
+        "aria-hidden": true
+      }
+    ),
+    error && /* @__PURE__ */ jsx(Text, { role: "alert", style: { color: "var(--color-error, #c0392b)" }, children: error }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        className: "xicms-btn xicms-btn--primary",
+        disabled: busy || !valid,
+        style: { cursor: busy ? "wait" : "pointer", width: "fit-content", opacity: valid ? 1 : 0.5 },
+        children: busy ? "Bezig\u2026" : `${block.buttonLabel} ${valid ? formatCents(effectiveCents, settings.currency) : ""}`
+      }
+    )
+  ] }) });
+}
+const donationBlock = defineBlock({
+  type: "donation",
+  schema: DonationBlockSchema,
+  Render: DonationRender,
+  label: "Donatie",
+  icon: "\u{1F49B}",
+  defaults: () => ({
+    heading: "Steun ons",
+    amountsCents: [500, 1e3, 2500],
+    allowCustom: true,
+    customMinCents: 100,
+    customMaxCents: 1e5,
+    buttonLabel: "Doneer"
+  })
+});
+export {
+  donationBlock
+};
+//# sourceMappingURL=Donation.js.map

package/dist/modules/shop/blocks/Donation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/shop/blocks/Donation.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport { DonationBlockSchema, formatCents } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { createOrderCall, useShopSettings } from \"../lib\";\n\ntype Blk = z.infer<typeof DonationBlockSchema>;\n\n/**\n * Donatie — bedragknoppen + vrij bedrag, naam/e-mail, betaling via dezelfde `createOrder`-flow\n * (orderregel kind:\"donation\", geen verzendadres/verzendkosten). Het gekozen bedrag is de enige\n * client-invoer die de server accepteert — binnen de min/max van dit block.\n */\nfunction DonationRender({ block, siteId, mode }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const [amountCents, setAmountCents] = useState<number | null>(block.amountsCents[0] ?? null);\n  const [customEuro, setCustomEuro] = useState(\"\");\n  const [custom, setCustom] = useState(false);\n  const [v, setV] = useState({ name: \"\", email: \"\" });\n  const [hp, setHp] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const effectiveCents = custom\n    ? Math.round((Number(customEuro.replace(\",\", \".\")) || 0) * 100)\n    : amountCents ?? 0;\n  const valid =\n    effectiveCents >= (custom ? block.customMinCents : 50) &&\n    effectiveCents <= block.customMaxCents;\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\" || busy || !valid) return;\n    setBusy(true);\n    setError(null);\n    try {\n      const { url } = await createOrderCall({\n        siteId,\n        items: [{ qty: 1, donationCents: effectiveCents }],\n        customer: { email: v.email, name: v.name },\n        successPath: settings.successPath,\n        cancelPath: typeof window !== \"undefined\" ? window.location.pathname : \"/\",\n        _hp: hp || undefined,\n      });\n      window.location.assign(url);\n    } catch (err) {\n      console.error(\"[xicms] donatie mislukt:\", err);\n      setError(\"Doneren is niet gelukt. Probeer het later opnieuw.\");\n      setBusy(false);\n    }\n  }\n\n  return (\n    <Card padding={4} className=\"xicms-shop-donation\">\n      <form onSubmit={submit} style={{ display: \"grid\", gap: \"1rem\" }}>\n        {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {block.introText && <Text data-xicms-edit=\"introText\">{block.introText}</Text>}\n\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }} role=\"group\" aria-label=\"Kies een bedrag\">\n          {block.amountsCents.map((c) => {\n            const active = !custom && amountCents === c;\n            return (\n              <button\n                key={c}\n                type=\"button\"\n                className=\"xicms-btn\"\n                aria-pressed={active}\n                onClick={() => {\n                  setCustom(false);\n                  setAmountCents(c);\n                }}\n                style={{\n                  cursor: \"pointer\",\n                  border: active ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid rgba(0,0,0,0.15)\",\n                  background: active ? \"var(--xicms-primary, #333)\" : \"transparent\",\n                  color: active ? \"var(--xicms-primary-contrast, #fff)\" : \"inherit\",\n                  borderRadius: 999,\n                  padding: \"0.5rem 1.1rem\",\n                }}\n              >\n                {formatCents(c, settings.currency)}\n              </button>\n            );\n          })}\n          {block.allowCustom && (\n            <button\n              type=\"button\"\n              className=\"xicms-btn\"\n              aria-pressed={custom}\n              onClick={() => setCustom(true)}\n              style={{\n                cursor: \"pointer\",\n                border: custom ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid rgba(0,0,0,0.15)\",\n                background: \"transparent\",\n                borderRadius: 999,\n                padding: \"0.5rem 1.1rem\",\n              }}\n            >\n              Ander bedrag\n            </button>\n          )}\n        </div>\n\n        {custom && (\n          <TextInput\n            label={`Bedrag in euro's (min. ${formatCents(block.customMinCents, settings.currency)})`}\n            isRequired\n            placeholder=\"10,00\"\n            value={customEuro}\n            onChange={setCustomEuro}\n          />\n        )}\n\n        <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(220px, 100%), 1fr))\" }}>\n          <TextInput label=\"Naam\" isRequired value={v.name} onChange={(x) => setV((p) => ({ ...p, name: x }))} />\n          <TextInput label=\"E-mail\" type=\"email\" isRequired value={v.email} onChange={(x) => setV((p) => ({ ...p, email: x }))} />\n        </div>\n\n        {/* Honeypot */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n\n        <button\n          type=\"submit\"\n          className=\"xicms-btn xicms-btn--primary\"\n          disabled={busy || !valid}\n          style={{ cursor: busy ? \"wait\" : \"pointer\", width: \"fit-content\", opacity: valid ? 1 : 0.5 }}\n        >\n          {busy ? \"Bezig…\" : `${block.buttonLabel} ${valid ? formatCents(effectiveCents, settings.currency) : \"\"}`}\n        </button>\n      </form>\n    </Card>\n  );\n}\n\nexport const donationBlock = defineBlock({\n  type: \"donation\",\n  schema: DonationBlockSchema,\n  Render: DonationRender,\n  label: \"Donatie\",\n  icon: \"💛\",\n  defaults: () => ({\n    heading: \"Steun ons\",\n    amountsCents: [500, 1000, 2500],\n    allowCustom: true,\n    customMinCents: 100,\n    customMaxCents: 100_000,\n    buttonLabel: \"Doneer\",\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/modules/shop/blocks/OrderStatus.d.ts

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

package/dist/modules/shop/blocks/OrderStatus.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { OrderStatusBlockSchema } from "../../../schema/shop";
+import { defineBlock } from "../../../blocks/registry";
+import { Card, Heading, Text } from "../../../blocks/ui";
+import { cartClear } from "../cartStore";
+import { readQueryParam, useShopSettings } from "../lib";
+function OrderStatusRender({ block, siteId }) {
+  const settings = useShopSettings();
+  const [state, setState] = useState({ status: null, order: null });
+  useEffect(() => {
+    const status = readQueryParam("status");
+    setState({ status, order: readQueryParam("order") });
+    if (status === "success") cartClear(siteId);
+  }, [siteId]);
+  const cancelled = state.status === "cancelled";
+  return /* @__PURE__ */ jsxs(Card, { padding: 4, variant: cancelled ? "muted" : "green", className: "xicms-shop-orderstatus", role: "status", children: [
+    /* @__PURE__ */ jsx(Heading, { level: 1, "data-xicms-edit": cancelled ? "cancelledTitle" : "successTitle", children: cancelled ? block.cancelledTitle : block.successTitle }),
+    /* @__PURE__ */ jsx(Text, { display: "block", style: { marginTop: 8 }, "data-xicms-edit": cancelled ? "cancelledText" : "successText", children: cancelled ? block.cancelledText : block.successText }),
+    !cancelled && state.order && /* @__PURE__ */ jsxs(Text, { display: "block", style: { marginTop: 8 }, children: [
+      "Je bestelnummer is ",
+      /* @__PURE__ */ jsx("strong", { children: state.order }),
+      "."
+    ] }),
+    /* @__PURE__ */ jsx(Text, { display: "block", style: { marginTop: 12 }, children: /* @__PURE__ */ jsx("a", { href: cancelled ? settings.cartPath : settings.shopPath, children: cancelled ? "Terug naar je winkelwagen" : "Verder winkelen" }) })
+  ] });
+}
+const orderStatusBlock = defineBlock({
+  type: "orderStatus",
+  schema: OrderStatusBlockSchema,
+  Render: OrderStatusRender,
+  label: "Bestelstatus (bedankt-pagina)",
+  icon: "\u2705",
+  defaults: () => ({})
+});
+export {
+  orderStatusBlock
+};
+//# sourceMappingURL=OrderStatus.js.map

package/dist/modules/shop/blocks/OrderStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/shop/blocks/OrderStatus.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { OrderStatusBlockSchema } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { cartClear } from \"../cartStore\";\nimport { readQueryParam, useShopSettings } from \"../lib\";\n\ntype Blk = z.infer<typeof OrderStatusBlockSchema>;\n\n/**\n * Bedankt-/statuspagina na terugkeer uit Stripe. Bij `?status=success` wordt de cart geleegd\n * (pas hier — een geannuleerde betaling behoudt de winkelwagen). De echte orderstatus wordt\n * server-side gezet door de Stripe-webhook; dit block toont alleen de redirect-uitkomst.\n */\nfunction OrderStatusRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const [state, setState] = useState<{ status: string | null; order: string | null }>({ status: null, order: null });\n\n  useEffect(() => {\n    const status = readQueryParam(\"status\");\n    setState({ status, order: readQueryParam(\"order\") });\n    if (status === \"success\") cartClear(siteId);\n  }, [siteId]);\n\n  const cancelled = state.status === \"cancelled\";\n\n  return (\n    <Card padding={4} variant={cancelled ? \"muted\" : \"green\"} className=\"xicms-shop-orderstatus\" role=\"status\">\n      <Heading level={1} data-xicms-edit={cancelled ? \"cancelledTitle\" : \"successTitle\"}>\n        {cancelled ? block.cancelledTitle : block.successTitle}\n      </Heading>\n      <Text display=\"block\" style={{ marginTop: 8 }} data-xicms-edit={cancelled ? \"cancelledText\" : \"successText\"}>\n        {cancelled ? block.cancelledText : block.successText}\n      </Text>\n      {!cancelled && state.order && (\n        <Text display=\"block\" style={{ marginTop: 8 }}>\n          Je bestelnummer is <strong>{state.order}</strong>.\n        </Text>\n      )}\n      <Text display=\"block\" style={{ marginTop: 12 }}>\n        <a href={cancelled ? settings.cartPath : settings.shopPath}>\n          {cancelled ? \"Terug naar je winkelwagen\" : \"Verder winkelen\"}\n        </a>\n      </Text>\n    </Card>\n  );\n}\n\nexport const orderStatusBlock = defineBlock({\n  type: \"orderStatus\",\n  schema: OrderStatusBlockSchema,\n  Render: OrderStatusRender,\n  label: \"Bestelstatus (bedankt-pagina)\",\n  icon: \"✅\",\n  defaults: () => ({}),\n});\n"],"mappings":";AA+BM,cAOE,YAPF;AA7BN,SAAS,WAAW,gBAAgB;AAEpC,SAAS,8BAA8B;AACvC,SAAS,mBAA0C;AACnD,SAAS,MAAM,SAAS,YAAY;AACpC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB,uBAAuB;AAShD,SAAS,kBAAkB,EAAE,OAAO,OAAO,GAA0B;AACnE,QAAM,WAAW,gBAAgB;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0D,EAAE,QAAQ,MAAM,OAAO,KAAK,CAAC;AAEjH,YAAU,MAAM;AACd,UAAM,SAAS,eAAe,QAAQ;AACtC,aAAS,EAAE,QAAQ,OAAO,eAAe,OAAO,EAAE,CAAC;AACnD,QAAI,WAAW,UAAW,WAAU,MAAM;AAAA,EAC5C,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,YAAY,MAAM,WAAW;AAEnC,SACE,qBAAC,QAAK,SAAS,GAAG,SAAS,YAAY,UAAU,SAAS,WAAU,0BAAyB,MAAK,UAChG;AAAA,wBAAC,WAAQ,OAAO,GAAG,mBAAiB,YAAY,mBAAmB,gBAChE,sBAAY,MAAM,iBAAiB,MAAM,cAC5C;AAAA,IACA,oBAAC,QAAK,SAAQ,SAAQ,OAAO,EAAE,WAAW,EAAE,GAAG,mBAAiB,YAAY,kBAAkB,eAC3F,sBAAY,MAAM,gBAAgB,MAAM,aAC3C;AAAA,IACC,CAAC,aAAa,MAAM,SACnB,qBAAC,QAAK,SAAQ,SAAQ,OAAO,EAAE,WAAW,EAAE,GAAG;AAAA;AAAA,MAC1B,oBAAC,YAAQ,gBAAM,OAAM;AAAA,MAAS;AAAA,OACnD;AAAA,IAEF,oBAAC,QAAK,SAAQ,SAAQ,OAAO,EAAE,WAAW,GAAG,GAC3C,8BAAC,OAAE,MAAM,YAAY,SAAS,WAAW,SAAS,UAC/C,sBAAY,8BAA8B,mBAC7C,GACF;AAAA,KACF;AAEJ;AAEO,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,CAAC;AACpB,CAAC;","names":[]}

package/dist/modules/shop/blocks/ProductDetail.d.ts

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

package/dist/modules/shop/blocks/ProductDetail.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ProductDetailBlockSchema, formatCents, productPriceCents, variantKeyFor } from "../../../schema/shop";
+import { defineBlock } from "../../../blocks/registry";
+import { Card, Heading, Text } from "../../../blocks/ui";
+import { Selector } from "@astryxdesign/core/Selector";
+import { cartAdd } from "../cartStore";
+import { fetchProductBySlug, readQueryParam, useShopSettings, variantLabelFor } from "../lib";
+function ProductDetailRender({ block, siteId }) {
+  const settings = useShopSettings();
+  const [product, setProduct] = useState(void 0);
+  const [choices, setChoices] = useState({});
+  const [qty, setQty] = useState(1);
+  const [imageIdx, setImageIdx] = useState(0);
+  const [added, setAdded] = useState(false);
+  useEffect(() => {
+    const slug = block.slug || readQueryParam("p") || "";
+    if (!slug) {
+      setProduct(null);
+      return;
+    }
+    void fetchProductBySlug(siteId, slug).then(setProduct).catch(() => setProduct(null));
+  }, [siteId, block.slug]);
+  const options = product?.options ?? [];
+  const allChosen = options.every((_, i) => Boolean(choices[i]));
+  const variantKey = product && options.length > 0 && allChosen ? variantKeyFor(options.map((_, i) => choices[i])) : void 0;
+  const variant = variantKey ? product?.variants?.find((v) => v.key === variantKey) : void 0;
+  const priceCents = useMemo(() => {
+    if (!product) return 0;
+    return productPriceCents(product, variantKey);
+  }, [product, variantKey]);
+  const outOfStock = Boolean(
+    product?.trackStock && (options.length === 0 ? product.stock !== void 0 && product.stock <= 0 : variant?.stock !== void 0 && variant.stock <= 0)
+  );
+  const variantInactive = variant !== void 0 && variant.active === false;
+  if (product === void 0) return null;
+  if (product === null) {
+    return /* @__PURE__ */ jsx(Card, { padding: 4, variant: "muted", children: /* @__PURE__ */ jsxs(Text, { children: [
+      "Product niet gevonden. ",
+      /* @__PURE__ */ jsx("a", { href: settings.shopPath, children: "Terug naar de winkel" })
+    ] }) });
+  }
+  function addToCart() {
+    if (!product) return;
+    cartAdd(
+      siteId,
+      {
+        productId: product.id,
+        slug: product.slug,
+        name: product.name,
+        variantKey,
+        variantLabel: variantKey ? variantLabelFor(options, variantKey) : void 0,
+        unitPriceCents: priceCents,
+        imageUrl: product.images?.[0]
+      },
+      qty
+    );
+    setAdded(true);
+  }
+  const canOrder = (options.length === 0 || allChosen) && !outOfStock && !variantInactive;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "xicms-shop-detail",
+      style: { display: "grid", gap: "2rem", gridTemplateColumns: "repeat(auto-fit, minmax(min(320px, 100%), 1fr))" },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "xicms-shop-detail__media", children: [
+          product.images?.[imageIdx] ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: product.images[imageIdx],
+              alt: product.name,
+              style: { width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--xicms-radius, 12px)" }
+            }
+          ) : /* @__PURE__ */ jsx("div", { style: { width: "100%", aspectRatio: "1/1", display: "grid", placeItems: "center", background: "var(--xicms-muted, #f1f1f1)", borderRadius: "var(--xicms-radius, 12px)" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "3rem", opacity: 0.4 }, children: "\u{1F5BC}\uFE0F" }) }),
+          (product.images?.length ?? 0) > 1 && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 8, marginTop: 8, flexWrap: "wrap" }, children: product.images.map((url, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setImageIdx(i),
+              style: {
+                padding: 0,
+                border: i === imageIdx ? "2px solid var(--xicms-primary, #333)" : "2px solid transparent",
+                borderRadius: 8,
+                cursor: "pointer",
+                background: "none"
+              },
+              children: /* @__PURE__ */ jsx("img", { src: url, alt: "", style: { width: 64, height: 64, objectFit: "cover", borderRadius: 6, display: "block" } })
+            },
+            url + i
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "xicms-shop-detail__info", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 1, children: product.name }),
+          /* @__PURE__ */ jsxs(Text, { size: "xl", weight: "bold", display: "block", style: { margin: "0.5rem 0 1rem" }, children: [
+            product.compareAtCents !== void 0 && product.compareAtCents > priceCents && /* @__PURE__ */ jsx("s", { style: { opacity: 0.6, marginRight: 8, fontWeight: "normal" }, children: formatCents(product.compareAtCents, settings.currency) }),
+            formatCents(priceCents, settings.currency)
+          ] }),
+          product.description && // Platte tekst met behoud van regeleinden — bewust geen HTML (zie schema/shop.ts).
+          /* @__PURE__ */ jsx(Text, { display: "block", style: { whiteSpace: "pre-wrap" }, children: product.description }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.75rem", maxWidth: 420, marginTop: "1rem" }, children: [
+            options.map((opt, i) => /* @__PURE__ */ jsx(
+              Selector,
+              {
+                label: opt.name,
+                placeholder: "Kies\u2026",
+                options: opt.values,
+                value: choices[i] ?? "",
+                onChange: (v) => {
+                  setChoices((prev) => ({ ...prev, [i]: v ?? "" }));
+                  setAdded(false);
+                }
+              },
+              opt.name
+            )),
+            /* @__PURE__ */ jsxs("label", { className: "xicms-shop-detail__qty", style: { display: "grid", gap: 4 }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9rem" }, children: "Aantal" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: "xicms-input",
+                  type: "number",
+                  min: 1,
+                  max: 999,
+                  value: qty,
+                  onChange: (e) => setQty(Math.max(1, Math.min(999, Number(e.target.value) || 1))),
+                  style: { width: 90 }
+                }
+              )
+            ] }),
+            outOfStock && /* @__PURE__ */ jsx(Text, { style: { color: "var(--color-error, #c0392b)" }, children: "Uitverkocht in deze uitvoering." }),
+            variantInactive && /* @__PURE__ */ jsx(Text, { style: { color: "var(--color-error, #c0392b)" }, children: "Deze combinatie is niet leverbaar." }),
+            added ? /* @__PURE__ */ jsxs("div", { role: "status", style: { display: "grid", gap: 8 }, children: [
+              /* @__PURE__ */ jsx(Text, { children: "\u2713 Toegevoegd aan je winkelwagen." }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsx("a", { className: "xicms-btn xicms-btn--primary", href: settings.cartPath, children: "Naar winkelwagen" }),
+                /* @__PURE__ */ jsx("a", { className: "xicms-btn xicms-btn--secondary", href: settings.shopPath, children: "Verder winkelen" })
+              ] })
+            ] }) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "xicms-btn xicms-btn--primary",
+                disabled: !canOrder,
+                onClick: addToCart,
+                style: { cursor: canOrder ? "pointer" : "not-allowed", opacity: canOrder ? 1 : 0.5, width: "fit-content" },
+                children: "In winkelwagen"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+const productDetailBlock = defineBlock({
+  type: "productDetail",
+  schema: ProductDetailBlockSchema,
+  Render: ProductDetailRender,
+  label: "Productdetail",
+  icon: "\u{1F3F7}\uFE0F",
+  defaults: () => ({})
+});
+export {
+  productDetailBlock
+};
+//# sourceMappingURL=ProductDetail.js.map

package/dist/modules/shop/blocks/ProductDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/shop/blocks/ProductDetail.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { ProductDetailBlockSchema, formatCents, productPriceCents, variantKeyFor } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { cartAdd } from \"../cartStore\";\nimport { fetchProductBySlug, readQueryParam, useShopSettings, variantLabelFor, type StoredProduct } from \"../lib\";\n\ntype Blk = z.infer<typeof ProductDetailBlockSchema>;\n\n/**\n * Productdetail — één generieke pagina met dit block toont elk product via `?p=<slug>`\n * (of een vast product via `block.slug`). Optie-selects, variant-prijs/voorraad, aantal,\n * in-winkelwagen.\n */\nfunction ProductDetailRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const [product, setProduct] = useState<StoredProduct | null | undefined>(undefined);\n  const [choices, setChoices] = useState<Record<number, string>>({});\n  const [qty, setQty] = useState(1);\n  const [imageIdx, setImageIdx] = useState(0);\n  const [added, setAdded] = useState(false);\n\n  useEffect(() => {\n    const slug = block.slug || readQueryParam(\"p\") || \"\";\n    if (!slug) {\n      setProduct(null);\n      return;\n    }\n    void fetchProductBySlug(siteId, slug).then(setProduct).catch(() => setProduct(null));\n  }, [siteId, block.slug]);\n\n  const options = product?.options ?? [];\n  const allChosen = options.every((_, i) => Boolean(choices[i]));\n  const variantKey = product && options.length > 0 && allChosen\n    ? variantKeyFor(options.map((_, i) => choices[i]))\n    : undefined;\n  const variant = variantKey ? product?.variants?.find((v) => v.key === variantKey) : undefined;\n\n  const priceCents = useMemo(() => {\n    if (!product) return 0;\n    return productPriceCents(product, variantKey);\n  }, [product, variantKey]);\n\n  /** Uitverkocht? Alleen met voorraadbeheer aan én een expliciet gezette voorraad (undefined = onbeperkt). */\n  const outOfStock = Boolean(\n    product?.trackStock &&\n      (options.length === 0\n        ? product.stock !== undefined && product.stock <= 0\n        : variant?.stock !== undefined && variant.stock <= 0),\n  );\n  const variantInactive = variant !== undefined && variant.active === false;\n\n  if (product === undefined) return null;\n  if (product === null) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>Product niet gevonden. <a href={settings.shopPath}>Terug naar de winkel</a></Text>\n      </Card>\n    );\n  }\n\n  function addToCart() {\n    if (!product) return;\n    cartAdd(\n      siteId,\n      {\n        productId: product.id,\n        slug: product.slug,\n        name: product.name,\n        variantKey,\n        variantLabel: variantKey ? variantLabelFor(options, variantKey) : undefined,\n        unitPriceCents: priceCents,\n        imageUrl: product.images?.[0],\n      },\n      qty,\n    );\n    setAdded(true);\n  }\n\n  const canOrder = (options.length === 0 || allChosen) && !outOfStock && !variantInactive;\n\n  return (\n    <div\n      className=\"xicms-shop-detail\"\n      style={{ display: \"grid\", gap: \"2rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(320px, 100%), 1fr))\" }}\n    >\n      <div className=\"xicms-shop-detail__media\">\n        {product.images?.[imageIdx] ? (\n          <img\n            src={product.images[imageIdx]}\n            alt={product.name}\n            style={{ width: \"100%\", aspectRatio: \"1/1\", objectFit: \"cover\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n          />\n        ) : (\n          <div style={{ width: \"100%\", aspectRatio: \"1/1\", display: \"grid\", placeItems: \"center\", background: \"var(--xicms-muted, #f1f1f1)\", borderRadius: \"var(--xicms-radius, 12px)\" }}>\n            <span style={{ fontSize: \"3rem\", opacity: 0.4 }}>🖼️</span>\n          </div>\n        )}\n        {(product.images?.length ?? 0) > 1 && (\n          <div style={{ display: \"flex\", gap: 8, marginTop: 8, flexWrap: \"wrap\" }}>\n            {product.images.map((url, i) => (\n              <button\n                key={url + i}\n                type=\"button\"\n                onClick={() => setImageIdx(i)}\n                style={{\n                  padding: 0,\n                  border: i === imageIdx ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid transparent\",\n                  borderRadius: 8,\n                  cursor: \"pointer\",\n                  background: \"none\",\n                }}\n              >\n                <img src={url} alt=\"\" style={{ width: 64, height: 64, objectFit: \"cover\", borderRadius: 6, display: \"block\" }} />\n              </button>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div className=\"xicms-shop-detail__info\">\n        <Heading level={1}>{product.name}</Heading>\n        <Text size=\"xl\" weight=\"bold\" display=\"block\" style={{ margin: \"0.5rem 0 1rem\" }}>\n          {product.compareAtCents !== undefined && product.compareAtCents > priceCents && (\n            <s style={{ opacity: 0.6, marginRight: 8, fontWeight: \"normal\" }}>\n              {formatCents(product.compareAtCents, settings.currency)}\n            </s>\n          )}\n          {formatCents(priceCents, settings.currency)}\n        </Text>\n\n        {product.description && (\n          // Platte tekst met behoud van regeleinden — bewust geen HTML (zie schema/shop.ts).\n          <Text display=\"block\" style={{ whiteSpace: \"pre-wrap\" }}>{product.description}</Text>\n        )}\n\n        <div style={{ display: \"grid\", gap: \"0.75rem\", maxWidth: 420, marginTop: \"1rem\" }}>\n          {options.map((opt, i) => (\n            <Selector\n              key={opt.name}\n              label={opt.name}\n              placeholder=\"Kies…\"\n              options={opt.values}\n              value={choices[i] ?? \"\"}\n              onChange={(v) => {\n                setChoices((prev) => ({ ...prev, [i]: (v as string) ?? \"\" }));\n                setAdded(false);\n              }}\n            />\n          ))}\n\n          <label className=\"xicms-shop-detail__qty\" style={{ display: \"grid\", gap: 4 }}>\n            <span style={{ fontSize: \"0.9rem\" }}>Aantal</span>\n            <input\n              className=\"xicms-input\"\n              type=\"number\"\n              min={1}\n              max={999}\n              value={qty}\n              onChange={(e) => setQty(Math.max(1, Math.min(999, Number(e.target.value) || 1)))}\n              style={{ width: 90 }}\n            />\n          </label>\n\n          {outOfStock && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>Uitverkocht in deze uitvoering.</Text>}\n          {variantInactive && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>Deze combinatie is niet leverbaar.</Text>}\n\n          {added ? (\n            <div role=\"status\" style={{ display: \"grid\", gap: 8 }}>\n              <Text>✓ Toegevoegd aan je winkelwagen.</Text>\n              <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n                <a className=\"xicms-btn xicms-btn--primary\" href={settings.cartPath}>Naar winkelwagen</a>\n                <a className=\"xicms-btn xicms-btn--secondary\" href={settings.shopPath}>Verder winkelen</a>\n              </div>\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"xicms-btn xicms-btn--primary\"\n              disabled={!canOrder}\n              onClick={addToCart}\n              style={{ cursor: canOrder ? \"pointer\" : \"not-allowed\", opacity: canOrder ? 1 : 0.5, width: \"fit-content\" }}\n            >\n              In winkelwagen\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const productDetailBlock = defineBlock({\n  type: \"productDetail\",\n  schema: ProductDetailBlockSchema,\n  Render: ProductDetailRender,\n  label: \"Productdetail\",\n  icon: \"🏷️\",\n  defaults: () => ({}),\n});\n"],"mappings":"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","names":[]}

package/dist/modules/shop/blocks/ProductGrid.d.ts

@@ -0,0 +1,8 @@
+import type { z } from "zod";
+import { type StoredProduct } from "../lib";
+/** Prijsregel met optionele doorgestreepte "van"-prijs en "vanaf" bij variant-prijzen. */
+export declare function PriceLine({ product, currency }: {
+    product: StoredProduct;
+    currency: string;
+}): import("react").JSX.Element;
+export declare const productGridBlock: import("../../..").BlockDefinition<z.ZodTypeAny>;

package/dist/modules/shop/blocks/ProductGrid.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ProductGridBlockSchema, formatCents } from "../../../schema/shop";
+import { defineBlock } from "../../../blocks/registry";
+import { Card, Text } from "../../../blocks/ui";
+import { Heading } from "../../../blocks/ui";
+import { cartAdd } from "../cartStore";
+import {
+  fetchActiveProducts,
+  fetchShopCategories,
+  readQueryParam,
+  useShopSettings
+} from "../lib";
+function PriceLine({ product, currency }) {
+  const variantPrices = (product.variants ?? []).filter((v) => v.priceCents !== void 0).map((v) => v.priceCents);
+  const min = Math.min(product.priceCents, ...variantPrices);
+  const hasRange = variantPrices.some((p) => p !== product.priceCents);
+  return /* @__PURE__ */ jsxs("span", { className: "xicms-shop-price", children: [
+    product.compareAtCents !== void 0 && product.compareAtCents > min && /* @__PURE__ */ jsx("s", { style: { opacity: 0.6, marginRight: 6 }, children: formatCents(product.compareAtCents, currency) }),
+    hasRange ? `vanaf ${formatCents(min, currency)}` : formatCents(min, currency)
+  ] });
+}
+function ProductCard({
+  product,
+  siteId,
+  currency,
+  detailPath,
+  cartPath
+}) {
+  const [added, setAdded] = useState(false);
+  const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;
+  const simple = (product.options ?? []).length === 0;
+  return /* @__PURE__ */ jsxs(Card, { padding: 0, className: "xicms-shop-card", children: [
+    /* @__PURE__ */ jsxs("a", { href, style: { textDecoration: "none", color: "inherit", display: "block" }, children: [
+      product.images?.[0] ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: product.images[0],
+          alt: product.name,
+          loading: "lazy",
+          style: { width: "100%", aspectRatio: "1/1", objectFit: "cover", display: "block", borderRadius: "inherit" }
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: { width: "100%", aspectRatio: "1/1", display: "grid", placeItems: "center", background: "var(--xicms-muted, #f1f1f1)", borderRadius: "inherit" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "2rem", opacity: 0.4 }, children: "\u{1F5BC}\uFE0F" }) }),
+      /* @__PURE__ */ jsxs("div", { style: { padding: "0.8rem 1rem 0.25rem" }, children: [
+        /* @__PURE__ */ jsx(Text, { weight: "bold", display: "block", children: product.name }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", display: "block", style: { marginTop: 2 }, children: /* @__PURE__ */ jsx(PriceLine, { product, currency }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { padding: "0.5rem 1rem 1rem" }, children: simple ? added ? /* @__PURE__ */ jsx("a", { className: "xicms-shop-card__added", href: cartPath, style: { fontSize: "0.9rem" }, children: "\u2713 Toegevoegd \u2014 naar winkelwagen" }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "xicms-btn xicms-btn--primary",
+        style: { cursor: "pointer" },
+        onClick: () => {
+          cartAdd(siteId, {
+            productId: product.id,
+            slug: product.slug,
+            name: product.name,
+            unitPriceCents: product.priceCents,
+            imageUrl: product.images?.[0]
+          });
+          setAdded(true);
+        },
+        children: "In winkelwagen"
+      }
+    ) : /* @__PURE__ */ jsx("a", { className: "xicms-btn xicms-btn--secondary", href, children: "Bekijk opties" }) })
+  ] });
+}
+function ProductGridRender({ block, siteId }) {
+  const settings = useShopSettings();
+  const [products, setProducts] = useState(null);
+  const [cats, setCats] = useState([]);
+  const [queryCat, setQueryCat] = useState(null);
+  useEffect(() => {
+    void fetchActiveProducts(siteId).then(setProducts).catch(() => setProducts([]));
+    void fetchShopCategories(siteId).then(setCats).catch(() => setCats([]));
+    if (block.useQueryCategory && !block.categorySlug) setQueryCat(readQueryParam("cat"));
+  }, [siteId, block.useQueryCategory, block.categorySlug]);
+  const activeSlug = block.categorySlug || queryCat || null;
+  const activeCat = activeSlug ? cats.find((c) => c.slug === activeSlug) ?? null : null;
+  const visible = useMemo(() => {
+    if (!products) return [];
+    let list = products;
+    if (activeCat) list = list.filter((p) => (p.categoryIds ?? []).includes(activeCat.id));
+    if (block.featuredOnly) list = list.filter((p) => p.featured);
+    const sorted = [...list];
+    if (block.sort === "name") sorted.sort((a, b) => a.name.localeCompare(b.name, "nl"));
+    else if (block.sort === "priceAsc") sorted.sort((a, b) => a.priceCents - b.priceCents);
+    else if (block.sort === "priceDesc") sorted.sort((a, b) => b.priceCents - a.priceCents);
+    else sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, "nl"));
+    return sorted.slice(0, block.limit);
+  }, [products, activeCat, block.featuredOnly, block.sort, block.limit]);
+  if (products === null) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "xicms-shop-grid", children: [
+    (block.heading || activeCat) && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: activeCat?.name ?? block.heading }),
+    activeCat && /* @__PURE__ */ jsx(Text, { size: "sm", display: "block", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx("a", { href: settings.shopPath, children: "\u2190 Alle categorie\xEBn" }) }),
+    visible.length === 0 ? /* @__PURE__ */ jsx(Card, { padding: 4, variant: "muted", style: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx(Text, { children: "Geen producten gevonden." }) }) : /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "xicms-shop-grid__items",
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(auto-fill, minmax(min(240px, calc(100%/${block.columns} - 1rem)), 1fr))`,
+          gap: "1.25rem",
+          marginTop: "1.25rem"
+        },
+        children: visible.map((p) => /* @__PURE__ */ jsx(
+          ProductCard,
+          {
+            product: p,
+            siteId,
+            currency: settings.currency,
+            detailPath: settings.detailPath,
+            cartPath: settings.cartPath
+          },
+          p.id
+        ))
+      }
+    )
+  ] });
+}
+const productGridBlock = defineBlock({
+  type: "productGrid",
+  schema: ProductGridBlockSchema,
+  Render: ProductGridRender,
+  label: "Producten-overzicht",
+  icon: "\u{1F6CD}\uFE0F",
+  defaults: () => ({ useQueryCategory: true, columns: 3, limit: 60, sort: "order" })
+});
+export {
+  PriceLine,
+  productGridBlock
+};
+//# sourceMappingURL=ProductGrid.js.map

package/dist/modules/shop/blocks/ProductGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/modules/shop/blocks/ProductGrid.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { ProductGridBlockSchema, formatCents } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Text } from \"../../../blocks/ui\";\nimport { Heading } from \"../../../blocks/ui\";\nimport { cartAdd } from \"../cartStore\";\nimport {\n  fetchActiveProducts,\n  fetchShopCategories,\n  readQueryParam,\n  useShopSettings,\n  type StoredProduct,\n  type StoredShopCategory,\n} from \"../lib\";\n\ntype Blk = z.infer<typeof ProductGridBlockSchema>;\n\n/** Prijsregel met optionele doorgestreepte \"van\"-prijs en \"vanaf\" bij variant-prijzen. */\nexport function PriceLine({ product, currency }: { product: StoredProduct; currency: string }) {\n  const variantPrices = (product.variants ?? [])\n    .filter((v) => v.priceCents !== undefined)\n    .map((v) => v.priceCents as number);\n  const min = Math.min(product.priceCents, ...variantPrices);\n  const hasRange = variantPrices.some((p) => p !== product.priceCents);\n  return (\n    <span className=\"xicms-shop-price\">\n      {product.compareAtCents !== undefined && product.compareAtCents > min && (\n        <s style={{ opacity: 0.6, marginRight: 6 }}>{formatCents(product.compareAtCents, currency)}</s>\n      )}\n      {hasRange ? `vanaf ${formatCents(min, currency)}` : formatCents(min, currency)}\n    </span>\n  );\n}\n\nfunction ProductCard({\n  product,\n  siteId,\n  currency,\n  detailPath,\n  cartPath,\n}: {\n  product: StoredProduct;\n  siteId: string;\n  currency: string;\n  detailPath: string;\n  cartPath: string;\n}) {\n  const [added, setAdded] = useState(false);\n  const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;\n  const simple = (product.options ?? []).length === 0;\n\n  return (\n    <Card padding={0} className=\"xicms-shop-card\">\n      <a href={href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n        {product.images?.[0] ? (\n          <img\n            src={product.images[0]}\n            alt={product.name}\n            loading=\"lazy\"\n            style={{ width: \"100%\", aspectRatio: \"1/1\", objectFit: \"cover\", display: \"block\", borderRadius: \"inherit\" }}\n          />\n        ) : (\n          <div style={{ width: \"100%\", aspectRatio: \"1/1\", display: \"grid\", placeItems: \"center\", background: \"var(--xicms-muted, #f1f1f1)\", borderRadius: \"inherit\" }}>\n            <span style={{ fontSize: \"2rem\", opacity: 0.4 }}>🖼️</span>\n          </div>\n        )}\n        <div style={{ padding: \"0.8rem 1rem 0.25rem\" }}>\n          <Text weight=\"bold\" display=\"block\">{product.name}</Text>\n          <Text size=\"sm\" display=\"block\" style={{ marginTop: 2 }}>\n            <PriceLine product={product} currency={currency} />\n          </Text>\n        </div>\n      </a>\n      <div style={{ padding: \"0.5rem 1rem 1rem\" }}>\n        {simple ? (\n          added ? (\n            <a className=\"xicms-shop-card__added\" href={cartPath} style={{ fontSize: \"0.9rem\" }}>\n              ✓ Toegevoegd — naar winkelwagen\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"xicms-btn xicms-btn--primary\"\n              style={{ cursor: \"pointer\" }}\n              onClick={() => {\n                cartAdd(siteId, {\n                  productId: product.id,\n                  slug: product.slug,\n                  name: product.name,\n                  unitPriceCents: product.priceCents,\n                  imageUrl: product.images?.[0],\n                });\n                setAdded(true);\n              }}\n            >\n              In winkelwagen\n            </button>\n          )\n        ) : (\n          <a className=\"xicms-btn xicms-btn--secondary\" href={href}>\n            Bekijk opties\n          </a>\n        )}\n      </div>\n    </Card>\n  );\n}\n\nfunction ProductGridRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const [products, setProducts] = useState<StoredProduct[] | null>(null);\n  const [cats, setCats] = useState<StoredShopCategory[]>([]);\n  const [queryCat, setQueryCat] = useState<string | null>(null);\n\n  useEffect(() => {\n    void fetchActiveProducts(siteId).then(setProducts).catch(() => setProducts([]));\n    void fetchShopCategories(siteId).then(setCats).catch(() => setCats([]));\n    if (block.useQueryCategory && !block.categorySlug) setQueryCat(readQueryParam(\"cat\"));\n  }, [siteId, block.useQueryCategory, block.categorySlug]);\n\n  const activeSlug = block.categorySlug || queryCat || null;\n  const activeCat = activeSlug ? cats.find((c) => c.slug === activeSlug) ?? null : null;\n\n  const visible = useMemo(() => {\n    if (!products) return [];\n    let list = products;\n    if (activeCat) list = list.filter((p) => (p.categoryIds ?? []).includes(activeCat.id));\n    if (block.featuredOnly) list = list.filter((p) => p.featured);\n    const sorted = [...list];\n    if (block.sort === \"name\") sorted.sort((a, b) => a.name.localeCompare(b.name, \"nl\"));\n    else if (block.sort === \"priceAsc\") sorted.sort((a, b) => a.priceCents - b.priceCents);\n    else if (block.sort === \"priceDesc\") sorted.sort((a, b) => b.priceCents - a.priceCents);\n    else sorted.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.name.localeCompare(b.name, \"nl\"));\n    return sorted.slice(0, block.limit);\n  }, [products, activeCat, block.featuredOnly, block.sort, block.limit]);\n\n  if (products === null) return null;\n\n  return (\n    <div className=\"xicms-shop-grid\">\n      {(block.heading || activeCat) && (\n        <Heading level={2} data-xicms-edit=\"heading\">\n          {activeCat?.name ?? block.heading}\n        </Heading>\n      )}\n      {activeCat && (\n        <Text size=\"sm\" display=\"block\" style={{ marginTop: 4 }}>\n          <a href={settings.shopPath}>← Alle categorieën</a>\n        </Text>\n      )}\n      {visible.length === 0 ? (\n        <Card padding={4} variant=\"muted\" style={{ marginTop: \"1rem\" }}>\n          <Text>Geen producten gevonden.</Text>\n        </Card>\n      ) : (\n        <div\n          className=\"xicms-shop-grid__items\"\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: `repeat(auto-fill, minmax(min(240px, calc(100%/${block.columns} - 1rem)), 1fr))`,\n            gap: \"1.25rem\",\n            marginTop: \"1.25rem\",\n          }}\n        >\n          {visible.map((p) => (\n            <ProductCard\n              key={p.id}\n              product={p}\n              siteId={siteId}\n              currency={settings.currency}\n              detailPath={settings.detailPath}\n              cartPath={settings.cartPath}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const productGridBlock = defineBlock({\n  type: \"productGrid\",\n  schema: ProductGridBlockSchema,\n  Render: ProductGridRender,\n  label: \"Producten-overzicht\",\n  icon: \"🛍️\",\n  defaults: () => ({ useQueryCategory: true, columns: 3, limit: 60, sort: \"order\" }),\n});\n"],"mappings":"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","names":[]}

package/dist/modules/shop/blocks/ShopCategories.d.ts

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