@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/foundations/theme.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export type Theme = "system" | "light" | "dark";
+/** What the palette actually is once `system` has been looked up. */
+export type ResolvedTheme = "light" | "dark";
+export declare const THEMES: readonly Theme[];
+/** The attribute the stylesheet reads. */
+export declare const THEME_ATTRIBUTE = "data-theme";
+/** `system` is the operating system's answer; the other two are themselves. Pure, so it can
+ *  be tested without a browser. */
+export declare function resolveTheme(theme: Theme, systemPrefersDark: boolean): ResolvedTheme;
+/** True for a string that is one of the three values — what comes out of storage or a URL
+ *  is `string | null`, and this is the way back to `Theme`. */
+export declare function isTheme(value: unknown): value is Theme;
+/** Writes the choice on an element. `system` REMOVES the attribute: the stylesheet then
+ *  follows `prefers-color-scheme` by itself, and an attribute saying "system" would be a
+ *  value no selector reads. Returns nothing; the DOM is the output. */
+export declare function applyTheme(theme: Theme, element?: Element): void;
+type ThemeValue = {
+    /** What the app chose. */
+    theme: Theme;
+    /** What the palette is — `system` already looked up. */
+    resolved: ResolvedTheme;
+    setTheme: (next: Theme) => void;
+};
+export type ThemeProviderProps = {
+    /** Controlled: the app owns the value (and persists it). */
+    value?: Theme;
+    /** Uncontrolled: the starting choice. */
+    defaultValue?: Theme;
+    /** Called with every choice, controlled or not — the place to persist it. */
+    onChange?: (next: Theme) => void;
+    /** Where `data-theme` is written. `<html>` by default; pass an element to theme a subtree
+     *  (a preview, a story). A portal mounted outside it keeps the document's theme. */
+    element?: Element | null;
+    children?: ReactNode;
+};
+export declare function ThemeProvider({ value, defaultValue, onChange, element, children, }: ThemeProviderProps): import("react").JSX.Element;
+/** The choice, the palette it resolves to, and the way to change it. Without a provider it
+ *  still reads (what `<html>` and the OS say) and `setTheme` writes `<html>` directly, so a
+ *  one-off call site works without wrapping the app. */
+export declare function useTheme(): ThemeValue;
+export {};

