@sincpro/web-ui 1.3.0 → 1.5.0

package/dist/primitives/button/Button.js

@@ -60,6 +60,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ==================================================================== */
 import { useSurface } from "../../foundations/surface.js";
 import { Tooltip, TooltipTrigger, useInTooltipTrigger, } from "../overlay/Tooltip.js";
+import { LoaderCircle } from "lucide-react";
 /** The height comes from `--size-control-*`; the padding and the type follow.
  *
  *      sm  a row, the header of a block
@@ -146,10 +147,19 @@ function popupAttrs(expanded, haspopup) {
         ...(expanded === undefined ? {} : { "aria-expanded": expanded }),
     };
 }
-export function Button({ children, role = "secondary", size = "md", surface: surfaceProp, icon: Icon, disabled = false, title, type = "button", expanded, haspopup, ref, ...native }) {
+export function Button({ children, role = "secondary", size = "md", surface: surfaceProp, icon: Icon, disabled = false, title, type = "button", expanded, haspopup, busy = false, ref, onClick, ...native }) {
     const surface = useSurface(surfaceProp);
     const ic = ICON[size];
-    return (_jsxs("button", { ...native, ref: ref, type: type, title: title, disabled: disabled, ...popupAttrs(expanded, haspopup), "data-emphasis": role, className: buttonClasses(role, size, surface), children: [Icon === undefined ? null : (_jsx(Icon, { className: `${ic.size} shrink-0`, strokeWidth: ic.stroke, "aria-hidden": true })), children] }));
+    const Mark = busy ? LoaderCircle : Icon;
+    return (_jsxs("button", { ...native, ref: ref, type: type, title: title, disabled: disabled, ...(busy ? { "aria-busy": true, "aria-disabled": true } : {}), onClick: (event) => {
+            if (busy) {
+                event.preventDefault();
+                return;
+            }
+            onClick?.(event);
+        }, ...popupAttrs(expanded, haspopup), "data-emphasis": role, className: busy
+            ? `${buttonClasses(role, size, surface)} cursor-progress`
+            : buttonClasses(role, size, surface), children: [Mark === undefined ? null : (_jsx(Mark, { className: `${ic.size} shrink-0 ${busy ? "motion-safe:animate-spin" : ""}`, strokeWidth: ic.stroke, "aria-hidden": true })), children] }));
 }
 /**
  * The same button, but it is a real link.

package/dist/primitives/cell/CellStack.js

@@ -32,5 +32,5 @@ export function Thumb({ src, alt, icon: Icon, size = "md", }) {
 export function CellStack({ primary, secondary, media, avatar, wrap = false, }) {
     return (_jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [avatar !== undefined ? (
             /* The name is written beside it: the photo's `alt` would say it twice. */
-            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "truncate"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: avatar.name, size: "lg", ...(avatar.src === undefined ? {} : { src: avatar.src }) }) })) : media === undefined ? null : (_jsx(Thumb, { size: "md", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "line-clamp-1 text-meta font-medium break-all text-ink", ...(typeof primary === "string" ? { title: primary } : {}), children: primary }), secondary === undefined ? null : (_jsx("span", { className: `text-micro text-muted ${wrap ? "line-clamp-2" : "line-clamp-1 break-all"}`, ...(typeof secondary === "string" ? { title: secondary } : {}), children: secondary }))] })] }));
 }

package/dist/primitives/field/Field.d.ts

@@ -2,7 +2,7 @@ import { type FieldIds } from "../../foundations/form.js";
 import { type FormMode } from "../../foundations/form.js";
 import { type FieldNote } from "./note.js";
 import { type ReactNode } from "react";
