@xiwebdesign/xicms-core 7.30.0 → 8.15.0

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

@@ -0,0 +1,14 @@
+export interface PreviewLink {
+    url: string;
+    /** Epoch-ms; ontbreekt bij een oude functions-versie. */
+    expiresAt?: number;
+}
+/**
+ * Gedeelde weergave van een gemaakte preview-link (8.5): adres, kopiëren, openen, delen
+ * (telefoon: WhatsApp/mail via het deelmenu) en tot wanneer hij werkt. Eerst stond er alleen
+ * een los invoerveld en moest de klant zelf selecteren en kopiëren.
+ */
+export declare function PreviewLinkResultaat({ link, titel }: {
+    link: PreviewLink;
+    titel?: string;
+}): import("react").JSX.Element;

package/dist/admin/ui/PreviewLinkResultaat.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Input } from "./primitives.js";
+import { useToast } from "./toast.js";
+function PreviewLinkResultaat({ link, titel }) {
+  const { toast } = useToast();
+  const [gekopieerd, setGekopieerd] = useState(false);
+  const kanDelen = typeof navigator !== "undefined" && typeof navigator.share === "function";
+  const tot = link.expiresAt ? new Date(link.expiresAt).toLocaleString("nl-NL", { weekday: "long", day: "numeric", month: "long", hour: "2-digit", minute: "2-digit" }) : null;
+  async function kopieer() {
+    try {
+      await navigator.clipboard.writeText(link.url);
+      setGekopieerd(true);
+      setTimeout(() => setGekopieerd(false), 2e3);
+    } catch {
+      toast({ title: "Kopi\xEBren lukte niet", description: "Selecteer het adres en kopieer het zelf.", tone: "error" });
+    }
+  }
+  async function deel() {
+    try {
+      await navigator.share({ title: titel ? `Voorbeeld: ${titel}` : "Voorbeeld van de website", url: link.url });
+    } catch {
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        readOnly: true,
+        value: link.url,
+        "aria-label": "Voorbeeldlink",
+        className: "min-w-0 text-xs",
+        onFocus: (e) => e.currentTarget.select()
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: () => void kopieer(), children: gekopieerd ? "\u2713 Gekopieerd" : "Kopi\xEBren" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => window.open(link.url, "_blank", "noopener"), children: "Openen \u2197" }),
+      kanDelen && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => void deel(), children: "Delen\u2026" })
+    ] }),
+    tot && /* @__PURE__ */ jsxs("p", { className: "text-xs text-slate-500", children: [
+      "Werkt tot ",
+      tot,
+      ". Daarna maak je eenvoudig een nieuwe."
+    ] })
+  ] });
+}
+export {
+  PreviewLinkResultaat
+};
+//# sourceMappingURL=PreviewLinkResultaat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/admin/ui/PreviewLinkResultaat.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Button, Input } from \"./primitives\";\nimport { useToast } from \"./toast\";\n\nexport interface PreviewLink {\n  url: string;\n  /** Epoch-ms; ontbreekt bij een oude functions-versie. */\n  expiresAt?: number;\n}\n\n/**\n * Gedeelde weergave van een gemaakte preview-link (8.5): adres, kopiëren, openen, delen\n * (telefoon: WhatsApp/mail via het deelmenu) en tot wanneer hij werkt. Eerst stond er alleen\n * een los invoerveld en moest de klant zelf selecteren en kopiëren.\n */\nexport function PreviewLinkResultaat({ link, titel }: { link: PreviewLink; titel?: string }) {\n  const { toast } = useToast();\n  const [gekopieerd, setGekopieerd] = useState(false);\n  const kanDelen = typeof navigator !== \"undefined\" && typeof navigator.share === \"function\";\n  const tot = link.expiresAt\n    ? new Date(link.expiresAt).toLocaleString(\"nl-NL\", { weekday: \"long\", day: \"numeric\", month: \"long\", hour: \"2-digit\", minute: \"2-digit\" })\n    : null;\n\n  async function kopieer() {\n    try {\n      await navigator.clipboard.writeText(link.url);\n      setGekopieerd(true);\n      setTimeout(() => setGekopieerd(false), 2000);\n    } catch {\n      toast({ title: \"Kopiëren lukte niet\", description: \"Selecteer het adres en kopieer het zelf.\", tone: \"error\" });\n    }\n  }\n\n  async function deel() {\n    try {\n      await navigator.share({ title: titel ? `Voorbeeld: ${titel}` : \"Voorbeeld van de website\", url: link.url });\n    } catch {\n      /* geannuleerd */\n    }\n  }\n\n  return (\n    <div className=\"grid gap-2\">\n      <Input\n        readOnly\n        value={link.url}\n        aria-label=\"Voorbeeldlink\"\n        className=\"min-w-0 text-xs\"\n        onFocus={(e) => e.currentTarget.select()}\n      />\n      <div className=\"flex flex-wrap gap-1\">\n        <Button variant=\"secondary\" size=\"sm\" onClick={() => void kopieer()}>\n          {gekopieerd ? \"✓ Gekopieerd\" : \"Kopiëren\"}\n        </Button>\n        <Button variant=\"ghost\" size=\"sm\" onClick={() => window.open(link.url, \"_blank\", \"noopener\")}>\n          Openen ↗\n        </Button>\n        {kanDelen && (\n          <Button variant=\"ghost\" size=\"sm\" onClick={() => void deel()}>\n            Delen…\n          </Button>\n        )}\n      </div>\n      {tot && <p className=\"text-xs text-slate-500\">Werkt tot {tot}. Daarna maak je eenvoudig een nieuwe.</p>}\n    </div>\n  );\n}\n"],"mappings":";AA6CM,cAOA,YAPA;AA3CN,SAAS,gBAAgB;AACzB,SAAS,QAAQ,aAAa;AAC9B,SAAS,gBAAgB;AAalB,SAAS,qBAAqB,EAAE,MAAM,MAAM,GAA0C;AAC3F,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,WAAW,OAAO,cAAc,eAAe,OAAO,UAAU,UAAU;AAChF,QAAM,MAAM,KAAK,YACb,IAAI,KAAK,KAAK,SAAS,EAAE,eAAe,SAAS,EAAE,SAAS,QAAQ,KAAK,WAAW,OAAO,QAAQ,MAAM,WAAW,QAAQ,UAAU,CAAC,IACvI;AAEJ,iBAAe,UAAU;AACvB,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,KAAK,GAAG;AAC5C,oBAAc,IAAI;AAClB,iBAAW,MAAM,cAAc,KAAK,GAAG,GAAI;AAAA,IAC7C,QAAQ;AACN,YAAM,EAAE,OAAO,0BAAuB,aAAa,4CAA4C,MAAM,QAAQ,CAAC;AAAA,IAChH;AAAA,EACF;AAEA,iBAAe,OAAO;AACpB,QAAI;AACF,YAAM,UAAU,MAAM,EAAE,OAAO,QAAQ,cAAc,KAAK,KAAK,4BAA4B,KAAK,KAAK,IAAI,CAAC;AAAA,IAC5G,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,OAAO,KAAK;AAAA,QACZ,cAAW;AAAA,QACX,WAAU;AAAA,QACV,SAAS,CAAC,MAAM,EAAE,cAAc,OAAO;AAAA;AAAA,IACzC;AAAA,IACA,qBAAC,SAAI,WAAU,wBACb;AAAA,0BAAC,UAAO,SAAQ,aAAY,MAAK,MAAK,SAAS,MAAM,KAAK,QAAQ,GAC/D,uBAAa,sBAAiB,eACjC;AAAA,MACA,oBAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,MAAM,OAAO,KAAK,KAAK,KAAK,UAAU,UAAU,GAAG,2BAE9F;AAAA,MACC,YACC,oBAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,MAAM,KAAK,KAAK,GAAG,yBAE9D;AAAA,OAEJ;AAAA,IACC,OAAO,qBAAC,OAAE,WAAU,0BAAyB;AAAA;AAAA,MAAW;AAAA,MAAI;AAAA,OAAsC;AAAA,KACrG;AAEJ;","names":[]}

package/dist/admin/ui/charts.js

@@ -99,7 +99,7 @@ function DagStaven({
       },
       i
     )) }),
