@sincpro/web-ui 1.3.0 → 1.5.0

package/dist/components/form/Sheet.js

@@ -29,7 +29,10 @@ function Facts({ fields, columns, layout, }) {
             /* The note's card goes INSIDE the value: a `<dl>` holds only its terms and values.
                With a note the value is a flex box, so the absolute card keeps the value's top
                as its static position while being read after it. */
-            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), className: `min-w-0 text-meta ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
+            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), 
+                /* `wrap-anywhere`: an email or a code has no space to break at, and in two
+                   columns it ran over the fact beside it. */
+                className: `min-w-0 text-meta wrap-anywhere ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
             const name = (_jsxs("dt", { className: `flex items-center gap-1 text-micro text-muted ${horizontal ? "shrink-0" : "min-w-0"}`, children: [_jsx("span", { children: field.label }), field.hint === undefined ? null : _jsx(Hint, { children: field.hint }), field.note === undefined ? null : _jsx(NoteFlag, { note: field.note })] }));
             if (horizontal) {
                 /* A header fact is a pair: the number sits next to its name. The

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

@@ -19,10 +19,14 @@ export declare function RecordCard({ title, subtitle, tags, meta, figure, media,
     tags?: ReactNode;
     meta?: ReactNode;
     figure?: ReactNode;
+    /** The picture of the record. A product's is a square (`Thumb`); a PERSON's is round, with
+     *  the initials when there is no photo — `person`, like `RelationCard`'s. `alt` names the
+     *  person when the title is not plain text. */
     media?: {
         src?: string;
         alt?: string;
         icon?: LucideIcon;
+        person?: true;
     };
     /** The card's last line, its controls: priority, kanban state, next activity, the owner's
      *  avatar — each its own button, pressable without opening the card. */

package/dist/components/listing/RecordCard.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Thumb } from "../../primitives/cell/CellStack.js";
+import { Avatar } from "../../primitives/value/Avatar.js";
 /**
  * One record as a card — the board presentation of a list.
  *
@@ -21,7 +22,9 @@ export function RecordCard({ title, subtitle, tags, meta, figure, media, footer,
     const titleText = _jsx("span", { className: "min-w-0 truncate", children: title });
     return (_jsxs("div", { className: `relative flex w-full min-w-0 flex-col gap-2 rounded-box border border-line bg-surface p-4 text-left ${onOpen === undefined
             ? ""
-            : "transition-colors duration-(--duration-instant) focus-within:border-line-strong hover:border-line-strong"}`, children: [media === undefined ? null : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), tags === undefined ? null : _jsx("div", { className: "flex flex-wrap gap-1.5", children: tags }), _jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [onOpen === undefined ? (_jsx("p", { className: "flex min-w-0 text-lead font-medium text-ink", children: titleText })) : (_jsx("button", { type: "button", onClick: onOpen, className: "flex min-w-0 text-left text-lead font-medium text-ink outline-none after:absolute after:inset-0 after:rounded-box focus-visible:after:outline-2 focus-visible:after:outline-primary", children: titleText })), figure === undefined ? null : (_jsx("p", { className: "shrink-0 text-lead font-semibold tabular-nums text-ink", children: figure }))] }), subtitle === undefined ? null : (
+            : "transition-colors duration-(--duration-instant) focus-within:border-line-strong hover:border-line-strong"}`, children: [media === undefined ? null : media.person === true ? (
+            /* The name is written right below it: the photo's `alt` would say it twice. */
+            _jsx("span", { "aria-hidden": true, className: "flex shrink-0", children: _jsx(Avatar, { name: media.alt ?? (typeof title === "string" ? title : ""), size: "xl", ...(media.src === undefined ? {} : { src: media.src }) }) })) : (_jsx(Thumb, { size: "lg", ...(media.src === undefined ? {} : { src: media.src }), ...(media.alt === undefined ? {} : { alt: media.alt }), ...(media.icon === undefined ? {} : { icon: media.icon }) })), tags === undefined ? null : _jsx("div", { className: "flex flex-wrap gap-1.5", children: tags }), _jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [onOpen === undefined ? (_jsx("p", { className: "flex min-w-0 text-lead font-medium text-ink", children: titleText })) : (_jsx("button", { type: "button", onClick: onOpen, className: "flex min-w-0 text-left text-lead font-medium text-ink outline-none after:absolute after:inset-0 after:rounded-box focus-visible:after:outline-2 focus-visible:after:outline-primary", children: titleText })), figure === undefined ? null : (_jsx("p", { className: "shrink-0 text-lead font-semibold tabular-nums text-ink", children: figure }))] }), subtitle === undefined ? null : (
             /* Above the stretched title, at its own width: the subtitle may be a link to ANOTHER
                record (the customer), which must open that one and not the card. */
             _jsx("p", { className: "relative z-10 -mt-1.5 w-fit max-w-full min-w-0 truncate text-meta text-muted", children: subtitle })), meta === undefined ? null : (_jsx("p", { className: "text-micro tabular-nums text-muted", children: meta })), footer === undefined ? null : (_jsx("div", { className: "relative z-10 flex min-w-0 items-center gap-1.5", children: footer }))] }));

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

@@ -1,3 +1,4 @@
+import type { PileFoot } from "../../foundations/grouping.js";
 import { type MenuGroup } from "../../primitives/menu/Menu.js";
 import type { LucideIcon } from "lucide-react";
 import type { ReactNode } from "react";
