@sincpro/web-ui 0.1.0 → 1.0.0

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

@@ -20,7 +20,7 @@ value,
  *  nothing. */
 tone, 
 /** What the cell says on hover: «imputado por la mediana». */
-note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, }: {
+note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, onAddRow, }: {
     columns: readonly SheetColumn[];
     rows: number;
     value: (row: number, column: SheetColumn, columnIndex: number) => string | number | null;
@@ -67,4 +67,7 @@ note, height, rowLabel, band, onBandToggle, caption, onCommit, editable, }: {
     /** Which cells are editable. Without this, all of them — but a computed column
      *  or an identifier is not touched. */
     editable?: (row: number, column: SheetColumn, columnIndex: number) => boolean;
+    /** Present = rows can be added (see the file's header). Only with `onCommit`: a row
+     *  that cannot be written in is not worth adding. */
+    onAddRow?: () => void;
 }): import("react").JSX.Element;

package/dist/primitives/table/SheetTable.js

@@ -4,8 +4,8 @@ import { useUiCopy } from "../../foundations/copy.js";
 import { stickyTop, useScrollBox } from "../../foundations/sticky.js";
 import { Cell } from "../value/Value.js";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ChevronRight } from "lucide-react";
-import { useState } from "react";
+import { ChevronRight, Plus } from "lucide-react";
+import { useEffect, useState } from "react";
 const TONE = {
     neutral: "bg-ink/6",
     info: "bg-info/12",
@@ -26,7 +26,7 @@ value,
  *  nothing. */
 tone, 
 /** What the cell says on hover: «imputado por la mediana». */
-note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }) {
+note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, onAddRow, }) {
     const copy = useUiCopy();
     const labelOf = rowLabel ?? ((i) => (i + 1).toLocaleString(copy.locale));
     /* `"auto"` es para un conjunto que ya vino CORTADO —una página de ochenta— y
@@ -78,6 +78,27 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }
         if (dr !== 0 || dc !== 0)
             goTo(active.r + dr, active.c + dc);
     }
+    /* The column the active cell waits in until the added row arrives, and how many rows
+       there were when it was asked for. */
+    const canAdd = isEditable && onAddRow !== undefined;
+    const [arriving, setArriving] = useState(null);
+    function addRow(c) {
+        if (!canAdd)
+            return;
+        setArriving({ c, from: rows });
+        onAddRow?.();
+    }
+    useEffect(() => {
+        if (arriving === null || rows <= arriving.from)
+            return;
+        setArriving(null);
+        setActive({ r: rows - 1, c: arriving.c });
+        setDraft(null);
+        v.scrollToIndex(rows - 1);
+        caja.ref.current?.focus();
+        /* `v` and `caja` are new objects every render; the row count is what decides. */
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rows, arriving]);
     /* All the keyboard handling in one place. Splitting it between the box and
        each cell is how you end up with spreadsheets whose arrows sometimes move
        and sometimes scroll. */
@@ -92,7 +113,12 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }
             }
             else if (e.key === "Enter") {
                 e.preventDefault();
-                commit(e.shiftKey ? -1 : 1, 0);
+                if (!e.shiftKey && canAdd && r === rows - 1) {
+                    commit(0, 0);
+                    addRow(c);
+                }
+                else
+                    commit(e.shiftKey ? -1 : 1, 0);
             }
             else if (e.key === "Tab") {
                 e.preventDefault();
@@ -192,6 +218,13 @@ note, height = 420, rowLabel, band, onBandToggle, caption, onCommit, editable, }
                                                         ? "cursor-cell"
                                                         : ""}`, children: isEditingHere ? (_jsx("input", { autoFocus: true, value: draft, onChange: (ev) => setDraft(ev.target.value), onBlur: () => commit(0, 0), className: `absolute inset-0 w-full bg-surface px-2.5 text-meta tabular-nums text-ink outline-none ${c.numeric === true ? "text-right" : "text-left"}` })) : (_jsx(Cell, { value: value(item.index, c, ci), max: 24 })) }, c.id));
                                         }), _jsx("div", { className: "flex-1" })] }, item.key));
-                            }) })] }) })] }));
+                            }) })] }) }), canAdd ? (
+            /* Under the grid and outside its scroll box, like the editable table's «add»: in
+               view however far down a long sheet is scrolled. The new row's first cell that
+               can be written takes the place. */
+            _jsx("div", { className: "px-1 py-0.5", children: _jsxs("button", { type: "button", onClick: () => {
+                        const first = columns.findIndex((_, ci) => canEdit(rows, ci));
+                        addRow(first === -1 ? 0 : first);
+                    }, className: "flex w-full items-center gap-1.5 rounded-control px-2 py-0.5 text-left text-meta text-primary transition-colors duration-(--duration-instant) hover:bg-primary/5 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", children: [_jsx(Plus, { className: "size-(--size-icon-sm)", strokeWidth: 2.5, "aria-hidden": true }), copy.editable.addRow] }) })) : null] }));
 }
 const ROW_LABEL_WIDTH = 64;

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

@@ -1,5 +1,5 @@
-export { type Aggregate, type DataColumn, DataTable, type GroupColumn, } from "./DataTable.js";
-export { EditableTable, type EditColumn, type EditLayout, type StackPlace, stackPlaces, } from "./EditableTable.js";
+export { type Aggregate, type DataColumn, DataTable, type DataTableCreate, type GroupColumn, } from "./DataTable.js";
+export { EditableTable, type EditAdd, type EditBands, type EditColumn, type EditLayout, sectionLines, type StackPlace, stackPlaces, type TabTarget, tabTarget, } from "./EditableTable.js";
 export { PivotTable, type PivotTableProps, } from "./PivotTable.js";
 export { type ReportColumn, type ReportRow, type ReportRowKind, ReportTable, } from "./ReportTable.js";
 export { type RowAction, RowActions } from "./RowActions.js";

package/dist/primitives/table/index.js

@@ -1,7 +1,7 @@
 /* The presentation (`Table`) is ours and is used on its own; `DataTable` is the
    wiring to TanStack for grouping and sorting. See the note in `DataTable.tsx`. */
 export { DataTable, } from "./DataTable.js";
-export { EditableTable, stackPlaces, } from "./EditableTable.js";
+export { EditableTable, sectionLines, stackPlaces, tabTarget, } from "./EditableTable.js";
 export { PivotTable, } from "./PivotTable.js";
 export { ReportTable, } from "./ReportTable.js";
 export { RowActions } from "./RowActions.js";

package/dist/primitives/tabs/Tabs.d.ts

@@ -4,7 +4,7 @@ import type { LucideIcon } from "lucide-react";
  * UNA TIRA DE PESTAÑAS. La misma en todo el sistema.
  *
  * Context: esto vivía adentro del encabezado del registro y se llamaba
- * `Aspects`, así que el chatter —que necesita exactamente lo mismo— no podía
+ * `Aspects`, así que la actividad —que necesita exactamente lo mismo— no podía
  * usarlo: un contexto no importa de otro contexto. El resultado era una tira de
  * pestañas de segunda mano, con el activo marcado de otra manera, en la misma
  * pantalla que la buena.
@@ -76,7 +76,7 @@ export type TabItem = {
     notice?: TabNotice;
 };
 /**
- * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Chatter`).
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
  *
  * Built on React Aria's `Tabs`, so the strip is a real tab list for the keyboard: the
  * arrows move between tabs and select them, Home/End jump to the ends, and only the open

