@sincpro/web-ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,20 @@
+import type { ColumnControl, ColumnSpec } from "./columns.js";
+import type { Surface } from "../../foundations/types.js";
+/**
+ * The Odoo columns submenu: required fields stay checked and cannot be
+ * unchecked; optional fields toggle. It stays open while toggling so hiding
+ * three columns is three clicks, not three open-close round trips.
+ *
+ * Drawn only when the set declared optional columns. A menu of required-only
+ * fields would be a list of things you cannot do.
+ */
+export declare function ColumnsMenu({ control, surface, }: {
+    control: ColumnControl;
+    surface?: Surface;
+}): import("react").JSX.Element | null;
+export declare function specsFromColumns(columns: readonly {
+    id: string;
+    header: string;
+    optional?: boolean;
+    defaultHidden?: boolean;
+}[], fallbackOptional: boolean): ColumnSpec[];

package/dist/components/listing/ColumnsMenu.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Menu } from "../../primitives/menu/Menu.js";
+import { Columns3 } from "lucide-react";
+/**
+ * The Odoo columns submenu: required fields stay checked and cannot be
+ * unchecked; optional fields toggle. It stays open while toggling so hiding
+ * three columns is three clicks, not three open-close round trips.
+ *
+ * Drawn only when the set declared optional columns. A menu of required-only
+ * fields would be a list of things you cannot do.
+ */
+export function ColumnsMenu({ control, surface, }) {
+    const copy = useUiCopy();
+    if (!control.hasOptional)
+        return null;
+    const requiredOptions = control.required.map((column) => ({
+        id: column.id,
+        label: column.label,
+        checked: true,
+        disabled: true,
+        hint: copy.frame.required,
+    }));
+    const optionalOptions = control.optional.map((column) => ({
+        id: column.id,
+        label: column.label,
+        checked: control.isVisible(column.id),
+    }));
+    const groups = requiredOptions.length === 0
+        ? [{ label: copy.frame.show, options: optionalOptions }]
+        : [
+            { label: copy.frame.required, options: requiredOptions },
+            { label: copy.frame.optional, options: optionalOptions },
+        ];
+    const hiddenOptional = control.optional.some((column) => !control.isVisible(column.id));
+    return (_jsx(Menu, { label: copy.frame.columns, icon: Columns3, groups: groups, onSelect: control.toggle, closeOnSelect: false, active: hiddenOptional, ...(surface === undefined ? {} : { surface }), size: "sm" }));
+}
+export function specsFromColumns(columns, fallbackOptional) {
+    return columns.map((column) => ({
+        id: column.id,
+        label: column.header,
+        optional: column.optional ?? fallbackOptional,
+        ...(column.defaultHidden === true ? { defaultHidden: true } : {}),
+    }));
+}

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

@@ -0,0 +1,35 @@
+import type { GroupingControl } from "./grouping.js";
+import { type GroupableField, type GroupGrain } from "../../foundations/grouping.js";
+/**
+ * «AGRUPAR POR», adentro del panel de recortes.
+ *
+ * Context: va en la MISMA columna donde están los filtros y los favoritos, y no
+ * en un control aparte. Filtrar y agrupar son la misma pregunta —«qué parte de
+ * esto estoy mirando»— y separarlos obliga a abrir dos cosas para armar un
+ * recorte, sin poder ver los dos estados a la vez.
+ *
+ * ── Una fecha se DESPLIEGA, no se elige ─────────────────────────────
+ *
+ * Un campo común es una opción: se tilda y listo. Un campo de fecha no, porque
+ * «agrupar por fecha» no quiere decir nada hasta decir con qué corte — y los
+ * cortes no son excluyentes: «por mes y adentro por día» es una pregunta
+ * legítima y frecuente. Así que una fecha se abre y ofrece sus granos como
+ * CASILLAS, que se tildan de a varias.
+ *
+ * ── Y se ordenan solas ──────────────────────────────────────────────
+ *
+ * Tildar «día» y después «mes» da «mes › día», nunca al revés. No es una
+ * preferencia: un día entero vive adentro de un solo mes, así que partir primero
+ * por día deja un nivel de mes que no parte nada. La dirección la pone el
+ * calendario y por eso la pone el sistema — ver `normalizeLevels`.
+ */
+export type GroupingLevelsProps = {
+    /** Por qué campos se puede partir. Sin ninguno no se dibuja nada: una columna
+     *  vacía en el panel es peor que una columna que no está. */
+    fields: readonly GroupableField[];
+    control: GroupingControl;
+    /** Cómo se llama cada grano, cuando el producto lo dice con otras palabras.
+     *  Sin esto, las de la copia en el idioma activo. */
+    grainLabel?: (grain: GroupGrain) => string;
+};
+export declare function GroupingLevels({ fields, control, grainLabel }: GroupingLevelsProps): import("react").JSX.Element | null;

