@sincpro/web-ui 0.0.0-stage → 0.2.0

package/dist/components/activity/Messages.js

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

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

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

package/dist/components/activity/Timeline.js

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

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,64 @@
+import type { ActivityEvent } from "../activity/Activity.js";
+import { type AssistOrigin, type AssistSource } from "./assist.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». */
+export declare function AssistLabel({ children, id }: {
+    children?: ReactNode;
+    id?: string;
+}): import("react").JSX.Element;
+/**
+ * Where the assistant got it: «Fuente: orden de compra PO/2026/0042».
+ *
+ * Context: a value without its source is a value nobody can check, and an unchecked value
+ * from a machine is the one people stop trusting after the first mistake. The source is a
+ * LINK to the record it was read from — with `href` a real `<a>` (middle-click, copy), with
+ * `onOpen` a link the screen answers — so checking it is one press, not a search.
+ */
+export declare function AssistSourceLink({ source }: {
+    source: AssistSource;
+}): import("react").JSX.Element;
+export type AssistMarkProps = {
+    /** When, from what, and who accepted it. Each one that is present is said in the card. */
+    origin?: AssistOrigin;
+};
+/**
+ * The small robot next to a value the assistant set — provenance, after the fact.
+ *
+ * Context: once a suggestion is accepted the value looks like any other, and a week later
+ * nobody remembers whether «30 días» was typed or proposed. The mark keeps that answer next
+ * to the value: its tooltip says «Lo completó el asistente», and pressing it opens WHO
+ * (the assistant, and the person who accepted), WHEN and FROM WHAT — with the source as a
+ * link. It is a popover and not a tooltip because the source is a link, and a tooltip can
+ * never be entered with the keyboard.
+ *
+ * Next to a field, write it in the field's `action`; next to a read value, use
+ * `AssistedValue`.
+ */
+export declare function AssistMark({ origin }: AssistMarkProps): import("react").JSX.Element;
+/** A read value with the assistant's mark after it: a `Record.Facts` value, a table cell. */
+export declare function AssistedValue({ children, origin, }: {
+    /** The value, drawn the way it would be without the mark. */
+    children: ReactNode;
+    origin?: AssistOrigin;
+}): import("react").JSX.Element;
+/**
+ * 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»
+ * while looking at it; the history answers «what has the assistant done on this record»,
+ * in the order it happened, next to what people did. Same mark in both, so the eye learns
+ * it once.
+ *
+ * Call it when the change happens (in the handler), not at module load: it reads the
+ * installed copy, like the formatters do.
+ */
+export declare function assistEvent({ id, label, at, source, acceptedBy, }: {
+    id: string;
+    /** What happened, in the past: «completó 5 líneas desde la orden de compra». */
+    label: ReactNode;
+    at: Date | string | number;
+    source?: AssistSource;
+    acceptedBy?: string;
+}): ActivityEvent;

