@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/record/StatusBar.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { useSurface } from "../../foundations/surface.js";
+import { cn, focusRing, tv } from "../../foundations/variants.js";
+import { Check, CircleAlert } from "lucide-react";
+import { Radio, RadioGroup } from "react-aria-components";
+/** The track the stages sit in. Same rail as the other grouped controls on each
+ *  surface: a tinted well with a hairline, and on the chrome TRANSLUCENT —ink at 8 %
+ *  over the navy— so the header's brand wash goes across it and it reads as a layer,
+ *  not as one more box stuck on top. */
+const trackStyles = tv({
+    base: "min-w-0 gap-0.5 rounded-control border p-0.5",
+    variants: {
+        surface: {
+            canvas: "border-line bg-ground",
+            chrome: "border-chrome-ink/15 bg-chrome-ink/8",
+        },
+        layout: {
+            trail: "inline-flex max-w-full shrink-0 items-stretch",
+            stacked: "flex w-full flex-col",
+        },
+    },
+});
+/** One stage. Three steps —done, current, next— and ONE way of painting each, the
+ *  same in both layouts and with or without `onSelect`:
+ *
+ *      done     ink, medium, with a check — the path behind
+ *      current  FILLED — the only solid segment in the track
+ *      next     muted — in sight, not reached
+ *
+ *  The current stage is the only fill. Being selectable adds hover and press TINTS
+ *  (never a fill), and the stage being viewed is an underline under its label: a
+ *  mark of a different KIND, so it can sit on any of the three steps — the current
+ *  one included — without competing with the fill. */
+const stageStyles = tv({
+    extend: focusRing,
+    base: "relative flex min-w-0 items-center gap-1.5 rounded-mark px-2.5 text-meta whitespace-nowrap transition-colors duration-(--duration-instant)",
+    variants: {
+        surface: { canvas: "", chrome: "outline-chrome-link" },
+        step: { done: "font-medium", current: "font-semibold", next: "" },
+        failed: { true: "", false: "" },
+        selectable: { true: "cursor-pointer", false: "" },
+        layout: { trail: "h-(--size-control-sm)", stacked: "w-full py-1 text-left" },
+    },
+    compoundVariants: [
+        /* A keyboard ring is drawn OUTSIDE the segment, over its neighbours: lifted
+           above them, or the next segment's paint covers half of it. */
+        { isFocusVisible: true, class: "z-10" },
+        { surface: "canvas", step: "done", class: "text-ink" },
+        { surface: "canvas", step: "next", class: "text-muted" },
+        { surface: "canvas", step: "current", failed: false, class: "bg-primary text-surface" },
+        { surface: "canvas", step: "current", failed: true, class: "bg-danger text-surface" },
+        { surface: "chrome", step: "done", class: "text-chrome-ink" },
+        { surface: "chrome", step: "next", class: "text-chrome-muted" },
+        {
+            surface: "chrome",
+            step: "current",
+            failed: false,
+            class: "bg-chrome-ink text-chrome",
+        },
+        { surface: "chrome", step: "current", failed: true, class: "bg-chrome-bad text-chrome" },
+        {
+            selectable: true,
+            surface: "canvas",
+            step: ["done", "next"],
+            class: "hover:bg-ink/6 pressed:bg-ink/10",
+        },
+        {
+            selectable: true,
+            surface: "chrome",
+            step: ["done", "next"],
+            class: "hover:bg-chrome-ink/12 pressed:bg-chrome-ink/18",
+        },
+        {
+            selectable: true,
+            surface: "canvas",
+            step: "current",
+            failed: false,
+            class: "hover:bg-primary-hover",
+        },
+    ],
+});
+/** 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 function StatusBar({ stages, current, failed = false, surface: surfaceProp, onSelect, selected, layout, }) {
+    const d = useDensity();
+    const surface = useSurface(surfaceProp);
+    const copy = useUiCopy();
+    const at = stages.findIndex((s) => s.id === current);
+    const shape = layout ?? byDensity(d, "trail", "stacked");
+    const stacked = shape === "stacked";
+    const selectable = onSelect !== undefined;
+    function stepOf(i) {
+        if (i === at)
+            return "current";
+        return at >= 0 && i < at ? "done" : "next";
+    }
+    /** The check, the alert, or nothing. Stacked keeps the slot even when it is
+     *  empty, so the labels line up in a column; side by side an empty slot would
+     *  only be a gap. */
+    function mark(step) {
+        const icon = "size-(--size-icon-sm) shrink-0";
+        if (step === "done")
+            return _jsx(Check, { className: icon, strokeWidth: 2, "aria-hidden": true });
+        if (step === "current" && failed) {
+            return _jsx(CircleAlert, { className: icon, strokeWidth: 2, "aria-hidden": true });
+        }
+        return stacked ? _jsx("span", { className: icon, "aria-hidden": true }) : null;
+    }
+    function content(stage, step, viewed) {
+        return (_jsxs(_Fragment, { children: [mark(step), _jsx("span", { "aria-current": step === "current" && selectable ? "step" : undefined, className: cn("min-w-0 truncate", viewed &&
+                        "underline decoration-2 underline-offset-4 " +
+                            (step === "current"
+                                ? "decoration-current"
+                                : surface === "chrome"
+                                    ? "decoration-chrome-link"
+                                    : "decoration-primary")), children: stage.label })] }));
+    }
+    const track = trackStyles({ surface, layout: shape });
+    if (!selectable) {
+        return (_jsx("ol", { "aria-label": copy.record.status, className: track, children: stages.map((stage, i) => {
+                const step = stepOf(i);
+                return (_jsx("li", { "aria-current": step === "current" ? "step" : undefined, "data-failed": step === "current" && failed ? true : undefined, className: stageStyles({ surface, step, failed, selectable, layout: shape }), children: content(stage, step, false) }, stage.id));
+            }) }));
+    }
+    return (_jsx(RadioGroup, { "aria-label": copy.record.status, orientation: stacked ? "vertical" : "horizontal", ...(selected === undefined ? {} : { value: selected }), onChange: onSelect, className: track, children: stages.map((stage, i) => {
+            const step = stepOf(i);
+            return (_jsx(Radio, { value: stage.id, "data-failed": step === "current" && failed ? true : undefined, className: ({ isFocusVisible }) => stageStyles({
+                    surface,
+                    step,
+                    failed,
+                    selectable,
+                    layout: shape,
+                    isFocusVisible,
+                }), children: ({ isSelected }) => content(stage, step, isSelected) }, stage.id));
+        }) }));
+}

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

