@sincpro/web-ui 1.1.0 → 1.3.0

package/dist/primitives/date/Calendar.js

@@ -44,7 +44,7 @@ const YEARS_LISTED = 100;
 function Header({ jump }) {
     const { direction } = useLocale();
     const [Prev, Next] = direction === "rtl" ? [ChevronRight, ChevronLeft] : [ChevronLeft, ChevronRight];
-    return (_jsxs("header", { className: "mb-2 flex items-center gap-1", children: [_jsx(AriaButton, { slot: "previous", className: navButton, children: _jsx(Prev, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) }), jump ? (_jsxs("div", { className: "flex flex-1 items-center justify-center", children: [_jsx(CalendarMonthPicker, { format: "long", children: (aria) => _jsx(Jump, { ...aria }) }), _jsx(CalendarYearPicker, { visibleYears: YEARS_LISTED, children: (aria) => _jsx(Jump, { ...aria }) })] })) : (_jsx(CalendarHeading, { className: "flex-1 text-center text-body font-semibold text-ink first-letter:uppercase" })), _jsx(AriaButton, { slot: "next", className: navButton, children: _jsx(Next, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }));
+    return (_jsxs("div", { className: "mb-2 flex items-center gap-1", children: [_jsx(AriaButton, { slot: "previous", className: navButton, children: _jsx(Prev, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) }), jump ? (_jsxs("div", { className: "flex flex-1 items-center justify-center", children: [_jsx(CalendarMonthPicker, { format: "long", children: (aria) => _jsx(Jump, { ...aria }) }), _jsx(CalendarYearPicker, { visibleYears: YEARS_LISTED, children: (aria) => _jsx(Jump, { ...aria }) })] })) : (_jsx(CalendarHeading, { className: "flex-1 text-center text-body font-semibold text-ink first-letter:uppercase" })), _jsx(AriaButton, { slot: "next", className: navButton, children: _jsx(Next, { "aria-hidden": true, className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }));
 }
 function WeekDays() {
     return (_jsx(CalendarGridHeader, { children: (day) => (_jsx(CalendarHeaderCell, { className: "pb-1 text-micro font-medium text-muted", children: day })) }));

package/dist/primitives/date/DatePicker.d.ts

@@ -1,4 +1,4 @@
-import { type FormMode } from "../field/mode.js";
+import { type FormMode } from "../../foundations/form.js";
 /** The typed segments inside the field box — shared with `TimeField` and `DateTimePicker`
  *  (internal: not in the family barrel). */
 export declare function Segments({ slot }: {

package/dist/primitives/date/DatePicker.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDate } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { tv } from "../../foundations/variants.js";
 import { Calendar, RangeCalendar } from "./Calendar.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 { Popover } from "../overlay/Popover.js";
 import { CalendarDays } from "lucide-react";
 import { DateField as AriaDateField, DateInput, DatePicker as AriaDatePicker, DateRangePicker as AriaDateRangePicker, DateSegment, Dialog, } from "react-aria-components";

package/dist/primitives/date/DateTime.d.ts

@@ -1,4 +1,4 @@
-import { type FormMode } from "../field/mode.js";
+import { type FormMode } from "../../foundations/form.js";
 type HourCycle = 12 | 24;
 type Shared = {
     id?: string;

package/dist/primitives/date/DateTime.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DateFormatter, parseDateTime, parseTime, toCalendarDate, } from "@internationalized/date";
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { Calendar } from "./Calendar.js";
 import { Segments } from "./DatePicker.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 { Popover } from "../overlay/Popover.js";
 import { CalendarDays } from "lucide-react";
 import { DatePicker as AriaDatePicker, Dialog, TimeField as AriaTimeField, } from "react-aria-components";

package/dist/primitives/field/Checks.d.ts

@@ -1,4 +1,4 @@
-import { type FormMode } from "./mode.js";
+import { type FormMode } from "../../foundations/form.js";
 export interface CheckItem {
     value: string;
     label: string;

package/dist/primitives/field/Checks.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
-import { useFieldIds } from "./context.js";
-import { useFormMode } from "./mode.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { Check, Minus } from "lucide-react";
 import { useId } from "react";
-import { Checkbox as AriaCheckbox, ListBox, ListBoxItem, Text, } from "react-aria-components";
+import { Checkbox as AriaCheckbox, ListBox, ListBoxItem, } from "react-aria-components";
 function Mark({ on, mixed, focus = false, invalid = false, }) {
     return (_jsx("span", { "aria-hidden": true, className: `inline-flex size-4 shrink-0 items-center justify-center rounded-mark border transition-colors duration-(--duration-instant) forced-color-adjust-none ${on
             ? "border-primary bg-primary text-surface forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
@@ -68,5 +68,5 @@ export function CheckList({ label, items, value, onChange, mono = false, emptyLa
     }
     return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("p", { id: labelId, className: "text-micro text-muted", children: label }), _jsx(ListBox, { "aria-labelledby": labelId, "aria-describedby": describedBy, items: items, selectionMode: "multiple", selectedKeys: value, onSelectionChange: (keys) => onChange?.(valuesOf(keys, items)), disabledKeys: items.filter((item) => item.disabled).map((item) => item.value), shouldFocusWrap: true, className: "flex flex-col overflow-hidden rounded-box border border-line bg-surface outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: (item) => (_jsx(ListBoxItem, { id: item.value, textValue: item.label, className: ({ isSelected, isFocusVisible, isDisabled }) => `flex min-w-0 cursor-pointer items-center gap-2.5 border-b border-line px-3 py-2 text-left outline-0 last:border-b-0 ${isFocusVisible
                         ? "outline-2 -outline-offset-2 outline-primary forced-colors:outline-[Highlight]"
-                        : ""} ${isDisabled ? "cursor-not-allowed opacity-45" : ""} ${isSelected ? "bg-primary/8" : "hover:bg-ink/4"}`, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx(Mark, { on: isSelected, mixed: false }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx(Text, { slot: "label", className: `truncate text-meta text-ink ${mono ? "font-mono" : ""}`, children: item.label }), item.detail === undefined ? null : (_jsx(Text, { slot: "description", className: "truncate text-micro text-muted", children: item.detail }))] })] })) })) })] }));
+                        : ""} ${isDisabled ? "cursor-not-allowed opacity-45" : ""} ${isSelected ? "bg-primary/8" : "hover:bg-ink/4"}`, children: ({ isSelected }) => (_jsxs(_Fragment, { children: [_jsx(Mark, { on: isSelected, mixed: false }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: `truncate text-meta text-ink ${mono ? "font-mono" : ""}`, children: item.label }), item.detail === undefined ? null : (_jsx("span", { className: "truncate text-micro text-muted", children: item.detail }))] })] })) })) })] }));
 }

package/dist/primitives/field/DropZone.d.ts

@@ -1,4 +1,4 @@
-import { type FormMode } from "./mode.js";
+import { type FormMode } from "../../foundations/form.js";
 /**
  * Drop a file, or pick one. Progress is a real bar; failure is a sentence.
  *

package/dist/primitives/field/DropZone.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useUiCopy } from "../../foundations/copy.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { cn } from "../../foundations/variants.js";
 import { Button, buttonClasses } from "../button/Button.js";
-import { useFieldIds } from "./context.js";
 import { ReadValue } from "./Field.js";
-import { useFormMode } from "./mode.js";
 import { Failed } from "../notice/Notice.js";
 import { ProgressBar } from "../value/ProgressBar.js";
 import { Button as AriaButton, DropZone as AriaDropZone, FileTrigger, } from "react-aria-components";

package/dist/primitives/field/Field.d.ts

@@ -1,5 +1,5 @@
-import { type FieldIds } from "./context.js";
-import { type FormMode } from "./mode.js";
+import { type FieldIds } from "../../foundations/form.js";
+import { type FormMode } from "../../foundations/form.js";
 import { type FieldNote } from "./note.js";
 import { type ReactNode } from "react";
 export declare function Field({ label, hint, error, required, children, htmlFor, layout, action, mode, note, copy: copyAs, }: {

package/dist/primitives/field/Field.js

@@ -3,12 +3,12 @@ import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-run
 import { AriaLocale } from "../../foundations/aria.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
+import { FieldIdsContext, useFieldIds, } from "../../foundations/form.js";
+import { FormModeProvider, useFormMode, } from "../../foundations/form.js";
 import { focusRing, tv } from "../../foundations/variants.js";
 import { FieldGroup, listOptionStyles } from "./aria.js";
-import { FieldIdsContext, useFieldIds, } from "./context.js";
-import { FieldCopy, useFieldCopy } from "./copy.js";
+import { FieldCopy, useFieldCopy } from "./clipboard.js";
 import { useSheetLayout } from "./layout.js";
-import { FormModeProvider, useFormMode, } from "./mode.js";
 import { describedByOf, NoteCard, NoteFlag, } from "./note.js";
 import { Hint } from "../hint/Hint.js";
 import { Popover } from "../overlay/Popover.js";

package/dist/primitives/field/Suggest.d.ts

@@ -1,4 +1,4 @@
-import { type FormMode } from "./mode.js";
+import { type FormMode } from "../../foundations/form.js";
 /**
  * A text with suggestions: the open field that proposes.
  *

package/dist/primitives/field/Suggest.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AriaLocale } from "../../foundations/aria.js";
+import { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { FieldGroup, listOptionStyles } from "./aria.js";
-import { useFieldIds } from "./context.js";
 import { ReadValue } from "./Field.js";
-import { useFormMode } from "./mode.js";
 import { Popover } from "../overlay/Popover.js";
 import { ComboBox as AriaComboBox, Input, ListBox, ListBoxItem, useFilter, } from "react-aria-components";
 const MAX = 8;

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

@@ -1,9 +1,7 @@
 export { Checkbox, type CheckItem, CheckList } from "./Checks.js";
-export { type FieldIds, useFieldIds } from "./context.js";
-export { FieldCopyProvider, shownText, useFieldCopy, } from "./copy.js";
+export { FieldCopyProvider, shownText, useFieldCopy, } from "./clipboard.js";
 export { DropZone, type DropZoneProps } from "./DropZone.js";
 export { controlClasses, DataField, Field, NumberInput, ReadValue, Select, type SelectOption, TextArea, TextInput, } from "./Field.js";
 export { type FieldLayout, FieldLayoutProvider, useSheetLayout, } from "./layout.js";
-export { type FormMode, FormModeProvider, useFormMode, } from "./mode.js";
 export { Suggest, type SuggestProps } from "./Suggest.js";
 export { type FieldNote } from "./note.js";

package/dist/primitives/field/index.js

@@ -1,15 +1,15 @@
-/* THE CONTROLS a form is written with.
+/* THE CONTROLS a form is written with. The contract they speak with their `Field` —
+   `useFieldIds`, `useFormMode`— is in `foundations/form`: an application's own control
+   speaks it the same way.
    What ARRANGES them —the sheet, the section, the footer— lives in `components/form`: a
    control does not know a form exists, and is used the same way inside a cell, a filter or
    a dialog. */
 export { Checkbox, CheckList } from "./Checks.js";
-export { useFieldIds } from "./context.js";
 /* The copy button every field carries by its label — on by default, off by field or by form. */
-export { FieldCopyProvider, shownText, useFieldCopy, } from "./copy.js";
+export { FieldCopyProvider, shownText, useFieldCopy, } from "./clipboard.js";
 export { DropZone } from "./DropZone.js";
 export { controlClasses, DataField, Field, NumberInput, ReadValue, Select, TextArea, TextInput, } from "./Field.js";
 export { FieldLayoutProvider, useSheetLayout, } from "./layout.js";
-export { FormModeProvider, useFormMode, } from "./mode.js";
 export { Suggest } from "./Suggest.js";
 /* A note that belongs to one field: a card in the record's margin, or a flag by its label. */
 export {} from "./note.js";

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

@@ -1,5 +1,5 @@
+import { type FormMode } from "../../foundations/form.js";
 import type { OpenTarget } from "../../foundations/types.js";
-import { type FormMode } from "../field/mode.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
 export interface PickerItem {

package/dist/primitives/picker/Picker.js

@@ -2,20 +2,20 @@
 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 { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.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 { 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";
+import { Collection, ComboBox as AriaComboBox, ComboBoxStateContext, Header, Input, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection, useFilter, } from "react-aria-components";
 /** The icon of each place a record opens — the same in every field and list. */
 const OPEN_ICON = {
     modal: PictureInPicture2,
@@ -271,7 +271,7 @@ function Row({ item, selected, marks, hints, 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] }));
+    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("span", { 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 && hidden === null ? null : (_jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [item.meta === undefined ? null : (_jsx("span", { 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 «Buscar más…» row has to close the list it lives in. */

package/dist/primitives/{tag → picker}/TagsField.d.ts

@@ -1,6 +1,6 @@
+import { type FormMode } from "../../foundations/form.js";
 import type { OpenTarget } from "../../foundations/types.js";
-import { type FormMode } from "../field/mode.js";
-import { type TagOption } from "./choices.js";
+import { type TagOption } from "./tagChoices.js";
 export type TagsFieldProps = {
     /** The ids of the chosen tags, in the order they were added. */
     value: readonly string[];

package/dist/primitives/{tag → picker}/TagsField.js

@@ -2,15 +2,15 @@
 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 { useFieldIds } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { cn } from "../../foundations/variants.js";
 import { fieldGroupStyles, listOptionStyles } from "../field/aria.js";
-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 { MatchedText } from "./MatchedText.js";
+import { tagChoices, withoutTag, withTag, } from "./tagChoices.js";
+import { Tags } from "../tag/Tags.js";
 import { Avatar } from "../value/Person.js";
 import { Plus, Search } from "lucide-react";
 import { useContext, useEffect, useMemo, useRef, useState, } from "react";

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

@@ -1 +1,3 @@
 export { Picker, type PickerItem, type PickerProps, } from "./Picker.js";
+export { type TagOption } from "./tagChoices.js";
+export { TagsField, type TagsFieldProps } from "./TagsField.js";

package/dist/primitives/picker/index.js

@@ -1,2 +1,6 @@
-/* The replacement for `<select>` when you have to SEE in order to choose. */
+/* CHOOSING RECORDS — one (`Picker`, the many2one) or several (`TagsField`, the many2many).
+   The replacement for `<select>` when you have to SEE in order to choose. */
 export { Picker, } from "./Picker.js";
+/* El many2many: las fichas elegidas más una entrada que agrega la siguiente. */
+export {} from "./tagChoices.js";
+export { TagsField } from "./TagsField.js";

package/dist/primitives/table/CellCopy.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { shownText } from "../field/copy.js";
+import { shownText } from "../field/clipboard.js";
 import { CopyButton } from "../value/Copyable.js";
 import { useRef } from "react";
 /**

package/dist/primitives/table/CellEditor.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, focusRing } from "../../foundations/variants.js";
 import { Popover } from "../overlay/Popover.js";
 import { Pencil } from "lucide-react";
-import { useEffect, useId, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { Button as AriaButton, Dialog, DialogTrigger } from "react-aria-components";
 /* ==================================================================== *
  *  CELL EDITOR — change one value of a list without leaving the list.
@@ -75,9 +75,7 @@ function EditorDialog({ label, editor, }) {
  * Internal to the table family: a column asks for it with `DataColumn.edit`.
  */
 export function CellEditor({ label, numeric, editor, children, }) {
-    const verb = useId();
-    const shown = useId();
     return (
     /* The row may open its record on click; changing one cell must not also open it. */
-    _jsx("div", { onClick: (event) => event.stopPropagation(), className: "-mx-1 min-w-0", children: _jsxs(DialogTrigger, { children: [_jsxs(AriaButton, { "aria-labelledby": `${verb} ${shown}`, className: ({ isFocusVisible }) => cn("group/edit flex w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-mark px-1 text-inherit outline-0 transition-colors duration-(--duration-instant) hover:bg-ink/6 pressed:bg-ink/10 aria-expanded:bg-primary/8", numeric ? "flex-row-reverse text-right" : "text-left", focusRing({ isFocusVisible })), children: [_jsx("span", { id: verb, hidden: true, children: label }), _jsx("span", { id: shown, className: "min-w-0 flex-1 truncate", children: children }), _jsx(Pencil, { "aria-hidden": true, strokeWidth: 2, className: "size-(--size-icon-sm) shrink-0 text-muted opacity-0 transition-opacity duration-(--duration-instant) group-hover/edit:opacity-100 group-focus-visible/edit:opacity-100 group-aria-expanded/edit:opacity-100" })] }), _jsx(Popover, { placement: numeric ? "bottom end" : "bottom start", children: _jsx(EditorDialog, { label: label, editor: editor }) })] }) }));
+    _jsx("div", { onClick: (event) => event.stopPropagation(), className: "-mx-1 min-w-0", children: _jsxs(DialogTrigger, { children: [_jsxs(AriaButton, { className: ({ isFocusVisible }) => cn("group/edit flex w-full min-w-0 cursor-pointer items-center gap-1.5 rounded-mark px-1 text-inherit outline-0 transition-colors duration-(--duration-instant) hover:bg-ink/6 pressed:bg-ink/10 aria-expanded:bg-primary/8", numeric ? "flex-row-reverse text-right" : "text-left", focusRing({ isFocusVisible })), children: [_jsx("span", { className: "sr-only", children: `${label} ` }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: children }), _jsx(Pencil, { "aria-hidden": true, strokeWidth: 2, className: "size-(--size-icon-sm) shrink-0 text-muted opacity-0 transition-opacity duration-(--duration-instant) group-hover/edit:opacity-100 group-focus-visible/edit:opacity-100 group-aria-expanded/edit:opacity-100" })] }), _jsx(Popover, { placement: numeric ? "bottom end" : "bottom start", children: _jsx(EditorDialog, { label: label, editor: editor }) })] }) }));
 }

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

@@ -1,3 +1,4 @@
+import { type Pile } from "../../foundations/grouping.js";
 import type { Tone } from "../../foundations/types.js";
 import { type RowAction } from "./RowActions.js";
 import { type SortState } from "./Table.js";
@@ -148,7 +149,7 @@ export type GroupColumn<T> = {
     /** Cómo se lee esa clave. */
     labelOf: (key: string) => string;
 };
-export declare function DataTable<T extends object>({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals, collapsed, onGroupToggle, create, copyable, }: {
+export declare function DataTable<T extends object>({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals, collapsed, onGroupToggle, piles, onMore, create, copyable, }: {
     data: readonly T[];
     columns: readonly DataColumn<T>[];
     getRowId: (row: T) => string;
@@ -181,6 +182,15 @@ export declare function DataTable<T extends object>({ data, columns, getRowId, s
      *  table does not reopen what rows just folded. */
     collapsed?: readonly string[];
     onGroupToggle?: (key: string) => void;
+    /**
+     * The piles ALREADY counted by whoever keeps the data — «187» over the whole set, not
+     * the 12 rows of the page. Given, the table draws them as they come (their order, their
+     * labels, their `detail`) instead of grouping `data` by `levels`.
+     */
+    piles?: readonly Pile<T>[];
+    /** A pile shows its first page and counts them all: this asks for the next ones, and
+     *  the table offers it under each pile that holds fewer than it counts. */
+    onMore?: (pile: Pile<T>) => void;
     /** Write a new record as a row of the list. See the file's header. */
     create?: DataTableCreate<T>;
     /** The cells' copy buttons, on by default. `false` takes them off the whole table; a

package/dist/primitives/table/DataTable.js

@@ -1,11 +1,12 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
-import { pathKey } from "../../foundations/grouping.js";
+import { pathKey, pileItems } from "../../foundations/grouping.js";
 import { CellCopy } from "./CellCopy.js";
 import { CellEditor } from "./CellEditor.js";
 import { EditRow, firstControl } from "./EditableTable.js";
 import { RowActions } from "./RowActions.js";
+import { useRowWindow } from "./rowWindow.js";
 import { SelectBox, Table, Td, Th, THead, Tr, } from "./Table.js";
 import { aggregationFns, columnGroupingFeature, createColumnHelper, createExpandedRowModel, createGroupedRowModel, createSortedRowModel, rowAggregationFeature, rowExpandingFeature, rowSortingFeature, sortFns, tableFeatures, useTable, } from "@tanstack/react-table";
 import { ChevronRight, Plus } from "lucide-react";
@@ -117,7 +118,47 @@ export function aggregateOf(column, rows) {
             return numbers.length;
     }
 }
-export function DataTable({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals = false, collapsed, onGroupToggle, create, copyable = true, }) {
+/** The piles someone else counted, as the body draws them: open ones with what is inside,
+ *  the deepest with its records and, when it holds fewer than it counts, its «show more». */
+function entriesOfPiles(piles, keyOf, collapsed, onToggle, onMore) {
+    return piles.flatMap((pile) => {
+        const key = pathKey(pile.path);
+        const open = collapsed?.includes(key) !== true;
+        const head = {
+            kind: "pile",
+            id: `\u0000pile${key}`,
+            depth: pile.depth,
+            level: pile.field,
+            label: pile.label,
+            count: pile.count,
+            detail: pile.detail,
+            open,
+            toggle: onToggle === undefined ? undefined : () => onToggle(key),
+        };
+        if (!open)
+            return [head];
+        if (pile.piles.length > 0) {
+            return [head, ...entriesOfPiles(pile.piles, keyOf, collapsed, onToggle, onMore)];
+        }
+        const left = pile.count - pile.items.length;
+        return [
+            head,
+            ...pile.items.map((item) => ({ kind: "row", id: keyOf(item), item })),
+            ...(left > 0 && onMore !== undefined
+                ? [
+                    {
+                        kind: "more",
+                        id: `\u0000more${key}`,
+                        depth: pile.depth,
+                        left,
+                        more: () => onMore(pile),
+                    },
+                ]
+                : []),
+        ];
+    });
+}
+export function DataTable({ data, columns, getRowId, sort, onSortChange, levels, selected, onSelectedChange, height, onRowClick, rowActions, totals = false, collapsed, onGroupToggle, piles, onMore, create, copyable = true, }) {
     const copy = useUiCopy();
     const draft = create?.draft ?? null;
     const draftRow = useRef(null);
@@ -208,7 +249,8 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
             sorting: sort === null || sort === undefined
                 ? []
                 : [{ id: sort.key, desc: sort.direction === "desc" }],
-            grouping: (levels ?? []).map((level) => level.id),
+            /* Counted elsewhere, the tree comes made: grouping the page again would undo it. */
+            grouping: piles === undefined ? (levels ?? []).map((level) => level.id) : [],
         },
         // Groups start open: grouping and then having to open each group is two
         // gestures for what the user asked for in one.
@@ -246,7 +288,7 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
        the same thing; with several, folding the outer pile has to take the inner
        ones with it — otherwise closing «Ferretería Sur» leaves its months on screen,
        orphaned under a header that says it is closed. */
-    const drawn = collapsed === undefined
+    const shown = collapsed === undefined
         ? rows
         : rows.filter((row) => {
             let node = row.getParentRow();
@@ -257,14 +299,56 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
             }
             return true;
         });
+    /* ONE sequence for the body, whoever grouped: the piles counted elsewhere, or the tree
+       TanStack built from the page. Before, the table only knew the second — grouped on the
+       server, a list said «187» in rows and «12» in the table. */
+    const entries = piles !== undefined
+        ? entriesOfPiles(piles, getRowId, collapsed, onGroupToggle, onMore)
+        : shown.map((row) => {
+            if (row.subRows.length === 0)
+                return { kind: "row", id: row.id, item: row.original };
+            const path = pathOf(row);
+            const key = pathKey(path);
+            const depth = path.length - 1;
+            const level = levels?.find((one) => one.id === row.groupingColumnId);
+            /* La CLAVE del montón —la del motor— y el rótulo, que lo pone el nivel: son dos
+               textos y sólo el segundo cambia con el idioma. */
+            const value = path[depth] ?? key;
+            return {
+                kind: "pile",
+                id: row.id,
+                depth,
+                level: level?.label,
+                label: level === undefined ? value : level.labelOf(value),
+                /* Las FILAS de adentro, no los subgrupos: `subRows` de un montón con niveles
+                   abajo son los montones del nivel siguiente, y contarlos decía «2» donde hay
+                   cuarenta filas. */
+                count: row.getLeafRows().filter((leaf) => leaf.subRows.length === 0).length,
+                detail: undefined,
+                open: collapsed === undefined ? row.getIsExpanded() : !collapsed.includes(key),
+                toggle: () => onGroupToggle === undefined ? row.toggleExpanded() : onGroupToggle(key),
+            };
+        });
     const selecting = onSelectedChange !== undefined;
-    const leaves = useMemo(() => rows.filter((r) => r.subRows.length === 0), [rows]);
+    const width = columns.length + (selecting ? 1 : 0) + (rowActions === undefined ? 0 : 1);
+    /* Past a few hundred rows only the ones in view are drawn — see `rowWindow.tsx`. It
+       windows what is DRAWN, pile headers included and folded rows left out: that is the
+       sequence a person scrolls through. */
+    const view = useRowWindow({
+        count: entries.length,
+        getKey: (i) => entries[i]?.id ?? String(i),
+    });
+    /* Every record the selection can reach — folded ones included: «select all» over a
+       grouped list means all of them, not the ones whose pile happens to be open. */
+    const leaves = useMemo(() => piles !== undefined
+        ? pileItems(piles).map(getRowId)
+        : rows.filter((r) => r.subRows.length === 0).map((r) => r.id), [piles, rows, getRowId]);
     /* The aggregates are computed by the component and not by TanStack: its
        `aggregationFn` lives in the GROUP model, and a footer exists precisely when
        there are no groups. */
     const footer = useMemo(() => (totals ? columns.map((c) => aggregateOf(c, data)) : null), [totals, columns, data]);
-    const all = leaves.length > 0 && leaves.every((r) => selected?.has(r.id) === true);
-    const some = leaves.some((r) => selected?.has(r.id) === true);
+    const all = leaves.length > 0 && leaves.every((id) => selected?.has(id) === true);
+    const some = leaves.some((id) => selected?.has(id) === true);
     function toggle(id, on) {
         const n = new Set(selected ?? []);
         if (on)
@@ -273,36 +357,51 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
             n.delete(id);
         onSelectedChange?.(n);
     }
-    const grid = (_jsxs(Table, { height: height, children: [_jsxs(THead, { children: [selecting ? (_jsx(Th, { width: 36, children: _jsx(SelectBox, { label: copy.selection.all, checked: all, indeterminate: some, onChange: (v) => onSelectedChange?.(v ? new Set(leaves.map((r) => r.id)) : new Set()) }) })) : null, columns.map((c) => (_jsx(Th, { sortKey: c.sortable === false ? undefined : c.id, sort: sort, onSort: onSortChange, numeric: c.numeric, width: c.width, children: c.header }, c.id))), rowActions === undefined ? null : _jsx(Th, { width: 1, children: "" })] }), _jsxs("tbody", { children: [drawn.map((row) => {
-                        const isGroup = row.subRows.length > 0;
-                        if (isGroup) {
-                            const path = pathOf(row);
-                            const key = pathKey(path);
-                            const depth = path.length - 1;
-                            const id = row.groupingColumnId ?? undefined;
-                            const level = levels?.find((one) => one.id === id);
-                            /* La CLAVE del montón —la del motor— y el rótulo, que lo pone el
-                               nivel: son dos textos y sólo el segundo cambia con el idioma. */
-                            const value = path[depth] ?? key;
-                            const open = collapsed === undefined
-                                ? row.getIsExpanded()
-                                : collapsed.includes(key) !== true;
-                            return (
-                            /* The group row: it spans the whole width, says which value it
-                               groups by and how many are inside. The counter is what makes it
-                               useful without opening it. */
-                            _jsx("tr", { className: "border-b border-line bg-ground", children: _jsx("td", { colSpan: columns.length + (selecting ? 1 : 0) + (rowActions === undefined ? 0 : 1), className: "px-3 py-1.5", style: depth === 0
-                                        ? undefined
-                                        : { paddingLeft: `calc(var(--spacing-indent) * ${depth} + 0.75rem)` }, children: _jsxs("button", { type: "button", onClick: () => onGroupToggle === undefined ? row.toggleExpanded() : onGroupToggle(key), "aria-expanded": open, className: "inline-flex items-center gap-1.5 rounded-control text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: [_jsx(ChevronRight, { className: `size-(--size-icon-sm) text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true }), level === undefined ? null : (_jsx("span", { className: "text-micro font-normal text-muted/70", children: level.label })), _jsx("span", { children: level === undefined ? value : level.labelOf(value) }), _jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro tabular-nums text-muted", children: row.getLeafRows().length.toLocaleString(copy.locale) })] }) }) }, row.id));
+    const grid = (_jsxs(Table, { height: height, ...(view.on
+            ? {
+                rowCount: 1 + entries.length + (draft === null ? 0 : 1) + (totals ? 1 : 0),
+            }
+            : {}), children: [_jsxs(THead, { ...(view.on ? { rowIndex: 1 } : {}), children: [selecting ? (_jsx(Th, { width: 36, children: _jsx(SelectBox, { label: copy.selection.all, checked: all, indeterminate: some, onChange: (v) => onSelectedChange?.(v ? new Set(leaves) : new Set()) }) })) : null, columns.map((c) => (_jsx(Th, { sortKey: c.sortable === false ? undefined : c.id, sort: sort, onSort: onSortChange, numeric: c.numeric, width: c.width, children: c.header }, c.id))), rowActions === undefined ? null : (_jsx("td", { className: "w-px border-b border-line-strong" }))] }), _jsxs("tbody", { ref: view.body.ref, children: [view.rows.flatMap((slot, at) => {
+                        const entry = entries[slot.index];
+                        if (entry === undefined)
+                            return [];
+                        const windowed = view.windowed(slot.index);
+                        /* What is not drawn between the previous drawn row and this one: the rows
+                           above the view before the first, and the gap before a row kept only because
+                           it has the focus. */
+                        const gap = view.pad(at === 0 ? 0 : view.rows[at - 1].end, slot.start, width, `\u0000pad${slot.index}`);
+                        const indent = entry.kind === "row" || entry.depth === 0
+                            ? undefined
+                            : { paddingLeft: `calc(var(--spacing-indent) * ${entry.depth} + 0.75rem)` };
+                        if (entry.kind === "pile") {
+                            const head = (_jsxs(_Fragment, { children: [entry.toggle === undefined ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) text-muted transition-transform duration-(--duration-instant) ${entry.open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true })), entry.level === undefined ? null : (_jsx("span", { className: "text-micro font-normal text-muted", children: entry.level })), _jsx("span", { children: entry.label }), _jsx("span", { className: "inline-flex shrink-0 items-center rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro tabular-nums text-muted", children: entry.count.toLocaleString(copy.locale) }), entry.detail === undefined ? null : (_jsx("span", { className: "text-micro font-normal tabular-nums text-muted", children: entry.detail }))] }));
+                            return [
+                                gap,
+                                /* The pile's row: it spans the whole width, says which value it groups by
+                                   and how many are inside — what makes it useful without opening it. */
+                                _jsx("tr", { ...windowed, className: "border-b border-line bg-ground", children: _jsx("td", { colSpan: width, className: "px-3 py-1.5", style: indent, children: entry.toggle === undefined ? (_jsx("span", { className: "inline-flex items-center gap-1.5 text-meta font-medium text-ink", children: head })) : (_jsx("button", { type: "button", onClick: entry.toggle, "aria-expanded": entry.open, className: "inline-flex items-center gap-1.5 rounded-control text-meta font-medium text-ink transition-colors duration-(--duration-instant) hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: head })) }) }, entry.id),
+                            ];
+                        }
+                        if (entry.kind === "more") {
+                            return [
+                                gap,
+                                _jsx("tr", { ...windowed, className: "border-b border-line", children: _jsx("td", { colSpan: width, className: "px-3 py-1", style: indent, children: _jsx("button", { type: "button", onClick: entry.more, className: "rounded-control text-meta text-primary transition-colors duration-(--duration-instant) hover:underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: fillCopy(copy.table.pileMore, {
+                                                count: entry.left.toLocaleString(copy.locale),
+                                            }) }) }) }, entry.id),
+                            ];
                         }
-                        const original = row.original;
-                        return (_jsxs(Tr, { selected: selected?.has(row.id) === true, onClick: onRowClick === undefined ? undefined : () => onRowClick(original), children: [selecting ? (_jsx(Td, { children: _jsx(SelectBox, { label: copy.selection.row, checked: selected?.has(row.id) === true, onChange: (v) => toggle(row.id, v) }) })) : null, columns.map((c) => {
-                                    const t = c.tone?.(original);
-                                    const n = c.note?.(original);
-                                    const edit = c.edit?.when?.(original) === false ? undefined : c.edit;
-                                    return (_jsx(Td, { numeric: c.numeric, mono: c.mono === true, ...(t === undefined ? {} : { tone: t }), ...(n === undefined ? {} : { title: n }), children: edit !== undefined ? (_jsx(CellEditor, { label: fillCopy(copy.inlineEdit.editCell, { column: c.header }), numeric: c.numeric === true, editor: (done) => edit.render(original, done), children: drawCell(copy, c, original) })) : copyable && c.copy !== false ? (_jsx(CellCopy, { header: c.header, numeric: c.numeric === true, ...(c.copy === undefined ? {} : { value: c.copy(original) }), children: drawCell(copy, c, original) })) : (drawCell(copy, c, original)) }, c.id));
-                                }), rowActions === undefined ? null : (_jsx(RowActions, { actions: rowActions(original) }))] }, row.id));
-                    }), create === undefined || draft === null ? null : (_jsxs(EditRow, { as: "tr", rowId: "\\u0000draft", rowRef: (node) => {
+                        const original = entry.item;
+                        const id = entry.id;
+                        return [
+                            gap,
+                            _jsxs(Tr, { ...(windowed === undefined ? {} : { windowed }), selected: selected?.has(id) === true, onClick: onRowClick === undefined ? undefined : () => onRowClick(original), children: [selecting ? (_jsx(Td, { children: _jsx(SelectBox, { label: copy.selection.row, checked: selected?.has(id) === true, onChange: (v) => toggle(id, v) }) })) : null, columns.map((c) => {
+                                        const t = c.tone?.(original);
+                                        const n = c.note?.(original);
+                                        const edit = c.edit?.when?.(original) === false ? undefined : c.edit;
+                                        return (_jsx(Td, { numeric: c.numeric, mono: c.mono === true, ...(t === undefined ? {} : { tone: t }), ...(n === undefined ? {} : { title: n }), children: edit !== undefined ? (_jsx(CellEditor, { label: fillCopy(copy.inlineEdit.editCell, { column: c.header }), numeric: c.numeric === true, editor: (done) => edit.render(original, done), children: drawCell(copy, c, original) })) : copyable && c.copy !== false ? (_jsx(CellCopy, { header: c.header, numeric: c.numeric === true, ...(c.copy === undefined ? {} : { value: c.copy(original) }), children: drawCell(copy, c, original) })) : (drawCell(copy, c, original)) }, c.id));
+                                    }), rowActions === undefined ? null : (_jsx(RowActions, { actions: rowActions(original) }))] }, id),
+                        ];
+                    }), view.tail(width), create === undefined || draft === null ? null : (_jsxs(EditRow, { as: "tr", rowId: "\\u0000draft", rowRef: (node) => {
                             draftRow.current = node;
                         }, editable: true, editing: true, tabbable: false, className: "group/row", onStart: () => { }, onCommit: saveDraft, onCancel: () => {
                             backToAdd.current = true;
@@ -318,7 +417,7 @@ export function DataTable({ data, columns, getRowId, sort, onSortChange, levels,
                         }, children: [selecting ? _jsx("td", { className: DRAFT_CELL }) : null, columns.map((c) => (_jsx("td", { ...(c.input === undefined ? {} : { "data-edit": "" }), className: `${DRAFT_CELL} ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: c.input?.(draft, (next) => {
                                     touched.current = true;
                                     create.onChange(next);
-                                }) ?? null }, c.id))), rowActions === undefined ? null : _jsx("td", { className: DRAFT_CELL })] }))] }), footer === null ? null : (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-ground", children: _jsxs("tr", { className: "border-t border-line-strong", children: [selecting ? _jsx("td", {}) : null, columns.map((c, i) => {
+                                }) ?? null }, c.id))), rowActions === undefined ? null : _jsx("td", { className: DRAFT_CELL })] }))] }), footer === null ? null : (_jsx("tfoot", { className: "sticky bottom-0 z-10 bg-ground", children: _jsxs("tr", { className: "border-t border-line-strong", "aria-rowindex": view.on ? 2 + entries.length + (draft === null ? 0 : 1) : undefined, children: [selecting ? _jsx("td", {}) : null, columns.map((c, i) => {
                             const value = footer[i] ?? null;
                             return (_jsx("td", { className: `px-3 py-1.5 text-meta font-semibold text-ink ${c.numeric === true ? "text-right tabular-nums" : ""}`, children: i === 0 && value === null ? (_jsxs("span", { className: "text-muted", children: [data.length.toLocaleString(copy.locale), " ", data.length === 1 ? copy.table.row : copy.table.rows] })) : value === null ? null : (aggregateLabel(copy, c, value)) }, c.id));
                         }), rowActions === undefined ? null : _jsx("td", {})] }) }))] }));