package/dist/components/assist/AssistMark.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ASSIST_ICON, } from "./assist.js";
+import { currentCopy, fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { cn, focusRing } from "../../foundations/variants.js";
+import { PopoverTrigger } from "../../primitives/overlay/PopoverTrigger.js";
+import { Tooltip, TooltipTrigger } from "../../primitives/overlay/Tooltip.js";
+import { DateValue } from "../../primitives/value/Fecha.js";
+import { Link } from "react-aria-components";
+/* ==================================================================== *
+ *  THE ASSISTANT'S MARK — how a screen says «this came from the assistant».
+ *
+ *  Three pieces, one look:
+ *
+ *      AssistLabel       the robot and the word «Asistente», in the info tone:
+ *                        the header of anything the assistant proposes
+ *      AssistSourceLink  «Fuente: orden de compra PO/2026/0042», a real link
+ *      AssistMark        the small robot next to a value it SET, which opens
+ *                        who, when and from what
+ *
+ *  ── Why the info tone, and never the gold ───────────────────────────
+ *
+ *  The gold is the ONE main action of a screen (PRINCIPLES §2–3). The assistant
+ *  is not an action, it is a source of information — and `info` already means
+ *  «a fact that changes how you read what is below». It is also never the color
+ *  alone: the robot and the word are always there, so a person who does not tell
+ *  teal from navy still reads «Asistente».
+ *
+ *  ── Why a robot and not sparkles ────────────────────────────────────
+ *
+ *  Sparkles celebrate; a business screen states. «An automated assistant did
+ *  this» is the fact a person needs to weigh a value, and the robot says exactly
+ *  that. The icon lives in `ASSIST_ICON`, so changing it is one line.
+ * ==================================================================== */
+/** The robot and the assistant's name: the header of a suggestion, a review, a pending
+ *  state. `children` replaces the name — «Asistente sugiere». */
+export function AssistLabel({ children, id }) {
+    const copy = useUiCopy();
+    const Icon = ASSIST_ICON;
+    return (_jsxs("span", { id: id, "data-assist": "label", className: "inline-flex shrink-0 items-center gap-1 text-micro font-medium text-info", children: [_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0", strokeWidth: 2, "aria-hidden": true }), children ?? copy.assist.assistant] }));
+}
+/**
+ * Where the assistant got it: «Fuente: orden de compra PO/2026/0042».
+ *
+ * Context: a value without its source is a value nobody can check, and an unchecked value
+ * from a machine is the one people stop trusting after the first mistake. The source is a
+ * LINK to the record it was read from — with `href` a real `<a>` (middle-click, copy), with
+ * `onOpen` a link the screen answers — so checking it is one press, not a search.
+ */
+export function AssistSourceLink({ source }) {
+    const copy = useUiCopy();
+    const goes = source.href !== undefined || source.onOpen !== undefined;
+    return (_jsxs("span", { className: "inline-flex max-w-full min-w-0 items-baseline gap-1 text-micro text-muted", children: [_jsxs("span", { className: "shrink-0", children: [copy.assist.source, ":"] }), goes ? (_jsx(Link, { ...(source.href === undefined ? {} : { href: source.href }), ...(source.onOpen === undefined ? {} : { onPress: source.onOpen }), className: ({ isFocusVisible }) => cn("min-w-0 cursor-pointer truncate rounded-mark text-primary underline-offset-2 hover:underline", focusRing({ isFocusVisible })), children: source.label })) : (_jsx("span", { className: "min-w-0 truncate text-ink", children: source.label }))] }));
+}
+/** The mark's own button. It forwards `ref` and spreads native props, so `PopoverTrigger`
+ *  anchors to it and `TooltipTrigger` names it — the same contract as `IconButton`, in the
+ *  assistant's tone instead of the three an icon button has. */
+function MarkButton({ label, expanded, haspopup, ref, ...native }) {
+    const Icon = ASSIST_ICON;
+    return (_jsxs(TooltipTrigger, { children: [_jsx("button", { ...native, ref: ref, type: "button", "aria-label": label, ...(haspopup === undefined ? {} : { "aria-haspopup": haspopup }), ...(expanded === undefined ? {} : { "aria-expanded": expanded }), "data-assist": "mark", className: "inline-flex size-(--size-control-sm) shrink-0 items-center justify-center rounded-pill text-info transition-colors duration-(--duration-instant) hover:bg-info/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", children: _jsx(Icon, { className: "size-(--size-icon-sm)", strokeWidth: 2, "aria-hidden": true }) }), _jsx(Tooltip, { children: label })] }));
+}
+/**
+ * The small robot next to a value the assistant set — provenance, after the fact.
+ *
+ * Context: once a suggestion is accepted the value looks like any other, and a week later
+ * nobody remembers whether «30 días» was typed or proposed. The mark keeps that answer next
+ * to the value: its tooltip says «Lo completó el asistente», and pressing it opens WHO
+ * (the assistant, and the person who accepted), WHEN and FROM WHAT — with the source as a
+ * link. It is a popover and not a tooltip because the source is a link, and a tooltip can
+ * never be entered with the keyboard.
+ *
+ * Next to a field, write it in the field's `action`; next to a read value, use
+ * `AssistedValue`.
+ */
+export function AssistMark({ origin = {} }) {
+    const copy = useUiCopy();
+    return (_jsx(PopoverTrigger, { title: copy.assist.madeBy, placement: "bottom end", trigger: _jsx(MarkButton, { label: copy.assist.madeBy }), children: _jsxs("div", { className: "flex max-w-72 min-w-0 flex-col gap-1.5 text-micro text-muted", children: [origin.source === undefined ? null : _jsx(AssistSourceLink, { source: origin.source }), origin.at === undefined ? null : _jsx(DateValue, { when: origin.at, format: "exact" }), origin.acceptedBy === undefined ? null : (_jsx("span", { children: fillCopy(copy.assist.acceptedBy, { name: origin.acceptedBy }) }))] }) }));
+}
+/** A read value with the assistant's mark after it: a `Record.Facts` value, a table cell. */
+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 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»
+ * while looking at it; the history answers «what has the assistant done on this record»,
+ * in the order it happened, next to what people did. Same mark in both, so the eye learns
+ * it once.
+ *
+ * Call it when the change happens (in the handler), not at module load: it reads the
+ * installed copy, like the formatters do.
+ */
+export function assistEvent({ id, label, at, source, acceptedBy, }) {
+    const copy = currentCopy();
+    const by = acceptedBy === undefined
+        ? copy.assist.assistant
+        : `${copy.assist.assistant} · ${fillCopy(copy.assist.acceptedBy, { name: acceptedBy })}`;
+    return {
+        id,
+        label,
+        at,
+        by,
+        icon: ASSIST_ICON,
+        ...(source === undefined ? {} : { detail: _jsx(AssistSourceLink, { source: source }) }),
+    };
+}

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

@@ -0,0 +1,24 @@
+export type AssistPendingProps = {
+    /** What the assistant is doing, in the screen's words: «Leyendo la orden de compra
+     *  PO/2026/0042…». The copy's «El asistente está trabajando…» when absent. */
+    label?: string;
+    /** Stops it. Present = a «Cancelar» next to the sentence. */
+    onCancel?: () => void;
+    /** Skeleton bars under the sentence, standing in for the proposal that is coming —
+     *  `0` (the default) is the one-line form, for under a field. */
+    rows?: number;
+};
+/**
+ * The assistant is working on a suggestion, and the screen goes on.
+ *
+ * Context: the assistant is slower than a form, and a screen that locks while it thinks
+ * teaches people to wait for it — or to close it. So this BLOCKS NOTHING: it is a line in
+ * the place where the suggestion will appear (under a field, above the lines), the fields
+ * stay editable, and «Cancelar» stops it. What the person types in the meantime wins; the
+ * screen decides whether a suggestion that arrives late still makes sense.
+ *
+ * The sentence is a polite live region (`role="status"`), so a screen reader hears that
+ * the assistant started without being interrupted; the bars are silent. The spinner and
+ * the bars' pulse stop under reduced motion, by the global rule in `tokens.css`.
+ */
+export declare function AssistPending({ label, onCancel, rows }: AssistPendingProps): import("react").JSX.Element;

package/dist/components/assist/AssistPending.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AssistLabel } from "./AssistMark.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Button } from "../../primitives/button/Button.js";
+import { LoaderCircle } from "lucide-react";
+/** The widths of the skeleton's bars: uneven, so it reads as lines of content and not as
+ *  a striped box. */
+const BAR = ["w-2/3", "w-1/2", "w-3/4", "w-2/5"];
+/**
+ * The assistant is working on a suggestion, and the screen goes on.
+ *
+ * Context: the assistant is slower than a form, and a screen that locks while it thinks
+ * teaches people to wait for it — or to close it. So this BLOCKS NOTHING: it is a line in
+ * the place where the suggestion will appear (under a field, above the lines), the fields
+ * stay editable, and «Cancelar» stops it. What the person types in the meantime wins; the
+ * screen decides whether a suggestion that arrives late still makes sense.
+ *
+ * The sentence is a polite live region (`role="status"`), so a screen reader hears that
+ * the assistant started without being interrupted; the bars are silent. The spinner and
+ * the bars' pulse stop under reduced motion, by the global rule in `tokens.css`.
+ */
+export function AssistPending({ label, onCancel, rows = 0 }) {
+    const copy = useUiCopy();
+    return (_jsxs("div", { "data-assist": "pending", "aria-busy": "true", className: "flex min-w-0 flex-col gap-2", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [_jsx(LoaderCircle, { className: "size-(--size-icon-sm) shrink-0 animate-spin text-info", strokeWidth: 2, "aria-hidden": true }), _jsx(AssistLabel, {}), _jsx("span", { role: "status", className: "min-w-0 text-micro text-muted", children: label ?? copy.assist.working }), onCancel === undefined ? null : (_jsx(Button, { role: "ghost", size: "sm", onClick: onCancel, children: copy.assist.cancel }))] }), rows <= 0 ? null : (_jsx("span", { "aria-hidden": true, className: "flex flex-col gap-2 pl-5", children: Array.from({ length: rows }, (_, i) => (_jsx("span", { className: `h-3 rounded-control bg-ink/8 motion-safe:animate-pulse ${BAR[i % BAR.length]}` }, i))) }))] }));
+}

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

@@ -0,0 +1,42 @@
+import { type AssistApply, type AssistSource } from "./assist.js";
+import { type ReactNode } from "react";
+export type AssistSuggestionProps = {
+    /** The proposed value, drawn as it will read once applied: «30 días», «15/11/2026», a
+     *  product with its code. */
+    value: ReactNode;
+    /** Where the assistant got it — a link to the record it read. */
+    source?: AssistSource;
+    /** Applies the value. Return the function that reverts it and the screen gets a
+     *  «Deshacer» notice; the suggestion itself is the screen's to remove. */
+    onAccept: AssistApply;
+    /** «No, gracias»: the screen forgets the suggestion. */
+    onDismiss: () => void;
+    /** The field's name, for the notice after accepting. Inside a `Field` the accessible
+     *  name already takes the field's label; the notice is read elsewhere, so it needs it. */
+    field?: string;
+};
+/**
+ * The assistant proposes a value for ONE field: the customer's payment term, the product of
+ * a scanned line, the due date. It goes right under the control it would change.
+ *
+ * Context: a suggestion has to be noticed and must not be mistaken for the value. So it is
+ * NOT written into the control — a pre-filled field reads as «someone already decided» and
+ * gets saved without a look. It sits under the control, in a dashed box (dashed: proposed,
+ * not yet real), with the robot and «Asistente sugiere», the value, and its source as a
+ * link. «Aceptar» applies it at once, and the notice carries «Deshacer» — undo over
+ * confirm, the system's rule. The × forgets it.
+ *
+ * Written inside a `Field`, after the control:
+ *
+ *     <Field label="Plazo de pago">
+ *       <NumberInput … />
+ *       <AssistSuggestion value="30 días" source={…} onAccept={…} onDismiss={…} />
+ *     </Field>
+ *
+ * It is a group named «Sugerencia del asistente» + the field's label, so a screen reader
+ * hears which field it is about before the value. Both buttons are plain buttons: Tab
+ * reaches them, Enter and Space press them. After pressing either, the focus goes back to
+ * the field's control — the suggestion that held it is gone, and the control is what the
+ * person was working on.
+ */
+export declare function AssistSuggestion({ value, source, onAccept, onDismiss, field, }: AssistSuggestionProps): import("react").JSX.Element;

package/dist/components/assist/AssistSuggestion.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { acceptedMessage, applyWithUndo, } from "./assist.js";
+import { AssistLabel, AssistSourceLink } from "./AssistMark.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Button, IconButton } from "../../primitives/button/Button.js";
+import { FieldIdsContext } from "../../primitives/field/context.js";
+import { useToastIfAny } from "../../primitives/notice/Toast.js";
+import { Check, X } from "lucide-react";
+import { useContext, useId } from "react";
+/**
+ * The assistant proposes a value for ONE field: the customer's payment term, the product of
+ * a scanned line, the due date. It goes right under the control it would change.
+ *
+ * Context: a suggestion has to be noticed and must not be mistaken for the value. So it is
+ * NOT written into the control — a pre-filled field reads as «someone already decided» and
+ * gets saved without a look. It sits under the control, in a dashed box (dashed: proposed,
+ * not yet real), with the robot and «Asistente sugiere», the value, and its source as a
+ * link. «Aceptar» applies it at once, and the notice carries «Deshacer» — undo over
+ * confirm, the system's rule. The × forgets it.
+ *
+ * Written inside a `Field`, after the control:
+ *
+ *     <Field label="Plazo de pago">
+ *       <NumberInput … />
+ *       <AssistSuggestion value="30 días" source={…} onAccept={…} onDismiss={…} />
+ *     </Field>
+ *
+ * It is a group named «Sugerencia del asistente» + the field's label, so a screen reader
+ * hears which field it is about before the value. Both buttons are plain buttons: Tab
+ * reaches them, Enter and Space press them. After pressing either, the focus goes back to
+ * the field's control — the suggestion that held it is gone, and the control is what the
+ * person was working on.
+ */
+export function AssistSuggestion({ value, source, onAccept, onDismiss, field, }) {
+    const copy = useUiCopy();
+    const toasts = useToastIfAny();
+    const ids = useContext(FieldIdsContext);
+    const nameId = useId();
+    /* Back to the control once this box is gone. A frame later: the screen removes the
+       suggestion in the same update, and the control is only focusable after it. */
+    const refocus = () => {
+        const target = ids?.id;
+        if (target === undefined || typeof document === "undefined")
+            return;
+        requestAnimationFrame(() => document.getElementById(target)?.focus());
+    };
+    return (_jsxs("div", { role: "group", "aria-labelledby": ids === null ? nameId : `${nameId} ${ids.labelId}`, "data-assist": "suggestion", className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5 rounded-control border border-dashed border-info/40 bg-info/5 py-1 pr-1 pl-2.5", children: [_jsx("span", { id: nameId, hidden: true, children: copy.assist.suggestion }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5 py-0.5", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5", children: [_jsxs(AssistLabel, { children: [copy.assist.assistant, " ", copy.assist.suggests] }), _jsx("span", { className: "min-w-0 text-meta font-semibold text-ink tabular-nums", children: value })] }), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsxs("span", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx(Button, { role: "secondary", size: "sm", icon: Check, onClick: () => {
+                            applyWithUndo(onAccept, toasts, acceptedMessage(copy, field), copy.assist.undo);
+                            refocus();
+                        }, children: copy.assist.accept }), _jsx(IconButton, { icon: X, label: copy.assist.dismiss, onClick: () => {
+                            onDismiss();
+                            refocus();
+                        } })] })] }));
+}

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

