@eifi1/ui-kit 0.21.0 → 0.22.0

package/dist/components/use-table-state.d.ts

@@ -1,5 +1,4 @@
 import 'react';
 import './data-table-sort.js';
-export { z as DEFAULT_PERSIST_PREFIX, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, r as readTableUrlState, A as useTableState, w as useTableUrlState } from '../data-table-3mi2R3so.js';
+export { I as DEFAULT_PERSIST_PREFIX, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, w as readTableUrlState, J as useTableState, E as useTableUrlState } from '../data-table-labels-B7OdnM0S.js';
 import './swipeable-row.js';
-import './data-table-labels.js';

package/dist/{data-table-3mi2R3so.d.ts → data-table-labels-B7OdnM0S.d.ts}

@@ -2,7 +2,6 @@ import * as react from 'react';
 import { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { SortState, SortDir, SortCycle } from './components/data-table-sort.js';
 import { SwipeAction } from './components/swipeable-row.js';
-import { DataTableLabels } from './components/data-table-labels.js';
 
 /** How a column is filtered. `text`/`select`/`date`/`number` each read a value
  *  off the row and compare it against the user's {@link FilterValue}. */
@@ -280,6 +279,14 @@ interface DataTableColumn<T> {
      * Default `"asc"`.
      */
     firstSort?: SortDir;
+    /**
+     * The column's name as plain text, for the places a ReactNode `header` cannot go:
+     * the phone sort control's options ({@link DataTableProps.mobileSort}), the spoken
+     * "Sorted by …" and the column-settings checklist. Only needed when `header` is not
+     * a string (an icon, a unit suffix); without it those places fall back to the
+     * header string, then to `key`.
+     */
+    headerText?: string;
     /**
      * Extra attributes for this column's `<td>` in a given row — a `data-*` hook, a
      * `title`, an `aria-describedby`, a class. keksdose's accounts page
@@ -537,6 +544,18 @@ interface DataTableProps<T> {
      * wastes space (feedback #317). Desktop is unaffected.
      */
     mobileCard?: (row: T) => ReactNode;
+    /**
+     * A "Sort by" select and a direction button above the phone card list (keksdose
+     * K10). The card list has no header row, so without it a phone user is stuck with
+     * whatever order the table opened in. It drives the same sort state as the column
+     * headers — `sorts`/`onSortsChange` when controlled, the URL and `storageKey` when
+     * not — and offers the columns a header click could sort (those with a `sortBy`).
+     * Each option is named by the column's `headerText`, else its string `header`.
+     *
+     * Off by default, so no existing phone layout gains a row. Strings:
+     * {@link DataTableSortLabels}. Phones only; the desktop table is unchanged.
+     */
+    mobileSort?: boolean;
     /**
      * Swipe actions for a mobile row, revealed by dragging it horizontally. Return
      * `null` (or empty sides) for rows that should not move — a locked row, one whose
@@ -714,7 +733,125 @@ interface MobileSwipeActions {
     /** Committed by dragging physically RIGHT, whatever the direction. */
     right?: SwipeAction[];
 }
+/**
+ * The phone sort control's strings (keksdose K10). They are `dataTable` strings —
+ * read from the table's resolved labels, so the `labels` prop and the provider's
+ * `dataTable` namespace reach them — and are declared here, beside the control, with
+ * English defaults until `DataTableLabels` declares them itself.
+ */
+interface DataTableSortLabels {
+    /** The control's visible label: "Sort by". */
+    sortBy: string;
+    /** The "no sort" option — the rows in the order they were given: "Default order". */
+    sortDefault: string;
+    /** The direction button's name while the sort ascends: "Ascending". */
+    sortAscending: string;
+    /** …and while it descends: "Descending". */
+    sortDescending: string;
+}
+/** The phone sort control's words, as they sit in {@link DEFAULT_DATA_TABLE_LABELS}
+ *  (DataTableLabels extends DataTableSortLabels; one source for the English). */
+declare const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels;
 
-declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): react.JSX.Element;
+declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): react.JSX.Element;
+
+/** The phone sort control's four keys (`sortBy`, `sortDefault`, `sortAscending`,
+ *  `sortDescending`, 0.22.0) are {@link DataTableSortLabels}', declared beside the
+ *  control and part of this namespace like every other key. */
+interface DataTableLabels extends DataTableSortLabels {
+    columns: string;
+    selectAllRows: string;
+    sortHint: string;
+    filter: string;
+    close: string;
+    selectRow: string;
+    autoSize: string;
+    loading: string;
+    filters: string;
+    clearAll: string;
+    done: string;
+    pageSize: string;
+    pageSizeAll: string;
+    prevPage: string;
+    nextPage: string;
+    clearFilter: string;
+    filterPlaceholder: string;
+    selectFilter: string;
+    selectAll: string;
+    selectNone: string;
+    dateFrom: string;
+    dateTo: string;
+    numberMin: string;
+    numberMax: string;
+    numberAbs: string;
+    presets: Record<string, string>;
+    /**
+     * The table's own accessible name. Deliberately a label rather than a second,
+     * parallel `tableLabel` prop: the audit already records "three different prop
+     * names for the accessible name" as a finding, and a table that is not "Data
+     * table" says so with `labels={{ table: "Transactions" }}` at the call site.
+     */
+    table: string;
+    /** After a filter changes: "12 of 137 rows". */
+    filterResults: (shown: number, total: number) => string;
+    /** After a header is activated: "Sorted by Name, ascending". */
+    sortedAscending: (column: string) => string;
+    sortedDescending: (column: string) => string;
+    /** The third click, which removes the column from the sort entirely. */
+    sortCleared: (column: string) => string;
+    /** After paging: "Page 3 of 14". `page` is 1-BASED, as spoken. */
+    pageChanged: (page: number, totalPages: number) => string;
+    /** The pagination range summary: "1–25 / 137". */
+    pageRange: (from: number, to: number, total: number) => string;
+    /** The same summary when the page size is "all" — just the row count. */
+    rowCount: (total: number) => string;
+    /** The column-settings rail and its heading: "Columns (4/9)". */
+    columnsCount: (visible: number, total: number) => string;
+    /** The body of a table with no rows and no `empty` prop of its own. A sentence, not
+     *  "—": a dash in the only row of a table reads as one row with a missing value. */
+    empty: string;
+    /** The accessible name of the `rowActions` column (its header is visually empty). */
+    actions: string;
+    /** The `kind: "edit"` row action's name — its tooltip and its swipe label. */
+    edit: string;
+    /** The `kind: "delete"` row action's name. */
+    delete: string;
+    /** What {@link BooleanMark} says to a screen reader for `true` / `false` / nothing. */
+    booleanTrue: string;
+    booleanFalse: string;
+    booleanUnset: string;
+}
+declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
+/**
+ * Merge caller overrides onto the English defaults (presets merged too).
+ *
+ * The parameter is `Partial` on purpose — a table with no labels at all still
+ * renders — but that is also how a translated app ends up half English and never
+ * hears about it: lenkbank ships nineteen of these keys in English in a German UI
+ * today, because every one of them is backfilled silently. The kit will not start
+ * throwing over it (three apps depend on the lenient merge), so
+ * {@link missingDataTableLabels} is the other half: it answers which keys fell back,
+ * and an app asserts on that in its OWN test, where the answer is actionable.
+ */
+declare function resolveDataTableLabels(partial?: Partial<DataTableLabels>): DataTableLabels;
+/**
+ * The label keys `labels` does not supply, and which therefore come back English
+ * from {@link resolveDataTableLabels}.
+ *
+ * For a consumer's own test:
+ *
+ * ```ts
+ * expect(missingDataTableLabels(de.dataTable)).toEqual([]);
+ * ```
+ *
+ * which fails the day the kit adds a key — which is the point. Adding a label is
+ * additive here and a silent regression in a translated app, and nothing else in
+ * either repository can tell the two apart.
+ *
+ * Preset labels are reported one at a time (`presets.yesterday`), because `presets`
+ * is a `Record` merged key by key: answering `"presets"` would say nothing about
+ * which of the eleven are still English.
+ */
+declare function missingDataTableLabels(labels?: Partial<DataTableLabels>): string[];
 
