@sincpro/web-ui 0.2.0 → 1.1.0

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

@@ -1,3 +1,4 @@
+import type { OpenTarget } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
@@ -21,6 +22,13 @@ export interface PickerItem {
     /** The header this item is listed under. Consecutive items with the same section share
      *  one header; an item without it is listed loose, outside any section. */
     section?: string;
+    /** A person or a company: its face before the name — the photo, or its initials when
+     *  `true`. Who is being chosen is recognised before it is read, in the list and in the field. */
+    avatar?: true | string;
+    /** What is read at a glance on the right, in tabular figures: the balance owed, the stock,
+     *  a state badge, a priority — a widget, not text. Where `meta` describes, this COMPARES:
+     *  lined up in one column, eight customers' debts are read top to bottom. */
+    aside?: ReactNode;
 }
 /**
  * What the list shows and how many are left out of it. Capped at 8 with the footer count,
@@ -39,13 +47,38 @@ export type PickerProps = {
     items: readonly PickerItem[];
     value?: string;
     onChange?: (id: string) => void;
+    /**
+     * The options are SEARCHED by whoever gives them — the server's literal search — and this
+     * hears what is typed (and `""` when the list starts over). With it the picker filters
+     * nothing itself and caps nothing: `items` is the answer, all of it drawn, with the typed
+     * text still marked inside it. Without it, the picker filters what it holds.
+     *
+     * Context: a picker over ten thousand customers holds the first ten. Filtering THOSE finds
+     * nothing past the tenth — the customer typed by its exact name was «not there».
+     */
+    onSearch?: (query: string) => void;
+    /** The chosen record's name when it is not among `items` — a search narrowed them, or it
+     *  lies past the first page. Without it, a chosen record that is not listed reads empty. */
+    valueLabel?: string;
     placeholder?: string;
-    /** What to do with the ones that don't fit. Without this, the footer only
-     *  informs. */
-    onBrowseAll?: () => void;
+    /** «Buscar más…»: the last option of the list, always there when this is — the record
+     *  may not be among the eight, or two of them may need their columns to tell apart. It
+     *  gets what was typed, so the list that chooses (`List onChoose`, in a modal of the
+     *  workspace) opens on the same search. */
+    onBrowseAll?: (query: string) => void;
+    /** «Crear «…»»: a record made from the typed text alone (Odoo's `name_create`); it returns
+     *  the new id — or a promise of it — and the field chooses it. Offered while something is
+     *  typed that no option is called exactly. The consumer appends the new item to `items`. */
+    onCreate?: (name: string) => string | Promise<string>;
+    /** «Crear y editar…»: the new record needs more than a name — open its form (in a workspace,
+     *  a modal) with the typed text as the name. Choosing it there is the consumer's. */
+    onCreateAndEdit?: (name: string) => void;
     /** Open the chosen record. Drawn as a trailing affordance, the way a many2one
      *  offers "open" next to "pick". Absent when there is nothing chosen. */
-    onOpen?: (id: string) => void;
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where the chosen record can open, the first being the button's (a modal, by default: the
+     *  form stays behind); the rest go in «Abrir en…». `onOpen` is told which was picked. */
+    openTargets?: readonly OpenTarget[];
     emptyText?: string;
     /** Placeholder of the field while it is being typed into. It is NOT a second
      *  box — the field itself is the search. */