@@ -0,0 +1,56 @@
+import { type AssistApply, type AssistSource, type ProposedChange } from "./assist.js";
+import { type DialogContext } from "../../primitives/dialog/Dialog.js";
+import { type ReactNode } from "react";
+type GroupProps = {
+    /** «Campos», «Líneas». Without it the changes are listed without a heading. */
+    title?: string;
+    children?: ReactNode;
+};
+type ReviewProps = {
+    /** What the proposal is, as a heading. The copy's «Cambios propuestos» when absent. */
+    title?: string;
+    /** One sentence under the title: what the assistant read and what it would do. */
+    summary?: string;
+    /** Where the whole proposal comes from. A change may carry its own. */
+    source?: AssistSource;
+    /** Applies the chosen changes — their ids, in the listed order. Return the function that
+     *  reverts them, and the screen gets «Deshacer». */
+    onApply: AssistApply<[ids: string[]]>;
+    /** Rejects the proposal. */
+    onDiscard: () => void;
+    /** The chosen ids, controlled. Uncontrolled from «all but the `unchosen` ones». */
+    chosen?: readonly string[];
+    onChosenChange?: (ids: string[]) => void;
+    /** `ChangeReview.Group` and `ChangeReview.Change`. */
+    children?: ReactNode;
+};
+export type ChangeReviewProps = ReviewProps & {
+    /** The role of «Aplicar». `primary` by default; `secondary` inside a record whose rail
+     *  already shows the screen's one primary. */
+    emphasis?: "primary" | "secondary";
+};
+/** The review inside the page: a dashed card in the record it would change. */
+export declare function ChangeReview(props: ChangeReviewProps): import("react").JSX.Element;
+export declare namespace ChangeReview {
+    var Group: ((props: GroupProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"group">;
+    var Change: ((props: ProposedChange) => ReactNode) & import("../../foundations/slots.js").Slotted<"change">;
+}
+export type ChangeReviewDialogProps = ReviewProps & {
+    open: boolean;
+    /** Every way out ends here: ×, Escape, the scrim — «later», the proposal stays — and
+     *  also after «Aplicar» and «Descartar». */
+    onClose: () => void;
+    /** What the dialog is about, in its header: «factura · FAC/2026/0120». */
+    context?: DialogContext;
+};
+/**
+ * The same review, in a `Dialog`: opened on demand — from a notice that says «el asistente
+ * encontró la orden de compra» — and a bottom sheet on a phone. «Aplicar» is the dialog's
+ * primary; closing without choosing keeps the proposal for later.
+ */
+export declare function ChangeReviewDialog(props: ChangeReviewDialogProps): import("react").JSX.Element;
+export declare namespace ChangeReviewDialog {
+    var Group: ((props: GroupProps) => ReactNode) & import("../../foundations/slots.js").Slotted<"group">;
+    var Change: ((props: ProposedChange) => ReactNode) & import("../../foundations/slots.js").Slotted<"change">;
+}
+export {};

package/dist/components/assist/ChangeReview.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { appliedMessage, applyLabel, applyWithUndo, changeKind, chosenState, initiallyChosen, toggleChosen, } from "./assist.js";
+import { AssistLabel, AssistSourceLink } from "./AssistMark.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { flatten, propsOf, slot, slotOf } from "../../foundations/slots.js";
+import { Button } from "../../primitives/button/Button.js";
+import { Dialog } from "../../primitives/dialog/Dialog.js";
+import { Checkbox } from "../../primitives/field/Checks.js";
+import { useToastIfAny } from "../../primitives/notice/Toast.js";
+import { Tag } from "../../primitives/tag/Tag.js";
+import { ArrowRight } from "lucide-react";
+import { useId, useState } from "react";
+const Group = slot("group", (_props) => null);
+const Change = slot("change", (_props) => null);
+/** The groups as written. Changes written outside a group form an untitled one in their
+ *  place, so a short review is just its changes. */
+function readTree(children) {
+    const out = [];
+    let loose = null;
+    for (const node of flatten(children)) {
+        const name = slotOf(node);
+        if (name === "group") {
+            loose = null;
+            const props = propsOf(node);
+            out.push({
+                ...(props.title === undefined ? {} : { title: props.title }),
+                changes: flatten(props.children)
+                    .filter((one) => slotOf(one) === "change")
+                    .map((one) => propsOf(one)),
+            });
+        }
+        else if (name === "change") {
+            if (loose === null) {
+                loose = { changes: [] };
+                out.push(loose);
+            }
+            loose.changes.push(propsOf(node));
+        }
+    }
+    return out;
+}
+/** What both faces share: the tree read once, the chosen ids, and «apply». */
+function useReview({ children, chosen, onChosenChange, onApply }) {
+    const copy = useUiCopy();
+    const toasts = useToastIfAny();
+    const groups = readTree(children);
+    const all = groups.flatMap((g) => g.changes);
+    const order = all.map((c) => c.id);
+    const [own, setOwn] = useState(() => initiallyChosen(all));
+    const current = chosen === undefined ? own : order.filter((id) => chosen.includes(id));
+    const choose = (next) => {
+        if (chosen === undefined)
+            setOwn(next);
+        onChosenChange?.(next);
+    };
+    const apply = () => {
+        const ids = current;
+        applyWithUndo(() => onApply(ids), toasts, appliedMessage(copy, ids.length), copy.assist.undo);
+    };
+    return { groups, order, current, choose, apply };
+}
+/** One change: its check (named by its label), the kind in words, and before → after. */
+function ChangeRow({ change, on, onToggle, }) {
+    const copy = useUiCopy();
+    const valuesId = useId();
+    const kind = changeKind(change);
+    const word = {
+        add: copy.assist.added,
+        remove: copy.assist.removed,
+        change: copy.assist.changed,
+    }[kind];
+    const empty = _jsx("span", { className: "text-muted italic", children: copy.assist.empty });
+    const before = change.before === null ? empty : change.before;
+    return (_jsxs("li", { "data-change": kind, className: "flex min-w-0 flex-col gap-1 border-b border-line px-4 py-2.5 last:border-b-0 @lg:flex-row @lg:items-start @lg:gap-4", children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx(Checkbox, { checked: on, onChange: onToggle, label: change.label, describedBy: valuesId }), _jsx(Tag, { children: word })] }), change.detail === undefined ? null : (_jsx("span", { className: "pl-6.5 text-micro text-muted", children: change.detail })), change.source === undefined ? null : (_jsx("span", { className: "pl-6.5", children: _jsx(AssistSourceLink, { source: change.source }) }))] }), _jsxs("span", { id: valuesId, className: "flex min-w-0 flex-wrap items-baseline gap-x-1.5 pl-6.5 text-meta tabular-nums @lg:w-2/5 @lg:shrink-0 @lg:justify-end @lg:pl-0 @lg:text-right", children: [kind === "add" ? null : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "sr-only", children: [copy.assist.from, " "] }), _jsx("span", { className: `text-muted ${kind === "remove" ? "line-through" : ""}`, children: before })] })), kind === "remove" ? null : (_jsxs(_Fragment, { children: [kind === "add" ? null : (_jsx(ArrowRight, { className: "size-(--size-icon-sm) shrink-0 self-center text-muted", strokeWidth: 2, "aria-hidden": true })), _jsxs("span", { className: "sr-only", children: [copy.assist.to, " "] }), _jsx("span", { className: "font-medium text-ink", children: change.after })] }))] })] }));
+}
+/** «Todos los cambios», the count, and the groups. */
+function ReviewBody({ review }) {
+    const copy = useUiCopy();
+    const { groups, order, current, choose } = review;
+    const state = chosenState(order, current);
+    return (_jsxs("div", { className: "@container flex min-w-0 flex-col", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-line px-4 py-2", children: [_jsx(Checkbox, { checked: state === "all", mixed: state === "some", label: copy.assist.all, onChange: (on) => choose(on ? [...order] : []) }), _jsx("span", { className: "text-micro text-muted tabular-nums", children: fillCopy(copy.assist.chosen, { count: current.length, total: order.length }) })] }), groups.map((group, i) => (_jsxs("section", { className: "flex min-w-0 flex-col", children: [group.title === undefined ? null : (_jsx("h4", { className: "px-4 pt-3 pb-1 text-micro font-medium text-muted", children: group.title })), _jsx("ul", { className: "flex min-w-0 flex-col", children: group.changes.map((change) => (_jsx(ChangeRow, { change: change, on: current.includes(change.id), onToggle: (on) => choose(toggleChosen(order, current, change.id, on)) }, change.id))) })] }, group.title ?? i)))] }));
+}
+/** «Elegí al menos un cambio.», «Descartar» and «Aplicar N cambios». */
+function ReviewActions({ review, emphasis, onDiscard, after, }) {
+    const copy = useUiCopy();
+    const count = review.current.length;
+    return (_jsxs(_Fragment, { children: [count > 0 ? null : (
+            /* The reason next to the disabled button: a grey «Aplicar» with no explanation is a
+               dead end (the same rule as the wizard's «siguiente»). */
+            _jsx("span", { className: "mr-auto min-w-0 text-micro text-warn", children: copy.assist.noneChosen })), _jsx(Button, { role: "ghost", size: "sm", onClick: () => {
+                    onDiscard();
+                    after?.();
+                }, children: copy.assist.discard }), _jsx(Button, { role: emphasis, size: "sm", disabled: count === 0, onClick: () => {
+                    review.apply();
+                    after?.();
+                }, children: applyLabel(copy, count) })] }));
+}
+/** The review inside the page: a dashed card in the record it would change. */
+export function ChangeReview(props) {
+    const { title, summary, source, onDiscard, emphasis = "primary" } = props;
+    const copy = useUiCopy();
+    const review = useReview(props);
+    const titleId = useId();
+    return (_jsxs("section", { "aria-labelledby": titleId, "data-assist": "review", className: "flex min-w-0 flex-col overflow-clip rounded-box border border-dashed border-info/40 bg-surface", children: [_jsxs("header", { className: "flex min-w-0 flex-col gap-1 border-b border-line px-4 py-3", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1", children: [_jsx(AssistLabel, {}), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsx("h3", { id: titleId, className: "text-lead font-semibold text-ink", children: title ?? copy.assist.review }), summary === undefined ? null : (_jsx("p", { className: "max-w-prose text-meta text-muted", children: summary }))] }), _jsx(ReviewBody, { review: review }), _jsx("footer", { className: "flex min-w-0 flex-wrap items-center justify-end gap-2 border-t border-line bg-ground px-4 py-2.5", children: _jsx(ReviewActions, { review: review, emphasis: emphasis, onDiscard: onDiscard }) })] }));
+}
+ChangeReview.Group = Group;
+ChangeReview.Change = Change;
+/**
+ * The same review, in a `Dialog`: opened on demand — from a notice that says «el asistente
+ * encontró la orden de compra» — and a bottom sheet on a phone. «Aplicar» is the dialog's
+ * primary; closing without choosing keeps the proposal for later.
+ */
+export function ChangeReviewDialog(props) {
+    const { open, onClose, context, title, summary, source, onDiscard } = props;
+    const copy = useUiCopy();
+    const review = useReview(props);
+    return (_jsx(Dialog, { open: open, onClose: onClose, title: title ?? copy.assist.review, ...(summary === undefined ? {} : { subtitle: summary }), ...(context === undefined ? {} : { context }), footer: _jsx(ReviewActions, { review: review, emphasis: "primary", onDiscard: onDiscard, after: onClose }), children: _jsxs("div", { className: "-mx-4 -my-4 flex min-w-0 flex-col", children: [_jsxs("span", { className: "flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1 border-b border-line px-4 py-2.5", children: [_jsx(AssistLabel, {}), source === undefined ? null : _jsx(AssistSourceLink, { source: source })] }), _jsx(ReviewBody, { review: review })] }) }));
+}
+ChangeReviewDialog.Group = Group;
+ChangeReviewDialog.Change = Change;