package/dist/foundations/theme.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, useSyncExternalStore, } from "react";
+export const THEMES = ["system", "light", "dark"];
+/** The attribute the stylesheet reads. */
+export const THEME_ATTRIBUTE = "data-theme";
+/** `system` is the operating system's answer; the other two are themselves. Pure, so it can
+ *  be tested without a browser. */
+export function resolveTheme(theme, systemPrefersDark) {
+    if (theme === "system")
+        return systemPrefersDark ? "dark" : "light";
+    return theme;
+}
+/** True for a string that is one of the three values — what comes out of storage or a URL
+ *  is `string | null`, and this is the way back to `Theme`. */
+export function isTheme(value) {
+    return value === "system" || value === "light" || value === "dark";
+}
+/** Writes the choice on an element. `system` REMOVES the attribute: the stylesheet then
+ *  follows `prefers-color-scheme` by itself, and an attribute saying "system" would be a
+ *  value no selector reads. Returns nothing; the DOM is the output. */
+export function applyTheme(theme, element = document.documentElement) {
+    if (theme === "system")
+        element.removeAttribute(THEME_ATTRIBUTE);
+    else
+        element.setAttribute(THEME_ATTRIBUTE, theme);
+}
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+/** The operating system's preference, live. Server snapshot: light — the same as the
+ *  stylesheet's default when it cannot ask. */
+function useSystemPrefersDark() {
+    return useSyncExternalStore((notify) => {
+        const query = window.matchMedia(DARK_QUERY);
+        query.addEventListener("change", notify);
+        return () => query.removeEventListener("change", notify);
+    }, () => window.matchMedia(DARK_QUERY).matches, () => false);
+}
+/** What `<html>` says right now — read for code that has no provider above it (an editor
+ *  that has to pick a built-in theme) and must still follow a switch made elsewhere. */
+function useRootAttribute() {
+    return useSyncExternalStore((notify) => {
+        const observer = new MutationObserver(notify);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [THEME_ATTRIBUTE],
+        });
+        return () => observer.disconnect();
+    }, () => document.documentElement.getAttribute(THEME_ATTRIBUTE), () => null);
+}
+const Ctx = createContext(null);
+export function ThemeProvider({ value, defaultValue = "system", onChange, element, children, }) {
+    const [own, setOwn] = useState(defaultValue);
+    const theme = value ?? own;
+    const systemDark = useSystemPrefersDark();
+    const setTheme = useCallback((next) => {
+        setOwn(next);
+        onChange?.(next);
+    }, [onChange]);
+    /* An effect and not a render-time write: the DOM is outside React's tree, and writing it
+       during render would run on the server and twice in StrictMode. */
+    useEffect(() => {
+        const target = element === undefined ? document.documentElement : element;
+        if (target === null)
+            return;
+        applyTheme(theme, target);
+        return () => target.removeAttribute(THEME_ATTRIBUTE);
+    }, [theme, element]);
+    const context = useMemo(() => ({ theme, resolved: resolveTheme(theme, systemDark), setTheme }), [theme, systemDark, setTheme]);
+    return _jsx(Ctx.Provider, { value: context, children: children });
+}
+/** The choice, the palette it resolves to, and the way to change it. Without a provider it
+ *  still reads (what `<html>` and the OS say) and `setTheme` writes `<html>` directly, so a
+ *  one-off call site works without wrapping the app. */
+export function useTheme() {
+    const provided = useContext(Ctx);
+    const attribute = useRootAttribute();
+    const systemDark = useSystemPrefersDark();
+    return useMemo(() => {
+        if (provided !== null)
+            return provided;
+        const theme = isTheme(attribute) ? attribute : "system";
+        return {
+            theme,
+            resolved: resolveTheme(theme, systemDark),
+            setTheme: (next) => applyTheme(next),
+        };
+    }, [provided, attribute, systemDark]);
+}

package/dist/foundations/types.d.ts

@@ -0,0 +1,23 @@
+/** Which background something is drawn on.
+ *
+ *  The interface has TWO surfaces and the piece does not behave the same on
+ *  both: on the canvas, a ghost button uses the navigation blue (8.26:1); on
+ *  the chrome that blue gives 1.4:1 and the lightened one has to be used.
+ *
+ *  It is a PROP and not a context on purpose — the opposite of `Density`. The
+ *  color is decided per element and it has to be auditable one at a time; a
+ *  global theme would resolve it by inheritance and then the decision would not
+ *  be visible in the calling code. See the long note in `system/density.tsx`. */
+export type Surface = "canvas" | "chrome";
+/** The meaning of a state color. It is NOT a decorative palette.
+ *
+ *  The moment a tag uses a hue because some variety was needed, all six stop
+ *  meaning anything and you have to read the word anyway — and then the color
+ *  is redundant. `neutral` is the default precisely because of that: most tags
+ *  in a catalog are CLASSIFICATIONS, not states. */
+export type Tone = "neutral" | "info" | "good" | "warn" | "bad" | "accent";
+/** The size of a control, tied to `--size-control-*`.
+ *
+ *  Three and not five: a fourth intermediate step gets picked out of habit and
+ *  stops meaning a place. */
+export type Size = "sm" | "md" | "lg";

package/dist/foundations/types.js