@@ -56,7 +89,7 @@ export type PickerProps = {
     loadingText?: string;
     /** The list grows from the backend: called when its end scrolls into view. The consumer
      *  appends the next page to `items`; with nothing more to fetch it does nothing. Turns off
-     *  the cap of 8, the «see all…» row and the footer count. */
+     *  the cap of 8 and the footer count. */
     onLoadMore?: () => void;
     /** 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. */
@@ -72,15 +105,17 @@ export type PickerProps = {
 };
 export declare function Picker({ mode, ...props }: PickerProps): import("react").JSX.Element;
 /**
- * The list of a `Picker`: its rows, the section headers, the «see all…» row and the loading
+ * 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 declare function PickerOptions({ items, marks, hints, remaining, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
+export declare function PickerOptions({ items, marks, hints, remaining, query, emptyText, onLoadMore, loadingMore, "aria-label": ariaLabel, }: {
     items: readonly PickerItem[];
     marks: boolean;
     hints: boolean;
     remaining: number;
+    /** What was typed: it is marked in every row, so each row says why it is there. */
+    query?: string;
     emptyText: string;
     onLoadMore?: () => void;
     loadingMore?: boolean;

package/dist/primitives/picker/Picker.js

@@ -1,19 +1,36 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { matchedWord, matches } from "../../foundations/match.js";
 import { cn, tv } from "../../foundations/variants.js";
 import { IconButton } from "../button/Button.js";
 import { FieldButton, FieldGroup } from "../field/aria.js";
 import { useFieldIds } from "../field/context.js";
 import { ReadValue } from "../field/Field.js";
 import { useFormMode } from "../field/mode.js";
+import { Menu } from "../menu/Menu.js";
 import { Popover } from "../overlay/Popover.js";
-import { Check, ChevronDown, SquareArrowOutUpRight } from "lucide-react";
+import { MatchedText } from "./MatchedText.js";
+import { Avatar } from "../value/Person.js";
+import { AppWindow, Check, ChevronDown, Ellipsis, Eye, PanelRight, PictureInPicture2, SquareArrowOutUpRight, } from "lucide-react";
 import { useContext, useMemo, useRef, useState } from "react";
 import { Collection, ComboBox as AriaComboBox, ComboBoxStateContext, Header, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, Text, useFilter, } from "react-aria-components";
-/** The id of the «see all…» row. Not a record id: it cannot collide with one. */
+/** The icon of each place a record opens — the same in every field and list. */
+const OPEN_ICON = {
+    modal: PictureInPicture2,
+    peek: Eye,
+    page: SquareArrowOutUpRight,
+    side: PanelRight,
+    window: AppWindow,
+};
+/** The id of the «Buscar más…» row. Not a record id: it cannot collide with one. */
 const BROWSE_ALL = "\u0000browse-all";
+/** The rows that create from what was typed — quick, or with the full form. */
+const CREATE = "\u0000create";
+const CREATE_EDIT = "\u0000create-edit";
+/** The rows that act instead of choosing: after the records, in this order. */
+const ACTIONS = new Set([CREATE, CREATE_EDIT, BROWSE_ALL]);
 const CAP = 8;
 /**
  * What the list shows and how many are left out of it. Capped at 8 with the footer count,
@@ -29,7 +46,7 @@ export function shownRows(filtered, { loading, incremental }) {
     return { visible, remaining: filtered.length - visible.length };
 }
 /** Folds consecutive items of the same `section` into one run under a header. The ids of
- *  the runs cannot collide with a record id, like the «see all…» one. */
+ *  the runs cannot collide with a record id, like the «Buscar más…» one. */
 function sectioned(items) {
     const out = [];
     for (const item of items) {
@@ -74,13 +91,14 @@ const option = tv({
 });
 export function Picker({ mode, ...props }) {
     if (useFormMode(mode) === "read") {
-        return _jsx(ReadValue, { value: props.items.find((i) => i.id === props.value)?.name ?? null });
+        const name = props.items.find((i) => i.id === props.value)?.name ?? props.valueLabel;
+        return _jsx(ReadValue, { value: props.value === undefined ? null : (name ?? null) });
     }
     /* The filter reads the locale from React Aria's context, so the box that provides it has
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditablePicker, { ...props }) }));
 }
-function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrowseAll, onOpen, 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, describedBy: ownDescribedBy, invalid: ownInvalid, disabled = false, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
@@ -93,50 +111,86 @@ function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrow
     const shownSearch = searchPlaceholder ?? copy.picker.search;
     const shownLoading = loadingText ?? copy.picker.loading;
     const chosen = items.find((i) => i.id === value);
-    const chosenName = chosen?.name ?? "";
+    const chosenName = chosen?.name ?? (value === undefined ? "" : (valueLabel ?? ""));
     /* Both the text and the choice are controlled, so React Aria never rewrites the field
        from its own collection — which is capped and filtered, and may not hold the chosen
        record at all. `query` is what filters: empty when the list opens (the whole list,
        not just the one already chosen), the typed text after that. */
     const [open, setOpen] = useState(false);
     const [text, setText] = useState(chosenName);
-    const [query, setQuery] = useState("");
+    const [query, setQueryOnly] = useState("");
+    /* What the consumer last heard: a list that opens, closes or chooses starts the search over,
+       and telling it `""` three times would ask the server three times for the same page. */
+    const heard = useRef("");
+    const setQuery = (next) => {
+        setQueryOnly(next);
+        if (onSearch !== undefined && next !== heard.current) {
+            heard.current = next;
+            onSearch(next);
+        }
+    };
     const [shownFor, setShownFor] = useState(chosenName);
     if (!open && shownFor !== chosenName) {
         setShownFor(chosenName);
         setText(chosenName);
     }
+    const searched = onSearch !== undefined;
     const filtered = useMemo(() => {
         const q = query.trim();
-        if (q === "")
+        if (q === "" || searched)
             return items;
         return items.filter((i) => contains(`${i.name} ${i.meta ?? ""} ${i.haystack ?? ""}`, q));
-    }, [items, query, contains]);
+    }, [items, query, contains, searched]);
+    /* Searched by the consumer, the items ARE the page it chose to show: all of them. */
     const { visible, remaining } = shownRows(filtered, {
         loading,
-        incremental: onLoadMore !== undefined,
+        incremental: onLoadMore !== undefined || searched,
     });
     const hasMarks = items.some((i) => i.icon !== undefined);
     const hasHints = visible.some((i) => i.meta !== undefined);
     /* «See all…» is an OPTION at the end of the list and not a button in a footer: the
        arrows reach it like any other row. As a footer button it was out of the keyboard's
        path — Tab leaves the field and closes the list before getting there. */
-    const browsable = remaining > 0 && onBrowseAll !== undefined;
-    const listed = browsable
-        ? [...visible, { id: BROWSE_ALL, name: copy.picker.browseAll }]
-        : visible;
+    const browsable = onBrowseAll !== undefined;
+    const typed = query.trim();
+    /* Exactly the name of an option already: creating it again would make a twin. */
+    const named = typed !== "" &&
+        items.some((i) => i.name.localeCompare(typed, copy.locale, { sensitivity: "base" }) === 0);
+    const actions = loading
+        ? []
+        : [
+            ...(onCreate !== undefined && typed !== "" && !named
+                ? [{ id: CREATE, name: fillCopy(copy.picker.create, { name: typed }) }]
+                : []),
+            ...(onCreateAndEdit === undefined
+                ? []
+                : [{ id: CREATE_EDIT, name: copy.picker.createAndEdit }]),
+            ...(browsable ? [{ id: BROWSE_ALL, name: copy.picker.browseAll }] : []),
+        ];
+    const listed = [...visible, ...actions];
     const closeList = useRef(null);
     const take = (key) => {
         if (key === null)
             return;
         const next = String(key);
-        if (next === BROWSE_ALL) {
-            /* The full list opens somewhere else (a dialog, a panel): this one closes and the
-               field keeps the chosen name. */
+        if (ACTIONS.has(next)) {
+            /* The full list, or the new record's form, opens somewhere else (a dialog, a panel):
+               this one closes and the field keeps the chosen name. A quick create chooses the new
+               record once it exists. */
+            const asked = query;
             closeList.current?.();
             setText(chosenName);
             setQuery("");
-            onBrowseAll?.();
+            if (next === BROWSE_ALL)
+                onBrowseAll?.(asked);
+            if (next === CREATE_EDIT)
+                onCreateAndEdit?.(asked.trim());
+            if (next === CREATE && onCreate !== undefined) {
+                /* The field keeps the new name from now on, not the old one until the record exists:
+                   a controlled text that changes while the input has focus reopens the list. */
+                setText(asked.trim());
+                void Promise.resolve(onCreate(asked.trim())).then((created) => onChange?.(created));
+            }
             return;
         }
         setText(items.find((i) => i.id === next)?.name ?? "");
@@ -160,43 +214,67 @@ function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrow
            the options are the answer before the first letter. */
         menuTrigger: "focus", 
         /* An empty list stays open to SAY it is empty (or loading) instead of vanishing. */
-        allowsEmptyCollection: true, isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: [_jsx(CloseBridge, { into: closeList }), _jsxs(FieldGroup, { children: [_jsx(Input, { placeholder: loading ? shownLoading : open ? shownSearch : shownPlaceholder, title: shownSearch, 
+        allowsEmptyCollection: true, isInvalid: invalid, isDisabled: disabled, className: "w-full min-w-0", children: [_jsx(CloseBridge, { into: closeList }), _jsxs(FieldGroup, { children: [chosen?.avatar === undefined || open ? null : (_jsx("span", { className: "flex shrink-0 items-center pl-2", children: _jsx(Avatar, { name: chosen.name, size: "sm", ...(typeof chosen.avatar === "string" ? { src: chosen.avatar } : {}) }) })), _jsx(Input, { placeholder: loading ? shownLoading : open ? shownSearch : shownPlaceholder, title: shownSearch, 
                         /* Arriving selects the name, so the first letter typed replaces it. Only when
                            ARRIVING: React Aria hands the focus back to the input while the list is open,
                            and selecting again then would swallow every second letter. */
                         onFocus: (event) => {
                             if (!open)
                                 event.currentTarget.select();
-                        }, className: "h-full min-w-0 flex-1 bg-transparent px-2.5 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), value !== undefined && value !== "" && onOpen !== undefined ? (_jsx(IconButton, { icon: SquareArrowOutUpRight, label: copy.picker.open, size: "sm", disabled: disabled, onClick: () => onOpen(value) })) : 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, emptyText: loading ? shownLoading : shownEmpty, 
+                        }, className: "h-full min-w-0 flex-1 bg-transparent px-2.5 text-meta text-ink outline-0 placeholder:text-muted disabled:cursor-not-allowed" }), value !== undefined &&
+                        value !== "" &&
+                        onOpen !== undefined &&
+                        openTargets[0] !== undefined ? (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: OPEN_ICON[openTargets[0]], label: copy.picker.openIn[openTargets[0]], size: "sm", disabled: disabled, onClick: () => onOpen(value, openTargets[0]) }), openTargets.length < 2 || disabled ? null : (_jsx(Menu, { label: copy.picker.openMore, icon: Ellipsis, iconOnly: true, chevron: false, variant: "text", align: "end", groups: [
+                                    {
+                                        options: openTargets.slice(1).map((to) => ({
+                                            id: to,
+                                            label: copy.picker.openIn[to],
+                                            icon: OPEN_ICON[to],
+                                        })),
+                                    },
+                                ], 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] })] }));
 }
 /**
- * The list of a `Picker`: its rows, the section headers, the «see all…» row and the loading
+ * 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, emptyText, onLoadMore, loadingMore = false, "aria-label": ariaLabel, }) {
+export function PickerOptions({ items, marks, hints, remaining, query = "", emptyText, onLoadMore, loadingMore = false, "aria-label": ariaLabel, }) {
     const copy = useUiCopy();
     const entries = useMemo(() => sectioned(items), [items]);
-    const renderItem = (item) => item.id === BROWSE_ALL ? (_jsx(ListBoxItem, { id: BROWSE_ALL, textValue: item.name, className: (state) => `${option({ ...state, hints: false })} mt-1 border-t border-line text-primary`, children: _jsxs("span", { className: "flex w-full items-center justify-between gap-2", children: [_jsx("span", { className: "font-medium", children: item.name }), _jsx("span", { className: "text-micro tabular-nums text-muted", children: fillCopy(copy.picker.more, {
+    /* The actions are one block under the records: one hairline above the first of them. */
+    const firstAction = items.find((i) => ACTIONS.has(i.id))?.id;
+    const renderItem = (item) => ACTIONS.has(item.id) ? (_jsx(ListBoxItem, { id: item.id, textValue: item.name, className: (state) => cn(option({ ...state, hints: false }), "text-primary", item.id === firstAction && items[0]?.id !== item.id
+            ? "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 })) }));
+                    }) }))] }) })) : (_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 })) }));
     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, 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, 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], 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 }))] }));
 }
