@vvedantb/ui 0.2.0 → 0.2.1

package/README.md

@@ -9,7 +9,8 @@ Shared React 19 web UI. Source-exported: no build step.
 | `@vvedantb/ui/shell` | Router-free `SidebarHeader` and `PillTabs`. |
 | `@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,30 @@ Shared React 19 web UI. Source-exported: no build step.
 @source "../node_modules/@vvedantb/ui/src/**/*.{ts,tsx}";
 ```
 
+## 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.1",
   "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",
@@ -64,6 +66,15 @@
   "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 +182,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/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}

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

@@ -774,7 +774,7 @@ export const PromptInputButton = ({
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent side={side}>
         {tooltipContent}
-        {shortcut && <span className="ml-2 text-muted">{shortcut}</span>}
+        {shortcut && <span className="ml-2 text-muted-foreground">{shortcut}</span>}
       </TooltipContent>
     </Tooltip>
   );
@@ -871,7 +871,7 @@ export const PromptInputModelSelectTrigger = ({
 }: PromptInputModelSelectTriggerProps) => (
   <SelectTrigger
     className={cn(
-      "border-none bg-transparent font-medium text-muted shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
       "hover:bg-surface-secondary hover:text-foreground",
       segmentExpandedStateClass,
       className,
@@ -943,7 +943,7 @@ export const PromptInputTabLabel = ({
   ...props
 }: PromptInputTabLabelProps) => (
   <h3
-    className={cn("mb-2 px-3 font-medium text-muted text-xs", className)}
+    className={cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className)}
     {...props}
   />
 );

package/src/ai-elements/queue.tsx

@@ -73,7 +73,7 @@ export function QueueHeader({
       )}
     >
       <div className="flex items-center gap-2">
-        <IconStack2 size={16} className="text-muted" />
+        <IconStack2 size={16} className="text-muted-foreground" />
         <span className="text-sm font-medium text-foreground">
           Queued Messages
         </span>
@@ -84,7 +84,7 @@ export function QueueHeader({
       <IconChevronDown
         size={16}
         className={cn(
-          "text-muted transition-transform duration-200 ease-out",
+          "text-muted-foreground transition-transform duration-200 ease-out",
           isOpen && "rotate-180",
         )}
       />

package/src/ai-elements/reasoning.tsx

@@ -137,7 +137,7 @@ export function ReasoningTrigger({
   return (
     <CollapsibleTrigger
       className={cn(
-        "flex w-full items-center gap-2 py-1 text-sm text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+        "flex w-full items-center gap-2 py-1 text-sm text-muted-foreground transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
         className,
       )}
       {...props}

package/src/ai-elements/shimmer.tsx

@@ -26,11 +26,11 @@ function Shimmer({
     "--spread": `${totalSpread}px`,
     "--bg": `linear-gradient(
             90deg,
-            var(--muted) 0%,
-            var(--foreground) calc(50% - var(--spread)),
-            var(--muted) 50%,
-            var(--foreground) calc(50% + var(--spread)),
-            var(--muted) 100%
+            var(--color-muted-foreground, var(--muted)) 0%,
+            var(--color-foreground, var(--foreground)) calc(50% - var(--spread)),
+            var(--color-muted-foreground, var(--muted)) 50%,
+            var(--color-foreground, var(--foreground)) calc(50% + var(--spread)),
+            var(--color-muted-foreground, var(--muted)) 100%
           )`,
     backgroundImage: "var(--bg)",
     backgroundSize: "200% 100%",

package/src/ai-elements/sources.tsx

@@ -28,7 +28,7 @@ export const SourcesTrigger = ({
 }: SourcesTriggerProps) => (
   <CollapsibleTrigger
     className={cn(
-      "group inline-flex items-center gap-1.5 text-xs text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
+      "group inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ export const Source = ({
 }: SourceProps) => (
   <a
     className={cn(
-      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
+      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
       className,
     )}
     href={href}

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

@@ -251,7 +251,7 @@ export const SpeechInput = ({
           "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
           isListening
             ? "bg-danger text-danger-foreground hover:bg-danger/80 hover:text-danger-foreground"
-            : "bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
+            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
           className,
         )}
         disabled={isDisabled}

package/src/ai-elements/suggestion.tsx

@@ -176,7 +176,7 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted hover:bg-surface-tertiary hover:text-foreground",
+        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
         className,
       )}
       onClick={handleClick}

package/src/ui/_menu-classes.alt.ts

@@ -26,8 +26,8 @@ export const menuCheckboxRadioItemClass =
   "relative flex cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2.5 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
 
 export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground";
 
 export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
 
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted-foreground/90";

package/src/ui/_menu-classes.ts

@@ -23,8 +23,8 @@ export const menuCheckboxRadioItemClass =
   "relative flex cursor-pointer select-none items-center rounded-md py-2 max-sm:min-h-10 pl-8 pr-2.5 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
 
 export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground";
 
 export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
 
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted-foreground/90";

package/src/ui/accordion.alt.tsx

@@ -31,7 +31,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <IconChevronDown className="h-4 w-4 shrink-0 text-muted transition-transform duration-200" />
+      <IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0 text-muted", className)}>
+    <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>
       {children}
     </div>
   </AccordionPrimitive.Content>

package/src/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
         default: "border-border bg-default text-foreground",
         secondary: "border-separator bg-default text-default-foreground",
         destructive: "border-danger/25 bg-danger/12 text-danger",
-        outline: "border-separator bg-transparent text-muted",
+        outline: "border-separator bg-transparent text-muted-foreground",
         success: "border-success/25 bg-success/12 text-success",
         warning: "border-warning/25 bg-warning/12 text-warning",
       },

package/src/ui/breadcrumb.tsx

@@ -48,7 +48,7 @@ const BreadcrumbLink = React.forwardRef<
     <Comp
       ref={ref}
       className={cn(
-        "min-w-0 truncate font-medium text-muted transition-colors hover:text-foreground",
+        "min-w-0 truncate font-medium text-muted-foreground transition-colors hover:text-foreground",
         className,
       )}
       {...props}
@@ -74,7 +74,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 // separator rendered automatically between breadcrumb children
 const BreadcrumbSeparator = () => (
-  <span aria-hidden className="flex-shrink-0 text-muted/40">
+  <span aria-hidden className="flex-shrink-0 text-muted-foreground/40">
     /
   </span>
 );

package/src/ui/button.tsx

@@ -9,14 +9,14 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-accent text-accent-foreground hover:-translate-y-0.5 hover:opacity-90",
+          "bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90",
         destructive:
           "bg-[oklch(47.2%_0.195_25.7)] text-white hover:bg-[oklch(42.5%_0.185_25.7)]",
         outline:
           "border border-border bg-transparent text-foreground hover:bg-default",
         secondary: "bg-default text-default-foreground hover:bg-default/78",
-        ghost: "text-muted hover:bg-surface-tertiary hover:text-foreground",
-        link: "text-accent underline-offset-4 hover:underline active:scale-100",
+        ghost: "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
       },
       size: {
         default: "h-10 px-4 py-2",