@xiwebdesign/xicms-core 7.31.0 → 8.16.0

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;

package/dist/admin/ui/switch.js

@@ -1,16 +1,19 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Switch as AstryxSwitch } from "@astryxdesign/core/Switch";
+import { useFieldLabel } from "./primitives.js";
 function Switch({
   checked,
   onCheckedChange,
-  label
+  label,
+  labelVerborgen
 }) {
+  const veldLabel = useFieldLabel("Aan/uit");
   return /* @__PURE__ */ jsx(
     AstryxSwitch,
     {
-      label: label ?? "Schakelaar",
-      isLabelHidden: !label,
+      label: label ?? veldLabel,
+      isLabelHidden: !label || labelVerborgen,
       value: checked,
       onChange: (c) => onCheckedChange(c)
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as AstryxSwitch } from \"@astryxdesign/core/Switch\";\n\n/** Admin-switch op de Astryx Switch. API ongewijzigd (checked/onCheckedChange/label). */\nexport function Switch({\n  checked,\n  onCheckedChange,\n  label,\n}: {\n  checked: boolean;\n  onCheckedChange: (v: boolean) => void;\n  label?: string;\n}) {\n  return (\n    <AstryxSwitch\n      label={label ?? \"Schakelaar\"}\n      isLabelHidden={!label}\n      value={checked}\n      onChange={(c) => onCheckedChange(c)}\n    />\n  );\n}\n"],"mappings":";AAeI;AAbJ,SAAS,UAAU,oBAAoB;AAGhC,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,eAAe,CAAC;AAAA,MAChB,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,gBAAgB,CAAC;AAAA;AAAA,EACpC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { Switch as AstryxSwitch } from \"@astryxdesign/core/Switch\";\nimport { useFieldLabel } from \"./primitives\";\n\n/** Admin-switch op de Astryx Switch. API ongewijzigd (checked/onCheckedChange/label). */\nexport function Switch({\n  checked,\n  onCheckedChange,\n  label,\n  labelVerborgen,\n}: {\n  checked: boolean;\n  onCheckedChange: (v: boolean) => void;\n  label?: string;\n  /** Label alleen voor schermlezers (bv. in een tabel waar de kolomkop het al zegt). */\n  labelVerborgen?: boolean;\n}) {\n  const veldLabel = useFieldLabel(\"Aan/uit\");\n  return (\n    <AstryxSwitch\n      label={label ?? veldLabel}\n      isLabelHidden={!label || labelVerborgen}\n      value={checked}\n      onChange={(c) => onCheckedChange(c)}\n    />\n  );\n}\n"],"mappings":";AAoBI;AAlBJ,SAAS,UAAU,oBAAoB;AACvC,SAAS,qBAAqB;AAGvB,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,YAAY,cAAc,SAAS;AACzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,SAAS;AAAA,MAChB,eAAe,CAAC,SAAS;AAAA,MACzB,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,gBAAgB,CAAC;AAAA;AAAA,EACpC;AAEJ;","names":[]}

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