-function Row({ item, selected, marks, hints, }) {
+function Row({ item, selected, marks, hints, query, locale, }) {
     const Icon = item.icon;
-    return (_jsxs(_Fragment, { children: [marks ? (_jsx("span", { className: cn(hints ? "mt-0.5" : "", "flex size-(--size-icon-sm) shrink-0 items-center justify-center"), children: selected ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5 })) : Icon !== undefined ? (_jsx(Icon, { "aria-hidden": true, className: "size-(--size-icon-sm) text-muted", strokeWidth: 1.75 })) : null })) : null, _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(Text, { slot: "label", className: cn("min-w-0 truncate text-meta text-ink", selected ? "font-medium" : ""), children: item.name }), item.tags] }), item.meta === undefined ? null : (_jsx(Text, { slot: "description", className: "truncate text-micro tabular-nums text-muted", children: item.meta }))] }), !marks && selected ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0 text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5 })) : null] }));
+    const copy = useUiCopy();
+    /* Listed for a code that is not drawn — the barcode, the NIT —: say which, or the row reads
+       as a wrong match. */
+    const hidden = query.trim() === "" ||
+        matches(item.name, query, locale) ||
+        (item.meta !== undefined && matches(item.meta, query, locale)) ||
+        item.haystack === undefined
+        ? null
+        : matchedWord(item.haystack, query, locale);
+    return (_jsxs(_Fragment, { children: [marks ? (_jsx("span", { className: cn(hints ? "mt-0.5" : "", "flex size-(--size-icon-sm) shrink-0 items-center justify-center"), children: selected ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5 })) : Icon !== undefined ? (_jsx(Icon, { "aria-hidden": true, className: "size-(--size-icon-sm) text-muted", strokeWidth: 1.75 })) : null })) : null, item.avatar === undefined ? null : (_jsx(Avatar, { name: item.name, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(Text, { slot: "label", className: cn("min-w-0 truncate text-meta text-ink", selected ? "font-medium" : ""), children: _jsx(MatchedText, { text: item.name, query: query, locale: locale }) }), item.tags] }), item.meta === undefined ? null : (_jsx(Text, { slot: "description", className: "truncate text-micro tabular-nums text-muted", children: _jsx(MatchedText, { text: item.meta, query: query, locale: locale }) })), hidden === null ? null : (_jsxs("span", { className: "truncate text-micro text-muted", children: [copy.picker.matched, " ", _jsx("span", { className: "font-mono", children: _jsx(MatchedText, { text: hidden, query: query, locale: locale }) })] }))] }), item.aside === undefined ? null : (_jsx("span", { className: "flex shrink-0 items-center gap-1.5 self-center text-meta text-ink tabular-nums", children: item.aside })), !marks && selected ? (_jsx(Check, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0 text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5 })) : null] }));
 }
 /** Hands the combobox's `close` to the code outside it: React Aria owns the open state and
- *  offers no controlled `isOpen`, and the «see all…» row has to close the list it lives in. */
+ *  offers no controlled `isOpen`, and the «Buscar más…» row has to close the list it lives in. */
 function CloseBridge({ into }) {
     const state = useContext(ComboBoxStateContext);
     into.current = state === null ? null : () => state.close();

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

@@ -135,7 +135,7 @@ totals, empty, grouping,
 /** El total de una columna DENTRO de un montón, ya formateado. Lo calcula quien
  *  compone, por el mismo motivo que `totals`: sumar significa cosas distintas
  *  según el dominio, y un porcentaje se promedia, no se suma. */
-groupTotal, height, layout, onOpen, onDiscard, bands, adds, flag, }: {
+groupTotal, height, layout, onOpen, onDiscard, bands, adds, flag, onReorder, }: {
     rows: readonly T[];
     columns: readonly EditColumn<T>[];
     getRowId: (row: T) => string;
@@ -188,4 +188,9 @@ groupTotal, height, layout, onOpen, onDiscard, bands, adds, flag, }: {
         detail?: ReactNode;
         owner?: string;
     }) | null;
