@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/admin/visual/VisualEditor.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { registerBuiltinSchemas } from "../../blocks/builtinSchemas.js";
 import { useModules } from "../../modules/context.js";
 registerBuiltinSchemas();
@@ -13,9 +13,8 @@ import { MediaPickerDialog, MediaPickerButton } from "../media/MediaPicker.js";
 import { Switch } from "../ui/switch.js";
 import { titelMeter, omschrijvingMeter } from "../lib/seoHulp.js";
 import { useThemeVars } from "../../XiCMSProvider.js";
-import { buildBlockAddOptions } from "../../blocks/registry.js";
 import DOMPurify from "dompurify";
-import { createPage, getDraftByPath, getPublishedPage, saveDraft, publishPage, subscribeDraft, subscribeVersions, restoreVersion } from "../lib/pagesClient.js";
+import { createPage, getDraftByPath, getPublishedPage, saveDraft, publishPage, publicatieContext, subscribeDraft, subscribeVersions, restoreVersion } from "../lib/pagesClient.js";
 import { isDemoActive } from "../../demo/demoStore.js";
 import { setProductField } from "../shop/productClient.js";
 import { ProductPaneel } from "../shop/ProductPaneel.js";
@@ -26,10 +25,19 @@ import { useEditor } from "../../editor/EditorProvider.js";
 import { AdminModes, EditbarBrand } from "../../components/EditBar.js";
 import { aantalWijzigingen, bepaalWijzigingen, GEEN_WIJZIGINGEN } from "./wijzigingen.js";
 import { TranslationPanel } from "./TranslationPanel.js";
-import { PatternInserter } from "../patterns/PatternInserter.js";
 import { Button, Field, Input, Textarea } from "../ui/primitives.js";
 import { Select } from "../ui/select.js";
 import { ToastProvider, useToast } from "../ui/toast.js";