package/dist/primitives/tabs/Tabs.js

@@ -22,7 +22,7 @@ const NOTICE_DOT = {
     accent: "bg-accent",
 };
 /**
- * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Chatter`).
+ * The strip only: what each tab opens is drawn by whoever uses it (`Record`, `Activity`).
  *
  * Built on React Aria's `Tabs`, so the strip is a real tab list for the keyboard: the
  * arrows move between tabs and select them, Home/End jump to the ends, and only the open

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,12 +15,24 @@ 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;
     id?: string;
     describedBy?: string;
     invalid?: boolean;
+    /** The name of the control when it is NOT inside a `Field` — a cell of an editable table.
+     *  Inside a field, the field's label names it. */
+    "aria-label"?: string;
     /** Forces the mode. By default it inherits the form's: in read mode it draws `Tags`. */
     mode?: FormMode;
 };

package/dist/primitives/tag/TagsField.js

@@ -8,9 +8,11 @@ import { useFieldIds } from "../field/context.js";
 import { ReadValue } from "../field/Field.js";
 import { useFormMode } from "../field/mode.js";
 import { Popover } from "../overlay/Popover.js";
+import { MatchedText } from "../picker/MatchedText.js";
 import { tagChoices, withoutTag, withTag, } from "./choices.js";
 import { Tags } from "./Tags.js";