+    /** The rows have an order of their own — the lines of an order, Odoo's `sequence` — and it
+     *  is changed by dragging the grip at the start of a row, or with Alt + ↑ / ↓ on it. `before`
+     *  is the row it lands in front of; `null`, the end. Off while grouped (the piles decide the
+     *  order) and in the stacked layout. */
+    onReorder?: (id: string, before: string | null) => void;
 }): import("react").JSX.Element;

package/dist/primitives/table/EditableTable.js

@@ -8,7 +8,8 @@ import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
 import { IconButton } from "../button/Button.js";
 import { NoteCard } from "../field/note.js";
 import { Flag } from "../notice/Flag.js";
-import { Plus, Trash2 } from "lucide-react";
+import { HEADER_TEXT } from "./Table.js";
+import { GripVertical, Plus, Trash2 } from "lucide-react";
 import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { useKeyboard } from "react-aria";
 /** The lines each section heads: the rows after it up to the next section. Notes do not
@@ -239,7 +240,7 @@ totals, empty, grouping,
 /** El total de una columna DENTRO de un montón, ya formateado. Lo calcula quien
  *  compone, por el mismo motivo que `totals`: sumar significa cosas distintas
  *  según el dominio, y un porcentaje se promedia, no se suma. */
-groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
+groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, onReorder, }) {
     const copy = useUiCopy();
     const bandOf = (row) => bands?.kind(row) ?? null;
     /* The row's mark, before its first value — and, in a record's margin, its card. */
@@ -338,6 +339,51 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
     /* The rows in the order they are drawn: what the arrows walk. */
     const order = drawn.flatMap((entry) => entry.row === undefined ? [] : [getRowId(entry.row)]);
     const stop = active !== null && order.includes(active) ? active : (order[0] ?? null);
+    /* REORDER — a grip at the start of each row. Dragged, the row shows where it would land (a
+       line over the row it goes in front of); Alt + ↑ / ↓ on the grip does the same by keyboard. */
+    const reorderable = onReorder !== undefined && grouping === undefined && !stacked;
+    /* A ref and not state: `dragover` can arrive before React re-renders after `dragstart`. */
+    const dragged = useRef(null);
+    const [landing, setLanding] = useState(undefined);
+    const after = (id) => order[order.indexOf(id) + 1] ?? null;
+    const land = (id, before) => {
+        if (before === id || before === after(id))
+            return;
+        onReorder?.(id, before);
+    };
+    const overRow = (event) => {
+        if (dragged.current === null)
+            return;
+        const tr = event.target.closest("tr[data-row-id]");
+        if (tr === null)
+            return;
+        event.preventDefault();
+        const id = tr.dataset["rowId"] ?? "";
+        const box = tr.getBoundingClientRect();
+        setLanding(event.clientY < box.top + box.height / 2 ? id : after(id));
+    };
+    const lineOver = (id) => (landing === id ? "border-t-2 border-t-primary" : "");
+    const grip = (id, mark) => (_jsx("td", { className: `w-0 py-1 pr-0 pl-1 align-middle ${mark} ${lineOver(id)}`, children: _jsx("button", { type: "button", draggable: true, "aria-label": copy.editable.reorder, title: copy.editable.reorderHint, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => {
+                if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown"))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                const at = order.indexOf(id);
+                if (event.key === "ArrowUp" && at > 0)
+                    land(id, order[at - 1] ?? null);
+                if (event.key === "ArrowDown" && at < order.length - 1)
+                    land(id, order[at + 2] ?? null);
+            }, onDragStart: (event) => {
+                event.dataTransfer.setData("text/plain", id);
+                event.dataTransfer.effectAllowed = "move";
+                const tr = event.currentTarget.closest("tr");
+                if (tr !== null)
+                    event.dataTransfer.setDragImage(tr, 16, 16);
+                dragged.current = id;
+            }, onDragEnd: () => {
+                dragged.current = null;
+                setLanding(undefined);
+            }, className: "flex cursor-grab items-center rounded-control p-0.5 text-muted opacity-40 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 hover:text-ink focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-primary active:cursor-grabbing", children: _jsx(GripVertical, { "aria-hidden": true, className: "size-(--size-icon-sm)", strokeWidth: 2 }) }) }));
     useEffect(() => {
         const target = focusOnOpen.current;
         if (target === null || target.id !== editing)
@@ -556,7 +602,20 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
                         return null;
                     return (_jsxs("div", { className: "flex items-baseline justify-between gap-3 text-meta", children: [_jsx("dt", { className: "text-muted", children: c.header }), _jsx("dd", { className: "font-semibold text-ink tabular-nums", children: total })] }, c.id));
                 }) }))] }));
