@sincpro/web-ui 1.2.0 → 1.4.0

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/SearchBar.js

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

package/dist/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);
+    });
+}

package/dist/foundations/copy.d.ts

@@ -1,18 +1,20 @@
-import { type ReactNode } from "react";
+import { type CopyOverride, fillCopy } from "./catalog.js";
+import type { ReactNode } from "react";
 /**
  * Chrome copy for the design system.
  *
  * The handbook rule: code is English; language is chosen at render. This
  * package must not bake product Spanish into buttons. English is the default
- * so a story still reads; the app overlays the session locale via
- * `UiCopyProvider`.
+ * so a story still reads; the app installs the session's language once
+ * (`installCopy(SPANISH_COPY)`), and `UiCopyProvider` changes a branch.
  *
  * Domain sentences (empty catalog, upload hint) stay out — those are the
  * product's catalogs, passed as props.
  *
- * `locale` is also a module store so `formatCount` — called from modules that
- * are not components — tracks the same BCP-47 the provider just set. A React
- * context cannot be read from `shared/format.ts`.
+ * The installed words are also what is not a component reads (`currentCopy`,
+ * `currentCopyLocale`): a sentence built in a function, a month named by the
+ * calendar. A provider does not change those — it is for a branch, not for the
+ * session (see `catalog.tsx`).
  */
 export type UiCopy = {
     /** BCP-47 for `toLocaleString` and `Intl`. */
@@ -68,8 +70,13 @@ export type UiCopy = {
         faces: string;
         /** The mark of a record with changes that are not saved yet. */
         unsaved: string;
+        /** The same mark when the record says how many fields changed. */
+        unsavedOne: string;
+        unsavedMany: string;
         save: string;
         saving: string;
+        /** Said, briefly, once what was saved is saved. */
+        saved: string;
         discard: string;
         /** Read aloud next to a stage that failed: the red fill alone says nothing to a
          *  screen reader. */
@@ -113,6 +120,8 @@ export type UiCopy = {
         unset: string;
         /** A list of checks read with nothing chosen. */
         none: string;
+        /** Next to the label of a field whose value changed and is not saved yet. */
+        changed: string;
     };
     /** The choice controls: combo boxes, selects, suggestion lists. */
     choice: {
@@ -125,6 +134,8 @@ export type UiCopy = {
     };
     search: {
         tools: string;
+        /** The name of the list of what the bar offers for what was typed. */
+        suggestions: string;
         /** The name of the panel button once something is set: it shows the count, and what
          *  the button SHOWS has to be inside its name (WCAG 2.5.3) — `{label}` is `tools`. */
         toolsSetOne: string;
@@ -226,6 +237,8 @@ export type UiCopy = {
         min: string;
         max: string;
         distinct: string;
+        /** Under a pile that holds its first page and counts them all: ask for the rest. */
+        pileMore: string;
     };
     menu: {
         empty: string;
@@ -255,6 +268,8 @@ export type UiCopy = {
          *  record itself. */
         peek: string;
         open: string;
+        /** Asked again while the rows stay: the name of the discreet bar over them. */
+        refreshing: string;
     };
     /** La historia de un registro: eventos y mensajes. */
     /** The panel of everything around a record: its notices, its conversation and its
@@ -365,6 +380,8 @@ export type UiCopy = {
         weekOfYear: string;
         quarter: string;
         quarterOfYear: string;
+        /** The calendar's «go to today» button: its word and its name are the same. */
+        today: string;
     };
     /**
      * CÓMO SE LLAMA UN OPERADOR para quien lo lee.
@@ -503,6 +520,9 @@ export type UiCopy = {
         pilePageNote: string;
         limitPiles: string;
         /** El árbol de condiciones. */
+        /** The names of a rule's two choices — the field it asks about, and how it compares. */
+        ruleField: string;
+        ruleOperator: string;
         noValue: string;
         from: string;
         to: string;
@@ -741,63 +761,21 @@ export type UiCopy = {
     };
 };
 export declare const ENGLISH_COPY: UiCopy;
-/** The merged catalog the formatters read when they are not a component. */
-export declare function currentCopy(): UiCopy;
+/** What changes of web-ui's words, at any depth: `{ search: { joins: { any: "o" } } }`. */
+export type UiCopyOverride = CopyOverride<UiCopy>;
+/** The installed words: for formatters and sentences that are not a component. */
+export declare const currentCopy: () => UiCopy;
 /** BCP-47 the formatters read when they are not a component. */
 export declare function currentCopyLocale(): string;
-export type UiCopyOverride = {
-    locale?: string;
-    present?: Partial<UiCopy["present"]>;
-    frame?: Partial<UiCopy["frame"]>;
-    selection?: Partial<UiCopy["selection"]>;
-    pager?: Partial<UiCopy["pager"]>;
-    record?: Partial<UiCopy["record"]>;
-    shell?: Partial<UiCopy["shell"]>;
-    field?: Partial<UiCopy["field"]>;
-    choice?: Partial<UiCopy["choice"]>;
-    search?: Partial<UiCopy["search"]>;
-    failed?: Partial<UiCopy["failed"]>;
-    table?: Partial<UiCopy["table"]>;
-    menu?: Partial<UiCopy["menu"]>;
-    list?: Partial<UiCopy["list"]>;
-    grouping?: Partial<UiCopy["grouping"]>;
-    dates?: Partial<UiCopy["dates"]>;
-    calendar?: Partial<UiCopy["calendar"]>;
-    ops?: Record<string, string>;
-    sorting?: Partial<UiCopy["sorting"]>;
-    copyable?: Partial<UiCopy["copyable"]>;
-    activity?: Partial<UiCopy["activity"]>;
-    editable?: Partial<UiCopy["editable"]>;
-    picker?: Partial<UiCopy["picker"]>;
-    cell?: Partial<UiCopy["cell"]>;
-    time?: Partial<UiCopy["time"]>;
-    dialog?: Partial<UiCopy["dialog"]>;
-    report?: Partial<UiCopy["report"]>;
-    builder?: Partial<UiCopy["builder"]>;
-    pivot?: Partial<UiCopy["pivot"]>;
-    person?: Partial<UiCopy["person"]>;
-    lines?: Partial<UiCopy["lines"]>;
-    lineItems?: Partial<UiCopy["lineItems"]>;
-    priority?: Partial<UiCopy["priority"]>;
-    board?: Partial<UiCopy["board"]>;
-    kanbanState?: Partial<UiCopy["kanbanState"]>;
-    timeline?: Partial<UiCopy["timeline"]>;
-    activityState?: Partial<UiCopy["activityState"]>;
-    relation?: Partial<UiCopy["relation"]>;
-    relationCard?: Partial<UiCopy["relationCard"]>;
-    totals?: Partial<UiCopy["totals"]>;
-    inlineEdit?: Partial<UiCopy["inlineEdit"]>;
-    theme?: Partial<UiCopy["theme"]>;
-    tree?: Partial<UiCopy["tree"]>;
-    assist?: Partial<UiCopy["assist"]>;
-};
-export declare function mergeCopy(over?: UiCopyOverride): UiCopy;
-/** For tests and non-React callers that need a locale before a provider mounts. */
-export declare function installCopy(over?: UiCopyOverride): UiCopy;
-export declare function UiCopyProvider({ copy, children, }: {
+/** English with `over` on top, without installing it. */
+export declare const mergeCopy: (over?: UiCopyOverride) => UiCopy;
+/** Sets the session's words: once, before the first draw — and the one global there is. */
+export declare const installCopy: (over?: UiCopyOverride) => UiCopy;
+/** Changes the words for its branch, on top of what encloses it. It never writes the
+ *  global: a corner in another language does not change the rest of the screen. */
+export declare const UiCopyProvider: (props: {
     copy?: UiCopyOverride;
     children: ReactNode;
-}): import("react").JSX.Element;
-export declare function useUiCopy(): UiCopy;
-/** `{name}` → value. A missing key stays visible in the template. */
-export declare function fillCopy(template: string, params: Record<string, string | number>): string;
+}) => ReactNode;
+export declare const useUiCopy: () => UiCopy;
+export { fillCopy };

package/dist/foundations/copy.es.js

@@ -72,8 +72,11 @@ export const SPANISH_COPY = {
         status: "Estado",
         faces: "Caras",
         unsaved: "sin guardar",
+        unsavedOne: "1 cambio sin guardar",
+        unsavedMany: "{count} cambios sin guardar",
         save: "Guardar",
         saving: "Guardando…",
+        saved: "Guardado",
         discard: "Descartar",
         failed: "falló",
         notices: "Avisos sobre este registro",
@@ -106,6 +109,7 @@ export const SPANISH_COPY = {
         help: "Ayuda",
         unset: "sin definir",
         none: "Ninguna",
+        changed: "modificado",
     },
     choice: {
         noResults: "Sin resultados",
@@ -127,6 +131,7 @@ export const SPANISH_COPY = {
     },
     search: {
         tools: "Filtrar, agrupar y favoritos",
+        suggestions: "Sugerencias",
         toolsSetOne: "{label}, {count} puesto",
         toolsSetMany: "{label}, {count} puestos",
         editChip: "Clic para editar",
@@ -199,6 +204,7 @@ export const SPANISH_COPY = {
         min: "mín {value}",
         max: "máx {value}",
         distinct: "{value} distintos",
+        pileMore: "Ver {count} más",
     },
     menu: { empty: "Nada coincide." },
     list: {
@@ -208,6 +214,7 @@ export const SPANISH_COPY = {
         count: "{count} registros",
         peek: "Vista previa",
         open: "Abrir",
+        refreshing: "Actualizando la lista…",
     },
     activity: {
         bySystem: "el sistema",
@@ -264,6 +271,7 @@ export const SPANISH_COPY = {
         weekOfYear: "Semana {n} de {year}",
         quarter: "T{n}",
         quarterOfYear: "T{n} de {year}",
+        today: "Hoy",
     },
     grouping: {
         label: "Agrupar por",
@@ -346,6 +354,8 @@ export const SPANISH_COPY = {
         pilesNote: "Sobre lo que plegaron —los totales de arriba, y «count»— no sobre las filas: eso es el filtro de más arriba.",
         pilePageNote: "Sólo el primer nivel: pedida una página, los niveles más profundos sólo contestan por los montones que sobrevivieron.",
         limitPiles: "Limitar cuántos montones vuelven",
+        ruleField: "Campo",
+        ruleOperator: "Comparación",
         noValue: "sin valor",
         from: "desde…",
         to: "hasta…",