@candor-ui/react 2.2.0 → 2.3.0

package/dist/adapters/use-ag-ui.d.ts

@@ -52,7 +52,7 @@ export declare function useAgUi(options: UseAgUiOptions): {
     composer: {
         value: string;
         onChange: React.Dispatch<React.SetStateAction<string>>;
-        state: "streaming" | "ready" | "sending";
+        state: "streaming" | "sending" | "ready";
         references: EntityRef[];
         onReferencesChange: React.Dispatch<React.SetStateAction<EntityRef[]>>;
         onStop: () => void | undefined;

package/dist/adapters/use-candor-chat.d.ts

@@ -31,7 +31,7 @@ export declare function useCandorChat(chat: UseChatHelpers<UIMessage>, options:
     composer: {
         value: string;
         onChange: React.Dispatch<React.SetStateAction<string>>;
-        state: "streaming" | "ready" | "sending";
+        state: "streaming" | "sending" | "ready";
         references: EntityRef[];
         onReferencesChange: React.Dispatch<React.SetStateAction<EntityRef[]>>;
         onStop: () => Promise<void>;

package/dist/adapters/use-claude-agent.d.ts

@@ -68,7 +68,7 @@ export declare function useClaudeAgent(options: UseClaudeAgentOptions): {
     composer: {
         value: string;
         onChange: React.Dispatch<React.SetStateAction<string>>;
-        state: "streaming" | "ready" | "sending";
+        state: "streaming" | "sending" | "ready";
         references: EntityRef[];
         onReferencesChange: React.Dispatch<React.SetStateAction<EntityRef[]>>;
         onStop: () => void;

package/dist/blocks/copy-field.js

@@ -4,6 +4,9 @@ import { Check, Copy, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useCopy } from "../lib/use-copy.js";
 import { useStrings } from "./locale.js";
+import { motion } from "../lib/motion.js";
+/** The tick or cross after the clipboard write settles. */
+const tickMotion = motion("copy-field", "tick", "pop");
 /** CopyField's fixed words; override them under `copyField` in LocaleProvider's `strings`. */
 export const copyFieldStrings = {
     copy: "Copy",
@@ -19,6 +22,6 @@ export const copyFieldStrings = {
 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", "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")] })) })] })] }));
+    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 cd-tint 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, { style: tickMotion, className: "size-3 text-success-text cd-pop" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { style: tickMotion, className: "size-3 text-destructive-text cd-pop" }), " ", t("failed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] })] }));
 }
 export { CopyField };

package/dist/blocks/degraded-panel.js

@@ -4,6 +4,8 @@ import { CircleAlert, RotateCw } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Button } from "../ui/button.js";
 import { useStrings } from "./locale.js";
+import { motion } from "../lib/motion.js";
+const spinMotion = motion("degraded-panel", "busy", "live", { dur: 1000 });
 /** DegradedPanel's fixed words; override them under `degradedPanel` in LocaleProvider's `strings`. */
 export const degradedPanelStrings = {
     missing: "Missing:",
@@ -17,6 +19,6 @@ export const degradedPanelStrings = {
  */
 function DegradedPanel({ reason, missing, onRetry, retrying = false, variant = "block", className, }) {
     const t = useStrings("degradedPanel", degradedPanelStrings);
-    return (_jsxs("div", { "data-slot": "degraded-panel", role: "status", className: cn("flex gap-2.5 text-sm", variant === "block" ? "items-start rounded-lg border border-warning/40 bg-warning-weak/60 p-3" : "items-center", className), children: [_jsx(CircleAlert, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-warning-text" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground", children: reason }), missing && _jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [t("missing"), " ", missing] })] }), onRetry && (_jsxs(Button, { size: "xs", variant: "outline", onClick: onRetry, disabled: retrying, "aria-busy": retrying, className: "shrink-0", children: [_jsx(RotateCw, { className: cn(retrying && "animate-spin") }), " ", retrying ? t("retrying") : t("retry")] }))] }));
+    return (_jsxs("div", { "data-slot": "degraded-panel", role: "status", className: cn("flex gap-2.5 text-sm", variant === "block" ? "items-start rounded-lg border border-warning/40 bg-warning-weak/60 p-3" : "items-center", className), children: [_jsx(CircleAlert, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-warning-text" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground", children: reason }), missing && _jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [t("missing"), " ", missing] })] }), onRetry && (_jsxs(Button, { size: "xs", variant: "outline", onClick: onRetry, disabled: retrying, "aria-busy": retrying, className: "shrink-0", children: [_jsx(RotateCw, { style: spinMotion, className: cn(retrying && "cd-live-spin") }), " ", retrying ? t("retrying") : t("retry")] }))] }));
 }
 export { DegradedPanel };

