@sincpro/web-ui 0.1.0 → 0.2.0

package/dist/views/record/Record.js

@@ -1,16 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Activity } from "../../components/activity/Activity.js";
 import { Sheet, } from "../../components/form/Sheet.js";
 import { Pager as PagerControl } from "../../components/record/Pager.js";
 import { RecordHeader } from "../../components/record/RecordHeader.js";
+import { RecordBlocking, RecordNoticeIndicator, splitNotices, } from "../../components/record/RecordNotices.js";
 import { RecordSkeleton } from "../../components/record/RecordSkeleton.js";
 import { SmartButton, SmartButtons } from "../../components/record/SmartButtons.js";
 import { StatusBar } from "../../components/record/StatusBar.js";
 import { useUiCopy } from "../../foundations/copy.js";
 import { byDensity, useDensity } from "../../foundations/density.js";
-import { flatten, pick as pickSlot, propsOf, slot, slotOf, } from "../../foundations/slots.js";
-import { Failed } from "../../primitives/notice/Notice.js";
+import { flatten, pick as pickSlot, pickAll, propsOf, slot, slotOf, } from "../../foundations/slots.js";
+import { createNoteRegistry, NoteRegistryContext, } from "../../primitives/field/note.js";
 import { Tabs } from "../../primitives/tabs/Tabs.js";
+import { useEffect, useId, useState, useSyncExternalStore } from "react";
 const pick = (nodes, name) => pickSlot(nodes, name);
 /** El riel: mi lugar delante del registro. Sin él, no hay banda — y eso
  *  es exactamente lo que un diálogo quiere. */
@@ -31,16 +34,26 @@ const Actions = slot("actions", (_props) => null);
  *  quien la pasaba armada tenía que acordarse de la superficie del riel. Olvidarlo
  *  pintaba la paleta del lienzo encima del chrome, y pasó. */
 const Status = slot("status", (_props) => null);
+/** What has to be known about THIS record before acting on it: «este cliente tiene
+ *  Bs. 1.200 en créditos pendientes · Aplicar», «posible factura duplicada», «vencida
+ *  hace 12 días», a blocking error from the backend. A `Callout` — the tone, one
+ *  sentence, an optional `title`, an optional `action` (secondary or ghost: the primary
+ *  belongs to the rail) and `onDismiss` when it can be put away.
+ *
+ *  Context: written as a child of `Record` or of `Record.Paper`, as many as are true —
+ *  `{overdue ? <Record.Notice tone="warn">…</Record.Notice> : null}`. Where they go is
+ *  the record's, and NONE goes among the fields: a `bad` one (blocking) stays visible
+ *  between the rail and the paper; the rest gather in one indicator in the rail —
+ *  «⚠ 2 avisos», toned by the most urgent — that opens their list on press. Both in
+ *  urgency order. A note about ONE field is that field's `note`. See `RecordNotices`.
+ *
+ *  Named `Notice` and not `Alert`: an ARIA `alert` interrupts the screen reader, and a
+ *  notice that was already true when the record opened interrupts nothing (`Callout`
+ *  is `role="status"`). */
+const NoticeSlot = slot("notice", (_props) => null);
 /** El papel: el registro. El `<sheet>` blanco sobre el piso. */
 const Paper = slot("paper", (_props) => null);
-/** Lo que al registro le PASÓ, al costado: mensajes y eventos en una columna.
- *
- *  Va al lado y no abajo porque la historia es el contexto de todo lo demás que
- *  está en pantalla — leer «la factura fue rechazada» mirando los datos que la
- *  produjeron es justamente para lo que sirve, y una sección más abajo obliga a
- *  ver una cosa o la otra. Lo que va adentro lo arma quien compone: el kit no
- *  sabe qué es un evento de este producto. */
-const ChatterSlot = slot("chatter", (_props) => null);
+const ActivitySlot = slot("activity", (_props) => null);
 /** Los hechos globales del registro. Están en TODAS las páginas, y por eso van
  *  arriba del cuaderno y no adentro de una. */
 const Facts = slot("facts", (_props) => null);