-export { useTableState as A, type ColumnFilter as C, DataTable as D, type FilterState as F, type MobileSwipeActions as M, type ServerPagination as S, type TableUrlState as T, type UseTableUrlStateOptions as U, type DataTableChrome as a, type DataTableColumn as b, type DataTableDensity as c, type DataTableProps as d, type DataTableRowAction as e, type FilterValue as f, type TableUrlStateProps as g, type TableUrlSync as h, type UseTableUrlStateReturn as i, dateFilter as j, decodeFilterValue as k, decodeFilterValueOfType as l, defaultFilterState as m, encodeFilterValue as n, filterHref as o, isFilterActive as p, numberFilter as q, readTableUrlState as r, resolveFilter as s, rowMatches as t, selectFilter as u, textFilter as v, useTableUrlState as w, type DataTableCellProps as x, type DataTableHeadProps as y, DEFAULT_PERSIST_PREFIX as z };
+export { selectFilter as A, textFilter as B, type ColumnFilter as C, DEFAULT_DATA_TABLE_LABELS as D, useTableUrlState as E, type FilterState as F, type DataTableCellProps as G, type DataTableHeadProps as H, DEFAULT_PERSIST_PREFIX as I, useTableState as J, type MobileSwipeActions as M, type ServerPagination as S, type TableUrlState as T, type UseTableUrlStateOptions as U, DEFAULT_DATA_TABLE_SORT_LABELS as a, DataTable as b, type DataTableChrome as c, type DataTableColumn as d, type DataTableDensity as e, type DataTableLabels as f, type DataTableProps as g, type DataTableRowAction as h, type DataTableSortLabels as i, type FilterValue as j, type TableUrlStateProps as k, type TableUrlSync as l, type UseTableUrlStateReturn as m, dateFilter as n, decodeFilterValue as o, decodeFilterValueOfType as p, defaultFilterState as q, encodeFilterValue as r, filterHref as s, isFilterActive as t, missingDataTableLabels as u, numberFilter as v, readTableUrlState as w, resolveDataTableLabels as x, resolveFilter as y, rowMatches as z };