@@ -16,8 +16,9 @@ interface ToastApi {
  * `toast({title, description, tone})` blijft, zodat de editors ongewijzigd blijven. Fouten blijven
  * staan tot de gebruiker ze sluit (auto-hide uit); overige verdwijnen vanzelf.
  */
-export declare function ToastProvider({ children }: {
+export declare function ToastProvider({ children, positie }: {
     children: ReactNode;
+    positie?: "bottomEnd" | "topEnd";
 }): import("react").JSX.Element;
 /**
  * `toast` MOET stabiel zijn over renders heen.

package/dist/admin/ui/toast.js

@@ -2,24 +2,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef } from "react";
 import { useToast as useAstryxToast, ToastViewport } from "@astryxdesign/core/Toast";
-function ToastProvider({ children }) {
-  return /* @__PURE__ */ jsx(ToastViewport, { position: "bottomEnd", maxVisible: 4, children });
+import { Icon } from "./Icon.js";
+import { foutNaarMens } from "../lib/foutNaarMens.js";
+function ToastProvider({ children, positie = "bottomEnd" }) {
+  return /* @__PURE__ */ jsx(ToastViewport, { position: positie, maxVisible: 4, children });
 }
 function useToast() {
   const show = useAstryxToast();
   const showRef = useRef(show);
   showRef.current = show;
   const toast = useCallback(({ title, description, tone = "default", action }) => {
+    const uitleg = tone === "error" ? foutNaarMens(description) : description;
     showRef.current({
-      body: /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("strong", { children: title }),
-        description ? /* @__PURE__ */ jsx("span", { style: { display: "block", opacity: 0.8 }, children: description }) : null,
-        action ? (
-          // Eén optionele vervolg-actie in de melding zelf ("Bekijk als bezoeker →"): de melding
-          // is precies het moment waarop die vraag leeft, en een knop sluit de mentale lus die
-          // een instructie in prozavorm open laat staan.
-          /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-toast__actie", onClick: action.onClick, children: action.label })
-        ) : null
+      body: /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: "0.6rem", alignItems: "flex-start" }, children: [
+        tone === "success" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { color: "#16a34a", marginTop: 2 }, children: /* @__PURE__ */ jsx(Icon, { naam: "vink", grootte: 18 }) }) : null,
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("strong", { children: title }),
+          uitleg ? /* @__PURE__ */ jsx("span", { style: { display: "block", opacity: 0.8 }, children: uitleg }) : null,
+          action ? (
+            // Eén optionele vervolg-actie in de melding zelf ("Bekijk als bezoeker →"): de melding
+            // is precies het moment waarop die vraag leeft, en een knop sluit de mentale lus die
+            // een instructie in prozavorm open laat staan.
+            /* @__PURE__ */ jsx("button", { type: "button", className: "xicms-toast__actie", onClick: action.onClick, children: action.label })
+          ) : null
+        ] })
       ] }),
       type: tone === "error" ? "error" : "info",
       isAutoHide: tone !== "error" && !action

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/admin/ui/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef, type ReactNode } from \"react\";\nimport { useToast as useAstryxToast, ToastViewport } from \"@astryxdesign/core/Toast\";\n\ntype ToastTone = \"default\" | \"success\" | \"error\";\ninterface ToastApi {\n  toast: (t: { title: string; description?: string; tone?: ToastTone; action?: { label: string; onClick: () => void } }) => void;\n}\n\n/**\n * Admin-toasts op de **Astryx Toast** (ToastViewport + useToast). De bestaande API\n * `toast({title, description, tone})` blijft, zodat de editors ongewijzigd blijven. Fouten blijven\n * staan tot de gebruiker ze sluit (auto-hide uit); overige verdwijnen vanzelf.\n */\nexport function ToastProvider({ children }: { children: ReactNode }) {\n  return (\n    <ToastViewport position=\"bottomEnd\" maxVisible={4}>\n      {children}\n    </ToastViewport>\n  );\n}\n\n/**\n * `toast` MOET stabiel zijn over renders heen.\n *\n * Dit gaf `{ toast: (t) => … }` terug — een nieuw object met een nieuwe functie bij ELKE render.\n * Op zichzelf onschuldig, tot je bedenkt dat drie effecten in het beheer `toast` in hun\n * afhankelijkheden hebben (de mediakiezer, de mediabeheerder en de visuele editor). Zo'n effect\n * draait dan bij elke render opnieuw, zet state, en die state veroorzaakt weer een render:\n * \"Maximum update depth exceeded\", en een pagina die niet meer laadt.\n *\n * Dat maakte de visuele editor onbruikbaar op élke pagina mét werkversie — daar hangt de\n * mediakiezer in de boom. Op een pagina zónder werkversie kwam de editor nooit zo ver, en precies\n * daarom kon dit lang onopgemerkt blijven: wie het probeerde op een lege pagina zag niets bijzonders.\n *\n * `show` komt uit Astryx en biedt geen garantie over zijn eigen stabiliteit; daarom via een ref, en\n * niet als afhankelijkheid. Anders verplaatsen we het probleem alleen maar één laag.\n */\nexport function useToast(): ToastApi {\n  const show = useAstryxToast();\n  const showRef = useRef(show);\n  showRef.current = show;\n\n  const toast = useCallback<ToastApi[\"toast\"]>(({ title, description, tone = \"default\", action }) => {\n    showRef.current({\n      body: (\n        <span>\n          <strong>{title}</strong>\n          {description ? <span style={{ display: \"block\", opacity: 0.8 }}>{description}</span> : null}\n          {action ? (\n            // Eén optionele vervolg-actie in de melding zelf (\"Bekijk als bezoeker →\"): de melding\n            // is precies het moment waarop die vraag leeft, en een knop sluit de mentale lus die\n            // een instructie in prozavorm open laat staan.\n            <button type=\"button\" className=\"xicms-toast__actie\" onClick={action.onClick}>\n              {action.label}\n            </button>\n          ) : null}\n        </span>\n      ),\n      type: tone === \"error\" ? \"error\" : \"info\",\n      isAutoHide: tone !== \"error\" && !action,\n    });\n  }, []);\n\n  return useMemo(() => ({ toast }), [toast]);\n}\n"],"mappings":";AAiBI,cA8BI,YA9BJ;AAfJ,SAAS,aAAa,SAAS,cAA8B;AAC7D,SAAS,YAAY,gBAAgB,qBAAqB;AAYnD,SAAS,cAAc,EAAE,SAAS,GAA4B;AACnE,SACE,oBAAC,iBAAc,UAAS,aAAY,YAAY,GAC7C,UACH;AAEJ;AAkBO,SAAS,WAAqB;AACnC,QAAM,OAAO,eAAe;AAC5B,QAAM,UAAU,OAAO,IAAI;AAC3B,UAAQ,UAAU;AAElB,QAAM,QAAQ,YAA+B,CAAC,EAAE,OAAO,aAAa,OAAO,WAAW,OAAO,MAAM;AACjG,YAAQ,QAAQ;AAAA,MACd,MACE,qBAAC,UACC;AAAA,4BAAC,YAAQ,iBAAM;AAAA,QACd,cAAc,oBAAC,UAAK,OAAO,EAAE,SAAS,SAAS,SAAS,IAAI,GAAI,uBAAY,IAAU;AAAA,QACtF;AAAA;AAAA;AAAA;AAAA,UAIC,oBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,OAAO,SAClE,iBAAO,OACV;AAAA,YACE;AAAA,SACN;AAAA,MAEF,MAAM,SAAS,UAAU,UAAU;AAAA,MACnC,YAAY,SAAS,WAAW,CAAC;AAAA,IACnC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;AAC3C;","names":[]}
+{"version":3,"sources":["../../../src/admin/ui/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo, useRef, type ReactNode } from \"react\";\nimport { useToast as useAstryxToast, ToastViewport } from \"@astryxdesign/core/Toast\";\nimport { Icon } from \"./Icon\";\nimport { foutNaarMens } from \"../lib/foutNaarMens\";\n\ntype ToastTone = \"default\" | \"success\" | \"error\";\ninterface ToastApi {\n  toast: (t: { title: string; description?: string; tone?: ToastTone; action?: { label: string; onClick: () => void } }) => void;\n}\n\n/**\n * Admin-toasts op de **Astryx Toast** (ToastViewport + useToast). De bestaande API\n * `toast({title, description, tone})` blijft, zodat de editors ongewijzigd blijven. Fouten blijven\n * staan tot de gebruiker ze sluit (auto-hide uit); overige verdwijnen vanzelf.\n */\nexport function ToastProvider({ children, positie = \"bottomEnd\" }: { children: ReactNode; positie?: \"bottomEnd\" | \"topEnd\" }) {\n  return (\n    <ToastViewport position={positie} maxVisible={4}>\n      {children}\n    </ToastViewport>\n  );\n}\n\n/**\n * `toast` MOET stabiel zijn over renders heen.\n *\n * Dit gaf `{ toast: (t) => … }` terug — een nieuw object met een nieuwe functie bij ELKE render.\n * Op zichzelf onschuldig, tot je bedenkt dat drie effecten in het beheer `toast` in hun\n * afhankelijkheden hebben (de mediakiezer, de mediabeheerder en de visuele editor). Zo'n effect\n * draait dan bij elke render opnieuw, zet state, en die state veroorzaakt weer een render:\n * \"Maximum update depth exceeded\", en een pagina die niet meer laadt.\n *\n * Dat maakte de visuele editor onbruikbaar op élke pagina mét werkversie — daar hangt de\n * mediakiezer in de boom. Op een pagina zónder werkversie kwam de editor nooit zo ver, en precies\n * daarom kon dit lang onopgemerkt blijven: wie het probeerde op een lege pagina zag niets bijzonders.\n *\n * `show` komt uit Astryx en biedt geen garantie over zijn eigen stabiliteit; daarom via een ref, en\n * niet als afhankelijkheid. Anders verplaatsen we het probleem alleen maar één laag.\n */\nexport function useToast(): ToastApi {\n  const show = useAstryxToast();\n  const showRef = useRef(show);\n  showRef.current = show;\n\n  const toast = useCallback<ToastApi[\"toast\"]>(({ title, description, tone = \"default\", action }) => {\n    // 8.12: technische (Firebase-)fouten in gewone woorden, op één plek voor het hele beheer.\n    const uitleg = tone === \"error\" ? foutNaarMens(description) : description;\n    showRef.current({\n      body: (\n        <span style={{ display: \"flex\", gap: \"0.6rem\", alignItems: \"flex-start\" }}>\n          {/* Astryx kent alleen info/error; een geslaagde actie krijgt zijn eigen groene vinkje. */}\n          {tone === \"success\" ? (\n            <span aria-hidden style={{ color: \"#16a34a\", marginTop: 2 }}><Icon naam=\"vink\" grootte={18} /></span>\n          ) : null}\n          <span>\n          <strong>{title}</strong>\n          {uitleg ? <span style={{ display: \"block\", opacity: 0.8 }}>{uitleg}</span> : null}\n          {action ? (\n            // Eén optionele vervolg-actie in de melding zelf (\"Bekijk als bezoeker →\"): de melding\n            // is precies het moment waarop die vraag leeft, en een knop sluit de mentale lus die\n            // een instructie in prozavorm open laat staan.\n            <button type=\"button\" className=\"xicms-toast__actie\" onClick={action.onClick}>\n              {action.label}\n            </button>\n          ) : null}\n          </span>\n        </span>\n      ),\n      type: tone === \"error\" ? \"error\" : \"info\",\n      isAutoHide: tone !== \"error\" && !action,\n    });\n  }, []);\n\n  return useMemo(() => ({ toast }), [toast]);\n}\n"],"mappings":";AAmBI,cAqCM,YArCN;AAjBJ,SAAS,aAAa,SAAS,cAA8B;AAC7D,SAAS,YAAY,gBAAgB,qBAAqB;AAC1D,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAYtB,SAAS,cAAc,EAAE,UAAU,UAAU,YAAY,GAA8D;AAC5H,SACE,oBAAC,iBAAc,UAAU,SAAS,YAAY,GAC3C,UACH;AAEJ;AAkBO,SAAS,WAAqB;AACnC,QAAM,OAAO,eAAe;AAC5B,QAAM,UAAU,OAAO,IAAI;AAC3B,UAAQ,UAAU;AAElB,QAAM,QAAQ,YAA+B,CAAC,EAAE,OAAO,aAAa,OAAO,WAAW,OAAO,MAAM;AAEjG,UAAM,SAAS,SAAS,UAAU,aAAa,WAAW,IAAI;AAC9D,YAAQ,QAAQ;AAAA,MACd,MACE,qBAAC,UAAK,OAAO,EAAE,SAAS,QAAQ,KAAK,UAAU,YAAY,aAAa,GAErE;AAAA,iBAAS,YACR,oBAAC,UAAK,eAAW,MAAC,OAAO,EAAE,OAAO,WAAW,WAAW,EAAE,GAAG,8BAAC,QAAK,MAAK,QAAO,SAAS,IAAI,GAAE,IAC5F;AAAA,QACJ,qBAAC,UACD;AAAA,8BAAC,YAAQ,iBAAM;AAAA,UACd,SAAS,oBAAC,UAAK,OAAO,EAAE,SAAS,SAAS,SAAS,IAAI,GAAI,kBAAO,IAAU;AAAA,UAC5E;AAAA;AAAA;AAAA;AAAA,YAIC,oBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,OAAO,SAClE,iBAAO,OACV;AAAA,cACE;AAAA,WACJ;AAAA,SACF;AAAA,MAEF,MAAM,SAAS,UAAU,UAAU;AAAA,MACnC,YAAY,SAAS,WAAW,CAAC;AAAA,IACnC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,SAAO,QAAQ,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;AAC3C;","names":[]}

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

