@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/components/record/Breadcrumb.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useSurface } from "../../foundations/surface.js";
+import { focusRing, tv } from "../../foundations/variants.js";
+import { Menu } from "../../primitives/menu/Menu.js";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Breadcrumb as AriaBreadcrumb, Breadcrumbs, Link } from "react-aria-components";
+/** The three tones of a trail, per surface: where I came from, where I am, and the
+ *  chevron between them. The chevron is the faintest thing in the row on purpose —
+ *  it is punctuation, and punctuation louder than the words makes the words hard to
+ *  read. */
+const crumbStyles = tv({
+    extend: focusRing,
+    base: "block min-w-0 rounded-mark text-meta transition-colors duration-(--duration-instant)",
+    variants: {
+        surface: { canvas: "", chrome: "outline-chrome-link" },
+        kind: {
+            link: "cursor-pointer hover:underline hover:underline-offset-4",
+            inert: "cursor-default",
+            current: "cursor-default font-medium",
+        },
+    },
+    compoundVariants: [
+        { surface: "canvas", kind: ["link", "inert"], class: "text-muted" },
+        { surface: "canvas", kind: "link", class: "hover:text-ink" },
+        { surface: "canvas", kind: "current", class: "text-ink" },
+        { surface: "chrome", kind: ["link", "inert"], class: "text-chrome-muted" },
+        { surface: "chrome", kind: "link", class: "hover:text-chrome-ink" },
+        { surface: "chrome", kind: "current", class: "text-chrome-ink" },
+    ],
+});
+/**
+ * Where I came from, without eating the line.
+ *
+ * Built on React Aria's `Breadcrumbs`: the LAST crumb is the page I am on, so it
+ * gets `aria-current="page"` and stops being pressable — React Aria decides that
+ * from its position, not from whether the caller forgot an `onClick`. The others
+ * are `Link`s, so they press with Enter, show the system focus ring only from the
+ * keyboard, and read as links to a screen reader.
+ *
+ * **The hierarchy is in the TONE, not in a color.** Ancestors are quiet
+ * (`text-muted`), the current page is ink and medium weight: the eye lands on where
+ * I am and reads backwards. Painting the ancestors in the link blue made the whole
+ * row the same weight — four blue words and no «here».
+ *
+ * Two things keep it inside its place, and they are two because they are two
+ * different problems:
+ *
+ *  1. **Each crumb asks for `--container-crumb` and no more.** A name in this
+ *     product reaches fifty characters, so one crumb is enough to eat the band even
+ *     when the trail has three. The rest is cut with «…» and the full name stays in
+ *     the `title`.
+ *  2. **With more than `folded` crumbs, the MIDDLE ones fold** into a «…» menu.
+ *     By COUNT, not by width: a six-crumb trail is long on any screen. The first
+ *     —the root, where you go back to— and the last —where I am— never fold, and
+ *     what folded is still navigable, in order.
+ *
+ * Folding and truncating are not the same and that is why both exist: one removes
+ * CRUMBS and the other removes LETTERS.
+ */
+export function Breadcrumb({ crumbs, surface: surfaceProp, folded = 3, }) {
+    const copy = useUiCopy();
+    const surface = useSurface(surfaceProp);
+    const edge = surface === "chrome" ? "text-chrome-muted/50" : "text-line-strong";
+    /* The first and the last always; the middle goes to the menu when there are too many. */
+    const folds = crumbs.length > folded;
+    const hidden = folds ? crumbs.slice(1, -1) : [];
+    const shown = folds
+        ? [crumbs[0], null, crumbs[crumbs.length - 1]]
+        : crumbs;
+    return (_jsx("nav", { "aria-label": copy.record.location, className: "flex min-w-0", children: _jsx(Breadcrumbs, { "aria-label": copy.record.location, className: "flex min-w-0 flex-wrap items-center gap-1", children: shown.map((crumb, i) => {
+                const key = crumb === null ? "folded" : `${i}-${crumb.label}`;
+                const last = i === shown.length - 1;
+                return (_jsxs(AriaBreadcrumb, { id: key, className: "flex min-w-0 items-center gap-1", children: [i === 0 ? null : (_jsx(ChevronRight, { className: `size-(--size-icon-sm) shrink-0 ${edge}`, strokeWidth: 2, "aria-hidden": true })), crumb === null ? (_jsx(Menu, { label: copy.record.location, title: copy.record.location, icon: MoreHorizontal, iconOnly: true, chevron: false, variant: "text", size: "sm", surface: surface === "chrome" ? "chrome" : "canvas", align: "start", groups: [
+                                {
+                                    options: hidden.map((one, at) => ({
+                                        id: `crumb-${at}`,
+                                        label: one.label,
+                                        disabled: one.onClick === undefined,
+                                        onSelect: one.onClick,
+                                    })),
+                                },
+                            ] })) : (_jsx(Link
+                        /* React Aria already disables the last one; a middle crumb with
+                           nowhere to go is disabled too, instead of a link that does
+                           nothing. */
+                        , { 
+                            /* React Aria already disables the last one; a middle crumb with
+                               nowhere to go is disabled too, instead of a link that does
+                               nothing. */
+                            isDisabled: last ? undefined : crumb.onClick === undefined, onPress: crumb.onClick, className: ({ isFocusVisible }) => crumbStyles({
+                                surface,
+                                isFocusVisible,
+                                kind: last ? "current" : crumb.onClick === undefined ? "inert" : "link",
+                            }), children: _jsx("span", { className: "block max-w-(--container-crumb) truncate", title: crumb.label, children: crumb.label }) }))] }, key));
+            }) }) }));
+}

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

