@sincpro/web-ui 1.4.0 → 1.5.0

package/dist/components/listing/Row.d.ts

@@ -1,3 +1,4 @@
+import type { PileFoot } from "../../foundations/grouping.js";
 import { type MenuGroup } from "../../primitives/menu/Menu.js";
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
@@ -127,10 +128,10 @@ export declare function GroupHeader({ field, label, count, detail, depth, open,
     open?: boolean;
     onToggle?: () => void;
 }): import("react").JSX.Element;
-/** Under a pile that shows its first page: «Ver 38 más». Indented like the pile's rows. */
-export declare function GroupMore({ left, depth, onMore, }: {
-    /** How many the pile counts that are not here yet. */
-    left: number;
+/** Under a short pile: «Ver 50 más de 49.950», or «Se muestran 500 de 49.950» when there is
+ *  no next page. Indented like the pile's rows. */
+export declare function GroupMore({ foot, depth, onMore, }: {
+    foot: PileFoot;
     depth?: number;
     onMore: () => void;
 }): import("react").JSX.Element;

package/dist/components/listing/Row.js

@@ -5,6 +5,7 @@ import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { stickyTop } from "../../foundations/sticky.js";
 import { Menu } from "../../primitives/menu/Menu.js";
+import { PileFootLine } from "../../primitives/table/PileFootLine.js";
 import { HEADER_TEXT } from "../../primitives/table/Table.js";
 import { CopyButton } from "../../primitives/value/Copyable.js";
 import { Avatar } from "../../primitives/value/Person.js";
@@ -137,9 +138,9 @@ export function GroupHeader({ field, label, count, detail, depth = 0, open = tru
     const mark = (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-1 inset-y-0.5 rounded-control group-hover/head:bg-ink/4" }));
     return onToggle === undefined ? (_jsx("div", { className: box, style: indent, children: content })) : (_jsxs("button", { type: "button", onClick: onToggle, "aria-expanded": open, style: indent, className: `group/head relative ${box} w-full text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`, children: [mark, content] }));
 }
-/** Under a pile that shows its first page: «Ver 38 más». Indented like the pile's rows. */
-export function GroupMore({ left, depth = 0, onMore, }) {
+/** Under a short pile: «Ver 50 más de 49.950», or «Se muestran 500 de 49.950» when there is
+ *  no next page. Indented like the pile's rows. */
+export function GroupMore({ foot, depth = 0, onMore, }) {
     const d = useDensity();
-    const copy = useUiCopy();
-    return (_jsx("div", { className: `border-b border-line ${byDensity(d, "px-3 py-1", "px-2.5 py-0.5")}`, style: depth === 0 ? undefined : { paddingLeft: `calc(var(--spacing-indent) * ${depth})` }, children: _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: fillCopy(copy.table.pileMore, { count: left.toLocaleString(copy.locale) }) }) }));
+    return (_jsx("div", { className: `border-b border-line ${byDensity(d, "px-3 py-1", "px-2.5 py-0.5")}`, style: depth === 0 ? undefined : { paddingLeft: `calc(var(--spacing-indent) * ${depth})` }, children: _jsx(PileFootLine, { foot: foot, onMore: onMore }) }));
 }

package/dist/foundations/copy.d.ts

@@ -239,6 +239,10 @@ export type UiCopy = {
         distinct: string;
         /** Under a pile that holds its first page and counts them all: ask for the rest. */
         pileMore: string;
+        /** The same, when whoever pages says how many one press brings: «Show 50 more of 49,950». */
+        pileMoreOf: string;
+        /** Under a short pile with no next page: what it shows of what it counts. */
+        pileShown: string;
     };
     menu: {
         empty: string;

package/dist/foundations/copy.es.js

@@ -205,6 +205,8 @@ export const SPANISH_COPY = {
         max: "máx {value}",
         distinct: "{value} distintos",
         pileMore: "Ver {count} más",
+        pileMoreOf: "Ver {count} más de {left}",
+        pileShown: "Se muestran {shown} de {count}",
     },
     menu: { empty: "Nada coincide." },
     list: {

package/dist/foundations/copy.js

@@ -151,6 +151,8 @@ export const ENGLISH_COPY = {
         max: "max {value}",
         distinct: "{value} distinct",
         pileMore: "Show {count} more",
+        pileMoreOf: "Show {count} more of {left}",
+        pileShown: "Showing {shown} of {count}",
     },
     menu: {
         empty: "Nothing matches.",

package/dist/foundations/grouping.d.ts

@@ -104,6 +104,15 @@ export type Pile<T> = {
     items: readonly T[];
     /** El nivel de abajo. Vacío en el más profundo. */
     piles: readonly Pile<T>[];
+    /**
+     * What the next «show more» of a short pile brings — said by whoever pages it.
+     *
+     * `50` reads «Show 50 more of 49,950»: the button says what one press adds, not what is
+     * missing. `false` says there is no next page although the count says more (a cap on
+     * the rows held, a server that stops paging): the button goes and the pile says how many
+     * it shows. Absent, the button counts what is left, as it did before this existed.
+     */
+    more?: number | false;
 };
 /**
  * La identidad de un NIVEL: el campo y, si es fecha, su grano.
@@ -280,6 +289,25 @@ export declare function itemPath<T>(item: T, levels: readonly GroupLevel[], of:
  *  presentaciones que necesitan la secuencia y no el árbol —la planilla
  *  virtualizada, que cuenta índices— y el que quiera saber qué quedó visible. */
 export declare function pileItems<T>(piles: readonly Pile<T>[]): readonly T[];
+/**
+ * What the foot of a pile offers: the next page, or the word that there is none.
+ *
+ * Context: every presentation that draws piles —rows, cards, the table, one of the
+ * application's own— asks this, so «Show 50 more of 49,950» and «Showing 500 of 49,950»
+ * are decided once. `null` when the pile holds every row it counts, or holds piles and not
+ * rows. A short pile with no way to page (`more: false`, or no `onMore`) still says so: a
+ * header that reads 49,950 over 500 rows is a count the screen silently contradicts.
+ */
+export type PileFoot = {
+    kind: "more";
+    left: number;
+    next?: number;
+} | {
+    kind: "end";
+    shown: number;
+    count: number;
+};
+export declare function pileFoot<T>(pile: Pile<T>, canAsk: boolean): PileFoot | null;
 /** Cuántas filas hay en total. Suma los conteos del primer nivel, que ya
  *  incluyen los de abajo — no recorre las filas, porque puede no tenerlas. */
 export declare function pileCount<T>(piles: readonly Pile<T>[]): number;

package/dist/foundations/index.d.ts

@@ -9,7 +9,7 @@ export type { OpenTarget, Size, Surface, Tone } from "./types.js";
 export { SPANISH_COPY } from "./copy.es.js";
 export { flatten, loose, pick, pickAll, propsOf, slot, slotOf, type Slotted, } from "./slots.js";
 export { dateKey, dateLabel, grainName, monthName, } from "./calendar.js";
-export { GRAIN_ORDER, type GroupableField, type GroupGrain, type Grouping, type GroupLevel, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, type Pile, pileCount, pileIsOpen, pileItems, pileLabel, type PileLabelOf, type PileOf, pilesFrom, pilesOf, } from "./grouping.js";
+export { GRAIN_ORDER, type GroupableField, type GroupGrain, type Grouping, type GroupLevel, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, type Pile, pileCount, type PileFoot, pileFoot, pileIsOpen, pileItems, pileLabel, type PileLabelOf, type PileOf, pilesFrom, pilesOf, } from "./grouping.js";
 export { axisLabels, axisSpans, keyStarts, type Pivot, type PivotAxis, type PivotCell, type PivotCrossing, type PivotFold, pivotFrom, pivotIsEmpty, type PivotKey, type PivotLevel, type PivotMargin, type PivotMeasure, pivotOf, type PivotSource, type PivotSpec, } from "./pivot.js";
 export { downloadPivot, pivotSheet, type PivotSheetOptions, pivotXlsx, } from "./pivotSheet.js";
 export { STICKY_TOP, stickyReset, stickyTop, useScrollBox, useStickyLayer, } from "./sticky.js";

package/dist/foundations/index.js

@@ -23,7 +23,7 @@ export { dateKey, dateLabel, grainName, monthName, } from "./calendar.js";
 /* LA AGRUPACIÓN — el vocabulario, que hablan las dos capas: la lista arma el
    árbol de montones y la tabla lo dibuja. Vive acá y no en `contexts/list`
    porque una primitiva no puede importar de un contexto. */
-export { GRAIN_ORDER, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, pileCount, pileIsOpen, pileItems, pileLabel, pilesFrom, pilesOf, } from "./grouping.js";
+export { GRAIN_ORDER, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, pileCount, pileFoot, pileIsOpen, pileItems, pileLabel, pilesFrom, pilesOf, } from "./grouping.js";
 /* EL PIVOTE — el mismo reparto: el vocabulario acá, la grilla en `primitives`.
    Que los márgenes vengan de la base y que un agujero no sea un cero son reglas
    del CONTRATO, no del dibujo, y por eso viven de este lado. */

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/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/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>;
 };

package/dist/views/list/ListView.js

@@ -16,7 +16,7 @@ import { Breadcrumb } from "../../components/record/Breadcrumb.js";
 import { RecordTimeline } from "../../components/timeline/RecordTimeline.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { useDensity } from "../../foundations/density.js";
-import { pathKey, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
+import { pathKey, pileFoot, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
 import { pivotFrom, pivotIsEmpty } from "../../foundations/pivot.js";
 import { Button } from "../../primitives/button/Button.js";
 import { Empty, Failed, Skeleton } from "../../primitives/notice/Notice.js";
@@ -242,6 +242,11 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
        los decide la vista para la lista entera. */
     const first = items[0];
     const firstRow = first === undefined ? undefined : row(first);
+    /* The same foot the table draws: «Ver 50 más de 49.950», or «Se muestran 500 de …». */
+    function footOf(pile) {
+        const foot = pileFoot(pile, group?.onMore !== undefined);
+        return foot === null ? null : (_jsx(GroupMore, { foot: foot, depth: pile.depth, onMore: () => group?.onMore?.(pile) }));
+    }
     /** Los montones, con sus filas adentro. Se llama a sí misma porque el árbol
      *  tiene N niveles: un montón dibuja su encabezado y, adentro, o bien los
      *  montones de abajo o bien las filas — nunca las dos cosas. */
@@ -255,10 +260,7 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
                         ? null
                         : pile.piles.length > 0
                             ? renderPiles(pile.piles, nodes)
-                            : nodes(pile.items), open &&
-                        pile.piles.length === 0 &&
-                        pile.items.length < pile.count &&
-                        group?.onMore !== undefined ? (_jsx(GroupMore, { left: pile.count - pile.items.length, depth: pile.depth, onMore: () => group.onMore?.(pile) })) : null] }, key));
+                            : nodes(pile.items), open ? footOf(pile) : null] }, key));
         });
     }
     const reportRows = useMemo(() => reportRowsOf(piles, columns, row), [piles, columns, row]);
