@xiwebdesign/xicms-core 4.18.0 → 5.0.1

package/dist/admin/settings/SnapshotsCard.d.ts

@@ -0,0 +1,3 @@
+export declare function SnapshotsCard({ siteId }: {
+    siteId: string;
+}): import("react").JSX.Element;

package/dist/admin/settings/SnapshotsCard.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { collection, limit, onSnapshot, orderBy, query } from "firebase/firestore";
+import { getFunctions, httpsCallable } from "firebase/functions";
+import { getDb, getFirebaseApp } from "../../firebase/client";
+import { functionsRegion } from "../../firebase/region";
+import { Button, Card, Input } from "../ui/primitives";
+import { useToast } from "../ui/toast";
+import { useConfirm } from "../ui/ConfirmDialog";
+function formatDate(createdAt) {
+  const date = createdAt && typeof createdAt.toDate === "function" ? createdAt.toDate() : null;
+  return date ? date.toLocaleString("nl-NL", { dateStyle: "short", timeStyle: "short" }) : "";
+}
+function SnapshotsCard({ siteId }) {
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  const [snapshots, setSnapshots] = useState([]);
+  const [label, setLabel] = useState("");
+  const [busy, setBusy] = useState(null);
+  useEffect(() => {
+    const db = getDb();
+    if (!db) return;
+    const q = query(collection(db, "sites", siteId, "snapshots"), orderBy("createdAt", "desc"), limit(20));
+    return onSnapshot(
+      q,
+      (snap) => setSnapshots(snap.docs.map((d) => ({ id: d.id, ...d.data() }))),
+      () => setSnapshots([])
+    );
+  }, [siteId]);
+  async function create() {
+    const app = getFirebaseApp();
+    if (!app) return;
+    setBusy("create");
+    try {
+      const fn = httpsCallable(getFunctions(app, functionsRegion()), "createSnapshot");
+      await fn({ siteId, label: label.trim() || void 0 });
+      setLabel("");
+      toast({ title: "Herstelpunt aangemaakt", tone: "success" });
+    } catch (e) {
+      toast({ title: "Herstelpunt mislukt", description: e.message, tone: "error" });
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function restore(s) {
+    const ok = await confirm({
+      title: "Herstelpunt terugzetten?",
+      description: `De site wordt teruggezet naar "${s.label ?? s.id}" (${formatDate(s.createdAt)}). Er wordt eerst automatisch een nieuw herstelpunt van de huidige stand gemaakt.`,
+      confirmLabel: "Terugzetten",
+      tone: "danger"
+    });
+    if (!ok) return;
+    const app = getFirebaseApp();
+    if (!app) return;
+    setBusy(s.id);
+    try {
+      const fn = httpsCallable(getFunctions(app, functionsRegion()), "restoreSnapshot");
+      await fn({ siteId, snapshotId: s.id });
+      toast({ title: "Herstelpunt teruggezet", description: "Herlaad de pagina om alles bij te werken.", tone: "success" });
+    } catch (e) {
+      toast({ title: "Herstellen mislukt", description: e.message, tone: "error" });
+    } finally {
+      setBusy(null);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx("h3", { className: "mb-1 text-base font-semibold", children: "Herstelpunten" }),
+    /* @__PURE__ */ jsx("p", { className: "mb-3 text-xs text-slate-500", children: "Leg de huidige stand van de hele site vast (pagina's, instellingen, symbolen, bouwstenen) en zet hem later met \xE9\xE9n klik terug \u2014 zonder bestanden te downloaden. V\xF3\xF3r elk herstel wordt automatisch een nieuw herstelpunt gemaakt, dus terugzetten is altijd omkeerbaar." }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: label,
+          placeholder: "Naam (bv. v\xF3\xF3r grote wijziging)",
+          onChange: (e) => setLabel(e.target.value),
+          className: "max-w-xs"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: busy !== null, onClick: () => void create(), children: busy === "create" ? "Bezig\u2026" : "Herstelpunt maken" })
+    ] }),
+    snapshots.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-400", children: "Nog geen herstelpunten." }) : /* @__PURE__ */ jsx("ul", { className: "grid gap-1 text-sm", children: snapshots.map((s) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2 rounded border border-slate-200 px-2 py-1.5", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        s.kind === "auto" ? "\u{1F6DF} " : "\u{1F4CC} ",
+        s.label ?? "Herstelpunt",
+        /* @__PURE__ */ jsxs("span", { className: "text-slate-400", children: [
+          " \xB7 ",
+          formatDate(s.createdAt)
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", disabled: busy !== null, onClick: () => void restore(s), children: busy === s.id ? "Bezig\u2026" : "Terugzetten" })
+    ] }, s.id)) })
+  ] });
+}
+export {
+  SnapshotsCard
+};
+//# sourceMappingURL=SnapshotsCard.js.map