@@ -127,10 +128,10 @@ export declare function GroupHeader({ field, label, count, detail, depth, open,
     open?: boolean;
     onToggle?: () => void;
 }): import("react").JSX.Element;
-/** Under a pile that shows its first page: «Ver 38 más». Indented like the pile's rows. */
-export declare function GroupMore({ left, depth, onMore, }: {
-    /** How many the pile counts that are not here yet. */
-    left: number;
+/** Under a short pile: «Ver 50 más de 49.950», or «Se muestran 500 de 49.950» when there is
+ *  no next page. Indented like the pile's rows. */
+export declare function GroupMore({ foot, depth, onMore, }: {
+    foot: PileFoot;
     depth?: number;
     onMore: () => void;
 }): import("react").JSX.Element;

package/dist/components/listing/Row.js

@@ -5,6 +5,7 @@ import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { stickyTop } from "../../foundations/sticky.js";
 import { Menu } from "../../primitives/menu/Menu.js";
+import { PileFootLine } from "../../primitives/table/PileFootLine.js";
 import { HEADER_TEXT } from "../../primitives/table/Table.js";
 import { CopyButton } from "../../primitives/value/Copyable.js";
 import { Avatar } from "../../primitives/value/Person.js";
@@ -137,9 +138,9 @@ export function GroupHeader({ field, label, count, detail, depth = 0, open = tru
     const mark = (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-1 inset-y-0.5 rounded-control group-hover/head:bg-ink/4" }));
     return onToggle === undefined ? (_jsx("div", { className: box, style: indent, children: content })) : (_jsxs("button", { type: "button", onClick: onToggle, "aria-expanded": open, style: indent, className: `group/head relative ${box} w-full text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary`, children: [mark, content] }));
 }
-/** Under a pile that shows its first page: «Ver 38 más». Indented like the pile's rows. */
-export function GroupMore({ left, depth = 0, onMore, }) {
+/** Under a short pile: «Ver 50 más de 49.950», or «Se muestran 500 de 49.950» when there is
+ *  no next page. Indented like the pile's rows. */
+export function GroupMore({ foot, depth = 0, onMore, }) {
     const d = useDensity();
-    const copy = useUiCopy();
-    return (_jsx("div", { className: `border-b border-line ${byDensity(d, "px-3 py-1", "px-2.5 py-0.5")}`, style: depth === 0 ? undefined : { paddingLeft: `calc(var(--spacing-indent) * ${depth})` }, children: _jsx("button", { type: "button", onClick: onMore, 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: left.toLocaleString(copy.locale) }) }) }));
+    return (_jsx("div", { className: `border-b border-line ${byDensity(d, "px-3 py-1", "px-2.5 py-0.5")}`, style: depth === 0 ? undefined : { paddingLeft: `calc(var(--spacing-indent) * ${depth})` }, children: _jsx(PileFootLine, { foot: foot, onMore: onMore }) }));
 }

package/dist/components/record/DirtyActions.d.ts

@@ -7,9 +7,13 @@ export interface DirtyState {
     /** What gets saved, when it is not obvious: «guardar la factura», «guardar la
      *  regla». */
     label?: string;
-    /** Why it CANNOT be saved yet. Present = the button is off and the reason is
-     *  in its `title` — a button that is off with no reason is a wall. */
+    /** Why it CANNOT be saved yet. Present = the button is off and the reason is written
+     *  where the «unsaved» mark was — a button that is off with no reason is a wall, and a
+     *  reason in a `title` reaches neither the keyboard nor a finger. */
     blocked?: string;
+    /** How many fields changed: «2 cambios sin guardar» instead of a bare «sin guardar». The
+     *  fields themselves are marked by their `Field changed`. */
+    changes?: number;
 }
 /** Save and discard, in the rail and in place of the action buttons.
  *
@@ -20,7 +24,17 @@ export interface DirtyState {
  *  The «sin guardar» warning is text and not just a color: whoever is leaving
  *  the screen has to be able to read what is going on, not deduce it from a
  *  dot. */
-export declare function DirtyActions({ onSave, onDiscard, saving, label, blocked, }: DirtyState): import("react").JSX.Element;
-/** The one action a view leads with: the element written with `role="primary"` — the
- *  same prop that paints it gold and that `make smoke` counts, so there is no second way to
- *  say «this is the main one» that could disagree with the first. */
+export declare function DirtyActions({ onSave, onDiscard, saving, label, blocked, changes, }: DirtyState): import("react").JSX.Element;
+/**
+ * Whether the record has JUST been saved: `dirty` went from saving straight to gone.
+ *
+ * Context: saving ended with the rail silently swapping Save for the usual actions — the
+ * screen changed and said nothing, so each application wrote its own toast, or none. A
+ * failed save does not count: `saving` turns off and `dirty` stays.
+ */
+export declare function useJustSaved(dirty: DirtyState | undefined): boolean;
+/** «✓ Guardado», where Save was, for a moment. The live region is always there — a region
+ *  inserted together with its words is not reliably announced. */
+export declare function SavedMark({ saved }: {
+    saved: boolean;
+}): import("react").JSX.Element;

package/dist/components/record/DirtyActions.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { Button } from "../../primitives/button/Button.js";
-import { Save, Undo2 } from "lucide-react";
+import { Check, Save, Undo2 } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
 /** Save and discard, in the rail and in place of the action buttons.
  *
  *  Context: discard goes to the LEFT of save and with the quieter look. It is
@@ -13,10 +14,60 @@ import { Save, Undo2 } from "lucide-react";
  *  The «sin guardar» warning is text and not just a color: whoever is leaving
  *  the screen has to be able to read what is going on, not deduce it from a
  *  dot. */
-export function DirtyActions({ onSave, onDiscard, saving = false, label, blocked, }) {
+export function DirtyActions({ onSave, onDiscard, saving = false, label, blocked, changes, }) {
     const copy = useUiCopy();
+    const blockedId = useId();
     /* It follows the rail it sits on instead of assuming the dark one: on a light rail the
        chrome palette was white text on white. */
     const surface = useSurface();
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control px-2.5 text-meta font-medium ${bySurface(surface, "bg-warn/12 text-warn", "bg-chrome-warn/15 text-chrome-warn")}`, children: copy.record.unsaved }), _jsx(Button, { surface: surface, onClick: onDiscard, disabled: saving, icon: Undo2, children: copy.record.discard }), _jsx("span", { ...(blocked === undefined ? {} : { title: blocked }), children: _jsx(Button, { role: "primary", surface: surface, onClick: onSave, disabled: saving || blocked !== undefined, icon: Save, children: saving ? copy.record.saving : (label ?? copy.record.save) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ...(blocked === undefined ? {} : { id: blockedId }), className: `inline-flex h-(--size-control-md) min-w-0 shrink items-center gap-1.5 truncate rounded-control px-2.5 text-meta font-medium ${bySurface(surface, "bg-warn/12 text-warn", "bg-chrome-warn/15 text-chrome-warn")}`, children: blocked ??
+                    (changes === undefined || changes === 0
+                        ? copy.record.unsaved
+                        : fillCopy(changes === 1 ? copy.record.unsavedOne : copy.record.unsavedMany, {
+                            count: changes.toLocaleString(copy.locale),
+                        })) }), _jsx(Button, { surface: surface, onClick: onDiscard, disabled: saving, icon: Undo2, children: copy.record.discard }), _jsx(Button, { role: "primary", surface: surface, onClick: onSave, busy: saving, disabled: blocked !== undefined, icon: Save, ...(blocked === undefined ? {} : { "aria-describedby": blockedId }), children: saving ? copy.record.saving : (label ?? copy.record.save) })] }));
+}
+/** The one action a view leads with: the element written with `role="primary"` — the
+ *  same prop that paints it gold and that `make smoke` counts, so there is no second way to
+ *  say «this is the main one» that could disagree with the first. */
+/** How long «Guardado» stays: long enough to be seen without looking for it, short enough
+ *  not to stay as one more thing on the rail. */
+const SAVED_FOR = 2400;
+/**
+ * Whether the record has JUST been saved: `dirty` went from saving straight to gone.
+ *
+ * Context: saving ended with the rail silently swapping Save for the usual actions — the
+ * screen changed and said nothing, so each application wrote its own toast, or none. A
+ * failed save does not count: `saving` turns off and `dirty` stays.
+ */
+export function useJustSaved(dirty) {
+    const wasSaving = useRef(false);
+    const [saved, setSaved] = useState(false);
+    const saving = dirty?.saving === true;
+    const present = dirty !== undefined;
+    useEffect(() => {
+        if (saving) {
+            wasSaving.current = true;
+            return;
+        }
+        if (present) {
+            wasSaving.current = false;
+            setSaved(false);
+            return;
+        }
+        if (!wasSaving.current)
+            return;
+        wasSaving.current = false;
+        setSaved(true);
+        const timer = setTimeout(() => setSaved(false), SAVED_FOR);
+        return () => clearTimeout(timer);
+    }, [saving, present]);
+    return saved;
+}
+/** «✓ Guardado», where Save was, for a moment. The live region is always there — a region
+ *  inserted together with its words is not reliably announced. */
+export function SavedMark({ saved }) {
+    const copy = useUiCopy();
+    const surface = useSurface();
+    return (_jsxs(_Fragment, { children: [_jsx("span", { role: "status", className: "sr-only", children: saved ? copy.record.saved : "" }), saved ? (_jsxs("span", { "aria-hidden": true, className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control px-2.5 text-meta font-medium transition-[opacity,translate] duration-(--duration-quick) ease-(--ease-out) starting:-translate-y-0.5 starting:opacity-0 ${bySurface(surface, "bg-good/12 text-good", "bg-chrome-good/15 text-chrome-good")}`, children: [_jsx(Check, { className: "size-(--size-icon-sm)", strokeWidth: 2.5 }), copy.record.saved] })) : null] }));
 }

