@vvedantb/ui 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/src/ai-elements/activity-tasks.tsx

@@ -63,6 +63,7 @@ import {
   type AgentTraceStatus,
 } from "./trace";
 import { useStreamingDisclosure } from "./use-streaming-disclosure";
+import { RollingNumber } from "../ui/rolling-number";
 
 const streamdownPlugins = { cjk, code, math, mermaid };
 
@@ -94,15 +95,24 @@ const ActivityStreamingHeader = memo(function ActivityStreamingHeader({
   // Reply text is not a status: label the header from the work steps only.
   const work = steps.filter((s) => s.type !== "response");
   const activeStep = work.find((s) => s.status === "active") ?? work[0];
-  const headerText = `${
-    activeStep?.label ?? `${name ?? defaultName} is ${verb.toLowerCase()}...`
-  }${startedAt ? ` (${formatActivityElapsed(elapsed)})` : ""}`;
+  const headerText =
+    activeStep?.label ?? `${name ?? defaultName} is ${verb.toLowerCase()}...`;
   return (
     <div className="flex items-center gap-2 text-muted-foreground text-sm">
       <Spinner size="sm" />
-      <Shimmer as="span" duration={2.5} spread={1.5}>
-        {headerText}
-      </Shimmer>
+      <span>
+        <Shimmer as="span" duration={2.5} spread={1.5}>
+          {headerText}
+        </Shimmer>
+        {/* Outside the shimmer: it takes a string, and the clock rolls. */}
+        {startedAt ? (
+          <>
+            {" ("}
+            <RollingNumber value={formatActivityElapsed(elapsed)} />
+            {")"}
+          </>
+        ) : null}
+      </span>
     </div>
   );
 });

package/src/ai-elements/context.tsx

@@ -11,6 +11,9 @@ import {
 } from "../ui/hover-card";
 import { Progress } from "../ui/progress";
 import { useCn } from "../ui/ui-config";
+import { m } from "motion/react";
+import { springTransition } from "../motion/presets";
+import { RollingNumber } from "../ui/rolling-number";
 
 const PERCENT_MAX = 100;
 const ICON_RADIUS = 10;
@@ -86,7 +89,7 @@ const ContextIcon = () => {
   const { usedTokens, maxTokens } = useContextValue();
   const circumference = 2 * Math.PI * ICON_RADIUS;
   const usedPercent = maxTokens > 0 ? usedTokens / maxTokens : 0;
-  const dashOffset = circumference * (1 - usedPercent);
+  const dashOffset = circumference * (1 - Math.min(usedPercent, 1));
 
   return (
     <svg
@@ -106,7 +109,7 @@ const ContextIcon = () => {
         stroke="currentColor"
         strokeWidth={ICON_STROKE_WIDTH}
       />
-      <circle
+      <m.circle
         cx={ICON_CENTER}
         cy={ICON_CENTER}
         fill="none"
@@ -114,7 +117,9 @@ const ContextIcon = () => {
         r={ICON_RADIUS}
         stroke="currentColor"
         strokeDasharray={`${circumference} ${circumference}`}
-        strokeDashoffset={dashOffset}
+        initial={false}
+        animate={{ strokeDashoffset: dashOffset }}
+        transition={springTransition}
         strokeLinecap="round"
         strokeWidth={ICON_STROKE_WIDTH}
         style={{ transform: "rotate(-90deg)", transformOrigin: "center" }}
@@ -137,9 +142,10 @@ export const ContextUsageTrigger = ({ children, ...props }: ContextUsageTriggerP
     <HoverCardTrigger asChild>
       {children ?? (
         <Button type="button" variant="ghost" size="sm" {...props}>
-          <span className="font-medium text-muted-foreground text-xs tabular-nums">
-            {renderedPercent}
-          </span>
+          <RollingNumber
+            value={renderedPercent}
+            className="font-medium text-muted-foreground text-xs"
+          />
           <ContextIcon />
         </Button>
       )}
@@ -188,9 +194,9 @@ export const ContextUsageContentHeader = ({
       {children ?? (
         <>
           <div className="flex items-center justify-between gap-3 text-xs tabular-nums">
-            <p>{displayPct}</p>
+            <RollingNumber value={displayPct} />
             <p className="font-mono text-muted-foreground">
-              {used} / {total}
+              <RollingNumber value={used} /> / {total}
             </p>
           </div>
           <div className="space-y-2">
@@ -251,9 +257,10 @@ export const ContextUsageContentFooter = ({
       {children ?? (
         <>
           <span className="text-muted-foreground">Total cost</span>
-          <span className="font-mono tabular-nums">
-            {totalCost === undefined ? "—" : formatUSD(totalCost)}
-          </span>
+          <RollingNumber
+            value={totalCost === undefined ? "—" : formatUSD(totalCost)}
+            className="font-mono"
+          />
         </>
       )}
     </div>
@@ -279,12 +286,13 @@ const UsageRow = ({
       {...rest}
     >
       <span className="text-muted-foreground">{label}</span>
-      <span className="tabular-nums">
-        {formatTokens(tokens)}
+      <span className="inline-flex items-baseline">
+        <RollingNumber value={formatTokens(tokens)} />
         {costUSD !== undefined ? (
-          <span className="ml-2 font-mono text-muted-foreground">
-            {formatUSD(costUSD)}
-          </span>
+          <RollingNumber
+            value={formatUSD(costUSD)}
+            className="ml-2 font-mono text-muted-foreground"
+          />
         ) : null}
       </span>
     </div>

package/src/ai-elements/prompt-input.tsx

@@ -48,6 +48,7 @@ import {
   SelectValue,
 } from "../ui/radix-select";
 import { CrossfadeIconSlot } from "../ui/crossfade-icon";
+import { SendQueueIcon } from "../ui/send-queue-icon";
 import { Spinner } from "../ui/spinner";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { useCn, useUiConfig } from "../ui/ui-config";
@@ -929,6 +930,12 @@ export const PromptInputActionMenuItem = ({
 export type PromptInputSubmitProps = ComponentProps<typeof InputGroupButton> & {
   status?: ChatStatus;
   onStop?: () => void;
+  /**
+   * Set when a send would join a queue (the agent is still working). The send
+   * icon becomes `SendQueueIcon`: an up arrow that morphs into a stack of
+   * bars while `true`. Leave unset to keep `submitIcons.send`.
+   */
+  queued?: boolean;
 };
 export const PromptInputSubmit = ({
   className,
@@ -936,6 +943,7 @@ export const PromptInputSubmit = ({
   size = "icon-sm",
   status,
   onStop,
+  queued,
   onClick,
   children,
   ...props
@@ -948,7 +956,12 @@ export const PromptInputSubmit = ({
     status === "submitted" || status === "streaming" || status === "error"
       ? status
       : "send";
-  let Icon = icons?.send ?? <IconCornerDownLeft className="size-4" />;
+  let Icon =
+    queued === undefined ? (
+      (icons?.send ?? <IconCornerDownLeft className="size-4" />)
+    ) : (
+      <SendQueueIcon queued={queued} />
+    );
   if (status === "submitted") {
     Icon = icons?.submitted ?? <Spinner size="sm" />;
   } else if (status === "streaming") {

package/src/client.ts

@@ -34,6 +34,9 @@ export * from "./hooks";
 export { ErrorBoundary } from "./ui/error-boundary";
 export type { ErrorBoundaryProps } from "./ui/error-boundary";
 export { CountPop, countLabel, UnreadDot } from "./ui/count-pop";
+export { RollingNumber } from "./ui/rolling-number";
+export { ConfettiBurst } from "./ui/confetti-burst";
+export { SendQueueIcon } from "./ui/send-queue-icon";
 export { MarqueeOnHover } from "./ui/marquee-on-hover";
 export { RelativeDateTime } from "./ui/relative-date-time";
 export type { RelativeDateTimeProps } from "./ui/relative-date-time";

package/src/index.ts

@@ -30,6 +30,9 @@ export * from "./hooks";
 export { ErrorBoundary } from "./ui/error-boundary";
 export type { ErrorBoundaryProps } from "./ui/error-boundary";
 export { CountPop, countLabel, UnreadDot } from "./ui/count-pop";
+export { RollingNumber } from "./ui/rolling-number";
+export { ConfettiBurst } from "./ui/confetti-burst";
+export { SendQueueIcon } from "./ui/send-queue-icon";
 export { MarqueeOnHover } from "./ui/marquee-on-hover";
 export { RelativeDateTime } from "./ui/relative-date-time";
 export type { RelativeDateTimeProps } from "./ui/relative-date-time";

package/src/markdown/Markdown.tsx

@@ -23,6 +23,7 @@ import { copyMarkdownSelection } from "./markdownClipboard";
 import { rehypeGithubAlerts } from "./rehypeGithubAlerts";
 // The math plugin renders KaTeX markup but ships no stylesheet with it.
 import "katex/dist/katex.min.css";
+import { useSmoothText } from "./useSmoothText";
 
 const PLUGINS = { cjk, code, math, mermaid: mermaidPlugin };
 
@@ -69,6 +70,11 @@ export type MarkdownProps = Omit<
   "plugins" | "rehypePlugins" | "parseMarkdownIntoBlocksFn"
 > & {
   children: string;
+  /**
+   * With `mode="streaming"`, ease text that arrives in bursts onto the screen
+   * (`useSmoothText`). Default `true`; `false` shows each chunk as it lands.
+   */
+  smooth?: boolean;
 };
 
 /**
@@ -84,9 +90,11 @@ export const Markdown = memo(function Markdown({
   components,
   remarkPlugins,
   children,
+  smooth = true,
   ...props
 }: MarkdownProps) {
   const merge = useCn();
+  const text = useSmoothText(children, smooth && props.mode === "streaming");
   return (
     <div className="contents" onCopy={copyMarkdownSelection}>
       <Streamdown
@@ -105,7 +113,7 @@ export const Markdown = memo(function Markdown({
         parseMarkdownIntoBlocksFn={parseMarkdownIntoBlocksIncremental}
         {...props}
       >
-        {children}
+        {text}
       </Streamdown>
     </div>
   );

package/src/markdown/index.ts

@@ -1,3 +1,4 @@
 export { Markdown } from "./Markdown";
 export type { MarkdownProps } from "./Markdown";
 export { MarkdownLink } from "./MarkdownLink";
+export { useSmoothText } from "./useSmoothText";

package/src/markdown/useSmoothText.ts

@@ -0,0 +1,36 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Share of the unshown text revealed on each frame. A burst of 400 characters
+ * plays out over about half a second; a trickle shows as it arrives.
+ */
+const REVEAL_PER_FRAME = 0.08;
+
+/**
+ * Eases `target` onto the screen while `live` is true, so text that arrives in
+ * bursts reads as a steady stream. Text already present on mount shows at
+ * once, so a reload or a settled message never replays. When `live` turns
+ * false the full text shows at once.
+ */
+export function useSmoothText(target: string, live: boolean): string {
+  const [length, setLength] = useState(target.length);
+  const lengthRef = useRef(target.length);
+
+  useEffect(() => {
+    if (!live) return;
+    // A rewrite can shorten the text; never point past its end.
+    lengthRef.current = Math.min(lengthRef.current, target.length);
+    let frame = 0;
+    function tick() {
+      const remaining = target.length - lengthRef.current;
+      if (remaining <= 0) return;
+      lengthRef.current += Math.max(1, Math.ceil(remaining * REVEAL_PER_FRAME));
+      setLength(lengthRef.current);
+      frame = requestAnimationFrame(tick);
+    }
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [target, live]);
+
+  return live ? target.slice(0, length) : target;
+}

package/src/ui/confetti-burst.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+
+const PIECE_COUNT = 90;
+const DURATION_MS = 1800;
+/** The last share of the burst fades out instead of cutting. */
+const FADE_FROM = 0.65;
+const GRAVITY = 0.32;
+const DRAG = 0.985;
+/** Theme chart colours (RGB triplets), so the burst follows the accent. */
+const DEFAULT_COLOR_VARS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"];
+const FALLBACK_COLOR = "rgb(120 120 120)";
+
+interface Piece {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  angle: number;
+  spin: number;
+  flutter: number;
+  width: number;
+  height: number;
+  color: string;
+}
+
+function resolveColors(colors: readonly string[] | undefined): string[] {
+  if (colors && colors.length > 0) return [...colors];
+  const style = getComputedStyle(document.documentElement);
+  const fromTheme = DEFAULT_COLOR_VARS.map((name) => style.getPropertyValue(name).trim())
+    .filter((value) => value.length > 0)
+    .map((value) => `rgb(${value})`);
+  return fromTheme.length > 0 ? fromTheme : [FALLBACK_COLOR];
+}
+
+function spawnPieces(originX: number, originY: number, colors: string[]): Piece[] {
+  return Array.from({ length: PIECE_COUNT }, (_, index) => {
+    // A fan pointing down and out of the anchor, wider than it is deep.
+    const angle = Math.PI / 2 + (Math.random() - 0.5) * Math.PI * 0.9;
+    const speed = 6 + Math.random() * 9;
+    return {
+      x: originX,
+      y: originY,
+      vx: Math.cos(angle) * speed,
+      vy: Math.sin(angle) * speed * 0.6 - 4,
+      angle: Math.random() * Math.PI * 2,
+      spin: (Math.random() - 0.5) * 0.4,
+      flutter: Math.random() * Math.PI * 2,
+      width: 5 + Math.random() * 5,
+      height: 8 + Math.random() * 6,
+      color: colors[index % colors.length] ?? FALLBACK_COLOR,
+    };
+  });
+}
+
+/**
+ * One confetti burst from the bottom centre of `anchor`, drawn on a
+ * full-window canvas that ignores the pointer. Calls `onDone` when the last
+ * piece has faded, so the caller can unmount it.
+ *
+ * Keep it for rare moments (a merge, a first success): delight should grow as
+ * frequency falls. Key it by a counter to replay. `colors` defaults to the
+ * theme's `--chart-1` … `--chart-5`.
+ */
+export function ConfettiBurst({
+  anchor,
+  onDone,
+  colors,
+}: {
+  anchor: HTMLElement;
+  onDone: () => void;
+  colors?: readonly string[];
+}) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext("2d");
+    if (!canvas || !context) return;
+    const ratio = window.devicePixelRatio || 1;
+    canvas.width = window.innerWidth * ratio;
+    canvas.height = window.innerHeight * ratio;
+    context.scale(ratio, ratio);
+
+    const rect = anchor.getBoundingClientRect();
+    const pieces = spawnPieces(rect.left + rect.width / 2, rect.bottom, resolveColors(colors));
+    const start = performance.now();
+    let frame = 0;
+
+    function draw(now: number) {
+      if (!context) return;
+      const progress = (now - start) / DURATION_MS;
+      if (progress >= 1) {
+        onDone();
+        return;
+      }
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      context.globalAlpha = progress < FADE_FROM ? 1 : 1 - (progress - FADE_FROM) / (1 - FADE_FROM);
+      for (const piece of pieces) {
+        piece.vx *= DRAG;
+        piece.vy = piece.vy * DRAG + GRAVITY;
+        piece.x += piece.vx;
+        piece.y += piece.vy;
+        piece.angle += piece.spin;
+        piece.flutter += 0.2;
+        context.save();
+        context.translate(piece.x, piece.y);
+        context.rotate(piece.angle);
+        // Squash on one axis so each piece seems to turn over as it falls.
+        context.scale(1, Math.cos(piece.flutter));
+        context.fillStyle = piece.color;
+        context.fillRect(-piece.width / 2, -piece.height / 2, piece.width, piece.height);
+        context.restore();
+      }
+      frame = requestAnimationFrame(draw);
+    }
+
+    frame = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(frame);
+  }, [anchor, onDone, colors]);
+
+  return createPortal(
+    <canvas
+      ref={canvasRef}
+      aria-hidden
+      data-testid="confetti-burst"
+      className="pointer-events-none fixed inset-0 z-50 size-full"
+    />,
+    document.body,
+  );
+}

package/src/ui/confirm-dialog-parts.tsx

@@ -17,9 +17,25 @@ import {
   DialogTitle,
 } from "./dialog";
 import { Input } from "./input";
+import { useUiConfig } from "./ui-config";
 
 export type ConfirmDialogSize = "default" | "sm" | "md";
 
+/**
+ * App-wide classes for the confirm dialog parts, merged after each part's
+ * size classes (so an app can tighten `md`'s padding or widen its content).
+ */
+export interface ConfirmDialogConfig {
+  classes?: {
+    content?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+  };
+}
+
 type ConfirmDialogContextValue = {
   size: ConfirmDialogSize;
   alert: boolean;
@@ -133,8 +149,9 @@ export type ConfirmDialogContentProps = React.ComponentProps<typeof DialogConten
 /** Alert or plain dialog content (from Root `alert`); `sm` and `md` cap the width. */
 function Content({ className, ...props }: ConfirmDialogContentProps) {
   const { size, alert } = useConfirmDialog();
+  const extra = useUiConfig("ConfirmDialog")?.classes?.content;
   const Comp = alert ? AlertDialogContent : DialogContent;
-  return <Comp {...props} className={cn(size !== "default" && "sm:max-w-96", className)} />;
+  return <Comp {...props} className={cn(size !== "default" && "sm:max-w-96", extra, className)} />;
 }
 Content.displayName = "ConfirmDialog.Content";
 
@@ -142,7 +159,8 @@ export type ConfirmDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 function Header({ className, ...props }: ConfirmDialogHeaderProps) {
   const { size } = useConfirmDialog();
-  return <DialogHeader {...props} className={cn(size === "md" && "pb-4", className)} />;
+  const extra = useUiConfig("ConfirmDialog")?.classes?.header;
+  return <DialogHeader {...props} className={cn(size === "md" && "pb-4", extra, className)} />;
 }
 Header.displayName = "ConfirmDialog.Header";
 
@@ -150,7 +168,8 @@ export type ConfirmDialogTitleProps = React.ComponentProps<typeof DialogTitle>;
 
 function Title({ className, ...props }: ConfirmDialogTitleProps) {
   const { size } = useConfirmDialog();
-  return <DialogTitle {...props} className={cn(size === "sm" && "mb-2 text-sm font-medium", className)} />;
+  const extra = useUiConfig("ConfirmDialog")?.classes?.title;
+  return <DialogTitle {...props} className={cn(size === "sm" && "mb-2 text-sm font-medium", extra, className)} />;
 }
 Title.displayName = "ConfirmDialog.Title";
 
@@ -158,12 +177,14 @@ export type ConfirmDialogDescriptionProps = React.ComponentProps<typeof DialogDe
 
 function Description({ className, ...props }: ConfirmDialogDescriptionProps) {
   const { size } = useConfirmDialog();
+  const extra = useUiConfig("ConfirmDialog")?.classes?.description;
   return (
     <DialogDescription
       {...props}
       className={cn(
         size === "sm" && "mb-4 text-sm text-muted-foreground",
         size === "md" && "py-6 text-muted-foreground",
+        extra,
         className,
       )}
     />
@@ -174,9 +195,10 @@ Description.displayName = "ConfirmDialog.Description";
 
 export type ConfirmDialogBodyProps = React.ComponentProps<"div">;
 
-/** Plain `<div>` for extra content. No default classes. */
-function Body(props: ConfirmDialogBodyProps) {
-  return <div {...props} />;
+/** Plain `<div>` for extra content. No default classes (`UiConfig.ConfirmDialog.classes.body` if set). */
+function Body({ className, ...props }: ConfirmDialogBodyProps) {
+  const extra = useUiConfig("ConfirmDialog")?.classes?.body;
+  return <div {...props} className={cn(extra, className) || undefined} />;
 }
 Body.displayName = "ConfirmDialog.Body";
 
@@ -194,11 +216,12 @@ export type ConfirmDialogFooterProps = React.HTMLAttributes<HTMLDivElement> & {
 
 function Footer({ row = false, className, ...props }: ConfirmDialogFooterProps) {
   const { size } = useConfirmDialog();
-  if (size === "sm") return <div {...props} className={cn("flex justify-end gap-2", className)} />;
+  const extra = useUiConfig("ConfirmDialog")?.classes?.footer;
+  if (size === "sm") return <div {...props} className={cn("flex justify-end gap-2", extra, className)} />;
   return (
     <DialogFooter
       {...props}
-      className={cn(size === "md" && "pt-4", row && "justify-end flex-row!", className)}
+      className={cn(size === "md" && "pt-4", row && "justify-end flex-row!", extra, className)}
     />
   );
 }

package/src/ui/confirm-dialog.tsx

@@ -6,6 +6,7 @@ export type {
   ConfirmDialogActionProps,
   ConfirmDialogBodyProps,
   ConfirmDialogCancelProps,
+  ConfirmDialogConfig,
   ConfirmDialogContentProps,
   ConfirmDialogDescriptionProps,
   ConfirmDialogFieldProps,
@@ -20,6 +21,13 @@ export type ConfirmDialogProps = Omit<
   ConfirmDialogRootProps,
   "size" | "alert" | "pending" | "confirmPhrase"
 > & {
+  /**
+   * While `true`, the confirm button shows a spinner beside `confirmLabel`,
+   * Cancel is disabled and close requests wait (see `ConfirmDialog.Root`).
+   */
+  pending?: boolean;
+  /** Extra content after the description, inside the dialog. `children` stays outside (for a trigger). */
+  body?: React.ReactNode;
   title: React.ReactNode;
   description?: React.ReactNode;
   /** Legacy (still supported): compose `ConfirmDialog.Cancel` instead. */
@@ -53,6 +61,8 @@ function LegacyConfirmDialog({
   variant = "default",
   confirmDisabled,
   size = "default",
+  pending,
+  body,
   children,
   ...props
 }: ConfirmDialogProps) {
@@ -60,7 +70,7 @@ function LegacyConfirmDialog({
   const descriptionNode =
     description != null ? <Parts.Description>{description}</Parts.Description> : null;
   return (
-    <Parts.Root {...props} size={size}>
+    <Parts.Root {...props} size={size} pending={pending}>
       {children}
       <Parts.Content>
         {size === "sm" ? (
@@ -79,12 +89,18 @@ function LegacyConfirmDialog({
             {descriptionNode}
           </Parts.Header>
         )}
+        {body != null ? <Parts.Body>{body}</Parts.Body> : null}
         <Parts.Footer>
           {/* The alert cancel passes the click event on; sm and md call onCancel bare. */}
           <Parts.Cancel onClick={size === "default" ? onCancel : () => onCancel?.()}>
             {cancelLabel}
           </Parts.Cancel>
-          <Parts.Action variant={variant} disabled={confirmDisabled} onClick={onConfirm}>
+          <Parts.Action
+            variant={variant}
+            disabled={confirmDisabled}
+            onClick={onConfirm}
+            pendingLabel={confirmLabel}
+          >
             {confirmLabel}
           </Parts.Action>
         </Parts.Footer>

package/src/ui/empty-state.tsx

@@ -1,34 +1,102 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { m, type Variants } from "motion/react";
+import { motionEase } from "../motion/presets";
+import { useUiConfig } from "./ui-config";
 import { cn } from "../utils/cn";
 
 // `default`: open centred block, large bare icon, one muted line (a page or list body).
 // `panel`: filled rounded block with the icon in a tile (a detail panel or modal section).
 export type EmptyStateVariant = "default" | "panel";
 
-const EmptyStateContext = React.createContext<EmptyStateVariant>("default");
+/**
+ * App-wide look for `EmptyState`. `classes` merge after each part's built-in
+ * classes. `classes.iconWrap` puts the `default` icon in a wrapper (a circle,
+ * say) and drops the icon's own margin. `enter` turns on the staggered
+ * entrance for every Root that does not set `enter` itself.
+ */
+export interface EmptyStateConfig {
+  classes?: {
+    root?: string;
+    iconWrap?: string;
+    icon?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+  };
+  enter?: boolean;
+}
+
+const EmptyStateContext = React.createContext<{ variant: EmptyStateVariant; enter: boolean }>({
+  variant: "default",
+  enter: false,
+});
+
+const CONTAINER_VARIANTS: Variants = {
+  hidden: {},
+  show: { transition: { staggerChildren: 0.04 } },
+};
+
+const ITEM_VARIANTS: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.22, ease: motionEase } },
+};
 
 export type EmptyStateRootProps = React.ComponentProps<"div"> & {
   /** Layout for the other parts. Default `"default"`. */
   variant?: EmptyStateVariant;
+  /**
+   * Parts rise and fade in one after another. Default `UiConfig.EmptyState.enter`,
+   * else `false`. Pass `false` for an empty state that flashes often (a filter
+   * with no results). Uses `m`, so it needs `LazyMotion`.
+   */
+  enter?: boolean;
 };
 
-function Root({ variant = "default", className, ...props }: EmptyStateRootProps) {
+function Root({ variant = "default", enter: enterProp, className, ...props }: EmptyStateRootProps) {
+  const config = useUiConfig("EmptyState");
+  const enter = enterProp ?? config?.enter ?? false;
+  const classes = cn(
+    "flex flex-col items-center justify-center text-center",
+    variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
+    config?.classes?.root,
+    className,
+  );
   return (
-    <EmptyStateContext value={variant}>
-      <div
-        {...props}
-        className={cn(
-          "flex flex-col items-center justify-center text-center",
-          variant === "panel" ? "rounded-lg bg-surface-secondary px-4 py-10" : "px-4 py-20",
-          className,
-        )}
-      />
+    <EmptyStateContext value={{ variant, enter }}>
+      {enter ? (
+        <m.div
+          {...stripMotionConflicts(props)}
+          className={classes}
+          variants={CONTAINER_VARIANTS}
+          initial="hidden"
+          animate="show"
+        />
+      ) : (
+        <div {...props} className={classes} />
+      )}
     </EmptyStateContext>
   );
 }
 Root.displayName = "EmptyState.Root";
 
+// The DOM drag and animation handlers clash with Motion's own prop types.
+function stripMotionConflicts(props: React.ComponentProps<"div">) {
+  const {
+    onDrag: _onDrag,
+    onDragStart: _onDragStart,
+    onDragEnd: _onDragEnd,
+    onAnimationStart: _onAnimationStart,
+    ...rest
+  } = props;
+  return rest;
+}
+
+/** A part's own element: `m.*` with the item variants while the Root enters. */
+function useItemMotion() {
+  return React.use(EmptyStateContext).enter ? { variants: ITEM_VARIANTS } : null;
+}
+
 export type EmptyStateIconProps = {
   /** Icon component, e.g. a Tabler icon. */
   icon: React.ComponentType<{ size?: number | string; stroke?: number | string; className?: string }>;
@@ -41,25 +109,43 @@ export type EmptyStateIconProps = {
 };
 
 function Icon({ icon: IconComponent, size, stroke, className }: EmptyStateIconProps) {
-  if (React.use(EmptyStateContext) === "panel") {
-    return (
-      <div
-        className={cn(
-          "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
-          className,
-        )}
-      >
-        <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />
-      </div>
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  if (variant === "panel") {
+    const tileClass = cn(
+      "mb-3 flex h-11 w-11 items-center justify-center rounded-lg bg-surface-tertiary",
+      className,
+    );
+    const glyph = <IconComponent size={size ?? 22} className="text-muted-foreground" stroke={stroke ?? 1.5} />;
+    return itemMotion ? (
+      <m.div {...itemMotion} className={tileClass}>
+        {glyph}
+      </m.div>
+    ) : (
+      <div className={tileClass}>{glyph}</div>
     );
   }
-  return (
+  const wrapClass = config?.classes?.iconWrap;
+  if (wrapClass !== undefined) {
+    const glyph = <IconComponent size={size ?? 40} stroke={stroke} className={config?.classes?.icon} />;
+    const outer = cn(wrapClass, className);
+    return itemMotion ? (
+      <m.div {...itemMotion} className={outer}>
+        {glyph}
+      </m.div>
+    ) : (
+      <div className={outer}>{glyph}</div>
+    );
+  }
+  const glyph = (
     <IconComponent
       size={size ?? 40}
       stroke={stroke}
-      className={cn("mb-3 text-muted-foreground", className)}
+      className={cn("mb-3 text-muted-foreground", config?.classes?.icon, className)}
     />
   );
+  return itemMotion ? <m.div {...itemMotion}>{glyph}</m.div> : glyph;
 }
 Icon.displayName = "EmptyState.Icon";
 
@@ -69,40 +155,57 @@ export type EmptyStateTitleProps = React.ComponentProps<"p"> & {
 };
 
 function Title({ asChild = false, className, ...props }: EmptyStateTitleProps) {
-  const Comp = asChild ? Slot : "p";
-  return (
-    <Comp
-      {...props}
-      className={cn(
-        "text-sm font-medium text-foreground",
-        React.use(EmptyStateContext) === "default" && "mb-1",
-        className,
-      )}
-    />
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn(
+    "text-sm font-medium text-foreground",
+    variant === "default" && "mb-1",
+    config?.classes?.title,
+    className,
   );
+  if (asChild) return <Slot {...props} className={classes} />;
+  if (itemMotion) return <m.p {...stripPConflicts(props)} {...itemMotion} className={classes} />;
+  return <p {...props} className={classes} />;
 }
 Title.displayName = "EmptyState.Title";
 
+function stripPConflicts(props: React.ComponentProps<"p">) {
+  const {
+    onDrag: _onDrag,
+    onDragStart: _onDragStart,
+    onDragEnd: _onDragEnd,
+    onAnimationStart: _onAnimationStart,
+    ...rest
+  } = props;
+  return rest;
+}
+
 export type EmptyStateDescriptionProps = React.ComponentProps<"p">;
 
 function Description({ className, ...props }: EmptyStateDescriptionProps) {
-  return (
-    <p
-      {...props}
-      className={cn(
-        React.use(EmptyStateContext) === "panel" && "mt-1 max-w-[240px]",
-        "text-sm text-muted-foreground",
-        className,
-      )}
-    />
+  const { variant } = React.use(EmptyStateContext);
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn(
+    variant === "panel" && "mt-1 max-w-[240px]",
+    "text-sm text-muted-foreground",
+    config?.classes?.description,
+    className,
   );
+  if (itemMotion) return <m.p {...stripPConflicts(props)} {...itemMotion} className={classes} />;
+  return <p {...props} className={classes} />;
 }
 Description.displayName = "EmptyState.Description";
 
 export type EmptyStateActionsProps = React.ComponentProps<"div">;
 
 function Actions({ className, ...props }: EmptyStateActionsProps) {
-  return <div {...props} className={cn("mt-4", className)} />;
+  const config = useUiConfig("EmptyState");
+  const itemMotion = useItemMotion();
+  const classes = cn("mt-4", config?.classes?.actions, className);
+  if (itemMotion) return <m.div {...stripMotionConflicts(props)} {...itemMotion} className={classes} />;
+  return <div {...props} className={classes} />;
 }
 Actions.displayName = "EmptyState.Actions";
 

package/src/ui/rolling-number.tsx

@@ -0,0 +1,62 @@
+import { m } from "motion/react";
+import { springTransition } from "../motion/presets";
+import { useCn } from "./ui-config";
+
+const DIGITS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"] as const;
+
+function isDigit(char: string): boolean {
+  return char >= "0" && char <= "9";
+}
+
+/**
+ * Shows an already formatted value ("1m 05s", "42%", "$1.20") and rolls each
+ * digit to its new value instead of jumping. Use it for numbers that tick
+ * while the user watches (timers, meters, running totals). `CountPop` is for a
+ * badge that changes while the user looks elsewhere.
+ *
+ * Format the value first: only the characters it gets are animated. Columns
+ * are keyed from the right, so "9s" → "10s" rolls the units column and mounts
+ * only the new tens column. Uses `m`, so the app must render it inside
+ * `LazyMotion`.
+ */
+export function RollingNumber({ value, className }: { value: string; className?: string }) {
+  const cn = useCn();
+  const chars = [...value];
+  return (
+    <span className={cn("inline-flex tabular-nums", className)}>
+      <span className="sr-only">{value}</span>
+      {chars.map((char, index) => {
+        const key = chars.length - index;
+        return isDigit(char) ? (
+          <DigitColumn key={key} digit={Number(char)} />
+        ) : (
+          <span key={key} aria-hidden className="whitespace-pre">
+            {char}
+          </span>
+        );
+      })}
+    </span>
+  );
+}
+
+function DigitColumn({ digit }: { digit: number }) {
+  return (
+    <span aria-hidden className="relative inline-block h-[1lh] overflow-hidden">
+      {/* Holds the width of one digit; the moving column is absolute. */}
+      <span className="invisible">0</span>
+      <m.span
+        className="absolute inset-x-0 top-0 flex flex-col"
+        initial={false}
+        // The column is ten rows tall, so one row is 10% of its height.
+        animate={{ y: `${-digit * 10}%` }}
+        transition={springTransition}
+      >
+        {DIGITS.map((d) => (
+          <span key={d} className="h-[1lh]">
+            {d}
+          </span>
+        ))}
+      </m.span>
+    </span>
+  );
+}

package/src/ui/send-queue-icon.tsx

@@ -0,0 +1,55 @@
+import { m } from "motion/react";
+import { springTransition } from "../motion/presets";
+
+interface Segment {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+type Shape = readonly [Segment, Segment, Segment];
+
+// Both shapes use the same three lines, so the arrow's own strokes move into
+// the queue bars instead of one icon fading out and another fading in.
+// Arrow points match Tabler's `IconArrowUp` on its 24px grid.
+const ARROW: Shape = [
+  { x1: 6, y1: 11, x2: 12, y2: 5 },
+  { x1: 12, y1: 5, x2: 12, y2: 19 },
+  { x1: 18, y1: 11, x2: 12, y2: 5 },
+];
+
+const QUEUE: Shape = [
+  { x1: 5, y1: 7, x2: 19, y2: 7 },
+  { x1: 5, y1: 12, x2: 19, y2: 12 },
+  { x1: 19, y1: 17, x2: 5, y2: 17 },
+];
+
+/**
+ * A send arrow that turns into a stack of bars when `queued`: while the agent
+ * works, a send joins the queue. Line N of the arrow becomes line N of the
+ * stack. Uses `m`, so the app must render it inside `LazyMotion`.
+ */
+export function SendQueueIcon({ queued, className = "size-4" }: { queued: boolean; className?: string }) {
+  const shape = queued ? QUEUE : ARROW;
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      className={className}
+      aria-hidden
+    >
+      {shape.map((segment, index) => (
+        <m.line
+          key={index}
+          initial={false}
+          animate={{ x1: segment.x1, y1: segment.y1, x2: segment.x2, y2: segment.y2 }}
+          transition={springTransition}
+        />
+      ))}
+    </svg>
+  );
+}

package/src/ui/sonner-icons.tsx

@@ -8,7 +8,7 @@ function InfoIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-primary"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -22,7 +22,7 @@ function SuccessIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-success"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -36,7 +36,7 @@ function WarningIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-warning"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -54,7 +54,7 @@ function ErrorIcon() {
     <svg
       aria-hidden="true"
       className="h-6 w-6 fill-current text-destructive"
-      fill="none"
+      fill="currentColor"
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
     >

package/src/ui/ui-config.tsx

@@ -45,6 +45,8 @@ import type { SettingsSectionConfig } from "../../app/src/settings/SettingsSecti
 import type { ShimmerConfig } from "../ai-elements/shimmer";
 import type { SliderConfig } from "./slider";
 import type { SonnerToasterConfig } from "./sonner";
+import type { ConfirmDialogConfig } from "./confirm-dialog-parts";
+import type { EmptyStateConfig } from "./empty-state";
 import type { StatusDotConfig } from "./status-dot";
 import type { SwitchConfig } from "./switch";
 import type { TableConfig } from "./table";
@@ -93,6 +95,8 @@ export interface UiConfig {
   ContextMenu?: ContextMenuConfig;
   Conversation?: ConversationConfig;
   Dialog?: DialogConfig;
+  ConfirmDialog?: ConfirmDialogConfig;
+  EmptyState?: EmptyStateConfig;
   DropdownMenu?: DropdownMenuConfig;
   Gantt?: GanttConfig;
   HoverCard?: HoverCardConfig;

package/tokens/src/native.ts

@@ -1,17 +1,18 @@
 /**
- * JS tokens for React Native. Values match `tokens.css`
- * (oklch neutrals → hex, 1rem = 16).
+ * JS tokens for React Native. The neutrals and radii match `tokens.css`
+ * (oklch → sRGB hex, 1rem = 16). `fill`, `hairline` and `radius.card` are
+ * native chrome with no web token.
  */
 export const tokens = {
   color: {
-    background: { light: "#f6f6f6", dark: "#1f1f1f" },
-    foreground: { light: "#242426", dark: "#fafafa" },
-    muted: { light: "#737373", dark: "#b3b3b3" },
-    border: { light: "#e5e5e5", dark: "#474747" },
-    surface: { light: "#ffffff", dark: "#242426" },
-    surfaceSecondary: { light: "#f2f2f2", dark: "#2a2a2c" },
-    surfaceCard: { light: "#fafafa", dark: "#2a2a2c" },
-    separator: { light: "#ebebeb", dark: "#404040" },
+    background: { light: "#f5f5f5", dark: "#060606" },
+    foreground: { light: "#181818", dark: "#fcfcfc" },
+    muted: { light: "#727272", dark: "#a0a0a0" },
+    border: { light: "#dedede", dark: "#292929" },
+    surface: { light: "#ffffff", dark: "#181818" },
+    surfaceSecondary: { light: "#efefef", dark: "#242323" },
+    surfaceCard: { light: "#f8f8f8", dark: "#242323" },
+    separator: { light: "#e4e4e4", dark: "#222222" },
     white: "#ffffff",
     black: "#000000",
     hairline: {
@@ -20,12 +21,12 @@ export const tokens = {
     },
     fill: {
       light: "rgba(255, 255, 255, 0.86)",
-      dark: "rgba(28, 28, 30, 0.88)",
+      dark: "rgba(24, 24, 24, 0.88)",
     },
   },
   radius: {
     lg: 16,
-    field: 20,
+    field: 10,
     md: 14,
     sm: 12,
     card: 24,