@vvedantb/ui 0.29.1 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.29.1",
+  "version": "0.30.1",
   "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

@@ -33,7 +33,16 @@ export { restoreModalScrollLock } from "./ui/overlay-a11y";
 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 { CountPop, countLabel, UnreadDot, CORNER_BADGE_CLASS, UnreadCornerBadge } from "./ui/count-pop";
+export { RollingNumber } from "./ui/rolling-number";
+export { ConfettiBurst } from "./ui/confetti-burst";
+export { SendQueueIcon } from "./ui/send-queue-icon";
+export { BulkActionBar } from "./ui/bulk-action-bar";
+export type { BulkActionBarProps, BulkBarAction } from "./ui/bulk-action-bar";
+export { CopyLinkMenuItem } from "./ui/copy-link-menu-item";
+export { ToggleSearch } from "./ui/toggle-search";
+export type { ToggleSearchProps, ToggleSearchVariant } from "./ui/toggle-search";
+export { MotionProvider } from "./motion/motion-provider";
 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

@@ -29,7 +29,16 @@ export { restoreModalScrollLock } from "./ui/overlay-a11y";
 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 { CountPop, countLabel, UnreadDot, CORNER_BADGE_CLASS, UnreadCornerBadge } from "./ui/count-pop";
+export { RollingNumber } from "./ui/rolling-number";
+export { ConfettiBurst } from "./ui/confetti-burst";
+export { SendQueueIcon } from "./ui/send-queue-icon";
+export { BulkActionBar } from "./ui/bulk-action-bar";
+export type { BulkActionBarProps, BulkBarAction } from "./ui/bulk-action-bar";
+export { CopyLinkMenuItem } from "./ui/copy-link-menu-item";
+export { ToggleSearch } from "./ui/toggle-search";
+export type { ToggleSearchProps, ToggleSearchVariant } from "./ui/toggle-search";
+export { MotionProvider } from "./motion/motion-provider";
 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/motion/motion-provider.tsx

@@ -0,0 +1,29 @@
+import { LazyMotion, MotionConfig, domMax, type FeatureBundle } from "motion/react";
+import type { ReactNode } from "react";
+
+/**
+ * The app-wide Motion setup that `m.*` components (in this package and the
+ * app) need: one lazy feature bundle under `strict`, so a stray `motion.*`
+ * import throws instead of pulling the full bundle into the entry chunk.
+ *
+ * `features` defaults to `domMax`, which includes layout animations
+ * (`layoutId` shared highlights); `domAnimation` is smaller if the app has
+ * none. Under `strict` a missing feature silently skips the animation.
+ * `reducedMotion` defaults to `"user"` (follow the OS setting); pass `"never"`
+ * to always animate.
+ */
+export function MotionProvider({
+  children,
+  features = domMax,
+  reducedMotion = "user",
+}: {
+  children: ReactNode;
+  features?: FeatureBundle;
+  reducedMotion?: "user" | "always" | "never";
+}) {
+  return (
+    <LazyMotion features={features} strict>
+      <MotionConfig reducedMotion={reducedMotion}>{children}</MotionConfig>
+    </LazyMotion>
+  );
+}

package/src/motion/panel-transition.tsx

@@ -36,3 +36,42 @@ export function PanelTransition({
     </ViewTransition>
   );
 }
+
+export interface ViewTransitionSuspenseProps {
+  fallback: ReactNode;
+  children: ReactNode;
+  /** View transition class on the content as it arrives. Default `vt-enter`. */
+  enter?: string;
+  /** View transition class on the fallback as it leaves. Default `vt-exit`. */
+  exit?: string;
+}
+
+/**
+ * `<Suspense>` whose fallback fades out as the content comes in, through React
+ * `<ViewTransition>`. Suspense reveals commit on retry lanes, which React
+ * animates even outside `startTransition`. Needs a React build that exports
+ * `ViewTransition`; the app supplies the `::view-transition-old(.vt-exit)` and
+ * `::view-transition-new(.vt-enter)` CSS. Routers that commit route changes
+ * synchronously (through `useSyncExternalStore`) do not animate here; use the
+ * router's own view transition for pages.
+ */
+export function ViewTransitionSuspense({
+  fallback,
+  children,
+  enter = "vt-enter",
+  exit = "vt-exit",
+}: ViewTransitionSuspenseProps) {
+  return (
+    <React.Suspense
+      fallback={
+        <ViewTransition default="none" exit={exit}>
+          {fallback}
+        </ViewTransition>
+      }
+    >
+      <ViewTransition default="none" enter={enter}>
+        {children}
+      </ViewTransition>
+    </React.Suspense>
+  );
+}