package/dist/data-table.d.ts

@@ -1,6 +1,5 @@
-export { DEFAULT_DATA_TABLE_LABELS, DataTableLabels, missingDataTableLabels, resolveDataTableLabels } from './components/data-table-labels.js';
+export { C as ColumnFilter, D as DEFAULT_DATA_TABLE_LABELS, a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, f as DataTableLabels, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, j as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, n as dateFilter, o as decodeFilterValue, p as decodeFilterValueOfType, q as defaultFilterState, r as encodeFilterValue, s as filterHref, t as isFilterActive, u as missingDataTableLabels, v as numberFilter, w as readTableUrlState, x as resolveDataTableLabels, y as resolveFilter, z as rowMatches, A as selectFilter, B as textFilter, E as useTableUrlState } from './data-table-labels-B7OdnM0S.js';
 export { SortCycle, SortDir, SortState, SortStepOptions, decodeSorts, encodeSorts, nextSorts, normalizeSorts } from './components/data-table-sort.js';
-export { C as ColumnFilter, D as DataTable, a as DataTableChrome, b as DataTableColumn, c as DataTableDensity, d as DataTableProps, e as DataTableRowAction, F as FilterState, f as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, g as TableUrlStateProps, h as TableUrlSync, U as UseTableUrlStateOptions, i as UseTableUrlStateReturn, j as dateFilter, k as decodeFilterValue, l as decodeFilterValueOfType, m as defaultFilterState, n as encodeFilterValue, o as filterHref, p as isFilterActive, q as numberFilter, r as readTableUrlState, s as resolveFilter, t as rowMatches, u as selectFilter, v as textFilter, w as useTableUrlState } from './data-table-3mi2R3so.js';
 export { PAGE_SIZE_OPTIONS, Pagination } from './components/data-table-pagination.js';
 export { FilterPopover } from './components/data-table-filter-popover.js';
 export { BooleanColumnOptions, BooleanMark, BooleanMarkProps, booleanColumn } from './components/data-table-cells.js';

package/dist/data-table.js

@@ -4,10 +4,11 @@ export * from "./components/data-table-sort.js";
 export * from "./components/data-table-filters.js";
 export * from "./components/data-table-pagination.js";
 import { FilterPopover } from "./components/data-table-filter-popover.js";