package/dist/admin/settings/SnapshotsCard.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/settings/SnapshotsCard.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * \"Herstelpunten\" (5.0, primo-concept site_snapshots): met één klik de volledige content-stand\n * van de site vastleggen in Firestore, en later terugzetten. Herstellen maakt automatisch eerst\n * een nieuw herstelpunt van de huidige stand (server-side), dus het is altijd omkeerbaar.\n * Aanvulling op de download-back-up: geen bestand nodig, en de automatische vangnetten\n * (vóór restore/push-site) verschijnen hier ook.\n */\nimport { useEffect, useState } from \"react\";\nimport { collection, limit, onSnapshot, orderBy, query } from \"firebase/firestore\";\nimport { getFunctions, httpsCallable } from \"firebase/functions\";\nimport { getDb, getFirebaseApp } from \"../../firebase/client\";\nimport { functionsRegion } from \"../../firebase/region\";\nimport { Button, Card, Input } from \"../ui/primitives\";\nimport { useToast } from \"../ui/toast\";\nimport { useConfirm } from \"../ui/ConfirmDialog\";\n\ninterface SnapshotMeta {\n  id: string;\n  label?: string;\n  kind?: string;\n  createdAt?: { toDate?: () => Date };\n}\n\nfunction formatDate(createdAt: SnapshotMeta[\"createdAt\"]): string {\n  const date = createdAt && typeof createdAt.toDate === \"function\" ? createdAt.toDate() : null;\n  return date ? date.toLocaleString(\"nl-NL\", { dateStyle: \"short\", timeStyle: \"short\" }) : \"\";\n}\n\nexport function SnapshotsCard({ siteId }: { siteId: string }) {\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [snapshots, setSnapshots] = useState<SnapshotMeta[]>([]);\n  const [label, setLabel] = useState(\"\");\n  const [busy, setBusy] = useState<string | null>(null);\n\n  useEffect(() => {\n    const db = getDb();\n    if (!db) return;\n    const q = query(collection(db, \"sites\", siteId, \"snapshots\"), orderBy(\"createdAt\", \"desc\"), limit(20));\n    return onSnapshot(\n      q,\n      (snap) => setSnapshots(snap.docs.map((d) => ({ id: d.id, ...(d.data() as Omit<SnapshotMeta, \"id\">) }))),\n      () => setSnapshots([]),\n    );\n  }, [siteId]);\n\n  async function create() {\n    const app = getFirebaseApp();\n    if (!app) return;\n    setBusy(\"create\");\n    try {\n      const fn = httpsCallable(getFunctions(app, functionsRegion()), \"createSnapshot\");\n      await fn({ siteId, label: label.trim() || undefined });\n      setLabel(\"\");\n      toast({ title: \"Herstelpunt aangemaakt\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Herstelpunt mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setBusy(null);\n    }\n  }\n\n  async function restore(s: SnapshotMeta) {\n    const ok = await confirm({\n      title: \"Herstelpunt terugzetten?\",\n      description: `De site wordt teruggezet naar \"${s.label ?? s.id}\" (${formatDate(s.createdAt)}). Er wordt eerst automatisch een nieuw herstelpunt van de huidige stand gemaakt.`,\n      confirmLabel: \"Terugzetten\",\n      tone: \"danger\",\n    });\n    if (!ok) return;\n    const app = getFirebaseApp();\n    if (!app) return;\n    setBusy(s.id);\n    try {\n      const fn = httpsCallable(getFunctions(app, functionsRegion()), \"restoreSnapshot\");\n      await fn({ siteId, snapshotId: s.id });\n      toast({ title: \"Herstelpunt teruggezet\", description: \"Herlaad de pagina om alles bij te werken.\", tone: \"success\" });\n    } catch (e) {\n      toast({ title: \"Herstellen mislukt\", description: (e as Error).message, tone: \"error\" });\n    } finally {\n      setBusy(null);\n    }\n  }\n\n  return (\n    <Card>\n      <h3 className=\"mb-1 text-base font-semibold\">Herstelpunten</h3>\n      <p className=\"mb-3 text-xs text-slate-500\">\n        Leg de huidige stand van de hele site vast (pagina's, instellingen, symbolen, bouwstenen) en\n        zet hem later met één klik terug — zonder bestanden te downloaden. Vóór elk herstel wordt\n        automatisch een nieuw herstelpunt gemaakt, dus terugzetten is altijd omkeerbaar.\n      </p>\n      <div className=\"mb-3 flex flex-wrap items-center gap-2\">\n        <Input\n          value={label}\n          placeholder=\"Naam (bv. vóór grote wijziging)\"\n          onChange={(e) => setLabel(e.target.value)}\n          className=\"max-w-xs\"\n        />\n        <Button variant=\"secondary\" disabled={busy !== null} onClick={() => void create()}>\n          {busy === \"create\" ? \"Bezig…\" : \"Herstelpunt maken\"}\n        </Button>\n      </div>\n      {snapshots.length === 0 ? (\n        <p className=\"text-xs text-slate-400\">Nog geen herstelpunten.</p>\n      ) : (\n        <ul className=\"grid gap-1 text-sm\">\n          {snapshots.map((s) => (\n            <li key={s.id} className=\"flex items-center justify-between gap-2 rounded border border-slate-200 px-2 py-1.5\">\n              <span>\n                {s.kind === \"auto\" ? \"🛟 \" : \"📌 \"}\n                {s.label ?? \"Herstelpunt\"}\n                <span className=\"text-slate-400\"> · {formatDate(s.createdAt)}</span>\n              </span>\n              <Button variant=\"ghost\" size=\"sm\" disabled={busy !== null} onClick={() => void restore(s)}>\n                {busy === s.id ? \"Bezig…\" : \"Terugzetten\"}\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/ui/dialog.js