package/src/ui/bulk-action-bar.tsx

@@ -0,0 +1,229 @@
+import { m, AnimatePresence } from "motion/react";
+import { ConfirmSkipHint, skipConfirmTitle } from "../../app/src/confirm/ConfirmSkipHint";
+import { tokenTransition } from "../motion/presets";
+import { CountPop } from "./count-pop";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Separator } from "./separator";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { IconDots, IconX } from "@tabler/icons-react";
+import type { ComponentType } from "react";
+
+/**
+ * One control in the bar. The bar is deliberately dumb: each action carries the
+ * handler it should run, so confirm dialogs, Alt-to-skip and any per-surface
+ * bookkeeping stay with the caller that owns that state.
+ */
+export interface BulkBarAction {
+  key: string;
+  /** Full label used in the More menu and for accessibility. */
+  label: string;
+  /** Shorter label shown inline in the bar (defaults to `label`). */
+  shortLabel?: string;
+  icon: ComponentType<{ size: number; className?: string }>;
+  destructive?: boolean;
+  /** Shows the Alt-to-skip hint; the caller still owns the skip itself. */
+  showSkipHint?: boolean;
+  onClick: () => void;
+}
+
+export interface BulkActionBarProps {
+  isSelecting: boolean;
+  selectedCount: number;
+  totalCount: number;
+  onExitSelect: () => void;
+  onSelectAll: () => void;
+  onClearSelection: () => void;
+  primaryActions: ReadonlyArray<BulkBarAction>;
+  moreActions?: ReadonlyArray<BulkBarAction>;
+  destructiveAction?: BulkBarAction;
+  /** Motion key for the presence animation, e.g. "quick-tasks-bulk-bar". */
+  barKey: string;
+}
+
+/**
+ * A single labelled button inside the action bar. The label collapses to
+ * icon-only below the `sm` breakpoint (HeroUI "responsive labels" pattern).
+ */
+function BarButton({
+  action,
+  disabled,
+}: {
+  action: BulkBarAction;
+  disabled: boolean;
+}) {
+  const Icon = action.icon;
+  return (
+    <button
+      type="button"
+      aria-label={action.label}
+      title={
+        action.showSkipHint ? skipConfirmTitle(action.label) : action.label
+      }
+      onClick={action.onClick}
+      disabled={disabled}
+      // `motion-press`, not `transition-colors`: the destructive Delete takes
+      // this same branch, so the highest-consequence control in the bar was the
+      // one with no acknowledgement at all before its confirm dialog appeared.
+      className={`motion-press inline-flex h-9 shrink-0 items-center gap-1.5 rounded-lg px-2.5 text-sm font-medium active:scale-[0.96] disabled:pointer-events-none disabled:opacity-30 ${
+        action.destructive
+          ? "text-destructive hover:bg-destructive/10 hover:text-destructive"
+          : "text-muted-foreground hover:bg-surface-secondary hover:text-foreground"
+      }`}
+    >
+      <Icon size={17} />
+      <span className="hidden sm:inline">
+        {action.shortLabel ?? action.label}
+      </span>
+      {action.showSkipHint ? <ConfirmSkipHint /> : null}
+    </button>
+  );
+}
+
+/**
+ * The floating selection bar for any list with bulk actions. Render it inside
+ * a `relative` list container: it sits absolute at the bottom. It owns the shell only: presence
+ * motion, the count, select-all/clear, the primary buttons, the More menu and
+ * the destructive slot on the right. Behaviour arrives as `onClick` per action.
+ */
+export function BulkActionBar({
+  isSelecting,
+  selectedCount,
+  totalCount,
+  onExitSelect,
+  onSelectAll,
+  onClearSelection,
+  primaryActions,
+  moreActions,
+  destructiveAction,
+  barKey,
+}: BulkActionBarProps) {
+  const hasSelection = selectedCount > 0;
+  const allSelected = totalCount > 0 && selectedCount >= totalCount;
+
+  return (
+    <AnimatePresence initial={false}>
+      {isSelecting && (
+        <m.div
+          key={barKey}
+          className="absolute inset-x-0 bottom-3 z-20 flex justify-center px-4 pb-[env(safe-area-inset-bottom)]"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={tokenTransition.fast}
+        >
+          <TooltipProvider>
+            <div className="flex max-w-[calc(100vw-2rem)] items-center gap-1 overflow-x-auto rounded-surface bg-popover/95 px-2.5 py-2 backdrop-blur-md smooth-shadow-ring-lg scrollbar-none">
+              {/* Prefix: selection count */}
+              <div className="flex shrink-0 items-center gap-2 pl-1 pr-0.5">
+                <CountPop
+                  label={String(selectedCount)}
+                  className="rounded-md bg-surface-secondary px-2 py-0.5 text-xs font-semibold text-foreground tabular-nums"
+                />
+                <span className="hidden text-sm font-medium text-muted-foreground sm:inline">
+                  selected
+                </span>
+              </div>
+
+              {/* Reaching the whole list is the one action a selection bar can
+                  offer that the rows cannot: shift-clicking to the end of a
+                  long list is the alternative. */}
+              {totalCount > 0 && (
+                <button
+                  type="button"
+                  onClick={allSelected ? onClearSelection : onSelectAll}
+                  className="motion-press inline-flex h-9 shrink-0 items-center rounded-lg px-2 text-sm font-medium text-muted-foreground hover:bg-surface-secondary hover:text-foreground active:scale-[0.96]"
+                >
+                  {allSelected ? "Clear" : `Select all (${totalCount})`}
+                </button>
+              )}
+
+              <Separator
+                orientation="vertical"
+                className="mx-1.5 h-5 shrink-0 bg-border"
+              />
+
+              {/* Content: primary actions + More dropdown */}
+              {primaryActions.map((action) => (
+                <BarButton
+                  key={action.key}
+                  action={action}
+                  disabled={!hasSelection}
+                />
+              ))}
+
+              {moreActions && moreActions.length > 0 && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label="More actions"
+                      disabled={!hasSelection}
+                      className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-surface-secondary hover:text-foreground disabled:pointer-events-none disabled:opacity-30 data-[state=open]:bg-surface-secondary data-[state=open]:text-foreground"
+                    >
+                      <IconDots size={17} />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="center" side="top" sideOffset={8}>
+                    {moreActions.map((action) => {
+                      const Icon = action.icon;
+                      return (
+                        <DropdownMenuItem
+                          key={action.key}
+                          disabled={!hasSelection}
+                          onClick={action.onClick}
+                        >
+                          <Icon size={16} />
+                          {action.label}
+                        </DropdownMenuItem>
+                      );
+                    })}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+
+              {destructiveAction && (
+                <>
+                  <Separator
+                    orientation="vertical"
+                    className="mx-1.5 h-5 shrink-0 bg-border"
+                  />
+                  <BarButton
+                    action={destructiveAction}
+                    disabled={!hasSelection}
+                  />
+                </>
+              )}
+
+              <Separator
+                orientation="vertical"
+                className="mx-1.5 h-5 shrink-0 bg-border"
+              />
+
+              {/* Suffix: dismiss selection */}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    aria-label="Cancel selection"
+                    className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-surface-secondary hover:text-foreground"
+                    onClick={onExitSelect}
+                  >
+                    <IconX size={17} />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top" className="text-xs" sideOffset={8}>
+                  Cancel selection
+                </TooltipContent>
+              </Tooltip>
+            </div>
+          </TooltipProvider>
+        </m.div>
+      )}
+    </AnimatePresence>
+  );
+}