@sincpro/web-ui 0.2.0 → 1.0.0

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) {
@@ -80,7 +97,7 @@ export function Picker({ mode, ...props }) {
        to be ABOVE the component that asks for it. */
     return (_jsx(AriaLocale, { children: _jsx(EditablePicker, { ...props }) }));
 }
-function EditablePicker({ id: ownId, items, value, onChange, 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, 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,
@@ -121,22 +138,46 @@ function EditablePicker({ id: ownId, items, value, onChange, placeholder, onBrow
     /* «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 +201,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

package/dist/primitives/table/Table.js

@@ -15,6 +15,9 @@ height, }) {
        medición. */
     _jsx("div", { ref: caja.ref, className: `min-w-0 ${caja.className}`, style: caja.style, children: _jsx("table", { className: "w-full border-separate border-spacing-0 px-1 text-left", children: children }) }));
 }
+/** 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 const HEADER_TEXT = "text-meta font-semibold whitespace-nowrap text-ink";
 export function THead({ children }) {
     return (
     /* Se pega DEBAJO de lo que ya esté pegado —la barra de la aplicación y la
@@ -43,19 +46,21 @@ export function Th({ children, sortKey, sort, onSort, numeric = false, align, wi
             onSort(null);
     }
     const Icon = dir === "asc" ? ArrowUp : dir === "desc" ? ArrowDown : ChevronsUpDown;
-    return (_jsx("th", { scope: "col", style: width === undefined ? undefined : { width }, "aria-sort": active ? (dir === "asc" ? "ascending" : "descending") : "none", className: `border-b border-line-strong px-3 py-2 text-meta font-medium whitespace-nowrap text-muted ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"}`, children: sortKey === undefined ? (children) : (_jsxs("button", { type: "button", onClick: nextSort, className: `inline-flex items-center gap-1 rounded-control transition-colors duration-(--duration-instant) hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${(align ?? (numeric ? "right" : "left")) === "right" ? "flex-row-reverse" : ""} ${active ? "text-ink" : ""}`, children: [children, _jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${active ? "text-primary" : "text-line-strong"}`, strokeWidth: 2, "aria-hidden": true })] })) }));
+    return (_jsx("th", { scope: "col", style: width === undefined ? undefined : { width }, "aria-sort": active ? (dir === "asc" ? "ascending" : "descending") : "none", className: `border-b border-line-strong px-3 py-2 ${HEADER_TEXT} ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"}`, children: sortKey === undefined ? (children) : (_jsxs("button", { type: "button", onClick: nextSort, className: `inline-flex items-center gap-1 rounded-control transition-colors duration-(--duration-instant) hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${(align ?? (numeric ? "right" : "left")) === "right" ? "flex-row-reverse" : ""} ${active ? "text-ink" : ""}`, children: [children, _jsx(Icon, { className: `size-(--size-icon-sm) shrink-0 ${active ? "text-primary" : "text-line-strong"}`, strokeWidth: 2, "aria-hidden": true })] })) }));
 }
 /** The wash of a row lives on the cells, not on the `<tr>`. A background on the
  *  row paints edge to edge; on the cells the ends can round and the table's
  *  padding keeps the mark off the card. */
-const RowMark = createContext(false);
+const RowMark = createContext({ selected: false, interactive: false });
 const ROW_WASH = "group-hover/row:bg-ink/4";
 const ROW_ON = "bg-primary/8";
-function rowWash(selected) {
-    return selected ? ROW_ON : ROW_WASH;
+/* The hover wash only where a click does something: on a read-only row it promised a click
+   that did nothing. */
+function rowWash({ selected, interactive }) {
+    return selected ? ROW_ON : interactive ? ROW_WASH : "";
 }
 export function Tr({ children, onClick, selected = false, }) {
-    return (_jsx(RowMark.Provider, { value: selected, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
+    return (_jsx(RowMark.Provider, { value: { selected, interactive: onClick !== undefined }, children: _jsx("tr", { onClick: onClick, className: `group/row ${onClick === undefined ? "" : "cursor-pointer"}`, children: children }) }));
 }
 /**
  * A row that opens its own detail underneath.
@@ -71,7 +76,7 @@ export function Tr({ children, onClick, selected = false, }) {
  */
 export function TrDetail({ children, detail, open, onToggle, columns, label, selected = false, }) {
     const id = useId();
-    return (_jsx(RowMark.Provider, { value: selected, children: _jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onToggle, className: "group/row cursor-pointer", children: [_jsx("td", { className: `border-b border-line py-1.5 pr-0 pl-2.5 align-middle first:rounded-l-control ${rowWash(selected)}`, children: _jsx("button", { type: "button", onClick: (e) => {
+    return (_jsx(RowMark.Provider, { value: { selected, interactive: true }, children: _jsxs(_Fragment, { children: [_jsxs("tr", { onClick: onToggle, className: "group/row cursor-pointer", children: [_jsx("td", { className: `border-b border-line py-1.5 pr-0 pl-2.5 align-middle first:rounded-l-control ${rowWash({ selected, interactive: true })}`, children: _jsx("button", { type: "button", onClick: (e) => {
                                     e.stopPropagation();
                                     onToggle();
                                 }, "aria-expanded": open, "aria-controls": id, "aria-label": label, className: "inline-flex size-5 items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2 }) }) }), children] }), _jsx("tr", { id: id, hidden: !open, children: _jsx("td", { colSpan: columns + 1, className: "border-b border-line bg-ground px-3 py-3", children: detail }) })] }) }));
@@ -87,6 +92,10 @@ export const CELL_TONE = {
     bad: "bg-bad/12",
     accent: "bg-accent/20",
 };
+/** The wash of the row a cell sits in: for cells drawn outside `Td`, like the row's actions. */
+export function useRowWash() {
+    return rowWash(useContext(RowMark));
+}
 export function Td({ children, numeric = false, 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
@@ -100,8 +109,8 @@ mono = false,
  *  something else — and in a table of forty rows by six columns, colored text
  *  gets lost. */
 tone, title, }) {
-    const selected = useContext(RowMark);
-    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(selected) : CELL_TONE[tone]}`, children: children }));
+    const mark = useContext(RowMark);
+    return (_jsx("td", { title: title, className: `border-b border-line px-3 py-1.5 text-meta text-ink first:rounded-l-control last:rounded-r-control ${(align ?? (numeric ? "right" : "left")) === "right" ? "text-right" : "text-left"} ${mono ? "font-mono tabular-nums" : numeric ? "tabular-nums" : ""} ${tone === undefined ? rowWash(mark) : CELL_TONE[tone]}`, children: children }));
 }
 /** The selection checkbox, with its third state.
  *

package/dist/primitives/tag/Tags.d.ts

@@ -7,6 +7,8 @@ export type TagItem = {
      *  comes from, which symbol a comparison is. It goes muted and inside. */
     note?: string;
     icon?: LucideIcon;
+    /** A person on the chip: its photo, or its initials when `true` — followers, assignees. */
+    avatar?: true | string;
     /** Choose it. Without this the chip is a value and is not pressed. */
     onSelect?: () => void;
     /** Remove it, when removing it means something. It is a separate button

package/dist/primitives/tag/Tags.js

@@ -4,6 +4,7 @@ import { AriaLocale } from "../../foundations/aria.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { cn, focusRing } from "../../foundations/variants.js";
 import { tagTone } from "./Tag.js";
+import { Avatar } from "../value/Person.js";
 import { X } from "lucide-react";
 import { Button as AriaButton, Tag as AriaTag, TagGroup, TagList, } from "react-aria-components";
 export function Tags({ items, surface, label, labelledBy, stack = false, multiple = false, }) {
@@ -95,7 +96,7 @@ function shell({ item, surface, stack, removable, pressable, }) {
 }
 function Inside({ item }) {
     const Icon = item.icon;
-    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (_jsxs("span", { className: "shrink-0 opacity-60", children: ["\u00B7 ", item.note] }))] }));
+    return (_jsxs(_Fragment, { children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-3 shrink-0 opacity-70", strokeWidth: 2, "aria-hidden": true })), item.avatar === undefined ? null : (_jsx("span", { "aria-hidden": true, className: "-my-0.5 -ml-1.5 flex shrink-0", children: _jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) }) })), _jsx("span", { className: "min-w-0 truncate", children: item.label }), item.note === undefined ? null : (_jsxs("span", { className: "shrink-0 opacity-60", children: ["\u00B7 ", item.note] }))] }));
 }
 /* The × is React Aria's `remove` slot: it removes THIS chip and never presses it, so
    removing a pressable chip does not also choose it. */

package/dist/primitives/tag/TagsField.d.ts

@@ -1,3 +1,4 @@
+import type { OpenTarget } from "../../foundations/types.js";
 import { type FormMode } from "../field/mode.js";
 import { type TagOption } from "./choices.js";
 export type TagsFieldProps = {
@@ -14,6 +15,15 @@ export type TagsFieldProps = {
      * backend (Odoo's `name_create`); the consumer also appends the new option to `options`.
      */
     onCreate?: (label: string) => string | Promise<string>;
+    /** «Buscar más…» at the end of the list: the tags to add chosen from a table
+     *  (the list that chooses, `List onChoose` with `selection`, in a modal). It gets what was typed. */
+    onBrowseAll?: (query: string) => void;
+    /** Open the record behind a chip — a follower, a product, a category. Pressing the chip (or
+     *  Enter on it) opens it in `openTarget`; its × still only removes. Absent, a chip is a value. */
+    onOpen?: (id: string, to: OpenTarget) => void;
+    /** Where a pressed chip opens. A peek by default: a chip is a glance at one of many — «who is
+     *  this follower?» — not a place to go and work. */
+    openTarget?: OpenTarget;
     /** The input's placeholder while no tag is chosen. Defaults to the copy table's «Add…». */
     placeholder?: string;
     disabled?: boolean;