@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/components/assist/assist.d.ts

@@ -0,0 +1,77 @@
+import { type UiCopy } from "../../foundations/copy.js";
+import type { ToastSpec } from "../../primitives/notice/Toast.js";
+import { type LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+/** The one mark of the assistant, everywhere it appears: the suggestion, the review, the
+ *  marker on a value, the event in the history. A robot and not sparkles — it says «an
+ *  automated assistant did this», which is a fact, not a celebration.
+ *
+ *  Exported so a screen that composes the assistant into a piece of its own — a `Callout`,
+ *  a `ActivityEvent` — uses the same mark and not a second one. */
+export declare const ASSIST_ICON: LucideIcon;
+/** Where a suggestion or a change comes from: «orden de compra PO/2026/0042», «las últimas
+ *  5 facturas del cliente». With `href` it is a real link; with `onOpen`, a button that the
+ *  screen answers. Without either it is said, not linked. */
+export type AssistSource = {
+    label: string;
+    href?: string;
+    onOpen?: () => void;
+};
+/** What a value set by the assistant carries afterwards: when, from what, and who said yes. */
+export type AssistOrigin = {
+    /** When the assistant set it (or when it was accepted). */
+    at?: Date | string | number;
+    source?: AssistSource;
+    /** The person who accepted it. The assistant proposes; a person decides. */
+    acceptedBy?: string;
+};
+/** Applying something the assistant proposed. It may return the function that reverts it:
+ *  with one, the screen gets a «Deshacer» notice; without one, nothing to undo is offered. */
+export type AssistApply<A extends unknown[] = []> = (...args: A) => (() => void) | void;
+/** The part of the toast API the family uses — the optional toast hook gives it, or `null`. */
+export type AssistToasts = {
+    show: (spec: ToastSpec) => number;
+} | null;
+/**
+ * Runs `apply` and, when it returns an undo and there is a notice stack, offers it.
+ *
+ * Context: undo over confirm (docs/PRINCIPLES.md §7). Accepting a suggestion does not ask
+ * «¿estás seguro?» — the change happens at once, and the notice carries the way back. The
+ * notice is `good` because the change worked; the undo lives in its action, which is the
+ * same «Deshacer» a removed line or a registered payment offers.
+ */
+export declare function applyWithUndo(apply: () => (() => void) | void, toasts: AssistToasts, message: string, undoLabel: string): void;
+/** The notice after accepting a suggestion — naming the field when the screen said which. */
+export declare function acceptedMessage(copy: UiCopy, field?: string): string;
+export type ChangeKind = "add" | "remove" | "change";
+/** One proposed change, as plain data — what `ChangeReview.Change` is written with. */
+export type ProposedChange = {
+    id: string;
+    /** What changes: the field's label, or the line's name. */
+    label: string;
+    /** The value now. Absent = the thing does not exist yet (`add`). `null` = an empty field. */
+    before?: ReactNode;
+    /** The value after. Absent = the thing goes away (`remove`). */
+    after?: ReactNode;
+    /** Forces the kind; by default it follows from `before` and `after`. */
+    kind?: ChangeKind;
+    /** A second line under the label: the product's code, «40 bolsas × Bs. 58,00». */
+    detail?: ReactNode;
+    /** Where THIS change comes from, when it is not the review's own source. */
+    source?: AssistSource;
+    /** Proposed but not chosen when the review opens — the assistant is less sure of it. */
+    unchosen?: boolean;
+};
+/** The kind of a change, from what it has: no `before` → new, no `after` → removed. */
+export declare function changeKind(change: Pick<ProposedChange, "before" | "after" | "kind">): ChangeKind;
+/** The ids chosen when a review opens: all of them but the ones marked `unchosen`. */
+export declare function initiallyChosen(changes: readonly ProposedChange[]): string[];
+/** Turns one change on or off, and returns the chosen ids IN THE ORDER the review lists
+ *  them — so what `onApply` receives reads like the screen, not like the clicks. */
+export declare function toggleChosen(order: readonly string[], chosen: readonly string[], id: string, on: boolean): string[];
+/** Whether the «all» check is on, off, or mixed. */
+export declare function chosenState(order: readonly string[], chosen: readonly string[]): "all" | "some" | "none";
+/** The label of the apply button, with the count — a button that says how much it does. */
+export declare function applyLabel(copy: UiCopy, count: number): string;
+/** The notice after applying. */
+export declare function appliedMessage(copy: UiCopy, count: number): string;

package/dist/components/assist/assist.js

@@ -0,0 +1,87 @@
+import { fillCopy } from "../../foundations/copy.js";
+import { Bot } from "lucide-react";
+/* ==================================================================== *
+ *  THE ASSISTANT'S CONTRACT — what every piece of this family agrees on.
+ *
+ *  An assistant that acts inside a business screen is trusted for one reason:
+ *  whoever works the screen can always answer three questions about what it did.
+ *
+ *      where did it get that?     → a SOURCE, a link to the record it read
+ *      what exactly will change?  → the value, or the before → after
+ *      how do I take it back?     → apply returns its UNDO
+ *
+ *  So a source is plain data (a label and where it goes), and applying anything
+ *  — accepting a suggestion, applying a set of changes — is a function the
+ *  screen writes and that RETURNS the function that reverts it. The family turns
+ *  that return into the system's «Deshacer» notice; it never applies anything by
+ *  itself, because it does not know what an invoice is.
+ *
+ *  Pure on purpose (no hooks, no "use client"): the components call these, and
+ *  the tests do too.
+ * ==================================================================== */
+/** The one mark of the assistant, everywhere it appears: the suggestion, the review, the
+ *  marker on a value, the event in the history. A robot and not sparkles — it says «an
+ *  automated assistant did this», which is a fact, not a celebration.
+ *
+ *  Exported so a screen that composes the assistant into a piece of its own — a `Callout`,
+ *  a `ActivityEvent` — uses the same mark and not a second one. */
+export const ASSIST_ICON = Bot;
+/**
+ * Runs `apply` and, when it returns an undo and there is a notice stack, offers it.
+ *
+ * Context: undo over confirm (docs/PRINCIPLES.md §7). Accepting a suggestion does not ask
+ * «¿estás seguro?» — the change happens at once, and the notice carries the way back. The
+ * notice is `good` because the change worked; the undo lives in its action, which is the
+ * same «Deshacer» a removed line or a registered payment offers.
+ */
+export function applyWithUndo(apply, toasts, message, undoLabel) {
+    const undo = apply();
+    if (typeof undo !== "function" || toasts === null)
+        return;
+    toasts.show({ message, tone: "good", action: { label: undoLabel, onSelect: undo } });
+}
+/** The notice after accepting a suggestion — naming the field when the screen said which. */
+export function acceptedMessage(copy, field) {
+    return field === undefined
+        ? copy.assist.accepted
+        : fillCopy(copy.assist.acceptedIn, { field });
+}
+/** The kind of a change, from what it has: no `before` → new, no `after` → removed. */
+export function changeKind(change) {
+    if (change.kind !== undefined)
+        return change.kind;
+    if (change.before === undefined)
+        return "add";
+    if (change.after === undefined)
+        return "remove";
+    return "change";
+}
+/** The ids chosen when a review opens: all of them but the ones marked `unchosen`. */
+export function initiallyChosen(changes) {
+    return changes.filter((c) => c.unchosen !== true).map((c) => c.id);
+}
+/** Turns one change on or off, and returns the chosen ids IN THE ORDER the review lists
+ *  them — so what `onApply` receives reads like the screen, not like the clicks. */
+export function toggleChosen(order, chosen, id, on) {
+    const next = new Set(chosen);
+    if (on)
+        next.add(id);
+    else
+        next.delete(id);
+    return order.filter((one) => next.has(one));
+}
+/** Whether the «all» check is on, off, or mixed. */
+export function chosenState(order, chosen) {
+    const count = order.filter((id) => chosen.includes(id)).length;
+    if (count === 0)
+        return "none";
+    return count === order.length ? "all" : "some";
+}
+/** The label of the apply button, with the count — a button that says how much it does. */
+export function applyLabel(copy, count) {
+    return count === 1 ? copy.assist.applyOne : fillCopy(copy.assist.applyMany, { count });
+}
+/** The notice after applying. */
+export function appliedMessage(copy, count) {
+    return count === 1 ? copy.assist.appliedOne : fillCopy(copy.assist.appliedMany, { count });
+}

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

@@ -0,0 +1,5 @@
+export { ASSIST_ICON, type AssistApply, type AssistOrigin, type AssistSource, type ChangeKind, type ProposedChange, } from "./assist.js";
+export { AssistedValue, assistEvent, AssistLabel, AssistMark, type AssistMarkProps, AssistSourceLink, } from "./AssistMark.js";
+export { AssistPending, type AssistPendingProps, } from "./AssistPending.js";
+export { AssistSuggestion, type AssistSuggestionProps, } from "./AssistSuggestion.js";
+export { ChangeReview, ChangeReviewDialog, type ChangeReviewDialogProps, type ChangeReviewProps, } from "./ChangeReview.js";

package/dist/components/assist/index.js

@@ -0,0 +1,7 @@
+/* The assistant inside a business screen: a suggestion with its source, a preview of the
+   changes it proposes, the mark it leaves on what it set, and its working state. */
+export { ASSIST_ICON, } from "./assist.js";
+export { AssistedValue, assistEvent, AssistLabel, AssistMark, AssistSourceLink, } from "./AssistMark.js";
+export { AssistPending, } from "./AssistPending.js";
+export { AssistSuggestion, } from "./AssistSuggestion.js";
+export { ChangeReview, ChangeReviewDialog, } from "./ChangeReview.js";

package/dist/components/form/Form.d.ts

@@ -0,0 +1,52 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+/** A group of fields with its name and its status.
+ *
+ *  The `status` is the only thing worth copying from the old console: every
+ *  section said `Required` or `(Incomplete)` in its header, so you could see
+ *  **what was missing without opening any of them**. Our version forced you to
+ *  go into every aspect to discover it was empty. */
+export declare function FormSection({ title, hint, status, actions, columns, children, }: {
+    /** Absent when the surface already named the form — a dialog title is the
+     *  section, and repeating «parámetros» under it is a second chrome. */
+    title?: string;
+    hint?: string;
+    /** Context: the tones are the system's and not two names of their own. `falta`
+     *  and `listo` were a third scale of meaning that only existed here, and it
+     *  forced you to translate it in order to paint the same pill. */
+    status?: {
+        label: string;
+        tone?: Tone;
+    };
+    /** The buttons of THIS section: "add a rule", "copy from the last order". They
+     *  go in the header and not at the end: what goes at the end closes the whole
+     *  form, and mixing them makes you doubt what saves what. */
+    actions?: ReactNode;
+    /** How many columns of fields. In compact it goes back to a single one without
+     *  asking: two columns in 480 px are two half columns. Three is the ceiling —
+     *  at the fourth, the label and the value no longer fit on the same line. */
+    columns?: 1 | 2 | 3;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** What closes a form. One primary, on the right.
+ *
+ *  Cancel sits just to the left of that primary: the two answers to «what do
+ *  I do with what I wrote». Destroy sits on the far left. Stuck to the
+ *  primary, a stray click or an Enter lands on the thing that cannot be
+ *  undone. The sentence, when there is one, stays with the destroy side —
+ *  it is the warning, not a third button.
+ *
+ *  Context: on a phone (below `sm`, the 40rem of `--container-handheld`) the bar sticks
+ *  to the bottom of whatever scrolls the form —the window, or a bottom sheet's body— so
+ *  the primary stays under the thumb while the fields go by, instead of waiting at the
+ *  end of a form three screens long. Sticky and not fixed: it is the last thing in the
+ *  form, so at the end it settles in its own place and covers nothing. On a desk it is
+ *  exactly the static bar it always was. */
+export declare function FormActions({ primary, secondary, danger, aside, }: {
+    primary: ReactNode;
+    secondary?: ReactNode;
+    /** Destroy. Far from the primary. Red belongs here, not on cancel. */
+    danger?: ReactNode;
+    /** What has to be said before pressing: "this cannot be undone". */
+    aside?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/form/Form.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { Hint } from "../../primitives/hint/Hint.js";
+import { Tag } from "../../primitives/tag/Tag.js";
+/* ==================================================================== *
+ *  LA COMPOSICIÓN DE UN FORMULARIO: la sección y el pie.
+ *
+ *  Vive en `contexts/form` y no junto a los controles porque no es un control:
+ *  es lo que los ACOMODA. `TextInput` no sabe que existe un formulario —se usa
+ *  igual adentro de una celda, de un filtro o de un diálogo— y una sección no
+ *  sabe qué campos le van a poner adentro. Son dos capas y por eso son dos
+ *  carpetas: `primitives/field` es CON QUÉ se escribe, esto es CÓMO se arma.
+ * ==================================================================== */
+/** A group of fields with its name and its status.
+ *
+ *  The `status` is the only thing worth copying from the old console: every
+ *  section said `Required` or `(Incomplete)` in its header, so you could see
+ *  **what was missing without opening any of them**. Our version forced you to
+ *  go into every aspect to discover it was empty. */
+export function FormSection({ title, hint, status, actions, columns = 1, children, }) {
+    const d = useDensity();
+    const asGrid = columns > 1 && d === "comfortable";
+    const grid = columns === 3 ? "grid-cols-3" : "grid-cols-2";
+    const withHeader = title !== undefined ||
+        status !== undefined ||
+        hint !== undefined ||
+        actions !== undefined;
+    return (_jsxs("section", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-3", "gap-2")}`, children: [withHeader ? (_jsxs("header", { className: "flex min-w-0 flex-wrap items-center gap-x-2.5 gap-y-1", children: [title === undefined && hint === undefined ? null : (_jsxs("h3", { className: "flex min-w-0 items-center gap-1 text-meta font-medium text-ink", children: [title === undefined ? null : _jsx("span", { className: "min-w-0 truncate", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })), status === undefined ? null : _jsx(Tag, { tone: status.tone, children: status.label }), actions === undefined ? null : (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: actions }))] })) : null, _jsx("div", { className: `min-w-0 ${asGrid
+                    ? `grid ${grid} gap-x-8 ${byDensity(d, "gap-y-3.5", "gap-y-2.5")}`
+                    : `flex flex-col ${byDensity(d, "gap-3.5", "gap-2.5")}`}`, children: children })] }));
+}
+/** What closes a form. One primary, on the right.
+ *
+ *  Cancel sits just to the left of that primary: the two answers to «what do
+ *  I do with what I wrote». Destroy sits on the far left. Stuck to the
+ *  primary, a stray click or an Enter lands on the thing that cannot be
+ *  undone. The sentence, when there is one, stays with the destroy side —
+ *  it is the warning, not a third button.
+ *
+ *  Context: on a phone (below `sm`, the 40rem of `--container-handheld`) the bar sticks
+ *  to the bottom of whatever scrolls the form —the window, or a bottom sheet's body— so
+ *  the primary stays under the thumb while the fields go by, instead of waiting at the
+ *  end of a form three screens long. Sticky and not fixed: it is the last thing in the
+ *  form, so at the end it settles in its own place and covers nothing. On a desk it is
+ *  exactly the static bar it always was. */
+export function FormActions({ primary, secondary, danger, aside, }) {
+    return (_jsxs("div", { "data-form-actions": "", className: "flex flex-wrap items-center gap-2 border-t border-line pt-3.5 max-sm:sticky max-sm:bottom-0 max-sm:z-10 max-sm:bg-surface max-sm:safe-bottom", children: [danger, aside === undefined ? null : (_jsx("span", { className: "min-w-0 text-micro text-muted", children: aside })), _jsxs("span", { className: "ml-auto flex items-center gap-2", children: [secondary, primary] })] }));
+}

package/dist/components/form/Sheet.d.ts

@@ -0,0 +1,47 @@
+import { type SheetLayout } from "../../primitives/field/layout.js";
+import { type FieldNote } from "../../primitives/field/note.js";
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
+export type { SheetLayout };
+export type SheetField = {
+    label: string;
+    value: ReactNode;
+    /** Help on the label, as a `?`. Hover or click. */
+    hint?: string;
+    mono?: boolean;
+    /** A note that belongs to this fact — the same as `Field`'s: a flag by the label, and an
+     *  entry in the record's activity. */
+    note?: FieldNote;
+};
+export declare function Sheet({ fields, columns, layout, head, children, }: {
+    fields?: readonly SheetField[];
+    columns?: 1 | 2 | 3 | 4;
+    /** How fields inside this sheet (and its groups) place the label. */
+    layout?: SheetLayout;
+    /** The top of the paper: groups, then the notebook sitting on its mouth.
+     *  It shares a short gap with `fields`, so the tabs belong to the sheet
+     *  and not to the page below. */
+    head?: ReactNode;
+    children?: ReactNode;
+}): import("react").JSX.Element | null;
+/** A row of columns on the paper. The paper is the sheet; a group is not a
+ *  second box. A vertical hairline separates columns — that is what still
+ *  groups them when a column has no title. */
+export declare function SheetGroups({ children, columns, }: {
+    children: ReactNode;
+    columns?: 2 | 3 | 4;
+}): import("react").JSX.Element;
+/** One column of a `SheetGroups` row.
+ *
+ *  The title is OPTIONAL. With one, it is a name above the fields — the same
+ *  name in read and in edit, so the paper does not rearrange. Without one,
+ *  the column is still a group: the hairline between columns is the edge.
+ *
+ *  It is not a tray and not a card. Nested boxes on the sheet made untitled
+ *  groups look empty and made edit mode look like a dashboard. */
+export declare function SheetGroup({ title, hint, icon: Icon, children, }: {
+    title?: string;
+    hint?: string;
+    icon?: LucideIcon;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/form/Sheet.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { byDensity, useDensity } from "../../foundations/density.js";
+import { FieldLayoutProvider, } from "../../primitives/field/layout.js";
+import { NoteCard, NoteFlag } from "../../primitives/field/note.js";
+import { Hint } from "../../primitives/hint/Hint.js";
+import { Children, useId } from "react";
+function Facts({ fields, columns, layout, }) {
+    const d = useDensity();
+    const idBase = useId();
+    const horizontal = layout === "horizontal";
+    /* Horizontal facts are a run of pairs, not a grid stretched across the
+       paper. A two-column grid put «Total Bs 12.480» on the left and «Vence
+       15 nov» on the right, with the middle of the card empty. */
+    const asGrid = !horizontal && columns > 1 && d === "comfortable";
+    const grid = columns === 4
+        ? "grid-cols-2 @lg:grid-cols-4"
+        : columns === 3
+            ? "grid-cols-3"
+            : "grid-cols-2";
+    return (_jsx("dl", { className: horizontal
+            ? "flex min-w-0 flex-wrap items-baseline gap-x-6 gap-y-1.5"
+            : asGrid
+                ? `@container grid min-w-0 ${grid} ${byDensity(d, "gap-x-8 gap-y-2.5", "gap-x-6 gap-y-2")}`
+                : `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: fields.map((field, at) => {
+            const noteId = field.note === undefined ? undefined : `${idBase}-${at}-note`;
+            const empty = field.value === undefined || field.value === null || field.value === "";
+            const card = field.note === undefined || noteId === undefined ? null : (_jsx(NoteCard, { note: field.note, id: noteId, owner: field.label }));
+            /* The note's card goes INSIDE the value: a `<dl>` holds only its terms and values.
+               With a note the value is a flex box, so the absolute card keeps the value's top
+               as its static position while being read after it. */
+            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), className: `min-w-0 text-meta ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
+            const name = (_jsxs("dt", { className: `flex items-center gap-1 text-micro text-muted ${horizontal ? "shrink-0" : "min-w-0"}`, children: [_jsx("span", { children: field.label }), field.hint === undefined ? null : _jsx(Hint, { children: field.hint }), field.note === undefined ? null : _jsx(NoteFlag, { note: field.note })] }));
+            if (horizontal) {
+                /* A header fact is a pair: the number sits next to its name. The
+                   8rem label column is for a form, where twenty values have to
+                   start on the same vertical. Here it left «Filas» half a column
+                   away from 400. */
+                return (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [name, value] }, field.label));
+            }
+            return (_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [name, value] }, field.label));
+        }) }));
+}
+export function Sheet({ fields, columns = 2, layout = "stacked", head, children, }) {
+    const d = useDensity();
+    const facts = fields !== undefined && fields.length > 0;
+    if (!facts && head === undefined && children === undefined)
+        return null;
+    const top = facts || head !== undefined ? (_jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-4", "gap-3")}`, children: [facts ? _jsx(Facts, { fields: fields, columns: columns, layout: layout }) : null, head] })) : null;
+    return (_jsx(FieldLayoutProvider, { value: layout, children: _jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block)", "gap-2.5")}`, children: [top, children] }) }));
+}
+/** A row of columns on the paper. The paper is the sheet; a group is not a
+ *  second box. A vertical hairline separates columns — that is what still
+ *  groups them when a column has no title. */
+export function SheetGroups({ children, columns = 2, }) {
+    const d = useDensity();
+    const stacked = d === "compact";
+    // Below `handheld` the columns stack the way compact density does: two 180 px
+    // columns on a phone left each label beside a control with no width at all. The
+    // container is a wrapper because a grid cannot query its own width.
+    const grid = stacked
+        ? "grid-cols-1"
+        : columns === 4
+            ? "grid-cols-2 @lg:grid-cols-4 @max-handheld:grid-cols-1"
+            : columns === 3
+                ? "grid-cols-3 @max-handheld:grid-cols-1"
+                : "grid-cols-2 @max-handheld:grid-cols-1";
+    const items = Children.toArray(children);
+    return (_jsx("div", { className: "@container min-w-0", children: _jsx("div", { className: `grid min-w-0 ${grid}`, children: items.map((child, i) => {
+                const first = i === 0;
+                const last = i === items.length - 1;
+                const edge = stacked
+                    ? `${first ? "" : "border-t border-line pt-3"} ${last ? "" : "pb-3"}`
+                    : `${first ? "" : "border-l border-line pl-6 @max-handheld:border-l-0 @max-handheld:border-t @max-handheld:pl-0 @max-handheld:pt-3"} ${last ? "" : "pr-6 @max-handheld:pr-0 @max-handheld:pb-3"}`;
+                return (_jsx("div", { className: `min-w-0 ${edge}`, children: child }, i));
+            }) }) }));
+}
+/** One column of a `SheetGroups` row.
+ *
+ *  The title is OPTIONAL. With one, it is a name above the fields — the same
+ *  name in read and in edit, so the paper does not rearrange. Without one,
+ *  the column is still a group: the hairline between columns is the edge.
+ *
+ *  It is not a tray and not a card. Nested boxes on the sheet made untitled
+ *  groups look empty and made edit mode look like a dashboard. */
+export function SheetGroup({ title, hint, icon: Icon, children, }) {
+    const d = useDensity();
+    const withHeader = title !== undefined;
+    return (_jsxs("section", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [withHeader ? (_jsxs("header", { className: "flex min-w-0 items-center gap-2", children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsx("h3", { className: "min-w-0 truncate text-meta font-medium text-ink", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })) : hint === undefined ? null : (_jsx(Hint, { children: hint })), _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: children })] }));
+}

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

@@ -0,0 +1,2 @@
+export { FormActions, FormSection } from "./Form.js";
+export { Sheet, type SheetField, SheetGroup, SheetGroups, type SheetLayout, } from "./Sheet.js";

package/dist/components/form/index.js

@@ -0,0 +1,4 @@
+/* FORMULARIO — lo que ACOMODA los campos: la hoja, la sección y el pie. Los
+   controles con los que se escribe están en `primitives/field`. */
+export { FormActions, FormSection } from "./Form.js";
+export { Sheet, SheetGroup, SheetGroups, } from "./Sheet.js";

package/dist/components/frame/Chart.d.ts

@@ -0,0 +1,13 @@
+import type { SeriesBar } from "./model.js";
+/**
+ * One series, drawn as a bar list: the name, the count, and a track.
+ *
+ * A column of vertical bars with the names in a legend underneath asks the
+ * eye to match a bar to a word. Here the word sits on its own bar, which is
+ * the question this piece answers — how the values of one column are spread.
+ * CSS, not a charting library: the width is a percentage of the largest
+ * count, and the color is the data color, one series, not a palette.
+ */
+export declare function SeriesChart({ series }: {
+    series: readonly SeriesBar[];
+}): import("react").JSX.Element;

package/dist/components/frame/Chart.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+/**
+ * One series, drawn as a bar list: the name, the count, and a track.
+ *
+ * A column of vertical bars with the names in a legend underneath asks the
+ * eye to match a bar to a word. Here the word sits on its own bar, which is
+ * the question this piece answers — how the values of one column are spread.
+ * CSS, not a charting library: the width is a percentage of the largest
+ * count, and the color is the data color, one series, not a palette.
+ */
+export function SeriesChart({ series }) {
+    const copy = useUiCopy();
+    const peak = Math.max(1, ...series.map((bar) => bar.count));
+    if (series.length === 0) {
+        return _jsx("p", { className: "px-3 py-4 text-body text-muted", children: copy.frame.noSeries });
+    }
+    return (_jsx("ul", { className: "flex flex-col gap-2.5 px-3 py-3", children: series.map((bar) => {
+            const width = Math.max((bar.count / peak) * 100, 2);
+            const count = bar.count.toLocaleString(copy.locale);
+            return (_jsxs("li", { className: "flex min-w-0 flex-col gap-1", title: `${bar.label}: ${count}`, children: [_jsxs("div", { className: "flex min-w-0 items-baseline justify-between gap-3", children: [_jsx("span", { className: "min-w-0 truncate text-meta text-ink", children: bar.label }), _jsx("span", { className: "shrink-0 text-micro tabular-nums text-muted", children: count })] }), _jsx("div", { className: "h-1.5 overflow-hidden rounded-pill bg-ink/8", children: _jsx("div", { className: "h-full rounded-pill bg-data", style: { width: `${width}%` } }) })] }, bar.label));
+        }) }));
+}

package/dist/components/frame/FrameView.d.ts

@@ -0,0 +1,33 @@
+import { type Frame, type FramePresent } from "./model.js";
+import { type ListIdentity } from "../listing/ListingBar.js";
+import { type Grouping } from "../../foundations/grouping.js";
+import { type ReactNode } from "react";
+export type FrameViewProps = {
+    frame: Frame;
+    identity?: ListIdentity;
+    caption?: ReactNode;
+    present?: FramePresent;
+    presents?: readonly FramePresent[];
+    onPresentChange?: (next: FramePresent) => void;
+    /** Which column the chart reads. Defaults to the first numeric, else the first. */
+    chartColumn?: string;
+    onChartColumnChange?: (id: string) => void;
+    visibleColumnIds?: readonly string[];
+    onVisibleColumnIdsChange?: (ids: readonly string[]) => void;
+    /** Search, filters, pagination: the same slots as a list. A frame inside a
+     *  form is still a SET of rows, and a set without a narrowing line is a
+     *  dump. Assembled by whoever holds the domain — this file does not know
+     *  what a column name is. */
+    search?: ReactNode;
+    pagination?: ReactNode;
+    /**
+     * El agrupado, con el mismo contrato que usa la lista.
+     *
+     * Acá lo que se agrupa son ÍNDICES de fila y no registros: un marco es una
+     * matriz y sus filas no tienen identidad propia —son la fila 12 del archivo—,
+     * así que `T` es `number` y `of(fila, nivel)` lee la celda que corresponda. El
+     * contrato no cambia, que es exactamente la prueba de que no es restrictivo.
+     */
+    grouping?: Grouping<number>;
+};
+export declare function FrameView({ frame, identity, caption, present: presentProp, presents, onPresentChange, chartColumn: chartColumnProp, onChartColumnChange, visibleColumnIds, onVisibleColumnIdsChange, search, pagination, grouping, }: FrameViewProps): import("react").JSX.Element;

package/dist/components/frame/FrameView.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SeriesChart } from "./Chart.js";
+import { columnSeries, withColumns, } from "./model.js";
+import { useColumnControl } from "../listing/columns.js";
+import { ColumnsMenu, specsFromColumns, } from "../listing/ColumnsMenu.js";
+import { Listing } from "../listing/Listing.js";
+import { ListingBar } from "../listing/ListingBar.js";
+import { ViewSwitcher } from "../listing/ViewSwitcher.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { pathKey, pileIsOpen, pilesOf, } from "../../foundations/grouping.js";
+import { Menu } from "../../primitives/menu/Menu.js";
+import { Empty } from "../../primitives/notice/Notice.js";
+import { SheetTable } from "../../primitives/table/SheetTable.js";
+import { BarChart3, Table2 } from "lucide-react";
+import { useMemo, useState } from "react";
+/**
+ * ARCHETYPE 3 — a FRAME: the cells of a payload, as a table or as a chart.
+ *
+ * Context: ListView is N records of a kind. Record is ONE record. Neither
+ * is the glance at the raw matrix an imported file carries — that was being drawn as
+ * a naked SheetTable, so it could not change presentation, hide a column or
+ * chart one, which is exactly what looking at a table is for.
+ *
+ * Columns use the same `useColumnControl` as ListView. Payload columns default
+ * to optional; pin one with `optional: false`.
+ *
+ * The app maps a preview (or any rectangle) onto a `Frame`. This archetype
+ * does not know what an invoice is.
+ */
+const PRESENT_ICONS = [
+    { id: "table", icon: Table2 },
+    { id: "chart", icon: BarChart3 },
+];
+export function FrameView({ frame, identity, caption, present: presentProp, presents = ["table", "chart"], onPresentChange, chartColumn: chartColumnProp, onChartColumnChange, visibleColumnIds, onVisibleColumnIdsChange, search, pagination, grouping, }) {
+    const copy = useUiCopy();
+    const [ownedPresent, setOwnedPresent] = useState(presentProp ?? "table");
+    const present = onPresentChange !== undefined ? (presentProp ?? "table") : ownedPresent;
+    const setPresent = onPresentChange ?? setOwnedPresent;
+    const defaultChart = frame.columns.find((column) => column.numeric)?.id ?? frame.columns[0]?.id ?? "";
+    const [ownedChart, setOwnedChart] = useState(chartColumnProp ?? defaultChart);
+    const chartColumn = onChartColumnChange !== undefined ? (chartColumnProp ?? defaultChart) : ownedChart;
+    const setChartColumn = onChartColumnChange ?? setOwnedChart;
+    const columnSpecs = useMemo(() => specsFromColumns(frame.columns, true), [frame.columns]);
+    const columns = useColumnControl(columnSpecs, {
+        ...(visibleColumnIds === undefined ? {} : { visibleIds: visibleColumnIds }),
+        ...(onVisibleColumnIdsChange === undefined ? {} : { onVisibleColumnIdsChange }),
+    });
+    const shown = useMemo(() => columns.visibleIds.length === frame.columns.length
+        ? frame
+        : withColumns(frame, columns.visibleIds), [frame, columns.visibleIds]);
+    /* Los montones aplanados a una SECUENCIA: la planilla está virtualizada por
+       índice, así que la jerarquía la dice la sangría de cada banda y no el
+       anidamiento. Es el mismo aplanado que hace la lista, sobre índices en vez de
+       registros. */
+    const bands = useMemo(() => {
+        const piles = pilesOf(Array.from({ length: shown.rows }, (_, index) => index), grouping);
+        if (piles === null)
+            return null;
+        const out = [];
+        const walk = (list) => {
+            for (const pile of list) {
+                const open = pileIsOpen(pile, grouping);
+                out.push({
+                    band: {
+                        field: pile.field,
+                        label: pile.label,
+                        count: pile.count,
+                        open,
+                        depth: pile.depth,
+                        key: pathKey(pile.path),
+                    },
+                });
+                if (!open)
+                    continue;
+                if (pile.piles.length > 0)
+                    walk(pile.piles);
+                else
+                    for (const row of pile.items)
+                        out.push({ row });
+            }
+        };
+        walk(piles);
+        return out;
+    }, [shown.rows, grouping]);
+    const series = useMemo(() => (present === "chart" ? columnSeries(shown, chartColumn) : []), [present, shown, chartColumn]);
+    const switcher = presents.length > 1 ? (_jsx(ViewSwitcher, { options: PRESENT_ICONS.filter((option) => presents.includes(option.id)).map((option) => ({
+            id: option.id,
+            label: option.id === "table" ? copy.present.table : copy.present.chart,
+            icon: option.icon,
+        })), current: present, onSelect: (id) => setPresent(id) })) : undefined;
+    const chartMenu = present === "chart" ? (_jsx(Menu, { label: copy.frame.series, groups: [
+            {
+                label: copy.frame.column,
+                options: shown.columns.map((column) => ({
+                    id: column.id,
+                    label: column.type === undefined
+                        ? column.header
+                        : `${column.header} · ${column.type}`,
+                    checked: column.id === chartColumn,
+                })),
+            },
+        ], onSelect: setChartColumn })) : null;
+    const bar = (_jsx(ListingBar, { ...(identity?.title === undefined ? {} : { title: identity.title }), ...(identity?.description === undefined ? {} : { description: identity.description }), ...(identity?.counters === undefined ? {} : { counters: identity.counters }), ...(search === undefined ? {} : { search }), ...(pagination === undefined ? {} : { pagination }), views: _jsxs(_Fragment, { children: [_jsx(ColumnsMenu, { control: columns }), chartMenu, switcher] }) }));
+    if (frame.rows === 0 || frame.columns.length === 0) {
+        return (_jsx(Listing, { bar: bar, children: _jsx(Empty, { sentence: copy.frame.empty }) }));
+    }
+    return (_jsx(Listing, { bar: bar, children: present === "chart" ? (_jsx(SeriesChart, { series: series })) : (_jsx(SheetTable, { columns: shown.columns, rows: bands === null ? shown.rows : bands.length, value: (index, column, columnIndex) => {
+                const row = bands === null ? index : bands[index]?.row;
+                return row === undefined ? null : shown.value(row, column, columnIndex);
+            }, height: "auto", ...(bands === null
+                ? {}
+                : {
+                    band: (index) => bands[index]?.band,
+                    ...(grouping?.onToggle === undefined
+                        ? {}
+                        : {
+                            onBandToggle: (index) => {
+                                const key = bands[index]?.band?.key;
+                                if (key !== undefined)
+                                    grouping.onToggle?.(key);
+                            },
+                        }),
+                }), ...(caption === undefined ? {} : { caption }) })) }));
+}

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

@@ -0,0 +1,3 @@
+export { SeriesChart } from "./Chart.js";
+export { FrameView, type FrameViewProps } from "./FrameView.js";
+export { columnSeries, type Frame, type FrameCell, type FrameColumn, frameFromRows, type FramePresent, type SeriesBar, withColumns, } from "./model.js";