@sincpro/web-ui 1.2.0 → 1.4.0

package/dist/components/activity/Activity.js

@@ -9,7 +9,7 @@ import { SegmentedControl } from "../../primitives/choice/SegmentedControl.js";
 import { useNoteEntries } from "../../primitives/field/note.js";
 import { Callout } from "../../primitives/notice/Callout.js";
 import { Tag } from "../../primitives/tag/Tag.js";
-import { DateValue } from "../../primitives/value/Fecha.js";
+import { DateValue } from "../../primitives/value/DateValue.js";
 import { Avatar } from "../../primitives/value/Person.js";
 import { Activity as ActivityIcon, ArrowRight, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, CornerDownRight, History, Info, Lock, MessageSquare, OctagonAlert, PanelRightClose, PanelRightOpen, TriangleAlert, Zap, } from "lucide-react";
 import { Fragment, useId, useState } from "react";

package/dist/components/activity/Messages.d.ts

@@ -1,3 +1,4 @@
+import { type UiCopy } from "../../foundations/copy.js";
 import { type ReactNode } from "react";
 /**
  * The box to write in. What gets written is drawn by `Activity`, together with
@@ -51,9 +52,10 @@ export type MessageKind = {
  *
  * Es una función y no una constante porque sus palabras salen de la copia, y una
  * constante las congelaría con las que hubiera al cargar el módulo —o sea, las
- * de fábrica— por más que después se instale otra.
+ * de fábrica— por más que después se instale otra. Sin `copy`, las instaladas; un
+ * componente le pasa las de su rama.
  */
