@sincpro/web-ui 0.2.0 → 1.0.0

package/dist/components/record/RecordAudit.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+/**
+ * The last line of the paper: who created the record and who touched it last.
+ *
+ * Context: «¿quién cambió esto?» is the first question in front of a number that looks wrong,
+ * and the activity's timeline answers it only for what was logged. Small and at the end: it is
+ * consulted, not read.
+ */
+export function RecordAudit({ created, updated, }) {
+    const copy = useUiCopy();
+    const stamp = (template, one) => {
+        const [before, middle, after] = splitStamp(template);
+        return (_jsxs("span", { children: [before, _jsx("span", { className: "text-ink", children: one.by }), middle, _jsx("span", { className: "tabular-nums", children: one.at }), after] }));
+    };
+    if (created === undefined && updated === undefined)
+        return null;
+    return (_jsxs("p", { className: "flex flex-wrap gap-x-4 gap-y-1 border-t border-line px-4 py-2.5 text-micro text-muted", children: [created === undefined ? null : stamp(copy.record.created, created), updated === undefined ? null : stamp(copy.record.updated, updated)] }));
+}
+/** «Creado por {by} · {at}» cut around its two holes, so `by` and `at` can be nodes. */
+function splitStamp(template) {
+    const marked = fillCopy(template, { by: "\u0000", at: "\u0001" });
+    const [before = "", rest = ""] = marked.split("\u0000");
+    const [middle = "", after = ""] = rest.split("\u0001");
+    return [before, middle, after];
+}

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

@@ -4,7 +4,7 @@ import type { Surface, Tone } from "../../foundations/types.js";
 import type { LucideIcon } from "lucide-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, blocking, indicator, children, }: {
+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[];
     pager?: ReactNode;
     /** The action buttons. At most three visible + a `Menu` with `iconOnly`, and
@@ -28,6 +28,12 @@ export declare function RecordHeader({ crumbs, pager, actions, status, kicker, i
      * itself out breaks the next time someone wraps the panel in something else.
      */
     activityLayout?: "auto" | "below";
+    /** How wide the page column gets. `reading` (the default) stops the sheet at
+     *  `--container-sheet`, centred, and lines the rail up with it; `full` takes the whole page
+     *  — a record whose body is a wide table. */
+    width?: "reading" | "full";
+    /** The band across the paper's corner (`RecordRibbon`): what the record IS now. */
+    ribbon?: ReactNode;
     /** `StatusBar` (where is it at?), the activity's `Timeline` (what happened to get
      *  here?), or both: they are different questions and many records only have one. */
     status?: ReactNode;

package/dist/components/record/RecordHeader.js