-    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, className: `min-w-0 ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [columns.map((c) => (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong text-meta font-medium whitespace-nowrap text-muted ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("th", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length + (onRemove === undefined ? 0 : 1), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (drawn.map((entry) => {
+    return (_jsxs("div", { ref: frame, className: "min-w-0", children: [_jsx("div", { ref: box.ref, className: `min-w-0 ${box.className}`, style: box.style, children: stacked ? (list) : (_jsxs("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: [_jsx("thead", { className: "sticky z-10 bg-ground", style: stickyTop, children: _jsxs("tr", { children: [reorderable ? _jsx("th", { className: "w-0 border-b border-line-strong" }) : null, columns.map((c) => (_jsx("th", { scope: "col", style: c.width === undefined ? undefined : { width: c.width }, className: `border-b border-line-strong ${HEADER_TEXT} ${cell} ${c.numeric === true ? "text-right" : "text-left"}`, children: c.header }, c.id))), onRemove === undefined ? null : (_jsx("th", { className: "w-0 border-b border-line-strong" }))] }) }), _jsx("tbody", { ...(reorderable
+                                ? {
+                                    onDragOver: overRow,
+                                    onDrop: (event) => {
+                                        event.preventDefault();
+                                        if (dragged.current !== null && landing !== undefined)
+                                            land(dragged.current, landing);
+                                        dragged.current = null;
+                                        setLanding(undefined);
+                                    },
+                                }
+                                : {}), children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columns.length +
+                                        (onRemove === undefined ? 0 : 1) +
+                                        (reorderable ? 1 : 0), className: `text-meta text-muted italic ${cell}`, children: emptyText }) })) : (drawn.map((entry) => {
                                 if (entry.pile !== undefined) {
                                     const pile = entry.pile;
                                     const inside = pile.piles.length === 0 ? pile.items : pileItems(pile.piles);
@@ -565,7 +624,7 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
                                      columna y cada total bajo la suya. Un total en un rincón
                                      obliga a buscar de qué columna es; alineado no hay nada que
                                      buscar. */
-                                    _jsxs("tr", { children: [columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
+                                    _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "w-0 bg-ground" }) : null, columns.map((c, ci) => (_jsx("td", { className: `bg-ground text-meta ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, style: ci === 0 && pile.depth > 0
                                                     ? {
                                                         paddingLeft: `calc(var(--spacing-indent) * ${pile.depth} + 0.625rem)`,
                                                     }
