@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/file-dropzone.d.ts

@@ -1,10 +1,15 @@
 import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 
-/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).
- * Validation failures surface `invalidMessage` (a `sonner` toast by default, see
- * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +
- * `hint` describe what to drop. */
-declare function FileDropzone({ file, onFileSelected, accept, isValid, invalidMessage, onInvalid, dropLabel, browseLabel, emptyLabel, hint, }: {
+/**
+ * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.
+ * The DOM event of that name belongs to form validation and takes a `FormEvent`; this
+ * one takes the rejected `File`, and the kit's meaning is the one every caller already
+ * writes. Everything else a `<div>` takes reaches the root — which carries
+ * `role="button"`, so that is also where an `aria-label` or an `aria-describedby`
+ * belongs.
+ */
+interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onInvalid"> {
     file: File | null;
     onFileSelected: (file: File) => void;
     accept: string;
@@ -27,10 +32,19 @@ declare function FileDropzone({ file, onFileSelected, accept, isValid, invalidMe
      * writing, two modules over.
      */
     onInvalid?: (file: File) => void;
+    /** The dropzone's accessible name, and the instruction shown on it. A caller's own
+     *  `aria-label` wins over it — see the root element below. */
     dropLabel: string;
     browseLabel: string;
     emptyLabel: string;
     hint: string;
-}): react.JSX.Element;
+    /** Extra classes for the dropzone's root. */
+    className?: string;
+}
+/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).
+ * Validation failures surface `invalidMessage` (a `sonner` toast by default, see
+ * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +
+ * `hint` describe what to drop. */
+declare function FileDropzone({ file, onFileSelected, accept, isValid, invalidMessage, onInvalid, dropLabel, browseLabel, emptyLabel, hint, className, "aria-label": ariaLabel, ...rest }: FileDropzoneProps): react.JSX.Element;
 
-export { FileDropzone };
+export { FileDropzone, type FileDropzoneProps };

package/dist/components/file-dropzone.js

@@ -1,8 +1,10 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Upload } from "lucide-react";
 import { Button } from "./ui.js";
 import { cn } from "../lib/cn.js";
+import { useKitFileLabels } from "../i18n/kit-labels.js";
 function FileDropzone({
   file,
   onFileSelected,
@@ -13,10 +15,14 @@ function FileDropzone({
   dropLabel,
   browseLabel,
   emptyLabel,
-  hint
+  hint,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
 }) {
   const [dragOver, setDragOver] = useState(false);
   const fileInputRef = useRef(null);
+  const fileText = useKitFileLabels();
   const acceptFile = (f) => {
     if (!f) return;
     if (!isValid(f)) {
@@ -32,6 +38,7 @@ function FileDropzone({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...rest,
       onDragEnter: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -64,15 +71,29 @@ function FileDropzone({
       },
       role: "button",
       tabIndex: 0,
-      "aria-label": dropLabel,
+      "aria-label": ariaLabel ?? dropLabel,
       className: cn(
-        "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors",
-        dragOver ? "border-slate-500 bg-slate-100 dark:border-slate-300 dark:bg-slate-800" : "border-slate-300 hover:border-slate-400 dark:border-slate-700 dark:hover:border-slate-500"
+        // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,
+        // which Tailwind implements as `position: absolute` — so without a positioned
+        // ancestor its containing block is the INITIAL one, and it is laid out at its
+        // own offset from the top of the document. Nothing looks wrong, because the
+        // input is 1x1 and clipped; what breaks is the page height. On a long page
+        // every escaped sr-only element extends `documentElement.scrollHeight` to its
+        // own offset, which produces a second, whole-document scrollbar alongside the
+        // app shell's own — one that scrolls past the end of the content into nothing.
+        // Measured on the showcase: body 900px, document 47,919px.
+        "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors",
+        // Three states out of two border tokens: the target rests on the plain
+        // hairline, hover pulls it to `--border-strong`, and a live drag keeps that
+        // border and adds the `--bg-active` wash on top — so "let go here" still reads
+        // one step louder than "you are over it".
+        dragOver ? "border-[var(--border-strong)] bg-[var(--bg-active)]" : "border-[var(--border)] hover:border-[var(--border-strong)]",
+        className
       ),
       children: [
-        /* @__PURE__ */ jsx(Upload, { className: "size-5 text-slate-500 dark:text-slate-400" }),
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-slate-700 dark:text-slate-200", children: file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel }),
-        /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: file ? `${Math.round(file.size / 1024)} KB` : hint }),
+        /* @__PURE__ */ jsx(Upload, { className: "size-5 text-[var(--text-muted)]" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-secondary)]", children: file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: file ? fileText.size(file.size) : hint }),
         /* @__PURE__ */ jsx(
           Button,
           {

package/dist/components/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Upload } from \"lucide-react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).\n * Validation failures surface `invalidMessage` (a `sonner` toast by default, see\n * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +\n * `hint` describe what to drop. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  accept,\n  isValid,\n  invalidMessage,\n  onInvalid,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n}: {\n  file: File | null;\n  onFileSelected: (file: File) => void;\n  accept: string;\n  isValid: (file: File) => boolean;\n  invalidMessage: string;\n  /**\n   * How to surface {@link invalidMessage}. Defaults to a `sonner` toast — an\n   * optional peer, imported only when a file is actually rejected. Pass your own to\n   * route it somewhere else, or a no-op to silence it. The same escape hatch, for\n   * the same reason, as `useWizard`'s `onValidationFailed`.\n   *\n   * It exists so this module does not import `sonner` STATICALLY. `package.json`\n   * declares that peer `optional`, and the barrel re-exports this file — so a\n   * top-level `import { toast } from \"sonner\"` made the claim false for everybody:\n   * in an app that installed `@hb/ui` without sonner, `import { Button } from\n   * \"@hb/ui\"` failed to resolve and `tsc --noEmit` failed on the missing types,\n   * without a FileDropzone anywhere in it. Both current consumers happen to depend\n   * on sonner, which is why nothing broke and why the contradiction survived:\n   * `use-wizard.ts` had already answered the identical question the other way, in\n   * writing, two modules over.\n   */\n  onInvalid?: (file: File) => void;\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n}) {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const acceptFile = (f: File | undefined | null) => {\n    if (!f) return;\n    if (!isValid(f)) {\n      if (onInvalid) {\n        onInvalid(f);\n      } else {\n        // sonner is an optional peer: imported here, on the failure path only, so an\n        // app that never trips this never has to install it. Not awaited — nothing\n        // downstream depends on the toast having appeared, and the handlers that\n        // reach this are DOM events.\n        void import(\"sonner\").then(({ toast }) => toast.error(invalidMessage));\n      }\n      return;\n    }\n    onFileSelected(f);\n  };\n\n  return (\n    <div\n      onDragEnter={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = \"copy\";\n        if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragLeave={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n        setDragOver(false);\n      }}\n      onDrop={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setDragOver(false);\n        acceptFile(e.dataTransfer.files?.[0]);\n      }}\n      onClick={() => fileInputRef.current?.click()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          fileInputRef.current?.click();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={dropLabel}\n      className={cn(\n        \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n        dragOver\n          ? \"border-slate-500 bg-slate-100 dark:border-slate-300 dark:bg-slate-800\"\n          : \"border-slate-300 hover:border-slate-400 dark:border-slate-700 dark:hover:border-slate-500\",\n      )}\n    >\n      <Upload className=\"size-5 text-slate-500 dark:text-slate-400\" />\n      <div className=\"text-sm text-slate-700 dark:text-slate-200\">\n        {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n      </div>\n      <div className=\"text-xs text-slate-500 dark:text-slate-400\">\n        {file ? `${Math.round(file.size / 1024)} KB` : hint}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={(e) => {\n          e.stopPropagation();\n          fileInputRef.current?.click();\n        }}\n      >\n        {browseLabel}\n      </Button>\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={(e) => acceptFile(e.target.files?.[0])}\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n"],"mappings":"AAqEI,SAyCE,KAzCF;AArEJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,UAAU;AAMZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GA2BG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,eAAe,OAAyB,IAAI;AAElD,QAAM,aAAa,CAAC,MAA+B;AACjD,QAAI,CAAC,EAAG;AACR,QAAI,CAAC,QAAQ,CAAC,GAAG;AACf,UAAI,WAAW;AACb,kBAAU,CAAC;AAAA,MACb,OAAO;AAKL,aAAK,OAAO,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,cAAc,CAAC;AAAA,MACvE;AACA;AAAA,IACF;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC9D;AAAA,MACA,YAAY,CAAC,MAAM;AACjB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,UAAE,aAAa,aAAa;AAC5B,YAAI,CAAC,YAAY,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC3E;AAAA,MACA,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG;AACvD,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,QAAQ,CAAC,MAAM;AACb,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,oBAAY,KAAK;AACjB,mBAAW,EAAE,aAAa,QAAQ,CAAC,CAAC;AAAA,MACtC;AAAA,MACA,SAAS,MAAM,aAAa,SAAS,MAAM;AAAA,MAC3C,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAe;AACjB,uBAAa,SAAS,MAAM;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,WACI,0EACA;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,UAAO,WAAU,6CAA4C;AAAA,QAC9D,oBAAC,SAAI,WAAU,8CACZ,iBAAO,oBAAC,UAAK,WAAU,eAAe,eAAK,MAAK,IAAU,YAC7D;AAAA,QACA,oBAAC,SAAI,WAAU,8CACZ,iBAAO,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,QAAQ,MACjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,SAAS,MAAM;AAAA,YAC9B;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,QAAQ,CAAC,CAAC;AAAA,YAC/C,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Upload } from \"lucide-react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useKitFileLabels } from \"../i18n/kit-labels\";\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"button\"`, so that is also where an `aria-label` or an `aria-describedby`\n * belongs.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  file: File | null;\n  onFileSelected: (file: File) => void;\n  accept: string;\n  isValid: (file: File) => boolean;\n  invalidMessage: string;\n  /**\n   * How to surface {@link invalidMessage}. Defaults to a `sonner` toast — an\n   * optional peer, imported only when a file is actually rejected. Pass your own to\n   * route it somewhere else, or a no-op to silence it. The same escape hatch, for\n   * the same reason, as `useWizard`'s `onValidationFailed`.\n   *\n   * It exists so this module does not import `sonner` STATICALLY. `package.json`\n   * declares that peer `optional`, and the barrel re-exports this file — so a\n   * top-level `import { toast } from \"sonner\"` made the claim false for everybody:\n   * in an app that installed `@hb/ui` without sonner, `import { Button } from\n   * \"@hb/ui\"` failed to resolve and `tsc --noEmit` failed on the missing types,\n   * without a FileDropzone anywhere in it. Both current consumers happen to depend\n   * on sonner, which is why nothing broke and why the contradiction survived:\n   * `use-wizard.ts` had already answered the identical question the other way, in\n   * writing, two modules over.\n   */\n  onInvalid?: (file: File) => void;\n  /** The dropzone's accessible name, and the instruction shown on it. A caller's own\n   *  `aria-label` wins over it — see the root element below. */\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n  /** Extra classes for the dropzone's root. */\n  className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).\n * Validation failures surface `invalidMessage` (a `sonner` toast by default, see\n * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +\n * `hint` describe what to drop. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  accept,\n  isValid,\n  invalidMessage,\n  onInvalid,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FileDropzoneProps) {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  // The size through the kit's `file.size` label (the provider's locale by default).\n  // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n  // mislabelled as a decimal one, all in one template literal.\n  const fileText = useKitFileLabels();\n\n  const acceptFile = (f: File | undefined | null) => {\n    if (!f) return;\n    if (!isValid(f)) {\n      if (onInvalid) {\n        onInvalid(f);\n      } else {\n        // sonner is an optional peer: imported here, on the failure path only, so an\n        // app that never trips this never has to install it. Not awaited — nothing\n        // downstream depends on the toast having appeared, and the handlers that\n        // reach this are DOM events.\n        void import(\"sonner\").then(({ toast }) => toast.error(invalidMessage));\n      }\n      return;\n    }\n    onFileSelected(f);\n  };\n\n  return (\n    <div\n      // `...rest` first: every handler below is the drop gesture itself, and the\n      // `role`/`tabIndex` pair is what makes this div operable by keyboard at all.\n      {...rest}\n      onDragEnter={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = \"copy\";\n        if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragLeave={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n        setDragOver(false);\n      }}\n      onDrop={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setDragOver(false);\n        acceptFile(e.dataTransfer.files?.[0]);\n      }}\n      onClick={() => fileInputRef.current?.click()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          fileInputRef.current?.click();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n      // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n      // that passes no `aria-label` — i.e. all of them today. Standardising on\n      // `aria-label` (audit §api-design) does not get to silently rename an existing\n      // required prop.\n      aria-label={ariaLabel ?? dropLabel}\n      className={cn(\n        // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n        // which Tailwind implements as `position: absolute` — so without a positioned\n        // ancestor its containing block is the INITIAL one, and it is laid out at its\n        // own offset from the top of the document. Nothing looks wrong, because the\n        // input is 1x1 and clipped; what breaks is the page height. On a long page\n        // every escaped sr-only element extends `documentElement.scrollHeight` to its\n        // own offset, which produces a second, whole-document scrollbar alongside the\n        // app shell's own — one that scrolls past the end of the content into nothing.\n        // Measured on the showcase: body 900px, document 47,919px.\n        \"relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n        // Three states out of two border tokens: the target rests on the plain\n        // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n        // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n        // one step louder than \"you are over it\".\n        dragOver\n          ? \"border-[var(--border-strong)] bg-[var(--bg-active)]\"\n          : \"border-[var(--border)] hover:border-[var(--border-strong)]\",\n        className,\n      )}\n    >\n      <Upload className=\"size-5 text-[var(--text-muted)]\" />\n      <div className=\"text-sm text-[var(--text-secondary)]\">\n        {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n      </div>\n      <div className=\"text-xs text-[var(--text-muted)]\">\n        {file ? fileText.size(file.size) : hint}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={(e) => {\n          e.stopPropagation();\n          fileInputRef.current?.click();\n        }}\n      >\n        {browseLabel}\n      </Button>\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={(e) => acceptFile(e.target.files?.[0])}\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/full-bleed-dialog.d.ts

@@ -1,6 +1,40 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
+/**
+ * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way
+ * to say "the props of this" and five call sites across keksdose and kastlan had already
+ * written one (audit §api-design).
+ *
+ * It extends the `<div>` attributes so a caller can reach the OUTER element — the one
+ * carrying `role="dialog"`, and therefore the one an `aria-label`, an
+ * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going
+ * to the panel inside it, which is what it has always meant here.
+ */
+interface FullBleedDialogProps extends ComponentPropsWithoutRef<"div"> {
+    open: boolean;
+    /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —
+     *  the platform Back gesture all call this. */
+    onClose: () => void;
+    /** What the header strip shows beside the close button. */
+    header?: ReactNode;
+    closeLabel: string;
+    children: ReactNode;
+    /**
+     * Push a history entry so Back dismisses this dialog instead of navigating
+     * (Keksdose feedback #172). On by default, because a full-screen form that ignores
+     * the phone's universal "go back" gesture does not merely fail to close — the
+     * navigation lands somewhere else with the form still notionally open.
+     *
+     * **Off for a caller whose open state is already in the URL.** The transactions
+     * create card is `?action=new`, so Back already pops it through the router; a
+     * sentinel on top of that would cost two presses to close one dialog. One owner of
+     * the Back press, always.
+     */
+    backCloses?: boolean;
+    /** Extra classes for the PANEL (not the backdrop). */
+    className?: string;
+}
 /**
  * The phone's full-screen dialog: a panel that covers the viewport edge to edge.
  *
@@ -29,29 +63,6 @@ import { ReactNode } from 'react';
  * editor shows the row's own first column, the create card a plain title. And `open`,
  * because who decides is the caller's business — see {@link backCloses}.
  */
-declare function FullBleedDialog({ open, onClose, header, closeLabel, children, backCloses, className, }: {
-    open: boolean;
-    /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —
-     *  the platform Back gesture all call this. */
-    onClose: () => void;
-    /** What the header strip shows beside the close button. */
-    header?: ReactNode;
-    closeLabel: string;
-    children: ReactNode;
-    /**
-     * Push a history entry so Back dismisses this dialog instead of navigating
-     * (Keksdose feedback #172). On by default, because a full-screen form that ignores
-     * the phone's universal "go back" gesture does not merely fail to close — the
-     * navigation lands somewhere else with the form still notionally open.
-     *
-     * **Off for a caller whose open state is already in the URL.** The transactions
-     * create card is `?action=new`, so Back already pops it through the router; a
-     * sentinel on top of that would cost two presses to close one dialog. One owner of
-     * the Back press, always.
-     */
-    backCloses?: boolean;
-    /** Extra classes for the PANEL (not the backdrop). */
-    className?: string;
-}): react.ReactPortal | null;
+declare function FullBleedDialog({ open, onClose, header, closeLabel, children, backCloses, className, ...rest }: FullBleedDialogProps): react.ReactPortal | null;
 
-export { FullBleedDialog };
+export { FullBleedDialog, type FullBleedDialogProps };

package/dist/components/full-bleed-dialog.js

@@ -1,4 +1,6 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
@@ -6,6 +8,7 @@ import { useBackdropClose } from "./modal.js";
 import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { useCloseTransition } from "../hooks/use-close-transition.js";
+import { useFocusTrap } from "../hooks/use-focus-trap.js";
 function FullBleedDialog({
   open,
   onClose,
@@ -13,34 +16,46 @@ function FullBleedDialog({
   closeLabel,
   children,
   backCloses = true,
-  className
+  className,
+  ...rest
 }) {
   const { closing, requestClose } = useCloseTransition(onClose);
   const backdropClose = useBackdropClose(requestClose);
   useBodyScrollLock(open);
   useOverlayHistory(open && backCloses, requestClose);
+  const dialogRef = useRef(null);
+  useFocusTrap(dialogRef, { active: open });
+  const handleKeyDown = (e) => {
+    if (e.key !== "Escape") return;
+    e.stopPropagation();
+    requestClose();
+  };
   if (!open || typeof document === "undefined") return null;
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
+        ...rest,
         className: cn(
-          "fixed inset-0 z-50 flex items-stretch justify-center bg-black/40",
+          "fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none",
           closing ? "animate-overlay-out" : "animate-overlay"
         ),
         role: "dialog",
         "aria-modal": "true",
+        tabIndex: -1,
+        ref: dialogRef,
+        onKeyDown: handleKeyDown,
         ...backdropClose,
         children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
-              "flex h-full w-full flex-col overflow-hidden bg-white shadow-xl dark:bg-slate-900",
+              "flex h-full w-full flex-col overflow-hidden bg-[var(--bg-surface)] shadow-xl",
               closing ? "animate-sheet-out" : "animate-sheet",
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-slate-100 px-3 py-3 dark:border-slate-800", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3", children: [
                 /* @__PURE__ */ jsx("div", { className: "min-w-0 font-medium", children: header }),
                 /* @__PURE__ */ jsx(
                   "button",
@@ -48,7 +63,7 @@ function FullBleedDialog({
                     type: "button",
                     onClick: requestClose,
                     "aria-label": closeLabel,
-                    className: "-mr-1 shrink-0 rounded p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200",
+                    className: "-mr-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
                     children: /* @__PURE__ */ jsx(X, { className: "size-5" })
                   }
                 )

package/dist/components/full-bleed-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport type { ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n}: {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /** What the header strip shows beside the close button. */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n}) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      {...backdropClose}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-white shadow-xl dark:bg-slate-900\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-slate-100 px-3 py-3 dark:border-slate-800\">\n          <div className=\"min-w-0 font-medium\">{header}</div>\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-mr-1 shrink-0 rounded p-1.5 text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-slate-200\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* px-3, not px-4: every pixel of chrome here is width the form fields lose\n            on a phone (feedback #32). The body is the only thing that scrolls, so the\n            header stays put and the page underneath cannot move at all. */}\n        <div className=\"flex-1 overflow-y-auto overscroll-contain px-3 py-3\">{children}</div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"AA0GQ,SACE,KADF;AA1GR,SAAS,oBAAoB;AAE7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AA8B5B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AACF,GAuBG;AAID,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,OAAO;AAC5D,QAAM,gBAAgB,iBAAiB,YAAY;AAEnD,oBAAkB,IAAI;AACtB,oBAAkB,QAAQ,YAAY,YAAY;AAElD,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AAErD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QASC,WAAW;AAAA,UACT;AAAA,UACA,UAAU,wBAAwB;AAAA,QACpC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACV,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,sBAAsB;AAAA,cAChC;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,SAAI,WAAU,qGACb;AAAA,oCAAC,SAAI,WAAU,uBAAuB,kBAAO;AAAA,gBAC7C;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,iBACF;AAAA,cAIA,oBAAC,SAAI,WAAU,uDAAuD,UAAS;AAAA;AAAA;AAAA,QACjF;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends ComponentPropsWithoutRef<\"div\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /** What the header strip shows beside the close button. */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  useFocusTrap(dialogRef, { active: open });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key !== \"Escape\") return;\n    // On the panel, the way `Modal` does it, and NOT through `useEscapeKey`: this\n    // dialog is the thing a `PickerSheet` opens on top of, and a document-level\n    // listener cannot tell which of the two the user meant. One press would dismiss\n    // the sheet AND throw away the edit behind it — Keksdose live #309 (*\"Mouse Back\n    // does not only close the select but also the whole edit or create dialog\"*) on a\n    // different key. The sheet's own handler stops the event here, so the innermost\n    // overlay is the one that closes, which is only true because focus is now in it.\n    e.stopPropagation();\n    requestClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={dialogRef}\n      onKeyDown={handleKeyDown}\n      {...backdropClose}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-[var(--bg-surface)] shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3\">\n          <div className=\"min-w-0 font-medium\">{header}</div>\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-mr-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* px-3, not px-4: every pixel of chrome here is width the form fields lose\n            on a phone (feedback #32). The body is the only thing that scrolls, so the\n            header stays put and the page underneath cannot move at all. */}\n        <div className=\"flex-1 overflow-y-auto overscroll-contain px-3 py-3\">{children}</div>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AA+JQ,SACE,KADF;AA/JR,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAiEtB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAyB;AAIvB,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,OAAO;AAC5D,QAAM,gBAAgB,iBAAiB,YAAY;AAEnD,oBAAkB,IAAI;AACtB,oBAAkB,QAAQ,YAAY,YAAY;AAElD,QAAM,YAAY,OAAuB,IAAI;AAY7C,eAAa,WAAW,EAAE,QAAQ,KAAK,CAAC;AAExC,QAAM,gBAAgB,CAAC,MAAqC;AAC1D,QAAI,EAAE,QAAQ,SAAU;AAQxB,MAAE,gBAAgB;AAClB,iBAAa;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AAErD,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QAcE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,UAAU,wBAAwB;AAAA,QACpC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAGX,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,QACV,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,sBAAsB;AAAA,cAChC;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,SAAI,WAAU,qFACb;AAAA,oCAAC,SAAI,WAAU,uBAAuB,kBAAO;AAAA,gBAC7C;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,iBACF;AAAA,cAIA,oBAAC,SAAI,WAAU,uDAAuD,UAAS;AAAA;AAAA;AAAA,QACjF;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/components/grouped-picker.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 interface PickerGroup {
     key: string;
@@ -14,12 +14,13 @@ interface PickerGroup {
         icon?: ReactNode;
     }[];
 }
-/** Panel picker for large grouped option sets: instead of one long flat
- * dropdown, the groups sit side by side as columns with their items listed
- * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback
- * #267 rework). A query that matches a group's name keeps the whole group;
- * otherwise groups are reduced to their matching items. */
-declare function GroupedPicker({ groups, buttonLabel, selected, onSelect, ariaLabel, filterPlaceholder, className, }: {
+/**
+ * `onSelect` is omitted from the div's own attributes because this component's
+ * means "an item was chosen", not the DOM's "text was selected inside me" — two
+ * different signatures under one name, and the kit's meaning is the one three apps
+ * are written against.
+ */
+interface GroupedPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "onSelect"> {
     groups: PickerGroup[];
     /** Face of the closed picker button. */
     buttonLabel: ReactNode;
@@ -29,9 +30,19 @@ declare function GroupedPicker({ groups, buttonLabel, selected, onSelect, ariaLa
         item: string;
     } | null;
     onSelect: (groupKey: string, itemKey: string) => void;
+    /**
+     * @deprecated Use `aria-label`, the DOM spelling every control in the kit now
+     * takes. Kept working — three apps pass it — and it applies only when
+     * `aria-label` is absent; it goes in a later minor.
+     */
     ariaLabel?: string;
     filterPlaceholder?: string;
-    className?: string;
-}): react.JSX.Element;
+}
+/** Panel picker for large grouped option sets: instead of one long flat
+ * dropdown, the groups sit side by side as columns with their items listed
+ * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback
+ * #267 rework). A query that matches a group's name keeps the whole group;
+ * otherwise groups are reduced to their matching items. */
+declare function GroupedPicker({ groups, buttonLabel, selected, onSelect, ariaLabel, "aria-label": ariaLabelAttr, filterPlaceholder, className, ...rest }: GroupedPickerProps): react.JSX.Element;
 
-export { GroupedPicker, type PickerGroup };
+export { GroupedPicker, type GroupedPickerProps, type PickerGroup };

package/dist/components/grouped-picker.js

@@ -1,16 +1,20 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { DropdownSearchHeader, useDropdownSearch } from "./dropdown.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
 function GroupedPicker({
   groups,
   buttonLabel,
   selected,
   onSelect,
   ariaLabel,
+  "aria-label": ariaLabelAttr,
   filterPlaceholder,
-  className
+  className,
+  ...rest
 }) {
   const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();
   useEffect(() => {
@@ -21,65 +25,75 @@ function GroupedPicker({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, setOpen]);
+  const locale = useKitLocale();
   const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
+    const fold = (s) => s.toLocaleLowerCase(locale);
+    const q = fold(query.trim());
     if (!q) return groups;
     return groups.map(
-      (g) => g.label.toLowerCase().includes(q) ? g : { ...g, items: g.items.filter((i) => i.label.toLowerCase().includes(q)) }
+      (g) => fold(g.label).includes(q) ? g : { ...g, items: g.items.filter((i) => fold(i.label).includes(q)) }
     ).filter((g) => g.items.length > 0);
-  }, [groups, query]);
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("relative", className), children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": open,
-        "aria-label": ariaLabel,
-        onClick: () => setOpen((o) => !o),
-        className: "flex w-full items-center justify-between gap-2 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-sm text-slate-800 hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: buttonLabel }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-slate-400" })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 z-30 mt-1 flex max-h-96 w-[min(56rem,85vw)] flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900", children: [
-      /* @__PURE__ */ jsx(
-        DropdownSearchHeader,
+  }, [groups, query, locale]);
+  return (
+    // `rest` goes on the wrapper, but the accessible NAME does not: this div is a
+    // positioning box with no role, so a label parked on it would be announced by
+    // nothing. It belongs to the control — the same split every picker in this wave
+    // makes, and the reason `aria-label` is destructured out rather than left in
+    // `rest`. Spread FIRST so the attributes below, each of them a fix with an
+    // incident behind it, cannot be clobbered from outside.
+    /* @__PURE__ */ jsxs("div", { ...rest, ref: wrapperRef, className: cn("relative", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
         {
-          query,
-          onQueryChange: setQuery,
-          inputRef,
-          placeholder: filterPlaceholder
+          type: "button",
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": ariaLabelAttr ?? ariaLabel,
+          onClick: () => setOpen((o) => !o),
+          className: "flex w-full items-center justify-between gap-2 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] px-2.5 py-1.5 text-sm text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: buttonLabel }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-[var(--text-placeholder)]" })
+          ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "overflow-y-auto p-3", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-500 dark:text-slate-400", children: "\u2014" }) : /* @__PURE__ */ jsx("div", { className: "columns-2 gap-4 md:columns-3 xl:columns-4", children: filtered.map((g) => /* @__PURE__ */ jsxs("div", { className: "mb-3 break-inside-avoid", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400", children: g.label }),
-        /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: g.items.map((item) => {
-          const isSelected = selected !== null && g.key === selected.group && item.key === selected.item;
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onSelect(g.key, item.key);
-                setOpen(false);
-              },
-              className: cn(
-                "flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-left text-sm",
-                isSelected ? "bg-sky-100 font-medium text-sky-900 dark:bg-sky-900/40 dark:text-sky-200" : "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800"
-              ),
-              children: [
-                item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label })
-              ]
-            }
-          ) }, item.key);
-        }) })
-      ] }, g.key)) }) })
+      open && /* @__PURE__ */ jsxs("div", { className: "absolute left-0 z-30 mt-1 flex max-h-96 w-[min(56rem,85vw)] flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg", children: [
+        /* @__PURE__ */ jsx(
+          DropdownSearchHeader,
+          {
+            query,
+            onQueryChange: setQuery,
+            inputRef,
+            placeholder: filterPlaceholder
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "overflow-y-auto p-3", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: "\u2014" }) : /* @__PURE__ */ jsx("div", { className: "columns-2 gap-4 md:columns-3 xl:columns-4", children: filtered.map((g) => /* @__PURE__ */ jsxs("div", { className: "mb-3 break-inside-avoid", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: g.label }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: g.items.map((item) => {
+            const isSelected = selected !== null && g.key === selected.group && item.key === selected.item;
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  onSelect(g.key, item.key);
+                  setOpen(false);
+                },
+                className: cn(
+                  "flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-left text-sm",
+                  isSelected ? "bg-[var(--brand-bg)] font-medium text-[var(--brand-muted)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+                ),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.label })
+                ]
+              }
+            ) }, item.key);
+          }) })
+        ] }, g.key)) }) })
+      ] })
     ] })