package/dist/components/listing/GroupingLevels.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { grainName } from "../../foundations/calendar.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { GRAIN_ORDER, levelKey, } from "../../foundations/grouping.js";
+import { ChevronDown, ChevronRight, ChevronUp, X } from "lucide-react";
+import { useState } from "react";
+function fieldLabel(fields, field) {
+    return fields.find((one) => one.field === field)?.label ?? field;
+}
+export function GroupingLevels({ fields, control, grainLabel }) {
+    const copy = useUiCopy();
+    /* Qué fechas están desplegadas. Arranca desplegada la que ya tenga algún grano
+       puesto: si no, lo puesto queda escondido detrás de un chevron y hay que
+       adivinar dónde. */
+    const [opened, setOpened] = useState(() => control.levels.filter((one) => one.grain !== undefined).map((one) => one.field));
+    if (fields.length === 0)
+        return null;
+    const placed = control.levels;
+    const grain = (one) => grainLabel?.(one) ?? grainName(one);
+    const isOpen = (field) => opened.includes(field);
+    const toggleOpen = (field) => setOpened((current) => current.includes(field) ? current.filter((one) => one !== field) : [...current, field]);
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [placed.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsx("ol", { className: "flex flex-wrap gap-1 px-1 pb-1.5", children: placed.map((level, index) => (_jsx("li", { children: _jsxs("span", { className: "inline-flex items-center gap-1 rounded-pill border border-accent/40 bg-accent/18 py-0.5 pr-0.5 pl-1.5 text-micro text-ink", children: [_jsx("span", { className: "tabular-nums opacity-70", children: index + 1 }), _jsxs("span", { className: "max-w-32 truncate", children: [fieldLabel(fields, level.field), level.grain === undefined ? "" : ` · ${grain(level.grain)}`] }), _jsx("button", { type: "button", onClick: () => control.move(level.field, -1), disabled: index === 0, "aria-label": copy.grouping.up, title: copy.grouping.up, className: "rounded-pill p-0.5 hover:bg-primary/15 disabled:opacity-30 disabled:hover:bg-transparent", children: _jsx(ChevronUp, { className: "size-3", strokeWidth: 2.5 }) }), _jsx("button", { type: "button", onClick: () => control.move(level.field, 1), disabled: index === placed.length - 1, "aria-label": copy.grouping.down, title: copy.grouping.down, className: "rounded-pill p-0.5 hover:bg-primary/15 disabled:opacity-30 disabled:hover:bg-transparent", children: _jsx(ChevronDown, { className: "size-3", strokeWidth: 2.5 }) }), _jsx("button", { type: "button", onClick: () => control.remove(level.field, level.grain), "aria-label": copy.grouping.remove, title: copy.grouping.remove, className: "rounded-pill p-0.5 hover:bg-primary/15", children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) })] }) }, levelKey(level)))) }), _jsx("div", { className: "mb-1 h-px bg-line", role: "separator" })] })), fields.map((one) => {
+                const grains = one.grains;
+                /* Un campo común: una casilla y nada más. */
+                if (grains === undefined || grains.length === 0) {
+                    const on = control.has(one.field);
+                    return (_jsxs("button", { type: "button", onClick: () => control.toggle(one.field), "aria-pressed": on, className: `flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8 ${on ? "bg-primary/6" : ""}`, children: [_jsx(Mark, { on: on }), _jsx("span", { className: `min-w-0 truncate text-meta ${on ? "font-medium text-ink" : "text-ink"}`, children: one.label })] }, one.field));
+                }
+                /* Una FECHA: se despliega y ofrece sus cortes como casillas. */
+                const open = isOpen(one.field);
+                const puestos = placed.filter((level) => level.field === one.field);
+                return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("button", { type: "button", onClick: () => toggleOpen(one.field), "aria-expanded": open, className: "flex items-center gap-1.5 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: `min-w-0 flex-1 truncate text-meta ${puestos.length > 0 ? "font-medium text-ink" : "text-ink"}`, children: one.label }), puestos.length === 0 ? null : (_jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-accent/40 bg-accent/18 px-2 py-0.5 text-micro tabular-nums text-ink", children: puestos.length }))] }), !open ? null : (_jsx("div", { className: "flex flex-col pl-(--spacing-indent)", children: GRAIN_ORDER.filter((g) => grains.includes(g)).map((g) => {
+                                const on = control.has(one.field, g);
+                                return (_jsxs("button", { type: "button", onClick: () => control.toggle(one.field, g), "aria-pressed": on, className: `flex items-center gap-2 rounded-control px-1.5 py-1 text-left transition-colors duration-(--duration-instant) hover:bg-primary/8 ${on ? "bg-primary/6" : ""}`, children: [_jsx(Mark, { on: on }), _jsx("span", { className: `min-w-0 truncate text-meta ${on ? "font-medium text-ink" : "text-muted"}`, children: grain(g) })] }, g));
+                            }) }))] }, one.field));
+            }), placed.length === 0 ? null : (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 h-px bg-line", role: "separator" }), _jsx("button", { type: "button", onClick: () => control.clear(), className: "rounded-control px-2 py-1 text-left text-meta text-muted transition-colors duration-(--duration-instant) hover:bg-ink/4 hover:text-ink", children: copy.grouping.clear })] }))] }));
+}
+/** La marca de tildado. La columna existe SIEMPRE, tildada o no: sin ella,
+ *  tildar corre el texto y la lista salta. Apagada se dibuja el aro, la misma
+ *  marca que el panel de filtros, para que las dos columnas se lean como
+ *  casillas y no como texto suelto con un hueco a la izquierda. */
+function Mark({ on }) {
+    return (_jsx("span", { className: "flex size-(--size-icon-sm) shrink-0 items-center justify-center", children: on ? (_jsx("span", { className: "size-1.5 rounded-pill bg-primary" })) : (_jsx("span", { className: "size-3 rounded-pill border border-line-strong" })) }));
+}

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

