@xiwebdesign/xicms-core 7.7.0 → 7.8.0

package/dist/admin/shop/productClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/shop/productClient.ts"],"sourcesContent":["\"use client\";\n\nimport { doc, getDoc, onSnapshot, updateDoc } from \"firebase/firestore\";\nimport { getDb } from \"../../firebase/client\";\nimport type { Product } from \"../../schema/shop\";\n\nexport type StoredProduct = Product & { id: string };\n\n/**\n * Eén product, live — voor het paneel dat de bewerkmodus opent bij een productblok.\n *\n * Een abonnement en geen eenmalige lezing: hetzelfde product kan tegelijk openstaan in het\n * Webwinkel-paneel of in een tweede tabblad, en dan hoort dit paneel niet met een oude prijs te\n * blijven staan.\n */\nexport function subscribeProduct(\n  siteId: string,\n  productId: string,\n  cb: (p: StoredProduct | null) => void,\n): () => void {\n  const db = getDb();\n  if (!db) {\n    cb(null);\n    return () => {};\n  }\n  return onSnapshot(doc(db, \"sites\", siteId, \"products\", productId), (snap) => {\n    cb(snap.exists() ? ({ id: snap.id, ...(snap.data() as Product) }) : null);\n  });\n}\n\n/**\n * Schrijf één veld van een product weg — de inline-tegenhanger van het volledige formulier.\n *\n * ── WAAROM DIT ANDERS IS DAN EEN TEKST OP EEN PAGINA ──────────────────────────────────────\n *\n * Een blokveld gaat naar de WERKVERSIE van die ene pagina en wordt pas zichtbaar als je\n * publiceert. Een product heeft geen werkversie: het staat in de productencollectie en wordt door\n * elke pagina gelezen die het toont. Wie hier de naam wijzigt, wijzigt hem dus METEEN en OVERAL —\n * op de cataloguspagina, in de zoekresultaten, op de bestelbevestiging.\n *\n * Dat verschil is niet weg te poetsen zonder een tweede publicatiestroom voor producten te bouwen,\n * en dat zou de webwinkel ingewikkelder maken dan hij is. Het staat daarom expliciet in de tekst\n * bij het potlood, zodat het een keuze is en geen verrassing.\n *\n * `updateDoc` en niet `setDoc`: een product heeft velden die dit pad niet kent (varianten,\n * voorraad, personalisatie). Een hele-document-schrijfactie zou die stilzwijgend wissen.\n */\nexport async function setProductField(\n  siteId: string,\n  productId: string,\n  field: string,\n  value: unknown,\n): Promise<void> {\n  const db = getDb();\n  if (!db) throw new Error(\"Firebase niet geconfigureerd.\");\n  await updateDoc(doc(db, \"sites\", siteId, \"products\", productId), { [field]: value });\n}\n\n/** Eenmalige lezing — voor het moment waarop de editor moet weten wat er nú staat. */\nexport async function getProduct(siteId: string, productId: string): Promise<StoredProduct | null> {\n  const db = getDb();\n  if (!db) return null;\n  const snap = await getDoc(doc(db, \"sites\", siteId, \"products\", productId));\n  return snap.exists() ? ({ id: snap.id, ...(snap.data() as Product) }) : null;\n}\n"],"mappings":";AAEA,SAAS,KAAK,QAAQ,YAAY,iBAAiB;AACnD,SAAS,aAAa;AAYf,SAAS,iBACd,QACA,WACA,IACY;AACZ,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,IAAI;AACP,OAAG,IAAI;AACP,WAAO,MAAM;AAAA,IAAC;AAAA,EAChB;AACA,SAAO,WAAW,IAAI,IAAI,SAAS,QAAQ,YAAY,SAAS,GAAG,CAAC,SAAS;AAC3E,OAAG,KAAK,OAAO,IAAK,EAAE,IAAI,KAAK,IAAI,GAAI,KAAK,KAAK,EAAc,IAAK,IAAI;AAAA,EAC1E,CAAC;AACH;AAmBA,eAAsB,gBACpB,QACA,WACA,OACA,OACe;AACf,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,GAAI,OAAM,IAAI,MAAM,+BAA+B;AACxD,QAAM,UAAU,IAAI,IAAI,SAAS,QAAQ,YAAY,SAAS,GAAG,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC;AACrF;AAGA,eAAsB,WAAW,QAAgB,WAAkD;AACjG,QAAM,KAAK,MAAM;AACjB,MAAI,CAAC,GAAI,QAAO;AAChB,QAAM,OAAO,MAAM,OAAO,IAAI,IAAI,SAAS,QAAQ,YAAY,SAAS,CAAC;AACzE,SAAO,KAAK,OAAO,IAAK,EAAE,IAAI,KAAK,IAAI,GAAI,KAAK,KAAK,EAAc,IAAK;AAC1E;","names":[]}

