@xiwebdesign/xicms-core 6.4.7 → 7.0.0

package/dist/admin/ui/dialog.js

@@ -1,44 +1,65 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "./cn";
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogClose = DialogPrimitive.Close;
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useContext,
+  useState
+} from "react";
+import { Dialog as AstryxDialog, DialogHeader } from "@astryxdesign/core/Dialog";
+import { cn } from "./cn.js";
+const Ctx = createContext(null);
+const useDialog = () => {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error("Dialog-onderdelen horen binnen <Dialog> te staan.");
+  return ctx;
+};
+function withClick(children, action) {
+  if (!isValidElement(children)) return children;
+  const el = children;
+  return cloneElement(el, {
+    onClick: (e) => {
+      el.props.onClick?.(e);
+      action();
+    }
+  });
+}
+function Dialog({
+  open: controlled,
+  onOpenChange,
+  children
+}) {
+  const [uncontrolled, setUncontrolled] = useState(false);
+  const open = controlled ?? uncontrolled;
+  const setOpen = (v) => {
+    if (controlled === void 0) setUncontrolled(v);
+    onOpenChange?.(v);
+  };
+  return /* @__PURE__ */ jsx(Ctx.Provider, { value: { open, setOpen }, children });
+}
+function DialogTrigger({ children }) {
+  const { setOpen } = useDialog();
+  return /* @__PURE__ */ jsx(Fragment, { children: withClick(children, () => setOpen(true)) });
+}
+function DialogClose({ children }) {
+  const { setOpen } = useDialog();
+  return /* @__PURE__ */ jsx(Fragment, { children: withClick(children, () => setOpen(false)) });
+}
 function DialogContent({
-  className,
-  children,
   title,
-  ...props
+  width = "min(92vw, 32rem)",
+  className,
+  children
 }) {
-  const container = typeof document !== "undefined" ? document.querySelector(".xicms-ve") ?? document.querySelector(".xicms-admin") : null;
-  return /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { container: container ?? void 0, children: [
-    /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-[10010] bg-black/50" }),
-    /* @__PURE__ */ jsxs(
-      DialogPrimitive.Content,
-      {
-        style: {
-          position: "fixed",
-          left: "50%",
-          top: "50%",
-          transform: "translate(-50%, -50%)",
-          width: "min(92vw, 32rem)",
-          maxHeight: "85vh",
-          overflowY: "auto",
-          zIndex: 10011
-        },
-        className: cn("rounded-xl bg-white p-5 shadow-xl focus:outline-none", className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(DialogPrimitive.Title, { className: "mb-3 text-lg font-semibold", children: title }),
-          children
-        ]
-      }
-    )
+  const { open, setOpen } = useDialog();
+  return /* @__PURE__ */ jsxs(AstryxDialog, { isOpen: open, onOpenChange: setOpen, width, purpose: "form", className, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { title }),
+    children
   ] });
 }
 function DialogDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Description, { className: cn("text-sm text-slate-600", className), ...props });
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-slate-600", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("mt-5 flex items-center justify-end gap-2", className), ...props });