@@ -0,0 +1,50 @@
+/* ==================================================================== *
+ *  THE SHARED TYPES — and why they live in a single place.
+ *
+ *  `Surface` was defined TWICE, in `button/` and in `record/`. Both copies
+ *  said the same thing, so the compiler never complained — and that is exactly
+ *  the problem: the day a third surface appears, one of the two gets updated
+ *  and the other does not, and nothing catches it until someone passes
+ *  `"chrome"` to a component that no longer accepts it.
+ *
+ *  What goes in here has a test: **more than one component family uses it AND
+ *  it belongs to none of them**. A type that only `list/` uses lives in
+ *  `list/`, even if it is shared across its three files.
+ * ==================================================================== */
+export {};
+/* ==================================================================== *
+ *  THE SYSTEM'S TWO API CONVENTIONS
+ *
+ *  They are here and not in the README because a convention that lives in the
+ *  documentation breaks in the first component written in a hurry. Here it is
+ *  read by whoever is going to write the next component.
+ *
+ *  ── 1. How a callback is named ──────────────────────────────────────
+ *
+ *      onXChange   the component proposes a NEW value for `x`, and whoever
+ *                  uses it decides whether to accept it. It ALWAYS goes with
+ *                  the `x` prop.
+ *                  → onTermsChange(terms), onSelectedChange(set), onSortChange(sort)
+ *
+ *      onX         something happened that is not a value change: an intent.
+ *                  → onClose(), onOpen(), onPromote(), onBrowseAll()
+ *
+ *  The test for knowing which one: **is there a prop with that name next to
+ *  it?** If `value` exists, it is `onValueChange`. If not, it is an event and
+ *  goes without a suffix.
+ *
+ *  ── 2. Controlled, always ───────────────────────────────────────────
+ *
+ *  Any state the consumer might want to read, store in the URL or restore on
+ *  reload is CONTROLLED: `value` + `onValueChange`, with no internal memory.
+ *  That is what lets the entire workspace live in the hash.
+ *
+ *  The exception, and there is only one: **what dies with the component and
+ *  nobody cares about afterwards.** An open menu, an expanded filter panel, the
+ *  half-typed text in the search box. That does keep state inside, because
+ *  exposing it would force every consumer to declare a `useState` for something
+ *  they are never going to read.
+ *
+ *  Put another way: if it makes sense to send it to a colleague over chat so
+ *  they see the same thing, it is controlled.
+ * ==================================================================== */

package/dist/foundations/variants.d.ts

@@ -0,0 +1,19 @@
+/** The system's `tv`: a recipe of base classes and variants, merged with the scales above. */
+export declare const tv: import("tailwind-variants/config").TV<import("tailwind-variants/config").TVCustomConfig>;
+/** Joins classes, and when two set the same property, the LAST one wins. */
+export declare function cn(...classes: (string | false | null | undefined)[]): string;
+/**
+ * The focus ring of every interactive piece: the same outline `Button` draws, driven by
+ * React Aria's `isFocusVisible` — keyboard focus shows it, a mouse click does not.
+ */
+export declare const focusRing: import("tailwind-variants/config").TVReturnType<{
+    isFocusVisible: {
+        false: string;
+        true: string;
+    };
+}, undefined, "outline-primary outline-offset-2 forced-colors:outline-[Highlight]", undefined, undefined, undefined>;
+/**
+ * A React Aria `className` can be a string or a function of the render state. This puts the
+ * system's classes first and the consumer's after, so the consumer's win where they fight.
+ */
+export declare function composeClasses<T>(className: string | ((state: T) => string) | undefined, base: string): string | ((state: T) => string);

package/dist/foundations/variants.js