package/dist/admin/visual/VisualEditor.js

@@ -12,12 +12,16 @@ import { useNestedDialogOpen } from "../lib/useNestedDialog.js";
 import { useThemeVars } from "../../XiCMSProvider.js";
 import { buildBlockAddOptions } from "../../blocks/registry.js";
 import DOMPurify from "dompurify";
-import { createPage, getDraftByPath, saveDraft, publishPage, subscribeDraft, subscribeVersions, restoreVersion } from "../lib/pagesClient.js";
+import { createPage, getDraftByPath, getPublishedPage, saveDraft, publishPage, 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";
 import { builtinBlockEditors, GenericEditor } from "../blockEditors/index.js";
 import { StyleEditor } from "../blockEditors/StyleEditor.js";
 import { siteLocales, parseLocaleSlugs, localizeBlocks } from "../../i18n/overlay.js";
 import { useEditor } from "../../editor/EditorProvider.js";
+import { AdminModes } 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";
@@ -97,11 +101,13 @@ function VisualEditorInner({ onClose }) {
   const [panelOpen, setPanelOpen] = useState(false);
   const [status, setStatus] = useState("loading");
   const [selectedKey, setSelectedKey] = useState(null);
+  const [selectedProduct, setSelectedProduct] = useState(null);
   const [publishing, setPublishing] = useState(false);
   const [imgPicker, setImgPicker] = useState(null);
   const firstSave = useRef(true);
   const canvasRef = useRef(null);
   const [conflict, setConflict] = useState(false);
+  const [liveBlocks, setLiveBlocks] = useState(void 0);
   const { vars: themeVars, darkAuto } = useThemeVars();
   const nestedDialogOpen = useNestedDialogOpen();
   const { containerRef, focusFirst } = useFocusTrap({ isActive: !nestedDialogOpen });
@@ -215,6 +221,20 @@ function VisualEditorInner({ onClose }) {
       active = false;
     };
   }, [siteId, path]);
