@vvedantb/ui 0.1.5 → 0.2.1

package/app/src/settings/SettingsSection.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../cn.js";
+
+type SettingsSectionBodyVariant = "form" | "list" | "compact";
+
+const BODY_VARIANT_CLASS: Record<SettingsSectionBodyVariant, string> = {
+  form: "px-4 py-5",
+  list: "divide-y divide-separator/50 p-0",
+  compact: "px-4 py-3",
+};
+
+interface SettingsSectionProps {
+  /** Section heading. Kept short — the description carries the detail. */
+  title: ReactNode;
+  /** Supporting copy shown under the heading. */
+  description?: ReactNode;
+  /** Control pinned to the top-right of the heading, e.g. a switch or link. */
+  action?: ReactNode;
+  /** Controls pinned to a bottom bar, e.g. a Save button. */
+  footer?: ReactNode;
+  children?: ReactNode;
+  /**
+   * Body padding contract. Prefer this over freelancing `bodyClassName` padding.
+   * - form: default labelled fields
+   * - list: edge-to-edge divided rows (`p-0`)
+   * - compact: tighter padding for dense controls
+   */
+  bodyVariant?: SettingsSectionBodyVariant;
+  /** Applied to the body wrapper, for one-off layout (grids, etc.). */
+  bodyClassName?: string;
+  className?: string;
+}
+
+/**
+ * The single container for a block of settings.
+ *
+ * Title and description sit on the canvas above the card so they read as a
+ * section caption. The card is only the controls (and optional footer).
+ * Shared across apps.
+ */
+export function SettingsSection({
+  title,
+  description,
+  action,
+  footer,
+  children,
+  bodyVariant = "form",
+  bodyClassName,
+  className,
+}: SettingsSectionProps) {
+  const hasBody = children != null;
+  const hasCard = hasBody || footer != null;
+
+  return (
+    <section className={cn("flex flex-col gap-2", className)}>
+      <header className="flex items-start justify-between gap-4 px-4">
+        <div className="min-w-0">
+          <h3 className="text-balance text-sm font-semibold text-foreground">
+            {title}
+          </h3>
+          {description ? (
+            <p className="mt-0.5 text-pretty text-sm leading-relaxed text-muted-foreground">
+              {description}
+            </p>
+          ) : null}
+        </div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </header>
+
+      {hasCard ? (
+        <div
+          className={cn(
+            "rounded-lg bg-surface-card [&_input]:bg-field-background [&_textarea]:bg-field-background [&_[data-slot=select-trigger]]:bg-field-background [&_[role=combobox]]:border-border [&_[role=combobox]]:bg-field-background",
+            bodyVariant === "list" && "overflow-hidden",
+          )}
+        >
+          {hasBody ? (
+            <div className={cn(BODY_VARIANT_CLASS[bodyVariant], bodyClassName)}>
+              {children}
+            </div>
+          ) : null}
+          {footer ? (
+            <div className="flex items-center justify-end gap-2 rounded-b-lg bg-surface-secondary px-4 py-3">
+              {footer}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}

package/app/src/settings/SettingsStack.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../cn.js";
+
+/**
+ * Vertical rhythm for every settings page body — one gap, no page-local freelancing.
+ * Shared across apps.
+ */
+export function SettingsStack({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <div className={cn("space-y-8", className)}>{children}</div>;
+}

package/app/src/settings/SettingsToggleRow.tsx

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import { cn } from "../cn.js";
+
+interface SettingsToggleRowProps {
+  title: ReactNode;
+  description?: ReactNode;
+  action: ReactNode;
+  htmlFor?: string;
+  className?: string;
+}
+
+/**
+ * One preference row inside a `SettingsSection` with `bodyVariant="list"`.
+ * Put rows as direct children — the section owns the dividers.
+ * Shared across apps.
+ */
+export function SettingsToggleRow({
+  title,
+  description,
+  action,
+  htmlFor,
+  className,
+}: SettingsToggleRowProps) {
+  const titleClassName =
+    "text-sm font-medium max-sm:break-words text-foreground";
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-4 px-4 py-3",
+        className,
+      )}
+    >
+      <div className="min-w-0">
+        {htmlFor ? (
+          <label htmlFor={htmlFor} className={titleClassName}>
+            {title}
+          </label>
+        ) : (
+          <p className={titleClassName}>{title}</p>
+        )}
+        {description ? (
+          <p className="mt-1 text-pretty text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      <div className="flex min-h-10 shrink-0 items-center">{action}</div>
+    </div>
+  );
+}

package/app/src/update/deployFingerprint.ts

@@ -0,0 +1,27 @@
+/**
+ * Build fingerprint from deployed index HTML — Vite hashed `/assets/*.js`
+ * URLs change on every production deploy, so a mismatch means a new build.
+ */
+export function fingerprintFromHtml(html: string): string | null {
+  const matches = html.match(/\/assets\/[^"'?\s]+\.js/g);
+  if (!matches || matches.length === 0) return null;
+  return [...new Set(matches)].sort().join("|");
+}
+
+/** Fetch the live document root and return its asset fingerprint. */
+export async function fetchDeployFingerprint(
+  origin: string,
+): Promise<string | null> {
+  try {
+    const url = `${origin}/?_vb=${Date.now()}`;
+    const response = await fetch(url, {
+      cache: "no-store",
+      headers: { Accept: "text/html" },
+    });
+    if (!response.ok) return null;
+    const html = await response.text();
+    return fingerprintFromHtml(html);
+  } catch {
+    return null;
+  }
+}

package/app/src/update/updateWatcher.ts

@@ -0,0 +1,100 @@
+import { fetchDeployFingerprint } from "./deployFingerprint.js";
+
+export type UpdateToastOptions = {
+  id: string;
+  description: string;
+  duration: number;
+  action: { label: string; onClick: () => void };
+};
+
+export type UpdateAvailableWatcherOptions = {
+  /** Origin to poll, usually `window.location.origin`. */
+  origin: string;
+  /** Toast API. Pass sonner's `toast`, or a fake in tests. */
+  toast: { message: (title: string, opts: UpdateToastOptions) => void };
+  /** Close the Convex socket before reload. Errors are swallowed. */
+  closeConvex?: () => void;
+  /** Poll interval in ms. Default 60000. */
+  pollMs?: number;
+  toastId?: string;
+  /** Pass `!import.meta.env.DEV`. When false, nothing starts. Default true. */
+  enabled?: boolean;
+  /** Reload hook. Default `window.location.reload()`. */
+  reload?: () => void;
+};
+
+const DEFAULT_POLL_MS = 60_000;
+const DEFAULT_TOAST_ID = "app-update-available";
+
+/**
+ * Poll the live index HTML for a new Vite asset fingerprint (and re-check when
+ * the tab becomes visible). Shows a sticky "Update available" toast with a
+ * Refresh action when a newer deploy is serving. Returns a stop function.
+ */
+export function startUpdateAvailableWatcher(
+  options: UpdateAvailableWatcherOptions,
+): () => void {
+  const {
+    origin,
+    toast,
+    closeConvex,
+    pollMs = DEFAULT_POLL_MS,
+    toastId = DEFAULT_TOAST_ID,
+    enabled = true,
+    reload = () => window.location.reload(),
+  } = options;
+  if (!enabled) return () => {};
+
+  let cancelled = false;
+  let shown = false;
+  let baseline: string | null = null;
+
+  const showToast = (): void => {
+    if (shown) return;
+    shown = true;
+    toast.message("Update available", {
+      id: toastId,
+      description: "Refresh to load the latest version.",
+      duration: Number.POSITIVE_INFINITY,
+      action: {
+        label: "Refresh",
+        onClick: () => {
+          try {
+            closeConvex?.();
+          } catch {
+            // socket may already be closed during teardown
+          }
+          reload();
+        },
+      },
+    });
+  };
+
+  const check = async (): Promise<void> => {
+    if (cancelled || shown) return;
+    const next = await fetchDeployFingerprint(origin);
+    if (cancelled || next === null) return;
+    if (baseline === null) {
+      baseline = next;
+      return;
+    }
+    if (next !== baseline) showToast();
+  };
+
+  void check();
+  const intervalId = setInterval(() => {
+    if (document.visibilityState !== "visible") return;
+    void check();
+  }, pollMs);
+
+  const onVisibility = (): void => {
+    if (document.visibilityState === "visible") void check();
+  };
+  document.addEventListener("visibilitychange", onVisibility);
+
+  return () => {
+    cancelled = true;
+    clearInterval(intervalId);
+    document.removeEventListener("visibilitychange", onVisibility);
+  };
+}

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "license": "MIT",
-  "description": "Shared React 19 UI primitives for vmem, vibot and Verve.",
+  "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",
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vvedantb/vv-ui.git",
+    "url": "git+https://github.com/vvedantb/ui.git",
     "directory": "packages/ui"
   },
   "exports": {
@@ -20,17 +20,63 @@
     "./cn": {
       "types": "./src/utils/cn.ts",
       "default": "./src/utils/cn.ts"
-    }
+    },
+    "./shell": {
+      "types": "./shell/src/index.ts",
+      "default": "./shell/src/index.ts"
+    },
+    "./app": {
+      "types": "./app/src/index.ts",
+      "default": "./app/src/index.ts"
+    },
+    "./tokens": "./tokens/src/tokens.css",
+    "./tokens/tokens.css": "./tokens/src/tokens.css",
+    "./tokens/native": {
+      "types": "./tokens/src/native.ts",
+      "default": "./tokens/src/native.ts"
+    },
+    "./tokens/css/index.css": "./tokens/src/css/index.css",
+    "./tokens/css/base.css": "./tokens/src/css/base.css",
+    "./tokens/css/dialog.css": "./tokens/src/css/dialog.css",
+    "./tokens/css/modal.css": "./tokens/src/css/modal.css",
+    "./tokens/css/tabs.css": "./tokens/src/css/tabs.css",
+    "./tokens/css/tabs-pills.css": "./tokens/src/css/tabs-pills.css",
+    "./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",
+      "default": "./tokens/src/tailwind-preset.mjs"
+    },
+    "./package.json": "./package.json"
   },
   "types": "./src/index.ts",
   "files": [
     "src",
+    "shell/src",
+    "app/src",
+    "tokens/src",
+    "tokens/examples",
+    "README.md",
     "LICENSE"
   ],
   "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",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -55,7 +101,7 @@
     "@streamdown/math": "*",
     "@streamdown/mermaid": "*",
     "@tabler/icons-react": "^3.35.0",
-    "@vvedantb/tokens": "*",
+    "@tanstack/react-hotkeys": "*",
     "ai": ">=5.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -71,9 +117,11 @@
     "streamdown": "*",
     "tailwind-merge": "^2.6.0",
     "use-stick-to-bottom": "^1.1.0",
-    "vaul": "^1.1.0"
+    "vaul": "^1.1.0",
+    "zod": "^3.25.0 || ^4.0.0"
   },
   "devDependencies": {
+    "@clerk/clerk-react": "^5.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
@@ -98,6 +146,8 @@
     "@streamdown/math": "*",
     "@streamdown/mermaid": "*",
     "@tabler/icons-react": "^3.35.0",
+    "@tailwindcss/node": "4.3.3",
+    "@tanstack/react-hotkeys": "^0.13.0",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "ai": "^5.0.0",
@@ -105,6 +155,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
+    "happy-dom": "^18.0.0",
     "motion": "^12.0.0",
     "nanoid": "^5.1.0",
     "radix-ui": "^1.4.0",
@@ -114,13 +165,22 @@
     "sonner": "^2.0.3",
     "streamdown": "*",
     "tailwind-merge": "^2.6.0",
+    "tailwindcss": "4.3.3",
     "typescript": "^5.9.0",
     "use-stick-to-bottom": "^1.1.0",
     "vaul": "^1.1.0",
-    "@vvedantb/tokens": "0.1.0"
+    "vitest": "^3.2.0",
+    "zod": "^4.0.0"
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json"
+  "peerDependenciesMeta": {
+    "@clerk/clerk-react": {
+      "optional": true
+    },
+    "@tanstack/react-hotkeys": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   }
-}
+}

package/shell/src/PillTabs.tsx

@@ -0,0 +1,86 @@
+import type { KeyboardEvent, ReactNode } from "react";
+import { cn } from "./cn.js";
+
+export type PillTabItem = {
+  value: string;
+  label: string;
+  icon?: ReactNode;
+};
+
+export type PillTabsProps = {
+  tabs: PillTabItem[];
+  value: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+};
+
+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-foreground hover:bg-default/50 hover:text-foreground";
+const tabSelected = "bg-default text-foreground";
+
+export function PillTabs({ tabs, value, onValueChange, className }: PillTabsProps) {
+  // Arrow keys, Home and End move focus and selection (WAI-ARIA tabs pattern).
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    const count = tabs.length;
+    if (count === 0) return;
+    const current = Math.max(
+      0,
+      tabs.findIndex((tab) => tab.value === value),
+    );
+    let next: number;
+    switch (event.key) {
+      case "ArrowRight":
+        next = (current + 1) % count;
+        break;
+      case "ArrowLeft":
+        next = (current - 1 + count) % count;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = count - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const buttons = event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]');
+    buttons[next]?.focus();
+    onValueChange?.(tabs[next]!.value);
+  }
+
+  const hasSelection = tabs.some((tab) => tab.value === value);
+
+  return (
+    <div
+      role="tablist"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      onKeyDown={onKeyDown}
+    >
+      {tabs.map((tab, index) => {
+        const selected = tab.value === value;
+        const focusable = selected || (!hasSelection && index === 0);
+        return (
+          <button
+            key={tab.value}
+            type="button"
+            role="tab"
+            aria-selected={selected}
+            tabIndex={focusable ? 0 : -1}
+            className={cn(tabBase, selected ? tabSelected : tabIdle)}
+            onClick={() => onValueChange?.(tab.value)}
+          >
+            {tab.icon ? (
+              <span aria-hidden="true" className="inline-flex shrink-0">
+                {tab.icon}
+              </span>
+            ) : null}
+            <span>{tab.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/shell/src/SidebarHeader.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { cn } from "./cn.js";
+
+export type SidebarHeaderProps = {
+  title: string;
+  trailing?: ReactNode;
+  className?: string;
+};
+
+export function SidebarHeader({ title, trailing, className }: SidebarHeaderProps) {
+  return (
+    <div className={cn("flex h-11 items-center gap-1 pl-3 pr-1", className)}>
+      <h2 className="min-w-0 flex-1 truncate text-left text-base font-semibold leading-none tracking-tight text-foreground">
+        {title}
+      </h2>
+      {trailing ? (
+        <div className="flex items-center justify-end gap-0.5">{trailing}</div>
+      ) : null}
+    </div>
+  );
+}

package/shell/src/cn.ts

@@ -0,0 +1,5 @@
+export type ClassValue = string | false | null | undefined;
+
+export function cn(...classes: ClassValue[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/shell/src/index.ts

@@ -0,0 +1,6 @@
+export { SidebarHeader } from "./SidebarHeader.js";
+export type { SidebarHeaderProps } from "./SidebarHeader.js";
+export { PillTabs } from "./PillTabs.js";
+export type { PillTabItem, PillTabsProps } from "./PillTabs.js";
+export { cn } from "./cn.js";
+export type { ClassValue } from "./cn.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

@@ -6,7 +6,7 @@ import { Button } from "../ui/button";
 import { cn } from "../utils/cn";
 import { flatInteractiveClass } from "../ui/surface-classes";
 import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
-import { fastTransition } from "../motion/presets.vibot";
+import { fastTransition } from "../motion/presets.alt";
 export type ConversationProps = ComponentProps<typeof StickToBottom>;
 export const Conversation = ({ className, ...props }: ConversationProps) => (
   <StickToBottom
@@ -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>
       </>
     )}