@@ -0,0 +1,26 @@
+export interface DirtyState {
+    onSave: () => void;
+    onDiscard: () => void;
+    /** It is saving. The button turns off: pressing it twice sends it twice, and
+     *  when what gets saved is a payment, that matters. */
+    saving?: boolean;
+    /** What gets saved, when it is not obvious: «guardar la factura», «guardar la
+     *  regla». */
+    label?: string;
+    /** Why it CANNOT be saved yet. Present = the button is off and the reason is
+     *  in its `title` — a button that is off with no reason is a wall. */
+    blocked?: string;
+}
+/** Save and discard, in the rail and in place of the action buttons.
+ *
+ *  Context: discard goes to the LEFT of save and with the quieter look. It is
+ *  the same rule as `FormActions`, and here it matters more: the rail is where
+ *  the hand is after editing.
+ *
+ *  The «sin guardar» warning is text and not just a color: whoever is leaving
+ *  the screen has to be able to read what is going on, not deduce it from a
+ *  dot. */
+export declare function DirtyActions({ onSave, onDiscard, saving, label, blocked, }: DirtyState): import("react").JSX.Element;
+/** The one action a view leads with: the element written with `role="primary"` — the
+ *  same prop that paints it gold and that `make smoke` counts, so there is no second way to
+ *  say «this is the main one» that could disagree with the first. */

package/dist/components/record/DirtyActions.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { bySurface, useSurface } from "../../foundations/surface.js";
+import { Button } from "../../primitives/button/Button.js";
+import { Save, Undo2 } from "lucide-react";
+/** Save and discard, in the rail and in place of the action buttons.
+ *
+ *  Context: discard goes to the LEFT of save and with the quieter look. It is
+ *  the same rule as `FormActions`, and here it matters more: the rail is where
+ *  the hand is after editing.
+ *
+ *  The «sin guardar» warning is text and not just a color: whoever is leaving
+ *  the screen has to be able to read what is going on, not deduce it from a
+ *  dot. */
+export function DirtyActions({ onSave, onDiscard, saving = false, label, blocked, }) {
+    const copy = useUiCopy();
+    /* It follows the rail it sits on instead of assuming the dark one: on a light rail the
+       chrome palette was white text on white. */
+    const surface = useSurface();
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: `inline-flex h-(--size-control-md) shrink-0 items-center gap-1.5 rounded-control px-2.5 text-meta font-medium ${bySurface(surface, "bg-warn/12 text-warn", "bg-chrome-warn/15 text-chrome-warn")}`, children: copy.record.unsaved }), _jsx(Button, { surface: surface, onClick: onDiscard, disabled: saving, icon: Undo2, children: copy.record.discard }), _jsx("span", { ...(blocked === undefined ? {} : { title: blocked }), children: _jsx(Button, { role: "primary", surface: surface, onClick: onSave, disabled: saving || blocked !== undefined, icon: Save, children: saving ? copy.record.saving : (label ?? copy.record.save) }) })] }));
+}

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