-export declare function writeANote(): MessageKind;
+export declare function writeANote(copy?: UiCopy): MessageKind;
 export type MessageComposerProps = {
     /** The ways of writing this record takes. Its own list because it is the
      *  application that knows whether there is WhatsApp, and to whose number. */

package/dist/components/activity/Messages.js

@@ -10,10 +10,10 @@ import { useState } from "react";
  *
  * Es una función y no una constante porque sus palabras salen de la copia, y una
  * constante las congelaría con las que hubiera al cargar el módulo —o sea, las
- * de fábrica— por más que después se instale otra.
+ * de fábrica— por más que después se instale otra. Sin `copy`, las instaladas; un
+ * componente le pasa las de su rama.
  */
-export function writeANote() {
-    const copy = currentCopy();
+export function writeANote(copy = currentCopy()) {
     return {
         id: "note",
         label: copy.activity.writeNote,
@@ -26,7 +26,7 @@ export function MessageComposer({ kinds, onSend, sending = false, footer, }) {
     /* La manera por default se arma acá adentro y no en la firma: un default de
        parámetro se evalúa en cada render, sí, pero escrito como constante del
        módulo congelaría las palabras de fábrica. */
-    const ways = kinds ?? [writeANote()];
+    const ways = kinds ?? [writeANote(copy)];
     const [writing, setWriting] = useState(undefined);
     const [body, setBody] = useState("");
     const ready = body.trim() !== "" && !sending;

package/dist/components/activity/Timeline.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SurfaceProvider, useSurface } from "../../foundations/surface.js";
 import { Empty } from "../../primitives/notice/Notice.js";
-import { DateValue } from "../../primitives/value/Fecha.js";
+import { DateValue } from "../../primitives/value/DateValue.js";
 import { Children } from "react";
 const DOT_TONE = {
     neutral: { canvas: "bg-muted", chrome: "bg-chrome-muted" },

package/dist/components/assist/AssistMark.js

@@ -5,7 +5,7 @@ import { currentCopy, fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { cn, focusRing } from "../../foundations/variants.js";
 import { PopoverTrigger } from "../../primitives/overlay/PopoverTrigger.js";
 import { Tooltip, TooltipTrigger } from "../../primitives/overlay/Tooltip.js";
-import { DateValue } from "../../primitives/value/Fecha.js";
+import { DateValue } from "../../primitives/value/DateValue.js";
 import { Link } from "react-aria-components";
 /* ==================================================================== *
  *  THE ASSISTANT'S MARK — how a screen says «this came from the assistant».

package/dist/components/assist/AssistSuggestion.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { acceptedMessage, applyWithUndo, } from "./assist.js";
 import { AssistLabel, AssistSourceLink } from "./AssistMark.js";
 import { useUiCopy } from "../../foundations/copy.js";
+import { FieldIdsContext } from "../../foundations/form.js";
 import { Button, IconButton } from "../../primitives/button/Button.js";
-import { FieldIdsContext } from "../../primitives/field/context.js";
 import { useToastIfAny } from "../../primitives/notice/Toast.js";
 import { Check, X } from "lucide-react";
 import { useContext, useId } from "react";

package/dist/components/assist/ChangeReview.js

@@ -79,7 +79,7 @@ function ReviewBody({ review }) {
     const copy = useUiCopy();
     const { groups, order, current, choose } = review;
     const state = chosenState(order, current);
-    return (_jsxs("div", { className: "@container flex min-w-0 flex-col", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-line px-4 py-2", children: [_jsx(Checkbox, { checked: state === "all", mixed: state === "some", label: copy.assist.all, onChange: (on) => choose(on ? [...order] : []) }), _jsx("span", { className: "text-micro text-muted tabular-nums", children: fillCopy(copy.assist.chosen, { count: current.length, total: order.length }) })] }), groups.map((group, i) => (_jsxs("section", { className: "flex min-w-0 flex-col", children: [group.title === undefined ? null : (_jsx("h4", { className: "px-4 pt-3 pb-1 text-micro font-medium text-muted", children: group.title })), _jsx("ul", { className: "flex min-w-0 flex-col", children: group.changes.map((change) => (_jsx(ChangeRow, { change: change, on: current.includes(change.id), onToggle: (on) => choose(toggleChosen(order, current, change.id, on)) }, change.id))) })] }, group.title ?? i)))] }));
+    return (_jsxs("div", { className: "@container flex min-w-0 flex-col", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-line px-4 py-2", children: [_jsx(Checkbox, { checked: state === "all", mixed: state === "some", label: copy.assist.all, onChange: (on) => choose(on ? [...order] : []) }), _jsx("span", { className: "text-micro text-muted tabular-nums", children: fillCopy(copy.assist.chosen, { count: current.length, total: order.length }) })] }), groups.map((group, i) => (_jsxs("section", { className: "flex min-w-0 flex-col", children: [group.title === undefined ? null : (_jsx("h3", { className: "px-4 pt-3 pb-1 text-micro font-medium text-muted", children: group.title })), _jsx("ul", { className: "flex min-w-0 flex-col", children: group.changes.map((change) => (_jsx(ChangeRow, { change: change, on: current.includes(change.id), onToggle: (on) => choose(toggleChosen(order, current, change.id, on)) }, change.id))) })] }, group.title ?? i)))] }));
 }
 /** «Elegí al menos un cambio.», «Descartar» and «Aplicar N cambios». */
 function ReviewActions({ review, emphasis, onDiscard, after, }) {
@@ -102,7 +102,7 @@ export function ChangeReview(props) {
     const copy = useUiCopy();
     const review = useReview(props);
     const titleId = useId();
-    return (_jsxs("section", { "aria-labelledby": titleId, "data-assist": "review", className: "flex min-w-0 flex-col overflow-clip rounded-box border border-dashed border-info/40 bg-surface", children: [_jsxs("header", { className: "flex min-w-0 flex-col gap-1 border-b border-line px-4 py-3", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1", children: [_jsx(AssistLabel, {}), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsx("h3", { id: titleId, className: "text-lead font-semibold text-ink", children: title ?? copy.assist.review }), summary === undefined ? null : (_jsx("p", { className: "max-w-prose text-meta text-muted", children: summary }))] }), _jsx(ReviewBody, { review: review }), _jsx("footer", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-2.5", children: _jsx(ReviewActions, { review: review, emphasis: emphasis, onDiscard: onDiscard }) })] }));
+    return (_jsxs("section", { "aria-labelledby": titleId, "data-assist": "review", className: "flex min-w-0 flex-col overflow-clip rounded-box border border-dashed border-info/40 bg-surface", children: [_jsxs("header", { className: "flex min-w-0 flex-col gap-1 border-b border-line px-4 py-3", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1", children: [_jsx(AssistLabel, {}), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsx("h2", { id: titleId, className: "text-lead font-semibold text-ink", children: title ?? copy.assist.review }), summary === undefined ? null : (_jsx("p", { className: "max-w-prose text-meta text-muted", children: summary }))] }), _jsx(ReviewBody, { review: review }), _jsx("footer", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-2.5", children: _jsx(ReviewActions, { review: review, emphasis: emphasis, onDiscard: onDiscard }) })] }));
 }
 ChangeReview.Group = Group;
 ChangeReview.Change = Change;

package/dist/components/calendar/RecordCalendar.js

@@ -79,7 +79,10 @@ export function RecordCalendar({ items, keyOf, titleOf, startOf, endOf, allDayOf
                 listPlugin,
                 interactionPlugin,
                 formaThemePlugin,
-            ], locales: [esLocale], locale: copy.locale.toLowerCase().startsWith("es") ? "es" : "en", initialView: VIEW[view], ...(date === undefined ? {} : { initialDate: date }), headerToolbar: {
+            ], locales: [esLocale], locale: copy.locale.toLowerCase().startsWith("es") ? "es" : "en", initialView: VIEW[view], ...(date === undefined ? {} : { initialDate: date }), 
+            /* «Hoy» is what the button SAYS, and so what it is called: the locale's hint named
+               it «Este mes» — a name that hides the visible word from voice control. */
+            todayText: copy.calendar.today, todayHint: () => copy.calendar.today, headerToolbar: {
                 start: "prev,next today",
                 center: "title",
                 end: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",

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
@@ -90,5 +93,5 @@ export function SheetGroup({ title, hint, icon: Icon, children, }) {
             /* A group title is ABOVE its labels, not one of them: at the labels' size and weight
                «Cliente» the group read like «Cliente» the field. One step up in size and weight,
                and a hairline that says where the group starts. */
-            _jsxs("header", { className: "flex min-w-0 items-center gap-2 border-b border-line pb-1.5", children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsx("h3", { className: "min-w-0 truncate text-body font-semibold text-ink", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })) : hint === undefined ? null : (_jsx(Hint, { children: hint })), _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: children })] }));
+            _jsxs("header", { className: "flex min-w-0 items-center gap-2 border-b border-line pb-1.5", children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsx("h2", { className: "min-w-0 truncate text-body font-semibold text-ink", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })) : hint === undefined ? null : (_jsx(Hint, { children: hint })), _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: children })] }));
 }