@@ -267,9 +269,14 @@ export function ListView({ items, keyOf, identity, crumbs, embedded = false, sur
             return nodes(ordered);
         return renderPiles(piles, nodes);
     }
+    const waysOf = (item) => ({
+        ...(press === undefined ? {} : { press: () => press(item) }),
+        ...(onPeek === undefined || choosing ? {} : { peek: () => onPeek(item) }),
+        ...(onOpen === undefined || choosing ? {} : { open: () => onOpen(item) }),
+    });
     const renderCard = (item) => {
         if (card !== undefined) {
-            return _jsx(Fragment, { children: card(item) }, keyOf(item));
+            return _jsx(Fragment, { children: card(item, waysOf(item)) }, keyOf(item));
         }
         const d = row(item);
         return (_jsx(RecordCard, { title: d.name, ...(d.tags === undefined ? {} : { tags: d.tags }), ...(d.meta === undefined ? {} : { meta: d.meta }), ...(press === undefined ? {} : { onOpen: () => press(item) }) }, keyOf(item)));

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

@@ -1,2 +1,2 @@
 export { List, type ListPresentProps, type ListProps } from "./List.js";
-export { type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type RowOf, } from "./types.js";
+export { type CardWays, type ListCrumb, type ListEmpty, type ListGroup, type ListPivot, type ListPresent, type ListReport, type ListSet, type ListSheet, type RowOf, } from "./types.js";

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

@@ -41,6 +41,20 @@ export type RowOf = {
     children?: ReactNode;
     actions?: ReactNode;
 };
+/**
+ * What a press on ONE card does in this list, already bound to its record.
+ *
+ * Context: a board's own card replaced the built-in one and lost, with it, the rule of what
+ * a press does — the application had to pass it by hand. It gets the same three ways as a
+ * `List.Present` (`ListSet`), so a card written by the domain answers a click like the
+ * list's own: `press` is the rule (choose, look or open, as the list decided); `peek` and
+ * `open` are the two ways in, absent while the list is choosing.
+ */
+export type CardWays = {
+    press?: () => void;
+    peek?: () => void;
+    open?: () => void;
+};
 /**
  * The set as a presentation receives it — what a `List.Present` draws from.
  *
@@ -286,8 +300,8 @@ export type ListViewProps<T extends object> = {
      *  columns that declare `input` get a control in that row. See `DataTable`'s header.
      *  While a record is being written the table shows even if the set is empty. */
     create?: DataTableCreate<T>;
-    /** The board presentation. */
-    card?: (item: T) => ReactNode;
+    /** The board presentation: the card of one record, with what a press on it does. */
+    card?: (item: T, ways: CardWays) => ReactNode;
     /** The board by stages: one column each, cards moved between them. */
     boardStages?: BoardStages<T>;
     /** The calendar presentation: when each record happens. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",