@xiwebdesign/xicms-core 4.18.0 → 5.0.1

package/dist/agentFiles/files.js

@@ -0,0 +1,109 @@
+import { z } from "zod";
+import { PageSchema } from "../schema/pages";
+import { SymbolSchema } from "../schema/symbols";
+import { CustomBlockSchema } from "../schema/customBlocks";
+function stableStringify(value) {
+  if (Array.isArray(value)) return `[${value.map(stableStringify).join(",")}]`;
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value).filter(([, v]) => v !== void 0).sort(([a], [b]) => a < b ? -1 : 1);
+    return `{${entries.map(([k, v]) => `${JSON.stringify(k)}:${stableStringify(v)}`).join(",")}}`;
+  }
+  return JSON.stringify(value) ?? "null";
+}
+function contentHash(value) {
+  const s = stableStringify(value);
+  let h = 0xcbf29ce484222325n;
+  const prime = 0x100000001b3n;
+  for (let i = 0; i < s.length; i++) {
+    h ^= BigInt(s.charCodeAt(i));
+    h = h * prime & 0xffffffffffffffffn;
+  }
+  return h.toString(16).padStart(16, "0");
+}
+function emptyManifest(siteId, pulledAt) {
+  return { format: "xicms-files", version: 1, siteId, pulledAt, entities: {} };
+}
+function decideSync(base, local, remote) {
+  if (base === void 0) return remote === void 0 ? "create" : remote === local ? "skip" : "conflict";
+  if (remote === void 0) return "remote-deleted";
+  if (remote === local) return "skip";
+  if (local === base) return "skip";
+  if (remote === base) return "push";
+  return "conflict";
+}
+function pagePathToFile(path) {
+  const clean = path.replace(/^\/+|\/+$/g, "");
+  return clean === "" ? "pages/index.yaml" : `pages/${clean}.yaml`;
+}
+function idToFilename(id) {
+  return id.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+function serializePage(page) {
+  return {
+    id: page.id,
+    title: page.title,
+    slug: page.slug,
+    path: page.path,
+    parentId: page.parentId ?? null,
+    order: page.order ?? 0,
+    ...page.seo && Object.keys(page.seo).length > 0 ? { seo: page.seo } : {},
+    blocks: page.blocks ?? [],
+    ...page.translations && Object.keys(page.translations).length > 0 ? { translations: page.translations } : {}
+  };
+}
+const PageFileSchema = PageSchema.extend({ id: z.string().min(1).max(64) });
+function parsePageFile(obj) {
+  const res = PageFileSchema.safeParse(obj);
+  if (!res.success) {
+    const i = res.error.issues[0];
+    throw new Error(`ongeldige pagina: ${i?.path.join(".") || "(root)"}: ${i?.message}`);
+  }
+  return res.data;
+}
+function serializeSymbol(symbol) {
+  return {
+    id: symbol.id,
+    name: symbol.name,
+    blocks: symbol.blocks ?? [],
+    ...symbol.translations && Object.keys(symbol.translations).length > 0 ? { translations: symbol.translations } : {}
+  };
+}
+const SymbolFileSchema = SymbolSchema.extend({ id: z.string().min(1).max(120) });
+function parseSymbolFile(obj) {
+  const res = SymbolFileSchema.safeParse(obj);
+  if (!res.success) {
+    const i = res.error.issues[0];
+    throw new Error(`ongeldig symbool: ${i?.path.join(".") || "(root)"}: ${i?.message}`);
+  }
+  return res.data;
+}
+function serializeCustomBlock(def) {
+  return {
+    meta: { type: def.type, label: def.label, icon: def.icon, version: def.version, fields: def.fields },
+    template: def.template,
+    css: def.css
+  };
+}
+function parseCustomBlockFiles(meta, template, css) {
+  const res = CustomBlockSchema.safeParse({ ...meta, template, css });
+  if (!res.success) {
+    const i = res.error.issues[0];
+    throw new Error(`ongeldige bouwsteen: ${i?.path.join(".") || "(root)"}: ${i?.message}`);
+  }
+  return res.data;
+}
+export {
+  contentHash,
+  decideSync,
+  emptyManifest,
+  idToFilename,
+  pagePathToFile,
+  parseCustomBlockFiles,
+  parsePageFile,
+  parseSymbolFile,
+  serializeCustomBlock,
+  serializePage,
+  serializeSymbol,
+  stableStringify
+};
+//# sourceMappingURL=files.js.map

package/dist/agentFiles/files.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/agentFiles/files.ts"],"sourcesContent":["/**\n * Agent-bestandslaag (5.0, primo-concept \"DB ⇄ files\"): pure serialisatie-, hash- en\n * sync-logica voor de `pull-site`/`push-site`-scripts. Een site wordt een map met YAML/HTML-\n * bestanden die een coding-agent direct kan bewerken; `.xicms/manifest.json` onthoudt per\n * entiteit een inhouds-hash van het pull-moment zodat push conflicten kan detecteren\n * (drie-wegen: basis/lokaal/remote) in plaats van stil werk te overschrijven.\n *\n * Alleen pure functies — geen I/O, geen Firebase — zodat dit unit-testbaar is en zowel de\n * scripts als toekomstige tooling (bv. een cloud-agent) er op kunnen bouwen.\n */\nimport { z } from \"zod\";\nimport { PageSchema, type Page } from \"../schema/pages\";\nimport { SymbolSchema, type Symbol } from \"../schema/symbols\";\nimport { CustomBlockSchema, type CustomBlock } from \"../schema/customBlocks\";\n\n/* ---------------- hashing ---------------- */\n\n/** Stabiele JSON-representatie (gesorteerde sleutels, zonder undefined) voor hashing. */\nexport function stableStringify(value: unknown): string {\n  if (Array.isArray(value)) return `[${value.map(stableStringify).join(\",\")}]`;\n  if (value && typeof value === \"object\") {\n    const entries = Object.entries(value as Record<string, unknown>)\n      .filter(([, v]) => v !== undefined)\n      .sort(([a], [b]) => (a < b ? -1 : 1));\n    return `{${entries.map(([k, v]) => `${JSON.stringify(k)}:${stableStringify(v)}`).join(\",\")}}`;\n  }\n  return JSON.stringify(value) ?? \"null\";\n}\n\n/** FNV-1a 64-bit (hex) — snel, dependency-vrij en client-safe (geen node:crypto). Dit is een\n *  wijzigingsdetector, geen beveiligingshash. */\nexport function contentHash(value: unknown): string {\n  const s = stableStringify(value);\n  let h = 0xcbf29ce484222325n;\n  const prime = 0x100000001b3n;\n  for (let i = 0; i < s.length; i++) {\n    h ^= BigInt(s.charCodeAt(i));\n    h = (h * prime) & 0xffffffffffffffffn;\n  }\n  return h.toString(16).padStart(16, \"0\");\n}\n\n/* ---------------- manifest + sync-beslissing ---------------- */\n\nexport interface ManifestEntry {\n  /** Relatief bestandspad binnen de site-map (bv. \"pages/diensten/web.yaml\"). */\n  file: string;\n  /** contentHash van de geserialiseerde entiteit op pull-moment (de \"basis\"). */\n  hash: string;\n}\n\nexport interface Manifest {\n  format: \"xicms-files\";\n  version: 1;\n  siteId: string;\n  pulledAt: string;\n  /** Sleutels: \"<soort>:<id>\", bv. \"page:abc123\", \"symbol:cta\", \"customBlock:custom-usps\". */\n  entities: Record<string, ManifestEntry>;\n}\n\nexport function emptyManifest(siteId: string, pulledAt: string): Manifest {\n  return { format: \"xicms-files\", version: 1, siteId, pulledAt, entities: {} };\n}\n\nexport type SyncAction = \"push\" | \"skip\" | \"conflict\" | \"create\" | \"remote-deleted\";\n\n/**\n * Drie-wegen-beslissing per entiteit:\n * - basis (manifest-hash van pull), lokaal (bestand nu), remote (database nu).\n * - lokaal ongewijzigd → skip (niets te pushen), ook als remote intussen veranderde.\n * - lokaal gewijzigd + remote ongewijzigd → push.\n * - beide gewijzigd → conflict (push weigert zonder --force).\n * - geen basis (nieuw bestand) → create; bestaat remote al ook → conflict.\n * - basis wel, remote weg → remote-deleted (conflict-achtig: iemand verwijderde de entiteit).\n */\nexport function decideSync(base: string | undefined, local: string, remote: string | undefined): SyncAction {\n  if (base === undefined) return remote === undefined ? \"create\" : remote === local ? \"skip\" : \"conflict\";\n  if (remote === undefined) return \"remote-deleted\";\n  if (remote === local) return \"skip\"; // al identiek — niets te doen\n  if (local === base) return \"skip\"; // lokaal niets gewijzigd — remote-wijziging laten staan\n  if (remote === base) return \"push\"; // alleen lokaal gewijzigd\n  return \"conflict\"; // beide kanten gewijzigd\n}\n\n/* ---------------- bestandsnamen ---------------- */\n\n/** Pagina-pad → relatief YAML-pad: \"/\" → \"pages/index.yaml\", \"/diensten/web\" → \"pages/diensten/web.yaml\". */\nexport function pagePathToFile(path: string): string {\n  const clean = path.replace(/^\\/+|\\/+$/g, \"\");\n  return clean === \"\" ? \"pages/index.yaml\" : `pages/${clean}.yaml`;\n}\n\n/** Veilige bestandsnaam voor een id (symbolen kunnen elk Firestore-id hebben). */\nexport function idToFilename(id: string): string {\n  return id.replace(/[^a-zA-Z0-9_-]/g, \"_\");\n}\n\n/* ---------------- serialisatie (entiteit ⇄ plain object) ---------------- */\n\n/** Pagina-doc → bestandsobject met vaste, leesbare sleutelvolgorde. */\nexport function serializePage(page: Page & { id: string }): Record<string, unknown> {\n  return {\n    id: page.id,\n    title: page.title,\n    slug: page.slug,\n    path: page.path,\n    parentId: page.parentId ?? null,\n    order: page.order ?? 0,\n    ...(page.seo && Object.keys(page.seo).length > 0 ? { seo: page.seo } : {}),\n    blocks: page.blocks ?? [],\n    ...(page.translations && Object.keys(page.translations).length > 0 ? { translations: page.translations } : {}),\n  };\n}\n\nconst PageFileSchema = PageSchema.extend({ id: z.string().min(1).max(64) });\n\n/** Bestandsobject → gevalideerde pagina. Gooit met een leesbare melding bij ongeldige inhoud. */\nexport function parsePageFile(obj: unknown): Page & { id: string } {\n  const res = PageFileSchema.safeParse(obj);\n  if (!res.success) {\n    const i = res.error.issues[0];\n    throw new Error(`ongeldige pagina: ${i?.path.join(\".\") || \"(root)\"}: ${i?.message}`);\n  }\n  return res.data;\n}\n\nexport function serializeSymbol(symbol: Symbol & { id: string }): Record<string, unknown> {\n  return {\n    id: symbol.id,\n    name: symbol.name,\n    blocks: symbol.blocks ?? [],\n    ...(symbol.translations && Object.keys(symbol.translations).length > 0 ? { translations: symbol.translations } : {}),\n  };\n}\n\nconst SymbolFileSchema = SymbolSchema.extend({ id: z.string().min(1).max(120) });\n\nexport function parseSymbolFile(obj: unknown): Symbol & { id: string } {\n  const res = SymbolFileSchema.safeParse(obj);\n  if (!res.success) {\n    const i = res.error.issues[0];\n    throw new Error(`ongeldig symbool: ${i?.path.join(\".\") || \"(root)\"}: ${i?.message}`);\n  }\n  return res.data;\n}\n\n/** Custom block → drie bestanden: block.yaml (meta + Field-IR), template.html, style.css. */\nexport function serializeCustomBlock(def: CustomBlock): { meta: Record<string, unknown>; template: string; css: string } {\n  return {\n    meta: { type: def.type, label: def.label, icon: def.icon, version: def.version, fields: def.fields },\n    template: def.template,\n    css: def.css,\n  };\n}\n\nexport function parseCustomBlockFiles(meta: unknown, template: string, css: string): CustomBlock {\n  const res = CustomBlockSchema.safeParse({ ...(meta as Record<string, unknown>), template, css });\n  if (!res.success) {\n    const i = res.error.issues[0];\n    throw new Error(`ongeldige bouwsteen: ${i?.path.join(\".\") || \"(root)\"}: ${i?.message}`);\n  }\n  return res.data;\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/builtins/BeforeAfter.js

@@ -32,6 +32,7 @@ function BeforeAfterRender({ block }) {
 }
 const beforeAfterBlock = defineBlock({
   type: "beforeAfter",
+  fields: { beforeUrl: { type: "image" }, afterUrl: { type: "image" } },
   schema: BeforeAfterBlockSchema,
   Render: BeforeAfterRender,
   label: "Voor / na",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/BeforeAfter.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { z } from \"zod\";\nimport { BeforeAfterBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\n\ntype BeforeAfter = z.infer<typeof BeforeAfterBlockSchema>;\n\n/**\n * Voor/na-vergelijker: het \"na\"-beeld wordt geclipt op de sleppositie. De greep is een échte\n * range-input (over de hele breedte, transparant) — slepen, klikken én pijltjestoetsen werken\n * daarmee gratis en toegankelijk (aria-label + waarde in %).\n */\nfunction BeforeAfterRender({ block }: BlockRenderProps<BeforeAfter>) {\n  const [pos, setPos] = useState(50);\n  if (!block.beforeUrl || !block.afterUrl) return null;\n  return (\n    <figure className=\"xicms-beforeafter\" style={{ aspectRatio: block.aspectRatio.replace(\"/\", \" / \") }}>\n      {block.heading && <figcaption className=\"xicms-beforeafter__heading\" data-xicms-edit=\"heading\">{block.heading}</figcaption>}\n      <div className=\"xicms-beforeafter__stage\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img className=\"xicms-beforeafter__img\" src={block.beforeUrl} alt={block.alt || block.beforeLabel} loading=\"lazy\" />\n        <div className=\"xicms-beforeafter__clip\" style={{ clipPath: `inset(0 0 0 ${pos}%)` }} aria-hidden>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img className=\"xicms-beforeafter__img\" src={block.afterUrl} alt=\"\" loading=\"lazy\" />\n        </div>\n        <div className=\"xicms-beforeafter__divider\" style={{ left: `${pos}%` }} aria-hidden>\n          <span className=\"xicms-beforeafter__handle\">⟨⟩</span>\n        </div>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--before\">{block.beforeLabel}</span>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--after\">{block.afterLabel}</span>\n        <input\n          className=\"xicms-beforeafter__range\"\n          type=\"range\"\n          min={0}\n          max={100}\n          value={pos}\n          onChange={(e) => setPos(Number(e.target.value))}\n          aria-label={`Vergelijk ${block.beforeLabel} en ${block.afterLabel}`}\n          aria-valuetext={`${pos}% ${block.afterLabel}`}\n        />\n      </div>\n    </figure>\n  );\n}\n\nexport const beforeAfterBlock = defineBlock({\n  type: \"beforeAfter\",\n  schema: BeforeAfterBlockSchema,\n  Render: BeforeAfterRender,\n  label: \"Voor / na\",\n  icon: \"🔀\",\n  defaults: () => ({ beforeUrl: \"\", afterUrl: \"\", beforeLabel: \"Voor\", afterLabel: \"Na\", aspectRatio: \"4/3\" }),\n});\n"],"mappings":";AAmBwB,cAClB,YADkB;AAjBxB,SAAS,gBAAgB;AAEzB,SAAS,8BAA8B;AACvC,SAAS,mBAA0C;AASnD,SAAS,kBAAkB,EAAE,MAAM,GAAkC;AACnE,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,MAAI,CAAC,MAAM,aAAa,CAAC,MAAM,SAAU,QAAO;AAChD,SACE,qBAAC,YAAO,WAAU,qBAAoB,OAAO,EAAE,aAAa,MAAM,YAAY,QAAQ,KAAK,KAAK,EAAE,GAC/F;AAAA,UAAM,WAAW,oBAAC,gBAAW,WAAU,8BAA6B,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9G,qBAAC,SAAI,WAAU,4BAEb;AAAA,0BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,WAAW,KAAK,MAAM,OAAO,MAAM,aAAa,SAAQ,QAAO;AAAA,MAClH,oBAAC,SAAI,WAAU,2BAA0B,OAAO,EAAE,UAAU,eAAe,GAAG,KAAK,GAAG,eAAW,MAE/F,8BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,UAAU,KAAI,IAAG,SAAQ,QAAO,GACrF;AAAA,MACA,oBAAC,SAAI,WAAU,8BAA6B,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,GAAG,eAAW,MACjF,8BAAC,UAAK,WAAU,6BAA4B,0BAAE,GAChD;AAAA,MACA,oBAAC,UAAK,WAAU,6DAA6D,gBAAM,aAAY;AAAA,MAC/F,oBAAC,UAAK,WAAU,4DAA4D,gBAAM,YAAW;AAAA,MAC7F;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,OAAO,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UAC9C,cAAY,aAAa,MAAM,WAAW,OAAO,MAAM,UAAU;AAAA,UACjE,kBAAgB,GAAG,GAAG,KAAK,MAAM,UAAU;AAAA;AAAA,MAC7C;AAAA,OACF;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,EAAE,WAAW,IAAI,UAAU,IAAI,aAAa,QAAQ,YAAY,MAAM,aAAa,MAAM;AAC5G,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/BeforeAfter.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport type { z } from \"zod\";\nimport { BeforeAfterBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\n\ntype BeforeAfter = z.infer<typeof BeforeAfterBlockSchema>;\n\n/**\n * Voor/na-vergelijker: het \"na\"-beeld wordt geclipt op de sleppositie. De greep is een échte\n * range-input (over de hele breedte, transparant) — slepen, klikken én pijltjestoetsen werken\n * daarmee gratis en toegankelijk (aria-label + waarde in %).\n */\nfunction BeforeAfterRender({ block }: BlockRenderProps<BeforeAfter>) {\n  const [pos, setPos] = useState(50);\n  if (!block.beforeUrl || !block.afterUrl) return null;\n  return (\n    <figure className=\"xicms-beforeafter\" style={{ aspectRatio: block.aspectRatio.replace(\"/\", \" / \") }}>\n      {block.heading && <figcaption className=\"xicms-beforeafter__heading\" data-xicms-edit=\"heading\">{block.heading}</figcaption>}\n      <div className=\"xicms-beforeafter__stage\">\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img className=\"xicms-beforeafter__img\" src={block.beforeUrl} alt={block.alt || block.beforeLabel} loading=\"lazy\" />\n        <div className=\"xicms-beforeafter__clip\" style={{ clipPath: `inset(0 0 0 ${pos}%)` }} aria-hidden>\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img className=\"xicms-beforeafter__img\" src={block.afterUrl} alt=\"\" loading=\"lazy\" />\n        </div>\n        <div className=\"xicms-beforeafter__divider\" style={{ left: `${pos}%` }} aria-hidden>\n          <span className=\"xicms-beforeafter__handle\">⟨⟩</span>\n        </div>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--before\">{block.beforeLabel}</span>\n        <span className=\"xicms-beforeafter__badge xicms-beforeafter__badge--after\">{block.afterLabel}</span>\n        <input\n          className=\"xicms-beforeafter__range\"\n          type=\"range\"\n          min={0}\n          max={100}\n          value={pos}\n          onChange={(e) => setPos(Number(e.target.value))}\n          aria-label={`Vergelijk ${block.beforeLabel} en ${block.afterLabel}`}\n          aria-valuetext={`${pos}% ${block.afterLabel}`}\n        />\n      </div>\n    </figure>\n  );\n}\n\nexport const beforeAfterBlock = defineBlock({\n  type: \"beforeAfter\",\n  fields: { beforeUrl: { type: \"image\" }, afterUrl: { type: \"image\" } },\n  schema: BeforeAfterBlockSchema,\n  Render: BeforeAfterRender,\n  label: \"Voor / na\",\n  icon: \"🔀\",\n  defaults: () => ({ beforeUrl: \"\", afterUrl: \"\", beforeLabel: \"Voor\", afterLabel: \"Na\", aspectRatio: \"4/3\" }),\n});\n"],"mappings":";AAmBwB,cAClB,YADkB;AAjBxB,SAAS,gBAAgB;AAEzB,SAAS,8BAA8B;AACvC,SAAS,mBAA0C;AASnD,SAAS,kBAAkB,EAAE,MAAM,GAAkC;AACnE,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,MAAI,CAAC,MAAM,aAAa,CAAC,MAAM,SAAU,QAAO;AAChD,SACE,qBAAC,YAAO,WAAU,qBAAoB,OAAO,EAAE,aAAa,MAAM,YAAY,QAAQ,KAAK,KAAK,EAAE,GAC/F;AAAA,UAAM,WAAW,oBAAC,gBAAW,WAAU,8BAA6B,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,IAC9G,qBAAC,SAAI,WAAU,4BAEb;AAAA,0BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,WAAW,KAAK,MAAM,OAAO,MAAM,aAAa,SAAQ,QAAO;AAAA,MAClH,oBAAC,SAAI,WAAU,2BAA0B,OAAO,EAAE,UAAU,eAAe,GAAG,KAAK,GAAG,eAAW,MAE/F,8BAAC,SAAI,WAAU,0BAAyB,KAAK,MAAM,UAAU,KAAI,IAAG,SAAQ,QAAO,GACrF;AAAA,MACA,oBAAC,SAAI,WAAU,8BAA6B,OAAO,EAAE,MAAM,GAAG,GAAG,IAAI,GAAG,eAAW,MACjF,8BAAC,UAAK,WAAU,6BAA4B,0BAAE,GAChD;AAAA,MACA,oBAAC,UAAK,WAAU,6DAA6D,gBAAM,aAAY;AAAA,MAC/F,oBAAC,UAAK,WAAU,4DAA4D,gBAAM,YAAW;AAAA,MAC7F;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,OAAO,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,UAC9C,cAAY,aAAa,MAAM,WAAW,OAAO,MAAM,UAAU;AAAA,UACjE,kBAAgB,GAAG,GAAG,KAAK,MAAM,UAAU;AAAA;AAAA,MAC7C;AAAA,OACF;AAAA,KACF;AAEJ;AAEO,MAAM,mBAAmB,YAAY;AAAA,EAC1C,MAAM;AAAA,EACN,QAAQ,EAAE,WAAW,EAAE,MAAM,QAAQ,GAAG,UAAU,EAAE,MAAM,QAAQ,EAAE;AAAA,EACpE,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,WAAW,IAAI,UAAU,IAAI,aAAa,QAAQ,YAAY,MAAM,aAAa,MAAM;AAC5G,CAAC;","names":[]}

