@vvedantb/ui 0.34.0 → 0.36.0

package/README.md

@@ -7,6 +7,8 @@ Shared React 19 web UI. Source-exported: no build step.
 | `@vvedantb/ui` | The main JavaScript entry. Primitives (Radix-based), AI elements, audio (`playChime`, `useReplyChime`, `playTone`), `toast` and `SonnerToaster`, the composer (`InputArea`, deprecated 0.3 `Composer`), shell (`SidebarHeader`, `SidebarUpgradeCard`, `PillTabs`, `SessionsHoverCard`, and the app shell: `AppShell`, `AppSidebar`, `SidebarRail`, `RailTile`, `SidebarPanel`, `SidebarAccountMenu`, `SignOutDialog` and related helpers), app helpers (confirm skip, update watcher, settings chrome, `useStableAuth`, and from 0.8.0 `createThemeProvider`, `createPageTitleContext`, `PageMotionProvider` and `formatCompactRelativeTime`), marketing pieces from 0.9.0 (`createLandingKit` and the `Landing*` parts, `SiteFooter`, `PricingModal`), animated nav icons from 0.11.0 (`MemoryIcon`, `BoardIcon`, ... and `NavIconBase`; `SettingsIcon` `variant` from 0.12.0), artifact viewers from 0.13.0 (`ArtifactFrame`, `ArtifactList`, `ArtifactViewer`, ...), date pickers from 0.14.0 (`Calendar`, `DatePicker`, `DateTimePicker`, `MonthPicker`), `cn`, and the native tokens `tokens` and `Tokens`. See `app/README.md` in the repository for the app helpers. |
 | `@vvedantb/ui/client` | The root without `@vvedantb/server`, convex or Clerk, for Chrome extensions (0.28.0). Leaves out the artifact viewers, `ConvexClerkProvider`, `useStableAuth`, `createUseStableAuth`, `resetStableAuthSession` and `useEnsureUser`. See [Chrome extensions](#chrome-extensions-0280). |
 | `@vvedantb/ui/brand` | App icons (`Icon*`, `APP_ICONS`), `AppWordmark`, deprecated `AppMark`, raw SVG strings and `FAMILY_APPS`. Also in the root and `/client`. |
+| `@vvedantb/ui/logos` | Third-party brand logos (`GitHubIcon`, `GoogleDriveIcon`, `SlackIcon`, `ClaudeIcon`, `VercelIcon`, ...) and `LogoProps` (0.36.0). Also in the root and `/client`. See [Third-party logos](#third-party-logos-0360). |
+| `@vvedantb/ui/icons/animated` | Motion-driven animated SVG icons (`AnimatedNotificationIcon`, `MorphingMenuIcon`, `AnimatedBellIcon`, ...) (0.36.0). Not in the root or `/client`. Needs the optional `motion` peer. See [Animated SVG icons](#animated-svg-icons-0360). |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. CSS. |
 | `@vvedantb/ui/tokens/tokens.css` | Same file as `@vvedantb/ui/tokens`. CSS. |
 | `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `clear-input`, `motion`, `animations`, `nav-icons`, `compat-shadcn-rgb`, `border-beam` (opt-in, for `BorderBeam`), `markdown` (opt-in, for `Markdown`). CSS. `tokens.css` imports `scrollbar-thin`, `clear-input` and `motion`. |
@@ -292,7 +294,7 @@ import {
 - `Button`: variants `flat`, `success` and `warning` (each is `ghost` plus an override). `loading` disables the button, sets `data-loading="true"` and shows a spinner in place of `startContent`; without `loading` there is no `data-loading` attribute. `endContent` renders after the children. Both are ignored with `asChild` (`loading` still disables).
 - `DropdownMenuContent`: `fitViewport` caps the height on small screens and scrolls. It reads the optional `--vv-height` CSS variable, which the app may set to the visual viewport height (falls back to `70dvh`). `suppressAltKey` stops a bare Alt press from moving focus. `restoreScrollLockOnClose` calls `restoreModalScrollLock` on close (now and on the next tick). `ContextMenuContent` takes `suppressAltKey` too.
 - `DropdownMenuItem` `endContent` and `ContextMenuItem` `startContent`, `description` and `endContent`: the label moves into a growing column (`min-w-0 flex-1`), the description sits under it and `endContent` sits at the end. `DropdownMenuSubTrigger` and `ContextMenuSubTrigger` take `startContent`.
-- `PopoverContent` `fitViewport`: grows from the trigger (`--radix-popper-transform-origin`), defaults `collisionPadding` to 8 (your value wins) and, on small screens, caps width to `100vw - 1.5rem` and height as above.
+- `PopoverContent` `fitViewport`: grows from the trigger (`--radix-popper-transform-origin`) and, on small screens, caps width to `100vw - 1.5rem` and height as above.
 - `CommandDialog`: `title` and `description` add a visually hidden dialog header. `className` merges onto the dialog content. `shouldFilter` goes to `Command`. `listLayout` is `"pinned"` (default, fixed list height) or `"auto"` (the list sizes itself and items keep your styling).
 - `restoreModalScrollLock()`: clears body `pointer-events`, and, when no dialog or alert dialog is open, the body and root `overflow` and body `padding-right` left by a modal menu.
 - `CardHeader`: `flex flex-col space-y-1.5 p-6`.
@@ -1155,6 +1157,47 @@ Props (type `IconProps`; all optional):
 
 Other SVG props (`id`, `data-*`, handlers, `ref`) go to the svg. On group hover the svg scales to 1.15 (the first six icons, spring ease) or 1.12 (the rest). `NavIconBase` is the shared svg wrapper, for icons drawn in the same style. The stylesheet has no reduced-motion override.
 
+## Third-party logos (0.36.0)
+
+Full-colour vendor logos, separate from the family marks in `@vvedantb/ui/brand`. Import from `@vvedantb/ui/logos` (also in the root and `/client`):
+
+```tsx
+import { GitHubIcon, GoogleDriveIcon, SlackIcon } from "@vvedantb/ui/logos";
+
+<GoogleDriveIcon />                      // 24px, aria-hidden
+<SlackIcon size={16} title="Slack" />    // role="img", aria-label and <title>
+<GitHubIcon className="text-foreground" /> // monochrome marks follow currentColor
+```
+
+| Logo | Colour |
+| --- | --- |
+| `ChromeIcon`, `ConvexIcon`, `DropboxIcon`, `FigmaIcon`, `GmailIcon`, `GoogleDriveIcon`, `LinearIcon`, `NotionIcon`, `OneDriveIcon`, `SharePointIcon`, `SlackIcon` | Brand colours |
+| `ClaudeIcon`, `CursorIcon`, `GitHubIcon`, `VercelIcon` | `currentColor` |
+
+Props (`LogoProps`): `size` (number or CSS length, default `24`, sets width and height), `title` (accessible name: the svg becomes `role="img"` with `aria-label` and a `<title>`; without `title` or `aria-label` it is `aria-hidden`), and any other SVG prop (`className`, `style`, `data-*`, `ref`). `OneDriveIcon` and `SharePointIcon` use `useId` for their gradient ids, so several on one page do not clash. Paths are the vendors' own: do not recolour the full-colour marks. For the AI provider marks in model pickers, keep using `ProviderIcon`.
+
+## Animated SVG icons (0.36.0)
+
+Motion-driven icons, on their own entry so apps that do not use them do not load them. They are not in the root or `/client`.
+
+```tsx
+import { AnimatedNotificationIcon, MorphingMenuIcon } from "@vvedantb/ui/icons/animated";
+```
+
+They need the optional `motion` peer and animate through `m.*`, so they need the app's `MotionProvider` (or its own `LazyMotion`). Without it they render their resting frame. No stylesheet. All are decorative (`aria-hidden`) except `AnimatedProgress` (`role="progressbar"`) and `AnimatedCounter` (text).
+
+| Component | Props | What it does |
+| --- | --- | --- |
+| `AnimatedNotificationIcon` | `type` (`NotificationIconType`: `success`, `warning`, `error`, `info`), `size` (20), `color`, `className` | On mount the check draws itself, the warning shakes, the error pops in, the info icon rises. Colour: `--color-success`, `--color-warning`, `--color-danger`, `--color-primary` (`info`); `color` overrides. |
+| `AnimatedBellIcon` | `size` (32), `muted` (`true`), `className` | Bell draws itself, then swings every 4.5 s. `muted` adds the slash. |
+| `AnimatedKeyIcon` | `size` (48), `className` | Bolt draws itself, sparkles twinkle, soft pulse. For empty API-key states. |
+| `MorphingMenuIcon` | `isOpen`, `size` (20), `className` | Three bars morph to an X. `data-state="open"` or `"closed"`. Label the button and set its `aria-expanded`. |
+| `MorphingMicIcon` | `isListening`, `size` (32), `strokeWidth` (2), `className` | Cross-fades a microphone and a stop square. |
+| `PulsingRings` | `size`, `ringCount` (3), `color` (`var(--color-danger)`), `active` (`true`), `className` | Staggered expanding rings, absolutely centred in a `relative` parent. `active={false}` renders nothing. |
+| `AnimatedStatusDot` | `phase` (`StatusDotPhase`: `idle`, `listening`, `thinking`, `speaking`, `error`), `size` (10; svg is 3x), `className` | Ripples while listening, glow while listening or speaking. |
+| `AnimatedProgress` | `value` (0 to 100, clamped), `height` (4), `showGradient` (`true`), `label`, `className` | Spring fill in `--color-primary` on `--color-surface-secondary`, with a moving gradient and shimmer. |
+| `AnimatedCounter` | `value`, `duration` (1 s), `formatValue`, `animateOnView` (`true`), `className` | Springs from 0 to `value` once in view. `tabular-nums`. The spring runs without `LazyMotion`. |
+
 ## Artifact viewers (0.13.0)
 
 Web viewers for artifacts: standalone HTML, Markdown, SVG, code or typed JSON (quiz, flashcards) documents with per-user state. The pure core (schemas, state limits and ops, the document wrapper, the guest bridge) lives in `@vvedantb/server` (see its `docs/artifacts.md`); install `@vvedantb/server` 0.6.1 or later next to this package. The components hold no data: rows come in through props and changes leave through callbacks, so any backend works.
@@ -1434,9 +1477,10 @@ New props and exports:
 
 - `DialogContent` `viewportAware` (default `true`): the bottom sheet on compact viewports, visual-viewport sizing, keyboard-aware scrolling and the body pointer-events fix. `false` keeps a centred dialog at every size and leaves the viewport and body alone.
 - `PopoverAnchor` (Radix `Popover.Anchor`).
-- `HoverCardContent` and `TooltipContent` `portal`: render into `document.body`.
-- `ContextMenuSubContent` `portal`.
-- Config `Select.triggerSlot`: adds `data-slot="select-trigger"`, which the `ButtonGroup` selectors read.
+- `HoverCardContent` and `TooltipContent` `portal`: render into `document.body`. Default `true`; `false` renders inline.
+- `ContextMenuSubContent` `portal`. Default `true` (also `ContextMenu.subContentPortal`).
+- Config `Select.triggerSlot`: adds `data-slot="select-trigger"`, which the `ButtonGroup` selectors read. Default `true`.
+- `PopoverContent`, `DropdownMenuContent`, `ContextMenuContent` and `SelectContent` default `collisionPadding` to 8 (a prop or config value wins).
 - Config `Command.emptyClassNameReplaces`: a `className` on `CommandEmpty` (even `""`) replaces its classes instead of merging.
 
 `DialogTrigger`, `PopoverTrigger`, `DropdownMenuTrigger` and `ContextMenuTrigger` are now thin wrappers that read the config; `HoverCard` and `TooltipProvider` are function components that read the configured delays. Same DOM and props without config.
@@ -1541,14 +1585,14 @@ const config = {
 
   Outside a `StickToBottom` (for example a page outline) use `JumpRail` with `items` (`{ id, title, preview?, level? }`), a `scrollRef` or `getScrollElement`, and `targetAttribute="data-toc-id"` or `resolveTarget`. `onReveal` runs when a target is not in the DOM; `onBeforeScroll` runs just before it. `onSelect(id)` runs after a click or Enter/Space pick, once the scroll has started or `onReveal` has run, so an app can move focus to the target for keyboard users; `ChatJumpRail` accepts it too. `observeKey` re-observes when the rendered window changes. The geometry helpers (`resolveJumpRailTopPercent`, `resolveJumpRailIndexFromPointer`, `resolveJumpRailHeightStyle`, `resolveJumpRailTickWidthClass`, `resolveJumpRailTickLevelStyle`) are exported.
 - `Message`: `classes.root`, `classes.user`, `classes.assistant` (the role classes of `Message`), `classes.content` (all `MessageContent` classes), `classes.branchSelector`, `classes.branchIcon` (a class in place of the arrows' `size={14}`), and `lazyActionTooltips`: a `MessageAction` mounts its tooltip on first hover or focus (focus opens it), not with the button.
-- `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (`PromptInputActionMenuTrigger` becomes the Radix trigger instead of a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
+- `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (default `true`: `PromptInputActionMenuTrigger` is the Radix trigger; `false` nests a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
 - `PromptInputSubmit`: new prop `queued` (0.30.0). Set it 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 `queued` is `true`. Leave it unset to keep `submitIcons.send`. `SendQueueIcon` (`queued`, `className` default `size-4`) is exported for other send buttons. It uses `m`, so `queued` needs the app's `LazyMotion`.
 - `PromptInputSettings` (new): an overflow menu with a "Model" submenu (one radio list, or a submenu per provider). Entry: `providerLabel(provider)` (default the id), `providerIcon(provider)` (default none), `classes.trigger`.
 - `TraitsPanel` (new, with `isUltrathinkPrompt`, `applyUltrathinkPrefix`): reasoning, speed, context and thinking segments for a model picker; inside a `PromptInputProvider` it offers "Ultrathink" by editing the prompt. Entry: `classes.label`, `classes.empty`, `classes.option`, `classes.optionSelected`, `classes.optionIdle`, `classes.note`.
 - `PromptInputSpeech`, `useSpeechRecognition`, `getSpeechRecognition` (new): Web Speech API dictation; the button renders nothing without the API.
 - `Queue`: one family, used in one of two ways. The queued-messages widget is unchanged: `Queue` with `count`, `QueueHeader`, `QueueList` (`open`) and `QueueItem` with `text` (`model`, `personalityName`, `personaName`, `personaImage`, `onEdit`, `onRemove`). The composable parts (the AI Elements `Queue`, new): `Queue` without `count` (a plain root), `QueueSection`, `QueueSectionTrigger`, `QueueSectionLabel`, `QueueSectionContent`, `QueueList` (inside a composable `Queue`: a list capped at `max-h-48`), `QueueItem` without `text` (an `li`, takes `ref`), `QueueItemIndicator`, `QueueItemContent`, `QueueItemActions`, `QueueItemAction`. The composable parts render no `motion.*`, so they work under `<LazyMotion strict>`. Entry `Queue`: `classes.sectionTrigger`.
 - `Shimmer`: `mode`, `as`, `classes.base`, `classes.overlay`, `classes.band`, `classes.copy`. New prop `mode`: `"gradient"` (default) or `"mask"`, which sweeps a masked copy of the text with transforms only (no repaint, paused offscreen). `mask` needs the app to define `.shimmer-overlay`, `.shimmer-band` and `.shimmer-copy` (or the `classes` it names).
-- `CodeBlock`: `plain`, `copyButtonSize`, `copyLabel` (a screen-reader label on the copy button), `copyEveryClick` (the copy button copies on every click, also while it shows the check; by default those clicks do nothing until it resets after `timeout`), `classes.container`, `classes.pre`, `classes.copyButton`, `classes.copyIcon` (a class in place of `size={14}`). New props: `plain` (no shiki: a `pre` with the code, and `children` replace that `pre` instead of sitting above it); `language` is now optional.
+- `CodeBlock`: `plain`, `copyButtonSize`, `copyLabel` (a screen-reader label on the copy button; without it the icon-only button gets `aria-label="Copy code"`), `copyEveryClick` (the copy button copies on every click, also while it shows the check; by default those clicks do nothing until it resets after `timeout`), `classes.container`, `classes.pre`, `classes.copyButton`, `classes.copyIcon` (a class in place of `size={14}`). New props: `plain` (no shiki: a `pre` with the code, and `children` replace that `pre` instead of sitting above it); `language` is now optional.
 - `Artifact`: `classes.root`, `classes.header`, `classes.title`, `classes.description`, `classes.actions`, `classes.action` (`ArtifactAction` and `ArtifactClose`), `classes.actionIcon`, `classes.content`, `actionSize`, `actionLabel` (`"sr-only"` names actions with a hidden span instead of `aria-label`). `ArtifactAction`: `tooltip` is optional (no tooltip, no wrapper) and `icon` also takes an icon component (`icon={IconCopy}`). New `ArtifactClose` (an action with an X, `label` default `"Close"`).
 - `Attachments`: `classes.item.<variant>`, `classes.preview.<variant>`, `classes.remove.<variant>` replace the variant classes of `Attachment`, `AttachmentPreview` and `AttachmentRemove`.
 - `FileChip` (new, no entry): a file name chip that opens the file.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.34.0",
+  "version": "0.36.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.",
+  "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), third-party brand logos (also @vvedantb/ui/logos), motion-driven animated SVG icons (@vvedantb/ui/icons/animated), 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",
   "publishConfig": {
     "access": "public"
@@ -46,6 +46,14 @@
       "types": "./src/brand/index.ts",
       "default": "./src/brand/index.ts"
     },
+    "./logos": {
+      "types": "./src/logos/index.ts",
+      "default": "./src/logos/index.ts"
+    },
+    "./icons/animated": {
+      "types": "./src/icons/animated/index.ts",
+      "default": "./src/icons/animated/index.ts"
+    },
     "./client": {
       "types": "./src/client.ts",
       "default": "./src/client.ts"

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

@@ -41,7 +41,7 @@ export interface ActivityMarkdownProps {
 export interface ActivityTasksConfig {
   /** Agent name in the streaming header ("<name> is thinking..."). Default "Agent"; the `name` prop wins. */
   name?: string;
-  /** Renders reasoning and mid-turn reply text. Default: `Streamdown`. */
+  /** Renders reasoning and mid-turn reply text. Default: the package `Markdown` (smooth streaming). */
   markdown?: ComponentType<ActivityMarkdownProps>;
   /**
    * An image for `ActivityThinkingIcon` (for example the app's logo mark),

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { createContext, memo, useCallback, useContext, useRef, useState } from "react";
-import type { ComponentProps, ReactNode, Ref } from "react";
+import type { ComponentProps, ComponentType, ReactNode, Ref } from "react";
 import { flushSync } from "react-dom";
 
 import { Collapsible, CollapsibleContent } from "../ui/collapsible";
@@ -14,11 +14,7 @@ import {
   IconSearch,
   IconTerminal2,
 } from "@tabler/icons-react";
-import { cjk } from "@streamdown/cjk";
-import { code } from "@streamdown/code";
-import { math } from "@streamdown/math";
-import { mermaid } from "@streamdown/mermaid";
-import { Streamdown } from "streamdown";
+import { Markdown as PackageMarkdown } from "../markdown/Markdown";
 import { useCn, useUiConfig } from "../ui/ui-config";
 import { Spinner } from "../ui/spinner";
 import { CrossfadeIconSlot } from "../ui/crossfade-icon";
@@ -65,19 +61,9 @@ import {
 import { useStreamingDisclosure } from "./use-streaming-disclosure";
 import { RollingNumber } from "../ui/rolling-number";
 
-const streamdownPlugins = { cjk, code, math, mermaid };
-
-function StreamdownMarkdown({ className, mode, children }: ActivityMarkdownProps) {
-  return (
-    <Streamdown className={className} mode={mode} plugins={streamdownPlugins}>
-      {children}
-    </Streamdown>
-  );
-}
-
-/** The app's Markdown renderer (`UiConfig.ActivityTasks.markdown`), or Streamdown. */
-function useActivityMarkdown() {
-  return useUiConfig("ActivityTasks")?.markdown ?? StreamdownMarkdown;
+/** The app's Markdown renderer (`UiConfig.ActivityTasks.markdown`), or the package `Markdown`. */
+function useActivityMarkdown(): ComponentType<ActivityMarkdownProps> {
+  return useUiConfig("ActivityTasks")?.markdown ?? PackageMarkdown;
 }
 
 const ActivityStreamingHeader = memo(function ActivityStreamingHeader({

package/src/ai-elements/attachments.tsx

@@ -317,12 +317,12 @@ export const AttachmentRemove = ({
         remove === undefined && variant === "grid" && [
           "absolute top-2 right-2 size-6 rounded-full p-0",
           cn(flatPanelSubtleClass, flatElevatedSurfaceHoverClass),
-          "opacity-0 transition-opacity group-hover:opacity-100",
+          "reveal-on-hover transition-opacity",
           "[&>svg]:size-3",
         ],
         remove === undefined && variant === "inline" && [
           "size-5 rounded p-0",
-          "opacity-0 transition-opacity group-hover:opacity-100",
+          "reveal-on-hover transition-opacity",
           "[&>svg]:size-2.5",
         ],
         remove === undefined && variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],

package/src/ai-elements/code-block.tsx

@@ -101,7 +101,8 @@ type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * `UiConfig.CodeBlock`: `plain` default, and classes that replace the
  * container, the plain-mode `pre`, the copy button and its icon. A
- * `copyLabel` adds a screen-reader label to the copy button.
+ * `copyLabel` adds a screen-reader label to the copy button. Without it, the
+ * icon-only button gets `aria-label="Copy code"`.
  * `copyEveryClick` makes the copy button copy again while it still shows
  * the check; by default those clicks do nothing until it resets.
  */
@@ -482,6 +483,7 @@ export const CodeBlockCopyButton = ({
       onClick={copyToClipboard}
       size={config?.copyButtonSize ?? "icon"}
       variant="ghost"
+      aria-label={config?.copyLabel || children !== undefined ? undefined : "Copy code"}
       {...props}
     >
       {children ?? (iconClass === undefined ? <Icon size={14} /> : <Icon className={iconClass} />)}

package/src/ai-elements/conversation.tsx

@@ -101,7 +101,7 @@ export const ConversationEmptyState = ({
   );
 };
 export type ConversationScrollButtonProps = ComponentProps<typeof Button> & {
-  /** Text after the icon; also the button's `aria-label` and `title`. */
+  /** Text after the icon; also the button's `aria-label` and `title`. Without it, the icon-only button's `aria-label` is "Scroll to bottom". */
   label?: string;
   /** Replaces the arrow icon. */
   icon?: ReactNode;
@@ -184,7 +184,9 @@ export const ConversationScrollButton = ({
     hide();
     scrollToBottom();
   };
-  const motionClass = classes?.scrollButtonMotion ?? "absolute bottom-4 left-0 right-0 z-10 flex justify-center";
+  // The full-width row lets clicks through to the messages; the button takes them.
+  const motionClass =
+    classes?.scrollButtonMotion ?? "pointer-events-none absolute bottom-4 left-0 right-0 z-10 flex justify-center";
   const presence = (
     <LazyMotion features={domAnimation}>
       <AnimatePresence initial={false}>
@@ -198,12 +200,16 @@ export const ConversationScrollButton = ({
             transition={defaults?.transition ?? fastTransition}
           >
             <Button
-              className={merge(classes?.scrollButton ?? [flatInteractiveClass, "rounded-full"], className)}
+              className={merge(
+                classes?.scrollButton ?? [flatInteractiveClass, "rounded-full"],
+                "pointer-events-auto",
+                className,
+              )}
               onClick={handleScrollToBottom}
               size={size ?? defaults?.size ?? "icon"}
               type="button"
               variant="outline"
-              {...(label ? { "aria-label": label, title: label } : {})}
+              {...(label ? { "aria-label": label, title: label } : { "aria-label": "Scroll to bottom" })}
               {...props}
             >
               {icon ?? <IconArrowDown className="size-4" />}

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

@@ -105,8 +105,9 @@ const convertBlobUrlToDataUrl = async (url: string): Promise<string | null> => {
  * (added when no `containerClassName` is given), `textarea`, `footer`,
  * `submit` and `tabItem`. `submitIcons` replace the submit
  * button's icon per status; `submitCrossfade` cross-fades between them.
- * `menuTriggerAsChild` makes `PromptInputActionMenuTrigger` the trigger
- * itself rather than a button inside the menu's trigger button.
+ * `menuTriggerAsChild` (default `true`) makes `PromptInputActionMenuTrigger`
+ * the trigger itself; `false` nests its button inside the menu's trigger
+ * button (invalid HTML).
  */
 export interface PromptInputConfig {
   classes?: {
@@ -823,7 +824,7 @@ export const PromptInputFooter = ({
   return (
     <InputGroupAddon
       align="block-end"
-      className={merge(footer ?? "justify-between gap-1", className)}
+      className={merge(footer ?? "justify-between gap-1 max-sm:flex-wrap", className)}
       {...props}
     />
   );
@@ -895,7 +896,7 @@ export const PromptInputActionMenuTrigger = ({
   children,
   ...props
 }: PromptInputActionMenuTriggerProps) => {
-  const asChild = useUiConfig("PromptInput")?.menuTriggerAsChild;
+  const asChild = useUiConfig("PromptInput")?.menuTriggerAsChild ?? true;
   const button = (
     <PromptInputButton className={className} {...props}>
       {children ?? <IconPlus className="size-4" />}

package/src/client.ts

@@ -399,6 +399,9 @@ export { useHeldResult } from "../app/src/convex/useHeldResult";
 // Family app marks (Icon* components, deprecated AppMark and raw SVG strings for favicons).
 export * from "./brand";
 
+// Third-party brand logos (`GitHubIcon`, `SlackIcon`, `ClaudeIcon`, ...). Also `@vvedantb/ui/logos`.
+export * from "./logos";
+
 // Native tokens (JS values that match tokens.css).
 export { tokens } from "../tokens/src/native";
 export type { Tokens } from "../tokens/src/native";

package/src/icons/animated/animated-bell-icon.tsx

@@ -0,0 +1,68 @@
+import { m } from "motion/react";
+
+export interface AnimatedBellIconProps {
+  /** Width and height in px. Default `32`. */
+  size?: number;
+  className?: string;
+  /** Draw the mute slash. Default `true` (the empty-notifications state). */
+  muted?: boolean;
+}
+
+/**
+ * Bell that draws itself, then swings every few seconds with a moving
+ * clapper. For empty notification states. Uses `currentColor`. Decorative (`aria-hidden`).
+ */
+export function AnimatedBellIcon({ size = 32, className, muted = true }: AnimatedBellIconProps) {
+  return (
+    <m.svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      initial={{ rotate: 0 }}
+      animate={{ rotate: [0, 10, -10, 8, -8, 5, -5, 0] }}
+      transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 3 }}
+      style={{ transformOrigin: "top center" }}
+    >
+      {/* Body */}
+      <m.path
+        d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+      />
+      {/* Bottom curve */}
+      <m.path
+        d="M13.73 21a2 2 0 0 1-3.46 0"
+        initial={{ pathLength: 0 }}
+        animate={{ pathLength: 1 }}
+        transition={{ duration: 0.3, delay: 0.4 }}
+      />
+      {/* Mute slash */}
+      {muted ? (
+        <m.path
+          d="M2 2l20 20"
+          data-slot="mute-slash"
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 0.3, delay: 0.6 }}
+        />
+      ) : null}
+      {/* Clapper */}
+      <m.circle
+        cx="12"
+        cy="17"
+        r="0.5"
+        fill="currentColor"
+        animate={{ x: [0, 1, -1, 0.5, -0.5, 0] }}
+        transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 3 }}
+      />
+    </m.svg>
+  );
+}

package/src/icons/animated/animated-counter.tsx

@@ -0,0 +1,45 @@
+import { m, useInView, useSpring, useTransform } from "motion/react";
+import { useEffect, useRef } from "react";
+import { cn } from "../../utils/cn";
+
+export interface AnimatedCounterProps {
+  /** Target value to count up to. */
+  value: number;
+  /** Rough animation length in seconds (scales the spring stiffness). Default `1`. */
+  duration?: number;
+  className?: string;
+  /** Formats the displayed number. Default: rounded, `toLocaleString()`. */
+  formatValue?: (value: number) => string;
+  /** Wait until the counter scrolls into view. Default `true`. */
+  animateOnView?: boolean;
+}
+
+const defaultFormat = (v: number) => Math.round(v).toLocaleString();
+
+/**
+ * Number that springs up from 0 to `value` (`tabular-nums`). Changes to
+ * `value` spring from the current number. The spring runs without the app's
+ * `LazyMotion`.
+ */
+export function AnimatedCounter({
+  value,
+  duration = 1,
+  className,
+  formatValue = defaultFormat,
+  animateOnView = true,
+}: AnimatedCounterProps) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const isInView = useInView(ref, { once: true, margin: "-50px" });
+  const springValue = useSpring(0, { stiffness: 100 / duration, damping: 30, restDelta: 0.01 });
+  const displayValue = useTransform(springValue, (v) => formatValue(v));
+
+  useEffect(() => {
+    if (!animateOnView || isInView) springValue.set(value);
+  }, [value, springValue, animateOnView, isInView]);
+
+  return (
+    <m.span ref={ref} className={cn("tabular-nums", className)}>
+      {displayValue}
+    </m.span>
+  );
+}

package/src/icons/animated/animated-key-icon.tsx

@@ -0,0 +1,79 @@
+import { m } from "motion/react";
+
+export interface AnimatedKeyIconProps {
+  /** Width and height in px. Default `48`. */
+  size?: number;
+  className?: string;
+}
+
+function Sparkle({ x, y, delay, size = 3 }: { x: number; y: number; delay: number; size?: number }) {
+  return (
+    <g transform={`translate(${x}, ${y})`}>
+      {/* Four-pointed star */}
+      <m.path
+        d={`M0 -${size} L0 ${size} M-${size} 0 L${size} 0`}
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        initial={{ scale: 0, opacity: 0, rotate: 0 }}
+        animate={{ scale: [0, 1, 0], opacity: [0, 1, 0], rotate: [0, 45, 90] }}
+        transition={{ duration: 1.2, delay, repeat: Infinity, repeatDelay: 2, ease: "easeInOut" }}
+      />
+    </g>
+  );
+}
+
+/**
+ * Lightning-bolt "key" that draws itself, with twinkling sparkles and a soft
+ * pulse. For empty API-key states. Uses `currentColor`. Decorative (`aria-hidden`).
+ */
+export function AnimatedKeyIcon({ size = 48, className }: AnimatedKeyIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 48 48"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+    >
+      <Sparkle x={8} y={10} delay={0} size={2.5} />
+      <Sparkle x={40} y={12} delay={0.4} size={2} />
+      <Sparkle x={36} y={38} delay={0.8} size={2.5} />
+      <Sparkle x={10} y={36} delay={1.2} size={2} />
+
+      {/* Bolt with a gentle pulse */}
+      <m.g
+        initial={{ scale: 1 }}
+        animate={{ scale: [1, 1.02, 1] }}
+        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+      >
+        <m.path
+          d="M26 6L14 26h8l-4 16 16-22h-9l5-14z"
+          strokeWidth="1.5"
+          fill="none"
+          initial={{ pathLength: 0, opacity: 0 }}
+          animate={{ pathLength: 1, opacity: 1 }}
+          transition={{ duration: 0.8, ease: "easeOut" }}
+        />
+      </m.g>
+
+      {/* Glow pulse behind */}
+      <m.circle
+        cx="24"
+        cy="24"
+        r="16"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="0.5"
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: [0.9, 1.1, 0.9], opacity: [0, 0.15, 0] }}
+        transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
+      />
+    </svg>
+  );
+}