@eifi1/ui-kit 0.7.1 → 0.8.1

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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { FileRejection, FilePickHandler, FilePickerLabels } from './file-button.js';
 import './ui.js';
 import './tooltip.js';
@@ -17,6 +17,22 @@ import '../hooks/use-anchored-rect.js';
  *    Still spoken, so a host rendering it should not ALSO make it `role="alert"`.
  */
 type FileDropzoneRejectionFeedback = "toast" | "inline" | "none";
+/** What a custom {@link FileDropzoneProps.renderBody} is handed. */
+interface FileDropzoneState {
+    /** A file drag is over the zone right now. */
+    dragOver: boolean;
+    disabled: boolean;
+    busy: boolean;
+    /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */
+    files: readonly File[];
+    /** The inline refusal, when `rejectionFeedback="inline"` has one to show. */
+    error: string | null;
+    /** Open the system picker — for a body that brings its own trigger (a second
+     *  "Take photo" button). Does nothing while `disabled` or `busy`. */
+    open: () => void;
+    /** The resolved `filePicker` strings, so a custom body speaks the same language. */
+    labels: FilePickerLabels;
+}
 /**
  * `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
@@ -86,12 +102,41 @@ interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onInv
     rejectionFeedback?: FileDropzoneRejectionFeedback;
     /** Per-instance overrides of the `filePicker` label namespace. */
     labels?: Partial<FilePickerLabels>;
-    /** 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;
+    /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see
+     *  the root element below. Optional since 0.8, like the three below: each falls back
+     *  to its `filePicker` string from `<UiKitProvider labels>`, then to English. They
+     *  were required, so every call site passed four strings through `t()` by hand, and a
+     *  zone nested in a kit component (the feedback form) had no call site to pass them. */
+    dropLabel?: string;
+    /** Default `filePicker.browse`. */
+    browseLabel?: string;
+    /** What the zone says while nothing is chosen. Default `filePicker.empty` /
+     *  `emptyMultiple`. */
+    emptyLabel?: string;
+    /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */
+    hint?: string;
+    /**
+     * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the
+     * group. keksdose locks its invoice zone while another form holds unsaved changes,
+     * and hand-rolled the whole zone to be able to (invoice-upload.tsx, "Locked").
+     */
+    disabled?: boolean;
+    /**
+     * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus
+     * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the
+     * text. The other half of why keksdose's invoice zone was hand-rolled.
+     */
+    busy?: boolean;
+    /**
+     * Replace the zone's body — the icon, the text and the chosen-file list — with your
+     * own, given the zone's state: keksdose's spinner-plus-"uploading", its multi-shot
+     * hint ("several photos are possible"), a second trigger for the camera.
+     *
+     * The Browse button, the inline error and the live regions stay: Browse is the
+     * keyboard path, and a body that forgot it would leave the zone unreachable without
+     * a pointer. A click on a control inside the body does not also open the picker.
+     */
+    renderBody?: (state: FileDropzoneState) => ReactNode;
     /** Extra classes for the dropzone's root. */
     className?: string;
 }
@@ -100,6 +145,6 @@ interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<"div">, "onInv
  * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise
  * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see
  * `FileButton`. */
-declare function FileDropzone({ file, onFileSelected, multiple, files, onFilesSelected, onClear, onRemove, accept, isValid, invalidMessage, maxSize, maxFiles, onInvalid, onReject, onPick, rejectionFeedback, labels: labelsProp, dropLabel, browseLabel, emptyLabel, hint, className, "aria-label": ariaLabel, "aria-describedby": describedByProp, ...rest }: FileDropzoneProps): react.JSX.Element;
+declare function FileDropzone({ file, onFileSelected, multiple, files, onFilesSelected, onClear, onRemove, accept, isValid, invalidMessage, maxSize, maxFiles, onInvalid, onReject, onPick, rejectionFeedback, labels: labelsProp, dropLabel: dropLabelProp, browseLabel: browseLabelProp, emptyLabel: emptyLabelProp, hint: hintProp, disabled, busy, renderBody, className, "aria-label": ariaLabel, "aria-describedby": describedByProp, ...rest }: FileDropzoneProps): react.JSX.Element;
 
-export { FileDropzone, type FileDropzoneProps, type FileDropzoneRejectionFeedback };
+export { FileDropzone, type FileDropzoneProps, type FileDropzoneRejectionFeedback, type FileDropzoneState };

