@xiwebdesign/xicms-core 7.6.1 → 7.8.0

package/dist/editor/EditorProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/editor/EditorProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useMemo, useState, lazy, Suspense, type ReactNode } from \"react\";\n// Het bloktype van de PAGINA zelf, zodat wat hier langskomt per definitie past in wat\n// `PublishedPage` rendert. Een eigen definitie zou hier stil uit de pas kunnen lopen.\nimport type { Page } from \"../schema/pages\";\n\ntype PaginaBlokken = Page[\"blocks\"];\n\n/**\n * Lichte runtime-context voor het inline (visuele) bewerken op de live pagina. De echte editor\n * (TipTap/Radix, zwaar) wordt PAS geladen als een editor hem opent — publieke bezoekers downloaden\n * hem nooit. De editor leeft in de admin-entry; we laden 'm via een dynamische import (eigen chunk).\n *\n * ── WAAROM DE BLOKKEN HIER LANGSKOMEN ─────────────────────────────────────────────────────\n *\n * De editor tekende de pagina vroeger zélf, in een eigen canvas binnen een schermvullende overlay.\n * Je klikte \"Pagina bewerken\" en je site verdween achter een donker paneel met een nabootsing erin.\n * Dat voelde niet als je site bewerken maar als een ander programma openen.\n *\n * Nu blijft de PAGINA de pagina en wordt alleen de DATA vervangen: de editor laadt de werkversie en\n * zet die hier neer, waarna `PublishedPage` de werkversie rendert in plaats van de gepubliceerde\n * blokken. Dezelfde componenten, dezelfde huisstijl, dezelfde layout — alleen andere inhoud.\n *\n * Die omweg via de data is wezenlijk, geen implementatiedetail. Alleen potloodjes over de live\n * pagina leggen zou betekenen dat je de WERKVERSIE bewerkt terwijl je de GEPUBLICEERDE tekst ziet.\n * Zodra je iets wijzigt en nog niet publiceert, lopen die twee uit elkaar en bewerk je iets anders\n * dan er staat. Wat je ziet moet zijn wat je bewerkt.\n *\n * `editPath` hoort erbij: een site kan meerdere gerenderde pagina's in beeld hebben (een\n * ingekaderde pagina, een preview). Alleen het pad dat de editor open heeft mag zijn blokken\n * verwisselen.\n */\nconst VisualEditor = lazy(() => import(\"../admin/visual/VisualEditor\"));\n\ninterface EditorCtx {\n  open: boolean;\n  openEditor: () => void;\n  closeEditor: () => void;\n  /** De blokken van de werkversie die de pagina moet tonen; `null` = toon gewoon het gepubliceerde. */\n  draftBlocks: PaginaBlokken | null;\n  /** Het pad waarvoor `draftBlocks` geldt. */\n  editPath: string | null;\n  /** Door de editor aangeroepen zodra de werkversie laadt of wijzigt. */\n  publishDraft: (path: string, blocks: PaginaBlokken | null) => void;\n}\n\nconst Ctx = createContext<EditorCtx>({\n  open: false,\n  openEditor: () => {},\n  closeEditor: () => {},\n  draftBlocks: null,\n  editPath: null,\n  publishDraft: () => {},\n});\n\nexport function EditorProvider({ children }: { children: ReactNode }) {\n  const [open, setOpen] = useState(false);\n  const [draft, setDraft] = useState<{ path: string; blocks: PaginaBlokken } | null>(null);\n\n  const publishDraft = useCallback((path: string, blocks: PaginaBlokken | null) => {\n    setDraft(blocks ? { path, blocks } : null);\n  }, []);\n\n  const closeEditor = useCallback(() => {\n    setOpen(false);\n    // De werkversie mee opruimen: laat je hem staan, dan blijft de bezoeker na het sluiten de\n    // ongepubliceerde tekst zien terwijl de balk weg is — een pagina die iets toont wat niet live is.\n    setDraft(null);\n  }, []);\n\n  const value = useMemo<EditorCtx>(() => ({\n    open,\n    openEditor: () => setOpen(true),\n    closeEditor,\n    draftBlocks: draft?.blocks ?? null,\n    editPath: draft?.path ?? null,\n    publishDraft,\n  }), [open, draft, closeEditor, publishDraft]);\n\n  return (\n    <Ctx.Provider value={value}>\n      {children}\n      {open && (\n        <Suspense fallback={null}>\n          <VisualEditor onClose={closeEditor} />\n        </Suspense>\n      )}\n    </Ctx.Provider>\n  );\n}\n\n/** Open/sluit de visuele pagina-editor. */\nexport function useEditor(): EditorCtx {\n  return useContext(Ctx);\n}\n"],"mappings":";AAiFI,SAIM,KAJN;AA/EJ,SAAS,eAAe,aAAa,YAAY,SAAS,UAAU,MAAM,gBAAgC;AA+B1G,MAAM,eAAe,KAAK,MAAM,OAAO,8BAA8B,CAAC;AActE,MAAM,MAAM,cAAyB;AAAA,EACnC,MAAM;AAAA,EACN,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,cAAc,MAAM;AAAA,EAAC;AACvB,CAAC;AAEM,SAAS,eAAe,EAAE,SAAS,GAA4B;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyD,IAAI;AAEvF,QAAM,eAAe,YAAY,CAAC,MAAc,WAAiC;AAC/E,aAAS,SAAS,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,KAAK;AAGb,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,QAAmB,OAAO;AAAA,IACtC;AAAA,IACA,YAAY,MAAM,QAAQ,IAAI;AAAA,IAC9B;AAAA,IACA,aAAa,OAAO,UAAU;AAAA,IAC9B,UAAU,OAAO,QAAQ;AAAA,IACzB;AAAA,EACF,IAAI,CAAC,MAAM,OAAO,aAAa,YAAY,CAAC;AAE5C,SACE,qBAAC,IAAI,UAAJ,EAAa,OACX;AAAA;AAAA,IACA,QACC,oBAAC,YAAS,UAAU,MAClB,8BAAC,gBAAa,SAAS,aAAa,GACtC;AAAA,KAEJ;AAEJ;AAGO,SAAS,YAAuB;AACrC,SAAO,WAAW,GAAG;AACvB;","names":[]}
+{"version":3,"sources":["../../src/editor/EditorProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState, lazy, Suspense, type ReactNode } from \"react\";\n// Het bloktype van de PAGINA zelf, zodat wat hier langskomt per definitie past in wat\n// `PublishedPage` rendert. Een eigen definitie zou hier stil uit de pas kunnen lopen.\nimport type { Page } from \"../schema/pages\";\n\ntype PaginaBlokken = Page[\"blocks\"];\n\n/**\n * Lichte runtime-context voor het inline (visuele) bewerken op de live pagina. De echte editor\n * (TipTap/Radix, zwaar) wordt PAS geladen als een editor hem opent — publieke bezoekers downloaden\n * hem nooit. De editor leeft in de admin-entry; we laden 'm via een dynamische import (eigen chunk).\n *\n * ── WAAROM DE BLOKKEN HIER LANGSKOMEN ─────────────────────────────────────────────────────\n *\n * De editor tekende de pagina vroeger zélf, in een eigen canvas binnen een schermvullende overlay.\n * Je klikte \"Pagina bewerken\" en je site verdween achter een donker paneel met een nabootsing erin.\n * Dat voelde niet als je site bewerken maar als een ander programma openen.\n *\n * Nu blijft de PAGINA de pagina en wordt alleen de DATA vervangen: de editor laadt de werkversie en\n * zet die hier neer, waarna `PublishedPage` de werkversie rendert in plaats van de gepubliceerde\n * blokken. Dezelfde componenten, dezelfde huisstijl, dezelfde layout — alleen andere inhoud.\n *\n * Die omweg via de data is wezenlijk, geen implementatiedetail. Alleen potloodjes over de live\n * pagina leggen zou betekenen dat je de WERKVERSIE bewerkt terwijl je de GEPUBLICEERDE tekst ziet.\n * Zodra je iets wijzigt en nog niet publiceert, lopen die twee uit elkaar en bewerk je iets anders\n * dan er staat. Wat je ziet moet zijn wat je bewerkt.\n *\n * `editPath` hoort erbij: een site kan meerdere gerenderde pagina's in beeld hebben (een\n * ingekaderde pagina, een preview). Alleen het pad dat de editor open heeft mag zijn blokken\n * verwisselen.\n *\n * ── WAAROM DE MODUS EEN REFRESH MOET OVERLEVEN (7.8) ──────────────────────────────────────\n *\n * Bewerken was een toestand die alleen in het geheugen van één render-boom bestond. Een per ongeluk\n * ingedrukte F5 — of een klik op een link in je eigen site, want dat is een volledige navigatie —\n * zette je terug op de live site. Je wijzigingen waren niet weg (die staan in de werkversie in\n * Firestore), maar je zág ze niet meer, en dat is niet te onderscheiden van kwijt zijn.\n *\n * Daarom staat de modus in `sessionStorage`: hij overleeft een refresh en het navigeren door de\n * site, en verdwijnt vanzelf zodra het tabblad dichtgaat. Bewust niet `localStorage` — dan zit je\n * morgen in een nieuw venster nog steeds in de bewerkmodus zonder dat je erom vroeg.\n */\nconst VisualEditor = lazy(() => import(\"../admin/visual/VisualEditor\"));\n\n/** \"live\" = precies wat een bezoeker ziet. \"bewerken\" = dezelfde pagina, met werkversie en gereedschap. */\nexport type Bewerkmodus = \"live\" | \"bewerken\";\n\nconst OPSLAGSLEUTEL = \"xicms-bewerkmodus\";\n\ninterface EditorCtx {\n  modus: Bewerkmodus;\n  /** Blijft bestaan naast `modus` omdat het door de hele codebase heen gelezen wordt. */\n  open: boolean;\n  zetModus: (modus: Bewerkmodus) => void;\n  openEditor: () => void;\n  closeEditor: () => void;\n  /** De blokken van de werkversie die de pagina moet tonen; `null` = toon gewoon het gepubliceerde. */\n  draftBlocks: PaginaBlokken | null;\n  /** Het pad waarvoor `draftBlocks` geldt. */\n  editPath: string | null;\n  /** Door de editor aangeroepen zodra de werkversie laadt of wijzigt. */\n  publishDraft: (path: string, blocks: PaginaBlokken | null) => void;\n}\n\nconst Ctx = createContext<EditorCtx>({\n  modus: \"live\",\n  open: false,\n  zetModus: () => {},\n  openEditor: () => {},\n  closeEditor: () => {},\n  draftBlocks: null,\n  editPath: null,\n  publishDraft: () => {},\n});\n\nexport function EditorProvider({ children }: { children: ReactNode }) {\n  /**\n   * Start altijd op \"live\", ook als de opslag iets anders zegt.\n   *\n   * De server rendert deze boom zonder toegang tot `sessionStorage`. Zou de eerste client-render\n   * meteen \"bewerken\" teruggeven, dan wijkt hij af van de HTML die er al staat en gooit React de\n   * boom weg (hydration mismatch). Vandaar: eerst hetzelfde als de server, daarna in een effect\n   * bijstellen. Eén frame \"live\" is niet zichtbaar; een kapotte hydration wel.\n   */\n  const [modus, setModusState] = useState<Bewerkmodus>(\"live\");\n  const [draft, setDraft] = useState<{ path: string; blocks: PaginaBlokken } | null>(null);\n\n  useEffect(() => {\n    try {\n      if (sessionStorage.getItem(OPSLAGSLEUTEL) === \"bewerken\") setModusState(\"bewerken\");\n    } catch {\n      /* privémodus of geblokkeerde opslag: dan gewoon op de live site beginnen */\n    }\n  }, []);\n\n  const zetModus = useCallback((next: Bewerkmodus) => {\n    setModusState(next);\n    try {\n      if (next === \"bewerken\") sessionStorage.setItem(OPSLAGSLEUTEL, \"bewerken\");\n      else sessionStorage.removeItem(OPSLAGSLEUTEL);\n    } catch {\n      /* de modus werkt ook zonder opslag; alleen een refresh valt dan terug op live */\n    }\n    // De werkversie hoort bij de bewerkmodus. Blijft hij staan na het sluiten, dan ziet de bezoeker\n    // ongepubliceerde tekst terwijl het gereedschap weg is — een pagina die iets toont wat niet\n    // live is. De werkversie zelf blijft in Firestore staan; alleen deze weergave stopt.\n    if (next === \"live\") setDraft(null);\n  }, []);\n\n  const publishDraft = useCallback((path: string, blocks: PaginaBlokken | null) => {\n    setDraft(blocks ? { path, blocks } : null);\n  }, []);\n\n  const value = useMemo<EditorCtx>(() => ({\n    modus,\n    open: modus === \"bewerken\",\n    zetModus,\n    openEditor: () => zetModus(\"bewerken\"),\n    closeEditor: () => zetModus(\"live\"),\n    draftBlocks: draft?.blocks ?? null,\n    editPath: draft?.path ?? null,\n    publishDraft,\n  }), [modus, draft, zetModus, publishDraft]);\n\n  return (\n    <Ctx.Provider value={value}>\n      {children}\n      {modus === \"bewerken\" && (\n        <Suspense fallback={null}>\n          <VisualEditor onClose={() => zetModus(\"live\")} />\n        </Suspense>\n      )}\n    </Ctx.Provider>\n  );\n}\n\n/** Open/sluit de visuele pagina-editor. */\nexport function useEditor(): EditorCtx {\n  return useContext(Ctx);\n}\n"],"mappings":";AA+HI,SAIM,KAJN;AA7HJ,SAAS,eAAe,aAAa,YAAY,WAAW,SAAS,UAAU,MAAM,gBAAgC;AA0CrH,MAAM,eAAe,KAAK,MAAM,OAAO,8BAA8B,CAAC;AAKtE,MAAM,gBAAgB;AAiBtB,MAAM,MAAM,cAAyB;AAAA,EACnC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,aAAa;AAAA,EACb,UAAU;AAAA,EACV,cAAc,MAAM;AAAA,EAAC;AACvB,CAAC;AAEM,SAAS,eAAe,EAAE,SAAS,GAA4B;AASpE,QAAM,CAAC,OAAO,aAAa,IAAI,SAAsB,MAAM;AAC3D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAyD,IAAI;AAEvF,YAAU,MAAM;AACd,QAAI;AACF,UAAI,eAAe,QAAQ,aAAa,MAAM,WAAY,eAAc,UAAU;AAAA,IACpF,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,WAAW,YAAY,CAAC,SAAsB;AAClD,kBAAc,IAAI;AAClB,QAAI;AACF,UAAI,SAAS,WAAY,gBAAe,QAAQ,eAAe,UAAU;AAAA,UACpE,gBAAe,WAAW,aAAa;AAAA,IAC9C,QAAQ;AAAA,IAER;AAIA,QAAI,SAAS,OAAQ,UAAS,IAAI;AAAA,EACpC,GAAG,CAAC,CAAC;AAEL,QAAM,eAAe,YAAY,CAAC,MAAc,WAAiC;AAC/E,aAAS,SAAS,EAAE,MAAM,OAAO,IAAI,IAAI;AAAA,EAC3C,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,QAAmB,OAAO;AAAA,IACtC;AAAA,IACA,MAAM,UAAU;AAAA,IAChB;AAAA,IACA,YAAY,MAAM,SAAS,UAAU;AAAA,IACrC,aAAa,MAAM,SAAS,MAAM;AAAA,IAClC,aAAa,OAAO,UAAU;AAAA,IAC9B,UAAU,OAAO,QAAQ;AAAA,IACzB;AAAA,EACF,IAAI,CAAC,OAAO,OAAO,UAAU,YAAY,CAAC;AAE1C,SACE,qBAAC,IAAI,UAAJ,EAAa,OACX;AAAA;AAAA,IACA,UAAU,cACT,oBAAC,YAAS,UAAU,MAClB,8BAAC,gBAAa,SAAS,MAAM,SAAS,MAAM,GAAG,GACjD;AAAA,KAEJ;AAEJ;AAGO,SAAS,YAAuB;AACrC,SAAO,WAAW,GAAG;AACvB;","names":[]}

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