-import { DataTable } from "./components/data-table.js";
+import { DataTable, DEFAULT_DATA_TABLE_SORT_LABELS } from "./components/data-table.js";
 export * from "./components/data-table-cells.js";
 import { useTableUrlState, readTableUrlState } from "./components/use-table-state.js";
 export {
+  DEFAULT_DATA_TABLE_SORT_LABELS,
   DataTable,
   FilterPopover,
   readTableUrlState,

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/data-table.ts"],"sourcesContent":["// `@eifi1/ui-kit/data-table` — the table suite.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: DataTable calls useSearchParams unconditionally, above any `urlSync`\n// branch, so a Router is needed even with URL sync switched off.\nexport * from \"./components/data-table-labels\";\nexport * from \"./components/data-table-sort\";\nexport * from \"./components/data-table-filters\";\nexport * from \"./components/data-table-pagination\";\nexport { FilterPopover } from \"./components/data-table-filter-popover\";\n// `SortState` comes from data-table-sort above; re-exporting the module wholesale\n// would collide with it, which is why the main barrel names these explicitly too.\nexport { DataTable } from \"./components/data-table\";\nexport type {\n  DataTableColumn,\n  DataTableProps,\n  ServerPagination,\n  FilterState,\n  MobileSwipeActions,\n  DataTableDensity,\n  DataTableChrome,\n  DataTableRowAction,\n} from \"./components/data-table\";\nexport * from \"./components/data-table-cells\";\nexport { useTableUrlState, readTableUrlState } from \"./components/use-table-state\";\nexport type {\n  TableUrlState,\n  TableUrlSync,\n  TableUrlStateProps,\n  UseTableUrlStateOptions,\n  UseTableUrlStateReturn,\n} from \"./components/use-table-state\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,qBAAqB;AAG9B,SAAS,iBAAiB;AAW1B,cAAc;AACd,SAAS,kBAAkB,yBAAyB;","names":[]}
+{"version":3,"sources":["../src/data-table.ts"],"sourcesContent":["// `@eifi1/ui-kit/data-table` — the table suite.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: DataTable calls useSearchParams unconditionally, above any `urlSync`\n// branch, so a Router is needed even with URL sync switched off.\nexport * from \"./components/data-table-labels\";\nexport * from \"./components/data-table-sort\";\nexport * from \"./components/data-table-filters\";\nexport * from \"./components/data-table-pagination\";\nexport { FilterPopover } from \"./components/data-table-filter-popover\";\n// `SortState` comes from data-table-sort above; re-exporting the module wholesale\n// would collide with it, which is why the main barrel names these explicitly too.\nexport { DataTable, DEFAULT_DATA_TABLE_SORT_LABELS } from \"./components/data-table\";\nexport type {\n  DataTableSortLabels,\n  DataTableColumn,\n  DataTableProps,\n  ServerPagination,\n  FilterState,\n  MobileSwipeActions,\n  DataTableDensity,\n  DataTableChrome,\n  DataTableRowAction,\n} from \"./components/data-table\";\nexport * from \"./components/data-table-cells\";\nexport { useTableUrlState, readTableUrlState } from \"./components/use-table-state\";\nexport type {\n  TableUrlState,\n  TableUrlSync,\n  TableUrlStateProps,\n  UseTableUrlStateOptions,\n  UseTableUrlStateReturn,\n} from \"./components/use-table-state\";\n"],"mappings":";AAKA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,qBAAqB;AAG9B,SAAS,WAAW,sCAAsC;AAY1D,cAAc;AACd,SAAS,kBAAkB,yBAAyB;","names":[]}

package/dist/feedback/feedback-attachment.d.ts

@@ -1,2 +1,2 @@
 import 'react';
-export { D as DEFAULT_ATTACHMENT_ACCEPT, a as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, c as DEFAULT_MAX_ATTACHMENTS, d as DEFAULT_MAX_ATTACHMENT_BYTES, F as FeedbackAttachmentError, e as FeedbackAttachmentField, f as FeedbackAttachmentFieldLabels, g as FeedbackAttachmentFieldMultipleProps, h as FeedbackAttachmentFieldProps, i as FeedbackAttachmentFieldSingleProps, t as pastedName } from '../feedback-attachment-WFiXJ8We.js';
+export { D as DEFAULT_ATTACHMENT_ACCEPT, a as DEFAULT_FEEDBACK_ATTACHMENT_LABELS, c as DEFAULT_MAX_ATTACHMENTS, d as DEFAULT_MAX_ATTACHMENT_BYTES, F as FeedbackAttachmentError, e as FeedbackAttachmentField, f as FeedbackAttachmentFieldLabels, g as FeedbackAttachmentFieldMultipleProps, h as FeedbackAttachmentFieldProps, i as FeedbackAttachmentFieldRefsProps, j as FeedbackAttachmentFieldSingleProps, l as FeedbackAttachmentRef, m as FeedbackAttachmentRefsError, w as pastedName } from '../feedback-attachment-NhUm7Zga.js';

package/dist/feedback/feedback-attachment.js

@@ -2,8 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { Camera, FileText, Paperclip, X } from "lucide-react";
-import { Button } from "../components/ui.js";
+import { Camera, FileText, Image as ImageIcon, Paperclip, X } from "lucide-react";
+import { Button, Spinner } from "../components/ui.js";
 import { useKitFileLabels, useKitLabels } from "../i18n/kit-labels.js";
 const DEFAULT_ATTACHMENT_ACCEPT = ["image/png", "image/jpeg", "image/webp", "image/gif"];
 const DEFAULT_MAX_ATTACHMENT_BYTES = 10 * 1024 * 1024;
@@ -16,9 +16,11 @@ const DEFAULT_FEEDBACK_ATTACHMENT_LABELS = {
   attachmentList: "Attachments",
   attachmentScreenshot: "Screenshot",
   attachmentRemoveFile: (name) => `Remove ${name}`,
-  attachmentLimit: (max) => `Up to ${max} ${max === 1 ? "attachment" : "attachments"} \u2014 remove one to add another.`
+  attachmentLimit: (max) => `Up to ${max} ${max === 1 ? "attachment" : "attachments"} \u2014 remove one to add another.`,
+  attachmentUploading: "Uploading\u2026"
 };
 function FeedbackAttachmentField(props) {
+  if (props.refs) return /* @__PURE__ */ jsx(RefsField, { ...props });
   return props.multiple ? /* @__PURE__ */ jsx(MultipleField, { ...props }) : /* @__PURE__ */ jsx(SingleField, { ...props });
 }
 function SingleField({
@@ -283,6 +285,211 @@ function MultipleField({
     )
   ] });
 }