@@ -0,0 +1,36 @@
+import { type DirtyState } from "./DirtyActions.js";
+import type { Surface } from "../../foundations/types.js";
+import { type ReactElement, type ReactNode } from "react";
+export declare function isPrimary(node: ReactNode): node is ReactElement<{
+    role?: string;
+    surface?: Surface;
+    size?: string;
+}>;
+export type ThumbMode = "dirty" | "primary";
+/** What the rail shows and what the thumb bar takes over, decided from the actions and
+ *  the dirty state (see THE THUMB BAR above): dirty first, else the primary. `rail` is the
+ *  list of action nodes the rail draws; `primaries` the ones that move to the bar. */
+export declare function thumbPlan({ withRail, actions, dirty, }: {
+    withRail: boolean;
+    actions: ReactNode;
+    dirty: DirtyState | undefined;
+}): {
+    rail: ReactNode[];
+    primaries: ReactElement<{
+        role?: string;
+        surface?: Surface;
+        size?: string;
+    }>[];
+    mode: ThumbMode | null;
+};
+/** The bar itself. Last in the record, so sticky-to-the-bottom is also its reserved space.
+ *  On a wide record it is `display: none` and its wrapper measures nothing. */
+export declare function ThumbBar({ mode, dirty, primaries, }: {
+    mode: ThumbMode;
+    dirty: DirtyState | undefined;
+    primaries: readonly ReactElement<{
+        role?: string;
+        surface?: Surface;
+        size?: string;
+    }>[];
+}): import("react").JSX.Element;