package/dist/components/lines/LineItems.d.ts

@@ -1,5 +1,5 @@
+import { type FormMode } from "../../foundations/form.js";
 import { type DialogContext } from "../../primitives/dialog/Dialog.js";
-import { type FormMode } from "../../primitives/field/mode.js";
 import type { FlagTone } from "../../primitives/notice/Flag.js";
 import type { DataColumn } from "../../primitives/table/DataTable.js";
 import { type EditColumn, type EditLayout } from "../../primitives/table/EditableTable.js";

package/dist/components/lines/LineItems.js

@@ -4,12 +4,12 @@ import { commitDraft, filterLines, planRemoval, } from "./lines.js";
 import { useColumnControl, } from "../listing/columns.js";
 import { ColumnsMenu } from "../listing/ColumnsMenu.js";
 import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { FieldIdsContext } from "../../foundations/form.js";
+import { useFormMode } from "../../foundations/form.js";
 import { Button, IconButton } from "../../primitives/button/Button.js";
 import { SearchField } from "../../primitives/choice/SearchField.js";
 import { Dialog } from "../../primitives/dialog/Dialog.js";
-import { FieldIdsContext } from "../../primitives/field/context.js";
 import { TextInput } from "../../primitives/field/Field.js";
-import { useFormMode } from "../../primitives/field/mode.js";
 import { Empty } from "../../primitives/notice/Notice.js";
 import { useToast } from "../../primitives/notice/Toast.js";
 import { EditableTable, } from "../../primitives/table/EditableTable.js";

package/dist/components/listing/ListingBar.js