package/dist/components/file-dropzone.js

@@ -2,11 +2,18 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { Upload, X } from "lucide-react";
-import { Button, IconButton } from "./ui.js";
+import { Button, IconButton, Spinner } from "./ui.js";
 import { cn } from "../lib/cn.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels.js";
-import { DEFAULT_FILE_PICKER_LABELS, judgePick, screenFiles, summariseRejections } from "./file-button.js";
+import {
+  DEFAULT_FILE_PICKER_LABELS,
+  formatAccept,
+  judgePick,
+  screenFiles,
+  summariseRejections
+} from "./file-button.js";
+import { useDragTarget } from "../hooks/use-file-drop.js";
 function FileDropzone({
   file,
   onFileSelected,
@@ -25,18 +32,21 @@ function FileDropzone({
   onPick,
   rejectionFeedback,
   labels: labelsProp,
-  dropLabel,
-  browseLabel,
-  emptyLabel,
-  hint,
+  dropLabel: dropLabelProp,
+  browseLabel: browseLabelProp,
+  emptyLabel: emptyLabelProp,
+  hint: hintProp,
+  disabled,
+  busy,
+  renderBody,
   className,
   "aria-label": ariaLabel,
   "aria-describedby": describedByProp,
   ...rest
 }) {
-  const [dragOver, setDragOver] = useState(false);
   const [error, setError] = useState(null);
-  const fileInputRef = useRef(null);
+  const inert = Boolean(disabled || busy);
+  const [fileInput, setFileInput] = useState(null);
   const browseRef = useRef(null);
   const errorId = useId();
   const fileText = useKitFileLabels();
@@ -44,8 +54,12 @@ function FileDropzone({
   const status = useAnnounce();
   const alert = useAnnounce({ politeness: "assertive" });
   const feedback = rejectionFeedback ?? (onInvalid || onReject ? "none" : "toast");
+  const dropLabel = dropLabelProp ?? labels.dropzone;
+  const browseLabel = browseLabelProp ?? labels.browse;
+  const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);
+  const hint = hintProp ?? labels.hint(formatAccept(accept));
   const acceptFiles = (list) => {
-    if (!list || list.length === 0) return;
+    if (inert || !list || list.length === 0) return;
     const all = Array.from(list);
     const picked = multiple ? all : all.slice(0, 1);
     const { accepted, rejected } = screenFiles(
@@ -87,6 +101,13 @@ function FileDropzone({
     browseRef.current?.focus();
     status.announce(message);
   };
+  const { dropProps, isOver: dragOver } = useDragTarget({
+    disabled: inert,
+    onDropFiles: acceptFiles
+  });
+  const open = () => {
+    if (!inert) fileInput?.click();
+  };
   const chosen = multiple ? files ?? [] : file ? [file] : [];
   const showError = feedback === "inline" && error !== null;
   const describedBy = cn(describedByProp, showError && errorId) || void 0;
@@ -95,34 +116,18 @@ function FileDropzone({
       "div",
       {
         ...rest,
-        onDragEnter: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (e.dataTransfer.types.includes("Files")) setDragOver(true);
-        },
-        onDragOver: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          e.dataTransfer.dropEffect = "copy";
-          if (!dragOver && e.dataTransfer.types.includes("Files")) setDragOver(true);
-        },
-        onDragLeave: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          if (e.currentTarget.contains(e.relatedTarget)) return;
-          setDragOver(false);
-        },
-        onDrop: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setDragOver(false);
-          acceptFiles(e.dataTransfer.files);
+        ...dropProps,
+        onClick: (e) => {
+          if (fromControl(e)) return;
+          open();
         },
-        onClick: () => fileInputRef.current?.click(),
         role: "group",
         "aria-label": ariaLabel ?? dropLabel,
         "aria-describedby": describedBy,
         "data-invalid": showError || void 0,
+        "aria-disabled": disabled || void 0,
+        "aria-busy": busy || void 0,
+        "data-drag-over": dragOver || void 0,
         className: cn(
           // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,
           // which Tailwind implements as `position: absolute` — so without a positioned
@@ -133,60 +138,77 @@ function FileDropzone({
           // 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",
+          "relative flex 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". A refusal shown inline takes the
           // danger border until the next good pick.
-          dragOver ? "border-[var(--border-strong)] bg-[var(--bg-active)]" : showError ? "border-[var(--danger-border)]" : "border-[var(--border)] hover:border-[var(--border-strong)]",
+          // Inert zones keep the resting hairline and lose the hover pull: a border that
+          // answers the pointer promises a drop the zone will refuse.
+          disabled ? "cursor-not-allowed border-[var(--border)] opacity-60" : busy ? "cursor-progress border-[var(--border)]" : dragOver ? "cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]" : showError ? "cursor-pointer border-[var(--danger-border)]" : "cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(Upload, { "aria-hidden": true, className: "size-5 text-[var(--text-muted)]" }),
-          multiple && chosen.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex w-full max-w-sm flex-col gap-1 text-start", children: chosen.map((f, i) => /* @__PURE__ */ jsxs(
-            "li",
-            {
-              className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]",
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: f.name }),
-                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: fileText.size(f.size) }),
-                onRemove && /* @__PURE__ */ jsx(
+          renderBody ? renderBody({
+            dragOver,
+            disabled: Boolean(disabled),
+            busy: Boolean(busy),
+            files: chosen,
+            error: showError ? error : null,
+            open,
+            labels
+          }) : busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-5" }),
+            /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-secondary)]", children: labels.busy })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Upload, { "aria-hidden": true, className: "size-5 text-[var(--text-muted)]" }),
+            multiple && chosen.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex w-full max-w-sm flex-col gap-1 text-start", children: chosen.map((f, i) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate font-medium", children: f.name }),
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: fileText.size(f.size) }),
+                  onRemove && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      type: "button",
+                      size: "sm",
+                      disabled: inert,
+                      "aria-label": labels.remove(f.name),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onRemove(f, i);
+                        afterRemoval(labels.removed(f.name));
+                      },
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+                    }
+                  )
+                ]
+              },
+              `${f.name}-${f.size}-${i}`
+            )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-[var(--text-secondary)]", children: [
+                !multiple && file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel,
+                !multiple && file && onClear && /* @__PURE__ */ jsx(
                   IconButton,
                   {
                     type: "button",
                     size: "sm",
-                    "aria-label": labels.remove(f.name),
+                    disabled: inert,
+                    "aria-label": labels.remove(file.name),
                     onClick: (e) => {
                       e.stopPropagation();
-                      onRemove(f, i);
-                      afterRemoval(labels.removed(f.name));
+                      onClear();
+                      afterRemoval(labels.removed(file.name));
                     },
                     children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
                   }
                 )