@@ -0,0 +1,48 @@
+import { composeRenderProps } from "react-aria-components";
+import { cnMerge, createTV } from "tailwind-variants/config";
+/**
+ * How a component's classes are composed — the variants of a recipe, and the merge of a
+ * consumer's `className` on top of the system's.
+ *
+ * Context: merging Tailwind classes needs to know which classes fight over the same
+ * property. The merger only knows Tailwind's default scales, and this system has its own:
+ * `text-meta` is a SIZE and `text-ink` a COLOR, but to a merger that has never heard of
+ * `meta`, both are `text-*` colors — and `text-meta text-ink` silently loses one. Every
+ * named scale in `tokens.css` is declared here so the merger reads it as what it is.
+ * `tests/variants.test.ts` holds each pair that used to collide.
+ */
+const twMergeConfig = {
+    extend: {
+        theme: {
+            text: ["micro", "meta", "body", "lead", "title", "display"],
+            radius: ["mark", "control", "box", "panel", "pill"],
+            shadow: ["raised", "float", "window"],
+        },
+    },
+};
+/** The system's `tv`: a recipe of base classes and variants, merged with the scales above. */
+export const tv = createTV({ twMergeConfig });
+/** Joins classes, and when two set the same property, the LAST one wins. */
+export function cn(...classes) {
+    return cnMerge(...classes)({ twMergeConfig }) ?? "";
+}
+/**
+ * The focus ring of every interactive piece: the same outline `Button` draws, driven by
+ * React Aria's `isFocusVisible` — keyboard focus shows it, a mouse click does not.
+ */
+export const focusRing = tv({
+    base: "outline-primary outline-offset-2 forced-colors:outline-[Highlight]",
+    variants: {
+        isFocusVisible: {
+            false: "outline-0",
+            true: "outline-2",
+        },
+    },
+});
+/**
+ * A React Aria `className` can be a string or a function of the render state. This puts the
+ * system's classes first and the consumer's after, so the consumer's win where they fight.
+ */
+export function composeClasses(className, base) {
+    return composeRenderProps(className, (own) => cn(base, own));
+}

package/dist/foundations/xlsx.d.ts