package/dist/blocks/locked.js

@@ -4,6 +4,10 @@ import * as React from "react";
 import { LockKeyhole } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { motion } from "../lib/motion.js";
+/** A press on the locked control: the reason is emphasised, and under expressive the control shakes. */
+const refuseMotion = motion("locked", "refuse", "refuse");
+const reasonMotion = motion("locked", "reason", "tint", { dur: 200 });
 /**
  * The honest-state rule: a control that cannot be used says why.
  *
@@ -53,6 +57,6 @@ function Locked({ reason, inline = false, children, className, }) {
                 block(e);
         },
     });
-    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] })] }));
+    return (_jsxs("span", { "data-slot": "locked", "data-pressed": held ? "" : undefined, style: refuseMotion, className: cn("relative inline-flex flex-col items-start gap-1.5", shaking && "cd-refuse", 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", style: reasonMotion, className: cn("items-center gap-1 text-xs text-muted-foreground cd-tint", 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,4 +1,3 @@
-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
@@ -6,14 +5,26 @@ import { type RunStatus } from "../lib/status.js";
  * 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.
+ *
+ * Live means heard from: with `lastHeardAt`, a running dot pulses only while the
+ * run has been heard from within `staleAfter`, and is still (with its word)
+ * once it hasn't, or before the page has a clock. Without it the app isn't
+ * tracking freshness, and running pulses as before.
  */
-declare function StatusDot({ status, showLabel, label, className, }: {
+declare function StatusDot({ status, showLabel, label, lastHeardAt, staleAfter, className, }: {
     /** Which status to show; running and waiting pulse. */
     status: RunStatus;
     /** Print the status name next to the dot. */
     showLabel?: boolean | undefined;
     /** Words to use instead of the status name. */
     label?: string | undefined;
+    /**
+     * When the run was last heard from (an event, a heartbeat). A running dot pulses only while this is within
+     * `staleAfter`; past it, or when the time can't be read, the dot is still. Left out, the dot doesn't claim to know.
+     */
+    lastHeardAt?: Date | string | undefined;
+    /** How long a running run may be silent, in milliseconds, before the dot stops pulsing. Two minutes by default. */
+    staleAfter?: number | undefined;
     className?: string | undefined;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 export { StatusDot };

package/dist/blocks/status-dot.js

@@ -1,8 +1,13 @@
 "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";
+import { useNow } from "./relative-time.js";
+import { motion, useSettled } from "../lib/motion.js";
+import { runLiveness, STALE_AFTER, useStatusLabel } from "../lib/status.js";
+/** The pulse while a run is heard from. */
+const liveMotion = motion("status-dot", "live", "live");
+/** The dot popping into its final colour when the run settles on screen. */
+const settleMotion = motion("status-dot", "settle", "pop");
 const dotColor = {
     idle: "bg-faint-foreground/60",
     queued: "bg-faint-foreground",
@@ -14,35 +19,25 @@ 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. 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.
+ *
+ * Live means heard from: with `lastHeardAt`, a running dot pulses only while the
+ * run has been heard from within `staleAfter`, and is still (with its word)
+ * once it hasn't, or before the page has a clock. Without it the app isn't
+ * tracking freshness, and running pulses as before.
  */
-function StatusDot({ status, showLabel = false, label, className, }) {
+function StatusDot({ status, showLabel = false, label, lastHeardAt, staleAfter = STALE_AFTER, className, }) {
     const statusLabel = useStatusLabel();
     const text = label ?? statusLabel(status);
-    const live = status === "running" || status === "waiting";
+    const now = useNow();
+    const liveness = runLiveness({ status, lastHeardAt }, now, staleAfter);
+    const live = (status === "running" || status === "waiting") && liveness === "live";
     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 })] }));
+    return (_jsxs("span", { "data-slot": "status-dot", "data-status": status, "data-settled": settled > 0 ? "" : undefined, "data-liveness": lastHeardAt === undefined ? undefined : liveness, className: cn("inline-flex items-center gap-1.5 text-xs text-muted-foreground", className), children: [_jsx("span", { "aria-hidden": true, style: live ? liveMotion : settleMotion, className: cn("size-2 shrink-0 rounded-full", dotColor[status], live && "cd-live-dot", settled > 0 && "cd-pop") }, settled), showLabel ? _jsx("span", { children: text }) : _jsx("span", { className: "sr-only", children: text })] }));
 }
 export { StatusDot };

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