package/dist/components/record/RecordHeader.d.ts

@@ -2,7 +2,7 @@ import { type Crumb } from "./Breadcrumb.js";
 import { type DirtyState } from "./DirtyActions.js";
 import type { Surface, Tone } from "../../foundations/types.js";
 import type { LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 export type { Surface };
 export declare function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface, smart, aspects, dirty, activity, activityLayout, width, ribbon, blocking, indicator, children, }: {
     crumbs?: readonly Crumb[];

package/dist/components/record/RecordHeader.js

@@ -1,15 +1,31 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Breadcrumb } from "./Breadcrumb.js";
-import { DirtyActions, } from "./DirtyActions.js";
+import { DirtyActions, SavedMark, useJustSaved, } from "./DirtyActions.js";
 import { isPrimary, ThumbBar, thumbPlan } from "./ThumbBar.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { SurfaceProvider } from "../../foundations/surface.js";
 import { Line } from "../../primitives/block/Line.js";
 import { Tag } from "../../primitives/tag/Tag.js";
+import { useEffect, useRef } from "react";
 export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface = "canvas", smart, aspects, dirty, activity, activityLayout = "auto", width = "reading", ribbon, blocking, indicator, children, }) {
     const d = useDensity();
-    const hasRail = crumbs !== undefined ||
+    /* «Guardado» is said where Save was; a record whose rail exists only while it has changes
+       keeps it for that moment, or the answer would leave with the question. */
+    const saved = useJustSaved(dirty);
+    /* Save is gone the moment it has saved, and the focus that was on it fell to the page —
+       a keyboard was left at the top of the document. It comes back to the record's name:
+       where reading the record starts, and announced together with «Guardado». */
+    const nameRef = useRef(null);
+    useEffect(() => {
+        if (!saved)
+            return;
+        const lost = document.activeElement === null || document.activeElement === document.body;
+        if (lost)
+            nameRef.current?.focus({ preventScroll: true });
+    }, [saved]);
+    const hasRail = saved ||
+        crumbs !== undefined ||
         pager !== undefined ||
         actions !== undefined ||
         status !== undefined ||
@@ -40,12 +56,14 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
        shadow. It exists on the PAGE, where the chrome rail is a real band
        (crumbs, pager, actions). A drawer is compact so `withRail` is already
        false. A dialog is comfortable but has no crumbs or actions — and it IS
-       already a card. Status alone is not a page. */
-    const paper = withRail &&
-        (crumbs !== undefined ||
-            pager !== undefined ||
-            actions !== undefined ||
-            dirty !== undefined);
+       already a card. Status alone is not a page.
+  
+       And `dirty` does not decide it. Whether the record sits on paper is a fact of WHERE it
+       is mounted, and that does not change while someone types; `dirty` does, with the first
+       letter. Deciding by it swapped the whole tree under the paper at that letter — the field
+       being written was unmounted and lost the focus. Save and Discard still appear: in the
+       rail, which is a sibling and moves nothing. */
+    const paper = withRail && (crumbs !== undefined || pager !== undefined || actions !== undefined);
     /* ONE column for the rail and the page: the rail used to span the screen while the sheet
        stopped at 72rem, so on a wide desk the buttons sat 250 px left of the paper they act on
        and the record read as two things. */
@@ -58,7 +76,7 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
                                             /* `display`, not `title`: the record's name is the entry point of the
                                                screen. At the title size (19 px over a 13 px body, 1.46:1) nothing on
                                                the sheet stood out and the eye had nowhere to start. */
-                                            _jsx("h1", { className: "min-w-0 truncate text-display font-semibold text-ink", children: title })), tag === undefined ? null : _jsx(Tag, { tone: tag.tone, children: tag.label })] }), subtitle === undefined || !withIdentity ? null : (_jsx("p", { className: "mt-0.5 truncate text-lead text-ink", children: subtitle }))] })] }), figure === undefined || !withIdentity ? null : (_jsxs("div", { className: "ml-auto flex shrink-0 flex-col items-end", children: [_jsx("span", { className: "text-micro font-medium text-muted", children: figure.label }), _jsx("span", { className: "text-display font-semibold tabular-nums text-ink", children: figure.value })] }))] }), withRail || status === undefined ? null : (_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: status })), aspects === undefined ? null : (
+                                            _jsx("h1", { ref: nameRef, tabIndex: -1, className: "min-w-0 truncate text-display font-semibold text-ink outline-0", children: title })), tag === undefined ? null : _jsx(Tag, { tone: tag.tone, children: tag.label })] }), subtitle === undefined || !withIdentity ? null : (_jsx("p", { className: "mt-0.5 truncate text-lead text-ink", children: subtitle }))] })] }), figure === undefined || !withIdentity ? null : (_jsxs("div", { className: "ml-auto flex shrink-0 flex-col items-end", children: [_jsx("span", { className: "text-micro font-medium text-muted", children: figure.label }), _jsx("span", { className: "text-display font-semibold tabular-nums text-ink", children: figure.value })] }))] }), withRail || status === undefined ? null : (_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: status })), aspects === undefined ? null : (
             /* The line is the sheet's mouth. In comfortable it walks to the
                  edges; the current tab sits on it and opens into the page below. */
             _jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspects }))] }));
