@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/blockEditors/index.js

@@ -1,5 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { heroBeeldPatch, videoAdresProbleem } from "../lib/heroHulp.js";
+import { useIsSuperadmin } from "../lib/useIsSuperadmin.js";
+import { LinkVeld } from "../ui/LinkVeld.js";
+import { KleurVeld } from "../ui/KleurVeld.js";
 import { useEffect, useState } from "react";
 import { collection, getDocs } from "firebase/firestore";
 import { getDb } from "../../firebase/client.js";
@@ -8,26 +12,34 @@ import { Select } from "../ui/select.js";
 import { Switch } from "../ui/switch.js";
 import { ArrayEditor } from "../ui/ArrayEditor.js";
 import { RichTextEditor } from "../editors/RichTextEditor.js";
-import { MediaPickerButton } from "../media/MediaPicker.js";
+import { ImageField } from "../ui/ImageField.js";
 import { useRegistry } from "../../blocks/context.js";
 import { GenericEditor } from "./GenericEditor.js";
 import { SymbolRefEditor } from "./SymbolRefEditor.js";
 const VARIANT_OPTIONS = [
   { value: "primary", label: "Primair" },
   { value: "secondary", label: "Secundair" },
-  { value: "outline", label: "Outline" }
+  { value: "outline", label: "Omlijnd" }
 ];
 function patch(block, onChange, part) {
   onChange({ ...block, ...part });
 }
