@candor-ui/react 1.8.0 → 1.9.1

package/dist/blocks/copy-field.d.ts

@@ -7,7 +7,8 @@ export declare const copyFieldStrings: {
 /**
  * A value a person copies somewhere else (a callback URL, a scope list). The
  * whole field is the copy target; it says "Copied" only once the clipboard
- * took the value.
+ * took the value, and its tick (or the cross of a refused write) appears then,
+ * never while the write is still pending.
  */
 declare function CopyField({ label, value, className, }: {
     /** What the value is, shown above it. */

package/dist/blocks/copy-field.js

@@ -13,11 +13,12 @@ export const copyFieldStrings = {
 /**
  * A value a person copies somewhere else (a callback URL, a scope list). The
  * whole field is the copy target; it says "Copied" only once the clipboard
- * took the value.
+ * took the value, and its tick (or the cross of a refused write) appears then,
+ * never while the write is still pending.
  */
 function CopyField({ label, value, className, }) {
     const { state, copy } = useCopy();
     const t = useStrings("copyField", copyFieldStrings);
-    return (_jsxs("div", { "data-slot": "copy-field", className: cn("flex flex-col gap-1", className), children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsxs("button", { type: "button", onClick: () => copy(value), className: "group/copy flex w-full items-center gap-2 rounded-lg border bg-sunken px-3 py-2 text-start outline-none transition-colors duration-150 hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/80", children: [_jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: value }), _jsx("span", { "aria-live": "polite", className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground group-hover/copy:text-foreground", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " ", t("failed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] })] }));
+    return (_jsxs("div", { "data-slot": "copy-field", className: cn("flex flex-col gap-1", className), children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsxs("button", { type: "button", onClick: () => copy(value), className: "group/copy flex w-full items-center gap-2 rounded-lg border bg-sunken px-3 py-2 text-start outline-none transition-colors duration-150 hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/80", children: [_jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-xs", children: value }), _jsx("span", { "aria-live": "polite", "data-copy": state, className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground group-hover/copy:text-foreground", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text animate-pop-in" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text animate-pop-in" }), " ", t("failed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] })] }));
 }
 export { CopyField };

package/dist/blocks/locked.d.ts

@@ -13,7 +13,10 @@ type Lockable = React.ReactElement<{
  * marked `aria-disabled`, its activation is blocked (click, Enter, Space), and
  * it is described by the reason — so keyboard and screen-reader users reach
  * the explanation on the control itself. The reason shows as a tooltip, or
- * printed under the control with `inline`.
+ * printed under the control with `inline`. Pressing the control reveals the
+ * reason (the tooltip is held open, the printed reason is emphasised) and,
+ * under data-motion="expressive" only, shakes it briefly; with reduced motion
+ * or the default subtle preset, only the reason is shown.
  */
 declare function Locked({ reason, inline, children, className, }: {
     /** Why the control can't be used. Without one, the control renders as normal. */

package/dist/blocks/locked.js

@@ -11,15 +11,37 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
  * marked `aria-disabled`, its activation is blocked (click, Enter, Space), and
  * it is described by the reason — so keyboard and screen-reader users reach
  * the explanation on the control itself. The reason shows as a tooltip, or
- * printed under the control with `inline`.
+ * printed under the control with `inline`. Pressing the control reveals the
+ * reason (the tooltip is held open, the printed reason is emphasised) and,
+ * under data-motion="expressive" only, shakes it briefly; with reduced motion
+ * or the default subtle preset, only the reason is shown.
  */
 function Locked({ reason, inline = false, children, className, }) {
     const id = React.useId();
+    // The tooltip as hover and focus drive it, and a press, which holds the reason open and shakes (when expressive).
+    // `press` counts presses so a second one restarts both timers.
+    const [shown, setShown] = React.useState(false);
+    const [press, setPress] = React.useState(0);
+    const [shaking, setShaking] = React.useState(false);
+    const [held, setHeld] = React.useState(false);
+    React.useEffect(() => {
+        if (press === 0)
+            return;
+        const shake = window.setTimeout(() => setShaking(false), 400);
+        const hold = window.setTimeout(() => setHeld(false), 1800);
+        return () => {
+            window.clearTimeout(shake);
+            window.clearTimeout(hold);
+        };
+    }, [press]);
     if (!reason)
         return children;
     const block = (e) => {
         e.preventDefault();
         e.stopPropagation();
+        setPress((n) => n + 1);
+        setShaking(true);
+        setHeld(true);
     };
     const control = React.cloneElement(children, {
         "aria-disabled": true,
@@ -31,6 +53,6 @@ function Locked({ reason, inline = false, children, className, }) {
                 block(e);
         },
     });
-    return (_jsxs("span", { "data-slot": "locked", className: cn("relative inline-flex flex-col items-start gap-1.5", className), children: [inline ? (control) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: control }), _jsx(TooltipContent, { children: reason })] })), _jsxs("span", { id: id, className: cn("items-center gap-1 text-xs text-muted-foreground", inline ? "inline-flex" : "sr-only"), children: [_jsx(LockKeyhole, { "aria-hidden": true, className: "size-3" }), reason] })] }));
+    return (_jsxs("span", { "data-slot": "locked", "data-pressed": held ? "" : undefined, className: cn("relative inline-flex flex-col items-start gap-1.5", shaking && "animate-shake", className), children: [inline ? (control) : (_jsxs(Tooltip, { open: shown || held, onOpenChange: setShown, children: [_jsx(TooltipTrigger, { asChild: true, children: control }), _jsx(TooltipContent, { children: reason })] })), _jsxs("span", { id: id, "data-slot": "locked-reason", className: cn("items-center gap-1 text-xs text-muted-foreground transition-colors duration-(--cd-dur-base)", inline ? "inline-flex" : "sr-only", held && "text-foreground"), children: [_jsx(LockKeyhole, { "aria-hidden": true, className: "size-3" }), reason] })] }));
 }
 export { Locked };

package/dist/blocks/status-dot.d.ts

@@ -1,7 +1,10 @@
+import * as React from "react";
 import { type RunStatus } from "../lib/status.js";
 /**
  * A small status mark. Running and waiting pulse, since they are the two
- * states a person may need to watch or act on. The label is always available
+ * states a person may need to watch or act on. When one of them reaches done
+ * or failed while on screen, the new dot pops into place (too small for a drawn
+ * mark); a dot that mounts finished is still. The label is always available
  * to assistive tech; pass `showLabel` to print it too.
  */
 declare function StatusDot({ status, showLabel, label, className, }: {
@@ -12,5 +15,5 @@ declare function StatusDot({ status, showLabel, label, className, }: {
     /** Words to use instead of the status name. */
     label?: string | undefined;
     className?: string | undefined;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 export { StatusDot };

package/dist/blocks/status-dot.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { useStatusLabel } from "../lib/status.js";
 const dotColor = {
@@ -13,15 +14,35 @@ const dotColor = {
     cancelled: "bg-faint-foreground/60",
     skipped: "bg-faint-foreground/40",
 };
+const finished = (status) => status === "succeeded" || status === "failed";
+const over = (status) => finished(status) || status === "cancelled" || status === "skipped";
+/**
+ * How many times the status reached done or failed from an unfinished one while the dot was on screen; zero when it
+ * mounted finished, so nothing moves for a change the reader never saw.
+ */
+function useSettled(status) {
+    const [settled, setSettled] = React.useState(0);
+    const previous = React.useRef(status);
+    React.useLayoutEffect(() => {
+        const was = previous.current;
+        previous.current = status;
+        if (was !== status && !over(was) && finished(status))
+            setSettled((n) => n + 1);
+    }, [status]);
+    return settled;
+}
 /**
  * A small status mark. Running and waiting pulse, since they are the two
- * states a person may need to watch or act on. The label is always available
+ * states a person may need to watch or act on. When one of them reaches done
+ * or failed while on screen, the new dot pops into place (too small for a drawn
+ * mark); a dot that mounts finished is still. The label is always available
  * to assistive tech; pass `showLabel` to print it too.
  */
 function StatusDot({ status, showLabel = false, label, className, }) {
     const statusLabel = useStatusLabel();
     const text = label ?? statusLabel(status);
     const live = status === "running" || status === "waiting";
-    return (_jsxs("span", { "data-slot": "status-dot", "data-status": status, className: cn("inline-flex items-center gap-1.5 text-xs text-muted-foreground", className), children: [_jsx("span", { "aria-hidden": true, className: cn("size-2 shrink-0 rounded-full", dotColor[status], live && "animate-pulse-dot") }), showLabel ? _jsx("span", { children: text }) : _jsx("span", { className: "sr-only", children: text })] }));
+    const settled = useSettled(status);
+    return (_jsxs("span", { "data-slot": "status-dot", "data-status": status, "data-settled": settled > 0 ? "" : undefined, className: cn("inline-flex items-center gap-1.5 text-xs text-muted-foreground", className), children: [_jsx("span", { "aria-hidden": true, className: cn("size-2 shrink-0 rounded-full", dotColor[status], live && "animate-pulse-dot", settled > 0 && "animate-pop-in") }, settled), showLabel ? _jsx("span", { children: text }) : _jsx("span", { className: "sr-only", children: text })] }));
 }
 export { StatusDot };

package/dist/blocks/step-list.d.ts

@@ -7,13 +7,18 @@ export type Step = {
     detail?: React.ReactNode | undefined;
     meta?: React.ReactNode | undefined;
 };
+/**
+ * A step's status as a mark. When the status reaches done or failed while the mark is on screen, the spinner
+ * becomes a tick or cross drawn along its path; a mark that mounts already finished is drawn still.
+ */
 declare function StepMark({ status, }: {
     /** The step's status, which picks its mark. */
     status: RunStatus;
 }): React.JSX.Element;
 /**
  * An ordered list of steps joined by a rail: an agent's plan, its reasoning,
- * a run's stages. The rail fills as steps finish.
+ * a run's stages. The rail fills to each step as it finishes, never ahead of
+ * it, and a step that finishes while on screen draws its mark.
  */
 declare function StepList({ steps, className, }: {
     /** The steps in order, each with a status, and optional detail and meta. */

package/dist/blocks/step-list.js

@@ -1,16 +1,48 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Check, CircleSlash, Hand, LoaderCircle, X } from "lucide-react";
+import { CircleSlash, Hand, LoaderCircle } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useStatusLabel } from "../lib/status.js";
+const finished = (status) => status === "succeeded" || status === "failed";
+const over = (status) => finished(status) || status === "cancelled" || status === "skipped";
+/**
+ * How many times `status` has reached succeeded or failed from an unfinished status while this component was on
+ * screen. Zero for something that mounted already finished, so its mark is drawn still: motion reports a change
+ * that was seen, never one that happened before the reader arrived.
+ */
+function useSettled(status) {
+    const [settled, setSettled] = React.useState(0);
+    const previous = React.useRef(status);
+    React.useLayoutEffect(() => {
+        const was = previous.current;
+        previous.current = status;
+        if (was !== status && !over(was) && finished(status))
+            setSettled((n) => n + 1);
+    }, [status]);
+    return settled;
+}
+/** A tick, drawn along its path when `draw` is above zero (and again each time it changes). */
+function Tick({ draw }) {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className: "size-3", children: _jsx("path", { d: "M20 6 9 17l-5-5", pathLength: 1, className: cn(draw > 0 && "[stroke-dasharray:1] animate-tick-draw") }) }, draw));
+}
+/** A cross, its two strokes drawn one after the other when `draw` is above zero. */
+function Cross({ draw }) {
+    const drawn = draw > 0 && "[stroke-dasharray:1] animate-tick-draw";
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, className: "size-3", children: [_jsx("path", { d: "M18 6 6 18", pathLength: 1, className: cn(drawn) }), _jsx("path", { d: "m6 6 12 12", pathLength: 1, className: cn(drawn, drawn && "[animation-delay:var(--cd-dur-quick)]") })] }, draw));
+}
+/**
+ * A step's status as a mark. When the status reaches done or failed while the mark is on screen, the spinner
+ * becomes a tick or cross drawn along its path; a mark that mounts already finished is drawn still.
+ */
 function StepMark({ status, }) {
-    const base = "relative z-10 flex size-5 shrink-0 items-center justify-center rounded-full";
+    const settled = useSettled(status);
+    const base = "relative z-10 flex size-5 shrink-0 items-center justify-center rounded-full transition-colors duration-(--cd-dur-base) ease-standard";
     switch (status) {
         case "succeeded":
-            return (_jsx("span", { className: cn(base, "bg-success text-on-success"), children: _jsx(Check, { className: "size-3", strokeWidth: 3 }) }));
+            return (_jsx("span", { className: cn(base, "bg-success text-on-success"), "data-settled": settled > 0 ? "" : undefined, children: _jsx(Tick, { draw: settled }) }));
         case "failed":
-            return (_jsx("span", { className: cn(base, "bg-destructive text-on-destructive"), children: _jsx(X, { className: "size-3", strokeWidth: 3 }) }));
+            return (_jsx("span", { className: cn(base, "bg-destructive text-on-destructive"), "data-settled": settled > 0 ? "" : undefined, children: _jsx(Cross, { draw: settled }) }));
         case "running":
             return (_jsx("span", { className: cn(base, "bg-accent-weak text-accent-text"), children: _jsx(LoaderCircle, { className: "size-3.5 animate-spin", strokeWidth: 2.5 }) }));
         case "waiting":
@@ -24,16 +56,18 @@ function StepMark({ status, }) {
             return (_jsx("span", { className: cn(base, "bg-background"), children: _jsx("span", { className: "size-2 rounded-full border-[1.5px] border-faint-foreground/70" }) }));
     }
 }
+function StepRow({ step, index, last, }) {
+    const statusLabel = useStatusLabel();
+    const done = step.status === "succeeded";
+    const settled = useSettled(step.status);
+    return (_jsxs("li", { className: "relative flex gap-3 pb-4 last:pb-0 animate-rise-in", style: { animationDelay: `${index * 40}ms` }, children: [!last && (_jsx("span", { "aria-hidden": true, className: "absolute top-5 bottom-0 start-[9.5px] w-px bg-input", children: done && (_jsx("span", { "data-slot": "step-rail-fill", className: cn("absolute inset-0 origin-top bg-success/50", settled > 0 && "animate-fill [--cd-fill-from:1_0]") }, settled)) })), _jsx(StepMark, { status: step.status }), _jsxs("div", { className: "min-w-0 flex-1 pt-px", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsxs("p", { className: cn("text-sm font-medium", step.status === "idle" && "text-muted-foreground", (step.status === "skipped" || step.status === "cancelled") && "text-faint-foreground line-through"), children: [step.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(step.status)] })] }), step.meta && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: step.meta })] }), step.detail && _jsx("div", { className: "mt-1 text-[0.8125rem] text-muted-foreground", children: step.detail })] })] }));
+}
 /**
  * An ordered list of steps joined by a rail: an agent's plan, its reasoning,
- * a run's stages. The rail fills as steps finish.
+ * a run's stages. The rail fills to each step as it finishes, never ahead of
+ * it, and a step that finishes while on screen draws its mark.
  */
 function StepList({ steps, className, }) {
-    const statusLabel = useStatusLabel();
-    return (_jsx("ol", { "data-slot": "step-list", className: cn("flex flex-col", className), children: steps.map((step, i) => {
-            const last = i === steps.length - 1;
-            const done = step.status === "succeeded";
-            return (_jsxs("li", { className: "relative flex gap-3 pb-4 last:pb-0 animate-rise-in", style: { animationDelay: `${i * 40}ms` }, children: [!last && (_jsx("span", { "aria-hidden": true, className: cn("absolute top-5 bottom-0 start-[9.5px] w-px transition-colors duration-500", done ? "bg-success/50" : "bg-input") })), _jsx(StepMark, { status: step.status }), _jsxs("div", { className: "min-w-0 flex-1 pt-px", children: [_jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [_jsxs("p", { className: cn("text-sm font-medium", step.status === "idle" && "text-muted-foreground", (step.status === "skipped" || step.status === "cancelled") && "text-faint-foreground line-through"), children: [step.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(step.status)] })] }), step.meta && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: step.meta })] }), step.detail && _jsx("div", { className: "mt-1 text-[0.8125rem] text-muted-foreground", children: step.detail })] })] }, step.id));
-        }) }));
+    return (_jsx("ol", { "data-slot": "step-list", className: cn("flex flex-col", className), children: steps.map((step, i) => (_jsx(StepRow, { step: step, index: i, last: i === steps.length - 1 }, step.id))) }));
 }
 export { StepList, StepMark };