@@ -17,10 +17,17 @@ function DialogContent({
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Content,
       {
-        className: cn(
-          "fixed left-1/2 top-1/2 z-[10011] w-[92vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white p-5 shadow-xl focus:outline-none",
-          className
-        ),
+        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 }),

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        className={cn(\n          \"fixed left-1/2 top-1/2 z-[10011] w-[92vw] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-xl bg-white p-5 shadow-xl focus:outline-none\",\n          className,\n        )}\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,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,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 * 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":[]}

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

@@ -0,0 +1,13 @@
+import type { BlockRegistry } from "../../blocks/registry";
+export declare function TranslationPanel({ block, siteId, registry, locale, overlay, onTranslate, }: {
+    block: Record<string, unknown> & {
+        _key: string;
+        _type: string;
+    };
+    siteId: string;
+    registry: BlockRegistry;
+    locale: string;
+    /** De overlay van de actieve taal (gepunte sleutels → vertaalde tekst). */
+    overlay: Record<string, string>;
+    onTranslate: (key: string, value: string) => void;
+}): import("react").JSX.Element;

package/dist/admin/visual/TranslationPanel.js

@@ -0,0 +1,73 @@
+"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";
+function collectEntries(fields, value, prefix = "", labelPrefix = "") {
+  const out = [];
+  for (const f of fields) {
+    const v = value?.[f.key];
+    const label = `${labelPrefix}${f.label || f.key}`;
+    switch (f.type) {
+      case "text":
+      case "textarea":
+      case "richtext":
+        out.push({ path: `${prefix}${f.key}`, label, kind: f.type, canonical: typeof v === "string" ? v : "" });
+        break;
+      case "link": {
+        const lbl = v?.label;
+        out.push({ path: `${prefix}${f.key}.label`, label: `${label} (tekst)`, kind: "text", canonical: typeof lbl === "string" ? lbl : "" });
+        break;
+      }
+      case "group":
+        out.push(...collectEntries(f.fields, v ?? {}, `${prefix}${f.key}.`, `${label} \xB7 `));
+        break;
+      case "repeater": {
+        const items = Array.isArray(v) ? v : [];
+        items.forEach((item, i) => {
+          out.push(...collectEntries(f.fields, item ?? {}, `${prefix}${f.key}.${i}.`, `${f.itemLabel ?? label} ${i + 1} \xB7 `));
+        });
+        break;
+      }
+      default:
+        break;
+    }
+  }
+  return out;
+}
+function TranslationPanel({
+  block,
+  siteId,
+  registry,
+  locale,
+  overlay,
+  onTranslate
+}) {
+  const def = registry.get(block._type);
+  const entries = useMemo(() => {
+    if (!def) return [];
+    const custom = def.customFields;
+    const fields = custom ?? introspectToFields(def.schema, def.fields);
+    return collectEntries(fields, block);
+  }, [def, block]);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "xicms-ve__hint", children: "Dit blok heeft geen vertaalbare tekstvelden \u2014 de canonieke inhoud wordt in elke taal getoond." });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+    /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-500", children: [
+      "Vertaling ",
+      /* @__PURE__ */ jsx("strong", { children: locale }),
+      " \u2014 leeg laten = de originele tekst gebruiken. Blokken, afbeeldingen en links wijzig je in de standaardtaal."
+    ] }),
+    entries.map((e) => {
+      const key = `${block._key}.${e.path}`;
+      const value = overlay[key] ?? "";
+      return /* @__PURE__ */ jsx(FieldRow, { label: e.label, hint: e.canonical ? `Origineel: ${e.canonical.replace(/<[^>]+>/g, "").slice(0, 120)}` : void 0, children: e.kind === "richtext" ? /* @__PURE__ */ jsx(RichTextEditor, { siteId, value: value || e.canonical, onChange: (html) => onTranslate(key, html) }) : e.kind === "textarea" ? /* @__PURE__ */ jsx(Textarea, { rows: 3, value, placeholder: e.canonical, onChange: (ev) => onTranslate(key, ev.target.value) }) : /* @__PURE__ */ jsx(Input, { value, placeholder: e.canonical, onChange: (ev) => onTranslate(key, ev.target.value) }) }, key);
+    })
+  ] });
+}
+export {
+  TranslationPanel
+};
+//# sourceMappingURL=TranslationPanel.js.map

