@vvedantb/ui 0.2.0 → 0.2.2

package/README.md

@@ -4,12 +4,13 @@ Shared React 19 web UI. Source-exported: no build step.
 
 | Import | What it is |
 | --- | --- |
-| `@vvedantb/ui` | Primitives (Radix-based) and AI elements. |
+| `@vvedantb/ui` | Primitives (Radix-based), AI elements, `playChime` and `useReplyChime`. |
 | `@vvedantb/ui/cn` | `cn` class helper (clsx + tailwind-merge). |
-| `@vvedantb/ui/shell` | Router-free `SidebarHeader` and `PillTabs`. |
+| `@vvedantb/ui/shell` | Router-free `SidebarHeader`, `PillTabs` and `SessionsHoverCard`. |
 | `@vvedantb/ui/app` | Alt-click confirm skip, update watcher, settings chrome, `useStableAuth`. See `app/README.md` in the repository. |
 | `@vvedantb/ui/tokens` | `tokens.css`: colour, radius, shadow, ease and font tokens for Tailwind v4. |
-| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`. |
+| `@vvedantb/ui/tokens/css/*.css` | `index`, `base`, `dialog`, `modal`, `tabs`, `tabs-pills`, `utilities`, `scrollbar-thin`, `animations`, `compat-shadcn-rgb`. |
+| `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | Same file as `tokens/css/compat-shadcn-rgb.css`. |
 | `@vvedantb/ui/tokens/tailwind-preset` | Tailwind preset for apps that load a JS config with `@config`. |
 | `@vvedantb/ui/tokens/native` | JS colours, radii and spacing. No CSS, no React DOM. |
 
@@ -19,6 +20,91 @@ Shared React 19 web UI. Source-exported: no build step.
 @source "../node_modules/@vvedantb/ui/src/**/*.{ts,tsx}";
 ```
 
+## Reply chime
+
+```tsx
+import { playChime, useReplyChime } from "@vvedantb/ui";
+
+useReplyChime({ enabled: soundOn, isStreaming, threadId });
+```
+
+- `playChime()`: soft rising two-note chime (WebAudio). One shared `AudioContext`, created on first use. It is a no-op on the server and when autoplay blocks audio. Calls less than 1 second apart play once.
+- `useReplyChime`: chimes once when `isStreaming` goes from `true` to `false` for the same `threadId`. It is silent on the first sight of a thread, when `threadId` changes, and when `threadId` is null or undefined. While `enabled` is `false` it still tracks the edge, so enabling mid-turn does not replay a finish.
+
+## Sessions hover card
+
+```tsx
+import { SessionsHoverCard } from "@vvedantb/ui/shell";
+
+<SessionsHoverCard
+  header="Session title"
+  loadContent={() => fetchPreview(id)}
+  footer="Updated today"
+>
+  <button type="button">Row</button>
+</SessionsHoverCard>
+```
+
+`children` is the trigger. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. Fixture: `shell/examples/sessions-hover-card/`.
+
+## Toaster
+
+```tsx
+import { toast } from "sonner";
+import { SonnerToaster } from "@vvedantb/ui";
+
+<SonnerToaster
+  theme={theme}
+  toastRadius="surface"
+  toastIcons="filled24"
+  closeButtonStyle="hoverChip"
+  sonnerVars
+  descriptionMuted
+/>;
+```
+
+With no new props the toaster looks as it did in 0.2.1. Caller props merge with the package defaults instead of replacing them:
+
+- `toastOptions.classNames`: per key, the package classes come first and the caller classes follow, so callers can override utilities. Other `toastOptions` fields (such as `duration`) take the caller value.
+- `icons`: merged per key. With `toastIcons="filled24"` the caller overrides single icons and keeps the rest.
+- `style`: merged over the package style. `className` is appended.
+
+Opt-in props (all default to the current look):
+
+| Prop | Values | Effect |
+| --- | --- | --- |
+| `toastRadius` | `"lg"` (default), `"surface"` | `rounded-lg` or `rounded-surface` (from `tokens/css/utilities.css`). |
+| `toastIcons` | `"default"`, `"filled24"` | Sonner icons or 24px filled success, info, warning and error icons, a matching loader and a 14px close cross. |
+| `closeButtonStyle` | `"default"`, `"hoverChip"` | Text-style close button or a round chip at the top-right, shown on hover and always on small screens. It turns on `closeButton` unless you set it. |
+| `sonnerVars` | `false` (default), `true` | Sets `--normal-bg`, `--normal-border`, `--normal-text`, `--normal-bg-hover` and `--normal-border-hover` from `--color-card`, `--color-border`, `--color-foreground` and `--color-muted`, and `font-family: inherit`. |
+| `descriptionMuted` | `false` (default), `true` | Description uses `text-muted-foreground!`, which beats sonner's dark-theme rule. |
+
+Helpers: `createToasterClassNames`, `mergeToastClassNames`, `mergeToastOptions`, `mergeToasterStyle`, `filledToastIcons`. Fixture: `tokens/examples/toaster/`.
+
+## Colour names in components
+
+Components use `text-muted-foreground`, `primary` and `--color-*` theme variables. They no longer use `text-muted`, `*-accent` or raw `var(--muted)` reads, which clash with shadcn names. `tokens.css` still defines `--color-muted` and `--color-accent`. `pnpm --filter @vvedantb/ui check:tokens` fails if a component brings the old names back (it also runs in `build`, `test` and `verify`).
+
+## Using an existing shadcn RGB theme
+
+Use this when the app defines shadcn-style variables as space-separated channels (`--background: 244 245 246`) and reads them as `rgb(var(--background) / 0.5)`.
+
+1. Import `compat-shadcn-rgb.css` **instead of** `tokens.css`. Never import both.
+2. The app keeps `--background`, `--foreground`, `--card`, `--popover`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`, `--border`, `--input`, `--ring` (each with its `-foreground` where shadcn has one) and `--radius`. The compat file does not define them. It only references them, so the app can change `--primary`, `--ring`, `--radius` or `--font-sans` at runtime.
+3. Add the `@source` line for the package sources.
+
+```css
+@import "tailwindcss";
+@import "@vvedantb/ui/tokens/css/compat-shadcn-rgb.css";
+@source "../node_modules/@vvedantb/ui/src/**/*.{ts,tsx}";
+```
+
+Shared CSS that is safe without `tokens.css`: `compat-shadcn-rgb.css`, `dialog.css`, `utilities.css`, `scrollbar-thin.css` (reads `--scrollbar`, which the compat file defines), `modal.css` and `tabs.css` (both need the app motion variables listed in `tokens/README.md`), and `animations.css` (not with the Tailwind preset). `base.css` and `tabs-pills.css` read raw `--accent`, `--foreground`, `--muted`, `--segment` and `--default`; skip them unless the app defines those as full colour values.
+
+The compat file includes a fallback `glass-panel-strong` (`rgb(var(--card) / 0.95)` with a 12px blur) for toasts and dialogs. Declare your own `@utility glass-panel-strong` after the import to override it.
+
+A fixture that renders the main components against sample light and dark RGB variables is in `tokens/examples/compat-shadcn-rgb/`.
+
 `@clerk/clerk-react`, `@tanstack/react-hotkeys` and `zod` are optional peers. Install them only if you import `@vvedantb/ui/app`.
 
 Full documentation: the repository `README.md`. Upgrading from `@vvedantb/tokens`, `@vvedantb/shell` or `@vvedantb/app-kit`: `MIGRATION.md`.