@@ -0,0 +1,86 @@
+/**
+ * ESCRIBIR UNA PLANILLA DE EXCEL, sin librería.
+ *
+ * ── Por qué no hay dependencia ──────────────────────────────────────
+ *
+ * Un `.xlsx` es un ZIP con seis XML adentro, y el ZIP sólo se pone difícil
+ * cuando hay que comprimir. **No hay que comprimir**: el formato admite entradas
+ * `stored` —método 0, los bytes tal cual— y Excel las abre igual. Lo único que
+ * queda del ZIP es un CRC32 y tres encabezados de posiciones fijas.
+ *
+ * Del otro lado, las librerías del rubro pesan entre medio mega y uno, traen su
+ * propio modelo de libro, de estilos y de fórmulas, y este sistema de diseño se
+ * publica como fuente para que lo compile quien lo consuma — incluido, algún
+ * día, un teléfono. Un mega de escritor de planillas adentro de un paquete de
+ * componentes lo carga todo el que importe un botón.
+ *
+ * ── Qué hace y qué no ───────────────────────────────────────────────
+ *
+ * Hace lo que una grilla necesita para no mentir al salir: texto y números en su
+ * tipo real, celdas combinadas, formato de número por celda, negrita, ancho de
+ * columna y paneles congelados. **Una celda ausente no se escribe**, que es como
+ * el formato dice «acá no hay nada» — un agujero sigue siendo un agujero
+ * adentro del archivo.
+ *
+ * No hace fórmulas, ni colores, ni bordes, ni varias hojas. El día que alguna de
+ * esas haga falta se agrega acá; ninguna cambia la forma de lo que ya está.
+ *
+ * ── Dónde termina esto y empieza el navegador ───────────────────────
+ *
+ * `writeXlsx` devuelve BYTES y no un archivo: `Uint8Array` existe en todos
+ * lados, y así lo mismo sirve para bajar un archivo, para mandarlo por la red o
+ * para escribirlo en una prueba. Bajarlo es `downloadXlsx`, que es la única
+ * función de este archivo que necesita un navegador.
+ */
+/** Una celda. La posición va en la celda y no en una matriz porque una grilla
+ *  con agujeros es mayormente vacío, y una matriz de 288 posiciones para 40
+ *  valores es una matriz que hay que rellenar con algo. */
+export type XlsxCell = {
+    /** Desde cero, como los índices de todo lo demás. */
+    row: number;
+    column: number;
+    /** Un número entra como número: sin eso, Excel recibe texto y no suma, que es
+     *  la primera cosa que alguien intenta hacer con una planilla exportada. */
+    value: string | number;
+    bold?: boolean;
+    /** El código de formato de Excel —`#,##0.00`, `0.0%`, `#,##0 "Bs."`—, que es
+     *  otra cosa que una función de JavaScript: un archivo no puede llevarse una
+     *  función adentro. */
+    format?: string;
+};
+/** Una combinación: desde dónde, y cuántas filas y columnas cubre. */
+export type XlsxMerge = {
+    row: number;
+    column: number;
+    rows: number;
+    columns: number;
+};
+export type XlsxSheet = {
+    /** El nombre de la pestaña. Excel prohíbe `[]:*?/\` y más de 31 caracteres, y
+     *  un nombre inválido no da un error: da un archivo que no abre. Se recorta
+     *  acá. */
+    name: string;
+    cells: readonly XlsxCell[];
+    merges?: readonly XlsxMerge[];
+    /** El ancho de cada columna, en caracteres. Faltantes = el ancho por omisión. */
+    widths?: readonly number[];
+    /** Cuántas filas de arriba y columnas de la izquierda se quedan quietas al
+     *  desplazarse. Es lo mismo que hace `sticky` en la grilla, y por la misma
+     *  razón: un número sin su rótulo es un número suelto. */
+    freeze?: {
+        rows: number;
+        columns: number;
+    };
+};
+/** El nombre de una columna en la notación de Excel: 0 → A, 25 → Z, 26 → AA. */
+export declare function columnName(index: number): string;
+/** Los bytes de un `.xlsx` con una hoja. */
+export declare function writeXlsx(sheet: XlsxSheet): Uint8Array<ArrayBuffer>;
+/**
+ * Bajar los bytes como archivo.
+ *
+ * Es la única función de este archivo que necesita un navegador, y por eso está
+ * separada de `writeXlsx`: lo que se escribe y lo que se baja son dos cosas, y
+ * del otro lado —el servidor, un teléfono, una prueba— la segunda no existe.
+ */
+export declare function downloadXlsx(name: string, bytes: Uint8Array): void;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Context: the package is four levels, composed bottom-up, and each level only imports
+ * from the ones below:
+ *
+ *   foundations  the decisions — tokens, copy, density, surfaces, slots
+ *   primitives   a piece that does not know which screen it is on
+ *   components   primitives composed to answer one question of the product
+ *   views        the two macros: one record (`Record`), or N records (`List`)
+ *
+ * Each level is also its own entry (`@sincpro/web-ui/primitives`, …), so what a level
+ * offers is one import away. What a family makes public is what its `index.ts` exports.
+ *
+ * If something needs to know what an invoice, a dataset or a customer is, it does not
+ * belong here: that is domain, and it lives in the application.
+ */
+export * from "./components/index.js";
+export * from "./foundations/index.js";
+export * from "./primitives/index.js";
+export * from "./views/index.js";

package/dist/index.js

@@ -0,0 +1,19 @@
+/**
+ * Context: the package is four levels, composed bottom-up, and each level only imports
+ * from the ones below:
+ *
+ *   foundations  the decisions — tokens, copy, density, surfaces, slots
+ *   primitives   a piece that does not know which screen it is on
+ *   components   primitives composed to answer one question of the product
+ *   views        the two macros: one record (`Record`), or N records (`List`)
+ *
+ * Each level is also its own entry (`@sincpro/web-ui/primitives`, …), so what a level
+ * offers is one import away. What a family makes public is what its `index.ts` exports.
+ *
+ * If something needs to know what an invoice, a dataset or a customer is, it does not
+ * belong here: that is domain, and it lives in the application.
+ */
+export * from "./components/index.js";
+export * from "./foundations/index.js";
+export * from "./primitives/index.js";
+export * from "./views/index.js";

