@xiwebdesign/xicms-core 7.30.0 → 8.15.0

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;

package/dist/admin/ui/LinkDialog.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { subscribePages } from "../lib/pagesClient.js";
+import { Dialog, DialogContent, DialogFooter } from "./dialog.js";
+import { Button, Field, Input } from "./primitives.js";
+import { Select } from "./select.js";
+import { Switch } from "./switch.js";
+function LinkDialog({
+  open,
+  onOpenChange,
+  siteId,
+  huidig,
+  huidigNieuwTabblad,
+  onKlaar
+}) {
+  const [pages, setPages] = useState([]);
+  useEffect(() => open && siteId ? subscribePages(siteId, setPages) : void 0, [open, siteId]);
+  const [soort, setSoort] = useState("pagina");
+  const [pad, setPad] = useState("");
+  const [adres, setAdres] = useState("");
+  const [fout, setFout] = useState(null);
+  const [nieuwTabblad, setNieuwTabblad] = useState(false);
+  const [tabbladAangeraakt, setTabbladAangeraakt] = useState(false);
+  useEffect(() => {
+    if (!open) return;
+    setFout(null);
+    setTabbladAangeraakt(huidigNieuwTabblad !== void 0 && Boolean(huidig));
+    setNieuwTabblad(Boolean(huidigNieuwTabblad));
+    const h = huidig?.trim() ?? "";
+    if (siteId && (h === "" || h.startsWith("/") && !h.startsWith("//"))) {
+      setSoort("pagina");
+      setPad(h);
+      setAdres("");
+    } else {
+      setSoort("adres");
+      setPad("");
+      setAdres(h);
+    }
+  }, [open, huidig, siteId, huidigNieuwTabblad]);
+  useEffect(() => {
+    if (!tabbladAangeraakt) setNieuwTabblad(soort === "adres" && !/^(mailto|tel):/i.test(adres.trim()));
+  }, [soort, adres, tabbladAangeraakt]);
+  const opties = useMemo(() => {
+    const o = pages.filter((p) => !p.trashed).sort((a, b) => a.path < b.path ? -1 : 1).map((p) => ({ value: p.path, label: `${p.title || p.path} (${p.path})${p.published ? "" : " \u2014 nog niet live"}` }));
+    if (pad && !o.some((x) => x.value === pad)) o.unshift({ value: pad, label: pad });
+    return o;
+  }, [pages, pad]);
+  function plaats() {
+    const href = soort === "pagina" ? pad : normaliseerAdres(adres);
+    if (!href) {
+      setFout(soort === "pagina" ? "Kies een pagina." : "Vul een webadres of e-mailadres in.");
+      return;
+    }
+    onKlaar(href, { nieuwTabblad: nieuwTabblad && !/^(mailto|tel):/i.test(href) });
+    onOpenChange(false);
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { title: huidig ? "Link wijzigen" : "Link plaatsen", children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: "grid gap-3",
+      onSubmit: (e) => {
+        e.preventDefault();
+        plaats();
+      },
+      children: [
+        siteId && /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Soort link", className: "flex flex-wrap gap-2", children: [
+          ["pagina", "Pagina op deze site"],
+          ["adres", "Webadres of e-mail"]
+        ].map(([k, label]) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": soort === k,
+            onClick: () => setSoort(k),
+            className: "xicms-admin-btn rounded-lg border px-3 py-1.5 text-sm aria-[checked=true]:border-transparent aria-[checked=true]:bg-slate-900 aria-[checked=true]:text-white",
+            style: { borderColor: "var(--color-border)" },
+            children: label
+          },
+          k
+        )) }),
+        soort === "pagina" ? /* @__PURE__ */ jsx(Field, { label: "Pagina", children: /* @__PURE__ */ jsx(Select, { value: pad, onValueChange: setPad, options: opties, placeholder: "Kies een pagina\u2026" }) }) : /* @__PURE__ */ jsx(Field, { label: "Adres", hint: "bv. www.voorbeeld.nl of naam@voorbeeld.nl", children: /* @__PURE__ */ jsx(Input, { value: adres, onChange: (e) => setAdres(e.target.value), placeholder: "www.voorbeeld.nl", autoFocus: true }) }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: nieuwTabblad,
+            onCheckedChange: (v) => {
+              setTabbladAangeraakt(true);
+              setNieuwTabblad(v);
+            },
+            label: "Openen in een nieuw tabblad"
+          }
+        ),
+        fout && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-red-700", children: fout }),
+        /* @__PURE__ */ jsxs(DialogFooter, { children: [
+          huidig && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "dangerGhost",
+              className: "mr-auto",
+              onClick: () => {
+                onKlaar(null);
+                onOpenChange(false);
+              },
+              children: "Link weghalen"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: () => onOpenChange(false), children: "Annuleren" }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", children: huidig ? "Wijzigen" : "Link plaatsen" })
+        ] })
+      ]
+    }
+  ) }) });
+}
+function normaliseerAdres(ruw) {
+  const a = ruw.trim();
+  if (!a) return "";
+  if (/^(javascript|data|vbscript):/i.test(a)) return "";
+  if (/^(https?:|mailto:|tel:)/i.test(a)) return a;
+  if (a.startsWith("/") || a.startsWith("#")) return a;
+  if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a)) return `mailto:${a}`;
+  if (/^\+?[\d\s()-]{6,}$/.test(a)) return `tel:${a.replace(/[^\d+]/g, "")}`;
+  return `https://${a}`;
+}
+export {
+  LinkDialog,
+  normaliseerAdres
+};
+//# sourceMappingURL=LinkDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/LinkDialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport { subscribePages, type DraftPage } from \"../lib/pagesClient\";\nimport { Dialog, DialogContent, DialogFooter } from \"./dialog\";\nimport { Button, Field, Input } from \"./primitives\";\nimport { Select } from \"./select\";\nimport { Switch } from \"./switch\";\n\n/**\n * Link plaatsen of wijzigen (8.2). Verving `window.prompt(\"Link-URL\")` in de inline editor en de\n * rich-text-editor: geen keuze uit eigen pagina's (dus typefouten → 404), niet te stijlen, en op\n * een telefoon nauwelijks bruikbaar. Hier kies je een pagina van de site, of typ je een webadres\n * of e-mailadres; \"www.voorbeeld.nl\" wordt vanzelf \"https://www.voorbeeld.nl\".\n */\nexport function LinkDialog({\n  open,\n  onOpenChange,\n  siteId,\n  huidig,\n  huidigNieuwTabblad,\n  onKlaar,\n}: {\n  open: boolean;\n  onOpenChange: (v: boolean) => void;\n  /** Zonder siteId (bv. een editor buiten een site) alleen het webadres-tabblad. */\n  siteId?: string;\n  /** De link die er nu staat (leeg = nieuwe link). */\n  huidig?: string;\n  /** Opende de bestaande link in een nieuw tabblad? */\n  huidigNieuwTabblad?: boolean;\n  /** `null` = link weghalen. */\n  onKlaar: (href: string | null, opties?: { nieuwTabblad: boolean }) => void;\n}) {\n  const [pages, setPages] = useState<DraftPage[]>([]);\n  useEffect(() => (open && siteId ? subscribePages(siteId, setPages) : undefined), [open, siteId]);\n\n  const [soort, setSoort] = useState<\"pagina\" | \"adres\">(\"pagina\");\n  const [pad, setPad] = useState(\"\");\n  const [adres, setAdres] = useState(\"\");\n  const [fout, setFout] = useState<string | null>(null);\n  /**\n   * In een nieuw tabblad openen (8.5, naar het voorbeeld van AstraCMS' linkvenster). Standaard: aan\n   * voor een link naar een andere site, uit voor een eigen pagina — zelf om te zetten.\n   */\n  const [nieuwTabblad, setNieuwTabblad] = useState(false);\n  const [tabbladAangeraakt, setTabbladAangeraakt] = useState(false);\n\n  // Bij openen: de bestaande link in het juiste tabblad zetten.\n  useEffect(() => {\n    if (!open) return;\n    setFout(null);\n    setTabbladAangeraakt(huidigNieuwTabblad !== undefined && Boolean(huidig));\n    setNieuwTabblad(Boolean(huidigNieuwTabblad));\n    const h = huidig?.trim() ?? \"\";\n    if (siteId && (h === \"\" || (h.startsWith(\"/\") && !h.startsWith(\"//\")))) {\n      setSoort(\"pagina\");\n      setPad(h);\n      setAdres(\"\");\n    } else {\n      setSoort(\"adres\");\n      setPad(\"\");\n      setAdres(h);\n    }\n  }, [open, huidig, siteId, huidigNieuwTabblad]);\n\n  // Volgt de soort, tot de gebruiker de schakelaar zelf omzet.\n  useEffect(() => {\n    if (!tabbladAangeraakt) setNieuwTabblad(soort === \"adres\" && !/^(mailto|tel):/i.test(adres.trim()));\n  }, [soort, adres, tabbladAangeraakt]);\n\n  const opties = useMemo(() => {\n    const o = pages\n      .filter((p) => !p.trashed)\n      .sort((a, b) => (a.path < b.path ? -1 : 1))\n      .map((p) => ({ value: p.path, label: `${p.title || p.path} (${p.path})${p.published ? \"\" : \" — nog niet live\"}` }));\n    if (pad && !o.some((x) => x.value === pad)) o.unshift({ value: pad, label: pad });\n    return o;\n  }, [pages, pad]);\n\n  function plaats() {\n    const href = soort === \"pagina\" ? pad : normaliseerAdres(adres);\n    if (!href) {\n      setFout(soort === \"pagina\" ? \"Kies een pagina.\" : \"Vul een webadres of e-mailadres in.\");\n      return;\n    }\n    onKlaar(href, { nieuwTabblad: nieuwTabblad && !/^(mailto|tel):/i.test(href) });\n    onOpenChange(false);\n  }\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent title={huidig ? \"Link wijzigen\" : \"Link plaatsen\"}>\n        <form\n          className=\"grid gap-3\"\n          onSubmit={(e) => {\n            e.preventDefault();\n            plaats();\n          }}\n        >\n          {siteId && (\n          <div role=\"radiogroup\" aria-label=\"Soort link\" className=\"flex flex-wrap gap-2\">\n            {(\n              [\n                [\"pagina\", \"Pagina op deze site\"],\n                [\"adres\", \"Webadres of e-mail\"],\n              ] as const\n            ).map(([k, label]) => (\n              <button\n                key={k}\n                type=\"button\"\n                role=\"radio\"\n                aria-checked={soort === k}\n                onClick={() => setSoort(k)}\n                className=\"xicms-admin-btn rounded-lg border px-3 py-1.5 text-sm aria-[checked=true]:border-transparent aria-[checked=true]:bg-slate-900 aria-[checked=true]:text-white\"\n                style={{ borderColor: \"var(--color-border)\" }}\n              >\n                {label}\n              </button>\n            ))}\n          </div>\n          )}\n          {soort === \"pagina\" ? (\n            <Field label=\"Pagina\">\n              <Select value={pad} onValueChange={setPad} options={opties} placeholder=\"Kies een pagina…\" />\n            </Field>\n          ) : (\n            <Field label=\"Adres\" hint=\"bv. www.voorbeeld.nl of naam@voorbeeld.nl\">\n              <Input value={adres} onChange={(e) => setAdres(e.target.value)} placeholder=\"www.voorbeeld.nl\" autoFocus />\n            </Field>\n          )}\n          <Switch\n            checked={nieuwTabblad}\n            onCheckedChange={(v) => {\n              setTabbladAangeraakt(true);\n              setNieuwTabblad(v);\n            }}\n            label=\"Openen in een nieuw tabblad\"\n          />\n          {fout && (\n            <p role=\"alert\" className=\"text-sm text-red-700\">\n              {fout}\n            </p>\n          )}\n          <DialogFooter>\n            {huidig && (\n              <Button\n                type=\"button\"\n                variant=\"dangerGhost\"\n                className=\"mr-auto\"\n                onClick={() => {\n                  onKlaar(null);\n                  onOpenChange(false);\n                }}\n              >\n                Link weghalen\n              </Button>\n            )}\n            <Button type=\"button\" variant=\"secondary\" onClick={() => onOpenChange(false)}>\n              Annuleren\n            </Button>\n            <Button type=\"submit\">{huidig ? \"Wijzigen\" : \"Link plaatsen\"}</Button>\n          </DialogFooter>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/** \"www.x.nl\" → \"https://www.x.nl\", \"a@b.nl\" → \"mailto:a@b.nl\"; gevaarlijke schema's weigeren. */\nexport function normaliseerAdres(ruw: string): string {\n  const a = ruw.trim();\n  if (!a) return \"\";\n  if (/^(javascript|data|vbscript):/i.test(a)) return \"\";\n  if (/^(https?:|mailto:|tel:)/i.test(a)) return a;\n  if (a.startsWith(\"/\") || a.startsWith(\"#\")) return a;\n  if (/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(a)) return `mailto:${a}`;\n  if (/^\\+?[\\d\\s()-]{6,}$/.test(a)) return `tel:${a.replace(/[^\\d+]/g, \"\")}`;\n  return `https://${a}`;\n}\n"],"mappings":";AA4Gc,cAoCJ,YApCI;AA1Gd,SAAS,WAAW,SAAS,gBAAgB;AAC7C,SAAS,sBAAsC;AAC/C,SAAS,QAAQ,eAAe,oBAAoB;AACpD,SAAS,QAAQ,OAAO,aAAa;AACrC,SAAS,cAAc;AACvB,SAAS,cAAc;AAQhB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAWG;AACD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAC,CAAC;AAClD,YAAU,MAAO,QAAQ,SAAS,eAAe,QAAQ,QAAQ,IAAI,QAAY,CAAC,MAAM,MAAM,CAAC;AAE/F,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,QAAQ;AAC/D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,EAAE;AACjC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAKpD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAGhE,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,YAAQ,IAAI;AACZ,yBAAqB,uBAAuB,UAAa,QAAQ,MAAM,CAAC;AACxE,oBAAgB,QAAQ,kBAAkB,CAAC;AAC3C,UAAM,IAAI,QAAQ,KAAK,KAAK;AAC5B,QAAI,WAAW,MAAM,MAAO,EAAE,WAAW,GAAG,KAAK,CAAC,EAAE,WAAW,IAAI,IAAK;AACtE,eAAS,QAAQ;AACjB,aAAO,CAAC;AACR,eAAS,EAAE;AAAA,IACb,OAAO;AACL,eAAS,OAAO;AAChB,aAAO,EAAE;AACT,eAAS,CAAC;AAAA,IACZ;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAG7C,YAAU,MAAM;AACd,QAAI,CAAC,kBAAmB,iBAAgB,UAAU,WAAW,CAAC,kBAAkB,KAAK,MAAM,KAAK,CAAC,CAAC;AAAA,EACpG,GAAG,CAAC,OAAO,OAAO,iBAAiB,CAAC;AAEpC,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,IAAI,MACP,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EACxB,KAAK,CAAC,GAAG,MAAO,EAAE,OAAO,EAAE,OAAO,KAAK,CAAE,EACzC,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,GAAG,EAAE,SAAS,EAAE,IAAI,KAAK,EAAE,IAAI,IAAI,EAAE,YAAY,KAAK,uBAAkB,GAAG,EAAE;AACpH,QAAI,OAAO,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,GAAG,EAAG,GAAE,QAAQ,EAAE,OAAO,KAAK,OAAO,IAAI,CAAC;AAChF,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,GAAG,CAAC;AAEf,WAAS,SAAS;AAChB,UAAM,OAAO,UAAU,WAAW,MAAM,iBAAiB,KAAK;AAC9D,QAAI,CAAC,MAAM;AACT,cAAQ,UAAU,WAAW,qBAAqB,qCAAqC;AACvF;AAAA,IACF;AACA,YAAQ,MAAM,EAAE,cAAc,gBAAgB,CAAC,kBAAkB,KAAK,IAAI,EAAE,CAAC;AAC7E,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,oBAAC,UAAO,MAAY,cAClB,8BAAC,iBAAc,OAAO,SAAS,kBAAkB,iBAC/C;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,CAAC,MAAM;AACf,UAAE,eAAe;AACjB,eAAO;AAAA,MACT;AAAA,MAEC;AAAA,kBACD,oBAAC,SAAI,MAAK,cAAa,cAAW,cAAa,WAAU,wBAErD;AAAA,UACE,CAAC,UAAU,qBAAqB;AAAA,UAChC,CAAC,SAAS,oBAAoB;AAAA,QAChC,EACA,IAAI,CAAC,CAAC,GAAG,KAAK,MACd;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc,UAAU;AAAA,YACxB,SAAS,MAAM,SAAS,CAAC;AAAA,YACzB,WAAU;AAAA,YACV,OAAO,EAAE,aAAa,sBAAsB;AAAA,YAE3C;AAAA;AAAA,UARI;AAAA,QASP,CACD,GACH;AAAA,QAEC,UAAU,WACT,oBAAC,SAAM,OAAM,UACX,8BAAC,UAAO,OAAO,KAAK,eAAe,QAAQ,SAAS,QAAQ,aAAY,yBAAmB,GAC7F,IAEA,oBAAC,SAAM,OAAM,SAAQ,MAAK,6CACxB,8BAAC,SAAM,OAAO,OAAO,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAAG,aAAY,oBAAmB,WAAS,MAAC,GAC3G;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAiB,CAAC,MAAM;AACtB,mCAAqB,IAAI;AACzB,8BAAgB,CAAC;AAAA,YACnB;AAAA,YACA,OAAM;AAAA;AAAA,QACR;AAAA,QACC,QACC,oBAAC,OAAE,MAAK,SAAQ,WAAU,wBACvB,gBACH;AAAA,QAEF,qBAAC,gBACE;AAAA,oBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS,MAAM;AACb,wBAAQ,IAAI;AACZ,6BAAa,KAAK;AAAA,cACpB;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UAEF,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,SAAS,MAAM,aAAa,KAAK,GAAG,uBAE9E;AAAA,UACA,oBAAC,UAAO,MAAK,UAAU,mBAAS,aAAa,iBAAgB;AAAA,WAC/D;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAGO,SAAS,iBAAiB,KAAqB;AACpD,QAAM,IAAI,IAAI,KAAK;AACnB,MAAI,CAAC,EAAG,QAAO;AACf,MAAI,gCAAgC,KAAK,CAAC,EAAG,QAAO;AACpD,MAAI,2BAA2B,KAAK,CAAC,EAAG,QAAO;AAC/C,MAAI,EAAE,WAAW,GAAG,KAAK,EAAE,WAAW,GAAG,EAAG,QAAO;AACnD,MAAI,6BAA6B,KAAK,CAAC,EAAG,QAAO,UAAU,CAAC;AAC5D,MAAI,qBAAqB,KAAK,CAAC,EAAG,QAAO,OAAO,EAAE,QAAQ,WAAW,EAAE,CAAC;AACxE,SAAO,WAAW,CAAC;AACrB;","names":[]}

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