@@ -0,0 +1,18 @@
+import type { Surface } from "../../foundations/types.js";
+/** Where I am inside the set I came from, and how I move to the next one.
+ *
+ *  **It turns a record into a position.** Without this, opening the third of a
+ *  list of eighty and wanting to see the fourth forces going back, finding
+ *  where you were and opening again — three actions for what is one arrow.
+ *
+ *  It goes far from the actions on purpose: moving between records is not doing
+ *  something to this record. Stuck next to «Eliminar», one extra click on the
+ *  wrong arrow is a destructive action. */
+export declare function Pager({ index, total, onPrev, onNext, surface: surfaceProp, }: {
+    /** 1-based: what gets shown is «12 de 80», not «11». */
+    index: number;
+    total: number;
+    onPrev?: () => void;
+    onNext?: () => void;
+    surface?: Surface;
+}): import("react").JSX.Element;

package/dist/components/record/Pager.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { useSurface } from "../../foundations/surface.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+/* ---------------------------------------------------------------- *
+ *  THE PAGER
+ * ---------------------------------------------------------------- */
+/** Where I am inside the set I came from, and how I move to the next one.
+ *
+ *  **It turns a record into a position.** Without this, opening the third of a
+ *  list of eighty and wanting to see the fourth forces going back, finding
+ *  where you were and opening again — three actions for what is one arrow.
+ *
+ *  It goes far from the actions on purpose: moving between records is not doing
+ *  something to this record. Stuck next to «Eliminar», one extra click on the
+ *  wrong arrow is a destructive action. */
+export function Pager({ index, total, onPrev, onNext, surface: surfaceProp, }) {
+    const copy = useUiCopy();
+    const surface = useSurface(surfaceProp);
+    const isChrome = surface === "chrome";
+    const faint = isChrome ? "text-chrome-muted" : "text-muted";
+    const hover = isChrome
+        ? "not-disabled:hover:bg-chrome-ink/10 not-disabled:hover:text-chrome-ink"
+        : "not-disabled:hover:bg-ink/6 not-disabled:hover:text-ink";
+    /* On the chrome the ring is the chrome's link cyan, like the TopBar's: the
+       primary navy on a navy band is a ring nobody sees. */
+    const ring = isChrome
+        ? "focus-visible:outline-chrome-link"
+        : "focus-visible:outline-primary";
+    const arrow = `inline-flex size-(--size-control-sm) items-center justify-center rounded-pill transition-colors duration-(--duration-instant) disabled:opacity-30 focus-visible:outline-2 focus-visible:outline-offset-2 ${ring} ${faint} ${hover}`;
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [_jsxs("span", { className: `text-micro tabular-nums ${faint}`, children: [index, " / ", total.toLocaleString(copy.locale)] }), _jsx("button", { type: "button", onClick: onPrev, disabled: index <= 1, "aria-label": copy.record.prev, title: copy.record.prev, className: arrow, children: _jsx(ChevronLeft, { className: "size-(--size-icon-md)", strokeWidth: 2 }) }), _jsx("button", { type: "button", onClick: onNext, disabled: index >= total, "aria-label": copy.record.next, title: copy.record.next, className: arrow, children: _jsx(ChevronRight, { className: "size-(--size-icon-md)", strokeWidth: 2 }) })] }));
+}

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