package/dist/components/record/ThumbBar.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DirtyActions, } from "./DirtyActions.js";
+import { flatten } from "../../foundations/slots.js";
+import { SurfaceProvider } from "../../foundations/surface.js";
+import { cloneElement, isValidElement } from "react";
+/* ==================================================================== *
+ *  THE THUMB BAR — the record held in one hand.
+ *
+ *  On a desk the record's actions live in the rail, at the top, next to where
+ *  the eye starts. On a phone the top is the farthest place from the thumb,
+ *  and the rail scrolls away with the first swipe: the action the screen
+ *  exists for —«Registrar pago», «Publicar», «Guardar»— ends up two gestures
+ *  away. So when the RECORD is narrow (below `--container-handheld`, 40rem),
+ *  that one action moves to a bar stuck to the bottom of the screen:
+ *
+ *      ┌─ rail ───────────────────────────┐
+ *      │ Facturas › FAC/2026/0118    ‹ ›  │
+ *      │ [Imprimir]        borrador▸…     │   the rest stays here, or in `⋯`
+ *      ├──────────────────────────────────┤
+ *      │ …the sheet scrolls…              │
+ *      ├─ thumb bar ──────────────────────┤
+ *      │ [        Registrar pago        ] │   sticky to the bottom edge
+ *      └──────────────────────────────────┘
+ *
+ *  What goes in it is decided, not composed:
+ *
+ *   1. With `dirty`, the bar holds «sin guardar», Discard and Save — the same
+ *      precedence the rail already has: while there are unsaved changes the
+ *      only things that can be done are confirm or throw them away.
+ *   2. Otherwise, the action written with `role="primary"` and NOTHING else.
+ *      There is at most one per view (`make smoke`); the secondary ones stay in
+ *      the rail and its `⋯` menu. A bar of three buttons on a phone is three
+ *      buttons a thumb has to choose between, and the gold stops saying which.
+ *
+ *  ── Why the record's width and not the window's ──────────────────────
+ *
+ *  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
+ *  against, and the desk layout with it.
+ *
+ *  ── Why CSS, and why the primary is in the DOM twice ─────────────────
+ *
+ *  The rail copy is hidden and the bar shown by the same container query, so
+ *  there is no frame where both or neither are visible, it works on the server,
+ *  and there is no resize listener. `display: none` takes the hidden copy out of
+ *  the accessibility tree and out of the Tab order, so at any width exactly ONE
+ *  primary exists for a person, a screen reader and the smoke count.
+ *
+ *  ── Why sticky and not fixed ─────────────────────────────────────────
+ *
+ *  Sticky to the bottom, as the LAST thing in the record, is its own reserved
+ *  space: while the record scrolls the bar floats over it, and at the end it
+ *  settles in its place in the flow, under the last line — nothing is ever left
+ *  covered, with no padding to keep in sync with the bar's height. A `fixed` bar
+ *  would need that padding, and would stay on screen after the record ends.
+ *  `safe-bottom` keeps the buttons clear of a phone's home indicator.
+ * ==================================================================== */
+export function isPrimary(node) {
+    return isValidElement(node) && node.props.role === "primary";
+}
+/** What the rail shows and what the thumb bar takes over, decided from the actions and
+ *  the dirty state (see THE THUMB BAR above): dirty first, else the primary. `rail` is the
+ *  list of action nodes the rail draws; `primaries` the ones that move to the bar. */
+export function thumbPlan({ withRail, actions, dirty, }) {
+    const rail = withRail && actions !== undefined ? flatten(actions) : [];
+    const primaries = rail.filter(isPrimary);
+    const mode = !withRail
+        ? null
+        : dirty !== undefined
+            ? "dirty"
+            : primaries.length > 0
+                ? "primary"
+                : null;
+    return { rail, primaries, mode };
+}
+/** The bar itself. Last in the record, so sticky-to-the-bottom is also its reserved space.
+ *  On a wide record it is `display: none` and its wrapper measures nothing. */
+export function ThumbBar({ mode, dirty, primaries, }) {
+    return (_jsx("div", { className: "@container/record sticky bottom-0 z-20 mt-auto", children: _jsx(SurfaceProvider, { value: "canvas", children: _jsx("div", { "data-thumb-bar": mode, className: `hidden min-w-0 items-center gap-2 border-t border-line-strong bg-surface px-4 pt-3 safe-bottom @max-handheld/record:flex ${mode === "primary" ? "*:flex-1" : "justify-end *:first:mr-auto"}`, children: mode === "dirty" && dirty !== undefined ? (_jsx(DirtyActions, { ...dirty })) : (
+                /* On the bar's light surface whatever the rail's was, and `lg`: it is a
+                   single action alone in its row — what `lg` is for. */
+                primaries.map((node) => cloneElement(node, { key: node.key, surface: "canvas", size: "lg" }))) }) }) }));
+}

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