@@ -0,0 +1,14 @@
+/**
+ * Een linkveld zoals een klant het leest (8.10): "Contact (/contact)" of "www.voorbeeld.nl", met
+ * "Kies…" ernaast dat het linkvenster opent — pagina uit de lijst, of een webadres/e-mail/telefoon.
+ *
+ * Vervangt de kale tekstvakken bij knoppen in de hero, de oproepbalk, de footer en de automatisch
+ * gegenereerde formulieren. Daar typte je "/contakt" of liet je "#" staan, en de knop deed niets of
+ * gaf een 404; de controle vóór publiceren ving dat pas achteraf.
+ */
+export declare function LinkVeld({ siteId, value, onChange, leegTekst, }: {
+    siteId?: string;
+    value: string | undefined;
+    onChange: (href: string) => void;
+    leegTekst?: string;
+}): import("react").JSX.Element;

package/dist/admin/ui/LinkVeld.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { subscribePages } from "../lib/pagesClient.js";
+import { LinkDialog } from "./LinkDialog.js";
+import { Button } from "./primitives.js";
+function LinkVeld({
+  siteId,
+  value,
+  onChange,
+  leegTekst = "Nog geen link"
+}) {
+  const [open, setOpen] = useState(false);
+  const [pages, setPages] = useState([]);
+  useEffect(() => siteId ? subscribePages(siteId, setPages) : void 0, [siteId]);
+  const href = (value ?? "").trim();
+  const pagina = href.startsWith("/") ? pages.find((p) => !p.trashed && p.path === href.split(/[?#]/)[0]) : void 0;
+  const leeg = !href || href === "#";
+  const tekst = leeg ? leegTekst : pagina ? `${pagina.title || pagina.path} (${href})` : href.replace(/^https?:\/\//, "").replace(/^mailto:/, "e-mail: ").replace(/^tel:/, "bel: ");
+  const waarschuwing = pagina && !pagina.published ? "Deze pagina staat nog niet live." : null;
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `min-w-0 flex-1 truncate rounded-md border border-slate-200 bg-white px-2.5 py-1.5 text-sm ${leeg ? "text-slate-500 italic" : "text-slate-800"}`,
+          title: href || void 0,
+          children: tekst
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => setOpen(true), children: leeg ? "Kies\u2026" : "Wijzig\u2026" })
+    ] }),
+    waarschuwing && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-700", children: waarschuwing }),
+    /* @__PURE__ */ jsx(
+      LinkDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        siteId,
+        huidig: leeg ? "" : href,
+        onKlaar: (nieuw) => onChange(nieuw ?? "")
+      }
+    )
+  ] });
+}
+export {
+  LinkVeld
+};
+//# sourceMappingURL=LinkVeld.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/LinkVeld.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { subscribePages, type DraftPage } from \"../lib/pagesClient\";\nimport { LinkDialog } from \"./LinkDialog\";\nimport { Button } from \"./primitives\";\n\n/**\n * Een linkveld zoals een klant het leest (8.10): \"Contact (/contact)\" of \"www.voorbeeld.nl\", met\n * \"Kies…\" ernaast dat het linkvenster opent — pagina uit de lijst, of een webadres/e-mail/telefoon.\n *\n * Vervangt de kale tekstvakken bij knoppen in de hero, de oproepbalk, de footer en de automatisch\n * gegenereerde formulieren. Daar typte je \"/contakt\" of liet je \"#\" staan, en de knop deed niets of\n * gaf een 404; de controle vóór publiceren ving dat pas achteraf.\n */\nexport function LinkVeld({\n  siteId,\n  value,\n  onChange,\n  leegTekst = \"Nog geen link\",\n}: {\n  siteId?: string;\n  value: string | undefined;\n  onChange: (href: string) => void;\n  leegTekst?: string;\n}) {\n  const [open, setOpen] = useState(false);\n  const [pages, setPages] = useState<DraftPage[]>([]);\n  useEffect(() => (siteId ? subscribePages(siteId, setPages) : undefined), [siteId]);\n\n  const href = (value ?? \"\").trim();\n  const pagina = href.startsWith(\"/\") ? pages.find((p) => !p.trashed && p.path === href.split(/[?#]/)[0]) : undefined;\n  const leeg = !href || href === \"#\";\n  const tekst = leeg\n    ? leegTekst\n    : pagina\n      ? `${pagina.title || pagina.path} (${href})`\n      : href.replace(/^https?:\\/\\//, \"\").replace(/^mailto:/, \"e-mail: \").replace(/^tel:/, \"bel: \");\n  // Alleen \"nog niet live\": een pad zonder werkversie kan best bestaan (een pagina uit de sitecode,\n  // de webwinkel, de demo) — \"bestaat niet\" zou dan een valse schrik zijn.\n  const waarschuwing = pagina && !pagina.published ? \"Deze pagina staat nog niet live.\" : null;\n\n  return (\n    <div className=\"grid gap-1\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span\n          className={`min-w-0 flex-1 truncate rounded-md border border-slate-200 bg-white px-2.5 py-1.5 text-sm ${leeg ? \"text-slate-500 italic\" : \"text-slate-800\"}`}\n          title={href || undefined}\n        >\n          {tekst}\n        </span>\n        <Button size=\"sm\" variant=\"secondary\" onClick={() => setOpen(true)}>\n          {leeg ? \"Kies…\" : \"Wijzig…\"}\n        </Button>\n      </div>\n      {waarschuwing && <p className=\"text-xs text-amber-700\">{waarschuwing}</p>}\n      <LinkDialog\n        open={open}\n        onOpenChange={setOpen}\n        siteId={siteId}\n        huidig={leeg ? \"\" : href}\n        onKlaar={(nieuw) => onChange(nieuw ?? \"\")}\n      />\n    </div>\n  );\n}\n"],"mappings":";AA4CM,SACE,KADF;AA1CN,SAAS,WAAW,gBAAgB;AACpC,SAAS,sBAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAUhB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAKG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,CAAC,CAAC;AAClD,YAAU,MAAO,SAAS,eAAe,QAAQ,QAAQ,IAAI,QAAY,CAAC,MAAM,CAAC;AAEjF,QAAM,QAAQ,SAAS,IAAI,KAAK;AAChC,QAAM,SAAS,KAAK,WAAW,GAAG,IAAI,MAAM,KAAK,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,SAAS,KAAK,MAAM,MAAM,EAAE,CAAC,CAAC,IAAI;AAC1G,QAAM,OAAO,CAAC,QAAQ,SAAS;AAC/B,QAAM,QAAQ,OACV,YACA,SACE,GAAG,OAAO,SAAS,OAAO,IAAI,KAAK,IAAI,MACvC,KAAK,QAAQ,gBAAgB,EAAE,EAAE,QAAQ,YAAY,UAAU,EAAE,QAAQ,SAAS,OAAO;AAG/F,QAAM,eAAe,UAAU,CAAC,OAAO,YAAY,qCAAqC;AAExF,SACE,qBAAC,SAAI,WAAU,cACb;AAAA,yBAAC,SAAI,WAAU,mCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,6FAA6F,OAAO,0BAA0B,gBAAgB;AAAA,UACzJ,OAAO,QAAQ;AAAA,UAEd;AAAA;AAAA,MACH;AAAA,MACA,oBAAC,UAAO,MAAK,MAAK,SAAQ,aAAY,SAAS,MAAM,QAAQ,IAAI,GAC9D,iBAAO,eAAU,gBACpB;AAAA,OACF;AAAA,IACC,gBAAgB,oBAAC,OAAE,WAAU,0BAA0B,wBAAa;AAAA,IACrE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA,QAAQ,OAAO,KAAK;AAAA,QACpB,SAAS,CAAC,UAAU,SAAS,SAAS,EAAE;AAAA;AAAA,IAC1C;AAAA,KACF;AAEJ;","names":[]}