@@ -0,0 +1,75 @@
+import { type Crumb } from "./Breadcrumb.js";
+import { type DirtyState } from "./DirtyActions.js";
+import type { Surface, Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+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, }: {
+    crumbs?: readonly Crumb[];
+    pager?: ReactNode;
+    /** The action buttons. At most three visible + a `Menu` with `iconOnly`, and
+     *  the rule for choosing which three: the ones that PRODUCE something new,
+     *  never the navigation ones. They take the rail's surface from context: write
+     *  them without `surface`, light by default, dark on `Record.Rail surface="chrome"`. */
+    actions?: ReactNode;
+    /** Everything around the record: its notices, conversation and history — an
+     *  `Activity`. Never inside the sheet: it is about the record, not part of the form. */
+    activity?: ReactNode;
+    /**
+     * Where the activity goes, as the record's width allows (THE PAGE, below).
+     *
+     *     auto    a column at the RIGHT of the sheet, joined to it, when the page is
+     *             `--container-beside` wide, and a card BELOW the sheet when it is not.
+     *             **The default.**
+     *     below   always below the sheet, at its width.
+     *
+     * It is said by the RECORD and not guessed from the child: the flex direction is set by
+     * this container, and a parent that inspects what it was handed to decide how to lay
+     * itself out breaks the next time someone wraps the panel in something else.
+     */
+    activityLayout?: "auto" | "below";
+    /** `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;
+    /** The category, small and above the name: «factura de cliente». It makes a
+     *  name like `NF-02/2026/00137` mean something without deducing it from the
+     *  format. */
+    kicker?: string;
+    icon?: LucideIcon;
+    title: ReactNode;
+    /** The metadata that only DESCRIBES. In mono: the machine wrote it. */
+    subtitle?: ReactNode;
+    tag?: {
+        label: string;
+        tone?: Tone;
+    };
+    /** The record's key figure, as large as the title, on the right. See `RecordIdentity`. */
+    figure?: {
+        label: string;
+        value: ReactNode;
+    };
+    /** The rail's band. `canvas` (the default) is a light control bar with a hairline below;
+     *  `chrome` is the dark band, an explicit choice for a record that owns the screen's
+     *  only dark band (no dark application bar above it). */
+    railSurface?: Surface;
+    /** The counters that TAKE you somewhere else. They go in the sheet and next
+     *  to the title — they belong to the record, not to my position in front of
+     *  it. */
+    smart?: ReactNode;
+    aspects?: ReactNode;
+    /** There are unsaved changes. Its presence REPLACES the action buttons with
+     *  save/discard, and it is not an aesthetic decision: running «Registrar pago» on
+     *  an edited and unsaved invoice runs with the old values, and whoever pressed
+     *  it has no way to know. As long as there are changes, the only thing that
+     *  can be done is confirm them or throw them away. */
+    dirty?: DirtyState;
+    /** What is WRONG with the record — `RecordBlocking`. Always visible, outside the sheet:
+     *  between the rail and the paper, never among the fields (see `RecordNotices`). */
+    blocking?: ReactNode;
+    /** The rest of the record's notices, as one indicator — `RecordNoticeIndicator`. In the
+     *  rail next to the counters; without a rail, first in the record, next to them. */
+    indicator?: ReactNode;
+    /** The record body. It sits IN the paper with the title, so groups, tabs
+     *  and the page are one white sheet on the ground — Odoo's `<sheet>`. */
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/record/RecordHeader.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Breadcrumb } from "./Breadcrumb.js";
+import { DirtyActions, } from "./DirtyActions.js";
+import { isPrimary, ThumbBar, thumbPlan } from "./ThumbBar.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { SurfaceProvider } from "../../foundations/surface.js";
+import { Line } from "../../primitives/block/Line.js";
+import { Tag } from "../../primitives/tag/Tag.js";
+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, }) {
+    const d = useDensity();
+    const hasRail = crumbs !== undefined ||
+        pager !== undefined ||
+        actions !== undefined ||
+        status !== undefined ||
+        dirty !== undefined;
+    /* In compact the rail goes away ENTIRELY, and it is not for room: in a
+       preview, the breadcrumbs and the pager belong to the surface that opened it
+       —the list behind is still there— and the actions are already in the
+       drawer's header. A rail inside another rail is two bars saying where I am.
+  
+       The state does survive: it moves to the sheet, below the title. It is the
+       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
+       `Listing`: the surface header already says it. Drawing it here showed it
+       twice in the same 480 px drawer — and the name of a customer in this product
+       reaches 50 characters, so the repetition eats two whole lines.
+  
+       What does NOT go away: the `tag`, the state, the counters and the aspects.
+       They are what the drawer header does not say and the only way to see what
+       hangs off it without pinning the panel. */
+    const withIdentity = d === "comfortable";
+    /* The paper is Odoo's `<sheet>`: white on the ground, hairline, not a
+       shadow. It exists on the PAGE, where the chrome rail is a real band
+       (crumbs, pager, actions). A drawer is compact so `withRail` is already
+       false. A dialog is comfortable but has no crumbs or actions — and it IS
+       already a card. Status alone is not a page. */
+    const paper = withRail &&
+        (crumbs !== undefined ||
+            pager !== undefined ||
+            actions !== undefined ||
+            dirty !== undefined);
+    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. */
+                                            _jsx("h1", { className: "min-w-0 truncate text-display font-semibold text-ink", children: title })), tag === undefined ? null : _jsx(Tag, { tone: tag.tone, children: tag.label })] }), subtitle === undefined || !withIdentity ? null : (_jsx("p", { className: "mt-0.5 truncate text-lead text-ink", children: subtitle }))] })] }), figure === undefined || !withIdentity ? null : (_jsxs("div", { className: "ml-auto flex shrink-0 flex-col items-end", children: [_jsx("span", { className: "text-micro font-medium text-muted", children: figure.label }), _jsx("span", { className: "text-display font-semibold tabular-nums text-ink", children: figure.value })] }))] }), withRail || status === undefined ? null : (_jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: status })), aspects === undefined ? null : (
+            /* 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 ? (
+            /* ==================================================================== *
+             *  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: `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 ? (
+                            /* 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
+               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 })] }));
+}

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

@@ -0,0 +1,3 @@
+export declare function RecordSkeleton({ label }: {
+    label: string;
+}): import("react").JSX.Element;

package/dist/components/record/RecordSkeleton.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { byDensity, useDensity } from "../../foundations/density.js";
+/* ==================================================================== *
+ *  LA FICHA, MIENTRAS LLEGA.
+ *
+ *  Factura y cliente contestaban la espera con `Empty`: «Cargando…» en el
+ *  medio de la página. Eso es la frase de «no hay nada», y el registro sí
+ *  está — todavía no llegó. La silueta es la de la ficha: el riel, el nombre,
+ *  los cuatro hechos, las solapas y el cuerpo. Cuando el registro aparece,
+ *  cae en el mismo lugar.
+ *
+ *  Sin brillo. Un pulso ya quiere decir «este estado está vivo».
+ * ==================================================================== */
+const HECHOS = ["w-16", "w-12", "w-20", "w-24"];
+const SOLAPAS = ["w-14", "w-16", "w-20"];
+export function RecordSkeleton({ label }) {
+    const d = useDensity();
+    const page = d === "comfortable";
+    return (_jsxs("article", { "aria-busy": "true", className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "sr-only", children: label }), page ? (_jsxs("div", { "aria-hidden": true, className: "flex items-center gap-3 bg-chrome px-3.5 py-2.5", children: [_jsx("span", { className: "h-3 w-24 rounded-control bg-chrome-ink/15" }), _jsx("span", { className: "h-3 w-40 rounded-control bg-chrome-ink/10" }), _jsx("span", { className: "ml-auto h-(--size-control-sm) w-28 rounded-control bg-chrome-ink/15" })] })) : null, _jsx("div", { "aria-hidden": true, className: page ? "border border-line bg-surface" : "bg-surface", children: _jsxs("div", { className: `flex flex-col ${byDensity(d, "gap-3 px-4 pt-3.5 pb-4", "gap-2 py-2")}`, children: [_jsx("span", { className: "h-5 w-72 max-w-full rounded-control bg-ink/8" }), _jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-2", children: HECHOS.map((width) => (_jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "h-2.5 w-10 rounded-control bg-ink/5" }), _jsx("span", { className: `h-3.5 rounded-control bg-ink/8 ${width}` })] }, width))) }), _jsx("div", { className: "flex gap-4 border-b border-line pb-2", children: SOLAPAS.map((width, i) => (_jsx("span", { className: `h-3 rounded-control ${i === 0 ? "bg-ink/10" : "bg-ink/5"} ${width}` }, width))) }), _jsx("span", { className: "h-24 rounded-box bg-ink/5" })] }) })] }));
+}

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

@@ -0,0 +1,35 @@
+import type { Surface } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
+/** What hangs off this record, with its number, and can be pressed.
+ *
+ *  It answers TWO questions with a single control: *is there any?* and *how
+ *  many?*. Without this you have to open it to discover there is nothing — the
+ *  most expensive click in any interface.
+ *
+ *  **`—` is not `0`.** «I don't know yet» and «there is none» are two different
+ *  answers, and confusing them makes somebody decide on data that has not
+ *  arrived yet. */
+export declare function SmartButton({ icon: Icon, count, label, onClick, disabled, surface, layout, }: {
+    icon: LucideIcon;
+    count?: number;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** By default it inherits it from the surface that wraps it. */
+    surface?: Surface;
+    /**
+     * `stacked` — the figure on top and the label below. For the sheet, where
+     *             there is height.
+     * `inline`  — everything on one line. For the rail.
+     *
+     * Context: in the rail, a two-line box next to breadcrumbs and a one-line
+     * pager imposes its height on the whole row, and the other two end up
+     * floating in the middle of a band that is twice as tall as them. That was
+     * «something looks off».
+     */
+    layout?: "stacked" | "inline";
+}): import("react").JSX.Element;
+export declare function SmartButtons({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/record/SmartButtons.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { bySurface, useSurface } from "../../foundations/surface.js";
+import { Children, createContext, useContext } from "react";
+/* ---------------------------------------------------------------- *
+ *  THE SMART BUTTONS
+ * ---------------------------------------------------------------- */
+/** On the chrome the counters share one bar. Each button reads that and drops
+ *  its own frame, the way a stage drops its own arrow. */
+const SmartGroup = createContext(false);
+/** What hangs off this record, with its number, and can be pressed.
+ *
+ *  It answers TWO questions with a single control: *is there any?* and *how
+ *  many?*. Without this you have to open it to discover there is nothing — the
+ *  most expensive click in any interface.
+ *
+ *  **`—` is not `0`.** «I don't know yet» and «there is none» are two different
+ *  answers, and confusing them makes somebody decide on data that has not
+ *  arrived yet. */
+export function SmartButton({ icon: Icon, count, label, onClick, disabled = false, surface, layout = "stacked", }) {
+    const copy = useUiCopy();
+    const empty = count === 0;
+    const activeSurface = useSurface(surface);
+    const isInline = layout === "inline";
+    const grouped = useContext(SmartGroup);
+    return (_jsxs("button", { type: "button", onClick: onClick, disabled: disabled || onClick === undefined, className: `flex shrink-0 items-center gap-2 text-left transition-[background-color,border-color,box-shadow] duration-(--duration-instant) disabled:cursor-default disabled:opacity-60 focus-visible:outline-2 focus-visible:outline-primary ${grouped
+            ? `not-disabled:hover:bg-chrome-ink/10 focus-visible:-outline-offset-2 ${isInline ? "h-(--size-control-sm) px-2.5" : "px-2.5 py-1"}`
+            : `rounded-control border focus-visible:outline-offset-2 ${isInline ? "h-(--size-control-sm) px-2" : "px-2.5 py-1"} ${bySurface(activeSurface, "border-ink/12 bg-surface shadow-raised not-disabled:hover:border-primary/40 not-disabled:hover:bg-primary/4", "border-chrome-ink/12 bg-chrome-ink/6 not-disabled:hover:border-chrome-link/40 not-disabled:hover:bg-chrome-ink/12")}`}`, children: [_jsx(Icon, { className: `size-(--size-icon-md) shrink-0 ${bySurface(activeSurface, empty ? "text-muted/50" : "text-muted", empty ? "text-chrome-muted/50" : "text-chrome-muted")}`, strokeWidth: 1.75 }), _jsxs("span", { className: `min-w-0 leading-tight ${isInline ? "flex items-baseline gap-1.5" : ""}`, children: [_jsx("span", { className: `text-meta font-medium tabular-nums ${isInline ? "" : "block"} ${bySurface(activeSurface, empty ? "text-muted" : "text-ink", empty ? "text-chrome-muted" : "text-chrome-ink")}`, children: count === undefined ? "—" : count.toLocaleString(copy.locale) }), _jsx("span", { className: `text-micro ${isInline ? "" : "block"} ${bySurface(activeSurface, "text-muted", "text-chrome-muted")}`, children: label })] })] }));
+}
+export function SmartButtons({ children }) {
+    const surface = useSurface();
+    if (surface !== "chrome") {
+        return _jsx("div", { className: "flex flex-wrap items-stretch gap-1.5", children: children });
+    }
+    const items = Children.toArray(children);
+    return (_jsx(SmartGroup.Provider, { value: true, children: _jsx("div", { className: "flex min-w-0 items-stretch overflow-hidden rounded-control border border-chrome-ink/15 bg-chrome-ink/8", children: items.map((child, i) => (_jsx("div", { className: i === 0 ? "flex min-w-0" : "flex min-w-0 border-l border-chrome-ink/20", children: child }, i))) }) }));
+}