@@ -54,11 +67,10 @@ export function Record({ identity, error = null, dirty, children }) {
     const top = flatten(children);
     const railNode = pick(top, "rail");
     const paperNode = pick(top, "paper");
-    const chatterSlot = propsOf(pick(top, "chatter"));
-    const chatter = chatterSlot?.children;
+    const activitySlot = propsOf(pick(top, "activity"));
     /* La escotilla: lo que el arquetipo no previó se dibuja igual, en el papel.
        Que aparezca algo acá es la señal de que al arquetipo le falta una pieza. */
-    const loose = top.filter((node) => slotOf(node) !== "rail" && slotOf(node) !== "paper" && slotOf(node) !== "chatter");
+    const loose = top.filter((node) => slotOf(node) !== "rail" && slotOf(node) !== "paper" && slotOf(node) !== "activity");
     const rail = flatten(propsOf(railNode)?.children);
     const crumbs = propsOf(pick(rail, "crumbs"))?.crumbs;
     const pager = propsOf(pick(rail, "pager"));
@@ -81,6 +93,37 @@ export function Record({ identity, error = null, dirty, children }) {
     const paper = propsOf(paperNode);
     const inPaper = [...flatten(paper?.children), ...loose];
     const fields = propsOf(pick(inPaper, "facts"))?.fields;
+    /* Written at the top of the record or inside the paper: both are «on the record». */
+    const notices = pickAll(inPaper, "notice")
+        .map((node) => propsOf(node))
+        .filter((notice) => notice !== undefined);
+    const { blocking, rest } = splitNotices(notices);
+    /* The notes of the record's fields and rows, which the cards register as they mount. */
+    const [registry] = useState(createNoteRegistry);
+    const notes = useSyncExternalStore(registry.subscribe, registry.snapshot, registry.snapshot);
+    /* The panel's open state is the record's, so the rail's indicator can open it. */
+    const [ownOpen, setOwnOpen] = useState(activitySlot?.defaultOpen ?? true);
+    const activityOpen = activitySlot?.open ?? ownOpen;
+    const setActivityOpen = (next) => {
+        activitySlot?.onOpenChange?.(next);
+        if (activitySlot?.open === undefined)
+            setOwnOpen(next);
+    };
+    const alertsId = useId();
+    /* «⚠ 2 avisos» with a panel to go to: open it, then — once it is drawn — bring its
+       notices into view and put the focus on them. On a wide record they are beside the
+       sheet already; on a narrow one the panel is below and this is the scroll that finds
+       it. A counter and not a flag, so pressing it twice moves the focus twice. */
+    const [reveal, setReveal] = useState(0);
+    useEffect(() => {
+        if (reveal === 0)
+            return;
+        const section = document.getElementById(alertsId);
+        if (section === null)
+            return;
+        section.scrollIntoView({ block: "start" });
+        section.focus({ preventScroll: true });
+    }, [reveal, alertsId]);
     const notebook = propsOf(pick(inPaper, "pages"));
     const pages = flatten(notebook?.children).filter((node) => slotOf(node) === "page");
     const tabs = pages
@@ -113,19 +156,45 @@ export function Record({ identity, error = null, dirty, children }) {
        bar (last in it, `mt-auto`) reaches the bottom of the screen even when the record is
        shorter than the screen. The extra height has no paint of its own: on a desk
        nothing changes. */
-    _jsx("article", { className: "flex min-w-0 flex-1 flex-col", children: _jsx(RecordHeader, { railSurface: surface, ...(dirty === undefined ? {} : { dirty }), ...(crumbs === undefined ? {} : { crumbs }), ...(pager === undefined
-                ? {}
-                : {
-                    pager: (_jsx(PagerControl, { index: pager.index, total: pager.total, surface: surface, ...(pager.onPrev === undefined ? {} : { onPrev: pager.onPrev }), ...(pager.onNext === undefined ? {} : { onNext: pager.onNext }) })),
-                }), ...(actions === undefined ? {} : { actions }), ...(statusBlock === undefined ? {} : { status: statusBlock }), ...(identity.icon === undefined ? {} : { icon: identity.icon }), title: identity.title, ...(identity.subtitle === undefined ? {} : { subtitle: identity.subtitle }), ...(identity.figure === undefined ? {} : { figure: identity.figure }), ...(identity.tag === undefined ? {} : { tag: identity.tag }), ...(smart === undefined || smart.length === 0
-                ? {}
-                : {
-                    smart: (_jsx(SmartButtons, { children: smart.map((s) => (_jsx(SmartButton, { icon: s.icon, ...(s.count === undefined ? {} : { count: s.count }), label: s.label, layout: onTheRail && d === "comfortable" ? "inline" : "stacked", ...(s.onClick === undefined ? {} : { onClick: s.onClick }) }, s.label))) })),
-                }), ...(aspectsNode === undefined || globalSheet ? {} : { aspects: aspectsNode }), ...(chatter === undefined ? {} : { chatter }), ...(chatterSlot?.layout === undefined ? {} : { chatterLayout: chatterSlot.layout }), children: _jsxs("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block) px-4 pt-(--spacing-block) pb-4", "gap-2.5 pt-2.5 pb-2")}`, children: [error === null ? null : (_jsx(Failed, { heading: copy.failed.operation, sentence: error })), _jsxs(Sheet, { layout: paper?.layout ?? "stacked", columns: paper?.columns ?? 2, ...(hasFacts ? { fields } : {}), ...(above.length > 0 || (globalSheet && aspectsNode !== undefined)
-                            ? {
-                                head: (_jsxs(_Fragment, { children: [above, globalSheet && aspectsNode !== undefined ? (_jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspectsNode })) : null] })),
-                            }
-                            : {}), children: [pageBody, below] })] }) }) }));
+    /* The record knows the notes of its fields and rows: their cards register here. */
+    _jsx(NoteRegistryContext, { value: registry, children: _jsx("article", { className: "flex min-w-0 flex-1 flex-col", children: _jsx(RecordHeader, { railSurface: surface, ...(dirty === undefined ? {} : { dirty }), ...(crumbs === undefined ? {} : { crumbs }), ...(pager === undefined
+                    ? {}
+                    : {
+                        pager: (_jsx(PagerControl, { index: pager.index, total: pager.total, surface: surface, ...(pager.onPrev === undefined ? {} : { onPrev: pager.onPrev }), ...(pager.onNext === undefined ? {} : { onNext: pager.onNext }) })),
+                    }), ...(actions === undefined ? {} : { actions }), ...(statusBlock === undefined ? {} : { status: statusBlock }), ...(identity.icon === undefined ? {} : { icon: identity.icon }), title: identity.title, ...(identity.subtitle === undefined ? {} : { subtitle: identity.subtitle }), ...(identity.figure === undefined ? {} : { figure: identity.figure }), ...(identity.tag === undefined ? {} : { tag: identity.tag }), ...(smart === undefined || smart.length === 0
+                    ? {}
+                    : {
+                        smart: (_jsx(SmartButtons, { children: smart.map((s) => (_jsx(SmartButton, { icon: s.icon, ...(s.count === undefined ? {} : { count: s.count }), label: s.label, layout: onTheRail && d === "comfortable" ? "inline" : "stacked", ...(s.onClick === undefined ? {} : { onClick: s.onClick }) }, s.label))) })),
+                    }), ...(aspectsNode === undefined || globalSheet ? {} : { aspects: aspectsNode }), ...(activitySlot === undefined
+                    ? {}
+                    : {
+                        activity: (_jsx(Activity, { ...activitySlot, alerts: rest, alertsId: alertsId, open: activityOpen, onToggle: () => setActivityOpen(!activityOpen) })),
+                        activityLayout: activitySlot.layout ?? "auto",
+                    }), ...(blocking.length === 0 && error === null
+                    ? {}
+                    : {
+                        blocking: (_jsx(RecordBlocking, { notices: blocking, error: error, errorHeading: copy.failed.operation })),
+                    }), ...(rest.length === 0 && (activitySlot === undefined || notes.length === 0)
+                    ? {}
+                    : {
+                        indicator: (_jsx(RecordNoticeIndicator, { notices: rest, anchored: notes.map((entry) => ({ tone: entry.note.tone ?? "info" })), ...(activitySlot === undefined
+                                ? {}
+                                : {
+                                    /* With a panel, the notices live there: the indicator goes to them
+                                     instead of floating a second copy in a popover. */
+                                    reveal: {
+                                        target: alertsId,
+                                        onReveal: () => {
+                                            setActivityOpen(true);
+                                            setReveal((n) => n + 1);
+                                        },
+                                    },
+                                }) })),
+                    }), children: _jsx("div", { className: "min-w-0", children: _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-(--spacing-block) px-4 pt-(--spacing-block) pb-4", "gap-2.5 pt-2.5 pb-2")}`, children: _jsxs(Sheet, { layout: paper?.layout ?? "stacked", columns: paper?.columns ?? 2, ...(hasFacts ? { fields } : {}), ...(above.length > 0 || (globalSheet && aspectsNode !== undefined)
+                                ? {
+                                    head: (_jsxs(_Fragment, { children: [above, globalSheet && aspectsNode !== undefined ? (_jsx("div", { className: `border-b border-line-strong ${byDensity(d, "-mx-4 px-4", "")}`, children: aspectsNode })) : null] })),
+                                }
+                                : {}), children: [pageBody, below] }) }) }) }) }) }));
 }
 Record.Skeleton = RecordSkeleton;
 Record.Rail = Rail;