+let nextUploadId = 0;
+function RefsField({
+  value,
+  onChange,
+  onUpload,
+  onRemove,
+  onUploadingChange,
+  max = DEFAULT_MAX_ATTACHMENTS,
+  labels: labelsProp,
+  accept = DEFAULT_ATTACHMENT_ACCEPT,
+  maxBytes = DEFAULT_MAX_ATTACHMENT_BYTES,
+  onError,
+  onCaptureScreenshot,
+  documentPaste = false,
+  pasteFrom,
+  className
+}) {
+  const rootRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const fileText = useKitFileLabels();
+  const text = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
+  const removeLabel = text.attachmentRemoveFile ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentRemoveFile;
+  const limitLabel = text.attachmentLimit ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentLimit;
+  const uploadingLabel = text.attachmentUploading ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentUploading;
+  const latest = useRef(value);
+  useLayoutEffect(() => {
+    latest.current = value;
+  });
+  const commit = (next) => {
+    latest.current = next;
+    onChange(next);
+  };
+  const [uploads, setUploads] = useState([]);
+  const inFlight = useRef([]);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const uploadingChange = useRef(onUploadingChange);
+  useEffect(() => {
+    uploadingChange.current = onUploadingChange;
+  });
+  const room = Math.max(0, max - value.length - uploads.length);
+  const start = (file) => {
+    const upload = { id: nextUploadId++, file };
+    inFlight.current = [...inFlight.current, upload];
+    if (inFlight.current.length === 1) uploadingChange.current?.(true);
+    setUploads(inFlight.current);
+    const settle = () => {
+      inFlight.current = inFlight.current.filter((u) => u.id !== upload.id);
+      if (!mounted.current) return;
+      setUploads(inFlight.current);
+      if (inFlight.current.length === 0) uploadingChange.current?.(false);
+    };
+    let answer;
+    try {
+      answer = Promise.resolve(onUpload(file));
+    } catch (error) {
+      answer = Promise.reject(error);
+    }
+    answer.then(
+      (ref) => {
+        settle();
+        if (mounted.current) commit([...latest.current, ref]);
+      },
+      (error) => {
+        settle();
+        if (mounted.current) onError?.("upload", error);
+      }
+    );
+  };
+  const add = (incoming, pasted = false) => {
+    let space = Math.max(0, max - latest.current.length - inFlight.current.length);
+    const taken = /* @__PURE__ */ new Set([...latest.current.map((r) => r.name), ...inFlight.current.map((u) => u.file.name)]);
+    let dropped = false;
+    for (const raw of incoming) {
+      const problem = rejection(raw, accept, maxBytes);
+      if (problem) {
+        onError?.(problem);
+        continue;
+      }
+      if (space === 0) {
+        dropped = true;
+        continue;
+      }
+      const file = pasted ? renamed(raw, uniqueName(pastedName(raw.type), taken)) : raw;
+      taken.add(file.name);
+      space -= 1;
+      start(file);
+    }
+    if (dropped) onError?.("count");
+  };
+  const onPaste = usePaste((images) => add(images, true), documentPaste, pasteFrom);
+  const pendingFocus = useRef(null);
+  useEffect(() => {
+    const index = pendingFocus.current;
+    if (index === null) return;
+    pendingFocus.current = null;
+    const root = rootRef.current;
+    if (!root) return;
+    const removes = root.querySelectorAll("[data-attachment-remove]");
+    const target = removes[index] ?? root.querySelector("[data-attachment-action]") ?? removes[index - 1];
+    target?.focus();
+  }, [value]);
+  const remove = (key, index) => {
+    pendingFocus.current = index;
+    commit(latest.current.filter((r) => r.key !== key));
+    onRemove?.(key);
+  };
+  const hasChips = value.length > 0 || uploads.length > 0;
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative space-y-2", className), onPaste, children: [
+    /* @__PURE__ */ jsx(Heading, { text: labelsProp?.attachment, className: "mb-0" }),
+    hasChips && /* @__PURE__ */ jsxs("ul", { "aria-label": text.attachmentList, className: "flex flex-col gap-2", children: [
+      value.map((ref, index) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex min-w-0 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] p-1",
+          children: [
+            /* @__PURE__ */ jsx(RefGlyph, { type: ref.type }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: ref.name }),
+              ref.size !== void 0 && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: fileText.size(ref.size) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-attachment-remove": "",
+                onClick: () => remove(ref.key, index),
+                "aria-label": removeLabel(ref.name),
+                className: "shrink-0 rounded p-1.5 text-[var(--text-placeholder)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            )
+          ]
+        },
+        `ref:${ref.key}`
+      )),
+      uploads.map((upload) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          "aria-busy": "true",
+          "data-attachment-uploading": "",
+          className: "flex min-w-0 items-center gap-2 rounded-md border border-dashed border-[var(--border)] bg-[var(--bg-surface)] p-1",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-[var(--text-secondary)]", children: upload.file.name }),
+              /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: uploadingLabel })
+            ] })
+          ]
+        },
+        `upload:${upload.id}`
+      ))
+    ] }),
+    room > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          "data-attachment-action": "",
+          onClick: () => fileInputRef.current?.click(),
+          children: [
+            /* @__PURE__ */ jsx(Paperclip, { className: "size-4" }),
+            " ",
+            text.attachmentAdd
+          ]
+        }
+      ),
+      onCaptureScreenshot && /* @__PURE__ */ jsx(
+        CaptureButton,
+        {
+          capture: onCaptureScreenshot,
+          onFile: (file) => add([file]),
+          label: text.attachmentCapture,
+          "data-attachment-action": ""
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-muted)]", children: room > 0 ? text.attachmentPaste : limitLabel(max) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: room > 1,
+        accept: accept.join(","),
+        className: "sr-only",
+        tabIndex: -1,
+        "aria-hidden": true,
+        onChange: (e) => {
+          add(Array.from(e.target.files ?? []));
+          e.target.value = "";
+        }
+      }
+    )
+  ] });
+}
+function RefGlyph({ type }) {
+  return /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center rounded border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-placeholder)]", children: type?.startsWith("image/") ? /* @__PURE__ */ jsx(ImageIcon, { "aria-hidden": true, className: "size-6" }) : /* @__PURE__ */ jsx(FileText, { "aria-hidden": true, className: "size-6" }) });
+}
 function Heading({ text, className }) {
   if (!text) return null;
   return /* @__PURE__ */ jsx("div", { className: cn("mb-1 text-xs font-medium uppercase tracking-wide text-[var(--text-muted)]", className), children: text });