-export declare function Field({ label, hint, error, required, children, htmlFor, layout, action, mode, note, copy: copyAs, }: {
+export declare function Field({ label, hint, error, required, children, htmlFor, layout, action, mode, note, changed, copy: copyAs, }: {
     label: string;
     /** What is expected. A `?` on the label that opens it on press. */
     hint?: string;
@@ -32,8 +32,13 @@ export declare function Field({ label, hint, error, required, children, htmlFor,
      *  Aplicar». A card in the record's margin when there is one, a `Flag` by the label when
      *  there is not; its sentence describes the control (`aria-describedby`). See `note.tsx`. */
     note?: FieldNote;
-    /** The copy button by the label (see `copy.tsx`): on by default, copying what the control
-     *  shows. A string copies that instead; `false` removes the button from this field. */
+    /** Its value changed and is not saved yet. A dot by the label says WHICH fields a
+     *  «2 cambios sin guardar» is about — in a form of twenty, the reason to look before
+     *  saving — and it is read as part of the field's description. */
+    changed?: boolean;
+    /** The copy button by the label (see `clipboard.tsx`): on by default, copying what the
+     *  control shows. A string copies that instead; `false` removes the button from this
+     *  field. */
     copy?: string | false;
 }): import("react").JSX.Element;
 /**

package/dist/primitives/field/Field.js

@@ -40,7 +40,7 @@ import { Button as AriaButton, Input, ListBox, ListBoxItem, NumberField as AriaN
  *  control ate a line on every field. The error still goes below, close to
  *  the cursor, and it says what to put.
  * ==================================================================== */
-export function Field({ label, hint, error, required = false, children, htmlFor, layout, action, mode, note, copy: copyAs, }) {
+export function Field({ label, hint, error, required = false, children, htmlFor, layout, action, mode, note, changed = false, copy: copyAs, }) {
     const d = useDensity();
     const copy = useUiCopy();
     const copies = useFieldCopy() && copyAs !== false;
@@ -52,9 +52,13 @@ export function Field({ label, hint, error, required = false, children, htmlFor,
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
     const noteId = `${id}-note`;
+    const changedId = `${id}-changed`;
     /* The error first: what has to be corrected is heard before what is worth knowing. */
-    const describedBy = describedByOf(hint === undefined ? null : hintId, error === undefined ? null : errorId, note === undefined ? null : noteId);
-    const labelNode = (_jsxs("span", { className: `flex min-w-0 items-center gap-1 text-micro font-medium text-muted ${inline ? "pt-2" : ""}`, children: [_jsxs("label", { id: `${id}-label`, htmlFor: id, className: inline ? "min-w-0 truncate" : "", children: [label, required ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-ink", "aria-hidden": true, children: [" ", "*"] }), _jsxs("span", { className: "sr-only", children: [", ", copy.field.required] })] })) : null] }), hint === undefined ? null : _jsx(Hint, { id: hintId, children: hint }), note === undefined ? null : _jsx(NoteFlag, { note: note }), copies ? (_jsx(FieldCopy, { label: label, scope: shown, ...(typeof copyAs === "string" ? { value: copyAs } : {}) })) : null] }));
+    const describedBy = describedByOf(hint === undefined ? null : hintId, error === undefined ? null : errorId, note === undefined ? null : noteId, changed ? changedId : null);
+    const labelNode = (
+    /* The label follows its control's focus: in a form of twenty fields, the eye finds the
+       row being written by its name as much as by the ring. */
+    _jsxs("span", { className: `flex min-w-0 items-center gap-1 text-micro font-medium text-muted transition-colors duration-(--duration-quick) group-focus-within/field:text-primary ${inline ? "pt-2" : ""}`, children: [_jsxs("label", { id: `${id}-label`, htmlFor: id, className: inline ? "min-w-0 truncate" : "", children: [label, required ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "text-ink", "aria-hidden": true, children: [" ", "*"] }), _jsxs("span", { className: "sr-only", children: [", ", copy.field.required] })] })) : null] }), hint === undefined ? null : _jsx(Hint, { id: hintId, children: hint }), note === undefined ? null : _jsx(NoteFlag, { note: note }), changed ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, title: copy.field.changed, className: "size-1.5 shrink-0 rounded-pill bg-accent transition-transform duration-(--duration-quick) ease-(--ease-out) starting:scale-0" }), _jsx("span", { id: changedId, className: "sr-only", children: copy.field.changed })] })) : null, copies ? (_jsx(FieldCopy, { label: label, scope: shown, ...(typeof copyAs === "string" ? { value: copyAs } : {}) })) : null] }));
     /* Last in the field so it is read last; absolutely placed, it still sits at the field's
        top — the static position of an absolute child of a flex or grid box is its start. */
     const noteCard = note === undefined ? null : _jsx(NoteCard, { note: note, id: noteId, owner: label });

package/dist/primitives/notice/Notice.js

@@ -27,7 +27,9 @@ import { AlertTriangle, PackageX } from "lucide-react";
 const SKELETON_NAME = ["w-48", "w-36", "w-56", "w-40", "w-44", "w-32"];
 export function Skeleton({ rows = 6, label, }) {
     const d = useDensity();
-    return (_jsxs("div", { "aria-busy": "true", className: "flex flex-col", children: [_jsx("span", { className: "sr-only", children: label }), Array.from({ length: rows }, (_, i) => (_jsxs("div", { "aria-hidden": true, className: `flex items-center ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, children: [_jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${SKELETON_NAME[i % SKELETON_NAME.length]}` }), _jsx("span", { className: "ml-auto h-3 w-14 rounded-control bg-ink/5" })] }, i)))] }));
+    return (
+    /* It appears late (`animate-reveal-late`): a read faster than 200ms never shows it. */
+    _jsxs("div", { "aria-busy": "true", className: "flex animate-reveal-late flex-col", children: [_jsx("span", { className: "sr-only", children: label }), Array.from({ length: rows }, (_, i) => (_jsxs("div", { "aria-hidden": true, className: `flex items-center ${byDensity(d, "gap-3 px-2 py-2", "gap-2 px-1.5 py-1")}`, children: [_jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${SKELETON_NAME[i % SKELETON_NAME.length]}` }), _jsx("span", { className: "ml-auto h-3 w-14 rounded-control bg-ink/5" })] }, i)))] }));
 }
 /** What is shown when there is nothing to show: a sentence, and the gesture
  *  that resolves it if there is one. Never a drawing. */

package/dist/primitives/picker/MatchedText.d.ts

@@ -1,6 +1,7 @@
 /**
- * A text with the part that matched the search marked — internal to the lists that filter
- * as you type (`Picker`, `TagsField`). A `<mark>`, so it is also said as marked text, and
+ * A text with the part that matched the search marked — what the lists that filter as you
+ * type (`Picker`, `TagsField`) draw in every row, and what an option of the application's own
+ * (`renderOption`) uses to say the same. A `<mark>`, so it is also said as marked text, and
  * bold besides the tint: in forced colors the tint is gone and the weight is what remains.
  */
 export declare function MatchedText({ text, query, locale, }: {

package/dist/primitives/picker/MatchedText.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { matchSpans } from "../../foundations/match.js";
 /**
- * A text with the part that matched the search marked — internal to the lists that filter
- * as you type (`Picker`, `TagsField`). A `<mark>`, so it is also said as marked text, and
+ * A text with the part that matched the search marked — what the lists that filter as you
+ * type (`Picker`, `TagsField`) draw in every row, and what an option of the application's own
+ * (`renderOption`) uses to say the same. A `<mark>`, so it is also said as marked text, and
  * bold besides the tint: in forced colors the tint is gone and the weight is what remains.
  */
 export function MatchedText({ text, query, locale, }) {

package/dist/primitives/picker/Picker.d.ts

@@ -30,6 +30,14 @@ export interface PickerItem {
      *  lined up in one column, eight customers' debts are read top to bottom. */
     aside?: ReactNode;
 }
+/**
+ * What a `renderOption` is handed beside the item: whether it is the chosen one, and what was
+ * typed — mark it with `MatchedText`, so the row still says why it is listed.
+ */
+export type PickerOptionState = {
+    selected: boolean;
+    query: string;
+};
 /**
  * What the list shows and how many are left out of it. Capped at 8 with the footer count,
  * unless the list loads incrementally — then everything that arrived is listed and the
@@ -94,6 +102,14 @@ export type PickerProps = {
     /** A page asked for by `onLoadMore` is on its way: a quiet row at the end says so. Unlike
      *  `loading`, the rows already there stay. */
     loadingMore?: boolean;
+    /**
+     * The content of an option, for one that does not fit «name + meta + aside» — a product
+     * with its photo, a slot of an agenda. The row around it stays the picker's: keys, focus,
+     * the search by `name` (and `haystack`), the ✓ of the chosen one. What it draws is also
+     * what the option is called, so it should show the name. Data beyond `PickerItem` is looked
+     * up by `item.id` in the consumer's own records.
+     */
+    renderOption?: (item: PickerItem, state: PickerOptionState) => ReactNode;
     describedBy?: string;
     invalid?: boolean;
     disabled?: boolean;
@@ -109,7 +125,7 @@ export declare function Picker({ mode, ...props }: PickerProps): import("react")
  * row at the end. Internal — not exported from the family — and apart from the combobox so it
  * can be rendered on the server without a popover, which is how the tests see the rows.
  */
-export declare function PickerOptions({ items, marks, hints, remaining, query, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
+export declare function PickerOptions({ items, marks, hints, remaining, query, emptyText, onLoadMore, loadingMore, renderOption, "aria-label": ariaLabel, }: {
     items: readonly PickerItem[];
     marks: boolean;
     hints: boolean;
@@ -119,6 +135,7 @@ export declare function PickerOptions({ items, marks, hints, remaining, query, e
     emptyText: string;
     onLoadMore?: () => void;
     loadingMore?: boolean;
+    renderOption?: (item: PickerItem, state: PickerOptionState) => ReactNode;
     /** Only when rendered outside the combobox, which otherwise names the list. */
     "aria-label"?: string;
 }): import("react").JSX.Element;

package/dist/primitives/picker/Picker.js

@@ -98,7 +98,7 @@ export function Picker({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditablePicker, { ...props }) }));
 }
-function EditablePicker({ id: ownId, items, value, onChange, onSearch, valueLabel, placeholder, onBrowseAll, onCreate, onCreateAndEdit, onOpen, openTargets = ["modal", "peek", "side", "page"], emptyText, searchPlaceholder, loading = false, loadingText, onLoadMore, loadingMore = false, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
+function EditablePicker({ id: ownId, items, value, onChange, onSearch, valueLabel, placeholder, onBrowseAll, onCreate, onCreateAndEdit, onOpen, openTargets = ["modal", "peek", "side", "page"], emptyText, searchPlaceholder, loading = false, loadingText, onLoadMore, loadingMore = false, renderOption, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -235,14 +235,14 @@ function EditablePicker({ id: ownId, items, value, onChange, onSearch, valueLabe
                                 ], onSelect: (to) => onOpen(value, to) }))] })) : null, _jsx(FieldButton, { className: "mr-1", children: _jsx(ChevronDown, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }), _jsxs(Popover, { placement: "bottom start", className: "flex w-(--trigger-width) flex-col overflow-hidden", children: [_jsx(PickerOptions, { items: listed, marks: hasMarks, hints: hasHints, remaining: remaining, query: query, emptyText: loading ? shownLoading : shownEmpty, 
                         /* Not while the first page loads: the sentinel of an empty list is in view and
                            would ask for page two before page one arrived. */
-                        onLoadMore: loading ? undefined : onLoadMore, loadingMore: loadingMore }), remaining > 0 && !browsable ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2 border-t border-line bg-ground px-2.5 py-1.5", children: [_jsx("span", { className: "text-micro tabular-nums text-muted", children: fillCopy(copy.picker.more, { count: remaining.toLocaleString(copy.locale) }) }), _jsx("span", { className: "text-micro text-muted", children: copy.picker.refine })] })) : null] })] }));
+                        onLoadMore: loading ? undefined : onLoadMore, loadingMore: loadingMore, ...(renderOption === undefined ? {} : { renderOption }) }), remaining > 0 && !browsable ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2 border-t border-line bg-ground px-2.5 py-1.5", children: [_jsx("span", { className: "text-micro tabular-nums text-muted", children: fillCopy(copy.picker.more, { count: remaining.toLocaleString(copy.locale) }) }), _jsx("span", { className: "text-micro text-muted", children: copy.picker.refine })] })) : null] })] }));
 }
 /**
  * The list of a `Picker`: its rows, the section headers, the «Buscar más…» row and the loading
  * row at the end. Internal — not exported from the family — and apart from the combobox so it
  * can be rendered on the server without a popover, which is how the tests see the rows.
  */
-export function PickerOptions({ items, marks, hints, remaining, query = "", emptyText, onLoadMore, loadingMore = false, "aria-label": ariaLabel, }) {
+export function PickerOptions({ items, marks, hints, remaining, query = "", emptyText, onLoadMore, loadingMore = false, renderOption, "aria-label": ariaLabel, }) {
     const copy = useUiCopy();
     const entries = useMemo(() => sectioned(items), [items]);
     /* The actions are one block under the records: one hairline above the first of them. */
@@ -251,14 +251,14 @@ export function PickerOptions({ items, marks, hints, remaining, query = "", empt
             ? "mt-1 border-t border-line"
             : ""), children: _jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "min-w-0 truncate font-medium", children: item.name }), item.id !== BROWSE_ALL || remaining === 0 ? null : (_jsx("span", { className: "text-micro tabular-nums text-muted", children: fillCopy(copy.picker.more, {
                         count: remaining.toLocaleString(copy.locale),
-                    }) }))] }) })) : (_jsx(ListBoxItem, { id: item.id, textValue: item.name, isDisabled: item.disabled, className: (state) => option({ ...state, hints }), children: ({ isSelected }) => (_jsx(Row, { item: item, selected: isSelected, marks: marks, hints: hints, query: query, locale: copy.locale })) }));
+                    }) }))] }) })) : (_jsx(ListBoxItem, { id: item.id, textValue: item.name, isDisabled: item.disabled, className: (state) => option({ ...state, hints }), children: ({ isSelected }) => renderOption === undefined ? (_jsx(Row, { item: item, selected: isSelected, marks: marks, hints: hints, query: query, locale: copy.locale })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1", children: renderOption(item, { selected: isSelected, query }) }), isSelected ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0 self-center text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5 })) : null] })) }));
     return (_jsxs(ListBox, { "aria-label": ariaLabel, 
         /* Nothing matched YET while the next page is coming: «nothing matches» above «loading
            more…» says two contradicting things, so the empty list says only the second. */
         renderEmptyState: () => (_jsx("p", { className: "px-3 py-3 text-center text-meta text-muted", children: loadingMore ? copy.picker.loadingMore : emptyText })), 
         /* Incremental, the list is not capped: it scrolls inside its own height and the
            sentinel at its end is what asks for more. */
-        className: cn("min-h-0 flex-1 overflow-y-auto p-1 outline-0", onLoadMore === undefined ? "" : "max-h-(--size-dropdown)"), children: [_jsx(Collection, { items: entries, dependencies: [query], children: (entry) => "items" in entry ? (_jsxs(ListBoxSection, { id: entry.id, className: "not-first:mt-1 not-first:border-t not-first:border-line not-first:pt-1", children: [_jsxs(Header, { className: "flex items-center gap-2 px-2 pt-1 pb-0.5 text-micro font-medium text-muted", children: [marks ? (_jsx("span", { className: "size-(--size-icon-sm) shrink-0", "aria-hidden": true })) : null, entry.section] }), _jsx(Collection, { items: entry.items, dependencies: [query], children: renderItem })] })) : (renderItem(entry)) }), onLoadMore === undefined ? null : (_jsx(ListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: loadingMore && items.length > 0, className: "px-3 py-1.5 text-center text-micro text-muted", children: copy.picker.loadingMore }))] }));
+        className: cn("min-h-0 flex-1 overflow-y-auto p-1 outline-0", onLoadMore === undefined ? "" : "max-h-(--size-dropdown)"), children: [_jsx(Collection, { items: entries, dependencies: [query, renderOption], children: (entry) => "items" in entry ? (_jsxs(ListBoxSection, { id: entry.id, className: "not-first:mt-1 not-first:border-t not-first:border-line not-first:pt-1", children: [_jsxs(Header, { className: "flex items-center gap-2 px-2 pt-1 pb-0.5 text-micro font-medium text-muted", children: [marks ? (_jsx("span", { className: "size-(--size-icon-sm) shrink-0", "aria-hidden": true })) : null, entry.section] }), _jsx(Collection, { items: entry.items, dependencies: [query, renderOption], children: renderItem })] })) : (renderItem(entry)) }), onLoadMore === undefined ? null : (_jsx(ListBoxLoadMoreItem, { onLoadMore: onLoadMore, isLoading: loadingMore && items.length > 0, className: "px-3 py-1.5 text-center text-micro text-muted", children: copy.picker.loadingMore }))] }));
 }
 function Row({ item, selected, marks, hints, query, locale, }) {
     const Icon = item.icon;

package/dist/primitives/picker/TagsField.d.ts

@@ -1,6 +1,7 @@
 import { type FormMode } from "../../foundations/form.js";
 import type { OpenTarget } from "../../foundations/types.js";
 import { type TagOption } from "./tagChoices.js";
+import { type ReactNode } from "react";
 export type TagsFieldProps = {
     /** The ids of the chosen tags, in the order they were added. */
     value: readonly string[];
@@ -31,6 +32,15 @@ export type TagsFieldProps = {
     /** Where a pressed chip opens. A peek by default: a chip is a glance at one of many — «who is
      *  this follower?» — not a place to go and work. */
     openTarget?: OpenTarget;
+    /**
+     * The content of an option in the list, for one that does not fit «face + name + meta». The
+     * row stays the field's — keys, the search by `label`, Enter that adds — and «Create…» and
+     * «Buscar más…» stay the field's too. Mark what was typed with `MatchedText`. The chips are
+     * not touched: a chosen tag is read by its name.
+     */
+    renderOption?: (option: TagOption, state: {
+        query: string;
+    }) => ReactNode;
     /** The input's placeholder while no tag is chosen. Defaults to the copy table's «Add…». */
     placeholder?: string;
     disabled?: boolean;

package/dist/primitives/picker/TagsField.js

@@ -84,7 +84,7 @@ export function TagsField({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
+function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBrowseAll, onOpen, openTarget, renderOption, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -184,7 +184,7 @@ function EditableTagsField({ value, onChange, options, onCreate, onSearch, onBro
                                 onChange?.(withoutTag(value, last));
                         }, empty: text === "" }), _jsx(Popover, { triggerRef: boxRef, ...(width === null
                             ? {}
-                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, dependencies: [text], className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE || item.value === BROWSE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : item.value === BROWSE ? (_jsxs(_Fragment, { children: [_jsx(Search, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsxs(_Fragment, { children: [item.avatar === undefined ? null : (_jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) })), _jsx("span", { className: "truncate", children: _jsx(MatchedText, { text: item.label, query: text, locale: copy.locale }) })] })) })) }) })] })] }));
+                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, dependencies: [text, renderOption], className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE || item.value === BROWSE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : item.value === BROWSE ? (_jsxs(_Fragment, { children: [_jsx(Search, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : renderOption !== undefined ? (_jsx("span", { className: "min-w-0 flex-1", children: renderOption(item, { query: text }) })) : (_jsxs(_Fragment, { children: [item.avatar === undefined ? null : (_jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) })), _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "truncate", children: _jsx(MatchedText, { text: item.label, query: text, locale: copy.locale }) }), item.meta === undefined ? null : (_jsx("span", { className: "truncate text-micro tabular-nums text-muted", children: _jsx(MatchedText, { text: item.meta, query: text, locale: copy.locale }) }))] })] })) })) }) })] })] }));
 }
 /** The input after the chips. It reads the combobox's state to know whether the keyboard
  *  marked an option — Enter with nothing marked takes the first match. */

package/dist/primitives/picker/index.d.ts

@@ -1,3 +1,4 @@
-export { Picker, type PickerItem, type PickerProps, } from "./Picker.js";
+export { Picker, type PickerItem, type PickerOptionState, type PickerProps, } from "./Picker.js";
+export { MatchedText } from "./MatchedText.js";
 export { type TagOption } from "./tagChoices.js";
 export { TagsField, type TagsFieldProps } from "./TagsField.js";

package/dist/primitives/picker/index.js

@@ -1,6 +1,8 @@
 /* CHOOSING RECORDS — one (`Picker`, the many2one) or several (`TagsField`, the many2many).
    The replacement for `<select>` when you have to SEE in order to choose. */
 export { Picker, } from "./Picker.js";
+/* Lo buscado, marcado: para que una opción propia (`renderOption`) lo diga como las demás. */
+export { MatchedText } from "./MatchedText.js";
 /* El many2many: las fichas elegidas más una entrada que agrega la siguiente. */
 export {} from "./tagChoices.js";
 export { TagsField } from "./TagsField.js";

package/dist/primitives/picker/tagChoices.d.ts

@@ -13,6 +13,13 @@ export interface TagOption {
     tone?: Tone;
     /** A person: its face on the chip and in the list — `true` for initials, a URL for a photo. */
     avatar?: true | string;
+    /**
+     * The datum that tells two options apart, already written — the NIT of a customer, the
+     * email of a follower. Drawn under the name in the list and searched like it; NOT on the
+     * chip: a chip is recognised by its name, and a NIT on every chip turns the strip into a
+     * table. Same role as `PickerItem.meta`.
+     */
+    meta?: string;
 }
 /** How the typed text is compared — the locale's, handed in by the component. */
 export type TagMatch = {

package/dist/primitives/picker/tagChoices.js

@@ -14,10 +14,15 @@ searched = false) {
     const chosen = new Set(value);
     const query = text.trim();
     const available = options.filter((option) => !chosen.has(option.value) &&
-        (searched || query === "" || match.contains(option.label, query)));
-    const create = creatable && query !== "" && !options.some((option) => match.same(option.label, query))
-        ? query
-        : null;
+        (searched ||
+            query === "" ||
+            match.contains(option.label, query) ||
+            (option.meta !== undefined && match.contains(option.meta, query))));
+    /* Typing a NIT that one option carries names that option: creating a tag called «1023…»
+       next to it is the duplicate this rule exists to prevent. */
+    const named = options.some((option) => match.same(option.label, query) ||
+        (option.meta !== undefined && match.same(option.meta, query)));
+    const create = creatable && query !== "" && !named ? query : null;
     return { available, create };
 }
 /** The value with one more id at the end; the same value when it is already there. */

package/dist/primitives/table/DataTable.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { pathKey, pileItems } from "../../foundations/grouping.js";
+import { pathKey, pileFoot, pileItems, } from "../../foundations/grouping.js";
 import { CellCopy } from "./CellCopy.js";
 import { CellEditor } from "./CellEditor.js";
 import { EditRow, firstControl } from "./EditableTable.js";
+import { PileFootLine } from "./PileFootLine.js";
 import { RowActions } from "./RowActions.js";
 import { useRowWindow } from "./rowWindow.js";
 import { SelectBox, Table, Td, Th, THead, Tr, } from "./Table.js";
@@ -140,21 +141,21 @@ function entriesOfPiles(piles, keyOf, collapsed, onToggle, onMore) {
         if (pile.piles.length > 0) {
             return [head, ...entriesOfPiles(pile.piles, keyOf, collapsed, onToggle, onMore)];
         }
-        const left = pile.count - pile.items.length;
+        const foot = pileFoot(pile, onMore !== undefined);
         return [
             head,
             ...pile.items.map((item) => ({ kind: "row", id: keyOf(item), item })),
-            ...(left > 0 && onMore !== undefined
-                ? [
+            ...(foot === null
+                ? []
+                : [
                     {
                         kind: "more",
                         id: `\u0000more${key}`,
                         depth: pile.depth,
-                        left,
-                        more: () => onMore(pile),
+                        foot,
+                        more: () => onMore?.(pile),
                     },
-                ]
-                : []),
+                ]),
         ];
     });
 }
@@ -385,9 +386,7 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
                         if (entry.kind === "more") {
                             return [
                                 gap,
-                                _jsx("tr", { ...windowed, className: "border-b border-line", children: _jsx("td", { colSpan: width, className: "px-3 py-1", style: indent, children: _jsx("button", { type: "button", onClick: entry.more, className: "rounded-control text-meta text-primary transition-colors duration-(--duration-instant) hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: fillCopy(copy.table.pileMore, {
-                                                count: entry.left.toLocaleString(copy.locale),
-                                            }) }) }) }, entry.id),
+                                _jsx("tr", { ...windowed, className: "border-b border-line", children: _jsx("td", { colSpan: width, className: "px-3 py-1", style: indent, children: _jsx(PileFootLine, { foot: entry.foot, onMore: entry.more }) }) }, entry.id),
                             ];
                         }
                         const original = entry.item;

package/dist/primitives/table/EditableTable.js

@@ -602,7 +602,11 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReo
                         return null;
                     return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-meta", children: [_jsx("dt", { className: "text-muted", children: c.header }), _jsx("dd", { className: "font-semibold text-ink tabular-nums", children: total })] }, c.id));
                 }) }))] }));
-    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
+    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, tabIndex: box.tabIndex, className: `min-w-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => c.header === "" ? (_jsx("td", { className: "w-0 border-b border-line-strong" }, c.id)) : (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, 
+                                        /* A column of figures takes its figures' width (`w-0` in an auto
+                                           table is «as narrow as its content») and the text takes the rest:
+                                           the product name was cut while «Cantidad» had room for ten digits. */
+                                        className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"} ${c.numeric === true && c.width === undefined ? "w-0" : ""}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
                                 ? {
                                     onDragOver: overRow,
                                     onDrop: (event) => {

package/dist/primitives/table/PileFootLine.d.ts

@@ -0,0 +1,14 @@
+import type { PileFoot } from "../../foundations/grouping.js";
+/**
+ * The foot of a short pile, as words: «Show 50 more of 49,950», or «Showing 500 of 49,950»
+ * when there is no next page.
+ *
+ * Context: the table's row and the list's line both draw it, each in its own frame (a `td`
+ * with a `colSpan`, an indented line), so this is only what goes inside. The end is quiet
+ * text and not a disabled button: there is nothing to press, and a control that does
+ * nothing is the bug this replaced.
+ */
+export declare function PileFootLine({ foot, onMore }: {
+    foot: PileFoot;
+    onMore: () => void;
+}): import("react").JSX.Element;

package/dist/primitives/table/PileFootLine.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+/**
+ * The foot of a short pile, as words: «Show 50 more of 49,950», or «Showing 500 of 49,950»
+ * when there is no next page.
+ *
+ * Context: the table's row and the list's line both draw it, each in its own frame (a `td`
+ * with a `colSpan`, an indented line), so this is only what goes inside. The end is quiet
+ * text and not a disabled button: there is nothing to press, and a control that does
+ * nothing is the bug this replaced.
+ */
+export function PileFootLine({ foot, onMore }) {
+    const copy = useUiCopy();
+    const n = (value) => value.toLocaleString(copy.locale);
+    if (foot.kind === "end") {
+        return (_jsx("span", { className: "text-meta text-muted", children: fillCopy(copy.table.pileShown, { shown: n(foot.shown), count: n(foot.count) }) }));
+    }
+    return (_jsx("button", { type: "button", onClick: onMore, className: "rounded-control text-meta text-primary transition-colors duration-(--duration-instant) hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: foot.next === undefined
+            ? fillCopy(copy.table.pileMore, { count: n(foot.left) })
+            : fillCopy(copy.table.pileMoreOf, { count: n(foot.next), left: n(foot.left) }) }));
+}

package/dist/primitives/table/index.d.ts

@@ -1,5 +1,6 @@
 export { type Aggregate, type DataColumn, DataTable, type DataTableCreate, type GroupColumn, } from "./DataTable.js";
 export { EditableTable, type EditAdd, type EditBands, type EditColumn, type EditLayout, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
+export { PileFootLine } from "./PileFootLine.js";
 export { PivotTable, type PivotTableProps, } from "./PivotTable.js";
 export { type ReportColumn, type ReportRow, type ReportRowKind, ReportTable, } from "./ReportTable.js";
 export { type RowAction, RowActions } from "./RowActions.js";

package/dist/primitives/table/index.js

@@ -2,6 +2,7 @@
    wiring to TanStack for grouping and sorting. See the note in `DataTable.tsx`. */
 export { DataTable, } from "./DataTable.js";
 export { EditableTable, sectionLines, stackPlaces, tabTarget, } from "./EditableTable.js";
+export { PileFootLine } from "./PileFootLine.js";
 export { PivotTable, } from "./PivotTable.js";
 export { ReportTable, } from "./ReportTable.js";
 export { RowActions } from "./RowActions.js";

package/dist/tokens.css

@@ -630,6 +630,28 @@
      the corner of the eye. The bar uses it behind `motion-safe:`: with reduced
      motion it stands still. */
   --animate-progress-sweep: progress-sweep 1.6s var(--ease-in-out) infinite;
+
+  /* What appears only if waiting takes long enough to be seen: a skeleton. A read that
+     answers in 150ms showed a skeleton for one frame — a flash that says «something broke»
+     more than «loading». It waits 200ms invisible, then fades in. */
+  --animate-reveal-late: reveal var(--duration-quick) var(--ease-out) 200ms both;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+  }
+}
+
+/* The focus ring ARRIVES: it closes in from a little farther out while it takes its colour,
+   in 160ms. A ring that pops is found; one that moves is found before the eye looks for it.
+   Only on the controls a person moves through — a dialog or a popover that takes the focus to
+   be announced keeps its own entrance — and only with motion allowed. */
+@keyframes focus-in {
+  from {
+    outline-offset: 5px;
+    outline-color: transparent;
+  }
 }
 
 /* The segment is two fifths of its track: from just off the left edge (-100 % of
@@ -924,6 +946,26 @@
     font-variant-numeric: tabular-nums;
   }
 
+  @media (prefers-reduced-motion: no-preference) {
+    :where(
+      button,
+      a[href],
+      input,
+      textarea,
+      select,
+      summary,
+      [role="tab"],
+      [role="option"],
+      [role="gridcell"],
+      [role="row"],
+      [role="checkbox"],
+      [role="radio"],
+      [role="switch"]
+    ):focus-visible {
+      animation: focus-in var(--duration-quick) var(--ease-out);
+    }
+  }
+
   /* Thin and warm scrollbars. With six panels open, six grey system bars are
      six stripes that say nothing. */
   * {

package/dist/views/list/List.d.ts

@@ -6,7 +6,7 @@ import type { Surface } from "../../foundations/types.js";
 import type { DataColumn, DataTableCreate } from "../../primitives/table/DataTable.js";
 import type { RowAction } from "../../primitives/table/RowActions.js";
 import type { SortState } from "../../primitives/table/Table.js";
-import { type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
+import { type CardWays, type ListCalendar, type ListCrumb, type ListEmpty, type ListGantt, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type ListTimeline, type RowOf } from "./types.js";
 import type { ReactNode } from "react";
 type BarProps = {
     children?: ReactNode;
@@ -51,7 +51,8 @@ type TableProps<T extends object> = {
  *  nombre, el `meta` y las fichas. Escribirla igual es declarar que ESTA lista
  *  se puede ver como tablero. */
 type BoardProps<T> = {
-    card?: (item: T) => ReactNode;
+    /** `ways` carries the list's rule of what a press does — call `ways.press` from the card. */
+    card?: (item: T, ways: CardWays) => ReactNode;
     /** One column per stage, with drag (and Alt + ← / →) to move a card between them. */
     stages?: BoardStages<T>;
 };
@@ -120,9 +121,16 @@ export type ListProps<T extends object> = {
      *  actions — a list to read, like the lines of a record in view mode. One switch, so whoever
      *  passes the handlers generically does not have to strip them one by one. */
     readOnly?: boolean;
-    /** Los tres estados, en un solo lugar. */
+    /** Los estados del conjunto, en un solo lugar.
+     *
+     *  `loading` es la PRIMERA lectura: no hay filas todavía, y se dibuja el esqueleto.
+     *  `refreshing` es volver a preguntar con filas en la mano —se tipeó en la búsqueda, se
+     *  cambió de página—: las filas se quedan y una barra discreta dice que se está
+     *  preguntando. Cambiarlas por un esqueleto en cada pregunta hacía parpadear la tabla, y un
+     *  clic podía caer sobre una fila que ya no estaba. */
     state?: {
         loading?: boolean;
+        refreshing?: boolean;
         error?: string | null;
     };
     /** Vacía POR UN FILTRO es otra situación: no falta contenido, sobra un