@@ -0,0 +1,6 @@
+export { Breadcrumb, type Crumb } from "./Breadcrumb.js";
+export { DirtyActions, type DirtyState, } from "./DirtyActions.js";
+export { Pager } from "./Pager.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

@@ -0,0 +1,8 @@
+/* RECORD PARTS — the header, status bar, pager and skeleton of one record. The `Record` view
+   composes them. */
+export { Breadcrumb } from "./Breadcrumb.js";
+export { DirtyActions, } from "./DirtyActions.js";
+export { Pager } from "./Pager.js";
+export { RecordSkeleton } from "./RecordSkeleton.js";
+export { SmartButton, SmartButtons } from "./SmartButtons.js";
+export { StatusBar } from "./StatusBar.js";

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

@@ -0,0 +1,58 @@
+import { type BuiltFilter } from "./FilterBuilder.js";
+import { type ModelDefinition } from "./model.js";
+export interface BuiltSort {
+    field: string;
+    descending?: boolean;
+}
+export interface BuiltLevel {
+    field: string;
+    grain?: string | null;
+}
+/** Un número plegado de las filas de un montón: `["sum", "row_count"]`. */
+export type BuiltFold = [string, string];
+/** Desde dónde empieza una página de montones — la misma forma que la paginación de filas. */
+export type BuiltPageStrategy = {
+    token?: string | null;
+} | {
+    rows?: number;
+};
+export interface BuiltGroupPagination {
+    limit?: number;
+    strategy?: BuiltPageStrategy;
+}
+export interface BuiltGrouping {
+    by?: BuiltLevel[];
+    totals?: Record<string, BuiltFold>;
+    /** Un filtro sobre lo que los montones plegaron: `count > 10`. Los nombres que admite son
+     *  los de `totals`, más `"count"`. */
+    having?: BuiltFilter;
+    /** En qué orden vuelven los montones: por el propio campo del nivel, por un nombre de
+     *  `totals`, o por `count`. */
+    order?: BuiltSort[];
+    /** Cuántos montones del primer nivel vuelven, y desde dónde. Ausente es todos. */
+    pagination?: BuiltGroupPagination;
+}
+/** La criteria tal como la declara el motor. Es lo que este componente arma y devuelve, y lo
+ *  que el editor de código muestra. */
+export interface BuiltCriteria {
+    where?: BuiltFilter;
+    order?: BuiltSort[];
+    grouping?: BuiltGrouping;
+    specification?: Record<string, Record<string, never>>;
+}
+export declare function CriteriaBuilder({ model, initial, focus, onApply, onCancel, }: {
+    model: ModelDefinition;
+    /** La criteria que ya estaba puesta. Reabrir tiene que seguir donde quedó. */
+    initial?: BuiltCriteria;
+    /**
+     * El campo de la condición que hay que mostrar primero: la ficha que alguien
+     * tocó en la barra.
+     *
+     * Sin esto, tocar un recorte abría el constructor en la regla uno y había que
+     * buscar entre doce la que uno venía mirando — que es la manera más rápida de
+     * editar la equivocada.
+     */
+    focus?: string;
+    onApply: (criteria: BuiltCriteria | undefined) => void;
+    onCancel?: () => void;
+}): import("react").JSX.Element;