@@ -586,7 +645,7 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
                                             : "group-hover/row:bg-ink/4";
                                     const bandMark = `border-b border-line first:rounded-l-control last:rounded-r-control ${bandWash}`;
                                     const control = isEditing && editable && bands?.edit !== undefined;
-                                    return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [_jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${cell} ${band === "section"
+                                    return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, bandMark) : null, _jsx("td", { colSpan: span, ...(control ? { "data-edit": "" } : {}), className: `text-meta ${bandMark} ${lineOver(id)} ${cell} ${band === "section"
                                                     ? "font-semibold text-ink"
                                                     : "text-muted italic"}`, children: control ? bands?.edit?.(row, setter(id)) : bands?.render(row) }), columns.slice(span).map((c, i) => (_jsx("td", { className: `text-meta text-ink ${bandMark} ${cell} ${c.numeric === true
                                                     ? "text-right font-semibold tabular-nums"
@@ -600,12 +659,14 @@ groupTotal, height, layout = "auto", onOpen, onDiscard, bands, adds, flag, }) {
                                 return (_jsxs(EditRow, { as: "tr", ...rowWiring(id, row), 
                                     /* The focus ring is drawn on the row, inset, so it is not cut by
                                      the box and does not move the cells. */
-                                    className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [columns.map((c, ci) => {
+                                    className: `group/row ${editable ? RING : ""} ${editable && !isEditing ? "cursor-text" : ""}`, children: [reorderable ? grip(id, mark) : null, columns.map((c, ci) => {
                                             const control = isEditing && c.edit !== undefined && editable;
-                                            const mark = ci === 0 ? flagOf(row, true) : null;
-                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: mark === null ? (control ? (c.edit?.(row, set)) : (c.render(row))) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [mark, _jsx("span", { className: "min-w-0 flex-1", children: control ? c.edit?.(row, set) : c.render(row) })] })) }, c.id));
+                                            /* Not `mark`: that name is the row's border and wash, above. Shadowed,
+                                               the cells were drawn with the class «null» — no hairline, no hover. */
+                                            const flagged = ci === 0 ? flagOf(row, true) : null;
+                                            return (_jsx("td", { ...(control ? { "data-edit": "" } : {}), className: `text-meta text-ink ${mark} ${lineOver(id)} ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: flagged === null ? (control ? (c.edit?.(row, set)) : (c.render(row))) : (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5", children: [flagged, _jsx("span", { className: "min-w-0 flex-1", children: control ? c.edit?.(row, set) : c.render(row) })] })) }, c.id));
                                         }), onRemove === undefined ? null : (_jsx("td", { className: `w-0 py-1 pr-2 pl-1 align-middle ${mark}`, children: _jsx("span", { className: "flex opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 group-focus-visible/row:opacity-100 focus-within:opacity-100", onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { icon: Trash2, label: copy.editable.remove, size: "sm", tone: "danger", ...(editable && stop !== id ? { tabIndex: -1 } : {}), onClick: () => onRemove(id) }) }) }))] }, id));
