@sincpro/web-ui 1.4.0 → 1.6.0

package/dist/components/lines/LineItems.d.ts

@@ -2,7 +2,7 @@ import { type FormMode } from "../../foundations/form.js";
 import { type DialogContext } from "../../primitives/dialog/Dialog.js";
 import type { FlagTone } from "../../primitives/notice/Flag.js";
 import type { DataColumn } from "../../primitives/table/DataTable.js";
-import { type EditColumn, type EditLayout } from "../../primitives/table/EditableTable.js";
+import { type EditCellState, type EditColumn, type EditLayout, type EditRowState } from "../../primitives/table/EditableTable.js";
 import { type TotalsProps, type TotalsRow } from "../../primitives/value/Totals.js";
 import { type ReactNode } from "react";
 /**
@@ -41,6 +41,8 @@ export type LineEditorState = {
 export type LineItemsProps<T> = {
     lines: readonly T[];
     columns: readonly LineItemColumn<T>[];
+    /** The line's key on this screen — LOCAL, not its id on the server: a new line gets one
+     *  when it is made and keeps it after saving. See «A line's key is local» above. */
     getLineId: (line: T) => string;
     /** How a line is named — in the removal notice, the editor's header and for the
      *  screen reader next to each row's buttons. Defaults to the first column's text. */
@@ -52,7 +54,8 @@ export type LineItemsProps<T> = {
     onChange?: (id: string, next: T) => void;
     /** A new line, already filled in the editor (or blank, without an editor). */
     onAdd?: (line: T) => void;
-    /** The blank line «Agregar una línea» starts from. Required for adding. */
+    /** The blank line «Agregar una línea» starts from. Required for adding. It carries its
+     *  local key from here — `{ key: crypto.randomUUID(), … }` — since it has no server id. */
     newLine?: () => T;
     /** A line was removed. It is gone at once; the notice offers to undo it. */
     onRemove?: (id: string) => void;
@@ -93,6 +96,14 @@ export type LineItemsProps<T> = {
         detail?: ReactNode;
         owner?: string;
     } | null;
+    /** What each cell is on each line — readonly, required, hidden, its error, its warning
+     *  («precio bajo el costo» on the price) — as the backend says it per line and field.
+     *  `EditableTable`'s `cellState`, passed through. The error reaches the cell's control as
+     *  `aria-invalid` and `aria-describedby`. */
+    cellState?: (line: T, columnId: string) => EditCellState | null;
+    /** What a whole line is: `readonly` is read in place and offers no pencil (a delivered
+     *  line). A line that should not be seen is not passed in `lines`. */
+    rowState?: (line: T) => EditRowState | null;
     /** Sections and notes among the lines. See the file's header. */
     structure?: LineStructure<T>;
     /** The lines' order is the document's (Odoo's `sequence`): a grip at the start of each line
@@ -111,4 +122,4 @@ export type LineItemsProps<T> = {
  * removing asked first, what an empty document said. One component, built on
  * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
  */
-export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;
+export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, cellState, rowState, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;

package/dist/components/lines/LineItems.js

@@ -38,7 +38,7 @@ function plain(v) {
  * removing asked first, what an empty document said. One component, built on
  * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
  */
-export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }) {
+export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, cellState, rowState, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }) {
     const copy = useUiCopy();
     const toast = useOptionalToast();
     const read = useFormMode(mode) === "read";
@@ -259,7 +259,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                    and a trash can lit on each of twenty lines are forty invitations. They
                    fade instead of unmounting, so Tab still reaches them. Pressing them does
                    not put the row into in-place editing. */
-                _jsxs("span", { "data-line": id, className: "flex items-center justify-end gap-0.5 whitespace-nowrap opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 in-data-stacked:opacity-100", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { id: nameId, className: "sr-only", children: labelOf(line) }), canEdit && kindOf(line) === "line" ? (_jsx(IconButton, { icon: Pencil, label: copy.lines.edit, "aria-describedby": nameId, haspopup: "dialog", onClick: () => openLine(id, line) })) : null, canRemove ? (_jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", "aria-describedby": nameId, onClick: () => remove(line) })) : null] }));
+                _jsxs("span", { "data-line": id, className: "flex items-center justify-end gap-0.5 whitespace-nowrap opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 in-data-stacked:opacity-100", onClick: (e) => e.stopPropagation(), children: [_jsx("span", { id: nameId, className: "sr-only", children: labelOf(line) }), canEdit && kindOf(line) === "line" && rowState?.(line)?.readonly !== true ? (_jsx(IconButton, { icon: Pencil, label: copy.lines.edit, "aria-describedby": nameId, haspopup: "dialog", onClick: () => openLine(id, line) })) : null, canRemove ? (_jsx(IconButton, { icon: Trash2, label: copy.lines.remove, tone: "danger", "aria-describedby": nameId, onClick: () => remove(line) })) : null] }));
             },
         });
     }
