@vvedantb/ui 0.1.5 → 0.2.0

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">
+            {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.0",
   "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,52 @@
     "./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/*.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"
   ],
   "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 +90,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 +106,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 +135,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 +144,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 +154,29 @@
     "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"
+  },
+  "peerDependenciesMeta": {
+    "@clerk/clerk-react": {
+      "optional": true
+    },
+    "@tanstack/react-hotkeys": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json"
+    "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

@@ -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 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/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

package/src/ai-elements/suggestion.tsx

@@ -6,7 +6,7 @@ import { cn } from "../utils/cn";
 import { flatInteractiveClass } from "../ui/surface-classes";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { AnimatePresence, motion } from "motion/react";
-import { fastTransition } from "../motion/presets.vibot";
+import { fastTransition } from "../motion/presets.alt";
 export type SuggestionsProps = {
   className?: string;
   children?: ReactNode;

package/src/index.ts

@@ -1,4 +1,4 @@
-// Colour, radius, shadow and font tokens live in @vvedantb/tokens. Import that
+// Colour, radius, shadow and font tokens live in @vvedantb/ui/tokens. Import that
 // stylesheet in the app. This package does not ship a second token set.
 export { cn } from "./utils/cn";
 export { floatingSurfaceClass } from "./ui/_menu-classes";
@@ -55,30 +55,30 @@ export * from "./ui/sheet";
 export * from "./ui/visually-hidden";
 export * from "./ui/clearInputDissolve";
 
-// Dual copies: richer file uses the plain name; the other keeps a suffix.
+// Dual copies: the richer file uses the plain name; the other keeps an `Alt` suffix.
 export * from "./ui/accordion";
 export {
-  Accordion as AccordionVerve,
-  AccordionItem as AccordionItemVerve,
-  AccordionTrigger as AccordionTriggerVerve,
-  AccordionContent as AccordionContentVerve,
-} from "./ui/accordion.verve";
+  Accordion as AccordionAlt,
+  AccordionItem as AccordionItemAlt,
+  AccordionTrigger as AccordionTriggerAlt,
+  AccordionContent as AccordionContentAlt,
+} from "./ui/accordion.alt";
 export * from "./ui/clear-input";
-export { ClearInput as ClearInputVibot } from "./ui/clear-input.vibot";
+export { ClearInput as ClearInputAlt } from "./ui/clear-input.alt";
 export * from "./ui/input-group";
 export {
-  InputGroup as InputGroupVerve,
-  InputGroupAddon as InputGroupAddonVerve,
-  InputGroupButton as InputGroupButtonVerve,
-  InputGroupText as InputGroupTextVerve,
-  InputGroupInput as InputGroupInputVerve,
-  InputGroupTextarea as InputGroupTextareaVerve,
-} from "./ui/input-group.verve";
+  InputGroup as InputGroupAlt,
+  InputGroupAddon as InputGroupAddonAlt,
+  InputGroupButton as InputGroupButtonAlt,
+  InputGroupText as InputGroupTextAlt,
+  InputGroupInput as InputGroupInputAlt,
+  InputGroupTextarea as InputGroupTextareaAlt,
+} from "./ui/input-group.alt";
 export * from "./ui/scroll-area";
 export {
-  ScrollArea as ScrollAreaVerve,
-  ScrollBar as ScrollBarVerve,
-} from "./ui/scroll-area.verve";
+  ScrollArea as ScrollAreaAlt,
+  ScrollBar as ScrollBarAlt,
+} from "./ui/scroll-area.alt";
 
 export * from "./ai-elements/artifact";
 export * from "./ai-elements/attachments";

package/src/ui/{_menu-classes.vibot.ts → _menu-classes.alt.ts}

@@ -1,4 +1,4 @@
-/** Eva-aligned floating overlay shell — tone + smooth-shadow-ring, no hairline. */
+/** Floating overlay shell: tone + smooth-shadow-ring, no hairline. */
 export const floatingSurfaceClass =
   "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg";
 
@@ -9,7 +9,7 @@ export const floatingSurfaceAnimateClass = [
   "origin-(--radix-popper-transform-origin) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:duration-200 data-[state=closed]:duration-150 data-[state=open]:ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:ease-[cubic-bezier(0.32,0.72,0,1)]",
 ].join(" ");
 
-/** Shared floating menu surfaces — matches Eva's popover + smooth-shadow-ring-lg. */
+/** Shared floating menu surfaces: popover tone + smooth-shadow-ring-lg. */
 export const menuContentClass = [
   "z-50 min-w-48 overflow-hidden p-1.5 outline-hidden",
   floatingSurfaceClass,

package/src/ui/_menu-classes.ts

@@ -1,4 +1,4 @@
-// eva-aligned floating overlay: tone + smooth-shadow-ring, never border+shadow
+// floating overlay: tone + smooth-shadow-ring, never border+shadow
 export const floatingSurfaceClass =
   "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg max-sm:max-w-[calc(100vw-2rem)]";
 
@@ -6,7 +6,7 @@ export const floatingSurfaceAnimateClass = [
   "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 ].join(" ");
 
-// shared floating menu surfaces, matches eva popover + smooth-shadow-ring-lg
+// shared floating menu surfaces: popover tone + smooth-shadow-ring-lg
 export const menuContentClass = [
   "z-50 min-w-[12rem] overflow-hidden p-1.5 outline-none max-sm:max-h-[85dvh] max-sm:overflow-y-auto",
   floatingSurfaceClass,