@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/assist/ChangeReview.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { appliedMessage, applyLabel, applyWithUndo, changeKind, chosenState, initiallyChosen, toggleChosen, } from "./assist.js";
+import { AssistLabel, AssistSourceLink } from "./AssistMark.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { flatten, propsOf, slot, slotOf } from "../../foundations/slots.js";
+import { Button } from "../../primitives/button/Button.js";
+import { Dialog } from "../../primitives/dialog/Dialog.js";
+import { Checkbox } from "../../primitives/field/Checks.js";
+import { useToastIfAny } from "../../primitives/notice/Toast.js";
+import { Tag } from "../../primitives/tag/Tag.js";
+import { ArrowRight } from "lucide-react";
+import { useId, useState } from "react";
+const Group = slot("group", (_props) => null);
+const Change = slot("change", (_props) => null);
+/** The groups as written. Changes written outside a group form an untitled one in their
+ *  place, so a short review is just its changes. */
+function readTree(children) {
+    const out = [];
+    let loose = null;
+    for (const node of flatten(children)) {
+        const name = slotOf(node);
+        if (name === "group") {
+            loose = null;
+            const props = propsOf(node);
+            out.push({
+                ...(props.title === undefined ? {} : { title: props.title }),
+                changes: flatten(props.children)
+                    .filter((one) => slotOf(one) === "change")
+                    .map((one) => propsOf(one)),
+            });
+        }
+        else if (name === "change") {
+            if (loose === null) {
+                loose = { changes: [] };
+                out.push(loose);
+            }
+            loose.changes.push(propsOf(node));
+        }
+    }
+    return out;
+}
+/** What both faces share: the tree read once, the chosen ids, and «apply». */
+function useReview({ children, chosen, onChosenChange, onApply }) {
+    const copy = useUiCopy();
+    const toasts = useToastIfAny();
+    const groups = readTree(children);
+    const all = groups.flatMap((g) => g.changes);
+    const order = all.map((c) => c.id);
+    const [own, setOwn] = useState(() => initiallyChosen(all));
+    const current = chosen === undefined ? own : order.filter((id) => chosen.includes(id));
+    const choose = (next) => {
+        if (chosen === undefined)
+            setOwn(next);
+        onChosenChange?.(next);
+    };
+    const apply = () => {
+        const ids = current;
+        applyWithUndo(() => onApply(ids), toasts, appliedMessage(copy, ids.length), copy.assist.undo);
+    };
+    return { groups, order, current, choose, apply };
+}
+/** One change: its check (named by its label), the kind in words, and before → after. */
+function ChangeRow({ change, on, onToggle, }) {
+    const copy = useUiCopy();
+    const valuesId = useId();
+    const kind = changeKind(change);
+    const word = {
+        add: copy.assist.added,
+        remove: copy.assist.removed,
+        change: copy.assist.changed,
+    }[kind];
+    const empty = _jsx("span", { className: "text-muted italic", children: copy.assist.empty });
+    const before = change.before === null ? empty : change.before;
+    return (_jsxs("li", { "data-change": kind, className: "flex min-w-0 flex-col gap-1 border-b border-line px-4 py-2.5 last:border-b-0 @lg:flex-row @lg:items-start @lg:gap-4", children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(Checkbox, { checked: on, onChange: onToggle, label: change.label, describedBy: valuesId }), _jsx(Tag, { children: word })] }), change.detail === undefined ? null : (_jsx("span", { className: "pl-6.5 text-micro text-muted", children: change.detail })), change.source === undefined ? null : (_jsx("span", { className: "pl-6.5", children: _jsx(AssistSourceLink, { source: change.source }) }))] }), _jsxs("span", { id: valuesId, className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5 pl-6.5 text-meta tabular-nums @lg:w-2/5 @lg:shrink-0 @lg:justify-end @lg:pl-0 @lg:text-right", children: [kind === "add" ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "sr-only", children: [copy.assist.from, " "] }), _jsx("span", { className: `text-muted ${kind === "remove" ? "line-through" : ""}`, children: before })] })), kind === "remove" ? null : (_jsxs(_Fragment, { children: [kind === "add" ? null : (_jsx(ArrowRight, { className: "size-(--size-icon-sm) shrink-0 self-center text-muted", strokeWidth: 2, "aria-hidden": true })), _jsxs("span", { className: "sr-only", children: [copy.assist.to, " "] }), _jsx("span", { className: "font-medium text-ink", children: change.after })] }))] })] }));
+}
+/** «Todos los cambios», the count, and the groups. */
+function ReviewBody({ review }) {
+    const copy = useUiCopy();
+    const { groups, order, current, choose } = review;
+    const state = chosenState(order, current);
+    return (_jsxs("div", { className: "@container flex min-w-0 flex-col", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-line px-4 py-2", children: [_jsx(Checkbox, { checked: state === "all", mixed: state === "some", label: copy.assist.all, onChange: (on) => choose(on ? [...order] : []) }), _jsx("span", { className: "text-micro text-muted tabular-nums", children: fillCopy(copy.assist.chosen, { count: current.length, total: order.length }) })] }), groups.map((group, i) => (_jsxs("section", { className: "flex min-w-0 flex-col", children: [group.title === undefined ? null : (_jsx("h4", { className: "px-4 pt-3 pb-1 text-micro font-medium text-muted", children: group.title })), _jsx("ul", { className: "flex min-w-0 flex-col", children: group.changes.map((change) => (_jsx(ChangeRow, { change: change, on: current.includes(change.id), onToggle: (on) => choose(toggleChosen(order, current, change.id, on)) }, change.id))) })] }, group.title ?? i)))] }));
+}
+/** «Elegí al menos un cambio.», «Descartar» and «Aplicar N cambios». */
+function ReviewActions({ review, emphasis, onDiscard, after, }) {
+    const copy = useUiCopy();
+    const count = review.current.length;
+    return (_jsxs(_Fragment, { children: [count > 0 ? null : (
+            /* The reason next to the disabled button: a grey «Aplicar» with no explanation is a
+               dead end (the same rule as the wizard's «siguiente»). */
+            _jsx("span", { className: "mr-auto min-w-0 text-micro text-warn", children: copy.assist.noneChosen })), _jsx(Button, { role: "ghost", size: "sm", onClick: () => {
+                    onDiscard();
+                    after?.();
+                }, children: copy.assist.discard }), _jsx(Button, { role: emphasis, size: "sm", disabled: count === 0, onClick: () => {
+                    review.apply();
+                    after?.();
+                }, children: applyLabel(copy, count) })] }));
+}
+/** The review inside the page: a dashed card in the record it would change. */
+export function ChangeReview(props) {
+    const { title, summary, source, onDiscard, emphasis = "primary" } = props;
+    const copy = useUiCopy();
+    const review = useReview(props);
+    const titleId = useId();
+    return (_jsxs("section", { "aria-labelledby": titleId, "data-assist": "review", className: "flex min-w-0 flex-col overflow-clip rounded-box border border-dashed border-info/40 bg-surface", children: [_jsxs("header", { className: "flex min-w-0 flex-col gap-1 border-b border-line px-4 py-3", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1", children: [_jsx(AssistLabel, {}), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsx("h3", { id: titleId, className: "text-lead font-semibold text-ink", children: title ?? copy.assist.review }), summary === undefined ? null : (_jsx("p", { className: "max-w-prose text-meta text-muted", children: summary }))] }), _jsx(ReviewBody, { review: review }), _jsx("footer", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-2.5", children: _jsx(ReviewActions, { review: review, emphasis: emphasis, onDiscard: onDiscard }) })] }));
+}
+ChangeReview.Group = Group;
+ChangeReview.Change = Change;
+/**
+ * The same review, in a `Dialog`: opened on demand — from a notice that says «el asistente
+ * encontró la orden de compra» — and a bottom sheet on a phone. «Aplicar» is the dialog's
+ * primary; closing without choosing keeps the proposal for later.
+ */
+export function ChangeReviewDialog(props) {
+    const { open, onClose, context, title, summary, source, onDiscard } = props;
+    const copy = useUiCopy();
+    const review = useReview(props);
+    return (_jsx(Dialog, { open: open, onClose: onClose, title: title ?? copy.assist.review, ...(summary === undefined ? {} : { subtitle: summary }), ...(context === undefined ? {} : { context }), footer: _jsx(ReviewActions, { review: review, emphasis: "primary", onDiscard: onDiscard, after: onClose }), children: _jsxs("div", { className: "-mx-4 -my-4 flex min-w-0 flex-col", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-line px-4 py-2.5", children: [_jsx(AssistLabel, {}), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsx(ReviewBody, { review: review })] }) }));
+}
+ChangeReviewDialog.Group = Group;
+ChangeReviewDialog.Change = Change;

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 `ChatterEvent` — 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 `ChatterEvent` — 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/chatter/Chatter.d.ts

@@ -0,0 +1,161 @@
+import type { Message } from "./Messages.js";
+import type { Tone } from "../../foundations/types.js";
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
+/**
+ * What a record has been through: what the system logged and what people wrote,
+ * in one place.
+ *
+ * Odoo calls it the chatter and the idea is the one worth taking: a record's
+ * history is not one more section of the record — it is the CONTEXT for
+ * everything else on the screen. Reading «the assessment failed» while looking
+ * at the inputs that produced it is the whole point.
+ *
+ * ── The merge is the default, and that is the decision ──────────────
+ *
+ * **Everything together comes first**, because the question somebody actually
+ * has is «what happened here», not «what happened here *according to the
+ * system*». A payment that bounced and the message somebody left about it are one
+ * story; splitting them by who wrote them makes the reader join them back by
+ * hand, comparing two timestamps in two lists.
+ *
+ * The other two tabs are for when you already know which half you want: «who
+ * said what» and «what ran». They are a narrowing of the first, never a
+ * different content.
+ *
+ * ── Why the tabs live HERE and not in whoever composes ──────────────
+ *
+ * They used to be a generic `tabs` array and every screen decided its own: same
+ * component, a different chatter on each record. What a record has been through
+ * is the same question everywhere, so the answer is the component's, not the
+ * screen's. The screen passes what it HAS —messages, events, a composer— and
+ * this decides how it is read.
+ *
+ * A tab with no source behind it is not drawn: with only events there is
+ * nothing to merge and nothing to separate, so it shows the stream and no tab
+ * bar at all.
+ *
+ * ── Cut into pages, like any other list ─────────────────────────────
+ *
+ * A record with six months behind it has hundreds of entries, and a column that
+ * only scrolls turns the history into something you give up on. The pages are
+ * this component's and not the screen's for the same reason the tabs are: it is
+ * the same list on every record.
+ *
+ * ── Beside on a wide panel, underneath on a narrow one ──────────────
+ *
+ * It asks `@container`, not `lg:`, for the reason `SectionGrid` already wrote
+ * down: with four panels open each one measures 380 px on a 1.600 screen, and a
+ * window rule would put a 22rem column inside a 380 px panel. **Whoever mounts
+ * it has to declare `@container` on the container** — `Record` does.
+ */
+/**
+ * Algo que el sistema anotó.
+ *
+ * Deliberadamente NO es el evento del producto: lo que una historia necesita
+ * para dibujar uno es qué pasó, cuándo, quién, y —cuando las hay— las tres cosas
+ * que uno termina yendo a buscar a otro lado.
+ *
+ * ── Las tres que faltaban, y por qué cada una ───────────────────────
+ *
+ *     by       QUIÉN. «se publicó la factura» no dice si la publicó una persona o un
+ *              cron, y esa es la primera pregunta cuando algo cambió sin aviso.
+ *              Ausente = lo hizo el sistema, que también es una respuesta.
+ *
+ *     moved    DE QUÉ A QUÉ. «el proyecto cambió de estado» obliga a mirar el
+ *              evento anterior para saber de dónde venía. «borrador →
+ *              confirmado» se lee de una y es la línea más útil de una historia
+ *              de gestión.
+ *
+ *     error    QUÉ falló, entero y textual. Un evento rojo que dice «falló» sin
+ *              decir por qué manda a alguien a los logs — y quien mira esta
+ *              pantalla muchas veces no tiene acceso a los logs.
+ */
+export type ChatterEvent = {
+    id: string;
+    /** Qué pasó, en una oración y en pasado. */
+    label: ReactNode;
+    at: Date | string | number;
+    tone?: Tone;
+    /** Quién lo hizo. Ausente = el sistema. */
+    by?: string;
+    /** El cambio de estado, cuando lo hubo. `from` ausente = nació así. */
+    moved?: {
+        from?: string;
+        to: string;
+    };
+    /** Lo que hay que saber además del título, cuando el título no alcanza. */
+    detail?: ReactNode;
+    /** Lo que falló, textual. Se muestra la PRIMERA línea y el resto se abre: un
+     *  stack de cuarenta renglones adentro de una historia tapa la historia, y lo
+     *  que casi siempre alcanza es el primer renglón. */
+    error?: string;
+    /** El ícono del punto, cuando el tono no dice lo suficiente. Sin esto sale del
+     *  tono, que es lo que evita un evento rojo con un tilde verde adentro. */
+    icon?: LucideIcon;
+};
+export type ChatterProps = {
+    /** What people wrote. Absent —not empty— while there is no service behind it:
+     *  an empty thread says «nobody wrote yet», which is a different claim. */
+    messages?: readonly Message[];
+    /** What the system logged. */
+    events?: readonly ChatterEvent[];
+    /** The box to write in, when this record takes messages. It stays on top of
+     *  the stream: writing is the thing you came to do, reading is what you do
+     *  next. */
+    composer?: ReactNode;
+    /** Which tab is showing. Uncontrolled from «everything» when absent. */
+    current?: ChatterView;
+    onCurrentChange?: (next: ChatterView) => void;
+    open: boolean;
+    onToggle: () => void;
+    label?: string;
+    /** Dentro de la hoja del registro: no lleva marco propio, la hoja ya lo
+     *  tiene. Sin esto es una tarjeta, que es como se ve cuando vive solo. */
+    embedded?: boolean;
+    /**
+     * Dónde vive el chatter respecto del registro.
+     *
+     *     page    DEBAJO y a TODO EL ANCHO, como una hoja propia. **Es el
+     *             default**, y no por comodidad: un formulario necesita su ancho
+     *             para que los campos no se apilen, y el de al costado se lo come
+     *             en cuanto la pantalla no sobra. Abajo, la conversación no compite
+     *             con el registro — es la otra mitad de la página.
+     *     aside   AL COSTADO cuando hay ancho, DEBAJO cuando no. Es para un
+     *             registro que se LEE más de lo que se edita, donde tener la
+     *             historia a la vista mientras se mira el dato vale el ancho que
+     *             cuesta.
+     *
+     * La diferencia no es cosmética. En `aside` el ancho es escaso, así que el
+     * mensaje se lee en una columna de veintipico de caracteres; en `page` hay
+     * ancho de sobra y el texto se acota a una medida legible en vez de estirarse
+     * de punta a punta, que es donde un párrafo deja de poder seguirse.
+     *
+     * **Plegar es de pantalla chica.** En `page` el chatter no se pliega cuando
+     * hay ancho: plegarlo ahí esconde media pantalla para no ganar nada.
+     */
+    layout?: ChatterLayout;
+};
+export type ChatterLayout = "aside" | "page";
+export type ChatterView = "all" | "messages" | "events";
+export declare function Chatter({ messages, events, composer, current, onCurrentChange, open, onToggle, label: ownLabel, layout, embedded, }: ChatterProps): import("react").JSX.Element;
+/** Whether the chatter is open, when the page has no better answer.
+ *
+ *  **Starts folded.** It began the other way round —a history nobody opens is a
+ *  history nobody reads— and seeing it took the argument apart: open, it holds a
+ *  22rem column of context on every record you open, before anybody asked for
+ *  any. Folded it still says how many there are, which is the half that has to
+ *  be free; reading them is a click, and a click you chose.
+ *
+ *  It is the same answer for both layouts. A default that depends on the width
+ *  would mean the same record shows a different screen depending on how many
+ *  panels happen to be open next to it, and that is not a default, it is a
+ *  surprise. */
+export declare function useChatter(initial?: boolean): {
+    open: boolean;
+    toggle: () => void;
+    /** Open it without closing it if it already was. What a button from outside
+     *  needs —«events 12»— when pressing it twice must not hide the very thing
+     *  it promised to show. */
+    show: () => void;
+};