@@ -101,7 +101,7 @@ export function ListingBar({ actions, title, description, counters, selection, s
             (count === undefined ? null : (_jsx("span", { role: "status", className: "shrink-0 text-meta text-muted tabular-nums", children: count === 1
                     ? copy.list.countOne
                     : fillCopy(copy.list.count, { count: count.toLocaleString(copy.locale) }) })));
-        return (_jsx(SurfaceProvider, { value: "canvas", children: _jsxs("div", { className: `flex min-w-0 flex-wrap items-center gap-y-1.5 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [title === undefined ? null : (_jsx("h3", { className: "min-w-0 shrink-0 truncate text-body font-semibold text-ink", children: title })), center === null ? null : (_jsx("div", { className: "flex min-w-0 flex-1 basis-(--container-name) items-center overflow-x-clip overflow-y-visible", children: center })), howMany, views === undefined ? null : (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: views })), actions === undefined ? null : (_jsx("div", { className: `flex shrink-0 items-center gap-1.5 ${views === undefined ? "ml-auto" : ""}`, children: actions }))] }) }));
+        return (_jsx(SurfaceProvider, { value: "canvas", children: _jsxs("div", { className: `flex min-w-0 flex-wrap items-center gap-y-1.5 ${byDensity(d, "gap-x-3", "gap-x-2")}`, children: [title === undefined ? null : (_jsx("h2", { className: "min-w-0 shrink-0 truncate text-body font-semibold text-ink", children: title })), center === null ? null : (_jsx("div", { className: "flex min-w-0 flex-1 basis-(--container-name) items-center overflow-x-clip overflow-y-visible", children: center })), howMany, views === undefined ? null : (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: views })), actions === undefined ? null : (_jsx("div", { className: `flex shrink-0 items-center gap-1.5 ${views === undefined ? "ml-auto" : ""}`, children: actions }))] }) }));
     }
     /* El campo de búsqueda va en el CENTRO de la línea, y centrado contra la
        línea: pide `--container-search` y los dos lados se reparten lo que sobra

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

@@ -127,3 +127,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;
+    depth?: number;
+    onMore: () => void;
+}): import("react").JSX.Element;

package/dist/components/listing/Row.js

@@ -127,7 +127,7 @@ export function RowHeader({ name, meta, tags, withSelection = false, withIcon =
 export function GroupHeader({ field, label, count, detail, depth = 0, open = true, onToggle, }) {
     const d = useDensity();
     const copy = useUiCopy();
-    const content = (_jsxs(_Fragment, { children: [onToggle === undefined ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true })), field === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro text-muted/70", children: field })), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: label }), count === undefined ? null : (_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: count.toLocaleString(copy.locale) })), detail === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro tabular-nums text-muted", children: detail }))] }));
+    const content = (_jsxs(_Fragment, { children: [onToggle === undefined ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2, "aria-hidden": true })), field === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro text-muted", children: field })), _jsx("span", { className: "truncate text-micro font-medium text-ink", children: label }), count === undefined ? null : (_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: count.toLocaleString(copy.locale) })), detail === undefined ? null : (_jsx("span", { className: "shrink-0 text-micro tabular-nums text-muted", children: detail }))] }));
     /* La sangría va en el relleno de la izquierda y no en un margen: el
        encabezado tiene fondo y borde inferior, y un margen los cortaría antes del
        borde de la lista — la banda dejaría de leerse como una franja. El hover
@@ -137,3 +137,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, }) {
+    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) }) }) }));
+}

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

@@ -1,5 +1,5 @@
 import type { Surface } from "../../foundations/types.js";
-import type { LucideIcon } from "lucide-react";
+import type { ComponentType } from "react";
 /** How the same list is shown: table, board, timeline.
  *
  *  The icons go together and touching —a segmented group and not three loose
@@ -13,8 +13,13 @@ import type { LucideIcon } from "lucide-react";
 export interface ViewOption {
     id: string;
     label: string;
-    icon: LucideIcon;
+    /** Any icon component — lucide's are what the package uses, not what it requires. */
+    icon: ViewIcon;
 }
+export type ViewIcon = ComponentType<{
+    className?: string;
+    strokeWidth?: number;
+}>;
 export declare function ViewSwitcher({ options, current, onSelect, surface, }: {
     options: readonly ViewOption[];
     current: string;

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

@@ -10,7 +10,7 @@ export { GroupHeader, Row } from "./Row.js";
 export { type Selection, useSelection } from "./selection.js";
 export { type SetControl, useSetControl } from "./set.js";
 export { toggleCollapsed, type TreeControl, useTreeControl, } from "./tree.js";
-export { type ViewOption, ViewSwitcher, } from "./ViewSwitcher.js";
+export { type ViewIcon, type ViewOption, ViewSwitcher, } from "./ViewSwitcher.js";
 export { type BoardColumn, BoardColumns, type BoardStages, } from "./BoardColumns.js";
 export { type GroupingControl, useGroupingControl, } from "./grouping.js";
 export { GroupingLevels, type GroupingLevelsProps, } from "./GroupingLevels.js";

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

@@ -33,7 +33,10 @@ import { type Pages } from "./pages.js";
  *                    también; lo que se lee está en el cruce. Tampoco se
  *                    ordena: el orden de cada eje es el de sus claves.
  */
-export type ListPresent = "rows" | "table" | "board" | "sheet" | "report" | "pivot" | "calendar" | "gantt" | "timeline";
+export type BuiltInPresent = "rows" | "table" | "board" | "sheet" | "report" | "pivot" | "calendar" | "gantt" | "timeline";
+/** A presentation of a list: one the package draws, or the `id` of a `List.Present` the
+ *  application wrote. `string & {}` keeps the built-in names in autocomplete. */
+export type ListPresent = BuiltInPresent | (string & {});
 export interface SetControl<Row, Present extends string = ListPresent> extends Pages<Row> {
     present: Present;
     setPresent: (next: Present) => void;

package/dist/components/record/Breadcrumb.js

@@ -69,7 +69,11 @@ export function Breadcrumb({ crumbs, surface: surfaceProp, folded = 3, }) {
     const shown = folds
         ? [crumbs[0], null, crumbs[crumbs.length - 1]]
         : crumbs;
-    return (_jsx("nav", { "aria-label": copy.record.location, className: "flex min-w-0", children: _jsx(Breadcrumbs, { "aria-label": copy.record.location, className: "flex min-w-0 flex-wrap items-center gap-1", children: shown.map((crumb, i) => {
+    /* Named by WHERE it ends, not only by what it is: two records side by side (panes, a
+       panel next to the page) are two trails, and a screen reader lists landmarks by name. */
+    const last = crumbs[crumbs.length - 1];
+    const name = last === undefined ? copy.record.location : `${copy.record.location}: ${last.label}`;
+    return (_jsx("nav", { "aria-label": name, className: "flex min-w-0", children: _jsx(Breadcrumbs, { "aria-label": name, className: "flex min-w-0 flex-wrap items-center gap-1", children: shown.map((crumb, i) => {
                 const key = crumb === null ? "folded" : `${i}-${crumb.label}`;
                 const last = i === shown.length - 1;
                 return (_jsxs(AriaBreadcrumb, { id: key, className: "flex min-w-0 items-center gap-1", children: [i === 0 ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 ${edge}`, strokeWidth: 2, "aria-hidden": true })), crumb === null ? (_jsx(Menu, { label: copy.record.location, title: copy.record.location, icon: MoreHorizontal, iconOnly: true, chevron: false, variant: "text", size: "sm", surface: surface === "chrome" ? "chrome" : "canvas", align: "start", groups: [

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

@@ -1,4 +1,4 @@
-import { type BuiltFilter } from "./FilterBuilder.js";
+import type { BuiltFilter } from "./criteria.js";
 import { type ModelDefinition } from "./model.js";
 export interface BuiltSort {
     field: string;

package/dist/components/search/CriteriaBuilder.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { blankGroup, ExpressionView, treeFromFilter, treeToFilter, WhereTree, } from "./FilterBuilder.js";
 import { JsonEditor } from "./JsonEditor.js";
 import { filterableNames, } from "./model.js";
-import { currentCopy, fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { GRAIN_ORDER } from "../../foundations/grouping.js";
 import { useSurface } from "../../foundations/surface.js";
 import { Rule } from "../../primitives/block/Block.js";
@@ -174,11 +174,11 @@ export function CriteriaBuilder({ model, initial, focus, onApply, onCancel, }) {
             parsed = JSON.parse(text);
         }
         catch {
-            setRawError(currentCopy().builder.invalidJson);
+            setRawError(copy.builder.invalidJson);
             return;
         }
         if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
-            setRawError(currentCopy().builder.notCriteria);
+            setRawError(copy.builder.notCriteria);
             return;
         }
         setRawError(null);