@@ -135,7 +204,8 @@ Record.Smart = Smart;
 Record.Actions = Actions;
 Record.Status = Status;
 Record.Paper = Paper;
-Record.Chatter = ChatterSlot;
+Record.Activity = ActivitySlot;
 Record.Facts = Facts;
 Record.Pages = Pages;
 Record.Page = Page;
+Record.Notice = NoticeSlot;

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

@@ -1 +1 @@
-export { Record, type RecordIdentity, type RecordPager, type RecordProps, type SmartLink, } from "./Record.js";
+export { Record, type RecordIdentity, type RecordNotice, type RecordPager, type RecordProps, type SmartLink, } from "./Record.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/web-ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An enterprise web design system for business software — ERPs, back offices, management tools — in React and Tailwind: tokens, primitives, components and the two views every management screen is made of.",
   "type": "module",
   "main": "./dist/index.js",
@@ -99,10 +99,14 @@
     "ui",
     "sincpro"
   ],
+  "homepage": "https://github.com/Sincpro-SRL/sincpro_web_ui#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Sincpro-SRL/sincpro_web_ui.git"
   },
+  "bugs": {
+    "url": "https://github.com/Sincpro-SRL/sincpro_web_ui/issues"
+  },
   "author": "Gutierrez, Andres <andres.gutierrez@sincpro.com.bo>",
   "license": "MIT",
   "engines": {

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

@@ -1,161 +0,0 @@
-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;
-};

package/dist/components/chatter/Chatter.js

@@ -1,232 +0,0 @@
-"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/index.js

@@ -1,4 +0,0 @@
-/* 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";