@@ -0,0 +1,27 @@
+import type { Surface } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export declare function Listing({ bar, metrics, sticky, surface, children, }: {
+    /** The `ListingBar`: actions, title, search, pagination and views. */
+    bar?: ReactNode;
+    /**
+     * La barra se queda arriba al scrollear, debajo de lo que ya esté pegado.
+     *
+     * Es opt-in y no el default porque el fondo tiene que ser el de lo que hay
+     * DETRÁS, y eso depende de dónde esté puesta: el arquetipo de lista vive
+     * sobre el piso de la página, pero un `FrameView` —«el vistazo» de un
+     * registro— vive sobre el PAPEL blanco, y ahí la banda color piso se ve como
+     * una mancha. Se descubrió comparando historias, no razonando.
+     */
+    sticky?: boolean;
+    /** Sobre qué está puesta la lista. Sólo se usa para el fondo de la banda que
+     *  se pega: `chrome` pinta el mismo azul que ya pinta la barra —o sea,
+     *  invisible— y cualquier otra pinta el PISO, que es lo que hay detrás de una
+     *  lista de página. Las que viven adentro de algo blanco —un cajón, una vista
+     *  previa— son compactas, y en compacto la barra no se pega. */
+    surface?: Surface;
+    /** The metrics that also narrow down. They go BELOW the bar and above the
+     *  rows: they belong to the set I am looking at, not to the frame that frames
+     *  it — above the bar they read as part of the navigation. */
+    metrics?: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/listing/Listing.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHeaderSlot } from "../shell/headerSlot.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { useStickyLayer } from "../../foundations/sticky.js";
+import { createPortal } from "react-dom";
+/* ==================================================================== *
+ *  LISTING — the shape of a screen of N records. A single one, for all of them.
+ *
+ *  The request was literal: «in every list window don't forget that it has
+ *  [Search (Filters)] [List]». Up to here every view built that by hand —one
+ *  put the totals on top, another the search box below the upload panel, another
+ *  had no search box at all— and the result is that two lists of the same
+ *  product get used differently.
+ *
+ *  Four bands, always in the same order:
+ *
+ *      bar       crumbs · search · pagination
+ *                actions · title · columns · views
+ *      body      the rows, in a card with a border
+ *
+ *  ── The list goes in a card and the background stays behind ─────────
+ *
+ *  It is what separates an application from a document. Without the card the
+ *  rows float over nothing and the screen reads as running text; the card puts
+ *  a boundary around the set, and that boundary is what makes it read as «one
+ *  thing with elements inside».
+ *
+ *  ── Two densities, and both are needed ──────────────────────────────
+ *
+ *  `table`  aligned, sortable columns. It wins when there is width: the data
+ *           gets compared across rows without reading, which is what a table
+ *           exists for.
+ *  `rows`   two lines per record, big name and metadata underneath. It wins
+ *           when there is NO width —a narrow panel, the preview— because a
+ *           six-column table in 380 px is not a table, it is an accordion.
+ *
+ *  It is not an aesthetic preference: it is the available width. That is why
+ *  the consumer passes it and this piece does not choose it — only whoever
+ *  composes knows which surface it is going to land on.
+ *
+ *  ── The row lays itself out; nobody tells it how ────────────────────
+ *
+ *  WHICH presentation is the consumer's call. How a row arranges itself inside
+ *  the one that was chosen is nobody's: there is no width at which a row «turns
+ *  narrow», and no breakpoint written anywhere. Every zone asks for what it
+ *  needs —the name `--container-name`, the tags `--container-tags`, the
+ *  metadata what it says— and the line does what a line does: what does not fit
+ *  wraps, and the name keeps the first one.
+ *
+ *  **That is why it holds up with a checkbox, an icon, actions, no tags, or a
+ *  metadata three times longer.** None of that is declared anywhere: they all
+ *  take their width from the same line, so a list that selects wraps a little
+ *  earlier than one that does not, on its own. Asking the density instead —a
+ *  decision per SURFACE— got it wrong in the one place it mattered: a list in a
+ *  480 px drawer is comfortable —it draws its title, its counters, its full
+ *  padding— and narrow at the same time, and the name was left with whatever
+ *  was over between a metadata that did not shrink and a tag column of 8 rem:
+ *  about a dozen pixels, «ve…».
+ * ==================================================================== */
+export function Listing({ bar, metrics, sticky = false, surface, children, }) {
+    const d = useDensity();
+    /* La barra se PEGA arriba y las filas se van debajo de ella.
+       Context: con 187 filas, scrollear para ver la última dejaba sin buscador,
+       sin paginador y sin el conmutador de presentación — o sea que recortar
+       después de mirar obligaba a subir de nuevo. Se pega debajo de lo que ya
+       esté pegado (la barra de la aplicación) y empuja la pila para el
+       encabezado de la tabla, que se pega debajo de ella. Ver `system/sticky.tsx`. */
+    const band = useStickyLayer();
+    /* En compacto NO se pega, y no es por falta de espacio: compacto es un cajón
+       o una vista previa, o sea una caja corta con su propia cabecera y su propio
+       scroll. Una banda pegada ahí se pinta encima del papel blanco del cajón —se
+       ve como una mancha— para resolver un scroll que en cinco filas no existe.
+       Es la misma razón por la que `ListingBar` tampoco dibuja la identidad ahí. */
+    const pegada = sticky && d === "comfortable";
+    /* With a sidebar the bar is the screen's header: it goes in the frame's full-width slot,
+       above the sidebar (see `shell/headerSlot.ts`), and the frame does the sticking. */
+    const slot = useHeaderSlot();
+    const inSlot = pegada && slot !== null;
+    return (
+    /* Context: the box of rows carries no border. What separates it from the
+       background is its white and its radius; a frame around a list that is
+       already inside a framed panel is a nested rectangle, and nested
+       rectangles are what make a product read like a cloud console. */
+    _jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [bar === undefined || bar === null ? null : inSlot ? (createPortal(bar, slot)) : (_jsx("div", { ref: band.ref, className: `min-w-0 ${pegada ? `sticky z-30 ${surface === "chrome" ? "bg-chrome" : "bg-ground"}` : ""}`, style: pegada ? band.self : undefined, children: bar })), inSlot && metrics !== undefined ? _jsx("div", { className: "pt-2", children: metrics }) : metrics, _jsx("div", { className: "min-w-0 overflow-clip rounded-box bg-surface", style: pegada && !inSlot ? band.below : undefined, children: children })] }));
+}

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

