@xiwebdesign/xicms-core 7.31.0 → 8.16.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/ConfirmDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useRef, useState, type ReactNode } from \"react\";\nimport { AlertDialog } from \"@astryxdesign/core/AlertDialog\";\n\n/**\n * Eén bevestigingsdialoog voor de hele admin, op de **Astryx AlertDialog** (role=\"alertdialog\",\n * niet weg te klikken). `useConfirm()` geeft een functie die een Promise<bool> teruggeeft — zo\n * vervang je een onveilige directe verwijdering door een nette \"weet je het zeker?\". Monteer\n * `<ConfirmHost/>` één keer in `AdminApp`. De API blijft gelijk (geen call-site-wijziging).\n */\nexport interface ConfirmOptions {\n  title: string;\n  description?: ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /** \"danger\" = destructieve (rode) bevestigingsknop (verwijderen e.d.). */\n  tone?: \"default\" | \"danger\";\n}\n\ntype ConfirmFn = (opts: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\nexport function ConfirmHost({ children }: { children: ReactNode }) {\n  const [open, setOpen] = useState(false);\n  const [opts, setOpts] = useState<ConfirmOptions | null>(null);\n  const resolver = useRef<((v: boolean) => void) | null>(null);\n\n  const confirm = useCallback<ConfirmFn>((o) => {\n    setOpts(o);\n    setOpen(true);\n    return new Promise<boolean>((resolve) => {\n      resolver.current = resolve;\n    });\n  }, []);\n\n  const close = useCallback((value: boolean) => {\n    setOpen(false);\n    resolver.current?.(value);\n    resolver.current = null;\n  }, []);\n\n  return (\n    <ConfirmContext.Provider value={confirm}>\n      {children}\n      {opts && (\n        <AlertDialog\n          isOpen={open}\n          onOpenChange={(o) => !o && close(false)}\n          title={opts.title}\n          description={typeof opts.description === \"string\" ? opts.description : \" \"}\n          cancelLabel={opts.cancelLabel ?? \"Annuleren\"}\n          actionLabel={opts.confirmLabel ?? \"Bevestigen\"}\n          actionVariant={opts.tone === \"danger\" ? \"destructive\" : \"primary\"}\n          onAction={() => close(true)}\n        />\n      )}\n    </ConfirmContext.Provider>\n  );\n}\n\n/** Geeft een `confirm(opts) => Promise<boolean>`. Buiten een `ConfirmHost` valt het terug op `false`. */\nexport function useConfirm(): ConfirmFn {\n  const ctx = useContext(ConfirmContext);\n  return ctx ?? (async () => false);\n}\n"],"mappings":";AA4CI,SAGI,KAHJ;AA1CJ,SAAS,eAAe,aAAa,YAAY,QAAQ,gBAAgC;AACzF,SAAS,mBAAmB;AAmB5B,MAAM,iBAAiB,cAAgC,IAAI;AAEpD,SAAS,YAAY,EAAE,SAAS,GAA4B;AACjE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAgC,IAAI;AAC5D,QAAM,WAAW,OAAsC,IAAI;AAE3D,QAAM,UAAU,YAAuB,CAAC,MAAM;AAC5C,YAAQ,CAAC;AACT,YAAQ,IAAI;AACZ,WAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,eAAS,UAAU;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,CAAC,UAAmB;AAC5C,YAAQ,KAAK;AACb,aAAS,UAAU,KAAK;AACxB,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B;AAAA;AAAA,IACA,QACC;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,cAAc,CAAC,MAAM,CAAC,KAAK,MAAM,KAAK;AAAA,QACtC,OAAO,KAAK;AAAA,QACZ,aAAa,OAAO,KAAK,gBAAgB,WAAW,KAAK,cAAc;AAAA,QACvE,aAAa,KAAK,eAAe;AAAA,QACjC,aAAa,KAAK,gBAAgB;AAAA,QAClC,eAAe,KAAK,SAAS,WAAW,gBAAgB;AAAA,QACxD,UAAU,MAAM,MAAM,IAAI;AAAA;AAAA,IAC5B;AAAA,KAEJ;AAEJ;AAGO,SAAS,aAAwB;AACtC,QAAM,MAAM,WAAW,cAAc;AACrC,SAAO,QAAQ,YAAY;AAC7B;","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/ConfirmDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useRef, useState, type ReactNode } from \"react\";\nimport { AlertDialog } from \"@astryxdesign/core/AlertDialog\";\nimport { Dialog, DialogContent, DialogFooter } from \"./dialog\";\nimport { Button } from \"./primitives\";\n\n/**\n * Eén bevestigingsdialoog voor de hele admin, op de **Astryx AlertDialog** (role=\"alertdialog\",\n * niet weg te klikken). `useConfirm()` geeft een functie die een Promise<bool> teruggeeft — zo\n * vervang je een onveilige directe verwijdering door een nette \"weet je het zeker?\". Monteer\n * `<ConfirmHost/>` één keer in `AdminApp`. De API blijft gelijk (geen call-site-wijziging).\n */\nexport interface ConfirmOptions {\n  title: string;\n  description?: ReactNode;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /** \"danger\" = destructieve (rode) bevestigingsknop (verwijderen e.d.). */\n  tone?: \"default\" | \"danger\";\n}\n\ntype ConfirmFn = (opts: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\nexport function ConfirmHost({ children }: { children: ReactNode }) {\n  const [open, setOpen] = useState(false);\n  const [opts, setOpts] = useState<ConfirmOptions | null>(null);\n  const resolver = useRef<((v: boolean) => void) | null>(null);\n\n  const confirm = useCallback<ConfirmFn>((o) => {\n    setOpts(o);\n    setOpen(true);\n    return new Promise<boolean>((resolve) => {\n      resolver.current = resolve;\n    });\n  }, []);\n\n  const close = useCallback((value: boolean) => {\n    setOpen(false);\n    resolver.current?.(value);\n    resolver.current = null;\n  }, []);\n\n  return (\n    <ConfirmContext.Provider value={confirm}>\n      {children}\n      {/* Een beschrijving met opmaak (lijstje wijzigingen, waarschuwingen vóór publiceren): de\n          Astryx-AlertDialog neemt alleen een string — tot 8.10 werd zo'n beschrijving daarom als\n          een spatie getoond, en zag niemand de waarschuwingen. Dan een gewone dialoog met dezelfde\n          twee knoppen. */}\n      {opts && typeof opts.description !== \"string\" && opts.description != null && (\n        <Dialog open={open} onOpenChange={(o) => !o && close(false)}>\n          <DialogContent title={opts.title} width=\"min(92vw, 34rem)\">\n            <div role=\"alert\" className=\"max-h-[60vh] overflow-y-auto text-sm text-slate-700\">{opts.description}</div>\n            <DialogFooter>\n              <Button variant=\"ghost\" onClick={() => close(false)}>{opts.cancelLabel ?? \"Annuleren\"}</Button>\n              <Button variant={opts.tone === \"danger\" ? \"danger\" : \"primary\"} onClick={() => close(true)}>\n                {opts.confirmLabel ?? \"Bevestigen\"}\n              </Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      )}\n      {opts && (typeof opts.description === \"string\" || opts.description == null) && (\n        <AlertDialog\n          isOpen={open}\n          onOpenChange={(o) => !o && close(false)}\n          title={opts.title}\n          description={typeof opts.description === \"string\" ? opts.description : \" \"}\n          cancelLabel={opts.cancelLabel ?? \"Annuleren\"}\n          actionLabel={opts.confirmLabel ?? \"Bevestigen\"}\n          actionVariant={opts.tone === \"danger\" ? \"destructive\" : \"primary\"}\n          onAction={() => close(true)}\n        />\n      )}\n    </ConfirmContext.Provider>\n  );\n}\n\n/** Geeft een `confirm(opts) => Promise<boolean>`. Buiten een `ConfirmHost` valt het terug op `false`. */\nexport function useConfirm(): ConfirmFn {\n  const ctx = useContext(ConfirmContext);\n  return ctx ?? (async () => false);\n}\n"],"mappings":";AAuDY,cACA,YADA;AArDZ,SAAS,eAAe,aAAa,YAAY,QAAQ,gBAAgC;AACzF,SAAS,mBAAmB;AAC5B,SAAS,QAAQ,eAAe,oBAAoB;AACpD,SAAS,cAAc;AAmBvB,MAAM,iBAAiB,cAAgC,IAAI;AAEpD,SAAS,YAAY,EAAE,SAAS,GAA4B;AACjE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAgC,IAAI;AAC5D,QAAM,WAAW,OAAsC,IAAI;AAE3D,QAAM,UAAU,YAAuB,CAAC,MAAM;AAC5C,YAAQ,CAAC;AACT,YAAQ,IAAI;AACZ,WAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,eAAS,UAAU;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ,YAAY,CAAC,UAAmB;AAC5C,YAAQ,KAAK;AACb,aAAS,UAAU,KAAK;AACxB,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,SACE,qBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B;AAAA;AAAA,IAKA,QAAQ,OAAO,KAAK,gBAAgB,YAAY,KAAK,eAAe,QACnE,oBAAC,UAAO,MAAY,cAAc,CAAC,MAAM,CAAC,KAAK,MAAM,KAAK,GACxD,+BAAC,iBAAc,OAAO,KAAK,OAAO,OAAM,oBACtC;AAAA,0BAAC,SAAI,MAAK,SAAQ,WAAU,uDAAuD,eAAK,aAAY;AAAA,MACpG,qBAAC,gBACC;AAAA,4BAAC,UAAO,SAAQ,SAAQ,SAAS,MAAM,MAAM,KAAK,GAAI,eAAK,eAAe,aAAY;AAAA,QACtF,oBAAC,UAAO,SAAS,KAAK,SAAS,WAAW,WAAW,WAAW,SAAS,MAAM,MAAM,IAAI,GACtF,eAAK,gBAAgB,cACxB;AAAA,SACF;AAAA,OACF,GACF;AAAA,IAED,SAAS,OAAO,KAAK,gBAAgB,YAAY,KAAK,eAAe,SACpE;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,cAAc,CAAC,MAAM,CAAC,KAAK,MAAM,KAAK;AAAA,QACtC,OAAO,KAAK;AAAA,QACZ,aAAa,OAAO,KAAK,gBAAgB,WAAW,KAAK,cAAc;AAAA,QACvE,aAAa,KAAK,eAAe;AAAA,QACjC,aAAa,KAAK,gBAAgB;AAAA,QAClC,eAAe,KAAK,SAAS,WAAW,gBAAgB;AAAA,QACxD,UAAU,MAAM,MAAM,IAAI;AAAA;AAAA,IAC5B;AAAA,KAEJ;AAEJ;AAGO,SAAS,aAAwB;AACtC,QAAM,MAAM,WAAW,cAAc;AACrC,SAAO,QAAQ,YAAY;AAC7B;","names":[]}

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