-import { Plus } from "lucide-react";
+import { Avatar } from "../value/Person.js";
+import { Plus, Search } from "lucide-react";
 import { useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox, ListBoxItem, useFilter, useLocale, } from "react-aria-components";
 /* ==================================================================== *
@@ -43,6 +45,15 @@ import { ComboBox as AriaComboBox, ComboBoxStateContext, Group, Input, ListBox,
  * ==================================================================== */
 /** The key of the «create» row. Not an id: it cannot collide with one. */
 const CREATE = "\u0000create";
+/** The key of the «Buscar más…» row. */
+const BROWSE = "\u0000browse";
+/** What a chip needs to open its record: the press, and the place it opens named as its title. */
+function useChipOpening(onOpen, to = "peek") {
+    const copy = useUiCopy();
+    return (id) => onOpen === undefined
+        ? {}
+        : { onSelect: () => onOpen(id, to), title: copy.picker.openIn[to] };
+}
 /** The chosen tags as chips, in the order of `value`. An id missing from `options` is still
  *  drawn (as itself): hiding it would hide data the record has. */
 function chosenOptions(options, value) {
@@ -56,6 +67,7 @@ function chosenOptions(options, value) {
  * chips, and its hint and error describe the input. In read mode it is `Tags`.
  */
 export function TagsField({ mode, ...props }) {
+    const opening = useChipOpening(props.onOpen, props.openTarget);
     if (useFormMode(mode) === "read") {
         const chosen = chosenOptions(props.options, props.value);
         if (chosen.length === 0)
@@ -64,19 +76,22 @@ export function TagsField({ mode, ...props }) {
                     id: option.value,
                     label: option.label,
                     ...(option.tone === undefined ? {} : { tone: option.tone }),
+                    ...(option.avatar === undefined ? {} : { avatar: option.avatar }),
+                    ...opening(option.value),
                 })) }) }));
     }
     /* 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(EditableTagsField, { ...props }) }));
 }
-function EditableTagsField({ value, onChange, options, onCreate, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, }) {
+function EditableTagsField({ value, onChange, options, onCreate, onBrowseAll, onOpen, openTarget, placeholder, disabled = false, id: ownId, describedBy: ownDescribedBy, invalid: ownInvalid, "aria-label": ariaLabel, }) {
     const { id, labelledBy, describedBy, invalid } = useFieldIds({
         id: ownId,
         describedBy: ownDescribedBy,
         invalid: ownInvalid,
     });
     const copy = useUiCopy();
+    const opening = useChipOpening(onOpen, openTarget);
     const { contains } = useFilter({ sensitivity: "base" });
     const { locale } = useLocale();
     const collator = useMemo(() => new Intl.Collator(locale, { sensitivity: "base", usage: "search" }), [locale]);
@@ -89,17 +104,25 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
     const latest = useRef(value);
     latest.current = value;
     const { available, create } = tagChoices(options, value, text, { contains, same: (a, b) => collator.compare(a.trim(), b) === 0 }, onCreate !== undefined && !disabled);
-    const listed = create === null
-        ? available
-        : [
-            ...available,
-            { value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) },
-        ];
+    const listed = [
+        ...available,
+        ...(create === null
+            ? []
+            : [{ value: CREATE, label: fillCopy(copy.inlineEdit.createTag, { name: create }) }]),
+        ...(onBrowseAll === undefined || disabled
+            ? []
+            : [{ value: BROWSE, label: copy.picker.browseAll }]),
+    ];
     const commit = (key) => {
         if (key === null)
             return;
         const chosen = String(key);
+        const typed = text;
         setText("");
+        if (chosen === BROWSE) {
+            onBrowseAll?.(typed);
+            return;
+        }
         if (chosen !== CREATE) {
             onChange?.(withTag(latest.current, chosen));
             return;
@@ -120,6 +143,8 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
         id: option.value,
         label: option.label,
         ...(option.tone === undefined ? {} : { tone: option.tone }),
+        ...(option.avatar === undefined ? {} : { avatar: option.avatar }),
+        ...opening(option.value),
         ...(disabled ? {} : { onRemove: () => remove(option.value) }),
     }));
     return (
@@ -132,7 +157,11 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
             /* The box grows with the chips: five categories wrap to a second line instead of
                scrolling out of sight. */
             className: "h-auto min-h-(--size-control-md) flex-wrap gap-1 py-1 pl-1.5",