package/dist/blocks/builtins/Cards.js

@@ -75,6 +75,7 @@ function CardsRender({ block }) {
 }
 const cardsBlock = defineBlock({
   type: "cards",
+  fields: { "items.icon": { type: "icon" } },
   schema: CardsBlockSchema,
   Render: CardsRender,
   label: "Diensten / kaarten",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CardsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Cards = z.infer<typeof CardsBlockSchema>;\n\n/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */\nfunction CardsRender({ block }: BlockRenderProps<Cards>) {\n  const LinkC = useLinkComponent();\n  // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n  // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n  const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);\n  if (items.length === 0 && !block.heading) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-cards\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text type=\"large\" color=\"secondary\">{block.intro}</Text>}\n        </VStack>\n      )}\n      <Grid columns={{ minWidth: 240, max: block.columns }} gap={4}>\n        {items.map((c) => {\n          const i = c._i;\n          const cover = block.imageStyle === \"cover\" && Boolean(c.imageUrl);\n          const body = (\n            <VStack gap={2} style={cover ? { padding: \"1.1rem 1.25rem 1.25rem\" } : undefined}>\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}>{c.linkLabel} →</Text>\n              )}\n            </VStack>\n          );\n          const inner = cover ? (\n            <VStack gap={0} style={{ height: \"100%\" }}>\n              {/* Beeld edge-to-edge bovenaan (postkaart-stijl); tekst hieronder gepad. */}\n              <Img src={c.imageUrl as string} alt={c.title ?? \"\"} width={600} height={360}\n                sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                style={{ width: \"100%\", aspectRatio: \"16 / 10\", objectFit: \"cover\", display: \"block\" }} />\n              {body}\n            </VStack>\n          ) : (\n            <VStack gap={2}>\n              {c.imageUrl ? (\n                <Img src={c.imageUrl} alt={c.title ?? \"\"} width={480} height={300}\n                  sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                  style={{ width: \"100%\", height: 160, objectFit: \"cover\", borderRadius: \"var(--radius-element)\" }} />\n              ) : c.icon ? (\n                <div aria-hidden=\"true\" style={{ fontSize: \"2rem\", lineHeight: 1 }}>{c.icon}</div>\n              ) : null}\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}>{c.linkLabel} →</Text>\n              )}\n            </VStack>\n          );\n          const card = (\n            <Card\n              padding={cover ? 0 : 4}\n              height=\"100%\"\n              className={`xicms-cards__card${c.featured ? \" xicms-cards__card--featured\" : \"\"}`}\n              style={cover ? { overflow: \"hidden\" } : undefined}\n            >\n              {inner}\n            </Card>\n          );\n          return c.href ? (\n            <LinkC key={i} href={c.href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n              {card}\n            </LinkC>\n          ) : (\n            <div key={i}>{card}</div>\n          );\n        })}\n      </Grid>\n    </VStack>\n  );\n}\n\nexport const cardsBlock = defineBlock({\n  type: \"cards\",\n  schema: CardsBlockSchema,\n  Render: CardsRender,\n  label: \"Diensten / kaarten\",\n  icon: \"🧩\",\n  defaults: () => ({\n    heading: \"Onze diensten\",\n    columns: 3,\n    items: [\n      { icon: \"⭐\", title: \"Dienst één\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"⚡\", title: \"Dienst twee\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"💬\", title: \"Dienst drie\", text: \"Korte omschrijving van wat je biedt.\" },\n    ],\n  }),\n});\n"],"mappings":";AAqBQ,SACoB,KADpB;AAlBR,SAAS,wBAAwB;AACjC,SAAS,mBAA0C;AACnD,SAAS,QAAQ,MAAM,MAAM,SAAS,YAAY;AAClD,SAAS,wBAAwB;AACjC,SAAS,WAAW;AAKpB,SAAS,YAAY,EAAE,MAAM,GAA4B;AACvD,QAAM,QAAQ,iBAAiB;AAG/B,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ;AAChH,MAAI,MAAM,WAAW,KAAK,CAAC,MAAM,QAAS,QAAO;AACjD,SACE,qBAAC,UAAO,KAAK,GAAG,IAAG,WAAU,WAAU,eACnC;AAAA,WAAM,WAAW,MAAM,UACvB,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,YAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,MAC7E,MAAM,SAAS,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAa,gBAAM,OAAM;AAAA,OACpE;AAAA,IAEF,oBAAC,QAAK,SAAS,EAAE,UAAU,KAAK,KAAK,MAAM,QAAQ,GAAG,KAAK,GACxD,gBAAM,IAAI,CAAC,MAAM;AAChB,YAAM,IAAI,EAAE;AACZ,YAAM,QAAQ,MAAM,eAAe,WAAW,QAAQ,EAAE,QAAQ;AAChE,YAAM,OACJ,qBAAC,UAAO,KAAK,GAAG,OAAO,QAAQ,EAAE,SAAS,yBAAyB,IAAI,QACpE;AAAA,UAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,GAAI;AAAA,YAAE;AAAA,UAAU;AAAA,WAAE;AAAA,SAE/E;AAEF,YAAM,QAAQ,QACZ,qBAAC,UAAO,KAAK,GAAG,OAAO,EAAE,QAAQ,OAAO,GAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK,EAAE;AAAA,YAAoB,KAAK,EAAE,SAAS;AAAA,YAAI,OAAO;AAAA,YAAK,QAAQ;AAAA,YACtE,OAAM;AAAA,YAAiC,WAAW,SAAS,CAAC;AAAA,YAC5D,OAAO,EAAE,OAAO,QAAQ,aAAa,WAAW,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,QAAG;AAAA,QACzF;AAAA,SACH,IAEA,qBAAC,UAAO,KAAK,GACV;AAAA,UAAE,WACD;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK,EAAE;AAAA,YAAU,KAAK,EAAE,SAAS;AAAA,YAAI,OAAO;AAAA,YAAK,QAAQ;AAAA,YAC5D,OAAM;AAAA,YAAiC,WAAW,SAAS,CAAC;AAAA,YAC5D,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,WAAW,SAAS,cAAc,wBAAwB;AAAA;AAAA,QAAG,IAClG,EAAE,OACJ,oBAAC,SAAI,eAAY,QAAO,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAAI,YAAE,MAAK,IAC1E;AAAA,QACH,EAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,GAAI;AAAA,YAAE;AAAA,UAAU;AAAA,WAAE;AAAA,SAE/E;AAEF,YAAM,OACJ;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,QAAQ,IAAI;AAAA,UACrB,QAAO;AAAA,UACP,WAAW,oBAAoB,EAAE,WAAW,iCAAiC,EAAE;AAAA,UAC/E,OAAO,QAAQ,EAAE,UAAU,SAAS,IAAI;AAAA,UAEvC;AAAA;AAAA,MACH;AAEF,aAAO,EAAE,OACP,oBAAC,SAAc,MAAM,EAAE,MAAM,OAAO,EAAE,gBAAgB,QAAQ,OAAO,WAAW,SAAS,QAAQ,GAC9F,kBADS,CAEZ,IAEA,oBAAC,SAAa,kBAAJ,CAAS;AAAA,IAEvB,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,MAAM,UAAK,OAAO,oBAAc,MAAM,uCAAuC;AAAA,MAC/E,EAAE,MAAM,UAAK,OAAO,eAAe,MAAM,uCAAuC;AAAA,MAChF,EAAE,MAAM,aAAM,OAAO,eAAe,MAAM,uCAAuC;AAAA,IACnF;AAAA,EACF;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CardsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, Grid, Card, Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Cards = z.infer<typeof CardsBlockSchema>;\n\n/** Diensten/uitgelichte kaarten in een responsive grid (Astryx). */\nfunction CardsRender({ block }: BlockRenderProps<Cards>) {\n  const LinkC = useLinkComponent();\n  // _i = index in de OORSPRONKELIJKE array — inline-edit-paden moeten naar de ongefilterde\n  // items wijzen, anders schrijft bewerken naar het verkeerde (weggefilterde) item.\n  const items = (block.items ?? []).map((c, i) => ({ ...c, _i: i })).filter((c) => c.title || c.text || c.imageUrl);\n  if (items.length === 0 && !block.heading) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-cards\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text type=\"large\" color=\"secondary\">{block.intro}</Text>}\n        </VStack>\n      )}\n      <Grid columns={{ minWidth: 240, max: block.columns }} gap={4}>\n        {items.map((c) => {\n          const i = c._i;\n          const cover = block.imageStyle === \"cover\" && Boolean(c.imageUrl);\n          const body = (\n            <VStack gap={2} style={cover ? { padding: \"1.1rem 1.25rem 1.25rem\" } : undefined}>\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}>{c.linkLabel} →</Text>\n              )}\n            </VStack>\n          );\n          const inner = cover ? (\n            <VStack gap={0} style={{ height: \"100%\" }}>\n              {/* Beeld edge-to-edge bovenaan (postkaart-stijl); tekst hieronder gepad. */}\n              <Img src={c.imageUrl as string} alt={c.title ?? \"\"} width={600} height={360}\n                sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                style={{ width: \"100%\", aspectRatio: \"16 / 10\", objectFit: \"cover\", display: \"block\" }} />\n              {body}\n            </VStack>\n          ) : (\n            <VStack gap={2}>\n              {c.imageUrl ? (\n                <Img src={c.imageUrl} alt={c.title ?? \"\"} width={480} height={300}\n                  sizes=\"(max-width: 720px) 100vw, 33vw\" editField={`items.${i}.imageUrl`}\n                  style={{ width: \"100%\", height: 160, objectFit: \"cover\", borderRadius: \"var(--radius-element)\" }} />\n              ) : c.icon ? (\n                <div aria-hidden=\"true\" style={{ fontSize: \"2rem\", lineHeight: 1 }}>{c.icon}</div>\n              ) : null}\n              {c.title && <Heading level={3} className=\"xicms-cards__title\" data-xicms-edit={`items.${i}.title`}>{c.title}</Heading>}\n              {c.text && <Text color=\"secondary\" className=\"xicms-cards__text\" data-xicms-edit={`items.${i}.text`}>{c.text}</Text>}\n              {c.href && c.linkLabel && (\n                <Text type=\"label\" style={{ color: \"var(--color-accent)\" }}>{c.linkLabel} →</Text>\n              )}\n            </VStack>\n          );\n          const card = (\n            <Card\n              padding={cover ? 0 : 4}\n              height=\"100%\"\n              className={`xicms-cards__card${c.featured ? \" xicms-cards__card--featured\" : \"\"}`}\n              style={cover ? { overflow: \"hidden\" } : undefined}\n            >\n              {inner}\n            </Card>\n          );\n          return c.href ? (\n            <LinkC key={i} href={c.href} style={{ textDecoration: \"none\", color: \"inherit\", display: \"block\" }}>\n              {card}\n            </LinkC>\n          ) : (\n            <div key={i}>{card}</div>\n          );\n        })}\n      </Grid>\n    </VStack>\n  );\n}\n\nexport const cardsBlock = defineBlock({\n  type: \"cards\",\n  fields: { \"items.icon\": { type: \"icon\" } },\n  schema: CardsBlockSchema,\n  Render: CardsRender,\n  label: \"Diensten / kaarten\",\n  icon: \"🧩\",\n  defaults: () => ({\n    heading: \"Onze diensten\",\n    columns: 3,\n    items: [\n      { icon: \"⭐\", title: \"Dienst één\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"⚡\", title: \"Dienst twee\", text: \"Korte omschrijving van wat je biedt.\" },\n      { icon: \"💬\", title: \"Dienst drie\", text: \"Korte omschrijving van wat je biedt.\" },\n    ],\n  }),\n});\n"],"mappings":";AAqBQ,SACoB,KADpB;AAlBR,SAAS,wBAAwB;AACjC,SAAS,mBAA0C;AACnD,SAAS,QAAQ,MAAM,MAAM,SAAS,YAAY;AAClD,SAAS,wBAAwB;AACjC,SAAS,WAAW;AAKpB,SAAS,YAAY,EAAE,MAAM,GAA4B;AACvD,QAAM,QAAQ,iBAAiB;AAG/B,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,OAAO,EAAE,GAAG,GAAG,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ;AAChH,MAAI,MAAM,WAAW,KAAK,CAAC,MAAM,QAAS,QAAO;AACjD,SACE,qBAAC,UAAO,KAAK,GAAG,IAAG,WAAU,WAAU,eACnC;AAAA,WAAM,WAAW,MAAM,UACvB,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,YAAM,WAAW,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,WAAW,gBAAM,SAAQ;AAAA,MAC7E,MAAM,SAAS,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAa,gBAAM,OAAM;AAAA,OACpE;AAAA,IAEF,oBAAC,QAAK,SAAS,EAAE,UAAU,KAAK,KAAK,MAAM,QAAQ,GAAG,KAAK,GACxD,gBAAM,IAAI,CAAC,MAAM;AAChB,YAAM,IAAI,EAAE;AACZ,YAAM,QAAQ,MAAM,eAAe,WAAW,QAAQ,EAAE,QAAQ;AAChE,YAAM,OACJ,qBAAC,UAAO,KAAK,GAAG,OAAO,QAAQ,EAAE,SAAS,yBAAyB,IAAI,QACpE;AAAA,UAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,GAAI;AAAA,YAAE;AAAA,UAAU;AAAA,WAAE;AAAA,SAE/E;AAEF,YAAM,QAAQ,QACZ,qBAAC,UAAO,KAAK,GAAG,OAAO,EAAE,QAAQ,OAAO,GAEtC;AAAA;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK,EAAE;AAAA,YAAoB,KAAK,EAAE,SAAS;AAAA,YAAI,OAAO;AAAA,YAAK,QAAQ;AAAA,YACtE,OAAM;AAAA,YAAiC,WAAW,SAAS,CAAC;AAAA,YAC5D,OAAO,EAAE,OAAO,QAAQ,aAAa,WAAW,WAAW,SAAS,SAAS,QAAQ;AAAA;AAAA,QAAG;AAAA,QACzF;AAAA,SACH,IAEA,qBAAC,UAAO,KAAK,GACV;AAAA,UAAE,WACD;AAAA,UAAC;AAAA;AAAA,YAAI,KAAK,EAAE;AAAA,YAAU,KAAK,EAAE,SAAS;AAAA,YAAI,OAAO;AAAA,YAAK,QAAQ;AAAA,YAC5D,OAAM;AAAA,YAAiC,WAAW,SAAS,CAAC;AAAA,YAC5D,OAAO,EAAE,OAAO,QAAQ,QAAQ,KAAK,WAAW,SAAS,cAAc,wBAAwB;AAAA;AAAA,QAAG,IAClG,EAAE,OACJ,oBAAC,SAAI,eAAY,QAAO,OAAO,EAAE,UAAU,QAAQ,YAAY,EAAE,GAAI,YAAE,MAAK,IAC1E;AAAA,QACH,EAAE,SAAS,oBAAC,WAAQ,OAAO,GAAG,WAAU,sBAAqB,mBAAiB,SAAS,CAAC,UAAW,YAAE,OAAM;AAAA,QAC3G,EAAE,QAAQ,oBAAC,QAAK,OAAM,aAAY,WAAU,qBAAoB,mBAAiB,SAAS,CAAC,SAAU,YAAE,MAAK;AAAA,QAC5G,EAAE,QAAQ,EAAE,aACX,qBAAC,QAAK,MAAK,SAAQ,OAAO,EAAE,OAAO,sBAAsB,GAAI;AAAA,YAAE;AAAA,UAAU;AAAA,WAAE;AAAA,SAE/E;AAEF,YAAM,OACJ;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,QAAQ,IAAI;AAAA,UACrB,QAAO;AAAA,UACP,WAAW,oBAAoB,EAAE,WAAW,iCAAiC,EAAE;AAAA,UAC/E,OAAO,QAAQ,EAAE,UAAU,SAAS,IAAI;AAAA,UAEvC;AAAA;AAAA,MACH;AAEF,aAAO,EAAE,OACP,oBAAC,SAAc,MAAM,EAAE,MAAM,OAAO,EAAE,gBAAgB,QAAQ,OAAO,WAAW,SAAS,QAAQ,GAC9F,kBADS,CAEZ,IAEA,oBAAC,SAAa,kBAAJ,CAAS;AAAA,IAEvB,CAAC,GACH;AAAA,KACF;AAEJ;AAEO,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,EAAE;AAAA,EACzC,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO;AAAA,IACf,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,MACL,EAAE,MAAM,UAAK,OAAO,oBAAc,MAAM,uCAAuC;AAAA,MAC/E,EAAE,MAAM,UAAK,OAAO,eAAe,MAAM,uCAAuC;AAAA,MAChF,EAAE,MAAM,aAAM,OAAO,eAAe,MAAM,uCAAuC;AAAA,IACnF;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/blocks/builtins/Cta.js

@@ -40,6 +40,7 @@ function CtaRender({ block }) {
 }
 const ctaBlock = defineBlock({
   type: "cta",
+  fields: { buttonVariant: { type: "select", options: [{ value: "primary", label: "Primair" }, { value: "secondary", label: "Secundair" }, { value: "outline", label: "Outline" }] } },
   schema: CtaBlockSchema,
   Render: CtaRender,
   label: "Call-to-action",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Cta.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CtaBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Cta = z.infer<typeof CtaBlockSchema>;\n\nfunction CtaRender({ block }: BlockRenderProps<Cta>) {\n  if (block.sticky) {\n    return (\n      <HStack\n        gap={3}\n        vAlign=\"center\"\n        hAlign=\"between\"\n        role=\"region\"\n        aria-label={block.title || \"Call-to-action\"}\n        style={{ position: \"sticky\", bottom: 0, zIndex: 30, padding: \"0.75rem 1rem\", background: \"var(--color-background-card)\", borderTop: \"1px solid var(--color-border)\", flexWrap: \"wrap\" }}\n      >\n        <Text weight=\"bold\">{block.title || block.text}</Text>\n        <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} size=\"md\" />\n      </HStack>\n    );\n  }\n  return (\n    <Card\n      padding={6}\n      variant={block.backgroundColor ? \"default\" : \"muted\"}\n      style={block.backgroundColor ? { background: block.backgroundColor } : undefined}\n    >\n      <VStack gap={3} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n        {block.title && <Heading level={2} data-xicms-edit=\"title\">{block.title}</Heading>}\n        {block.text && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"text\">{block.text}</Text>}\n        <HStack gap={2} hAlign=\"center\" style={{ flexWrap: \"wrap\" }}>\n          <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} />\n          {block.button2Label && (\n            <Btn label={block.button2Label} href={block.button2Href ?? \"#\"} variant=\"outline\" />\n          )}\n        </HStack>\n      </VStack>\n    </Card>\n  );\n}\n\nexport const ctaBlock = defineBlock({\n  type: \"cta\",\n  schema: CtaBlockSchema,\n  Render: CtaRender,\n  label: \"Call-to-action\",\n  icon: \"📣\",\n  defaults: () => ({ title: \"Klaar om te starten?\", buttonLabel: \"Neem contact op\", buttonHref: \"#contact\", buttonVariant: \"primary\" }),\n});\n"],"mappings":";AAYM,SAQE,KARF;AATN,SAAS,sBAAsB;AAC/B,SAAS,mBAA0C;AACnD,SAAS,QAAQ,QAAQ,MAAM,SAAS,MAAM,WAAW;AAIzD,SAAS,UAAU,EAAE,MAAM,GAA0B;AACnD,MAAI,MAAM,QAAQ;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,QAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAY,MAAM,SAAS;AAAA,QAC3B,OAAO,EAAE,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,SAAS,gBAAgB,YAAY,gCAAgC,WAAW,iCAAiC,UAAU,OAAO;AAAA,QAEtL;AAAA,8BAAC,QAAK,QAAO,QAAQ,gBAAM,SAAS,MAAM,MAAK;AAAA,UAC/C,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,MAAK,MAAK;AAAA;AAAA;AAAA,IACjG;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,SAAS,MAAM,kBAAkB,YAAY;AAAA,MAC7C,OAAO,MAAM,kBAAkB,EAAE,YAAY,MAAM,gBAAgB,IAAI;AAAA,MAEvE,+BAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,cAAM,SAAS,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,SAAS,gBAAM,OAAM;AAAA,QACvE,MAAM,QAAQ,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,QACvF,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,UAAU,OAAO,GACxD;AAAA,8BAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe;AAAA,UACpF,MAAM,gBACL,oBAAC,OAAI,OAAO,MAAM,cAAc,MAAM,MAAM,eAAe,KAAK,SAAQ,WAAU;AAAA,WAEtF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,WAAW,YAAY;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,wBAAwB,aAAa,mBAAmB,YAAY,YAAY,eAAe,UAAU;AACrI,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Cta.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { CtaBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { VStack, HStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Cta = z.infer<typeof CtaBlockSchema>;\n\nfunction CtaRender({ block }: BlockRenderProps<Cta>) {\n  if (block.sticky) {\n    return (\n      <HStack\n        gap={3}\n        vAlign=\"center\"\n        hAlign=\"between\"\n        role=\"region\"\n        aria-label={block.title || \"Call-to-action\"}\n        style={{ position: \"sticky\", bottom: 0, zIndex: 30, padding: \"0.75rem 1rem\", background: \"var(--color-background-card)\", borderTop: \"1px solid var(--color-border)\", flexWrap: \"wrap\" }}\n      >\n        <Text weight=\"bold\">{block.title || block.text}</Text>\n        <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} size=\"md\" />\n      </HStack>\n    );\n  }\n  return (\n    <Card\n      padding={6}\n      variant={block.backgroundColor ? \"default\" : \"muted\"}\n      style={block.backgroundColor ? { background: block.backgroundColor } : undefined}\n    >\n      <VStack gap={3} hAlign=\"center\" style={{ textAlign: \"center\" }}>\n        {block.title && <Heading level={2} data-xicms-edit=\"title\">{block.title}</Heading>}\n        {block.text && <Text type=\"large\" color=\"secondary\" data-xicms-edit=\"text\">{block.text}</Text>}\n        <HStack gap={2} hAlign=\"center\" style={{ flexWrap: \"wrap\" }}>\n          <Btn label={block.buttonLabel} href={block.buttonHref} variant={block.buttonVariant} />\n          {block.button2Label && (\n            <Btn label={block.button2Label} href={block.button2Href ?? \"#\"} variant=\"outline\" />\n          )}\n        </HStack>\n      </VStack>\n    </Card>\n  );\n}\n\nexport const ctaBlock = defineBlock({\n  type: \"cta\",\n  fields: { buttonVariant: { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n  schema: CtaBlockSchema,\n  Render: CtaRender,\n  label: \"Call-to-action\",\n  icon: \"📣\",\n  defaults: () => ({ title: \"Klaar om te starten?\", buttonLabel: \"Neem contact op\", buttonHref: \"#contact\", buttonVariant: \"primary\" }),\n});\n"],"mappings":";AAYM,SAQE,KARF;AATN,SAAS,sBAAsB;AAC/B,SAAS,mBAA0C;AACnD,SAAS,QAAQ,QAAQ,MAAM,SAAS,MAAM,WAAW;AAIzD,SAAS,UAAU,EAAE,MAAM,GAA0B;AACnD,MAAI,MAAM,QAAQ;AAChB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,QAAO;AAAA,QACP,QAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAY,MAAM,SAAS;AAAA,QAC3B,OAAO,EAAE,UAAU,UAAU,QAAQ,GAAG,QAAQ,IAAI,SAAS,gBAAgB,YAAY,gCAAgC,WAAW,iCAAiC,UAAU,OAAO;AAAA,QAEtL;AAAA,8BAAC,QAAK,QAAO,QAAQ,gBAAM,SAAS,MAAM,MAAK;AAAA,UAC/C,oBAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe,MAAK,MAAK;AAAA;AAAA;AAAA,IACjG;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,SAAS,MAAM,kBAAkB,YAAY;AAAA,MAC7C,OAAO,MAAM,kBAAkB,EAAE,YAAY,MAAM,gBAAgB,IAAI;AAAA,MAEvE,+BAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,WAAW,SAAS,GAC1D;AAAA,cAAM,SAAS,oBAAC,WAAQ,OAAO,GAAG,mBAAgB,SAAS,gBAAM,OAAM;AAAA,QACvE,MAAM,QAAQ,oBAAC,QAAK,MAAK,SAAQ,OAAM,aAAY,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,QACvF,qBAAC,UAAO,KAAK,GAAG,QAAO,UAAS,OAAO,EAAE,UAAU,OAAO,GACxD;AAAA,8BAAC,OAAI,OAAO,MAAM,aAAa,MAAM,MAAM,YAAY,SAAS,MAAM,eAAe;AAAA,UACpF,MAAM,gBACL,oBAAC,OAAI,OAAO,MAAM,cAAc,MAAM,MAAM,eAAe,KAAK,SAAQ,WAAU;AAAA,WAEtF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,WAAW,YAAY;AAAA,EAClC,MAAM;AAAA,EACN,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,WAAW,OAAO,UAAU,GAAG,EAAE,OAAO,aAAa,OAAO,YAAY,GAAG,EAAE,OAAO,WAAW,OAAO,UAAU,CAAC,EAAE,EAAE;AAAA,EACnL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,wBAAwB,aAAa,mBAAmB,YAAY,YAAY,eAAe,UAAU;AACrI,CAAC;","names":[]}

package/dist/blocks/builtins/Elements.js

@@ -11,6 +11,7 @@ function ButtonsRender({ block }) {
 }
 const buttonsBlock = defineBlock({
   type: "buttons",
+  fields: { "items.variant": { type: "select", options: [{ value: "primary", label: "Primair" }, { value: "secondary", label: "Secundair" }, { value: "outline", label: "Outline" }] } },
   schema: ButtonsBlockSchema,
   Render: ButtonsRender,
   label: "Knoppen",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Elements.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { ButtonsBlockSchema, QuoteBlockSchema, DividerBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { HStack, VStack, Card, Text, Btn, Divider } from \"../ui\";\n\n/* ── Buttons (knopgroep) ─────────────────────────────────────────────────── */\ntype Buttons = z.infer<typeof ButtonsBlockSchema>;\nfunction ButtonsRender({ block }: BlockRenderProps<Buttons>) {\n  const items = (block.items ?? []).filter((b) => b.label);\n  if (items.length === 0) return null;\n  const hAlign = block.align === \"center\" ? \"center\" : block.align === \"right\" ? \"end\" : \"start\";\n  return (\n    <HStack gap={2} hAlign={hAlign} style={{ flexWrap: \"wrap\" }}>\n      {items.map((b, i) => (\n        <Btn key={i} label={b.label} href={b.href} variant={b.variant} />\n      ))}\n    </HStack>\n  );\n}\nexport const buttonsBlock = defineBlock({\n  type: \"buttons\",\n  schema: ButtonsBlockSchema,\n  Render: ButtonsRender,\n  label: \"Knoppen\",\n  icon: \"🔘\",\n  defaults: () => ({ align: \"left\", items: [{ label: \"Knop\", href: \"#\", variant: \"primary\" }] }),\n});\n\n/* ── Quote (uitspraak) ───────────────────────────────────────────────────── */\ntype Quote = z.infer<typeof QuoteBlockSchema>;\nfunction QuoteRender({ block }: BlockRenderProps<Quote>) {\n  if (!block.text) return null;\n  return (\n    <Card padding={5} variant=\"muted\">\n      <VStack gap={2} as=\"figure\" style={{ margin: 0 }}>\n        <Text type=\"large\" as=\"p\" style={{ fontStyle: \"italic\" }}>“<span data-xicms-edit=\"text\">{block.text}</span>”</Text>\n        {(block.author || block.role) && (\n          <Text as=\"label\" color=\"secondary\">\n            — {block.author}\n            {block.role ? ` · ${block.role}` : \"\"}\n          </Text>\n        )}\n      </VStack>\n    </Card>\n  );\n}\nexport const quoteBlock = defineBlock({\n  type: \"quote\",\n  schema: QuoteBlockSchema,\n  Render: QuoteRender,\n  label: \"Uitspraak\",\n  icon: \"❝\",\n  defaults: () => ({ text: \"Een krachtige uitspraak.\", author: \"\" }),\n});\n\n/* ── Divider (scheiding) ─────────────────────────────────────────────────── */\ntype DividerBlk = z.infer<typeof DividerBlockSchema>;\nfunction DividerRender({ block }: BlockRenderProps<DividerBlk>) {\n  const pad = block.spacing === \"sm\" ? \"0.75rem\" : block.spacing === \"lg\" ? \"3rem\" : \"1.5rem\";\n  if (block.variant === \"space\") return <div style={{ height: pad }} aria-hidden=\"true\" />;\n  if (block.variant === \"dots\") {\n    return (\n      <div style={{ textAlign: \"center\", padding: `${pad} 0`, color: \"var(--color-text-secondary)\", letterSpacing: \"0.5em\" }} aria-hidden=\"true\">\n        • • •\n      </div>\n    );\n  }\n  return <div style={{ padding: `${pad} 0` }}><Divider variant=\"subtle\" /></div>;\n}\nexport const dividerBlock = defineBlock({\n  type: \"divider\",\n  schema: DividerBlockSchema,\n  Render: DividerRender,\n  label: \"Scheiding\",\n  icon: \"➖\",\n  defaults: () => ({ variant: \"line\", spacing: \"md\" }),\n});\n"],"mappings":";AAgBQ,cAqBA,YArBA;AAbR,SAAS,oBAAoB,kBAAkB,0BAA0B;AACzE,SAAS,mBAA0C;AACnD,SAAS,QAAQ,QAAQ,MAAM,MAAM,KAAK,eAAe;AAIzD,SAAS,cAAc,EAAE,MAAM,GAA8B;AAC3D,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK;AACvD,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,QAAM,SAAS,MAAM,UAAU,WAAW,WAAW,MAAM,UAAU,UAAU,QAAQ;AACvF,SACE,oBAAC,UAAO,KAAK,GAAG,QAAgB,OAAO,EAAE,UAAU,OAAO,GACvD,gBAAM,IAAI,CAAC,GAAG,MACb,oBAAC,OAAY,OAAO,EAAE,OAAO,MAAM,EAAE,MAAM,SAAS,EAAE,WAA5C,CAAqD,CAChE,GACH;AAEJ;AACO,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,QAAQ,OAAO,CAAC,EAAE,OAAO,QAAQ,MAAM,KAAK,SAAS,UAAU,CAAC,EAAE;AAC9F,CAAC;AAID,SAAS,YAAY,EAAE,MAAM,GAA4B;AACvD,MAAI,CAAC,MAAM,KAAM,QAAO;AACxB,SACE,oBAAC,QAAK,SAAS,GAAG,SAAQ,SACxB,+BAAC,UAAO,KAAK,GAAG,IAAG,UAAS,OAAO,EAAE,QAAQ,EAAE,GAC7C;AAAA,yBAAC,QAAK,MAAK,SAAQ,IAAG,KAAI,OAAO,EAAE,WAAW,SAAS,GAAG;AAAA;AAAA,MAAC,oBAAC,UAAK,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,MAAO;AAAA,OAAC;AAAA,KAC1G,MAAM,UAAU,MAAM,SACtB,qBAAC,QAAK,IAAG,SAAQ,OAAM,aAAY;AAAA;AAAA,MAC9B,MAAM;AAAA,MACR,MAAM,OAAO,SAAM,MAAM,IAAI,KAAK;AAAA,OACrC;AAAA,KAEJ,GACF;AAEJ;AACO,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,MAAM,4BAA4B,QAAQ,GAAG;AAClE,CAAC;AAID,SAAS,cAAc,EAAE,MAAM,GAAiC;AAC9D,QAAM,MAAM,MAAM,YAAY,OAAO,YAAY,MAAM,YAAY,OAAO,SAAS;AACnF,MAAI,MAAM,YAAY,QAAS,QAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,IAAI,GAAG,eAAY,QAAO;AACtF,MAAI,MAAM,YAAY,QAAQ;AAC5B,WACE,oBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,SAAS,GAAG,GAAG,MAAM,OAAO,+BAA+B,eAAe,QAAQ,GAAG,eAAY,QAAO,kCAE3I;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAI,OAAO,EAAE,SAAS,GAAG,GAAG,KAAK,GAAG,8BAAC,WAAQ,SAAQ,UAAS,GAAE;AAC1E;AACO,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,SAAS,QAAQ,SAAS,KAAK;AACpD,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Elements.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { ButtonsBlockSchema, QuoteBlockSchema, DividerBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { HStack, VStack, Card, Text, Btn, Divider } from \"../ui\";\n\n/* ── Buttons (knopgroep) ─────────────────────────────────────────────────── */\ntype Buttons = z.infer<typeof ButtonsBlockSchema>;\nfunction ButtonsRender({ block }: BlockRenderProps<Buttons>) {\n  const items = (block.items ?? []).filter((b) => b.label);\n  if (items.length === 0) return null;\n  const hAlign = block.align === \"center\" ? \"center\" : block.align === \"right\" ? \"end\" : \"start\";\n  return (\n    <HStack gap={2} hAlign={hAlign} style={{ flexWrap: \"wrap\" }}>\n      {items.map((b, i) => (\n        <Btn key={i} label={b.label} href={b.href} variant={b.variant} />\n      ))}\n    </HStack>\n  );\n}\nexport const buttonsBlock = defineBlock({\n  type: \"buttons\",\n  fields: { \"items.variant\": { type: \"select\", options: [{ value: \"primary\", label: \"Primair\" }, { value: \"secondary\", label: \"Secundair\" }, { value: \"outline\", label: \"Outline\" }] } },\n  schema: ButtonsBlockSchema,\n  Render: ButtonsRender,\n  label: \"Knoppen\",\n  icon: \"🔘\",\n  defaults: () => ({ align: \"left\", items: [{ label: \"Knop\", href: \"#\", variant: \"primary\" }] }),\n});\n\n/* ── Quote (uitspraak) ───────────────────────────────────────────────────── */\ntype Quote = z.infer<typeof QuoteBlockSchema>;\nfunction QuoteRender({ block }: BlockRenderProps<Quote>) {\n  if (!block.text) return null;\n  return (\n    <Card padding={5} variant=\"muted\">\n      <VStack gap={2} as=\"figure\" style={{ margin: 0 }}>\n        <Text type=\"large\" as=\"p\" style={{ fontStyle: \"italic\" }}>“<span data-xicms-edit=\"text\">{block.text}</span>”</Text>\n        {(block.author || block.role) && (\n          <Text as=\"label\" color=\"secondary\">\n            — {block.author}\n            {block.role ? ` · ${block.role}` : \"\"}\n          </Text>\n        )}\n      </VStack>\n    </Card>\n  );\n}\nexport const quoteBlock = defineBlock({\n  type: \"quote\",\n  schema: QuoteBlockSchema,\n  Render: QuoteRender,\n  label: \"Uitspraak\",\n  icon: \"❝\",\n  defaults: () => ({ text: \"Een krachtige uitspraak.\", author: \"\" }),\n});\n\n/* ── Divider (scheiding) ─────────────────────────────────────────────────── */\ntype DividerBlk = z.infer<typeof DividerBlockSchema>;\nfunction DividerRender({ block }: BlockRenderProps<DividerBlk>) {\n  const pad = block.spacing === \"sm\" ? \"0.75rem\" : block.spacing === \"lg\" ? \"3rem\" : \"1.5rem\";\n  if (block.variant === \"space\") return <div style={{ height: pad }} aria-hidden=\"true\" />;\n  if (block.variant === \"dots\") {\n    return (\n      <div style={{ textAlign: \"center\", padding: `${pad} 0`, color: \"var(--color-text-secondary)\", letterSpacing: \"0.5em\" }} aria-hidden=\"true\">\n        • • •\n      </div>\n    );\n  }\n  return <div style={{ padding: `${pad} 0` }}><Divider variant=\"subtle\" /></div>;\n}\nexport const dividerBlock = defineBlock({\n  type: \"divider\",\n  schema: DividerBlockSchema,\n  Render: DividerRender,\n  label: \"Scheiding\",\n  icon: \"➖\",\n  defaults: () => ({ variant: \"line\", spacing: \"md\" }),\n});\n"],"mappings":";AAgBQ,cAsBA,YAtBA;AAbR,SAAS,oBAAoB,kBAAkB,0BAA0B;AACzE,SAAS,mBAA0C;AACnD,SAAS,QAAQ,QAAQ,MAAM,MAAM,KAAK,eAAe;AAIzD,SAAS,cAAc,EAAE,MAAM,GAA8B;AAC3D,QAAM,SAAS,MAAM,SAAS,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,KAAK;AACvD,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,QAAM,SAAS,MAAM,UAAU,WAAW,WAAW,MAAM,UAAU,UAAU,QAAQ;AACvF,SACE,oBAAC,UAAO,KAAK,GAAG,QAAgB,OAAO,EAAE,UAAU,OAAO,GACvD,gBAAM,IAAI,CAAC,GAAG,MACb,oBAAC,OAAY,OAAO,EAAE,OAAO,MAAM,EAAE,MAAM,SAAS,EAAE,WAA5C,CAAqD,CAChE,GACH;AAEJ;AACO,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ,EAAE,iBAAiB,EAAE,MAAM,UAAU,SAAS,CAAC,EAAE,OAAO,WAAW,OAAO,UAAU,GAAG,EAAE,OAAO,aAAa,OAAO,YAAY,GAAG,EAAE,OAAO,WAAW,OAAO,UAAU,CAAC,EAAE,EAAE;AAAA,EACrL,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,QAAQ,OAAO,CAAC,EAAE,OAAO,QAAQ,MAAM,KAAK,SAAS,UAAU,CAAC,EAAE;AAC9F,CAAC;AAID,SAAS,YAAY,EAAE,MAAM,GAA4B;AACvD,MAAI,CAAC,MAAM,KAAM,QAAO;AACxB,SACE,oBAAC,QAAK,SAAS,GAAG,SAAQ,SACxB,+BAAC,UAAO,KAAK,GAAG,IAAG,UAAS,OAAO,EAAE,QAAQ,EAAE,GAC7C;AAAA,yBAAC,QAAK,MAAK,SAAQ,IAAG,KAAI,OAAO,EAAE,WAAW,SAAS,GAAG;AAAA;AAAA,MAAC,oBAAC,UAAK,mBAAgB,QAAQ,gBAAM,MAAK;AAAA,MAAO;AAAA,OAAC;AAAA,KAC1G,MAAM,UAAU,MAAM,SACtB,qBAAC,QAAK,IAAG,SAAQ,OAAM,aAAY;AAAA;AAAA,MAC9B,MAAM;AAAA,MACR,MAAM,OAAO,SAAM,MAAM,IAAI,KAAK;AAAA,OACrC;AAAA,KAEJ,GACF;AAEJ;AACO,MAAM,aAAa,YAAY;AAAA,EACpC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,MAAM,4BAA4B,QAAQ,GAAG;AAClE,CAAC;AAID,SAAS,cAAc,EAAE,MAAM,GAAiC;AAC9D,QAAM,MAAM,MAAM,YAAY,OAAO,YAAY,MAAM,YAAY,OAAO,SAAS;AACnF,MAAI,MAAM,YAAY,QAAS,QAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,IAAI,GAAG,eAAY,QAAO;AACtF,MAAI,MAAM,YAAY,QAAQ;AAC5B,WACE,oBAAC,SAAI,OAAO,EAAE,WAAW,UAAU,SAAS,GAAG,GAAG,MAAM,OAAO,+BAA+B,eAAe,QAAQ,GAAG,eAAY,QAAO,kCAE3I;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAI,OAAO,EAAE,SAAS,GAAG,GAAG,KAAK,GAAG,8BAAC,WAAQ,SAAQ,UAAS,GAAE;AAC1E;AACO,MAAM,eAAe,YAAY;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,SAAS,QAAQ,SAAS,KAAK;AACpD,CAAC;","names":[]}

package/dist/blocks/builtins/Hero.js

@@ -25,8 +25,8 @@ function HeroRender({ block }) {
         block.overlayGradient && coverMedia && /* @__PURE__ */ jsx("div", { className: "xicms-hero__gradient", "aria-hidden": "true" }),
         /* @__PURE__ */ jsxs("div", { className: "xicms-hero__inner", children: [
           block.eyebrow && /* @__PURE__ */ jsx(Text, { type: "label", className: "xicms-hero__eyebrow", style: light, "data-xicms-edit": "eyebrow", children: block.eyebrow }),
-          block.title && /* @__PURE__ */ jsx(Heading, { level: 1, type: "display-1", className: "xicms-hero__title", style: light, children: block.title }),
-          block.subtitle && /* @__PURE__ */ jsx(Text, { type: "large", className: "xicms-hero__sub", style: light, children: block.subtitle }),
+          block.title && /* @__PURE__ */ jsx(Heading, { level: 1, type: "display-1", className: "xicms-hero__title", style: light, "data-xicms-edit": "title", children: block.title }),
+          block.subtitle && /* @__PURE__ */ jsx(Text, { type: "large", className: "xicms-hero__sub", style: light, "data-xicms-edit": "subtitle", children: block.subtitle }),
           buttons.length > 0 && /* @__PURE__ */ jsx("div", { className: "xicms-hero__buttons", children: buttons.filter((b) => b.label).map((b, i) => /* @__PURE__ */ jsx(LinkC, { className: `xicms-btn xicms-btn--${b.variant}`, href: b.href, children: b.label }, i)) })
         ] })
       ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Hero.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CSSProperties } from \"react\";\nimport type { z } from \"zod\";\nimport { HeroBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Hero = z.infer<typeof HeroBlockSchema>;\n\nfunction HeroRender({ block }: BlockRenderProps<Hero>) {\n  const LinkC = useLinkComponent();\n  const overlay =\n    block.overlayOpacity > 0\n      ? { background: block.overlayColor ?? \"#000000\", opacity: block.overlayOpacity / 100 }\n      : null;\n  // Beeld/video als dekkende achtergrond (niet bij height \"auto\"): dan moet de tekst licht zijn.\n  const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== \"auto\";\n  const light: CSSProperties | undefined = coverMedia\n    ? { color: \"#ffffff\", textShadow: \"0 2px 14px rgba(0,0,0,.45)\" }\n    : undefined;\n  const buttons = block.buttons ?? [];\n\n  return (\n    <section\n      className=\"xicms-hero\"\n      data-align={block.align}\n      data-valign={block.vAlign}\n      data-height={block.minHeight}\n      data-media={coverMedia ? \"cover\" : undefined}\n    >\n      {block.videoUrl ? (\n        <video className=\"xicms-hero__media\" src={block.videoUrl} autoPlay muted loop playsInline aria-hidden=\"true\" />\n      ) : block.imageUrl ? (\n        <Img src={block.imageUrl} alt=\"\" className=\"xicms-hero__media\" width={1600} height={900} sizes=\"100vw\" priority editField=\"imageUrl\" editFill />\n      ) : null}\n      {overlay && <div className=\"xicms-hero__overlay\" style={overlay} aria-hidden=\"true\" />}\n      {/* Gradient (donker onderaan → transparant): leesbare tekst zonder de hele foto te dimmen. */}\n      {block.overlayGradient && coverMedia && <div className=\"xicms-hero__gradient\" aria-hidden=\"true\" />}\n      <div className=\"xicms-hero__inner\">\n        {block.eyebrow && (\n          <Text type=\"label\" className=\"xicms-hero__eyebrow\" style={light} data-xicms-edit=\"eyebrow\">\n            {block.eyebrow}\n          </Text>\n        )}\n        {block.title && (\n          <Heading level={1} type=\"display-1\" className=\"xicms-hero__title\" style={light}>\n            {block.title}\n          </Heading>\n        )}\n        {block.subtitle && (\n          <Text type=\"large\" className=\"xicms-hero__sub\" style={light}>\n            {block.subtitle}\n          </Text>\n        )}\n        {buttons.length > 0 && (\n          <div className=\"xicms-hero__buttons\">\n            {buttons.filter((b) => b.label).map((b, i) => (\n              <LinkC key={i} className={`xicms-btn xicms-btn--${b.variant}`} href={b.href}>\n                {b.label}\n              </LinkC>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport const heroBlock = defineBlock({\n  type: \"hero\",\n  schema: HeroBlockSchema,\n  Render: HeroRender,\n  label: \"Hero\",\n  icon: \"✨\",\n  defaults: () => ({ title: \"Welkom\", subtitle: \"\", align: \"left\", vAlign: \"center\", minHeight: \"auto\", overlayOpacity: 0, buttons: [] }),\n});\n"],"mappings":";AAkCQ,cAOF,YAPE;AA9BR,SAAS,uBAAuB;AAChC,SAAS,mBAA0C;AACnD,SAAS,SAAS,YAAY;AAC9B,SAAS,wBAAwB;AACjC,SAAS,WAAW;AAIpB,SAAS,WAAW,EAAE,MAAM,GAA2B;AACrD,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,UACJ,MAAM,iBAAiB,IACnB,EAAE,YAAY,MAAM,gBAAgB,WAAW,SAAS,MAAM,iBAAiB,IAAI,IACnF;AAEN,QAAM,aAAa,QAAQ,MAAM,YAAY,MAAM,QAAQ,KAAK,MAAM,cAAc;AACpF,QAAM,QAAmC,aACrC,EAAE,OAAO,WAAW,YAAY,6BAA6B,IAC7D;AACJ,QAAM,UAAU,MAAM,WAAW,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY,MAAM;AAAA,MAClB,eAAa,MAAM;AAAA,MACnB,eAAa,MAAM;AAAA,MACnB,cAAY,aAAa,UAAU;AAAA,MAElC;AAAA,cAAM,WACL,oBAAC,WAAM,WAAU,qBAAoB,KAAK,MAAM,UAAU,UAAQ,MAAC,OAAK,MAAC,MAAI,MAAC,aAAW,MAAC,eAAY,QAAO,IAC3G,MAAM,WACR,oBAAC,OAAI,KAAK,MAAM,UAAU,KAAI,IAAG,WAAU,qBAAoB,OAAO,MAAM,QAAQ,KAAK,OAAM,SAAQ,UAAQ,MAAC,WAAU,YAAW,UAAQ,MAAC,IAC5I;AAAA,QACH,WAAW,oBAAC,SAAI,WAAU,uBAAsB,OAAO,SAAS,eAAY,QAAO;AAAA,QAEnF,MAAM,mBAAmB,cAAc,oBAAC,SAAI,WAAU,wBAAuB,eAAY,QAAO;AAAA,QACjG,qBAAC,SAAI,WAAU,qBACZ;AAAA,gBAAM,WACL,oBAAC,QAAK,MAAK,SAAQ,WAAU,uBAAsB,OAAO,OAAO,mBAAgB,WAC9E,gBAAM,SACT;AAAA,UAED,MAAM,SACL,oBAAC,WAAQ,OAAO,GAAG,MAAK,aAAY,WAAU,qBAAoB,OAAO,OACtE,gBAAM,OACT;AAAA,UAED,MAAM,YACL,oBAAC,QAAK,MAAK,SAAQ,WAAU,mBAAkB,OAAO,OACnD,gBAAM,UACT;AAAA,UAED,QAAQ,SAAS,KAChB,oBAAC,SAAI,WAAU,uBACZ,kBAAQ,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,MACtC,oBAAC,SAAc,WAAW,wBAAwB,EAAE,OAAO,IAAI,MAAM,EAAE,MACpE,YAAE,SADO,CAEZ,CACD,GACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY,YAAY;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,UAAU,UAAU,IAAI,OAAO,QAAQ,QAAQ,UAAU,WAAW,QAAQ,gBAAgB,GAAG,SAAS,CAAC,EAAE;AACvI,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Hero.tsx"],"sourcesContent":["\"use client\";\n\nimport type { CSSProperties } from \"react\";\nimport type { z } from \"zod\";\nimport { HeroBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { Heading, Text } from \"../ui\";\nimport { useLinkComponent } from \"@astryxdesign/core/Link\";\nimport { Img } from \"../../media/ImageContext\";\n\ntype Hero = z.infer<typeof HeroBlockSchema>;\n\nfunction HeroRender({ block }: BlockRenderProps<Hero>) {\n  const LinkC = useLinkComponent();\n  const overlay =\n    block.overlayOpacity > 0\n      ? { background: block.overlayColor ?? \"#000000\", opacity: block.overlayOpacity / 100 }\n      : null;\n  // Beeld/video als dekkende achtergrond (niet bij height \"auto\"): dan moet de tekst licht zijn.\n  const coverMedia = Boolean(block.videoUrl || block.imageUrl) && block.minHeight !== \"auto\";\n  const light: CSSProperties | undefined = coverMedia\n    ? { color: \"#ffffff\", textShadow: \"0 2px 14px rgba(0,0,0,.45)\" }\n    : undefined;\n  const buttons = block.buttons ?? [];\n\n  return (\n    <section\n      className=\"xicms-hero\"\n      data-align={block.align}\n      data-valign={block.vAlign}\n      data-height={block.minHeight}\n      data-media={coverMedia ? \"cover\" : undefined}\n    >\n      {block.videoUrl ? (\n        <video className=\"xicms-hero__media\" src={block.videoUrl} autoPlay muted loop playsInline aria-hidden=\"true\" />\n      ) : block.imageUrl ? (\n        <Img src={block.imageUrl} alt=\"\" className=\"xicms-hero__media\" width={1600} height={900} sizes=\"100vw\" priority editField=\"imageUrl\" editFill />\n      ) : null}\n      {overlay && <div className=\"xicms-hero__overlay\" style={overlay} aria-hidden=\"true\" />}\n      {/* Gradient (donker onderaan → transparant): leesbare tekst zonder de hele foto te dimmen. */}\n      {block.overlayGradient && coverMedia && <div className=\"xicms-hero__gradient\" aria-hidden=\"true\" />}\n      <div className=\"xicms-hero__inner\">\n        {block.eyebrow && (\n          <Text type=\"label\" className=\"xicms-hero__eyebrow\" style={light} data-xicms-edit=\"eyebrow\">\n            {block.eyebrow}\n          </Text>\n        )}\n        {block.title && (\n          <Heading level={1} type=\"display-1\" className=\"xicms-hero__title\" style={light} data-xicms-edit=\"title\">\n            {block.title}\n          </Heading>\n        )}\n        {block.subtitle && (\n          <Text type=\"large\" className=\"xicms-hero__sub\" style={light} data-xicms-edit=\"subtitle\">\n            {block.subtitle}\n          </Text>\n        )}\n        {buttons.length > 0 && (\n          <div className=\"xicms-hero__buttons\">\n            {buttons.filter((b) => b.label).map((b, i) => (\n              <LinkC key={i} className={`xicms-btn xicms-btn--${b.variant}`} href={b.href}>\n                {b.label}\n              </LinkC>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n\nexport const heroBlock = defineBlock({\n  type: \"hero\",\n  schema: HeroBlockSchema,\n  Render: HeroRender,\n  label: \"Hero\",\n  icon: \"✨\",\n  defaults: () => ({ title: \"Welkom\", subtitle: \"\", align: \"left\", vAlign: \"center\", minHeight: \"auto\", overlayOpacity: 0, buttons: [] }),\n});\n"],"mappings":";AAkCQ,cAOF,YAPE;AA9BR,SAAS,uBAAuB;AAChC,SAAS,mBAA0C;AACnD,SAAS,SAAS,YAAY;AAC9B,SAAS,wBAAwB;AACjC,SAAS,WAAW;AAIpB,SAAS,WAAW,EAAE,MAAM,GAA2B;AACrD,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,UACJ,MAAM,iBAAiB,IACnB,EAAE,YAAY,MAAM,gBAAgB,WAAW,SAAS,MAAM,iBAAiB,IAAI,IACnF;AAEN,QAAM,aAAa,QAAQ,MAAM,YAAY,MAAM,QAAQ,KAAK,MAAM,cAAc;AACpF,QAAM,QAAmC,aACrC,EAAE,OAAO,WAAW,YAAY,6BAA6B,IAC7D;AACJ,QAAM,UAAU,MAAM,WAAW,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAY,MAAM;AAAA,MAClB,eAAa,MAAM;AAAA,MACnB,eAAa,MAAM;AAAA,MACnB,cAAY,aAAa,UAAU;AAAA,MAElC;AAAA,cAAM,WACL,oBAAC,WAAM,WAAU,qBAAoB,KAAK,MAAM,UAAU,UAAQ,MAAC,OAAK,MAAC,MAAI,MAAC,aAAW,MAAC,eAAY,QAAO,IAC3G,MAAM,WACR,oBAAC,OAAI,KAAK,MAAM,UAAU,KAAI,IAAG,WAAU,qBAAoB,OAAO,MAAM,QAAQ,KAAK,OAAM,SAAQ,UAAQ,MAAC,WAAU,YAAW,UAAQ,MAAC,IAC5I;AAAA,QACH,WAAW,oBAAC,SAAI,WAAU,uBAAsB,OAAO,SAAS,eAAY,QAAO;AAAA,QAEnF,MAAM,mBAAmB,cAAc,oBAAC,SAAI,WAAU,wBAAuB,eAAY,QAAO;AAAA,QACjG,qBAAC,SAAI,WAAU,qBACZ;AAAA,gBAAM,WACL,oBAAC,QAAK,MAAK,SAAQ,WAAU,uBAAsB,OAAO,OAAO,mBAAgB,WAC9E,gBAAM,SACT;AAAA,UAED,MAAM,SACL,oBAAC,WAAQ,OAAO,GAAG,MAAK,aAAY,WAAU,qBAAoB,OAAO,OAAO,mBAAgB,SAC7F,gBAAM,OACT;AAAA,UAED,MAAM,YACL,oBAAC,QAAK,MAAK,SAAQ,WAAU,mBAAkB,OAAO,OAAO,mBAAgB,YAC1E,gBAAM,UACT;AAAA,UAED,QAAQ,SAAS,KAChB,oBAAC,SAAI,WAAU,uBACZ,kBAAQ,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,MACtC,oBAAC,SAAc,WAAW,wBAAwB,EAAE,OAAO,IAAI,MAAM,EAAE,MACpE,YAAE,SADO,CAEZ,CACD,GACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,YAAY,YAAY;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,OAAO,UAAU,UAAU,IAAI,OAAO,QAAQ,QAAQ,UAAU,WAAW,QAAQ,gBAAgB,GAAG,SAAS,CAAC,EAAE;AACvI,CAAC;","names":[]}

package/dist/blocks/builtins/Jobs.js

@@ -63,6 +63,7 @@ function JobsRender({ block }) {
 }
 const jobsBlock = defineBlock({
   type: "jobs",
+  fields: { "items.datePosted": { type: "date" } },
   schema: JobsBlockSchema,
   Render: JobsRender,
   label: "Vacatures",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/blocks/builtins/Jobs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { JobsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useSiteConfig } from \"../../config\";\nimport { VStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Jobs = z.infer<typeof JobsBlockSchema>;\ntype JobItem = Jobs[\"items\"][number];\n\n/** Vrije-tekst dienstverband → schema.org-enum (Google keurt vrije tekst af). */\nexport function employmentTypeEnum(value?: string): string | null {\n  const v = (value ?? \"\").toLowerCase();\n  if (!v) return null;\n  if (v.includes(\"full\") || v.includes(\"voltijd\")) return \"FULL_TIME\";\n  if (v.includes(\"part\") || v.includes(\"deeltijd\") || /\\d+\\s*[–-]?\\s*\\d*\\s*uur/.test(v)) return \"PART_TIME\";\n  if (v.includes(\"bbl\") || v.includes(\"leerling\") || v.includes(\"stage\") || v.includes(\"intern\")) return \"INTERN\";\n  if (v.includes(\"tijdelijk\") || v.includes(\"temp\")) return \"TEMPORARY\";\n  if (v.includes(\"zzp\") || v.includes(\"freelance\") || v.includes(\"contract\")) return \"CONTRACTOR\";\n  return null;\n}\n\n/**\n * JobPosting-JSON-LD per vacature (Google Jobs). Puur en getest. Alleen vacatures met de door\n * Google vereiste kernvelden (titel + plaatsingsdatum + locatie) komen in de JSON-LD — incomplete\n * items renderen wél op de pagina maar leveren geen Search-Console-errors op. Vrije-tekst salaris\n * (\"€ 2.800 – € 3.400 p/m\") is geen geldige MonetaryAmount en wordt bewust weggelaten.\n */\nexport function jobsJsonLd(items: JobItem[], orgName: string): Array<Record<string, unknown>> {\n  return items\n    .filter((j) => j.title && j.datePosted && j.location)\n    .map((j) => {\n      const employment = employmentTypeEnum(j.employmentType);\n      return {\n        \"@context\": \"https://schema.org\",\n        \"@type\": \"JobPosting\",\n        title: j.title,\n        hiringOrganization: { \"@type\": \"Organization\", name: orgName },\n        ...(j.description ? { description: j.description } : {}),\n        datePosted: j.datePosted,\n        ...(employment ? { employmentType: employment } : {}),\n        jobLocation: { \"@type\": \"Place\", address: { \"@type\": \"PostalAddress\", addressLocality: j.location } },\n        ...(j.applyUrl ? { url: j.applyUrl } : {}),\n      };\n    });\n}\n\n/** Vacature-overzicht met JobPosting-JSON-LD — vindbaar via Google Jobs. */\nfunction JobsRender({ block }: BlockRenderProps<Jobs>) {\n  const { name } = useSiteConfig();\n  // _i = index in de OORSPRONKELIJKE array — inline-edit-paden (items.N.title) moeten daarheen wijzen.\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((j) => j.title);\n  if (items.length === 0 && !block.heading) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-jobs\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n        </VStack>\n      )}\n      {items.length === 0 && <Text color=\"secondary\">Er zijn op dit moment geen openstaande vacatures.</Text>}\n      <VStack gap={3}>\n        {items.map((j) => {\n          const i = j._i;\n          return (\n          <Card key={i} padding={4} className=\"xicms-jobs__item\">\n            <VStack gap={1.5}>\n              <div className=\"xicms-jobs__head\">\n                <Heading level={3} data-xicms-edit={`items.${i}.title`}>{j.title}</Heading>\n                <span className=\"xicms-jobs__meta\">\n                  {[j.employmentType, j.location, j.salary].filter(Boolean).join(\" · \")}\n                </span>\n              </div>\n              {j.description && <Text color=\"secondary\" data-xicms-edit={`items.${i}.description`}>{j.description}</Text>}\n              {j.applyUrl && (\n                <div>\n                  <Btn label=\"Solliciteer\" href={j.applyUrl} variant=\"primary\" />\n                </div>\n              )}\n            </VStack>\n          </Card>\n          );\n        })}\n      </VStack>\n      {block.jsonLd &&\n        jobsJsonLd(items, name).map((ld, i) => (\n          <script\n            key={i}\n            type=\"application/ld+json\"\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}\n          />\n        ))}\n    </VStack>\n  );\n}\n\nexport const jobsBlock = defineBlock({\n  type: \"jobs\",\n  schema: JobsBlockSchema,\n  Render: JobsRender,\n  label: \"Vacatures\",\n  icon: \"🧑‍🔧\",\n  defaults: () => ({\n    heading: \"Vacatures\",\n    items: [{ title: \"Vacaturetitel\", employmentType: \"Fulltime\", location: \"\" }],\n    jsonLd: true,\n  }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/blocks/builtins/Jobs.tsx"],"sourcesContent":["\"use client\";\n\nimport type { z } from \"zod\";\nimport { JobsBlockSchema } from \"../../schema/blocks\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { useSiteConfig } from \"../../config\";\nimport { VStack, Card, Heading, Text, Btn } from \"../ui\";\n\ntype Jobs = z.infer<typeof JobsBlockSchema>;\ntype JobItem = Jobs[\"items\"][number];\n\n/** Vrije-tekst dienstverband → schema.org-enum (Google keurt vrije tekst af). */\nexport function employmentTypeEnum(value?: string): string | null {\n  const v = (value ?? \"\").toLowerCase();\n  if (!v) return null;\n  if (v.includes(\"full\") || v.includes(\"voltijd\")) return \"FULL_TIME\";\n  if (v.includes(\"part\") || v.includes(\"deeltijd\") || /\\d+\\s*[–-]?\\s*\\d*\\s*uur/.test(v)) return \"PART_TIME\";\n  if (v.includes(\"bbl\") || v.includes(\"leerling\") || v.includes(\"stage\") || v.includes(\"intern\")) return \"INTERN\";\n  if (v.includes(\"tijdelijk\") || v.includes(\"temp\")) return \"TEMPORARY\";\n  if (v.includes(\"zzp\") || v.includes(\"freelance\") || v.includes(\"contract\")) return \"CONTRACTOR\";\n  return null;\n}\n\n/**\n * JobPosting-JSON-LD per vacature (Google Jobs). Puur en getest. Alleen vacatures met de door\n * Google vereiste kernvelden (titel + plaatsingsdatum + locatie) komen in de JSON-LD — incomplete\n * items renderen wél op de pagina maar leveren geen Search-Console-errors op. Vrije-tekst salaris\n * (\"€ 2.800 – € 3.400 p/m\") is geen geldige MonetaryAmount en wordt bewust weggelaten.\n */\nexport function jobsJsonLd(items: JobItem[], orgName: string): Array<Record<string, unknown>> {\n  return items\n    .filter((j) => j.title && j.datePosted && j.location)\n    .map((j) => {\n      const employment = employmentTypeEnum(j.employmentType);\n      return {\n        \"@context\": \"https://schema.org\",\n        \"@type\": \"JobPosting\",\n        title: j.title,\n        hiringOrganization: { \"@type\": \"Organization\", name: orgName },\n        ...(j.description ? { description: j.description } : {}),\n        datePosted: j.datePosted,\n        ...(employment ? { employmentType: employment } : {}),\n        jobLocation: { \"@type\": \"Place\", address: { \"@type\": \"PostalAddress\", addressLocality: j.location } },\n        ...(j.applyUrl ? { url: j.applyUrl } : {}),\n      };\n    });\n}\n\n/** Vacature-overzicht met JobPosting-JSON-LD — vindbaar via Google Jobs. */\nfunction JobsRender({ block }: BlockRenderProps<Jobs>) {\n  const { name } = useSiteConfig();\n  // _i = index in de OORSPRONKELIJKE array — inline-edit-paden (items.N.title) moeten daarheen wijzen.\n  const items = (block.items ?? []).map((it, i) => ({ ...it, _i: i })).filter((j) => j.title);\n  if (items.length === 0 && !block.heading) return null;\n  return (\n    <VStack gap={4} as=\"section\" className=\"xicms-jobs\">\n      {(block.heading || block.intro) && (\n        <VStack gap={1}>\n          {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n          {block.intro && <Text color=\"secondary\" data-xicms-edit=\"intro\">{block.intro}</Text>}\n        </VStack>\n      )}\n      {items.length === 0 && <Text color=\"secondary\">Er zijn op dit moment geen openstaande vacatures.</Text>}\n      <VStack gap={3}>\n        {items.map((j) => {\n          const i = j._i;\n          return (\n          <Card key={i} padding={4} className=\"xicms-jobs__item\">\n            <VStack gap={1.5}>\n              <div className=\"xicms-jobs__head\">\n                <Heading level={3} data-xicms-edit={`items.${i}.title`}>{j.title}</Heading>\n                <span className=\"xicms-jobs__meta\">\n                  {[j.employmentType, j.location, j.salary].filter(Boolean).join(\" · \")}\n                </span>\n              </div>\n              {j.description && <Text color=\"secondary\" data-xicms-edit={`items.${i}.description`}>{j.description}</Text>}\n              {j.applyUrl && (\n                <div>\n                  <Btn label=\"Solliciteer\" href={j.applyUrl} variant=\"primary\" />\n                </div>\n              )}\n            </VStack>\n          </Card>\n          );\n        })}\n      </VStack>\n      {block.jsonLd &&\n        jobsJsonLd(items, name).map((ld, i) => (\n          <script\n            key={i}\n            type=\"application/ld+json\"\n            // eslint-disable-next-line react/no-danger\n            dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }}\n          />\n        ))}\n    </VStack>\n  );\n}\n\nexport const jobsBlock = defineBlock({\n  type: \"jobs\",\n  fields: { \"items.datePosted\": { type: \"date\" } },\n  schema: JobsBlockSchema,\n  Render: JobsRender,\n  label: \"Vacatures\",\n  icon: \"🧑‍🔧\",\n  defaults: () => ({\n    heading: \"Vacatures\",\n    items: [{ title: \"Vacaturetitel\", employmentType: \"Fulltime\", location: \"\" }],\n    jsonLd: true,\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/blocks/builtins/Sections.js

@@ -146,6 +146,7 @@ function LogosRender({ block }) {
 }
 const logosBlock = defineBlock({
   type: "logos",
+  fields: { "items.src": { type: "image" } },
   schema: LogosBlockSchema,
   Render: LogosRender,
   label: "Logo's",

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

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

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

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

package/dist/blocks/builtins/SymbolRef.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { doc, onSnapshot } from "firebase/firestore";
+import { getDb } from "../../firebase/client";
+import { SymbolRefBlockSchema } from "../../schema/blocks";
+import { SymbolSchema } from "../../schema/symbols";
+import { defineBlock } from "../registry";
+import { BlockRenderer } from "../BlockRenderer";
+import { useRegistry } from "../context";
+function SymbolRefRender({ block, siteId, mode }) {
+  const registry = useRegistry();
+  const [symbol, setSymbol] = useState(void 0);
+  useEffect(() => {
+    const db = getDb();
+    if (!db || !block.symbolId) {
+      setSymbol(null);
+      return;
+    }
+    return onSnapshot(
+      doc(db, "sites", siteId, "symbols", block.symbolId),
+      (snap) => {
+        const parsed = snap.exists() ? SymbolSchema.safeParse(snap.data()) : null;
+        setSymbol(parsed?.success ? parsed.data : null);
+      },
+      () => setSymbol(null)
+    );
+  }, [siteId, block.symbolId]);
+  if (symbol === void 0) return null;
+  if (symbol === null) {
+    return mode === "preview" ? /* @__PURE__ */ jsxs("p", { className: "xicms-ve__hint", children: [
+      "\u{1F9E9} Symbool niet gevonden (",
+      block.symbolId,
+      ") \u2014 kies een ander symbool of verwijder dit blok."
+    ] }) : null;
+  }
+  const inner = /* @__PURE__ */ jsx(BlockRenderer, { blocks: symbol.blocks, registry, siteId, mode });
+  if (mode === "preview") {
+    return /* @__PURE__ */ jsxs("div", { className: "xicms-symbol", "data-symbol": block.symbolId, children: [
+      /* @__PURE__ */ jsxs("div", { className: "xicms-symbol__badge", children: [
+        "\u{1F9E9} ",
+        symbol.name,
+        " \u2014 gedeeld symbool (wijzigingen gelden op \xE9lke pagina)"
+      ] }),
+      inner
+    ] });
+  }
+  return inner;
+}
+const symbolRefBlock = defineBlock({
+  type: "symbolRef",
+  schema: SymbolRefBlockSchema,
+  Render: SymbolRefRender,
+  label: "Symbool (gedeelde sectie)",
+  icon: "\u{1F9E9}",
+  defaults: () => ({ symbolId: "" })
+});
+export {
+  symbolRefBlock
+};
+//# sourceMappingURL=SymbolRef.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/builtins/SymbolRef.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { doc, onSnapshot } from \"firebase/firestore\";\nimport { getDb } from \"../../firebase/client\";\nimport { SymbolRefBlockSchema } from \"../../schema/blocks\";\nimport { SymbolSchema, type Symbol } from \"../../schema/symbols\";\nimport { defineBlock, type BlockRenderProps } from \"../registry\";\nimport { BlockRenderer } from \"../BlockRenderer\";\nimport { useRegistry } from \"../context\";\n\ntype SymbolRef = z.infer<typeof SymbolRefBlockSchema>;\n\n/**\n * Verwijzing naar een gedeeld symbool. Op de LIVE site wordt een symbolRef normaliter al\n * server-side vervangen door de symbool-blokken (server/pages.ts `expandSymbols`) — dan komt\n * deze Render niet eens aan bod. In de editor/preview (en als client-fallback) rendert hij het\n * symbool live vanuit Firestore, met een subtiel kader zodat de editor ziet dat dit gedeelde\n * inhoud is die op meerdere pagina's meebeweegt.\n */\nfunction SymbolRefRender({ block, siteId, mode }: BlockRenderProps<SymbolRef>) {\n  const registry = useRegistry();\n  const [symbol, setSymbol] = useState<Symbol | null | undefined>(undefined);\n  useEffect(() => {\n    const db = getDb();\n    if (!db || !block.symbolId) {\n      setSymbol(null);\n      return;\n    }\n    return onSnapshot(\n      doc(db, \"sites\", siteId, \"symbols\", block.symbolId),\n      (snap) => {\n        const parsed = snap.exists() ? SymbolSchema.safeParse(snap.data()) : null;\n        setSymbol(parsed?.success ? parsed.data : null);\n      },\n      () => setSymbol(null),\n    );\n  }, [siteId, block.symbolId]);\n\n  if (symbol === undefined) return null; // laden — geen flits\n  if (symbol === null) {\n    // Verweesde referentie: nooit de pagina breken; in preview uitleggen, live niets tonen.\n    return mode === \"preview\" ? (\n      <p className=\"xicms-ve__hint\">🧩 Symbool niet gevonden ({block.symbolId}) — kies een ander symbool of verwijder dit blok.</p>\n    ) : null;\n  }\n  const inner = <BlockRenderer blocks={symbol.blocks} registry={registry} siteId={siteId} mode={mode} />;\n  if (mode === \"preview\") {\n    return (\n      <div className=\"xicms-symbol\" data-symbol={block.symbolId}>\n        <div className=\"xicms-symbol__badge\">🧩 {symbol.name} — gedeeld symbool (wijzigingen gelden op élke pagina)</div>\n        {inner}\n      </div>\n    );\n  }\n  return inner;\n}\n\nexport const symbolRefBlock = defineBlock({\n  type: \"symbolRef\",\n  schema: SymbolRefBlockSchema,\n  Render: SymbolRefRender,\n  label: \"Symbool (gedeelde sectie)\",\n  icon: \"🧩\",\n  defaults: () => ({ symbolId: \"\" }),\n});\n"],"mappings":";AA4CM,SAGU,KAHV;AA1CN,SAAS,WAAW,gBAAgB;AAEpC,SAAS,KAAK,kBAAkB;AAChC,SAAS,aAAa;AACtB,SAAS,4BAA4B;AACrC,SAAS,oBAAiC;AAC1C,SAAS,mBAA0C;AACnD,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAW5B,SAAS,gBAAgB,EAAE,OAAO,QAAQ,KAAK,GAAgC;AAC7E,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAoC,MAAS;AACzE,YAAU,MAAM;AACd,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,MAAM,CAAC,MAAM,UAAU;AAC1B,gBAAU,IAAI;AACd;AAAA,IACF;AACA,WAAO;AAAA,MACL,IAAI,IAAI,SAAS,QAAQ,WAAW,MAAM,QAAQ;AAAA,MAClD,CAAC,SAAS;AACR,cAAM,SAAS,KAAK,OAAO,IAAI,aAAa,UAAU,KAAK,KAAK,CAAC,IAAI;AACrE,kBAAU,QAAQ,UAAU,OAAO,OAAO,IAAI;AAAA,MAChD;AAAA,MACA,MAAM,UAAU,IAAI;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,QAAQ,MAAM,QAAQ,CAAC;AAE3B,MAAI,WAAW,OAAW,QAAO;AACjC,MAAI,WAAW,MAAM;AAEnB,WAAO,SAAS,YACd,qBAAC,OAAE,WAAU,kBAAiB;AAAA;AAAA,MAA2B,MAAM;AAAA,MAAS;AAAA,OAAiD,IACvH;AAAA,EACN;AACA,QAAM,QAAQ,oBAAC,iBAAc,QAAQ,OAAO,QAAQ,UAAoB,QAAgB,MAAY;AACpG,MAAI,SAAS,WAAW;AACtB,WACE,qBAAC,SAAI,WAAU,gBAAe,eAAa,MAAM,UAC/C;AAAA,2BAAC,SAAI,WAAU,uBAAsB;AAAA;AAAA,QAAI,OAAO;AAAA,QAAK;AAAA,SAAsD;AAAA,MAC1G;AAAA,OACH;AAAA,EAEJ;AACA,SAAO;AACT;AAEO,MAAM,iBAAiB,YAAY;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU,OAAO,EAAE,UAAU,GAAG;AAClC,CAAC;","names":[]}

package/dist/blocks/customTemplate/definition.d.ts

@@ -0,0 +1,7 @@
+import { type Field } from "../../schema/fields";
+import type { CustomBlock } from "../../schema/customBlocks";
+import { type BlockDefinition } from "../registry";
+/** Custom block-document → BlockDefinition (voor mergeRegistry, server én client). */
+export declare function customBlockToDefinition(def: CustomBlock): BlockDefinition & {
+    customFields: Field[];
+};

package/dist/blocks/customTemplate/definition.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+import { blockBase } from "../../schema/blocks";
+import { fieldsToZod, fieldsDefaults } from "../../schema/fields";
+import { defineBlock } from "../registry";
+import { interpretTemplate, scopeCss } from "./interpret";
+function CustomBlockRender(def) {
+  const scopedCss = def.css ? scopeCss(def.css, def.type) : "";
+  return function Render({ block }) {
+    const html = interpretTemplate(def.template, block);
+    return /* @__PURE__ */ jsxs("div", { "data-xicms-cb": def.type, className: `xicms-custom xicms-${def.type}`, children: [
+      scopedCss ? /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: scopedCss } }) : null,
+      /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: html } })
+    ] });
+  };
+}
+function customBlockToDefinition(def) {
+  const valueSchema = z.object({ ...blockBase, _type: z.literal(def.type) }).merge(fieldsToZod(def.fields));
+  const definition = defineBlock({
+    type: def.type,
+    schema: valueSchema,
+    Render: CustomBlockRender(def),
+    label: def.label,
+    icon: def.icon || "\u{1F9E9}",
+    category: "content",
+    defaults: () => fieldsDefaults(def.fields)
+  });
+  definition.customFields = def.fields;
+  return definition;
+}
+export {
+  customBlockToDefinition
+};
+//# sourceMappingURL=definition.js.map