@@ -0,0 +1,34 @@
+/**
+ * Eén lijn-icoonset voor beheer en editor (8.12).
+ *
+ * Er liepen drie idiomen door elkaar: SVG in de zijbalk, Unicode-tekens (⚙ ↶ ↷ ↗) in de balk en
+ * emoji (🔍 🌐 🔗) op knoppen. Emoji zien er per besturingssysteem anders uit, kleuren niet mee met
+ * de tekst en ogen op 14px als een vlek. Zelfde stijl als `PanelIcon` (1.6 lijn, currentColor),
+ * zonder icoonpakket: het zijn een paar paden.
+ */
+declare const PADEN: {
+    readonly zoek: "M11 18a7 7 0 100-14 7 7 0 000 14z M20 20l-4-4";
+    readonly extern: "M14 4h6v6 M20 4l-9 9 M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5";
+    readonly ongedaan: "M9 14L4 9l5-5 M4 9h11a5 5 0 010 10h-3";
+    readonly opnieuw: "M15 14l5-5-5-5 M20 9H9a5 5 0 000 10h3";
+    readonly tandwiel: "M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 11-4 0v-.1A1.6 1.6 0 007.5 19.4l-.1.1a2 2 0 11-2.8-2.8l.1-.1A1.6 1.6 0 003 14.6H3a2 2 0 110-4h.1A1.6 1.6 0 004.6 7.5l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H9.4a1.6 1.6 0 001-1.5V3a2 2 0 114 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8v.1a1.6 1.6 0 001.5 1H21a2 2 0 110 4h-.1a1.6 1.6 0 00-1.5 1z";
+    readonly potlood: "M4 20h4L19.5 8.5a2.1 2.1 0 00-3-3L5 17v3z M14.5 6.5l3 3";
+    readonly plus: "M12 5v14 M5 12h14";
+    readonly prullenbak: "M3 6h18 M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2 M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14";
+    readonly link: "M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1 M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1";
+    readonly foto: "M3 5h18v14H3z M3 15l5-5 4 4 3-3 6 6 M15.5 9.5a1 1 0 100-2 1 1 0 000 2z";
+    readonly wereld: "M12 21a9 9 0 100-18 9 9 0 000 18z M3 12h18 M12 3a14 14 0 010 18 M12 3a14 14 0 000 18";
+    readonly vink: "M20 6L9 17l-5-5";
+    readonly kruis: "M6 6l12 12 M18 6L6 18";
+    readonly info: "M12 21a9 9 0 100-18 9 9 0 000 18z M12 11v5 M12 8h.01";
+    readonly let: "M12 3l10 18H2z M12 10v4 M12 17h.01";
+    readonly leeg: "M4 7h16v12H4z M4 7l2-3h12l2 3 M9 12h6";
+};
+export type IconNaam = keyof typeof PADEN;
+export declare function Icon({ naam, grootte, className, label }: {
+    naam: IconNaam;
+    grootte?: number;
+    className?: string;
+    label?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/admin/ui/Icon.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+const PADEN = {
+  zoek: "M11 18a7 7 0 100-14 7 7 0 000 14z M20 20l-4-4",
+  extern: "M14 4h6v6 M20 4l-9 9 M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5",
+  ongedaan: "M9 14L4 9l5-5 M4 9h11a5 5 0 010 10h-3",
+  opnieuw: "M15 14l5-5-5-5 M20 9H9a5 5 0 000 10h3",
+  tandwiel: "M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 11-4 0v-.1A1.6 1.6 0 007.5 19.4l-.1.1a2 2 0 11-2.8-2.8l.1-.1A1.6 1.6 0 003 14.6H3a2 2 0 110-4h.1A1.6 1.6 0 004.6 7.5l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H9.4a1.6 1.6 0 001-1.5V3a2 2 0 114 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8v.1a1.6 1.6 0 001.5 1H21a2 2 0 110 4h-.1a1.6 1.6 0 00-1.5 1z",
+  potlood: "M4 20h4L19.5 8.5a2.1 2.1 0 00-3-3L5 17v3z M14.5 6.5l3 3",
+  plus: "M12 5v14 M5 12h14",
+  prullenbak: "M3 6h18 M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2 M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14",
+  link: "M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1 M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1",
+  foto: "M3 5h18v14H3z M3 15l5-5 4 4 3-3 6 6 M15.5 9.5a1 1 0 100-2 1 1 0 000 2z",
+  wereld: "M12 21a9 9 0 100-18 9 9 0 000 18z M3 12h18 M12 3a14 14 0 010 18 M12 3a14 14 0 000 18",
+  vink: "M20 6L9 17l-5-5",
+  kruis: "M6 6l12 12 M18 6L6 18",
+  info: "M12 21a9 9 0 100-18 9 9 0 000 18z M12 11v5 M12 8h.01",
+  let: "M12 3l10 18H2z M12 10v4 M12 17h.01",
+  leeg: "M4 7h16v12H4z M4 7l2-3h12l2 3 M9 12h6"
+};
+function Icon({ naam, grootte = 16, className, label }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      role: label ? "img" : void 0,
+      viewBox: "0 0 24 24",
+      width: grootte,
+      height: grootte,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: ["shrink-0", className].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ jsx("path", { d: PADEN[naam] })
+    }
+  );
+}
+export {
+  Icon
+};
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/Icon.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Eén lijn-icoonset voor beheer en editor (8.12).\n *\n * Er liepen drie idiomen door elkaar: SVG in de zijbalk, Unicode-tekens (⚙ ↶ ↷ ↗) in de balk en\n * emoji (🔍 🌐 🔗) op knoppen. Emoji zien er per besturingssysteem anders uit, kleuren niet mee met\n * de tekst en ogen op 14px als een vlek. Zelfde stijl als `PanelIcon` (1.6 lijn, currentColor),\n * zonder icoonpakket: het zijn een paar paden.\n */\nconst PADEN = {\n  zoek: \"M11 18a7 7 0 100-14 7 7 0 000 14z M20 20l-4-4\",\n  extern: \"M14 4h6v6 M20 4l-9 9 M18 14v5a1 1 0 01-1 1H5a1 1 0 01-1-1V7a1 1 0 011-1h5\",\n  ongedaan: \"M9 14L4 9l5-5 M4 9h11a5 5 0 010 10h-3\",\n  opnieuw: \"M15 14l5-5-5-5 M20 9H9a5 5 0 000 10h3\",\n  tandwiel: \"M12 15a3 3 0 100-6 3 3 0 000 6z M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 11-4 0v-.1A1.6 1.6 0 007.5 19.4l-.1.1a2 2 0 11-2.8-2.8l.1-.1A1.6 1.6 0 003 14.6H3a2 2 0 110-4h.1A1.6 1.6 0 004.6 7.5l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H9.4a1.6 1.6 0 001-1.5V3a2 2 0 114 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8v.1a1.6 1.6 0 001.5 1H21a2 2 0 110 4h-.1a1.6 1.6 0 00-1.5 1z\",\n  potlood: \"M4 20h4L19.5 8.5a2.1 2.1 0 00-3-3L5 17v3z M14.5 6.5l3 3\",\n  plus: \"M12 5v14 M5 12h14\",\n  prullenbak: \"M3 6h18 M8 6V4a1 1 0 011-1h6a1 1 0 011 1v2 M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14\",\n  link: \"M10 14a4 4 0 005.7 0l3-3a4 4 0 00-5.7-5.7l-1 1 M14 10a4 4 0 00-5.7 0l-3 3a4 4 0 005.7 5.7l1-1\",\n  foto: \"M3 5h18v14H3z M3 15l5-5 4 4 3-3 6 6 M15.5 9.5a1 1 0 100-2 1 1 0 000 2z\",\n  wereld: \"M12 21a9 9 0 100-18 9 9 0 000 18z M3 12h18 M12 3a14 14 0 010 18 M12 3a14 14 0 000 18\",\n  vink: \"M20 6L9 17l-5-5\",\n  kruis: \"M6 6l12 12 M18 6L6 18\",\n  info: \"M12 21a9 9 0 100-18 9 9 0 000 18z M12 11v5 M12 8h.01\",\n  let: \"M12 3l10 18H2z M12 10v4 M12 17h.01\",\n  leeg: \"M4 7h16v12H4z M4 7l2-3h12l2 3 M9 12h6\",\n} as const;\n\nexport type IconNaam = keyof typeof PADEN;\n\nexport function Icon({ naam, grootte = 16, className, label }: { naam: IconNaam; grootte?: number; className?: string; label?: string }) {\n  return (\n    <svg\n      aria-hidden={label ? undefined : true}\n      aria-label={label}\n      role={label ? \"img\" : undefined}\n      viewBox=\"0 0 24 24\"\n      width={grootte}\n      height={grootte}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={[\"shrink-0\", className].filter(Boolean).join(\" \")}\n    >\n      <path d={PADEN[naam]} />\n    </svg>\n  );\n}\n"],"mappings":";AA+CM;AArCN,MAAM,QAAQ;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AACR;AAIO,SAAS,KAAK,EAAE,MAAM,UAAU,IAAI,WAAW,MAAM,GAA6E;AACvI,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,QAAQ,SAAY;AAAA,MACjC,cAAY;AAAA,MACZ,MAAM,QAAQ,QAAQ;AAAA,MACtB,SAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAE3D,8BAAC,UAAK,GAAG,MAAM,IAAI,GAAG;AAAA;AAAA,EACxB;AAEJ;","names":[]}

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

