@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/views/record/Record.js

@@ -1,16 +1,21 @@
 "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 { RecordAudit } from "../../components/record/RecordAudit.js";
 import { RecordHeader } from "../../components/record/RecordHeader.js";
+import { RecordBlocking, RecordNoticeIndicator, splitNotices, } from "../../components/record/RecordNotices.js";
+import { RecordRibbon } from "../../components/record/RecordRibbon.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 +36,31 @@ 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);
+/** What the record IS now, across the paper's corner: «PAGADA», «ARCHIVADA». A word with its
+ *  tone, written as a child of `Record` or `Record.Paper`; see `RecordRibbon`. */
+const RibbonSlot = slot("ribbon", (_props) => null);
+/** Who created the record and who changed it last, on the paper's last line. */
+const AuditSlot = slot("audit", (_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 +74,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"));
@@ -77,10 +96,43 @@ export function Record({ identity, error = null, dirty, children }) {
     /* Apiladas en un bloque: arriba dónde está, abajo qué pasó para llegar.
        Lado a lado competían por el ancho con los botones y quedaban las dos
        truncadas; una debajo de la otra, cada una tiene su línea entera. */
-    _jsxs("div", { className: "flex min-w-0 flex-col items-end gap-1.5", children: [status.stages === undefined ? null : (_jsx(StatusBar, { stages: status.stages, current: status.current ?? status.stages[0]?.id ?? "", failed: status.failed ?? false, surface: surface })), status.children] }));
+    _jsxs("div", { className: "flex min-w-0 flex-col items-end gap-1.5", children: [status.stages === undefined ? null : (_jsx(StatusBar, { stages: status.stages, current: status.current ?? status.stages[0]?.id ?? "", failed: status.failed ?? false, surface: surface, ...(status.onSelect === undefined ? {} : { onSelect: status.onSelect }) })), status.children] }));
     const paper = propsOf(paperNode);
     const inPaper = [...flatten(paper?.children), ...loose];
     const fields = propsOf(pick(inPaper, "facts"))?.fields;
+    const ribbon = propsOf(pick(inPaper, "ribbon"));
+    const audit = propsOf(pick(inPaper, "audit"));
+    /* 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 +165,49 @@ 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, ...(ribbon === undefined
+                    ? {}
+                    : {
+                        ribbon: (_jsx(RecordRibbon, { label: ribbon.label, ...(ribbon.tone === undefined ? {} : { tone: ribbon.tone }) })),
+                    }), ...(paper?.width === undefined ? {} : { width: paper.width }), ...(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: _jsxs("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] }) }), audit === undefined ? null : _jsx(RecordAudit, { ...audit })] }) }) }) }));
 }
 Record.Skeleton = RecordSkeleton;
 Record.Rail = Rail;
@@ -135,7 +217,10 @@ 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;
+Record.Ribbon = RibbonSlot;
+Record.Audit = AuditSlot;

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": "1.0.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",
@@ -53,19 +53,24 @@
     "@codemirror/lint": "^6.9.7",
     "@fontsource/ibm-plex-mono": "^5.3.0",
     "@fontsource/ibm-plex-sans": "^5.3.0",
+    "@fullcalendar/react": "7.1.3",
     "@internationalized/date": "^3.12.4",
+    "@svar-ui/react-gantt": "2.8.2",
     "@uiw/react-codemirror": "^4.25.11",
     "lucide-react": "^1.45.0",
     "react-aria": "^3.53.1",
     "react-aria-components": "^1.22.1",
     "tailwind-variants": "^4.0.0",
-    "tailwindcss-react-aria-components": "^2.2.0"
+    "tailwindcss-react-aria-components": "^2.2.0",
+    "temporal-polyfill": "^1.0.6"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@sincpro/web-composer": "^1.4.0",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",
     "@storybook/addon-mcp": "10.6.0",
+    "@storybook/addon-vitest": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/react-table": "^9.2.4",
@@ -74,12 +79,13 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "6.1.1",
+    "@vitest/browser-playwright": "5.0.5",
     "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
+    "playwright": "1.64.1",
     "prettier": "^3.9.8",
-    "puppeteer-core": "^23.11.1",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "storybook": "10.6.0",
@@ -88,7 +94,8 @@
     "tsx": "^4.23.13",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.70.0",
-    "vite": "8.3.0"
+    "vite": "8.3.0",
+    "vitest": "5.0.5"
   },
   "keywords": [
     "design-system",
@@ -99,10 +106,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;
-};