+import { InlineRijkeTekst, RIJK_ATTR } from "./InlineRijkeTekst.js";
+import { PreviewLinkResultaat } from "../ui/PreviewLinkResultaat.js";
+import { controleerPagina } from "../lib/publicatieCheck.js";
+import { heroBeeldPatch } from "../lib/heroHulp.js";
+import { lengteAdvies } from "../lib/lengteAdvies.js";
+import { vertaalVelden, veldLabel } from "../lib/veldTaal.js";
+import { InlineGereedschap, snelleKeuzes, vindLijstItems } from "./InlineGereedschap.js";
+import { BlokKader, BlokKiezer, TussenPlus } from "./BlokKiezer.js";
+import { Icon } from "../ui/Icon.js";
+import { isTekstVeld } from "../lib/tekstVeld.js";
 import { ConfirmHost, useConfirm } from "../ui/ConfirmDialog.js";
 const GLOBAL_INLINE = [
   // `field: "html"` is de AANNAME, geen wet: een element mag met `data-xicms-edit` zeggen welk veld
@@ -83,7 +91,7 @@ function stableStringify(value) {
   return JSON.stringify(value) ?? "null";
 }
 function VisualEditor({ onClose }) {
-  return /* @__PURE__ */ jsx("div", { className: "xicms-admin xicms-ve", children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ConfirmHost, { children: /* @__PURE__ */ jsx(VisualEditorInner, { onClose }) }) }) });
+  return /* @__PURE__ */ jsx("div", { className: "xicms-admin xicms-ve", children: /* @__PURE__ */ jsx(ToastProvider, { positie: "topEnd", children: /* @__PURE__ */ jsx(ConfirmHost, { children: /* @__PURE__ */ jsx(VisualEditorInner, { onClose }) }) }) });
 }
 function VisualEditorInner({ onClose }) {
   const config = useSiteConfig();
@@ -104,6 +112,10 @@ function VisualEditorInner({ onClose }) {
   const [panelOpen, setPanelOpen] = useState(false);
   const [status, setStatus] = useState("loading");
   const [selectedKey, setSelectedKey] = useState(null);
+  const [kiezerOpen, setKiezerOpen] = useState(false);
+  const [invoegNa, setInvoegNa] = useState(null);
+  const selectedKeyRef = useRef(null);
+  selectedKeyRef.current = selectedKey;
   const [selectedProduct, setSelectedProduct] = useState(null);
   const [publishing, setPublishing] = useState(false);
   const [imgPicker, setImgPicker] = useState(null);
@@ -212,7 +224,9 @@ function VisualEditorInner({ onClose }) {
     // Alleen meesturen wanneer aanwezig: `undefined` weigert de Firestore-client.
     ...d.translations ? { translations: d.translations } : {}
   });
+  const rijkFlushRef = useRef(null);
   const flushSave = useCallback(async () => {
+    rijkFlushRef.current?.();
     document.activeElement?.blur();
     const d = draftRef.current;
     if (!d || !dirtyRef.current) return;
@@ -369,24 +383,6 @@ function VisualEditorInner({ onClose }) {
     },
     [mutateDraft, locale]
   );
-  const [fmtBar, setFmtBar] = useState(null);
-  const fmtElRef = useRef(null);
-  const positionFmtBar = useCallback((el) => {
-    const r = el.getBoundingClientRect();
-    setFmtBar({
-      top: Math.max(56, r.top - 44),
-      left: Math.min(Math.max(8, r.left), Math.max(8, window.innerWidth - 300))
-    });
-  }, []);
-  useEffect(() => {
-    if (!fmtBar) return;
-    const onScroll = () => {
-      const el = fmtElRef.current;
-      if (el) positionFmtBar(el);
-    };
-    window.addEventListener("scroll", onScroll, { capture: true, passive: true });
-    return () => window.removeEventListener("scroll", onScroll, { capture: true });
-  }, [fmtBar !== null, positionFmtBar]);
   const commitText = useCallback(
     (key, field, value) => {
       if (isTranslating) setTranslation(`${key}.${field}`, value);
@@ -579,10 +575,22 @@ function VisualEditorInner({ onClose }) {
     };
   }, [draft, wijzigingen, displayBlocks]);
   const [spots, setSpots] = useState([]);
+  const lengteGemeld = useRef(/* @__PURE__ */ new Set());
   const targetsRef = useRef([]);
   const editingRef = useRef(null);
   const wilInlineRef = useRef(false);
   const [editingIndex, setEditingIndex] = useState(null);
+  const [rijk, setRijk] = useState(null);
+  const stopRijk = useCallback(() => {
+    setRijk(null);
+    setEditingIndex(null);
+  }, []);
+  useEffect(() => {
+    if (editingIndex !== null && toonStartHint) sluitStartHint();
+  }, [editingIndex, toonStartHint, sluitStartHint]);
+  useEffect(() => {
+    setRijk((r) => r && r.key !== selectedKey ? null : r);
+  }, [selectedKey]);
   const stopInline = useCallback((el) => {
     el.removeAttribute("contenteditable");
     el.classList.remove("is-editing");
@@ -592,9 +600,20 @@ function VisualEditorInner({ onClose }) {
     }
   }, []);
   const meldGeenTekst = useCallback(() => {
+    const key = selectedKeyRef.current;
+    const blok = blocksRef.current.find((b) => b._key === key);
+    const def = blok ? registryRef.current.get(String(blok._type)) : void 0;
+    let keuzes = 0;
+    try {
+      keuzes = def?.schema ? snelleKeuzes(vertaalVelden(introspectToFields(def.schema, def.fields), def.type)).length : 0;
+    } catch {
+      keuzes = 0;
+    }
+    const host = key ? document.querySelector(`[data-xicms-block="${CSS.escape(key)}"]`) : null;
+    if (keuzes > 0 || host && vindLijstItems(host).length > 0) return;
     toast({
-      title: "Dit blok heeft geen eigen tekst",
-      description: "Wijs een product aan voor zijn naam, of gebruik het tandwiel voor de instellingen van dit blok."
+      title: "Hier valt op de pagina niets te typen",
+      description: "Wijs een product aan voor zijn naam, of gebruik het tandwiel \u2699 voor de instellingen van dit blok."
     });
   }, [toast]);
   const startInline = useCallback((index) => {
@@ -602,6 +621,14 @@ function VisualEditorInner({ onClose }) {
     if (!target) return;
     const { el } = target;
     if (editingRef.current && editingRef.current !== el) editingRef.current.blur();
+    if (target.html) {
+      const key = el.closest("[data-xicms-block]")?.dataset.xicmsBlock;
+      if (!key) return;
+      setRijk({ el, key, field: target.field });
+      setEditingIndex(index);
+      return;
+    }
+    setRijk(null);
     el.setAttribute("contenteditable", "true");
     el.setAttribute("spellcheck", "true");
     el.classList.add("is-editing");
@@ -615,6 +642,17 @@ function VisualEditorInner({ onClose }) {
     selection?.removeAllRanges();
     selection?.addRange(range);
   }, []);
+  const startVeld = useCallback((veld) => {
+    let pogingen = 0;
+    const probeer = () => {
+      const i = targetsRef.current.findIndex((t) => t.field === veld);
+      if (i >= 0) {
+        targetsRef.current[i].el.scrollIntoView({ block: "nearest", behavior: "smooth" });
+        startInline(i);
+      } else if (++pogingen < 20) requestAnimationFrame(probeer);
+    };
+    requestAnimationFrame(probeer);
+  }, [startInline]);
   useEffect(() => {
     if (!selectedKey) {
       targetsRef.current = [];
@@ -630,7 +668,7 @@ function VisualEditorInner({ onClose }) {
     const labels = /* @__PURE__ */ new Map();
     if (def) {
       try {
-        for (const f of introspectToFields(def.schema, def.fields)) labels.set(f.key, f.label);
+        for (const f of vertaalVelden(introspectToFields(def.schema, def.fields), def.type)) labels.set(f.key, f.label);
       } catch {
       }
     }
@@ -640,19 +678,16 @@ function VisualEditorInner({ onClose }) {
       el.dataset.veInline = "1";
       el.classList.add("xicms-ve-inline");
       el.addEventListener("blur", () => {
-        commitText(selectedKey, field, html ? DOMPurify.sanitize(el.innerHTML) : el.textContent ?? "");
+        const waarde = html ? DOMPurify.sanitize(el.innerHTML) : el.textContent ?? "";
+        commitText(selectedKey, field, waarde);
         stopInline(el);
+        const advies = html ? null : lengteAdvies(field, waarde);
+        const sleutel = `${selectedKey}.${field}`;
+        if (advies && !lengteGemeld.current.has(sleutel)) {
+          lengteGemeld.current.add(sleutel);
+          toast({ title: "Lange tekst", description: advies });
+        }
       });
-      if (html) {
-        el.addEventListener("focus", () => {
-          fmtElRef.current = el;
-          positionFmtBar(el);
-        });
-        el.addEventListener("blur", () => {
-          fmtElRef.current = null;
-          setFmtBar(null);
-        });
-      }
       el.addEventListener("keydown", (e) => {
         if (e.key === "Escape") {
           e.stopPropagation();
@@ -666,11 +701,13 @@ function VisualEditorInner({ onClose }) {
     };
     const measure = () => {
       const next = targetsRef.current.map(({ el, field }) => {
-        const r = el.getBoundingClientRect();
+        const zicht = el.style.display === "none" && el.nextElementSibling?.hasAttribute(RIJK_ATTR) ? el.nextElementSibling : el;
+        const r = zicht.getBoundingClientRect();
+        const uitBeeld = r.bottom < 56 || r.top > window.innerHeight - 8 || r.width === 0 && r.height === 0;
         return {
-          top: Math.min(window.innerHeight - 22, Math.max(4, r.top + r.height / 2 - 9)),
+          top: uitBeeld ? -9999 : Math.min(window.innerHeight - 22, Math.max(4, r.top + r.height / 2 - 9)),
           left: Math.min(window.innerWidth - 22, Math.max(4, r.right + 6)),
-          title: `Bewerk: ${labels.get(field) ?? field}`
+          title: `Bewerk: ${labels.get(field) ?? veldLabel(field.split(".").pop() ?? field)}`
         };
       });
       setSpots(
@@ -681,7 +718,9 @@ function VisualEditorInner({ onClose }) {
       const found = [];
       for (const m of GLOBAL_INLINE) {
         host.querySelectorAll(m.selector).forEach((el) => {
+          if (el.closest(`[${RIJK_ATTR}]`)) return;
           const field = el.dataset.xicmsEdit ?? m.field;
+          if (!isTekstVeld(el, field)) return;
           bind(el, field, !!m.html);
           found.push({ el, field, html: !!m.html });
         });
@@ -729,7 +768,7 @@ function VisualEditorInner({ onClose }) {
       targetsRef.current = [];
       setSpots([]);
     };
-  }, [selectedKey, commitText, positionFmtBar, stopInline, startInline, toast]);
+  }, [selectedKey, commitText, stopInline, startInline, toast]);
   const dirtySinceRef = useRef(null);
   useEffect(() => {
     if (!draft) return;
@@ -752,10 +791,36 @@ function VisualEditorInner({ onClose }) {
           dirtyRef.current = false;
           setStatus("saved");
         }
-      }).catch(() => setStatus("error"));
+      }).catch(() => {
+        setStatus("error");
+        setHerpoging((n) => n + 1);
+      });
     }, delay);
     return () => clearTimeout(t);
   }, [draft, siteId, conflict]);
+  const [online, setOnline] = useState(() => typeof navigator === "undefined" ? true : navigator.onLine);
+  const [herpoging, setHerpoging] = useState(0);
+  useEffect(() => {
+    const aan = () => setOnline(true);
+    const uit = () => setOnline(false);
+    window.addEventListener("online", aan);
+    window.addEventListener("offline", uit);
+    return () => {
+      window.removeEventListener("online", aan);
+      window.removeEventListener("offline", uit);
+    };
+  }, []);
+  useEffect(() => {
+    if (status !== "error" || !online || conflict) return;
+    const wacht = Math.min(12e4, 5e3 * 3 ** Math.max(0, herpoging - 1));
+    const t = setTimeout(() => {
+      void flushSave().then(() => setHerpoging(0)).catch(() => {
+        setStatus("error");
+        setHerpoging((n) => n + 1);
+      });
+    }, wacht);
+    return () => clearTimeout(t);
+  }, [status, online, conflict, herpoging, flushSave]);
   useEffect(() => {
     const beforeUnload = (e) => {
       if (dirtyRef.current || nietLiveRef.current) {
@@ -849,12 +914,50 @@ function VisualEditorInner({ onClose }) {
     if (selectedKey === blk._key) setSelectedKey(null);
     toast({ title: "Losgekoppeld", description: "Dit is nu een losse kopie.", tone: "success" });
   }
+  function publiceerSamenvatting(pad, demo = false, waarschuwingen = []) {
+    const namen = blocks.filter((b) => wijzigingen.blokken.has(b._key) || wijzigingen.velden.has(b._key)).map((b) => registry.get(String(b._type))?.label ?? String(b._type));
+    const uniek = [...new Set(namen)];
+    return /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+      !demo && /* @__PURE__ */ jsxs("p", { children: [
+        "De live site wordt bijgewerkt (",
+        pad,
+        ")."
+      ] }),
+      wijzigingen.iets && /* @__PURE__ */ jsxs("p", { children: [
+        aantalWijzigingen(wijzigingen),
+        uniek.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " in: ",
+          uniek.slice(0, 6).join(", "),
+          uniek.length > 6 ? ` en ${uniek.length - 6} meer` : ""
+        ] }),
+        wijzigingen.verwijderd > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \xB7 ",
+          wijzigingen.verwijderd === 1 ? "1 blok verwijderd" : `${wijzigingen.verwijderd} blokken verwijderd`
+        ] }),
+        "."
+      ] }),
+      waarschuwingen.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 rounded-lg bg-amber-50 px-3 py-2 text-amber-900", children: [
+        /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Even nakijken (je kunt ook gewoon publiceren):" }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-1 list-disc pl-5", children: waarschuwingen.map((w, i) => /* @__PURE__ */ jsx("li", { children: w.tekst }, i)) })
+      ] })
+    ] });
+  }
   async function remove(i) {
-    const ok = await confirm({ title: "Blok verwijderen?", confirmLabel: "Verwijderen", tone: "danger" });
-    if (!ok) return;
     const removed = blocks[i];
+    const def = registry.get(String(removed._type));
+    if (def?.essentieel) {
+      const ok = await confirm({
+        title: `${def.label} verwijderen?`,
+        description: def.essentieel,
+        confirmLabel: "Toch verwijderen",
+        tone: "danger"
+      });
+      if (!ok) return;
+    }
     setBlocks(blocks.filter((_, idx) => idx !== i));
     if (selectedKey === removed._key) setSelectedKey(null);
+    const label = def?.label ?? "Blok";
+    toast({ title: `${label} verwijderd`, action: { label: "Ongedaan maken", onClick: () => undo() } });
   }
   const klaarMetBlok = useCallback(() => {
     document.activeElement?.blur();
@@ -898,14 +1001,30 @@ function VisualEditorInner({ onClose }) {
     const def = registry.get(type);
     const base = def?.defaults?.() ?? {};
     const block = { _key: newKey(), _type: type, ...base };
+    if (type === "hero" && blocks.some((b) => b._type === "hero" && String(b.headingLevel ?? "1") === "1")) block.headingLevel = "2";
     insertAfterSelected([block]);
     setSelectedKey(block._key);
+    toonNieuw(block._key);
   }
   function insertAfterSelected(newBlocks) {
-    const sel = blocks.findIndex((b) => b._key === selectedKey);
+    const na = invoegNa ?? selectedKey;
+    const sel = blocks.findIndex((b) => b._key === na);
     const copy = [...blocks];
     copy.splice(sel >= 0 ? sel + 1 : blocks.length, 0, ...newBlocks);
     setBlocks(copy);
+    setInvoegNa(null);
+    const eerste = newBlocks[0]?._key;
+    if (eerste) toonNieuw(eerste);
+  }
+  function toonNieuw(key) {
+    let pogingen = 0;
+    const probeer = () => {
+      const el = document.querySelector(`[data-xicms-block="${CSS.escape(key)}"]`);
+      const doel = el && (el.getBoundingClientRect().height ? el : el.firstElementChild);
+      if (doel) doel.scrollIntoView({ block: "center", behavior: "smooth" });
+      else if (++pogingen < 30) requestAnimationFrame(probeer);
+    };
+    requestAnimationFrame(probeer);
   }
   async function onPublish() {
     document.activeElement?.blur();
@@ -918,7 +1037,10 @@ function VisualEditorInner({ onClose }) {
     const demo = isDemoActive();
     const ok = await confirm({
       title: "Pagina publiceren?",
-      description: demo ? "In deze demo blijft alles in je eigen browser \u2014 er gaat niets echt online." : `De live site wordt bijgewerkt (${d.path}).`,
+      description: /* @__PURE__ */ jsxs(Fragment, { children: [
+        publiceerSamenvatting(d.path, demo, controleerPagina(d, await publicatieContext(siteId))),
+        demo && /* @__PURE__ */ jsx("p", { className: "mt-1", children: "In deze demo blijft alles in je eigen browser \u2014 er gaat niets echt online." })
+      ] }),
       confirmLabel: "Publiceren"
     });
     if (!ok) return;
@@ -941,29 +1063,33 @@ function VisualEditorInner({ onClose }) {
       setPublishing(false);
     }
   }
-  const addOptions = useMemo(() => buildBlockAddOptions(registry.values()), [registry]);
+  const blockKeys = useMemo(() => blocks.map((b) => b._key), [blocks]);
   const selectedIndex = blocks.findIndex((b) => b._key === selectedKey);
   const selected = selectedIndex >= 0 ? blocks[selectedIndex] : null;
   const canUndo = historyRef.current.past.length > 0;
   const canRedo = historyRef.current.future.length > 0;
   const reloadRemote = useCallback(async () => {
     const remote = await getDraftByPath(siteId, path).catch(() => null);
-    if (remote) {
-      mutateDraft(() => remote);
-      lastSavedRef.current = stableStringify(draftPayload(remote));
-      dirtyRef.current = false;
-      setStatus("idle");
+    if (!remote) {
+      toast({ title: "Nieuwste versie laden mislukt", description: "Controleer je verbinding en probeer het opnieuw. Je wijzigingen worden zolang niet opgeslagen.", tone: "error" });
+      return;
     }
+    mutateDraft(() => remote);
+    lastSavedRef.current = stableStringify(draftPayload(remote));
+    dirtyRef.current = false;
+    setStatus("idle");
     setConflict(false);
-  }, [siteId, path, mutateDraft]);
+  }, [siteId, path, mutateDraft, toast]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "xicms-ve__shell", "data-xicms-tooling": "", role: "group", "aria-label": `Pagina bewerken: ${path}`, children: [
     toonStartHint && /* @__PURE__ */ jsxs("div", { className: "xicms-ve-starthint", role: "status", children: [
       /* @__PURE__ */ jsxs("span", { children: [
-        "\u270F\uFE0F Klik het ",
+        "Het ",
         /* @__PURE__ */ jsx("strong", { children: "potlood" }),
-        " naast een tekst om die op de pagina zelf te bewerken; foto's wissel je met ",
-        /* @__PURE__ */ jsx("strong", { children: "\u{1F4F7} Foto wijzigen" }),
-        ". Klaar? ",
+        " bij een blok: bewerk het op de pagina zelf \u2014 tekst, knoppen, kaarten toevoegen. Het ",
+        /* @__PURE__ */ jsx("strong", { children: "tandwiel" }),
+        ": alle instellingen in de zijbalk. Een ",
+        /* @__PURE__ */ jsx("strong", { children: "+" }),
+        " onder een blok voegt iets toe. Klaar? ",
         /* @__PURE__ */ jsx("strong", { children: "Publiceren" }),
         " staat rechtsonder."
       ] }),
@@ -990,7 +1116,7 @@ function VisualEditorInner({ onClose }) {
       /* @__PURE__ */ jsx("span", { className: "xicms-ve__sep", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("span", { className: "xicms-ve__path", title: `Je bewerkt ${name} \u2014 ${path}`, children: path }),
       localeCfg.locales.length > 1 && /* @__PURE__ */ jsxs("span", { className: "xicms-ve__locale", title: "Taal \u2014 in een andere taal dan de standaard bewerk je vertalingen", children: [
-        "\u{1F310}",
+        /* @__PURE__ */ jsx(Icon, { naam: "wereld", grootte: 14 }),
         /* @__PURE__ */ jsx(
           Select,
           {
@@ -1019,18 +1145,18 @@ function VisualEditorInner({ onClose }) {
           title: "Pagina-instellingen (titel, SEO, versies)",
           "aria-label": "Pagina-instellingen",
           "aria-pressed": panelOpen && !selectedKey,
-          children: "\u2699"
+          children: /* @__PURE__ */ jsx(Icon, { naam: "tandwiel", grootte: 15 })
         }
       ),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve__histbtn", disabled: !canUndo, onClick: undo, title: "Ongedaan maken (Ctrl+Z)", "aria-label": "Ongedaan maken (Ctrl+Z)", children: "\u21B6" }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve__histbtn", disabled: !canRedo, onClick: redo, title: "Opnieuw (Ctrl+Shift+Z)", "aria-label": "Opnieuw (Ctrl+Shift+Z)", children: "\u21B7" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve__histbtn", disabled: !canUndo, onClick: undo, title: "Ongedaan maken (Ctrl+Z)", "aria-label": "Ongedaan maken (Ctrl+Z)", children: /* @__PURE__ */ jsx(Icon, { naam: "ongedaan", grootte: 15 }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve__histbtn", disabled: !canRedo, onClick: redo, title: "Opnieuw (Ctrl+Shift+Z)", "aria-label": "Opnieuw (Ctrl+Shift+Z)", children: /* @__PURE__ */ jsx(Icon, { naam: "opnieuw", grootte: 15 }) }),
       status === "none" && /* @__PURE__ */ jsxs("span", { className: "xicms-ve__balkmelding", children: [
         "Nog geen werkversie",
         /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => void handleCreatePage(), children: "+ Pagina aanmaken" })
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "xicms-ve__status", "aria-live": "polite", children: [
         status === "loading" ? "Werkversie laden\u2026" : null,
-        status === "saving" ? "Opslaan\u2026" : status === "saved" ? "\u2713 Bewaard als werkversie" : status === "error" ? "\u26A0 Niet opgeslagen" : ""
+        !online && (status === "saving" || status === "error") ? "\u26A0 Geen verbinding \u2014 je werk wordt bewaard zodra je weer online bent" : status === "saving" ? "Opslaan\u2026" : status === "saved" ? "\u2713 Bewaard als werkversie" : status === "error" ? "\u26A0 Niet opgeslagen \u2014 we proberen het zo opnieuw" : ""
       ] }),
       status === "error" && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => void flushSave().catch(() => setStatus("error")), children: "Opnieuw opslaan" })
     ] }),
@@ -1040,15 +1166,13 @@ function VisualEditorInner({ onClose }) {
       /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConflict(false), children: "Mijn versie behouden" })
     ] }),
     /* @__PURE__ */ jsx("div", { className: `xicms-ve__body${panelOpen ? " is-panel-open" : ""}`, children: panelOpen && /* @__PURE__ */ jsxs("aside", { className: "xicms-ve__panel", children: [
-      /* @__PURE__ */ jsxs("div", { className: "xicms-ve__inserter", children: [
-        /* @__PURE__ */ jsxs("span", { children: [
-          "Toevoegen",
-          selected ? " (na selectie)" : "",
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "xicms-ve__inserter-select", children: /* @__PURE__ */ jsx(Select, { value: "", placeholder: "Kies een blok\u2026", onValueChange: (v) => v && addBlock(v), options: addOptions }) }),
-        /* @__PURE__ */ jsx(PatternInserter, { onInsert: insertAfterSelected })
-      ] }),
+      /* @__PURE__ */ jsx("div", { className: "xicms-ve__inserter", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", size: "sm", onClick: () => {
+        setInvoegNa(null);
+        setKiezerOpen(true);
+      }, children: [
+        "+ Blok of sectie toevoegen",
+        selected ? " (na dit blok)" : ""
+      ] }) }),
       selectedProduct ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
         /* @__PURE__ */ jsxs("div", { className: "xicms-ve__panel-head", children: [
           /* @__PURE__ */ jsx("span", { className: "text-sm text-slate-500", children: "Webwinkel" }),
@@ -1082,10 +1206,11 @@ function VisualEditorInner({ onClose }) {
           /* @__PURE__ */ jsx(
             Button,
             {
+              loading: status === "saving",
               size: "sm",
               variant: status === "saving" || status === "error" ? "primary" : "ghost",
               onClick: () => void flushSave().catch(() => setStatus("error")),
-              children: status === "saving" ? "Opslaan\u2026" : status === "error" ? "\u26A0 Opnieuw opslaan" : "\u2713 Opgeslagen"
+              children: status === "saving" ? "Opslaan" : status === "error" ? "Opnieuw opslaan" : "\u2713 Opgeslagen"
             }
           ),
           /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => setPanelOpen(false), children: "\u2715 Sluiten" })
@@ -1124,6 +1249,19 @@ function VisualEditorInner({ onClose }) {
         },
         onSelect: (m) => {
           if (imgPicker) {
+            const blok = blocksRef.current.find((b) => b._key === imgPicker.key);
+            if (blok?._type === "hero" && imgPicker.field === "imageUrl" && m.width && m.width < 1400) {
+              toast({ title: "Kleine foto voor een openingsbeeld", description: `Deze foto is ${m.width} pixels breed; schermvullend kan hij korrelig ogen. Liefst 1600 pixels of meer.` });
+            }
+            if (blok?._type === "hero" && imgPicker.field === "imageUrl") {
+              const extra = heroBeeldPatch(blok, m.url);
+              if (extra.overlayGradient) {
+                mutateDraft((d) => ({
+                  ...d,
+                  blocks: d.blocks.map((b) => b._key === imgPicker.key ? { ...b, overlayGradient: true } : b)
+                }));
+              }
+            }
             commitInline(imgPicker.key, imgPicker.field, m.url);
             const altField = imgPicker.field.replace(/(^|\.)((image)?[uU]rl)$/, "$1alt");
             if (altField !== imgPicker.field) commitInline(imgPicker.key, altField, m.alt ?? "");
@@ -1141,7 +1279,7 @@ function VisualEditorInner({ onClose }) {
           {
             type: "button",
             className: `xicms-ve-blokknop${b.key === selectedKey ? " is-on" : ""}`,
-            title: `Tekst van ${b.label} bewerken`,
+            title: `${b.label}: op de pagina bewerken`,
             "aria-label": `Tekst van ${b.label} bewerken`,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
@@ -1165,7 +1303,7 @@ function VisualEditorInner({ onClose }) {
           {
             type: "button",
             className: `xicms-ve-blokknop${b.key === selectedKey && panelOpen ? " is-on" : ""}`,
-            title: `Instellingen van ${b.label}`,
+            title: `${b.label}: alle instellingen (zijbalk)`,
             "aria-label": `Instellingen van ${b.label}`,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => {
@@ -1216,8 +1354,8 @@ function VisualEditorInner({ onClose }) {
               onMouseDown: (e) => e.preventDefault(),
               onClick: () => {
                 setSelectedProduct(null);
-                setSelectedKey(b.key);
-                setPanelOpen(true);
+                setInvoegNa(b.key);
+                setKiezerOpen(true);
               },
               children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" }) })
             }
@@ -1294,6 +1432,42 @@ function VisualEditorInner({ onClose }) {
         ] }) })
       ] }, b.key);
     }),
+    draft && !isTranslating && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BlokKader, { sleutels: blockKeys, gekozen: selectedKey, labelVoor: (k) => registry.get(String(blocks.find((b) => b._key === k)?._type ?? ""))?.label ?? "Blok" }),
+      /* @__PURE__ */ jsx(TussenPlus, { sleutels: blockKeys, onKies: (na) => {
+        setInvoegNa(na);
+        setKiezerOpen(true);
+      } })
+    ] }),
+    /* @__PURE__ */ jsx(
+      BlokKiezer,
+      {
+        open: kiezerOpen,
+        onOpenChange: (v) => {
+          setKiezerOpen(v);
+          if (!v) setInvoegNa(null);
+        },
+        onBlok: addBlock,
+        onSectie: insertAfterSelected
+      }
+    ),
+    selectedKey && !isTranslating && (() => {
+      const blok = blocks.find((b) => b._key === selectedKey);
+      if (!blok) return null;
+      return /* @__PURE__ */ jsx(
+        InlineGereedschap,
+        {
+          blok,
+          def: registry.get(String(blok._type)),
+          siteId,
+          onWijzig: (volgend) => setBlocks(blocks.map((b) => b._key === blok._key ? { ...volgend, _key: b._key, _type: b._type } : b)),
+          onInstellingen: () => setPanelOpen(true),
+          onStartVeld: startVeld,
+          onVerwijderd: (wat) => toast({ title: `${wat} weggehaald`, action: { label: "Ongedaan maken", onClick: () => undo() } })
+        },
+        blok._key
+      );
+    })(),
     spots.map((s, i) => {
       const actief = editingIndex === i;
       return /* @__PURE__ */ jsx(
@@ -1382,50 +1556,24 @@ function VisualEditorInner({ onClose }) {
         onClick: () => void onPublish(),
         title: wijzigingen.iets ? "Zet deze wijzigingen op de live site" : "Er is niets veranderd sinds de laatste publicatie",
         children: [
-          /* @__PURE__ */ jsx("span", { className: "xicms-ve-publiceer__label", children: publishing ? "Bezig\u2026" : "Publiceren" }),
+          /* @__PURE__ */ jsx("span", { className: "xicms-ve-publiceer__label", children: publishing ? "Publiceren\u2026" : "Publiceren" }),
           /* @__PURE__ */ jsx("span", { className: "xicms-ve-publiceer__sub", children: wijzigingen.iets ? aantalWijzigingen(wijzigingen) : "niets gewijzigd" })
         ]
       }
     ),
-    fmtBar && /* @__PURE__ */ jsxs("div", { className: "xicms-ve-fmtbar", style: { top: fmtBar.top, left: fmtBar.left }, role: "toolbar", "aria-label": "Tekstopmaak", children: [
-      /* @__PURE__ */ jsx(FmtBtn, { label: /* @__PURE__ */ jsx("b", { children: "B" }), title: "Vet (Ctrl/Cmd+B)", onRun: () => document.execCommand("bold") }),
-      /* @__PURE__ */ jsx(FmtBtn, { label: /* @__PURE__ */ jsx("i", { children: "I" }), title: "Cursief (Ctrl/Cmd+I)", onRun: () => document.execCommand("italic") }),
-      /* @__PURE__ */ jsx(FmtBtn, { label: /* @__PURE__ */ jsx("u", { children: "U" }), title: "Onderstrepen (Ctrl/Cmd+U)", onRun: () => document.execCommand("underline") }),
-      /* @__PURE__ */ jsx(
-        FmtBtn,
-        {
-          label: "\u{1F517}",
-          title: "Link (selecteer eerst tekst; leeg = link verwijderen)",
-          onRun: () => {
-            const url = window.prompt("Link-URL (leeg = link verwijderen)", "https://");
-            if (url === null) return;
-            if (url === "" || url === "https://") document.execCommand("unlink");
-            else document.execCommand("createLink", false, url);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "xicms-ve-fmtbar__sep", "aria-hidden": true }),
-      /* @__PURE__ */ jsx(FmtBtn, { label: "H2", title: "Grote kop", onRun: () => document.execCommand("formatBlock", false, "<h2>") }),
-      /* @__PURE__ */ jsx(FmtBtn, { label: "H3", title: "Kleine kop", onRun: () => document.execCommand("formatBlock", false, "<h3>") }),
-      /* @__PURE__ */ jsx(FmtBtn, { label: "\xB6", title: "Normale tekst", onRun: () => document.execCommand("formatBlock", false, "<p>") }),
-      /* @__PURE__ */ jsx("span", { className: "xicms-ve-fmtbar__sep", "aria-hidden": true }),
-      /* @__PURE__ */ jsx(FmtBtn, { label: "\u2022", title: "Opsomming", onRun: () => document.execCommand("insertUnorderedList") })
-    ] })
+    rijk && /* @__PURE__ */ jsx(
+      InlineRijkeTekst,
+      {
+        el: rijk.el,
+        siteId,
+        onCommit: (html) => commitText(rijk.key, rijk.field, html),
+        onKlaar: stopRijk,
+        flushRef: rijkFlushRef
+      },
+      `${rijk.key}:${rijk.field}`
+    )
   ] });
 }