@@ -283,7 +283,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                                             invalid: false,
                                         }, children: _jsx(SearchField, { value: query, onChange: setQuery, placeholder: copy.lines.search }) })] })) : null, _jsx("span", { className: "text-meta text-muted tabular-nums", "aria-live": "polite", children: count }), columnControl.hasOptional || addButton !== null ? (_jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(ColumnsMenu, { control: columnControl }), addButton] })) : null] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: lines.length === 0
                             ? copy.lines.empty
-                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
+                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(cellState === undefined ? {} : { cellState }), ...(rowState === undefined ? {} : { rowState }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
                             ? /* A blank row nobody wrote in is taken back without a notice: nobody
                                  removed anything, so there is nothing to undo. */
                                 { onDiscard: onRemove }
@@ -291,8 +291,10 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                             ? {
                                 onOpen: (id) => {
                                     const line = lines.find((l) => getLineId(l) === id);
-                                    if (line !== undefined)
+                                    /* A read-only line opens no form to change it. */
+                                    if (line !== undefined && rowState?.(line)?.readonly !== true) {
                                         openLine(id, line);
+                                    }
                                 },
                             }
                             : {}), ...(canChange && columns.some((c) => c.edit !== undefined)

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/form.d.ts

@@ -18,7 +18,24 @@ export type FieldIds = {
     invalid: boolean;
 };
 export declare const FieldIdsContext: import("react").Context<FieldIds | null>;
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
+/**
+ * What a place WITHOUT a `Field` says to the control in it: what describes it and whether it
+ * is in error — no id, no label.
+ *
+ * Context: a cell of an editable table has no label of its own (its control carries an
+ * `aria-label`, the column's name) but it can be wrong — «la cantidad supera el stock» — and
+ * that has to reach the control the same way a field's error does, or the error is a red
+ * cell nobody hears. The table provides this around each control it edits; every control
+ * that reads `useFieldIds` (the package's and an application's own) gets `aria-invalid` and
+ * `aria-describedby` without the table knowing what control it is.
+ */
+export type ControlState = {
+    describedBy?: string;
+    invalid?: boolean;
+};
+export declare const ControlStateContext: import("react").Context<ControlState | null>;
+/** The ids of the enclosing `Field` — or, outside one, the state of the place the control
+ *  sits in (a cell) — resolved against the control's own props. */
 export declare function useFieldIds(own: {
     id?: string;
     describedBy?: string;

package/dist/foundations/form.js

@@ -2,14 +2,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 export const FieldIdsContext = createContext(null);
-/** The ids of the enclosing `Field`, resolved against the control's own props. */
+export const ControlStateContext = createContext(null);
+/** The ids of the enclosing `Field` — or, outside one, the state of the place the control
+ *  sits in (a cell) — resolved against the control's own props. */
 export function useFieldIds(own) {
     const field = useContext(FieldIdsContext);
+    const place = useContext(ControlStateContext);
     return {
         id: own.id ?? field?.id,
         labelledBy: field?.labelId,
-        describedBy: own.describedBy ?? field?.describedBy,
-        invalid: own.invalid ?? field?.invalid ?? false,
+        describedBy: own.describedBy ?? field?.describedBy ?? place?.describedBy,
+        invalid: own.invalid ?? field?.invalid ?? place?.invalid ?? false,
     };
 }
 const Ctx = createContext("edit");

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;