-              ]
-            },
-            `${f.name}-${f.size}-${i}`
-          )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-[var(--text-secondary)]", children: [
-              !multiple && file ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: file.name }) : emptyLabel,
-              !multiple && file && onClear && /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  type: "button",
-                  size: "sm",
-                  "aria-label": labels.remove(file.name),
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onClear();
-                    afterRemoval(labels.removed(file.name));
-                  },
-                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: file && !multiple ? fileText.size(file.size) : hint })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: file && !multiple ? fileText.size(file.size) : hint })
+            ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
             /* @__PURE__ */ jsx(
@@ -195,9 +217,10 @@ function FileDropzone({
                 ref: browseRef,
                 type: "button",
                 variant: "secondary",
+                disabled: inert,
                 onClick: (e) => {
                   e.stopPropagation();
-                  fileInputRef.current?.click();
+                  open();
                 },
                 children: browseLabel
               }
@@ -207,6 +230,7 @@ function FileDropzone({
               {
                 type: "button",
                 variant: "ghost",
+                disabled: inert,
                 onClick: (e) => {
                   e.stopPropagation();
                   onClear();
@@ -220,10 +244,11 @@ function FileDropzone({
           /* @__PURE__ */ jsx(
             "input",
             {
-              ref: fileInputRef,
+              ref: setFileInput,
               type: "file",
               accept,
               multiple,
+              disabled: inert,
               onChange: (e) => {
                 const picked = Array.from(e.currentTarget.files ?? []);
                 e.currentTarget.value = "";
@@ -240,6 +265,11 @@ function FileDropzone({
     /* @__PURE__ */ jsx("span", { ...alert.regionProps })
   ] });
 }
+function fromControl(e) {
+  const target = e.target;
+  const control = target?.closest?.("button, a[href], input, select, textarea, label, [role='button']");
+  return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));
+}
 export {
   FileDropzone
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport { DEFAULT_FILE_PICKER_LABELS, judgePick, screenFiles, summariseRejections } from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\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=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is a dynamic `import(\"sonner\")` on the\n   * failure path only: `sonner` is an OPTIONAL peer, and a static import here once\n   * broke `import { Button }` for every app without it (see\n   * `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The whole pick at once, before any of the above — return `false` to refuse all\n   *  of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n   *  message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n  onPick?: FilePickHandler;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\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) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  onPick,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [dragOver, setDragOver] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const browseRef = useRef<HTMLButtonElement>(null);\n  const errorId = useId();\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  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // The echoed file name is only text in the zone, and text changing somewhere on the\n  // page is not announced by itself.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (!list || list.length === 0) return;\n    const all = Array.from(list);\n    const picked = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      picked,\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    const stands = judgePick(onPick, accepted, rejected);\n    if (stands && accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (!stands || rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      if (rejected.length > 0) onReject?.(rejected);\n      const message = stands\n        ? summariseRejections(rejected, labels)\n        : labels.rejectedPick(picked.length);\n      if (feedback === \"toast\") {\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. sonner's own toaster is a live region, so this\n        // path does not announce a second time.\n        void import(\"sonner\").then(({ toast }) => toast.error(message));\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. Browse is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    browseRef.current?.focus();\n    status.announce(message);\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n  return (\n    <>\n      {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n          the remove buttons) inside it: nested interactive controls, which ARIA forbids\n          because a button's children are presentational — a screen reader either read\n          the zone as one opaque button or skipped the inner ones, and the zone was an\n          extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n          real button; the zone keeps its drop target and its click-anywhere for a\n          pointer, which is a convenience on top of Browse rather than the only way in. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n      <div\n        // `...rest` first: every handler below is the drop gesture itself.\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          acceptFiles(e.dataTransfer.files);\n        }}\n        // Pointer only; every control inside stops its own click from reaching here. The\n        // keyboard equivalent is the Browse button, so no key handler belongs on a group.\n        onClick={() => fileInputRef.current?.click()}\n        role=\"group\"\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        // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\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\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          dragOver\n            ? \"border-[var(--border-strong)] bg-[var(--bg-active)]\"\n            : showError\n              ? \"border-[var(--danger-border)]\"\n              : \"border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n        {multiple && chosen.length > 0 ? (\n          <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n            {chosen.map((f, i) => (\n              <li\n                // Name + size + position: two files may share a name, and the index\n                // alone would re-key every row below a removal.\n                key={`${f.name}-${f.size}-${i}`}\n                className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n              >\n                <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                {onRemove && (\n                  <IconButton\n                    type=\"button\"\n                    size=\"sm\"\n                    aria-label={labels.remove(f.name)}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onRemove(f, i);\n                      afterRemoval(labels.removed(f.name));\n                    }}\n                  >\n                    <X aria-hidden />\n                  </IconButton>\n                )}\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <>\n            <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n              {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n                  whatever a stray `file` prop says — it used to show that file's name. */}\n              {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n              {!multiple && file && onClear && (\n                <IconButton\n                  type=\"button\"\n                  size=\"sm\"\n                  aria-label={labels.remove(file.name)}\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onClear();\n                    afterRemoval(labels.removed(file.name));\n                  }}\n                >\n                  <X aria-hidden />\n                </IconButton>\n              )}\n            </div>\n            <div className=\"text-xs text-[var(--text-muted)]\">\n              {file && !multiple ? fileText.size(file.size) : hint}\n            </div>\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            ref={browseRef}\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.stopPropagation();\n              fileInputRef.current?.click();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        <input\n          ref={fileInputRef}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone, where they have always been (the zone used to be a\n          `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n          need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  DEFAULT_FILE_PICKER_LABELS,\n  formatAccept,\n  judgePick,\n  screenFiles,\n  summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\n\n/**\n * Where a refused file's message goes.\n *\n *  - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n *    that handles nothing itself so no existing dropzone goes quiet on upgrade).\n *  - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n *    `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n *    region. Cleared by the next accepted pick.\n *  - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n *    Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n  /** A file drag is over the zone right now. */\n  dragOver: boolean;\n  disabled: boolean;\n  busy: boolean;\n  /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n  files: readonly File[];\n  /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n  error: string | null;\n  /** Open the system picker — for a body that brings its own trigger (a second\n   *  \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n  open: () => void;\n  /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n  labels: FilePickerLabels;\n}\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=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n  /** Single mode: the chosen file, echoed with its size. */\n  file?: File | null;\n  /** Single mode: called with the accepted file. */\n  onFileSelected?: (file: File) => void;\n  /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n  multiple?: boolean;\n  /** Multiple mode: the chosen files, listed in the zone. */\n  files?: readonly File[];\n  /** Every accepted file of one pick, in order. Never called with an empty array. */\n  onFilesSelected?: (files: File[]) => void;\n  /**\n   * Show a remove button inside the zone once something is chosen (kastlan asked for\n   * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n   * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n   * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n   */\n  onClear?: () => void;\n  /** Multiple mode: a remove button per listed file. */\n  onRemove?: (file: File, index: number) => void;\n  accept: string;\n  /**\n   * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n   * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n   * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n   * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n   */\n  isValid?: (file: File) => boolean;\n  /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n  invalidMessage?: string;\n  /** Bytes; larger files are refused. */\n  maxSize?: number;\n  /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n  maxFiles?: number;\n  /**\n   * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n   * carries the reason and the translated message as well.\n   *\n   * Its existence used to be what switched the toast off, and it still does (see\n   * {@link rejectionFeedback}). The toast is a dynamic `import(\"sonner\")` on the\n   * failure path only: `sonner` is an OPTIONAL peer, and a static import here once\n   * broke `import { Button }` for every app without it (see\n   * `optional-peer-imports.test.tsx`).\n   */\n  onInvalid?: (file: File) => void;\n  /** Every refused file of one pick, with its reason and message. */\n  onReject?: (rejections: FileRejection[]) => void;\n  /** The whole pick at once, before any of the above — return `false` to refuse all\n   *  of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n   *  message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n  onPick?: FilePickHandler;\n  /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n   *  `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n  rejectionFeedback?: FileDropzoneRejectionFeedback;\n  /** Per-instance overrides of the `filePicker` label namespace. */\n  labels?: Partial<FilePickerLabels>;\n  /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n   *  the root element below. Optional since 0.8, like the three below: each falls back\n   *  to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n   *  were required, so every call site passed four strings through `t()` by hand, and a\n   *  zone nested in a kit component (the feedback form) had no call site to pass them. */\n  dropLabel?: string;\n  /** Default `filePicker.browse`. */\n  browseLabel?: string;\n  /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n   *  `emptyMultiple`. */\n  emptyLabel?: string;\n  /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n  hint?: string;\n  /**\n   * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n   * group. keksdose locks its invoice zone while another form holds unsaved changes,\n   * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n   */\n  disabled?: boolean;\n  /**\n   * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n   * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n   * text. The other half of why keksdose's invoice zone was hand-rolled.\n   */\n  busy?: boolean;\n  /**\n   * Replace the zone's body — the icon, the text and the chosen-file list — with your\n   * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n   * hint (\"several photos are possible\"), a second trigger for the camera.\n   *\n   * The Browse button, the inline error and the live regions stay: Browse is the\n   * keyboard path, and a body that forgot it would leave the zone unreachable without\n   * a pointer. A click on a control inside the body does not also open the picker.\n   */\n  renderBody?: (state: FileDropzoneState) => ReactNode;\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) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  multiple,\n  files,\n  onFilesSelected,\n  onClear,\n  onRemove,\n  accept,\n  isValid,\n  invalidMessage,\n  maxSize,\n  maxFiles,\n  onInvalid,\n  onReject,\n  onPick,\n  rejectionFeedback,\n  labels: labelsProp,\n  dropLabel: dropLabelProp,\n  browseLabel: browseLabelProp,\n  emptyLabel: emptyLabelProp,\n  hint: hintProp,\n  disabled,\n  busy,\n  renderBody,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": describedByProp,\n  ...rest\n}: FileDropzoneProps) {\n  const [error, setError] = useState<string | null>(null);\n  const inert = Boolean(disabled || busy);\n  // State rather than a ref: `open` is handed to `renderBody` during render, and a\n  // function that reads a ref there is exactly what the refs rule cannot prove safe.\n  const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n  const browseRef = useRef<HTMLButtonElement>(null);\n  const errorId = useId();\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  const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n  // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n  // The echoed file name is only text in the zone, and text changing somewhere on the\n  // page is not announced by itself.\n  const status = useAnnounce();\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const feedback: FileDropzoneRejectionFeedback =\n    rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n  const dropLabel = dropLabelProp ?? labels.dropzone;\n  const browseLabel = browseLabelProp ?? labels.browse;\n  const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n  const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n  const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n    if (inert || !list || list.length === 0) return;\n    const all = Array.from(list);\n    const picked = multiple ? all : all.slice(0, 1);\n    const { accepted, rejected } = screenFiles(\n      picked,\n      {\n        accept: isValid ? undefined : accept,\n        maxSize,\n        maxFiles: multiple ? maxFiles : undefined,\n        isValid,\n        invalidMessage,\n      },\n      labels,\n      fileText.size,\n    );\n    const stands = judgePick(onPick, accepted, rejected);\n    if (stands && accepted.length > 0) {\n      setError(null);\n      if (multiple) {\n        onFilesSelected?.(accepted);\n      } else {\n        onFileSelected?.(accepted[0]);\n        onFilesSelected?.(accepted);\n      }\n      status.announce(labels.selected(accepted.length, accepted[0].name));\n    }\n    if (!stands || rejected.length > 0) {\n      for (const r of rejected) onInvalid?.(r.file);\n      if (rejected.length > 0) onReject?.(rejected);\n      const message = stands\n        ? summariseRejections(rejected, labels)\n        : labels.rejectedPick(picked.length);\n      if (feedback === \"toast\") {\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. sonner's own toaster is a live region, so this\n        // path does not announce a second time.\n        void import(\"sonner\").then(({ toast }) => toast.error(message));\n      } else {\n        if (feedback === \"inline\") setError(message);\n        alert.announce(message);\n      }\n    }\n  };\n\n  // The remove buttons unmount with the file they removed, and focus would fall to\n  // <body>. Browse is where the next action (pick again) starts.\n  const afterRemoval = (message: string) => {\n    browseRef.current?.focus();\n    status.announce(message);\n  };\n\n  // The enter/leave counter lives in the shared hook: the boolean this was flickered\n  // across every child of the zone in Safari, whose drag events carry no\n  // `relatedTarget` to tell a move onto a child from a real leave.\n  const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n    disabled: inert,\n    onDropFiles: acceptFiles,\n  });\n  const open = () => {\n    if (!inert) fileInput?.click();\n  };\n\n  const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n  const showError = feedback === \"inline\" && error !== null;\n  const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n  return (\n    <>\n      {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n          the remove buttons) inside it: nested interactive controls, which ARIA forbids\n          because a button's children are presentational — a screen reader either read\n          the zone as one opaque button or skipped the inner ones, and the zone was an\n          extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n          real button; the zone keeps its drop target and its click-anywhere for a\n          pointer, which is a convenience on top of Browse rather than the only way in. */}\n      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n      <div\n        // `...rest` first: every handler below is the drop gesture itself.\n        {...rest}\n        {...dropProps}\n        // Pointer only; every control inside stops its own click from reaching here\n        // (and one in a custom body is skipped below). The keyboard equivalent is the\n        // Browse button, so no key handler belongs on a group.\n        onClick={(e) => {\n          if (fromControl(e)) return;\n          open();\n        }}\n        role=\"group\"\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        // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n        // reached through the description instead, and spoken when it appears.\n        aria-describedby={describedBy}\n        data-invalid={showError || undefined}\n        aria-disabled={disabled || undefined}\n        aria-busy={busy || undefined}\n        data-drag-over={dragOver || undefined}\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 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\". A refusal shown inline takes the\n          // danger border until the next good pick.\n          // Inert zones keep the resting hairline and lose the hover pull: a border that\n          // answers the pointer promises a drop the zone will refuse.\n          disabled\n            ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n            : busy\n              ? \"cursor-progress border-[var(--border)]\"\n              : dragOver\n                ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n                : showError\n                  ? \"cursor-pointer border-[var(--danger-border)]\"\n                  : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n          className,\n        )}\n      >\n        {renderBody ? (\n          renderBody({\n            dragOver,\n            disabled: Boolean(disabled),\n            busy: Boolean(busy),\n            files: chosen,\n            error: showError ? error : null,\n            open,\n            labels,\n          })\n        ) : busy ? (\n          <>\n            {/* `label={null}`: the zone is `aria-busy` and the line below says the\n                same in words; a spoken \"Loading\" would only run into it. */}\n            <Spinner label={null} className=\"size-5\" />\n            <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n          </>\n        ) : (\n          <>\n            <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n            {multiple && chosen.length > 0 ? (\n              <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n                {chosen.map((f, i) => (\n                  <li\n                    // Name + size + position: two files may share a name, and the index\n                    // alone would re-key every row below a removal.\n                    key={`${f.name}-${f.size}-${i}`}\n                    className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n                  >\n                    <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n                    <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n                    {onRemove && (\n                      <IconButton\n                        type=\"button\"\n                        size=\"sm\"\n                        disabled={inert}\n                        aria-label={labels.remove(f.name)}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          onRemove(f, i);\n                          afterRemoval(labels.removed(f.name));\n                        }}\n                      >\n                        <X aria-hidden />\n                      </IconButton>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            ) : (\n              <>\n                <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n                  {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n                      whatever a stray `file` prop says — it used to show that file's name. */}\n                  {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n                  {!multiple && file && onClear && (\n                    <IconButton\n                      type=\"button\"\n                      size=\"sm\"\n                      disabled={inert}\n                      aria-label={labels.remove(file.name)}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onClear();\n                        afterRemoval(labels.removed(file.name));\n                      }}\n                    >\n                      <X aria-hidden />\n                    </IconButton>\n                  )}\n                </div>\n                <div className=\"text-xs text-[var(--text-muted)]\">\n                  {file && !multiple ? fileText.size(file.size) : hint}\n                </div>\n              </>\n            )}\n          </>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-2\">\n          <Button\n            ref={browseRef}\n            type=\"button\"\n            variant=\"secondary\"\n            disabled={inert}\n            onClick={(e) => {\n              e.stopPropagation();\n              open();\n            }}\n          >\n            {browseLabel}\n          </Button>\n          {multiple && chosen.length > 0 && onClear && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              disabled={inert}\n              onClick={(e) => {\n                e.stopPropagation();\n                onClear();\n                afterRemoval(labels.cleared);\n              }}\n            >\n              {labels.clearAll}\n            </Button>\n          )}\n        </div>\n        {showError && (\n          <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n            {error}\n          </p>\n        )}\n        <input\n          ref={setFileInput}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={inert}\n          onChange={(e) => {\n            // Copy, THEN reset: `files` is a live view of the value, and without the\n            // reset picking the same file a second time fires no `change` at all —\n            // the retry after a failed upload silently did nothing (kastlan).\n            const picked = Array.from(e.currentTarget.files ?? []);\n            e.currentTarget.value = \"\";\n            acceptFiles(picked);\n          }}\n          // Clicks are forwarded here programmatically; one reaching the zone's own\n          // handler again would open the dialog a second time.\n          onClick={(e) => e.stopPropagation()}\n          className=\"sr-only\"\n        />\n      </div>\n      {/* Outside the zone, where they have always been (the zone used to be a\n          `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n          need no positioned ancestor. */}\n      <span {...status.regionProps} />\n      <span {...alert.regionProps} />\n    </>\n  );\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n *  link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n  const target = e.target as Element | null;\n  const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n  return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}

package/dist/components/floating-panel.d.ts

@@ -0,0 +1,107 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+
+interface FloatingPanelLabels {
+    /** Accessible name of the panel header's X. */
+    close: string;
+}
+declare const DEFAULT_FLOATING_PANEL_LABELS: FloatingPanelLabels;
+/** A LOGICAL corner: `bottom-end` is bottom-right in LTR and bottom-left in RTL. */
+type FloatingCorner = "bottom-end" | "bottom-start";
+interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The accessible name — the button shows only its icon. */
+    label: string;
+    icon: ReactNode;
+    /** Default `bottom-end`. */
+    corner?: FloatingCorner;
+    /**
+     * Distance above the nav / home indicator, as a CSS length. Default `1rem`. Raise it
+     * to stack above another floating control in the same corner — keksdose's assistant
+     * clears the transactions page's own action group this way (`calc(1rem + 4rem)`).
+     */
+    offset?: string;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * A round, icon-only button pinned to a corner of the viewport — the trigger of a
+ * {@link FloatingPanel}, and usable alone for a page's one primary action.
+ *
+ * keksdose hand-placed each of its floating controls: the assistant launcher at
+ * `fixed bottom-36 right-4 md:bottom-6`, the feedback page's and the transactions
+ * page's action groups at `right-4 bottom-20`. Every one of those numbers is a guess
+ * at the phone nav's height plus whatever else floats there (Keksdose live #314 found
+ * out what such a guess is worth for a footer), `right` rather than `end` puts it over
+ * the page's leading edge in RTL, and none allows for the home indicator. Here the
+ * base is `--app-nav-h` and the safe-area inset, the corner is logical, and
+ * {@link FloatingActionButtonProps.offset} is the one number left to the caller — the
+ * height of whatever else it has to clear, not the nav's.
+ *
+ * Portalled, because `position: fixed` inside any transformed ancestor (an animated
+ * page transition) is fixed to that ancestor, not to the screen.
+ */
+declare function FloatingActionButton({ label, icon, corner, offset, className, style, type, ...rest }: FloatingActionButtonProps): react.JSX.Element;
+interface FloatingPanelProps {
+    /** The panel's heading, and its accessible name. */
+    title: ReactNode;
+    /** The trigger's accessible name ("Assistant", "Send feedback"). */
+    fabLabel: string;
+    fabIcon: ReactNode;
+    /** Controlled open state. Leave it out to let the panel own it. */
+    open?: boolean;
+    /** Uncontrolled initial state. Default closed. */
+    defaultOpen?: boolean;
+    /** Every request to open or close — the FAB, the X, Escape. */
+    onOpenChange?: (open: boolean) => void;
+    /** Default `bottom-end`. */
+    corner?: FloatingCorner;
+    /** The FAB's distance above the nav — see {@link FloatingActionButtonProps.offset}.
+     *  From `md` up the card sits above the FAB, so it moves with it. */
+    offset?: string;
+    /** Default: `floatingPanel.close` from the {@link UiKitProvider}, else "Close". */
+    closeLabel?: string;
+    /**
+     * Where focus goes on open. Default the panel itself, so a phone's keyboard does not
+     * rise over the sheet before the user has asked to type; pass the chat field for a
+     * panel whose one job is typing.
+     */
+    initialFocus?: () => HTMLElement | null;
+    /** Extra classes for the panel. */
+    className?: string;
+    /** Extra classes for the scrolling body. */
+    bodyClassName?: string;
+    children: ReactNode;
+}
+/**
+ * A docked, NON-MODAL panel in a corner of the screen, opened by a
+ * {@link FloatingActionButton} — keksdose's assistant launcher and its feedback page,
+ * which each built one.
+ *
+ * ## Not a Modal
+ *
+ * The page stays usable while it is open: that is the point of an assistant beside the
+ * data it is asked about. So there is no backdrop, no scroll lock, no `aria-modal` and
+ * no focus trap — Tab walks out of the panel into the page and back, and a click on the
+ * page does not close it. It is `role="dialog"` without `aria-modal`, which is what
+ * ARIA calls a non-modal dialog, named by its heading.
+ *
+ * What it keeps from a dialog is the focus HANDOFF: opening moves focus into it (a
+ * keyboard user who pressed the FAB should not have to hunt for what appeared), and
+ * closing gives it back to the FAB — but only when focus was in the panel, so a panel
+ * closed from the page (a controlled owner) never pulls focus out of the field the
+ * user is typing in. Escape closes it while focus is inside, and only then: on the
+ * panel element, not the document, so Escape in the page keeps meaning whatever the
+ * page means by it.
+ *
+ * ## Layout
+ *
+ * From `md` up, a card above the FAB in its corner. Below `md`, a full-width sheet
+ * docked to the bottom, sitting ON the `AppShell` bottom nav (`--app-nav-h`) and
+ * clear of the home indicator. Pure CSS — no width is measured in JavaScript.
+ *
+ * The FAB carries `aria-expanded` and, while the panel exists, `aria-controls`. The
+ * panel unmounts when closed; an app that must keep a draft across a close keeps it in
+ * its own state, where it also survives a reload.
+ */
+declare function FloatingPanel({ title, fabLabel, fabIcon, open: openProp, defaultOpen, onOpenChange, corner, offset, closeLabel, initialFocus, className, bodyClassName, children, }: FloatingPanelProps): react.JSX.Element;
+
+export { DEFAULT_FLOATING_PANEL_LABELS, FloatingActionButton, type FloatingActionButtonProps, type FloatingCorner, FloatingPanel, type FloatingPanelLabels, type FloatingPanelProps };