@xiwebdesign/xicms-core 4.17.1

package/dist/admin/visual/VisualEditor.js

@@ -0,0 +1,597 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@xiwebdesign/xicms-core/admin.css";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useSiteConfig } from "../../config";
+import { useRegistry } from "../../blocks/context";
+import { BlockErrorBoundary } from "../../blocks/BlockErrorBoundary";
+import { InlineImageEditProvider } from "../../media/ImageContext";
+import { MediaPickerDialog } from "../media/MediaPicker";
+import { EmptyState } from "@astryxdesign/core/EmptyState";
+import { buildBlockAddOptions } from "../../blocks/registry";
+import { getDraftByPath, saveDraft, publishPage, subscribeDraft, subscribeVersions, restoreVersion } from "../lib/pagesClient";
+import { isDemoActive } from "../../demo/demoStore";
+import { builtinBlockEditors, GenericEditor } from "../blockEditors";
+import { StyleEditor } from "../blockEditors/StyleEditor";
+import { reorderBlocks } from "./reorder";
+import { PatternInserter } from "../patterns/PatternInserter";
+import { Button, Field, Input, Textarea } from "../ui/primitives";
+import { Select } from "../ui/select";
+import { ToastProvider, useToast } from "../ui/toast";
+import { ConfirmHost, useConfirm } from "../ui/ConfirmDialog";
+const INLINE_FIELDS = {
+  hero: [
+    { selector: ".xicms-hero__title", field: "title" },
+    { selector: ".xicms-hero__sub", field: "subtitle" }
+  ]
+};
+const GLOBAL_INLINE = [
+  { selector: ".xicms-richtext", field: "html", html: true },
+  { selector: "[data-xicms-edit]", field: "", html: false, fromData: true }
+];
+function getPath(obj, path) {
+  return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], obj);
+}
+function setPath(obj, path, value) {
+  const keys = path.split(".");
+  const clone = (v) => Array.isArray(v) ? [...v] : v && typeof v === "object" ? { ...v } : v;
+  const root = clone(obj);
+  let cur = root;
+  for (let i = 0; i < keys.length - 1; i++) {
+    cur[keys[i]] = clone(cur[keys[i]] ?? {});
+    cur = cur[keys[i]];
+  }
+  cur[keys[keys.length - 1]] = value;
+  return root;
+}
+function newKey() {
+  return (globalThis.crypto?.randomUUID?.() ?? `b${Date.now()}${Math.random()}`).slice(0, 12);
+}
+function stableStringify(value) {
+  if (Array.isArray(value)) return `[${value.map(stableStringify).join(",")}]`;
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value).filter(([, v]) => v !== void 0).sort(([a], [b]) => a < b ? -1 : 1);
+    return `{${entries.map(([k, v]) => `${JSON.stringify(k)}:${stableStringify(v)}`).join(",")}}`;
+  }
+  return JSON.stringify(value) ?? "null";
+}
+function VisualEditor({ onClose }) {
+  return /* @__PURE__ */ jsx("div", { className: "xicms-admin xicms-ve", children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsx(ConfirmHost, { children: /* @__PURE__ */ jsx(VisualEditorInner, { onClose }) }) }) });
+}
+function VisualEditorInner({ onClose }) {
+  const { siteId, name } = useSiteConfig();
+  const registry = useRegistry();
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  const path = useMemo(() => typeof window !== "undefined" ? window.location.pathname || "/" : "/", []);
+  const [draft, setDraft] = useState(null);
+  const [status, setStatus] = useState("loading");
+  const [selectedKey, setSelectedKey] = 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 [dragIndex, setDragIndex] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
+  const draggingRef = useRef(false);
+  const endDrag = useCallback(() => {
+    draggingRef.current = false;
+    setDragIndex(null);
+    setDropIndex(null);
+  }, []);
+  const draftRef = useRef(null);
+  const dirtyRef = useRef(false);
+  const lastSavedRef = useRef(null);
+  useEffect(() => {
+    draftRef.current = draft;
+  }, [draft]);
+  const historyRef = useRef({ past: [], future: [], lastPush: 0 });
+  const [, setHistVersion] = useState(0);
+  const pushHistory = useCallback((prev, coalesce) => {
+    const h = historyRef.current;
+    const now = Date.now();
+    if (!(coalesce && now - h.lastPush < 800 && h.past.length > 0)) {
+      h.past.push(prev);
+      if (h.past.length > 100) h.past.shift();
+    }
+    h.lastPush = now;
+    h.future = [];
+    setHistVersion((v) => v + 1);
+  }, []);
+  const mutateDraft = useCallback(
+    (updater, opts) => {
+      const d = draftRef.current;
+      if (!d) return;
+      const next = updater(d);
+      if (next === d) return;
+      pushHistory(d, opts?.coalesce ?? false);
+      draftRef.current = next;
+      setDraft(next);
+    },
+    [pushHistory]
+  );
+  const undo = useCallback(() => {
+    const h = historyRef.current;
+    const d = draftRef.current;
+    const prev = h.past.pop();
+    if (!prev || !d) return;
+    h.future.push(d);
+    h.lastPush = 0;
+    draftRef.current = prev;
+    setDraft(prev);
+    setHistVersion((v) => v + 1);
+  }, []);
+  const redo = useCallback(() => {
+    const h = historyRef.current;
+    const d = draftRef.current;
+    const next = h.future.pop();
+    if (!next || !d) return;
+    h.past.push(d);
+    h.lastPush = 0;
+    draftRef.current = next;
+    setDraft(next);
+    setHistVersion((v) => v + 1);
+  }, []);
+  const draftPayload = (d) => ({
+    blocks: d.blocks,
+    title: d.title,
+    slug: d.slug,
+    path: d.path,
+    seo: d.seo
+  });
+  const flushSave = useCallback(async () => {
+    const d = draftRef.current;
+    if (!d || !dirtyRef.current) return;
+    const payload = draftPayload(d);
+    await saveDraft(siteId, d.id, payload);
+    lastSavedRef.current = stableStringify(payload);
+    if (draftRef.current === d) {
+      dirtyRef.current = false;
+      setStatus("saved");
+    }
+  }, [siteId]);
+  const handleClose = useCallback(() => {
+    void flushSave().finally(() => onClose());
+  }, [flushSave, onClose]);
+  useEffect(() => {
+    let active = true;
+    getDraftByPath(siteId, path).then((d) => {
+      if (!active) return;
+      if (d) {
+        setDraft(d);
+        lastSavedRef.current = stableStringify({ blocks: d.blocks, title: d.title, slug: d.slug, path: d.path, seo: d.seo });
+        setStatus("idle");
+      } else {
+        setStatus("none");
+      }
+    }).catch(() => active && setStatus("none"));
+    return () => {
+      active = false;
+    };
+  }, [siteId, path]);
+  const draftId = draft?.id;
+  useEffect(() => {
+    if (!draftId) return;
+    return subscribeDraft(siteId, draftId, (remote, meta) => {
+      if (!meta.fromServer || !remote) return;
+      const remotePayload = stableStringify({ blocks: remote.blocks, title: remote.title, slug: remote.slug, path: remote.path, seo: remote.seo });
+      const local = draftRef.current;
+      const localPayload = local ? stableStringify(draftPayload(local)) : null;
+      if (remotePayload !== lastSavedRef.current && remotePayload !== localPayload) setConflict(true);
+    });
+  }, [siteId, draftId]);
+  const blocks = draft?.blocks ?? [];
+  const commitInline = useCallback(
+    (key, field, value) => {
+      mutateDraft(
+        (d) => {
+          const bl = d.blocks;
+          const idx = bl.findIndex((x) => x._key === key);
+          if (idx < 0 || getPath(bl[idx], field) === value) return d;
+          const next = [...bl];
+          next[idx] = setPath(next[idx], field, value);
+          return { ...d, blocks: next };
+        },
+        { coalesce: true }
+      );
+    },
+    [mutateDraft]
+  );
+  useEffect(() => {
+    if (!selectedKey) return;
+    const host = canvasRef.current?.querySelector(`[data-ve-content="${selectedKey}"]`);
+    if (!host) return;
+    const type = blocks.find((b) => b._key === selectedKey)?._type ?? "";
+    const specs = [...INLINE_FIELDS[type] ?? [], ...GLOBAL_INLINE];
+    const bound = /* @__PURE__ */ new Set();
+    const bind = (el, field, html) => {
+      if (el.dataset.veInline === "1") return;
+      el.dataset.veInline = "1";
+      el.setAttribute("contenteditable", "true");
+      el.setAttribute("spellcheck", "true");
+      el.classList.add("xicms-ve-inline");
+      el.addEventListener("blur", () => commitInline(selectedKey, field, html ? el.innerHTML : el.textContent ?? ""));
+      el.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") el.blur();
+        else if (!html && e.key === "Enter") {
+          e.preventDefault();
+          el.blur();
+        }
+      });
+      bound.add(el);
+    };
+    const apply = () => {
+      for (const m of specs) {
+        host.querySelectorAll(m.selector).forEach(
+          (el) => bind(el, "fromData" in m && m.fromData ? el.dataset.xicmsEdit : m.field, !!m.html)
+        );
+      }
+    };
+    apply();
+    const obs = new MutationObserver(() => {
+      if (!draggingRef.current) apply();
+    });
+    obs.observe(host, { childList: true, subtree: true });
+    return () => {
+      obs.disconnect();
+      bound.forEach((el) => {
+        el.removeAttribute("contenteditable");
+        el.classList.remove("xicms-ve-inline");
+        delete el.dataset.veInline;
+      });
+    };
+  }, [selectedKey, blocks, commitInline]);
+  const dirtySinceRef = useRef(null);
+  useEffect(() => {
+    if (!draft) return;
+    if (firstSave.current) {
+      firstSave.current = false;
+      return;
+    }
+    dirtyRef.current = true;
+    dirtySinceRef.current ??= Date.now();
+    setStatus("saving");
+    const waited = Date.now() - dirtySinceRef.current;
+    const delay = Math.max(0, Math.min(700, 3e3 - waited));
+    const t = setTimeout(() => {
+      dirtySinceRef.current = null;
+      const payload = draftPayload(draft);
+      void saveDraft(siteId, draft.id, payload).then(() => {
+        lastSavedRef.current = stableStringify(payload);
+        if (draftRef.current === draft) {
+          dirtyRef.current = false;
+          setStatus("saved");
+        }
+      }).catch(() => setStatus("error"));
+    }, delay);
+    return () => clearTimeout(t);
+  }, [draft, siteId]);
+  useEffect(() => {
+    const beforeUnload = (e) => {
+      if (dirtyRef.current) {
+        e.preventDefault();
+        e.returnValue = "";
+      }
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") void flushSave().catch(() => {
+      });
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+        return;
+      }
+      const t = e.target;
+      const inField = !!t && (t.isContentEditable || t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT");
+      if ((e.metaKey || e.ctrlKey) && !inField && (e.key.toLowerCase() === "z" || e.key.toLowerCase() === "y")) {
+        e.preventDefault();
+        if (e.key.toLowerCase() === "y" || e.shiftKey) redo();
+        else undo();
+      }
+    };
+    window.addEventListener("beforeunload", beforeUnload);
+    document.addEventListener("visibilitychange", onVisibility);
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("beforeunload", beforeUnload);
+      document.removeEventListener("visibilitychange", onVisibility);
+      window.removeEventListener("keydown", onKeyDown);
+      const d = draftRef.current;
+      if (d && dirtyRef.current) {
+        void saveDraft(siteId, d.id, draftPayload(d)).catch(
+          (err) => console.warn("[xicms] autosave bij sluiten mislukt:", err)
+        );
+      }
+    };
+  }, [siteId, handleClose, flushSave, undo, redo]);
+  function setBlocks(next, opts) {
+    mutateDraft((d) => ({ ...d, blocks: next }), opts);
+  }
+  function updateByKey(key, next) {
+    setBlocks(blocks.map((b) => b._key === key ? { ...next, _key: b._key, _type: b._type } : b), { coalesce: true });
+  }
+  function move(i, dir) {
+    const j = i + dir;
+    if (j < 0 || j >= blocks.length) return;
+    const copy = [...blocks];
+    [copy[i], copy[j]] = [copy[j], copy[i]];
+    setBlocks(copy);
+  }
+  function duplicate(i) {
+    const copy = [...blocks];
+    copy.splice(i + 1, 0, { ...blocks[i], _key: newKey() });
+    setBlocks(copy);
+  }
+  async function remove(i) {
+    const ok = await confirm({ title: "Blok verwijderen?", confirmLabel: "Verwijderen", tone: "danger" });
+    if (!ok) return;
+    const removed = blocks[i];
+    setBlocks(blocks.filter((_, idx) => idx !== i));
+    if (selectedKey === removed._key) setSelectedKey(null);
+  }
+  function addBlock(type) {
+    const def = registry.get(type);
+    const base = def?.defaults?.() ?? {};
+    const block = { _key: newKey(), _type: type, ...base };
+    insertAfterSelected([block]);
+    setSelectedKey(block._key);
+  }
+  function insertAfterSelected(newBlocks) {
+    const sel = blocks.findIndex((b) => b._key === selectedKey);
+    const copy = [...blocks];
+    copy.splice(sel >= 0 ? sel + 1 : blocks.length, 0, ...newBlocks);
+    setBlocks(copy);
+  }
+  async function onPublish() {
+    if (!draft) return;
+    const ok = await confirm({ title: "Pagina publiceren?", description: `De live site wordt bijgewerkt (${draft.path}).`, confirmLabel: "Publiceren" });
+    if (!ok) return;
+    setPublishing(true);
+    try {
+      await saveDraft(siteId, draft.id, { blocks: draft.blocks, title: draft.title, slug: draft.slug, path: draft.path, seo: draft.seo });
+      await publishPage(siteId, draft.id);
+      toast({ title: "Gepubliceerd", description: "Herlaad de pagina om het live resultaat te zien.", tone: "success" });
+    } catch (e) {
+      toast({ title: "Publiceren mislukt", description: e.message, tone: "error" });
+    } finally {
+      setPublishing(false);
+    }
+  }
+  const addOptions = useMemo(() => buildBlockAddOptions(registry.values()), [registry]);
+  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");
+    }
+    setConflict(false);
+  }, [siteId, path, mutateDraft]);
+  return /* @__PURE__ */ jsxs("div", { className: "xicms-ve__shell", role: "dialog", "aria-modal": "true", "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__ */ 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("span", { className: "xicms-ve__status", "aria-live": "polite", children: status === "saving" ? "Opslaan\u2026" : status === "saved" ? "\u2713 Opgeslagen" : 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" })
+      ] })
+    ] }),
+    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." }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => void reloadRemote(), children: "Nieuwste versie laden" }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setConflict(false), children: "Mijn versie behouden" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "xicms-ve__body", children: [
+      /* @__PURE__ */ jsxs("main", { className: "xicms-ve__canvas", children: [
+        status === "loading" && /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Laden\u2026" }),
+        status === "none" && /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: "\u{1F4C4}",
+            title: "Geen werkversie gevonden",
+            description: `Voor deze pagina (${path}) bestaat nog geen werkversie. Maak de pagina eerst aan in /beheer \u2192 Pagina's.`
+          }
+        ),
+        draft && /* @__PURE__ */ jsxs("div", { className: "container", ref: canvasRef, children: [
+          blocks.length === 0 && /* @__PURE__ */ jsx(EmptyState, { icon: "\u{1F9F1}", title: "Nog geen blokken", description: "Voeg hieronder je eerste blok toe." }),
+          blocks.map((b, i) => {
+            const def = registry.get(b._type);
+            const Render = def?.Render;
+            const safe = (() => {
+              const parsed = def?.schema?.safeParse(b);
+              return parsed?.success ? parsed.data : b;
+            })();
+            const dropClass = dropIndex === i ? " is-drop-before" : dropIndex === i + 1 ? " is-drop-after" : "";
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `xicms-ve-block${b._key === selectedKey ? " is-selected" : ""}${dragIndex === i ? " is-dragging" : ""}${dropClass}`,
+                onDragOver: (e) => {
+                  if (dragIndex === null) return;
+                  e.preventDefault();
+                  e.dataTransfer.dropEffect = "move";
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  setDropIndex(e.clientY < rect.top + rect.height / 2 ? i : i + 1);
+                },
+                onDrop: (e) => {
+                  if (dragIndex === null || dropIndex === null) return;
+                  e.preventDefault();
+                  setBlocks(reorderBlocks(blocks, dragIndex, dropIndex));
+                  endDrag();
+                },
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "xicms-ve-block__toolbar", children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "xicms-ve-block__drag",
+                        draggable: true,
+                        onDragStart: (e) => {
+                          draggingRef.current = true;
+                          setDragIndex(i);
+                          e.dataTransfer.effectAllowed = "move";
+                          e.dataTransfer.setData("text/plain", String(i));
+                          const blockEl = e.currentTarget.closest(".xicms-ve-block");
+                          if (blockEl) e.dataTransfer.setDragImage(blockEl, 24, 24);
+                        },
+                        onDragEnd: endDrag,
+                        "aria-label": `Versleep ${def?.label ?? b._type}`,
+                        title: "Slepen om te verplaatsen",
+                        children: "\u22EE\u22EE"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "xicms-ve-block__label", children: def?.label ?? b._type }),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setSelectedKey(b._key), "aria-label": `Bewerk ${def?.label ?? b._type}`, title: "Bewerken", children: "\u270F\uFE0F" }),
+                    /* @__PURE__ */ jsx("button", { type: "button", disabled: i === 0, onClick: () => move(i, -1), "aria-label": "Omhoog", children: "\u2191" }),
+                    /* @__PURE__ */ jsx("button", { type: "button", disabled: i === blocks.length - 1, onClick: () => move(i, 1), "aria-label": "Omlaag", children: "\u2193" }),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => duplicate(i), "aria-label": "Dupliceren", children: "\u2398" }),
+                    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void remove(i), "aria-label": "Verwijderen", children: "\u{1F5D1}" })
+                  ] }),
+                  /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-ve-block__select", "aria-label": `Selecteer ${def?.label ?? b._type}`, onClick: () => setSelectedKey(b._key) }),
+                  /* @__PURE__ */ jsx("div", { className: "xicms-ve-block__content", "data-ve-content": b._key, children: Render ? /* @__PURE__ */ jsx(BlockErrorBoundary, { mode: "preview", type: b._type, blockKey: b._key, children: /* @__PURE__ */ jsx(InlineImageEditProvider, { onReplace: b._key === selectedKey ? (field) => setImgPicker({ key: b._key, field }) : null, children: /* @__PURE__ */ jsx(Render, { block: safe, siteId, mode: "preview" }) }) }) : /* @__PURE__ */ jsxs("p", { className: "xicms-ve__hint", children: [
+                    "Onbekend blok: ",
+                    b._type
+                  ] }) })
+                ]
+              },
+              b._key
+            );
+          }),
+          /* @__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("aside", { className: "xicms-ve__panel", children: selected ? /* @__PURE__ */ jsx(SelectedEditor, { block: selected, siteId, registry, onChange: (next) => updateByKey(selected._key, next) }, selected._key) : draft ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Klik op een blok om het te bewerken." }),
+        /* @__PURE__ */ jsx(PageSettings, { draft, onChange: (part) => mutateDraft((d) => ({ ...d, ...part }), { coalesce: true }) }),
+        !isDemoActive() && /* @__PURE__ */ jsx(
+          VersionsPanel,
+          {
+            siteId,
+            pageId: draft.id,
+            onRestore: (restored) => {
+              mutateDraft((d) => ({ ...d, ...restored }));
+              toast({ title: "Versie hersteld naar werkversie", description: "Publiceer om hem live te zetten.", tone: "success" });
+            }
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Klik op een blok om het te bewerken." }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      MediaPickerDialog,
+      {
+        siteId,
+        open: !!imgPicker,
+        onOpenChange: (v) => {
+          if (!v) setImgPicker(null);
+        },
+        onSelect: (m) => {
+          if (imgPicker) commitInline(imgPicker.key, imgPicker.field, m.url);
+          setImgPicker(null);
+        }
+      }
+    )
+  ] });
+}
+function PageSettings({
+  draft,
+  onChange
+}) {
+  const seo = draft.seo ?? {};
+  return /* @__PURE__ */ jsxs("details", { className: "xicms-ve__section", open: true, children: [
+    /* @__PURE__ */ jsx("summary", { className: "text-sm font-semibold", children: "Pagina-instellingen" }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 grid gap-3", children: [
+      /* @__PURE__ */ jsx(Field, { label: "Paginatitel", children: /* @__PURE__ */ jsx(Input, { value: draft.title ?? "", onChange: (e) => onChange({ title: e.target.value }) }) }),
+      /* @__PURE__ */ jsx(Field, { label: "SEO-titel", hint: "Leeg = paginatitel", children: /* @__PURE__ */ jsx(Input, { value: seo.title ?? "", onChange: (e) => onChange({ seo: { ...seo, title: e.target.value } }) }) }),
+      /* @__PURE__ */ jsx(Field, { label: "SEO-omschrijving", hint: "Wordt getoond in zoekresultaten", children: /* @__PURE__ */ jsx(Textarea, { rows: 3, value: seo.description ?? "", onChange: (e) => onChange({ seo: { ...seo, description: e.target.value } }) }) })
+    ] })
+  ] });
+}
+function VersionsPanel({
+  siteId,
+  pageId,
+  onRestore
+}) {
+  const [versions, setVersions] = useState([]);
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  useEffect(() => subscribeVersions(siteId, pageId, setVersions), [siteId, pageId]);
+  if (versions.length === 0) return null;
+  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.",
+      confirmLabel: "Herstellen"
+    });
+    if (!ok) return;
+    try {
+      const restored = await restoreVersion(siteId, pageId, versionId);
+      onRestore(restored);
+    } catch (e) {
+      toast({ title: "Herstellen mislukt", description: e.message, tone: "error" });
+    }
+  };
+  return /* @__PURE__ */ jsxs("details", { className: "xicms-ve__section", children: [
+    /* @__PURE__ */ jsx("summary", { className: "text-sm font-semibold", children: "Versiegeschiedenis" }),
+    /* @__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: [
+          " \xB7 ",
+          formatVersionDate(v.createdAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => void restore(v.id), children: "Herstellen" })
+    ] }, v.id)) })
+  ] });
+}
+function formatVersionDate(createdAt) {
+  const date = createdAt && typeof createdAt.toDate === "function" ? createdAt.toDate() : typeof createdAt === "string" ? new Date(createdAt) : null;
+  return date && !Number.isNaN(date.getTime()) ? date.toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) : "";
+}
+function SelectedEditor({
+  block,
+  siteId,
+  registry,
+  onChange
+}) {
+  const def = registry.get(block._type);
+  const Editor = def?.Editor ?? builtinBlockEditors[block._type] ?? GenericEditor;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: def?.label ?? block._type }),
+    /* @__PURE__ */ jsx(BlockErrorBoundary, { mode: "preview", type: block._type, blockKey: block._key, children: /* @__PURE__ */ jsx(Editor, { block, siteId, onChange }) }),
+    /* @__PURE__ */ jsx(
+      StyleEditor,
+      {
+        value: block._style,
+        onChange: (style) => onChange({ ...block, _style: style })
+      }
+    )
+  ] });
+}
+export {
+  VisualEditor as default
+};
+//# sourceMappingURL=VisualEditor.js.map