@sincpro/web-ui 1.6.0 → 1.7.1

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

@@ -1,25 +1,30 @@
 import type { Surface } from "../../foundations/types.js";
-import type { SortState } from "../../primitives/table/Table.js";
+import { type SortState } from "../../primitives/table/sorting.js";
 /**
- * ORDENAR, cuando no hay encabezados donde hacer clic.
+ * ORDENAR — por uno o por varios campos, desde la barra.
  *
  * Context: ordenar era una capacidad de `DataTable` y de nadie más. Se hacía
  * clic en el encabezado de la columna, que es la forma correcta **cuando hay
  * encabezados**. En filas, en tablero y en la planilla no los hay, así que
  * cambiar de presentación no perdía sólo el orden puesto: perdía la posibilidad
- * de ordenar. Es exactamente el mismo drift que tenía la agrupación.
+ * de ordenar.
  *
  * El orden es del CONJUNTO y no de la presentación, igual que los niveles y que
  * lo plegado. Por eso el control vive en la barra y no adentro de la tabla, y
  * por eso la tabla sigue teniendo además sus encabezados: son dos puertas a lo
  * mismo, y la de los encabezados es más rápida cuando existe.
  *
- * ── Por qué es un `Menu` y el agrupador no ──────────────────────────
+ * ── Varios criterios, y por eso un panel y no un menú ───────────────
  *
- * Porque ordenar SÍ es elegir una opción: un campo y una dirección. No hay orden
- * ni jerarquía que expresar —ordenar por dos campos a la vez es un desempate,
- * que es otra pregunta y la hace el motor— así que una lista de tildes alcanza y
- * no hace falta un editor.
+ * Se decía que ordenar por dos campos era «un desempate que hace el motor» y
+ * que alcanzaba con elegir uno. La gente pidió lo contrario en la pantalla: por
+ * fecha, y en la misma fecha por cliente, y después por producto. El motor ya
+ * lo aceptaba (`order: [...]`); faltaba poder decirlo. Un orden de N campos
+ * tiene ORDEN entre ellos —el segundo sólo decide entre las filas que el
+ * primero dejó iguales—, y eso un menú de tildes no lo expresa: hace falta una
+ * lista que se reordena. Es la de React Aria (`GridList` + `useDragAndDrop`):
+ * se arrastra con el mouse, y con el teclado desde el asa (Enter, flechas,
+ * Enter), anunciado.
  */
 export type SortField<T = unknown> = {
     field: string;
@@ -33,7 +38,7 @@ export type SortField<T = unknown> = {
      * falso— así que ahí el orden viaja en la lectura y esto sólo lo refleja.
      */
     value?: (item: T) => string | number | null | undefined;
-    /** Qué quiere decir «ascendente» para este campo. Sin esto, «A → Z».
+    /** Qué quiere decir «ascendente» para este campo. Sin esto, «ascendente».
      *  Una fecha asciende de vieja a nueva y un importe de chico a grande, y
      *  decirlo evita el clic de prueba. */
     ascLabel?: string;
@@ -42,21 +47,20 @@ export type SortField<T = unknown> = {
 export type SortMenuProps = {
     /** Por qué campos se puede ordenar. Sin ninguno, el control no se dibuja. */
     fields: readonly SortField<never>[];
-    sort: SortState | null;
-    onSortChange: (next: SortState | null) => void;
+    /** El orden, de afuera hacia adentro. Vacío es «como llegaron». */
+    sort: readonly SortState[];
+    onSortChange: (next: SortState[]) => void;
     surface?: Surface;
 };
 /**
- * Las filas, ordenadas acá.
+ * Las filas, ordenadas acá, por cada criterio en su orden.
  *
- * Sólo cuando el campo activo declara `value`; si no, se devuelven tal cual —
- * ordenar una página de un conjunto que se pagina afuera produce un orden que es
- * mentira, porque ordena las doce que llegaron y no las ciento ochenta y siete.
+ * Sólo por los campos que declaran `value`; los demás se saltean —ordenar una
+ * página de un conjunto que se pagina afuera produce un orden que es mentira,
+ * porque ordena las doce que llegaron y no las ciento ochenta y siete. Sin
+ * ningún criterio legible, se devuelven tal cual.
  *
- * Los faltantes van SIEMPRE al final, suba o baje el orden. Es lo que hace
- * cualquier planilla, y la razón es que un vacío no es «el más chico»: es la
- * ausencia de respuesta, y ponerlo primero al invertir el orden llena la primera
- * pantalla con las filas que menos dicen.
+ * Los faltantes van SIEMPRE al final, suba o baje el orden (ver `compareBy`).
  */
-export declare function sortItems<T>(items: readonly T[], fields: readonly SortField<T>[], sort: SortState | null | undefined): readonly T[];
+export declare function sortItems<T>(items: readonly T[], fields: readonly SortField<T>[], sort: readonly SortState[] | undefined): readonly T[];
 export declare function SortMenu({ fields, sort, onSortChange, surface }: SortMenuProps): import("react").JSX.Element | null;

package/dist/components/listing/SortMenu.js

@@ -1,105 +1,65 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useUiCopy } from "../../foundations/copy.js";
-import { Menu } from "../../primitives/menu/Menu.js";
-import { ArrowDownUp, ArrowDownWideNarrow, ArrowUpNarrowWide } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Menu, menuTriggerClasses } from "../../primitives/menu/Menu.js";
+import { Popover } from "../../primitives/overlay/Popover.js";
+import { compareBy, flipSort, moveSort, } from "../../primitives/table/sorting.js";
+import { ArrowDownUp, ArrowDownWideNarrow, ArrowUpNarrowWide, ChevronDown, GripVertical, Plus, X, } from "lucide-react";
+import { Button as AriaButton, Dialog, DialogTrigger, GridList, GridListItem, useDragAndDrop, } from "react-aria-components";
 /**
- * Las filas, ordenadas acá.
+ * Las filas, ordenadas acá, por cada criterio en su orden.
  *
- * Sólo cuando el campo activo declara `value`; si no, se devuelven tal cual —
- * ordenar una página de un conjunto que se pagina afuera produce un orden que es
- * mentira, porque ordena las doce que llegaron y no las ciento ochenta y siete.
+ * Sólo por los campos que declaran `value`; los demás se saltean —ordenar una
+ * página de un conjunto que se pagina afuera produce un orden que es mentira,
+ * porque ordena las doce que llegaron y no las ciento ochenta y siete. Sin
+ * ningún criterio legible, se devuelven tal cual.
  *
- * Los faltantes van SIEMPRE al final, suba o baje el orden. Es lo que hace
- * cualquier planilla, y la razón es que un vacío no es «el más chico»: es la
- * ausencia de respuesta, y ponerlo primero al invertir el orden llena la primera
- * pantalla con las filas que menos dicen.
+ * Los faltantes van SIEMPRE al final, suba o baje el orden (ver `compareBy`).
  */
 export function sortItems(items, fields, sort) {
-    if (sort === null || sort === undefined)
+    if (sort === undefined || sort.length === 0)
         return items;
-    const field = fields.find((one) => one.field === sort.key);
-    if (field?.value === undefined)
+    const read = (key) => fields.find((one) => one.field === key)?.value;
+    if (!sort.some((one) => read(one.key) !== undefined))
         return items;
-    const read = field.value;
-    const sign = sort.direction === "asc" ? 1 : -1;
-    return [...items].sort((a, b) => {
-        const left = read(a);
-        const right = read(b);
-        const leftMissing = left === null || left === undefined || left === "";
-        const rightMissing = right === null || right === undefined || right === "";
-        if (leftMissing && rightMissing)
-            return 0;
-        if (leftMissing)
-            return 1;
-        if (rightMissing)
-            return -1;
-        if (typeof left === "number" && typeof right === "number")
-            return (left - right) * sign;
-        return String(left).localeCompare(String(right)) * sign;
-    });
+    return [...items].sort(compareBy(sort, read));
 }
 export function SortMenu({ fields, sort, onSortChange, surface }) {
     const copy = useUiCopy();
+    const fieldOf = (key) => fields.find((one) => one.field === key);
+    const labelOf = (key) => fieldOf(key)?.label ?? key;
+    const { dragAndDropHooks } = useDragAndDrop({
+        getItems: (keys) => [...keys].map((key) => ({ "text/plain": labelOf(String(key)) })),
+        onReorder: (event) => onSortChange(moveSort(sort, new Set([...event.keys].map(String)), String(event.target.key), event.target.dropPosition === "before" ? "before" : "after")),
+    });
     if (fields.length === 0)
         return null;
-    const current = fields.find((one) => one.field === sort?.key);
-    const groups = [
-        {
-            label: copy.sorting.by,
-            options: fields.map((one) => ({
-                id: one.field,
-                label: one.label,
-                checked: one.field === sort?.key,
-            })),
-        },
-        /* La dirección sólo cuando hay algo ordenado: «descendente» sin campo no
-           ordena nada, y una opción que no hace nada es una opción que se prueba. */
-        ...(current === undefined
-            ? []
-            : [
-                {
-                    options: [
-                        {
-                            id: "__asc__",
-                            label: current.ascLabel ?? copy.sorting.asc,
-                            icon: ArrowUpNarrowWide,
-                            checked: sort?.direction === "asc",
-                        },
-                        {
-                            id: "__desc__",
-                            label: current.descLabel ?? copy.sorting.desc,
-                            icon: ArrowDownWideNarrow,
-                            checked: sort?.direction === "desc",
-                        },
-                    ],
-                },
-                { options: [{ id: "__none__", label: copy.sorting.clear }] },
-            ]),
-    ];
-    return (_jsx(Menu, { label: current === undefined ? copy.sorting.label : current.label, icon: sort === null || sort === undefined
-            ? ArrowDownUp
-            : sort.direction === "asc"
-                ? ArrowUpNarrowWide
-                : ArrowDownWideNarrow, groups: groups, active: sort !== null && sort !== undefined, size: "sm", width: "sm", closeOnSelect: false, ...(surface === undefined ? {} : { surface }), onSelect: (id) => {
-            if (id === "__none__")
-                return onSortChange(null);
-            if (id === "__asc__") {
-                return onSortChange(sort === null ? null : { ...sort, direction: "asc" });
-            }
-            if (id === "__desc__") {
-                return onSortChange(sort === null ? null : { ...sort, direction: "desc" });
-            }
-            /* Volver a elegir el campo que ya está puesto DA VUELTA la dirección, que
-               es lo que hace el clic en un encabezado. Sin eso, invertir el orden son
-               dos gestos en un menú y uno en la tabla — la misma capacidad costando
-               distinto según la presentación. */
-            if (sort?.key === id) {
-                return onSortChange({
-                    key: id,
-                    direction: sort.direction === "asc" ? "desc" : "asc",
-                });
-            }
-            onSortChange({ key: id, direction: "asc" });
-        } }));
+    const first = sort[0];
+    const label = first === undefined
+        ? copy.sorting.label
+        : sort.length === 1
+            ? labelOf(first.key)
+            : fillCopy(copy.sorting.more, { label: labelOf(first.key), count: sort.length - 1 });
+    const TriggerIcon = first === undefined
+        ? ArrowDownUp
+        : first.direction === "asc"
+            ? ArrowUpNarrowWide
+            : ArrowDownWideNarrow;
+    const left = fields.filter((one) => !sort.some((s) => s.key === one.field));
+    return (_jsxs(DialogTrigger, { children: [_jsxs(AriaButton, { className: ({ isPressed, isFocusVisible }) => menuTriggerClasses({
+                    ...(surface === undefined ? {} : { surface }),
+                    active: sort.length > 0,
+                    open: isPressed,
+                    focusVisible: isFocusVisible,
+                }), children: [_jsx(TriggerIcon, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }), label, _jsx(ChevronDown, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true })] }), _jsx(Popover, { placement: "bottom start", className: "w-80", children: _jsxs(Dialog, { "aria-label": copy.sorting.label, className: "flex flex-col gap-1 p-2 outline-0", children: [sort.length === 0 ? (_jsx("p", { className: "px-1 py-1 text-meta text-muted", children: copy.sorting.none })) : (_jsx(GridList, { "aria-label": copy.sorting.label, items: sort.map((one, index) => ({ ...one, id: one.key, index })), dragAndDropHooks: dragAndDropHooks, className: "flex flex-col outline-0", children: (item) => {
+                                const field = fieldOf(item.key);
+                                const name = labelOf(item.key);
+                                const direction = item.direction === "asc"
+                                    ? (field?.ascLabel ?? copy.sorting.asc)
+                                    : (field?.descLabel ?? copy.sorting.desc);
+                                const DirectionIcon = item.direction === "asc" ? ArrowUpNarrowWide : ArrowDownWideNarrow;
+                                return (_jsxs(GridListItem, { id: item.id, textValue: `${item.index + 1}. ${name}, ${direction}`, className: "flex min-w-0 items-center gap-1.5 rounded-control px-1 py-1 outline-0 transition-colors duration-(--duration-instant) data-dragging:opacity-50 data-drop-target:bg-primary/8 data-focus-visible:outline-2 data-focus-visible:-outline-offset-2 data-focus-visible:outline-primary data-hovered:bg-ink/4", children: [_jsx(AriaButton, { slot: "drag", "aria-label": fillCopy(copy.sorting.move, { field: name }), className: "inline-flex shrink-0 cursor-grab items-center rounded-mark p-0.5 text-muted outline-0 hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-primary", children: _jsx(GripVertical, { className: "size-(--size-icon-sm)", strokeWidth: 2 }) }), _jsx("span", { className: "w-16 shrink-0 text-micro text-muted", children: item.index === 0 ? copy.sorting.by : copy.sorting.then }), _jsx("span", { className: "min-w-0 flex-1 truncate text-meta text-ink", children: name }), _jsxs(AriaButton, { "aria-label": `${fillCopy(copy.sorting.flip, { field: name })}: ${direction}`, onPress: () => onSortChange(flipSort(sort, item.index)), className: "inline-flex shrink-0 items-center gap-1 rounded-mark px-1 py-0.5 text-micro text-primary outline-0 hover:bg-primary/8 data-focus-visible:outline-2 data-focus-visible:outline-primary", children: [_jsx(DirectionIcon, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }), direction] }), _jsx(AriaButton, { "aria-label": fillCopy(copy.sorting.remove, { field: name }), onPress: () => onSortChange(sort.filter((_, i) => i !== item.index)), className: "inline-flex shrink-0 items-center rounded-mark p-0.5 text-muted outline-0 hover:bg-ink/6 hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-primary", children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }) })] }));
+                            } })), _jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-line pt-2", children: [left.length === 0 ? (_jsx("span", {})) : (_jsx(Menu, { label: copy.sorting.add, icon: Plus, variant: "text", chevron: false, width: "sm", groups: [
+                                        { options: left.map((one) => ({ id: one.field, label: one.label })) },
+                                    ], onSelect: (id) => onSortChange([...sort, { key: id, direction: "asc" }]) })), sort.length === 0 ? null : (_jsx(AriaButton, { onPress: () => onSortChange([]), className: "rounded-mark px-1.5 py-0.5 text-micro text-muted outline-0 hover:bg-ink/6 hover:text-ink data-focus-visible:outline-2 data-focus-visible:outline-primary", children: copy.sorting.clear }))] })] }) })] }));
 }

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

