@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/components/record/RecordHeader.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Breadcrumb } from "./Breadcrumb.js";
 import { DirtyActions, } from "./DirtyActions.js";
 import { isPrimary, ThumbBar, thumbPlan } from "./ThumbBar.js";
@@ -7,8 +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";
-import { cloneElement, isValidElement } from "react";
-export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Icon, title, subtitle, tag, figure, railSurface = "canvas", smart, aspects, dirty, chatter, chatterLayout = "page", 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 ||
@@ -24,6 +23,8 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
        only thing in the rail that belongs to the RECORD and not to my position in
        front of it. */
     const withRail = hasRail && d === "comfortable";
+    /* The activity column at the RIGHT of the sheet when the page is wide (THE PAGE). */
+    const beside = activity !== undefined && activityLayout === "auto";
     /* The thumb bar's content (see THE THUMB BAR in `ThumbBar`): dirty first, else the primary. */
     const { rail: railActions, primaries, mode: thumb, } = thumbPlan({ withRail, actions, dirty });
     /* In compact the TITLE is not drawn either, for the same reason as in
@@ -45,7 +46,15 @@ export function RecordHeader({ crumbs, pager, actions, status, kicker, icon: Ico
             pager !== undefined ||
             actions !== undefined ||
             dirty !== undefined);
-    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 ? null : _jsx("div", { className: "min-w-0", children: smart }), _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 : (
+    /* 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
                                                the sheet stood out and the eye had nowhere to start. */