@@ -7,7 +7,7 @@ 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";
-export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface = "canvas", smart, aspects, dirty, activity, activityLayout = "auto", blocking, indicator, children, }) {
+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 ||
         pager !== undefined ||
@@ -46,6 +46,14 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
             pager !== undefined ||
             actions !== undefined ||
             dirty !== 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. */
+    const column = width === "full"
+        ? ""
+        : beside
+            ? "mx-auto w-full max-w-(--container-record)"
+            : "mx-auto w-full max-w-(--container-sheet)";
     const identity = (_jsxs("div", { className: `flex flex-col ${byDensity(d, "gap-2.5 px-4 pt-3.5", "gap-2 px-0 pt-0")}`, children: [withRail || (smart === undefined && indicator === undefined) ? null : (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [smart, indicator] })), _jsxs("div", { className: "flex min-w-0 flex-wrap items-start gap-x-5 gap-y-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2.5", children: [Icon === undefined || d === "compact" ? null : (_jsx("span", { className: "mt-1 flex size-9 shrink-0 items-center justify-center rounded-box bg-ink/5 text-muted", children: _jsx(Icon, { className: "size-(--size-icon-lg)", strokeWidth: 1.75 }) })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [kicker === undefined || !withIdentity ? null : (_jsx("span", { className: "text-micro font-medium text-muted", children: kicker })), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1", children: [!withIdentity ? null : (
                                             /* `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
@@ -54,18 +62,20 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
             /* 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 }))] }));
-    return (_jsxs(_Fragment, { children: [withRail ? (_jsx(SurfaceProvider, { value: railSurface, children: _jsx("div", { className: "@container/record", children: _jsxs("div", { className: `flex flex-col gap-2 px-3.5 py-2.5 ${railSurface === "chrome" ? "bg-chrome" : "border-b border-line bg-surface"}`, children: [_jsx(Line, { start: crumbs === undefined || crumbs.length === 0 ? null : (_jsx(Breadcrumb, { crumbs: crumbs, surface: railSurface })), center: 
-                                /* The notices' indicator rides with the counters: both are about the
-                                   record and both open something; neither is my position in front of
-                                   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 : (
-                            /* 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 ? (
+    return (_jsxs(_Fragment, { children: [withRail ? (_jsx(SurfaceProvider, { value: railSurface, children: _jsx("div", { className: "@container/record", children: _jsx("div", { className: `px-3 py-2.5 ${railSurface === "chrome" ? "bg-chrome" : "border-b border-line bg-surface"}`, children: _jsxs("div", { className: `flex flex-col gap-2 ${paper ? column : ""}`, children: [_jsx(Line, { start: crumbs === undefined || crumbs.length === 0 ? null : (_jsx(Breadcrumb, { crumbs: crumbs, surface: railSurface })), center: 
+                                    /* The notices' indicator rides with the counters: both are about the
+                                     record and both open something; neither is my position in front of
+                                     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 : (
+                                /* 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 ? (
             /* ==================================================================== *
              *  THE PAGE — [sheet | Actividad], on the ground.
              *
@@ -92,13 +102,15 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
              *  a scroll container and the line table header would stick inside it, not under
              *  the application bar.
              * ==================================================================== */
-            _jsx("div", { className: "bg-ground px-3 pt-3 pb-3", children: _jsx("div", { className: "@container/page", children: _jsxs("div", { className: `mx-auto flex min-w-0 flex-col gap-3 ${beside
-                            ? "max-w-(--container-record) @beside/page:flex-row @beside/page:items-stretch @beside/page:justify-center @beside/page:gap-0"
-                            : "max-w-(--container-sheet)"}`, children: [_jsxs("div", { className: `flex min-w-0 flex-1 flex-col gap-3 ${beside ? "mx-auto w-full max-w-(--container-sheet) @beside/page:mx-0" : ""}`, children: [blocking, _jsxs("div", { className: `flex min-w-0 flex-col overflow-clip rounded-box border border-line bg-surface ${beside ? "@beside/page:rounded-r-none" : ""}`, children: [identity, children] }), activity !== undefined && activityLayout === "below" ? activity : null] }), beside ? (
+            _jsx("div", { className: "bg-ground px-3 pt-3 pb-3", children: _jsx("div", { className: "@container/page", children: _jsxs("div", { className: `flex min-w-0 flex-col gap-3 ${column} ${beside
+                            ? "@beside/page:flex-row @beside/page:items-stretch @beside/page:justify-center @beside/page:gap-0"
+                            : ""}`, children: [_jsxs("div", { className: `flex min-w-0 flex-1 flex-col gap-3 ${beside && width === "reading"
+                                    ? "mx-auto w-full max-w-(--container-sheet) @beside/page:mx-0"
+                                    : ""}`, children: [blocking, _jsxs("div", { className: `relative flex min-w-0 flex-col overflow-clip rounded-box border border-line bg-surface ${beside ? "@beside/page:rounded-r-none" : ""}`, children: [ribbon, identity, children] }), activity !== undefined && activityLayout === "below" ? activity : null] }), beside ? (
                             /* After the sheet: the record first, what is around it second — in the
                                reading order and on screen. */
                             _jsx("div", { className: "mx-auto w-full max-w-(--container-sheet) min-w-0 @beside/page:mx-0 @beside/page:flex @beside/page:w-auto @beside/page:max-w-none @beside/page:shrink-0", children: activity })) : null] }) }) })) : (
-            /* No paper (a dialog, a drawer, a `Drill` context): one surface, no ground beside
+            /* No paper (a modal, a drawer): one surface, no ground beside
                it — the band first, the record, and the activity below. */
-            _jsxs("div", { className: "flex min-w-0 flex-1 flex-col bg-surface", children: [blocking === undefined ? null : (_jsx("div", { className: byDensity(d, "px-4 pt-3.5", "pb-2"), children: blocking })), identity, children, activity === undefined ? null : (_jsx("div", { className: byDensity(d, "px-4 pb-4", "pb-2"), children: activity }))] })), thumb === null ? null : _jsx(ThumbBar, { mode: thumb, dirty: dirty, primaries: primaries })] }));
+            _jsxs("div", { className: "relative flex min-w-0 flex-1 flex-col overflow-clip bg-surface", children: [ribbon, blocking === undefined ? null : (_jsx("div", { className: byDensity(d, "px-4 pt-3.5", "pb-2"), children: blocking })), identity, children, activity === undefined ? null : (_jsx("div", { className: byDensity(d, "px-4 pb-4", "pb-2"), children: activity }))] })), thumb === null ? null : _jsx(ThumbBar, { mode: thumb, dirty: dirty, primaries: primaries })] }));
 }

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

@@ -0,0 +1,13 @@
+import type { Tone } from "../../foundations/types.js";
+/**
+ * The band across the paper's corner: «PAGADA», «ARCHIVADA», «CANCELADA».
+ *
+ * Context: a state that changes what the record IS — not where it is in its flow, which the
+ * status bar says — has to be seen before any field is read: an archived customer looks
+ * exactly like an active one otherwise. Odoo's `web_ribbon`. It is a word, never colour
+ * alone, and it is `role="status"` so it is also heard. The paper clips it.
+ */
+export declare function RecordRibbon({ label, tone }: {
+    label: string;
+    tone?: Tone;
+}): import("react").JSX.Element;

package/dist/components/record/RecordRibbon.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* The solid ribbon per tone. The text is the surface colour: on the light theme white on the
+   tone (≥ 5.7:1 for all five), on the dark one the dark surface on the lighter tone. */
+const RIBBON = {
+    neutral: "bg-muted text-surface",
+    info: "bg-info text-surface",
+    good: "bg-good text-surface",
+    warn: "bg-warn text-surface",
+    bad: "bg-bad text-surface",
+    accent: "bg-accent text-on-accent",
+};
+/**
+ * The band across the paper's corner: «PAGADA», «ARCHIVADA», «CANCELADA».
+ *
+ * Context: a state that changes what the record IS — not where it is in its flow, which the
+ * status bar says — has to be seen before any field is read: an archived customer looks
+ * exactly like an active one otherwise. Odoo's `web_ribbon`. It is a word, never colour
+ * alone, and it is `role="status"` so it is also heard. The paper clips it.
+ */
+export function RecordRibbon({ label, tone = "neutral" }) {
+    return (_jsx("span", { role: "status", className: `pointer-events-none absolute top-5 -right-12 z-10 w-44 rotate-45 py-1 text-center text-micro font-semibold tracking-wide uppercase shadow-float ${RIBBON[tone]}`, children: label }));
+}

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

@@ -1,6 +1,8 @@
 export { Breadcrumb, type Crumb } from "./Breadcrumb.js";
 export { DirtyActions, type DirtyState, } from "./DirtyActions.js";
 export { Pager } from "./Pager.js";
+export { RecordAudit, type RecordStamp } from "./RecordAudit.js";
+export { RecordRibbon } from "./RecordRibbon.js";
 export { RecordSkeleton } from "./RecordSkeleton.js";
 export { SmartButton, SmartButtons } from "./SmartButtons.js";
 export { type Stage, StatusBar } from "./StatusBar.js";

package/dist/components/record/index.js

@@ -3,6 +3,8 @@
 export { Breadcrumb } from "./Breadcrumb.js";
 export { DirtyActions, } from "./DirtyActions.js";
 export { Pager } from "./Pager.js";
+export { RecordAudit } from "./RecordAudit.js";
+export { RecordRibbon } from "./RecordRibbon.js";
 export { RecordSkeleton } from "./RecordSkeleton.js";
 export { SmartButton, SmartButtons } from "./SmartButtons.js";
 export { StatusBar } from "./StatusBar.js";

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

@@ -9,6 +9,8 @@ export type CriteriaChipsProps = {
     onJoin?: (path: CriteriaPath, join: CriteriaJoin) => void;
     /** Sacar una instancia, o una rama entera. */
     onRemove?: (path: CriteriaPath) => void;
+    /** Sacar varias de una vez: the × of the grouping chain drops every level. */
+    onRemoveMany?: (paths: readonly CriteriaPath[]) => void;
     /**
      * Cuál nodo está ABIERTO: dónde va a caer lo próximo que se escriba.
      *
@@ -17,6 +19,9 @@ export type CriteriaChipsProps = {
      * único que sabía dónde era el que la escribió.
      */
     open?: CriteriaPath;
+    /** How many facets show before the rest fold into «+N» (the grouping chain counts as one).
+     *  Below `@md` of the bar only the first one shows. `Infinity` never folds. */
+    collapseAfter?: number;
     surface?: Surface;
 };
-export declare function CriteriaChips({ criteria, onOpen, onJoin, onRemove, open, surface, }: CriteriaChipsProps): import("react").JSX.Element;
+export declare function CriteriaChips({ criteria, onOpen, onJoin, onRemove, onRemoveMany, open, collapseAfter, surface, }: CriteriaChipsProps): import("react").JSX.Element;

package/dist/components/search/CriteriaChips.js

@@ -1,13 +1,15 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { filtersOf, groupsOf, } from "./criteria.js";
 import { JoinWord } from "./JoinWord.js";
-import { useUiCopy } from "../../foundations/copy.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
-import { ChevronRight, Layers, ListFilter, X } from "lucide-react";
-export function CriteriaChips({ criteria, onOpen, onJoin, onRemove, open, surface, }) {
+import { ChevronRight, Layers, X } from "lucide-react";
+import { Fragment, useState } from "react";
+export function CriteriaChips({ criteria, onOpen, onJoin, onRemove, onRemoveMany, open, collapseAfter = 4, surface, }) {
     const sup = useSurface(surface);
     const copy = useUiCopy();
+    const [expanded, setExpanded] = useState(false);
     const groups = groupsOf(criteria);
     const filters = filtersOf(criteria);
     /* La ruta se cuenta sobre la lista ENTERA y no sobre la mitad dibujada: es la
@@ -16,7 +18,65 @@ export function CriteriaChips({ criteria, onOpen, onJoin, onRemove, open, surfac
     const pathOf = (one) => [
         criteria.findIndex((each) => each.id === one.id),
     ];
-    return (_jsxs(_Fragment, { children: [groups.length === 0 ? null : (_jsx(Zone, { lead: copy.search.groupedBy, icon: Layers, surface: sup, children: groups.map((one, at) => (_jsxs("span", { className: "flex min-w-0 items-center gap-1", children: [at === 0 ? null : (_jsx(ChevronRight, { className: "size-3 shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true })), _jsx(Chip, { label: one.label, path: pathOf(one), ...(onOpen === undefined ? {} : { onOpen }), ...(onRemove === undefined ? {} : { onRemove }), surface: sup })] }, one.id))) })), filters.length === 0 ? null : (_jsx(Zone, { lead: copy.search.narrowedBy, icon: ListFilter, surface: sup, children: filters.map((one) => (_jsx(Node, { node: one, path: pathOf(one), ...(onOpen === undefined ? {} : { onOpen }), ...(onJoin === undefined ? {} : { onJoin }), ...(onRemove === undefined ? {} : { onRemove }), ...(open === undefined ? {} : { open }), surface: sup }, one.id))) }))] }));
+    const facets = [
+        ...(groups.length === 0
+            ? []
+            : [
+                {
+                    key: "grouping",
+                    label: `${copy.search.groupedBy} ${groups.map((one) => one.label).join(" › ")}`,
+                    node: (_jsx(GroupChain, { groups: groups.map((one) => ({ label: one.label, path: pathOf(one) })), ...(onOpen === undefined ? {} : { onOpen }), ...(onRemoveMany === undefined ? {} : { onRemoveMany }), surface: sup })),
+                },
+            ]),
+        ...filters.map((one) => ({
+            key: one.id,
+            label: labelOf(one, copy.search.joins),
+            node: (_jsx(Node, { node: one, path: pathOf(one), ...(onOpen === undefined ? {} : { onOpen }), ...(onJoin === undefined ? {} : { onJoin }), ...(onRemove === undefined ? {} : { onRemove }), ...(open === undefined ? {} : { open }), surface: sup })),
+        })),
+    ];
+    /* Folding hides, it does not remove: the open node is where the next one lands, so while
+       there is one everything shows. */
+    const unfolded = expanded || open !== undefined || !Number.isFinite(collapseAfter);
+    const beyondWide = Math.max(0, facets.length - collapseAfter);
+    const beyondNarrow = Math.max(0, facets.length - 1);
+    const more = (count, hidden, className) => (_jsx("button", { type: "button", onClick: () => setExpanded(true), title: hidden, "aria-label": `${fillCopy(copy.search.moreFacets, { count })}: ${hidden}`, className: `${className} shrink-0 items-center rounded-pill border px-2 py-0.5 text-micro font-medium tabular-nums transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${bySurface(sup, "border-line-strong text-muted hover:bg-ink/5 hover:text-ink", "border-chrome-ink/30 text-chrome-muted hover:bg-chrome-ink/10 hover:text-chrome-ink")}`, children: fillCopy(copy.search.moreFacets, { count }) }));
+    const hiddenFrom = (from) => facets
+        .slice(from)
+        .map((one) => one.label)
+        .join(" · ");
+    const drawn = (facet, index) => (_jsx("span", { className: `min-w-0 max-w-full ${unfolded
+            ? "inline-flex"
+            : index >= collapseAfter
+                ? "hidden"
+                : index >= 1
+                    ? "inline-flex @max-md/bar:hidden"
+                    : "inline-flex"}`, children: facet.node }, facet.key));
+    const offset = groups.length === 0 ? 0 : 1;
+    return (_jsxs(_Fragment, { children: [offset === 0 ? null : drawn(facets[0], 0), filters.length === 0 ? null : (_jsx("span", { role: "group", "aria-label": copy.search.narrowedBy, className: "contents", children: facets.slice(offset).map((facet, at) => drawn(facet, at + offset)) })), unfolded ? (expanded && facets.length > 1 ? (_jsx("button", { type: "button", onClick: () => setExpanded(false), className: `shrink-0 rounded-control px-1 text-micro underline decoration-dotted underline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${bySurface(sup, "text-muted hover:text-ink", "text-chrome-muted hover:text-chrome-ink")}`, children: copy.search.fewerFacets })) : null) : (_jsxs(_Fragment, { children: [beyondWide === 0
+                        ? null
+                        : more(beyondWide, hiddenFrom(collapseAfter), "inline-flex @max-md/bar:hidden"), beyondNarrow === 0
+                        ? null
+                        : more(beyondNarrow, hiddenFrom(1), "hidden @max-md/bar:inline-flex")] }))] }));
+}
+/** How a facet reads when it is folded away: in the «+N» title and for a screen reader. */
+function labelOf(node, joins) {
+    if (node.kind !== "join")
+        return node.label;
+    const word = joins[node.join === "not" ? "none" : node.join];
+    return `${word} (${node.of.map((child) => labelOf(child, joins)).join(", ")})`;
+}
+/**
+ * THE GROUPING, as ONE chip: «⧉ vendedor › trimestre › mes ×».
+ *
+ * Context: N chips with N crosses read as N filters, and the levels are not N things — they
+ * are one shape, nested in order. Neutral and not gold: the grouping changes how the rows
+ * are laid out, not which rows there are, and it must not read as one more filter. Each level
+ * still opens the builder on itself; the × drops the whole chain.
+ */
+function GroupChain({ groups, onOpen, onRemoveMany, surface, }) {
+    const copy = useUiCopy();
+    const chain = groups.map((one) => one.label).join(" › ");
+    return (_jsxs("span", { role: "group", "aria-label": `${copy.search.groupedBy} ${chain}`, title: `${copy.search.groupedBy} ${chain}`, className: `inline-flex min-w-0 max-w-(--container-chain) items-center gap-1 rounded-pill border py-0.5 pl-1.5 text-micro ${bySurface(surface, "border-line-strong bg-surface text-ink", "border-chrome-ink/30 bg-chrome-ink/8 text-chrome-ink")} ${onRemoveMany === undefined ? "pr-2" : "pr-0.5"}`, children: [_jsx(Layers, { className: `size-3 shrink-0 ${bySurface(surface, "text-muted", "text-chrome-muted")}`, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "min-w-0 truncate", children: groups.map((one, at) => (_jsxs(Fragment, { children: [at === 0 ? null : (_jsx(ChevronRight, { className: `mx-0.5 inline size-3 align-middle ${bySurface(surface, "text-muted", "text-chrome-muted")}`, strokeWidth: 2, "aria-hidden": true })), onOpen === undefined ? (_jsx("span", { children: one.label })) : (_jsx("button", { type: "button", onClick: () => onOpen(one.path), title: copy.search.openBuilderHere, className: "inline rounded-control hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: one.label }))] }, one.path.join(".")))) }), onRemoveMany === undefined ? null : (_jsx("button", { type: "button", onClick: () => onRemoveMany(groups.map((one) => one.path)), "aria-label": copy.search.removeGrouping, title: copy.search.removeGrouping, className: `inline-flex size-4 shrink-0 items-center justify-center rounded-pill transition-colors duration-(--duration-instant) ${bySurface(surface, "hover:bg-ink/10", "hover:bg-chrome-ink/20")}`, children: _jsx(X, { className: "size-3", strokeWidth: 2.5 }) }))] }));
 }
 function Node({ node, path, onOpen, onJoin, onRemove, open, surface, }) {
     const copy = useUiCopy();
@@ -35,14 +95,9 @@ function Node({ node, path, onOpen, onJoin, onRemove, open, surface, }) {
                lee como un error. Dice que está esperando. */
             _jsx("span", { className: `shrink-0 text-micro italic ${bySurface(surface, "text-muted", "text-chrome-muted")}`, children: copy.search.landsHere })) : null, node.of.map((child, at) => (_jsx(Node, { node: child, path: [...path, at], ...(onOpen === undefined ? {} : { onOpen }), ...(onJoin === undefined ? {} : { onJoin }), ...(onRemove === undefined ? {} : { onRemove }), ...(open === undefined ? {} : { open }), surface: surface }, child.id)))] }));
 }
-/** El contexto, con su palabra adelante. Sin la palabra, las fichas no dicen de
- *  qué son. No lleva caja: una caja adentro del campo las separa de él. */
-function Zone({ lead, icon: Icon, surface, children, }) {
-    return (_jsxs("span", { className: "inline-flex min-w-0 shrink items-center gap-1", children: [_jsx(Icon, { className: `size-3 shrink-0 ${bySurface(surface, "text-muted", "text-chrome-muted")}`, strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: `shrink-0 text-micro ${bySurface(surface, "text-muted", "text-chrome-muted")}`, children: lead }), _jsx("span", { className: "flex min-w-0 flex-wrap items-center gap-1", children: children })] }));
-}
 function Chip({ label, path, onOpen, onRemove, surface, }) {
     const copy = useUiCopy();
-    const shell = `inline-flex min-w-0 shrink-0 items-center gap-1 rounded-pill border py-0.5 text-micro ${bySurface(surface, "border-accent/40 bg-accent/18 text-ink", "border-chrome-link/35 bg-chrome-link/18 text-chrome-link")} ${onRemove === undefined ? "px-2" : "pr-0.5 pl-2"}`;
+    const shell = `inline-flex min-w-0 max-w-(--container-facet) items-center gap-1 rounded-pill border py-0.5 text-micro ${bySurface(surface, "border-accent/40 bg-accent/18 text-ink", "border-chrome-link/35 bg-chrome-link/18 text-chrome-link")} ${onRemove === undefined ? "px-2" : "pr-0.5 pl-2"}`;
     const remove = onRemove === undefined ? null : (_jsx("button", { type: "button", onClick: (event) => {
             /* Sin esto, sacarla también la abre: el click llega acá y después
                sube. */
@@ -52,13 +107,9 @@ function Chip({ label, path, onOpen, onRemove, surface, }) {
     if (onOpen === undefined) {
         return (_jsxs("span", { className: shell, children: [_jsx("span", { className: "min-w-0 truncate", children: label }), remove] }));
     }
-    /* Un botón adentro de otro es HTML inválido —el navegador cierra el de afuera
-       antes de tiempo y el click deja de llegar—, así que la ficha que se abre Y se
-       saca es un `span` con `role`, y la × adentro es el único botón de verdad. */
-    return (_jsxs("span", { role: "button", tabIndex: 0, onClick: () => onOpen(path), onKeyDown: (event) => {
-            if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                onOpen(path);
-            }
-        }, title: copy.search.openBuilderHere, className: `${shell} cursor-pointer`, children: [_jsx("span", { className: "min-w-0 truncate", children: label }), remove] }));
+    /* Two SIBLING buttons in the chip — open and remove — and never one inside the other. It
+       used to be a `span role="button"` holding the × button: an interactive control inside
+       another one, which a screen reader announces as one thing and axe flags
+       (`nested-interactive`). Siblings, each with its own name, are both reachable. */
+    return (_jsxs("span", { className: shell, children: [_jsx("button", { type: "button", onClick: () => onOpen(path), title: copy.search.openBuilderHere, className: "min-w-0 truncate rounded-control text-left hover:underline hover:underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary", children: label }), remove] }));
 }

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

@@ -72,7 +72,10 @@ export type SearchBarProps = {
     onOpenBuilder?: (path?: CriteriaPath) => void;
     /** Lo que va pegado al campo, a su derecha. */
     trailing?: ReactNode;
+    /** How many facets the bar shows before folding the rest into «+N»; the grouping chain
+     *  counts as one. On a narrow bar only the first shows. `Infinity` never folds. */
+    collapseAfter?: number;
     /** Por default la hereda de la superficie que la envuelve. */
     surface?: Surface;
 };
-export declare function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, surface, }: SearchBarProps): import("react").JSX.Element;
+export declare function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, collapseAfter, surface, }: SearchBarProps): import("react").JSX.Element;

package/dist/components/search/SearchBar.js

@@ -6,7 +6,7 @@ import { describeCondition, opLabel, queryFields, readTyped, suggest, withoutVal
 import { useUiCopy } from "../../foundations/copy.js";
 import { bySurface, useSurface } from "../../foundations/surface.js";
 import { Tags } from "../../primitives/tag/Tags.js";
-import { ChevronRight, CornerDownRight, ListFilter, Search, SlidersHorizontal, } from "lucide-react";
+import { ChevronRight, CornerDownRight, ListFilter, Search, SlidersHorizontal, X, } from "lucide-react";
 import { Fragment, useEffect, useId, useRef, useState } from "react";
 function Option({ o, onSelect }) {
     const Icon = o.icon;
@@ -28,7 +28,7 @@ function Group({ group, first, onSelect, }) {
                     ? "flex flex-col gap-0.5 pl-(--spacing-indent)"
                     : "flex flex-col gap-0.5", children: options }))] }));
 }
-export function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, surface, }) {
+export function SearchBar({ facets, model, criteria, onCriteriaChange, placeholder, filters, grouping, onOpenGroup, favorites, onFilterSelect, onFavoriteSelect, onOpenBuilder, trailing, collapseAfter, surface, }) {
     const copy = useUiCopy();
     const sup = useSurface(surface);
     const [text, setText] = useState("");
@@ -207,14 +207,18 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
             ? one
             : { ...node, of: [...node.of, one] };
     }
-    return (_jsxs("div", { ref: box, className: "relative flex min-w-0 items-center gap-2", children: [_jsxs("div", { className: `flex min-h-(--size-control-md) w-full min-w-0 items-stretch rounded-box border transition-colors duration-(--duration-instant) ${bySurface(sup, "border-line-strong bg-surface focus-within:border-primary/60", 
+    return (_jsxs("div", { ref: box, className: "relative flex min-w-0 items-center gap-2", children: [_jsxs("div", { className: `@container/bar flex min-h-(--size-control-md) w-full min-w-0 items-start rounded-box border transition-colors duration-(--duration-instant) ${bySurface(sup, "border-line-strong bg-surface focus-within:border-primary/60", 
                 /* Sobre el cromo lo que define al campo es el BORDE, no el relleno. El
                    azul ya es casi negro, así que hundirlo no da contraste (1,05:1) y
                    levantarlo da 1,21:1 — en los dos casos el campo no se lee como un
                    campo, que era «no llama la atención». La tinta al 45 % es el primer
                    borde que pasa 3:1 contra el relleno Y contra el cromo, que es lo que
                    1.4.11 le pide a un control. */
-                "border-chrome-ink/45 bg-chrome-ink/8 focus-within:border-chrome-link")}`, children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5 py-1 pl-2.5", children: [_jsx(Search, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true }), _jsx(CriteriaChips, { criteria: criteria, surface: sup, ...(openGroup === null ? {} : { open: openGroup }), ...(onOpenBuilder === undefined ? {} : { onOpen: onOpenBuilder }), onJoin: (path, join) => {
+                "border-chrome-ink/45 bg-chrome-ink/8 focus-within:border-chrome-link")}`, children: [_jsx("span", { className: "mt-0.75 flex h-7 shrink-0 items-center pr-1.5 pl-2.5", children: _jsx(Search, { className: "size-(--size-icon-md) shrink-0 text-muted", strokeWidth: 2, "aria-hidden": true }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.75", children: [_jsx(CriteriaChips, { criteria: criteria, surface: sup, ...(openGroup === null ? {} : { open: openGroup }), ...(onOpenBuilder === undefined ? {} : { onOpen: onOpenBuilder }), ...(collapseAfter === undefined ? {} : { collapseAfter }), onRemoveMany: (paths) => {
+                                    /* From the deepest index up, so each removal leaves the next path valid. */
+                                    const sorted = [...paths].sort((a, b) => (b[0] ?? 0) - (a[0] ?? 0));
+                                    onCriteriaChange(sorted.reduce((left, path) => removeAt(left, path), [...criteria]));
+                                }, onJoin: (path, join) => {
                                     const node = at(criteria, path);
                                     if (node?.kind !== "join")
                                         return;
@@ -276,7 +280,7 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                                 removeLabel: copy.search.dropOp,
                                             },
                                         ]),
-                                ] }), _jsx("input", { ref: input, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                                ] }), _jsx("input", { ref: input, "aria-label": copy.choice.search, 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
@@ -362,8 +366,12 @@ export function SearchBar({ facets, model, criteria, onCriteriaChange, placehold
                                    crezca con lo escrito en vez de reservar una banda vacía. Donde no
                                    esté, el input se estira como siempre. */
                                 style: step.field === undefined ? undefined : { fieldSizing: "content" }, className: step.field === undefined
-                                    ? `min-w-24 flex-1 bg-transparent text-meta outline-none ${bySurface(sup, "text-ink placeholder:text-muted", "text-chrome-ink placeholder:text-chrome-muted")}`
-                                    : `min-w-16 rounded-pill px-2 py-0.5 text-micro outline-none ${bySurface(sup, "bg-accent/18 text-ink placeholder:text-muted", "bg-chrome-link/20 text-chrome-ink placeholder:text-chrome-muted")}` })] }), columns.length === 0 && onOpenBuilder === undefined ? null : (_jsxs("button", { type: "button", onClick: () => setPanel((v) => !v), "aria-expanded": panel, "aria-controls": panel ? id : undefined, title: copy.search.tools, className: `my-0.5 mr-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center gap-1 self-center rounded-control border px-2 text-micro transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${puestos > 0 || panel
+                                    ? `h-7 ${criteria.length === 0 ? "min-w-24" : "min-w-16"} flex-1 bg-transparent text-meta outline-none ${bySurface(sup, "text-ink placeholder:text-muted", "text-chrome-ink placeholder:text-chrome-muted")}`
+                                    : `min-w-16 rounded-pill px-2 py-0.5 text-micro outline-none ${bySurface(sup, "bg-accent/18 text-ink placeholder:text-muted", "bg-chrome-link/20 text-chrome-ink placeholder:text-chrome-muted")}` })] }), puestos === 0 ? null : (_jsx("button", { type: "button", onClick: () => {
+                            onCriteriaChange([]);
+                            setOpenGroup(null);
+                            input.current?.focus();
+                        }, "aria-label": copy.search.clearAll, title: copy.search.clearAll, className: `my-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center rounded-control px-1.5 transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${bySurface(sup, "text-muted hover:bg-ink/5 hover:text-ink", "text-chrome-muted hover:bg-chrome-ink/10 hover:text-chrome-ink")}`, children: _jsx(X, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }) })), columns.length === 0 && onOpenBuilder === undefined ? null : (_jsxs("button", { type: "button", onClick: () => setPanel((v) => !v), "aria-expanded": panel, "aria-controls": panel ? id : undefined, title: copy.search.tools, className: `my-0.5 mr-0.5 inline-flex h-(--size-control-sm) shrink-0 items-center gap-1 rounded-control border px-2 text-micro transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${puestos > 0 || panel
                             ? bySurface(sup, "border-accent/40 bg-accent/18 text-ink", "border-chrome-link/35 bg-chrome-link/15 text-chrome-link")
                             : bySurface(sup, "border-transparent text-muted hover:bg-ink/5 hover:text-ink", "border-transparent text-chrome-muted hover:bg-chrome-ink/10 hover:text-chrome-ink")}`, children: [_jsx(ListFilter, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }), puestos > 0 ? _jsx("span", { className: "text-micro tabular-nums", children: puestos }) : null] }))] }), trailing, open ? (_jsxs("div", { className: `absolute top-full z-30 mt-1 overflow-hidden rounded-panel border border-line-strong bg-surface shadow-float ${asTags ? "left-0 w-max max-w-full" : "right-0 left-0"}`, children: [openJoin === undefined ? null : (_jsxs("div", { className: "flex items-center gap-1.5 border-line border-b px-3 py-1.5 text-micro text-muted", children: [_jsx(CornerDownRight, { className: "size-3 shrink-0", strokeWidth: 2, "aria-hidden": true }), _jsx("span", { className: "min-w-0 truncate", children: copy.search.landsHere }), _jsx("span", { className: "shrink-0 rounded-pill border border-accent/40 bg-accent/18 px-1.5 text-ink", children: copy.search.joins[openJoin === "not" ? "none" : openJoin] })] })), asTags ? (
                     /* UNA LISTA, no una tira. Se está ELIGIENDO: el ojo baja por una

package/dist/components/timeline/RecordTimeline.d.ts

@@ -0,0 +1,60 @@
+import { type TimelineScale } from "./time.js";
+import type { Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+/** A row of the timeline: what the records are grouped by — a person, a room, a machine. */
+export type TimelineRow = {
+    id: string;
+    label: string;
+    /** The row's face: `true` draws the initials of `label`, a string is a photo's URL. */
+    avatar?: boolean | string;
+    /** A second line, quiet: the role, the department. */
+    detail?: string;
+};
+export type RecordTimelineProps<T> = {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    /** The row a record goes in: its employee, its room. A grouping, as Odoo's «group by». */
+    rowOf: (item: T) => string;
+    /** The rows, in order — including the ones with nothing in this period (someone who did not
+     *  come is part of the answer). Without it they come from the records. */
+    rows?: readonly TimelineRow[];
+    startOf: (item: T) => Date;
+    endOf: (item: T) => Date;
+    /** The record's name, on its bar. */
+    titleOf?: (item: T) => string;
+    /** What the bar says, replacing the default: the name, and on a day or a week its duration
+     *  and its hours — «03:48 (09:12–13:13)». */
+    labelOf?: (item: T) => ReactNode;
+    toneOf?: (item: T) => Tone;
+    /** The head of the names column: «Empleado». */
+    rowHeader?: string;
+    /** Controlled scale, or the one it starts on. */
+    scale?: TimelineScale;
+    defaultScale?: TimelineScale;
+    onScaleChange?: (next: TimelineScale) => void;
+    scales?: readonly TimelineScale[];
+    /** Controlled date, or the one it starts on (today). */
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (next: Date) => void;
+    /** A bar was dragged (in time, or to another row) or stretched. The app saves and passes the
+     *  new `items`; until then the bar goes back. */
+    onMove?: (item: T, start: Date, end: Date, row: string) => void;
+    /** An empty stretch of a row was pressed: create a record there, one column long. */
+    onCreate?: (row: string, start: Date, end: Date) => void;
+    onOpen?: (item: T) => void;
+};
+/**
+ * Records on a timeline, grouped in rows — Odoo's Gantt view: attendances by employee, shifts,
+ * room bookings, work orders by machine.
+ *
+ * Context: a project Gantt (`RecordGantt`) is one task per row with dependencies; THIS is the
+ * other one people mean by «Gantt» in an ERP — a grouping with N records per row, read across
+ * time. The scale says the period (a day by hours, a week, a month by days, a year by months);
+ * the toolbar moves it (‹ › date · today), zooms, switches scale and takes the whole screen.
+ *
+ * Controlled: a drag shows a draft and reports `onMove` on release; the bar stays where
+ * `items` says. Everything the pointer does has a key: Alt + ← / → moves by the snap, with
+ * Shift it stretches, Alt + ↑ / ↓ changes the row; every move is announced.
+ */
+export declare function RecordTimeline<T>({ items, keyOf, rowOf, rows: givenRows, startOf, endOf, titleOf, labelOf, toneOf, rowHeader, scale: outerScale, defaultScale, onScaleChange, scales, date: outerDate, defaultDate, onDateChange, onMove, onCreate, onOpen, }: RecordTimelineProps<T>): import("react").JSX.Element;