+  useEffect(() => {
+    const id = draft?.id;
+    if (!id) {
+      setLiveBlocks(void 0);
+      return;
+    }
+    let active = true;
+    getPublishedPage(siteId, id).then((pagina) => {
+      if (active) setLiveBlocks(pagina?.blocks ?? null);
+    }).catch(() => active && setLiveBlocks(void 0));
+    return () => {
+      active = false;
+    };
+  }, [siteId, draft?.id]);
   const handleCreatePage = useCallback(async () => {
     setStatus("loading");
     try {
@@ -254,6 +274,12 @@ function VisualEditorInner({ onClose }) {
     () => isTranslating ? localizeBlocks(blocks, overlay) : blocks,
     [blocks, isTranslating, overlay]
   );
+  const nietLiveRef = useRef(false);
+  const wijzigingen = useMemo(
+    () => liveBlocks === void 0 ? GEEN_WIJZIGINGEN : bepaalWijzigingen(blocks, liveBlocks),
+    [blocks, liveBlocks]
+  );
+  nietLiveRef.current = wijzigingen.iets;
   const { publishDraft } = useEditor();
   const laatstGepubliceerd = useRef("");
   useEffect(() => {
@@ -320,28 +346,41 @@ function VisualEditorInner({ onClose }) {
   );
   const registryRef = useRef(registry);
   registryRef.current = registry;
-  const [gears, setGears] = useState([]);
+  function veiligeBovenkant() {
+    let onderkant = 0;
+    for (const el of Array.from(document.querySelectorAll("body *"))) {
+      const pos = getComputedStyle(el).position;
+      if (pos !== "fixed" && pos !== "sticky") continue;
+      const r = el.getBoundingClientRect();
+      if (r.height === 0 || r.top > 4) continue;
+      onderkant = Math.max(onderkant, r.bottom);
+    }
+    return onderkant;
+  }
+  const [blokknoppen, setBlokknoppen] = useState([]);
   useEffect(() => {
     if (!draft) {
-      setGears((v) => v.length === 0 ? v : []);
+      setBlokknoppen((v) => v.length === 0 ? v : []);
       return;
     }
     const meet = () => {
+      const veilig = veiligeBovenkant();
       const gevonden = [];
       for (const el of Array.from(document.querySelectorAll("[data-xicms-block]"))) {
         const key = el.dataset.xicmsBlock;
         if (!key) continue;
         const r = el.getBoundingClientRect();
         if (r.width === 0 && r.height === 0) continue;
+        if (r.bottom < veilig || r.top > window.innerHeight) continue;
         const type = el.dataset.xicmsBlockType ?? "";
         gevonden.push({
           key,
-          top: Math.max(r.top + 8, 56),
-          left: Math.max(r.right - 36, 8),
+          top: Math.max(r.top + 8, veilig + 8),
+          left: Math.max(r.right - 62, 8),
           label: registryRef.current.get(type)?.label ?? type
         });
       }
-      setGears((vorige) => {
+      setBlokknoppen((vorige) => {
         if (vorige.length === gevonden.length && vorige.every((v, i) => v.key === gevonden[i].key && v.top === gevonden[i].top && v.left === gevonden[i].left)) {
           return vorige;
         }
@@ -356,9 +395,117 @@ function VisualEditorInner({ onClose }) {
       window.removeEventListener("resize", meet);
     };
   }, [draft, displayBlocks, registryRef]);
+  const [productKnop, setProductKnop] = useState(null);
+  useEffect(() => {
+    if (!draft) return;
+    const onOver = (e) => {
+      const doel = e.target?.closest?.("[data-xicms-product]");
+      if (!doel) {
+        const naarKnop = e.target?.closest?.(".xicms-ve-blokknoppen");
+        if (!naarKnop) setProductKnop(null);
+        return;
+      }
+      const id = doel.dataset.xicmsProduct;
+      if (!id) return;
+      const r = doel.getBoundingClientRect();
+      setProductKnop(
+        (v) => v && v.id === id && v.top === Math.max(r.top + 8, 44) && v.left === Math.max(r.right - 62, 8) ? v : { id, top: Math.max(r.top + 8, 44), left: Math.max(r.right - 62, 8) }
+      );
+    };
+    document.addEventListener("mouseover", onOver, true);
+    return () => document.removeEventListener("mouseover", onOver, true);
+  }, [draft]);
+  const productBewerkRef = useRef(null);
+  const startProductInline = useCallback(
+    (productId) => {
+      const host = document.querySelector(`[data-xicms-product="${CSS.escape(productId)}"]`);
+      const el = host?.querySelector("[data-xicms-product-edit]");
+      if (!el) {
+        toast({
+          title: "Hier valt niets te typen",
+          description: "Gebruik het tandwiel voor prijs, foto's, varianten en voorraad."
+        });
+        return;
+      }
+      const veld = el.dataset.xicmsProductEdit;
+      if (!veld) return;
+      const origineel = el.textContent ?? "";
+      el.setAttribute("contenteditable", "true");
+      el.setAttribute("spellcheck", "true");
+      el.classList.add("is-editing");
+      productBewerkRef.current = el;
+      const stop = () => {
+        el.removeAttribute("contenteditable");
+        el.classList.remove("is-editing");
+        el.removeEventListener("blur", opBlur);
+        el.removeEventListener("keydown", opToets);
+        if (productBewerkRef.current === el) productBewerkRef.current = null;
+      };
+      const opBlur = () => {
+        const waarde = el.textContent ?? "";
+        stop();
+        if (waarde === origineel) return;
+        void setProductField(siteId, productId, veld, waarde).then(
+          () => toast({
+            title: "Product bijgewerkt",
+            description: "Producten hebben geen werkversie: dit staat meteen live, op elke pagina.",
+            tone: "success"
+          })
+        ).catch((err) => {
+          el.textContent = origineel;
+          toast({ title: "Opslaan mislukt", description: err.message, tone: "error" });
+        });
+      };
+      const opToets = (ev) => {
+        if (ev.key === "Escape") {
+          ev.stopPropagation();
+          el.textContent = origineel;
+          el.blur();
+        } else if (ev.key === "Enter") {
+          ev.preventDefault();
+          el.blur();
+        }
+      };
+      el.addEventListener("blur", opBlur);
+      el.addEventListener("keydown", opToets);
+      el.focus();
+      const selection = window.getSelection();
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      range.collapse(false);
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    },
+    [siteId, toast]
+  );
+  useEffect(() => {
+    if (!draft) return;
+    const gemarkeerd = [];
+    const markeer = (el, klasse) => {
+      if (!el) return;
+      el.classList.add(klasse);
+      gemarkeerd.push(el);
+    };
+    for (const key of wijzigingen.blokken) {
+      markeer(document.querySelector(`[data-xicms-block="${CSS.escape(key)}"]`), "xicms-ve-nieuw");
+    }
+    for (const [key, velden] of wijzigingen.velden) {
+      const host = document.querySelector(`[data-xicms-block="${CSS.escape(key)}"]`);
+      if (!host) continue;
+      for (const veld of velden) {
+        host.querySelectorAll(`[data-xicms-edit="${CSS.escape(veld)}"]`).forEach((el) => markeer(el, "xicms-ve-gewijzigd"));
+      }
+    }
+    return () => {
+      for (const el of gemarkeerd) {
+        el.classList.remove("xicms-ve-nieuw", "xicms-ve-gewijzigd");
+      }
+    };
+  }, [draft, wijzigingen, displayBlocks]);
   const [spots, setSpots] = useState([]);
   const targetsRef = useRef([]);
   const editingRef = useRef(null);
+  const wilInlineRef = useRef(false);
   const stopInline = useCallback((el) => {
     el.removeAttribute("contenteditable");
     el.classList.remove("is-editing");
@@ -420,8 +567,10 @@ function VisualEditorInner({ onClose }) {
         });
       }
       el.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") el.blur();
-        else if (!html && e.key === "Enter") {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          el.blur();
+        } else if (!html && e.key === "Enter") {
           e.preventDefault();
           el.blur();
         }
@@ -454,6 +603,16 @@ function VisualEditorInner({ onClose }) {
       measure();
     };
     apply();
+    if (wilInlineRef.current) {
+      wilInlineRef.current = false;
+      if (targetsRef.current.length > 0) startInline(0);
+      else {
+        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."
+        });
+      }
+    }
     const obs = new MutationObserver(() => {
       if (!draggingRef.current) apply();
     });
@@ -478,7 +637,7 @@ function VisualEditorInner({ onClose }) {
       targetsRef.current = [];
       setSpots([]);
     };
-  }, [selectedKey, commitText, positionFmtBar, stopInline]);
+  }, [selectedKey, commitText, positionFmtBar, stopInline, startInline, toast]);
   const dirtySinceRef = useRef(null);
   useEffect(() => {
     if (!draft) return;
@@ -507,7 +666,7 @@ function VisualEditorInner({ onClose }) {
   }, [draft, siteId, conflict]);
   useEffect(() => {
     const beforeUnload = (e) => {
-      if (dirtyRef.current) {
+      if (dirtyRef.current || nietLiveRef.current) {
         e.preventDefault();
         e.returnValue = "";
       }
@@ -648,12 +807,24 @@ function VisualEditorInner({ onClose }) {
     setConflict(false);
   }, [siteId, path, mutateDraft]);
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "xicms-ve__shell", role: "group", "aria-label": `Pagina bewerken: ${path}`, children: [
-    /* @__PURE__ */ jsxs("header", { className: "xicms-ve__bar", children: [
-      /* @__PURE__ */ jsxs("strong", { className: "xicms-ve__title", children: [
-        "Bewerken \xB7 ",
-        name
-      ] }),
-      /* @__PURE__ */ jsx("span", { className: "xicms-ve__path", children: path }),
+    /* @__PURE__ */ jsxs("header", { className: "xicms-ve__bar", role: "toolbar", "aria-label": "Beheer", children: [
+      /* @__PURE__ */ jsx("span", { className: "xicms-editbar__brand", children: isDemoActive() ? "XiCMS \xB7 demo" : "XiCMS" }),
+      /* @__PURE__ */ jsx(
+        AdminModes,
+        {
+          actief: "bewerken",
+          voorSwitch: (m) => {
+            if (m === "live" && nietLiveRef.current) {
+              toast({
+                title: "Nog niet gepubliceerd",
+                description: `${aantalWijzigingen(wijzigingen)} blijft bewaard als werkversie. Je ziet ze weer zodra je terug naar Bewerken gaat.`
+              });
+            }
+          }
+        }
+      ),
+      /* @__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(
@@ -695,13 +866,9 @@ function VisualEditorInner({ onClose }) {
       ] }),
       /* @__PURE__ */ jsxs("span", { className: "xicms-ve__status", "aria-live": "polite", children: [
         status === "loading" ? "Werkversie laden\u2026" : null,
-        status === "saving" ? "Opslaan\u2026" : status === "saved" ? "\u2713 Opgeslagen" : status === "error" ? "\u26A0 Niet opgeslagen" : ""
+        status === "saving" ? "Opslaan\u2026" : status === "saved" ? "\u2713 Bewaard als werkversie" : status === "error" ? "\u26A0 Niet opgeslagen" : ""
       ] }),
-      status === "error" && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => void flushSave().catch(() => setStatus("error")), children: "Opnieuw opslaan" }),
-      /* @__PURE__ */ jsxs("div", { className: "xicms-ve__bar-actions", children: [
-        /* @__PURE__ */ jsx(Button, { size: "sm", disabled: publishing || !draft, onClick: onPublish, children: publishing ? "Bezig\u2026" : "Publiceren" }),
-        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: handleClose, children: "Sluiten" })
-      ] })
+      status === "error" && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => void flushSave().catch(() => setStatus("error")), children: "Opnieuw opslaan" })
     ] }),
     conflict && /* @__PURE__ */ jsxs("div", { className: "xicms-ve__conflict", role: "alert", children: [
       /* @__PURE__ */ jsx("span", { children: "\u26A0 Deze pagina is intussen ergens anders gewijzigd (andere tab of collega). Doorwerken kan die wijzigingen overschrijven." }),
@@ -718,7 +885,16 @@ function VisualEditorInner({ onClose }) {
         /* @__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 })
       ] }),
-      selected && isTranslating ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+      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" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
+            setSelectedProduct(null);
+            setPanelOpen(false);
+          }, children: "\u2715 Sluiten" })
+        ] }),
+        /* @__PURE__ */ jsx(ProductPaneel, { siteId, productId: selectedProduct })
+      ] }) : selected && isTranslating ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
         /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold", children: [
           registry.get(selected._type)?.label ?? selected._type,
           " \u2014 vertaling (",
@@ -792,26 +968,46 @@ function VisualEditorInner({ onClose }) {
         }
       }
     ),
-    gears.map((g) => /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: `xicms-ve-gear${g.key === selectedKey ? " is-on" : ""}`,
-        style: { top: g.top, left: g.left },
-        title: `Instellingen van ${g.label}`,
-        "aria-label": `Instellingen van ${g.label}`,
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => {
-          setSelectedKey(g.key);
-          setPanelOpen(true);
-        },
-        children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
-          /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
-        ] })
-      },
-      g.key
-    )),
+    blokknoppen.map((b) => /* @__PURE__ */ jsxs("div", { className: "xicms-ve-blokknoppen", style: { top: b.top, left: b.left }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `xicms-ve-blokknop${b.key === selectedKey ? " is-on" : ""}`,
+          title: `Tekst van ${b.label} bewerken`,
+          "aria-label": `Tekst van ${b.label} bewerken`,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            wilInlineRef.current = true;
+            setSelectedProduct(null);
+            setSelectedKey(b.key);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("path", { d: "M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" }),
+            /* @__PURE__ */ jsx("path", { d: "M14.5 6.5l3 3" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `xicms-ve-blokknop${b.key === selectedKey && panelOpen ? " is-on" : ""}`,
+          title: `Instellingen van ${b.label}`,
+          "aria-label": `Instellingen van ${b.label}`,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            setSelectedProduct(null);
+            setSelectedKey(b.key);
+            setPanelOpen(true);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+            /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+          ] })
+        }
+      )
+    ] }, b.key)),
     spots.map((s, i) => /* @__PURE__ */ jsx(
       "button",
       {
@@ -831,6 +1027,63 @@ function VisualEditorInner({ onClose }) {
       },
       i
     )),
+    productKnop && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "xicms-ve-blokknoppen is-product",
+        style: { top: productKnop.top, left: productKnop.left },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "xicms-ve-blokknop",
+              title: "Productnaam bewerken (staat meteen live)",
+              "aria-label": "Productnaam bewerken",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => startProductInline(productKnop.id),
+              children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("path", { d: "M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" }),
+                /* @__PURE__ */ jsx("path", { d: "M14.5 6.5l3 3" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `xicms-ve-blokknop${selectedProduct === productKnop.id ? " is-on" : ""}`,
+              title: "Product bewerken: prijs, foto's, varianten, voorraad",
+              "aria-label": "Product bewerken",
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => {
+                setSelectedKey(null);
+                setSelectedProduct(productKnop.id);
+                setPanelOpen(true);
+              },
+              children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "13", height: "13", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    draft && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `xicms-ve-publiceer${wijzigingen.iets ? " is-klaar" : ""}`,
+        disabled: publishing || !wijzigingen.iets,
+        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__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") }),