package/dist/admin/visual/TranslationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/visual/TranslationPanel.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Vertaalpaneel (5.0): het zijpaneel van de visuele editor in een NIET-default taal. Toont per\n * blok alleen de vertaalbare velden (text/textarea/richtext + link-labels, afgeleid uit de\n * Field-IR en de canonieke waarden — repeater-items dus stuk voor stuk) en schrijft naar de\n * taal-overlay (`translations[locale][\"<blokKey>.<veldpad>\"]`). Leegmaken = terugvallen op de\n * canonieke tekst. Structuurwijzigingen (blokken, afbeeldingen, links) blijven canoniek.\n */\nimport { useMemo } from \"react\";\nimport type { BlockRegistry } from \"../../blocks/registry\";\nimport type { Field } from \"../../schema/fields\";\nimport { introspectToFields } from \"../lib/zodFields\";\nimport { RichTextEditor } from \"../editors/RichTextEditor\";\nimport { Field as FieldRow, Input, Textarea } from \"../ui/primitives\";\n\ninterface Entry {\n  /** Veldpad binnen het blok, bv. \"items.0.title\". */\n  path: string;\n  label: string;\n  kind: \"text\" | \"textarea\" | \"richtext\";\n  canonical: string;\n}\n\nfunction collectEntries(fields: Field[], value: Record<string, unknown>, prefix = \"\", labelPrefix = \"\"): Entry[] {\n  const out: Entry[] = [];\n  for (const f of fields) {\n    const v = value?.[f.key];\n    const label = `${labelPrefix}${f.label || f.key}`;\n    switch (f.type) {\n      case \"text\":\n      case \"textarea\":\n      case \"richtext\":\n        out.push({ path: `${prefix}${f.key}`, label, kind: f.type, canonical: typeof v === \"string\" ? v : \"\" });\n        break;\n      case \"link\": {\n        const lbl = (v as { label?: unknown } | undefined)?.label;\n        out.push({ path: `${prefix}${f.key}.label`, label: `${label} (tekst)`, kind: \"text\", canonical: typeof lbl === \"string\" ? lbl : \"\" });\n        break;\n      }\n      case \"group\":\n        out.push(...collectEntries(f.fields, (v as Record<string, unknown>) ?? {}, `${prefix}${f.key}.`, `${label} · `));\n        break;\n      case \"repeater\": {\n        const items = Array.isArray(v) ? (v as Record<string, unknown>[]) : [];\n        items.forEach((item, i) => {\n          out.push(...collectEntries(f.fields, item ?? {}, `${prefix}${f.key}.${i}.`, `${f.itemLabel ?? label} ${i + 1} · `));\n        });\n        break;\n      }\n      default:\n        break;\n    }\n  }\n  return out;\n}\n\nexport function TranslationPanel({\n  block,\n  siteId,\n  registry,\n  locale,\n  overlay,\n  onTranslate,\n}: {\n  block: Record<string, unknown> & { _key: string; _type: string };\n  siteId: string;\n  registry: BlockRegistry;\n  locale: string;\n  /** De overlay van de actieve taal (gepunte sleutels → vertaalde tekst). */\n  overlay: Record<string, string>;\n  onTranslate: (key: string, value: string) => void;\n}) {\n  const def = registry.get(block._type);\n  const entries = useMemo(() => {\n    if (!def) return [];\n    const custom = (def as { customFields?: Field[] }).customFields;\n    const fields = custom ?? introspectToFields(def.schema, def.fields);\n    return collectEntries(fields, block);\n  }, [def, block]);\n\n  if (entries.length === 0) {\n    return <p className=\"xicms-ve__hint\">Dit blok heeft geen vertaalbare tekstvelden — de canonieke inhoud wordt in elke taal getoond.</p>;\n  }\n\n  return (\n    <div className=\"grid gap-3\">\n      <p className=\"text-xs text-slate-500\">\n        Vertaling <strong>{locale}</strong> — leeg laten = de originele tekst gebruiken. Blokken,\n        afbeeldingen en links wijzig je in de standaardtaal.\n      </p>\n      {entries.map((e) => {\n        const key = `${block._key}.${e.path}`;\n        const value = overlay[key] ?? \"\";\n        return (\n          <FieldRow key={key} label={e.label} hint={e.canonical ? `Origineel: ${e.canonical.replace(/<[^>]+>/g, \"\").slice(0, 120)}` : undefined}>\n            {e.kind === \"richtext\" ? (\n              <RichTextEditor siteId={siteId} value={value || e.canonical} onChange={(html) => onTranslate(key, html)} />\n            ) : e.kind === \"textarea\" ? (\n              <Textarea rows={3} value={value} placeholder={e.canonical} onChange={(ev) => onTranslate(key, ev.target.value)} />\n            ) : (\n              <Input value={value} placeholder={e.canonical} onChange={(ev) => onTranslate(key, ev.target.value)} />\n            )}\n          </FieldRow>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/admin/visual/VisualEditor.js