@@ -245,13 +245,13 @@ function ProductDetailRender({ block, siteId }) {
               g.url
             )) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "xicms-shop-detail__info", children: [
-            /* @__PURE__ */ jsx(Heading, { level: 1, children: product.name }),
+          /* @__PURE__ */ jsxs("div", { className: "xicms-shop-detail__info", "data-xicms-product": product.id, children: [
+            /* @__PURE__ */ jsx(Heading, { level: 1, "data-xicms-product-edit": "name", children: product.name }),
             /* @__PURE__ */ jsxs("p", { className: "xicms-shop-detail__price", style: { fontSize: "1.35rem", fontWeight: 700, 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 && /* @__PURE__ */ jsx("p", { className: "xicms-shop-detail__desc", style: { whiteSpace: "pre-wrap", margin: 0 }, children: product.description }),
+            product.description && /* @__PURE__ */ jsx("p", { className: "xicms-shop-detail__desc", "data-xicms-product-edit": "description", style: { whiteSpace: "pre-wrap", margin: 0 }, children: product.description }),
             /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.75rem", maxWidth: 420, marginTop: "1rem" }, children: [
               options.map((opt, i) => /* @__PURE__ */ jsx(
                 Selector,

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

@@ -1 +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 {\n  ProductDetailBlockSchema,\n  formatCents,\n  productPriceCents,\n  variantKeyFor,\n  type PersonalizationField,\n} from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { cartAdd } from \"../cartStore\";\nimport { useShopStrings } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchProductBySlug,\n  kleurOptie,\n  readQueryParam,\n  uploadPersonalizationCall,\n  useShopSettings,\n  variantLabelFor,\n  type StoredProduct,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\nimport { ProductCard } from \"./ProductGrid\";\n\ntype Blk = z.infer<typeof ProductDetailBlockSchema>;\ntype PersValue = Record<string, { text?: string; imagePath?: string; fileName?: string }>;\n\n/** Personalisatie-invoer (eigen tekst of afbeelding) onder de optie-selects. */\nfunction PersonalizationInputs({\n  fields,\n  siteId,\n  productId,\n  value,\n  currency,\n  onChange,\n}: {\n  fields: PersonalizationField[];\n  siteId: string;\n  productId: string;\n  value: PersValue;\n  currency: string;\n  onChange: (next: PersValue) => void;\n}) {\n  const t = useShopStrings();\n  const [uploading, setUploading] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  return (\n    <div className=\"xicms-shop-personalization\" style={{ display: \"grid\", gap: \"0.75rem\" }}>\n      {fields.map((f) => {\n        const v = value[f.key] ?? {};\n        const label = (\n          <span>\n            {f.label}\n            {f.required ? \" *\" : \"\"}\n            {f.priceCents > 0 && (\n              <span style={{ opacity: 0.7, marginLeft: 6, fontSize: \"0.9em\" }}>\n                {t(\"personalizationSurcharge\", { bedrag: formatCents(f.priceCents, currency) })}\n              </span>\n            )}\n          </span>\n        );\n        if (f.type === \"text\") {\n          return (\n            <label key={f.key} style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n              <input\n                className=\"xicms-input\"\n                type=\"text\"\n                maxLength={f.maxLength}\n                value={v.text ?? \"\"}\n                onChange={(e) => onChange({ ...value, [f.key]: { text: e.target.value } })}\n              />\n              <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>\n                {f.helpText ? `${f.helpText} · ` : \"\"}\n                {(v.text ?? \"\").length}/{f.maxLength}\n              </span>\n            </label>\n          );\n        }\n        return (\n          <div key={f.key} style={{ display: \"grid\", gap: 4 }}>\n            <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, flexWrap: \"wrap\" }}>\n              <label className=\"xicms-btn xicms-btn--secondary\" style={{ cursor: \"pointer\" }}>\n                {uploading === f.key\n                  ? t(\"personalizationUploading\")\n                  : v.imagePath\n                    ? t(\"personalizationUploaded\")\n                    : t(\"personalizationUpload\")}\n                <input\n                  type=\"file\"\n                  accept=\"image/jpeg,image/png,image/webp\"\n                  style={{ display: \"none\" }}\n                  onChange={async (e) => {\n                    const file = e.target.files?.[0];\n                    if (!file) return;\n                    setError(null);\n                    setUploading(f.key);\n                    try {\n                      const { path } = await uploadPersonalizationCall(siteId, productId, file);\n                      onChange({ ...value, [f.key]: { imagePath: path, fileName: file.name } });\n                    } catch (err) {\n                      setError(err instanceof Error && err.message === \"TOO_BIG\" ? t(\"personalizationTooBig\") : t(\"personalizationFailed\"));\n                    } finally {\n                      setUploading(null);\n                    }\n                  }}\n                />\n              </label>\n              {v.fileName && <span style={{ fontSize: \"0.85rem\", opacity: 0.75 }}>{v.fileName}</span>}\n            </div>\n            {f.helpText && <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>{f.helpText}</span>}\n          </div>\n        );\n      })}\n      {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n    </div>\n  );\n}\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 met per-kleur-beeldwissel,\n * personalisatie (eigen naam/logo), voorraad-signalen en \"Ook leuk\"-rij.\n */\nfunction ProductDetailRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [product, setProduct] = useState<StoredProduct | null | undefined>(\n    serverData && \"product\" in serverData ? serverData.product : undefined,\n  );\n  const [related, setRelated] = useState<StoredProduct[]>([]);\n  const [choices, setChoices] = useState<Record<number, string>>({});\n  const [personalization, setPersonalization] = useState<PersValue>({});\n  const [qty, setQty] = useState(1);\n  const [manualImage, setManualImage] = useState<string | null>(null);\n  const [added, setAdded] = useState(false);\n\n  useEffect(() => {\n    if (serverData && \"product\" in serverData) return; // SSR-data aanwezig\n    const slug = block.slug || readQueryParam(\"p\") || \"\";\n    if (!slug) {\n      setProduct(null);\n      return;\n    }\n    void fetchProductBySlug(siteId, slug).then(setProduct).catch((e) => {\n      console.warn(\"[xicms] product laden mislukt:\", e);\n      setProduct(null);\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [siteId, block.slug]);\n\n  // \"Ook leuk\": producten uit dezelfde categorie (server-set hergebruiken waar mogelijk).\n  useEffect(() => {\n    if (!block.showRelated || !product) return;\n    const pick = (all: StoredProduct[]) =>\n      setRelated(\n        all\n          .filter((x) => x.id !== product.id && x.categoryIds?.some((c) => product.categoryIds?.includes(c)))\n          .slice(0, 4),\n      );\n    if (serverData?.products) pick(serverData.products);\n    else void fetchActiveProducts(siteId).then(pick).catch(() => setRelated([]));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [product?.id, block.showRelated, siteId]);\n\n  const options = product?.options ?? [];\n  const persFields = product?.personalization ?? [];\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  /** Meerprijs van ingevulde personalisatie (per stuk). */\n  const persSurcharge = useMemo(\n    () =>\n      persFields.reduce((sum, f) => {\n        const v = personalization[f.key];\n        return v && (v.text || v.imagePath) ? sum + f.priceCents : sum;\n      }, 0),\n    [persFields, personalization],\n  );\n\n  const priceCents = useMemo(() => {\n    if (!product) return 0;\n    return productPriceCents(product, variantKey) + persSurcharge;\n  }, [product, variantKey, persSurcharge]);\n\n  /** Hoofdbeeld: handmatige thumbnail-keuze > per-kleur-afbeelding > eerste productfoto. */\n  const kleur = product ? kleurOptie(product) : null;\n  const kleurIdx = kleur && product ? (product.options ?? []).findIndex((o) => o === kleur) : -1;\n  const gekozenKleur = kleurIdx >= 0 ? choices[kleurIdx] : undefined;\n  const kleurImage = gekozenKleur ? kleur?.images?.[gekozenKleur] : undefined;\n  const mainImage = manualImage ?? kleurImage ?? product?.images?.[0];\n\n  /** Alle toonbare afbeeldingen: productfoto's + unieke per-kleur-afbeeldingen. */\n  const gallery = useMemo(() => {\n    if (!product) return [] as { url: string; label?: string }[];\n    const out: { url: string; label?: string }[] = (product.images ?? []).map((url) => ({ url }));\n    for (const [value, url] of Object.entries(kleur?.images ?? {})) {\n      if (!out.some((g) => g.url === url)) out.push({ url, label: value });\n    }\n    return out;\n  }, [product, kleur]);\n\n  const stockValue = options.length === 0 ? product?.stock : variant?.stock;\n  const outOfStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue <= 0);\n  const lowStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue > 0 && stockValue <= 5);\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>\n          {t(\"productNotFound\")} <a href={settings.shopPath}>{t(\"backToShop\")}</a>\n        </Text>\n      </Card>\n    );\n  }\n\n  const persComplete = persFields.every((f) => {\n    if (!f.required) return true;\n    const v = personalization[f.key];\n    return Boolean(v && (v.text?.trim() || v.imagePath));\n  });\n\n  function addToCart() {\n    if (!product) return;\n    const filled: PersValue = {};\n    for (const f of persFields) {\n      const v = personalization[f.key];\n      if (v && (v.text?.trim() || v.imagePath)) filled[f.key] = v;\n    }\n    const persLabel = persFields\n      .filter((f) => filled[f.key])\n      .map((f) => `${f.label}: ${filled[f.key].text ?? filled[f.key].fileName ?? \"✓\"}`)\n      .join(\" · \");\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: mainImage ?? product.images?.[0],\n        personalization: Object.keys(filled).length > 0 ? filled : undefined,\n        personalizationLabel: persLabel || undefined,\n      },\n      qty,\n    );\n    setAdded(true);\n  }\n\n  const canOrder = (options.length === 0 || allChosen) && !outOfStock && !variantInactive && persComplete;\n\n  return (\n    <>\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          {mainImage ? (\n            <img\n              src={mainImage}\n              alt={product.name}\n              style={{ width: \"100%\", aspectRatio: \"1/1\", objectFit: \"cover\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          ) : (\n            <div\n              className=\"xicms-shop-detail__placeholder\"\n              aria-hidden=\"true\"\n              style={{ width: \"100%\", aspectRatio: \"1/1\", background: \"var(--xicms-muted, #f1f1f1)\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          )}\n          {gallery.length > 1 && (\n            <div style={{ display: \"flex\", gap: 8, marginTop: 8, flexWrap: \"wrap\" }}>\n              {gallery.map((g) => (\n                <button\n                  key={g.url}\n                  type=\"button\"\n                  title={g.label}\n                  onClick={() => setManualImage(g.url)}\n                  style={{\n                    padding: 0,\n                    border: g.url === mainImage ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid transparent\",\n                    borderRadius: 8,\n                    cursor: \"pointer\",\n                    background: \"none\",\n                  }}\n                >\n                  <img src={g.url} alt={g.label ?? \"\"} 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          <p className=\"xicms-shop-detail__price\" style={{ fontSize: \"1.35rem\", fontWeight: 700, 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          </p>\n\n          {product.description && (\n            <p className=\"xicms-shop-detail__desc\" style={{ whiteSpace: \"pre-wrap\", margin: 0 }}>{product.description}</p>\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={t(\"choose\")}\n                options={opt.values}\n                value={choices[i] ?? \"\"}\n                onChange={(v) => {\n                  setChoices((prev) => ({ ...prev, [i]: (v as string) ?? \"\" }));\n                  setManualImage(null);\n                  setAdded(false);\n                }}\n              />\n            ))}\n\n            {persFields.length > 0 && (\n              <PersonalizationInputs\n                fields={persFields}\n                siteId={siteId}\n                productId={product.id}\n                value={personalization}\n                currency={settings.currency}\n                onChange={(v) => {\n                  setPersonalization(v);\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\" }}>{t(\"qty\")}</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)\" }}>{t(\"outOfStock\")}</Text>}\n            {variantInactive && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"variantUnavailable\")}</Text>}\n            {lowStock && !outOfStock && (\n              <Text style={{ color: \"var(--xicms-primary, #4d7fb0)\", fontWeight: 600 }}>\n                {t(\"stockLeft\", { n: stockValue as number })}\n              </Text>\n            )}\n\n            {added ? (\n              <div role=\"status\" style={{ display: \"grid\", gap: 8 }}>\n                <Text>{t(\"added\")}</Text>\n                <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n                  <a className=\"xicms-btn xicms-btn--primary\" href={settings.cartPath}>{t(\"toCart\")}</a>\n                  <a className=\"xicms-btn xicms-btn--secondary\" href={settings.shopPath}>{t(\"continueShopping\")}</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                {t(\"addToCart\")}\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {block.showRelated && related.length > 0 && (\n        <div className=\"xicms-shop-related\" style={{ marginTop: \"3rem\" }}>\n          <Heading level={2}>{t(\"related\")}</Heading>\n          <div\n            className=\"xicms-shop-grid__items\"\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"repeat(auto-fill, minmax(min(200px, calc(50% - 1rem)), 1fr))\",\n              gap: \"1.25rem\",\n              marginTop: \"1rem\",\n            }}\n          >\n            {related.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                t={t}\n              />\n            ))}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nexport const productDetailBlock = defineBlock({\n  type: \"productDetail\",\n  schema: ProductDetailBlockSchema,\n  Render: ProductDetailRender,\n  label: \"Productdetail\",\n  icon: \"🏷️\",\n  defaults: () => ({ showRelated: true }),\n});\n"],"mappings":"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","names":[]}
+{"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 {\n  ProductDetailBlockSchema,\n  formatCents,\n  productPriceCents,\n  variantKeyFor,\n  type PersonalizationField,\n} from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { cartAdd } from \"../cartStore\";\nimport { useShopStrings } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchProductBySlug,\n  kleurOptie,\n  readQueryParam,\n  uploadPersonalizationCall,\n  useShopSettings,\n  variantLabelFor,\n  type StoredProduct,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\nimport { ProductCard } from \"./ProductGrid\";\n\ntype Blk = z.infer<typeof ProductDetailBlockSchema>;\ntype PersValue = Record<string, { text?: string; imagePath?: string; fileName?: string }>;\n\n/** Personalisatie-invoer (eigen tekst of afbeelding) onder de optie-selects. */\nfunction PersonalizationInputs({\n  fields,\n  siteId,\n  productId,\n  value,\n  currency,\n  onChange,\n}: {\n  fields: PersonalizationField[];\n  siteId: string;\n  productId: string;\n  value: PersValue;\n  currency: string;\n  onChange: (next: PersValue) => void;\n}) {\n  const t = useShopStrings();\n  const [uploading, setUploading] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  return (\n    <div className=\"xicms-shop-personalization\" style={{ display: \"grid\", gap: \"0.75rem\" }}>\n      {fields.map((f) => {\n        const v = value[f.key] ?? {};\n        const label = (\n          <span>\n            {f.label}\n            {f.required ? \" *\" : \"\"}\n            {f.priceCents > 0 && (\n              <span style={{ opacity: 0.7, marginLeft: 6, fontSize: \"0.9em\" }}>\n                {t(\"personalizationSurcharge\", { bedrag: formatCents(f.priceCents, currency) })}\n              </span>\n            )}\n          </span>\n        );\n        if (f.type === \"text\") {\n          return (\n            <label key={f.key} style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n              <input\n                className=\"xicms-input\"\n                type=\"text\"\n                maxLength={f.maxLength}\n                value={v.text ?? \"\"}\n                onChange={(e) => onChange({ ...value, [f.key]: { text: e.target.value } })}\n              />\n              <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>\n                {f.helpText ? `${f.helpText} · ` : \"\"}\n                {(v.text ?? \"\").length}/{f.maxLength}\n              </span>\n            </label>\n          );\n        }\n        return (\n          <div key={f.key} style={{ display: \"grid\", gap: 4 }}>\n            <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, flexWrap: \"wrap\" }}>\n              <label className=\"xicms-btn xicms-btn--secondary\" style={{ cursor: \"pointer\" }}>\n                {uploading === f.key\n                  ? t(\"personalizationUploading\")\n                  : v.imagePath\n                    ? t(\"personalizationUploaded\")\n                    : t(\"personalizationUpload\")}\n                <input\n                  type=\"file\"\n                  accept=\"image/jpeg,image/png,image/webp\"\n                  style={{ display: \"none\" }}\n                  onChange={async (e) => {\n                    const file = e.target.files?.[0];\n                    if (!file) return;\n                    setError(null);\n                    setUploading(f.key);\n                    try {\n                      const { path } = await uploadPersonalizationCall(siteId, productId, file);\n                      onChange({ ...value, [f.key]: { imagePath: path, fileName: file.name } });\n                    } catch (err) {\n                      setError(err instanceof Error && err.message === \"TOO_BIG\" ? t(\"personalizationTooBig\") : t(\"personalizationFailed\"));\n                    } finally {\n                      setUploading(null);\n                    }\n                  }}\n                />\n              </label>\n              {v.fileName && <span style={{ fontSize: \"0.85rem\", opacity: 0.75 }}>{v.fileName}</span>}\n            </div>\n            {f.helpText && <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>{f.helpText}</span>}\n          </div>\n        );\n      })}\n      {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n    </div>\n  );\n}\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 met per-kleur-beeldwissel,\n * personalisatie (eigen naam/logo), voorraad-signalen en \"Ook leuk\"-rij.\n */\nfunction ProductDetailRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [product, setProduct] = useState<StoredProduct | null | undefined>(\n    serverData && \"product\" in serverData ? serverData.product : undefined,\n  );\n  const [related, setRelated] = useState<StoredProduct[]>([]);\n  const [choices, setChoices] = useState<Record<number, string>>({});\n  const [personalization, setPersonalization] = useState<PersValue>({});\n  const [qty, setQty] = useState(1);\n  const [manualImage, setManualImage] = useState<string | null>(null);\n  const [added, setAdded] = useState(false);\n\n  useEffect(() => {\n    if (serverData && \"product\" in serverData) return; // SSR-data aanwezig\n    const slug = block.slug || readQueryParam(\"p\") || \"\";\n    if (!slug) {\n      setProduct(null);\n      return;\n    }\n    void fetchProductBySlug(siteId, slug).then(setProduct).catch((e) => {\n      console.warn(\"[xicms] product laden mislukt:\", e);\n      setProduct(null);\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [siteId, block.slug]);\n\n  // \"Ook leuk\": producten uit dezelfde categorie (server-set hergebruiken waar mogelijk).\n  useEffect(() => {\n    if (!block.showRelated || !product) return;\n    const pick = (all: StoredProduct[]) =>\n      setRelated(\n        all\n          .filter((x) => x.id !== product.id && x.categoryIds?.some((c) => product.categoryIds?.includes(c)))\n          .slice(0, 4),\n      );\n    if (serverData?.products) pick(serverData.products);\n    else void fetchActiveProducts(siteId).then(pick).catch(() => setRelated([]));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [product?.id, block.showRelated, siteId]);\n\n  const options = product?.options ?? [];\n  const persFields = product?.personalization ?? [];\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  /** Meerprijs van ingevulde personalisatie (per stuk). */\n  const persSurcharge = useMemo(\n    () =>\n      persFields.reduce((sum, f) => {\n        const v = personalization[f.key];\n        return v && (v.text || v.imagePath) ? sum + f.priceCents : sum;\n      }, 0),\n    [persFields, personalization],\n  );\n\n  const priceCents = useMemo(() => {\n    if (!product) return 0;\n    return productPriceCents(product, variantKey) + persSurcharge;\n  }, [product, variantKey, persSurcharge]);\n\n  /** Hoofdbeeld: handmatige thumbnail-keuze > per-kleur-afbeelding > eerste productfoto. */\n  const kleur = product ? kleurOptie(product) : null;\n  const kleurIdx = kleur && product ? (product.options ?? []).findIndex((o) => o === kleur) : -1;\n  const gekozenKleur = kleurIdx >= 0 ? choices[kleurIdx] : undefined;\n  const kleurImage = gekozenKleur ? kleur?.images?.[gekozenKleur] : undefined;\n  const mainImage = manualImage ?? kleurImage ?? product?.images?.[0];\n\n  /** Alle toonbare afbeeldingen: productfoto's + unieke per-kleur-afbeeldingen. */\n  const gallery = useMemo(() => {\n    if (!product) return [] as { url: string; label?: string }[];\n    const out: { url: string; label?: string }[] = (product.images ?? []).map((url) => ({ url }));\n    for (const [value, url] of Object.entries(kleur?.images ?? {})) {\n      if (!out.some((g) => g.url === url)) out.push({ url, label: value });\n    }\n    return out;\n  }, [product, kleur]);\n\n  const stockValue = options.length === 0 ? product?.stock : variant?.stock;\n  const outOfStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue <= 0);\n  const lowStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue > 0 && stockValue <= 5);\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>\n          {t(\"productNotFound\")} <a href={settings.shopPath}>{t(\"backToShop\")}</a>\n        </Text>\n      </Card>\n    );\n  }\n\n  const persComplete = persFields.every((f) => {\n    if (!f.required) return true;\n    const v = personalization[f.key];\n    return Boolean(v && (v.text?.trim() || v.imagePath));\n  });\n\n  function addToCart() {\n    if (!product) return;\n    const filled: PersValue = {};\n    for (const f of persFields) {\n      const v = personalization[f.key];\n      if (v && (v.text?.trim() || v.imagePath)) filled[f.key] = v;\n    }\n    const persLabel = persFields\n      .filter((f) => filled[f.key])\n      .map((f) => `${f.label}: ${filled[f.key].text ?? filled[f.key].fileName ?? \"✓\"}`)\n      .join(\" · \");\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: mainImage ?? product.images?.[0],\n        personalization: Object.keys(filled).length > 0 ? filled : undefined,\n        personalizationLabel: persLabel || undefined,\n      },\n      qty,\n    );\n    setAdded(true);\n  }\n\n  const canOrder = (options.length === 0 || allChosen) && !outOfStock && !variantInactive && persComplete;\n\n  return (\n    <>\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          {mainImage ? (\n            <img\n              src={mainImage}\n              alt={product.name}\n              style={{ width: \"100%\", aspectRatio: \"1/1\", objectFit: \"cover\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          ) : (\n            <div\n              className=\"xicms-shop-detail__placeholder\"\n              aria-hidden=\"true\"\n              style={{ width: \"100%\", aspectRatio: \"1/1\", background: \"var(--xicms-muted, #f1f1f1)\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          )}\n          {gallery.length > 1 && (\n            <div style={{ display: \"flex\", gap: 8, marginTop: 8, flexWrap: \"wrap\" }}>\n              {gallery.map((g) => (\n                <button\n                  key={g.url}\n                  type=\"button\"\n                  title={g.label}\n                  onClick={() => setManualImage(g.url)}\n                  style={{\n                    padding: 0,\n                    border: g.url === mainImage ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid transparent\",\n                    borderRadius: 8,\n                    cursor: \"pointer\",\n                    background: \"none\",\n                  }}\n                >\n                  <img src={g.url} alt={g.label ?? \"\"} style={{ width: 64, height: 64, objectFit: \"cover\", borderRadius: 6, display: \"block\" }} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/*\n          Haken voor de bewerkmodus. De tekst van een product staat NIET in dit blok — het blok wijst\n          alleen een product aan (`slug`) en haalt de rest uit de productencollectie. Zonder deze\n          haken kon de editor daarom niets: het tandwiel opende een paneel met twee instellingen en\n          het potlood verscheen helemaal niet, want er viel in dit blok niets te bewerken. Terecht,\n          en toch precies verkeerd — je stond naar een productnaam te kijken die je niet kon wijzigen.\n          `data-xicms-product` zegt om welk product het gaat, `data-xicms-product-edit` welk veld\n          eronder ligt; de editor schrijft die rechtstreeks naar het productdocument.\n        */}\n        <div className=\"xicms-shop-detail__info\" data-xicms-product={product.id}>\n          <Heading level={1} data-xicms-product-edit=\"name\">{product.name}</Heading>\n          <p className=\"xicms-shop-detail__price\" style={{ fontSize: \"1.35rem\", fontWeight: 700, 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          </p>\n\n          {product.description && (\n            <p className=\"xicms-shop-detail__desc\" data-xicms-product-edit=\"description\" style={{ whiteSpace: \"pre-wrap\", margin: 0 }}>{product.description}</p>\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={t(\"choose\")}\n                options={opt.values}\n                value={choices[i] ?? \"\"}\n                onChange={(v) => {\n                  setChoices((prev) => ({ ...prev, [i]: (v as string) ?? \"\" }));\n                  setManualImage(null);\n                  setAdded(false);\n                }}\n              />\n            ))}\n\n            {persFields.length > 0 && (\n              <PersonalizationInputs\n                fields={persFields}\n                siteId={siteId}\n                productId={product.id}\n                value={personalization}\n                currency={settings.currency}\n                onChange={(v) => {\n                  setPersonalization(v);\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\" }}>{t(\"qty\")}</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)\" }}>{t(\"outOfStock\")}</Text>}\n            {variantInactive && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"variantUnavailable\")}</Text>}\n            {lowStock && !outOfStock && (\n              <Text style={{ color: \"var(--xicms-primary, #4d7fb0)\", fontWeight: 600 }}>\n                {t(\"stockLeft\", { n: stockValue as number })}\n              </Text>\n            )}\n\n            {added ? (\n              <div role=\"status\" style={{ display: \"grid\", gap: 8 }}>\n                <Text>{t(\"added\")}</Text>\n                <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n                  <a className=\"xicms-btn xicms-btn--primary\" href={settings.cartPath}>{t(\"toCart\")}</a>\n                  <a className=\"xicms-btn xicms-btn--secondary\" href={settings.shopPath}>{t(\"continueShopping\")}</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                {t(\"addToCart\")}\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {block.showRelated && related.length > 0 && (\n        <div className=\"xicms-shop-related\" style={{ marginTop: \"3rem\" }}>\n          <Heading level={2}>{t(\"related\")}</Heading>\n          <div\n            className=\"xicms-shop-grid__items\"\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"repeat(auto-fill, minmax(min(200px, calc(50% - 1rem)), 1fr))\",\n              gap: \"1.25rem\",\n              marginTop: \"1rem\",\n            }}\n          >\n            {related.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                t={t}\n              />\n            ))}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nexport const productDetailBlock = defineBlock({\n  type: \"productDetail\",\n  schema: ProductDetailBlockSchema,\n  Render: ProductDetailRender,\n  label: \"Productdetail\",\n  icon: \"🏷️\",\n  defaults: () => ({ showRelated: true }),\n});\n"],"mappings":"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","names":[]}

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

@@ -71,14 +71,17 @@ function ProductCard({
     // Flex-kolom over de volle kaarthoogte: titel (vast 2 regels) → prijs → swatches →
     // knop onderaan. Zo lijnen prijs/swatches/knop over álle kaarten in de rij uit, ook
     // als een productnaam één of twee regels beslaat. Alle opmaak in styles.css.
-    /* @__PURE__ */ jsxs(Card, { padding: 0, className: "xicms-shop-card", children: [
+    // `data-xicms-product` maakt de kaart in de bewerkmodus aanwijsbaar als PRODUCT (potlood voor
+    // de naam, tandwiel voor het hele formulier). Op de cataloguspagina was dat er niet, en dus was
+    // een productnaam daar het enige stuk tekst op de site dat je nergens kon aanklikken.
+    /* @__PURE__ */ jsxs(Card, { padding: 0, className: "xicms-shop-card", "data-xicms-product": product.id, children: [
       /* @__PURE__ */ jsxs("a", { className: "xicms-shop-card__link", href, children: [
         /* @__PURE__ */ jsxs("div", { className: "xicms-shop-card__media", children: [
           image ? /* @__PURE__ */ jsx("img", { src: image, alt: product.name, loading: "lazy", className: "xicms-shop-card__img" }) : /* @__PURE__ */ jsx("div", { className: "xicms-shop-card__placeholder", "aria-hidden": "true" }),
           soldOut && /* @__PURE__ */ jsx("span", { className: "xicms-shop-card__soldout", children: t("soldOut") })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "xicms-shop-card__body", children: [
-          /* @__PURE__ */ jsx("span", { className: "xicms-shop-card__name", children: product.name }),
+          /* @__PURE__ */ jsx("span", { className: "xicms-shop-card__name", "data-xicms-product-edit": "name", children: product.name }),
           /* @__PURE__ */ jsx("span", { className: "xicms-shop-card__priceline", children: /* @__PURE__ */ jsx(PriceLine, { product, currency }) }),
           /* @__PURE__ */ jsx("span", { className: "xicms-shop-card__swatchrow", children: /* @__PURE__ */ jsx(ColorSwatches, { product, onHover: setHoverImage }) })
         ] })

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

@@ -1 +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 { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { cartAdd } from \"../cartStore\";\nimport { useShopStrings, type ShopT } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchShopCategories,\n  kleurNaarCss,\n  kleurOptie,\n  readQueryParam,\n  useShopSettings,\n  type StoredProduct,\n  type StoredShopCategory,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\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\n/** Uitverkocht (alleen betrouwbaar vast te stellen zonder opties: expliciete voorraad 0). */\nfunction isSoldOut(p: StoredProduct): boolean {\n  return p.trackStock === true && (p.options ?? []).length === 0 && p.stock !== undefined && p.stock <= 0;\n}\n\n/** Stof-stipjes; hover wisselt de kaartfoto naar de per-kleur-afbeelding (als die er is). */\nfunction ColorSwatches({ product, onHover }: { product: StoredProduct; onHover?: (url: string | null) => void }) {\n  const optie = kleurOptie(product);\n  if (!optie) return null;\n  const dots = optie.values\n    .map((v) => ({ v, css: kleurNaarCss(v), img: optie.images?.[v] }))\n    .filter((d): d is { v: string; css: string; img: string | undefined } => d.css !== null);\n  if (dots.length === 0) return null;\n  return (\n    <span className=\"xicms-shop-card__swatches\" aria-label={`Kleuren: ${optie.values.join(\", \")}`}>\n      {dots.map((d) => (\n        <span\n          key={d.v}\n          className=\"xicms-shop-card__swatch\"\n          title={d.v}\n          onMouseEnter={d.img && onHover ? () => onHover(d.img ?? null) : undefined}\n          onMouseLeave={d.img && onHover ? () => onHover(null) : undefined}\n          style={{\n            display: \"inline-block\",\n            width: 12,\n            height: 12,\n            borderRadius: 999,\n            background: d.css,\n            boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\",\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport function ProductCard({\n  product,\n  siteId,\n  currency,\n  detailPath,\n  cartPath,\n  t,\n  filterColor,\n}: {\n  product: StoredProduct;\n  siteId: string;\n  currency: string;\n  detailPath: string;\n  cartPath: string;\n  t: ShopT;\n  /** Actief kleurfilter uit het overzicht — toont bij voorkeur de foto van die kleur. */\n  filterColor?: string | null;\n}) {\n  const [added, setAdded] = useState(false);\n  const [hoverImage, setHoverImage] = useState<string | null>(null);\n  const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;\n  const simple = (product.options ?? []).length === 0 && !(product.personalization ?? []).length;\n  const soldOut = isSoldOut(product);\n  const filterImage = filterColor ? kleurOptie(product)?.images?.[filterColor] : undefined;\n  const image = hoverImage ?? filterImage ?? product.images?.[0];\n\n  return (\n    // Flex-kolom over de volle kaarthoogte: titel (vast 2 regels) → prijs → swatches →\n    // knop onderaan. Zo lijnen prijs/swatches/knop over álle kaarten in de rij uit, ook\n    // als een productnaam één of twee regels beslaat. Alle opmaak in styles.css.\n    <Card padding={0} className=\"xicms-shop-card\">\n      <a className=\"xicms-shop-card__link\" href={href}>\n        <div className=\"xicms-shop-card__media\">\n          {image ? (\n            <img src={image} alt={product.name} loading=\"lazy\" className=\"xicms-shop-card__img\" />\n          ) : (\n            <div className=\"xicms-shop-card__placeholder\" aria-hidden=\"true\" />\n          )}\n          {soldOut && <span className=\"xicms-shop-card__soldout\">{t(\"soldOut\")}</span>}\n        </div>\n        <div className=\"xicms-shop-card__body\">\n          <span className=\"xicms-shop-card__name\">{product.name}</span>\n          <span className=\"xicms-shop-card__priceline\">\n            <PriceLine product={product} currency={currency} />\n          </span>\n          <span className=\"xicms-shop-card__swatchrow\">\n            <ColorSwatches product={product} onHover={setHoverImage} />\n          </span>\n        </div>\n      </a>\n      <div className=\"xicms-shop-card__actions\">\n        {simple ? (\n          added ? (\n            <a className=\"xicms-shop-card__added\" href={cartPath}>\n              {t(\"addedGoToCart\")}\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"xicms-btn xicms-btn--primary\"\n              disabled={soldOut}\n              style={{ cursor: soldOut ? \"not-allowed\" : \"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              {t(\"addToCart\")}\n            </button>\n          )\n        ) : (\n          <a className=\"xicms-btn xicms-btn--secondary\" href={href}>\n            {t(\"view\")}\n          </a>\n        )}\n      </div>\n    </Card>\n  );\n}\n\nfunction ProductGridRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [products, setProducts] = useState<StoredProduct[] | null>(serverData?.products ?? null);\n  const [cats, setCats] = useState<StoredShopCategory[]>(serverData?.categories ?? []);\n  const [queryCat, setQueryCat] = useState<string | null>(null);\n  const [filterColor, setFilterColor] = useState<string | null>(null);\n  const [filterSize, setFilterSize] = useState<string | null>(null);\n  const [sort, setSort] = useState<Blk[\"sort\"]>(block.sort);\n\n  useEffect(() => {\n    // Server-data aanwezig (SSR/ISR)? Dan geen client-fetch — geen flits, minder reads.\n    if (!serverData?.products) {\n      void fetchActiveProducts(siteId).then(setProducts).catch((e) => {\n        console.warn(\"[xicms] producten laden mislukt:\", e);\n        setProducts([]);\n      });\n    }\n    if (!serverData?.categories) {\n      void fetchShopCategories(siteId).then(setCats).catch(() => setCats([]));\n    }\n    if (block.useQueryCategory && !block.categorySlug) setQueryCat(readQueryParam(\"cat\"));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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  /** Beschikbare filterwaarden uit de geladen set (client-side; geen extra reads). */\n  const filterValues = useMemo(() => {\n    if (!block.showFilters || !products) return { colors: [] as string[], sizes: [] as string[] };\n    const colors = new Set<string>();\n    const sizes = new Set<string>();\n    for (const p of products) {\n      for (const o of p.options ?? []) {\n        if (/^kleur|^colou?r/i.test(o.name)) o.values.forEach((v) => colors.add(v));\n        if (/^maat|^size/i.test(o.name)) o.values.forEach((v) => sizes.add(v));\n      }\n    }\n    return { colors: [...colors], sizes: [...sizes].sort((a, b) => Number(a) - Number(b) || a.localeCompare(b)) };\n  }, [products, block.showFilters]);\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    if (filterColor) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^kleur|^colou?r/i.test(o.name) && o.values.includes(filterColor)),\n      );\n    }\n    if (filterSize) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^maat|^size/i.test(o.name) && o.values.includes(filterSize)),\n      );\n    }\n    const sorted = [...list];\n    if (sort === \"name\") sorted.sort((a, b) => a.name.localeCompare(b.name, \"nl\"));\n    else if (sort === \"priceAsc\") sorted.sort((a, b) => a.priceCents - b.priceCents);\n    else if (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.limit, sort, filterColor, filterSize]);\n\n  if (products === null) return null;\n\n  const chip = (label: string, active: boolean, onClick: () => void, swatch?: string | null) => (\n    <button\n      key={label}\n      type=\"button\"\n      className={`xicms-shop-filterchip${active ? \" xicms-shop-filterchip--active\" : \"\"}`}\n      aria-pressed={active}\n      onClick={onClick}\n    >\n      {swatch && (\n        <span\n          aria-hidden\n          style={{ display: \"inline-block\", width: 10, height: 10, borderRadius: 999, background: swatch, boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\", marginRight: 5 }}\n        />\n      )}\n      {label}\n    </button>\n  );\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}>← {t(\"allCategories\")}</a>\n        </Text>\n      )}\n\n      {block.showFilters && (filterValues.colors.length > 0 || filterValues.sizes.length > 0) && (\n        <div className=\"xicms-shop-filters\">\n          {filterValues.colors.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Kleur\">\n              {chip(t(\"filterAll\"), filterColor === null, () => setFilterColor(null))}\n              {filterValues.colors.map((c) =>\n                chip(c, filterColor === c, () => setFilterColor(filterColor === c ? null : c), kleurNaarCss(c)),\n              )}\n            </div>\n          )}\n          {filterValues.sizes.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Maat\">\n              {chip(t(\"filterAll\"), filterSize === null, () => setFilterSize(null))}\n              {filterValues.sizes.map((s) => chip(s, filterSize === s, () => setFilterSize(filterSize === s ? null : s)))}\n            </div>\n          )}\n          <label className=\"xicms-shop-filters__sort\">\n            <span>{t(\"sortLabel\")}</span>\n            <select className=\"xicms-input\" value={sort} onChange={(e) => setSort(e.target.value as Blk[\"sort\"])}>\n              <option value=\"order\">{t(\"sortDefault\")}</option>\n              <option value=\"name\">{t(\"sortName\")}</option>\n              <option value=\"priceAsc\">{t(\"sortPriceAsc\")}</option>\n              <option value=\"priceDesc\">{t(\"sortPriceDesc\")}</option>\n            </select>\n          </label>\n        </div>\n      )}\n\n      {visible.length === 0 ? (\n        <Card padding={4} variant=\"muted\" style={{ marginTop: \"1rem\" }}>\n          <Text>{t(\"noProducts\")}</Text>\n        </Card>\n      ) : (\n        <div\n          className=\"xicms-shop-grid__items\"\n          data-columns={block.columns}\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              t={t}\n              filterColor={filterColor}\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":[]}
+{"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 { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { cartAdd } from \"../cartStore\";\nimport { useShopStrings, type ShopT } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchShopCategories,\n  kleurNaarCss,\n  kleurOptie,\n  readQueryParam,\n  useShopSettings,\n  type StoredProduct,\n  type StoredShopCategory,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\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\n/** Uitverkocht (alleen betrouwbaar vast te stellen zonder opties: expliciete voorraad 0). */\nfunction isSoldOut(p: StoredProduct): boolean {\n  return p.trackStock === true && (p.options ?? []).length === 0 && p.stock !== undefined && p.stock <= 0;\n}\n\n/** Stof-stipjes; hover wisselt de kaartfoto naar de per-kleur-afbeelding (als die er is). */\nfunction ColorSwatches({ product, onHover }: { product: StoredProduct; onHover?: (url: string | null) => void }) {\n  const optie = kleurOptie(product);\n  if (!optie) return null;\n  const dots = optie.values\n    .map((v) => ({ v, css: kleurNaarCss(v), img: optie.images?.[v] }))\n    .filter((d): d is { v: string; css: string; img: string | undefined } => d.css !== null);\n  if (dots.length === 0) return null;\n  return (\n    <span className=\"xicms-shop-card__swatches\" aria-label={`Kleuren: ${optie.values.join(\", \")}`}>\n      {dots.map((d) => (\n        <span\n          key={d.v}\n          className=\"xicms-shop-card__swatch\"\n          title={d.v}\n          onMouseEnter={d.img && onHover ? () => onHover(d.img ?? null) : undefined}\n          onMouseLeave={d.img && onHover ? () => onHover(null) : undefined}\n          style={{\n            display: \"inline-block\",\n            width: 12,\n            height: 12,\n            borderRadius: 999,\n            background: d.css,\n            boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\",\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport function ProductCard({\n  product,\n  siteId,\n  currency,\n  detailPath,\n  cartPath,\n  t,\n  filterColor,\n}: {\n  product: StoredProduct;\n  siteId: string;\n  currency: string;\n  detailPath: string;\n  cartPath: string;\n  t: ShopT;\n  /** Actief kleurfilter uit het overzicht — toont bij voorkeur de foto van die kleur. */\n  filterColor?: string | null;\n}) {\n  const [added, setAdded] = useState(false);\n  const [hoverImage, setHoverImage] = useState<string | null>(null);\n  const href = `${detailPath}?p=${encodeURIComponent(product.slug)}`;\n  const simple = (product.options ?? []).length === 0 && !(product.personalization ?? []).length;\n  const soldOut = isSoldOut(product);\n  const filterImage = filterColor ? kleurOptie(product)?.images?.[filterColor] : undefined;\n  const image = hoverImage ?? filterImage ?? product.images?.[0];\n\n  return (\n    // Flex-kolom over de volle kaarthoogte: titel (vast 2 regels) → prijs → swatches →\n    // knop onderaan. Zo lijnen prijs/swatches/knop over álle kaarten in de rij uit, ook\n    // als een productnaam één of twee regels beslaat. Alle opmaak in styles.css.\n    // `data-xicms-product` maakt de kaart in de bewerkmodus aanwijsbaar als PRODUCT (potlood voor\n    // de naam, tandwiel voor het hele formulier). Op de cataloguspagina was dat er niet, en dus was\n    // een productnaam daar het enige stuk tekst op de site dat je nergens kon aanklikken.\n    <Card padding={0} className=\"xicms-shop-card\" data-xicms-product={product.id}>\n      <a className=\"xicms-shop-card__link\" href={href}>\n        <div className=\"xicms-shop-card__media\">\n          {image ? (\n            <img src={image} alt={product.name} loading=\"lazy\" className=\"xicms-shop-card__img\" />\n          ) : (\n            <div className=\"xicms-shop-card__placeholder\" aria-hidden=\"true\" />\n          )}\n          {soldOut && <span className=\"xicms-shop-card__soldout\">{t(\"soldOut\")}</span>}\n        </div>\n        <div className=\"xicms-shop-card__body\">\n          <span className=\"xicms-shop-card__name\" data-xicms-product-edit=\"name\">{product.name}</span>\n          <span className=\"xicms-shop-card__priceline\">\n            <PriceLine product={product} currency={currency} />\n          </span>\n          <span className=\"xicms-shop-card__swatchrow\">\n            <ColorSwatches product={product} onHover={setHoverImage} />\n          </span>\n        </div>\n      </a>\n      <div className=\"xicms-shop-card__actions\">\n        {simple ? (\n          added ? (\n            <a className=\"xicms-shop-card__added\" href={cartPath}>\n              {t(\"addedGoToCart\")}\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              className=\"xicms-btn xicms-btn--primary\"\n              disabled={soldOut}\n              style={{ cursor: soldOut ? \"not-allowed\" : \"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              {t(\"addToCart\")}\n            </button>\n          )\n        ) : (\n          <a className=\"xicms-btn xicms-btn--secondary\" href={href}>\n            {t(\"view\")}\n          </a>\n        )}\n      </div>\n    </Card>\n  );\n}\n\nfunction ProductGridRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [products, setProducts] = useState<StoredProduct[] | null>(serverData?.products ?? null);\n  const [cats, setCats] = useState<StoredShopCategory[]>(serverData?.categories ?? []);\n  const [queryCat, setQueryCat] = useState<string | null>(null);\n  const [filterColor, setFilterColor] = useState<string | null>(null);\n  const [filterSize, setFilterSize] = useState<string | null>(null);\n  const [sort, setSort] = useState<Blk[\"sort\"]>(block.sort);\n\n  useEffect(() => {\n    // Server-data aanwezig (SSR/ISR)? Dan geen client-fetch — geen flits, minder reads.\n    if (!serverData?.products) {\n      void fetchActiveProducts(siteId).then(setProducts).catch((e) => {\n        console.warn(\"[xicms] producten laden mislukt:\", e);\n        setProducts([]);\n      });\n    }\n    if (!serverData?.categories) {\n      void fetchShopCategories(siteId).then(setCats).catch(() => setCats([]));\n    }\n    if (block.useQueryCategory && !block.categorySlug) setQueryCat(readQueryParam(\"cat\"));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\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  /** Beschikbare filterwaarden uit de geladen set (client-side; geen extra reads). */\n  const filterValues = useMemo(() => {\n    if (!block.showFilters || !products) return { colors: [] as string[], sizes: [] as string[] };\n    const colors = new Set<string>();\n    const sizes = new Set<string>();\n    for (const p of products) {\n      for (const o of p.options ?? []) {\n        if (/^kleur|^colou?r/i.test(o.name)) o.values.forEach((v) => colors.add(v));\n        if (/^maat|^size/i.test(o.name)) o.values.forEach((v) => sizes.add(v));\n      }\n    }\n    return { colors: [...colors], sizes: [...sizes].sort((a, b) => Number(a) - Number(b) || a.localeCompare(b)) };\n  }, [products, block.showFilters]);\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    if (filterColor) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^kleur|^colou?r/i.test(o.name) && o.values.includes(filterColor)),\n      );\n    }\n    if (filterSize) {\n      list = list.filter((p) =>\n        (p.options ?? []).some((o) => /^maat|^size/i.test(o.name) && o.values.includes(filterSize)),\n      );\n    }\n    const sorted = [...list];\n    if (sort === \"name\") sorted.sort((a, b) => a.name.localeCompare(b.name, \"nl\"));\n    else if (sort === \"priceAsc\") sorted.sort((a, b) => a.priceCents - b.priceCents);\n    else if (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.limit, sort, filterColor, filterSize]);\n\n  if (products === null) return null;\n\n  const chip = (label: string, active: boolean, onClick: () => void, swatch?: string | null) => (\n    <button\n      key={label}\n      type=\"button\"\n      className={`xicms-shop-filterchip${active ? \" xicms-shop-filterchip--active\" : \"\"}`}\n      aria-pressed={active}\n      onClick={onClick}\n    >\n      {swatch && (\n        <span\n          aria-hidden\n          style={{ display: \"inline-block\", width: 10, height: 10, borderRadius: 999, background: swatch, boxShadow: \"inset 0 0 0 1px rgba(0,0,0,0.18)\", marginRight: 5 }}\n        />\n      )}\n      {label}\n    </button>\n  );\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}>← {t(\"allCategories\")}</a>\n        </Text>\n      )}\n\n      {block.showFilters && (filterValues.colors.length > 0 || filterValues.sizes.length > 0) && (\n        <div className=\"xicms-shop-filters\">\n          {filterValues.colors.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Kleur\">\n              {chip(t(\"filterAll\"), filterColor === null, () => setFilterColor(null))}\n              {filterValues.colors.map((c) =>\n                chip(c, filterColor === c, () => setFilterColor(filterColor === c ? null : c), kleurNaarCss(c)),\n              )}\n            </div>\n          )}\n          {filterValues.sizes.length > 0 && (\n            <div className=\"xicms-shop-filters__row\" role=\"group\" aria-label=\"Maat\">\n              {chip(t(\"filterAll\"), filterSize === null, () => setFilterSize(null))}\n              {filterValues.sizes.map((s) => chip(s, filterSize === s, () => setFilterSize(filterSize === s ? null : s)))}\n            </div>\n          )}\n          <label className=\"xicms-shop-filters__sort\">\n            <span>{t(\"sortLabel\")}</span>\n            <select className=\"xicms-input\" value={sort} onChange={(e) => setSort(e.target.value as Blk[\"sort\"])}>\n              <option value=\"order\">{t(\"sortDefault\")}</option>\n              <option value=\"name\">{t(\"sortName\")}</option>\n              <option value=\"priceAsc\">{t(\"sortPriceAsc\")}</option>\n              <option value=\"priceDesc\">{t(\"sortPriceDesc\")}</option>\n            </select>\n          </label>\n        </div>\n      )}\n\n      {visible.length === 0 ? (\n        <Card padding={4} variant=\"muted\" style={{ marginTop: \"1rem\" }}>\n          <Text>{t(\"noProducts\")}</Text>\n        </Card>\n      ) : (\n        <div\n          className=\"xicms-shop-grid__items\"\n          data-columns={block.columns}\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              t={t}\n              filterColor={filterColor}\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/styles.css

@@ -250,23 +250,6 @@
 .xicms-ve__shell {
   display: contents;
 }
-.xicms-ve__bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 10001;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.6rem 1rem;
-  background: #0f172a;
-  color: #fff;
-}
-/* De balk dekt de bovenkant van de site af; duw de pagina omlaag zolang er bewerkt wordt. */
-:root:has(.xicms-ve__bar) body {
-  padding-top: 3rem;
-}
 .xicms-ve__title {
   font-size: 0.95rem;
 }
@@ -751,33 +734,57 @@
 }
 
 /* Zwevende werkbalk voor editors */
-.xicms-editbar {
+/*
+ * De beheerbalk staat BOVENAAN, en in beide toestanden op precies dezelfde plek.
+ *
+ * Hij zweefde als pilletje onderaan, terwijl de editor zijn eigen balk bovenaan meebracht. Het
+ * overschakelen tussen "live site" en "bewerken" verplaatste de knoppen daarmee van onder naar
+ * boven — je moest je houvast opnieuw zoeken op het moment dat je van modus wisselde, en dat is
+ * precies het moment waarop je het niet kunt missen. Nu is het één balk die blijft staan en
+ * waarin alleen een andere knop oplicht.
+ *
+ * Onderaan was ook niet meer vrij: daar staat sinds 7.8 de publiceerknop, en die hoort bij je werk
+ * op de pagina — niet naast de navigatie.
+ */
+.xicms-editbar,
+.xicms-ve__bar {
   position: fixed;
-  /* `--xicms-bottombar` wordt gezet door de demo-balk (zie DemoLock): die beslaat de onderrand,
-     en zonder deze marge lagen de twee over elkaar heen. Zonder demo-balk is de variabele leeg
-     en blijft het gewoon 14px. */
-  bottom: calc(14px + var(--xicms-bottombar, 0px));
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10001;
   display: flex;
   align-items: center;
   gap: 0.3rem;
-  /* Compact + nooit breder dan het scherm → past op één regel, ook op smalle telefoons. */
-  max-width: calc(100vw - 16px);
-  padding: 0.3rem 0.35rem 0.3rem 0.85rem;
-  /* Eigen kleuren, los van de site eronder: een donkere glasstaaf leest op een witte én op een
+  padding: 0.4rem 0.9rem;
+  /* Eigen kleuren, los van de site eronder: een donkere staaf leest op een witte én op een
      donkere pagina, en blijft op élke klantsite hetzelfde stukje gereedschap. */
-  background: rgba(15, 23, 42, 0.92);
+  background: rgba(15, 23, 42, 0.95);
   -webkit-backdrop-filter: saturate(1.4) blur(10px);
   backdrop-filter: saturate(1.4) blur(10px);
   color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 999px;
-  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   font-size: 0.8rem;
   line-height: 1;
 }
+/*
+ * De balk dekt de bovenkant van de site af; duw de pagina omlaag zolang hij er staat.
+ *
+ * Op `:root` en niet op `body`: de padding hoort bij de scroll-container, en `body` is bij
+ * klantsites veel vaker het element waar eigen CSS aan zit (achtergronden, grid, `min-height`).
+ * Hoe minder we aan `body` doen, hoe kleiner de kans dat deze balk iets in de weg legt op een
+ * site die we niet kennen. Layout-technisch is het resultaat hetzelfde.
+ */
+:root:has(.xicms-editbar),
+:root:has(.xicms-ve__bar) {
+  padding-top: 2.6rem;
+}
+.xicms-ve__sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 0.15rem 0.4rem;
+  background: rgba(255, 255, 255, 0.16);
+}
 .xicms-editbar__brand {
   white-space: nowrap;
   font-weight: 600;
@@ -822,16 +829,22 @@
   outline: 2px solid #a5b4fc;
   outline-offset: 2px;
 }
-/* De hoofdactie draagt als enige een vlak: één ding om op te klikken, de rest is bijzaak. */
-.xicms-editbar__btn--primary {
+/*
+ * De knop die aan staat, staat aan. Niet de knop die je zou moeten indrukken.
+ *
+ * Er was één opvallende hoofdactie ("Pagina bewerken"), en die bleef er hetzelfde uitzien of je nu
+ * keek of bewerkte. De balk kon dus niet vertellen in welke toestand je zat — het verschil tussen
+ * "ik zie de live site" en "ik bewerk maar heb nog niets veranderd" is op het scherm nihil, en
+ * juist dáár moest de balk uitsluitsel over geven.
+ */
+.xicms-editbar__btn.is-actief {
   background: #fff;
   color: #0f172a;
   font-weight: 600;
 }
-.xicms-editbar__btn--primary:hover {
+.xicms-editbar__btn.is-actief:hover {
   background: #fff;
   color: #0f172a;
-  filter: brightness(0.92);
 }
 
 /* Demo-bewerkmodus: bovenbalk met pseudo-login + duidelijke "niet opgeslagen"-melding */
@@ -3050,26 +3063,130 @@
 /* Tandwiel naast een blok op de pagina. Zelfde familie als het potlood — even ingetogen, want ze
    liggen over de site van de klant heen — maar duidelijk een andere handeling: het potlood zit bij
    een tekstveld, het tandwiel rechtsboven bij het blok als geheel. */
-.xicms-ve-gear {
+/*
+ * Potlood + tandwiel per blok, als één klein paar.
+ *
+ * Ze staan naast elkaar in één schijfje zodat ze bij ELKAAR horen en bij het blok waar ze op
+ * liggen — twee losse knoppen op verschillende hoogtes lezen als twee losse dingen. Halfdoorzichtig
+ * in rust: gereedschap hoort de site niet te overschreeuwen, maar wel te vinden zijn.
+ */
+.xicms-ve-blokknoppen {
   position: fixed;
-  z-index: 10000;
+  z-index: 10005;
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.42);
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  opacity: 0.5;
+  transition: opacity 0.12s ease;
+}
+.xicms-ve-blokknoppen:hover,
+.xicms-ve-blokknoppen:focus-within {
+  opacity: 1;
+  background: rgba(15, 23, 42, 0.9);
+}
+.xicms-ve-blokknop {
+  appearance: none;
   width: 26px;
   height: 26px;
   display: grid;
   place-items: center;
   border: 0;
   border-radius: 999px;
-  background: rgba(15, 23, 42, 0.4);
+  background: transparent;
   color: #fff;
   cursor: pointer;
-  opacity: 0.45;
-  transition: opacity 0.12s ease, background 0.12s ease;
+  transition: background 0.12s ease;
 }
-.xicms-ve-gear:hover,
-.xicms-ve-gear:focus-visible,
-.xicms-ve-gear.is-on {
+.xicms-ve-blokknop:hover,
+.xicms-ve-blokknop.is-on {
+  background: rgba(255, 255, 255, 0.22);
+}
+.xicms-ve-blokknop:focus-visible {
+  outline: 2px solid #a5b4fc;
+  outline-offset: 1px;
+}
+
+/* Producten dragen een iets andere tint zodat je ziet dat je iets anders aanwijst dan een blok:
+   wijzigingen aan een product gaan meteen live en horen niet met paginatekst verward te worden. */
+.xicms-ve-blokknoppen.is-product {
+  background: rgba(120, 53, 15, 0.55);
   opacity: 1;
-  background: rgba(15, 23, 42, 0.85);
+}
+.xicms-ve-blokknoppen.is-product:hover,
+.xicms-ve-blokknoppen.is-product:focus-within {
+  background: rgba(120, 53, 15, 0.92);
+}
+
+/*
+ * Rood en onderstreept = dit staat nog NIET op de live site.
+ *
+ * Bewust een onderstreping en niet alleen kleur: kleur alleen is geen boodschap voor wie
+ * kleurenblind is, en dit is te belangrijk om aan kleur alleen op te hangen. De streep loopt onder
+ * de tekst door zonder de regelhoogte te veranderen, zodat de pagina niet verspringt zodra je iets
+ * wijzigt — anders zou de markering zelf de layout laten dansen tijdens het typen.
+ */
+.xicms-ve-gewijzigd {
+  color: #b91c1c !important;
+  text-decoration: underline wavy #b91c1c 1px;
+  text-underline-offset: 3px;
+}
+/* Een heel nieuw of verplaatst blok: een streep in de kantlijn i.p.v. alle tekst rood. Alles rood
+   kleuren van een blok dat in zijn geheel nieuw is, is geen informatie maar een rode lap. */
+.xicms-ve-nieuw {
+  box-shadow: inset 3px 0 0 0 #b91c1c;
+}
+
+/*
+ * De publiceerknop: groot, rechtsonder, bij je werk.
+ *
+ * Hij stond bovenin tussen de navigatie en riep daar altijd even hard, ook als er niets te
+ * publiceren viel — een knop die altijd beschikbaar is, zegt niets meer. Nu is hij grijs en
+ * uitgeschakeld zolang de pagina gelijk is aan wat er live staat, en kleurt hij pas op als er echt
+ * iets klaarstaat. Zelfde bron als de rode markering, dus knop en pagina spreken elkaar nooit tegen.
+ */
+.xicms-ve-publiceer {
+  position: fixed;
+  right: 20px;
+  bottom: calc(20px + var(--xicms-bottombar, 0px));
+  z-index: 10006;
+  display: grid;
+  gap: 2px;
+  justify-items: center;
+  min-width: 8.5rem;
+  padding: 0.7rem 1.3rem;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 999px;
+  background: rgba(71, 85, 105, 0.85);
+  color: rgba(255, 255, 255, 0.75);
+  font: inherit;
+  font-size: 0.9rem;
+  cursor: not-allowed;
+  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
+  transition: background 0.15s ease, transform 0.15s ease;
+}
+.xicms-ve-publiceer.is-klaar {
+  background: #2563eb;
+  color: #fff;
+  cursor: pointer;
+}
+.xicms-ve-publiceer.is-klaar:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+}
+.xicms-ve-publiceer:focus-visible {
+  outline: 2px solid #a5b4fc;
+  outline-offset: 3px;
+}
+.xicms-ve-publiceer__label {
+  font-weight: 600;
+}
+.xicms-ve-publiceer__sub {
+  font-size: 0.72rem;
+  opacity: 0.8;
 }
 
 /* Melding in de editorbalk (nog geen werkversie). Hoort bij het gereedschap, niet bij de pagina. */

package/dist/version.js

@@ -1,4 +1,4 @@
-const CORE_VERSION = true ? "7.6.1" : "0.0.0-dev";
+const CORE_VERSION = true ? "7.8.0" : "0.0.0-dev";
 const CORE_PACKAGE = "@xiwebdesign/xicms-core";
 function isNieuwer(beschikbaar, huidig) {
   const delen = (v) => v.split("-")[0].split(".").map((n) => Number.parseInt(n, 10) || 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xiwebdesign/xicms-core",
-  "version": "7.6.1",
+  "version": "7.8.0",
   "description": "XiCMS engine: gestructureerde content, pagina's, draft/publish, admin (TipTap+Radix), SEO en beveiliging voor klantsites.",
   "license": "UNLICENSED",
   "repository": {