-                            })) }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
+                            })) }), totals === undefined ? null : (_jsx("tfoot", { children: _jsxs("tr", { children: [reorderable ? _jsx("td", { className: "border-t border-line-strong" }) : null, columns.map((c, i) => (_jsx("td", { className: `border-t border-line-strong text-meta font-semibold text-ink ${cell} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: totals[i] ?? null }, c.id))), onRemove === undefined ? null : (_jsx("td", { className: "border-t border-line-strong" }))] }) }))] })) }), onAdd === undefined && (adds === undefined || adds.length === 0) ? null : (
             /* The «add» goes under the grid, as text, not as a button away from it:
                what is about to happen is that one more row shows up right here.
                The hover is the same inset mark as a row: the shell lines the label

package/dist/primitives/table/ReportTable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { currentCopyLocale, fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
+import { HEADER_TEXT } from "./Table.js";
 import { ChevronRight, Info } from "lucide-react";
 import { useState } from "react";
 /* `useGrouping: "always"` and not the default: without it, four-digit numbers
@@ -102,5 +103,5 @@ defaultOpen, caption, height, }) {
        desplazamiento de la barra y quedaba empujado 68 px hacia adentro de su
        propia caja — banda en blanco arriba y títulos de columna cayendo entre
        las filas. */
-    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsxs("table", { className: "w-full border-collapse px-1", children: [caption === undefined ? null : (_jsx("caption", { className: `text-left text-meta text-muted ${byDensity(d, "px-3 pb-2", "px-2 pb-1.5")}`, children: caption })), _jsx("thead", { className: "sticky z-20 bg-ground", style: stickyTop, children: _jsxs("tr", { className: "border-b border-line-strong", children: [_jsx("th", { className: `sticky left-0 z-10 bg-ground text-left ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: _jsx("span", { className: "sr-only", children: copy.report.concept }) }), columns.map((c) => (_jsx("th", { scope: "col", className: `text-right text-meta font-medium whitespace-nowrap text-muted ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: c.header }, c.id))), _jsx("th", { className: "w-0" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsx(ReportLine, { row: r, columns: columns, open: open, onToggle: toggle, compact: compact }, r.id))) })] }) }));
+    _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsxs("table", { className: "w-full border-collapse px-1", children: [caption === undefined ? null : (_jsx("caption", { className: `text-left text-meta text-muted ${byDensity(d, "px-3 pb-2", "px-2 pb-1.5")}`, children: caption })), _jsx("thead", { className: "sticky z-20 bg-ground", style: stickyTop, children: _jsxs("tr", { className: "border-b border-line-strong", children: [_jsx("th", { className: `sticky left-0 z-10 bg-ground text-left ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: _jsx("span", { className: "sr-only", children: copy.report.concept }) }), columns.map((c) => (_jsx("th", { scope: "col", className: `text-right ${HEADER_TEXT} ${compact ? "px-2 py-1.5" : "px-3 py-2"}`, children: c.header }, c.id))), _jsx("th", { className: "w-0" })] }) }), _jsx("tbody", { children: rows.map((r) => (_jsx(ReportLine, { row: r, columns: columns, open: open, onToggle: toggle, compact: compact }, r.id))) })] }) }));
 }

