@vvedantb/ui 0.29.1 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.29.1",
+  "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",
@@ -72,17 +72,6 @@
     "./src/marketing/landing.css",
     "./fonts/instrument-sans.css"
   ],
-  "scripts": {
-    "check:tokens": "node tokens/scripts/check-component-tokens.mjs",
-    "build": "node tokens/scripts/check-exports.mjs && node tokens/scripts/check-component-tokens.mjs && tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.consumer.json && tsc -p tsconfig.consumer-speech.json && tsc -p tokens/tsconfig.json",
-    "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs app/tests-node/*.test.mjs",
-    "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
-    "analyze": "node tokens/verify/analyze.mjs",
-    "brand:assets": "node scripts/build-brand-assets.mjs",
-    "brand:sheet": "node scripts/build-brand-sheet.mjs",
-    "prepack": "node tokens/scripts/check-exports.mjs"
-  },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
@@ -172,7 +161,6 @@
     "@tanstack/react-hotkeys": "^0.13.0",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
-    "@vvedantb/server": "workspace:*",
     "ai": "^5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -196,7 +184,8 @@
     "vaul": "^1.1.0",
     "vitest": "^3.2.0",
     "zod": "^4.0.0",
-    "zod3": "npm:zod@^3.25.76"
+    "zod3": "npm:zod@^3.25.76",
+    "@vvedantb/server": "0.10.0"
   },
   "peerDependenciesMeta": {
     "@clerk/clerk-react": {
@@ -217,5 +206,15 @@
     "@vvedantb/server": {
       "optional": true
     }
+  },
+  "scripts": {
+    "check:tokens": "node tokens/scripts/check-component-tokens.mjs",
+    "build": "node tokens/scripts/check-exports.mjs && node tokens/scripts/check-component-tokens.mjs && tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.consumer.json && tsc -p tsconfig.consumer-speech.json && tsc -p tokens/tsconfig.json",
+    "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs app/tests-node/*.test.mjs",
+    "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
+    "analyze": "node tokens/verify/analyze.mjs",
+    "brand:assets": "node scripts/build-brand-assets.mjs",
+    "brand:sheet": "node scripts/build-brand-sheet.mjs"
   }
-}
+}

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>