@@ -4,6 +4,7 @@ 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";
@@ -13,22 +14,29 @@ import { getDraftByPath, saveDraft, publishPage, subscribeDraft, subscribeVersio
 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";
-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 }
 ];
+const inlineCoverageWarned = /* @__PURE__ */ new Set();
+function warnInlineCoverage(type, def, host) {
+  if (process.env.NODE_ENV === "production" || !def || inlineCoverageWarned.has(type)) return;
+  inlineCoverageWarned.add(type);
+  const missing = introspectToFields(def.schema, def.fields).filter((f) => f.type === "text" || f.type === "textarea").map((f) => f.key).filter((key) => !host.querySelector(`[data-xicms-edit="${key}"], [data-xicms-edit$=".${key}"]`));
+  if (missing.length > 0) {
+    console.warn(
+      `[xicms] blok "${type}": tekstveld(en) zonder inline-haak: ${missing.join(", ")} \u2014 voeg data-xicms-edit="<veld>" toe aan de Render zodat ze direct op de pagina bewerkbaar zijn.`
+    );
+  }
+}
 function getPath(obj, path) {
   return path.split(".").reduce((o, k) => o == null ? void 0 : o[k], obj);
 }
@@ -59,11 +67,20 @@ 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 config = useSiteConfig();
+  const { siteId, name } = config;
   const registry = useRegistry();
   const { toast } = useToast();
   const confirm = useConfirm();