@@ -0,0 +1,112 @@
+import type { Surface } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+/** THE BAR — two rows, two questions.
+ *
+ *      ┌──────────┬──────────────────────────────┬──────────────┐
+ *      │ crumbs   │ 🔍 search…  ⚙3               │ 1–8 of 187 ‹ › │
+ *      ├──────────┼──────────────────────────────┼──────────────┤
+ *      │ [New]    │ Facturas · 180 · 7 · 8       │ [columns] [▤][▦] │
+ *      └──────────┴──────────────────────────────┴──────────────┘
+ *        WHERE / HOW MUCH I SEE                    HOW I LOOK
+ *
+ *  Pagination answers how much of the filtered set is on screen, so it stays
+ *  with the search. Columns and the presentation switcher answer how the set
+ *  is looked at, so they sit with the actions — not next to the page range.
+ *  Putting the four of them on the search line is how the field and «1–80»
+ *  painted over each other the moment the window shrank.
+ *
+ *  ── Why it is two lines tall ────────────────────────────────────────
+ *
+ *  Because the three things that go on the left do not fit in one: a
+ *  comfortable button is 34 px tall, a list title may have to wrap onto two
+ *  lines, and below it goes a sentence saying what the list is made of. Forcing
+ *  it into a single line means shrinking the button —the defect we already
+ *  fixed— or truncating the title, which is worse: a list that cannot be named
+ *  in full is indistinguishable from the one next to it.
+ *
+ *  ── The selection transforms the bar, it does not add one ───────────
+ *
+ *  When rows get selected, the identity zone turns into «3 elegidas ✕» plus the
+ *  actions that apply. **In the same place and without pushing anything.** A
+ *  bar that appears shifts the list downwards right when somebody is ticking
+ *  checkboxes, and the row they were about to tick is no longer where it was.
+ *
+ *  The actions on the left do NOT go away: «Nuevo» stays available with three
+ *  rows selected, because selecting is not entering a mode.
+ *
+ *  ── Inside a record it is ONE line (`inline`) ────────────────────────
+ *
+ *      ┌───────────────────────────────────────────────────────────────┐
+ *      │ 🔍 search the lines…               12 records  [sort][cols][▤▦] │
+ *      └───────────────────────────────────────────────────────────────┘
+ *        WHAT I LOOK FOR (fills)          HOW MANY    HOW I LOOK
+ *
+ *  A collection that is a FIELD of a record — the lines of an order, the
+ *  contacts of a customer, the journal items of an invoice — is not a screen.
+ *  Everything the two rows above answer is already answered by the record
+ *  around it: where I am (the record's crumbs), what this is (the tab it sits
+ *  in), what I can do (the record's actions). Drawn with the page bar, it
+ *  spent two rows and a rule on the one question left —the search, alone and
+ *  centred on the first row; «Ordenar» and the switcher alone on the second—
+ *  and pushed the rows, which are what the tab is for, below the fold.
+ *
+ *  So it is a single line, and the order is the order of the questions: the
+ *  search FILLS from the left (it is the only thing with variable content),
+ *  then how many there are, then how they are looked at, then what starts a
+ *  new one. No band, no padding, no hairline: it sits on the record's paper,
+ *  aligned with the fields above it, and a light band inside a white sheet is
+ *  a rectangle inside a rectangle.
+ *
+ *  On a phone the line breaks by itself, with no threshold written anywhere:
+ *  the search asks for `--container-name` before it gives up its place, so
+ *  when the controls do not fit next to it they drop to a second line, pushed
+ *  to the right, and the search keeps the whole first one.
+ *
+ *  The count is a live region: typing in the search changes it, and somebody
+ *  who cannot see the rows thin out hears how many are left. With
+ *  `pagination` the page range replaces it — it already says how many. */
+export declare function ListingBar({ actions, title, description, counters, selection, search, pagination, views, crumbs, surface, inline, count, }: {
+    /** What starts something new. It stays visible even when there is a selection. */
+    actions?: ReactNode;
+    title?: string;
+    /** One sentence: what this list is made of, or what can be done with it. It
+     *  goes below the title and that is why it can be a real sentence. */
+    description?: string;
+    /** The totals per category. The ones in the pagination say how many there
+     *  are; these say what they are made of, which is another question. */
+    counters?: readonly {
+        label: string;
+        value: number | string;
+    }[];
+    /** When there are selected rows. It replaces the identity, in the same place. */
+    selection?: {
+        count: number;
+        onClear?: () => void;
+        actions?: ReactNode;
+    };
+    search?: ReactNode;
+    pagination?: ReactNode;
+    /** Columns menu and presentation switcher. They sit on the actions row, on
+     *  the right: they are how I look at the set, not how many of it I see. */
+    views?: ReactNode;
+    /** Where I come from. It goes above the row and only on the chrome. */
+    crumbs?: ReactNode;
+    /** `chrome` paints the whole band navy and everything inside inherits it:
+     *  the search box, the pagination and the switcher. See `system/surface.tsx`. */
+    surface?: Surface;
+    /** One line, for a collection inside a record: search, count, views, actions. The
+     *  title, the description, the counters and the crumbs are not drawn — the record
+     *  around it already says them. Always on the canvas. See the header. */
+    inline?: boolean;
+    /** How many records there are, said on the inline line when there is no
+     *  `pagination` to say it. Ignored by the two-row bar: its identity has counters. */
+    count?: number;
+}): import("react").JSX.Element;
+export type ListIdentity = {
+    title?: string;
+    description?: string;
+    counters?: readonly {
+        label: string;
+        value: number | string;
+    }[];
+};