@@ -2,7 +2,8 @@ export { type ColumnControl, type ColumnSpec, defaultVisibleIds, reconcileVisibl
 export { ColumnsMenu, specsFromColumns, } from "./ColumnsMenu.js";
 export { Listing } from "./Listing.js";
 export { type ListIdentity, ListingBar } from "./ListingBar.js";
-export { type ClaimedField, claimedFields, columnsFromModel, readModelValue, } from "./modelColumns.js";
+export { type ModelCellKind } from "./modelCells.js";
+export { type ClaimedField, claimedFields, columnsFromModel, modelCellKind, readModelValue, } from "./modelColumns.js";
 export { type CursorSource, DEFAULT_PAGE_SIZE, PAGE_SIZES, type Pages, type PaginationBridge, type ServerPage, useCursorPagination, usePagination, } from "./pages.js";
 export { Pagination } from "./Pagination.js";
 export { RecordLink } from "./RecordLink.js";

package/dist/components/listing/index.js

@@ -4,7 +4,8 @@ export { defaultVisibleIds, reconcileVisible, toggleColumn, useColumnControl, vi
 export { ColumnsMenu, specsFromColumns, } from "./ColumnsMenu.js";
 export { Listing } from "./Listing.js";
 export { ListingBar } from "./ListingBar.js";
-export { claimedFields, columnsFromModel, readModelValue, } from "./modelColumns.js";
+export {} from "./modelCells.js";
+export { claimedFields, columnsFromModel, modelCellKind, readModelValue, } from "./modelColumns.js";
 export { DEFAULT_PAGE_SIZE, PAGE_SIZES, useCursorPagination, usePagination, } from "./pages.js";
 export { Pagination } from "./Pagination.js";
 export { RecordLink } from "./RecordLink.js";

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

@@ -0,0 +1,7 @@
+/** How a model field is drawn. `text` is today's behaviour, for any type not known here. */
+export type ModelCellKind = "text" | "number" | "email" | "url" | "phone" | "duration" | "boolean" | "date" | "datetime";
+/** One cell of a model column. `value` is what `readModelValue` read — never `null` here. */
+export declare function ModelCell({ kind, value, }: {
+    kind: ModelCellKind;
+    value: string | number | boolean;
+}): import("react").JSX.Element;

package/dist/components/listing/modelCells.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { emailHref, telHref, urlHref, urlLabel, } from "../../primitives/field/contact.js";
+import { formatDuration } from "../../primitives/field/duration.js";
+import { DateValue } from "../../primitives/value/DateValue.js";
+import { Numeric } from "../../primitives/value/Value.js";
+import { Check } from "lucide-react";
+const LINK = "block truncate rounded-mark text-primary underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary";
+function Plain({ text }) {
+    return (_jsx("span", { className: "block truncate text-muted", title: text, children: text }));
+}
+/** A link in a cell, or the plain text when the value does not make one. */
+function Link({ text, href, label, external = false, }) {
+    const copy = useUiCopy();
+    if (href === null)
+        return _jsx(Plain, { text: text });
+    return (_jsxs("a", { href: href, title: text, className: LINK, 
+        /* The row opens its record on a click; writing to its email must not ALSO open it. */
+        onClick: (event) => event.stopPropagation(), ...(external ? { target: "_blank", rel: "noopener noreferrer" } : {}), children: [label ?? text, external ? _jsxs("span", { className: "sr-only", children: [" (", copy.field.newTab, ")"] }) : null] }));
+}
+/** A yes/no in words: a check alone is not read by everyone the same way, and «no» needs
+ *  no icon — an empty mark next to every false row would only add noise to the column. */
+function YesNo({ value }) {
+    const copy = useUiCopy();
+    if (!value)
+        return _jsx("span", { className: "text-muted", children: copy.table.no });
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 text-ink", children: [_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) text-good", strokeWidth: 2.5 }), copy.table.yes] }));
+}
+/** One cell of a model column. `value` is what `readModelValue` read — never `null` here. */
+export function ModelCell({ kind, value, }) {
+    const text = String(value);
+    switch (kind) {
+        case "number":
+            /* A figure in the locale's digits and right aligned, so a column of amounts lines up
+               — never «1234.5» as text. */
+            return typeof value === "number" ? (_jsx(Numeric, { value: value, format: "decimal" })) : (_jsx(Plain, { text: text }));
+        case "email":
+            return _jsx(Link, { text: text, href: emailHref(text) });
+        case "phone":
+            return _jsx(Link, { text: text, href: telHref(text) });
+        case "url":
+            return _jsx(Link, { text: text, href: urlHref(text), label: urlLabel(text), external: true });
+        case "duration":
+            return typeof value === "number" ? (
+            /* Right aligned like `Numeric`: a column of hours lines up by the colon. */
+            _jsx("span", { className: "block text-right text-body tabular-nums whitespace-nowrap text-ink", children: formatDuration(value) })) : (_jsx(Plain, { text: text }));
+        case "boolean":
+            return typeof value === "boolean" ? _jsx(YesNo, { value: value }) : _jsx(Plain, { text: text });
+        case "date":
+        case "datetime":
+            return typeof value === "boolean" ? (_jsx(Plain, { text: text })) : (_jsx(DateValue, { when: value, format: kind === "date" ? "date" : "relative" }));
+        default:
+            return _jsx(Plain, { text: text });
+    }
+}

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