@@ -53,20 +62,55 @@ 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: smart, 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, _jsx("div", { className: paper ? "bg-ground px-3 pt-3 pb-3" : "", children: _jsx("div", { className: chatter !== undefined && chatterLayout === "aside" ? "@container" : "", children: _jsxs("div", { className: chatter !== undefined && chatterLayout === "aside"
-                            ? "flex min-w-0 flex-col gap-3 @4xl:flex-row @4xl:items-start"
-                            : "", children: [_jsxs("div", { className: paper
-                                    ? `flex w-full max-w-(--container-sheet) min-w-0 flex-1 flex-col overflow-clip rounded-box border border-line bg-surface ${chatter !== undefined && chatterLayout === "aside" ? "" : "mx-auto"}`
-                                    : "flex min-w-0 flex-1 flex-col bg-surface", children: [identity, children, chatter !== undefined && chatterLayout === "page" ? (_jsx("div", { className: "border-t border-line", children: isValidElement(chatter)
-                                            ? cloneElement(chatter, {
-                                                embedded: true,
-                                            })
-                                            : chatter })) : null] }), chatter !== undefined && chatterLayout === "aside" ? chatter : null] }) }) }), thumb === null ? null : _jsx(ThumbBar, { mode: thumb, dirty: dirty, primaries: primaries })] }));
+    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.
+             *
+             *  Two columns, joined, placed together and centred: the sheet
+             *  (≤ --container-sheet, 72rem) and, at its RIGHT, the record's ACTIVITY
+             *  (--container-activity, 22rem) — no strip of ground between them, so the page
+             *  reads left to right as one paper: the record, then what it has. The pair is at
+             *  most --container-record (94rem) wide; on a 1680 px desk both fit whole.
+             *
+             *  A note of a field or a row is not drawn in the column: its mark (`Flag`) stays
+             *  by its label or at its row — WHERE — and the activity lists it with the record's
+             *  notices above the timeline — WHAT —, taking you to it on press. Cards aligned in
+             *  the column were tried and dropped: they and the history fought for one column,
+             *  and the history is what everybody reads.
+             *
+             *  As the page narrows: below --container-beside (76rem) the activity goes BELOW
+             *  the sheet as a card at the sheet's width.
+             *
+             *  Folded, the column is a slim strip with its counts; the pair re-centres and the
+             *  sheet keeps its width. A container query, not the window: with four panels open
+             *  each is 380 px on a 1,600 screen.
+             *
+             *  The sheet clips with `overflow-clip`, not `overflow-hidden`: hidden would make it
+             *  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: `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 modal, a drawer): one surface, no ground beside
+               it — the band first, the record, and the activity below. */
+            _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/RecordNotices.d.ts

@@ -0,0 +1,37 @@
+import { type CalloutProps } from "../../primitives/notice/Callout.js";
+import { type ReactNode } from "react";
+export type RecordNoticeSpec = Omit<CalloutProps, "dismissLabel">;
+/** The notices in the order they are drawn: by urgency, written order inside a tone. */
+export declare function orderNotices<T extends {
+    tone?: CalloutProps["tone"];
+}>(notices: readonly T[]): T[];
+/** Blocking (`bad`) and the rest, each already in urgency order. */
+export declare function splitNotices(notices: readonly RecordNoticeSpec[]): {
+    blocking: RecordNoticeSpec[];
+    rest: RecordNoticeSpec[];
+};
+/** The band of what is wrong: the operation error first, then the `bad` notices. */
+export declare function RecordBlocking({ notices, error, errorHeading, }: {
+    notices: readonly RecordNoticeSpec[];
+    /** The sentence the backend wrote about the last operation. Drawn first, whole. */
+    error?: string | null;
+    errorHeading?: string;
+}): ReactNode;
+/** The indicator in the rail: the count of the record's notices, toned by the most urgent,
+ *  that opens their list on press. Nothing is drawn without notices. */
+export declare function RecordNoticeIndicator({ notices, anchored, reveal, }: {
+    /** Not blocking, already in urgency order. */
+    notices: readonly RecordNoticeSpec[];
+    /** The notes of fields and rows: counted too when there is a panel that lists them —
+     *  without one they are only the marks by their fields, and the popover leaves them out. */
+    anchored?: readonly {
+        tone?: "bad" | "warn" | "info" | "good";
+    }[];
+    /** The record has an ACTIVITY panel, and the notices live there: the indicator goes to
+     *  them (opens the panel, scrolls to its notices, moves the focus) instead of floating
+     *  a second copy in a popover. `target` is the id of that section. */
+    reveal?: {
+        target: string;
+        onReveal: () => void;
+    };
+}): ReactNode;

package/dist/components/record/RecordNotices.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { useSurface } from "../../foundations/surface.js";
+import { focusRing, tv } from "../../foundations/variants.js";
+import { Callout } from "../../primitives/notice/Callout.js";
+import { Failed } from "../../primitives/notice/Notice.js";
+import { Popover } from "../../primitives/overlay/Popover.js";
+import { tagTone } from "../../primitives/tag/Tag.js";
+import { CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { useState } from "react";
+import { Button, Dialog, DialogTrigger, Heading } from "react-aria-components";
+const URGENCY = {
+    bad: 0,
+    warn: 1,
+    info: 2,
+    good: 3,
+};
+/** The notices in the order they are drawn: by urgency, written order inside a tone. */
+export function orderNotices(notices) {
+    return notices
+        .map((notice, at) => ({ notice, at }))
+        .sort((a, b) => URGENCY[a.notice.tone ?? "info"] - URGENCY[b.notice.tone ?? "info"] || a.at - b.at)
+        .map(({ notice }) => notice);
+}
+/** Blocking (`bad`) and the rest, each already in urgency order. */
+export function splitNotices(notices) {
+    const ordered = orderNotices(notices);
+    return {
+        blocking: ordered.filter((n) => n.tone === "bad"),
+        rest: ordered.filter((n) => n.tone !== "bad"),
+    };
+}
+/** The band of what is wrong: the operation error first, then the `bad` notices. */
+export function RecordBlocking({ notices, error, errorHeading, }) {
+    const copy = useUiCopy();
+    const hasError = error !== undefined && error !== null;
+    if (notices.length === 0 && !hasError)
+        return null;
+    return (_jsxs("div", { role: "group", "aria-label": copy.record.blocking, "data-record-blocking": "", className: "flex min-w-0 flex-col gap-1.5", children: [hasError ? (_jsx(Failed, { heading: errorHeading ?? copy.failed.operation, sentence: error })) : null, notices.map(({ children, ...notice }, i) => (_jsx(Callout, { ...notice, dismissLabel: copy.shell.closeNotice, children: children }, i)))] }));
+}
+const ICON = {
+    warn: TriangleAlert,
+    info: Info,
+    good: CircleCheck,
+};
+const chip = tv({
+    extend: focusRing,
+    base: "inline-flex h-(--size-control-sm) shrink-0 cursor-default items-center gap-1.5 rounded-pill px-2.5 text-micro font-medium whitespace-nowrap transition-[filter] duration-(--duration-instant) hover:brightness-95 aria-expanded:brightness-95",
+});
+/** The indicator in the rail: the count of the record's notices, toned by the most urgent,
+ *  that opens their list on press. Nothing is drawn without notices. */
+export function RecordNoticeIndicator({ notices, anchored = [], reveal, }) {
+    const copy = useUiCopy();
+    const surface = useSurface();
+    const [open, setOpen] = useState(false);
+    const all = reveal === undefined ? notices : [...notices, ...anchored];
+    if (all.length === 0)
+        return null;
+    /* The most urgent of all of them gives the chip its tone; a field's `bad` note warns —
+       what blocks the record is the blocking band, not this chip. */
+    const order = ["bad", "warn", "info", "good"];
+    const worst = order.find((t) => all.some((n) => (n.tone ?? "info") === t)) ?? "info";
+    const tone = (worst === "bad" ? "warn" : worst);
+    const Icon = ICON[tone];
+    const count = fillCopy(all.length === 1 ? copy.record.noticeOne : copy.record.noticeMany, {
+        count: all.length.toLocaleString(copy.locale),
+    });
+    const face = (_jsxs(_Fragment, { children: [_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2.25, "aria-hidden": true }), count] }));
+    const skin = tagTone(tone, surface === "chrome" ? "chrome" : "canvas");
+    if (reveal !== undefined) {
+        return (_jsx(Button, { "data-record-notices": "", "aria-controls": reveal.target, onPress: reveal.onReveal, className: ({ isFocusVisible }) => `${chip({ isFocusVisible })} ${skin}`, children: face }));
+    }
+    return (_jsxs(DialogTrigger, { isOpen: open, onOpenChange: setOpen, children: [_jsx(Button, { "data-record-notices": "", className: ({ isFocusVisible }) => `${chip({ isFocusVisible })} ${skin}`, children: face }), _jsx(Popover, { placement: "bottom", children: _jsxs(Dialog, { "aria-label": copy.record.notices, className: "flex max-h-[inherit] w-(--container-toast) flex-col gap-2 overflow-auto p-3 outline-0 max-sm:w-auto", children: [_jsx(Heading, { slot: "title", className: "text-meta font-semibold text-ink", children: copy.record.notices }), notices.map(({ children, ...notice }, i) => (_jsx(Callout, { ...notice, dismissLabel: copy.shell.closeNotice, children: children }, i)))] }) })] }));
+}

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

@@ -38,7 +38,7 @@ import { cloneElement, isValidElement } from "react";
  *  Same reason as everything else here: a record in a 380 px panel is as
  *  narrow as one on a phone. The query is a NAMED container (`record`) on the
  *  rail and on the bar — never on the paper: an unnamed container around the
- *  sheet would change what `Sheet`, `SectionGrid` and the chatter measure
+ *  sheet would change what `Sheet`, `SectionGrid` and the activity panel measure
  *  against, and the desk layout with it.
  *
  *  ── Why CSS, and why the primary is in the DOM twice ─────────────────

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;