@@ -18,7 +18,8 @@ declare function StepMark({ status, }: {
 /**
  * An ordered list of steps joined by a rail: an agent's plan, its reasoning,
  * 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.
+ * it, and a step that finishes while on screen draws its mark. A step added
+ * after the list first drew rises in; the steps it loaded with are still.
  */
 declare function StepList({ steps, className, }: {
     /** The steps in order, each with a status, and optional detail and meta. */

package/dist/blocks/step-list.js

@@ -3,33 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CircleSlash, Hand, LoaderCircle } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { motion, useArrived, useSettled } from "../lib/motion.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 step's tick or cross, drawn when its status settles on screen. */
+const markMotion = motion("step-list", "mark", "mark");
+/** The rail growing to a step that finished on screen. */
+const railMotion = motion("step-list", "rail", "fill");
+/** A step added after the list first drew. */
+const arriveMotion = motion("step-list", "arrive", "arrive");
+const workingMotion = motion("step-list", "working", "live", { dur: 1000 });
 /** 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));
+    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, style: markMotion, className: cn(draw > 0 && "cd-mark") }) }, 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));
+    const drawn = draw > 0 && "cd-mark";
+    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, style: markMotion, className: cn(drawn) }), _jsx("path", { d: "m6 6 12 12", pathLength: 1, style: markMotion, className: cn(drawn, drawn && "[--cd-mark-step:1]") })] }, draw));
 }
 /**
  * A step's status as a mark. When the status reaches done or failed while the mark is on screen, the spinner
@@ -37,14 +27,14 @@ function Cross({ draw }) {
  */
 function StepMark({ status, }) {
     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";
+    const base = "relative z-10 flex size-5 shrink-0 items-center justify-center rounded-full cd-tint";
     switch (status) {
         case "succeeded":
             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"), "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 }) }));
+            return (_jsx("span", { className: cn(base, "bg-accent-weak text-accent-text"), children: _jsx(LoaderCircle, { style: workingMotion, className: "size-3.5 cd-live-spin", strokeWidth: 2.5 }) }));
         case "waiting":
             return (_jsx("span", { className: cn(base, "bg-warning-weak text-warning-text"), children: _jsx(Hand, { className: "size-3", strokeWidth: 2.5 }) }));
         case "blocked":
@@ -56,18 +46,20 @@ 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, }) {
+function StepRow({ step, arrived, 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 })] })] }));
+    return (_jsxs("li", { style: arriveMotion, className: cn("relative flex gap-3 pb-4 last:pb-0", arrived && "cd-arrive"), 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", style: railMotion, className: cn("absolute inset-0 origin-top bg-success/50", settled > 0 && "cd-fill-grow [--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 to each step as it finishes, never ahead of
- * it, and a step that finishes while on screen draws its mark.
+ * it, and a step that finishes while on screen draws its mark. A step added
+ * after the list first drew rises in; the steps it loaded with are still.
  */
 function StepList({ steps, className, }) {
-    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))) }));
+    const arrived = useArrived(React.useMemo(() => steps.map((s) => s.id), [steps]));
+    return (_jsx("ol", { "data-slot": "step-list", className: cn("flex flex-col", className), children: steps.map((step, i) => (_jsx(StepRow, { step: step, arrived: arrived(step.id), last: i === steps.length - 1 }, step.id))) }));
 }
 export { StepList, StepMark };