package/dist/primitives/table/RowActions.js

@@ -3,19 +3,24 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
 import { IconButton } from "../button/Button.js";
 import { Menu } from "../menu/Menu.js";
+import { useRowWash } from "./Table.js";
 import { MoreHorizontal } from "lucide-react";
 export function RowActions({ actions, 
 /** How many stay visible before the rest fall into the `⋯`. */
 inline = 2, }) {
     const copy = useUiCopy();
+    const wash = useRowWash();
     if (actions.length === 0)
-        return _jsx("td", { className: "w-0" });
+        return _jsx("td", { className: `w-0 border-b border-line ${wash}` });
     /* With only one left over there is no `⋯`: a menu with a single item is one
        extra click to reach the same button. */
     const inlineActions = actions.length <= inline + 1 ? actions : actions.slice(0, inline);
     const overflow = actions.slice(inlineActions.length);
     const byId = new Map(actions.map((a) => [a.id, a]));
-    return (_jsx("td", { className: "w-0 py-1 pr-2 pl-1 align-middle whitespace-nowrap", children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: "flex items-center justify-end gap-0.5 opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100", children: [inlineActions.map((a) => (_jsx(IconButton, { icon: a.icon, label: a.label, size: "sm", ...(a.tone === undefined ? {} : { tone: a.tone }), ...(a.disabled === undefined ? {} : { disabled: a.disabled }), onClick: a.onSelect }, a.id))), overflow.length === 0 ? null : (_jsx(Menu, { label: copy.selection.more, icon: MoreHorizontal, iconOnly: true, chevron: false, align: "end", groups: [
+    return (
+    /* The row's hairline runs under its actions too: without it the separators stopped one
+       column short and the actions read as outside the table. */
+    _jsx("td", { className: `w-0 border-b border-line py-1 pr-2 pl-1 align-middle whitespace-nowrap last:rounded-r-control ${wash}`, children: _jsxs("div", { onClick: (e) => e.stopPropagation(), className: "flex items-center justify-end gap-0.5 opacity-0 transition-opacity duration-(--duration-instant) group-hover/row:opacity-100 focus-within:opacity-100 pointer-coarse:opacity-100", children: [inlineActions.map((a) => (_jsx(IconButton, { icon: a.icon, label: a.label, size: "sm", ...(a.tone === undefined ? {} : { tone: a.tone }), ...(a.disabled === undefined ? {} : { disabled: a.disabled }), onClick: a.onSelect }, a.id))), overflow.length === 0 ? null : (_jsx(Menu, { label: copy.selection.more, icon: MoreHorizontal, iconOnly: true, chevron: false, align: "end", groups: [
                         {
                             options: overflow.map((a) => ({
                                 id: a.id,

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

@@ -14,6 +14,9 @@ height, }: {
      *  system scale instead of pinning a size in pixels. */
     height?: number | string;
 }): import("react").JSX.Element;
+/** The text of a column header, shared by every table of the family. Ink and semibold, not
+ *  muted: in grey at the cells' weight the names of the columns read as one more row. */
+export declare const HEADER_TEXT = "text-meta font-semibold whitespace-nowrap text-ink";
 export declare function THead({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
@@ -71,6 +74,8 @@ export declare function TrDetail({ children, detail, open, onToggle, columns, la
  *  a hovered row and a painted cell are two signals, and stacking them reads
  *  as a third color. */
 export declare const CELL_TONE: Record<Tone, string>;
+/** The wash of the row a cell sits in: for cells drawn outside `Td`, like the row's actions. */
+export declare function useRowWash(): string;
 export declare function Td({ children, numeric, align, 
 /** A CODE — an id, a hash, a key — set in the monospaced face. Off by default: a
  *  number does not need it (a numeric cell gets tabular figures on its own), and a