package/dist/admin/ui/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cn } from \"./cn\";\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport function DialogContent({\n  className,\n  children,\n  title,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & { title: string }) {\n  // De admin-Tailwind is gescoped onder `.xicms-admin` (important: \".xicms-admin\"). Radix portalt\n  // standaard naar <body> — buiten die scope, waardoor de dialog volledig ONGESTYLED zou renderen\n  // (static, geen achtergrond, achter de editor). Daarom portalen we IN de admin-scope.\n  const container =\n    typeof document !== \"undefined\"\n      ? document.querySelector<HTMLElement>(\".xicms-ve\") ?? document.querySelector<HTMLElement>(\".xicms-admin\")\n      : null;\n  return (\n    <DialogPrimitive.Portal container={container ?? undefined}>\n      {/* Boven de VisualEditor-overlay (z-index 10000) zodat de kiezer niet erachter verdwijnt. */}\n      <DialogPrimitive.Overlay className=\"fixed inset-0 z-[10010] bg-black/50\" />\n      <DialogPrimitive.Content\n        // Centreren + maat via INLINE style i.p.v. Tailwind-utilities: `-translate-x-1/2` werd in de\n        // gescopete/geportalde admin-context (Tailwind v4) niet toegepast, waardoor de dialog op\n        // `left:50%` bleef hangen en op smalle schermen rechts buiten beeld liep. Inline styles omzeilen\n        // de scoping/laag-volgorde volledig en winnen altijd. Content blijft een directe Portal-child\n        // (wrappen in een <div> brak Radix → \"Maximum update depth exceeded\"). max-height + overflow\n        // houdt de kiezer op mobiel binnen het scherm.\n        style={{\n          position: \"fixed\",\n          left: \"50%\",\n          top: \"50%\",\n          transform: \"translate(-50%, -50%)\",\n          width: \"min(92vw, 32rem)\",\n          maxHeight: \"85vh\",\n          overflowY: \"auto\",\n          zIndex: 10011,\n        }}\n        className={cn(\"rounded-xl bg-white p-5 shadow-xl focus:outline-none\", className)}\n        {...props}\n      >\n        <DialogPrimitive.Title className=\"mb-3 text-lg font-semibold\">{title}</DialogPrimitive.Title>\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return <DialogPrimitive.Description className={cn(\"text-sm text-slate-600\", className)} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(\"mt-5 flex items-center justify-end gap-2\", className)} {...props} />;\n}\n"],"mappings":";AAyBM,cACA,YADA;AAvBN,YAAY,qBAAqB;AACjC,SAAS,UAAU;AAEZ,MAAM,SAAS,gBAAgB;AAC/B,MAAM,gBAAgB,gBAAgB;AACtC,MAAM,cAAc,gBAAgB;AAEpC,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6E;AAI3E,QAAM,YACJ,OAAO,aAAa,cAChB,SAAS,cAA2B,WAAW,KAAK,SAAS,cAA2B,cAAc,IACtG;AACN,SACE,qBAAC,gBAAgB,QAAhB,EAAuB,WAAW,aAAa,QAE9C;AAAA,wBAAC,gBAAgB,SAAhB,EAAwB,WAAU,uCAAsC;AAAA,IACzE;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QAOC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,MAAM;AAAA,UACN,KAAK;AAAA,UACL,WAAW;AAAA,UACX,OAAO;AAAA,UACP,WAAW;AAAA,UACX,WAAW;AAAA,UACX,QAAQ;AAAA,QACV;AAAA,QACA,WAAW,GAAG,wDAAwD,SAAS;AAAA,QAC9E,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAgB,OAAhB,EAAsB,WAAU,8BAA8B,iBAAM;AAAA,UACpE;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA6D;AACnH,SAAO,oBAAC,gBAAgB,aAAhB,EAA4B,WAAW,GAAG,0BAA0B,SAAS,GAAI,GAAG,OAAO;AACrG;AAEO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AACjF,SAAO,oBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GAAI,GAAG,OAAO;AAC/F;","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  useContext,\n  useState,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { Dialog as AstryxDialog, DialogHeader } from \"@astryxdesign/core/Dialog\";\nimport { cn } from \"./cn\";\n\n/**\n * Dialogen op Astryx in plaats van Radix.\n *\n * De aanroep-API blijft ongewijzigd (Dialog/DialogTrigger/DialogContent/DialogClose), zodat de\n * mediakiezer, de bevestiging, de patroonkiezer en de factuurweergave hetzelfde blijven lezen.\n *\n * Waarom dit een vereenvoudiging is: Astryx rendert een NATIEVE `<dialog>` en opent hem met\n * `showModal()`. Daarmee staat hij in de top layer van de browser, boven alles — inclusief de\n * editor-overlay. De hele reeks workarounds die het Radix-pad nodig had, vervalt:\n *\n *  - portalen ín `.xicms-ve`/`.xicms-admin` omdat Radix anders buiten de gescopete admin-CSS\n *    landde en volledig ongestyled rendeerde;\n *  - `z-index: 10010/10011` om boven die overlay te komen;\n *  - inline centreren omdat `-translate-x-1/2` in de gescopete Tailwind-context niet aansloeg,\n *    waardoor de dialoog op smalle schermen rechts buiten beeld liep.\n *\n * Astryx regelt bovendien zelf scroll-lock, focus-insluiting én focusherstel naar het element dat\n * de dialoog opende, en stemt zijn Escape-afhandeling af op een actieve focus trap.\n */\ninterface DialogCtx {\n  open: boolean;\n  setOpen: (v: boolean) => void;\n}\nconst Ctx = createContext<DialogCtx | null>(null);\nconst useDialog = (): DialogCtx => {\n  const ctx = useContext(Ctx);\n  if (!ctx) throw new Error(\"Dialog-onderdelen horen binnen <Dialog> te staan.\");\n  return ctx;\n};\n\n/** Kloont het kind en hangt er een klik-actie aan (het `asChild`-patroon van de vorige API). */\nfunction withClick(children: ReactNode, action: () => void): ReactNode {\n  if (!isValidElement(children)) return children;\n  const el = children as ReactElement<{ onClick?: (e: MouseEvent) => void }>;\n  return cloneElement(el, {\n    onClick: (e: MouseEvent) => {\n      el.props.onClick?.(e);\n      action();\n    },\n  });\n}\n\nexport function Dialog({\n  open: controlled,\n  onOpenChange,\n  children,\n}: {\n  open?: boolean;\n  onOpenChange?: (v: boolean) => void;\n  children: ReactNode;\n}) {\n  const [uncontrolled, setUncontrolled] = useState(false);\n  const open = controlled ?? uncontrolled;\n  const setOpen = (v: boolean) => {\n    if (controlled === undefined) setUncontrolled(v);\n    onOpenChange?.(v);\n  };\n  return <Ctx.Provider value={{ open, setOpen }}>{children}</Ctx.Provider>;\n}\n\n/** `asChild` blijft geaccepteerd voor een ongewijzigde aanroep-API; het kind wordt altijd gekloond. */\nexport function DialogTrigger({ children }: { children: ReactNode; asChild?: boolean }) {\n  const { setOpen } = useDialog();\n  return <>{withClick(children, () => setOpen(true))}</>;\n}\n\nexport function DialogClose({ children }: { children: ReactNode; asChild?: boolean }) {\n  const { setOpen } = useDialog();\n  return <>{withClick(children, () => setOpen(false))}</>;\n}\n\nexport function DialogContent({\n  title,\n  width = \"min(92vw, 32rem)\",\n  className,\n  children,\n}: {\n  title: string;\n  /** Breedte van de dialoog. Verving de `max-w-*`-klassen: Astryx zet de breedte inline. */\n  width?: number | string;\n  className?: string;\n  children: ReactNode;\n}) {\n  const { open, setOpen } = useDialog();\n  return (\n    <AstryxDialog isOpen={open} onOpenChange={setOpen} width={width} purpose=\"form\" className={className}>\n      <DialogHeader title={title} />\n      {children}\n    </AstryxDialog>\n  );\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={cn(\"text-sm text-slate-600\", className)} {...props} />;\n}\n\nexport function DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(\"mt-5 flex items-center justify-end gap-2\", className)} {...props} />;\n}\n"],"mappings":";AAwES,SAMA,UANA,KA4BL,YA5BK;AAtET;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,UAAU,cAAc,oBAAoB;AACrD,SAAS,UAAU;AAyBnB,MAAM,MAAM,cAAgC,IAAI;AAChD,MAAM,YAAY,MAAiB;AACjC,QAAM,MAAM,WAAW,GAAG;AAC1B,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mDAAmD;AAC7E,SAAO;AACT;AAGA,SAAS,UAAU,UAAqB,QAA+B;AACrE,MAAI,CAAC,eAAe,QAAQ,EAAG,QAAO;AACtC,QAAM,KAAK;AACX,SAAO,aAAa,IAAI;AAAA,IACtB,SAAS,CAAC,MAAkB;AAC1B,SAAG,MAAM,UAAU,CAAC;AACpB,aAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AAEO,SAAS,OAAO;AAAA,EACrB,MAAM;AAAA,EACN;AAAA,EACA;AACF,GAIG;AACD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,OAAO,cAAc;AAC3B,QAAM,UAAU,CAAC,MAAe;AAC9B,QAAI,eAAe,OAAW,iBAAgB,CAAC;AAC/C,mBAAe,CAAC;AAAA,EAClB;AACA,SAAO,oBAAC,IAAI,UAAJ,EAAa,OAAO,EAAE,MAAM,QAAQ,GAAI,UAAS;AAC3D;AAGO,SAAS,cAAc,EAAE,SAAS,GAA+C;AACtF,QAAM,EAAE,QAAQ,IAAI,UAAU;AAC9B,SAAO,gCAAG,oBAAU,UAAU,MAAM,QAAQ,IAAI,CAAC,GAAE;AACrD;AAEO,SAAS,YAAY,EAAE,SAAS,GAA+C;AACpF,QAAM,EAAE,QAAQ,IAAI,UAAU;AAC9B,SAAO,gCAAG,oBAAU,UAAU,MAAM,QAAQ,KAAK,CAAC,GAAE;AACtD;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAMG;AACD,QAAM,EAAE,MAAM,QAAQ,IAAI,UAAU;AACpC,SACE,qBAAC,gBAAa,QAAQ,MAAM,cAAc,SAAS,OAAc,SAAQ,QAAO,WAC9E;AAAA,wBAAC,gBAAa,OAAc;AAAA,IAC3B;AAAA,KACH;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA8B;AACpF,SAAO,oBAAC,OAAE,WAAW,GAAG,0BAA0B,SAAS,GAAI,GAAG,OAAO;AAC3E;AAEO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AACjF,SAAO,oBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GAAI,GAAG,OAAO;AAC/F;","names":[]}

