@sincpro/web-ui 1.2.0 → 1.3.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

@@ -90,5 +90,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/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/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);

package/dist/components/search/FilterBuilder.d.ts

@@ -1,22 +1,5 @@
-import type { CriteriaJoin } from "./criteria.js";
+import type { BuiltFilter, CriteriaJoin } from "./criteria.js";
 import { type ModelDefinition } from "./model.js";
-/** Una condición, tal como la declara el motor. `operator` sale del `ops` del campo, así que
- *  lo que el constructor ofrece es exactamente lo que el modelo acepta. */
-export interface BuiltCondition {
-    field: string;
-    operator: string;
-    value: unknown;
-}
-/** Lo que el filtro puede ser en su forma real: una condición, un grupo `all`/`any` de más
- *  filtros —lo que el árbol arma, a cualquier profundidad—, o un `negate` que llegó de otro
- *  lado y que el árbol no fabrica, pero que este componente sabe mostrar y editar como JSON. */
-export type BuiltFilter = BuiltCondition | {
-    all: BuiltFilter[];
-} | {
-    any: BuiltFilter[];
-} | {
-    negate: BuiltFilter;
-};
 /** Si esto es una de las formas que el filtro reconoce — condición, o grupo `all`/`any`/
  *  `negate`. Un JSON válido que no es ninguna de éstas —`{}`, `{"foo": 1}`, un array suelto—
  *  no es un filtro que este componente sepa dibujar, y se trata como error de forma en vez de

package/dist/components/search/FilterBuilder.js

@@ -355,13 +355,13 @@ export function WhereTree({ model, group, onChange, depth = 0, focus, }) {
                     ? (node) => node?.scrollIntoView({ block: "nearest" })
                     : undefined, className: `flex min-w-0 flex-wrap items-center gap-2 rounded-control ${focus !== undefined && child.field === focus
                     ? "-m-1 p-1 ring-1 ring-primary/60"
-                    : ""}`, children: [_jsx("select", { value: child.field, onChange: (event) => setChild(index, {
+                    : ""}`, children: [_jsx("select", { "aria-label": copy.builder.ruleField, value: child.field, onChange: (event) => setChild(index, {
                             ...child,
                             field: event.target.value,
                             operator: model.fields[event.target.value]?.ops.includes(child.operator)
                                 ? child.operator
                                 : (model.fields[event.target.value]?.ops[0] ?? "="),
-                        }), className: `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}`, children: names.map((name) => (_jsx("option", { value: name, children: name }, name))) }), _jsx("select", { value: child.operator, onChange: (event) => setChild(index, { ...child, operator: event.target.value }), className: `min-w-0 flex-1 basis-36 rounded-control border px-2 py-1 text-meta ${box}`, children: (model.fields[child.field]?.ops ?? []).map((operator) => (_jsx("option", { value: operator, children: opLabel(operator) }, operator))) }), WITHOUT_VALUE.has(child.operator) ? (_jsx("span", { className: "flex-1 text-meta text-muted", children: copy.builder.noValue })) : WITH_RANGE.has(child.operator) ? (_jsxs("span", { className: "flex min-w-0 flex-1 basis-40 items-center gap-1", children: [_jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.value, onChange: (event) => setChild(index, { ...child, value: event.target.value }), placeholder: copy.builder.from, className: `min-w-0 flex-1 rounded-control border px-2 py-1 text-meta ${box}` }), _jsx("span", { className: "shrink-0 text-micro text-muted", children: copy.search.and }), _jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.upper ?? "", onChange: (event) => setChild(index, { ...child, upper: event.target.value }), placeholder: copy.builder.to, className: `min-w-0 flex-1 rounded-control border px-2 py-1 text-meta ${box}` })] })) : (_jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.value, onChange: (event) => setChild(index, { ...child, value: event.target.value }), placeholder: copy.builder.value, className: `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}` })), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": copy.builder.addRule, onClick: () => addConditionAfter(index), className: "text-muted hover:text-ink", children: _jsx(Plus, { className: "size-4" }) }), _jsx("button", { type: "button", "aria-label": copy.builder.addNested, onClick: () => addGroupAfter(index), className: "text-muted hover:text-ink", children: _jsx(FolderTree, { className: "size-4" }) }), _jsx("button", { type: "button", "aria-label": copy.builder.dropRule, disabled: group.children.length === 1, onClick: () => removeAt(index), className: "text-muted disabled:opacity-30", children: _jsx(Trash2, { className: "size-4" }) })] })] }, index)))] }));
+                        }), className: `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}`, children: names.map((name) => (_jsx("option", { value: name, children: name }, name))) }), _jsx("select", { "aria-label": copy.builder.ruleOperator, value: child.operator, onChange: (event) => setChild(index, { ...child, operator: event.target.value }), className: `min-w-0 flex-1 basis-36 rounded-control border px-2 py-1 text-meta ${box}`, children: (model.fields[child.field]?.ops ?? []).map((operator) => (_jsx("option", { value: operator, children: opLabel(operator) }, operator))) }), WITHOUT_VALUE.has(child.operator) ? (_jsx("span", { className: "flex-1 text-meta text-muted", children: copy.builder.noValue })) : WITH_RANGE.has(child.operator) ? (_jsxs("span", { className: "flex min-w-0 flex-1 basis-40 items-center gap-1", children: [_jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.value, onChange: (event) => setChild(index, { ...child, value: event.target.value }), placeholder: copy.builder.from, className: `min-w-0 flex-1 rounded-control border px-2 py-1 text-meta ${box}` }), _jsx("span", { className: "shrink-0 text-micro text-muted", children: copy.search.and }), _jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.upper ?? "", onChange: (event) => setChild(index, { ...child, upper: event.target.value }), placeholder: copy.builder.to, className: `min-w-0 flex-1 rounded-control border px-2 py-1 text-meta ${box}` })] })) : (_jsx("input", { type: inputType(model.fields[child.field]?.type ?? "text"), value: child.value, onChange: (event) => setChild(index, { ...child, value: event.target.value }), placeholder: copy.builder.value, className: `min-w-0 flex-1 basis-40 rounded-control border px-2 py-1 text-meta ${box}` })), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": copy.builder.addRule, onClick: () => addConditionAfter(index), className: "text-muted hover:text-ink", children: _jsx(Plus, { className: "size-4" }) }), _jsx("button", { type: "button", "aria-label": copy.builder.addNested, onClick: () => addGroupAfter(index), className: "text-muted hover:text-ink", children: _jsx(FolderTree, { className: "size-4" }) }), _jsx("button", { type: "button", "aria-label": copy.builder.dropRule, disabled: group.children.length === 1, onClick: () => removeAt(index), className: "text-muted disabled:opacity-30", children: _jsx(Trash2, { className: "size-4" }) })] })] }, index)))] }));
 }
 export function FilterBuilder({ model, initial, onApply, onCancel, }) {
     const names = filterableNames(model);
@@ -400,11 +400,11 @@ export function FilterBuilder({ model, initial, onApply, onCancel, }) {
             parsed = JSON.parse(text);
         }
         catch {
-            setRawError(currentCopy().builder.invalidJson);
+            setRawError(copy.builder.invalidJson);
             return;
         }
         if (!isRecognizedFilter(parsed)) {
-            setRawError(currentCopy().builder.notFilter);
+            setRawError(copy.builder.notFilter);
             return;
         }
         setRawError(null);

package/dist/components/search/JsonEditor.js

@@ -8,6 +8,7 @@ import { useTheme } from "../../foundations/theme.js";
 import { Button } from "../../primitives/button/index.js";
 import CodeMirror, { EditorView, Prec } from "@uiw/react-codemirror";
 import { Wand2 } from "lucide-react";
+import { useId } from "react";
 /* ====================================================================== *
  *  UN JSON QUE SE ESCRIBE A MANO, EN UN EDITOR DE VERDAD.
  *
@@ -56,11 +57,14 @@ const SURFACE_THEME = EditorView.theme({
 });
 export function JsonEditor({ value, onChange, error, height = "16rem", label, }) {
     const copy = useUiCopy();
+    const labelId = useId();
     const surface = useSurface();
     const { resolved } = useTheme();
     /* The chrome is dark in both themes; the canvas follows the theme. */
     const dark = surface === "chrome" || resolved === "dark";