@@ -1,3 +1,4 @@
+import { type ModelCellKind } from "./modelCells.js";
 import { type ModelDefinition } from "../search/model.js";
 import type { DataColumn } from "../../primitives/table/DataTable.js";
 /** Qué campo del modelo muestra una columna declarada a mano.
@@ -28,6 +29,14 @@ export declare function claimedFields(columns: readonly ClaimedField[]): Set<str
  *  Las fechas se dejan como vienen —ISO— porque en ISO el orden alfabético ES
  *  el cronológico, y así la columna ordena bien sin parsear nada. */
 export declare function readModelValue(raw: unknown): string | number | boolean | null;
+/** How a field of the model is drawn, by its `type` and in any case — «Email» and `email` are
+ *  the same field. A type not known here stays `text`, exactly as before.
+ *
+ *      in    "monetary"      out  "number"
+ *      in    "float_time"    out  "duration"   «8:30», not «8.5»
+ *      in    "jsonb"         out  "text"
+ */
+export declare function modelCellKind(type: string): ModelCellKind;
 /**
  * Las columnas declaradas, más una por cada campo del modelo que ninguna
  * contestaba.

package/dist/components/listing/modelColumns.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { fieldLabel } from "../search/model.js";
+import { ModelCell } from "./modelCells.js";
+import { fieldLabel, isNumericType, } from "../search/model.js";
+import { formatDuration } from "../../primitives/field/duration.js";
 /** Los campos que las columnas declaradas ya contestan.
  *
  *      in            [{id:"rows", field:"row_count"}, {id:"name"}]
@@ -38,14 +40,45 @@ export function readModelValue(raw) {
         return raw === "" ? null : raw;
     return JSON.stringify(raw);
 }
+/** The names an engine publishes for each kind it knows how to draw — Odoo's (`char` with a
+ *  widget aside, `float_time`, `boolean`, `date`, `datetime`) and the plain ones a schema
+ *  uses (`email`, `url`, `phone`, `duration`, `bool`, `timestamp`). */
+const KIND_OF_TYPE = {
+    email: "email",
+    mail: "email",
+    url: "url",
+    uri: "url",
+    website: "url",
+    phone: "phone",
+    tel: "phone",
+    float_time: "duration",
+    duration: "duration",
+    boolean: "boolean",
+    bool: "boolean",
+    date: "date",
+    datetime: "datetime",
+    timestamp: "datetime",
+};
+/** How a field of the model is drawn, by its `type` and in any case — «Email» and `email` are
+ *  the same field. A type not known here stays `text`, exactly as before.
+ *
+ *      in    "monetary"      out  "number"
+ *      in    "float_time"    out  "duration"   «8:30», not «8.5»
+ *      in    "jsonb"         out  "text"
+ */
+export function modelCellKind(type) {
+    if (isNumericType(type))
+        return "number";
+    return KIND_OF_TYPE[type.toLowerCase()] ?? "text";
+}
 /** Cuánto ancho merece un campo, por su tipo. Una huella son 64 caracteres y
  *  una cuenta son seis: darles el mismo ancho arruina las dos. */