-  ] });
+  );
 }
 export {
   GroupedPicker

package/dist/components/grouped-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/grouped-picker.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\n\nexport interface PickerGroup {\n  key: string;\n  label: string;\n  /** `icon` is an optional leading glyph, drawn before the label — the same slot\n   *  `ComboOption` has always had, so the two pickers can present one option set\n   *  the same way. Omitted, a row is exactly what it was: label only, with no\n   *  reserved space, so a list where nothing has an icon does not indent. */\n  items: { key: string; label: string; icon?: ReactNode }[];\n}\n\n/** Panel picker for large grouped option sets: instead of one long flat\n * dropdown, the groups sit side by side as columns with their items listed\n * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback\n * #267 rework). A query that matches a group's name keeps the whole group;\n * otherwise groups are reduced to their matching items. */\nexport function GroupedPicker({\n  groups,\n  buttonLabel,\n  selected,\n  onSelect,\n  ariaLabel,\n  filterPlaceholder,\n  className,\n}: {\n  groups: PickerGroup[];\n  /** Face of the closed picker button. */\n  buttonLabel: ReactNode;\n  /** Keys of the current selection, if any. */\n  selected: { group: string; item: string } | null;\n  onSelect: (groupKey: string, itemKey: string) => void;\n  ariaLabel?: string;\n  filterPlaceholder?: string;\n  className?: string;\n}) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return groups;\n    return groups\n      .map((g) =>\n        g.label.toLowerCase().includes(q)\n          ? g\n          : { ...g, items: g.items.filter((i) => i.label.toLowerCase().includes(q)) },\n      )\n      .filter((g) => g.items.length > 0);\n  }, [groups, query]);\n\n  return (\n    <div ref={wrapperRef} className={cn(\"relative\", className)}>\n      <button\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        aria-label={ariaLabel}\n        onClick={() => setOpen((o) => !o)}\n        className=\"flex w-full items-center justify-between gap-2 rounded-md border border-slate-300 bg-white px-2.5 py-1.5 text-sm text-slate-800 hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800\"\n      >\n        <span className=\"truncate\">{buttonLabel}</span>\n        <ChevronDown className=\"size-4 shrink-0 text-slate-400\" />\n      </button>\n      {open && (\n        <div className=\"absolute left-0 z-30 mt-1 flex max-h-96 w-[min(56rem,85vw)] flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\">\n          <DropdownSearchHeader\n            query={query}\n            onQueryChange={setQuery}\n            inputRef={inputRef}\n            placeholder={filterPlaceholder}\n          />\n          <div className=\"overflow-y-auto p-3\">\n            {filtered.length === 0 ? (\n              <p className=\"text-sm text-slate-500 dark:text-slate-400\">—</p>\n            ) : (\n              <div className=\"columns-2 gap-4 md:columns-3 xl:columns-4\">\n                {filtered.map((g) => (\n                  <div key={g.key} className=\"mb-3 break-inside-avoid\">\n                    <div className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400\">\n                      {g.label}\n                    </div>\n                    <ul className=\"space-y-0.5\">\n                      {g.items.map((item) => {\n                        const isSelected =\n                          selected !== null &&\n                          g.key === selected.group &&\n                          item.key === selected.item;\n                        return (\n                          <li key={item.key}>\n                            <button\n                              type=\"button\"\n                              onClick={() => {\n                                onSelect(g.key, item.key);\n                                setOpen(false);\n                              }}\n                              className={cn(\n                                \"flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-left text-sm\",\n                                isSelected\n                                  ? \"bg-sky-100 font-medium text-sky-900 dark:bg-sky-900/40 dark:text-sky-200\"\n                                  : \"text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800\",\n                              )}\n                            >\n                              {item.icon && <span className=\"shrink-0\">{item.icon}</span>}\n                              <span className=\"min-w-0 truncate\">{item.label}</span>\n                            </button>\n                          </li>\n                        );\n                      })}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAiEM,SAQE,KARF;AAjEN,SAAS,WAAW,eAAe;AAEnC,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,sBAAsB,yBAAyB;AAiBjD,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,EAAE,MAAM,SAAS,YAAY,OAAO,UAAU,SAAS,IAAI,kBAAkB;AAEnF,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,QAAM,WAAW,QAAQ,MAAM;AAC7B,UAAM,IAAI,MAAM,KAAK,EAAE,YAAY;AACnC,QAAI,CAAC,EAAG,QAAO;AACf,WAAO,OACJ;AAAA,MAAI,CAAC,MACJ,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,IAC5B,IACA,EAAE,GAAG,GAAG,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,CAAC,EAAE;AAAA,IAC9E,EACC,OAAO,CAAC,MAAM,EAAE,MAAM,SAAS,CAAC;AAAA,EACrC,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SACE,qBAAC,SAAI,KAAK,YAAY,WAAW,GAAG,YAAY,SAAS,GACvD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,cAAY;AAAA,QACZ,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAChC,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAK,WAAU,YAAY,uBAAY;AAAA,UACxC,oBAAC,eAAY,WAAU,kCAAiC;AAAA;AAAA;AAAA,IAC1D;AAAA,IACC,QACC,qBAAC,SAAI,WAAU,sLACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,eAAe;AAAA,UACf;AAAA,UACA,aAAa;AAAA;AAAA,MACf;AAAA,MACA,oBAAC,SAAI,WAAU,uBACZ,mBAAS,WAAW,IACnB,oBAAC,OAAE,WAAU,8CAA6C,oBAAC,IAE3D,oBAAC,SAAI,WAAU,6CACZ,mBAAS,IAAI,CAAC,MACb,qBAAC,SAAgB,WAAU,2BACzB;AAAA,4BAAC,SAAI,WAAU,yFACZ,YAAE,OACL;AAAA,QACA,oBAAC,QAAG,WAAU,eACX,YAAE,MAAM,IAAI,CAAC,SAAS;AACrB,gBAAM,aACJ,aAAa,QACb,EAAE,QAAQ,SAAS,SACnB,KAAK,QAAQ,SAAS;AACxB,iBACE,oBAAC,QACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,yBAAS,EAAE,KAAK,KAAK,GAAG;AACxB,wBAAQ,KAAK;AAAA,cACf;AAAA,cACA,WAAW;AAAA,gBACT;AAAA,gBACA,aACI,6EACA;AAAA,cACN;AAAA,cAEC;AAAA,qBAAK,QAAQ,oBAAC,UAAK,WAAU,YAAY,eAAK,MAAK;AAAA,gBACpD,oBAAC,UAAK,WAAU,oBAAoB,eAAK,OAAM;AAAA;AAAA;AAAA,UACjD,KAhBO,KAAK,GAiBd;AAAA,QAEJ,CAAC,GACH;AAAA,WA/BQ,EAAE,GAgCZ,CACD,GACH,GAEJ;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/grouped-picker.tsx"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\n\nexport interface PickerGroup {\n  key: string;\n  label: string;\n  /** `icon` is an optional leading glyph, drawn before the label — the same slot\n   *  `ComboOption` has always had, so the two pickers can present one option set\n   *  the same way. Omitted, a row is exactly what it was: label only, with no\n   *  reserved space, so a list where nothing has an icon does not indent. */\n  items: { key: string; label: string; icon?: ReactNode }[];\n}\n\n/**\n * `onSelect` is omitted from the div's own attributes because this component's\n * means \"an item was chosen\", not the DOM's \"text was selected inside me\" — two\n * different signatures under one name, and the kit's meaning is the one three apps\n * are written against.\n */\nexport interface GroupedPickerProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSelect\"> {\n  groups: PickerGroup[];\n  /** Face of the closed picker button. */\n  buttonLabel: ReactNode;\n  /** Keys of the current selection, if any. */\n  selected: { group: string; item: string } | null;\n  onSelect: (groupKey: string, itemKey: string) => void;\n  /**\n   * @deprecated Use `aria-label`, the DOM spelling every control in the kit now\n   * takes. Kept working — three apps pass it — and it applies only when\n   * `aria-label` is absent; it goes in a later minor.\n   */\n  ariaLabel?: string;\n  filterPlaceholder?: string;\n}\n\n/** Panel picker for large grouped option sets: instead of one long flat\n * dropdown, the groups sit side by side as columns with their items listed\n * beneath (feedback #267/#276), narrowed by a filter box at the top (feedback\n * #267 rework). A query that matches a group's name keeps the whole group;\n * otherwise groups are reduced to their matching items. */\nexport function GroupedPicker({\n  groups,\n  buttonLabel,\n  selected,\n  onSelect,\n  ariaLabel,\n  \"aria-label\": ariaLabelAttr,\n  filterPlaceholder,\n  className,\n  ...rest\n}: GroupedPickerProps) {\n  const { open, setOpen, wrapperRef, query, setQuery, inputRef } = useDropdownSearch();\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, setOpen]);\n\n  // Case folding in the provider's locale — see `rowMatches` for the Turkish \"İ\"\n  // that plain `toLowerCase` gets wrong.\n  const locale = useKitLocale();\n  const filtered = useMemo(() => {\n    const fold = (s: string) => s.toLocaleLowerCase(locale);\n    const q = fold(query.trim());\n    if (!q) return groups;\n    return groups\n      .map((g) =>\n        fold(g.label).includes(q)\n          ? g\n          : { ...g, items: g.items.filter((i) => fold(i.label).includes(q)) },\n      )\n      .filter((g) => g.items.length > 0);\n  }, [groups, query, locale]);\n\n  return (\n    // `rest` goes on the wrapper, but the accessible NAME does not: this div is a\n    // positioning box with no role, so a label parked on it would be announced by\n    // nothing. It belongs to the control — the same split every picker in this wave\n    // makes, and the reason `aria-label` is destructured out rather than left in\n    // `rest`. Spread FIRST so the attributes below, each of them a fix with an\n    // incident behind it, cannot be clobbered from outside.\n    <div {...rest} ref={wrapperRef} className={cn(\"relative\", className)}>\n      <button\n        type=\"button\"\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        aria-label={ariaLabelAttr ?? ariaLabel}\n        onClick={() => setOpen((o) => !o)}\n        className=\"flex w-full items-center justify-between gap-2 rounded-md border border-[var(--border-strong)] bg-[var(--bg-surface)] px-2.5 py-1.5 text-sm text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\"\n      >\n        <span className=\"truncate\">{buttonLabel}</span>\n        <ChevronDown className=\"size-4 shrink-0 text-[var(--text-placeholder)]\" />\n      </button>\n      {open && (\n        <div className=\"absolute left-0 z-30 mt-1 flex max-h-96 w-[min(56rem,85vw)] flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\">\n          <DropdownSearchHeader\n            query={query}\n            onQueryChange={setQuery}\n            inputRef={inputRef}\n            placeholder={filterPlaceholder}\n          />\n          <div className=\"overflow-y-auto p-3\">\n            {filtered.length === 0 ? (\n              <p className=\"text-sm text-[var(--text-muted)]\">—</p>\n            ) : (\n              <div className=\"columns-2 gap-4 md:columns-3 xl:columns-4\">\n                {filtered.map((g) => (\n                  <div key={g.key} className=\"mb-3 break-inside-avoid\">\n                    <div className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\n                      {g.label}\n                    </div>\n                    <ul className=\"space-y-0.5\">\n                      {g.items.map((item) => {\n                        const isSelected =\n                          selected !== null &&\n                          g.key === selected.group &&\n                          item.key === selected.item;\n                        return (\n                          <li key={item.key}>\n                            <button\n                              type=\"button\"\n                              onClick={() => {\n                                onSelect(g.key, item.key);\n                                setOpen(false);\n                              }}\n                              className={cn(\n                                \"flex w-full items-center gap-1.5 rounded px-1.5 py-0.5 text-left text-sm\",\n                                isSelected\n                                  ? \"bg-[var(--brand-bg)] font-medium text-[var(--brand-muted)]\"\n                                  : \"text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                              )}\n                            >\n                              {item.icon && <span className=\"shrink-0\">{item.icon}</span>}\n                              <span className=\"min-w-0 truncate\">{item.label}</span>\n                            </button>\n                          </li>\n                        );\n                      })}\n                    </ul>\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}