@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/navigation/commands.js

@@ -0,0 +1,30 @@
+/** The commands under each heading, headings in the order they first appear. */
+export function groupCommands(commands) {
+    const groups = new Map();
+    /* The commands with no heading are listed first, wherever they were written. */
+    if (commands.some((c) => c.section === undefined))
+        groups.set(undefined, []);
+    for (const command of commands) {
+        const group = groups.get(command.section);
+        if (group === undefined)
+            groups.set(command.section, [command]);
+        else
+            group.push(command);
+    }
+    return [...groups].map(([section, list]) => ({ section, commands: list }));
+}
+/**
+ * Whether a command answers a query. `contains` is the locale's comparison — React Aria's
+ * `useFilter` in the palette — so «facturacion» finds «Facturación» and an uppercase query
+ * finds a lowercase label.
+ *
+ * Every word of the query has to appear, in any order, in the label or the keywords:
+ * «nueva fac» finds «Nueva factura», and so does «factura nueva».
+ */
+export function commandMatches(command, query, contains) {
+    const words = query.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return true;
+    const haystack = [command.label, ...(command.keywords ?? [])].join(" ");
+    return words.every((word) => contains(haystack, word));
+}

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

@@ -0,0 +1,3 @@
+export { CommandPalette, useCommandPaletteShortcut, } from "./CommandPalette.js";
+export { type PaletteCommand } from "./commands.js";
+export { NavigationTree, type NavItem, } from "./NavigationTree.js";

package/dist/components/navigation/index.js

@@ -0,0 +1,4 @@
+/* LA NAVEGACIÓN — el árbol lateral de una aplicación y la paleta de comandos. */
+export { CommandPalette, useCommandPaletteShortcut, } from "./CommandPalette.js";
+export {} from "./commands.js";
+export { NavigationTree, } from "./NavigationTree.js";

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

@@ -0,0 +1,42 @@
+import type { Surface } from "../../foundations/types.js";
+export interface Crumb {
+    label: string;
+    /** Absent on the last one: the place you are already at cannot be pressed. */
+    onClick?: () => void;
+}
+/**
+ * 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 declare function Breadcrumb({ crumbs, surface: surfaceProp, folded, }: {
+    crumbs: readonly Crumb[];
+    surface?: Surface;
+    /** From how many crumbs the middle folds. Below this every crumb is drawn:
+     *  folding two crumbs hides half the trail to save one chevron. */
+    folded?: number;
+}): import("react").JSX.Element;

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,71 @@
+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, chatter, chatterLayout, 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;
+    /** La historia del registro: `<Chatter …/>`. En `page` es la última fila de
+     *  la hoja —el mismo papel, separado por una línea— y no una segunda tarjeta.
+     *  En `aside` sigue al costado, con su propio marco. */
+    chatter?: ReactNode;
+    /**
+     * Dónde se pone respecto de la hoja.
+     *
+     *     page    debajo y a todo el ancho, como hoja propia. **El default**: un
+     *             formulario necesita su ancho, y una columna al costado se lo
+     *             come en cuanto la pantalla no sobra.
+     *     aside   al costado cuando hay ancho, debajo cuando no.
+     *
+     * Lo dice el REGISTRO y no se adivina del hijo: la dirección del flex la pone
+     * este contenedor, y un padre que mira qué le pasaron adentro para decidir
+     * cómo acomodarse se rompe la próxima vez que alguien envuelva el chatter en
+     * otra cosa.
+     */
+    chatterLayout?: "aside" | "page";
+    /** `StatusBar` (where is it at?), the chatter'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;
+    /** 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,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, 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";
+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, }) {
+    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 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 ? 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 : (
+                                            /* `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: 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 })] }));
+}

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

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

@@ -0,0 +1,51 @@
+import type { Surface } from "../../foundations/types.js";
+export interface Stage {
+    id: string;
+    label: string;
+}
+/** Which step something is on, **with the steps that come next in sight**.
+ *
+ *  ── One track, one language ──────────────────────────────────────────
+ *
+ *  The stages are segments of ONE track, Odoo's statusbar: the order is the
+ *  direction. What is behind is ink with a check, what comes next is muted, and the
+ *  current stage is the only FILLED segment — `primary` on the canvas, the chrome's
+ *  ink inverted on the rail. With `failed` that fill turns `danger` and carries an
+ *  alert mark, so the failure is not only a color.
+ *
+ *  A clipped arrow per step was tried and dropped: the notch between two arrows
+ *  reads as a gap — four chips, not a path.
+ *
+ *  ── Narrow: it STACKS, it does not hide ──────────────────────────────
+ *
+ *  Four stages side by side do not fit in a 480 px drawer, and the answer is not
+ *  tucking them behind a chevron: a state you have to open stops answering «where
+ *  is this at?», which is the only question it has. It stacks — one stage per row —
+ *  in the same track, with the same three paints and the same marks. What changes
+ *  is the DIRECTION, not how much is shown nor how it is painted.
+ *
+ *  ── And it can be CHOSEN ─────────────────────────────────────────────
+ *
+ *  With `onSelect` the track is a React Aria `RadioGroup`: one stage at a time,
+ *  arrow keys move between them, Tab enters at the chosen one. It is not
+ *  «advancing» — a stage does not change by pressing it — it is choosing which
+ *  stage we are talking about: in a list grouped by stage, pressing «generando» asks
+ *  for those. So the record's CURRENT stage (`current`, the fill, `aria-current`)
+ *  and the stage being VIEWED (`selected`, the underline, the checked radio) are two
+ *  different things and are painted differently. Without `onSelect` it is a plain
+ *  ordered list and the current stage is `aria-current="step"`. */
+export declare function StatusBar({ stages, current, failed, surface: surfaceProp, onSelect, selected, layout, }: {
+    stages: readonly Stage[];
+    current: string;
+    failed?: boolean;
+    surface?: Surface;
+    /** Present = the stages can be chosen. Nothing advances: it chooses which stage
+     *  is being talked about. */
+    onSelect?: (id: string) => void;
+    /** Which one is chosen, when they can be chosen. It is not `current`: one thing
+     *  is where the record is at, another which stage I am looking at. */
+    selected?: string;
+    /** `trail` side by side, `stacked` one per row. Without it the surface's density
+     *  decides — it is what knows how much width there is. */
+    layout?: "trail" | "stacked";
+}): import("react").JSX.Element;