@@ -0,0 +1,34 @@
+import { type Pattern } from "../../patterns/index.js";
+/**
+ * De blokkiezer (8.11): wat wil je hier toevoegen?
+ *
+ * Verving een platte keuzelijst van zo'n zestig namen. Nu: een zoekveld, groepen ("Over je bedrijf",
+ * "Contact en afspraken"), per blok één zin uitleg, en een tweede tabblad met kant-en-klare secties
+ * (de patronen) — die zaten achter een aparte knop in de zijbalk. Opent vanaf de "+" tussen twee
+ * blokken op de pagina én vanuit de zijbalk.
+ */
+export declare function BlokKiezer({ open, onOpenChange, onBlok, onSectie, patterns, }: {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    onBlok: (type: string) => void;
+    onSectie: (blocks: Array<Record<string, unknown>>) => void;
+    patterns?: Pattern[];
+}): import("react").JSX.Element | null;
+/**
+ * Een "+" op de naad onder het blok waar je muis is: hier iets invoegen. Alleen voor blokken op het
+ * hoogste niveau van de pagina (`sleutels`), niet voor blokken in kolommen of tabbladen.
+ */
+export declare function TussenPlus({ sleutels, onKies }: {
+    sleutels: string[];
+    onKies: (na: string) => void;
+}): import("react").JSX.Element | null;
+/**
+ * Kaders (8.11): een stippellijn met de naam rond het blok onder je muis, een doorgetrokken lijn
+ * rond het blok dat je bewerkt. Zonder kader was niet te zien waar een blok begon en eindigde — de
+ * CSS ervoor bestond nog uit de tijd van het canvas, maar niets gebruikte hem.
+ */
+export declare function BlokKader({ sleutels, gekozen, labelVoor }: {
+    sleutels: string[];
+    gekozen: string | null;
+    labelVoor: (key: string) => string;
+}): import("react").JSX.Element;