-        }), children: [chips.length === 0 ? null : (_jsx(Tags, { items: chips, ...(labelledBy === undefined ? {} : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
+        }), children: [chips.length === 0 ? null : (_jsx(Tags, { items: chips, ...(labelledBy === undefined
+                    ? ariaLabel === undefined
+                        ? {}
+                        : { label: ariaLabel }
+                    : { labelledBy }) })), _jsxs(AriaComboBox, { id: id, "aria-labelledby": labelledBy, "aria-label": ariaLabel, "aria-describedby": describedBy, items: listed, selectedKey: null, onSelectionChange: commit, inputValue: text, onInputChange: setText, 
                 /* Arriving at the field shows what can still be added, the way a many2one opens its
                    list on focus. With every tag chosen and no text there is nothing to show, and the
                    list stays closed. */
@@ -145,7 +174,7 @@ function EditableTagsField({ value, onChange, options, onCreate, placeholder, di
                                 onChange?.(withoutTag(value, last));
                         }, empty: text === "" }), _jsx(Popover, { triggerRef: boxRef, ...(width === null
                             ? {}
-                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsx("span", { className: "truncate", children: item.label })) })) }) })] })] }));
+                            : { style: { "--trigger-width": `${width}px` } }), placement: "bottom start", className: "w-(--trigger-width)", children: _jsx(ListBox, { items: listed, dependencies: [text], className: "max-h-[inherit] overflow-auto p-1 outline-0", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: (state) => cn(listOptionStyles(state), item.value === CREATE || item.value === BROWSE ? "text-primary" : ""), children: item.value === CREATE ? (_jsxs(_Fragment, { children: [_jsx(Plus, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : item.value === BROWSE ? (_jsxs(_Fragment, { children: [_jsx(Search, { "aria-hidden": true, className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: item.label })] })) : (_jsxs(_Fragment, { children: [item.avatar === undefined ? null : (_jsx(Avatar, { name: item.label, size: "sm", ...(typeof item.avatar === "string" ? { src: item.avatar } : {}) })), _jsx("span", { className: "truncate", children: _jsx(MatchedText, { text: item.label, query: text, locale: copy.locale }) })] })) })) }) })] })] }));
 }
 /** The input after the chips. It reads the combobox's state to know whether the keyboard
  *  marked an option — Enter with nothing marked takes the first match. */

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