@@ -0,0 +1,15 @@
+import { type PickedMedia } from "../media/MediaPicker.js";
+/**
+ * Fotoveld (8.2): wat de klant ziet is de FOTO, niet een URL. Eerst was elk beeldveld een
+ * tekstvak met "URL of kies →" en een knop ernaast — de meest gebruikte handeling ("foto
+ * wijzigen") begon met een onleesbaar adres. Nu: een miniatuur, "Wijzigen" via de mediabibliotheek
+ * en "Weghalen". Een adres plakken kan nog onder "Ander adres" (voor een externe afbeelding).
+ */
+export declare function ImageField({ siteId, value, onChange, wat, verwijderbaar, }: {
+    siteId: string;
+    value: string | undefined;
+    onChange: (url: string | undefined, media?: PickedMedia) => void;
+    /** Hoe het beeld heet in knoppen ("foto", "logo", "achtergrond"). */
+    wat?: string;
+    verwijderbaar?: boolean;
+}): import("react").JSX.Element;

package/dist/admin/ui/ImageField.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { MediaPickerButton } from "../media/MediaPicker.js";
+import { Button, Input } from "./primitives.js";
+function ImageField({
+  siteId,
+  value,
+  onChange,
+  wat = "foto",
+  verwijderbaar = true
+}) {
+  const id = useId();
+  const url = value?.trim() || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      url ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: url,
+            alt: "",
+            className: "h-16 w-16 shrink-0 rounded-lg border border-slate-200 object-cover",
+            style: { background: "var(--color-background-muted)" }
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "grid h-16 w-16 shrink-0 place-items-center rounded-lg border border-dashed border-slate-300 text-xl text-slate-400",
+          children: "\u{1F5BC}"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsx(
+          MediaPickerButton,
+          {
+            siteId,
+            label: url ? "Wijzigen" : `Kies een ${wat}`,
+            variant: url ? "secondary" : "primary",
+            onSelect: (m) => onChange(m.url, m)
+          }
+        ),
+        url && verwijderbaar && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onChange(void 0), children: "Weghalen" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("details", { className: "text-xs text-slate-500", children: [
+      /* @__PURE__ */ jsx("summary", { className: "cursor-pointer select-none", children: "Ander adres (externe afbeelding)" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          id,
+          "aria-label": `Adres van de ${wat}`,
+          value: value ?? "",
+          onChange: (e) => onChange(e.target.value || void 0),
+          placeholder: "https://\u2026"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  ImageField
+};
+//# sourceMappingURL=ImageField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/ImageField.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId } from \"react\";\nimport { MediaPickerButton, type PickedMedia } from \"../media/MediaPicker\";\nimport { Button, Input } from \"./primitives\";\n\n/**\n * Fotoveld (8.2): wat de klant ziet is de FOTO, niet een URL. Eerst was elk beeldveld een\n * tekstvak met \"URL of kies →\" en een knop ernaast — de meest gebruikte handeling (\"foto\n * wijzigen\") begon met een onleesbaar adres. Nu: een miniatuur, \"Wijzigen\" via de mediabibliotheek\n * en \"Weghalen\". Een adres plakken kan nog onder \"Ander adres\" (voor een externe afbeelding).\n */\nexport function ImageField({\n  siteId,\n  value,\n  onChange,\n  wat = \"foto\",\n  verwijderbaar = true,\n}: {\n  siteId: string;\n  value: string | undefined;\n  onChange: (url: string | undefined, media?: PickedMedia) => void;\n  /** Hoe het beeld heet in knoppen (\"foto\", \"logo\", \"achtergrond\"). */\n  wat?: string;\n  verwijderbaar?: boolean;\n}) {\n  const id = useId();\n  const url = value?.trim() || undefined;\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-3\">\n        {url ? (\n          // eslint-disable-next-line @next/next/no-img-element\n          <img\n            src={url}\n            alt=\"\"\n            className=\"h-16 w-16 shrink-0 rounded-lg border border-slate-200 object-cover\"\n            style={{ background: \"var(--color-background-muted)\" }}\n          />\n        ) : (\n          <div\n            aria-hidden\n            className=\"grid h-16 w-16 shrink-0 place-items-center rounded-lg border border-dashed border-slate-300 text-xl text-slate-400\"\n          >\n            🖼\n          </div>\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <MediaPickerButton\n            siteId={siteId}\n            label={url ? \"Wijzigen\" : `Kies een ${wat}`}\n            variant={url ? \"secondary\" : \"primary\"}\n            onSelect={(m) => onChange(m.url, m)}\n          />\n          {url && verwijderbaar && (\n            <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={() => onChange(undefined)}>\n              Weghalen\n            </Button>\n          )}\n        </div>\n      </div>\n      <details className=\"text-xs text-slate-500\">\n        <summary className=\"cursor-pointer select-none\">Ander adres (externe afbeelding)</summary>\n        <div className=\"mt-2\">\n          <Input\n            id={id}\n            aria-label={`Adres van de ${wat}`}\n            value={value ?? \"\"}\n            onChange={(e) => onChange(e.target.value || undefined)}\n            placeholder=\"https://…\"\n          />\n        </div>\n      </details>\n    </div>\n  );\n}\n"],"mappings":";AAiCU,cAcF,YAdE;AA/BV,SAAS,aAAa;AACtB,SAAS,yBAA2C;AACpD,SAAS,QAAQ,aAAa;AAQvB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,gBAAgB;AAClB,GAOG;AACD,QAAM,KAAK,MAAM;AACjB,QAAM,MAAM,OAAO,KAAK,KAAK;AAC7B,SACE,qBAAC,SAAI,WAAU,cACb;AAAA,yBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA;AAAA,QAEC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAI;AAAA,YACJ,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,gCAAgC;AAAA;AAAA,QACvD;AAAA,UAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAU;AAAA,UACX;AAAA;AAAA,MAED;AAAA,MAEF,qBAAC,SAAI,WAAU,wBACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,MAAM,aAAa,YAAY,GAAG;AAAA,YACzC,SAAS,MAAM,cAAc;AAAA,YAC7B,UAAU,CAAC,MAAM,SAAS,EAAE,KAAK,CAAC;AAAA;AAAA,QACpC;AAAA,QACC,OAAO,iBACN,oBAAC,UAAO,MAAK,UAAS,MAAK,MAAK,SAAQ,SAAQ,SAAS,MAAM,SAAS,MAAS,GAAG,sBAEpF;AAAA,SAEJ;AAAA,OACF;AAAA,IACA,qBAAC,aAAQ,WAAU,0BACjB;AAAA,0BAAC,aAAQ,WAAU,8BAA6B,8CAAgC;AAAA,MAChF,oBAAC,SAAI,WAAU,QACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAY,gBAAgB,GAAG;AAAA,UAC/B,OAAO,SAAS;AAAA,UAChB,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,SAAS,MAAS;AAAA,UACrD,aAAY;AAAA;AAAA,MACd,GACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,25 @@
+/**
+ * Kleurveld (7.24, gedeeld sinds 8.2): een echte kleurkiezer naast het hex-veld. De hex blijft
+ * (plakken uit een huisstijlgids), de kiezer erbij voorkomt "#ff00" en oranje-dat-geel-moest-zijn.
+ * Met `stalen` toont hij eerst de huisstijlkleuren van de site als één-klik-keuze — wie een
+ * blokachtergrond kiest, wil meestal een kleur die al in de site zit.
+ */
+export declare function KleurVeld({ label, hint, value, placeholder, onChange, stalen, wisbaar, }: {
+    label: string;
+    hint?: string;
+    value: string;
+    placeholder?: string;
+    onChange: (v: string) => void;
+    stalen?: {
+        label: string;
+        kleur: string;
+    }[];
+    /** Toon een "Geen"-knop die de kleur leegmaakt. */
+    wisbaar?: boolean;
+}): import("react").JSX.Element;
+/** Contrastregel onder de merkkleur: knoptekst op de merkkleur, en merkkleur op de achtergrond. */
+export declare function ContrastRegel({ primary, background, foreground }: {
+    primary: string;
+    background?: string;
+    foreground?: string;
+}): import("react").JSX.Element | null;

package/dist/admin/ui/KleurVeld.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { contrast, contrastOordeel, naarHex6, tekstOp } from "../lib/kleur.js";
+import { Field, Input } from "./primitives.js";
+function KleurVeld({
+  label,
+  hint,
+  value,
+  placeholder,
+  onChange,
+  stalen,
+  wisbaar
+}) {
+  const bruikbaar = (stalen ?? []).filter((x) => /^#[0-9a-f]{3,8}$/i.test(x.kleur.trim()));
+  return /* @__PURE__ */ jsx(Field, { label, hint, children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    bruikbaar.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", role: "group", "aria-label": `${label}: huisstijlkleuren`, children: [
+      bruikbaar.map((x) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          title: x.label,
+          "aria-label": `${x.label} (${x.kleur})`,
+          "aria-pressed": value.toLowerCase() === x.kleur.toLowerCase(),
+          onClick: () => onChange(x.kleur),
+          className: "xicms-admin-btn h-7 w-7 rounded-full border border-slate-300 aria-[pressed=true]:ring-2 aria-[pressed=true]:ring-slate-900",
+          style: { background: x.kleur }
+        },
+        x.label
+      )),
+      wisbaar && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange(""), className: "xicms-admin-btn ml-1 rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-100", children: "Geen" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "color",
+          "aria-label": `${label} kiezen`,
+          value: naarHex6(value || placeholder, "#ffffff"),
+          onChange: (e) => onChange(e.target.value),
+          className: "h-9 w-11 shrink-0 cursor-pointer rounded-md border border-slate-200 bg-transparent p-0.5"
+        }
+      ),
+      /* @__PURE__ */ jsx(Input, { value, placeholder, onChange: (e) => onChange(e.target.value), "aria-label": `${label} (kleurcode)` })
+    ] })
+  ] }) });
+}
+function ContrastRegel({ primary, background, foreground }) {
+  const knop = contrastOordeel(contrast(primary, tekstOp(primary)));
+  const opAchtergrond = contrastOordeel(contrast(primary, background || "#ffffff"));
+  const tekst = foreground ? contrastOordeel(contrast(foreground, background || "#ffffff")) : null;
+  if (!knop && !opAchtergrond && !tekst) return null;
+  const kleur = (t) => t === "goed" ? "text-emerald-700" : t === "matig" ? "text-amber-700" : "text-red-700";
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-1 text-xs", children: [
+    knop && /* @__PURE__ */ jsxs("p", { className: kleur(knop.toon), children: [
+      "Knoptekst op merkkleur: ",
+      knop.tekst.replace(/^Contrast /, "")
+    ] }),
+    opAchtergrond && /* @__PURE__ */ jsxs("p", { className: kleur(opAchtergrond.toon), children: [
+      "Merkkleur als tekst op de achtergrond: ",
+      opAchtergrond.tekst.replace(/^Contrast /, "")
+    ] }),
+    tekst && /* @__PURE__ */ jsxs("p", { className: kleur(tekst.toon === "matig" ? "slecht" : tekst.toon), children: [
+      "Tekst op de achtergrond: ",
+      tekst.tekst.replace(/^Contrast /, "").replace(/voldoende voor knoppen en koppen, krap voor kleine tekst/, "te weinig voor lopende tekst (minimaal 4,5)")
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-slate-500", children: [
+      "Voorbeeld: ",
+      /* @__PURE__ */ jsx("span", { className: "rounded-md px-2 py-0.5 font-medium", style: { background: primary, color: tekstOp(primary) }, children: "Knop" })
+    ] })
+  ] });
+}
+export {
+  ContrastRegel,
+  KleurVeld
+};
+//# sourceMappingURL=KleurVeld.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/KleurVeld.tsx"],"sourcesContent":["\"use client\";\n\nimport { contrast, contrastOordeel, naarHex6, tekstOp } from \"../lib/kleur\";\nimport { Field, Input } from \"./primitives\";\n\n/**\n * Kleurveld (7.24, gedeeld sinds 8.2): een echte kleurkiezer naast het hex-veld. De hex blijft\n * (plakken uit een huisstijlgids), de kiezer erbij voorkomt \"#ff00\" en oranje-dat-geel-moest-zijn.\n * Met `stalen` toont hij eerst de huisstijlkleuren van de site als één-klik-keuze — wie een\n * blokachtergrond kiest, wil meestal een kleur die al in de site zit.\n */\nexport function KleurVeld({\n  label,\n  hint,\n  value,\n  placeholder,\n  onChange,\n  stalen,\n  wisbaar,\n}: {\n  label: string;\n  hint?: string;\n  value: string;\n  placeholder?: string;\n  onChange: (v: string) => void;\n  stalen?: { label: string; kleur: string }[];\n  /** Toon een \"Geen\"-knop die de kleur leegmaakt. */\n  wisbaar?: boolean;\n}) {\n  const bruikbaar = (stalen ?? []).filter((x) => /^#[0-9a-f]{3,8}$/i.test(x.kleur.trim()));\n  return (\n    <Field label={label} hint={hint}>\n      <div className=\"grid gap-2\">\n        {bruikbaar.length > 0 && (\n          <div className=\"flex flex-wrap items-center gap-1.5\" role=\"group\" aria-label={`${label}: huisstijlkleuren`}>\n            {bruikbaar.map((x) => (\n              <button\n                key={x.label}\n                type=\"button\"\n                title={x.label}\n                aria-label={`${x.label} (${x.kleur})`}\n                aria-pressed={value.toLowerCase() === x.kleur.toLowerCase()}\n                onClick={() => onChange(x.kleur)}\n                className=\"xicms-admin-btn h-7 w-7 rounded-full border border-slate-300 aria-[pressed=true]:ring-2 aria-[pressed=true]:ring-slate-900\"\n                style={{ background: x.kleur }}\n              />\n            ))}\n            {wisbaar && (\n              <button type=\"button\" onClick={() => onChange(\"\")} className=\"xicms-admin-btn ml-1 rounded px-2 py-1 text-xs text-slate-600 hover:bg-slate-100\">\n                Geen\n              </button>\n            )}\n          </div>\n        )}\n        <div className=\"flex items-center gap-2\">\n          <input\n            type=\"color\"\n            aria-label={`${label} kiezen`}\n            value={naarHex6(value || placeholder, \"#ffffff\")}\n            onChange={(e) => onChange(e.target.value)}\n            className=\"h-9 w-11 shrink-0 cursor-pointer rounded-md border border-slate-200 bg-transparent p-0.5\"\n          />\n          <Input value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} aria-label={`${label} (kleurcode)`} />\n        </div>\n      </div>\n    </Field>\n  );\n}\n\n/** Contrastregel onder de merkkleur: knoptekst op de merkkleur, en merkkleur op de achtergrond. */\nexport function ContrastRegel({ primary, background, foreground }: { primary: string; background?: string; foreground?: string }) {\n  const knop = contrastOordeel(contrast(primary, tekstOp(primary)));\n  const opAchtergrond = contrastOordeel(contrast(primary, background || \"#ffffff\"));\n  // 8.10: ook de gewone tekst op de achtergrond — lichtgrijze tekst op wit ging ongemerkt live.\n  const tekst = foreground ? contrastOordeel(contrast(foreground, background || \"#ffffff\")) : null;\n  if (!knop && !opAchtergrond && !tekst) return null;\n  const kleur = (t: \"goed\" | \"matig\" | \"slecht\") => (t === \"goed\" ? \"text-emerald-700\" : t === \"matig\" ? \"text-amber-700\" : \"text-red-700\");\n  return (\n    <div className=\"grid gap-1 text-xs\">\n      {knop && <p className={kleur(knop.toon)}>Knoptekst op merkkleur: {knop.tekst.replace(/^Contrast /, \"\")}</p>}\n      {opAchtergrond && <p className={kleur(opAchtergrond.toon)}>Merkkleur als tekst op de achtergrond: {opAchtergrond.tekst.replace(/^Contrast /, \"\")}</p>}\n      {tekst && <p className={kleur(tekst.toon === \"matig\" ? \"slecht\" : tekst.toon)}>Tekst op de achtergrond: {tekst.tekst.replace(/^Contrast /, \"\").replace(/voldoende voor knoppen en koppen, krap voor kleine tekst/, \"te weinig voor lopende tekst (minimaal 4,5)\")}</p>}\n      <p className=\"text-slate-500\">Voorbeeld: <span className=\"rounded-md px-2 py-0.5 font-medium\" style={{ background: primary, color: tekstOp(primary) }}>Knop</span></p>\n    </div>\n  );\n}\n\n"],"mappings":";AAkCU,SAEI,KAFJ;AAhCV,SAAS,UAAU,iBAAiB,UAAU,eAAe;AAC7D,SAAS,OAAO,aAAa;AAQtB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,aAAa,UAAU,CAAC,GAAG,OAAO,CAAC,MAAM,oBAAoB,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;AACvF,SACE,oBAAC,SAAM,OAAc,MACnB,+BAAC,SAAI,WAAU,cACZ;AAAA,cAAU,SAAS,KAClB,qBAAC,SAAI,WAAU,uCAAsC,MAAK,SAAQ,cAAY,GAAG,KAAK,sBACnF;AAAA,gBAAU,IAAI,CAAC,MACd;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,OAAO,EAAE;AAAA,UACT,cAAY,GAAG,EAAE,KAAK,KAAK,EAAE,KAAK;AAAA,UAClC,gBAAc,MAAM,YAAY,MAAM,EAAE,MAAM,YAAY;AAAA,UAC1D,SAAS,MAAM,SAAS,EAAE,KAAK;AAAA,UAC/B,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,EAAE,MAAM;AAAA;AAAA,QAPxB,EAAE;AAAA,MAQT,CACD;AAAA,MACA,WACC,oBAAC,YAAO,MAAK,UAAS,SAAS,MAAM,SAAS,EAAE,GAAG,WAAU,oFAAmF,kBAEhJ;AAAA,OAEJ;AAAA,IAEF,qBAAC,SAAI,WAAU,2BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY,GAAG,KAAK;AAAA,UACpB,OAAO,SAAS,SAAS,aAAa,SAAS;AAAA,UAC/C,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,WAAU;AAAA;AAAA,MACZ;AAAA,MACA,oBAAC,SAAM,OAAc,aAA0B,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,cAAY,GAAG,KAAK,gBAAgB;AAAA,OAChI;AAAA,KACF,GACF;AAEJ;AAGO,SAAS,cAAc,EAAE,SAAS,YAAY,WAAW,GAAkE;AAChI,QAAM,OAAO,gBAAgB,SAAS,SAAS,QAAQ,OAAO,CAAC,CAAC;AAChE,QAAM,gBAAgB,gBAAgB,SAAS,SAAS,cAAc,SAAS,CAAC;AAEhF,QAAM,QAAQ,aAAa,gBAAgB,SAAS,YAAY,cAAc,SAAS,CAAC,IAAI;AAC5F,MAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,MAAO,QAAO;AAC9C,QAAM,QAAQ,CAAC,MAAoC,MAAM,SAAS,qBAAqB,MAAM,UAAU,mBAAmB;AAC1H,SACE,qBAAC,SAAI,WAAU,sBACZ;AAAA,YAAQ,qBAAC,OAAE,WAAW,MAAM,KAAK,IAAI,GAAG;AAAA;AAAA,MAAyB,KAAK,MAAM,QAAQ,cAAc,EAAE;AAAA,OAAE;AAAA,IACtG,iBAAiB,qBAAC,OAAE,WAAW,MAAM,cAAc,IAAI,GAAG;AAAA;AAAA,MAAwC,cAAc,MAAM,QAAQ,cAAc,EAAE;AAAA,OAAE;AAAA,IAChJ,SAAS,qBAAC,OAAE,WAAW,MAAM,MAAM,SAAS,UAAU,WAAW,MAAM,IAAI,GAAG;AAAA;AAAA,MAA0B,MAAM,MAAM,QAAQ,cAAc,EAAE,EAAE,QAAQ,4DAA4D,6CAA6C;AAAA,OAAE;AAAA,IAClQ,qBAAC,OAAE,WAAU,kBAAiB;AAAA;AAAA,MAAW,oBAAC,UAAK,WAAU,sCAAqC,OAAO,EAAE,YAAY,SAAS,OAAO,QAAQ,OAAO,EAAE,GAAG,kBAAI;AAAA,OAAO;AAAA,KACpK;AAEJ;","names":[]}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/**
+ * Drie toestanden voor elke live lijst in /beheer (8.1): laden, fout, data. Eerst kenden de meeste
+ * lijsten alleen "data": tijdens het laden én na een fout (rechten, App Check, geen verbinding)
+ * stond er "Nog geen pagina's — maak je eerste", wat een klant letterlijk nam.
+ */
+export declare function LaadStaat({ laden, fout, opnieuw, wat, children, }: {
+    laden: boolean;
+    fout: string | null;
+    opnieuw?: () => void;
+    /** Wat er geladen wordt, in een zin als "De pagina's konden niet worden geladen." */
+    wat?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FoutMelding({ wat, detail, opnieuw }: {
+    wat: string;
+    detail?: string;
+    opnieuw?: () => void;
+}): import("react").JSX.Element;
+/** Foutmelding uit een Firestore-/callable-fout, voor in `LaadStaat`. */
+export declare function foutTekst(e: unknown): string;

package/dist/admin/ui/LaadStaat.js

@@ -0,0 +1,43 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Card } from "./primitives.js";
+import { isDemoActive } from "../../demo/demoStore.js";
+function LaadStaat({
+  laden,
+  fout,
+  opnieuw,
+  wat = "gegevens",
+  children
+}) {
+  if (fout) return /* @__PURE__ */ jsx(FoutMelding, { wat, detail: fout, opnieuw });
+  if (laden) {
+    return /* @__PURE__ */ jsx("p", { className: "py-2 text-sm text-slate-500", role: "status", "aria-live": "polite", children: `${hoofdletter(wat)} laden\u2026` });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function FoutMelding({ wat, detail, opnieuw }) {
+  if (isDemoActive()) {
+    return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-slate-600", role: "status", children: [
+      "In deze demo is dit onderdeel leeg. Bij je eigen site zie je hier ",
+      wat,
+      "."
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Card, { className: "border-red-200", children: /* @__PURE__ */ jsxs("div", { role: "alert", className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-red-800", children: `${hoofdletter(wat)} konden niet worden geladen.` }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-600", children: /permission|insufficient/i.test(detail ?? "") ? "Je account heeft hier (nog) geen toegang toe. Log opnieuw in; helpt dat niet, neem dan contact op met Xi Webdesign." : "Controleer je internetverbinding en probeer het opnieuw." }),
+    opnieuw && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: opnieuw, children: "Opnieuw proberen" }) })
+  ] }) });
+}
+function foutTekst(e) {
+  return e instanceof Error ? e.message : String(e);
+}
+function hoofdletter(s) {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+export {
+  FoutMelding,
+  LaadStaat,
+  foutTekst
+};
+//# sourceMappingURL=LaadStaat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/LaadStaat.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { Button, Card } from \"./primitives\";\nimport { isDemoActive } from \"../../demo/demoStore\";\n\n/**\n * Drie toestanden voor elke live lijst in /beheer (8.1): laden, fout, data. Eerst kenden de meeste\n * lijsten alleen \"data\": tijdens het laden én na een fout (rechten, App Check, geen verbinding)\n * stond er \"Nog geen pagina's — maak je eerste\", wat een klant letterlijk nam.\n */\nexport function LaadStaat({\n  laden,\n  fout,\n  opnieuw,\n  wat = \"gegevens\",\n  children,\n}: {\n  laden: boolean;\n  fout: string | null;\n  opnieuw?: () => void;\n  /** Wat er geladen wordt, in een zin als \"De pagina's konden niet worden geladen.\" */\n  wat?: string;\n  children: ReactNode;\n}) {\n  if (fout) return <FoutMelding wat={wat} detail={fout} opnieuw={opnieuw} />;\n  if (laden) {\n    return (\n      <p className=\"py-2 text-sm text-slate-500\" role=\"status\" aria-live=\"polite\">\n        {`${hoofdletter(wat)} laden…`}\n      </p>\n    );\n  }\n  return <>{children}</>;\n}\n\nexport function FoutMelding({ wat, detail, opnieuw }: { wat: string; detail?: string; opnieuw?: () => void }) {\n  // In de demo is er geen database om uit te lezen; een rode foutmelding zou een proefklant\n  // afschrikken voor iets wat bij een echte site gewoon werkt.\n  if (isDemoActive()) {\n    return (\n      <Card>\n        <p className=\"text-sm text-slate-600\" role=\"status\">\n          In deze demo is dit onderdeel leeg. Bij je eigen site zie je hier {wat}.\n        </p>\n      </Card>\n    );\n  }\n  return (\n    <Card className=\"border-red-200\">\n      <div role=\"alert\" className=\"grid gap-2\">\n        <p className=\"text-sm font-medium text-red-800\">{`${hoofdletter(wat)} konden niet worden geladen.`}</p>\n        <p className=\"text-xs text-slate-600\">\n          {/permission|insufficient/i.test(detail ?? \"\")\n            ? \"Je account heeft hier (nog) geen toegang toe. Log opnieuw in; helpt dat niet, neem dan contact op met Xi Webdesign.\"\n            : \"Controleer je internetverbinding en probeer het opnieuw.\"}\n        </p>\n        {opnieuw && (\n          <div>\n            <Button size=\"sm\" variant=\"secondary\" onClick={opnieuw}>Opnieuw proberen</Button>\n          </div>\n        )}\n      </div>\n    </Card>\n  );\n}\n\n/** Foutmelding uit een Firestore-/callable-fout, voor in `LaadStaat`. */\nexport function foutTekst(e: unknown): string {\n  return e instanceof Error ? e.message : String(e);\n}\n\nfunction hoofdletter(s: string): string {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n"],"mappings":";AAyBmB,SAQV,UARU,KAiBX,YAjBW;AAtBnB,SAAS,QAAQ,YAAY;AAC7B,SAAS,oBAAoB;AAOtB,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AACF,GAOG;AACD,MAAI,KAAM,QAAO,oBAAC,eAAY,KAAU,QAAQ,MAAM,SAAkB;AACxE,MAAI,OAAO;AACT,WACE,oBAAC,OAAE,WAAU,+BAA8B,MAAK,UAAS,aAAU,UAChE,aAAG,YAAY,GAAG,CAAC,gBACtB;AAAA,EAEJ;AACA,SAAO,gCAAG,UAAS;AACrB;AAEO,SAAS,YAAY,EAAE,KAAK,QAAQ,QAAQ,GAA2D;AAG5G,MAAI,aAAa,GAAG;AAClB,WACE,oBAAC,QACC,+BAAC,OAAE,WAAU,0BAAyB,MAAK,UAAS;AAAA;AAAA,MACiB;AAAA,MAAI;AAAA,OACzE,GACF;AAAA,EAEJ;AACA,SACE,oBAAC,QAAK,WAAU,kBACd,+BAAC,SAAI,MAAK,SAAQ,WAAU,cAC1B;AAAA,wBAAC,OAAE,WAAU,oCAAoC,aAAG,YAAY,GAAG,CAAC,gCAA+B;AAAA,IACnG,oBAAC,OAAE,WAAU,0BACV,qCAA2B,KAAK,UAAU,EAAE,IACzC,wHACA,4DACN;AAAA,IACC,WACC,oBAAC,SACC,8BAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,SAAS,8BAAgB,GAC1E;AAAA,KAEJ,GACF;AAEJ;AAGO,SAAS,UAAU,GAAoB;AAC5C,SAAO,aAAa,QAAQ,EAAE,UAAU,OAAO,CAAC;AAClD;AAEA,SAAS,YAAY,GAAmB;AACtC,SAAO,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI,EAAE,MAAM,CAAC;AAC9C;","names":[]}

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

@@ -0,0 +1,10 @@
+/**
+ * Leesbaarheid van een tekst (8.5): score, niveau, woorden, leestijd en concrete tips. Rekent
+ * lokaal (geen netwerk), uitgesteld zodat typen nooit hapert. Ingeklapt toont hij één regel; open
+ * de details voor de tips.
+ */
+export declare function LeesbaarheidPaneel({ html, tekst, titel }: {
+    html?: string;
+    tekst?: string;
+    titel?: string;
+}): import("react").JSX.Element | null;

package/dist/admin/ui/LeesbaarheidPaneel.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDeferredValue, useMemo } from "react";
+import { htmlNaarTekst, meetLeesbaarheid } from "../lib/leesbaarheid.js";
+const KLEUR = { goed: "#15803d", matig: "#b45309", slecht: "#b91c1c" };
+function LeesbaarheidPaneel({ html, tekst, titel = "Leesbaarheid" }) {
+  const bron = useDeferredValue(tekst ?? htmlNaarTekst(html ?? ""));
+  const r = useMemo(() => meetLeesbaarheid(bron), [bron]);
+  if (r.woorden === 0) return null;
+  const kleur = KLEUR[r.niveau.toon];
+  return /* @__PURE__ */ jsxs("details", { className: "rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer select-none flex-wrap items-center gap-x-3 gap-y-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium text-slate-800", children: titel }),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium",
+          style: { background: `${kleur}14`, color: kleur },
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-block h-2 w-2 rounded-full", style: { background: kleur } }),
+            r.niveau.naam,
+            " \xB7 ",
+            r.score,
+            "/100"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-slate-500", children: [
+        r.woorden,
+        " woorden \xB7 ca. ",
+        r.leestijd,
+        " min lezen"
+      ] }),
+      r.tips.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-slate-600", children: [
+        "\xB7 ",
+        r.tips.length,
+        " ",
+        r.tips.length === 1 ? "tip" : "tips"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 grid gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "relative h-2 overflow-hidden rounded-full bg-slate-100", role: "meter", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": r.score, "aria-label": "Leesbaarheidsscore", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 rounded-full", style: { width: `${r.score}%`, background: kleur } }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex justify-between text-[11px] text-slate-500", children: [
+          /* @__PURE__ */ jsx("span", { children: "moeilijk" }),
+          /* @__PURE__ */ jsx("span", { children: "B1 (streven)" }),
+          /* @__PURE__ */ jsx("span", { children: "makkelijk" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-slate-600", children: r.niveau.uitleg }),
+      /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-2 text-xs sm:grid-cols-4", children: [
+        ["Woorden", r.woorden],
+        ["Zinnen", r.zinnen],
+        ["Woorden per zin", r.woordenPerZin],
+        ["Leestijd", `${r.leestijd} min`]
+      ].map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "rounded-md bg-slate-50 px-2 py-1.5", children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-slate-500", children: k }),
+        /* @__PURE__ */ jsx("dd", { className: "font-medium text-slate-800", children: v })
+      ] }, String(k))) }),
+      r.tips.length > 0 && /* @__PURE__ */ jsx("ul", { className: "grid list-disc gap-1 pl-5 text-xs text-slate-700", children: r.tips.map((t, i) => /* @__PURE__ */ jsx("li", { children: t }, i)) }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-slate-500", children: "Een indicatie (Flesch-Douma), geen oordeel: korte zinnen en gewone woorden lezen het prettigst." })
+    ] })
+  ] });
+}
+export {
+  LeesbaarheidPaneel
+};
+//# sourceMappingURL=LeesbaarheidPaneel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/LeesbaarheidPaneel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDeferredValue, useMemo } from \"react\";\nimport { htmlNaarTekst, meetLeesbaarheid } from \"../lib/leesbaarheid\";\n\nconst KLEUR = { goed: \"#15803d\", matig: \"#b45309\", slecht: \"#b91c1c\" } as const;\n\n/**\n * Leesbaarheid van een tekst (8.5): score, niveau, woorden, leestijd en concrete tips. Rekent\n * lokaal (geen netwerk), uitgesteld zodat typen nooit hapert. Ingeklapt toont hij één regel; open\n * de details voor de tips.\n */\nexport function LeesbaarheidPaneel({ html, tekst, titel = \"Leesbaarheid\" }: { html?: string; tekst?: string; titel?: string }) {\n  const bron = useDeferredValue(tekst ?? htmlNaarTekst(html ?? \"\"));\n  const r = useMemo(() => meetLeesbaarheid(bron), [bron]);\n  if (r.woorden === 0) return null;\n  const kleur = KLEUR[r.niveau.toon];\n  return (\n    <details className=\"rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm\">\n      <summary className=\"flex cursor-pointer select-none flex-wrap items-center gap-x-3 gap-y-1\">\n        <span className=\"font-medium text-slate-800\">{titel}</span>\n        <span\n          className=\"inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium\"\n          style={{ background: `${kleur}14`, color: kleur }}\n        >\n          <span aria-hidden className=\"inline-block h-2 w-2 rounded-full\" style={{ background: kleur }} />\n          {r.niveau.naam} · {r.score}/100\n        </span>\n        <span className=\"text-xs text-slate-500\">\n          {r.woorden} woorden · ca. {r.leestijd} min lezen\n        </span>\n        {r.tips.length > 0 && <span className=\"text-xs text-slate-600\">· {r.tips.length} {r.tips.length === 1 ? \"tip\" : \"tips\"}</span>}\n      </summary>\n      <div className=\"mt-3 grid gap-3\">\n        <div>\n          <div className=\"relative h-2 overflow-hidden rounded-full bg-slate-100\" role=\"meter\" aria-valuemin={0} aria-valuemax={100} aria-valuenow={r.score} aria-label=\"Leesbaarheidsscore\">\n            <div className=\"absolute inset-y-0 left-0 rounded-full\" style={{ width: `${r.score}%`, background: kleur }} />\n          </div>\n          <div className=\"mt-1 flex justify-between text-[11px] text-slate-500\">\n            <span>moeilijk</span>\n            <span>B1 (streven)</span>\n            <span>makkelijk</span>\n          </div>\n        </div>\n        <p className=\"text-xs text-slate-600\">{r.niveau.uitleg}</p>\n        <dl className=\"grid grid-cols-2 gap-2 text-xs sm:grid-cols-4\">\n          {[\n            [\"Woorden\", r.woorden],\n            [\"Zinnen\", r.zinnen],\n            [\"Woorden per zin\", r.woordenPerZin],\n            [\"Leestijd\", `${r.leestijd} min`],\n          ].map(([k, v]) => (\n            <div key={String(k)} className=\"rounded-md bg-slate-50 px-2 py-1.5\">\n              <dt className=\"text-slate-500\">{k}</dt>\n              <dd className=\"font-medium text-slate-800\">{v}</dd>\n            </div>\n          ))}\n        </dl>\n        {r.tips.length > 0 && (\n          <ul className=\"grid list-disc gap-1 pl-5 text-xs text-slate-700\">\n            {r.tips.map((t, i) => (\n              <li key={i}>{t}</li>\n            ))}\n          </ul>\n        )}\n        <p className=\"text-[11px] text-slate-500\">Een indicatie (Flesch-Douma), geen oordeel: korte zinnen en gewone woorden lezen het prettigst.</p>\n      </div>\n    </details>\n  );\n}\n"],"mappings":";AAoBQ,cACA,YADA;AAlBR,SAAS,kBAAkB,eAAe;AAC1C,SAAS,eAAe,wBAAwB;AAEhD,MAAM,QAAQ,EAAE,MAAM,WAAW,OAAO,WAAW,QAAQ,UAAU;AAO9D,SAAS,mBAAmB,EAAE,MAAM,OAAO,QAAQ,eAAe,GAAsD;AAC7H,QAAM,OAAO,iBAAiB,SAAS,cAAc,QAAQ,EAAE,CAAC;AAChE,QAAM,IAAI,QAAQ,MAAM,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;AACtD,MAAI,EAAE,YAAY,EAAG,QAAO;AAC5B,QAAM,QAAQ,MAAM,EAAE,OAAO,IAAI;AACjC,SACE,qBAAC,aAAQ,WAAU,iEACjB;AAAA,yBAAC,aAAQ,WAAU,0EACjB;AAAA,0BAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,MACpD;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM,OAAO,MAAM;AAAA,UAEhD;AAAA,gCAAC,UAAK,eAAW,MAAC,WAAU,qCAAoC,OAAO,EAAE,YAAY,MAAM,GAAG;AAAA,YAC7F,EAAE,OAAO;AAAA,YAAK;AAAA,YAAI,EAAE;AAAA,YAAM;AAAA;AAAA;AAAA,MAC7B;AAAA,MACA,qBAAC,UAAK,WAAU,0BACb;AAAA,UAAE;AAAA,QAAQ;AAAA,QAAgB,EAAE;AAAA,QAAS;AAAA,SACxC;AAAA,MACC,EAAE,KAAK,SAAS,KAAK,qBAAC,UAAK,WAAU,0BAAyB;AAAA;AAAA,QAAG,EAAE,KAAK;AAAA,QAAO;AAAA,QAAE,EAAE,KAAK,WAAW,IAAI,QAAQ;AAAA,SAAO;AAAA,OACzH;AAAA,IACA,qBAAC,SAAI,WAAU,mBACb;AAAA,2BAAC,SACC;AAAA,4BAAC,SAAI,WAAU,0DAAyD,MAAK,SAAQ,iBAAe,GAAG,iBAAe,KAAK,iBAAe,EAAE,OAAO,cAAW,sBAC5J,8BAAC,SAAI,WAAU,0CAAyC,OAAO,EAAE,OAAO,GAAG,EAAE,KAAK,KAAK,YAAY,MAAM,GAAG,GAC9G;AAAA,QACA,qBAAC,SAAI,WAAU,wDACb;AAAA,8BAAC,UAAK,sBAAQ;AAAA,UACd,oBAAC,UAAK,0BAAY;AAAA,UAClB,oBAAC,UAAK,uBAAS;AAAA,WACjB;AAAA,SACF;AAAA,MACA,oBAAC,OAAE,WAAU,0BAA0B,YAAE,OAAO,QAAO;AAAA,MACvD,oBAAC,QAAG,WAAU,iDACX;AAAA,QACC,CAAC,WAAW,EAAE,OAAO;AAAA,QACrB,CAAC,UAAU,EAAE,MAAM;AAAA,QACnB,CAAC,mBAAmB,EAAE,aAAa;AAAA,QACnC,CAAC,YAAY,GAAG,EAAE,QAAQ,MAAM;AAAA,MAClC,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,MACV,qBAAC,SAAoB,WAAU,sCAC7B;AAAA,4BAAC,QAAG,WAAU,kBAAkB,aAAE;AAAA,QAClC,oBAAC,QAAG,WAAU,8BAA8B,aAAE;AAAA,WAFtC,OAAO,CAAC,CAGlB,CACD,GACH;AAAA,MACC,EAAE,KAAK,SAAS,KACf,oBAAC,QAAG,WAAU,oDACX,YAAE,KAAK,IAAI,CAAC,GAAG,MACd,oBAAC,QAAY,eAAJ,CAAM,CAChB,GACH;AAAA,MAEF,oBAAC,OAAE,WAAU,8BAA6B,6GAA+F;AAAA,OAC3I;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,22 @@
+/**
+ * Link plaatsen of wijzigen (8.2). Verving `window.prompt("Link-URL")` in de inline editor en de
+ * rich-text-editor: geen keuze uit eigen pagina's (dus typefouten → 404), niet te stijlen, en op
+ * een telefoon nauwelijks bruikbaar. Hier kies je een pagina van de site, of typ je een webadres
+ * of e-mailadres; "www.voorbeeld.nl" wordt vanzelf "https://www.voorbeeld.nl".
+ */
+export declare function LinkDialog({ open, onOpenChange, siteId, huidig, huidigNieuwTabblad, onKlaar, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    /** Zonder siteId (bv. een editor buiten een site) alleen het webadres-tabblad. */
+    siteId?: string;
+    /** De link die er nu staat (leeg = nieuwe link). */
+    huidig?: string;
+    /** Opende de bestaande link in een nieuw tabblad? */
+    huidigNieuwTabblad?: boolean;
+    /** `null` = link weghalen. */
+    onKlaar: (href: string | null, opties?: {
+        nieuwTabblad: boolean;
+    }) => void;
+}): import("react").JSX.Element;
+/** "www.x.nl" → "https://www.x.nl", "a@b.nl" → "mailto:a@b.nl"; gevaarlijke schema's weigeren. */
+export declare function normaliseerAdres(ruw: string): string;