-function ImageUploadButton({ siteId, onUploaded }) {
-  return /* @__PURE__ */ jsx(MediaPickerButton, { siteId, onSelect: (m) => onUploaded(m.url, m.mediaId, m.alt) });
-}
 function HeroEditor({ block, siteId, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsx(Field, { label: "Regeltje boven de titel (optioneel)", hint: "bv. 'Hoveniers sinds 2001'", children: /* @__PURE__ */ jsx(Input, { value: block.eyebrow ?? "", onChange: (e) => patch(block, onChange, { eyebrow: e.target.value || void 0 }) }) }),
     /* @__PURE__ */ jsx(Field, { label: "Titel", children: /* @__PURE__ */ jsx(Input, { value: block.title ?? "", onChange: (e) => patch(block, onChange, { title: e.target.value }) }) }),
     /* @__PURE__ */ jsx(Field, { label: "Ondertitel", children: /* @__PURE__ */ jsx(Input, { value: block.subtitle ?? "", onChange: (e) => patch(block, onChange, { subtitle: e.target.value }) }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Weergave", hint: "Naast de foto is rustiger en altijd leesbaar; op de foto is groots.", children: /* @__PURE__ */ jsx(
+      Select,
+      {
+        value: block.layout ?? "overlay",
+        onValueChange: (v) => patch(block, onChange, { layout: v }),
+        options: [
+          { value: "overlay", label: "Tekst op de foto" },
+          { value: "naast", label: "Tekst naast de foto" }
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsx(Field, { label: "Uitlijning", children: /* @__PURE__ */ jsx(
       Select,
       {
@@ -39,11 +51,11 @@ function HeroEditor({ block, siteId, onChange }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(Field, { label: "Achtergrondafbeelding", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Input, { value: block.imageUrl ?? "", onChange: (e) => patch(block, onChange, { imageUrl: e.target.value }), placeholder: "URL of upload \u2192" }),
-      /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => patch(block, onChange, { imageUrl: url }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(Field, { label: "Video-achtergrond (mp4/webm, optioneel)", hint: "Overschrijft de afbeelding.", children: /* @__PURE__ */ jsx(Input, { value: block.videoUrl ?? "", onChange: (e) => patch(block, onChange, { videoUrl: e.target.value }) }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Achtergrondafbeelding", children: /* @__PURE__ */ jsx(ImageField, { siteId, value: block.imageUrl, onChange: (url) => patch(block, onChange, heroBeeldPatch(block, url)) }) }),
+    /* @__PURE__ */ jsxs(Field, { label: "Video-achtergrond (mp4/webm, optioneel)", hint: "Overschrijft de afbeelding. Houd hem kort en klein (onder 10 MB).", children: [
+      /* @__PURE__ */ jsx(Input, { value: block.videoUrl ?? "", onChange: (e) => patch(block, onChange, { videoUrl: e.target.value }) }),
+      videoAdresProbleem(block.videoUrl) && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-amber-700", children: videoAdresProbleem(block.videoUrl) })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
       /* @__PURE__ */ jsx(Field, { label: "Verticale uitlijning", children: /* @__PURE__ */ jsx(
         Select,
@@ -71,10 +83,31 @@ function HeroEditor({ block, siteId, onChange }) {
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx(Field, { label: "Overlay-kleur (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: block.overlayColor ?? "", onChange: (e) => patch(block, onChange, { overlayColor: e.target.value }), placeholder: "#000000" }) }),
+      /* @__PURE__ */ jsx(KleurVeld, { label: "Overlay-kleur (optioneel)", value: block.overlayColor ?? "", placeholder: "#000000", onChange: (overlayColor) => patch(block, onChange, { overlayColor }) }),
       /* @__PURE__ */ jsx(Field, { label: "Overlay-dekking (%)", children: /* @__PURE__ */ jsx(Input, { type: "number", value: String(block.overlayOpacity ?? 0), onChange: (e) => patch(block, onChange, { overlayOpacity: Math.max(0, Math.min(100, Number(e.target.value) || 0)) }) }) }),
       /* @__PURE__ */ jsx(ToggleField, { label: "Gradient-overlay (donker onderaan \u2014 leesbare tekst op foto's)", checked: Boolean(block.overlayGradient), onChange: (v) => patch(block, onChange, { overlayGradient: v }) })
     ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Vertrouwenspunten (optioneel)" }),
+      /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs text-slate-500", children: "Korte punten met een vinkje onder de knoppen, bv. \u201CGratis offerte\u201D of \u201CGroenkeur-erkend\u201D." }),
+      /* @__PURE__ */ jsx(
+        ArrayEditor,
+        {
+          items: block.trust ?? [],
+          onChange: (trust) => patch(block, onChange, { trust }),
+          newItem: () => "",
+          addLabel: "+ Punt",
+          renderRow: (t, _update, i) => /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: t,
+              maxLength: 60,
+              onChange: (e) => patch(block, onChange, { trust: (block.trust ?? []).map((x, j) => j === i ? e.target.value : x) })
+            }
+          )
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Knoppen" }),
       /* @__PURE__ */ jsx(
@@ -84,10 +117,12 @@ function HeroEditor({ block, siteId, onChange }) {
           onChange: (buttons) => patch(block, onChange, { buttons }),
           newItem: () => ({ label: "", href: "#", variant: "primary" }),
           addLabel: "+ Knop",
-          renderRow: (b, update) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
-            /* @__PURE__ */ jsx(Input, { value: b.label, placeholder: "Label", onChange: (e) => update({ label: e.target.value }) }),
-            /* @__PURE__ */ jsx(Input, { value: b.href, placeholder: "/pad of https://\u2026", onChange: (e) => update({ href: e.target.value }) }),
-            /* @__PURE__ */ jsx(Select, { value: b.variant, onValueChange: (v) => update({ variant: v }), options: VARIANT_OPTIONS })
+          renderRow: (b, update) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2", children: [
+              /* @__PURE__ */ jsx(Input, { value: b.label, placeholder: "Tekst op de knop", onChange: (e) => update({ label: e.target.value }) }),
+              /* @__PURE__ */ jsx(Select, { value: b.variant, onValueChange: (v) => update({ variant: v }), options: VARIANT_OPTIONS })
+            ] }),
+            /* @__PURE__ */ jsx(LinkVeld, { siteId, value: b.href, onChange: (href) => update({ href }) })
           ] })
         }
       )
@@ -99,14 +134,11 @@ function RichTextBlockEditor({ block, siteId, onChange }) {
 }
 function ImageEditor({ block, siteId, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
-    /* @__PURE__ */ jsx(Field, { label: "Afbeelding", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Input, { value: block.url ?? "", onChange: (e) => patch(block, onChange, { url: e.target.value }), placeholder: "URL of upload \u2192" }),
-      /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => patch(block, onChange, { url }) })
-    ] }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Afbeelding", children: /* @__PURE__ */ jsx(ImageField, { siteId, value: block.url, onChange: (url) => patch(block, onChange, { url }) }) }),
     /* @__PURE__ */ jsx(Field, { label: "Alt-tekst (toegankelijkheid)", hint: "Beschrijf de afbeelding kort.", children: /* @__PURE__ */ jsx(Input, { value: block.alt ?? "", onChange: (e) => patch(block, onChange, { alt: e.target.value }) }) }),
     /* @__PURE__ */ jsx(Field, { label: "Bijschrift", children: /* @__PURE__ */ jsx(Input, { value: block.caption ?? "", onChange: (e) => patch(block, onChange, { caption: e.target.value }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
-      /* @__PURE__ */ jsx(Field, { label: "Link (klikbaar)", children: /* @__PURE__ */ jsx(Input, { value: block.href ?? "", onChange: (e) => patch(block, onChange, { href: e.target.value }) }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Link (klikbaar)", children: /* @__PURE__ */ jsx(LinkVeld, { siteId, value: block.href ?? "", onChange: (href) => patch(block, onChange, { href }), leegTekst: "Geen link (optioneel)" }) }),
       /* @__PURE__ */ jsx(Field, { label: "Uitlijning", children: /* @__PURE__ */ jsx(
         Select,
         {
@@ -157,7 +189,7 @@ function FaqEditor({ block, siteId, onChange }) {
     )
   ] });
 }
-function PricingEditor({ block, onChange }) {
+function PricingEditor({ block, siteId, onChange }) {
   const items = block.items ?? [];
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsx(Field, { label: "Kop", children: /* @__PURE__ */ jsx(Input, { value: block.heading ?? "", onChange: (e) => patch(block, onChange, { heading: e.target.value }) }) }),
@@ -185,7 +217,7 @@ function PricingEditor({ block, onChange }) {
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
             /* @__PURE__ */ jsx(Input, { value: it.ctaLabel ?? "", placeholder: "Knoptekst", onChange: (e) => update({ ctaLabel: e.target.value }) }),
-            /* @__PURE__ */ jsx(Input, { value: it.ctaHref ?? "", placeholder: "Knoplink", onChange: (e) => update({ ctaHref: e.target.value }) })
+            /* @__PURE__ */ jsx(LinkVeld, { siteId, value: it.ctaHref ?? "", onChange: (ctaHref) => update({ ctaHref }), leegTekst: "Knop zonder link" })
           ] }),
           /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
             /* @__PURE__ */ jsx("input", { type: "checkbox", checked: Boolean(it.highlighted), onChange: (e) => update({ highlighted: e.target.checked }) }),
@@ -197,7 +229,7 @@ function PricingEditor({ block, onChange }) {
     /* @__PURE__ */ jsx(Field, { label: "Voetnoot (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: block.note ?? "", onChange: (e) => patch(block, onChange, { note: e.target.value }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-end gap-2", children: [
       /* @__PURE__ */ jsx(Field, { label: "Valuta", hint: "ISO-code voor zoekmachines, bv. EUR", children: /* @__PURE__ */ jsx(Input, { value: block.currency ?? "EUR", onChange: (e) => patch(block, onChange, { currency: e.target.value || "EUR" }) }) }),
-      /* @__PURE__ */ jsx(ToggleField, { label: "JSON-LD (Product/Offer)", checked: Boolean(block.jsonLd), onChange: (v) => patch(block, onChange, { jsonLd: v }) })
+      /* @__PURE__ */ jsx(ToggleField, { label: "Extra gegevens voor Google (aanbevolen)", checked: Boolean(block.jsonLd), onChange: (v) => patch(block, onChange, { jsonLd: v }) })
     ] })
   ] });
 }
@@ -233,7 +265,7 @@ function FormEditor({ block, siteId, onChange }) {
     let cancelled = false;
     void getDocs(collection(db, "sites", siteId, "forms")).then((snap) => {
       if (!cancelled) setForms(snap.docs.map((d) => ({ id: d.id, name: String(d.data().name ?? d.id) })));
-    });
+    }).catch((e) => console.warn("[xicms] lezen mislukt:", e.message));
     return () => {
       cancelled = true;
     };
@@ -295,10 +327,7 @@ function GalleryEditor({ block, siteId, onChange }) {
       ) })
     ] }),
     items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2 rounded-lg border border-slate-200 p-3", children: [
-      /* @__PURE__ */ jsx(Field, { label: `Foto ${i + 1}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Input, { value: it.url ?? "", onChange: (e) => set(items.map((x, j) => j === i ? { ...x, url: e.target.value } : x)), placeholder: "URL of upload \u2192" }),
-        /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => set(items.map((x, j) => j === i ? { ...x, url } : x)) })
-      ] }) }),
+      /* @__PURE__ */ jsx(Field, { label: `Foto ${i + 1}`, children: /* @__PURE__ */ jsx(ImageField, { siteId, value: it.url, onChange: (url) => set(items.map((x, j) => j === i ? { ...x, url } : x)) }) }),
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
         /* @__PURE__ */ jsx(Field, { label: "Alt-tekst", children: /* @__PURE__ */ jsx(Input, { value: it.alt ?? "", onChange: (e) => set(items.map((x, j) => j === i ? { ...x, alt: e.target.value } : x)) }) }),
         /* @__PURE__ */ jsx(Field, { label: "Bijschrift", children: /* @__PURE__ */ jsx(Input, { value: it.caption ?? "", onChange: (e) => set(items.map((x, j) => j === i ? { ...x, caption: e.target.value } : x)) }) }),
@@ -310,21 +339,74 @@ function GalleryEditor({ block, siteId, onChange }) {
     /* @__PURE__ */ jsx(ToggleField, { label: "Filterbalk op tags", checked: Boolean(block.showFilter), onChange: (v) => patch(block, onChange, { showFilter: v }) })
   ] });
 }
-function AgendaEditor({ block, onChange }) {
+function AgendaEditor({ block, siteId, onChange }) {
   const events = block.events ?? [];
   const set = (next) => patch(block, onChange, { events: next });
+  const zet = (i, p) => set(events.map((x, j) => j === i ? { ...x, ...p } : x));
+  const naarInvoer = (v) => v ? v.length === 10 ? `${v}T00:00` : v.slice(0, 16) : "";
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsx(Field, { label: "Kop", children: /* @__PURE__ */ jsx(Input, { value: block.heading ?? "", onChange: (e) => patch(block, onChange, { heading: e.target.value }) }) }),
-    events.map((ev, i) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2 rounded-lg border border-slate-200 p-3", children: [
-      /* @__PURE__ */ jsx(Field, { label: "Titel", children: /* @__PURE__ */ jsx(Input, { value: ev.title ?? "", onChange: (e) => set(events.map((x, j) => j === i ? { ...x, title: e.target.value } : x)) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-        /* @__PURE__ */ jsx(Field, { label: "Start", hint: "bv. 2026-07-01 of 2026-07-01T19:30", children: /* @__PURE__ */ jsx(Input, { value: ev.start ?? "", onChange: (e) => set(events.map((x, j) => j === i ? { ...x, start: e.target.value } : x)) }) }),
-        /* @__PURE__ */ jsx(Field, { label: "Einde (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: ev.end ?? "", onChange: (e) => set(events.map((x, j) => j === i ? { ...x, end: e.target.value } : x)) }) })
-      ] }),
-      /* @__PURE__ */ jsx(Field, { label: "Locatie (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: ev.location ?? "", onChange: (e) => set(events.map((x, j) => j === i ? { ...x, location: e.target.value } : x)) }) }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set(events.filter((_, j) => j !== i)), children: "Verwijderen" }) })
-    ] }, i)),
-    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => set([...events, { title: "", start: "" }]), children: "+ Evenement toevoegen" }) })
+    /* @__PURE__ */ jsx(
+      ArrayEditor,
+      {
+        items: events,
+        onChange: set,
+        newItem: () => ({ title: "", start: "" }),
+        addLabel: "+ Activiteit",
+        emptyLabel: "Nog geen activiteiten.",
+        renderRow: (ev, _u, i) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Titel", children: /* @__PURE__ */ jsx(Input, { value: ev.title ?? "", onChange: (e) => zet(i, { title: e.target.value }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Begint op", children: /* @__PURE__ */ jsx(Input, { type: "datetime-local", value: naarInvoer(ev.start), onChange: (e) => zet(i, { start: e.target.value }) }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Eindigt op (optioneel)", children: /* @__PURE__ */ jsx(Input, { type: "datetime-local", value: naarInvoer(ev.end), onChange: (e) => zet(i, { end: e.target.value || void 0 }) }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Plaats", hint: "Nodig om in Google te verschijnen.", children: /* @__PURE__ */ jsx(Input, { value: ev.location ?? "", onChange: (e) => zet(i, { location: e.target.value || void 0 }) }) }),
+            /* @__PURE__ */ jsx(Field, { label: "Prijs (optioneel)", hint: "bv. Gratis of \u20AC 12,50", children: /* @__PURE__ */ jsx(Input, { value: ev.price ?? "", onChange: (e) => zet(i, { price: e.target.value || void 0 }) }) })
+          ] }),
+          /* @__PURE__ */ jsx(Field, { label: "Omschrijving (optioneel)", children: /* @__PURE__ */ jsx(Textarea, { rows: 2, value: ev.description ?? "", onChange: (e) => zet(i, { description: e.target.value || void 0 }) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsx(Field, { label: "Herhaalt", children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                value: ev.herhaal ?? "",
+                onValueChange: (v) => zet(i, { herhaal: v || void 0 }),
+                options: [
+                  { value: "", label: "Eenmalig" },
+                  { value: "wekelijks", label: "Elke week" },
+                  { value: "tweewekelijks", label: "Om de week" },
+                  { value: "maandelijks", label: "Elke maand" }
+                ]
+              }
+            ) }),
+            ev.herhaal && /* @__PURE__ */ jsx(Field, { label: "Tot en met (optioneel)", hint: "Leeg = een jaar vooruit.", children: /* @__PURE__ */ jsx(Input, { type: "date", value: ev.herhaalTot ?? "", onChange: (e) => zet(i, { herhaalTot: e.target.value || void 0 }) }) })
+          ] }),
+          /* @__PURE__ */ jsxs("details", { className: "rounded-md border border-slate-200 p-2 text-sm", children: [
+            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-slate-600", children: "Meer: adres, foto, link, status" }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-2 grid gap-2", children: [
+              /* @__PURE__ */ jsx(Field, { label: "Adres", hint: "Alleen als het niet op je eigen adres is (dat komt uit Instellingen \u2192 Bedrijf).", children: /* @__PURE__ */ jsx(Input, { value: ev.address ?? "", onChange: (e) => zet(i, { address: e.target.value || void 0 }) }) }),
+              /* @__PURE__ */ jsx(Field, { label: "Foto", children: /* @__PURE__ */ jsx(ImageField, { siteId, value: ev.imageUrl, onChange: (imageUrl) => zet(i, { imageUrl }) }) }),
+              /* @__PURE__ */ jsx(Field, { label: "Link (aanmelden, tickets, meer info)", children: /* @__PURE__ */ jsx(LinkVeld, { siteId, value: ev.url, onChange: (url) => zet(i, { url: url || void 0 }), leegTekst: "Geen link (optioneel)" }) }),
+              /* @__PURE__ */ jsx(Field, { label: "Status", children: /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: ev.status ?? "",
+                  onValueChange: (v) => zet(i, { status: v || void 0 }),
+                  options: [
+                    { value: "", label: "Gaat gewoon door" },
+                    { value: "afgelast", label: "Afgelast" },
+                    { value: "verplaatst", label: "Verplaatst" },
+                    { value: "online", label: "Online" }
+                  ]
+                }
+              ) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(ToggleField, { label: "Voorbije activiteiten verbergen", checked: block.hidePast !== false, onChange: (v) => patch(block, onChange, { hidePast: v }) }),
+    /* @__PURE__ */ jsx(ToggleField, { label: "Laat Google de activiteiten herkennen", checked: Boolean(block.jsonLd), onChange: (v) => patch(block, onChange, { jsonLd: v }) })
   ] });
 }
 function HeadingField({ block, onChange }) {
@@ -340,14 +422,11 @@ function FeatureEditor({ block, siteId, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsx(HeadingField, { block, siteId, onChange }),
     /* @__PURE__ */ jsx(Field, { label: "Tekst", children: /* @__PURE__ */ jsx(RichTextEditor, { siteId, value: block.html ?? "", onChange: (html) => patch(block, onChange, { html }) }) }),
-    /* @__PURE__ */ jsx(Field, { label: "Afbeelding", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(Input, { value: block.imageUrl ?? "", onChange: (e) => patch(block, onChange, { imageUrl: e.target.value }), placeholder: "URL of upload \u2192" }),
-      /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => patch(block, onChange, { imageUrl: url }) })
-    ] }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Afbeelding", children: /* @__PURE__ */ jsx(ImageField, { siteId, value: block.imageUrl, onChange: (url) => patch(block, onChange, { imageUrl: url }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
       /* @__PURE__ */ jsx(Field, { label: "Beeldpositie", children: /* @__PURE__ */ jsx(Select, { value: block.imagePosition ?? "left", onValueChange: (v) => patch(block, onChange, { imagePosition: v }), options: [{ value: "left", label: "Links" }, { value: "right", label: "Rechts" }] }) }),
       /* @__PURE__ */ jsx(Field, { label: "Knoptekst", children: /* @__PURE__ */ jsx(Input, { value: block.buttonLabel ?? "", onChange: (e) => patch(block, onChange, { buttonLabel: e.target.value }) }) }),
-      /* @__PURE__ */ jsx(Field, { label: "Knoplink", children: /* @__PURE__ */ jsx(Input, { value: block.buttonHref ?? "", onChange: (e) => patch(block, onChange, { buttonHref: e.target.value }) }) })
+      /* @__PURE__ */ jsx(Field, { label: "Knoplink", children: /* @__PURE__ */ jsx(LinkVeld, { siteId, value: block.buttonHref ?? "", onChange: (buttonHref) => patch(block, onChange, { buttonHref }) }) })
     ] })
   ] });
 }
@@ -355,14 +434,11 @@ function VideoEditor({ block, siteId, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
       /* @__PURE__ */ jsx(Field, { label: "Bron", children: /* @__PURE__ */ jsx(Select, { value: block.provider ?? "youtube", onValueChange: (v) => patch(block, onChange, { provider: v }), options: [{ value: "youtube", label: "YouTube" }, { value: "vimeo", label: "Vimeo" }, { value: "file", label: "MP4/WebM-URL" }] }) }),
-      /* @__PURE__ */ jsx(Field, { label: "Id of URL", children: /* @__PURE__ */ jsx(Input, { value: block.src ?? "", onChange: (e) => patch(block, onChange, { src: e.target.value }) }) })
+      /* @__PURE__ */ jsx(Field, { label: "Link naar de video", hint: "Plak het adres van de video (YouTube of Vimeo).", children: /* @__PURE__ */ jsx(Input, { value: block.src ?? "", onChange: (e) => patch(block, onChange, { src: e.target.value }) }) })
     ] }),
     /* @__PURE__ */ jsx(Field, { label: "Bijschrift (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: block.caption ?? "", onChange: (e) => patch(block, onChange, { caption: e.target.value }) }) }),
-    /* @__PURE__ */ jsx(Field, { label: "Voorvertoningsbeeld (optioneel)", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(Input, { value: block.posterUrl ?? "", onChange: (e) => patch(block, onChange, { posterUrl: e.target.value || void 0 }), placeholder: "URL of upload \u2192" }),
-      /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => patch(block, onChange, { posterUrl: url }) })
-    ] }) }),
-    /* @__PURE__ */ jsx(ToggleField, { label: "Pas tonen na cookie-toestemming", checked: block.consentGated !== false, onChange: (v) => patch(block, onChange, { consentGated: v }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Voorvertoningsbeeld (optioneel)", children: /* @__PURE__ */ jsx(ImageField, { siteId, value: block.posterUrl, onChange: (url) => patch(block, onChange, { posterUrl: url }) }) }),
+    /* @__PURE__ */ jsx(ToestemmingSchakelaar, { block, onChange }),
     /* @__PURE__ */ jsx(ToggleField, { label: "Click-to-play (speler laadt pas na klik \u2014 sneller & privacyvriendelijker)", checked: Boolean(block.facade), onChange: (v) => patch(block, onChange, { facade: v }) })
   ] });
 }
@@ -403,7 +479,7 @@ function ContactEditor({ block, siteId, onChange }) {
         onChange: (geo) => patch(block, onChange, { geo })
       }
     ),
-    /* @__PURE__ */ jsx(ToggleField, { label: "JSON-LD (LocalBusiness)", checked: Boolean(block.jsonLd), onChange: (v) => patch(block, onChange, { jsonLd: v }) })
+    /* @__PURE__ */ jsx(ToggleField, { label: "Bedrijfsgegevens doorgeven aan Google (aanbevolen)", checked: Boolean(block.jsonLd), onChange: (v) => patch(block, onChange, { jsonLd: v }) })
   ] });
 }
 function MapCoordField({ block, onChange }) {
@@ -438,11 +514,11 @@ function MapEditor({ block, siteId, onChange }) {
       /* @__PURE__ */ jsx(Field, { label: "Aanbieder", children: /* @__PURE__ */ jsx(Select, { value: block.provider ?? "osm", onValueChange: (v) => patch(block, onChange, { provider: v }), options: [{ value: "osm", label: "OpenStreetMap (co\xF6rdinaten)" }, { value: "google", label: "Google (embed-URL)" }] }) }),
       /* @__PURE__ */ jsx(Field, { label: "Hoogte (px)", children: /* @__PURE__ */ jsx(Input, { type: "number", value: String(block.height ?? 360), onChange: (e) => patch(block, onChange, { height: Math.max(150, Math.min(800, Number(e.target.value) || 360)) }) }) })
     ] }),
-    isGoogle ? /* @__PURE__ */ jsx(Field, { label: "Embed-URL", children: /* @__PURE__ */ jsx(Input, { value: block.query ?? "", onChange: (e) => patch(block, onChange, { query: e.target.value }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    isGoogle ? /* @__PURE__ */ jsx(Field, { label: "Link (om in te sluiten)", children: /* @__PURE__ */ jsx(Input, { value: block.query ?? "", onChange: (e) => patch(block, onChange, { query: e.target.value }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(MapCoordField, { block, siteId, onChange }),
       /* @__PURE__ */ jsx(Field, { label: "Zoom (1\u201320)", children: /* @__PURE__ */ jsx(Input, { type: "number", value: String(block.zoom ?? 14), onChange: (e) => patch(block, onChange, { zoom: Math.max(1, Math.min(20, Number(e.target.value) || 14)) }) }) })
     ] }),
-    /* @__PURE__ */ jsx(ToggleField, { label: "Pas tonen na cookie-toestemming", checked: block.consentGated !== false, onChange: (v) => patch(block, onChange, { consentGated: v }) })
+    /* @__PURE__ */ jsx(ToestemmingSchakelaar, { block, onChange })
   ] });
 }
 function NewsletterEditor({ block, siteId, onChange }) {
@@ -453,7 +529,7 @@ function NewsletterEditor({ block, siteId, onChange }) {
     let cancelled = false;
     void getDocs(collection(db, "sites", siteId, "forms")).then((snap) => {
       if (!cancelled) setForms(snap.docs.map((d) => ({ id: d.id, name: String(d.data().name ?? d.id) })));
-    });
+    }).catch((e) => console.warn("[xicms] lezen mislukt:", e.message));
     return () => {
       cancelled = true;
     };
@@ -512,13 +588,17 @@ function BookingEditor({ block, siteId, onChange }) {
           { value: "treatwell", label: "Treatwell" },
           { value: "salonized", label: "Salonized" },
           { value: "tablebooker", label: "Tablebooker" },
-          { value: "bookingkit", label: "bookingkit" }
+          { value: "bookingkit", label: "bookingkit" },
+          { value: "lodgify", label: "Lodgify (verhuur)" },
+          { value: "bookingexperts", label: "Booking Experts (verhuur)" },
+          { value: "tommy", label: "Tommy (verhuur)" },
+          { value: "bookingmotor", label: "Bookingmotor (verhuur)" }
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(Field, { label: "Embed-URL of account-naam", hint: "Volledige link \xF3f alleen je slug/id \u2014 de provider-keuze bouwt er de juiste embed van.", children: /* @__PURE__ */ jsx(Input, { value: block.embedUrl ?? "", onChange: (e) => patch(block, onChange, { embedUrl: e.target.value }), placeholder: "https://calendly.com/jouw-naam/intake \u2014 of: jouw-naam/intake" }) }),
+    /* @__PURE__ */ jsx(Field, { label: "Link of accountnaam", hint: "De volledige link naar je boekingspagina, of alleen je accountnaam.", children: /* @__PURE__ */ jsx(Input, { value: block.embedUrl ?? "", onChange: (e) => patch(block, onChange, { embedUrl: e.target.value }), placeholder: "https://calendly.com/jouw-naam/intake \u2014 of: jouw-naam/intake" }) }),
     /* @__PURE__ */ jsx(Field, { label: "Hoogte (px)", children: /* @__PURE__ */ jsx(Input, { type: "number", value: String(block.height ?? 630), onChange: (e) => patch(block, onChange, { height: Math.max(300, Math.min(1200, Number(e.target.value) || 630)) }) }) }),
-    /* @__PURE__ */ jsx(ToggleField, { label: "Pas tonen na cookie-toestemming", checked: block.consentGated !== false, onChange: (v) => patch(block, onChange, { consentGated: v }) })
+    /* @__PURE__ */ jsx(ToestemmingSchakelaar, { block, onChange })
   ] });
 }
 function AccordionEditor({ block, siteId, onChange }) {
@@ -562,7 +642,7 @@ function EmbedEditor({ block, onChange }) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx(ToggleField, { label: "Pas tonen na cookie-toestemming", checked: block.consentGated !== false, onChange: (v) => patch(block, onChange, { consentGated: v }) })
+    /* @__PURE__ */ jsx(ToestemmingSchakelaar, { block, onChange })
   ] });
 }
 function nestKey() {
@@ -619,7 +699,7 @@ function NestedBlocksEditor({
         open && /* @__PURE__ */ jsx("div", { className: "border-t border-slate-100 p-2", children: /* @__PURE__ */ jsx(Editor, { block: b, siteId, onChange: (next) => onChange(list.map((x, j) => j === i ? next : x)) }) })
       ] }, b._key ?? i);
     }),
-    list.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400", children: "Nog geen blokken." }),
+    list.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Nog geen blokken." }),
     /* @__PURE__ */ jsx(Select, { value: "", placeholder: addLabel, onValueChange: (v) => v && add(v), options: addOptions })
   ] });
 }
@@ -767,13 +847,10 @@ function SliderEditor({ block, siteId, onChange }) {
         newItem: () => ({ imageUrl: "", alt: "", caption: "" }),
         addLabel: "+ Slide",
         renderRow: (it, update, i) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-          /* @__PURE__ */ jsx(Field, { label: `Afbeelding ${i + 1}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Input, { value: it.imageUrl ?? "", onChange: (e) => update({ imageUrl: e.target.value }), placeholder: "URL of upload \u2192" }),
-            /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => update({ imageUrl: url }) }, i)
-          ] }) }),
+          /* @__PURE__ */ jsx(Field, { label: `Afbeelding ${i + 1}`, children: /* @__PURE__ */ jsx(ImageField, { siteId, value: it.imageUrl, onChange: (url) => update({ imageUrl: url }) }) }),
           /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
             /* @__PURE__ */ jsx(Input, { value: it.alt ?? "", placeholder: "Alt-tekst", onChange: (e) => update({ alt: e.target.value }) }),
-            /* @__PURE__ */ jsx(Input, { value: it.href ?? "", placeholder: "Link (optioneel)", onChange: (e) => update({ href: e.target.value }) })
+            /* @__PURE__ */ jsx(LinkVeld, { siteId, value: it.href ?? "", onChange: (href) => update({ href }), leegTekst: "Geen link (optioneel)" })
           ] }),
           /* @__PURE__ */ jsx(Input, { value: it.caption ?? "", placeholder: "Bijschrift (optioneel)", onChange: (e) => update({ caption: e.target.value }) })
         ] })
@@ -874,15 +951,15 @@ function NewsletterWidgetEditor({ block, onChange }) {
     ] })
   ] });
 }