-    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { className: "text-micro text-muted", children: label ?? copy.builder.editor }), _jsxs(Button, { role: "ghost", size: "sm", disabled: value.trim() === "", onClick: () => onChange(formatJson(value)), children: [_jsx(Wand2, { className: "size-3" }), " ", copy.builder.format] })] }), _jsx("div", { className: `overflow-hidden rounded-control border ${error == null ? "border-ink/15" : "border-danger"}`, children: _jsx(CodeMirror, { value: value, onChange: onChange, height: height, theme: dark ? "dark" : "light", extensions: [
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("p", { id: labelId, className: "text-micro text-muted", children: label ?? copy.builder.editor }), _jsxs(Button, { role: "ghost", size: "sm", disabled: value.trim() === "", onClick: () => onChange(formatJson(value)), children: [_jsx(Wand2, { className: "size-3" }), " ", copy.builder.format] })] }), _jsx("div", { className: `overflow-hidden rounded-control border ${error == null ? "border-ink/15" : "border-danger"}`, children: _jsx(CodeMirror, { value: value, onChange: onChange, height: height, theme: dark ? "dark" : "light", extensions: [
+                        /* The editable area is CodeMirror's own element: named here or nowhere. */
+                        EditorView.contentAttributes.of({ "aria-labelledby": labelId }),
                         json(),
                         linter(jsonParseLinter()),
                         lintGutter(),

package/dist/components/search/SearchBar.d.ts

@@ -1,5 +1,4 @@
-import { type CriteriaJoin, type CriteriaPath, type SearchCriteria } from "./criteria.js";
-import type { BuiltCondition, BuiltFilter } from "./FilterBuilder.js";
+import { type BuiltCondition, type BuiltFilter, type CriteriaJoin, type CriteriaPath, type SearchCriteria } from "./criteria.js";
 import type { ModelDefinition } from "./model.js";
 import type { Surface } from "../../foundations/types.js";
 import type { MenuGroup } from "../../primitives/menu/Menu.js";

package/dist/components/search/criteria.d.ts

@@ -1,5 +1,21 @@
-import type { BuiltCondition, BuiltFilter } from "./FilterBuilder.js";
 import type { GroupGrain, GroupLevel } from "../../foundations/grouping.js";
+/** Una condición, tal como la declara el motor. `operator` sale del `ops` del campo, así que
+ *  lo que el constructor ofrece es exactamente lo que el modelo acepta. */
+export interface BuiltCondition {
+    field: string;
+    operator: string;
+    value: unknown;
+}
+/** Lo que el filtro puede ser en su forma real: una condición, un grupo `all`/`any` de más
+ *  filtros —lo que el árbol arma, a cualquier profundidad—, o un `negate` que llegó de otro
+ *  lado y que el árbol no fabrica, pero que este componente sabe mostrar y editar como JSON. */
+export type BuiltFilter = BuiltCondition | {
+    all: BuiltFilter[];
+} | {
+    any: BuiltFilter[];
+} | {
+    negate: BuiltFilter;
+};
 /** Cómo se juntan las instancias de un nodo. `not` niega lo que tiene adentro. */
 export type CriteriaJoin = "all" | "any" | "not";
 /**

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

@@ -1,5 +1,6 @@
+export { type BuiltCondition, type BuiltFilter, } from "./criteria.js";
 export { type BuiltCriteria, type BuiltLevel, type BuiltSort, CriteriaBuilder, } from "./CriteriaBuilder.js";
-export { blankGroup, type BuiltCondition, type BuiltFilter, describeFilter, FilterBuilder, type TreeCondition, treeFromFilter, type TreeGroup, type TreeNode, treeToFilter, } from "./FilterBuilder.js";
+export { blankGroup, describeFilter, FilterBuilder, type TreeCondition, treeFromFilter, type TreeGroup, type TreeNode, treeToFilter, } from "./FilterBuilder.js";
 export { formatJson, JsonEditor } from "./JsonEditor.js";
 export { SearchBar, type SearchBarProps, type SearchFacet, } from "./SearchBar.js";
 export { at, criteriaId, type CriteriaJoin, type CriteriaPath, filterCriteria, filtersOf, type GroupCriteria, groupCriteria, groupsOf, hasNamed, levelsOf, nextJoin, removeAt, replaceAt, type SearchCriteria, toggleNamed, whereOf, withLevels, } from "./criteria.js";

package/dist/components/search/index.js

@@ -1,4 +1,5 @@
 /* Buscar con facetas, con los recortes metidos adentro del campo. */
+export {} from "./criteria.js";
 export { CriteriaBuilder, } from "./CriteriaBuilder.js";
 export { blankGroup, describeFilter, FilterBuilder, treeFromFilter, treeToFilter, } from "./FilterBuilder.js";
 export { formatJson, JsonEditor } from "./JsonEditor.js";

package/dist/components/shell/Panes.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+declare const BASIS: {
+    readonly narrow: "@4xl:flex-2";
+    readonly wide: "@4xl:flex-3";
+};
+/** One column of the screen. `narrow` for the set you pick from, `wide` for the work. */
+export declare function Pane({ children, size, label, }: {
+    children: ReactNode;
+    size?: keyof typeof BASIS;
+    /** What this pane is — «Extracto», «Por conciliar». Panes are regions a screen reader
+     *  jumps between, so each one is named. */
+    label: string;
+}): import("react").JSX.Element;
+/** The panes, side by side on a desk and stacked when narrow. Fills the height it is given. */
+export declare function Panes({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/components/shell/Panes.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeaderSlotContext } from "./headerSlot.js";
+import { stickyReset } from "../../foundations/sticky.js";
+/* ==================================================================== *
+ *  PANES — a screen of N sets side by side, each one with its own search.
+ *
+ *  Context: Odoo's bank reconciliation is the case — the statement lines on one side, the
+ *  record being matched and the journal items that could match it on the other, each with
+ *  its own search, and the person going back and forth between them. A list that fills the
+ *  page carries its bar up to the screen's header (`useHeaderSlot`), and there is ONE
+ *  header: with two or three lists they fought over it, and each bar stuck to the page
+ *  instead of to its own column.
+ *
+ *  A pane is the answer: on a desk each pane SCROLLS ON ITS OWN — a long list on the left
+ *  does not drag the record on the right out of sight — so what sticks inside it (a list's
+ *  bar, a table's header) sticks to the pane's edge, and nothing inside goes up to the
+ *  screen's header. Narrow, the panes stack and the page scrolls: a scroll inside a scroll
+ *  on a phone is a list nobody can leave.
+ *
+ *  It decides by ITS OWN width (it is the `@container`), not the window's: a workspace panel
+ *  among four is narrow on a wide screen, and a view mounted without a container around it
+ *  would never go side by side.
+ * ==================================================================== */
+const BASIS = { narrow: "@4xl:flex-2", wide: "@4xl:flex-3" };
+/** One column of the screen. `narrow` for the set you pick from, `wide` for the work. */
+export function Pane({ children, size = "wide", label, }) {
+    return (_jsx(HeaderSlotContext.Provider, { value: null, children: _jsx("section", { "aria-label": label, style: stickyReset(), 
+            /* Stacked it keeps its own height (the page scrolls); side by side it shares the
+               height and scrolls inside. */
+            className: `flex min-h-0 min-w-0 shrink-0 flex-col @4xl:shrink @4xl:basis-0 @4xl:overflow-y-auto ${BASIS[size]}`, children: children }) }));
+}
+/** The panes, side by side on a desk and stacked when narrow. Fills the height it is given. */
+export function Panes({ children }) {
+    return (_jsx("div", { className: "@container flex h-full min-h-0 min-w-0 flex-1 flex-col", children: _jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col divide-line @4xl:flex-row @4xl:divide-x max-@4xl:divide-y", children: children }) }));
+}

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

@@ -1,2 +1,3 @@
 export { AppFrame } from "./AppFrame.js";
 export { type AppEntry, SystrayButton, TopBar, type TopMenu, } from "./TopBar.js";
+export { Pane, Panes } from "./Panes.js";

package/dist/components/shell/index.js

@@ -1,3 +1,5 @@
 /* EL MARCO DE LA APLICACIÓN — lo que está arriba de toda vista. */
 export { AppFrame } from "./AppFrame.js";
 export { SystrayButton, TopBar, } from "./TopBar.js";
+/* A screen of N sets side by side — the reconciliation: each pane scrolls on its own. */
+export { Pane, Panes } from "./Panes.js";

package/dist/foundations/calendar.d.ts

@@ -1,4 +1,6 @@
-import type { GroupGrain } from "./grouping.js";
+/** El grano de un nivel de fecha. Sin grano, un campo de fecha parte por
+ *  instante y cada fila termina en su propio montón, que es no agrupar. */
+export type GroupGrain = "day" | "week" | "month" | "quarter" | "year";
 /**
  * Una fecha recortada a la CLAVE de su grano.
  *

package/dist/foundations/catalog.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+/** What changes, at any depth. A word is replaced; a section is merged. */
+export type CopyOverride<C> = {
+    [K in keyof C]?: C[K] extends string ? string : C[K] extends readonly unknown[] ? C[K] : C[K] extends object ? CopyOverride<C[K]> : C[K];
+};
+/** `base` with `over` on top: sections merge, everything else is replaced. */
+export declare function mergeCopyOver<C extends object>(base: C, over: CopyOverride<C> | undefined): C;
+export type CopyCatalog<C extends object> = {
+    /** The factory words: what is there before anything is installed. */
+    english: C;
+    /** Sets the session's words — English with `over` on top — and returns them. */
+    install: (over?: CopyOverride<C>) => C;
+    /** The installed words: for what is not a component. */
+    current: () => C;
+    /** English with `over` on top, without installing it. */
+    merge: (over?: CopyOverride<C>) => C;
+    /** Changes the words for its branch, on top of what encloses it. */
+    Provider: (props: {
+        copy?: CopyOverride<C>;
+        children: ReactNode;
+    }) => ReactNode;
+    /** The words of this branch: the nearest `Provider`'s, or the installed ones. */
+    useCopy: () => C;
+};
+export declare function createCopy<C extends object>(english: C): CopyCatalog<C>;
+/** `{name}` → value. A missing key stays visible in the template. */
+export declare function fillCopy(template: string, params: Record<string, string | number>): string;

package/dist/foundations/catalog.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const isSection = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+/** `base` with `over` on top: sections merge, everything else is replaced. */
+export function mergeCopyOver(base, over) {
+    if (over === undefined)
+        return base;
+    const out = { ...base };
+    for (const [key, value] of Object.entries(over)) {
+        if (value === undefined)
+            continue;
+        const under = out[key];
+        out[key] = isSection(under) && isSection(value) ? mergeCopyOver(under, value) : value;
+    }
+    return out;
+}
+export function createCopy(english) {
+    let installed = english;
+    /* `null` and not English: a context keeps the value it was created with, so with the
+       factory words inside it a component without a provider would ignore `install`. */
+    const Context = createContext(null);
+    const current = () => installed;
+    const useCopy = () => useContext(Context) ?? installed;
+    function Provider({ copy, children }) {
+        const enclosing = useCopy();
+        const merged = useMemo(() => mergeCopyOver(enclosing, copy), [enclosing, copy]);
+        return _jsx(Context.Provider, { value: merged, children: children });
+    }
+    return {
+        english,
+        install: (over) => {
+            installed = mergeCopyOver(english, over);
+            return installed;
+        },
+        current,
+        merge: (over) => mergeCopyOver(english, over),
+        Provider,
+        useCopy,
+    };
+}
+/** `{name}` → value. A missing key stays visible in the template. */
+export function fillCopy(template, params) {
+    return template.replace(/\{(\w+)\}/g, (whole, name) => {
+        const value = params[name];
+        return value === undefined ? whole : String(value);
+    });
+}