package/dist/primitives/block/Block.d.ts

@@ -0,0 +1,66 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+/**
+ * Context: the diagnosis was not a lack of ornaments, it was that a view was a
+ * pile of `<div className="flex flex-col gap-3">` with no hierarchy — the lines,
+ * the taxes and the payments floated at the same height and nothing said where one
+ * ends and the other begins. In a 1.200 px panel that reads as a loose sheet.
+ *
+ * The block has an edge (a hair of border and the radius of the scale, not a
+ * shadow: over the canvas a shadow alone looks blurry) and its title lives ON the
+ * border, not floating above it.
+ */
+/**
+ * What state whatever this section asks for or shows is in.
+ *
+ * Context: it is the only thing worth copying from the old console — each section
+ * said «Required» or «(Incomplete)» in its header, so you could see what is
+ * missing WITHOUT opening any of them. The system doesn't know what «incomplete»
+ * means for an invoice, so the word is put there by whoever composes.
+ */
+export type BlockStatus = {
+    label: string;
+    tone?: Tone;
+};
+export type BlockProps = {
+    /** Without a title the block is only the box: it serves to group without
+     *  naming. */
+    title?: string;
+    count?: number;
+    aside?: ReactNode;
+    /** What can be done with THIS block, to the right of its title. */
+    actions?: ReactNode;
+    status?: BlockStatus;
+    /** Without padding, for whatever already brings its own frame: a table inside a
+     *  box with borders is two frames arguing. */
+    flush?: boolean;
+    children: ReactNode;
+};
+export declare function Block({ title, count, aside, actions, status, flush, children, }: BlockProps): import("react").JSX.Element;
+/**
+ * A cut in the page: between two groups of fields, or between a sheet of
+ * facts and the table that hangs off them.
+ *
+ * Without a label it is a hairline. With one it is Odoo's separator — the
+ * word names what starts, the line says the previous group ended. `FormSection`
+ * is a GROUP of fields; this is what goes BETWEEN groups. A block with a
+ * border is a third thing: a region, not a cut.
+ */
+export declare function Rule({ label }: {
+    label?: string;
+}): import("react").JSX.Element;
+/**
+ * `DATOS ── 3`. The title of a section and nothing else.
+ *
+ * Context: proportional and not monospaced — it is a written title, at the
+ * body size, in medium ink. The count is tabular, because it is a figure.
+ *
+ * The `aside` goes next to the title and not pushed to the opposite edge: with
+ * `justify-between`, «El vistazo» and «20 de 1.000 filas» ended up half a screen
+ * apart and the phrase read as split in two.
+ */
+export declare function SectionHeader({ title, count, aside, }: {
+    title: string;
+    count?: number;
+    aside?: ReactNode;
+}): import("react").JSX.Element;

