@sincpro/web-ui 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SINCPRO S.R.L
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,185 @@
-# Temporary Holding Version
+# @sincpro/web-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**A design system for enterprise web software** — ERPs, back offices, management tools: the
+screens where people spend eight hours a day reading records, filtering lists and filling
+forms. React + Tailwind v4, open source, by [Sincpro](https://github.com/Sincpro-SRL).
+
+Most design systems are built for marketing sites and consumer apps, then stretched over
+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, 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
+does not belong here: that is domain, and it lives in the application.
+
+### Principles
+
+- **Tokens or nothing.** Every color, size and radius comes from `src/tokens.css`. No
+  arbitrary Tailwind values, no hand-written hex, no raw `px`, no raw Tailwind palette — a
+  test enforces it, and every exception is written down with its reason.
+- **Contrast is measured, not guessed.** Each color token carries its WCAG ratio next to it,
+  and a test recomputes it: a number that drifted from its color fails the build.
+- **Two surfaces.** The work happens on a warm light _canvas_; navigation lives on a dark
+  _chrome_. A piece is judged on the surface it will actually live on.
+- **Density is a setting, not a fork.** The same components serve a dense ERP grid and a
+  roomy form (`DensityProvider`).
+- **Language is data.** Interface copy is English by default and replaced as a whole table
+  (`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
+yarn add @sincpro/web-ui react react-dom tailwindcss @tanstack/react-table @tanstack/react-virtual
+```
+
+Your bundler must run Tailwind v4 (`@tailwindcss/vite` or `@tailwindcss/postcss`). Then import
+the tokens once — fonts, theme and Tailwind come with it:
+
+```css
+@import "@sincpro/web-ui/tokens.css";
+```
+
+```tsx
+import { Field, installCopy, SPANISH_COPY, TextInput } from "@sincpro/web-ui";
+
+installCopy(SPANISH_COPY); // optional: the interface in Spanish
+
+export function CompanyName({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <Field label="Company name" required>
+      <TextInput value={value} onChange={onChange} />
+    </Field>
+  );
+}
+```
+
+Each level is also its own entry — `@sincpro/web-ui/foundations`, `/primitives`,
+`/components`, `/views` — so what a level offers is one import away.
+
+**React Server Components.** Every module that needs the browser (hooks, context, events)
+starts with `"use client"`, and a test keeps it that way; pure logic (calendar, pivot,
+criteria) stays callable from the server. The views are client components: compose
+`Record` inside a client component of your own.
+
+### Theming (light / dark)
+
+The palettes live in `tokens.css`: the same `--color-*` names, redefined for dark. Components
+never read the theme — they use `bg-surface` / `text-ink` and the cascade resolves them — so
+a screen needs no change to work in both.
+
+- With nothing configured the stylesheet follows `prefers-color-scheme`.
+- `data-theme="dark"` / `"light"` on **any** element forces that palette for everything under it
+  (a light invoice preview inside a dark app works). Portals live under `<html>`, so an app
+  switch writes it there.
+- `ThemeProvider` + `useTheme()` do that write (`"system" | "light" | "dark"`; `"system"`
+  removes the attribute) and `ThemeSwitcher` is the tiny control. Remembering the choice is
+  the app's job (`onChange`).
+
+```tsx
+<ThemeProvider
+  defaultValue="system"
+  onChange={(theme) => localStorage.setItem("theme", theme)}
+>
+  <App /> {/* somewhere: <ThemeSwitcher /> */}
+</ThemeProvider>
+```
+
+Rules a new token must follow: define it in **both** palettes with its contrast on the same line
+(`tests/tokens.test.ts` measures each theme against its own ground, surface and chrome, and fails
+if a light token has no dark twin or the two dark copies drift); the gold stays the primary
+action in both (`on-accent` keeps the text on it dark); never write a colour outside
+`tokens.css`; use `bg-scrim` — not `bg-ink/30` — for a veil. In Storybook the toolbar has a
+theme switch, or open a story with `&globals=theme:dark`.
+
+## Developing it
+
+```bash
+make init        # pre-commit + yarn install
+make dev         # Storybook on :6006 — the living documentation
+make test        # node --test: behaviour, tokens, contrast, client boundaries
+make smoke       # every story opened in headless Chrome: no console errors, no blanks
+make build       # dist/ (JS + .d.ts + tokens.css)
+```
+
+Node 26 (the active LTS) or newer — `nvm use` reads `.nvmrc`. Every operation — local or CI —
+goes through the `Makefile`; run `make` to list the targets.
+
+```text
+src/
+├── tokens.css     the source of every value: color, type, spacing, radii, motion
+├── 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, 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
+```
+
+`make doctor` rejects an import that climbs a level (a primitive importing a component, a
+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`](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
+stories that already exist instead of guessing them.
+
+## Contributing
+
+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](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/activity/Messages.d.ts

@@ -0,0 +1,66 @@
+import { type ReactNode } from "react";
+/**
+ * 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 —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
+ * 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;