-function CtaWidgetEditor({ block, onChange }) {
+function CtaWidgetEditor({ block, siteId, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsx(Field, { label: "Titel", children: /* @__PURE__ */ jsx(Input, { value: block.title ?? "", onChange: (e) => patch(block, onChange, { title: e.target.value }) }) }),
     /* @__PURE__ */ jsx(Field, { label: "Tekst", children: /* @__PURE__ */ jsx(Input, { value: block.text ?? "", onChange: (e) => patch(block, onChange, { text: e.target.value }) }) }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
       /* @__PURE__ */ jsx(Field, { label: "Knoptekst", children: /* @__PURE__ */ jsx(Input, { value: block.buttonLabel ?? "", onChange: (e) => patch(block, onChange, { buttonLabel: e.target.value }) }) }),
-      /* @__PURE__ */ jsx(Field, { label: "Knoplink", children: /* @__PURE__ */ jsx(Input, { value: block.buttonHref ?? "", onChange: (e) => patch(block, onChange, { buttonHref: e.target.value }) }) })
+      /* @__PURE__ */ jsx(Field, { label: "Knoplink", children: /* @__PURE__ */ jsx(LinkVeld, { siteId, value: block.buttonHref ?? "", onChange: (buttonHref) => patch(block, onChange, { buttonHref }) }) })
     ] }),
-    /* @__PURE__ */ jsx(Field, { label: "Achtergrondkleur (optioneel)", children: /* @__PURE__ */ jsx(Input, { value: block.backgroundColor ?? "", onChange: (e) => patch(block, onChange, { backgroundColor: e.target.value }), placeholder: "#f5f5f5" }) })
+    /* @__PURE__ */ jsx(KleurVeld, { label: "Achtergrondkleur (optioneel)", value: block.backgroundColor ?? "", placeholder: "#f5f5f5", onChange: (backgroundColor) => patch(block, onChange, { backgroundColor }) })
   ] });
 }
 function GalleryWidgetEditor({ block, siteId, onChange }) {
@@ -898,10 +975,7 @@ function GalleryWidgetEditor({ block, siteId, onChange }) {
         newItem: () => ({ url: "", alt: "" }),
         addLabel: "+ Foto",
         renderRow: (it, update, i) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Input, { value: it.url ?? "", onChange: (e) => update({ url: e.target.value }), placeholder: "URL of upload \u2192" }),
-            /* @__PURE__ */ jsx(ImageUploadButton, { siteId, onUploaded: (url) => update({ url }) }, i)
-          ] }),
+          /* @__PURE__ */ jsx(ImageField, { siteId, value: it.url, onChange: (url) => update({ url }) }),
           /* @__PURE__ */ jsx(Input, { value: it.alt ?? "", placeholder: "Alt-tekst", onChange: (e) => update({ alt: e.target.value }) })
         ] })
       }