package/dist/primitives/block/Block.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tag } from "../tag/Tag.js";
+export function Block({ title, count, aside, actions, status, flush = false, children, }) {
+    const withHeader = title !== undefined || actions !== undefined || status !== undefined;
+    return (_jsxs("section", { className: "min-w-0 rounded-box border border-line bg-surface", children: [!withHeader ? null : (_jsxs("header", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-line px-3 py-2", children: [title === undefined ? null : (_jsx(SectionHeader, { title: title, count: count, aside: aside })), status === undefined ? null : (_jsx(Tag, { tone: status.tone ?? "neutral", children: status.label })), actions === undefined ? null : (_jsx("div", { className: "ml-auto flex flex-wrap items-center gap-1", children: actions }))] })), _jsx("div", { className: flush ? "" : "px-3 py-2.5", children: children })] }));
+}
+/**
+ * A cut in the page: between two groups of fields, or between a sheet of
+ * facts and the table that hangs off them.
+ *
+ * Without a label it is a hairline. With one it is Odoo's separator — the
+ * word names what starts, the line says the previous group ended. `FormSection`
+ * is a GROUP of fields; this is what goes BETWEEN groups. A block with a
+ * border is a third thing: a region, not a cut.
+ */
+export function Rule({ label }) {
+    if (label === undefined) {
+        return _jsx("hr", { className: "border-0 border-t border-line" });
+    }
+    return (_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "shrink-0 text-micro font-medium text-muted", children: label }), _jsx("span", { className: "h-px min-w-0 flex-1 bg-line", "aria-hidden": true })] }));
+}
+/**
+ * `DATOS ── 3`. The title of a section and nothing else.
+ *
+ * Context: proportional and not monospaced — it is a written title, at the
+ * body size, in medium ink. The count is tabular, because it is a figure.
+ *
+ * The `aside` goes next to the title and not pushed to the opposite edge: with
+ * `justify-between`, «El vistazo» and «20 de 1.000 filas» ended up half a screen
+ * apart and the phrase read as split in two.
+ */
+export function SectionHeader({ title, count, aside, }) {
+    return (_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [_jsxs("h2", { className: "text-meta font-medium text-ink", children: [title, count === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "mx-1.5 text-line-strong", children: "\u2500\u2500" }), _jsx("span", { className: "tabular-nums", children: count })] }))] }), aside === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: "text-meta text-line-strong", children: "\u00B7" }), aside] }))] }));
+}

package/dist/primitives/block/Line.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export declare function Line({ start, center, end, 
+/**
+ * Lo que PIDE cada lado antes de que la línea se parta. Los dos piden lo
+ * mismo —es lo que centra el centro— así que es un solo valor y no dos.
+ */
+asks, 
+/** Lo que pide el centro. `auto` es «lo que mida»; un campo de búsqueda pide
+ *  su ancho tope, que es lo que hace que no se estire a 700 px. */
+centerAsks, gap, align, }: {
+    start?: ReactNode;
+    center?: ReactNode;
+    end?: ReactNode;
+    asks?: string;
+    centerAsks?: string;
+    gap?: string;
+    align?: string;
+}): import("react").JSX.Element;