-    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0", style: { top: plotH + 3 }, children: [0, 9, 19, n - 1].filter((v, i, a) => v >= 0 && v < n && a.indexOf(v) === i).map((i) => /* @__PURE__ */ jsx("span", { className: "absolute -translate-x-1/2 text-[10px] text-slate-400", style: { left: `${(i + 0.5) / n * 100}%` }, children: i + 1 }, i)) }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0", style: { top: plotH + 3 }, children: [0, 9, 19, n - 1].filter((v, i, a) => v >= 0 && v < n && a.indexOf(v) === i).map((i) => /* @__PURE__ */ jsx("span", { className: "absolute -translate-x-1/2 text-[10px] text-slate-500", style: { left: `${(i + 0.5) / n * 100}%` }, children: i + 1 }, i)) }),
     maxWaarde > 0 && hover === null && /* @__PURE__ */ jsx(
       "span",
       {
@@ -109,7 +109,7 @@ function DagStaven({
         children: nf.format(maxWaarde)
       }
     ),
-    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-400", style: { fontVariantNumeric: "tabular-nums" }, children: nf.format(max) })
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-500", style: { fontVariantNumeric: "tabular-nums" }, children: nf.format(max) })
   ] });
 }
 function MaandLijn({
@@ -167,7 +167,7 @@ function MaandLijn({
     /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-x-0", style: { top: plotH + 3 }, children: [0, Math.floor((n - 1) / 2), n - 1].filter((v, i, a) => a.indexOf(v) === i).map((i) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: "absolute text-[10px] text-slate-400",
+        className: "absolute text-[10px] text-slate-500",
         style: { left: `${px(i)}%`, transform: i === 0 ? "none" : i === n - 1 ? "translateX(-100%)" : "translateX(-50%)" },
         children: punten[i].label
       },
@@ -182,7 +182,7 @@ function MaandLijn({
         children: nf.format(punten[n - 1].waarde)
       }
     ),
-    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-400", style: { fontVariantNumeric: "tabular-nums" }, children: nf.format(max) })
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-500", style: { fontVariantNumeric: "tabular-nums" }, children: nf.format(max) })
   ] });
 }
 function BalkjesLijst({ items }) {
@@ -216,7 +216,7 @@ function StatTegel({
 }
 function AlsTabel({ kop, rijen }) {
   return /* @__PURE__ */ jsxs("details", { className: "mt-2", children: [
-    /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-slate-400 hover:text-slate-600", children: "Bekijk als tabel" }),
+    /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-slate-500 hover:text-slate-600", children: "Bekijk als tabel" }),
     /* @__PURE__ */ jsxs("table", { className: "mt-2 w-full text-sm", children: [
       /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-left text-xs text-slate-500", children: [
         /* @__PURE__ */ jsx("th", { className: "py-1 font-medium", children: kop[0] }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/charts.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Lichte grafieken voor het beheer (7.17) — geen chart-library: dit is een editor-chunk en\n * drie vormen (kolommen, lijn, balkjeslijst) rechtvaardigen geen dependency in elke klantsite.\n *\n * Vaste GEREEDSCHAPSKLEUREN, bewust niet de merkkleur: `--color-brand` volgt `--xicms-primary`\n * van de klant en kan licht zijn (goud, lime) — dan verdwijnen de staven op een witte kaart.\n * Dit blauwpaar is met de dataviz-validator doorgerekend op wit (lichtheid, chroma, CVD-ΔE 18.9,\n * normaal-zicht-ΔE 19.2, contrast ≥ 3:1 — alles groen). Zelfde filosofie als de editor-balk:\n * gereedschap ziet er op elke site hetzelfde uit.\n *\n * Vormregels die hier vastliggen (dataviz-methode):\n * - kolommen: ronde datakant (4px), vlakke voet op de basislijn, ≤ 24px dik, 2px lucht ertussen;\n * - lijn: 2px met ronde joins, vulling als wash (10%), punten ≥ 8px met witte ring;\n * - raster: haarlijnen één stap van het oppervlak af, nooit gestreept, recessief;\n * - tekst draagt tekstkleuren, nooit de seriekleur — identiteit zit in de mark ernaast;\n * - hover hoort erbij: ruime hit-zones met tooltip, en alles wat de tooltip toont is óók\n *   zonder muis bereikbaar (as-ticks, selectieve labels, de tabel-uitklapper).\n *\n * Bewust HTML-marks (divs) waar het kan: een SVG met `preserveAspectRatio=\"none\"` schaalt\n * niet-uniform, waardoor rondingen en cirkels vervormen — divs met border-radius blijven\n * pixel-zuiver op elke kaartbreedte. Alleen het lijnpad zelf is SVG (met non-scaling-stroke).\n */\nimport { useId, useRef, useState } from \"react\";\n\nexport const CHART = {\n  serie: \"#3987e5\",\n  accent: \"#184f95\",\n  wash: \"rgba(57, 135, 229, 0.10)\",\n  track: \"#e9f1fc\",\n  grid: \"#e2e8f0\",\n  as: \"#cbd5e1\",\n} as const;\n\nconst nf = new Intl.NumberFormat(\"nl-NL\");\n\n/** Nette bovengrens voor de y-as (1/2/5 × macht van 10), zodat de schaal-tick rond is. */\nfunction netteMax(max: number): number {\n  if (max <= 4) return 4;\n  const macht = 10 ** Math.floor(Math.log10(max));\n  for (const f of [1, 2, 5, 10]) if (max <= f * macht) return f * macht;\n  return 10 * macht;\n}\n\ninterface TooltipStand {\n  x: number;\n  y: number;\n  titel: string;\n  waarde: number;\n}\n\n/** Zwevende uitlezing. Waarde voorop en zwaar, label secundair — de lezer wil het getal. */\nfunction Tooltip({ t }: { t: TooltipStand | null }) {\n  if (!t) return null;\n  return (\n    <div\n      className=\"pointer-events-none absolute z-10 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 whitespace-nowrap shadow-md\"\n      style={{ left: t.x, top: Math.max(26, t.y), transform: \"translate(-50%, calc(-100% - 8px))\" }}\n      role=\"status\"\n    >\n      <span className=\"text-sm font-semibold text-slate-900\">{nf.format(t.waarde)}</span>\n      <span className=\"ml-1.5 text-xs text-slate-500\">{t.titel}</span>\n    </div>\n  );\n}\n\n/** Recessief raster: haarlijnen op 50% en 100% van de schaal + de basislijn. */\nfunction Raster({ plotH }: { plotH: number }) {\n  return (\n    <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0\" style={{ height: plotH }}>\n      <div className=\"absolute inset-x-0\" style={{ top: 0, borderTop: `1px solid ${CHART.grid}` }} />\n      <div className=\"absolute inset-x-0\" style={{ top: plotH / 2, borderTop: `1px solid ${CHART.grid}` }} />\n      <div className=\"absolute inset-x-0\" style={{ top: plotH, borderTop: `1px solid ${CHART.as}` }} />\n    </div>\n  );\n}\n\n/**\n * Kolomgrafiek voor één maand: dag 1..N. `accentIndex` (bv. vandaag) kleurt één kolom in de\n * donkere stap van dezelfde ramp — zelfde reeks, gemarkeerd, geen tweede kleur.\n */\nexport function DagStaven({\n  waarden,\n  accentIndex,\n  hoogte = 150,\n  titel,\n  labelVan,\n}: {\n  /** Waarde per dag, index 0 = dag 1. */\n  waarden: number[];\n  accentIndex?: number;\n  hoogte?: number;\n  titel: string;\n  /** Tooltiplabel per index (standaard \"dag N\"). */\n  labelVan?: (i: number) => string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [tip, setTip] = useState<TooltipStand | null>(null);\n  const [hover, setHover] = useState<number | null>(null);\n  const uid = useId();\n\n  const n = Math.max(1, waarden.length);\n  const max = netteMax(Math.max(1, ...waarden));\n  const plotH = hoogte - 18;\n  const maxWaarde = Math.max(...waarden);\n  const maxIdx = waarden.indexOf(maxWaarde);\n  const label = labelVan ?? ((i: number) => `dag ${i + 1}`);\n\n  const move = (i: number) => {\n    const host = ref.current;\n    if (!host) return;\n    const r = host.getBoundingClientRect();\n    setHover(i);\n    setTip({ x: ((i + 0.5) / n) * r.width, y: plotH * (1 - waarden[i] / max), titel: label(i), waarde: waarden[i] });\n  };\n  const leave = () => {\n    setHover(null);\n    setTip(null);\n  };\n\n  return (\n    <div ref={ref} className=\"relative\" role=\"img\" aria-labelledby={`${uid}-t`} style={{ height: hoogte }}>\n      <span id={`${uid}-t`} className=\"sr-only\">{titel}</span>\n      <Tooltip t={tip} />\n      <Raster plotH={plotH} />\n      {/* De kolommen zelf: flex-sloten met 2px lucht; de balk groeit vanaf de basislijn en is\n          nooit dikker dan 24px — de rest van het slot blijft lucht. */}\n      <div className=\"absolute inset-x-0 top-0 flex items-end\" style={{ height: plotH, gap: 2 }}>\n        {waarden.map((v, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            tabIndex={v > 0 ? 0 : -1}\n            aria-label={`${label(i)}: ${nf.format(v)} weergaven`}\n            className=\"flex h-full min-w-0 flex-1 cursor-default items-end justify-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600\"\n            onPointerMove={() => move(i)}\n            onFocus={() => move(i)}\n            onPointerLeave={leave}\n            onBlur={leave}\n          >\n            {v > 0 && (\n              <span\n                aria-hidden=\"true\"\n                className=\"block w-full\"\n                style={{\n                  maxWidth: 24,\n                  height: Math.max(3, (v / max) * (plotH - 6)),\n                  borderRadius: \"4px 4px 0 0\",\n                  background: i === accentIndex ? CHART.accent : CHART.serie,\n                  opacity: hover === null || hover === i ? 1 : 0.45,\n                  transition: \"opacity 0.1s\",\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>\n      {/* Daglabels: spaarzaam (1 · 10 · 20 · einde). */}\n      <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0\" style={{ top: plotH + 3 }}>\n        {[0, 9, 19, n - 1]\n          .filter((v, i, a) => v >= 0 && v < n && a.indexOf(v) === i)\n          .map((i) => (\n            <span key={i} className=\"absolute -translate-x-1/2 text-[10px] text-slate-400\" style={{ left: `${((i + 0.5) / n) * 100}%` }}>\n              {i + 1}\n            </span>\n          ))}\n      </div>\n      {/* Selectief direct label: alleen de piek — de rest draagt de tooltip en de schaal-tick. */}\n      {maxWaarde > 0 && hover === null && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute -translate-x-1/2 text-[10px] font-medium text-slate-500\"\n          style={{ left: `${((maxIdx + 0.5) / n) * 100}%`, top: Math.max(0, plotH * (1 - maxWaarde / max) - 16) }}\n        >\n          {nf.format(maxWaarde)}\n        </span>\n      )}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-400\" style={{ fontVariantNumeric: \"tabular-nums\" }}>\n        {nf.format(max)}\n      </span>\n    </div>\n  );\n}\n\n/** Lijngrafiek over maanden: 2px lijn, wash-vulling, crosshair-tooltip, eindpunt gemarkeerd. */\nexport function MaandLijn({\n  punten,\n  hoogte = 150,\n  titel,\n}: {\n  punten: { label: string; waarde: number }[];\n  hoogte?: number;\n  titel: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [tip, setTip] = useState<TooltipStand | null>(null);\n  const [kruis, setKruis] = useState<number | null>(null);\n  const uid = useId();\n\n  const n = punten.length;\n  const max = netteMax(Math.max(1, ...punten.map((p) => p.waarde)));\n  const plotH = hoogte - 18;\n  // x in procenten (2% marge), y in pixels — de SVG rekt alleen horizontaal.\n  const px = (i: number) => (n === 1 ? 50 : 2 + (i / (n - 1)) * 96);\n  const py = (v: number) => 6 + (plotH - 12) * (1 - v / max);\n  const pad = punten.map((p, i) => `${i === 0 ? \"M\" : \"L\"} ${px(i)} ${py(p.waarde)}`).join(\" \");\n\n  const move = (e: React.PointerEvent) => {\n    const host = ref.current;\n    if (!host || n === 0) return;\n    const r = host.getBoundingClientRect();\n    const fx = ((e.clientX - r.left) / r.width) * 100;\n    const i = Math.max(0, Math.min(n - 1, Math.round(((fx - 2) / 96) * (n - 1))));\n    setKruis(i);\n    setTip({ x: (px(i) / 100) * r.width, y: py(punten[i].waarde), titel: punten[i].label, waarde: punten[i].waarde });\n  };\n  const leave = () => {\n    setKruis(null);\n    setTip(null);\n  };\n\n  if (n === 0) return null;\n  const focus = kruis ?? n - 1;\n\n  return (\n    <div ref={ref} className=\"relative\" role=\"img\" aria-labelledby={`${uid}-t`} style={{ height: hoogte }} onPointerMove={move} onPointerLeave={leave}>\n      <span id={`${uid}-t`} className=\"sr-only\">{titel}</span>\n      <Tooltip t={tip} />\n      <Raster plotH={plotH} />\n      <svg viewBox={`0 0 100 ${plotH}`} preserveAspectRatio=\"none\" className=\"absolute inset-x-0 top-0 block w-full\" style={{ height: plotH }} aria-hidden=\"true\">\n        {/* Wash onder de lijn: de seriekleur op 10% — een waas, nooit een vlak. */}\n        <path d={`${pad} L ${px(n - 1)} ${plotH} L ${px(0)} ${plotH} Z`} fill={CHART.wash} />\n        <path d={pad} fill=\"none\" stroke={CHART.serie} strokeWidth=\"2\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n        {kruis !== null && (\n          <line x1={px(kruis)} x2={px(kruis)} y1=\"0\" y2={plotH} stroke={CHART.as} strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n        )}\n      </svg>\n      {/* Punt als HTML-dot (8px + 2px witte ring): een SVG-cirkel vervormt onder de niet-uniforme\n          schaal. Alleen het focuspunt draagt een dot — een dot op elk punt is ruis. */}\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full\"\n        style={{\n          left: `${px(focus)}%`,\n          top: py(punten[focus].waarde),\n          background: focus === n - 1 ? CHART.accent : CHART.serie,\n          boxShadow: \"0 0 0 2px #ffffff\",\n        }}\n      />\n      <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0\" style={{ top: plotH + 3 }}>\n        {[0, Math.floor((n - 1) / 2), n - 1]\n          .filter((v, i, a) => a.indexOf(v) === i)\n          .map((i) => (\n            <span\n              key={i}\n              className=\"absolute text-[10px] text-slate-400\"\n              style={{ left: `${px(i)}%`, transform: i === 0 ? \"none\" : i === n - 1 ? \"translateX(-100%)\" : \"translateX(-50%)\" }}\n            >\n              {punten[i].label}\n            </span>\n          ))}\n      </div>\n      {/* Direct label op het eindpunt — de waarde waar het verhaal om draait. */}\n      {kruis === null && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute text-[11px] font-semibold text-slate-700\"\n          style={{ left: `${px(n - 1)}%`, top: Math.max(0, py(punten[n - 1].waarde) - 20), transform: \"translateX(-100%)\" }}\n        >\n          {nf.format(punten[n - 1].waarde)}\n        </span>\n      )}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-400\" style={{ fontVariantNumeric: \"tabular-nums\" }}>\n        {nf.format(max)}\n      </span>\n    </div>\n  );\n}\n\n/** Horizontale balkjeslijst (toppagina's): label · waarde · balk. De track is een lichtere stap\n *  van dezelfde ramp, zodat einden vergelijkbaar zijn zonder raster. */\nexport function BalkjesLijst({ items }: { items: { label: string; waarde: number }[] }) {\n  const max = Math.max(1, ...items.map((i) => i.waarde));\n  return (\n    <ul className=\"grid gap-2.5\">\n      {items.map((it) => (\n        <li key={it.label} className=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1\">\n          <span className=\"truncate text-sm text-slate-700\" title={it.label}>{it.label}</span>\n          <span className=\"text-sm font-medium text-slate-900\" style={{ fontVariantNumeric: \"tabular-nums\" }}>\n            {nf.format(it.waarde)}\n          </span>\n          <span aria-hidden=\"true\" className=\"col-span-2 block h-1.5 w-full overflow-hidden rounded-full\" style={{ background: CHART.track }}>\n            <span className=\"block h-full rounded-full\" style={{ width: `${(it.waarde / max) * 100}%`, background: CHART.serie }} />\n          </span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** Stat-tegel: label · grote waarde (proportionele cijfers) · optionele delta t.o.v. een genoemde periode. */\nexport function StatTegel({\n  label,\n  waarde,\n  delta,\n  deltaLabel,\n}: {\n  label: string;\n  waarde: number | string;\n  /** Relatief verschil in procenten (bv. +12) — kleur volgt de richting (meer bezoek = goed). */\n  delta?: number | null;\n  deltaLabel?: string;\n}) {\n  return (\n    <div className=\"rounded-xl border border-slate-200 bg-white p-4\">\n      <p className=\"text-sm text-slate-500\">{label}</p>\n      <p className=\"mt-1 text-3xl font-semibold text-slate-900\">\n        {typeof waarde === \"number\" ? nf.format(waarde) : waarde}\n      </p>\n      {delta != null && Number.isFinite(delta) && (\n        <p className={`mt-1 text-xs font-medium ${delta >= 0 ? \"text-emerald-700\" : \"text-red-700\"}`}>\n          <span aria-hidden=\"true\">{delta >= 0 ? \"▲\" : \"▼\"}</span> {Math.abs(Math.round(delta))}%\n          {deltaLabel ? <span className=\"font-normal text-slate-500\"> {deltaLabel}</span> : null}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/** Toegankelijke tabelweergave achter een uitklapper — alles wat een grafiek toont, zonder muis. */\nexport function AlsTabel({ kop, rijen }: { kop: [string, string]; rijen: [string, number][] }) {\n  return (\n    <details className=\"mt-2\">\n      <summary className=\"cursor-pointer text-xs text-slate-400 hover:text-slate-600\">Bekijk als tabel</summary>\n      <table className=\"mt-2 w-full text-sm\">\n        <thead>\n          <tr className=\"text-left text-xs text-slate-500\">\n            <th className=\"py-1 font-medium\">{kop[0]}</th>\n            <th className=\"py-1 text-right font-medium\">{kop[1]}</th>\n          </tr>\n        </thead>\n        <tbody>\n          {rijen.map(([l, w]) => (\n            <tr key={l} className=\"border-t border-slate-100\">\n              <td className=\"py-1 text-slate-700\">{l}</td>\n              <td className=\"py-1 text-right text-slate-900\" style={{ fontVariantNumeric: \"tabular-nums\" }}>{nf.format(w)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </details>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/charts.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Lichte grafieken voor het beheer (7.17) — geen chart-library: dit is een editor-chunk en\n * drie vormen (kolommen, lijn, balkjeslijst) rechtvaardigen geen dependency in elke klantsite.\n *\n * Vaste GEREEDSCHAPSKLEUREN, bewust niet de merkkleur: `--color-brand` volgt `--xicms-primary`\n * van de klant en kan licht zijn (goud, lime) — dan verdwijnen de staven op een witte kaart.\n * Dit blauwpaar is met de dataviz-validator doorgerekend op wit (lichtheid, chroma, CVD-ΔE 18.9,\n * normaal-zicht-ΔE 19.2, contrast ≥ 3:1 — alles groen). Zelfde filosofie als de editor-balk:\n * gereedschap ziet er op elke site hetzelfde uit.\n *\n * Vormregels die hier vastliggen (dataviz-methode):\n * - kolommen: ronde datakant (4px), vlakke voet op de basislijn, ≤ 24px dik, 2px lucht ertussen;\n * - lijn: 2px met ronde joins, vulling als wash (10%), punten ≥ 8px met witte ring;\n * - raster: haarlijnen één stap van het oppervlak af, nooit gestreept, recessief;\n * - tekst draagt tekstkleuren, nooit de seriekleur — identiteit zit in de mark ernaast;\n * - hover hoort erbij: ruime hit-zones met tooltip, en alles wat de tooltip toont is óók\n *   zonder muis bereikbaar (as-ticks, selectieve labels, de tabel-uitklapper).\n *\n * Bewust HTML-marks (divs) waar het kan: een SVG met `preserveAspectRatio=\"none\"` schaalt\n * niet-uniform, waardoor rondingen en cirkels vervormen — divs met border-radius blijven\n * pixel-zuiver op elke kaartbreedte. Alleen het lijnpad zelf is SVG (met non-scaling-stroke).\n */\nimport { useId, useRef, useState } from \"react\";\n\nexport const CHART = {\n  serie: \"#3987e5\",\n  accent: \"#184f95\",\n  wash: \"rgba(57, 135, 229, 0.10)\",\n  track: \"#e9f1fc\",\n  grid: \"#e2e8f0\",\n  as: \"#cbd5e1\",\n} as const;\n\nconst nf = new Intl.NumberFormat(\"nl-NL\");\n\n/** Nette bovengrens voor de y-as (1/2/5 × macht van 10), zodat de schaal-tick rond is. */\nfunction netteMax(max: number): number {\n  if (max <= 4) return 4;\n  const macht = 10 ** Math.floor(Math.log10(max));\n  for (const f of [1, 2, 5, 10]) if (max <= f * macht) return f * macht;\n  return 10 * macht;\n}\n\ninterface TooltipStand {\n  x: number;\n  y: number;\n  titel: string;\n  waarde: number;\n}\n\n/** Zwevende uitlezing. Waarde voorop en zwaar, label secundair — de lezer wil het getal. */\nfunction Tooltip({ t }: { t: TooltipStand | null }) {\n  if (!t) return null;\n  return (\n    <div\n      className=\"pointer-events-none absolute z-10 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 whitespace-nowrap shadow-md\"\n      style={{ left: t.x, top: Math.max(26, t.y), transform: \"translate(-50%, calc(-100% - 8px))\" }}\n      role=\"status\"\n    >\n      <span className=\"text-sm font-semibold text-slate-900\">{nf.format(t.waarde)}</span>\n      <span className=\"ml-1.5 text-xs text-slate-500\">{t.titel}</span>\n    </div>\n  );\n}\n\n/** Recessief raster: haarlijnen op 50% en 100% van de schaal + de basislijn. */\nfunction Raster({ plotH }: { plotH: number }) {\n  return (\n    <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-0\" style={{ height: plotH }}>\n      <div className=\"absolute inset-x-0\" style={{ top: 0, borderTop: `1px solid ${CHART.grid}` }} />\n      <div className=\"absolute inset-x-0\" style={{ top: plotH / 2, borderTop: `1px solid ${CHART.grid}` }} />\n      <div className=\"absolute inset-x-0\" style={{ top: plotH, borderTop: `1px solid ${CHART.as}` }} />\n    </div>\n  );\n}\n\n/**\n * Kolomgrafiek voor één maand: dag 1..N. `accentIndex` (bv. vandaag) kleurt één kolom in de\n * donkere stap van dezelfde ramp — zelfde reeks, gemarkeerd, geen tweede kleur.\n */\nexport function DagStaven({\n  waarden,\n  accentIndex,\n  hoogte = 150,\n  titel,\n  labelVan,\n}: {\n  /** Waarde per dag, index 0 = dag 1. */\n  waarden: number[];\n  accentIndex?: number;\n  hoogte?: number;\n  titel: string;\n  /** Tooltiplabel per index (standaard \"dag N\"). */\n  labelVan?: (i: number) => string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [tip, setTip] = useState<TooltipStand | null>(null);\n  const [hover, setHover] = useState<number | null>(null);\n  const uid = useId();\n\n  const n = Math.max(1, waarden.length);\n  const max = netteMax(Math.max(1, ...waarden));\n  const plotH = hoogte - 18;\n  const maxWaarde = Math.max(...waarden);\n  const maxIdx = waarden.indexOf(maxWaarde);\n  const label = labelVan ?? ((i: number) => `dag ${i + 1}`);\n\n  const move = (i: number) => {\n    const host = ref.current;\n    if (!host) return;\n    const r = host.getBoundingClientRect();\n    setHover(i);\n    setTip({ x: ((i + 0.5) / n) * r.width, y: plotH * (1 - waarden[i] / max), titel: label(i), waarde: waarden[i] });\n  };\n  const leave = () => {\n    setHover(null);\n    setTip(null);\n  };\n\n  return (\n    <div ref={ref} className=\"relative\" role=\"img\" aria-labelledby={`${uid}-t`} style={{ height: hoogte }}>\n      <span id={`${uid}-t`} className=\"sr-only\">{titel}</span>\n      <Tooltip t={tip} />\n      <Raster plotH={plotH} />\n      {/* De kolommen zelf: flex-sloten met 2px lucht; de balk groeit vanaf de basislijn en is\n          nooit dikker dan 24px — de rest van het slot blijft lucht. */}\n      <div className=\"absolute inset-x-0 top-0 flex items-end\" style={{ height: plotH, gap: 2 }}>\n        {waarden.map((v, i) => (\n          <button\n            key={i}\n            type=\"button\"\n            tabIndex={v > 0 ? 0 : -1}\n            aria-label={`${label(i)}: ${nf.format(v)} weergaven`}\n            className=\"flex h-full min-w-0 flex-1 cursor-default items-end justify-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600\"\n            onPointerMove={() => move(i)}\n            onFocus={() => move(i)}\n            onPointerLeave={leave}\n            onBlur={leave}\n          >\n            {v > 0 && (\n              <span\n                aria-hidden=\"true\"\n                className=\"block w-full\"\n                style={{\n                  maxWidth: 24,\n                  height: Math.max(3, (v / max) * (plotH - 6)),\n                  borderRadius: \"4px 4px 0 0\",\n                  background: i === accentIndex ? CHART.accent : CHART.serie,\n                  opacity: hover === null || hover === i ? 1 : 0.45,\n                  transition: \"opacity 0.1s\",\n                }}\n              />\n            )}\n          </button>\n        ))}\n      </div>\n      {/* Daglabels: spaarzaam (1 · 10 · 20 · einde). */}\n      <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0\" style={{ top: plotH + 3 }}>\n        {[0, 9, 19, n - 1]\n          .filter((v, i, a) => v >= 0 && v < n && a.indexOf(v) === i)\n          .map((i) => (\n            <span key={i} className=\"absolute -translate-x-1/2 text-[10px] text-slate-500\" style={{ left: `${((i + 0.5) / n) * 100}%` }}>\n              {i + 1}\n            </span>\n          ))}\n      </div>\n      {/* Selectief direct label: alleen de piek — de rest draagt de tooltip en de schaal-tick. */}\n      {maxWaarde > 0 && hover === null && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute -translate-x-1/2 text-[10px] font-medium text-slate-500\"\n          style={{ left: `${((maxIdx + 0.5) / n) * 100}%`, top: Math.max(0, plotH * (1 - maxWaarde / max) - 16) }}\n        >\n          {nf.format(maxWaarde)}\n        </span>\n      )}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-500\" style={{ fontVariantNumeric: \"tabular-nums\" }}>\n        {nf.format(max)}\n      </span>\n    </div>\n  );\n}\n\n/** Lijngrafiek over maanden: 2px lijn, wash-vulling, crosshair-tooltip, eindpunt gemarkeerd. */\nexport function MaandLijn({\n  punten,\n  hoogte = 150,\n  titel,\n}: {\n  punten: { label: string; waarde: number }[];\n  hoogte?: number;\n  titel: string;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [tip, setTip] = useState<TooltipStand | null>(null);\n  const [kruis, setKruis] = useState<number | null>(null);\n  const uid = useId();\n\n  const n = punten.length;\n  const max = netteMax(Math.max(1, ...punten.map((p) => p.waarde)));\n  const plotH = hoogte - 18;\n  // x in procenten (2% marge), y in pixels — de SVG rekt alleen horizontaal.\n  const px = (i: number) => (n === 1 ? 50 : 2 + (i / (n - 1)) * 96);\n  const py = (v: number) => 6 + (plotH - 12) * (1 - v / max);\n  const pad = punten.map((p, i) => `${i === 0 ? \"M\" : \"L\"} ${px(i)} ${py(p.waarde)}`).join(\" \");\n\n  const move = (e: React.PointerEvent) => {\n    const host = ref.current;\n    if (!host || n === 0) return;\n    const r = host.getBoundingClientRect();\n    const fx = ((e.clientX - r.left) / r.width) * 100;\n    const i = Math.max(0, Math.min(n - 1, Math.round(((fx - 2) / 96) * (n - 1))));\n    setKruis(i);\n    setTip({ x: (px(i) / 100) * r.width, y: py(punten[i].waarde), titel: punten[i].label, waarde: punten[i].waarde });\n  };\n  const leave = () => {\n    setKruis(null);\n    setTip(null);\n  };\n\n  if (n === 0) return null;\n  const focus = kruis ?? n - 1;\n\n  return (\n    <div ref={ref} className=\"relative\" role=\"img\" aria-labelledby={`${uid}-t`} style={{ height: hoogte }} onPointerMove={move} onPointerLeave={leave}>\n      <span id={`${uid}-t`} className=\"sr-only\">{titel}</span>\n      <Tooltip t={tip} />\n      <Raster plotH={plotH} />\n      <svg viewBox={`0 0 100 ${plotH}`} preserveAspectRatio=\"none\" className=\"absolute inset-x-0 top-0 block w-full\" style={{ height: plotH }} aria-hidden=\"true\">\n        {/* Wash onder de lijn: de seriekleur op 10% — een waas, nooit een vlak. */}\n        <path d={`${pad} L ${px(n - 1)} ${plotH} L ${px(0)} ${plotH} Z`} fill={CHART.wash} />\n        <path d={pad} fill=\"none\" stroke={CHART.serie} strokeWidth=\"2\" strokeLinejoin=\"round\" strokeLinecap=\"round\" vectorEffect=\"non-scaling-stroke\" />\n        {kruis !== null && (\n          <line x1={px(kruis)} x2={px(kruis)} y1=\"0\" y2={plotH} stroke={CHART.as} strokeWidth=\"1\" vectorEffect=\"non-scaling-stroke\" />\n        )}\n      </svg>\n      {/* Punt als HTML-dot (8px + 2px witte ring): een SVG-cirkel vervormt onder de niet-uniforme\n          schaal. Alleen het focuspunt draagt een dot — een dot op elk punt is ruis. */}\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full\"\n        style={{\n          left: `${px(focus)}%`,\n          top: py(punten[focus].waarde),\n          background: focus === n - 1 ? CHART.accent : CHART.serie,\n          boxShadow: \"0 0 0 2px #ffffff\",\n        }}\n      />\n      <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0\" style={{ top: plotH + 3 }}>\n        {[0, Math.floor((n - 1) / 2), n - 1]\n          .filter((v, i, a) => a.indexOf(v) === i)\n          .map((i) => (\n            <span\n              key={i}\n              className=\"absolute text-[10px] text-slate-500\"\n              style={{ left: `${px(i)}%`, transform: i === 0 ? \"none\" : i === n - 1 ? \"translateX(-100%)\" : \"translateX(-50%)\" }}\n            >\n              {punten[i].label}\n            </span>\n          ))}\n      </div>\n      {/* Direct label op het eindpunt — de waarde waar het verhaal om draait. */}\n      {kruis === null && (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute text-[11px] font-semibold text-slate-700\"\n          style={{ left: `${px(n - 1)}%`, top: Math.max(0, py(punten[n - 1].waarde) - 20), transform: \"translateX(-100%)\" }}\n        >\n          {nf.format(punten[n - 1].waarde)}\n        </span>\n      )}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute -top-0.5 right-0 bg-white pl-1 text-[10px] text-slate-500\" style={{ fontVariantNumeric: \"tabular-nums\" }}>\n        {nf.format(max)}\n      </span>\n    </div>\n  );\n}\n\n/** Horizontale balkjeslijst (toppagina's): label · waarde · balk. De track is een lichtere stap\n *  van dezelfde ramp, zodat einden vergelijkbaar zijn zonder raster. */\nexport function BalkjesLijst({ items }: { items: { label: string; waarde: number }[] }) {\n  const max = Math.max(1, ...items.map((i) => i.waarde));\n  return (\n    <ul className=\"grid gap-2.5\">\n      {items.map((it) => (\n        <li key={it.label} className=\"grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1\">\n          <span className=\"truncate text-sm text-slate-700\" title={it.label}>{it.label}</span>\n          <span className=\"text-sm font-medium text-slate-900\" style={{ fontVariantNumeric: \"tabular-nums\" }}>\n            {nf.format(it.waarde)}\n          </span>\n          <span aria-hidden=\"true\" className=\"col-span-2 block h-1.5 w-full overflow-hidden rounded-full\" style={{ background: CHART.track }}>\n            <span className=\"block h-full rounded-full\" style={{ width: `${(it.waarde / max) * 100}%`, background: CHART.serie }} />\n          </span>\n        </li>\n      ))}\n    </ul>\n  );\n}\n\n/** Stat-tegel: label · grote waarde (proportionele cijfers) · optionele delta t.o.v. een genoemde periode. */\nexport function StatTegel({\n  label,\n  waarde,\n  delta,\n  deltaLabel,\n}: {\n  label: string;\n  waarde: number | string;\n  /** Relatief verschil in procenten (bv. +12) — kleur volgt de richting (meer bezoek = goed). */\n  delta?: number | null;\n  deltaLabel?: string;\n}) {\n  return (\n    <div className=\"rounded-xl border border-slate-200 bg-white p-4\">\n      <p className=\"text-sm text-slate-500\">{label}</p>\n      <p className=\"mt-1 text-3xl font-semibold text-slate-900\">\n        {typeof waarde === \"number\" ? nf.format(waarde) : waarde}\n      </p>\n      {delta != null && Number.isFinite(delta) && (\n        <p className={`mt-1 text-xs font-medium ${delta >= 0 ? \"text-emerald-700\" : \"text-red-700\"}`}>\n          <span aria-hidden=\"true\">{delta >= 0 ? \"▲\" : \"▼\"}</span> {Math.abs(Math.round(delta))}%\n          {deltaLabel ? <span className=\"font-normal text-slate-500\"> {deltaLabel}</span> : null}\n        </p>\n      )}\n    </div>\n  );\n}\n\n/** Toegankelijke tabelweergave achter een uitklapper — alles wat een grafiek toont, zonder muis. */\nexport function AlsTabel({ kop, rijen }: { kop: [string, string]; rijen: [string, number][] }) {\n  return (\n    <details className=\"mt-2\">\n      <summary className=\"cursor-pointer text-xs text-slate-500 hover:text-slate-600\">Bekijk als tabel</summary>\n      <table className=\"mt-2 w-full text-sm\">\n        <thead>\n          <tr className=\"text-left text-xs text-slate-500\">\n            <th className=\"py-1 font-medium\">{kop[0]}</th>\n            <th className=\"py-1 text-right font-medium\">{kop[1]}</th>\n          </tr>\n        </thead>\n        <tbody>\n          {rijen.map(([l, w]) => (\n            <tr key={l} className=\"border-t border-slate-100\">\n              <td className=\"py-1 text-slate-700\">{l}</td>\n              <td className=\"py-1 text-right text-slate-900\" style={{ fontVariantNumeric: \"tabular-nums\" }}>{nf.format(w)}</td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </details>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,4 +1,4 @@
-import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from "react";
 /**
  * Admin-primitieven op het **Astryx design system**. Form-controls (Input/Textarea) renderen echte
  * Astryx-componenten; bijzondere input-types (datetime-local, file…) die Astryx niet kent vallen
@@ -6,21 +6,31 @@ import { type ButtonHTMLAttributes, type InputHTMLAttributes, type TextareaHTMLA
  * Astryx-huisstijl) — bewust geen Astryx Button (die werkt op `label`/`clickAction` i.p.v. children/
  * onClick, wat de ~honderd editor-call-sites zou breken). De API blijft gelijk → robuust.
  */
-type Variant = "primary" | "secondary" | "ghost" | "danger";
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "dangerGhost";
 type Size = "sm" | "md";
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: Variant;
     size?: Size;
+    /**
+     * 8.12: bezig. Toont een draaiertje vóór het label en zet de knop uit — het label blijft staan.
+     * Tot nu toe werd de tekst "Bezig…": de knop sprong van breedte en je zag niet meer wát er bezig was.
+     */
+    loading?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 /**
- * Tekstinvoer. text/email → Astryx TextInput; number → Astryx NumberInput; overige types
- * (datetime-local, search, …) → token-gestylede native input. Het label komt van het omliggende
- * `Field`; hier dus `isLabelHidden`.
+ * Een lege lijst als uitnodiging (8.12): icoon, één zin en de eerste stap — in plaats van een kale
+ * grijze regel "Nog geen media." waar de klant niets mee kon.
  */
+export declare function LegeStaat({ titel, tekst, actie }: {
+    titel: string;
+    tekst?: ReactNode;
+    actie?: ReactNode;
+}): import("react").JSX.Element;
+export declare function useFieldLabel(fallback: string): string;
 export declare const Input: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;
 /** Label-wrapper. Een `<div>` (geen `<label>`) zodat het geen geneste label vormt met de
- *  Astryx-controls (die hun eigen, verborgen label dragen). */
+ *  Astryx-controls; het label gaat via context naar de control zelf (toegankelijke naam). */
 export declare function Field({ label, children, hint }: {
     label: string;
     children: React.ReactNode;

package/dist/admin/ui/primitives.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext } from "react";
 import { cn } from "./cn.js";
 import { TextInput } from "@astryxdesign/core/TextInput";
 import { NumberInput } from "@astryxdesign/core/NumberInput";
@@ -9,7 +9,9 @@ const VARIANT_STYLE = {
   primary: { background: "var(--color-accent)", color: "var(--color-on-accent, #fff)" },
   secondary: { background: "var(--color-background-muted)", color: "var(--color-text-primary)", border: "1px solid var(--color-border)" },
   ghost: { background: "transparent", color: "var(--color-text-primary)" },
-  danger: { background: "var(--color-error, #dc2626)", color: "#fff" }
+  danger: { background: "var(--color-error, #dc2626)", color: "#fff" },
+  /** Verwijderen binnen een lijst (8.2): rustig, maar herkenbaar rood. Eén stijl i.p.v. drie. */
+  dangerGhost: { background: "transparent", color: "var(--color-error, #b91c1c)" }
 };
 const SIZES = {
   sm: "h-8 px-3 text-sm",
@@ -21,51 +23,94 @@ const controlStyle = {
   background: "var(--color-background-body, #fff)",
   color: "var(--color-text-primary)"
 };
-const Button = forwardRef(function Button2({ className, variant = "primary", size = "md", style, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
+const Button = forwardRef(function Button2({ className, variant = "primary", size = "md", style, loading, disabled, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
       className: cn(
-        "inline-flex items-center justify-center gap-2 font-medium transition-[filter] hover:brightness-95 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "xicms-admin-btn inline-flex items-center justify-center gap-2 font-medium transition-[filter] hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50",
         SIZES[size],
+        loading && "disabled:opacity-80",
         className
       ),
       style: { borderRadius: "var(--radius-element, 8px)", ...VARIANT_STYLE[variant], ...style },
-      ...props
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "xicms-admin-spinner", "aria-hidden": true }),
+        children
+      ]
     }
   );
 });
+function LegeStaat({ titel, tekst, actie }) {
+  return /* @__PURE__ */ jsxs("div", { className: "col-span-full grid justify-items-center gap-2 rounded-xl border border-dashed border-slate-300 px-4 py-8 text-center", children: [
+    /* @__PURE__ */ jsx("span", { className: "grid h-10 w-10 place-items-center rounded-full bg-slate-100 text-slate-500", "aria-hidden": true, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 7h16v12H4z M4 7l2-3h12l2 3 M9 12h6" }) }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-slate-700", children: titel }),
+    tekst && /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-slate-500", children: tekst }),
+    actie && /* @__PURE__ */ jsx("div", { className: "mt-1", children: actie })
+  ] });
+}
 function syntheticEvent(value) {
   return { target: { value }, currentTarget: { value } };
 }
+const FieldLabelContext = createContext(null);
+function useFieldLabel(fallback) {
+  return useContext(FieldLabelContext) ?? fallback;
+}
+function doorgeef(rest) {
+  const uit = {};
+  for (const [k, v] of Object.entries(rest)) {
+    if (v === void 0) continue;
+    if (["id", "onBlur", "onFocus", "onKeyDown", "onPaste", "title", "role", "tabIndex"].includes(k) || k.startsWith("aria-") || k.startsWith("data-")) {
+      uit[k] = v;
+    }
+  }
+  return uit;
+}
+const TEXT_TYPES = /* @__PURE__ */ new Set(["text", "email", "password"]);
 const Input = forwardRef(
-  function Input2({ className, style, type = "text", value, onChange, placeholder, ...rest }, ref) {
-    const lbl = rest["aria-label"] || placeholder || "Veld";
+  function Input2({ className, style, type = "text", value, onChange, placeholder, readOnly, disabled, required, name, autoFocus, autoComplete, maxLength, min, max, step, ...rest }, ref) {
+    const lbl = useFieldLabel(rest["aria-label"] || placeholder || "Invoer");
+    const gemeen = {
+      ref,
+      label: lbl,
+      isLabelHidden: true,
+      placeholder,
+      isReadOnly: readOnly || void 0,
+      isDisabled: disabled || void 0,
+      isRequired: required || void 0,
+      htmlName: name,
+      hasAutoFocus: autoFocus || void 0,
+      autoComplete,
+      containerClassName: className,
+      containerStyle: style,
+      ...doorgeef(rest)
+    };
     if (type === "number") {
+      const getal = (x) => x === void 0 || x === "" ? void 0 : Number(x);
       return /* @__PURE__ */ jsx(
         NumberInput,
         {
-          ref,
-          label: lbl,
-          isLabelHidden: true,
-          placeholder,
+          ...gemeen,
+          min: getal(min),
+          max: getal(max),
+          step: getal(step),
           value: value === "" || value == null ? void 0 : Number(value),
           onChange: (n) => onChange?.(syntheticEvent(n == null ? "" : String(n)))
         }
       );
     }
-    if (type === "text" || type === "email" || type === "password") {
+    if (TEXT_TYPES.has(type)) {
       return /* @__PURE__ */ jsx(
         TextInput,
         {
-          ref,
-          label: lbl,
-          isLabelHidden: true,
+          ...gemeen,
           type,
-          placeholder,
           value: String(value ?? ""),
-          onChange: (v) => onChange?.(syntheticEvent(v))
+          onChange: (v) => onChange?.(syntheticEvent(maxLength != null && maxLength >= 0 ? v.slice(0, maxLength) : v))
         }
       );
     }
@@ -77,7 +122,18 @@ const Input = forwardRef(
         value,
         onChange,
         placeholder,
-        className: cn("h-10 w-full px-3 text-sm outline-none focus:ring-2", className),
+        readOnly,
+        disabled,
+        required,
+        name,
+        autoFocus,
+        autoComplete,
+        maxLength,
+        min,
+        max,
+        step,
+        "aria-label": lbl,
+        className: cn("xicms-admin-native h-10 w-full px-3 text-sm", className),
         style: { ...controlStyle, ...style },
         ...rest
       }
@@ -85,26 +141,40 @@ const Input = forwardRef(
   }
 );
 const Textarea = forwardRef(
-  function Textarea2({ value, onChange, placeholder, rows = 4, "aria-label": ariaLabel, ...rest }, ref) {
-    void rest;
+  function Textarea2({ value, onChange, placeholder, rows = 4, className, style, readOnly, disabled, required, name, autoFocus, autoComplete, maxLength, spellCheck, ...rest }, ref) {
+    const lbl = useFieldLabel(rest["aria-label"] || placeholder || "Tekst");
     return /* @__PURE__ */ jsx(
       TextArea,
       {
         ref,
-        label: ariaLabel || placeholder || "Tekst",
+        label: lbl,
         isLabelHidden: true,
         rows,
         placeholder,
+        isReadOnly: readOnly || void 0,
+        isDisabled: disabled || void 0,
+        isRequired: required || void 0,
+        htmlName: name,
+        hasAutoFocus: autoFocus || void 0,
+        autoComplete,
+        maxLength,
+        hasSpellCheck: spellCheck === void 0 ? void 0 : Boolean(spellCheck),
+        containerClassName: className,
+        containerStyle: style,
+        ...doorgeef(rest),
         value: String(value ?? ""),
-        onChange: (v) => onChange?.({ target: { value: v }, currentTarget: { value: v } })
+        onChange: (raw) => {
+          const v = maxLength != null && maxLength >= 0 ? raw.slice(0, maxLength) : raw;
+          onChange?.({ target: { value: v }, currentTarget: { value: v } });
+        }
       }
     );
   }
 );
 function Field({ label, children, hint }) {
   return /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", style: { color: "var(--color-text-primary)" }, children: label }),
-    children,
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", style: { color: "var(--color-text-primary)" }, "aria-hidden": true, children: label }),
+    /* @__PURE__ */ jsx(FieldLabelContext.Provider, { value: label, children }),
     hint && /* @__PURE__ */ jsx("span", { className: "text-xs", style: { color: "var(--color-text-secondary)" }, children: hint })
   ] });
 }
@@ -132,6 +202,8 @@ export {
   Card,
   Field,
   Input,
-  Textarea
+  LegeStaat,
+  Textarea,
+  useFieldLabel
 };
 //# sourceMappingURL=primitives.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ButtonHTMLAttributes, type ChangeEvent, type CSSProperties, type InputHTMLAttributes, type TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"./cn\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { NumberInput } from \"@astryxdesign/core/NumberInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\n\n/**\n * Admin-primitieven op het **Astryx design system**. Form-controls (Input/Textarea) renderen echte\n * Astryx-componenten; bijzondere input-types (datetime-local, file…) die Astryx niet kent vallen\n * robuust terug op een token-gestylede native input. Button/Card/Badge zijn token-gestyled (zelfde\n * Astryx-huisstijl) — bewust geen Astryx Button (die werkt op `label`/`clickAction` i.p.v. children/\n * onClick, wat de ~honderd editor-call-sites zou breken). De API blijft gelijk → robuust.\n */\n\ntype Variant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\ntype Size = \"sm\" | \"md\";\n\nconst VARIANT_STYLE: Record<Variant, CSSProperties> = {\n  primary: { background: \"var(--color-accent)\", color: \"var(--color-on-accent, #fff)\" },\n  secondary: { background: \"var(--color-background-muted)\", color: \"var(--color-text-primary)\", border: \"1px solid var(--color-border)\" },\n  ghost: { background: \"transparent\", color: \"var(--color-text-primary)\" },\n  danger: { background: \"var(--color-error, #dc2626)\", color: \"#fff\" },\n};\nconst SIZES: Record<Size, string> = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-10 px-4 text-sm\",\n};\n\nconst controlStyle: CSSProperties = {\n  borderRadius: \"var(--radius-element, 8px)\",\n  border: \"1px solid var(--color-border)\",\n  background: \"var(--color-background-body, #fff)\",\n  color: \"var(--color-text-primary)\",\n};\n\nexport const Button = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement> & { variant?: Variant; size?: Size }\n>(function Button({ className, variant = \"primary\", size = \"md\", style, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      className={cn(\n        \"inline-flex items-center justify-center gap-2 font-medium transition-[filter] hover:brightness-95 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        SIZES[size],\n        className,\n      )}\n      style={{ borderRadius: \"var(--radius-element, 8px)\", ...VARIANT_STYLE[variant], ...style }}\n      {...props}\n    />\n  );\n});\n\n/** Bouwt een minimale synthetische change-event zodat bestaande `onChange={(e)=>…e.target.value}` blijft werken. */\nfunction syntheticEvent(value: string) {\n  return { target: { value }, currentTarget: { value } } as unknown as ChangeEvent<HTMLInputElement>;\n}\n\n/**\n * Tekstinvoer. text/email → Astryx TextInput; number → Astryx NumberInput; overige types\n * (datetime-local, search, …) → token-gestylede native input. Het label komt van het omliggende\n * `Field`; hier dus `isLabelHidden`.\n */\nexport const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(\n  function Input({ className, style, type = \"text\", value, onChange, placeholder, ...rest }, ref) {\n    const lbl = (rest[\"aria-label\"] as string) || placeholder || \"Veld\";\n    if (type === \"number\") {\n      return (\n        <NumberInput\n          ref={ref}\n          label={lbl}\n          isLabelHidden\n          placeholder={placeholder}\n          value={value === \"\" || value == null ? undefined : Number(value)}\n          onChange={(n) => onChange?.(syntheticEvent(n == null ? \"\" : String(n)))}\n        />\n      );\n    }\n    if (type === \"text\" || type === \"email\" || type === \"password\") {\n      return (\n        <TextInput\n          ref={ref}\n          label={lbl}\n          isLabelHidden\n          type={type as \"text\" | \"email\" | \"password\"}\n          placeholder={placeholder}\n          value={String(value ?? \"\")}\n          onChange={(v) => onChange?.(syntheticEvent(v))}\n        />\n      );\n    }\n    // datetime-local, search, url, file, … → native, in de Astryx-huisstijl getokeniseerd.\n    return (\n      <input\n        ref={ref}\n        type={type}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        className={cn(\"h-10 w-full px-3 text-sm outline-none focus:ring-2\", className)}\n        style={{ ...controlStyle, ...style }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(\n  function Textarea({ value, onChange, placeholder, rows = 4, \"aria-label\": ariaLabel, ...rest }, ref) {\n    void rest;\n    return (\n      <TextArea\n        ref={ref}\n        label={(ariaLabel as string) || placeholder || \"Tekst\"}\n        isLabelHidden\n        rows={rows}\n        placeholder={placeholder}\n        value={String(value ?? \"\")}\n        onChange={(v) =>\n          onChange?.({ target: { value: v }, currentTarget: { value: v } } as unknown as ChangeEvent<HTMLTextAreaElement>)\n        }\n      />\n    );\n  },\n);\n\n/** Label-wrapper. Een `<div>` (geen `<label>`) zodat het geen geneste label vormt met de\n *  Astryx-controls (die hun eigen, verborgen label dragen). */\nexport function Field({ label, children, hint }: { label: string; children: React.ReactNode; hint?: string }) {\n  return (\n    <div className=\"grid gap-1.5\">\n      <span className=\"text-sm font-medium\" style={{ color: \"var(--color-text-primary)\" }}>{label}</span>\n      {children}\n      {hint && <span className=\"text-xs\" style={{ color: \"var(--color-text-secondary)\" }}>{hint}</span>}\n    </div>\n  );\n}\n\nexport function Card({ className, children }: { className?: string; children: React.ReactNode }) {\n  return (\n    <div\n      className={cn(\"p-5\", className)}\n      style={{ borderRadius: \"var(--radius-container, 14px)\", border: \"1px solid var(--color-border)\", background: \"var(--color-background-card)\" }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function Badge({ children, tone = \"slate\" }: { children: React.ReactNode; tone?: \"slate\" | \"green\" | \"amber\" }) {\n  const tones: Record<string, CSSProperties> = {\n    slate: { background: \"var(--color-background-muted)\", color: \"var(--color-text-secondary)\" },\n    green: { background: \"var(--color-background-green, #dcfce7)\", color: \"var(--color-text-green, #15803d)\" },\n    amber: { background: \"var(--color-background-orange, #ffedd5)\", color: \"var(--color-text-orange, #c2410c)\" },\n  };\n  return (\n    <span className=\"rounded-full px-2 py-0.5 text-xs font-medium\" style={tones[tone]}>\n      {children}\n    </span>\n  );\n}\n"],"mappings":"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","names":["Button","Input","Textarea"]}
+{"version":3,"sources":["../../../src/admin/ui/primitives.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, forwardRef, useContext, type ButtonHTMLAttributes, type ChangeEvent, type CSSProperties, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"./cn\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { NumberInput } from \"@astryxdesign/core/NumberInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\n\n/**\n * Admin-primitieven op het **Astryx design system**. Form-controls (Input/Textarea) renderen echte\n * Astryx-componenten; bijzondere input-types (datetime-local, file…) die Astryx niet kent vallen\n * robuust terug op een token-gestylede native input. Button/Card/Badge zijn token-gestyled (zelfde\n * Astryx-huisstijl) — bewust geen Astryx Button (die werkt op `label`/`clickAction` i.p.v. children/\n * onClick, wat de ~honderd editor-call-sites zou breken). De API blijft gelijk → robuust.\n */\n\ntype Variant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\" | \"dangerGhost\";\ntype Size = \"sm\" | \"md\";\n\nconst VARIANT_STYLE: Record<Variant, CSSProperties> = {\n  primary: { background: \"var(--color-accent)\", color: \"var(--color-on-accent, #fff)\" },\n  secondary: { background: \"var(--color-background-muted)\", color: \"var(--color-text-primary)\", border: \"1px solid var(--color-border)\" },\n  ghost: { background: \"transparent\", color: \"var(--color-text-primary)\" },\n  danger: { background: \"var(--color-error, #dc2626)\", color: \"#fff\" },\n  /** Verwijderen binnen een lijst (8.2): rustig, maar herkenbaar rood. Eén stijl i.p.v. drie. */\n  dangerGhost: { background: \"transparent\", color: \"var(--color-error, #b91c1c)\" },\n};\nconst SIZES: Record<Size, string> = {\n  sm: \"h-8 px-3 text-sm\",\n  md: \"h-10 px-4 text-sm\",\n};\n\nconst controlStyle: CSSProperties = {\n  borderRadius: \"var(--radius-element, 8px)\",\n  border: \"1px solid var(--color-border)\",\n  background: \"var(--color-background-body, #fff)\",\n  color: \"var(--color-text-primary)\",\n};\n\nexport const Button = forwardRef<\n  HTMLButtonElement,\n  ButtonHTMLAttributes<HTMLButtonElement> & {\n    variant?: Variant;\n    size?: Size;\n    /**\n     * 8.12: bezig. Toont een draaiertje vóór het label en zet de knop uit — het label blijft staan.\n     * Tot nu toe werd de tekst \"Bezig…\": de knop sprong van breedte en je zag niet meer wát er bezig was.\n     */\n    loading?: boolean;\n  }\n>(function Button({ className, variant = \"primary\", size = \"md\", style, loading, disabled, children, ...props }, ref) {\n  return (\n    <button\n      ref={ref}\n      className={cn(\n        \"xicms-admin-btn inline-flex items-center justify-center gap-2 font-medium transition-[filter] hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-50\",\n        SIZES[size],\n        loading && \"disabled:opacity-80\",\n        className,\n      )}\n      style={{ borderRadius: \"var(--radius-element, 8px)\", ...VARIANT_STYLE[variant], ...style }}\n      disabled={disabled || loading}\n      aria-busy={loading || undefined}\n      {...props}\n    >\n      {loading && <span className=\"xicms-admin-spinner\" aria-hidden />}\n      {children}\n    </button>\n  );\n});\n\n/**\n * Een lege lijst als uitnodiging (8.12): icoon, één zin en de eerste stap — in plaats van een kale\n * grijze regel \"Nog geen media.\" waar de klant niets mee kon.\n */\nexport function LegeStaat({ titel, tekst, actie }: { titel: string; tekst?: ReactNode; actie?: ReactNode }) {\n  return (\n    <div className=\"col-span-full grid justify-items-center gap-2 rounded-xl border border-dashed border-slate-300 px-4 py-8 text-center\">\n      <span className=\"grid h-10 w-10 place-items-center rounded-full bg-slate-100 text-slate-500\" aria-hidden>\n        <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d=\"M4 7h16v12H4z M4 7l2-3h12l2 3 M9 12h6\" />\n        </svg>\n      </span>\n      <p className=\"text-sm font-medium text-slate-700\">{titel}</p>\n      {tekst && <p className=\"max-w-sm text-sm text-slate-500\">{tekst}</p>}\n      {actie && <div className=\"mt-1\">{actie}</div>}\n    </div>\n  );\n}\n\n/** Bouwt een minimale synthetische change-event zodat bestaande `onChange={(e)=>…e.target.value}` blijft werken. */\nfunction syntheticEvent(value: string) {\n  return { target: { value }, currentTarget: { value } } as unknown as ChangeEvent<HTMLInputElement>;\n}\n\n/**\n * Het label van het omliggende `Field` (8.0). Vroeger kregen controls `aria-label = placeholder ||\n * \"Veld\"`, dus een schermlezer hoorde \"Veld\" of \"bv. Over ons\" in plaats van \"Paginatitel\". Nu\n * geeft `Field` zijn label door en draagt de Astryx-control het als (visueel verborgen) label.\n */\nconst FieldLabelContext = createContext<string | null>(null);\nexport function useFieldLabel(fallback: string): string {\n  return useContext(FieldLabelContext) ?? fallback;\n}\n\n/**\n * DOM-props die Astryx' inputs gewoon doorgeven (via BaseProps). Tot 8.0 gooiden `Input` en\n * `Textarea` álles behalve value/onChange/placeholder weg: `onBlur` (alt-tekst opslaan, adres\n * normaliseren), `readOnly` (previewlink), `disabled` en `className` deden stilletjes niets.\n */\ntype Doorgeef = Pick<\n  InputHTMLAttributes<HTMLElement>,\n  \"id\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"onPaste\" | \"title\" | \"role\" | \"tabIndex\" | \"aria-describedby\" | \"aria-invalid\"\n>;\nfunction doorgeef(rest: Record<string, unknown>): Doorgeef & Record<`data-${string}`, unknown> {\n  const uit: Record<string, unknown> = {};\n  for (const [k, v] of Object.entries(rest)) {\n    if (v === undefined) continue;\n    if ([\"id\", \"onBlur\", \"onFocus\", \"onKeyDown\", \"onPaste\", \"title\", \"role\", \"tabIndex\"].includes(k) || k.startsWith(\"aria-\") || k.startsWith(\"data-\")) {\n      uit[k] = v;\n    }\n  }\n  return uit as Doorgeef & Record<`data-${string}`, unknown>;\n}\n\n/**\n * Tekstinvoer. text/email/password → Astryx TextInput (meer types kent die niet); number → Astryx NumberInput;\n * overige types (tel, url, datetime-local, date, file, …) → token-gestylede native input. Het zichtbare label\n * komt van het omliggende `Field`; hier dus `isLabelHidden`.\n */\nconst TEXT_TYPES = new Set([\"text\", \"email\", \"password\"]);\n\nexport const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(\n  function Input(\n    { className, style, type = \"text\", value, onChange, placeholder, readOnly, disabled, required, name, autoFocus, autoComplete, maxLength, min, max, step, ...rest },\n    ref,\n  ) {\n    const lbl = useFieldLabel((rest[\"aria-label\"] as string) || placeholder || \"Invoer\");\n    const gemeen = {\n      ref,\n      label: lbl,\n      isLabelHidden: true,\n      placeholder,\n      isReadOnly: readOnly || undefined,\n      isDisabled: disabled || undefined,\n      isRequired: required || undefined,\n      htmlName: name,\n      hasAutoFocus: autoFocus || undefined,\n      autoComplete,\n      containerClassName: className,\n      containerStyle: style,\n      ...doorgeef(rest),\n    };\n    if (type === \"number\") {\n      const getal = (x: unknown) => (x === undefined || x === \"\" ? undefined : Number(x));\n      return (\n        <NumberInput\n          {...gemeen}\n          min={getal(min)}\n          max={getal(max)}\n          step={getal(step)}\n          value={value === \"\" || value == null ? undefined : Number(value)}\n          onChange={(n) => onChange?.(syntheticEvent(n == null ? \"\" : String(n)))}\n        />\n      );\n    }\n    if (TEXT_TYPES.has(type)) {\n      return (\n        <TextInput\n          {...gemeen}\n          type={type as \"text\" | \"email\" | \"password\"}\n          value={String(value ?? \"\")}\n          // TextInput kent geen maxLength; afkappen hier houdt dezelfde belofte.\n          onChange={(v) => onChange?.(syntheticEvent(maxLength != null && maxLength >= 0 ? v.slice(0, maxLength) : v))}\n        />\n      );\n    }\n    // datetime-local, date, file, … → native, in de Astryx-huisstijl getokeniseerd.\n    return (\n      <input\n        ref={ref}\n        type={type}\n        value={value}\n        onChange={onChange}\n        placeholder={placeholder}\n        readOnly={readOnly}\n        disabled={disabled}\n        required={required}\n        name={name}\n        autoFocus={autoFocus}\n        autoComplete={autoComplete}\n        maxLength={maxLength}\n        min={min}\n        max={max}\n        step={step}\n        aria-label={lbl}\n        className={cn(\"xicms-admin-native h-10 w-full px-3 text-sm\", className)}\n        style={{ ...controlStyle, ...style }}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(\n  function Textarea(\n    { value, onChange, placeholder, rows = 4, className, style, readOnly, disabled, required, name, autoFocus, autoComplete, maxLength, spellCheck, ...rest },\n    ref,\n  ) {\n    const lbl = useFieldLabel((rest[\"aria-label\"] as string) || placeholder || \"Tekst\");\n    return (\n      <TextArea\n        ref={ref}\n        label={lbl}\n        isLabelHidden\n        rows={rows}\n        placeholder={placeholder}\n        isReadOnly={readOnly || undefined}\n        isDisabled={disabled || undefined}\n        isRequired={required || undefined}\n        htmlName={name}\n        hasAutoFocus={autoFocus || undefined}\n        autoComplete={autoComplete}\n        maxLength={maxLength}\n        hasSpellCheck={spellCheck === undefined ? undefined : Boolean(spellCheck)}\n        containerClassName={className}\n        containerStyle={style}\n        {...doorgeef(rest)}\n        value={String(value ?? \"\")}\n        // Astryx toont bij maxLength een teller, maar dwingt niet af; afkappen houdt de belofte.\n        onChange={(raw) => {\n          const v = maxLength != null && maxLength >= 0 ? raw.slice(0, maxLength) : raw;\n          onChange?.({ target: { value: v }, currentTarget: { value: v } } as unknown as ChangeEvent<HTMLTextAreaElement>);\n        }}\n      />\n    );\n  },\n);\n\n/** Label-wrapper. Een `<div>` (geen `<label>`) zodat het geen geneste label vormt met de\n *  Astryx-controls; het label gaat via context naar de control zelf (toegankelijke naam). */\nexport function Field({ label, children, hint }: { label: string; children: React.ReactNode; hint?: string }) {\n  return (\n    <div className=\"grid gap-1.5\">\n      <span className=\"text-sm font-medium\" style={{ color: \"var(--color-text-primary)\" }} aria-hidden>\n        {label}\n      </span>\n      <FieldLabelContext.Provider value={label}>{children}</FieldLabelContext.Provider>\n      {hint && <span className=\"text-xs\" style={{ color: \"var(--color-text-secondary)\" }}>{hint}</span>}\n    </div>\n  );\n}\n\nexport function Card({ className, children }: { className?: string; children: React.ReactNode }) {\n  return (\n    <div\n      className={cn(\"p-5\", className)}\n      style={{ borderRadius: \"var(--radius-container, 14px)\", border: \"1px solid var(--color-border)\", background: \"var(--color-background-card)\" }}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function Badge({ children, tone = \"slate\" }: { children: React.ReactNode; tone?: \"slate\" | \"green\" | \"amber\" }) {\n  const tones: Record<string, CSSProperties> = {\n    slate: { background: \"var(--color-background-muted)\", color: \"var(--color-text-secondary)\" },\n    green: { background: \"var(--color-background-green, #dcfce7)\", color: \"var(--color-text-green, #15803d)\" },\n    amber: { background: \"var(--color-background-orange, #ffedd5)\", color: \"var(--color-text-orange, #c2410c)\" },\n  };\n  return (\n    <span className=\"rounded-full px-2 py-0.5 text-xs font-medium\" style={tones[tone]}>\n      {children}\n    </span>\n  );\n}\n"],"mappings":"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","names":["Button","Input","Textarea"]}

package/dist/admin/ui/select.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Selector } from "@astryxdesign/core/Selector";
+import { useFieldLabel } from "./primitives.js";
 function Select({
   value,
   onValueChange,
@@ -8,13 +9,15 @@ function Select({
   placeholder = "Kies\u2026",
   className
 }) {
+  const label = useFieldLabel(placeholder);
   return /* @__PURE__ */ jsx(
     Selector,
     {
-      label: placeholder,
+      label,
       isLabelHidden: true,
       placeholder,
-      className,
+      containerClassName: className,
+      presentation: "adaptive",
       options: options.map((o) => ({ value: o.value, label: o.label })),
       value,
       onChange: (v) => onValueChange(v ?? "")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Selector } from \"@astryxdesign/core/Selector\";\n\n/** Admin-select op de Astryx Selector. API ongewijzigd (value/onValueChange/options). */\nexport function Select({\n  value,\n  onValueChange,\n  options,\n  placeholder = \"Kies…\",\n  className,\n}: {\n  value: string;\n  onValueChange: (v: string) => void;\n  options: { value: string; label: string }[];\n  placeholder?: string;\n  className?: string;\n}) {\n  return (\n    <Selector\n      label={placeholder}\n      isLabelHidden\n      placeholder={placeholder}\n      className={className}\n      options={options.map((o) => ({ value: o.value, label: o.label }))}\n      value={value}\n      onChange={(v) => onValueChange((v as string) ?? \"\")}\n    />\n  );\n}\n"],"mappings":";AAmBI;AAjBJ,SAAS,gBAAgB;AAGlB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,SAAS,QAAQ,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE,MAAM,EAAE;AAAA,MAChE;AAAA,MACA,UAAU,CAAC,MAAM,cAAe,KAAgB,EAAE;AAAA;AAAA,EACpD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { useFieldLabel } from \"./primitives\";\n\n/** Admin-select op de Astryx Selector. API ongewijzigd (value/onValueChange/options). */\nexport function Select({\n  value,\n  onValueChange,\n  options,\n  placeholder = \"Kies…\",\n  className,\n}: {\n  value: string;\n  onValueChange: (v: string) => void;\n  options: { value: string; label: string }[];\n  placeholder?: string;\n  className?: string;\n}) {\n  const label = useFieldLabel(placeholder);\n  return (\n    <Selector\n      label={label}\n      isLabelHidden\n      placeholder={placeholder}\n      containerClassName={className}\n      // 0.7: op een telefoon opent de lijst als bottom sheet i.p.v. een klein dropdownmenu.\n      presentation=\"adaptive\"\n      options={options.map((o) => ({ value: o.value, label: o.label }))}\n      value={value}\n      onChange={(v) => onValueChange((v as string) ?? \"\")}\n    />\n  );\n}\n"],"mappings":";AAqBI;AAnBJ,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAGvB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAMG;AACD,QAAM,QAAQ,cAAc,WAAW;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb;AAAA,MACA,oBAAoB;AAAA,MAEpB,cAAa;AAAA,MACb,SAAS,QAAQ,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE,MAAM,EAAE;AAAA,MAChE;AAAA,MACA,UAAU,CAAC,MAAM,cAAe,KAAgB,EAAE;AAAA;AAAA,EACpD;AAEJ;","names":[]}

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

@@ -1,6 +1,8 @@
 /** Admin-switch op de Astryx Switch. API ongewijzigd (checked/onCheckedChange/label). */
-export declare function Switch({ checked, onCheckedChange, label, }: {
+export declare function Switch({ checked, onCheckedChange, label, labelVerborgen, }: {
     checked: boolean;
     onCheckedChange: (v: boolean) => void;
     label?: string;
+    /** Label alleen voor schermlezers (bv. in een tabel waar de kolomkop het al zegt). */
+    labelVerborgen?: boolean;
 }): import("react").JSX.Element;