@@ -68,14 +86,15 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
                                      it. The line wraps on a phone, so it is never pushed out of reach. */
                                     smart === undefined && indicator === undefined ? undefined : (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-center gap-2", children: [smart, indicator] })), end: pager }), actions === undefined &&
                                     status === undefined &&
-                                    dirty === undefined ? null : (
+                                    dirty === undefined &&
+                                    !saved ? null : (
                                 /* Row 2 — WHAT I CAN DO and WHERE IT IS AT: actions stuck to the
                              left edge, the history and the state stuck to the right one. No
                              `flex-wrap`: wrapping split the row in two and the state ended up
                              below the actions, which is another hierarchy. */
-                                _jsxs("div", { className: "flex min-w-0 items-start gap-x-4", children: [dirty !== undefined ? (_jsx("div", { className: "flex shrink-0 items-center gap-1.5 @max-handheld/record:hidden", children: _jsx(DirtyActions, { ...dirty }) })) : actions === undefined ? null : (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: primaries.length === 0
-                                                ? actions
-                                                : railActions.map((node) => isPrimary(node) ? (_jsx("span", { "data-thumb-moves": "", className: "contents @max-handheld/record:hidden", children: node }, node.key)) : (node)) })), status === undefined ? null : (_jsx("div", { className: "ml-auto flex min-w-0 flex-col items-end gap-1.5", children: status }))] }))] }) }) }) })) : null, paper ? (
+                                _jsxs("div", { className: "flex min-w-0 items-start gap-x-4", children: [dirty !== undefined ? (_jsx("div", { className: "flex shrink-0 items-center gap-1.5 @max-handheld/record:hidden", children: _jsx(DirtyActions, { ...dirty }) })) : actions === undefined ? (_jsx(SavedMark, { saved: saved })) : (_jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [primaries.length === 0
+                                                    ? actions
+                                                    : railActions.map((node) => isPrimary(node) ? (_jsx("span", { "data-thumb-moves": "", className: "contents @max-handheld/record:hidden", children: node }, node.key)) : (node)), _jsx(SavedMark, { saved: saved })] })), status === undefined ? null : (_jsx("div", { className: "ml-auto flex min-w-0 flex-col items-end gap-1.5", children: status }))] }))] }) }) }) })) : null, paper ? (
             /* ==================================================================== *
              *  THE PAGE — [sheet | Actividad], on the ground.
              *

package/dist/components/record/RecordSkeleton.js

@@ -17,5 +17,5 @@ const SOLAPAS = ["w-14", "w-16", "w-20"];
 export function RecordSkeleton({ label }) {
     const d = useDensity();
     const page = d === "comfortable";
-    return (_jsxs("article", { "aria-busy": "true", className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "sr-only", children: label }), page ? (_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 bg-chrome px-3.5 py-2.5", children: [_jsx("span", { className: "h-3 w-24 rounded-control bg-chrome-ink/15" }), _jsx("span", { className: "h-3 w-40 rounded-control bg-chrome-ink/10" }), _jsx("span", { className: "ml-auto h-(--size-control-sm) w-28 rounded-control bg-chrome-ink/15" })] })) : null, _jsx("div", { "aria-hidden": true, className: page ? "border border-line bg-surface" : "bg-surface", children: _jsxs("div", { className: `flex flex-col ${byDensity(d, "gap-3 px-4 pt-3.5 pb-4", "gap-2 py-2")}`, children: [_jsx("span", { className: "h-5 w-72 max-w-full rounded-control bg-ink/8" }), _jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-2", children: HECHOS.map((width) => (_jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "h-2.5 w-10 rounded-control bg-ink/5" }), _jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${width}` })] }, width))) }), _jsx("div", { className: "flex gap-4 border-b border-line pb-2", children: SOLAPAS.map((width, i) => (_jsx("span", { className: `h-3 rounded-control ${i === 0 ? "bg-ink/10" : "bg-ink/5"} ${width}` }, width))) }), _jsx("span", { className: "h-24 rounded-box bg-ink/5" })] }) })] }));
+    return (_jsxs("article", { "aria-busy": "true", className: "flex min-w-0 animate-reveal-late flex-col", children: [_jsx("span", { className: "sr-only", children: label }), page ? (_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 bg-chrome px-3.5 py-2.5", children: [_jsx("span", { className: "h-3 w-24 rounded-control bg-chrome-ink/15" }), _jsx("span", { className: "h-3 w-40 rounded-control bg-chrome-ink/10" }), _jsx("span", { className: "ml-auto h-(--size-control-sm) w-28 rounded-control bg-chrome-ink/15" })] })) : null, _jsx("div", { "aria-hidden": true, className: page ? "border border-line bg-surface" : "bg-surface", children: _jsxs("div", { className: `flex flex-col ${byDensity(d, "gap-3 px-4 pt-3.5 pb-4", "gap-2 py-2")}`, children: [_jsx("span", { className: "h-5 w-72 max-w-full rounded-control bg-ink/8" }), _jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-2", children: HECHOS.map((width) => (_jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "h-2.5 w-10 rounded-control bg-ink/5" }), _jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${width}` })] }, width))) }), _jsx("div", { className: "flex gap-4 border-b border-line pb-2", children: SOLAPAS.map((width, i) => (_jsx("span", { className: `h-3 rounded-control ${i === 0 ? "bg-ink/10" : "bg-ink/5"} ${width}` }, width))) }), _jsx("span", { className: "h-24 rounded-box bg-ink/5" })] }) })] }));
 }

package/dist/components/search/SearchBar.js

@@ -74,6 +74,11 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
     const input = useRef(null);
     const box = useRef(null);
     const id = useId();
+    /* The suggestions are the input's popup (the ARIA combobox pattern): the input keeps the
+       focus and says which list it controls and which option is the active one, so a screen
+       reader announces «Nombre del cliente · contiene Globex» as the option it is. */
+    const listId = useId();
+    const optionId = (at) => `${listId}-${at}`;
     /**
      * Los campos por los que se puede preguntar.
      *
@@ -290,7 +295,9 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                                 removeLabel: copy.search.dropOp,
                                             },
                                         ]),
-                                ] }), _jsx("input", { ref: input, "aria-label": copy.choice.search, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                                ] }), _jsx("input", { ref: input, "aria-label": copy.choice.search, role: "combobox", "aria-autocomplete": "list", "aria-expanded": open, ...(open ? { "aria-controls": listId } : {}), ...(open && !asTags && suggestions[active] !== undefined
+                                    ? { "aria-activedescendant": optionId(active) }
+                                    : {}), value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
                                     /* Retroceso con el campo vacío saca la ÚLTIMA instancia: el gesto
                                        que ya existe en cualquier campo de fichas y el único que se
                                        descubre sin que nadie lo explique. La última y no la última de
@@ -392,7 +399,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                     /* UNA LISTA, no una tira. Se está ELIGIENDO: el ojo baja por una
                        columna y el teclado también. Doce atributos doblados en tres
                        renglones son doce cosas que barrer en zigzag para encontrar una. */
-                    _jsx("div", { className: "max-h-72 overflow-y-auto p-1", children: _jsx(Tags, { stack: true, surface: "canvas", label: step.field !== undefined ? copy.search.askOp : copy.search.askAttribute, items: suggestions.map((one, at) => ({
+                    _jsx("div", { id: listId, className: "max-h-72 overflow-y-auto p-1", children: _jsx(Tags, { stack: true, surface: "canvas", label: step.field !== undefined ? copy.search.askOp : copy.search.askAttribute, items: suggestions.map((one, at) => ({
                                 id: one.id,
                                 label: one.label,
                                 ...(one.kind === "op"
@@ -402,7 +409,9 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                         : {}),
                                 active: at === active,
                                 onSelect: () => pick(one),
-                            })) }) })) : (_jsx("div", { className: "p-1", children: suggestions.map((one, at) => (_jsxs("button", { type: "button", onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" || one.kind === "literal" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_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 text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
+                            })) }) })) : (_jsx("div", { id: listId, role: "listbox", "aria-label": copy.search.suggestions, className: "p-1", children: suggestions.map((one, at) => (_jsxs("div", { id: optionId(at), role: "option", "aria-selected": at === active, 
+                            /* The input keeps the focus: pressing an option must not take it. */
+                            onMouseDown: (event) => event.preventDefault(), onClick: () => pick(one), onMouseEnter: () => setActive(at), className: `flex w-full cursor-pointer items-baseline gap-1.5 rounded-control px-2 py-1.5 text-left text-meta transition-colors duration-(--duration-instant) ${at === active ? "bg-primary/8" : "hover:bg-ink/4"}`, children: [_jsx("span", { className: "shrink-0 font-medium text-ink", children: one.label }), one.kind === "condition" || one.kind === "literal" ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "shrink-0 text-muted", children: ":" }), _jsx("span", { className: "min-w-0 truncate font-mono text-micro text-ink", children: one.hint })] })) : one.kind === "field" && one.hint !== undefined ? (_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 text-muted", children: one.hint })) : null] }, one.id))) }))] })) : null, panel && (columns.length > 0 || onOpenBuilder !== undefined) ? (_jsxs("div", { id: id, className: "absolute top-full right-0 z-30 mt-1 flex w-max max-w-full flex-wrap overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float", children: [columns.map((c, i) => (_jsxs("div", { className: `flex min-w-48 flex-1 flex-col ${i === 0 ? "" : "border-t border-line sm:border-t-0 sm:border-l"}`, children: [_jsx("div", { className: "border-b border-line px-2.5 py-1.5 text-micro font-medium text-muted", children: c.title }), _jsx("div", { className: "flex flex-col gap-0.5 p-1", children: c.content ??
                                     c.groups?.map((g, gi) => (_jsx(Group, { group: g, first: gi === 0, onSelect: c.onSelect }, g.label ?? gi))) })] }, c.title))), onOpenBuilder === undefined ? null : (_jsx("div", { className: "w-full border-t border-line p-1", children: _jsxs("button", { type: "button", onClick: () => {
                                 onOpenBuilder();
                                 setPanel(false);

package/dist/foundations/copy.d.ts

@@ -70,8 +70,13 @@ export type UiCopy = {
         faces: string;
         /** The mark of a record with changes that are not saved yet. */
         unsaved: string;
+        /** The same mark when the record says how many fields changed. */
+        unsavedOne: string;
+        unsavedMany: string;
         save: string;
         saving: string;
+        /** Said, briefly, once what was saved is saved. */
+        saved: string;
         discard: string;
         /** Read aloud next to a stage that failed: the red fill alone says nothing to a
          *  screen reader. */
@@ -115,6 +120,8 @@ export type UiCopy = {
         unset: string;
         /** A list of checks read with nothing chosen. */
         none: string;
+        /** Next to the label of a field whose value changed and is not saved yet. */
+        changed: string;
     };
     /** The choice controls: combo boxes, selects, suggestion lists. */
     choice: {
@@ -127,6 +134,8 @@ export type UiCopy = {
     };
     search: {
         tools: string;
+        /** The name of the list of what the bar offers for what was typed. */
+        suggestions: string;
         /** The name of the panel button once something is set: it shows the count, and what
          *  the button SHOWS has to be inside its name (WCAG 2.5.3) — `{label}` is `tools`. */
         toolsSetOne: string;
@@ -230,6 +239,10 @@ export type UiCopy = {
         distinct: string;
         /** Under a pile that holds its first page and counts them all: ask for the rest. */
         pileMore: string;
+        /** The same, when whoever pages says how many one press brings: «Show 50 more of 49,950». */
+        pileMoreOf: string;
+        /** Under a short pile with no next page: what it shows of what it counts. */
+        pileShown: string;
     };
     menu: {
         empty: string;
@@ -259,6 +272,8 @@ export type UiCopy = {
          *  record itself. */
         peek: string;
         open: string;
+        /** Asked again while the rows stay: the name of the discreet bar over them. */
+        refreshing: string;
     };
     /** La historia de un registro: eventos y mensajes. */
     /** The panel of everything around a record: its notices, its conversation and its

package/dist/foundations/copy.es.js

@@ -72,8 +72,11 @@ export const SPANISH_COPY = {
         status: "Estado",
         faces: "Caras",
         unsaved: "sin guardar",
+        unsavedOne: "1 cambio sin guardar",
+        unsavedMany: "{count} cambios sin guardar",
         save: "Guardar",
         saving: "Guardando…",
+        saved: "Guardado",
         discard: "Descartar",
         failed: "falló",
         notices: "Avisos sobre este registro",
@@ -106,6 +109,7 @@ export const SPANISH_COPY = {
         help: "Ayuda",
         unset: "sin definir",
         none: "Ninguna",
+        changed: "modificado",
     },
     choice: {
         noResults: "Sin resultados",
@@ -127,6 +131,7 @@ export const SPANISH_COPY = {
     },
     search: {
         tools: "Filtrar, agrupar y favoritos",
+        suggestions: "Sugerencias",
         toolsSetOne: "{label}, {count} puesto",
         toolsSetMany: "{label}, {count} puestos",
         editChip: "Clic para editar",
@@ -200,6 +205,8 @@ export const SPANISH_COPY = {
         max: "máx {value}",
         distinct: "{value} distintos",
         pileMore: "Ver {count} más",
+        pileMoreOf: "Ver {count} más de {left}",
+        pileShown: "Se muestran {shown} de {count}",
     },
     menu: { empty: "Nada coincide." },
     list: {
@@ -209,6 +216,7 @@ export const SPANISH_COPY = {
         count: "{count} registros",
         peek: "Vista previa",
         open: "Abrir",
+        refreshing: "Actualizando la lista…",
     },
     activity: {
         bySystem: "el sistema",

package/dist/foundations/copy.js

@@ -48,8 +48,11 @@ export const ENGLISH_COPY = {
         status: "Status",
         faces: "Record faces",
         unsaved: "unsaved",
+        unsavedOne: "1 change unsaved",
+        unsavedMany: "{count} changes unsaved",
         save: "Save",
         saving: "Saving…",
+        saved: "Saved",
         discard: "Discard",
         failed: "failed",
         notices: "Notices about this record",
@@ -82,6 +85,7 @@ export const ENGLISH_COPY = {
         help: "Help",
         unset: "not set",
         none: "None",
+        changed: "changed",
     },
     choice: {
         noResults: "No results",
@@ -89,6 +93,7 @@ export const ENGLISH_COPY = {
     },
     search: {
         tools: "Filter, group and favorites",
+        suggestions: "Suggestions",
         toolsSetOne: "{label}, {count} applied",
         toolsSetMany: "{label}, {count} applied",
         editChip: "Click to edit",
@@ -146,6 +151,8 @@ export const ENGLISH_COPY = {
         max: "max {value}",
         distinct: "{value} distinct",
         pileMore: "Show {count} more",
+        pileMoreOf: "Show {count} more of {left}",
+        pileShown: "Showing {shown} of {count}",
     },
     menu: {
         empty: "Nothing matches.",
@@ -157,6 +164,7 @@ export const ENGLISH_COPY = {
         count: "{count} records",
         peek: "Quick look",
         open: "Open",
+        refreshing: "Updating the list…",
     },
     activity: {
         bySystem: "the system",

package/dist/foundations/grouping.d.ts

@@ -104,6 +104,15 @@ export type Pile<T> = {
     items: readonly T[];
     /** El nivel de abajo. Vacío en el más profundo. */
     piles: readonly Pile<T>[];
+    /**
+     * What the next «show more» of a short pile brings — said by whoever pages it.
+     *
+     * `50` reads «Show 50 more of 49,950»: the button says what one press adds, not what is
+     * missing. `false` says there is no next page although the count says more (a cap on
+     * the rows held, a server that stops paging): the button goes and the pile says how many
+     * it shows. Absent, the button counts what is left, as it did before this existed.
+     */
+    more?: number | false;
 };
 /**
  * La identidad de un NIVEL: el campo y, si es fecha, su grano.
@@ -280,6 +289,25 @@ export declare function itemPath<T>(item: T, levels: readonly GroupLevel[], of:
  *  presentaciones que necesitan la secuencia y no el árbol —la planilla
  *  virtualizada, que cuenta índices— y el que quiera saber qué quedó visible. */
 export declare function pileItems<T>(piles: readonly Pile<T>[]): readonly T[];
+/**
+ * What the foot of a pile offers: the next page, or the word that there is none.
+ *
+ * Context: every presentation that draws piles —rows, cards, the table, one of the
+ * application's own— asks this, so «Show 50 more of 49,950» and «Showing 500 of 49,950»
+ * are decided once. `null` when the pile holds every row it counts, or holds piles and not
+ * rows. A short pile with no way to page (`more: false`, or no `onMore`) still says so: a
+ * header that reads 49,950 over 500 rows is a count the screen silently contradicts.
+ */
+export type PileFoot = {
+    kind: "more";
+    left: number;
+    next?: number;
+} | {
+    kind: "end";
+    shown: number;
+    count: number;
+};
+export declare function pileFoot<T>(pile: Pile<T>, canAsk: boolean): PileFoot | null;
 /** Cuántas filas hay en total. Suma los conteos del primer nivel, que ya
  *  incluyen los de abajo — no recorre las filas, porque puede no tenerlas. */
 export declare function pileCount<T>(piles: readonly Pile<T>[]): number;

package/dist/foundations/index.d.ts

@@ -9,7 +9,7 @@ export type { OpenTarget, Size, Surface, Tone } from "./types.js";
 export { SPANISH_COPY } from "./copy.es.js";
 export { flatten, loose, pick, pickAll, propsOf, slot, slotOf, type Slotted, } from "./slots.js";
 export { dateKey, dateLabel, grainName, monthName, } from "./calendar.js";
-export { GRAIN_ORDER, type GroupableField, type GroupGrain, type Grouping, type GroupLevel, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, type Pile, pileCount, pileIsOpen, pileItems, pileLabel, type PileLabelOf, type PileOf, pilesFrom, pilesOf, } from "./grouping.js";
+export { GRAIN_ORDER, type GroupableField, type GroupGrain, type Grouping, type GroupLevel, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, type Pile, pileCount, type PileFoot, pileFoot, pileIsOpen, pileItems, pileLabel, type PileLabelOf, type PileOf, pilesFrom, pilesOf, } from "./grouping.js";
 export { axisLabels, axisSpans, keyStarts, type Pivot, type PivotAxis, type PivotCell, type PivotCrossing, type PivotFold, pivotFrom, pivotIsEmpty, type PivotKey, type PivotLevel, type PivotMargin, type PivotMeasure, pivotOf, type PivotSource, type PivotSpec, } from "./pivot.js";
 export { downloadPivot, pivotSheet, type PivotSheetOptions, pivotXlsx, } from "./pivotSheet.js";
 export { STICKY_TOP, stickyReset, stickyTop, useScrollBox, useStickyLayer, } from "./sticky.js";

package/dist/foundations/index.js

@@ -23,7 +23,7 @@ export { dateKey, dateLabel, grainName, monthName, } from "./calendar.js";
 /* LA AGRUPACIÓN — el vocabulario, que hablan las dos capas: la lista arma el
    árbol de montones y la tabla lo dibuja. Vive acá y no en `contexts/list`
    porque una primitiva no puede importar de un contexto. */
-export { GRAIN_ORDER, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, pileCount, pileIsOpen, pileItems, pileLabel, pilesFrom, pilesOf, } from "./grouping.js";
+export { GRAIN_ORDER, itemPath, levelKey, moveLevel, normalizeLevels, pathKey, pathLabels, pileCount, pileFoot, pileIsOpen, pileItems, pileLabel, pilesFrom, pilesOf, } from "./grouping.js";
 /* EL PIVOTE — el mismo reparto: el vocabulario acá, la grilla en `primitives`.
    Que los márgenes vengan de la base y que un agujero no sea un cero son reglas
    del CONTRATO, no del dibujo, y por eso viven de este lado. */

package/dist/primitives/button/Button.d.ts

@@ -1,5 +1,5 @@
 import type { Surface } from "../../foundations/types.js";
-import type { LucideIcon } from "lucide-react";
+import { type LucideIcon } from "lucide-react";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 export type ButtonRole = "primary" | "secondary" | "ghost" | "danger";
 export type ButtonSize = "sm" | "md" | "lg";
@@ -53,8 +53,18 @@ export type ButtonProps = NativeProps<"button", "type" | "disabled" | "title" |
     expanded?: boolean;
     /** What it opens, written to `aria-haspopup`. `menu` when absent. */
     haspopup?: ButtonPopup;
+    /**
+     * What it started is running — saving, publishing, registering a payment.
+     *
+     * Context: the buttons said it by turning `disabled`, and a disabled button drops the focus
+     * to the page: whoever pressed Save with the keyboard was left nowhere, and a press while
+     * it ran was silently lost or — worse — sent twice. Busy, the button KEEPS the focus and
+     * its width (the label stays), says so (`aria-busy`, a turning mark where its icon was) and
+     * ignores presses until it is done.
+     */
+    busy?: boolean;
 };
-export declare function Button({ children, role, size, surface: surfaceProp, icon: Icon, disabled, title, type, expanded, haspopup, ref, ...native }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ children, role, size, surface: surfaceProp, icon: Icon, disabled, title, type, expanded, haspopup, busy, ref, onClick, ...native }: ButtonProps): import("react").JSX.Element;
 export type ButtonLinkProps = NativeProps<"a", "href" | "download" | "title"> & {
     children: ReactNode;
     href: string;