package/app/README.md

@@ -0,0 +1,100 @@
+# `@vvedantb/ui/app`
+
+Shared web React helpers that were duplicated across apps. Source-exported as the `./app` subpath of `@vvedantb/ui`.
+
+## Install
+
+```sh
+npm install @vvedantb/ui
+```
+
+## Peers
+
+Required: `react` and `react-dom` (>=19). Optional peers of `@vvedantb/ui`, needed only for this subpath: `@clerk/clerk-react` (`useStableAuth`), `@tanstack/react-hotkeys` and `zod`.
+
+`sonner` is not a dependency. The update watcher takes the toast API as an option. This subpath uses a local class join (`cn`), not the `cn` from `@vvedantb/ui`. Tailwind must scan `node_modules/@vvedantb/ui/app/src/**/*.{ts,tsx}` so the class names are generated, and the app needs the `@vvedantb/ui/tokens` names (`bg-surface-card`, `divide-separator`, `text-muted-foreground` and so on).
+
+```css
+@source "../node_modules/@vvedantb/ui/app/src/**/*.{ts,tsx}";
+```
+
+## Confirm skip (Alt-click)
+
+```tsx
+import { ConfirmSkipHint, skipConfirmTitle, useRequestConfirm } from "@vvedantb/ui/app";
+
+const { request } = useRequestConfirm();
+
+<DropdownMenuItem
+  title={skipConfirmTitle("Delete")}
+  onSelect={(event) => request(() => setOpen(true), () => remove(), event)}
+>
+  Delete <ConfirmSkipHint />
+</DropdownMenuItem>
+```
+
+- `useRequestConfirm` does not subscribe to Alt. It reads `getAltHeld()` when the request happens, so the menu owner does not re-render when Alt goes down. It returns `{ request }` only.
+- `ConfirmSkipHint` stays mounted and gains a `hidden` class when Alt is not held, so an open Radix menu keeps a stable child tree.
+- The Alt store resets when the last subscriber leaves, clears on blur and tab hide, and cancels a bare Alt keydown only inside `[role='menu']` or `[data-radix-menu-content]`.
+- Also exported: `useAltHeld`, `getAltHeld`, `createAltHeldStore`, `bindToWindow`, `shouldSkipConfirm`, `requestConfirm`.
+
+## Update available watcher
+
+```ts
+import { toast } from "sonner";
+import { startUpdateAvailableWatcher } from "@vvedantb/ui/app";
+
+useEffect(
+  () =>
+    startUpdateAvailableWatcher({
+      origin: window.location.origin,
+      toast,
+      closeConvex: () => void convex.close(),
+      enabled: !import.meta.env.DEV,
+    }),
+  [],
+);
+```
+
+Options: `origin`, `toast`, `closeConvex?`, `pollMs?` (default 60000), `toastId?` (default `app-update-available`), `enabled?` (default true), `reload?` (default `window.location.reload`). On a changed asset fingerprint it shows a sticky "Update available" toast. Refresh calls `closeConvex` (errors ignored), then reloads. `fingerprintFromHtml` and `fetchDeployFingerprint` are exported too. The fingerprint looks for Vite `/assets/*.js` URLs in the index HTML.
+
+## Settings chrome
+
+```tsx
+import { SettingsPage, SettingsSection, SettingsToggleRow } from "@vvedantb/ui/app";
+
+<SettingsPage
+  title="Notifications"
+  layout={({ title, headerRight, toolbar, tabs, fillHeight, children }) => (
+    <PageContainer title={title} rightSection={headerRight} toolbar={toolbar} tabs={tabs} noScroll={fillHeight}>
+      {children}
+    </PageContainer>
+  )}
+>
+  <SettingsSection title="Email" bodyVariant="list">
+    <SettingsToggleRow title="Weekly digest" action={<Switch />} />
+  </SettingsSection>
+</SettingsPage>
+```
+
+Exports: `SettingsSection`, `SettingsField`, `SettingsStack`, `SettingsToggleRow`, `SettingsEmptyState` (icon is `ComponentType<{ size?: number; className?: string }>`), `SettingsPage`. Without `layout`, `SettingsPage` renders a plain `div` with a heading and the optional slots.
+
+## useStableAuth
+
+```ts
+import { useStableAuth } from "@vvedantb/ui/app"; // 2000 ms debounce, wraps Clerk useAuth
+import { createUseStableAuth } from "@vvedantb/ui/app";
+
+const useAuth = createUseStableAuth(useClerkAuth, { debounceMs: 3000 });
+```
+
+After a signed-in session, a drop to signed-out reports `isLoaded: false` for the debounce window so Convex does not cascade. State is module-level. `resetStableAuthSession()` clears it and is for tests only.
+
+## Develop
+
+```sh
+pnpm --filter @vvedantb/ui typecheck
+pnpm --filter @vvedantb/ui test
+```
+
+Source is in `app/src` and tests in `app/tests`. Publish steps are in the root `README.md`.