-function widthFor(type) {
-    if (type === "integer" || type === "number")
+function widthFor(kind) {
+    if (kind === "number" || kind === "duration")
         return 120;
-    if (type === "datetime" || type === "date")
+    if (kind === "datetime" || kind === "date")
         return 190;
-    if (type === "boolean")
+    if (kind === "boolean")
         return 90;
     return 260;
 }
@@ -76,27 +109,39 @@ export function columnsFromModel(declared, model, locale = "default") {
     for (const [field, definition] of Object.entries(model.fields)) {
         if (claimed.has(field))
             continue;
-        const numeric = definition.type === "integer" || definition.type === "number";
+        const kind = modelCellKind(definition.type);
+        /* A duration is a number of hours: it sorts, sums and aligns as one. */
+        const numeric = kind === "number" || kind === "duration";
+        const read = (row) => readModelValue(row[field]);
         extra.push({
             id: field,
             field,
             header: fieldLabel(model, field, locale),
-            value: (row) => readModelValue(row[field]),
-            /* El valor entero en el `title`: una huella de 64 caracteres no entra en
-               ninguna celda, y cortada no sirve para nada — salvo para pasar el mouse
-               por encima y leerla. */
+            value: read,
+            /* Drawn by what the model says the field IS (`modelCells.tsx`); a plain text keeps
+               its whole value in the `title` — a 64 character fingerprint fits no cell. */
             cell: (row) => {
-                const value = readModelValue(row[field]);
+                const value = read(row);
                 if (value === null)
                     return _jsx("span", { className: "text-subtle", children: "\u2014" });
-                const text = String(value);
-                return (_jsx("span", { className: "block truncate text-muted", title: text, children: text }));
+                return _jsx(ModelCell, { kind: kind, value: value });
             },
+            /* Where a node cannot be drawn — the sheet, the footer's total — a duration still
+               reads «42:30» and never «42.5». */
+            ...(kind === "duration"
+                ? {
+                    format: formatDuration,
+                    text: (row) => {
+                        const value = read(row);
+                        return typeof value === "number" ? formatDuration(value) : String(value ?? "");
+                    },
+                }
+                : {}),
             ...(numeric ? { numeric: true } : {}),
             sortable: definition.sortable,
             optional: true,
             defaultHidden: true,
-            width: widthFor(definition.type),
+            width: widthFor(kind),
         });
     }
     return [...declared, ...extra];

package/dist/components/search/index.d.ts

@@ -5,6 +5,6 @@ export { formatJson, JsonEditor } from "./JsonEditor.js";
 export { SearchBar, type SearchBarProps, type SearchFacet, } from "./SearchBar.js";
 export { at, criteriaId, type CriteriaJoin, type CriteriaPath, filterCriteria, filtersOf, type GroupCriteria, groupCriteria, groupsOf, hasNamed, levelsOf, nextJoin, removeAt, replaceAt, type SearchCriteria, toggleNamed, whereOf, withLevels, } from "./criteria.js";
 export { CriteriaChips, type CriteriaChipsProps, } from "./CriteriaChips.js";
-export { type FieldDefinition, fieldLabel, filterableNames, isFilterable, type ModelDefinition, type ModelTranslations, } from "./model.js";
+export { type FieldDefinition, fieldLabel, filterableNames, isFilterable, isNumericType, type ModelDefinition, type ModelTranslations, } from "./model.js";
 export { answers, defaultOp, describeCondition, globToLike, opLabel, type QueryDraft, type QueryField, queryFields, type QueryKind, type QuerySuggestion, readTyped, suggest, type TypedValue, valueFor, type ValueShape, withoutValue, } from "./query.js";
 export { type DatePeriod, datePeriodGroup, datePeriodOptions, type DateRange, periodId, readPeriodId, recentMonths, recentYears, resolvePeriods, } from "./datePeriods.js";

package/dist/components/search/index.js

@@ -12,7 +12,7 @@ export { CriteriaChips, } from "./CriteriaChips.js";
 /* EL VOCABULARIO DEL MODELO — lo que el servidor publica sobre sus campos. Lo
    hablan el constructor de filtros, el de criterias y la barra de búsqueda, así
    que vive aparte de los tres. */
-export { fieldLabel, filterableNames, isFilterable, } from "./model.js";
+export { fieldLabel, filterableNames, isFilterable, isNumericType, } from "./model.js";
 /* LA GRAMÁTICA DE LA BARRA: qué se puede preguntar sobre un modelo, y con qué.
    Tres pasos —campo, operador, valor— que se pueden escribir en uno. */
 export { answers, defaultOp, describeCondition, globToLike, opLabel, queryFields, readTyped, suggest, valueFor, withoutValue, } from "./query.js";

package/dist/components/search/model.d.ts

@@ -23,6 +23,7 @@ export interface FieldDefinition {
     /** Los valores que un campo de enum puede tomar — de ahí sale un `<select>`. */
     choices?: readonly unknown[];
 }
+export declare function isNumericType(type: string): boolean;
 /** Si este campo se puede usar en un `where`, un `order` o un `grouping.by` directamente.
  *  `ops.length === 0` alcanza como señal: la publican tanto `embedded` como los tres
  *  relacionales, así que no hace falta mirar `kind` aparte. */

package/dist/components/search/model.js

@@ -13,6 +13,13 @@
  *  para saber cómo se llama un operador. Un vocabulario compartido no puede
  *  colgar de uno de los que lo hablan.
  * ==================================================================== */
+/** The types an engine publishes for an AMOUNT — integer, float, decimal, money. A search
+ *  compares them as numbers and a listing aligns and formats them as numbers: «monetary»
+ *  read as text made «total <= 1000» impossible and drew «1234.5» flush left. */
+const NUMERIC_TYPES = new Set(["integer", "number", "float", "decimal", "monetary", "money"]);
+export function isNumericType(type) {
+    return NUMERIC_TYPES.has(type.toLowerCase());
+}
 /** Si este campo se puede usar en un `where`, un `order` o un `grouping.by` directamente.
  *  `ops.length === 0` alcanza como señal: la publican tanto `embedded` como los tres
  *  relacionales, así que no hace falta mirar `kind` aparte. */

package/dist/components/search/query.js

@@ -1,4 +1,4 @@
-import { fieldLabel, isFilterable, } from "./model.js";
+import { fieldLabel, isFilterable, isNumericType, } from "./model.js";
 import { currentCopy, fillCopy } from "../../foundations/copy.js";
 /**
  * Las palabras que, después del numeral, abren un GRUPO en vez de nombrar un
@@ -97,7 +97,6 @@ export function readTyped(text) {
 export function globToLike(value) {
     return value.replace(/\*/g, "%");
 }
-const NUMERIC = new Set(["integer", "number", "float", "decimal", "monetary", "money"]);
 /** Qué clase de valor es un campo, leída del tipo que publica el modelo. */
 function kindOf(definition) {
     if (definition.kind === "relation")
@@ -107,7 +106,7 @@ function kindOf(definition) {
     const type = definition.type.toLowerCase();
     /* An amount is a number: «decimal» and «monetary» read as text made «total <= 1000»
        impossible to ask of an invoice. */
-    if (NUMERIC.has(type))
+    if (isNumericType(type))
         return "number";
     if (type === "date" || type === "datetime")
         return "date";