-function FmtBtn({ label, title, onRun }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      title,
-      "aria-label": title,
-      onMouseDown: (e) => e.preventDefault(),
-      onClick: onRun,
-      children: label
-    }
-  );
-}
 function MeterRegel({ m }) {
   const kleur = m.toon === "goed" ? "text-emerald-700" : m.toon === "lang" || m.toon === "leeg" ? "text-amber-700" : "text-slate-500";
   return /* @__PURE__ */ jsx("p", { className: `mt-1 text-xs ${kleur}`, children: m.tekst });
@@ -1437,7 +1585,7 @@ function PageSettings({
 }) {
   const seo = draft.seo ?? {};
   const { toast } = useToast();
-  const [previewUrl, setPreviewUrl] = useState(null);
+  const [previewLink, setPreviewLink] = useState(null);
   const [bezig, setBezig] = useState(false);
   async function maakPreviewLink() {
     const { getFirebaseApp } = await import("../../firebase/client.js");
@@ -1447,15 +1595,15 @@ function PageSettings({
     setBezig(true);
     try {
       const res = await callable(app, "createPreviewLink")({ siteId, path: draft.path });
-      setPreviewUrl(res.data.url);
+      setPreviewLink(res.data);
       try {
         await navigator.clipboard?.writeText(res.data.url);
-        toast({ title: "Preview-link gekopieerd", description: "Zeven dagen geldig; wie hem opent ziet de nieuwste stand, ook wat nog niet live is.", tone: "success" });
+        toast({ title: "Voorbeeldlink gekopieerd", description: "Zeven dagen geldig; wie hem opent ziet de nieuwste stand, ook wat nog niet live is.", tone: "success" });
       } catch {
-        toast({ title: "Preview-link gemaakt", tone: "success" });
+        toast({ title: "Voorbeeldlink gemaakt", tone: "success" });
       }
     } catch (e) {
-      toast({ title: "Preview-link mislukt", description: e.message, tone: "error" });
+      toast({ title: "Voorbeeldlink mislukt", description: e.message, tone: "error" });
     } finally {
       setBezig(false);
     }
@@ -1487,9 +1635,9 @@ function PageSettings({
         }
       ),
       !isDemoActive() && /* @__PURE__ */ jsxs("div", { className: "grid gap-1 border-t border-slate-200 pt-3", children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", disabled: bezig, onClick: () => void maakPreviewLink(), children: bezig ? "Bezig\u2026" : "\u{1F517} Preview-link delen" }),
+        /* @__PURE__ */ jsx(Button, { loading: bezig, variant: "secondary", size: "sm", disabled: bezig, onClick: () => void maakPreviewLink(), children: "Voorbeeldlink delen" }),
         /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-500", children: "Laat iemand zonder inlog meekijken naar de werkversie. Zeven dagen geldig, geen toegang tot het beheer." }),
-        previewUrl && /* @__PURE__ */ jsx(Input, { readOnly: true, value: previewUrl, className: "text-xs", onFocus: (e) => e.currentTarget.select() })
+        previewLink && /* @__PURE__ */ jsx(PreviewLinkResultaat, { link: previewLink, titel: draft.title })
       ] })
     ] })
   ] });