@@ -11,6 +11,8 @@ export interface TagOption {
     label: string;
     /** Neutral by default: «mayorista» classifies, it does not warn. */
     tone?: Tone;
+    /** A person: its face on the chip and in the list — `true` for initials, a URL for a photo. */
+    avatar?: true | string;
 }
 /** How the typed text is compared — the locale's, handed in by the component. */
 export type TagMatch = {

package/dist/primitives/tree/Tree.d.ts

@@ -0,0 +1,56 @@
+import { type LucideIcon } from "lucide-react";
+/** One record of the hierarchy. With `children` it is a group that folds. */
+export interface TreeItem {
+    id: string;
+    label: string;
+    /** What reads beside the name, at the right, in tabular figures: a balance, a stock, a
+     *  count. Already formatted — the tree does not know a currency from a unit. */
+    meta?: string;
+    icon?: LucideIcon;
+    children?: readonly TreeItem[];
+    /** It cannot be chosen — a view account that groups others and takes no entries. It still
+     *  folds and opens. */
+    disabled?: boolean;
+}
+/** One name or the other: a tree with no name is announced as a lone «tree». */
+type TreeName = {
+    /** The accessible name: «Plan de cuentas». */
+    label: string;
+    labelledBy?: never;
+} | {
+    /** The id of a visible heading that names the tree — the label of the `Field` it lives
+     *  in. */
+    labelledBy: string;
+    label?: never;
+};
+export type TreeProps = TreeName & {
+    items: readonly TreeItem[];
+    /** The groups open right now. Pass it with `onExpandedChange` to own the expansion. */
+    expanded?: readonly string[];
+    /** The groups that start open, when the tree owns its expansion. */
+    defaultExpanded?: readonly string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** `none` reads; `single` chooses one record (a category, a location); `multiple` a set. */
+    selectionMode?: "none" | "single" | "multiple";
+    /** The chosen ids — a list in both modes, like every other control, so a screen does not
+     *  switch shapes when one becomes many. */
+    selected?: readonly string[];
+    defaultSelected?: readonly string[];
+    onSelectedChange?: (ids: string[]) => void;
+    /** Open the record: Enter, or a click (a double click when the tree chooses one). Without
+     *  it, a click on a group folds or opens it. */
+    onAction?: (id: string) => void;
+    /** What an empty tree says. By default, the copy table's `tree.empty`. */
+    empty?: string;
+};
+/**
+ * A hierarchy of records — the chart of accounts, product categories, warehouse locations —
+ * with its groups that fold, a figure per row, and one or many rows to choose.
+ *
+ * Context: the keyboard is React Aria's `Tree`: arrows walk the visible rows, → opens a group
+ * and ← folds it (or goes up to the parent), Home and End jump, and typing a name moves to it.
+ * Escape does NOT clear the selection: the tree often lives in a dialog or a popover, and
+ * Escape there means «close» — clearing the choice on the way out would lose it without a word.
+ */
+export declare function Tree({ items, label, labelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode, selected, defaultSelected, onSelectedChange, onAction, empty, }: TreeProps): import("react").JSX.Element;
+export {};

package/dist/primitives/tree/Tree.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AriaLocale } from "../../foundations/aria.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { cn, focusRing, tv } from "../../foundations/variants.js";
+import { Check, ChevronRight } from "lucide-react";
+import { Button as AriaButton, Checkbox as AriaCheckbox, Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent, } from "react-aria-components";
+const row = tv({
+    extend: focusRing,
+    base: "group relative flex min-w-0 cursor-default items-center rounded-control text-meta text-ink -outline-offset-2 select-none forced-color-adjust-none",
+    variants: {
+        isSelected: {
+            true: "bg-primary/10 forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        },
+        isHovered: { true: "" },
+    },
+    compoundVariants: [{ isSelected: false, isHovered: true, class: "bg-ink/4" }],
+});
+/* The chevron column is exactly one indent step wide, so a child's chevron lands under its
+   parent's name and the levels read as columns, not as a ragged edge. */
+const chevronButton = tv({
+    extend: focusRing,
+    base: "inline-flex size-(--spacing-indent) shrink-0 items-center justify-center rounded-mark text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink pressed:bg-ink/10",
+});
+/** Every id of the hierarchy that can be chosen — what «select all» means here. */
+function choosable(items) {
+    return items.flatMap((item) => [
+        ...(item.disabled === true ? [] : [item.id]),
+        ...choosable(item.children ?? []),
+    ]);
+}
+/**
+ * A hierarchy of records — the chart of accounts, product categories, warehouse locations —
+ * with its groups that fold, a figure per row, and one or many rows to choose.
+ *
+ * Context: the keyboard is React Aria's `Tree`: arrows walk the visible rows, → opens a group
+ * and ← folds it (or goes up to the parent), Home and End jump, and typing a name moves to it.
+ * Escape does NOT clear the selection: the tree often lives in a dialog or a popover, and
+ * Escape there means «close» — clearing the choice on the way out would lose it without a word.
+ */
+export function Tree({ items, label, labelledBy, expanded, defaultExpanded, onExpandedChange, selectionMode = "none", selected, defaultSelected, onSelectedChange, onAction, empty, }) {
+    const copy = useUiCopy();
+    const density = useDensity();
+    const pad = byDensity(density, "py-1.5 pe-2", "py-0.5 pe-1.5");
+    const many = selectionMode === "multiple";
+    const onSelectionChange = (keys) => onSelectedChange?.(keys === "all" ? choosable(items) : [...keys].map(String));
+    const render = (node, level) => {
+        const children = node.children ?? [];
+        const group = children.length > 0;
+        const Icon = node.icon;
+        /* Each level is one indent step; the first one keeps a sliver of the row's own padding so
+           the chevron is not glued to the edge of its tint. */
+        const indent = {
+            paddingInlineStart: `calc(var(--spacing) * 1 + var(--spacing-indent) * ${level - 1})`,
+        };
+        return (_jsxs(AriaTreeItem, { id: node.id, textValue: node.label, isDisabled: node.disabled === true, className: ({ isSelected, isHovered, isFocusVisible }) => cn(row({ isSelected, isHovered, isFocusVisible }), pad), style: indent, children: [_jsx(TreeItemContent, { children: ({ isExpanded, isSelected }) => (_jsxs(_Fragment, { children: [group ? (_jsx(AriaButton, { slot: "chevron", className: ({ isFocusVisible }) => chevronButton({ isFocusVisible }), children: _jsx(ChevronRight, { className: `size-(--size-icon-sm) transition-transform duration-(--duration-quick) ease-(--ease-out) ${isExpanded ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }) })) : (_jsx("span", { "aria-hidden": true, className: "size-(--spacing-indent) shrink-0" })), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: [many ? _jsx(SelectionCheck, {}) : null, Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true })), _jsx("span", { className: cn("min-w-0 flex-1 truncate", group ? "font-medium" : "", isSelected ? "font-medium" : "", node.disabled === true && selectionMode !== "none" ? "text-muted" : ""), children: node.label }), node.meta === undefined ? null : (_jsx("span", { className: "shrink-0 ps-3 text-right tabular-nums whitespace-nowrap text-muted", children: node.meta })), selectionMode === "single" && isSelected ? (_jsx(Check, { className: "size-(--size-icon-sm) shrink-0 text-primary forced-colors:text-[HighlightText]", strokeWidth: 2.5, "aria-hidden": true })) : null] })] })) }), children.map((child) => render(child, level + 1))] }, node.id));
+    };
+    return (_jsx(AriaLocale, { children: _jsx(AriaTree, { ...(labelledBy === undefined
+                ? { "aria-label": label }
+                : { "aria-labelledby": labelledBy }), selectionMode: selectionMode, 
+            /* One to choose: a click chooses and a double click opens. Many: the click opens and
+               the check chooses. See the header. */
+            selectionBehavior: selectionMode === "single" ? "replace" : "toggle", disabledBehavior: "selection", escapeKeyBehavior: "none", ...(selected === undefined ? {} : { selectedKeys: selected }), ...(defaultSelected === undefined ? {} : { defaultSelectedKeys: defaultSelected }), ...(expanded === undefined ? {} : { expandedKeys: expanded }), ...(defaultExpanded === undefined ? {} : { defaultExpandedKeys: defaultExpanded }), ...(onExpandedChange === undefined
+                ? {}
+                : { onExpandedChange: (keys) => onExpandedChange([...keys].map(String)) }), ...(onSelectedChange === undefined ? {} : { onSelectionChange }), ...(onAction === undefined ? {} : { onAction: (key) => onAction(String(key)) }), renderEmptyState: () => (_jsx("p", { className: "px-2 py-3 text-meta text-muted", children: empty ?? copy.tree.empty })), className: "flex w-full min-w-0 flex-col gap-px outline-0", children: items.map((item) => render(item, 1)) }) }));
+}
+/* The check of a row when many can be chosen. It is React Aria's `selection` slot: it toggles
+   the row and never opens it. Drawn like `Checkbox`'s box so a check reads as one thing. */
+function SelectionCheck() {
+    return (_jsx(AriaCheckbox, { slot: "selection", className: "group/check inline-flex shrink-0 outline-0", children: ({ isSelected, isFocusVisible }) => (_jsx("span", { "aria-hidden": true, className: cn("inline-flex size-4 items-center justify-center rounded-mark border transition-colors duration-(--duration-instant) forced-color-adjust-none", isSelected
+                ? "border-primary bg-primary text-surface forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+                : "border-line-strong bg-surface text-transparent forced-colors:border-[ButtonBorder]", focusRing({ isFocusVisible })), children: _jsx(Check, { className: "size-3", strokeWidth: 2.5 }) })) }));
+}

package/dist/primitives/tree/index.d.ts

@@ -0,0 +1 @@
+export { Tree, type TreeItem, type TreeProps } from "./Tree.js";

package/dist/primitives/tree/index.js

@@ -0,0 +1,3 @@
+/* A hierarchy of records — the chart of accounts, categories, locations: read, folded and
+   chosen from. Not the app's menu: that is `NavigationTree`. */
+export { Tree } from "./Tree.js";