@sincpro/web-ui 0.1.0 → 0.2.0

package/README.md

@@ -8,18 +8,39 @@ Most design systems are built for marketing sites and consumer apps, then stretc
 business software. This one starts from the other end: dense data, long sessions, keyboard
 users, numbers that must be legible, and screens that are always about _records_.
 
+## A UI that evolves — a method that holds
+
+`@sincpro/web-ui` **will keep changing.** Its look, the set of components and their props grow
+and get corrected as real screens ask for them. It is `0.x`: a minor release may break an API,
+and each release says what changed in
+[GitHub Releases](https://github.com/Sincpro-SRL/sincpro_web_ui/releases).
+
+What does not change is **how the components are managed** — and that is what this project is
+about:
+
+| Stable — the contract                                       | Evolving — the content            |
+| ----------------------------------------------------------- | --------------------------------- |
+| Every piece belongs to one of four levels, and imports down | Which components exist            |
+| Values come from tokens; contrast is measured               | The palette, sizes, density steps |
+| Interface copy is data, never written in a component        | The wording                       |
+| Every piece ships with a test and a story                   | Props, their names and defaults   |
+| Whole pages are built from the public API alone             | Visual details of each piece      |
+
+Each rule on the left is checked by a machine — `make test`, `make doctor`, `make smoke` — not
+by anyone's memory, so the catalogue can grow fast without rotting.
+
 ## The idea
 
 **Every management screen is one of two things: one record, or N records.** That is the
 whole product surface, and the system is organised around it in four levels — each one
 defined by what it _knows_, and each one importing only from the levels below:
 
-| Level           | What it knows                           | Examples                                                |
-| --------------- | --------------------------------------- | ------------------------------------------------------- |
-| **Foundations** | The decisions. No components.           | color, typography, scales, motion, surfaces             |
-| **Primitives**  | Nothing about the screen it is on.      | `Button`, `Field`, `Menu`, `Tag`, `Table`, `Dialog`     |
-| **Components**  | One question of the product, by family. | data tables, search and criteria, record parts, chatter |
-| **Views**       | The two macros, and nothing else.       | `Record` (one) · `List` (N)                             |
+| Level           | What it knows                           | Examples                                                 |
+| --------------- | --------------------------------------- | -------------------------------------------------------- |
+| **Foundations** | The decisions. No components.           | color, typography, scales, motion, surfaces              |
+| **Primitives**  | Nothing about the screen it is on.      | `Button`, `Field`, `Menu`, `Tag`, `Table`, `Dialog`      |
+| **Components**  | One question of the product, by family. | data tables, search and criteria, record parts, activity |
+| **Views**       | The two macros, and nothing else.       | `Record` (one) · `List` (N)                              |
 
 If something does not fit one of the two views, it is not a view — it is a component in
 disguise. And if something needs to know what an invoice, a dataset or a customer _is_, it
@@ -40,6 +61,12 @@ does not belong here: that is domain, and it lives in the application.
   (`installCopy(SPANISH_COPY)`, `UiCopyProvider`) — never hard-coded in a component.
 - **Accessible by default.** Storybook runs the a11y checks as errors, not warnings.
 
+The full set — hierarchy, one primary action, color that means something, progressive
+disclosure, undo over confirm… — each with the piece that applies it and the check that
+enforces it, is in
+[`docs/PRINCIPLES.md`](https://github.com/Sincpro-SRL/sincpro_web_ui/blob/main/docs/PRINCIPLES.md)
+(in Spanish).
+
 ## Using it
 
 ```bash
@@ -130,7 +157,7 @@ src/
 ├── index.ts       the public surface: the four levels below
 ├── foundations/   density, surface, copy, slots, calendar, pivot, xlsx
 ├── primitives/    one folder per family: button, field, menu, table, tabs, …
-├── components/    one folder per family: listing, record, search, form, chatter, frame, shell
+├── components/    one folder per family: listing, record, search, form, activity, frame, shell
 └── views/         list (N records) · record (one record)
 stories/           Storybook, by level — and templates/: whole pages built from the public API
 tests/             node --test over the TypeScript sources
@@ -142,7 +169,7 @@ component importing a view), so the layering holds without anyone remembering it
 ### Iterating with AI
 
 This system is developed together with AI agents, and it is set up for it: the rules an
-agent must follow live in [`AGENTS.md`](./AGENTS.md), the guards that catch what an agent
+agent must follow live in [`AGENTS.md`](https://github.com/Sincpro-SRL/sincpro_web_ui/blob/main/AGENTS.md), the guards that catch what an agent
 gets wrong (tokens, contrast, import direction, client boundaries, stories that blow up)
 run in `make test`, `make doctor` and `make smoke`, and
 while `make dev` runs, Storybook serves an MCP endpoint at `/mcp` so an agent reads the
@@ -150,9 +177,9 @@ stories that already exist instead of guessing them.
 
 ## Contributing
 
-See [CONTRIBUTING.md](./CONTRIBUTING.md). Issues and pull requests are welcome — especially
+See [CONTRIBUTING.md](https://github.com/Sincpro-SRL/sincpro_web_ui/blob/main/CONTRIBUTING.md). Issues and pull requests are welcome — especially
 from people who build business software for a living.
 
 ## License
 
-[MIT](./LICENSE) © SINCPRO S.R.L.
+[MIT](https://github.com/Sincpro-SRL/sincpro_web_ui/blob/main/LICENSE) © SINCPRO S.R.L.

package/dist/components/activity/Activity.d.ts

@@ -0,0 +1,69 @@
+import type { Message } from "./Messages.js";
+import type { Tone } from "../../foundations/types.js";
+import { type CalloutProps } from "../../primitives/notice/Callout.js";
+import type { LucideIcon } from "lucide-react";
+import { type ReactNode } from "react";
+/**
+ * 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.
+ *
+ *     by       QUIÉN. Ausente = lo hizo el sistema, que también es una respuesta.
+ *     moved    DE QUÉ A QUÉ. «borrador → confirmado» se lee de una.
+ *     error    QUÉ falló, entero y textual: quien mira esta pantalla muchas
+ *              veces no tiene acceso a los logs.
+ */
+export type ActivityEvent = {
+    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. */
+    error?: string;
+    /** El ícono del punto, cuando el rayo no dice lo suficiente. */
+    icon?: LucideIcon;
+};
+/** A notice of the record, as the panel lists it: a `Callout` without its × label. */
+export type ActivityAlert = Omit<CalloutProps, "dismissLabel">;
+/** `auto`: beside the sheet when the record is wide, below when not. `below`: always below. */
+export type ActivityLayout = "auto" | "below";
+export type ActivityProps = {
+    /** 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 ActivityEvent[];
+    /** What is true now about the record, in urgency order — `Record` passes its notices. */
+    alerts?: readonly ActivityAlert[];
+    /** The id of the notices section: where the rail's indicator sends the focus. */
+    alertsId?: string;
+    /** The box to write in, when this record takes messages. It heads the conversation:
+     *  writing is the thing you came to do, reading is what you do next. */
+    composer?: ReactNode;
+    open: boolean;
+    onToggle: () => void;
+    /** The panel's name. «Actividad» by default. */
+    label?: string;
+    layout?: ActivityLayout;
+};
+export declare function Activity({ messages, events, alerts, alertsId: ownAlertsId, composer, open, onToggle, label: ownLabel, layout, }: ActivityProps): import("react").JSX.Element;
+/** Whether a standalone activity panel is open. Inside a `Record`, `Record.Activity`
+ *  keeps this state itself (open by default: on a big screen you see what the record has). */
+export declare function useActivity(initial?: boolean): {
+    open: boolean;
+    toggle: () => void;
+    /** Open it without closing it if it already was. */
+    show: () => void;
+};

package/dist/components/activity/Activity.js

@@ -0,0 +1,279 @@
+"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 { cn } from "../../foundations/variants.js";
+import { IconButton } from "../../primitives/button/Button.js";
+import { SegmentedControl } from "../../primitives/choice/SegmentedControl.js";
+import { useNoteEntries } from "../../primitives/field/note.js";
+import { Callout } from "../../primitives/notice/Callout.js";
+import { Tag } from "../../primitives/tag/Tag.js";
+import { DateValue } from "../../primitives/value/Fecha.js";
+import { Avatar } from "../../primitives/value/Person.js";
+import { Activity as ActivityIcon, ArrowRight, CheckCircle2, ChevronDown, ChevronRight, ChevronUp, CornerDownRight, History, Info, Lock, MessageSquare, OctagonAlert, PanelRightClose, PanelRightOpen, TriangleAlert, Zap, } from "lucide-react";
+import { Fragment, useId, useState } from "react";
+/** The day an instant falls on, here — a `YYYY-MM-DD` key in local time. */
+function dayKey(time) {
+    const d = new Date(time);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+/** How a day separator reads: «Hoy», «Ayer», or the date — with the year only when it is
+ *  not this one, since «13 de octubre» is all a recent history needs. */
+function dayLabel(key, locale, words, now = new Date()) {
+    const today = dayKey(now.getTime());
+    const yesterday = dayKey(now.getTime() - 86_400_000);
+    if (key === today)
+        return words.today;
+    if (key === yesterday)
+        return words.yesterday;
+    const [y, m, d] = key.split("-").map(Number);
+    const date = new Date(y, m - 1, d);
+    return new Intl.DateTimeFormat(locale, {
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        ...(y === now.getFullYear() ? {} : { year: "numeric" }),
+    }).format(date);
+}
+/* The most urgent tone first: the alerts' count takes the tone of the first. */
+const URGENCY = {
+    bad: 0,
+    warn: 1,
+    info: 2,
+    good: 3,
+};
+function mostUrgent(alerts) {
+    return alerts.reduce((best, one) => {
+        const tone = one.tone ?? "info";
+        return URGENCY[tone] < URGENCY[best] ? tone : best;
+    }, "good");
+}
+/* The tone's shape, the same as `Callout`'s: a triangle warns, an «i» informs. */
+const ALERT_ICON = {
+    bad: OctagonAlert,
+    warn: TriangleAlert,
+    info: Info,
+    good: CheckCircle2,
+};
+/* ONE icon for every event: the bolt, which is what happened — something ran. One per
+   tone turned the history into a sample book; what has to stand out is a failure, and
+   that is said by the row's tint. */
+const EVENT_ICON = Zap;
+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();
+}
+/* The stream's two kinds of entry share one GEOMETRY: a 1.5rem disc (the face, or the
+   event's node) on the left, the text beside it, the meta line under it. Two geometries
+   in one list read as two lists glued together. */
+function MessageEntry({ message }) {
+    const copy = useUiCopy();
+    const internal = message.internal === true;
+    return (_jsxs("li", { className: "flex min-w-0 gap-2.5 px-2 py-2", children: [_jsx(Avatar, { name: message.author, size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [_jsx("span", { className: "truncate text-meta font-medium text-ink", children: message.author }), _jsx("span", { className: "text-micro text-muted", children: _jsx(DateValue, { when: message.at, format: "relative" }) }), internal ? (_jsxs("span", { className: "inline-flex items-center gap-1 text-micro text-muted", title: copy.activity.internalNote, children: [_jsx(Lock, { className: "size-3", "aria-hidden": true }), copy.activity.internal] })) : null] }), _jsx("p", { className: cn("max-w-(--container-prose) rounded-box px-2.5 py-1.5 text-body whitespace-pre-line text-ink", internal ? "border border-warn/35 bg-warn/6" : "bg-ground"), children: message.body })] })] }));
+}
+/** The change of state: from what to what. The old one quiet, the new one in ink. */
+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", strokeWidth: 2.5, "aria-hidden": true })] })), _jsx("span", { className: `${STATE_CHIP} font-medium text-ink`, children: to })] }));
+}
+/** The error: the first line, and the rest one press away — kept, not dropped. */
+function ErrorLine({ error }) {
+    const copy = useUiCopy();
+    const [open, setOpen] = useState(false);
+    const lines = error.split("\n");
+    const first = lines[0] ?? "";
+    const more = lines.length > 1 || first.length > 120;
+    return (_jsxs("div", { className: "min-w-0 rounded-control border border-line bg-surface 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 : first }), !more ? 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.activity.less : copy.activity.more }))] }));
+}
+/**
+ * UN EVENTO: a row that opens, not a line.
+ *
+ * Closed it says what happened —in up to two lines, never cut to «se envió …»— and
+ * under it who and when, in the quiet size. That second line is what made the narrow
+ * column legible: side by side, the name and the date took half the width and the
+ * label was clipped to three words. A failure tints the row; the rest stays ink.
+ */
+function EventEntry({ event }) {
+    const copy = useUiCopy();
+    const failed = event.tone === "bad" || event.error !== undefined;
+    const skin = failed ? "failed" : "ok";
+    const Icon = event.icon ?? EVENT_ICON;
+    const [open, setOpen] = useState(false);
+    const more = event.moved !== undefined || event.detail !== undefined || event.error !== undefined;
+    const row = (_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 }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "line-clamp-2 text-meta text-ink", children: event.label }), _jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5 text-micro text-muted", children: [_jsx("span", { className: "truncate", children: event.by ?? copy.activity.bySystem }), _jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx(DateValue, { when: event.at, format: "relative" })] })] }), more ? (_jsx(ChevronRight, { className: `mt-1 size-3.5 shrink-0 text-muted transition-transform duration-(--duration-instant) ${open ? "rotate-90" : ""}`, strokeWidth: 2.5, "aria-hidden": true })) : null] }));
+    const box = `flex w-full min-w-0 items-start gap-2.5 rounded-control px-2 py-2 text-left ${failed ? "bg-bad/6" : ""}`;
+    return (_jsxs("li", { className: "group/event relative", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-8 bottom-0 left-5 w-px bg-line group-last/event:hidden" }), more ? (_jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-expanded": open, className: `${box} cursor-pointer transition-colors duration-(--duration-instant) focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary ${failed ? "hover:bg-bad/10" : "hover:bg-ink/4"}`, children: row })) : (_jsx("div", { className: box, children: row })), !open ? null : (_jsxs("div", { className: "mb-1 ml-10.5 flex min-w-0 flex-col gap-1.5 rounded-control 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.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 })] }))] }));
+}
+/** Takes you to the field or row a note belongs to, and lights it for a moment so the eye
+ *  lands on it. The light is the system's focus colour, faded out; with reduced motion it
+ *  is shown and removed without the fade. */
+function goTo(entry) {
+    const target = entry.anchor();
+    if (target === null)
+        return;
+    const still = typeof window !== "undefined" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    target.scrollIntoView({ block: "center", behavior: still ? "auto" : "smooth" });
+    target.animate([
+        {
+            boxShadow: "0 0 0 0.125rem var(--color-primary)",
+            borderRadius: "var(--radius-control)",
+        },
+        { boxShadow: "0 0 0 0.125rem transparent", borderRadius: "var(--radius-control)" },
+    ], { duration: still ? 1 : 1800, easing: "ease-out", delay: still ? 1200 : 300 });
+}
+/** A field note or row flag in the timeline: its sentence, and WHAT it belongs to — a link
+ *  that takes you there. */
+function NoteLine({ entry }) {
+    const copy = useUiCopy();
+    const tone = entry.note.tone ?? "info";
+    const Icon = ALERT_ICON[tone];
+    return (_jsx("li", { className: "min-w-0", children: _jsxs("button", { type: "button", onClick: () => goTo(entry), title: entry.owner === ""
+                ? undefined
+                : fillCopy(copy.activity.goTo, { owner: entry.owner }), className: "flex w-full min-w-0 cursor-pointer items-start gap-2 rounded-control px-2 py-1.5 text-left transition-colors duration-(--duration-instant) hover:bg-ink/4 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-primary", children: [_jsx("span", { className: `mt-0.5 shrink-0 ${TONE_TEXT[tone]}`, children: _jsx(Icon, { className: "size-(--size-icon-sm)", strokeWidth: 2.25, "aria-hidden": true }) }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "text-meta text-ink", children: entry.note.label }), entry.owner === "" ? null : (_jsxs("span", { className: "flex min-w-0 items-center gap-1 text-micro text-muted", children: [_jsx(CornerDownRight, { className: "size-3 shrink-0", "aria-hidden": true }), _jsx("span", { className: "truncate", children: entry.owner })] }))] })] }) }));
+}
+const TONE_TEXT = {
+    bad: "text-bad",
+    warn: "text-warn",
+    info: "text-info",
+    good: "text-good",
+};
+export function Activity({ messages, events, alerts = [], alertsId: ownAlertsId, composer, open, onToggle, label: ownLabel, layout = "auto", }) {
+    const copy = useUiCopy();
+    const label = ownLabel ?? copy.activity.title;
+    const titleId = useId();
+    const autoAlertsId = useId();
+    const alertsId = ownAlertsId ?? autoAlertsId;
+    const auto = layout === "auto";
+    /* The notes of the fields and rows of the record around — `Record` keeps them. */
+    const notes = useNoteEntries();
+    const byTime = (items) => [...items].sort((x, y) => at(y.at) - at(x.at));
+    const said = byTime(messages ?? []);
+    const logged = byTime(events ?? []);
+    const notices = alerts.length + notes.length;
+    const tones = [
+        ...alerts.map((a) => a.tone ?? "info"),
+        ...notes.map((n) => n.note.tone ?? "info"),
+    ];
+    const alertTone = tones.length === 0 ? undefined : mostUrgent(tones.map((tone) => ({ tone })));
+    const AlertIcon = ALERT_ICON[alertTone ?? "info"];
+    /* ONE stream, by time: what happened before what is the whole point of a history. */
+    const [filter, setFilter] = useState("all");
+    const stream = [
+        ...said.map((message) => ({
+            kind: "message",
+            at: at(message.at),
+            id: `m-${message.id}`,
+            message,
+        })),
+        ...logged.map((event) => ({
+            kind: "event",
+            at: at(event.at),
+            id: `e-${event.id}`,
+            event,
+        })),
+    ].sort((x, y) => y.at - x.at);
+    const kept = stream.filter((entry) => filter === "all"
+        ? true
+        : filter === "events"
+            ? entry.kind === "event"
+            : entry.kind === "message" &&
+                (filter === "notes") === (entry.message.internal === true));
+    const pages = usePagination(kept, { pageSize: 20 });
+    const counts = {
+        conversation: said.filter((m) => m.internal !== true).length,
+        notes: said.filter((m) => m.internal === true).length,
+        events: logged.length,
+    };
+    /* The notices, compact: the first three, the rest one press away. */
+    const [allAlerts, setAllAlerts] = useState(false);
+    const SHOWN = 3;
+    /* A count with its shape and, for a screen reader, its word: «💬 1» is «Conversación 1». */
+    const counted = (Icon, n, word) => (_jsxs("span", { className: "inline-flex shrink-0 items-center gap-1 text-micro text-muted tabular-nums", children: [_jsx(Icon, { className: "size-3.5", strokeWidth: 2, "aria-hidden": true }), n, _jsx("span", { className: "sr-only", children: word })] }));
+    /* ── Folded: a strip that still says how much there is ──────────── */
+    if (!open) {
+        return (_jsxs("button", { type: "button", onClick: onToggle, 
+            /* Named by what it shows — «Actividad, 2 avisos, 1 Conversación, 5 Historial» —
+               so the counts are heard too; the tooltip says what pressing it does. */
+            title: fillCopy(copy.activity.open, { label }), "aria-expanded": false, "data-activity": "folded", className: cn("flex w-full min-w-0 cursor-pointer items-center gap-2.5 rounded-box border border-line bg-surface px-3 py-2.5 text-left transition-colors duration-(--duration-instant) hover:bg-ink/3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", 
+            /* Beside the sheet it folds to a slim column JOINED to it: the toggle on top
+               where the eye starts, and under it the counts, stacked — nothing hidden
+               silently. The sheet's own right edge is the hairline between the two. */
+            auto &&
+                "@beside/page:w-auto @beside/page:flex-col @beside/page:justify-start @beside/page:gap-3 @beside/page:rounded-l-none @beside/page:border-l-0 @beside/page:px-2 @beside/page:py-3"), children: [_jsx("span", { className: cn("hidden shrink-0 text-muted", auto && "@beside/page:block"), children: _jsx(PanelRightOpen, { className: "size-(--size-icon-md)", "aria-hidden": true }) }), _jsx(ActivityIcon, { className: cn("size-(--size-icon-md) shrink-0 text-muted", auto && "@beside/page:hidden"), "aria-hidden": true }), _jsx("span", { className: cn("min-w-0 truncate text-meta font-medium text-ink", auto && "@beside/page:sr-only"), children: label }), alertTone === undefined ? null : (_jsxs(Tag, { tone: alertTone, children: [_jsxs("span", { className: cn("hidden items-center gap-1", auto && "@beside/page:inline-flex"), children: [_jsx(AlertIcon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }), notices] }), _jsx("span", { className: cn(auto && "@beside/page:sr-only"), children: fillCopy(notices === 1 ? copy.record.noticeOne : copy.record.noticeMany, {
+                                count: notices,
+                            }) })] })), messages === undefined
+                    ? null
+                    : counted(MessageSquare, said.length, copy.activity.conversation), events === undefined ? null : counted(History, logged.length, copy.activity.history), _jsx("span", { className: cn("ml-auto shrink-0 text-muted", auto && "@beside/page:hidden"), children: _jsx(ChevronDown, { className: "size-(--size-icon-md)", "aria-hidden": true }) })] }));
+    }
+    return (_jsxs("section", { "aria-labelledby": titleId, "data-activity": "open", className: cn("flex w-full min-w-0 flex-col rounded-box border border-line bg-surface", 
+        /* Beside the sheet: its column, joined to it — the sheet's right edge is the line. */
+        auto &&
+            "@beside/page:w-(--container-activity) @beside/page:rounded-l-none @beside/page:border-l-0"), children: [_jsxs("header", { className: "flex min-w-0 items-center gap-2 border-b border-line py-1.5 pr-1.5 pl-3", children: [_jsx(ActivityIcon, { className: "size-(--size-icon-md) shrink-0 text-muted", "aria-hidden": true }), _jsx("h2", { id: titleId, className: "min-w-0 truncate text-meta font-semibold text-ink", children: label }), _jsxs("span", { className: "ml-auto flex shrink-0", children: [_jsx("span", { className: cn("flex", auto && "@beside/page:hidden"), children: _jsx(IconButton, { icon: ChevronUp, label: fillCopy(copy.activity.fold, { label }), onClick: onToggle }) }), auto ? (_jsx("span", { className: "hidden @beside/page:flex", children: _jsx(IconButton, { icon: PanelRightClose, label: fillCopy(copy.activity.fold, { label }), onClick: onToggle }) })) : null] })] }), notices === 0 ? null : (
+            /* NOW, before what happened. The rail's indicator sends the focus here, so it is
+               focusable without being a tab stop. */
+            _jsxs("section", { id: alertsId, tabIndex: -1, "aria-label": copy.activity.alerts, "data-activity-alerts": "", className: "flex min-w-0 scroll-mt-(--size-appbar) flex-col gap-2 border-b border-line px-3 py-3 outline-0 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary", children: [_jsxs("h3", { className: "flex items-center gap-2 px-1 text-micro font-medium text-muted", children: [copy.activity.alerts, _jsx(Tag, { tone: alertTone ?? "info", children: notices })] }), (() => {
+                        const rows = [
+                            ...alerts.map(({ children, ...alert }, i) => ({
+                                key: `a${i}`,
+                                node: (_jsx(Callout, { ...alert, dismissLabel: copy.shell.closeNotice, children: children })),
+                            })),
+                            ...notes.map((entry) => ({
+                                key: entry.id,
+                                node: (_jsx("ul", { className: "-mx-1 flex min-w-0 flex-col", children: _jsx(NoteLine, { entry: entry }) })),
+                            })),
+                        ];
+                        const shown = allAlerts ? rows : rows.slice(0, SHOWN);
+                        return (_jsxs(_Fragment, { children: [shown.map((row) => (_jsx(Fragment, { children: row.node }, row.key))), rows.length <= SHOWN ? null : (_jsx("button", { type: "button", "aria-expanded": allAlerts, onClick: () => setAllAlerts(!allAlerts), className: "self-start rounded-control px-1 text-micro font-medium text-primary hover:underline focus-visible:outline-2 focus-visible:outline-primary", children: allAlerts
+                                        ? copy.activity.fewerAlerts
+                                        : fillCopy(copy.activity.moreAlerts, { count: rows.length - SHOWN }) }))] }));
+                    })()] })), _jsxs("section", { "aria-label": copy.activity.viewTimeline, className: "flex min-w-0 flex-col gap-3 px-3 py-3", children: [_jsx("h3", { className: "px-1 text-micro font-medium text-muted", children: copy.activity.viewTimeline }), composer, stream.length === 0 ? null : (_jsx(SegmentedControl, { size: "sm", "aria-label": copy.activity.filters, value: filter, onChange: (next) => setFilter(next), options: [
+                            { value: "all", label: copy.activity.filterAll },
+                            ...(messages === undefined
+                                ? []
+                                : [
+                                    {
+                                        value: "conversation",
+                                        label: `${copy.activity.filterConversation} · ${counts.conversation}`,
+                                    },
+                                    {
+                                        value: "notes",
+                                        label: `${copy.activity.filterNotes} · ${counts.notes}`,
+                                    },
+                                ]),
+                            ...(events === undefined
+                                ? []
+                                : [
+                                    {
+                                        value: "events",
+                                        label: `${copy.activity.filterEvents} · ${counts.events}`,
+                                    },
+                                ]),
+                        ] })), stream.length === 0 ? (_jsx("p", { className: "px-1 text-meta text-muted", children: messages === undefined ? copy.activity.emptyEvents : copy.activity.emptyMessages })) : kept.length === 0 ? (_jsx("p", { className: "px-1 text-meta text-muted", children: copy.activity.emptyFilter })) : (_jsxs(_Fragment, { children: [_jsx("ol", { "aria-label": copy.activity.viewTimeline, className: "-mx-1 flex min-w-0 flex-col", children: pages.pageItems.map((entry, i) => {
+                                    const day = dayKey(entry.at);
+                                    const before = pages.pageItems[i - 1];
+                                    const newDay = before === undefined || dayKey(before.at) !== day;
+                                    return (_jsxs(Fragment, { children: [newDay ? (
+                                            /* The day: a quiet rule with its name, so «what happened on the 13th»
+                                               is found by scanning, not by reading every date. */
+                                            _jsxs("li", { "aria-hidden": true, className: "flex items-center gap-2 px-1 pt-2 pb-1 text-micro font-medium text-muted first:pt-0", children: [_jsx("span", { className: "first-letter:uppercase", children: dayLabel(day, copy.locale, {
+                                                            today: copy.activity.today,
+                                                            yesterday: copy.activity.yesterday,
+                                                        }) }), _jsx("span", { className: "h-px flex-1 bg-line" })] })) : null, entry.kind === "message" ? (_jsx(MessageEntry, { message: entry.message })) : (_jsx(EventEntry, { event: entry.event }))] }, entry.id));
+                                }) }), kept.length <= 20 ? null : _jsx(Pagination, { ...pages.bridge })] }))] })] }));
+}
+/** Whether a standalone activity panel is open. Inside a `Record`, `Record.Activity`
+ *  keeps this state itself (open by default: on a big screen you see what the record has). */
+export function useActivity(initial = true) {
+    const [open, setOpen] = useState(initial);
+    return {
+        open,
+        toggle: () => setOpen((current) => !current),
+        /** Open it without closing it if it already was. */
+        show: () => setOpen(true),
+    };
+}

package/dist/components/{chatter → activity}/Messages.d.ts

@@ -1,9 +1,9 @@
 import { type ReactNode } from "react";
 /**
- * The box to write in. What gets written is drawn by `Chatter`, together with
+ * The box to write in. What gets written is drawn by `Activity`, 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
+ * Odoo's chatter —our activity— 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

package/dist/components/{chatter → activity}/Messages.js

@@ -16,9 +16,9 @@ export function writeANote() {
     const copy = currentCopy();
     return {
         id: "note",
-        label: copy.chatter.writeNote,
+        label: copy.activity.writeNote,
         internal: true,
-        placeholder: copy.chatter.notePlaceholder,
+        placeholder: copy.activity.notePlaceholder,
     };
 }
 export function MessageComposer({ kinds, onSend, sending = false, footer, }) {
@@ -34,10 +34,13 @@ export function MessageComposer({ kinds, onSend, sending = false, footer, }) {
         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: () => {
+    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, { 
+                        /* Chosen is `secondary`, not `primary`: the gold is the record's one action,
+                           and a way of writing that is merely selected is not an action. */
+                        role: writing?.id === kind.id ? "secondary" : "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.activity.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.activity.noRecipients
+                                    : writing.recipients.join(" · ") })] })), _jsx(TextArea, { value: body, onChange: setBody, placeholder: writing.placeholder ?? copy.activity.messagePlaceholder, rows: 3 }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(Button, { role: "secondary", 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 })] })] }))] }));
+                                }, children: sending ? copy.activity.sending : copy.activity.send }), _jsx(Button, { role: "ghost", size: "sm", icon: X, onClick: close, children: copy.activity.cancel })] })] }))] }));
 }

package/dist/components/{chatter → activity}/index.d.ts

@@ -1,3 +1,3 @@
-export { Chatter, type ChatterEvent, type ChatterLayout, type ChatterProps, type ChatterView, useChatter, } from "./Chatter.js";
+export { Activity, type ActivityAlert, type ActivityEvent, type ActivityLayout, type ActivityProps, useActivity, } from "./Activity.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/activity/index.js

@@ -0,0 +1,4 @@
+/* ACTIVITY — everything around a record: its notices, its conversation and its history. */
+export { Activity, useActivity, } from "./Activity.js";
+export { MessageComposer, writeANote, } from "./Messages.js";
+export { Timeline, } from "./Timeline.js";

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

@@ -1,5 +1,5 @@
+import type { ActivityEvent } from "../activity/Activity.js";
 import { type AssistOrigin, type AssistSource } from "./assist.js";
-import type { ChatterEvent } from "../chatter/Chatter.js";
 import type { ReactNode } from "react";
 /** The robot and the assistant's name: the header of a suggestion, a review, a pending
  *  state. `children` replaces the name — «Asistente sugiere». */
@@ -43,7 +43,7 @@ export declare function AssistedValue({ children, origin, }: {
     origin?: AssistOrigin;
 }): import("react").JSX.Element;
 /**
- * The assistant's entry in a record's history: the chatter's event, with the robot as its
+ * The assistant's entry in a record's history: the activity's event, with the robot as its
  * node, the assistant (and who accepted) as its author, and the source as its detail.
  *
  * Context: provenance has two places. The mark answers «where did THIS value come from»
@@ -61,4 +61,4 @@ export declare function assistEvent({ id, label, at, source, acceptedBy, }: {
     at: Date | string | number;
     source?: AssistSource;
     acceptedBy?: string;
-}): ChatterEvent;
+}): ActivityEvent;

package/dist/components/assist/AssistMark.js

@@ -81,7 +81,7 @@ export function AssistedValue({ children, origin, }) {
     return (_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-center gap-0.5", children: [_jsx("span", { className: "min-w-0 truncate", children: children }), _jsx(AssistMark, { ...(origin === undefined ? {} : { origin }) })] }));
 }
 /**
- * The assistant's entry in a record's history: the chatter's event, with the robot as its
+ * The assistant's entry in a record's history: the activity's event, with the robot as its
  * node, the assistant (and who accepted) as its author, and the source as its detail.
  *
  * Context: provenance has two places. The mark answers «where did THIS value come from»

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

@@ -7,7 +7,7 @@ import type { ReactNode } from "react";
  *  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. */
+ *  a `ActivityEvent` — uses the same mark and not a second one. */
 export declare const ASSIST_ICON: LucideIcon;
 /** Where a suggestion or a change comes from: «orden de compra PO/2026/0042», «las últimas
  *  5 facturas del cliente». With `href` it is a real link; with `onOpen`, a button that the

package/dist/components/assist/assist.js

@@ -24,7 +24,7 @@ import { Bot } from "lucide-react";
  *  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. */
+ *  a `ActivityEvent` — uses the same mark and not a second one. */
 export const ASSIST_ICON = Bot;
 /**
  * Runs `apply` and, when it returns an undo and there is a notice stack, offers it.

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

@@ -1,4 +1,5 @@
 import { type SheetLayout } from "../../primitives/field/layout.js";
+import { type FieldNote } from "../../primitives/field/note.js";
 import type { LucideIcon } from "lucide-react";
 import { type ReactNode } from "react";
 export type { SheetLayout };
@@ -8,6 +9,9 @@ export type SheetField = {
     /** Help on the label, as a `?`. Hover or click. */
     hint?: string;
     mono?: boolean;
+    /** A note that belongs to this fact — the same as `Field`'s: a flag by the label, and an
+     *  entry in the record's activity. */
+    note?: FieldNote;
 };
 export declare function Sheet({ fields, columns, layout, head, children, }: {
     fields?: readonly SheetField[];

package/dist/components/form/Sheet.js

@@ -2,10 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { byDensity, useDensity } from "../../foundations/density.js";
 import { FieldLayoutProvider, } from "../../primitives/field/layout.js";
+import { NoteCard, NoteFlag } from "../../primitives/field/note.js";
 import { Hint } from "../../primitives/hint/Hint.js";
-import { Children } from "react";
+import { Children, useId } from "react";
 function Facts({ fields, columns, layout, }) {
     const d = useDensity();
+    const idBase = useId();
     const horizontal = layout === "horizontal";
     /* Horizontal facts are a run of pairs, not a grid stretched across the
        paper. A two-column grid put «Total Bs 12.480» on the left and «Vence
@@ -20,10 +22,15 @@ function Facts({ fields, columns, layout, }) {
             ? "flex min-w-0 flex-wrap items-baseline gap-x-6 gap-y-1.5"
             : asGrid
                 ? `@container grid min-w-0 ${grid} ${byDensity(d, "gap-x-8 gap-y-2.5", "gap-x-6 gap-y-2")}`
-                : `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: fields.map((field) => {
+                : `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: fields.map((field, at) => {
+            const noteId = field.note === undefined ? undefined : `${idBase}-${at}-note`;
             const empty = field.value === undefined || field.value === null || field.value === "";
-            const value = (_jsx("dd", { className: `min-w-0 text-meta ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: empty ? "—" : field.value }));
-            const name = (_jsxs("dt", { className: `flex items-center gap-1 text-micro text-muted ${horizontal ? "shrink-0" : "min-w-0"}`, children: [_jsx("span", { children: field.label }), field.hint === undefined ? null : _jsx(Hint, { children: field.hint })] }));
+            const card = field.note === undefined || noteId === undefined ? null : (_jsx(NoteCard, { note: field.note, id: noteId, owner: field.label }));
+            /* The note's card goes INSIDE the value: a `<dl>` holds only its terms and values.
+               With a note the value is a flex box, so the absolute card keeps the value's top
+               as its static position while being read after it. */
+            const value = (_jsxs("dd", { ...(noteId === undefined ? {} : { "aria-describedby": noteId }), className: `min-w-0 text-meta ${card === null ? "" : "flex"} ${empty ? "text-muted italic" : "text-ink"} ${field.mono === true ? "font-mono tabular-nums" : ""}`, children: [empty ? "—" : field.value, card] }));
+            const name = (_jsxs("dt", { className: `flex items-center gap-1 text-micro text-muted ${horizontal ? "shrink-0" : "min-w-0"}`, children: [_jsx("span", { children: field.label }), field.hint === undefined ? null : _jsx(Hint, { children: field.hint }), field.note === undefined ? null : _jsx(NoteFlag, { note: field.note })] }));
             if (horizontal) {
                 /* A header fact is a pair: the number sits next to its name. The
                    8rem label column is for a form, where twenty values have to

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
+export * from "./activity/index.js";
 export * from "./assist/index.js";
-export * from "./chatter/index.js";
 export * from "./form/index.js";
 export * from "./frame/index.js";
 export * from "./lines/index.js";