@@ -1508,8 +1656,8 @@ function PageTranslationSettings({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "mt-2 grid gap-3", children: [
       /* @__PURE__ */ jsx(Field, { label: "Paginatitel", hint: `Origineel: ${draft.title ?? ""}`, children: /* @__PURE__ */ jsx(Input, { value: ov["title"] ?? "", placeholder: draft.title ?? "", onChange: (e) => onTranslate("title", e.target.value) }) }),
-      /* @__PURE__ */ jsx(Field, { label: "SEO-titel", children: /* @__PURE__ */ jsx(Input, { value: ov["seo.title"] ?? "", placeholder: draft.seo?.title ?? "", onChange: (e) => onTranslate("seo.title", e.target.value) }) }),
-      /* @__PURE__ */ jsx(Field, { label: "SEO-omschrijving", children: /* @__PURE__ */ jsx(Textarea, { rows: 3, value: ov["seo.description"] ?? "", placeholder: draft.seo?.description ?? "", onChange: (e) => onTranslate("seo.description", e.target.value) }) })
+      /* @__PURE__ */ jsx(Field, { label: "Titel in Google", children: /* @__PURE__ */ jsx(Input, { value: ov["seo.title"] ?? "", placeholder: draft.seo?.title ?? "", onChange: (e) => onTranslate("seo.title", e.target.value) }) }),
+      /* @__PURE__ */ jsx(Field, { label: "Omschrijving in Google", children: /* @__PURE__ */ jsx(Textarea, { rows: 3, value: ov["seo.description"] ?? "", placeholder: draft.seo?.description ?? "", onChange: (e) => onTranslate("seo.description", e.target.value) }) })
     ] })
   ] });
 }
@@ -1526,7 +1674,7 @@ function VersionsPanel({
   const restore = async (versionId) => {
     const ok = await confirm({
       title: "Versie herstellen?",
-      description: "De snapshot vervangt je huidige werkversie (ongedaan te maken met Ctrl+Z). De live site verandert pas bij Publiceren.",
+      description: "Deze versie vervangt je huidige werkversie (ongedaan te maken met Ctrl+Z). De live site verandert pas bij Publiceren.",
       confirmLabel: "Herstellen"
     });
     if (!ok) return;
@@ -1542,7 +1690,7 @@ function VersionsPanel({
     /* @__PURE__ */ jsx("ul", { className: "mt-2 grid gap-1 text-sm", children: versions.slice(0, 10).map((v) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         v.label ?? (v.kind === "publish" ? "Gepubliceerd" : v.kind ?? "Snapshot"),
-        formatVersionDate(v.createdAt) && /* @__PURE__ */ jsxs("span", { className: "text-slate-400", children: [
+        formatVersionDate(v.createdAt) && /* @__PURE__ */ jsxs("span", { className: "text-slate-500", children: [
           " \xB7 ",
           formatVersionDate(v.createdAt)
         ] })