package/dist/admin/ui/index.d.ts

@@ -1,7 +1,7 @@
-export { cn } from "./cn";
-export { Button, Input, Textarea, Field, Card, Badge } from "./primitives";
-export { ToastProvider, useToast } from "./toast";
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
-export { Dialog, DialogTrigger, DialogClose, DialogContent } from "./dialog";
-export { Select } from "./select";
-export { Switch } from "./switch";
+export { cn } from "./cn.js";
+export { Button, Input, Textarea, Field, Card, Badge } from "./primitives.js";
+export { ToastProvider, useToast } from "./toast.js";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs.js";
+export { Dialog, DialogTrigger, DialogClose, DialogContent } from "./dialog.js";
+export { Select } from "./select.js";
+export { Switch } from "./switch.js";

package/dist/admin/ui/index.js

@@ -1,10 +1,10 @@
-import { cn } from "./cn";
-import { Button, Input, Textarea, Field, Card, Badge } from "./primitives";
-import { ToastProvider, useToast } from "./toast";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
-import { Dialog, DialogTrigger, DialogClose, DialogContent } from "./dialog";
-import { Select } from "./select";
-import { Switch } from "./switch";
+import { cn } from "./cn.js";
+import { Button, Input, Textarea, Field, Card, Badge } from "./primitives.js";
+import { ToastProvider, useToast } from "./toast.js";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs.js";
+import { Dialog, DialogTrigger, DialogClose, DialogContent } from "./dialog.js";
+import { Select } from "./select.js";
+import { Switch } from "./switch.js";
 export {
   Badge,
   Button,

package/dist/admin/ui/primitives.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { cn } from "./cn";
+import { cn } from "./cn.js";
 import { TextInput } from "@astryxdesign/core/TextInput";
 import { NumberInput } from "@astryxdesign/core/NumberInput";
 import { TextArea } from "@astryxdesign/core/TextArea";

package/dist/admin/ui/tabs.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "./cn";
+import { cn } from "./cn.js";
 const Tabs = TabsPrimitive.Root;
 function TabsList({ className, ...props }) {
   return /* @__PURE__ */ jsx(

package/dist/admin/visual/TranslationPanel.d.ts

@@ -1,4 +1,4 @@
-import type { BlockRegistry } from "../../blocks/registry";
+import type { BlockRegistry } from "../../blocks/registry.js";
 export declare function TranslationPanel({ block, siteId, registry, locale, overlay, onTranslate, }: {
     block: Record<string, unknown> & {
         _key: string;

package/dist/admin/visual/TranslationPanel.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { introspectToFields } from "../lib/zodFields";
-import { RichTextEditor } from "../editors/RichTextEditor";
-import { Field as FieldRow, Input, Textarea } from "../ui/primitives";
+import { introspectToFields } from "../lib/zodFields.js";
+import { RichTextEditor } from "../editors/RichTextEditor.js";
+import { Field as FieldRow, Input, Textarea } from "../ui/primitives.js";
 function collectEntries(fields, value, prefix = "", labelPrefix = "") {
   const out = [];
   for (const f of fields) {

package/dist/admin/visual/VisualEditor.js

@@ -2,28 +2,38 @@
 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 { introspectToFields } from "../lib/zodFields";
-import { BlockErrorBoundary } from "../../blocks/BlockErrorBoundary";
-import { InlineImageEditProvider } from "../../media/ImageContext";
-import { MediaPickerDialog } from "../media/MediaPicker";
+import { useSiteConfig } from "../../config.js";
+import { useRegistry } from "../../blocks/context.js";
+import { introspectToFields } from "../lib/zodFields.js";
+import { BlockErrorBoundary } from "../../blocks/BlockErrorBoundary.js";
+import { InlineImageEditProvider } from "../../media/ImageContext.js";
+import { MediaPickerDialog } from "../media/MediaPicker.js";
 import { EmptyState } from "@astryxdesign/core/EmptyState";
-import { buildBlockAddOptions } from "../../blocks/registry";
+import { useFocusTrap, useScrollLock } from "@astryxdesign/core/hooks";
+import { useNestedDialogOpen } from "../lib/useNestedDialog.js";
+import { useThemeVars } from "../../XiCMSProvider.js";
+import { buildBlockAddOptions } from "../../blocks/registry.js";
+import { safeParse } from "zod/v4/core";
 import DOMPurify from "dompurify";
-import { createPage, 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 { siteLocales, parseLocaleSlugs, localizeBlocks } from "../../i18n/overlay";
-import { TranslationPanel } from "./TranslationPanel";
-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";
+import { createPage, getDraftByPath, saveDraft, publishPage, subscribeDraft, subscribeVersions, restoreVersion } from "../lib/pagesClient.js";
+import { isDemoActive } from "../../demo/demoStore.js";
+import { builtinBlockEditors, GenericEditor } from "../blockEditors/index.js";
+import { StyleEditor } from "../blockEditors/StyleEditor.js";
+import { siteLocales, parseLocaleSlugs, localizeBlocks } from "../../i18n/overlay.js";
+import { TranslationPanel } from "./TranslationPanel.js";
+import { reorderBlocks } from "./reorder.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 { 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
+  // het werkelijk toont, en dat wint (zie de bind hieronder). Zonder die voorrang schreef élk
+  // `.xicms-richtext`-element naar een veld dat letterlijk "html" heet — waar de FAQ zijn antwoord
+  // in `items[].aHtml` bewaart en het accordeon in `items[].bodyHtml`. Inline bewerken van een
+  // FAQ-antwoord landde daardoor op een niet-bestaand veld: de wijziging verdween stil en het blok
+  // hield een zwerfveld over.
   { selector: ".xicms-richtext", field: "html", html: true },
   { selector: "[data-xicms-edit]", field: "", html: false, fromData: true }
 ];
@@ -90,6 +100,15 @@ function VisualEditorInner({ onClose }) {
   const firstSave = useRef(true);
   const canvasRef = useRef(null);
   const [conflict, setConflict] = useState(false);
+  const { vars: themeVars, darkAuto } = useThemeVars();
+  const nestedDialogOpen = useNestedDialogOpen();
+  const { containerRef, focusFirst } = useFocusTrap({ isActive: !nestedDialogOpen });
+  useScrollLock(true);
+  useEffect(() => {
+    const opener = document.activeElement;
+    focusFirst();
+    return () => opener?.focus?.();
+  }, [focusFirst]);
   const [dragIndex, setDragIndex] = useState(null);
   const [dropIndex, setDropIndex] = useState(null);
   const draggingRef = useRef(false);
@@ -323,7 +342,10 @@ function VisualEditorInner({ onClose }) {
     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)
+          (el) => (
+            // Een expliciete `data-xicms-edit` wint altijd; anders het veld van de matcher.
+            bind(el, el.dataset.xicmsEdit ?? m.field, !!m.html)
+          )
         );
       }
     };
@@ -382,7 +404,7 @@ function VisualEditorInner({ onClose }) {
       if (e.key === "Escape") {
         const t2 = e.target;
         const inField2 = !!t2 && (t2.isContentEditable || t2.tagName === "INPUT" || t2.tagName === "TEXTAREA" || t2.tagName === "SELECT");
-        const dialogOpen = document.querySelector('[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]');
+        const dialogOpen = document.querySelector('dialog[open], [role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]');
         if (!inField2 && !dialogOpen) handleClose();
         return;
       }
@@ -436,7 +458,7 @@ function VisualEditorInner({ onClose }) {
       confirmLabel: "Loskoppelen"
     });
     if (!ok) return;
-    const { getSymbolOnce } = await import("../lib/symbolsClient");
+    const { getSymbolOnce } = await import("../lib/symbolsClient.js");
     const sym = await getSymbolOnce(siteId, blk.symbolId);
     if (!sym) {
       toast({ title: "Symbool niet gevonden", tone: "error" });
@@ -509,7 +531,7 @@ function VisualEditorInner({ onClose }) {
     }
     setConflict(false);
   }, [siteId, path, mutateDraft]);
-  return /* @__PURE__ */ jsxs("div", { className: "xicms-ve__shell", role: "dialog", "aria-modal": "true", "aria-label": `Pagina bewerken: ${path}`, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, 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 ",
@@ -542,7 +564,7 @@ function VisualEditorInner({ onClose }) {
       /* @__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: [
+      /* @__PURE__ */ jsxs("main", { className: "xicms-ve__canvas xicms-root", "data-dark": darkAuto ? "auto" : void 0, style: themeVars, children: [
         status === "loading" && /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Laden\u2026" }),
         status === "none" && /* @__PURE__ */ jsxs("div", { className: "xicms-ve__empty", children: [
           /* @__PURE__ */ jsx(
@@ -561,7 +583,7 @@ function VisualEditorInner({ onClose }) {
             const def = registry.get(b._type);
             const Render = def?.Render;
             const safe = (() => {
-              const parsed = def?.schema?.safeParse(b);
+              const parsed = def?.schema ? safeParse(def.schema, b) : void 0;
               return parsed?.success ? parsed.data : b;
             })();
             const dropClass = dropIndex === i ? " is-drop-before" : dropIndex === i + 1 ? " is-drop-after" : "";