@@ -930,7 +1004,7 @@ function TestimonialsWidgetEditor({ block, onChange }) {
     )
   ] });
 }
-function CardsWidgetEditor({ block, onChange }) {
+function CardsWidgetEditor({ block, siteId, onChange }) {
   const items = block.items ?? [];
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
     /* @__PURE__ */ jsx(Field, { label: "Kop", children: /* @__PURE__ */ jsx(Input, { value: block.heading ?? "", onChange: (e) => patch(block, onChange, { heading: e.target.value }) }) }),
@@ -947,7 +1021,7 @@ function CardsWidgetEditor({ block, onChange }) {
             /* @__PURE__ */ jsx(Input, { value: it.title, placeholder: "Titel", onChange: (e) => update({ title: e.target.value }) })
           ] }),
           /* @__PURE__ */ jsx(Input, { value: it.text ?? "", placeholder: "Korte tekst", onChange: (e) => update({ text: e.target.value }) }),
-          /* @__PURE__ */ jsx(Input, { value: it.href ?? "", placeholder: "Link (optioneel)", onChange: (e) => update({ href: e.target.value }) })
+          /* @__PURE__ */ jsx(LinkVeld, { siteId, value: it.href ?? "", onChange: (href) => update({ href }), leegTekst: "Geen link (optioneel)" })
         ] })
       }
     )
@@ -1023,6 +1097,13 @@ const builtinBlockEditors = {
   downloadsWidget: DownloadsWidgetEditor,
   countdownWidget: CountdownWidgetEditor
 };
+function ToestemmingSchakelaar({ block, onChange }) {
+  const superadmin = useIsSuperadmin();
+  if (!superadmin) {
+    return block.consentGated === false ? /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-700", children: "Dit blok laadt zonder cookie-toestemming (ingesteld door Xi Webdesign)." }) : /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Bezoekers zien dit pas na hun cookie-toestemming \u2014 zo blijft de site AVG-proof." });
+  }
+  return /* @__PURE__ */ jsx(ToggleField, { label: "Pas tonen na cookie-toestemming", checked: block.consentGated !== false, onChange: (v) => patch(block, onChange, { consentGated: v }) });
+}
 export {
   GenericEditor,
   NestedBlocksEditor,