package/dist/components/listing/ListingBar.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { SurfaceProvider, useSurface } from "../../foundations/surface.js";
+import { Line } from "../../primitives/block/Line.js";
+import { X } from "lucide-react";
+/** THE BAR — two rows, two questions.
+ *
+ *      ┌──────────┬──────────────────────────────┬──────────────┐
+ *      │ crumbs   │ 🔍 search…  ⚙3               │ 1–8 of 187 ‹ › │
+ *      ├──────────┼──────────────────────────────┼──────────────┤
+ *      │ [New]    │ Facturas · 180 · 7 · 8       │ [columns] [▤][▦] │
+ *      └──────────┴──────────────────────────────┴──────────────┘
+ *        WHERE / HOW MUCH I SEE                    HOW I LOOK
+ *
+ *  Pagination answers how much of the filtered set is on screen, so it stays
+ *  with the search. Columns and the presentation switcher answer how the set
+ *  is looked at, so they sit with the actions — not next to the page range.
+ *  Putting the four of them on the search line is how the field and «1–80»
+ *  painted over each other the moment the window shrank.
+ *
+ *  ── Why it is two lines tall ────────────────────────────────────────
+ *
+ *  Because the three things that go on the left do not fit in one: a
+ *  comfortable button is 34 px tall, a list title may have to wrap onto two
+ *  lines, and below it goes a sentence saying what the list is made of. Forcing
+ *  it into a single line means shrinking the button —the defect we already
+ *  fixed— or truncating the title, which is worse: a list that cannot be named
+ *  in full is indistinguishable from the one next to it.
+ *
+ *  ── The selection transforms the bar, it does not add one ───────────
+ *
+ *  When rows get selected, the identity zone turns into «3 elegidas ✕» plus the
+ *  actions that apply. **In the same place and without pushing anything.** A
+ *  bar that appears shifts the list downwards right when somebody is ticking
+ *  checkboxes, and the row they were about to tick is no longer where it was.
+ *
+ *  The actions on the left do NOT go away: «Nuevo» stays available with three
+ *  rows selected, because selecting is not entering a mode.
+ *
+ *  ── Inside a record it is ONE line (`inline`) ────────────────────────
+ *
+ *      ┌───────────────────────────────────────────────────────────────┐
+ *      │ 🔍 search the lines…               12 records  [sort][cols][▤▦] │
+ *      └───────────────────────────────────────────────────────────────┘
+ *        WHAT I LOOK FOR (fills)          HOW MANY    HOW I LOOK
+ *
+ *  A collection that is a FIELD of a record — the lines of an order, the
+ *  contacts of a customer, the journal items of an invoice — is not a screen.
+ *  Everything the two rows above answer is already answered by the record
+ *  around it: where I am (the record's crumbs), what this is (the tab it sits
+ *  in), what I can do (the record's actions). Drawn with the page bar, it
+ *  spent two rows and a rule on the one question left —the search, alone and
+ *  centred on the first row; «Ordenar» and the switcher alone on the second—
+ *  and pushed the rows, which are what the tab is for, below the fold.
+ *
+ *  So it is a single line, and the order is the order of the questions: the
+ *  search FILLS from the left (it is the only thing with variable content),
+ *  then how many there are, then how they are looked at, then what starts a
+ *  new one. No band, no padding, no hairline: it sits on the record's paper,
+ *  aligned with the fields above it, and a light band inside a white sheet is
+ *  a rectangle inside a rectangle.
+ *
+ *  On a phone the line breaks by itself, with no threshold written anywhere:
+ *  the search asks for `--container-name` before it gives up its place, so
+ *  when the controls do not fit next to it they drop to a second line, pushed
+ *  to the right, and the search keeps the whole first one.
+ *
+ *  The count is a live region: typing in the search changes it, and somebody
+ *  who cannot see the rows thin out hears how many are left. With
+ *  `pagination` the page range replaces it — it already says how many. */
+export function ListingBar({ actions, title, description, counters, selection, search, pagination, views, crumbs, surface, inline = false, count, }) {
+    const selecting = selection !== undefined && selection.count > 0;
+    const d = useDensity();
+    const copy = useUiCopy();
+    const activeSurface = useSurface(inline ? "canvas" : surface);
+    const isChrome = activeSurface === "chrome";
+    /* In compact the title and the description are NOT drawn, and it is not for
+       lack of room: in a preview or on a phone, the surface header already says
+       what I am looking at. Repeating it here burns the only line there is for
+       the search box — which is what is actually needed. */
+    const withIdentity = d === "comfortable";
+    /* Two rows, and the split is the same one as in a record:
+         1 · WHERE I AM and HOW MANY THERE ARE — crumbs, search, page range.
+         2 · WHAT I CAN DO and HOW I LOOK — actions, identity, columns / views.
+  
+       Views used to sit next to the pagination. On a narrow window the search
+       field and «1–80 / 211» painted over each other; columns and the switcher
+       were the extra weight on a line that only needed how MANY. */
+    const center = selecting ? (_jsxs("div", { className: "flex min-w-0 items-center gap-x-2", children: [_jsxs("span", { className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control pr-1 pl-2.5 text-meta font-medium ${isChrome ? "bg-chrome-ink/14 text-chrome-ink" : "bg-ink/8 text-ink"}`, children: [_jsx("span", { className: "tabular-nums", children: selection?.count.toLocaleString(copy.locale) }), copy.selection.chosen, _jsx("button", { type: "button", onClick: selection?.onClear, "aria-label": copy.selection.clear, title: copy.selection.clear, className: `inline-flex size-5 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) ${isChrome ? "hover:bg-chrome-ink/20" : "hover:bg-primary/20"}`, children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) })] }), selection?.actions === undefined ? null : (_jsx("div", { className: "flex min-w-0 items-center gap-1.5", children: selection.actions }))] })) : search === undefined ? null : (
+    /* Selecting replaces the search box: what gets selected is over what is
+       ALREADY filtered, so searching there would change the set underneath the
+       selection. */
+    _jsx("div", { className: "w-full min-w-0", children: search }));
+    if (inline) {
+        const howMany = pagination ??
+            (count === undefined ? null : (_jsx("span", { role: "status", className: "shrink-0 text-meta text-muted tabular-nums", children: count === 1
+                    ? copy.list.countOne
+                    : fillCopy(copy.list.count, { count: count.toLocaleString(copy.locale) }) })));
+        return (_jsx(SurfaceProvider, { value: "canvas", children: _jsxs("div", { className: `flex min-w-0 flex-wrap items-center gap-y-1.5 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [center === null ? null : (_jsx("div", { className: "flex min-w-0 flex-1 basis-(--container-name) items-center overflow-x-clip overflow-y-visible", children: center })), howMany, views === undefined ? null : (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: views })), actions === undefined ? null : (_jsx("div", { className: `flex shrink-0 items-center gap-1.5 ${views === undefined ? "ml-auto" : ""}`, children: actions }))] }) }));
+    }
+    /* El campo de búsqueda va en el CENTRO de la línea, y centrado contra la
+       línea: pide `--container-search` y los dos lados se reparten lo que sobra
+       en mitades iguales. Antes tomaba el resto, así que un rastro largo a la
+       izquierda lo corría —y dos listas seguidas dibujaban su buscador en dos
+       lugares distintos—. Ver `primitives/block/Line.tsx`. */
+    const topRow = (_jsx(Line, { asks: "var(--container-crumb)", centerAsks: center === null ? "auto" : "var(--container-search)", gap: byDensity(d, "gap-x-4 gap-y-2", "gap-x-2 gap-y-1.5"), align: "items-start", start: crumbs, 
+        /* `overflow-x-clip` y NO `overflow-hidden`: lo que hay que recortar es el
+           ancho —que el campo no pinte encima de «1–80»—, y `hidden` en un eje
+           fuerza `auto` en el otro, así que también recortaba hacia ABAJO. El
+           panel de filtros del `SearchBar` cuelga con `absolute top-full`, o sea
+           justo afuera de esta caja: apretar el embudo abría un panel que nadie
+           veía. `clip` es el único valor que deja `visible` en el otro eje. */
+        center: center === null ? null : (_jsx("div", { className: "flex w-full min-w-0 items-center overflow-x-clip overflow-y-visible", children: center })), end: pagination }));
+    const bottomRow = actions === undefined && !withIdentity && views === undefined ? null : (
+    /* On a narrow list (a phone, a drawer) the name and its counters take the whole first
+       line and the action and the controls go below: squeezed between them, the
+       description wrapped one word per line. */
+    _jsxs("div", { className: `flex min-w-0 flex-wrap items-center gap-y-2 ${byDensity(d, "gap-x-4", "gap-x-2")}`, children: [actions === undefined ? null : (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: actions })), !withIdentity ? null : (_jsxs("div", { className: "flex min-w-0 flex-1 flex-col @max-2xl:order-first @max-2xl:basis-full", children: [title === undefined ? null : (
+                    /* No `truncate`: the title may wrap onto two lines. A list that
+                       cannot be named in full is indistinguishable from the one next
+                       to it. */
+                    /* `title` and semibold: the name of the list is the entry point of the
+                       screen. At `lead` it was smaller than the metrics under it, so the
+                       largest thing on a list page was a number (measured: 1.46:1 over the
+                       body, below the ~1.5 an eye needs to find where to start). */
+                    _jsx("h2", { className: `text-title leading-tight font-semibold ${isChrome ? "text-chrome-ink" : "text-ink"}`, children: title })), description === undefined && counters === undefined ? null : (_jsxs("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-0.5", children: [counters?.map((c) => (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("span", { className: `text-meta font-medium tabular-nums ${isChrome ? "text-chrome-ink" : "text-ink"}`, children: typeof c.value === "number"
+                                            ? c.value.toLocaleString(copy.locale)
+                                            : c.value }), _jsx("span", { className: `text-micro ${isChrome ? "text-chrome-muted" : "text-muted"}`, children: c.label })] }, c.label))), description === undefined ? null : (_jsx("span", { className: `min-w-0 text-micro ${isChrome ? "text-chrome-muted" : "text-muted"}`, children: description }))] }))] })), views === undefined ? null : (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: views }))] }));
+    const bar = (_jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2", "gap-1.5")}`, children: [!isChrome && bottomRow !== null ? (_jsx("div", { className: "border-b border-line pb-2", children: topRow })) : (topRow), bottomRow] }));
+    /* On the canvas the bar is a light control band: white, a hairline below, the same
+       padding as the dark one — a list inside an application whose bar is already dark keeps
+       ONE dark band per screen. Without its own band the bar sat flush on the page and its
+       controls had nothing to belong to. */
+    if (!isChrome) {
+        return (_jsx(SurfaceProvider, { value: "canvas", children: _jsx("div", { className: `flex min-w-0 flex-col border-b border-line bg-surface ${byDensity(d, "px-3.5 py-2.5", "px-2.5 py-2")}`, children: bar }) }));
+    }
+    /* On the chrome the bar IS the band: the background reaches the edges and
+       everything inside inherits the surface, so there is no way to forget to
+       pass it — which is how the status bar ended up with the canvas palette on
+       top of the navy. */
+    return (_jsx(SurfaceProvider, { value: "chrome", children: _jsx("div", { className: `flex min-w-0 flex-col bg-chrome ${byDensity(d, "px-3.5 py-2.5", "px-2.5 py-2")}`, children: bar }) }));
+}

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