package/app/src/confirm/ConfirmSkipHint.tsx

@@ -23,7 +23,7 @@ export function ConfirmSkipHint({ className }: { className?: string }) {
   return (
     <kbd
       className={cn(
-        "ml-auto shrink-0 rounded bg-surface-secondary px-1 py-0.5 font-mono text-[10px] text-muted",
+        "ml-auto shrink-0 rounded bg-surface-secondary px-1 py-0.5 font-mono text-[10px] text-muted-foreground",
         !altHeld && "hidden",
         className,
       )}

package/app/src/settings/SettingsEmptyState.tsx

@@ -25,10 +25,10 @@ export function SettingsEmptyState({
 }: SettingsEmptyStateProps) {
   return (
     <div className="flex flex-col items-center justify-center px-4 py-16 text-center">
-      <Icon size={28} className="mb-5 text-muted opacity-50" />
+      <Icon size={28} className="mb-5 text-muted-foreground opacity-50" />
       <h4 className="text-sm font-medium text-foreground">{title}</h4>
       {description ? (
-        <p className="mt-2 max-w-sm text-xs leading-relaxed text-muted">
+        <p className="mt-2 max-w-sm text-xs leading-relaxed text-muted-foreground">
           {description}
         </p>
       ) : null}

package/app/src/settings/SettingsField.tsx

@@ -33,7 +33,7 @@ export function SettingsField({
       </label>
       {children}
       {description ? (
-        <p className="mt-1.5 text-pretty text-xs leading-relaxed text-muted">
+        <p className="mt-1.5 text-pretty text-xs leading-relaxed text-muted-foreground">
           {description}
         </p>
       ) : null}

package/app/src/settings/SettingsSection.tsx

@@ -60,7 +60,7 @@ export function SettingsSection({
             {title}
           </h3>
           {description ? (
-            <p className="mt-0.5 text-pretty text-sm leading-relaxed text-muted">
+            <p className="mt-0.5 text-pretty text-sm leading-relaxed text-muted-foreground">
               {description}
             </p>
           ) : null}

package/app/src/settings/SettingsToggleRow.tsx

@@ -40,7 +40,7 @@ export function SettingsToggleRow({
           <p className={titleClassName}>{title}</p>
         )}
         {description ? (
-          <p className="mt-1 text-pretty text-xs leading-relaxed text-muted">
+          <p className="mt-1 text-pretty text-xs leading-relaxed text-muted-foreground">
             {description}
           </p>
         ) : null}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: primitives, shell pieces, app helpers, design tokens, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",
@@ -44,6 +44,8 @@
     "./tokens/css/utilities.css": "./tokens/src/css/utilities.css",
     "./tokens/css/scrollbar-thin.css": "./tokens/src/css/scrollbar-thin.css",
     "./tokens/css/animations.css": "./tokens/src/css/animations.css",
+    "./tokens/css/compat-shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",
+    "./tokens/compat/shadcn-rgb.css": "./tokens/src/css/compat-shadcn-rgb.css",
     "./tokens/css/*.css": "./tokens/src/css/*.css",
     "./tokens/tailwind-preset": {
       "types": "./tokens/src/tailwind-preset.d.mts",
@@ -59,11 +61,22 @@
     "tokens/src",
     "tokens/examples",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "!**/*.test.ts",
+    "!**/*.test.tsx"
   ],
   "sideEffects": [
     "./src/ui/sonner.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 tokens/tsconfig.json",
+    "test": "node tokens/scripts/check-component-tokens.mjs && vitest run && node --test tokens/test/*.test.mjs",
+    "verify": "node tokens/scripts/check-component-tokens.mjs && node tokens/verify/run.mjs",
+    "analyze": "node tokens/verify/analyze.mjs",
+    "prepack": "node tokens/scripts/check-exports.mjs"
+  },
   "peerDependencies": {
     "@clerk/clerk-react": ">=5",
     "@radix-ui/react-accordion": "^1.2.12",
@@ -171,12 +184,5 @@
     "zod": {
       "optional": true
     }
-  },
-  "scripts": {
-    "build": "node tokens/scripts/check-exports.mjs && tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json && tsc -p tokens/tsconfig.json",
-    "test": "vitest run && node --test tokens/test/*.test.mjs",
-    "verify": "node tokens/verify/run.mjs",
-    "analyze": "node tokens/verify/analyze.mjs"
   }
-}
+}

package/shell/src/PillTabs.tsx

@@ -16,7 +16,7 @@ export type PillTabsProps = {
 
 const tabBase =
   "inline-flex h-8 items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-border px-3.5 py-1 text-sm font-medium transition-[color,background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
-const tabIdle = "text-muted hover:bg-default/50 hover:text-foreground";
+const tabIdle = "text-muted-foreground hover:bg-default/50 hover:text-foreground";
 const tabSelected = "bg-default text-foreground";
 
 export function PillTabs({ tabs, value, onValueChange, className }: PillTabsProps) {

package/shell/src/SessionsHoverCard.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../../src/ui/hover-card";
+import { cn } from "../../src/utils/cn";
+
+export type SessionsHoverCardContext = { open: boolean };
+
+export type SessionsHoverCardProps = {
+  /** The element that triggers the card, such as a list row. Rendered with `asChild`. */
+  children: ReactNode;
+  header?: ReactNode;
+  /**
+   * Body slot. A function runs only while the card is open, so it can start
+   * fetches for preview data.
+   */
+  body?: ReactNode | ((ctx: SessionsHoverCardContext) => ReactNode);
+  /** Runs each time the card opens. Its result replaces `body`. */
+  loadContent?: () => Promise<ReactNode> | ReactNode;
+  /** Shown while `loadContent` is pending. */
+  loadingFallback?: ReactNode;
+  footer?: ReactNode;
+  /** Controlled open state. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Delay before opening, in milliseconds. */
+  openDelay?: number;
+  /** Delay before closing, in milliseconds. */
+  closeDelay?: number;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  /** Merged over the default `w-64 p-3`. */
+  className?: string;
+};
+
+type LoadState = { status: "loading" } | { status: "ready"; node: ReactNode };
+
+/** Mounts only while the card is open, so `loadContent` never runs while closed. */
+function LoadedBody({
+  loadContent,
+  fallback,
+}: {
+  loadContent: () => Promise<ReactNode> | ReactNode;
+  fallback: ReactNode;
+}) {
+  const [state, setState] = useState<LoadState>({ status: "loading" });
+
+  useEffect(() => {
+    let cancelled = false;
+    Promise.resolve()
+      .then(loadContent)
+      .then((node) => {
+        if (!cancelled) setState({ status: "ready", node });
+      })
+      .catch(() => {
+        if (!cancelled) setState({ status: "ready", node: null });
+      });
+    return () => {
+      cancelled = true;
+    };
+    // Run once per open. A new `loadContent` identity must not refetch.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <>{state.status === "ready" ? state.node : fallback}</>;
+}
+
+/** Calls the render prop. Mounts only inside open content, never while closed. */
+function RenderBody({
+  render,
+  open,
+}: {
+  render: (ctx: SessionsHoverCardContext) => ReactNode;
+  open: boolean;
+}) {
+  return <>{render({ open })}</>;
+}
+
+/**
+ * Hover card shell for list rows such as a sessions sidebar. It sets delay,
+ * position, width and padding, and gives header, body and footer slots. The
+ * app supplies the content.
+ */
+export function SessionsHoverCard({
+  children,
+  header,
+  body,
+  loadContent,
+  loadingFallback = null,
+  footer,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  openDelay = 400,
+  closeDelay = 150,
+  side = "right",
+  align = "start",
+  sideOffset = 8,
+  className,
+}: SessionsHoverCardProps) {
+  const [openState, setOpenState] = useState(defaultOpen);
+  const open = openProp ?? openState;
+
+  const handleOpenChange = (next: boolean) => {
+    setOpenState(next);
+    onOpenChange?.(next);
+  };
+
+  const bodyNode = loadContent ? (
+    <LoadedBody loadContent={loadContent} fallback={loadingFallback} />
+  ) : typeof body === "function" ? (
+    <RenderBody render={body} open={open} />
+  ) : (
+    body
+  );
+
+  return (
+    <HoverCard
+      open={open}
+      onOpenChange={handleOpenChange}
+      openDelay={openDelay}
+      closeDelay={closeDelay}
+    >
+      <HoverCardTrigger asChild>{children}</HoverCardTrigger>
+      <HoverCardContent
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn("w-64 p-3", className)}
+      >
+        {header ? (
+          <div className="mb-2 text-sm font-medium text-foreground">{header}</div>
+        ) : null}
+        {bodyNode != null ? (
+          <div className="text-sm text-muted-foreground">{bodyNode}</div>
+        ) : null}
+        {footer ? (
+          <div className="mt-2 text-xs text-muted-foreground">{footer}</div>
+        ) : null}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

package/shell/src/index.ts

@@ -4,3 +4,8 @@ export { PillTabs } from "./PillTabs.js";
 export type { PillTabItem, PillTabsProps } from "./PillTabs.js";
 export { cn } from "./cn.js";
 export type { ClassValue } from "./cn.js";
+export { SessionsHoverCard } from "./SessionsHoverCard.js";
+export type {
+  SessionsHoverCardContext,
+  SessionsHoverCardProps,
+} from "./SessionsHoverCard.js";

package/src/ai-elements/artifact.tsx

@@ -46,7 +46,7 @@ export const ArtifactDescription = ({
   className,
   ...props
 }: ArtifactDescriptionProps) => (
-  <p className={cn("text-xs text-muted", className)} {...props} />
+  <p className={cn("text-xs text-muted-foreground", className)} {...props} />
 );
 
 export type ArtifactActionsProps = ComponentProps<"div">;

package/src/ai-elements/attachments.tsx

@@ -212,7 +212,7 @@ export const AttachmentPreview = ({
   const { data, mediaCategory, variant } = useAttachmentContext();
   const iconSize = variant === "inline" ? "size-3" : "size-4";
   const renderIcon = (Icon: typeof IconPhoto) => (
-    <Icon className={cn(iconSize, "text-muted")} />
+    <Icon className={cn(iconSize, "text-muted-foreground")} />
   );
   const renderContent = () => {
     if (mediaCategory === "image" && data.type === "file" && data.url) {
@@ -259,7 +259,7 @@ export const AttachmentInfo = ({
     <div className={cn("min-w-0 flex-1", className)} {...props}>
       <span className="block truncate">{label}</span>
       {showMediaType && data.mediaType && (
-        <span className="block truncate text-muted text-xs">
+        <span className="block truncate text-muted-foreground text-xs">
           {data.mediaType}
         </span>
       )}
@@ -356,7 +356,7 @@ export const AttachmentEmpty = ({
 }: AttachmentEmptyProps) => (
   <div
     className={cn(
-      "flex items-center justify-center p-4 text-muted text-sm",
+      "flex items-center justify-center p-4 text-muted-foreground text-sm",
       className,
     )}
     {...props}

package/src/ai-elements/chain-of-thought.tsx

@@ -75,7 +75,7 @@ export function ChainOfThoughtHeader({
     <Collapsible onOpenChange={setIsOpen} open={isOpen}>
       <CollapsibleTrigger
         className={cn(
-          "flex w-full items-center gap-2 text-muted text-sm transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
           className,
         )}
         {...props}
@@ -102,8 +102,8 @@ export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
 };
 const stepStatusStyles = {
   active: "text-foreground",
-  complete: "text-muted",
-  pending: "text-muted/50",
+  complete: "text-muted-foreground",
+  pending: "text-muted-foreground/50",
 };
 export function ChainOfThoughtStep({
   className,
@@ -130,7 +130,7 @@ export function ChainOfThoughtStep({
       </div>
       <div className="flex-1 space-y-2 overflow-hidden">
         <div>{label}</div>
-        {description && <div className="text-muted text-xs">{description}</div>}
+        {description && <div className="text-muted-foreground text-xs">{description}</div>}
         {children}
       </div>
     </div>
@@ -206,7 +206,7 @@ export function ChainOfThoughtImage({
       >
         {children}
       </div>
-      {caption && <p className="text-muted text-xs">{caption}</p>}
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
     </div>
   );
 }

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

@@ -211,7 +211,7 @@ const LINE_NUMBER_CLASSES = cn(
   "before:w-8",
   "before:mr-4",
   "before:text-right",
-  "before:text-muted/50",
+  "before:text-muted-foreground/50",
   "before:font-mono",
   "before:select-none",
 );
@@ -285,7 +285,7 @@ export const CodeBlockHeader = ({
     className={cn(
       cn(
         flatPanelSubtleClass,
-        "flex items-center justify-between px-3 py-2 text-muted text-xs",
+        "flex items-center justify-between px-3 py-2 text-muted-foreground text-xs",
       ),
       className,
     )}

package/src/ai-elements/conversation.tsx

@@ -51,10 +51,10 @@ export const ConversationEmptyState = ({
   >
     {children ?? (
       <>
-        {icon && <div className="text-muted">{icon}</div>}
+        {icon && <div className="text-muted-foreground">{icon}</div>}
         <div className="space-y-1">
           <h3 className="font-medium text-sm">{title}</h3>
-          {description && <p className="text-muted text-sm">{description}</p>}
+          {description && <p className="text-muted-foreground text-sm">{description}</p>}
         </div>
       </>
     )}

package/src/ai-elements/inline-citation.tsx

@@ -147,7 +147,7 @@ export const InlineCitationCarouselIndex = ({
   return (
     <div
       className={cn(
-        "flex flex-1 items-center justify-end px-3 py-1 text-muted text-xs",
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
         className,
       )}
       {...props}
@@ -178,7 +178,7 @@ export const InlineCitationCarouselPrev = ({
       type="button"
       {...props}
     >
-      <IconArrowLeft className="size-4 text-muted" />
+      <IconArrowLeft className="size-4 text-muted-foreground" />
     </button>
   );
 };
@@ -204,7 +204,7 @@ export const InlineCitationCarouselNext = ({
       type="button"
       {...props}
     >
-      <IconArrowRight className="size-4 text-muted" />
+      <IconArrowRight className="size-4 text-muted-foreground" />
     </button>
   );
 };
@@ -225,9 +225,9 @@ export const InlineCitationSource = ({
     {title && (
       <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
     )}
-    {url && <p className="truncate break-all text-muted text-xs">{url}</p>}
+    {url && <p className="truncate break-all text-muted-foreground text-xs">{url}</p>}
     {description && (
-      <p className="line-clamp-3 text-muted text-sm leading-relaxed">
+      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
         {description}
       </p>
     )}
@@ -242,7 +242,7 @@ export const InlineCitationQuote = ({
 }: InlineCitationQuoteProps) => (
   <blockquote
     className={cn(
-      "border-l-2 border-separator pl-3 text-muted text-sm italic",
+      "border-l-2 border-separator pl-3 text-muted-foreground text-sm italic",
       className,
     )}
     {...props}

package/src/ai-elements/message.tsx

@@ -34,7 +34,7 @@ export const MessageContent = ({
   <div
     className={cn(
       "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
-      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-accent group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-accent-foreground",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-primary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-primary-foreground",
       "group-[.is-assistant]:px-0 group-[.is-assistant]:text-foreground",
       className,
     )}
@@ -242,7 +242,7 @@ export const MessageBranchPage = ({
   return (
     <ButtonGroupText
       className={cn(
-        "border-none bg-transparent text-muted shadow-none",
+        "border-none bg-transparent text-muted-foreground shadow-none",
         className,
       )}
       {...props}