@sincpro/web-ui 0.0.0-stage → 0.1.0

package/dist/components/chatter/Chatter.js

@@ -0,0 +1,232 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePagination } from "../listing/pages.js";
+import { Pagination } from "../listing/Pagination.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Empty } from "../../primitives/notice/Notice.js";
+import { Tabs } from "../../primitives/tabs/Tabs.js";
+import { Tag } from "../../primitives/tag/Tag.js";
+import { DateValue } from "../../primitives/value/Fecha.js";
+import { Avatar } from "../../primitives/value/Person.js";
+import { ArrowRight, ChevronRight, History, MessageSquare, PanelRightClose, PanelRightOpen, Rows3, Zap, } from "lucide-react";
+import { Lock } from "lucide-react";
+import { useState } from "react";
+/* The tab names come from the copy table: the same three words on every record. */
+const TAB_LABEL = {
+    all: (copy) => copy.chatter.tabAll,
+    messages: (copy) => copy.chatter.tabMessages,
+    events: (copy) => copy.chatter.tabEvents,
+};
+/* El ícono de cada pestaña. Con tres, es lo que se reconoce sin leer — y en el
+   chatter angosto, lo único que sobrevive cuando el rótulo se trunca. */
+const TAB_ICON = {
+    all: Rows3,
+    messages: MessageSquare,
+    events: History,
+};
+/* UN SOLO ÍCONO para todos los eventos: el rayo, que es lo que pasó — algo se
+   ejecutó. Había uno por tono y eso convertía la historia en un muestrario:
+   cinco formas y cinco colores para decir cinco veces «pasó algo».
+   Lo que SÍ hay que distinguir es si falló, y eso lo dice el contenedor. */
+const EVENT_ICON = Zap;
+/* DOS estados y no seis: pasó, o falló.
+ *
+ * El rojo de un fallo queda en la fila entera: es el único color, y tiene que
+ * verse sin señalar. El hover no lo reemplaza. Es una marca metida adentro,
+ * redondeada, para no pintar el riel. */
+const ROW_SKIN = {
+    ok: "",
+    failed: "bg-bad/6",
+};
+const ROW_HOVER = {
+    ok: "group-hover/entry:bg-ink/4",
+    failed: "group-hover/entry:bg-bad/10",
+};
+const NODE_SKIN = {
+    ok: "bg-ink/8 text-muted",
+    failed: "bg-bad/12 text-bad",
+};
+function at(when) {
+    return when instanceof Date ? when.getTime() : new Date(when).getTime();
+}
+function MessageEntry({ message }) {
+    const copy = useUiCopy();
+    /* Mismo relleno que un evento: las dos clases de entrada viven en la misma
+       lista y con relleno distinto se leen como dos listas pegadas. Antes el
+       mensaje iba a ras del borde y el evento tenía caja, así que el nombre de
+       quien escribió quedaba más cerca del filo que el texto de al lado. */
+    return (_jsxs("li", { className: "flex min-w-0 gap-2.5 px-2.5 py-2", children: [_jsx(Avatar, { name: message.author, size: "sm" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [_jsx("span", { className: "text-meta font-medium text-ink", children: message.author }), _jsx(DateValue, { when: message.at, format: "relative" }), message.internal !== true ? null : (_jsxs("span", { className: "inline-flex items-center gap-1 text-micro text-muted", title: copy.chatter.internalNote, children: [_jsx(Lock, { className: "size-3", "aria-hidden": true }), copy.chatter.internal] }))] }), _jsx("p", { className: `mt-0.5 text-body whitespace-pre-line ${message.internal === true
+                            ? "rounded-control border border-warn/40 bg-warn/6 px-2 py-1 text-ink"
+                            : "text-ink"}`, children: message.body })] })] }));
+}
+/** El cambio de estado, cuando lo hubo: de qué a qué.
+ *
+ *  Es la línea más útil de una historia de gestión y la que peor se contaba: «el
+ *  proyecto cambió de estado» obliga a buscar el evento anterior para saber de
+ *  dónde venía. Dos fichas y una flecha se leen sin buscar nada.
+ *
+ *  El ESTADO VIEJO va apagado y el nuevo en tinta: lo que importa es dónde
+ *  quedó, y el de antes está para dar contexto, no para competir.
+ *
+ *  La cápsula es la de `Tag`: pastilla, pelo, mismo relleno. Dos radios
+ *  distintos para la misma idea de «una ficha» es una familia de más. */
+const STATE_CHIP = "inline-flex max-w-32 min-w-0 items-center truncate rounded-pill border border-line-strong bg-ink/5 px-2 py-0.5 text-micro";
+function Moved({ from, to }) {
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1", children: [from === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: `${STATE_CHIP} text-muted`, children: from }), _jsx(ArrowRight, { className: "size-3 shrink-0 text-muted/60", strokeWidth: 2.5, "aria-hidden": true })] })), _jsx("span", { className: `${STATE_CHIP} font-medium text-ink`, children: to })] }));
+}
+/**
+ * UN EVENTO, como línea de una línea de tiempo.
+ *
+ * ── Por qué hay un riel y no sólo puntos ────────────────────────────
+ *
+ * El riel —la línea vertical que une los puntos— es lo que convierte una lista
+ * en una CRONOLOGÍA. Sin él son renglones sueltos que casualmente tienen fecha;
+ * con él se lee que una cosa pasó después de la otra, que es la pregunta que
+ * alguien trae cuando abre esto.
+ *
+ * ── El color es del punto y de nada más ─────────────────────────────
+ *
+ * El tono pinta el punto, y el texto se queda en tinta normal. Un renglón entero
+ * en rojo no se lee más urgente: se lee peor, y cuando hay tres seguidos deja de
+ * significar nada. El punto alcanza para encontrar los rojos de un vistazo, que
+ * es para lo que el color sirve en una lista larga.
+ */
+/** El error: la primera línea, y el resto a un clic.
+ *
+ *  Un stack de cuarenta renglones adentro de una historia tapa la historia; el
+ *  primer renglón casi siempre alcanza. Pero el resto tiene que estar —quien
+ *  mira esta pantalla muchas veces no tiene acceso a los logs— así que se
+ *  guarda, no se descarta.
+ *
+ *  Sin color propio: el rojo ya lo puso el nodo. Esto es una cita textual de la
+ *  máquina, así que se ve como lo que es — monoespaciada sobre el piso. */
+function ErrorLine({ error }) {
+    const copy = useUiCopy();
+    const [open, setOpen] = useState(false);
+    const lineas = error.split("\n");
+    const primera = lineas[0] ?? "";
+    const hayMas = lineas.length > 1 || primera.length > 120;
+    return (_jsxs("div", { className: "min-w-0 rounded-control border border-line bg-ground px-2 py-1", children: [_jsx("p", { className: `min-w-0 font-mono text-micro text-ink ${open ? "break-words whitespace-pre-wrap" : "truncate"}`, children: open ? error : primera }), !hayMas ? null : (_jsx("button", { type: "button", onClick: () => setOpen(!open), className: "mt-0.5 cursor-pointer text-micro text-muted underline-offset-2 hover:text-ink hover:underline", children: open ? copy.chatter.less : copy.chatter.more }))] }));
+}
+/**
+ * UN EVENTO: una FILA que se aprieta, no un renglón.
+ *
+ * ── Qué se ve sin abrir ─────────────────────────────────────────────
+ *
+ * El rótulo, quién —si lo hubo— y cuándo. Nada más. Es lo que alguien lee para
+ * recorrer la historia; todo lo demás es para cuando ese renglón no alcanzó.
+ *
+ * ── Un solo ícono, y el contenedor dice si falló ────────────────────
+ *
+ * El rayo, porque eso es lo que pasó: algo se ejecutó. Había un ícono y un color
+ * por tono, y seis colores no señalan nada — una historia de veinte eventos
+ * quedaba como una bolsa de caramelos, y el que falló no saltaba más que los
+ * otros. El rojo sirve exactamente mientras sea el único.
+ *
+ * Lo que distingue un error es el TINTE DE LA FILA, translúcido. Y sirve dos
+ * veces: dice que falló, y dice que la fila es una zona que se puede apretar —
+ * que era lo que no se notaba.
+ */
+function EventEntry({ event }) {
+    const failed = event.tone === "bad" || event.error !== undefined;
+    const skin = failed ? "failed" : "ok";
+    const Icon = event.icon ?? EVENT_ICON;
+    /* Arranca CERRADO: lo de adentro es para cuando el renglón no alcanzó. */
+    const [open, setOpen] = useState(false);
+    const hayMas = event.moved !== undefined || event.detail !== undefined || event.error !== undefined;
+    const fila = (_jsxs(_Fragment, { children: [_jsx("span", { className: `relative z-10 flex size-6 shrink-0 items-center justify-center rounded-pill ring-2 ring-surface ${NODE_SKIN[skin]}`, children: _jsx(Icon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) }), _jsx("span", { className: "min-w-0 flex-1 truncate text-meta text-ink", children: event.label }), event.by === undefined ? null : (_jsx("span", { className: "hidden shrink-0 truncate text-micro text-muted @xs:inline", children: event.by })), _jsx("span", { className: "shrink-0", children: _jsx(DateValue, { when: event.at, format: "relative" }) }), hayMas ? (_jsx(ChevronRight, { className: `size-3.5 shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2.5, "aria-hidden": true })) : (
+            /* Hueco del mismo ancho: sin él, las filas que no se abren corren la
+               fecha y la columna deja de estar alineada. */
+            _jsx("span", { className: "size-3.5 shrink-0", "aria-hidden": true }))] }));
+    return (_jsxs("li", { className: "group/event relative @container", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-8 left-5.5 w-px bg-line group-last/event:hidden" }), hayMas ? (_jsxs("button", { type: "button", onClick: () => setOpen(!open), "aria-expanded": open, className: `group/entry relative flex w-full min-w-0 cursor-pointer items-center rounded-box px-2.5 py-2 text-left focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${ROW_SKIN[skin]}`, children: [_jsx("span", { "aria-hidden": true, className: `pointer-events-none absolute inset-x-1 inset-y-0.5 rounded-control ${ROW_HOVER[skin]}` }), _jsx("span", { className: "relative z-10 flex min-w-0 flex-1 items-center gap-2.5", children: fila })] })) : (_jsx("div", { className: `flex w-full min-w-0 items-center gap-2.5 rounded-box px-2.5 py-2 ${failed ? "bg-bad/6" : ""}`, children: fila })), !open ? null : (
+            /* Lo de adentro, alineado bajo el rótulo y sobre el piso: es el DETALLE
+               de esa línea, no una línea más de la historia. */
+            _jsxs("div", { className: "mt-0.5 mb-1 ml-11 flex min-w-0 flex-col gap-1.5 rounded-box bg-ground px-2.5 py-2", children: [event.moved === undefined ? null : (_jsx(Moved, { ...(event.moved.from === undefined ? {} : { from: event.moved.from }), to: event.moved.to })), event.by === undefined ? null : (_jsx("span", { className: "text-micro text-muted @xs:hidden", children: event.by })), event.detail === undefined ? null : (_jsx("div", { className: "min-w-0 text-micro text-muted", children: event.detail })), event.error === undefined ? null : _jsx(ErrorLine, { error: event.error })] }))] }));
+}
+export function Chatter({ messages, events, composer, current, onCurrentChange, open, onToggle, label: ownLabel, layout = "page", embedded = false, }) {
+    const copy = useUiCopy();
+    const label = ownLabel ?? copy.chatter.history;
+    const [owned, setOwned] = useState("all");
+    const view = current ?? owned;
+    const setView = onCurrentChange ?? setOwned;
+    const hasMessages = messages !== undefined;
+    const hasEvents = events !== undefined;
+    /* Las tres pestañas sólo cuando hay DOS fuentes: con una sola, «todo» y esa
+       una son la misma lista, y tres solapas donde dos dicen lo mismo es un
+       control que no decide nada. */
+    const tabs = hasMessages && hasEvents ? ["all", "messages", "events"] : [];
+    const showing = tabs.length === 0 ? "all" : view;
+    const entries = [
+        ...(showing === "events" ? [] : (messages ?? [])).map((message) => ({
+            kind: "message",
+            at: at(message.at),
+            message,
+        })),
+        ...(showing === "messages" ? [] : (events ?? [])).map((event) => ({
+            kind: "event",
+            at: at(event.at),
+            event,
+        })),
+    ].sort((a, b) => b.at - a.at);
+    const total = (messages?.length ?? 0) + (events?.length ?? 0);
+    /* Cortado acá y no por quien compone: es la misma lista en todos los
+       registros, y una historia que sólo hace scroll es una historia que se
+       abandona a la mitad. */
+    const pages = usePagination(entries, { pageSize: 15 });
+    const page = layout === "page";
+    /* Plegado. Embebido es la última fila de la hoja: el marco lo pone la hoja
+       y el hover es una marca redondeada adentro, para no pintar la línea que
+       la separa del papel. Suelta, o al costado, sí es una tarjeta. */
+    if (!open) {
+        const strip = page && embedded;
+        const face = (_jsxs(_Fragment, { children: [_jsx(MessageSquare, { className: "size-4 shrink-0 text-muted", "aria-hidden": true }), _jsx("span", { className: page
+                        ? "min-w-0 truncate text-meta text-muted"
+                        : "min-w-0 truncate text-meta text-muted @4xl:hidden", children: label }), total === 0 ? null : _jsx(Tag, { tone: "neutral", children: total }), _jsx(PanelRightOpen, { className: page
+                        ? "ml-auto size-4 shrink-0 text-muted"
+                        : "ml-auto size-4 shrink-0 text-muted @4xl:ml-0", "aria-hidden": true })] }));
+        return (_jsxs("button", { type: "button", onClick: onToggle, title: fillCopy(copy.chatter.open, { label }), className: page
+                ? strip
+                    ? "group/strip relative flex w-full shrink-0 cursor-pointer items-center px-3 py-2.5"
+                    : "flex w-full shrink-0 cursor-pointer items-center gap-2 rounded-box border border-line bg-surface px-3 py-2.5 hover:bg-ground"
+                : "flex w-full shrink-0 cursor-pointer items-center gap-2 self-start rounded-box border border-line bg-surface px-2.5 py-2 hover:bg-ground @4xl:w-auto @4xl:flex-col @4xl:px-1.5 @4xl:py-2.5", children: [strip ? (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-1 inset-y-0.5 rounded-control group-hover/strip:bg-ground" })) : null, strip ? (_jsx("span", { className: "relative z-10 flex min-w-0 flex-1 items-center gap-2", children: face })) : (face)] }));
+    }
+    return (_jsxs("aside", { className: page
+            ? embedded
+                ? "flex w-full flex-col"
+                : "flex w-full flex-col rounded-box border border-line bg-surface"
+            : "flex w-full shrink-0 flex-col self-start rounded-box border border-line bg-surface @4xl:w-(--container-chatter)", children: [_jsxs("header", { className: `flex min-w-0 items-end gap-1 border-b border-line bg-ground px-2 pt-2 ${page && embedded ? "" : "rounded-t-box"}`, children: [tabs.length === 0 ? (_jsxs("span", { className: "px-2 py-1.5 text-meta font-medium text-ink", children: [label, total === 0 ? null : (_jsx("span", { className: "ml-1.5 text-micro text-muted", children: total }))] })) : (_jsx(Tabs, { label: label, current: showing, onSelect: (id) => setView(id), tabs: tabs.map((tab) => ({
+                            id: tab,
+                            label: TAB_LABEL[tab](copy),
+                            icon: TAB_ICON[tab],
+                            count: tab === "messages"
+                                ? (messages?.length ?? 0)
+                                : tab === "events"
+                                    ? (events?.length ?? 0)
+                                    : total,
+                        })) })), _jsx("button", { type: "button", onClick: onToggle, title: fillCopy(copy.chatter.fold, { label }), className: "mb-1.5 ml-auto inline-flex size-(--size-control-sm) shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted transition-colors duration-(--duration-instant) hover:bg-ink/6 hover:text-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(PanelRightClose, { className: "size-(--size-icon-md)", "aria-hidden": true }) })] }), _jsxs("div", { className: page
+                    ? "flex w-full min-w-0 max-w-(--container-prose) flex-col gap-3 px-3.5 py-3"
+                    : "flex min-w-0 flex-col gap-3 px-2.5 py-2.5", children: [composer === undefined || showing === "events" ? null : composer, entries.length === 0 ? (_jsx(Empty, { sentence: copy.chatter.empty })) : (_jsxs(_Fragment, { children: [_jsx("ol", { className: "flex flex-col", children: pages.pageItems.map((entry) => entry.kind === "message" ? (_jsx(MessageEntry, { message: entry.message }, `m:${entry.message.id}`)) : (_jsx(EventEntry, { event: entry.event }, `e:${entry.event.id}`))) }), entries.length <= 15 ? null : _jsx(Pagination, { ...pages.bridge })] }))] })] }));
+}
+/** 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 function useChatter(initial = false) {
+    const [open, setOpen] = useState(initial);
+    return {
+        open,
+        toggle: () => setOpen((current) => !current),
+        /** 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: () => setOpen(true),
+    };
+}

package/dist/components/chatter/Messages.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from "react";
+/**
+ * The box to write in. What gets written is drawn by `Chatter`, together with
+ * what the system logged — see its note on why the merge is the default.
+ *
+ * Odoo's chatter is two things sharing a column — a log the system writes and a
+ * thread people write — and they are usually confused because they sit
+ * together. They are not the same: an event is a fact that happened, and a
+ * message is somebody's account of it. The system's half never needs a reply
+ * box; this half is nothing without one.
+ *
+ * ── A note is not a message, and the difference is who reads it ─────
+ *
+ * Odoo splits «log an internal note» from «send a message» and the split is
+ * worth keeping: one stays inside, the other leaves. Drawing them the same and
+ * hoping the writer remembers is how somebody's internal remark reaches a
+ * client. So the CHOICE COMES FIRST: the buttons are what you see, and the box
+ * only appears once you said which kind of thing you are writing. A box you can
+ * type into before choosing is a box whose destination you find out afterwards.
+ *
+ * ── And who receives it, before you send it ─────────────────────────
+ *
+ * A message that leaves goes to somebody, and «somebody» has to be readable
+ * without pressing send to find out. `recipients` is drawn next to the box for
+ * the kinds that leave, and never for an internal note — whose whole definition
+ * is that it reaches nobody outside.
+ */
+export type Message = {
+    id: string;
+    author: string;
+    at: Date | string | number;
+    body: string;
+    /** An internal note: it stays inside. Drawn differently on purpose. */
+    internal?: boolean;
+};
+/** A way of writing. `note` stays inside; everything else leaves, and what
+ *  changes between them is only the channel and who is on the other side. */
+export type MessageKind = {
+    id: string;
+    label: string;
+    /** It stays inside. Without this the kit assumes it leaves, which is the
+     *  answer that errs on the side of asking. */
+    internal?: boolean;
+    /** Who gets it, in their own words: names for a mail, numbers for WhatsApp.
+     *  Shown before sending, never after. */
+    recipients?: readonly string[];
+    placeholder?: string;
+};
+/**
+ * ESCRIBIR UNA NOTA, la manera que toda lista tiene.
+ *
+ * Es una función y no una constante porque sus palabras salen de la copia, y una
+ * constante las congelaría con las que hubiera al cargar el módulo —o sea, las
+ * de fábrica— por más que después se instale otra.
+ */
+export declare function writeANote(): MessageKind;
+export type MessageComposerProps = {
+    /** The ways of writing this record takes. Its own list because it is the
+     *  application that knows whether there is WhatsApp, and to whose number. */
+    kinds?: readonly MessageKind[];
+    onSend: (body: string, kind: MessageKind) => void;
+    sending?: boolean;
+    /** Next to the ways of writing, for whatever the application has to say about the send. */
+    footer?: ReactNode;
+};
+export declare function MessageComposer({ kinds, onSend, sending, footer, }: MessageComposerProps): import("react").JSX.Element;

package/dist/components/chatter/Messages.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { currentCopy, useUiCopy } from "../../foundations/copy.js";
+import { Button } from "../../primitives/button/Button.js";
+import { TextArea } from "../../primitives/field/Field.js";
+import { Send, Users, X } from "lucide-react";
+import { useState } from "react";
+/**
+ * ESCRIBIR UNA NOTA, la manera que toda lista tiene.
+ *
+ * Es una función y no una constante porque sus palabras salen de la copia, y una
+ * constante las congelaría con las que hubiera al cargar el módulo —o sea, las
+ * de fábrica— por más que después se instale otra.
+ */
+export function writeANote() {
+    const copy = currentCopy();
+    return {
+        id: "note",
+        label: copy.chatter.writeNote,
+        internal: true,
+        placeholder: copy.chatter.notePlaceholder,
+    };
+}
+export function MessageComposer({ kinds, onSend, sending = false, footer, }) {
+    const copy = useUiCopy();
+    /* La manera por default se arma acá adentro y no en la firma: un default de
+       parámetro se evalúa en cada render, sí, pero escrito como constante del
+       módulo congelaría las palabras de fábrica. */
+    const ways = kinds ?? [writeANote()];
+    const [writing, setWriting] = useState(undefined);
+    const [body, setBody] = useState("");
+    const ready = body.trim() !== "" && !sending;
+    function close() {
+        setWriting(undefined);
+        setBody("");
+    }
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: [ways.map((kind) => (_jsx(Button, { role: writing?.id === kind.id ? "primary" : "ghost", size: "sm", onClick: () => (writing?.id === kind.id ? close() : setWriting(kind)), children: kind.label }, kind.id))), footer === undefined ? null : _jsx("div", { className: "ml-auto min-w-0", children: footer })] }), writing === undefined ? null : (_jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [writing.internal === true || writing.recipients === undefined ? null : (_jsxs("p", { className: "flex min-w-0 items-center gap-1.5 text-micro text-muted", title: copy.chatter.recipients, children: [_jsx(Users, { className: "size-3.5 shrink-0", "aria-hidden": true }), _jsx("span", { className: "min-w-0 truncate", children: writing.recipients.length === 0
+                                    ? copy.chatter.noRecipients
+                                    : writing.recipients.join(" · ") })] })), _jsx(TextArea, { value: body, onChange: setBody, placeholder: writing.placeholder ?? copy.chatter.messagePlaceholder, rows: 3 }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Button, { role: "primary", size: "sm", icon: Send, disabled: !ready, onClick: () => {
+                                    onSend(body.trim(), writing);
+                                    close();
+                                }, children: sending ? copy.chatter.sending : copy.chatter.send }), _jsx(Button, { role: "ghost", size: "sm", icon: X, onClick: close, children: copy.chatter.cancel })] })] }))] }));
+}

package/dist/components/chatter/Timeline.d.ts

@@ -0,0 +1,21 @@
+import type { Surface, Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+export type TimelineItemProps = {
+    label: ReactNode;
+    at: Date | string | number;
+    tone?: Tone;
+    action?: ReactNode;
+};
+export type TimelineProps = {
+    children?: ReactNode;
+    empty?: {
+        sentence: string;
+        action?: ReactNode;
+    };
+    surface?: Surface;
+};
+/** Renders items in the order given — this kit's convention is newest first. */
+export declare function Timeline({ children, empty, surface }: TimelineProps): import("react").JSX.Element | null;
+export declare namespace Timeline {
+    var Item: ({ label, at, tone, action }: TimelineItemProps) => import("react").JSX.Element;
+}

package/dist/components/chatter/Timeline.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SurfaceProvider, useSurface } from "../../foundations/surface.js";
+import { Empty } from "../../primitives/notice/Notice.js";
+import { DateValue } from "../../primitives/value/Fecha.js";
+import { Children } from "react";
+const DOT_TONE = {
+    neutral: { canvas: "bg-muted", chrome: "bg-chrome-muted" },
+    info: { canvas: "bg-info", chrome: "bg-chrome-link" },
+    good: { canvas: "bg-good", chrome: "bg-chrome-good" },
+    warn: { canvas: "bg-warn", chrome: "bg-chrome-warn" },
+    bad: { canvas: "bg-bad", chrome: "bg-chrome-bad" },
+    accent: { canvas: "bg-accent", chrome: "bg-chrome-accent" },
+};
+function Item({ label, at, tone = "neutral", action }) {
+    const surface = useSurface();
+    const isChrome = surface === "chrome";
+    const text = isChrome ? "text-chrome-ink" : "text-ink";
+    const rail = isChrome ? "bg-chrome-ink/20" : "bg-line";
+    return (_jsxs("li", { className: "group/item relative flex gap-3 pb-4 last:pb-0", children: [_jsxs("span", { className: "relative flex w-2 shrink-0 justify-center", children: [_jsx("span", { className: `mt-1 size-2 shrink-0 rounded-pill ${DOT_TONE[tone][surface]}` }), _jsx("span", { className: `absolute top-3 bottom-0 w-px group-last/item:hidden ${rail}` })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-0.5", children: [_jsx("span", { className: `min-w-0 text-meta ${text}`, children: label }), _jsx(DateValue, { when: at, format: "exact" })] }), action === undefined ? null : _jsx("div", { className: "mt-1", children: action })] })] }));
+}
+/** Renders items in the order given — this kit's convention is newest first. */
+export function Timeline({ children, empty, surface }) {
+    const activeSurface = useSurface(surface);
+    if (Children.toArray(children).length === 0) {
+        return empty === undefined ? null : (_jsx(Empty, { sentence: empty.sentence, ...(empty.action === undefined ? {} : { action: empty.action }) }));
+    }
+    return (_jsx(SurfaceProvider, { value: activeSurface, children: _jsx("ol", { className: "flex flex-col", children: children }) }));
+}
+Timeline.Item = Item;

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

@@ -0,0 +1,3 @@
+export { Chatter, type ChatterEvent, type ChatterLayout, type ChatterProps, type ChatterView, useChatter, } from "./Chatter.js";
+export { type Message, MessageComposer, type MessageComposerProps, type MessageKind, writeANote, } from "./Messages.js";
+export { Timeline, type TimelineItemProps, type TimelineProps, } from "./Timeline.js";

package/dist/components/chatter/index.js

@@ -0,0 +1,4 @@
+/* What a record has been through, beside it: messages and events in one column. */
+export { Chatter, useChatter, } from "./Chatter.js";
+export { MessageComposer, writeANote, } from "./Messages.js";
+export { Timeline, } from "./Timeline.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,43 @@
+import { type SheetLayout } from "../../primitives/field/layout.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;
+};
+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;