@@ -0,0 +1,36 @@
+import type { Surface } from "../../foundations/types.js";
+/** How many of how many, and how I move to the next page.
+ *
+ *  **It lives ONCE and it is mounted in two places.** The normal destination is
+ *  the search bar: you search, you narrow down and you paginate on the same
+ *  line, without looking down to the footer to discover there are another
+ *  hundred and sixty. The footer (`ListingFooter`) existed only for the lists
+ *  that do NOT have a search box — there is no narrowing line there to put it on.
+ *
+ *  Two implementations of one pagination diverge at the first fix, so this is
+ *  the only one and both places receive it.
+ *
+ *  ── The range, not the page number ──────────────────────────────────
+ *
+ *  «1–25 de 187» answers three questions —where I am, how much I see, how much
+ *  there is— and «page 1 of 8» answers a single one, in units that depend on a
+ *  page size the user did not choose.
+ *
+ *  ── Why the page size is visible ────────────────────────────────────
+ *
+ *  Because it is the difference between scrolling eight times and scrolling
+ *  once. In a tool where somebody compares a hundred and eighty invoices,
+ *  leaving it fixed at 25 forces paginating over something that is not a
+ *  product decision. */
+export declare function Pagination({ from, to, total, pageSize, pageSizes, onPageSizeChange, onPrev, onNext, surface, }: {
+    from: number;
+    to: number;
+    total: number;
+    pageSize?: number;
+    pageSizes?: readonly number[];
+    onPageSizeChange?: (next: number) => void;
+    onPrev?: () => void;
+    onNext?: () => void;
+    /** By default it inherits it from the surface that wraps it. */
+    surface?: Surface;
+}): import("react").JSX.Element;