package/dist/chat/composer.d.ts

@@ -62,11 +62,11 @@ declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onS
     mentions?: MentionOption[] | undefined;
     /** What / can run, only at the start of a message. */
     commands?: SlashCommand[] | undefined;
-    /** Entities already attached, shown as chips. */
+    /** Entities already attached, shown as chips. A chip added after the composer drew pops in; a removed one pops out. */
     references?: EntityRef[] | undefined;
     /** Called when a chip is added or removed. */
     onReferencesChange?: ((references: EntityRef[]) => void) | undefined;
-    /** Files attached, with upload progress or an error. */
+    /** Files attached, with upload progress or an error, as chips that pop in when added and out when removed. */
     attachments?: Attachment[] | undefined;
     /** Shows an attach button; called with the chosen files. */
     onAttach?: ((files: File[]) => void) | undefined;

package/dist/chat/composer.js

@@ -40,6 +40,58 @@ function findTrigger(value, caret) {
 const groupOf = (item, commandsLabel = "Commands") => (item.type === "command" ? commandsLabel : item.option.group);
 /** Whether a drag carries files (not text or a link being dragged around the page). */
 const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
+const referenceKey = (r) => `${r.kind}:${r.name}`;
+const attachmentKey = (a) => a.id;
+/**
+ * Which chips were added after the composer first drew (they pop in) and which were just removed (they pop out as
+ * inert ghosts, then go). Chips present at first render are drawn still: nothing moves for a state the reader
+ * already had. The ghosts are cleared by their animation's end, or after 400ms when nothing animates.
+ */
+function useChipMotion(items, keyOf) {
+    const [entered, setEntered] = React.useState(() => new Set());
+    const [leaving, setLeaving] = React.useState([]);
+    const previous = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const before = previous.current;
+        previous.current = items;
+        if (!before)
+            return;
+        const now = new Set(items.map(keyOf));
+        const was = new Set(before.map(keyOf));
+        const added = items.filter((item) => !was.has(keyOf(item))).map(keyOf);
+        const gone = before.filter((item) => !now.has(keyOf(item)));
+        if (added.length || gone.length) {
+            setEntered((set) => {
+                const next = new Set(set);
+                for (const item of gone)
+                    next.delete(keyOf(item));
+                for (const key of added)
+                    next.add(key);
+                return next;
+            });
+        }
+        // A chip added again while its ghost is still leaving takes the ghost's place: the ghost goes at once.
+        if (gone.length || added.length) {
+            setLeaving((list) => {
+                const kept = list.filter((item) => !now.has(keyOf(item)));
+                return kept.length === list.length && gone.length === 0 ? list : [...kept, ...gone];
+            });
+        }
+    }, [items, keyOf]);
+    React.useEffect(() => {
+        if (leaving.length === 0)
+            return;
+        const timer = window.setTimeout(() => setLeaving([]), 400);
+        return () => window.clearTimeout(timer);
+    }, [leaving]);
+    const entering = (item) => entered.has(keyOf(item));
+    const left = (item) => setLeaving((list) => list.filter((x) => x !== item));
+    return { entering, leaving, left };
+}
+/** A removed chip, kept for the length of its pop-out and hidden from assistive tech. */
+function LeavingChip({ onDone, children }) {
+    return (_jsx("span", { "aria-hidden": true, "data-leaving": true, className: "pointer-events-none inline-flex max-w-full animate-pop-out", onAnimationEnd: onDone, children: children }));
+}
 /**
  * Where a person asks. Mentions (@) attach things in the user's system as chips the agent
  * receives as references, not as text it has to parse; slash commands (/) start
@@ -66,6 +118,8 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
     const fileInput = React.useRef(null);
     const [trigger, setTrigger] = React.useState(null);
     const [active, setActive] = React.useState(0);
+    const referenceMotion = useChipMotion(references, referenceKey);
+    const attachmentMotion = useChipMotion(attachments, attachmentKey);
     const held = typeof state === "object" && state.kind === "held" ? state : null;
     const locked = typeof state === "object" && state.kind !== "held" ? state : null;
     const canAttach = Boolean(onAttach) && !locked;
@@ -198,7 +252,7 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
                                     e.preventDefault();
                                     choose(item);
                                 }, onMouseMove: () => setActive(i), className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm aria-selected:bg-accent", children: item.type === "command" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-mono text-xs text-accent-text", children: ["/", item.command.name] }), item.command.args && _jsx("span", { className: "font-mono text-xs text-faint-foreground", children: item.command.args }), _jsx("span", { className: "ms-auto truncate text-xs text-muted-foreground", children: item.command.description })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx("span", { className: "text-xs", children: "@" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.option.label }), (item.option.description ?? item.option.entity?.name) !== item.option.label && (item.option.description ?? item.option.entity?.name) && (_jsx("span", { className: "block truncate font-mono text-2xs text-faint-foreground", children: item.option.description ?? item.option.entity?.name }))] })] })) })] }, item.type === "command" ? item.command.id : item.option.id));
-                }) })), _jsxs("div", { className: cn("rounded-2xl border bg-card shadow-raised transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:shadow-float", locked && "bg-muted shadow-none"), children: [(references.length > 0 || attachments.length > 0) && (_jsxs("div", { className: "flex flex-wrap gap-1.5 px-3 pt-3", children: [references.map((r) => (_jsx(EntityChip, { entity: r, onRemove: (e) => onReferencesChange?.(references.filter((x) => x !== e)) }, `${r.kind}:${r.name}`))), attachments.map((a) => (_jsx(AttachmentChip, { attachment: a, onRemove: onRemoveAttachment }, a.id)))] })), _jsx("label", { htmlFor: id, className: "sr-only", children: label }), _jsx("textarea", { ref: textarea, id: id, rows: 1, value: value, disabled: Boolean(locked), placeholder: locked ? undefined : placeholder, onChange: (e) => {
+                }) })), _jsxs("div", { className: cn("rounded-2xl border bg-card shadow-raised transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:shadow-float", locked && "bg-muted shadow-none"), children: [(references.length > 0 || attachments.length > 0 || referenceMotion.leaving.length > 0 || attachmentMotion.leaving.length > 0) && (_jsxs("div", { className: "flex flex-wrap gap-1.5 px-3 pt-3", children: [references.map((r) => (_jsx(EntityChip, { entity: r, onRemove: (e) => onReferencesChange?.(references.filter((x) => x !== e)), className: cn(referenceMotion.entering(r) && "animate-pop-in") }, referenceKey(r)))), referenceMotion.leaving.map((r) => (_jsx(LeavingChip, { onDone: () => referenceMotion.left(r), children: _jsx(EntityChip, { entity: r }) }, `leaving:${referenceKey(r)}`))), attachments.map((a) => (_jsx(AttachmentChip, { attachment: a, onRemove: onRemoveAttachment, className: cn(attachmentMotion.entering(a) && "animate-pop-in") }, a.id))), attachmentMotion.leaving.map((a) => (_jsx(LeavingChip, { onDone: () => attachmentMotion.left(a), children: _jsx(AttachmentChip, { attachment: a }) }, `leaving:${a.id}`)))] })), _jsx("label", { htmlFor: id, className: "sr-only", children: label }), _jsx("textarea", { ref: textarea, id: id, rows: 1, value: value, disabled: Boolean(locked), placeholder: locked ? undefined : placeholder, onChange: (e) => {
                             onChange(e.target.value);
                             requestAnimationFrame(syncTrigger);
                         }, onKeyDown: onKeyDown, onKeyUp: (e) => {

package/dist/chat/context-meter.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { ContextSegment } from "../lib/know.js";
 /** ContextMeter's fixed words; override them under `contextMeter` in LocaleProvider's `strings`. */
 export declare const contextMeterStrings: {
@@ -11,7 +12,9 @@ export declare const contextMeterStrings: {
 /**
  * What fills the model's context budget, as a ring in the composer that
  * opens to a breakdown: system, instructions, Know, the thread, tools, files.
- * Counts are the service's own token counts; the ring warns past 80%.
+ * Counts are the service's own token counts; the ring warns past 80%. When a
+ * new count arrives the ring sweeps to it and changes colour at the warning
+ * line; it draws its first value in place, with no sweep from zero.
  */
 declare function ContextMeter({ segments, limit, className, }: {
     /** What fills the context window, by kind, in tokens. */
@@ -19,5 +22,5 @@ declare function ContextMeter({ segments, limit, className, }: {
     /** The model's context window, in tokens. */
     limit: number;
     className?: string | undefined;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 export { ContextMeter };

package/dist/chat/context-meter.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
 import { useFormat, useStrings } from "../blocks/locale.js";
@@ -29,7 +30,9 @@ function k(n, format, thousands) {
 /**
  * What fills the model's context budget, as a ring in the composer that
  * opens to a breakdown: system, instructions, Know, the thread, tools, files.
- * Counts are the service's own token counts; the ring warns past 80%.
+ * Counts are the service's own token counts; the ring warns past 80%. When a
+ * new count arrives the ring sweeps to it and changes colour at the warning
+ * line; it draws its first value in place, with no sweep from zero.
  */
 function ContextMeter({ segments, limit, className, }) {
     const t = useStrings("contextMeter", contextMeterStrings);
@@ -40,7 +43,10 @@ function ContextMeter({ segments, limit, className, }) {
     const warn = pct > 0.8;
     const r = 7;
     const c = 2 * Math.PI * r;
-    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": t("label", { used: tokens(used), limit: tokens(limit) }), className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), fmt.number(Math.round(pct * 100) / 100, { style: "percent" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: [t("context"), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: t("usage", { used: tokens(used), limit: tokens(limit) }) })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
+    // The sweep is a transition, so it runs only for a value that changed after the first one was drawn.
+    const [drawn, setDrawn] = React.useState(false);
+    React.useEffect(() => setDrawn(true), []);
+    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": t("label", { used: tokens(used), limit: tokens(limit) }), "data-warn": warn ? "" : undefined, className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { "data-slot": "context-meter-ring", cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round", className: cn(drawn && "transition-[stroke-dasharray,stroke] duration-(--cd-dur-slow) ease-standard") })] }), fmt.number(Math.round(pct * 100) / 100, { style: "percent" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: [t("context"), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: t("usage", { used: tokens(used), limit: tokens(limit) }) })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
                             .sort((a, b) => b.tokens - a.tokens)
                             .map((s) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-xs", style: { background: kindColor[s.kind] } }), _jsx("span", { className: "flex-1", children: s.label }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: tokens(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: t("nearlyFull") })] })] }));
 }

package/dist/chat/message-actions.d.ts

@@ -11,8 +11,10 @@ export declare const messageActionsStrings: {
 export type Rating = "up" | "down" | null;
 /**
  * Copy, retry and rate under an agent's reply. Each action appears only when
- * its handler is given. Copy reports what the clipboard did. A rating is the
- * caller's state, so it shows only what the service recorded.
+ * its handler is given. Copy reports what the clipboard did: the icon stays a
+ * copy icon until the write settles, then becomes a tick (or a cross when the
+ * clipboard refused). A rating is the caller's state, so it shows only what
+ * the service recorded.
  */
 declare function MessageActions({ text, onRetry, rating, onRate, meta, className, }: {
     /** What Copy copies; without it there's no Copy. */

package/dist/chat/message-actions.js

@@ -20,12 +20,14 @@ function ActionButton({ label, onClick, pressed, children, }) {
 }
 /**
  * Copy, retry and rate under an agent's reply. Each action appears only when
- * its handler is given. Copy reports what the clipboard did. A rating is the
- * caller's state, so it shows only what the service recorded.
+ * its handler is given. Copy reports what the clipboard did: the icon stays a
+ * copy icon until the write settles, then becomes a tick (or a cross when the
+ * clipboard refused). A rating is the caller's state, so it shows only what
+ * the service recorded.
  */
 function MessageActions({ text, onRetry, rating, onRate, meta, className, }) {
     const { state, copy } = useCopy();
     const t = useStrings("messageActions", messageActionsStrings);
-    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? t("copied") : state === "failed" ? t("copyFailed") : t("copy"), onClick: () => copy(text), children: state === "copied" ? _jsx(Check, { className: "text-success-text" }) : state === "failed" ? _jsx(X, { className: "text-destructive-text" }) : _jsx(Copy, {}) })), onRetry && (_jsx(ActionButton, { label: t("retry"), onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: t("good"), pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: t("bad"), pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ms-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
+    return (_jsxs("div", { "data-slot": "message-actions", className: cn("flex items-center gap-0.5", className), children: [text !== undefined && (_jsx(ActionButton, { label: state === "copied" ? t("copied") : state === "failed" ? t("copyFailed") : t("copy"), onClick: () => copy(text), children: state === "copied" ? (_jsx(Check, { "data-copy": "copied", className: "text-success-text animate-pop-in" })) : state === "failed" ? (_jsx(X, { "data-copy": "failed", className: "text-destructive-text animate-pop-in" })) : (_jsx(Copy, { "data-copy": state })) })), onRetry && (_jsx(ActionButton, { label: t("retry"), onClick: onRetry, children: _jsx(RotateCw, {}) })), onRate && (_jsxs(_Fragment, { children: [_jsx(ActionButton, { label: t("good"), pressed: rating === "up", onClick: () => onRate(rating === "up" ? null : "up"), children: _jsx(ThumbsUp, { className: cn(rating === "up" && "fill-current") }) }), _jsx(ActionButton, { label: t("bad"), pressed: rating === "down", onClick: () => onRate(rating === "down" ? null : "down"), children: _jsx(ThumbsDown, { className: cn(rating === "down" && "fill-current") }) })] })), meta && _jsx("span", { className: "ms-1.5 truncate text-xs text-faint-foreground", children: meta })] }));
 }
 export { MessageActions };

package/dist/chat/permission-prompt.d.ts

@@ -108,6 +108,11 @@ export type PermissionAnswer = {
  * input, nothing else. "Don't ask again" rules are offered as boxes nobody has ticked, and are kept only if the
  * person ticks them. When the agent is asking questions instead, it shows them as a short form. Words from the
  * request (its title, reason, input) are shown as text, never markup.
+ *
+ * It sits in the thread, with no backdrop and nothing that dismisses it: the only ways out are Allow and Deny, and
+ * nothing else is ever counted as a denial. While the decision waits, its shield pulses slowly; a press on inert
+ * space outside it (the gesture that would dismiss a dialog) nudges it instead, so the person sees it is still
+ * waiting. Both stop once the answer is being sent.
  */
 declare function PermissionPrompt({ request, mode, suggestions, editable, onAllow, onDeny, busy, className, }: {
     /** The waiting request. */
@@ -122,7 +127,7 @@ declare function PermissionPrompt({ request, mode, suggestions, editable, onAllo
     onAllow: (answer: PermissionAnswer) => void;
     /** Called when the person denies it (or won't answer the questions). */
     onDeny: () => void;
-    /** The answer is being sent: both buttons wait. */
+    /** The answer is being sent: both buttons wait, and the waiting pulse stops. */
     busy?: boolean | undefined;
     className?: string | undefined;
 }): React.JSX.Element;

package/dist/chat/permission-prompt.js

@@ -60,6 +60,8 @@ const modeKeys = {
     bypassPermissions: "modeBypassPermissions",
 };
 const json = (v) => (typeof v === "string" ? v : JSON.stringify(v, null, 2));
+/** What a press lands on when the person is doing something else, rather than clicking around the prompt. */
+const INTERACTIVE = 'a[href], button, input, select, textarea, summary, [contenteditable=""], [contenteditable="true"], [role="button"], [role="link"], [role="menuitem"], [role="option"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], [role="textbox"], [role="slider"], [tabindex]:not([tabindex="-1"])';
 /** Parses edited JSON into an object, or null when it isn't one. */
 function parseObject(text) {
     try {
@@ -76,6 +78,11 @@ function parseObject(text) {
  * input, nothing else. "Don't ask again" rules are offered as boxes nobody has ticked, and are kept only if the
  * person ticks them. When the agent is asking questions instead, it shows them as a short form. Words from the
  * request (its title, reason, input) are shown as text, never markup.
+ *
+ * It sits in the thread, with no backdrop and nothing that dismisses it: the only ways out are Allow and Deny, and
+ * nothing else is ever counted as a denial. While the decision waits, its shield pulses slowly; a press on inert
+ * space outside it (the gesture that would dismiss a dialog) nudges it instead, so the person sees it is still
+ * waiting. Both stop once the answer is being sent.
  */
 function PermissionPrompt({ request, mode, suggestions, editable = false, onAllow, onDeny, busy = false, className, }) {
     // Keyed by the request, so an edit, a ticked rule or an answer never carries over to the next request.
@@ -101,6 +108,32 @@ function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, bus
         if (request.defaultToNo)
             denyRef.current?.focus();
     }, [request.id, request.defaultToNo]);
+    // A press on inert space outside every prompt, while it waits, nudges it rather than dismissing anything.
+    const section = React.useRef(null);
+    const [nudged, setNudged] = React.useState(false);
+    React.useEffect(() => {
+        if (busy)
+            return;
+        const onPress = (e) => {
+            const target = e.target;
+            if (!target || section.current?.contains(target))
+                return;
+            // A press anywhere inside another prompt is that prompt's business, not an outside press for this one.
+            if (target.closest('[data-slot="permission-prompt"]'))
+                return;
+            if (target.closest(INTERACTIVE))
+                return;
+            setNudged(true);
+        };
+        document.addEventListener("pointerdown", onPress);
+        return () => document.removeEventListener("pointerdown", onPress);
+    }, [busy]);
+    React.useEffect(() => {
+        if (!nudged)
+            return;
+        const timer = window.setTimeout(() => setNudged(false), 1000);
+        return () => window.clearTimeout(timer);
+    }, [nudged]);
     const word = (s) => {
         const key = { allow: "ruleAllow", deny: "ruleDeny", ask: "ruleAsk", remove: "ruleRemove", mode: "setMode", directories: "directories", other: "other" }[s.action];
         const scope = s.scope && { session: "scopeSession", local: "scopeLocal", project: "scopeProject", user: "scopeUser" }[s.scope];
@@ -133,7 +166,7 @@ function PromptBody({ request, mode, suggestions, editable, onAllow, onDeny, bus
             return;
         onAllow({ ...(edited && changedKeys.length && { updatedInput: edited }), ...(ticked.length && { alwaysAllow: ticked }) });
     };
-    return (_jsxs("section", { "data-slot": "permission-prompt", "aria-label": t("label", { title: questions ? t("questions") : title }), className: cn("overflow-hidden rounded-xl border border-warning/50 bg-card text-sm shadow-xs", className), children: [_jsxs("header", { className: "flex items-start gap-2.5 bg-warning-weak/50 px-3.5 py-2.5", children: [_jsx(ShieldQuestion, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-warning-text" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "font-semibold leading-snug", children: questions ? t("questions") : title }), request.description && _jsx("p", { className: "mt-0.5 text-muted-foreground", children: request.description })] }), _jsx("code", { className: "shrink-0 font-mono text-2xs text-muted-foreground", children: request.tool })] }), _jsxs("dl", { className: "flex flex-col gap-1.5 px-3.5 pt-2.5 text-sm", children: [request.reason && (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: t("why") }), _jsx("dd", { className: "min-w-0", children: request.reason })] })), mode && (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: t("mode") }), _jsx("dd", { "data-slot": "permission-mode", children: modeKeys[mode] ? t(modeKeys[mode]) : _jsx("code", { className: "font-mono text-xs", children: mode }) })] }))] }), (request.blockedPath || request.agentId || request.mcpServer) && (_jsxs("ul", { className: "mt-1.5 flex flex-col gap-0.5 px-3.5 text-xs text-muted-foreground", children: [request.blockedPath && _jsx("li", { children: t("blockedPath", { path: request.blockedPath }) }), request.agentId && _jsx("li", { children: t("subagent") }), request.mcpServer && _jsx("li", { children: t("server", { name: request.mcpServer.name, source: request.mcpServer.source }) })] })), questions ? (_jsx("div", { className: "flex flex-col gap-4 px-3.5 py-3", children: questions.map((q) => {
+    return (_jsxs("section", { ref: section, "data-slot": "permission-prompt", "data-waiting": busy ? undefined : "", "data-nudged": nudged ? "" : undefined, "aria-label": t("label", { title: questions ? t("questions") : title }), className: cn("overflow-hidden rounded-xl border border-warning/50 bg-card text-sm shadow-xs [--cd-attention-color:var(--warning)]", nudged && "animate-nudge", className), children: [_jsxs("header", { className: "flex items-start gap-2.5 bg-warning-weak/50 px-3.5 py-2.5", children: [_jsx("span", { "aria-hidden": true, className: cn("mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full text-warning-text", !busy && "animate-attention-wait"), children: _jsx(ShieldQuestion, { className: "size-4" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "font-semibold leading-snug", children: questions ? t("questions") : title }), request.description && _jsx("p", { className: "mt-0.5 text-muted-foreground", children: request.description })] }), _jsx("code", { className: "shrink-0 font-mono text-2xs text-muted-foreground", children: request.tool })] }), _jsxs("dl", { className: "flex flex-col gap-1.5 px-3.5 pt-2.5 text-sm", children: [request.reason && (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: t("why") }), _jsx("dd", { className: "min-w-0", children: request.reason })] })), mode && (_jsxs("div", { className: "flex gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground", children: t("mode") }), _jsx("dd", { "data-slot": "permission-mode", children: modeKeys[mode] ? t(modeKeys[mode]) : _jsx("code", { className: "font-mono text-xs", children: mode }) })] }))] }), (request.blockedPath || request.agentId || request.mcpServer) && (_jsxs("ul", { className: "mt-1.5 flex flex-col gap-0.5 px-3.5 text-xs text-muted-foreground", children: [request.blockedPath && _jsx("li", { children: t("blockedPath", { path: request.blockedPath }) }), request.agentId && _jsx("li", { children: t("subagent") }), request.mcpServer && _jsx("li", { children: t("server", { name: request.mcpServer.name, source: request.mcpServer.source }) })] })), questions ? (_jsx("div", { className: "flex flex-col gap-4 px-3.5 py-3", children: questions.map((q) => {
                     const a = answers[q.id];
                     return (_jsxs("fieldset", { className: "flex flex-col gap-1.5", children: [_jsxs("legend", { className: "mb-1 font-medium", children: [q.tag && _jsx("span", { className: "me-1.5 rounded-xs bg-muted px-1 text-2xs font-medium text-muted-foreground", children: q.tag }), q.prompt] }), q.options.map((o) => (_jsxs("label", { className: "flex min-h-6 items-start gap-2", children: [_jsx("input", { type: q.multiple ? "checkbox" : "radio", name: `${id}-${q.id}`, checked: a?.choice.includes(o.id) ?? false, onChange: () => choose(q, o.id), className: "mt-0.5 size-4 accent-[var(--primary)]" }), _jsxs("span", { children: [o.label, o.detail && _jsx("span", { className: "block text-xs text-muted-foreground", children: o.detail })] })] }, o.id))), q.other && (_jsxs(_Fragment, { children: [_jsxs("label", { className: "flex min-h-6 items-start gap-2", children: [_jsx("input", { type: q.multiple ? "checkbox" : "radio", name: `${id}-${q.id}`, checked: a?.other ?? false, onChange: () => toggleOther(q), className: "mt-0.5 size-4 accent-[var(--primary)]" }), _jsx("span", { children: t("otherOption") })] }), a?.other && (_jsx("textarea", { "aria-label": t("otherLabel", { question: q.prompt }), rows: 2, value: a.text, onChange: (e) => setAnswers((prev) => ({ ...prev, [q.id]: { ...prev[q.id], text: e.target.value } })), className: "ms-6 block resize-none rounded-md border border-input bg-card px-2.5 py-1.5 text-sm outline-none [field-sizing:content] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30" }))] }))] }, q.id));
                 }) })) : (_jsxs("div", { className: "flex flex-col gap-2 px-3.5 py-3", children: [editing ? (_jsxs(_Fragment, { children: [_jsx("label", { htmlFor: `${id}-edit`, className: "text-xs font-medium text-muted-foreground", children: t("editLabel") }), _jsx("textarea", { id: `${id}-edit`, value: draft, onChange: (e) => setDraft(e.target.value), spellCheck: false, rows: Math.min(12, draft.split("\n").length + 1), "aria-invalid": invalid || undefined, "aria-describedby": `${id}-changes`, className: "block w-full resize-y rounded-md border border-input bg-card px-2.5 py-1.5 font-mono text-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 aria-invalid:border-destructive" }), _jsx("div", { id: `${id}-changes`, role: "status", className: "text-xs", children: invalid ? (_jsx("p", { className: "text-destructive-text", children: t("editInvalid") })) : changedKeys.length ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-muted-foreground", children: t("changed") }), _jsx("ul", { className: "flex flex-col gap-1", children: changedKeys.map((k) => (_jsxs("li", { className: "grid gap-0.5 font-mono", children: [_jsx("span", { className: "text-muted-foreground", children: k }), k in proposed && _jsx("span", { className: "rounded-xs bg-destructive-weak/60 px-1 line-through", children: json(proposed[k]) }), k in edited && _jsx("span", { className: "rounded-xs bg-success-weak/70 px-1", children: json(edited[k]) })] }, k))) })] })) : (_jsx("p", { className: "text-muted-foreground", children: t("unchanged") })) }), _jsx(Button, { size: "sm", variant: "ghost", className: "self-start", onClick: () => (setEditing(false), setDraft(original)), children: t("cancelEdit") })] })) : (_jsxs(_Fragment, { children: [_jsx(Payload, { language: "json", title: t("input"), text: original }), editable && proposed && (_jsxs(Button, { size: "sm", variant: "outline", className: "self-start", onClick: () => setEditing(true), children: [_jsx(Pencil, { "aria-hidden": true }), " ", t("edit")] }))] })), suggestions && suggestions.length > 0 && (_jsxs("fieldset", { className: "mt-1 flex flex-col gap-1 rounded-lg border border-dashed px-3 py-2", children: [_jsx("legend", { className: "px-1 text-xs font-medium", children: t("remember") }), _jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Info, { "aria-hidden": true, className: "size-3" }), " ", t("rememberHint")] }), suggestions.map((s, i) => {

package/dist/chat/thread.d.ts

@@ -17,6 +17,10 @@ export declare const threadStrings: {
  * It opens at the bottom, or at `anchor` (the `id` of something in it, such as
  * a chapter divider or the card that needs the reader), and then waits for the
  * reader instead of following.
+ *
+ * While the reader is scrolled up, "Jump to latest" pulses once each time a
+ * new message arrives (a child of the thread, or any element marked `data-slot="message"` inside it), then stays still; the jump itself scrolls smoothly
+ * unless the OS asks for reduced motion or data-motion is "none".
  */
 declare function Thread({ children, empty, footer, className, contentClassName, virtualize, anchor, scrollerRef, onDrop, fade, }: {
     children?: React.ReactNode | undefined;

package/dist/chat/thread.js

@@ -23,6 +23,10 @@ export const threadStrings = {
  * It opens at the bottom, or at `anchor` (the `id` of something in it, such as
  * a chapter divider or the card that needs the reader), and then waits for the
  * reader instead of following.
+ *
+ * While the reader is scrolled up, "Jump to latest" pulses once each time a
+ * new message arrives (a child of the thread, or any element marked `data-slot="message"` inside it), then stays still; the jump itself scrolls smoothly
+ * unless the OS asks for reduced motion or data-motion is "none".
  */
 function Thread({ children, empty, footer, className, contentClassName, virtualize = false, anchor, scrollerRef, onDrop, fade = true, }) {
     const t = useStrings("thread", threadStrings);
@@ -35,9 +39,78 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
     React.useImperativeHandle(scrollerRef, () => scroller.current, []);
     const toBottom = React.useCallback((behavior = "auto") => {
         const el = scroller.current;
-        if (el)
-            el.scrollTo({ top: el.scrollHeight, behavior });
+        if (!el)
+            return;
+        // A smooth jump only when nothing asks for stillness: the OS setting, or data-motion="none" around the thread.
+        const still = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || el.closest('[data-motion="none"]') !== null;
+        el.scrollTo({ top: el.scrollHeight, behavior: still ? "auto" : behavior });
+    }, []);
+    // A new message while the reader is scrolled up: the Jump to latest control pulses once for each arrival, even when
+    // the messages sit inside a wrapper component or a fragment. A second arrival while it still pulses restarts it.
+    const [arrived, setArrived] = React.useState(false);
+    const arrivedRef = React.useRef(false);
+    const frame = React.useRef(0);
+    React.useEffect(() => {
+        arrivedRef.current = arrived;
+    }, [arrived]);
+    React.useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    const arrive = React.useCallback(() => {
+        if (pinnedRef.current)
+            return;
+        if (!arrivedRef.current) {
+            arrivedRef.current = true;
+            setArrived(true);
+            return;
+        }
+        // Already pulsing: switch it off and on again next frame, so the ring plays again.
+        arrivedRef.current = false;
+        setArrived(false);
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+            arrivedRef.current = true;
+            setArrived(true);
+        });
     }, []);
+    // Virtualized, every child is one message and the rows come and go as the reader scrolls, so the children are counted.
+    const count = React.Children.count(children);
+    const lastCount = React.useRef(count);
+    React.useEffect(() => {
+        const grew = count > lastCount.current;
+        lastCount.current = count;
+        if (grew && virtualize)
+            arrive();
+    }, [count, virtualize, arrive]);
+    // Otherwise the list itself is watched. A message is an element marked data-slot="message" anywhere inside the log, or a
+    // direct child of it that holds none. It is an arrival only when there are more messages than before and an added one
+    // comes after every message that was already there: unfolding earlier turns inserts in the middle, and swapping a
+    // reply for another version (a keyed remount) doesn't change the count. Text streaming into a message adds neither.
+    React.useEffect(() => {
+        const el = content.current;
+        if (virtualize || !el || typeof MutationObserver === "undefined")
+            return;
+        const messages = () => Array.from(el.querySelectorAll("*")).filter((node) => node.matches('[data-slot="message"]') || (node.parentElement === el && node.querySelector('[data-slot="message"]') === null));
+        const seen = { messages: messages() };
+        const observer = new MutationObserver(() => {
+            const before = seen.messages;
+            const known = (seen.messages = messages());
+            if (known.length <= before.length)
+                return;
+            const had = new Set(before);
+            const survivors = before.filter((node) => node.isConnected);
+            const added = known.filter((node) => !had.has(node));
+            const atTheEnd = added.some((node) => survivors.every((old) => old.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING));
+            if (atTheEnd)
+                arrive();
+        });
+        observer.observe(el, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, [virtualize, arrive]);
+    React.useEffect(() => {
+        if (!arrived)
+            return;
+        const timer = window.setTimeout(() => setArrived(false), 1000);
+        return () => window.clearTimeout(timer);
+    }, [arrived]);
     // Open at the anchor once, when it first appears.
     const anchored = React.useRef(false);
     React.useLayoutEffect(() => {
@@ -102,10 +175,12 @@ function Thread({ children, empty, footer, className, contentClassName, virtuali
                             ? (e) => {
                                 setFocused(e.target.closest("[data-virtual-key]")?.getAttribute("data-virtual-key") ?? null);
                             }
-                            : undefined, onBlur: virtualize ? (e) => !e.currentTarget.contains(e.relatedTarget) && setFocused(null) : undefined, className: "h-full scroll-pb-14 overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": t("messages"), className: cn("mx-auto flex w-full max-w-(--cd-thread-width) flex-col gap-7 px-4 py-6", contentClassName), children: !hasMessages ? (empty) : virtualize ? (_jsx(_Fragment, { children: list.rows.map((row) => "spacer" in row ? (_jsx("div", { "aria-hidden": true, style: { height: row.spacer } }, row.key)) : (_jsx("div", { ref: list.measure, "data-virtual-key": String(keyOf(row.index)), className: "flex flex-col", children: items[row.index] }, keyOf(row.index)))) })) : (children) }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
-                            pinnedRef.current = true;
-                            setPinned(true);
-                            toBottom("smooth");
-                        }, className: "absolute bottom-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: [_jsx(ArrowDown, { "aria-hidden": true, className: "size-3" }), " ", t("jumpToLatest")] })), fade && _jsx("div", { "aria-hidden": true, "data-slot": "thread-fade", className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-(--cd-thread-width) px-4 pb-4", children: footer })] }));
+                            : undefined, onBlur: virtualize ? (e) => !e.currentTarget.contains(e.relatedTarget) && setFocused(null) : undefined, className: "h-full scroll-pb-14 overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": t("messages"), className: cn("mx-auto flex w-full max-w-(--cd-thread-width) flex-col gap-7 px-4 py-6", contentClassName), children: !hasMessages ? (empty) : virtualize ? (_jsx(_Fragment, { children: list.rows.map((row) => "spacer" in row ? (_jsx("div", { "aria-hidden": true, style: { height: row.spacer } }, row.key)) : (_jsx("div", { ref: list.measure, "data-virtual-key": String(keyOf(row.index)), className: "flex flex-col", children: items[row.index] }, keyOf(row.index)))) })) : (children) }) }), !pinned && hasMessages && (
+                    // The entrance is the wrapper's, so the pulse on the button never replays it.
+                    _jsx("span", { className: "absolute bottom-3 left-1/2 z-10 -translate-x-1/2 animate-in fade-in-0 slide-in-from-bottom-1", children: _jsxs("button", { type: "button", "data-slot": "thread-jump", "data-arrived": arrived ? "" : undefined, onClick: () => {
+                                pinnedRef.current = true;
+                                setPinned(true);
+                                toBottom("smooth");
+                            }, className: cn("inline-flex items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float [--cd-attention-color:var(--primary)]", arrived && "animate-attention"), children: [_jsx(ArrowDown, { "aria-hidden": true, className: "size-3" }), " ", t("jumpToLatest")] }) })), fade && _jsx("div", { "aria-hidden": true, "data-slot": "thread-fade", className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-(--cd-thread-width) px-4 pb-4", children: footer })] }));
 }
 export { Thread };

package/dist/chat/tool-call.d.ts

@@ -20,7 +20,8 @@ export declare const toolCallStrings: {
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by
- * default and leads with its error.
+ * default and leads with its error. A call that finishes while on screen draws
+ * its tick or cross; one that arrives finished is drawn still.
  */
 declare function ToolCall({ call, className, }: {
     /** The call: tool name, plain-words title, status, input, output, duration or error. */

package/dist/chat/tool-call.js

@@ -26,7 +26,8 @@ export const toolCallStrings = {
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by
- * default and leads with its error.
+ * default and leads with its error. A call that finishes while on screen draws
+ * its tick or cross; one that arrives finished is drawn still.
  */
 function ToolCall({ call, className, }) {
     const t = useStrings("toolCall", toolCallStrings);
@@ -34,7 +35,7 @@ function ToolCall({ call, className, }) {
     const failed = call.status === "failed";
     const [open, setOpen] = React.useState(failed);
     const hasDetail = Boolean(call.input || call.output || call.error || call.approval?.note || call.approval?.originalInput);
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-start outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(call.status)] })] }), call.approval?.originalInput !== undefined && (_jsx("span", { "data-slot": "tool-call-edited", className: "shrink-0 rounded-xs bg-warning-weak px-1 text-2xs text-warning-text", children: t("editedBeforeRun") })), call.approval?.by === "automatic" && (_jsx("span", { "data-slot": "tool-call-approval", className: "shrink-0 rounded-xs bg-muted px-1 text-2xs text-muted-foreground", children: t("approvedAutomatically") })), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:[transform:rotate(90deg)]" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ms-[1.375rem] flex flex-col gap-2 border-s ps-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.approval?.note && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [call.approval.by === "automatic" ? t("approvedAutomatically") : t("approvedByPerson"), ": ", call.approval.note] })), call.approval?.originalInput !== undefined && _jsx("p", { className: "text-xs text-muted-foreground", children: t("editedNote") }), call.input && _jsx(Payload, { language: "json", title: t("input"), text: call.input }), call.approval?.originalInput !== undefined && _jsx(Payload, { language: "json", title: t("proposed"), text: call.approval.originalInput }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: t("output"), text: call.output })] }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-start outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(call.status)] })] }), call.approval?.originalInput !== undefined && (_jsx("span", { "data-slot": "tool-call-edited", className: "shrink-0 rounded-xs bg-warning-weak px-1 text-2xs text-warning-text", children: t("editedBeforeRun") })), call.approval?.by === "automatic" && (_jsx("span", { "data-slot": "tool-call-approval", className: "shrink-0 rounded-xs bg-muted px-1 text-2xs text-muted-foreground", children: t("approvedAutomatically") })), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:[transform:rotate(90deg)]" }))] }), _jsx(CollapsibleContent, { children: _jsxs("div", { className: "mt-1 mb-2 ms-[1.375rem] flex flex-col gap-2 border-s ps-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.approval?.note && (_jsxs("p", { className: "text-xs text-muted-foreground", children: [call.approval.by === "automatic" ? t("approvedAutomatically") : t("approvedByPerson"), ": ", call.approval.note] })), call.approval?.originalInput !== undefined && _jsx("p", { className: "text-xs text-muted-foreground", children: t("editedNote") }), call.input && _jsx(Payload, { language: "json", title: t("input"), text: call.input }), call.approval?.originalInput !== undefined && _jsx(Payload, { language: "json", title: t("proposed"), text: call.approval.originalInput }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: t("output"), text: call.output })] }) })] }));
 }
 /** A run of tool calls, with a count when it's long enough to fold. */
 function ToolCallGroup({ calls, className, }) {

package/dist/styles.css

@@ -244,6 +244,13 @@
  * Density: data-density="compact" on <html> (or any container) tightens type for
  * dense apps: 14px conversation text and 13px body and label text, with a narrower
  * thread and sidebar.
+ *
+ * Motion: data-motion="none" | "subtle" | "expressive" on <html> (or any container).
+ * Subtle is the default: a change that happened is shown settling (a collapse,
+ * a drawn tick, a fade). None turns every animation and transition off, with or
+ * without the OS setting. Expressive adds scale to pops and a shake to a locked
+ * control that was pressed. Motion reports a state change and never invents one;
+ * the OS's reduced-motion setting wins over all three.
  */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
@@ -287,6 +294,14 @@
   --cd-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
   --cd-ease-spring: linear(0, 0.4 15%, 0.7 30%, 1 50%, 0.95 65%, 1.02 80%, 1 100%);
 
+  /* How long a state change takes to settle: a colour or a pop, a collapse, a drawn mark or a filled rail. */
+  --cd-dur-quick: 120ms;
+  --cd-dur-base: 200ms;
+  --cd-dur-slow: 360ms;
+  /* What data-motion="expressive" turns on. Subtle pops only fade (a scale of 1) and never shakes. */
+  --cd-pop-from: 1;
+  --cd-motion-shake: none;
+
   /* The message column's width, and the app sidebar's. (Not --sidebar-width: shadcn's SidebarProvider sets that.) */
   --cd-thread-width: 48rem;
   --cd-sidebar-width: 16rem;
@@ -325,6 +340,12 @@
   }
 }
 
+/* The motion presets. Subtle needs no attribute; expressive adds scale and a shake; none is below, after the keyframes. */
+[data-motion="expressive"] {
+  --cd-pop-from: 0.85;
+  --cd-motion-shake: shake var(--cd-dur-slow) var(--cd-ease) both;
+}
+
 @theme inline {
   --font-sans: var(--cd-font);
   --font-display: var(--cd-font-display);
@@ -431,6 +452,24 @@
   --animate-pulse-dot: pulse-dot 1.6s var(--cd-ease) infinite;
   --animate-rise-in: rise-in 240ms var(--cd-ease) both;
   --animate-caret: caret 1s steps(2, start) infinite;
+
+  /*
+   * Motion that reports a change. Tailwind has no --duration-* namespace, so use the tokens directly:
+   * duration-(--cd-dur-base). A collapse follows Radix's measured height; a pop is a fade (and a scale under
+   * expressive); tick-draw draws a mark whose path has pathLength="1"; fill grows a bar from --cd-fill-from; shake is
+   * none unless expressive; attention is one ring pulse, attention-wait three slow ones (then still: WCAG 2.2.2 wants moving content to stop).
+   */
+  --animate-collapse-down: collapse-down var(--cd-dur-base) var(--cd-ease);
+  --animate-collapse-up: collapse-up var(--cd-dur-base) var(--cd-ease);
+  --animate-pop-in: pop-in var(--cd-dur-base) var(--cd-ease) both;
+  --animate-pop-out: pop-out var(--cd-dur-quick) var(--cd-ease) both;
+  --animate-tick-draw: tick-draw var(--cd-dur-slow) var(--cd-ease) both;
+  --animate-fill: fill var(--cd-dur-slow) var(--cd-ease) both;
+  --animate-shake: var(--cd-motion-shake);
+  --animate-attention: attention 900ms var(--cd-ease) 1;
+  --animate-attention-wait: attention 2.4s var(--cd-ease) 3;
+  /* A prompt that was clicked around instead of answered: one attention ring, and a shake when expressive. */
+  --animate-nudge: var(--cd-motion-shake), attention 900ms var(--cd-ease) 1;
 }
 
 @keyframes shimmer {
@@ -448,6 +487,48 @@
 @keyframes caret {
   to { visibility: hidden; }
 }
+/* Collapsible content, to and from the height Radix measured. Overflow is hidden only while it moves. */
+@keyframes collapse-down {
+  from { height: 0; overflow: hidden; }
+  to { height: var(--radix-collapsible-content-height); overflow: hidden; }
+}
+@keyframes collapse-up {
+  from { height: var(--radix-collapsible-content-height); overflow: hidden; }
+  to { height: 0; overflow: hidden; }
+}
+/* Something added or removed: a fade, and a scale from --cd-pop-from (1 unless expressive). */
+@keyframes pop-in {
+  from { opacity: 0; transform: scale(var(--cd-pop-from)); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes pop-out {
+  from { opacity: 1; transform: none; }
+  to { opacity: 0; transform: scale(var(--cd-pop-from)); }
+}
+/* A tick or cross drawn along its path; the path has pathLength="1" and stroke-dasharray 1. */
+@keyframes tick-draw {
+  from { stroke-dashoffset: 1; }
+  to { stroke-dashoffset: 0; }
+}
+/* A bar that fills to a measured point: along its width by default, or set --cd-fill-from to "1 0" for height. */
+@keyframes fill {
+  from { scale: var(--cd-fill-from, 0 1); }
+  to { scale: 1; }
+}
+/* A pressed control that can't be used: a small horizontal shake, expressive only. */
+@keyframes shake {
+  0%, 100% { transform: none; }
+  20%, 60% { transform: translateX(-3px); }
+  40%, 80% { transform: translateX(3px); }
+}
+/*
+ * A ring that grows and fades, in --cd-attention-color (the text colour unless set): once for something that arrived
+ * or a press that asked for attention, repeating while a decision waits.
+ */
+@keyframes attention {
+  0%, 100% { outline: 0 solid color-mix(in oklab, var(--cd-attention-color, currentColor) 45%, transparent); }
+  60% { outline: 6px solid transparent; }
+}
 
 /*
  * Syntax colours for Payload's tokens: on under data-syntax="highlight" (on <html> for the whole app, or a Payload's
@@ -468,9 +549,23 @@
 [data-slot="payload"][data-syntax="highlight"] :is([data-token="number"], [data-token="variable"]) { color: var(--attention-text); }
 [data-slot="payload"][data-syntax="highlight"] :is([data-token="property"], [data-token="tag"], [data-token="type"]) { color: var(--warning-text); }
 
+/*
+ * data-motion="none": nothing moves, with or without the OS setting. An element leaving with a pop-out (data-leaving)
+ * is simply gone. The reduced-motion block below comes last and stays authoritative for every preset.
+ */
+[data-motion="none"], [data-motion="none"] *, [data-motion="none"] *::before, [data-motion="none"] *::after {
+  animation: none !important;
+  transition: none !important;
+  scroll-behavior: auto !important;
+}
+[data-motion="none"] [data-leaving] {
+  display: none !important;
+}
+
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.001ms !important;
+    animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
     scroll-behavior: auto !important;

package/dist/ui/collapsible.d.ts

@@ -2,5 +2,9 @@ import { Collapsible as CollapsiblePrimitive } from "radix-ui";
 import { type RenderProp } from "../lib/render-prop.js";
 declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react").JSX.Element;
 declare function CollapsibleTrigger(allProps: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & RenderProp): import("react").JSX.Element;
-declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
+/**
+ * The content opens and closes to the height Radix measured (--radix-collapsible-content-height), so a change of
+ * state is seen settling rather than snapping; data-motion="none" and the OS's reduced-motion setting make it snap.
+ */
+declare function CollapsibleContent({ className, ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react").JSX.Element;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/collapsible.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { cn } from "../lib/utils.js";
 import { withRender } from "../lib/render-prop.js";
 function Collapsible({ ...props }) {
     return _jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
@@ -9,7 +10,11 @@ function CollapsibleTrigger(allProps) {
     const props = withRender(allProps);
     return (_jsx(CollapsiblePrimitive.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...props }));
 }
-function CollapsibleContent({ ...props }) {
-    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", ...props }));
+/**
+ * The content opens and closes to the height Radix measured (--radix-collapsible-content-height), so a change of
+ * state is seen settling rather than snapping; data-motion="none" and the OS's reduced-motion setting make it snap.
+ */
+function CollapsibleContent({ className, ...props }) {
+    return (_jsx(CollapsiblePrimitive.CollapsibleContent, { "data-slot": "collapsible-content", className: cn("data-[state=open]:animate-collapse-down data-[state=closed]:animate-collapse-up", className), ...props }));
 }
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@candor-ui/react",
-  "version": "1.8.0",
+  "version": "1.9.1",
   "description": "Candor UI's free tier as an npm package: React components for agents that do real work, on shadcn/ui and Tailwind 4.",
   "license": "MIT",
   "author": "Methodic LLC",