package/dist/primitives/block/Line.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* ==================================================================== *
+ *  LA LÍNEA DE TRES ZONAS — y por qué el centro se centra contra la LÍNEA.
+ *
+ *  Es la forma de las dos bandas del producto: la del registro —de dónde
+ *  vengo · lo que cuelga de esto · cuál de ochenta soy— y la de la lista —de
+ *  dónde vengo · qué estoy buscando · qué página—. Las dos tienen el mismo
+ *  problema y por eso tienen una sola solución.
+ *
+ *  ── El problema: el centro no estaba en el centro ───────────────────
+ *
+ *  Con `mx-auto`, o con una grilla `auto 1fr max-content`, el centro queda
+ *  donde SOBRA lugar. Y entonces un nombre de cincuenta caracteres a la
+ *  izquierda —que en este producto es lo normal— empuja los botones contra el
+ *  borde derecho, y la misma pantalla con un nombre corto los dibuja en otro
+ *  lado. Dos registros seguidos ponen sus controles en dos lugares distintos:
+ *  eso no es un centro, es un resto.
+ *
+ *  ── La regla: los dos lados PIDEN lo mismo ──────────────────────────
+ *
+ *  Los lados piden el mismo ancho y crecen parejo, así que lo que sobra se
+ *  reparte en dos mitades iguales y el centro cae en el medio de la línea, con
+ *  o sin migas, con o sin paginador. Lo que no entra en una mitad se recorta
+ *  adentro de su mitad —para eso `min-w-0`— en vez de empujar al vecino.
+ *
+ *  ── Y se parte sola ─────────────────────────────────────────────────
+ *
+ *  No hay ningún umbral acá: ni consulta de medios, ni de contenedor, ni una
+ *  rama por densidad. Cada zona declara lo que PIDE y `flex-wrap` decide: en
+ *  una banda angosta el centro ya no entra al lado de las migas y baja entero
+ *  al renglón siguiente, con el paginador atrás. Es lo mismo que hace una fila
+ *  de lista, y por la misma razón: un umbral no sabe si la línea trae tres
+ *  contadores o nueve.
+ * ==================================================================== */
+export function Line({ start, center, end, 
+/**
+ * Lo que PIDE cada lado antes de que la línea se parta. Los dos piden lo
+ * mismo —es lo que centra el centro— así que es un solo valor y no dos.
+ */
+asks = "var(--container-trail)", 
+/** Lo que pide el centro. `auto` es «lo que mida»; un campo de búsqueda pide
+ *  su ancho tope, que es lo que hace que no se estire a 700 px. */
+centerAsks = "auto", gap = "gap-x-4 gap-y-2", align = "items-center", }) {
+    return (_jsxs("div", { className: `flex min-w-0 flex-wrap ${align} ${gap}`, children: [_jsx("div", { className: "flex min-w-0 flex-1 items-center", style: { flexBasis: asks }, children: start }), _jsx("div", { className: "flex min-w-0 shrink items-center justify-center", style: { flexBasis: centerAsks, flexGrow: 0 }, children: center }), _jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end", style: { flexBasis: asks }, children: end })] }));
+}

package/dist/primitives/block/SectionGrid.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+/**
+ * Context: the rule that decides whether two sections go side by side is
+ * DEPENDENCY, not space. Two that don't govern each other —the invoice lines
+ * and its payments— go side by side; two that do —choosing the customer and then
+ * its price list— go stacked, because the vertical order is the only thing that says which
+ * one comes first.
+ *
+ * That is why it is a grid and not a `flex-wrap`: wrapping arranges by available
+ * width, which is a decision about space.
+ *
+ * And it asks `@container` and not `md:`: with four panels open each one measures
+ * 380 px on a 1.600 screen, and a window rule would put two 190 px columns inside
+ * each panel. **Whoever mounts the view has to declare `@container` on its
+ * container** — the composer already does.
+ */
+export declare function SectionGrid({ children, 
+/** A single column until the panel is truly large. For sections with a table
+ *  inside: two 300 px tables don't read better than one 600 px one. */
+wide, }: {
+    children: ReactNode;
+    wide?: boolean;
+}): import("react").JSX.Element;
+/** A section that takes up both columns: a wide table, the glance at twelve
+ *  columns. Without this you would have to take it out of the grid and set up
+ *  another one below, which is how a screen ends up with three grids and none of
+ *  them aligned. */
+export declare function FullWidth({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/primitives/block/SectionGrid.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Context: the rule that decides whether two sections go side by side is
+ * DEPENDENCY, not space. Two that don't govern each other —the invoice lines
+ * and its payments— go side by side; two that do —choosing the customer and then
+ * its price list— go stacked, because the vertical order is the only thing that says which
+ * one comes first.
+ *
+ * That is why it is a grid and not a `flex-wrap`: wrapping arranges by available
+ * width, which is a decision about space.
+ *
+ * And it asks `@container` and not `md:`: with four panels open each one measures
+ * 380 px on a 1.600 screen, and a window rule would put two 190 px columns inside
+ * each panel. **Whoever mounts the view has to declare `@container` on its
+ * container** — the composer already does.
+ */
+export function SectionGrid({ children, 
+/** A single column until the panel is truly large. For sections with a table
+ *  inside: two 300 px tables don't read better than one 600 px one. */
+wide = false, }) {
+    return (_jsx("div", { className: `grid min-w-0 gap-(--spacing-block) ${wide ? "@4xl:grid-cols-2" : "@2xl:grid-cols-2"}`, children: children }));
+}
+/** A section that takes up both columns: a wide table, the glance at twelve
+ *  columns. Without this you would have to take it out of the grid and set up
+ *  another one below, which is how a screen ends up with three grids and none of
+ *  them aligned. */
+export function FullWidth({ children }) {
+    return _jsx("div", { className: "min-w-0 @2xl:col-span-2", children: children });
+}