-  const path = useMemo(() => typeof window !== "undefined" ? window.location.pathname || "/" : "/", []);
+  const localeCfg = useMemo(() => siteLocales(config), [config]);
+  const { path, urlLocale } = useMemo(() => {
+    const raw = typeof window !== "undefined" ? window.location.pathname || "/" : "/";
+    const { locale: locale2, slugs } = parseLocaleSlugs(raw.split("/").filter(Boolean), localeCfg);
+    const p = "/" + slugs.join("/");
+    return { path: p === "/" ? "/" : p.replace(/\/$/, ""), urlLocale: locale2 };
+  }, [localeCfg]);
+  const [locale, setLocale] = useState(urlLocale);
+  const isTranslating = locale !== localeCfg.defaultLocale;
   const [draft, setDraft] = useState(null);
   const [status, setStatus] = useState("loading");
   const [selectedKey, setSelectedKey] = useState(null);
@@ -138,7 +155,9 @@ function VisualEditorInner({ onClose }) {
     title: d.title,
     slug: d.slug,
     path: d.path,
-    seo: d.seo
+    seo: d.seo,
+    // Alleen meesturen wanneer aanwezig: `undefined` weigert de Firestore-client.
+    ...d.translations ? { translations: d.translations } : {}
   });
   const flushSave = useCallback(async () => {
     const d = draftRef.current;
@@ -160,7 +179,7 @@ function VisualEditorInner({ onClose }) {
       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 });
+        lastSavedRef.current = stableStringify(draftPayload(d));
         setStatus("idle");
       } else {
         setStatus("none");
@@ -175,13 +194,18 @@ function VisualEditorInner({ onClose }) {
     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 remotePayload = stableStringify(draftPayload(remote));
       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 overlay = draft?.translations?.[locale];
+  const displayBlocks = useMemo(
+    () => isTranslating ? localizeBlocks(blocks, overlay) : blocks,
+    [blocks, isTranslating, overlay]
+  );
   const commitInline = useCallback(
     (key, field, value) => {
       mutateDraft(
@@ -198,12 +222,34 @@ function VisualEditorInner({ onClose }) {
     },
     [mutateDraft]
   );
+  const setTranslation = useCallback(
+    (tkey, value) => {
+      mutateDraft(
+        (d) => {
+          const overlay2 = { ...d.translations?.[locale] ?? {} };
+          if (value.trim() === "" || value === void 0) delete overlay2[tkey];
+          else overlay2[tkey] = value;
+          return { ...d, translations: { ...d.translations ?? {}, [locale]: overlay2 } };
+        },
+        { coalesce: true }
+      );
+    },
+    [mutateDraft, locale]
+  );
+  const commitText = useCallback(
+    (key, field, value) => {
+      if (isTranslating) setTranslation(`${key}.${field}`, value);
+      else commitInline(key, field, value);
+    },
+    [isTranslating, setTranslation, commitInline]
+  );
   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 specs = [...GLOBAL_INLINE];
+    warnInlineCoverage(String(type), registry.get(String(type)), host);
     const bound = /* @__PURE__ */ new Set();
     const bind = (el, field, html) => {
       if (el.dataset.veInline === "1") return;
@@ -211,7 +257,7 @@ function VisualEditorInner({ onClose }) {
       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("blur", () => commitText(selectedKey, field, html ? el.innerHTML : el.textContent ?? ""));
       el.addEventListener("keydown", (e) => {
         if (e.key === "Escape") el.blur();
         else if (!html && e.key === "Enter") {
@@ -241,7 +287,7 @@ function VisualEditorInner({ onClose }) {
         delete el.dataset.veInline;
       });
     };
-  }, [selectedKey, blocks, commitInline]);
+  }, [selectedKey, blocks, commitText]);
   const dirtySinceRef = useRef(null);
   useEffect(() => {
     if (!draft) return;
@@ -327,6 +373,28 @@ function VisualEditorInner({ onClose }) {
     copy.splice(i + 1, 0, { ...blocks[i], _key: newKey() });
     setBlocks(copy);
   }
+  async function detachSymbol(i) {
+    const blk = blocks[i];
+    if (blk._type !== "symbolRef" || !blk.symbolId) return;
+    const ok = await confirm({
+      title: "Symbool loskoppelen?",
+      description: "Dit blok wordt een losse kopie en beweegt niet meer mee met het gedeelde symbool.",
+      confirmLabel: "Loskoppelen"
+    });
+    if (!ok) return;
+    const { getSymbolOnce } = await import("../lib/symbolsClient");
+    const sym = await getSymbolOnce(siteId, blk.symbolId);
+    if (!sym) {
+      toast({ title: "Symbool niet gevonden", tone: "error" });
+      return;
+    }
+    const clones = sym.blocks.map((b) => ({ ...b, _key: newKey() }));
+    const copy = [...blocks];
+    copy.splice(i, 1, ...clones);
+    setBlocks(copy);
+    if (selectedKey === blk._key) setSelectedKey(null);
+    toast({ title: "Losgekoppeld", description: "Dit is nu een losse kopie.", tone: "success" });
+  }
   async function remove(i) {
     const ok = await confirm({ title: "Blok verwijderen?", confirmLabel: "Verwijderen", tone: "danger" });
     if (!ok) return;
@@ -353,7 +421,7 @@ function VisualEditorInner({ onClose }) {
     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 saveDraft(siteId, draft.id, draftPayload(draft));
       await publishPage(siteId, draft.id);
       toast({ title: "Gepubliceerd", description: "Herlaad de pagina om het live resultaat te zien.", tone: "success" });
     } catch (e) {
@@ -384,6 +452,17 @@ function VisualEditorInner({ onClose }) {
         name
       ] }),
       /* @__PURE__ */ jsx("span", { className: "xicms-ve__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(
+          Select,
+          {
+            value: locale,
+            onValueChange: setLocale,
+            options: localeCfg.locales.map((l) => ({ value: l, label: l === localeCfg.defaultLocale ? `${l} (standaard)` : l }))
+          }
+        )
+      ] }),
       /* @__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" : "" }),
@@ -411,7 +490,7 @@ function VisualEditorInner({ onClose }) {
         ),
         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) => {
+          displayBlocks.map((b, i) => {
             const def = registry.get(b._type);
             const Render = def?.Render;
             const safe = (() => {
@@ -462,6 +541,7 @@ function VisualEditorInner({ onClose }) {
                     /* @__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" }),
+                    b._type === "symbolRef" && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void detachSymbol(i), "aria-label": "Symbool loskoppelen", title: "Loskoppelen (losse kopie)", children: "\u{1F517}\u2702" }),
                     /* @__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}" })
                   ] }),
@@ -486,7 +566,33 @@ function VisualEditorInner({ onClose }) {
           ] })
         ] })
       ] }),
-      /* @__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("aside", { className: "xicms-ve__panel", children: 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 (",
+          locale,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx(
+          TranslationPanel,
+          {
+            block: selected,
+            siteId,
+            registry,
+            locale,
+            overlay: overlay ?? {},
+            onTranslate: setTranslation
+          },
+          `${selected._key}:${locale}`
+        )
+      ] }) : selected ? /* @__PURE__ */ jsx(SelectedEditor, { block: selected, siteId, registry, onChange: (next) => updateByKey(selected._key, next) }, selected._key) : draft && isTranslating ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+        /* @__PURE__ */ jsxs("p", { className: "xicms-ve__hint", children: [
+          "Je bewerkt de vertaling ",
+          /* @__PURE__ */ jsx("strong", { children: locale }),
+          ". Klik op een blok om zijn teksten te vertalen; lege velden vallen terug op de standaardtaal. Blokken toevoegen/verplaatsen doe je in de standaardtaal."
+        ] }),
+        /* @__PURE__ */ jsx(PageTranslationSettings, { draft, locale, onTranslate: setTranslation })
+      ] }) : 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(
@@ -532,6 +638,25 @@ function PageSettings({
     ] })
   ] });
 }
+function PageTranslationSettings({
+  draft,
+  locale,
+  onTranslate
+}) {
+  const ov = draft.translations?.[locale] ?? {};
+  return /* @__PURE__ */ jsxs("details", { className: "xicms-ve__section", open: true, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "text-sm font-semibold", children: [
+      "Pagina-instellingen (",
+      locale,
+      ")"
+    ] }),
+    /* @__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) }) })
+    ] })
+  ] });
+}
 function VersionsPanel({
   siteId,
   pageId,