package/dist/blocks/streaming-text.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
+import { motion } from "../lib/motion.js";
+const caretMotion = motion("streaming-text", "caret", "live", { dur: 1000 });
 /**
  * Text that is still arriving. Shows a caret while `streaming`, and announces
  * politely so screen readers hear the finished text rather than every token.
  */
 function StreamingText({ text, streaming = false, className, }) {
-    return (_jsxs("div", { "data-slot": "streaming-text", "aria-live": "polite", "aria-busy": streaming, className: cn("whitespace-pre-wrap text-[0.9375rem] leading-relaxed text-foreground", className), children: [text, streaming && (_jsx("span", { "aria-hidden": true, className: "ms-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary animate-caret" }))] }));
+    return (_jsxs("div", { "data-slot": "streaming-text", "aria-live": "polite", "aria-busy": streaming, className: cn("whitespace-pre-wrap text-[0.9375rem] leading-relaxed text-foreground", className), children: [text, streaming && (_jsx("span", { "aria-hidden": true, style: caretMotion, className: "ms-0.5 inline-block h-[1.05em] w-[2px] translate-y-[0.18em] rounded-full bg-primary cd-live-caret" }))] }));
 }
 /** A label that shimmers while an agent is working ("Thinking", "Reading the docs"). */
 function ShimmerLabel({ children, className, }) {

package/dist/blocks/surface.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const surfaceVariants: (props?: ({
-    tone?: "plain" | "muted" | "subtle" | "raised" | "floating" | "accent" | null | undefined;
+    tone?: "plain" | "subtle" | "muted" | "raised" | "floating" | "accent" | null | undefined;
     radius?: "md" | "lg" | "xl" | null | undefined;
     pad?: "none" | "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/chat/attachment-preview.js

@@ -4,6 +4,9 @@ import * as React from "react";
 import { File, FileArchive, FileCode, FileImage, FileSpreadsheet, FileText, Music, Paperclip, Video, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useFormat, useStrings } from "../blocks/locale.js";
+import { motion } from "../lib/motion.js";
+/** The upload bar moving between measured byte counts: 2.2's 300 ms. */
+const progressMotion = motion("attachment-preview", "progress", "fill", { dur: 300 });
 /** AttachmentPreview's fixed words; override them under `attachmentPreview` in LocaleProvider's `strings`. */
 export const attachmentPreviewStrings = {
     remove: "Remove {name}",
@@ -58,7 +61,7 @@ function AttachmentChip({ attachment: a, onRemove, className, }) {
     const t = useStrings("attachmentPreview", attachmentPreviewStrings);
     const fmt = useFormat();
     const thumb = thumbnail(a);
-    return (_jsxs("span", { "data-slot": "attachment-chip", className: cn("relative inline-flex max-w-56 items-center gap-1.5 overflow-hidden rounded-md border bg-card py-1 pe-1 ps-2 text-xs", a.error && "border-destructive/50", className), children: [thumb ? _jsx("img", { src: thumb, alt: "", className: "size-4 shrink-0 rounded-xs object-cover" }) : _jsx(Paperclip, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: a.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ? a.error : a.progress !== undefined ? fmt.number(Math.round(a.progress * 100) / 100, { style: "percent" }) : formatFileSize(a.size, fmt.number, t) }), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: a.name }), onClick: () => onRemove(a.id), className: "relative after:absolute after:-inset-1 rounded-sm p-0.5 text-faint-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { className: "size-3" }) })), a.progress !== undefined && !a.error && _jsx("span", { "aria-hidden": true, className: "absolute bottom-0 start-0 h-0.5 bg-primary transition-[width] duration-300", style: { width: `${a.progress * 100}%` } })] }));
+    return (_jsxs("span", { "data-slot": "attachment-chip", className: cn("relative inline-flex max-w-56 items-center gap-1.5 overflow-hidden rounded-md border bg-card py-1 pe-1 ps-2 text-xs", a.error && "border-destructive/50", className), children: [thumb ? _jsx("img", { src: thumb, alt: "", className: "size-4 shrink-0 rounded-xs object-cover" }) : _jsx(Paperclip, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: a.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ? a.error : a.progress !== undefined ? fmt.number(Math.round(a.progress * 100) / 100, { style: "percent" }) : formatFileSize(a.size, fmt.number, t) }), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: a.name }), onClick: () => onRemove(a.id), className: "relative after:absolute after:-inset-1 rounded-sm p-0.5 text-faint-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { className: "size-3" }) })), a.progress !== undefined && !a.error && _jsx("span", { "aria-hidden": true, className: "absolute bottom-0 start-0 h-0.5 bg-primary cd-fill", style: { ...progressMotion, width: `${a.progress * 100}%` } })] }));
 }
 /**
  * A sent file, as a tile in a message: an image preview when the app supplied one, else an icon for its type, with
@@ -72,7 +75,7 @@ function AttachmentPreview({ attachment: a, onOpen, className, }) {
     const size = formatFileSize(a.size, fmt.number, t);
     const body = (_jsxs(_Fragment, { children: [thumb ? (_jsx("img", { src: thumb, alt: "", className: "h-24 w-full rounded-md bg-muted object-cover" })) : (_jsx("span", { "aria-hidden": true, className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(FileGlyph, { attachment: a }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm", children: a.name }), (size || a.error) && _jsx("span", { className: cn("block text-xs tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ?? size })] })] }));
     const frame = cn("flex w-56 max-w-full gap-2.5 rounded-lg border bg-card p-2 text-start", thumb ? "flex-col" : "items-center", className);
-    return onOpen ? (_jsx("button", { type: "button", "data-slot": "attachment-preview", "aria-label": t("open", { name: a.name }), onClick: () => onOpen(a), className: cn(frame, "outline-none transition-colors duration-150 hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/80"), children: body })) : (_jsx("div", { "data-slot": "attachment-preview", className: frame, children: body }));
+    return onOpen ? (_jsx("button", { type: "button", "data-slot": "attachment-preview", "aria-label": t("open", { name: a.name }), onClick: () => onOpen(a), className: cn(frame, "outline-none cd-tint hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/80"), children: body })) : (_jsx("div", { "data-slot": "attachment-preview", className: frame, children: body }));
 }
 /** Several sent files, as a wrapping row of tiles, announced as a list. */
 function AttachmentList({ attachments, onOpen, className, }) {

package/dist/chat/card-registry.js

@@ -5,6 +5,8 @@ import { ChevronRight, LayoutTemplate } from "lucide-react";
 import { DegradedPanel } from "../blocks/degraded-panel.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { useStrings } from "../blocks/locale.js";
+import { motion } from "../lib/motion.js";
+const turnMotion = motion("card-registry", "open", "reveal");
 /** CardRegistry's fixed words; override them under `cardRegistry` in LocaleProvider's `strings`. */
 export const cardRegistryStrings = {
     showAsText: "Show it as text",
@@ -32,7 +34,7 @@ class CardBoundary extends React.Component {
 }
 function Summary({ text, }) {
     const t = useStrings("cardRegistry", cardRegistryStrings);
-    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-1 inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
+    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "relative after:absolute after:inset-x-0 after:-inset-y-1 inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, style: turnMotion, className: "rtl:-scale-x-100 size-3 cd-reveal-turn group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { style: turnMotion, children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
 }
 /**
  * Renders one card from the registry. Three honest fallbacks, each with the

package/dist/chat/citation.js

@@ -54,7 +54,7 @@ function Citation({ source, marker, }) {
     if (!source) {
         return _jsxs("sup", { className: "text-faint-foreground", children: ["[", marker ?? "?", "]"] });
     }
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80", source.provisional
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums cd-tint outline-none focus-visible:ring-[3px] focus-visible:ring-ring/80", source.provisional
                         ? "border border-dashed border-provisional/60 text-provisional hover:bg-muted"
                         : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: source }) })] }));
 }
@@ -67,7 +67,7 @@ function SourceList({ sources, className, }) {
                 .sort((a, b) => a.marker - b.marker)
                 .map((s) => {
                 const { Icon } = kindOf(s.kind, t);
-                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
+                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("relative after:absolute after:inset-x-0 after:-inset-y-0.5 inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground cd-tint outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/80", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 max-w-[calc(100vw-2rem)] p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
             })] }));
 }
 export { Citation, SourceList, SourceDetail };

package/dist/chat/composer.js

@@ -7,6 +7,14 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { EntityChip, useEntityKinds } from "./entity-chip.js";
 import { AttachmentChip } from "./attachment-preview.js";
 import { useStrings } from "../blocks/locale.js";
+import { motion, useArrived, useLeaving } from "../lib/motion.js";
+/** A chip added after the first draw pops in; a removed one pops out as a ghost. */
+const chipMotion = motion("composer", "chip", "pop");
+/** The mention and command menu: 2.2's fade and 4 px rise. */
+const menuMotion = motion("composer", "menu", "overlay", { variant: "slide" });
+/** Send and Stop acknowledge the press: 2.2's scale of 0.95. */
+const sendMotion = motion("composer", "send", "press", { amp: "0.9" });
+const sendingMotion = motion("composer", "sending", "live", { dur: 1000 });
 /** Composer's fixed words; override them under `composer` in LocaleProvider's `strings`. */
 export const composerStrings = {
     placeholder: "Ask a question, or describe a change",
@@ -42,55 +50,9 @@ const groupOf = (item, commandsLabel = "Commands") => (item.type === "command" ?
 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 }));
+    return (_jsx("span", { "aria-hidden": true, "data-leaving": true, style: chipMotion, className: "pointer-events-none inline-flex max-w-full cd-pop-out", onAnimationEnd: onDone, children: children }));
 }
 /**
  * Where a person asks. Mentions (@) attach things in the user's system as chips the agent
@@ -118,8 +80,12 @@ 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);
+    // Chips added after the composer first drew pop in; chips just removed pop out as inert ghosts, then go. Chips there
+    // at first render are drawn still: nothing moves for a state the reader already had.
+    const referenceArrived = useArrived(React.useMemo(() => references.map(referenceKey), [references]));
+    const attachmentArrived = useArrived(React.useMemo(() => attachments.map(attachmentKey), [attachments]));
+    const referenceMotion = useLeaving(references, referenceKey);
+    const attachmentMotion = useLeaving(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;
@@ -243,7 +209,7 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
             const files = Array.from(e.dataTransfer.files);
             if (files.length)
                 onAttach(files);
-        }, children: [dragDepth > 0 && (_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-card/90 text-sm font-medium text-accent-text", children: t("dropFiles") })), menuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": trigger?.char === "/" ? t("commands") : t("mentions"), className: "absolute inset-x-0 bottom-full z-20 mb-2 max-h-72 overflow-y-auto rounded-xl border bg-popover p-1 shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: items.map((item, i) => {
+        }, children: [dragDepth > 0 && (_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-card/90 text-sm font-medium text-accent-text", children: t("dropFiles") })), menuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": trigger?.char === "/" ? t("commands") : t("mentions"), style: menuMotion, className: "absolute inset-x-0 bottom-full z-20 mb-2 max-h-72 overflow-y-auto rounded-xl border bg-popover p-1 shadow-float [--cd-overlay-distance:0.25rem] [--cd-side-y:1] cd-overlay", children: items.map((item, i) => {
                     const group = groupOf(item, t("commands"));
                     const prev = items[i - 1];
                     const header = !prev || groupOf(prev, t("commands")) !== group ? group : null;
@@ -252,7 +218,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 || 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) => {
+                }) })), _jsxs("div", { className: cn("rounded-2xl border bg-card shadow-raised cd-tint 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("span", { "data-slot": "composer-chip", style: chipMotion, className: cn("inline-flex max-w-full min-w-0", referenceArrived(referenceKey(r)) && "cd-pop"), children: _jsx(EntityChip, { entity: r, onRemove: (e) => onReferencesChange?.(references.filter((x) => x !== e)) }) }, referenceKey(r)))), referenceMotion.leaving.map((r) => (_jsx(LeavingChip, { onDone: () => referenceMotion.left(r), children: _jsx(EntityChip, { entity: r }) }, `leaving:${referenceKey(r)}`))), attachments.map((a) => (_jsx("span", { "data-slot": "composer-chip", style: chipMotion, className: cn("inline-flex max-w-full min-w-0", attachmentArrived(a.id) && "cd-pop"), children: _jsx(AttachmentChip, { attachment: a, onRemove: onRemoveAttachment }) }, 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) => {
@@ -271,8 +237,8 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
                                             if (files.length)
                                                 onAttach(files);
                                             e.target.value = "";
-                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), hints && (
+                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground cd-tint hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs cd-tint enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), hints && (
                             // Only what this composer can do: @ and / are named only when there's something for them to offer.
-                            _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), mentions.length > 0 && (_jsxs(_Fragment, { children: [" · ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] })), commands.length > 0 && (_jsxs(_Fragment, { children: [" · ", _jsx("kbd", { className: "font-sans", children: "/" }), " ", t("hintCommand")] }))] })), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: cn("ms-auto flex size-8 items-center justify-center bg-foreground text-background transition-transform duration-150 active:scale-95", hints && "@lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: cn("ms-auto flex size-8 items-center justify-center bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30", hints && "@lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
+                            _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), mentions.length > 0 && (_jsxs(_Fragment, { children: [" · ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] })), commands.length > 0 && (_jsxs(_Fragment, { children: [" · ", _jsx("kbd", { className: "font-sans", children: "/" }), " ", t("hintCommand")] }))] })), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, style: sendMotion, className: cn("ms-auto flex size-8 items-center justify-center bg-foreground text-background cd-press", hints && "@lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", style: sendMotion, className: cn("ms-auto flex size-8 items-center justify-center bg-primary text-primary-foreground cd-press enabled:hover:bg-primary-hover disabled:opacity-30", hints && "@lg:ms-1", sendShape === "round" ? "rounded-full" : "rounded-lg"), children: state === "sending" ? _jsx(LoaderCircle, { style: sendingMotion, className: "size-4 cd-live-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
 }
 export { Composer };

package/dist/chat/context-meter.js

@@ -4,6 +4,9 @@ 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";
+import { motion } from "../lib/motion.js";
+/** The ring moving to a new measured value, after the first one was drawn in place. */
+const fillMotion = motion("context-meter", "fill", "fill");
 /** ContextMeter's fixed words; override them under `contextMeter` in LocaleProvider's `strings`. */
 export const contextMeterStrings = {
     /** A token count in thousands; `{n}` is already formatted. */
@@ -46,7 +49,7 @@ function ContextMeter({ segments, limit, className, }) {
     // 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]
+    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", style: fillMotion, className: cn(drawn && "cd-fill") })] }), 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/entity-chip.js

@@ -81,6 +81,6 @@ function EntityChip({ entity, onOpen, onRemove, className, }) {
         : t("title", { noun, name: entity.name });
     const body = (_jsxs(_Fragment, { children: [_jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: shown }), _jsxs("span", { className: "sr-only", children: [" (", title, ")"] })] }));
     const base = "inline-flex max-w-full items-center gap-1 rounded-sm border bg-card px-1.5 py-px align-baseline font-mono text-[0.92em] leading-[1.35] text-foreground";
-    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer transition-colors duration-150 hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "relative after:absolute after:-inset-1 -ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
+    return (_jsxs("span", { "data-slot": "entity-chip", "data-kind": entity.kind, title: title, className: cn("inline-flex max-w-full min-w-0 items-center sm:max-w-64", className), children: [onOpen ? (_jsx("button", { type: "button", onClick: () => onOpen(entity), className: cn(base, "cursor-pointer cd-tint hover:border-border-strong hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/80 outline-none"), children: body })) : (_jsx("span", { className: base, children: body })), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: shown }), onClick: () => onRemove(entity), className: "relative after:absolute after:-inset-1 -ms-px rounded-e-sm border border-s-0 bg-card px-1 py-px text-faint-foreground hover:text-foreground", children: "\u00D7" }))] }));
 }
 export { EntityChip, EntityKindsProvider, useEntityKinds };